Naming cheatsheet

• 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.

English language

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.

Naming convention

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

Twin blends the magic of Tailwind with the flexibility of css-in-js



Demo twin on CodeSandbox →

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]} />
)

Styled Components

You can also use the…

Supabase

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

• Hosted Postgres Database
• Realtime subscriptions
• Authentication and authorization
• Auto-generated APIs
• Dashboard
• Storage
• Functions (coming soon)

Documentation

For full documentation, visit supabase.io/docs

Community & Support

• 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 you applications and hanging out with the community.

Status

• Alpha: We are testing Supabase with a closed set of customers
• Public Alpha: Anyone can sign up over at app.supabase.io. But go easy on us, there are a few kinks
• Public Beta: Stable enough for most non-enterprise use-cases
• Public: Production-ready

We are currently in Public Beta. Watch "releases" of this repo to get notified of major…

Polaris React

Polaris React is a component library designed to help developers create the best experience for merchants who use Shopify. Visit the Polaris style guide to learn more.

App development

For more information about creating apps for the Shopify App Store, take a look at the app development documentation.

Using the React components

While we do offer a CSS-only version, we strongly recommend using the React versions of our components. It’s the version that we use at Shopify. It allows for rich, complex components like Tabs and Popovers, and will not have as many breaking changes as the CSS-only version.

Installation

Run the following command using npm:

npm install @shopify/polaris --save

If you prefer Yarn, use the following command instead:

yarn add @shopify/polaris

Usage

1. Import the CSS directly into your project if your asset packager supports it:

import '@shopify/polaris/dist/styles.css';

Otherwise include the CSS in…

Docs Twitter

Amplication is an open‑source development tool. It helps professional Node.js developers develop quality Node.js applications without spending time on repetitive coding tasks.

Amplication auto-generates backend apps built with TypeScript and Node.js, and a client built with React

Getting Started

Try amplication immediately on app.amplication.com or follow the instructions to run a local instance.

Features

Build database applications with:

• Manage data models visually or through CLI
• Auto-generated human-editable source code
• Node.js server built with Nest.js and Passport
• REST API and GraphQL for CRUD with relations, sorting, filtering, pagination
• Custom code generated app
• Admin UI built with React-Admin
• Role-based access control
• Docker and docker-compose integration
• Automatic push of the generated code to your GitHub repo

See Amplication website or Amplication docs for more details.

Watch this video for a quick recap of everything you get with Amplication.

Development

Amplication is constructed of multiple packages. To start working on Amplication follow…

sapper

The next small thing in web development, powered by Svelte.

What is Sapper?

Sapper is a framework for building high-performance universal web apps. Read the guide or the introductory blog post to learn more.

SvelteKit

Sapper's successor, SvelteKit, is currently available for use. Please see the FAQ for more details.

Get started

Clone the starter project template with degit When cloning you have to choose between rollup or webpack:

npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app

...then install dependencies and start the dev server...

cd my-app
npm install
npm run dev

...and navigate to localhost:3000. To build and run in production mode:

npm run build
npm start

Development

Pull requests are encouraged and always welcome. Pick an issue and help us out!

To install and work on Sapper locally:

git clone https://github.com/sveltejs/sapper.git
cd sapper
npm install
npm run dev

Linking to

React Tracked

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

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

Introduction

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

Docs

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

Quicklinks to some of the most-visited pages:

• Getting started
• Motivation

Example

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.

Table of Contents

• 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

Screenshot

https://codesandbox.io/s/xpm699v4lp

Live Demo

Storybook

Storybook

CodeSandbox

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

Install

• use npm

npm i -S react-rnd

• use yarn

yarn add react-rnd

Usage

Example with default

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

Example with position and size

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

Whirl

CSS loading animations with minimal effort!

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 👍

No CSS distro?

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.

Usage

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…