Frontend code development
Code editing sandboxes
- https://codesandbox.io/.
- https://codepen.io/.
- https://jsfiddle.net/.
- https://replit.com/
- A review of sandboxes: 9 Best Online Code Editors for Web Applications.
CSS framework
- Tailwind uses a concept of utility functions as a building block of css style.
- Fun with Viewport Units.
CSS Articles
- A Complete Guide to CSS Functions.
- The Beauty of CSS.
- Absolute, Relative, Fixed Positioning: How Do They Differ?
D3.js: Javascript, SVG and CSS to create graphical widgets and animations
- Amelia Wattenberger's site has lot of interesting articles about frontend visuals.
- Creating a Gauge in React by Amelia.
- Data-Driven Documents d3js javascript library, Github source. Really awesome visual effects can be built using this library. d3 has bunch of cool features like force simulation, goe projections etc.
- D3 is svelte. I have forked this in my svelte REPL.
- D3 Force Graph - svg. I have forked this in my svelte REPL.
- Refer to an external SVG via D3 and/or javascript.
- How to use svg file for image source in D3.
- Web application that parses SVG files and returns d3.js code.
Common Javascript DOM recipes
Serve side rendering with PWA
- How to combine PWA and isomorphic rendering (SSR)?.
- How To Turn a Server-Side-Rendered React SPA Into a PWA
- SPAs, PWAs and SSR
- LinkedIn Lite: A Server-Side Rendered PWA
- Building a hybrid-rendered PWA
designing CSS
- Designing in the Browser
- javascript color library for css manipulation
- 1-Line Layouts, youtube 10 modern layouts in 1 line of CSS.
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
SVG
Canvas arts
polyfills
- Polyfills: everything you ever wanted to know, or maybe a bit less
- Loading Polyfills Only When Needed.