See also Web app architecture
UI / UX Design
https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/
https://heather-buchel.com/blog/2024/11/carving-space/
- by the RefactoringUI guy
- great web design examples
Design tools
Front-end checklist
https://github.com/thedaviddias/Front-End-Checklist
Polishing
https://blog.jim-nielsen.com/2024/sanding-ui/
Helpful error pages
https://onlineornot.com/what-fastly-outage-can-teach-about-writing-error-messages
HTML
Data attributes
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Optimizing website size
https://santurcesoftware.com/making-web-sites-small
Optimize images
https://jfhr.me/optimizing-images-with-the-html-picture-tag/
AVIF and WebP as alternatives
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
CSS & styling
CSS (margin, width, ..) for great-looking page
https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41
Color blending modes
https://typefully.com/DanHollick/blending-modes-KrBa0JP
Typography
https://www.nubero.ch/blog/011/
- intro
- optimize for legibility
Web Fonts optimization
https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
- preload
- self-host
- subsetting
- choose modern format (woff2)
Performance
HTTP/1, /2, /3
https://requestmetrics.com/web-performance/http3-is-fast
Core web vitals
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
HTTP streaming
https://link.medium.com/uT8VytFXUzb
- Send page head early without waiting for entire page to be ready
Memory use optimization
https://nolanlawson.com/2021/12/17/introducing-fuite-a-tool-for-finding-memory-leaks-in-web-apps/
- tool to detect memory leaks in web apps
Frontend with Javascript / Typescript
Modern way of importing (ESM and TypeScript)
https://styfle.dev/blog/es6-modules-today-with-typescript
Frontend build systems
https://sunsetglow.net/posts/frontend-build-systems.html
Minimalist JS
https://jvns.ca/blog/2023/02/16/writing-javascript-without-a-build-system/
- index.html and little else https://kofi.sexy/blog/modern-spas
Immutable data structures
https://macwright.com/2021/03/05/immutable-approaches.html
HTTP caching
- Etag, no-cache and must-revalidate
sensitive / private data and cache control
https://stackoverflow.com/questions/65799660/server-side-rendering-issue-over-a-cdn
For well-behaved caching proxies (which your CDN should be), there are two response headers you should use:
Cache-Control: private Setting this response header means that intermediary proxies are not allowed to cache the response. (The browser can still cache it, if it’s appropriate to do so. If you want to prevent any caching, you’d use no-store instead.)
See also: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
Vary: Cookie This response header indicates that the data in the response is dependent on the Cookie request header. That is, if my request has the header Cookie: asdf and your request has the header Cookie: zxcv, then the requests are considered different, and will be cached independently. Note that using this response header may drastically impact your caching if cookies are used for anything on your domain… and I’d bet that they are.
See also: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary
An alternative… A common alternative approach these days is to handle all the user facing dynamic data client-side. That way, you can make a request to some API server which has no caching CDN at all. The page is then filled client-side with the data needed. The static parts of the site are served directly from the CDN.
Security
https://interviewing.io/guides/system-design-interview/part-two
- Authentication, authorization, passwords, session tokens, JSON Web Tokens (JWT), authentication flow
Cookies, security and local storage
https://brandur.org/fragments/cookies-vs-local-storage
Refresh tokens
https://www.pingidentity.com/en/company/blog/posts/2021/refresh-token-rotation-spa.html
Session timeout
https://www.sjoerdlangkemper.nl/2023/08/16/session-timeout/
- Pros and cons (mostly) of short session timeouts
Password-protected static pages !
https://github.com/robinmoisson/staticrypt
Logging
- Loglevel, simple levelled logging
- Winston, flexible modular logging
Quality / Testing
Test for confidence over ease
https://thenewstack.io/unit-tests-are-overrated-rethinking-testing-strategies/
Visual regression testing
https://tvernon.tech/blog/visual-regression-testing-with-jest
Testing with Playwright
https://new.pythonforengineers.com/blog/web-automation-dont-use-selenium-use-playwright/
- Killer feature: click and navigate through UI, tool generates a test script
Svelte components
https://www.creative-tim.com/blog/web-development/svelte-examples-components-templates/
Backend with Node.js
API versioning
https://github.com/TomFrost/Vers
- Vers package to implement versioned object converters
Caching
https://scotch.io/tutorials/how-to-optimize-node-requests-with-simple-caching-strategies
Awesome caching sample code
https://duckduckgo.com/?q=node+fetch+sqlite+cache&t=brave&ia=web
- in-memory
- file
- memcached
- redis
In-process caching
https://github.com/maypok86/otter
Dev environment
https://max.engineer/docker-in-dev
- app running directly
- related infra in containers
Backend with Python
Python packaging and production containers
https://pythonspeed.com/products/productionquickstart/
Raw SQL and Postgres
https://joaodlf.com/python-just-write-sql
- dataclass
- row_factory
- very clean implementatoon
Flask intro
https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world
Flask org for large applications
- blueprints
- application factory https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xv-a-better-application-structure
FastAPI
FastAPI for full-stack web dev
https://github.com/ttymck/fastapi-fullstack-boilerplate
FastAPI source org
https://camillovisini.com/article/abstracting-fastapi-services/
Concurrency - Async / await
https://journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/
https://fastapi.tiangolo.com/async/#in-a-hurry
And threads as a better alternative?
https://lucumr.pocoo.org/2024/11/18/threads-beat-async-await/
Misc
Status page
- fully static
- served by GitHub Pages
- updated every 5 min
- unlimited monitored pages
- historical data https://upptime.js.org/?ref=madewithsvelte.com
Live serve push, MPEG and persistent connection
https://underjord.io/live-server-push-without-js.html
A/B testing with reverse proxy
https://www.nginx.com/blog/performing-a-b-testing-nginx-plus/
HTTP advanced
https://httptoolkit.tech/blog/http-wtf/
HTTP status codes
redirects
https://www.drlinkcheck.com/blog/http-redirects-301-302-303-307-308
API versioning
https://apisyouwonthate.com/blog/api-versioning-has-no-right-way
Message queues
https://sudhir.io/the-big-little-guide-to-message-queues/
Flask + Celery + Postgres
https://www.toptal.com/flask/flask-production-recipes
Kale = Celery - RabbitMQ + SQS
- avoids Celery’s issues with reliability and lack of prioritization https://github.com/Nextdoor/ndkale
Storage / persistence layer
Alternatives to n-tier
Litestream - vertically-scaled SQLite
https://litestream.io/blog/why-i-built-litestream/
SQLite + Litestream instead of etcd
https://tailscale.com/blog/database-for-2022/
GraphQL vs REST
https://konfigthis.com/blog/graphql-vs-rest
https://bessey.dev/blog/2024/05/24/why-im-over-graphql/
Hasura - direct GraphQL over Postgres
Backend as a Service vs custom
https://leerob.io/blog/backend
Demoing backend
https://rxhl.notion.site/How-To-Present-Backend-Demos-861303c09e3e48fcb33a2a6999260e59