Web Development

Developing user interfaces of web pages.

Resources

• Learn web development | MDN — Learning guide provided by Mozilla
• Learn HTML | Web Dev — Get the basic right, more beginner-friendly
• FullStackOpen Deep dive into modern web development
  • Completely free full stack course. Same as the one at the University of Helsinki
  • Cover React, NodeJS, Express, Redux, GraphQL, TypeScript, React Native, Docker, MongoDB and Postgres

Sites

• MDN Web Docs — Mozilla, the most useful and complete web docs
• CSS Selectors: A Visual Guide — Select specific HTML elements to apply CSS to

Links

• color-scheme CSS Property | Web Dev
  • How to improve dark mode default styling
  • Discovered from this blog about configuring dark mode: CSS System Colors | Jim Nielsen's Blog
• After dark CSS — Some fun CSS animations
  • Some are quite simple, animations without any JavaScript but just CSS. I like the Spotlight one
• 300ms Faster: Reducing Wikipedia's Total Blocking Time | Nicholas Ray (HN)
  • Tasks run longer than 50ms are considered long tasks, anything longer than that is blocking other tasks
  • Remove unnecessary JavaScript: initializing multiple event handlers or callbacks
  • Optimize existing JavaScript: event delegation, attach a single event listener to a common ancestor of many elements
• I'm betting on HTML (HN)
  • HTML can handle more things than before
  • Some interesting tabs: <abbr>, <datalist>, <details>, <dialog>, <mark>, <meter>, <progress>, etc.
• Things you forgot (or never knew) because of React | Josh Collinsworth
  • The author has a strong opinion, but it's a good overview of what React is outdated compared to others
  • With React assumed to be the default, people don't realize features like web components are missing
  • There are better alternatives like Svelte, Vue, Solid, etc.
• A Blog Post with Every HTML Element (HN)
  • More than a hundred different HTML tags, categorized, all used somewhere in the post
• Adapting Illustrations to Dark Mode
  • Keep the colour the same, only inverting the lightness
  • invert(1) invert all RGB, hue-rotate(180deg) inverts revert back to the original colour

    filter: invert(1) hue-rotate(180deg);
• Moving 50,000 lines of code to React Server Components
  • What are React Server Components (RSCs)? What are the pros and cons?
  • RSCs Demo. Methods to incrementally adopt RSCs. Some advanced patterns handling client & server components.
• Host a website in a URL | Smolsite.zip (HN)

  $ zip -DXjq9 somesite.zip index.html mylogo.png
  $ echo "https://smolsite.zip/`cat somesite.zip | base64 --wrap 0`"
• The Rules of Margin Collapse
  • Only vertical and adjacent margins collapse, not in grid or Flexbox, and the bigger margin wins
  • Nesting doesn't prevent collapsing. Padding, border, empty space or scroll container blocks collapsing.
  • More advance: direction, more than 2 margins, negative margins
• HTML Tips & Tricks
• CSS for printing
  • @page rule, @media print and more
• A formula for responsive font-size
  • No @media breakpoints, just a linear function: font-size: calc(1rem + 0.25vw);
• A brief history of web development
  • And why your framework doesn't matter
  • Angular, React, GraphQL, Vercel & Next.js, Svelte, HTMX
• Engineering for Slow Internet
  • Do not hardcode timeout, prefer incremental transfer
  • Allow users to bring their own downloader, provide URL, allow pause and resume, show progress, etc.
• Design System Retrospective
  • The good and bad of a functional composition design system
  • The difficulty in understanding how composition changes the context and how it renders
  • Object composition like Tailwind is easier to adapt for devs
• Notes on implementing dark mode
  • prefers-color-scheme, tri-state of themes, theme flicker, theme changes from OS/tabs

CSS games

• Flexbox Froggy (HN) — Learn CSS Flexbox
• Grid Garden — Learn CSS Grid

SVG

• Online SVG Path Editor | GitHub @ygnn
• Interactive SVG Path Visualizer
• A Deep Dive into SVG Paths (HN)
  • Cursors, lines, bezier curves, cubic curbes, and arcs
  • Include some challenges to draw some shapes at the end of each section
• Handcraft sparklines chart in SVG — Drawing lines, scaling, and adding a fill by hand or a helper function in the backend