Techniques, resources, and tools I use often or are on my radar for future projects and learning. Not kept up to date as often as I should, but regularly added to.
Contents
-
- Learning Front-end
- CSS Technique
- Snippets, boilerplate, components
- Performance
- JavaScript
- Debugging / Testing
- JavaScript Frameworks
- Vue
- Svelte
- Browser Storage
- Mouse/Touch Events
- Keyboard Events
- Build Tools
- HTML
- Forms
- Layout and Alignment
- Tooltips
- Accordion
- Multi-level Navigation
- Tables
- Effects
- Foreground/Background Colours
- Colour Schemes
- Images
- Image Loading
- Social Media Links
- Icons
- Animated GIFs
- Audio
- Video
- SVG
- Image Galleries
- Sliders/Carousels
- Modals
- Sticky
- Drag and Drop
- Ads
- Front-end Developer Learning Roadmap https://frontendmasters.com/guides/learning-roadmap/
- Roadmap to becoming a web developer (flowcharts suggesting what to learn)
https://github.com/kamranahmedse/developer-roadmap
- Battling specificity but allowing overrides
http://ecss.io/chapter8.html - Living style guide
https://github.com/devbridge/Styleguide - Scoping CSS using variables
https://www.sarasoueidan.com/blog/style-settings-with-css-variables/ - Enforce CSS best practices
https://stylelint.io/
- JS to keep window width, height, and scroll variables up to date
https://github.com/engageinteractive/front-end-baseplate - Resizable components
https://css-tricks.com/building-resizeable-components-relative-css-units/ - CSS-only UI components
http://youmightnotneedjs.com/ - 1-line JS snippets
https://1loc.dev/ - Functions to transform arrays and objects (tidy.js)
https://pbeshai.github.io/tidy/ - Pure Javascript UI widgets https://vanillalist.top/
- You Don't Know JS Yet (book series)
https://github.com/getify/You-Dont-Know-JS - Eloquent JavaScript (book, online)
http://eloquentjavascript.net/ - 33 Concepts Every JavaScript Developer Should Know (updated regularly)
https://github.com/leonardomso/33-js-concepts - Structured course/tutorial
https://javascript.info/ - Robust Client-Side JavaScript (book)
https://molily.de/robust-javascript/ - AirBnB JavaScript Style guide
https://github.com/airbnb/javascript - For those transitioning from jQuery
https://plainjs.com/ - Functional Programming Jargon
https://github.com/hemanth/functional-programming-jargon - Functional programming https://jrsinclair.com/articles/2022/whats-so-great-about-functional-programming-anyway/
- Babel w/ webpack to convert modern ES6 syntax
https://github.com/philipwalton/webpack-esnext-boilerplate
https://chrisbateman.github.io/webpack-visualizer/ - ES6 module syntax, History of modules
https://ponyfoo.com/articles/brief-history-of-modularity - Strive for pure functions
https://github.com/MostlyAdequate/mostly-adequate-guide/blob/master/ch08.md#old-mcdonald-had-effects
http://adamjonrichardson.com/2013/09/07/fall-through-functions/ - Manipulating the DOM (code snippets)
https://htmldom.dev/ - Strong types in javascript
https://www.typescriptlang.org/docs/tutorial.html
http://elm-lang.org/ https://www.metachris.com/2021/04/starting-a-typescript-project-in-2021/
https://spin.atomicobject.com/2021/05/11/3-useful-typescript-patterns/ https://type-level-typescript.com/ - Polyfills
https://github.com/zloirock/core-js
https://philipwalton.com/articles/loading-polyfills-only-when-needed/
- Debugging with breakpoints in Chrome
https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db - https://medium.com/welldone-software/an-overview-of-javascript-testing-7ce7298b9870
- https://jestjs.io/docs/en/getting-started
- https://www.cypress.io/ (used by sapper)
- Automated regression tests with no code
https://reflect.run/ - Headless browser automation
https://github.com/microsoft/playwright-test - Svelte testing https://dev.to/d_ir/introduction-4cep https://davipon.hashnode.dev/test-svelte-component-using-vitest-playwright playwright + sveltekit: https://www.youtube.com/watch?v=Me6qEMzmlaU
- Log file analysis https://news.ycombinator.com/item?id=33971432 Log file viewer: https://lnav.org/
- Front-end testing best practices https://infinum.com/handbook/frontend/react/testing-best-practices https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component
- https://github.com/jorgebucaran/hyperapp
- https://mithril.js.org/
- https://riot.js.org/
- React
https://github.com/kay-is/react-from-zero
https://2ality.com/2020/08/minimal-react.html
https://www.robinwieruch.de/learn-react-before-using-redux/
http://lucasmreis.github.io/blog/simple-react-patterns/
https://nextjs.org/ https://www.patterns.dev/ - Svelte
https://svelte.dev/ - Solid: A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://github.com/ryansolid/solid
- https://objectcomputing.com/resources/publications/sett/july-2019-web-dev-simplified-with-svelte
- https://dev.to/d_ir/introduction-4cep
- Why build tools?
https://www.swyx.io/writing/jobs-of-js-build-tools/ - Webpack
https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling - PostCSS instead of SASS
https://tylergaw.com/articles/sass-to-postcss
https://www.toptal.com/front-end/postcss-sass-new-play-date
https://blog.madewithenvy.com/webpack-2-postcss-cssnext-fdcd2fd7d0bd - Critical CSS (command line tool)
https://github.com/filamentgroup/criticalCSS
- https://bitsofco.de/document-outlines-in-html-5-1/
- https://10up.github.io/wp-component-library/
- https://css-tricks.com/how-to-section-your-html/
- Horizontal rules
https://www.sarasoueidan.com/blog/horizontal-rules/ - HEAD elements
https://htmlhead.dev/
- JavaScript upload widget
https://uppy.io/ https://pqina.nl/filepond/ - Styling Select input element
https://24ways.org/2019/making-a-better-custom-select-element/ - https://baymard.com/blog/inline-form-validation
- https://www.sitepoint.com/the-state-of-html5-input-elements
- Styling buttons
https://moderncss.dev/css-button-styling-guide/ - 3-D button (hover state looks bad but not necessary)
https://www.joshwcomeau.com/animation/3d-button/ - Styling radio and checkbox
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ - Custom toggle button
https://dev.to/codebubb/create-a-simple-on-off-slide-toggle-with-css-db8 - Normalization across browsers
https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/ - Survey.js (javascript library)
https://surveyjs.io/
- https://every-layout.dev/
- Guide to flexbox https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
- Alignment using minimal flex styles
https://gist.github.com/sebastiano-guerriero/9466c6a503cab779118fe932c5fae9d2 - https://github.com/almonk/pylon
- https://github.com/thoughtbot/neat (uses floats but compatible with flexbox)
- https://github.com/fortrabbit/teutonic-css/
- https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/
- Z-index organization
https://hackernoon.com/my-approach-to-using-z-index-eca67feb079c - Vertical margins between different html elements
https://medium.com/@sebastian.eberlein/advanced-vertical-margins-4ac69f032f79 - Move modules in source order based on mediaqueries
https://github.com/filamentgroup/AppendAround - Experiments / Demos
http://labs.jensimmons.com/ - Container queries
https://css-tricks.com/minimal-takes-on-faking-container-queries/ - Responsive layouts without mediaqueries
https://www.sitepoint.com/responsive-css-patterns-without-media-queries
https://smolcss.dev/ Intrinsic sizes for all gaps: https://youtu.be/8slZJrTK3nE?t=1268 https://ishadeed.com/article/use-cases-css-comparison-functions - Detect elements resize
https://github.com/wnr/element-resize-detector - Resizable columns (gutter handle)
https://github.com/nathancahill/split - Hero images / overlays
https://css-tricks.com/positioning-overlay-content-with-css-grid/ - The 100vh bug (full height)
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
https://cloudfour.com/thinks/a-bashful-button-worth-8-million/ - Masonry layout (javascript) http://callmecavs.com/bricks.js/
- https://atomiks.github.io/tippyjs/
- Old, but includes CSS-only samples
http://bubb.surge.sh/ - https://sarasoueidan.com/blog/accessible-tooltips/
- CSS-only
http://codepen.io/fabriziocuscini/pen/kkaaOv - https://github.com/Simonwep/nanopop
- Lots of options:
https://www.floating-ui.com/
- https://inclusive-components.design/collapsible-sections/
- https://github.com/oncode/handorgel
- https://codepen.io/brundolf/pen/dvoGyw
- https://kyusuf.com/post/completely-css-progressively-collapsing-navigation
- https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
- Site structure for a large website
https://gds.blog.gov.uk/2021/05/17/our-plans-to-improve-navigation-on-gov-uk/
- Offline first
https://bitsofco.de/bitsofcode-pwa-part-1-offline-first-with-service-worker/ - Storing data in the browser (cookies, localStorage)
https://github.com/marcuswestin/store.js
https://github.com/cferdinandi/bin
- Clipping and masking using CSS
https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/
https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html - CSS Shapes
http://alistapart.com/article/redesign-with-css-shapes
https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498 - Background gradients
http://evankarageorgos.github.io/hue/grid.html
https://www.gradientmagic.com/
https://css-tricks.com/grainy-gradients/
https://animated-gradient-background-generator.netlify.app/ https://sarcadass.github.io/granim.js - Smooth box-shadows
https://tobiasahlin.com/blog/layered-smooth-box-shadows/
https://www.joshwcomeau.com/css/designing-shadows/ Generator tool: https://www.joshwcomeau.com/shadow-palette/ https://smoothshadows.com/ - Segment effect on background image
http://tympanus.net/Development/SegmentEffect/index.html - Blurry background
backdrop-filter: blur(10px); - CSS Patterns (using web component; for random animated backgrounds)
https://css-doodle.com/ - Create graphics with a hand-drawn, sketchy, appearance
https://roughjs.com - Gradient and knockout text
https://letsbuildui.dev/articles/css-text-effects-five-minimal-examples - Knockout text on scroll
https://css-tricks.com/going-from-solid-to-knockout-text-on-scroll/ - 3D tilt animation when hovering over element https://github.com/micku7zu/vanilla-tilt.js
- http://www.kennethcachia.com/background-check/index.html
- https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html
- Header foreground colour changing based on background
https://codyhouse.co/tutorials/chameleonic-header-effect - Text overlay / scrim
https://css-tricks.com/design-considerations-text-images/
https://blog.iamsuleiman.com/techniques-to-display-text-overlay-background-images/
- http://www.vanschneider.com/colors/
- https://color.cloudflare.design/
- https://www.colorbox.io/
- https://meodai.github.io/poline/
- Smashing's yearly epic post
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/ - https://css-tricks.com/case-study-boosting-front-end-performance/
- https://github.com/Easyfood/pageAccelerator
- Load less javascript
https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e - https://varvy.com/pagespeed/defer-loading-javascript.html
- Jank-busting
https://pagebuildersandwich.com/increased-plugins-performance-200/ - Memory leaks
https://nolanlawson.com/2020/02/19/fixing-memory-leaks-in-web-applications/ - High Performance Browser Networking (in-depth)
https://hpbn.co/ - How browsers work (in-depth)
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Audit page weight, javascript and CSS
https://yellowlab.tools/ - Monitor page speed on user's browsers
https://zizzamia.github.io/perfume/
- Removing background (automatic tool)
https://www.remove.bg/
https://clipdrop.co/ - Erase objects from photo (online tool)
https://cleanup.pictures/ - Image borders with blend modes
http://thenewcode.com/1065/Better-Image-Borders-with-Blend-Modes - SVG filter effects
https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/ - Dithering to save file size
https://endtimes.dev/why-you-should-dither-images/
- Lazy loading techniques
Most of these are now obsolete because of native lazy-loading. https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native
https://github.com/alterebro/accessible-image-lazy-load
https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163
https://github.com/aFarkas/lazysizes (used by kinfolk and ignant)
https://robinosborne.co.uk/2016/05/16/lazy-loading-images-dont-rely-on-javascript/
http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads
https://github.com/ApoorvSaxena/lozad.js
https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ - Are images loaded?
http://imagesloaded.desandro.com/ - SRCSET vs SIZES
https://css-tricks.com/sometimes-sizes-is-quite-important/ - PICTURE + SRCSET for fullscreen, large images https://engineering.q42.nl/optimizing-full-screen-images/
- Placeholders while page loads
https://manu.ninja/dominant-colors-for-lazy-loading-images
http://daverupert.com/2015/12/intrinsic-placeholders-with-picture/
https://kyusuf.com/post/fake-it-til-you-make-it-css
https://github.com/ben-eb/postcss-resemble-image
https://github.com/woltapp/blurhash - Lazy-loading iframes
https://github.com/viktorbergehall/lazyframe/blob/master/src/lazyframe.js - Convert bitmap to SVG (trace)
https://github.com/fogleman/primitive
https://github.com/technopagan/sqip - Optimization tips
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/#assets-optimizations https://stackoverflow.blog/2022/03/28/picture-perfect-images-with-the-modern-element
- https://news.ycombinator.com/item?id=12209595
- Sharer.js
https://ellisonleao.github.io/sharer.js/ - Minimal social markup https://meiert.com/en/blog/minimal-social-markup/
- Icon libraries
Huge library of libraries: https://icones.js.org/ Large DB, mostly w/ attribution licenses: https://thenounproject.com/
Only brand logos: https://simpleicons.org/
Mainly brand logos: https://github.com/edent/SuperTinyIcons/
Wide variety, open source: https://feathericons.com/
Fork of feather icons with larger variety: https://lucide.dev/ https://www.svgrepo.com/
https://www.snoweb-svg.com/en/ https://humbleicons.com/ https://heroicons.com/ https://atlasicons.vectopus.com/ https://iconsax.io/ https://iconoir.com/ https://flowbite.com/icons/ Free, open source: https://remixicon.com/ - Favicons
https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs https://iconmap.io/blog - Icon editor (vector)
https://100r.co/site/dotgrid.html - SVG star shapes https://shapes.framer.website
- Optimizing GIFs
https://bitsofco.de/optimising-gifs - Replacing GIFs with video
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/
https://www.singhkays.com/blog/its-time-replace-gifs-with-av1-video/
https://cloudinary.com/blog/evolution_of_img_gif_without_the_gif
- Dynamic waveforms with audio player https://wavesurfer-js.org/
- Peaks.js: Browser-based audio waveform visualisation https://waveform.prototyping.bbc.co.uk/
- Audio visualization with ffmpeg https://lukaprincic.si/development-log/ffmpeg-audio-visualization-tricks
- JS audio visualizer https://github.com/foobar404/Wave.js/
- Responsive video
https://css-tricks.com/reframe-js-notes/ - Optimizing video
https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/ - Background video with blend-mode text overlay
http://thenewcode.com/1136/Fullscreen-Background-Video-with-mix-blend-mode-Overlay-Text - Video players
https://github.com/videojs/video.js
https://vimejs.com/ https://plyr.io/ - Self-hosting video
https://news.ycombinator.com/item?id=23894827 - Fast YouTube embed widget
https://github.com/paulirish/lite-youtube-embed - FFmpeg https://img.ly/blog/ultimate-guide-to-ffmpeg/
- SVG gotchas
https://css-tricks.com/gotchas-on-getting-svg-into-production/ - Use SVG sprites for icon sets
https://css-tricks.com/svg-sprites-use-better-icon-fonts/ - SVG Optimizer
https://jakearchibald.github.io/svgomg/ - Convert absolute to relative paths
https://codepen.io/leaverou/full/RmwzKv - SVG head declarations
https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e - SVG path editor
https://github.com/Yqnn/svg-path-editor https://yqnn.github.io/svg-path-editor/ - Icon editor (vector)
https://100r.co/site/dotgrid.html - Animated icons
https://getloaf.io/ - Editor (scaling paths)
https://editor.method.ac/ - Trim whitespace
https://svgcrop.com/ - Performance (incl: avoid complicated filters)
https://codepen.io/tigt/post/improving-svg-rendering-performance - Convert SVG to canvas
https://github.com/fabricjs/fabric.js - Convert absolute clippaths to relative
https://yoksel.github.io/relative-clip-path/ - Convert font text to SVG path
https://danmarshall.github.io/google-font-to-svg-path/
- Justified Image Gallery with only CSS: xieranmaya/blog#6
- Oldies, support has dropped off since their heyday http://flickity.metafizzy.co/ http://kenwheeler.github.io/slick
- http://mediatemple.net/blog/tips/carousels-dont-have-to-be-complicated/
- Basic functionality only: https://www.embla-carousel.com/
- https://naver.github.io/egjs-flicking/
- https://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/
- https://github.com/rcbyr/keen-slider
- https://swiperjs.com/
- Accessible, modern (circa 2022): https://splidejs.com/
- https://micromodal.now.sh/
- Lightboxes
https://github.com/nextapps-de/spotlight
https://github.com/dimsemenov/photoswipe
https://github.com/deoostfreese/Parvus (nice zoom animation; small footprint) - Dynamically measure width of sidebar (prevent body shift when toggling)
https://stackoverflow.com/a/57748743/3976381
- https://github.com/isaacHagoel/svelte-dnd-action
- https://greensock.com/draggable/ (inertia/snap == premium)
- dokku
https://news.ycombinator.com/item?id=19015504 - rancher
- Piku
https://github.com/piku/piku - https://caprover.com/
- https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
- https://www.staticforms.xyz/
- https://formsubmit.co/
- https://formspree.io/
- https://formbucket.com/
- https://www.typeform.com/
- Search engine
https://typesense.org/
https://www.raymondcamden.com/2021/06/02/using-lunr-with-eleventy-via-netlify-serverless-functions
https://www.npmjs.com/package/flexsearch - Client-side search
https://fusejs.io/ - Comment system
https://docs.coralproject.net/
- https://github.com/open-guides/og-aws
- https://abhishek-tiwari.com/post/CloudFront-design-patterns-and-best-practices
- Importing files from localhost to web server
http://wordpress.stackexchange.com/questions/87395/import-media-to-online-wordpress-from-local-development - WordPress performance
AWS - https://news.ycombinator.com/item?id=12844173
https://poststatus.com/scaling-wp-draft/
http://wordpress.stackexchange.com/questions/166448/how-to-optimize-wp-site-for-millions-of-posts - Remove dangerous buttons from visual editor (WordPress)
https://gist.github.com/tommcfarlin/86e4f040bcc641a86f59
https://make.wordpress.org/core/2016/08/17/wordpress-4-7-whats-on-your-mind/#comment-30875
- Eleventy (super simple)
https://www.11ty.io/ - https://www.netlifycms.org/
- very customizable content types
- content is stored in github and saved in commits and branches
- has built-in "relation" field type
- role based access to content only available on expensive team plans
- https://www.getlektor.com/
- Hugo
- CMS & ecommerce recommendations
- contentful (expensive)
- backendless
- firebase (for managing real time state)
- gatsby (can use wordpress as a source)
- Self-hosted headless CMS store with API
- Frontity (WordPress backend + React frontend)
- https://frontity.org/
- similar to strapi?
- WordPress > Static
https://www.strattic.com/ - WordPress + Gatsby
- Svelte SSG
https://www.junglejs.org/
https://github.com/elderjs/elderjs
- PHP type-hinting
http://torquemag.io/2016/09/wordpress-developers-guide-type-hinting/ - PHP The Right Way https://phptherightway.com/
- How do you roll back in production?
https://news.ycombinator.com/item?id=21433526 - 12 factor app
https://12factor.net/
- vagrant
- docker
- https://multipass.run/
- nitro/craft
- local/flywheel
- laravel/valet
- Nix
https://nix.dev/
https://tech.channable.com/posts/2021-04-09-nix-is-the-ultimate-devops-toolkit.html
https://ianthehenry.com/posts/how-to-learn-nix/ https://mat.services/posts/static-site-with-nix-and-caddy/
- https://github.com/FallibleInc/security-guide-for-developers/blob/master/security-checklist.md
- https://blog.appcanary.com/2017/http-security-headers.html
- https://observatory.mozilla.org/
- https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/
- https://www.smashingmagazine.com/2017/06/guide-switching-http-https/
- GDPR
https://www.cnil.fr/en/cnil-publishes-gdpr-guide-developers - opting out of FLoC
https://github.com/WICG/floc#opting-out-of-computation
- https://medium.com/net-magazine/web-performance-secrets-from-the-bbc-d4b01f869752#.ntbr5wotm
- https://www.scalewp.io/
- https://www.varnish-software.com/wiki/content/tutorials/wordpress/wp_step_by_step.html
- Service Worker caching
https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34#.7thi109fw
- Load testing https://www.marcobehler.com/guides/load-testing
- https://www.zachleat.com/web/23-minutes
- http://www.ebaytechblog.com/2017/09/21/ebays-font-loading-strategy/
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
- https://github.com/KyleAMathews/typefaces
- https://helenvholmes.com/writing/type-is-your-right (2nd half of article)
- https://github.com/fonttools/fonttools (subsetting)
- https://www.zachleat.com/web/css-tricks-web-fonts/
- Loading techniques for Google Fonts
https://csswizardry.com/2020/05/the-fastest-google-fonts/
https://google-webfonts-helper.herokuapp.com/fonts (host google fonts locally)
- https://meowni.ca/font-style-matcher/
- Fallback Font Generator (to reduce Reduce Cumulative Layout Shift) https://screenspan.net/fallback
- System fonts in many styles https://modernfontstacks.com/
- Aligning text baselines with form elements
https://jsfiddle.net/05a1aeg1/
https://codyhouse.co/blog/post/vertical-text-alignment-in-buttons-and-inputs - Resize text to fit container
https://github.com/rikschennink/fitty For svelte: https://github.com/leveluptuts/svelte-fit - Line-height + calc()
https://hugogiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ - Making line-height act like leading
https://css-tricks.com/how-to-tame-line-height-in-css/ - Better justification with javascript
https://github.com/robertknight/tex-linebreak - Aligning text vertically based on cap-size
https://seek-oss.github.io/capsize/ https://tonsky.me/blog/centering/ - Aligning text vertically using a pseudo-element
https://ishadeed.com/article/button-label-alignment/ - Fluid text with min() and max()
https://css-tricks.com/simplified-fluid-typography/ - Fluid text with clamp()
https://fluid-typography.netlify.app/ https://www.fluid-type-scale.com/
- https://helenvholmes.com/writing/type-is-your-right
- https://blog.marvelapp.com/body-text-small/
- https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/
- Drop caps
https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems - https://gankra.github.io/blah/text-hates-you/
- What can my font do? https://wakamaifondue.com/
- Font outlines, stroked text https://blog.logrocket.com/create-beautiful-stroked-text-css/
- http://www.fontsmith.com/blog/2016/06/27/optical-illusions-and-eye-trickery-in-geometric-font-design
- https://frerejones.com/blog/typeface-mechanics-002
- http://typographica.org/on-typography/making-geometric-type-work/
- Web-based app (like flash; export to video; non-interactive?) https://animate.construct.net/
- Rive (interactive) https://rive.app/
- SVGator https://www.svgator.com/
- Artboard Studio https://artboard.studio/
- http://alistapart.com/article/designing-interface-animation
- http://alistapart.com/article/designing-interface-animation-interview-with-val-head
- https://css-tricks.com/ground-rules-for-web-animations/
- Smooth css animations
https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.p29f8cj0b - https://medium.com/samsung-internet-dev/animating-dom-changes-33b031927e96
- http://lmgonzalves.github.io/segment/
- https://css-tricks.com/many-tools-shape-morphing/
- Drawing stroke
https://thednp.github.io/kute.js/ https://css-tricks.com/libraries-for-svg-drawing-animations/ - Preparing SVG data for animating
https://notoriousb1t.github.io/polymorph-docs/about.html
https://github.com/veltman/flubber - https://animejs.com/documentation/#morphing
- https://wilderness.now.sh/
- https://shapeshifter.design/
- Like flash keyframes ($50 / $100)
https://tumult.com/hype/ - Skeleton-based animation
https://github.com/yemount/pose-animator - Library for manipulating and animating SVG
https://svgjs.dev/
See also: Data Viz Libraries
- https://popmotion.io/
- http://animejs.com/documentation
- https://thednp.github.io/kute.js/
- http://velocityjs.org/
- http://paperjs.org/examples/
- https://daneden.github.io/animate.css/
- After Effects to Web/App
https://airbnb.design/lottie/ - Simple rotating 3D objects (by metafizzy)
https://zzz.dog/ - Low-level tweening
https://jeremyckahn.github.io/shifty/doc/index.html - Keyframes
https://jeremyckahn.github.io/rekapi/doc/index.html - Spline (3D design tool for the web)
https://spline.design/ - Green Sock - GSAP
https://greensock.com/ - Motion One
https://motion.dev/ - Theatre.js
https://docs.theatrejs.com/ - Scene.js https://daybrush.com/scenejs
- Folding effect
https://tympanus.net/codrops/2020/01/14/3d-folding-technique - 3D camera on HTML elements
https://woodneck.github.io/css-camera/release/latest/docs/index.html - Pull-focus effect
https://codepen.io/Trinca/pen/dWejMB - Page transitions
https://github.com/gmrchk/swup https://barba.js.org/ - Gradient animation
https://sarcadass.github.io/granim.js/examples.html - Glitter texture
https://wh0.github.io/2021/04/25/glitter.html - Grain texture
https://css-tricks.com/snippets/css/animated-grainy-texture/ - Particles
https://github.com/matteobruni/tsparticles - Animated image transitions
https://github.com/aeroheim/midori - 3D Book
https://3d-book-css.netlify.app/ - Custom cursor
https://medium.com/14islands/developing-a-performant-custom-cursor-89f1688a02eb https://github.com/tholman/cursor-effects https://tympanus.net/codrops/2022/08/24/custom-svg-cursors-with-an-interactive-emitter-effect/
- https://blotter.js.org/
- Animating letters
https://tobiasahlin.com/moving-letters/ https://web.dev/building-split-text-animations/ - Typing animation
https://lumin.rocks/
https://edernclemente.com/plugin/typelighterjs
https://thednp.github.io/kute.js/textProperties.html https://css-tricks.com/snippets/css/typewriter-effect/
https://github.com/photopea/Typr.js - Read and write OpenType fonts using JavaScript
https://github.com/opentypejs/opentype.js - Convert to 3D zdog illustration
https://jaames.github.io/zfont/ - 3D test
https://bennettfeely.com/ztext/ - Marquee
https://github.com/codrops/CSSMarqueeMenu/
https://github.com/mattiacoll/vanilla-marquee/ https://ryanmulligan.dev/blog/css-marquee/ https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/ - Animating real underlines
https://css-irl.info/animating-underlines/ - Squiggly https://codepen.io/team/keyframers/pen/mGEepQ
- https://www.filamentgroup.com/lab/scrollbars/
- https://alligator.io/css/css-scrollbars
- https://daily-dev-tips.com/posts/styling-scrollbars-with-css/
- https://blakewatson.com/journal/neglecting-the-scrollbar-a-costly-trend-in-ui-design/
- https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/
- One page scroll sections
https://alvarotrigo.com/fullPage/ - Horizontal scrolling
https://css-tricks.com/pure-css-horizontal-scrolling/ - Reverse-scrolling columns https://css-tricks.com/css-scroll-timeline-reverse-motion-preference/
- Smooth out mousewheel...
https://stackoverflow.com/a/47206289/3976381
https://github.com/idiotWu/smooth-scrollbar https://locomotivemtl.github.io/locomotive-scroll/ https://github.com/studio-freight/lenis
- https://medium.com/@dhg/parallax-done-right-82ced812e61c
- https://dixonandmoe.com/rellax/
- https://github.com/stutrek/scrollmonitor-parallax
- https://github.com/the-couch/paralless
- https://scrollmagic.io/
- https://simpleparallax.com/
- https://github.com/alexfoxy/lax.js/
- https://tympanus.net/codrops/2019/07/23/smooth-scrolling-image-effects/
- on mouse move: https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid
- https://locomotivemtl.github.io/locomotive-scroll/
- https://greensock.com/scrolltrigger/
- 3D parallax
https://atroposjs.com/ - ScrollTimeline polyfill
https://github.com/flackr/scroll-timeline
demos: https://codepen.io/collection/DkdaQK?cursor=ZD0xJm89MSZwPTEmdj0z
- Scrollspy: https://github.com/cferdinandi/gumshoe
- https://github.com/stutrek/scrollMonitor
- https://terwanerik.github.io/ScrollTrigger/
- http://developer.telerik.com/featured/guide-browser-scroll-animations/ (2016)
- Get notified when a DOM element enters or exits the viewport
https://camwiegert.github.io/in-view/ (2016) - http://mynameismatthieu.com/WOW/
- https://github.com/jlmakes/scrollreveal
- https://q42.github.io/delighters/
- https://michalsnik.github.io/aos/
- https://blog.logrocket.com/how-to-do-scroll-linked-animations
- https://github.com/yowainwright/scrolldir
- https://github.com/mciastek/sal
- https://github.com/alexfoxy/lax.js/
- https://pudding.cool/process/introducing-scrollama/
- https://github.com/russellgoldenberg/enter-view
- https://scrollmagic.io/
- Animate anchor links
https://github.com/hsnaydd/moveTo
- Motion blur on scroll
https://codepen.io/JTParrett/pen/BNeGZE - Morphing background shapes on scroll
https://tympanus.net/Development/MorphingBackgroundShapes/index.html
- https://abouolia.github.io/sticky-sidebar/
- https://pudding.cool/process/scrollytelling-sticky/
- https://pudding.cool/process/introducing-scrollama/
- https://tympanus.net/Development/StorytellingMap/
- Video scrubbing
https://blog.koenvangilst.nl/tutorial-svelte-scroll-video/
https://www.ghosh.dev/posts/playing-with-video-scrubbing-animations-on-the-web/ - Examples
https://www.sbs.com.au/theboat/
- WebGL + scrolling
Demo https://newsinteractives.cbc.ca/continentaldivide/- uses: scrollmagic, three.js, tween.js Demo https://www.nytimes.com/interactive/2018/05/01/science/mars-nasa-insight-ar-3d-ul.html - uses: three.js + lots of custom JS - JS is readable: https://static01.nyt.com/newsgraphics/2018/04/16/ar-mars/ae4ff39e442c991137ff32aa96a8e4d0634145af/build.js
- 3D fly-through dependency graph
https://github.com/anvaka/pm - Guide to WebGL
https://xem.github.io/articles/webgl-guide.html - Hand gestures (minority report?)
https://www.npmjs.com/package/handsfree - Options for delivering 3D on the web
https://rd.nytimes.com/projects/delivering-3d-scenes-to-the-web
- Leaflet instead of Google Maps API
- Shopping Mall map
https://codecanyon.net/item/mapplic-custom-interactive-map-wordpress-plugin/6800158 - Alternatives to Google Maps
https://news.ycombinator.com/item?id=23722133 - 3D elevation maps (w/ tooltips)
https://github.com/felixpalmer/procedural-gl-js - Dungeon map doodler
https://news.ycombinator.com/item?id=25232290 - Geocoding, geofencing, search, and distance APIs
https://radar.io/ - Custom vector map tiles with OSM data
https://protomaps.com/blog/new-way-to-make-maps/ - Custom static maps using python + OSM data
https://github.com/marceloprates/prettymaps - Base maps for visualization
https://carto.com/pricing/ - Web map performance
https://bdon.org/blog/web-map-performance/ - World map generator (PNG, SVG)
https://www.worldmapgenerator.com/ - MapLibre GL (webgl js library)
https://maplibre.org/projects/ - Utility library for geojson analysis (calculating distances, smoothing polygons, etc) https://turfjs.org
- https://github.com/anvaka/panzoom
- https://github.com/bumbu/svg-pan-zoom
- https://svelte-parts.surge.sh/zoom/
- Zooming high-res photos: https://openseadragon.github.io/
- Three.js
- https://github.com/oframe/ogl
- https://modelviewer.dev/
- JavaScript 2D animation
http://www.pixijs.com/ - Low-level animation library
https://ptsjs.org/ - ReactJS Dataviz
https://formidable.com/open-source/victory/ - Processing + JS: https://p5js.org/
- Functions to help manipulate data
https://pbeshai.github.io/tidy/ - Timelines
https://github.com/visjs/vis-timeline - Two.js (like three.js but 2D)
https://two.js.org/ - Apache ECharts https://echarts.apache.org/en/index.html
- Weather
https://openweathermap.org/
- https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
- With Svelte
https://svelte-cubed.vercel.app/
- Markdown-like script language for generating charts from text via javascript
https://mermaid-js.github.io/mermaid/#/ - Flowchart, sitemap drawing tools
https://asciiflow.com/
https://www.gloomaps.com/
https://app.diagrams.net (previously, draw.io)
https://excalidraw.com/ - Infinite whiteboard library https://www.tldraw.dev/
- Military Infographics
https://medium.com/message/amazing-military-infographics-1ba60bdc32e7 - Timelines
http://histography.io/
Book: Cartographies of time: a history of the timeline Demo using GSAP: https://tympanus.net/codrops/2022/01/03/building-a-scrollable-and-draggable-timeline-with-gsap/ https://neal.fun/internet-artifacts/
- https://github.com/cjbarber/ToolsOfTheTrade
- https://github.com/Kickball/awesome-selfhosted
- https://github.com/dexteryy/spellbook-of-modern-webdev
- More design resources than code
https://css-tricks.com/design-resource-sites/ - All in one list of links for designers
http://evernote.design/ - https://github.com/LisaDziuba/Awesome-Design-Tools
- https://www.niceverynice.com/
- https://github.com/sindresorhus/awesome
- https://axesslab.com/accessibility-according-to-pwd/
- https://axesslab.com/alt-texts/
- https://github.com/jackdomleo7/Checka11y.css
- https://www.smashingmagazine.com/2021/11/dyslexia-friendly-mode-website/
- https://blakewatson.com/journal/neglecting-the-scrollbar-a-costly-trend-in-ui-design/
- Centred logos are bad
https://www.nngroup.com/articles/centered-logos/ - Search box
https://uxplanet.org/design-a-perfect-search-box-b6baaf9599c#.52k4kbi77 - SaaS landing pages
https://news.ycombinator.com/item?id=18410628 - Very tall pages on mobile
https://www.viget.com/articles/do-responsive-sites-have-to-be-so-tall-on-mobile - Why performance matters
http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/ - Carousels
https://www.dgtlnk.com/blog/website-carousel/
http://shouldiuseacarousel.com/
https://www.smashingmagazine.com/2022/04/designing-better-carousel-ux/ - Website as a city
https://interconnected.org/home/2021/03/31/maps - Microcopy https://developer.apple.com/design/human-interface-guidelines/foundations/writing/
- Flashing or autoplay animation annoys people https://astralcodexten.substack.com/p/every-flashing-element-on-your-site
- Forms https://adamjones.me/blog/dont-use-contact-forms/
- https://allenpike.com/2019/navigation-should-be-boring
- https://www.nngroup.com/articles/hamburger-menus/
- https://uxplanet.org/great-alternatives-to-hamburger-menus-d4c76d9414dd#.5mkxzcums
- http://www.lukew.com/ff/entry.asp?1945
- Simple off-canvas navigation menus
https://github.com/toomuchdesign/offside - Accessible website navigation https://web.dev/website-navigation/ https://news.ycombinator.com/item?id=34545943
- Discover, decide, make, validate
https://methods.18f.gov/ - https://alistapart.com/article/practical-design-discovery
- https://medium.freecodecamp.com/no-budget-no-excuse-heres-a-practical-guide-to-ux-on-the-cheap-9605c77ef55b
- https://bojler.slicejack.com/
- https://www.caniemail.com/
- MJML builder
https://grapesjs.com/ - Templates https://github.com/threeheartsdigital/emailoctopus-templates
- Little UI Details
https://mobile.twitter.com/i/moments/880688233641848832
- https://boardgame.io/
- https://news.ycombinator.com/item?id=17477484
- https://ctjs.rocks/
- https://phaser.io/
- https://news.ycombinator.com/item?id=24910995
- Text adventures
https://news.ycombinator.com/item?id=26181863
https://www.inklestudios.com/ink/web-tutorial/
http://inform7.com/
https://adventuron.io/ https://twinery.org/ - https://ledoux.itch.io/bitsy
- https://github.com/KilledByAPixel/LittleJS
- https://melonjs.org/
- https://love2d.org/
- Kaboom
https://kaboomjs.com/
https://makejsgames.com/
- https://nickbentley.games/2018/06/08/organicity-in-abstract-strategy-games/
- Event queues
https://gameprogrammingpatterns.com/event-queue.html - https://www.gamedeveloper.com/console/playdate-pulp-zero-to-video-game-in-60-seconds
- https://www.edx.org/course/cs50s-introduction-to-game-development
- Making Small Games https://news.ycombinator.com/item?id=38854596
- https://www.aerogrammestudio.com/2013/03/07/pixars-22-rules-of-storytelling/
- https://robertheaton.com/2018/12/06/a-blogging-style-guide/
- https://www.thisworddoesnotexist.com/
- How to write fiction https://lithub.com/ian-fleming-explains-how-to-write-a-thriller/ https://www.theguardian.com/books/2000/oct/01/stephenking.sciencefictionfantasyandhorror https://www.theatlantic.com/magazine/archive/1944/12/the-simple-art-of-murder/656179/ https://www.advancedfictionwriting.com/articles/snowflake-method/
- Evergreen, link-bait content
https://www.swyx.io/friendcatchers/ - Publishing cadence/speed https://www.henrikkarlsson.xyz/p/effort-pieces
- https://www.johnwdefeo.com/articles/seo-for-engineers
- Broken Link Scanners https://github.com/lycheeverse/lychee (does not crawl) https://github.com/raviqqe/muffet
- https://philipwalton.com/articles/the-ga-setup-i-use-on-every-site-i-build/
- https://github.com/thenextweb/gtm
- https://www.theatlantic.com/technology/archive/2012/10/dark-social-we-have-the-whole-history-of-the-web-wrong/263523/
- https://github.com/googleanalytics/autotrack
- Simple Analytics
https://missiveapp.com/blog/privacy-first-analytics - Shell script which compiles access logs
https://news.ycombinator.com/item?id=26848827
- https://www.sideprojectchecklist.com/marketing-checklist/
- https://github.com/goabstract/Marketing-for-Engineers
- https://css-tricks.com/unconventional-stock-image-sources/
- Placeholder illustrations: https://doodleipsum.com/
- https://wordpress.org/openverse/
- Public domain art from museums: https://standardebooks.org/manual/1.7.0/10-art-and-images#10.3.3.7.4
- https://news.ycombinator.com/item?id=16875106
- Send attachments to google drive
https://www.google.com/script/start/ - Save emailed business receipts to folder
- Record anything that can be done on a screen
http://sikulix.com/ - Selenium
- Scan from phone
https://scanbot.io/en/features.html - https://mailparser.io/
- https://docparser.com/
- https://zapier.com/
- https://textexpander.com/
- Automate a browser, scrape data on a schedule https://browserflow.app/
- Hire someone for that
https://milan.cvitkovic.net/writing/things_youre_allowed_to_do/
- Searching the internet https://gwern.net/search
- https://news.ycombinator.com/item?id=19876825
- https://archive.ph/sa9xL (kirubakaran.com/blog/consulting-outline)
- https://training.kalzumeus.com/newsletters/archive/consulting_1
- https://www.gkogan.co/blog/how-i-learned-to-get-consulting-leads/
- https://tomcritchlow.com/2019/04/04/the-strategic-independent/
- http://unixwiz.net/techtips/be-consultant.html
- All domains owned by a single person
https://dnstrails.com/#/
- Find a good available .com domain https://sive.rs/com https://smartynames.com/
- Jobs-to-be-done
https://24ways.org/2017/jobs-to-be-done-in-your-ux-toolbox/
https://www.intercom.com/books/jobs-to-be-done
- https://www.youtube.com/watch?v=otbnC2zE2rw&t=2s
- https://news.ycombinator.com/item?id=22201337
- Micro-SaaS
https://tylertringas.com/micro-saas-ebook/ - https://www.bannerbear.com/journey-to-10k-mrr/
- Site architecture (kubernetes)
https://news.ycombinator.com/item?id=26737771#26740425
- http://simplifilm.com/improve-client-communication/
- http://simplifilm.com/prevent-problems-creative-projects/
- Dropbox Paper for design and content discussions
- http://changelog.complete.org/archives/9692-im-switching-from-git-annex-to-syncthing
- Syncthing
https://news.ycombinator.com/item?id=23537243 - Git-annex
http://changelog.complete.org/archives/9669-how-git-annex-replaces-dropbox-encfs-with-untrusted-providers - DIY Server back-up
https://news.ycombinator.com/item?id=12672797
- Auto-screenshots (create a timelapse of your web dev) + imagick to create gifs
https://github.com/typicode/tlapse - Nice looking video of web page interaction (for portfolio or demo) https://screenrun.app/
- Nice backgrounds for displaying screenshots and mockups https://shots.so/
- HTTP https://fasterthanli.me/articles/the-http-crash-course-nobody-asked-for
- Learning DNS
https://messwithdns.net/ - TCP/IP https://how-did-i-get-here.net/
- Guide to Online Anonymity
https://anonymousplanet.org/
- Command line guide https://github.com/jlevy/the-art-of-command-line
- https://www.lucasfcosta.com/2019/02/10/terminal-guide-2019.html
- Vim + many other common command line tools
https://sanctum.geek.nz/arabesque/series/unix-as-ide/ - Linux tools/tips
https://news.ycombinator.com/item?id=23229241 - Mouseless dev environment book
https://themouseless.dev/ - Bash scripting
https://betterdev.blog/minimal-safe-bash-script-template/ - Python framework for building command-line tools
https://click.palletsprojects.com/ - Learning Linux
https://carltheperson.com/posts/10-things-linux https://www.linuxfromscratch.org/lfs/ - Zsh tricks
https://news.ycombinator.com/item?id=26175894 - Shell scripting best practices https://sharats.me/posts/shell-script-best-practices/
- Securing a new Linux server https://pboyd.io/posts/securing-a-linux-vm/
- https://thevaluable.dev/vim-beginner/
- Practical Vim by Drew Neil (book)
- http://blog.ploeh.dk/2017/10/04/from-design-patterns-to-category-theory/
- https://bartoszmilewski.com/2014/10/28/category-theory-for-programmers-the-preface/
- MIT intro
https://www.youtube.com/watch?v=HtSuA80QTyo&index=1&list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb - Khan Academy
https://www.khanacademy.org/computing/computer-science/algorithms/ - Drawing a tree
https://rachel53461.wordpress.com/2014/04/20/algorithm-for-drawing-trees/
- https://teachyourselfcs.com/
- The Missing Semester of Your CS Education
https://missing.csail.mit.edu/ - https://www.edx.org/course/cs50s-introduction-to-computer-science
- Intro: https://thecomputersciencebook.com/book/
- https://www.coursera.org/courses?query=google
- https://functionalcs.github.io/curriculum/
- CS degree in 3 months
https://news.ycombinator.com/item?id=25467900 - https://www.facebook.com/notes/kent-beck/mastering-programming/1184427814923414
- https://github.com/mr-mig/every-programmer-should-know
- Effective Engineer
https://gist.github.com/rondy/af1dee1d28c02e9a225ae55da2674a6f - https://fullstackmark.com/post/11/better-software-design-with-clean-architecture
- https://martinfowler.com/bliki/BoundedContext.html
- https://www.martinfowler.com/articles/refactoring-pipelines.html
- Book: How to Design Programs https://htdp.org/
- Prolog
https://www.matchilling.com/introduction-to-logic-programming-with-prolog/ https://news.ycombinator.com/item?id=26806554
http://www.call-with-current-continuation.org/articles/the-joy-of-concurrent-logic-programming.txt - Idempotence
https://news.ycombinator.com/item?id=26726449 - Data-Oriented Design
https://dataorienteddesign.com/dodbook/dodmain.html - Learn X in Y Minutes
https://learnxinyminutes.com/ - Algorithms, physics, processing
https://natureofcode.com/ - Open Source Society University https://github.com/ossu/computer-science
- https://webtoapp.design/
- https://blog.pwabuilder.com/posts/publish-your-pwa-to-the-ios-app-store/
- https://capacitorjs.com/
- https://whatpwacando.today/
- Learning synths
https://news.ycombinator.com/item?id=20272346 Build your own synth: https://noisecraft.app https://vcvrack.com/ https://learningsynths.ableton.com/ https://www.soundonsound.com/series/synth-secrets-sound-sound https://support.apple.com/en-ca/guide/logicpro/lgsidcd8a98b/mac https://www.synthesizer-cookbook.com/ https://news.ycombinator.com/item?id=27822489 - Drum machines
https://news.ycombinator.com/item?id=25103111 - Modular synth simulator
https://vcvrack.com/ https://patch.cab/ (built with Svelte) - Genre guide
https://everynoise.com/ - Guide to electronic music
https://music.ishkur.com/ - Awesome list: audio programming (DSP)
https://github.com/olilarkin/awesome-musicdsp - Web Audio API https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode https://tonejs.github.io/
- Audio programming https://supercollider.github.io/ https://cabbageaudio.com/
- https://ourway.keybase.pub/mathematics_cheat_sheet.pdf
- https://0a.io/chapter1/calculus-explained.html
- http://calculusmadeeasy.org/
- Gilbert Strang Teaches Linear Algebra
https://news.ycombinator.com/item?id=22382337 - "Math for Video Games" (course)
https://www.gamedev.tv/courses/enrolled/1303526 - Statistics
https://github.com/rmcelreath/stat_rethinking_2022 - Higher Math https://venhance.github.io/napkin/Napkin.pdf
- Discussion, learning math https://news.ycombinator.com/item?id=30591177
- Free online courses
http://www.openculture.com/freeonlinecourses - Build your own X
https://github.com/danistefanovic/build-your-own-x - Electronics
https://www.allaboutcircuits.com/textbook/ https://news.ycombinator.com/item?id=35437065 https://ultimateelectronicsbook.com/ https://invidious.flokinet.to/playlist?list=PL7qUW0KPfsIIOPOKL84wK_Qj9N7gvJX6v - Mind hacking
http://www.ludism.org/mentat/HomePage - Languages
https://www.languagetransfer.org/complete-spanish
https://news.ycombinator.com/item?id=30467597 https://news.ycombinator.com/item?id=40336607 - Craftsmanship
https://simplifier.neocities.org/ - Drawing https://drawabox.com/ https://news.ycombinator.com/item?id=39986687
- Directory of educational YouTube channels (all topics) https://limnology.co/en/languages/en/keywords
- https://aeon.co/ideas/we-have-a-new-word-for-that-feeling-when-travel-makes-everything-new
- https://www.theguardian.com/cities/2019/may/09/the-art-of-noticing-five-ways-to-experience-a-city-differently
- http://www.williamcronon.net/researching/landscapes.htm
- https://faroutride.com/internet-vanlife/
- https://faroutride.com/free-campsites/
- https://www.numbeo.com/cost-of-living/
- https://www.kalzumeus.com/japan-recommendations/