Awesome Web Development

A collection of awesome web development resources.

Show some ❤️ and star the repo to support the project.

Table of Contents

• Awesome Web Development
• Table of Contents
  • Guidelines
  • Some Reading List
    • Web Security
    • JavaScript
    • API
  • Framework
    • Reactive
  • Prototypes sites
  • Web Workers
  • Utilities
    • CSS
      • Neumorphism
    • JavaScript
  • Designer
  • Machine Learning & AI
  • Chart & Data Visualization
  • File
    • Upload
    • Save
  • Loader
  • Icon
  • Notification
  • Alert
  • Authentication
  • Animations
  • Images
    • Tools
    • Sprite

Guidelines

• 👍 A set of best practices for JavaScript projects

• mdo code guide Standards for developing flexible, durable, and sustainable HTML and CSS.

• Auto Lab @JingDong: Front-End Coding Guidelines, HTML, CSS, JavaScript, Images, Names

Some Reading List

• developer-roadmap

• browser-2020 - This repo contains a non-exhaustive list of less-known features implemented in browsers today.

  This list isn't intended for a technical audience; instead it wants to be a "I didn't know we could do that in a browser!" list.

  In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations.

Web Security

• OWASP Cheat Sheet Series: the official repository for the Open Web Application Security Project® (OWASP) Cheat Sheet Series project. The project focuses on providing good security practices for builders in order to secure their applications.

In order to read the cheat sheets and reference them, use the project official website. The project details can be viewed on the OWASP main website without the cheat sheets.

JavaScript

• The JavaScript Way: A modern introduction to an essential language.
• What the f*ck JavaScript? A list of funny and tricky JavaScript examples. JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community. At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

API

• httpbin: A tool to feeling RESTFul API.

Framework

• sveltejs: a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

  • sveltejs/kit - The Fastest Way to Build Svelte Apps
  • 💨 Blazing-Fast Production Sites
  • 🛠️ SSR, SPA, SSG, and In-Between
  • ⚡️ Instantly Visible Code Changes
  • 🔩 Existing Universe of Plugins
  • 🔑 Fully Typed APIs

• blitz - The Fullstack React Framework: "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails

  “Zero-API” data layer lets you import server code directly into your React components instead of having to manually add API endpoints and do client-side fetching and caching.

  New Blitz apps come with all the boring stuff already set up for you! Like ESLint, Prettier, Jest, user sign up, log in, and password reset.

  Provides helpful defaults and conventions for things like routing, file structure, and authentication while also being extremely flexible.

• mitt - Tiny 200b functional event emitter / pubsub.

  • Microscopic: weighs less than 200 bytes gzipped

  • Useful: a wildcard "*" event type listens to all events

  • Familiar: same names & ideas as Node's EventEmitter

  • Functional: methods don't rely on this

  • Great Name: somehow mitt wasn't taken

    Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.

Reactive

• ReactiveX - An API for asynchronous programmingwith observable streams
• Cycle.js - A functional and reactive JavaScript framework for predictable code

Prototypes sites

• Foundation: The most advanced responsive front-end framework in the world.

Web Workers

• Partytown is a lazy-loaded 6kb library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

• Miniflare is a simulator for developing and testing Cloudflare Workers.

  • 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.
  • 🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSockets, modules and more.
  • ⚡ Fully-local: test and develop Workers without an internet connection. Reload code on change quickly.

  It's an alternative to wrangler dev, written in TypeScript, that runs your workers in a sandbox implementing Workers' runtime APIs.

  See https://miniflare.dev for more detailed documentation.

Utilities

CSS

• tailwindcss: Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
  • daisyui - Tailwind CSS Components: Adds component classes like btn, card and more to Tailwind CSS
• Normalize.css - A modern, HTML5-ready alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
• CSSFX: Beautifully simple click-to-copy CSS effects
• ![](https://img.shields.io/github/stars/csstools/sanitize.css?style=social