It's a reading list

Index

• Index
• Wisdom
• Systems Design
• Computer Science
• General Programming
• Organization
• Performance
• JS Framework Wars
• JavaScript
• TypeScript
• HTML/CSS
• React
• Redux
• Video
• UX
• Networking
• API
• Tinkering

Wisdom

• Things I Learnt The Hard Way (in 30 Years of Software Development)

  https://blog.juliobiason.net/thoughts/things-i-learnt-the-hard-way/

• My Guiding Principles After 20 Years of Programming

  https://alexewerlof.medium.com/my-guiding-principles-after-20-years-of-programming-a087dc55596c

• Lisping at JPL

  http://flownet.com/gat/jpl-lisp.html

  "The situation is particularly ironic because the argument that has been advanced for discarding Lisp in favor of C++ (and now for Java) is that JPL should use "industry best practice." The problem with this argument is twofold: first, we're confusing best practice with standard practice. The two are not the same. And second, we're assuming that best (or even standard) practice is an invariant with respect to the task, that the best way to write a word processor is also the best way to write a spacecacraft control system. It isn't."

• 100 Things Every Web Developer Should Know

  https://www.baldurbjarnason.com/2021/100-things-every-web-developer-should-know/

• What to Learn

  https://danluu.com/learn-what/

• Reading Postmortems

  https://danluu.com/postmortem-lessons/

  "If you care about building robust systems, the error checking code is the main code!"

• Complexity Has to Live Somewhere

  https://ferd.ca/complexity-has-to-live-somewhere.html

  "Complexity has to live somewhere. If you embrace it, give it the place it deserves, design your system and organisation knowing it exists, and focus on adapting, it might just become a strength."

• My Engineering Axioms

  https://martinrue.com/my-engineering-axioms/

• The Rise of Worse is Better

  "The lesson to be learned from this is that it is often undesirable to go for the right thing first. It is better to get half of the right thing available so that it spreads like a virus. Once people are hooked on it, take the time to improve it to 90% of the right thing."

  https://www.dreamsongs.com/RiseOfWorseIsBetter.html

• 50 Short Product Lessons

  https://cutle.fish/blog/50-product-lessons#anchor46

• Technical Debt Quadrant

  A useful explanation of how to conceive of the Technical Debt metaphor and different kinds of Technical Debt.

  https://martinfowler.com/bliki/TechnicalDebtQuadrant.html

• New Evidence That British Workplaces Are Losing Viewpoint Diversity

  "However, organizations can depolarize. Leaders and communicators can influence this process by creating a sense of common purpose, firmly rooted in a clear and reassuring view of the future, in which everyone understands the role they have to play and all voices are listened to, even if they don’t feel confident about speaking up."

  https://www.ethicalsystems.org/new-evidence-that-british-workplaces-are-losing-viewpoint-diversity/

• How Philosophers Think

  "The pressure to have an opinion on every important topic has incentivized lazy thinking, the consequences of which we feel every day. Only by expanding our intellectual aperture and attacking our own ideas can we wage war on the narcotic of cheap, bumper sticker arguments. As we do, we can identify the intellectual cancers that plague our culture and constrict our worldview."

  https://perell.com/essay/how-philosophers-think/

• Building for the 99% Developers

  https://future.a16z.com/software-development-building-for-99-developers/

• Mental Model Example and Their Explanations

  https://fronterablog.com/mental-model-examples-and-their-explanations/

• How Do You Solve Content Moderation Problems on Twitter?

  https://threadreaderapp.com/thread/1586955288061452289.html

• Advice That Actually Worked for Me

  https://nabeelqu.co/advice

• Ideas that Changed My Life

  You spend years trying to learn new stuff but then look back and realize that maybe like 10 big ideas truly changed how you think and drive most of what you believe.

  https://collabfund.com/blog/ideas-that-changed-my-life/

• On Demand Learning is Ruining the Tech Industry

  https://www.jernesto.com/articles/learning.html

• How Developers Stop Learning - Rise of the Expert Beginner

  https://daedtech.com/how-developers-stop-learning-rise-of-the-expert-beginner/

• Software development topics I've changed my mind on after 6 years in the industry

  https://chriskiehl.com/article/thoughts-after-6-years

Index

Systems Design

• Systems Design Explains the World: Volume 1

  https://apenwarr.ca/log/20201227

Index

Computer Science

• Comprehensive Guide to Learn Computer Science Online

  https://qvault.io/2020/11/18/comprehensive-guide-to-learn-computer-science-online

• Open Source Computer Science Courses

  • https://github.com/ossu/computer-science
  • https://github.com/ForrestKnight/open-source-cs

• Finite State Machines

  https://www.youtube.com/watch?v=4rNYAvsSkwk

• On the criteria to be used in decomposing systems into modules - David Lorge Parnas

  This paper discusses modularization as a mechanism for improving the flexibility and comprehensibility of a system while allowing the shortening of its development time. The effectiveness of a "modulariza tion11 is dependent upon the criteria used in dividing the system into modules.

  https://prl.ccs.neu.edu/img/p-tr-1971.pdf

Index

General Programming

• Goodbye, Clean Code

  https://overreacted.io/goodbye-clean-code/

  'Am I saying that you should write “dirty” code? No. I suggest to think deeply about what you mean when you say “clean” or “dirty”. Do you get a feeling of revolt? Righteousness? Beauty? Elegance? How sure are you that you can name the concrete engineering outcomes corresponding to those qualities? How exactly do they affect the way the code is written and modified?'

• Flattening Arrow Code

  https://blog.codinghorror.com/flattening-arrow-code/

  An explanation of why arrow code is bad and some good strategies for dealing with it.

• A Philosophy of Software Design

  Notes

  Chapter 1

  • The goal of software design is to reduce and manage complexity
  • Two primary ways to do this are:
    • Make code simpler and more obvious
    • Modular Design: Encapsulate complexity in one area to avoid spreading complexity

Index

Organization

• Theory-building and why employee churn is lethal to software companies

  https://www.baldurbjarnason.com/2022/theory-building/

• Product-Centric is Just as Bad as Sales Driven

  https://itamargilad.com/product-led/

  A common complaint I hear from product folk is that management is too “sales-driven”. It is a common ailment indeed, but I can tell you that the opposite condition, the strictly “product-focused” company, is pretty bad too. Both companies suffer from over-focus and a narrow worldview.

• Lessons learned as a software developer turned project manager

  https://karimjedda.com/lessons-learned-developer-to-project-manager/

• Waterfall doesn't mean what you think it means

  https://changelog.com/posts/waterfall-doesnt-mean-what-you-think-it-means

Performance

• Optimizing Javascript

  https://romgrk.com/posts/optimizing-javascript

  A good overview of a number of optimization strategies in JavaScript.

• Idle Until Urgent

  https://philipwalton.com/articles/idle-until-urgent/

  Provides a good look at common JavaScripe bottlenecks and how to improve them by using an "Idle Until Urgent" strategy whereby tasks are scheduled using requestIdleCallback unless they are needed earlier in which case they are evaluated immediately upon being required.

• Big O Notation

  https://www.interviewcake.com/article/python/big-o-notation-time-and-space-complexity

  A simple and quick explanation of Big O Notation with numerous examples.

• Scheduling in React

  https://philippspiess.com/scheduling-in-react/

  Similar to the Idle Until Urgent article above, this article digs into some advanced React scheduling features coming down the pipe. A good introduction to the future of some React APIs and a good article to keep tabs on as these scheduler features are developed.

• The Unseen Performance Cost of CSS-in-JS

  https://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/

  In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them.

• Ubiquity: The Fallacy of Premature Optimization

  https://ubiquity.acm.org/article.cfm?id=1513451

  Randall Hyde argues that optimization is important even when memory and processor double regularly. Trying to do the optimization too early can be a futile time-waster.

• Reflection on Performance

  https://blog.nelhage.com/post/reflections-on-performance/

• What forces layout / reflow

  This is an extremely helpful (and maintained) list of properties that cause layouts and reflows, along with a number of good source to help avoid layout thrashing.

  https://gist.github.com/paulirish/5d52fb081b3570c81e3a

• Understanding Why a Build Got 15x Slower with Webpack 5

  https://engineering.tines.com/blog/understanding-why-our-build-got-15x-slower-with-webpack

• Speeding Up the Javascript Ecosystem

  https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-2/

• When You Should Prefer Map Over Object in JavaScript

  Excellent deep-dive into the differences between Map and Object and some good tidbits on how to run benchmarks in general.

  https://www.zhenghao.io/posts/object-vs-map

Index

JS Framework Wars

• If Not React, Then What

  https://infrequently.org/2024/11/if-not-react-then-what/

  An argument against using React and a list of helpful resources to avoid it.

• What to Expect From Your Framework

  https://johan.hal.se/wrote/2023/02/17/what-to-expect-from-your-framework/

  But come on: we’re living in the 2020s and if you’re not at like 95% “framework does it for you” for things that aren’t business logic, then you’ve lashed yourself to a very bad mast ‒ you’re stuck building rote infrastructure instead of working on your app, likely creating a bunch of nasty attack surfaces along the way. And what are you getting in return? The warm and fuzzy feeling of deciding precisely how your session cookie is stored and encrypted?

• Things you forgot (or never knew) because of React

  https://joshcollinsworth.com/blog/antiquated-react

  I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.

• Web Components are not Framework Components — and That’s Okay

  The core it is that Web Components and Frameworks are not necessarily in direct competition with each other. We mistakenly believe that because we have lumped two distinct categories of things under the term "component". The first is Generalizable Elements and the second is Reactive Templating. The first category would be ideally handled by Web Components because there is no need to be remaking all of these general components (Tabs, Popovers etc) in each framework. But frameworks have a role to play because for complex applications they still provided a lot of funcionality that would be hard to do with pure HTML/CSS/WebComponents.

  https://lea.verou.me/blog/2024/wcs-vs-frameworks/

JavaScript

• Patterns.dev

  https://www.patterns.dev/

  Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

• In The Loop: JsConf Talk

  https://www.youtube.com/watch?v=cCOL7MC4Pl0&feature=youtu.be

  This talk looks at the browser's event loop, the thing that orchestrates the main thread of the browser, which includes JavaScript, events, and rendering. We'll look at the difference between tasks, microtasks, requestAnimationFrame, requestIdleCallback, and where events land.

• Anatomy of a Video Game

  https://developer.mozilla.org/en-US/docs/Games/Anatomy

  While this article is focused on game programming specifically, it's a good exlanantion of how to efficiently schedule rendering and user input using requestAnimationFrame to achieve high frame rates. For this reason it's a good read for those using the requestAnimationFrame API for other applications.

• Understand JavaScript’s “this” With Clarity, and Master It

  https://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

  This is simply the best article I've found about how this works in JavaScript.

• A Bloatless Web

  https://itnext.io/a-bloatless-web-d4f811c7991b

  An excellent discussion of how to cut down on JavaScript bloat on modern web apps. Includes some specific steps that can be taken to avoid unnecessary code caused by transpilers.

• Metaprogramming in ES6: Symbols and why they're awesome

  https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/

• Vanilla JS Toolkit

  https://vanillajstoolkit.com/reference/

  A great resource for brushing up on fundamentals and no-nonsense JS stuff. JS-Free Components is short but good resource for how to do some common things without JS.

• Vanilla List

  https://vanillalist.top/

• From JavaScript to WebAssembly in three steps

  https://engineering.q42.nl/webassembly/

• The Modern Guide to Packaging your JavaScript Library

  https://github.com/frehner/modern-guide-to-packaging-js-library

• Loading Polyfills Only When Needed

  https://philipwalton.com/articles/loading-polyfills-only-when-needed/

• Micro-libraries Need to Die Already

  https://bvisness.me/microlibraries/

Index

TypeScript

• Tackling TypeScript: Upgrading from JavaScript

  https://exploringjs.com/tackling-ts/index.html

• React TypeScript Cheat Sheet

  https://react-typescript-cheatsheet.netlify.app/docs/basic/setup

• A Different Way to Think About Typescript*

  Thinking of Typescript as a functional language to operate over sets.

  https://www.rob.directory/blog/a-different-way-to-think-about-typescript

Index

HTML/CSS

• Everything you need to know about

  https://htmlhead.dev/

• Breaking Up with SVG-in-JS in 2023

  https://kurtextrem.de/posts/svg-in-js

• Every Layout

  https://every-layout.dev/

  A number of example layouts and how to create them using minimal CSS and HTML. Also includes several lessons on good fundamentals that are very informative.

• Details on <details>

  A short presentation on how powerful the details element is and how it can be used to replace JS-heavy UI components.

  https://docs.google.com/presentation/d/1hvnPpsJo44BTPfJx28CV95vqk_dt6na1awUbk0kmZYM/edit#slide=id.g3e31444916_0_48

• Tree Views in CSS

  Pure HTML/CSS collapsible tree views.

  https://iamkate.com/code/tree-views/

• How Did REST Come to Mean the Opposite of REST?

  https://htmx.org/essays/how-did-rest-come-to-mean-the-opposite-of-rest/

Index

React

• React is Slow, React is Fast: Optimizing React Apps in Practice

  https://marmelab.com/blog/2017/02/06/react-is-slow-react-is-fast.html

  An excellent overview of common performance pitfalls in React and how to solve them.

• React as a UI Runtime

  https://overreacted.io/react-as-a-ui-runtime/

  This one is long but it's an excellent deep dive into the concepts and thinking behind React. By the man himself, Dan Abramov.

• Building Great User Experiences with Concurrent Mode and Suspense

  https://reactjs.org/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html

  This includes an excellent discussion on data fetching in a React app.

• Why I don't miss React: a story about using the platform

  https://www.jackfranklin.co.uk/blog/working-with-react-and-the-web-platform/

  This is not an argument against React specifically but rather an argument that the Web platform has introduced many features over the last 5 years or so that render web frameworks unnecessary for many use-cases.

• ---

  https://www.mayank.co/blog/react-server-components/

  A well-researched, clear, and dispassionate review of React Server Components

Index

Redux

• Wordpress Calypso: Our Approach to Data

  https://github.com/Automattic/wp-calypso/blob/master/docs/our-approach-to-data.md

  The team behind Wordpress's new admin panel looks at their migration from emitters to Flux to Redux, and describes how they organize their state tree, use selectors to extract state, run queries with components, and persist their store state through refreshes.

Index

Video

• A Digital Media Primer for Geeks Episode 1

  https://www.xiph.org/video/vid1.shtml

  This first video from Xiph.Org presents the technical foundations of modern digital media via a half-hour firehose of information. One community member called it "a Uni lecture I never got but really wanted."

  The program offers a brief history of digital media, a quick summary of the sampling theorem, and myriad details of low level audio and video characterization and formatting. It's intended for budding geeks looking to get into video coding, as well as the technically curious who want to know more about the media they wrangle for work or play.

• A Digital Media Primer for Geeks Episode 2

  https://www.xiph.org/video/vid2.shtml

  Continuing the "firehose" tradition of maximum information density, Xiph.Org's second video on digital media explores multiple facets of digital audio signals and how they really behave in the real world.

  Demonstrations of sampling, quantization, bit-depth, and dither explore digital audio behavior on real audio equipment using both modern digital analysis and vintage analog bench equipment... just in case we can't trust those newfangled digital gizmos. You can also download the source code for each demo and try it all for yourself!

• Digital Video Introduction

  https://github.com/leandromoreira/digital_video_introduction

  A gentle introduction to video technology, although it's aimed at software developers / engineers, we want to make it easy for anyone to learn.

Index

UX

• Why so much “science” used in design is bullshit: Android, Losada and Frankfurt.

  http://mjparnell.com/bullshit_science_ux_design/

• 4 Rules for Intuitive UX

  https://learnui.design/blog/4-rules-intuitive-ux.html

• UI Playbook

  A helpful resource that explains the behaviour of basic UI elements, and how to make them accessible etc.

  https://uiplaybook.dev/

• Microcopy

  https://steamclock.com/blog/2020/10/microcopy/

• Please Stop Using Grey Text

  https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acfca8

• Fighting back against proper noun feature names

  https://kubie.co/blog/fighting-feature-names/

• The Grammar of Interactivity

  https://uxbooth.com/articles/the-grammar-of-interactivity/

  Introduces the the "Would you like to? / I would like to" (WYLTIWLT) test to determine button copy. Button copy should answer these two questions grammatically.

ToggleSwitches

Conventional Wisdom

• Control boolean state
• Switches are for System States (not local)
• Switches should have immediate effect
• Label copy should be obvious (user’s shouldn’t have to flip the switch to discover what it does)
• Labels should describe what the control will do when the switch is on
• https://www.justinmind.com/blog/toggle-design-patterns-examples/
• https://developer.yoast.com/blog/when-to-use-toggle-switches/
• https://www.nngroup.com/articles/toggle-switch-guidelines/

Counter-arguments

• https://axesslab.com/toggles-suck/

Index

Networking

• HTTP headers for the responsible developer

  https://www.twilio.com/blog/a-http-headers-for-the-responsible-developer

• High Performance Browser Networking

  https://hpbn.co/

  Notes

  Primer on Latency and Bandwidth

  • Latency: The time from the surce sending a packet to the destination receiving it

  • Bandwidth: Maximum throughput of a logical or physical communication path

Index

API

• Why I'm Over GraphQL

  https://bessey.dev/blog/2024/05/24/why-im-over-graphql/

Index

Tinkering

• https://www.val.town/
• https://codesandbox.io/
• https://glitch.com/

Index