DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 30th October 2020

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. 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 44KB (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 (100% faster loads and 90% 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 (especially in browser testing).

Intermediate understanding of the webโ€ฆ


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ัƒััะบะธะน | ไธญๆ–‡ | ํ•œ๊ตญ์–ด

Available for Vue, React and Angular


fullPage.js version License PayPal Donate jsDelivr Hits ย ย  |ย ย  7Kb gziped ย ย |ย ย  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 Let's make this a great library to make people'sโ€ฆ


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 Language grade: JavaScript MIT License NPM Downloads Github Stars Discord

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

Looking for the documentation? ๐Ÿ“

For older versions, head over here => https://chakra-ui.com

Latest version (pre-release) => https://next.chakra-ui.com

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 React UI Primitive for endless composability.
  • Accessible. Chakra UI components follow the WAI-ARIA guidelines specifications and have the right aria-* attributes.
  • Dark Mode ๐Ÿ˜: Most components in Chakra UI are dark mode compatible.

Support Chakra UI ๐Ÿ’–

By donating $5 or more you can support the ongoing development of this project We'll appreciate some support. Thank you to all ourโ€ฆ


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

The items listed here will prepare you well for a technical interview at just about any software company including the giants: Amazon, Facebook, Google, and Microsoft.

Best of luck to you!

Translations:
Translations in progress:

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

axios

npm version CDNJS build status code coverage install size npm downloads gitter chat code helpers

Promise based HTTP client for the browser and node.js

Table of Contents

Features

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Browser Support

Chrome Firefox Safari Opera Edge IE
Latest โœ” Latest โœ” Latest โœ” Latest โœ” Latest โœ” 11 โœ”

Browser Matrix

Installing

Using npm:

$ npm install axios
Enter fullscreen mode Exit fullscreen mode

Using bower:

$ bower install axios
Enter fullscreen mode Exit fullscreen mode

Using yarn:

$ yarn add axios
Enter fullscreen mode Exit fullscreen mode

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Usingโ€ฆ


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 David

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

Installation

git clone git@github.com:taniarascia/webpack-boilerplate
cd webpack-boilerplate
npm i

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

  • babel-loader - Transpile files with Babel and webpack
  • โ€ฆ

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โ€ฆ





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

NPM version NPM quality NPM download

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
$ npm install
$ npm run dev
$ open http://localhost:7001
Enter fullscreen mode Exit fullscreen mode

Node.js >= 8.0.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





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 Build status 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
Dynamic tests Create tests dynamically from data
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 module API
Wrapping Cypress module API Writing a wrapper around "cypress run" command line parsing
Custom browsers Control which browsers the project can use, or even add a custom browser into the
โ€ฆ

10. Apache EChart

A powerful, interactive charting and data visualization library for browser

GitHub logo apache / incubator-echarts

A powerful, interactive charting and data visualization library for browser

Apache ECharts (incubating)

logo

Apache ECharts (incubating) is a free, powerful charting and visualization library offering an easy way of adding 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.

Now ECharts is an incubator project of Apache Software Foundation Please check its incubator status here

ไธญๆ–‡ๅฎ˜็ฝ‘ | ENGLISH HOMEPAGE

Build Status Last npm release

Get Apache ECharts (incubating)

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โ€ฆ


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

pic
Editor guide