UI/UX
Page content
User Interface / User Experience
Design Approach
- Modern Web - Guides, tools and libraries for modern web development.
- How Stripe Designs Beautiful Websites
- Tools for non artistic developers
- Principles of Design
- Micro frontends - Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.
- Thoughts on SPAs
- 33 JavaScript concepts every Developer should know
- Server side Events for Real-time streaming Updates
- Four ways to build Web Apps
- Parallel Data Fetching in SPA…has Good Primer on React
Articles
- guideline on implementing auth in web applications
- Examples to manipulate HTML-DOM
- Comparing Polling vs WebSockets vs SSE
- A simple, choice-driven chatbot framework with Vanilla Javascript
- Centering in CSS: A Complete Guide
- Centering in CSS
- Full-bleed layout using CSS Grid
- Blog on HTML,fonts, Asynchronous JavaScript
- How to pick beautiful colors
- You dont need Javascript
- Sign in form Best practices
- How HTTP Range Requests work (for large file downloads etc.)
- Beginner’s guide to Next.js
- Data Model behind Notion’s flexibility
- How TCP Communication works between Client & Server
- Practical Frontend Architecture using React,GraphQL, Next.JS and Typescript
- The baseline for Web development in 2022
- Web UI Patterns by Addy Osmani
- The Web’s Next Transition
- Everything about HTMX
Testing
- OSS Load and Functional testing tool
- Puppeteer - Testing using Headless Chrome Nodejs API
- Playwright - Nodejs library to automate Chromium, WebKit and Firefox
Platforms
Libraries and Tools
- Bootstrap based Admin theme - Volt
- RsPack - Fast web bundler like webpack
- Dash - Python based framework for Visualization with no javascript
- T3 - full-stack, typesafe Next.js app
- Perspective.js - A data visualization and analytics component, especially well-suited for large and/or streaming datasets.
- Observable - A static site generator for data apps, dashboards, reports
- Nginx Unit - Web Server with Native support for Languages
- GoatCounter - Open source Web site Analytics
- RedwoodJS - App framework
- Gatsby - React based fast framework
- Remix - Modern SPA framework
- Blitz - Modern SPA framework based on React
- Polaris design system by shopify
- Qiankun - Complete solution for Micro front-ends
- Astro - a website build tool
- Single SPA - Router for Micro front-ends
- HTMX -access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes
- Bulletproof React - Opinionated React starter kit
- Javascript based Query/filter creator
- React based Sci-fi style UI Library with Animation and Sound
- Javascript libraries for Date and Time (Alternative to Moment.js)
- Zod - Schema validation in Typescript
- One line CSS Layouts by Google
- G9 - Interactive Graphs
- Interactive CSS Grid generator
- Msw - Mock Service Worker for REST & GraphQL API Mocking
- Modern JavaScript Tutorial
- Web Vitals- Essential metrics for a healthy site.
- Clerk - User Management as Service
- Go based Fast Javascript bundler and minifier
- Finite State Machine in JS/Typescript
- Observable Plot - Data Visualization Library
- Shared data types for building collaborative software
- NoSQL-database for JavaScript Applications like Websites, hybrid Apps, Electron-Apps, Progressive Web Apps and NodeJs
- RemixIcon - Open Source Icons Repository
- Mermaid - Generate Diagrams from Markdown
- AutoMerge - Network agnostic library for JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.
- Text (DSL) to diagrams
- Interactive guide to Flexbox
- End to end encryption in browser
- Collection of SVG logos
Desktop App frameworks
PWA
- PWABuilder - Publish Progressive Web App as Mobile App
- What a PWA can do today
- Step by Step using PWABuilder