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.
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).
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.
alvarotrigo
/
fullPage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
fullPage.js
English | Español | Français | Pусский | 中文 | 한국어
Available for Vue, React and Angular
| 7Kb gziped | Created by @imac2
- Demo online | Codepen
- Wordpress plugin for Gutenberg and WordPress plugin for Elementor
- Wordpress theme
- fullpage.js Extensions
- Frequently Answered Questions
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
- Compatibility
- License
- Usage
- Options
- Methods
- Callbacks
- Reporting issues
- Contributing to fullpage.js
- Changelog
- Build tasks
- Resources
- Who is using fullpage.js
- Donations
- Sponsors
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.
Build Accessible React Apps with Speed ⚡️
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://v0.chakra-ui.com
Latest version (v1) => https://chakra-ui.com
Features 🚀
- Ease of Styling: Chakra UI contains a set of layout components like
BoxandStackthat 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.
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:
5. Axios
Promise based HTTP client for the browser and node.js
axios
Promise based HTTP client for the browser and node.js
New axios docs website: click here
Table of Contents
- Features
- Browser Support
- Installing
- Example
- Axios API
- Request method aliases
- Concurrency (Deprecated)
- Creating an instance
- Instance methods
- Request Config
- Response Schema
- Config Defaults
- Interceptors
- Handling Errors
- Cancellation
- Using application/x-www-form-urlencoded format
- Semver
- Promises
- TypeScript
- Resources
- Credits
- License
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
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest |
Latest |
Latest |
Latest |
Latest |
11 |
Installing
Using npm:
$ npm install axios
Using bower:
$ bower install axios
Using yarn:
$ yarn add axios
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js…6. Webpack Boilerplate
Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.
taniarascia
/
webpack-boilerplate
📦 A sensible webpack 5 boilerplate.
📦 webpack Boilerplate
Sensible webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.
Installation
Clone this repo and npm install.
npm i
Usage
Development server
npm start
You can view the development server at localhost:8080.
Production build
npm run build
Note: Install http-server globally to deploy a simple server.
npm i -g http-server
You can view the deploy by creating a server in dist.
cd dist && http-server
Features
Dependencies
webpack
-
webpack- Module and asset bundler. -
webpack-cli- Command line interface for webpack -
webpack-dev-server- Development server for webpack -
webpack-merge- Simplify development/production configuration -
cross-env- Cross platform configuration
Babel
-
@babel/core- Transpile ES6+ to backwards compatible JavaScript -
@babel/plugin-proposal-class-properties- Use properties directly on a class (an example Babel config) -
@babel/preset-env- Smart defaults for Babel
Loaders
-
babel-loader- Transpile files with Babel and…
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.
dylanaraps
/
pure-bash-bible
📖 A collection of pure bash alternatives to external processes.
NEW: pure sh bible (
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
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
Node.js >= 8.0.0 required.
Documentations
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
License
9. Cypress example recipes
Various recipes for testing common scenarios with Cypress
cypress-io
/
cypress-example-recipes
Various recipes for testing common scenarios with Cypress
Recipes
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
apache
/
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Apache ECharts
Apache ECharts 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.
Get Apache ECharts
You may choose one of the following methods:
- Download from the official website in 中文下载页
- Download from the official website in English
npm install echarts --save- CDN: jsDelivr CDN
Docs
Get Help
- GitHub Issues for bug report and feature requests
- Email dev@echarts.apache.org for general questions
- Subscribe to the mailing list to get updated with the project
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…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)