DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 22nd January 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. Naming cheatsheet

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.

GitHub logo kettanaito / naming-cheatsheet

Comprehensive language-agnostic guidelines on variables naming.

Naming cheatsheet

Naming cheatsheet


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']
Enter fullscreen mode Exit fullscreen mode

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…


2. Twin

Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.

GitHub logo ben-rogerson / twin.macro

πŸ¦Ήβ€β™‚οΈ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.

twin logo

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

Total Downloads Latest Release Discord

Demo twin on CodeSandbox β†’


Use Twin’s tw prop to add Tailwind classes onto jsx elements:

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

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`]} />
)
Enter fullscreen mode Exit fullscreen mode

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]} />
)
Enter fullscreen mode Exit fullscreen mode

Styled Components

…


3. Supabase

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

GitHub logo supabase / supabase

Website, docs, and examples. Follow to stay updated about our public Beta.


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 (coming soon)
  • Functions (coming soon)

Documentation

For full documentation, visit supabase.io/docs

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Supabase on GitHub

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

Watch this repo


How it works

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


4. Polaris

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

GitHub logo Shopify / polaris-react

Shopify’s product component library

Polaris React

npm version CI codecov PRs Welcome

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
Enter fullscreen mode Exit fullscreen mode

If you prefer Yarn, use the following command instead:

yarn add @shopify/polaris
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Import the CSS directly into your project if your asset packager supports it:
import '@shopify/polaris/dist/styles.css';
Enter fullscreen mode Exit fullscreen mode

Otherwise include the CSS in…


5. Amplication

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 fully functional apps based on TypeScript and Node.js.

GitHub logo amplication / amplication

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

amplication-logo

Docs Twitter

Node.js CI Discord Contributor Covenant License GitHub release (latest by date)

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 fully functional apps based on TypeScript and Node.js.

Getting Started

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

Features

Build business applications with:

  • Visually managed data models
  • Auto-generated human-editable source code
  • Node.js server built with Nest.js and Passport with REST API and GraphQL
  • Admin UI built with React
  • 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 reacap of everything you get with Amplication.

Development

Amplication is constructed of multiple packages. To start working on Amplication follow the "Amplication Server" and "Amplication Client" installation instructions.

Amplication Server

Amplication Server is the main component of the…


6. Sapper

Sapper is a framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.

GitHub logo sveltejs / sapper

The next small thing in web development, powered by Svelte

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.

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
Enter fullscreen mode Exit fullscreen mode

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

cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

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

npm run build
npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Linking to a Live Project

You can make changes locally to Sapper and test it against a local Sapper…


7. React Tracked

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

GitHub logo dai-shi / react-tracked

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

logo

React Tracked

CI npm size discord

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…


8. xstyled

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

GitHub logo gregberge / xstyled

A utility-first CSS-in-JS framework built for React. πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ

xstyled

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

License npm package npm downloads CircleCI codecov Code style Dependencies DevDependencies Small size

npm install @xstyled/styled-components styled-components
Enter fullscreen mode Exit fullscreen mode

Docs

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

Quicklinks to some of the most-visited pages:

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
…
Enter fullscreen mode Exit fullscreen mode

9. react-rnd

A resizable and draggable component for React.

GitHub logo bokuweb / react-rnd

πŸ–± A resizable and draggable component for React.

A resizable and draggable component for React.

Build Status Build Status

Table of Contents

Screenshot

https://codesandbox.io/s/xpm699v4lp

Live Demo

Storybook

Storybook

CodeSandbox

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

Install

  • use npm
npm i -S react-rnd
Enter fullscreen mode Exit fullscreen mode
  • use yarn
yarn add react-rnd
Enter fullscreen mode Exit fullscreen mode

Usage

Example with default

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

Example with position and size

<Rnd
  size={{ width: this.state.width,  height: this.state.height }}
  position={{ x: this.state.x, y: this.state.
…
Enter fullscreen mode Exit fullscreen mode

10. Whirl

CSS loading animations with minimal effort!

GitHub logo jh3y / whirl

CSS loading animations with minimal effort!

Build Status Netlify Status

Whirl

CSS loading animations with minimal effort!

Whirl

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
Enter fullscreen mode Exit fullscreen mode

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…


Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Discussion (2)

pic
Editor guide
Collapse
bacloud14 profile image
bacloud14

You guys are in a whole higher level x)
Good list ! I will try to implement that loading animation in on of my on going projects !

thanks

Collapse
machineno15 profile image
Tanvir Shaikh

Feels like web development is becoming more automated .. someday we'll just drang & drop components & everything will be generoted in bockend