Skip to content

Instantly share code, notes, and snippets.

@genadyp
Last active July 11, 2024 14:11
Show Gist options
  • Save genadyp/78af1aa7d3b79d2fe606ce53f164b42d to your computer and use it in GitHub Desktop.
Save genadyp/78af1aa7d3b79d2fe606ce53f164b42d to your computer and use it in GitHub Desktop.
frontend

Storage

IndexedDB - low-level API for client-side storage of significant amounts of structured data, including files/blobs

ImmortalDB - A relentless key-value store for the browser

PouchDB - JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

store.js - Cross-browser storage for all use cases, used across the web.

BrowserFS - in-browser filesystem that emulates the Node JS filesystem API and supports storing and retrieving files from various backends.

Dexie.js - wrapper library for indexedDB - the standard database in the browser

State Management

signals - Manage state with style in every framework

CSS

css-what - a CSS selector parser

CSS in JS

linaria - Zero-runtime CSS in JS library

polished - A lightweight toolset for writing styles in JavaScript

vanilla-extract - Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

classnames - A simple javascript utility for conditionally joining classNames together

Preprocessors

stylus - Expressive, robust, feature-rich CSS language built for nodejs

Libraries

instagram.css - Complete set of Instagram filters in pure CSS

pattern.css - CSS only library to fill empty background with beautiful patterns

autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use

PostCSS - Transforming styles with JS plugins

clsx - A tiny (229B) utility for constructing className strings conditionally

postcss - Transforming styles with JS plugins

dropcss - An exceptionally fast, thorough and tiny unused-CSS cleaner

purgecss - PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.

Skeleton - A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

css-blocks - High performance, maintainable stylesheets

twind - The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

normalize.css - A modern alternative to CSS resets

MVP.css - Minimalist classless CSS stylesheet for HTML elements

stylelint

stylelint - A mighty, modern style linter

stylelint-config-standard - The standard shareable config for stylelint

awesome-stylelint - A list of awesome stylelint plugins, configs, etc.

remark-preset - stylelint org's shareable preset for remark

prettier-config - stylelint org's shareable config for prettier

Component Frameworks

pure - A set of small, responsive CSS modules that you can use in every web project.

Primer CSS - The CSS design system that powers GitHub

spectre.css - A Lightweight, Responsive and Modern CSS Framework

mui - lightweight CSS framework that follows Google's Material Design guidelines

Semantic-UI - Semantic is a UI component framework based around useful principles from natural language

new.css - A classless CSS framework to write modern websites using only HTML

latex-css - LaTeX.css is a CSS library that makes your website look like a LaTeX document

tufte-css - Style your webpage like Edward Tufte’s handouts

terminal.css - Modern and minimalistic CSS framework for terminal enthusiasts

grayshift - A lightweight front-end component library for developing fast and powerful web interfaces

daisyui - The most popular, free and open-source Tailwind CSS component library

shoelace - A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS.

shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS.

uikit - A lightweight and modular front-end framework for developing fast and powerful web interfaces

Bootstrap

bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web

bootstrap4-toggle - Bootstrap 4 Switch Button / Toggle

bootstrap-toggle - Bootstrap Toggle is a highly flexible Bootstrap plugin that converts checkboxes into toggles

bootstrap-select

design-blocks - A set of 170+ Bootstrap based design blocks ready to be used to create clean modern websites

Bootstrap Templates and themes

Start Bootstrap - Free Bootstrap Themes & Templates

All Bootstrap 4 CSS classes

19 top free Bootstrap themes

Bootstrap tutorials

How to Customize Bootstrap

Tailwind

tailwindcss-typography - Beautiful typographic defaults for HTML you don't control.

tailwindcss-animate - A Tailwind CSS plugin for creating beautiful animations

daisyui - The most popular, free and open-source Tailwind CSS component library

Tailwind Starter Kit

Awesome Tailwind CSS

typewind - The safety of Typescript with the magic of Tailwind.

Bulma

bulma-helpers - Library with missing Functional / Atomic CSS classes for Bulma framework, which doesn't require Bulma framework to work

BulmaJS - Unofficial javascript extension to the awesome Bulma CSS framework

bulma-templates - free flexbox templates built with the bulma css framework

awesome-bulma-templates - Free real-world templates built with Bulma


Templates

mustache - Logic-less templates

liquid - Liquid markup language. Safe, customer facing template language for flexible web apps

HAML

Reference

Learn HAML in Y minutes

An Introduction to Haml

Top 6 features you'll want to know about HAML


Components

awesome-design-systems - A collection of awesome design systems

Tabler - HTML Dashboard UI Kit built on Bootstrap

wired-elements - Collection of elements that appear hand drawn. Great for wireframes

perfect-freehand - Draw perfect pressure-sensitive freehand lines.

jsPDF - Client-side JavaScript PDF generation

pdf.js - PDF Reader in JavaScript

KaTeX - Fast math typesetting for the web

xterm.js - Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser

tui.tree - Component that displays data hierarchically

nprogress - For slim progress bars like on YouTube, Medium, etc

Select

selectize.js - Selectize is the hybrid of a textbox and 'select' box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

Tables

tabulator - Interactive Tables and Data Grids for JavaScript

x-spreadsheet - a javascript spreadsheet for web

simple-data-table - Lightweight and simple data table with no dependencies

tablesort - A small tablesorter in plain JavaScript

gallery - Light, responsive, and performant JavaScript gallery

handsontable - Handsontable is a JavaScript/HTML5 data grid with spreadsheet look & feel

SlickGrid - A lightning fast JavaScript grid/spreadsheet

tui.grid - The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer

table - Headless UI for building powerful tables & datagrids for TS/JS for React, Solid, Vue, Svelte and TS/JS.

Checkboxes/Togglers

pretty-checkbox - A pure CSS library to beautify checkbox and radio buttons

MoreToggles.css - A pure CSS library that provides you with a variety of nice-looking toggles

DateTime

flatpickr - lightweight, powerful javascript datetimepicker with no dependencies

tui.date-picker - Component that selects specific date

tui.calendar - A JavaScript calendar that has everything you need

FullCalendar - A full-sized drag & drop JavaScript event calendar

Spinners

awesome-spinners - A curated collection of dazzling web spinners

css-loaders - A collection of loading spinners animated with CSS

text-spinners - Pure text, CSS only, font independent, inline loading indicators

Menu

animated-burgers - Collection of animated burgers for React, also available as HTML+CSS

hamburgers - Tasty CSS-animated Hamburgers

tui.context-menu - Component that creates a menu when the right mouse button is clicked

Rangers

multirange - A tiny polyfill for HTML5 multi-handle sliders

Animation

anime.js - JavaScript animation engine

Animate.css - A cross-browser library of CSS animations.

Editors

trix - A rich text editor for everyday writing

monaco-editor - code editor which powers VS Code, with the features better described here

editor.js - A block-styled editor with clean JSON output

quill - Quill is a modern WYSIWYG editor built for compatibility and extensibility

Markdown

tui.editor - Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible

editor.md - The open source embeddable online markdown editor (component)

Showdown - A bidirectional Markdown to HTML to Markdown converter written in Javascript

StackEdit - In-browser Markdown editor

stackedit.js - Add StackEdit to any website

markdown-it - Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

Marked - A markdown parser and compiler. Built for speed.

reMarked.js - client-side HTML > markdownclient-side HTML > markdownclient-side HTML > markdown

Video

xgplayer - A HTML5 video player with a parser that saves traffic

plyr - A simple HTML5, YouTube and Vimeo player

videojs-record - video.js plugin for recording audio/video/image files

Hero

hero-generator - Hero Generator! Create a nice hero image for your site or app

Dialogs

vex - A modern dialog library which is highly configurable and easy to style. #hubspot-open-source

Charts

D3.js - Bring data to life with SVG, Canvas and HTML.

arrows - JavaScript library for drawing diagrams of small graphs, using D3 to generate SVG. Useful for explaining Neo4j graph modelling concepts

Chart.js - Simple HTML5 Charts using the tag

apexcharts.js - Interactive JavaScript Charts built on SVG

highcharts - JavaScript charting library based on SVG and some canvas/WebGL.

charts.css - Open source CSS framework for data visualization.

awesome-chart.js - A curated list of awesome Chart.js resources and libraries

roughViz - Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser

flowy - The minimal javascript library to create flowcharts

uPlot - A small, fast chart for time series, lines, areas, ohlc & bars

plotly.js - Open-source JavaScript charting library behind Plotly and Dash

tui.chart - Beautiful chart for data visualization

flot - Attractive JavaScript charts for jQuery

smoothie - really small charting library designed for live streaming data

sprotty - A diagramming framework for the web

Graphics

particles.js - A lightweight JavaScript library for creating particles

pixi.js - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. PixiJS is a rendering library that will allow you to create rich, interactive graphics and cross-platform applications and games without having to dive into the WebGL API or deal with browser and device compatibility.

excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams

rough - Create graphics with a hand-drawn, sketchy, appearance

sigma.js - A JavaScript library aimed at visualizing graphs of thousands of nodes and edges

Images

jquery.adaptive-backgrounds.js - A jQuery plugin for extracting the dominant color from images and applying the color to their parent

rgbaster.js - A simple library for extracting dominant colors from images

tui.image-editor - Full-featured photo image editor using canvas. It is really easy, and it comes with great filters

satori - Enlightened library to convert HTML and CSS to SVG

Carousel

slick - the last carousel you'll ever need

Alerts

sweetalert - A beautiful replacement for JavaScript's "alert"

sweetalert2 - A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies

Files

filepond - A flexible and fun JavaScript file upload library

jquery-filepond - A handy FilePond wrapper for jQuery

uppy - The next open source file uploader for web browsers

tui.file-uploader

Drag-n-Drop

dragula - Drag and drop so simple it hurts

file-selector - Convert a DragEvent or file input to a list of File objects

interact.js - JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers

Autocomplete

awesomplete - Ultra lightweight, usable, beautiful autocomplete with zero dependencies

suggestions - A typeahead component for inputs

autocomplete.js - Fast and full-featured autocomplete library

Layout

Magic Grid - A simple, lightweight Javascript library for dynamic grid layouts

csslayout - A collection of popular layouts and patterns made with CSS.

flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them

csslayout - A collection of popular layouts and patterns made with CSS. Now it has 90+ patterns and continues growing

floating-ui - A JavaScript library to position floating elements and create interactions for them. Anchor a floating element next to another element while making sure it stays in view by avoiding collisions. This lets you position tooltips, popovers, or dropdowns optimally.

Routers

router-slot - A powerful web component router

turbolinks - turbolinks makes navigating your web application faster

page.js - Micro client-side router inspired by the Express router

Keyboard

ninja-keys - Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.

tinykeys - A tiny (~400 B) & modern library for keybindings.


Starters

html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites.

Modern-HTML-Starter-Template - Modern HTML Starter Template

HEAD - A list of everything that could go in the head of your document

wmr - The tiny all-in-one development tool for modern web apps

Utils

history - Manage session history with JavaScript

js-worker-search - JavaScript client-side search API with web-worker support

workbox - JavaScript libraries for Progressive Web Apps

htmx - high power tools for HTML. htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.

jquery - jQuery JavaScript Library

Search

js-search - JS Search is an efficient, client-side search library for JavaScript and JSON objects

lunr.js - small, full-text search library for use in the browser. It indexes JSON documents and provides a simple search interface for retrieving documents that best match text queries.

shift-ctrl-f - Search the information available on a webpage using natural language instead of an exact string match.

searchkit - an open source library which helps you build a great search experience with Elasticsearch. Works with Javascript, React, Vue, Angular, and more.

Web Components

open-wc - Open Web Components: guides, tools and libraries for modern web development and web components

Polymer - Our original Web Component library

lit - Lit is a simple library for building fast, lightweight web components.

lit-html - An efficient, expressive, extensible HTML templating library for JavaScript

lit-element - A simple base class for creating fast, lightweight web components

awesome-lit-html - A curated list of awesome lit-html resources

weightless - High-quality web components with a small footprint

generic-components - A collection of generic web components with a focus on accessibility, and ease of use

shadow-ui - A UI pattern library with 100+ Web Components, automated screenshot testing, and MDX documentation with Storybook

chameleon - Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System

Frameworks

alpine - A rugged, minimal framework for composing JavaScript behavior in your markup

htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support

stimulus - A modest JavaScript framework for the HTML you already have

riot - Simple and elegant component-based UI library

fre - One of the smallest and fastest UI libraries with Fiber

mithril.js - A modern client-side JavaScript framework for building Single Page Applications. It's small (10.05 KB gzipped), fast and provides routing and XHR utilities out of the box.

qwik - The HTML-first framework. Instant apps of any size with ~ 1kb JS

astro - The all-in-one web framework designed for speed. ⭐️ Star to support our work!

Cycle.js - A functional and reactive JavaScript framework for predictable code

mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

vike - Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.

solid - A declarative, efficient, and flexible JavaScript library for building user interfaces.

Media

octicons - A scalable set of icons handcrafted with <3 by GitHub

octicons-v2 - A new look for Octicons, GitHub's icon set

tabler-icons - A set of over 450 free MIT-licensed high-quality SVG icons

simple-line-icons - Simple and Minimal Line Icons

feather - Simply beautiful open-source icons

css.gg - 700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

ionicons - The premium icon font for Ionic Framework and web apps everywhere

heroicons - A set of free MIT-licensed high-quality SVG icons for UI development

SuperTinyIcons - Miniscule SVG versions of your favourite website and app logos

phosphor-icons - Phosphor Icons, a flexible icon family for everyone

Testing

cypress - Fast, easy and reliable testing for anything that runs in a browser

cypress-testing-library - Simple and complete custom Cypress commands and utilities

cypress-example-recipes - Various recipes for testing common scenarios with Cypress

dom-testing-library - Simple and complete DOM testing utilities that encourage good testing practices

jest-puppeteer - Run your tests using Jest & Puppeteer

jest-dom - Custom jest matchers to test the state of the DOM

jest-preview - Debug your Jest tests. Effortlessly.

msw - Client-side API mocking using Service Workers

sinon - Test spies, stubs and mocks for JavaScript

mimic - Mimic is a tool for mocking server responses on the client side.

user-event - Simulate user events

testcafe - A Node.js tool to automate end-to-end web testing.

DOM Manipulation

You Don't Need jQuery - Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

jquery-tips-everyone-should-know - A collection of tips to help up your jQuery game

dom101 - DOM manipulation utilities, aka: Stop using jQuery

cash - An absurdly small jQuery alternative for modern browsers

html-dom - Common tasks of managing HTML DOM with vanilla JavaScript. Give me 1 starif it’s useful.

snabbdom - A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

Development

Awesome jQuery - A curated list of awesome jQuery plugins, resources and other shiny things.

Front-End Performance Checklist - Design and code with performance in mind

Front-End Checklist - The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Front-End Design Checklist

storybook - UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more

design-system - Storybook Design System

userbase - Create secure and private web apps using only static JavaScript, HTML, and CSS

size-limit - Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

supabase - The open source Firebase alternative.

highlight - The open source, full-stack monitoring platform. Error monitoring, session replay, logging and more.

Bundlers

webpack - webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack-blocks - Configure webpack using functional feature blocks

Webpack5-Boilerplate - Sensible Webpack 5 boilerplate using Babel, PostCSS and Sass with a hot dev server and an optimized production build.

webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
parcel - Blazing fast, zero configuration web application bundler

rollup - Next-generation ES module bundler

turbo - Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.

vite - Next generation frontend tooling. It's fast!

awesome-vite - A curated list of awesome things related to Vite.js

Obfuscation

Jscrambler - JavaScript protection technology for Web and Mobile Applications. Its main purpose is to enable JavaScript applications to become self-defensive and resilient to tampering and reverse engineering.

UglifyJS - JavaScript parser / mangler / compressor / beautifier toolkit

terser - JavaScript parser, mangler and compressor toolkit for ES6+

javascript-obfuscator - A powerful obfuscator for JavaScript and Node.js


Tools

Figma - Figma is the first interface design tool based in the browser, making it easier for teams to create software

guess - Libraries & tools for enabling Machine Learning driven user-experiences on the web

servor - Dependency free file server for single page app development

api-viewer-element - API documentation and live playground for Web Components

fuite - A tool for finding memory leaks in web apps

blob-util - Cross-browser utils for working with binary Blobs

Awesome Design Tools

frontend-tools - Useful tools to frontenders

browserslist - Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env


Interview

front-end-interview-handbook - Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore

Front-end-Developer-Interview-Questions - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore

frontend-challenges - Listing some playful open-source's challenges of companies to test your knowledge


Architecture

functional-frontend-architecture - A functional frontend framework


Learning

Resources-Front-End-Beginner - The most essential list of resources for Front-End beginners

frontend-dev-bookmarks - Manually curated collection of resources for frontend web developers.

vanillawebprojects - Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

100-days-of-code-frontend - Curriculum for learning front-end development during #100DaysOfCode

50projects50days - 50+ mini web projects using HTML, CSS & JS

vanillawebprojects - Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

30-seconds-web - Website infrastructure for 30-seconds projects

frontend-case-studies - A curated list of technical talks and articles about real world enterprise frontend development

frontend-guidelines - Some HTML, CSS and JS best practices

web-skills - A visual overview of useful skills to learn as a web developer

awesome-html5 - A curated list of awesome HTML5 resources

design-resources-for-developers - Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more

frontend-development - A curated list of resources for Frontend development

CSS

awesome-css-learning - A tiny list limited to the best CSS Learning Resources

awesome-css - A curated contents of amazing CSS

css-protips - A collection of tips to help take your CSS skills pro

30-seconds-of-css - Short CSS code snippets for all your development needs

css-refresher-notes - CSS Refresher

CSS-Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS

You-need-to-know-css - CSS tricks for web developers

CSS-Guidelines - High-level guidelines for writing manageable, maintainable CSS

You-Dont-Need-JavaScript - CSS is powerful, you can do a lot of things without JS

awesome-css-variables - A curated list of all awesome libraries and resources for CSS Variables

css-modules - Documentation about css-modules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment