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 55 KB (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 (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.
alvarotrigo
/
fullPage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
fullPage.js
English | Espaรฑol | Franรงais | Pัััะบะธะน | ไธญๆ | ํ๊ตญ์ด | ๆฅๆฌ่ช | Portuguรชs Brasileiro
Available for Vue, React and Angular.
- Demo online | Codepen
- Wordpress plugin for Gutenberg and WordPress plugin for Elementor
- Wordpress theme
- fullpage.js Extensions
- Frequently Answered Questions
- [Migration from fullPage v3 to fullpage v4]
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โฆ
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 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
- ๐ Features
- ๐ฆ Installation
- ๐ป Usage
- ๐ CodeSandbox Templates
- ๐
create-react-appTemplates - ๐ Contributing
- ๐ Support
- ๐ Testimonials
- ๐ Awards and Mentions
- โจ Contributors
- โ๏ธ License
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
BoxandStackthat 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.
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
๐ฅ Gold sponsors
At Buzzoid, you can buy Instagram followers quickly, safely, and easily with just a few clicks. Rate |
API-first authentication, authorization, and fraud prevention |
Weโre bound by one common purpose: to give you the financial tools, resources and information you ne... |
Hi, we're Descope! We are building something in the authentication space for app developers and... |
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
Website โข Documentation
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.
taniarascia
/
webpack-boilerplate
๐ฆ โ A sensible webpack 5 boilerplate.
๐ฆ webpack Boilerplate
Sensible webpack 5 boilerplate using Babel, PostCSS and Sass.
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 webpack -
sass-loader- Load SCSS and compile to CSS-
sassโฆ
-
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 (๐ 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
English | ็ฎไฝไธญๆ
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
Node.js >= 14.20.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 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
Get Apache ECharts
You may choose one of the following methods:
- Download from the official website
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 code immediately in watch mode when changing the source code.
# It opens theโฆ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)