DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 30th October 2020

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

1. Vanilla Todo

A case study on viable techniques for vanilla web development.

GitHub logo morris / vanilla-todo

A case study on viable techniques for vanilla web development.

VANILLA TODO

A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 55 KB (unminified).

Try it online →

More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (50% less time to load and 95% less bandwidth in this case).

There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication.

If anything, the case study validates the value of build steps and frameworks but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior.

While the first version of the


2. fullPage.js

A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site.

GitHub logo alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js

preview compatibility

English | Español | Français | Pусский | 中文 | 한국어 | 日本語 | Português Brasileiro

Available for Vue, React and Angular.


fullPage.js version License PayPal Donate jsDelivr Hits Minzipped Size   |   Created by @imac2


A simple and easy to use library that creates fullscreen scrolling websites (also known as single page websites or onepage sites) and adds landscape sliders inside the sections of the site.

Introduction

Suggestion are more than welcome, not only for feature requests but also for coding style improvements…


3. Chakra UI

Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

GitHub logo chakra-ui / chakra-ui

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Chakra logo

Build Accessible React Apps with Speed ⚡️

Bundle Size Github Checks MIT License NPM Downloads Github Stars Discord

Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Table of contents

Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here

Features

  • Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props Learn more
  • Flexible & composable: Chakra UI components are built on top of a…

4. Coding Interview University

Multi-month study plan for going from web developer (self-taught, no CS degree) to software engineer for a large company.

GitHub logo jwasham / coding-interview-university

A complete computer science study plan to become a software engineer.

Coding Interview University

I originally created this as a short to-do list of study topics for becoming a software engineer but it grew to the large list you see today. After going through this study plan, I got hired as a Software Development Engineer at Amazon You probably won't have to study as much as I did. Anyway, everything you need is here.

I studied about 8-12 hours a day, for several months. This is my story: Why I studied full-time for 8 months for a Google interview

Please Note: You won't need to study as much as I did. I wasted a lot of time on things I didn't need to know. More info about that is below. I'll help you get there without wasting your precious time.

The items listed here will prepare you well for a technical interview at just about any software company including the…


5. Axios

Promise based HTTP client for the browser and node.js

GitHub logo axios / axios

Promise based HTTP client for the browser and node.js

🥇 Gold sponsors

Buzzoid - Buy Instagram Followers

At Buzzoid, you can buy Instagram followers quickly, safely, and easily with just a few clicks. Rate

Stytch

API-first authentication, authorization, and fraud prevention

Website | Documentation | Node.js

Principal Financial Group

We’re bound by one common purpose: to give you the financial tools, resources and information you ne...

Descope

Hi, we're Descope! We are building something in the authentication space for app developers and...

Website | Documentation | Community

Buzzoid - Buy Instagram Followers

At Buzzoid, you can buy Instagram followers quickly, safely, and easily with just a few clicks. Rate...


Promise based HTTP client for the browser and node.js

WebsiteDocumentation

npm version CDNJS Build status Gitpod Ready-to-Code code coverage install size npm bundle size npm downloads gitter chat code helpers Known Vulnerabilities

Table of Contents






6. Webpack Boilerplate

Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.

GitHub logo taniarascia / webpack-boilerplate

📦 ‎ A sensible webpack 5 boilerplate.

📦 webpack Boilerplate

License: MIT

Sensible webpack 5 boilerplate using Babel, PostCSS and Sass.

Installation

Clone this repo and npm install.

npm i
Enter fullscreen mode Exit fullscreen mode

Usage

Development server

npm start
Enter fullscreen mode Exit fullscreen mode

You can view the development server at localhost:8080.

Production build

npm run build
Enter fullscreen mode Exit fullscreen mode

Note: Install http-server globally to deploy a simple server.

npm i -g http-server
Enter fullscreen mode Exit fullscreen mode

You can view the deploy by creating a server in dist.

cd dist && http-server
Enter fullscreen mode Exit fullscreen mode

Features

Dependencies

webpack

Babel

Loaders


7. Pure bash bible

The goal of this book is to document commonly-known and lesser-known methods of doing various tasks using only built-in bash features.

GitHub logo dylanaraps / pure-bash-bible

📖 A collection of pure bash alternatives to external processes.

NEW: pure sh bible (📖 A collection of pure POSIX sh alternatives to external processes).


pure bash bible

A collection of pure bash alternatives to external processes.





The goal of this book is to document commonly-known and lesser-known methods of doing various tasks using only built-in bash features. Using the snippets from this bible can help remove unneeded dependencies from scripts and in most cases make them faster. I came across these tips and discovered a few while developing neofetch, pxltrm and other smaller projects.

The snippets below are linted using shellcheck and tests have been written where applicable. Want to contribute? Read the CONTRIBUTING.md. It outlines how the unit tests work and what is required when adding snippets to the bible.

See something incorrectly described, buggy or outright wrong? Open an issue or send a pull request. If the bible is missing something, open an issue and…





8. Egg

Born to build better enterprise frameworks and apps with Node.js & Koa

GitHub logo eggjs / egg

🥚 Born to build better enterprise frameworks and apps with Node.js & Koa

English | 简体中文

NPM version NPM quality NPM download FOSSA Status

Continuous Integration Test coverage Known Vulnerabilities Open Collective backers and sponsors

Features

  • Built-in Process Management
  • Plugin System
  • Framework Customization
  • Lots of plugins

Quickstart

Follow the commands listed below.

$ mkdir showcase && cd showcase
$ npm init egg --type=simple # Optionally pnpm create egg --type=simple
$ npm install
$ npm run dev
$ open http://localhost:7001
Enter fullscreen mode Exit fullscreen mode

Node.js >= 14.20.0 required.

Documentations

Contributors

contributors

How to Contribute

Please let us know how can we help. Do check out issues for bug reports or suggestions first.

To become a contributor, please follow our contributing guide.

Sponsors and Backers

sponsors backers

License

MIT

FOSSA Status





9. Cypress example recipes

Various recipes for testing common scenarios with Cypress

GitHub logo cypress-io / cypress-example-recipes

Various recipes for testing common scenarios with Cypress

Recipes

CircleCI

renovate-app badge Cypress Dashboard

This repo contains various recipes for testing common scenarios using Cypress: Fundamentals, Testing the DOM, Logging in, Preprocessors, Blogs, Stubbing and spying, Unit Testing, Server Communication, Other Cypress Recipes, Community Recipes

Fundamentals

Recipe Description
Node Modules Import your own node modules
Environment variables Passing environment variables to tests
Handling errors Handling thrown errors and unhandled promise rejections
Dynamic tests Create tests dynamically from JSON data
Dynamic tests from CSV Create tests dynamically from CSV file
Dynamic tests from API Create tests dynamically by calling an external API
Fixtures Loading single or multiple fixtures
Adding Custom Commands Write your own custom commands using JavaScript with correct types for IntelliSense to work
Adding Custom Commands (TS) Write your own custom commands using TypeScript
Adding Chai Assertions Add new or custom chai assertions with correct types
Cypress module API Run Cypress via its

10. Apache EChart

A powerful, interactive charting and data visualization library for browser

GitHub logo apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts

logo

Apache ECharts is a free, powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

中文官网 | ENGLISH HOMEPAGE

License Latest npm release NPM downloads Contributors

Build Status

Get Apache ECharts

You may choose one of the following methods:

Docs

Get Help

Build

Build echarts source code:

Execute the instructions in the root directory of the echarts: (Node.js is required)

# Install the dependencies from NPM:
npm install
# Rebuild source code immediately in watch mode when changing the source code.
# It opens the
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)