• English language
• Naming convention
• S-I-D
• Avoid contractions
• Avoid context duplication
• Reflect the expected result
• Naming functions
  • A/HC/LC pattern
    • Actions
    • Context
    • Prefixes
• Singular and Plurals

Naming things is hard. This sheet attempts to make it easier.

Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.

Use English language when naming your variables and functions.

/* Bad */
const primerNombre = 'Gustavo'
const amigos = ['Kate', 'John']

/* Good */
const firstName = 'Gustavo'
const friends = ['Kate', 'John']

Like it or not, English is the dominant language in programming: the syntax of all programming languages is written in English, as well as countless documentations and educational materials. By writing your code in English you dramatically increase its cohesiveness.

Pick one naming convention and follow it. It may be camelCase…

The magic of Tailwind with the flexibility of css-in-js.

Style jsx elements using Tailwind classes:

import 'twin.macro'
const Input = () => <input tw="border hover:border-black" />

Nest Twin’s tw import within a css prop to add conditional styles:

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

Or mix sass styles with the css import:

import tw, { css } from 'twin.macro'

const hoverStyles = css`
  &:hover {
    border-color: black;
    ${tw`text-black`}
  }
`
const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && hoverStyles]} />
)

You can also use the tw import to create and style new components:

import tw

Supabase is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools.

• Hosted Postgres Database. Docs
• Authentication and Authorization. Docs
• Auto-generated APIs
  • REST. Docs
  • GraphQL. Docs
  • Realtime subscriptions. Docs
• Functions
  • Database Functions. Docs
  • Edge Functions Docs
• File Storage. Docs
• AI + Vector/Embeddings Toolkit. Docs
• Dashboard

Watch "releases" of this repo to get notified of major updates.

For full documentation, visit supabase.com/docs

To see how to Contribute, visit Getting Started

• Community Forum. Best for: help with building, discussion about database best practices.
• GitHub Issues. Best for: bugs and errors you encounter using Supabase.
• Email Support. Best for: problems with your database or infrastructure.
• Discord. Best for: sharing your applications and hanging out with the community.

Supabase is a combination of open source tools. We’re building the features of Firebase using enterprise-grade, open source…

Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.

The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── polaris-for-vscode          # VS Code extension for Polaris
├── polaris-icons               # Icons for Polaris
├── polaris-react               # Components for @shopify/polaris package
├── polaris-tokens              # Design tokens for Polaris
├── polaris.shopify.com         # Documentation website
└── stylelint-polaris           # Rules for custom property usage and mainline coverage

pnpm install && pnpm build

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

All workspaces

Run commands across all workspaces…

Instantly generate production-ready .NET and Node.js backend apps 🚀

Amplication is a robust, open-source development platform designed to revolutionize the creation of scalable and secure .NET and Node.js applications. Amplication is the only AI platform turning ideas into production-ready code in a few minutes. We automate your backend applications development, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale

Our user-friendly interface fosters seamless integration of APIs, data models, databases, authentication, and authorization. Built on a flexible, plugin-based architecture, Amplication allows effortless customization of the code and offers a diverse range of integrations.

With a strong focus on collaboration, Amplication streamlines team-oriented development, making it an ideal choice for groups of all sizes, from startups to large enterprises. Our platform enables you to concentrate on your business logic, while we handle the heavy lifting.

Experience the fastest way to develop .NET and Node.js…

Sapper is deprecated in favor of its successor, SvelteKit, which we recommend using instead.

To support Sapper, SvelteKit, and the rest of the Svelte ecosystem, please consider contributing via OpenCollective.

MIT

State usage tracking with Proxies. Optimize re-renders for useState/useReducer, React Redux, Zustand and others.

Documentation site: https://react-tracked.js.org

Preventing re-renders is one of performance issues in React Smaller apps wouldn't usually suffer from such a performance issue, but once apps have a central global state that would be used in many components. The performance issue would become a problem. For example, Redux is usually used for a single global state, and React-Redux provides a selector interface to solve the performance issue. Selectors are useful to structure state accessor, however, using selectors only for performance wouldn't be the best fit. Selectors for performance require understanding object reference equality which is non-trival for beginners and experts would still have difficulties for complex structures.

React Tracked is a library to provide so-called "state usage tracking." It's a technique to track property access of a state object and only triggers re-renders if…

A utility-first CSS-in-JS framework built for React.

npm install @xstyled/styled-components styled-components

See the documentation at xstyled.dev for more information about using xstyled!

Quicklinks to some of the most-visited pages:

• Getting started
• Motivation

import { x } from '@xstyled/styled-components'
function Example() {
  return (
    <x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
      <x.div flexShrink={0}>
        <x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
      </x.div>
      <x.div>
        <x.h4
          fontSize={{ _: 'md', lg: 'xl' }}
          fontWeight="medium"
          color="black"
        >
          xstyled
        </x.h4

A resizable and draggable component for React.

• Screenshot
• Live Demo
  • Storybook
  • CodeSandbox
• Install
• Usage
• Props
• Instance API
  • updateSize(size: { width: number | string, height: number | string }): void
  • updatePosition({ x: number, y: number }): void
• Test
• Related
• Changelog
• License

https://codesandbox.io/s/xpm699v4lp

Storybook

CodeSandbox(with default)
CodeSandbox(with size and position)
CodeSandbox(with typescript)
CodeSandbox(with hooks)

• use npm

npm i -S react-rnd

• use yarn

yarn add react-rnd

<Rnd
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200,
  }}
>
  Rnd
</Rnd>

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.

whirl is a curation of CSS loading animations(whirls! 😅). It started as a drop in CSS file to get easy animations using :pseudo elements. It's now a collection of loading animations to use, take inspiration from, change and do what you want with 👍

It's inefficient. It's likely an app will only use one or two loaders. Pulling them all into an app would be overkill. Most projects use some form of bundling making it possible to import a single loader's styles.

You've got different options here.

You can install whirl and import the styles you want. You get both CSS and SASS files 👍

npm i @jh3y/whirl
yarn add @jh3y/whirl

Alternatively, you can grab the CSS or SASS and change to your needs. There's a dynamic link in the demo. Or visit the latest versions tag branch 👍

…