What I read in 2022

Week 52, 2022

• CSS Image fragments - image()

  .hero {
    background-image: image("images/my-image.jpg#xywh=150,50,500,300");
  }
  

• Guide to image overlays in CSS
• The True Power Of CSS Columns
• Unchain My Inaccessibly-Labelled Heart #a11y (Private)
• Web Performance APIs Appreciation Post
• git commit --fixup=[(amend|reword):]
• git commit with offered message editing

  git commit -em "some string"
  

• Tailwind - Dynamic class names

  class = `bg-${ zero ? pageColor : baseColor}` // not work
  class = zero ? `bg-${pageColor}` : `bg-${baseColor}` // not work
  

• Control what you share with Google
• qwantify - Play games with your friends right from the browser.
• Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.
• CDN Up and Running - Building a CDN from Scratch to Learn
• 2022 In Review: What’s New In Web Performance?
• Designing for Screen Reader Compatibility
• Table Like It's 2023
• Password requirements: myths and madness
  • https://news.ycombinator.com/item?id=34098369

Week 51, 2022

• Using inline JavaScript modules to prevent CSS blockage

  <script async type="module" />
  

• CSS Style Queries

• A Visual Guide to useEffect

  Side effects shouldn’t happen during component render. Therefore they do not belong to the body of a functional component. React has a special place for them.

• 4 ways CSS :has() can make your HTML forms even better

• 15 Useful JavaScript Tips

  • Event listeners run only once

  element.addEventListener("click", () => console.log("I run only once"), {
    once: true,
  })
  

  • element’s dataset

  <div id="user" data-name="Maxwell" data-age="32" data-something="Some Data">
    Hello Maxwell
  </div>
  <script>
    const user = document.getElementById("user")
  
    console.log(user.dataset)
    // { name: "Maxwell", age: "32", something: "Some Data" }
  
    console.log(user.dataset.name) // "Maxwell"
    console.log(user.dataset.age) // "32"
    console.log(user.dataset.something) // "Some Data"
  </script>
  

• Run Just The Failed Tests In Cypress

• Project Guidelines

• Most Usefull Queries for Sql Server

• Let’s Make A Better “Light / Dark” Toggle

• Does WWW still belong in URLs?

  • WWW-less domain concern 1: Leaking cookies to subdomains
  • WWW-less domain concern 2: DNS headaches
  • WWW-less benefits
  • WWW benefits

• Building the main navigation for a website

• The W3C Markup Validation Service

• How to transfigure wireframes into HTML

• How do I commit case-sensitive only filename changes in Git?

  git mv -f yOuRfIlEnAmE yourfilename
  

Week 50, 2022

• ReadEra - ReadEra is an Android application for reading books and viewing documents, free and without ads.
• Zapatos - Zero-abstraction Postgres for TypeScript: a non-ORM database library
• Responsive Images 101, Part 4: Srcset Width Descriptors
• Mars Now | Explore – NASA Mars Exploration
• A schedule's primary purpose is not to tell you what you're supposed to be doing on any given day, but to tell you when you should start cutting corners.
• Highlights from Git 2.39
• How Cypress version 12 retries the chains of multiple query commands.
• How to Write Useful Commit Messages
  • This commit will What
  • Why
• Ask HN: Those with money-making side projects,how did you come up with the idea?
• Just Use Postgres for Everything - How to reduce complexity and move faster

  Postgres can replace - up to millions of users - many backend technologies, Kafka, RabbitMQ, Mongo and Redis among them.

  Each component has its own debugging requirements and tooling. Each component adds a bunch of complexity. Sometimes it's worth it, sometimes it's not.

• Radical Simplicity
• When to use gRPC vs GraphQL

  Use GraphQL for client-server communication and gRPC for server-to-server. See the Verdict section for exceptions to this rule.

• Using npm query for better dependency management
• Make sense of flame charts in Performance Tab by example

  During sampling profiling, a browser forces an engine to stop every 1 ms, and record the call stack at that moment.

• So <HGROUP> Is Back In HTML 5, And Dumb As Ever!
• HTML Entities, Diacritical Marks, And Emojis
• numverify - Global Phone Number Validation & Lookup JSON API: Real-time REST API supporting 232 countries
• Cypress: Skip Before Each Hook
• Functional Programming: Part 5 - Functors

Week 49, 2022

• gpu-io - A GPU-accelerated computing library for physics simulations and other mathematical calculations
• Tips for typing import statements in JavaScript
• 5 Books for QA Engineers
• Domain Name Search with AI - https://news.ycombinator.com/item?id=33882497
• Awesome Dev Tool Tips
  • Easily identify which bundles are the largest, and how much of their code is actually used, and what the load impact of each file is, using the Coverage tool.
• Super Useful CSS Resources
• A Year-End Letter from our Executive Director

  Let’s Encrypt surpassed 300,000,000 websites served.

• TWGL: A Tiny WebGL helper Library
• Document Object Model (DOM) Geometry: A Beginner’s Introduction And Guide #terminology (Private)
• An Interactive Guide to Flexbox
• Mobile browsers and cloud gaming: Proposal to make a market reference
• The BBC's 15 Web Principles - 15 years later
• Company, team, self.

  • This company/team/self framework proved itself a helpful decision-making tool, and almost always led to the “correct” outcome.
  • Burn out by following this advice too loyally.
  • People are complex, and they get energy in complex ways. Folks will accomplish more if you let them do some energizing work, even if that work itself isn’t very important.

• Why I am learning category theory
• Engineering management - A collection of inspiring resources related to engineering management and tech leadership #bookshelf
• Stretch between desk works

Week 48, 2022

• Have You Mastered These 9 Vue Techniques?
• GTD
• Practical React Query by TkDodo #bookshelf
• Hibernate should be to programmers what cake mixes are to bakers - This is a talk about the problems of creating convoluted abstractions and how not understanding what happens underneath makes things more complex instead of simplifying them.
• The BEST Stretch You're Not Doing!
  • duration: [30, 60]
  • sets: [3, 5]
  • training days: [3, 5]
• Can't Do a Push-Up? Here's Where to Start!
  • repeat: [5, 12]
  • sets for week: [10, 20]
  • training days: [3, 5]
• Front Matter a CMS running straight in Visual Studio Code
• Is React going anywhere?
  • Aghiles Ait lounis
• As a Front-End Engineer: 8 Useful Npm Coding Techniques That You Should Use
• Speeding up the JavaScript ecosystem
• A collection of 88x31 pixel web buttons from the 1990s and 2000s
• WasmEdge is a lightweight, high-performance, and extensible WebAssembly runtime for cloud native, edge, and decentralized applications. It powers serverless apps, embedded functions, microservices, smart contracts, and IoT devices.
• Working with Tailwind CSS every day for 2 years
  • https://news.ycombinator.com/item?id=33787719
• Refined GitHub - Browser extension that simplifies the GitHub interface and adds useful features
  • Web store link
• ApyHub - The Developer API Utility Belt
• Japanese Artist Creates Amazing Miniature Dioramas Every Day For 10 Years
• Intentionally Making Close Friends
• Many Small Queries Are Efficient In SQLite
• Consul is a distributed, highly available, and data center aware solution to connect and configure applications across dynamic, distributed infrastructure.
• Litestream is a standalone disaster recovery tool for SQLite. It runs as a background process and safely replicates changes incrementally to another file or S3.
• 1Tools - 100% Free Online tools for Everyday Needs
• Copy as Markdown for Chrome & Firefox
• An AI generated, never-ending discussion between Werner Herzog and Slavoj ŽIžek
  • https://news.ycombinator.com/item?id=33437296
• Elixir vs Erlang: A comparison
• make for no-code automation.
• Nitric is a framework for rapid development of cloud-native and serverless applications.
• GPS vs GLONASS vs Galileo
• Index Merges vs Composite Indexes in Postgres and MySQL

  Composite indexes are about 10x faster than index merges. In Postgres, the gap is larger than in MySQL because Postgres doesn't support index-only scans for queries that involve index merges.

• https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-programming-scripting-and-markup-languages
• WebAssembly: TinyGo vs Rust vs AssemblyScript
• Bocker - Docker implemented in around 100 lines of bash.
• better-sqlite3 - The fastest and simplest library for SQLite3 in Node.js.
• Dittytoy: JavaScript-Based Generative Music Sandbox
  • https://dittytoy.net/ditty/6f30b0885d
  • https://dittytoy.net/ditty/2a0acbb94b
• Richardson Maturity Model
• API Bites — Payload Conventions
• Making Static Noise From a Weird CSS Gradient Bug
• Style a parent element based on its number of children using CSS :has()
• Scripted <INPUT> Matching With Native Error Reporting
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
• Exploring Declarative Shadow DOM
• The Hidden Power of Custom States For Web Components
• API Lifecycle Management
• Scoop - A command-line installer for Windows.
• act - Run your GitHub Actions locally 🚀

Week 47, 2022

• 30 seconds of code #bookshelf
• Everything on Amazon is becoming an ad
• 📚 List of Free Learning Resources In Many Languages - Freely available programming books #bookshelf
• PDF vulnerability
  • Dangerzone - Take potentially dangerous PDFs, office documents, or images and convert them to a safe PDF.
• “Invalid Username or Password”: a useless security measure
• Two types of equalities in JavaScript #terminology (Private)
• ✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop.
• Writing by hand is still the best way to retain information
  • headbee: I can attest to this and took all of my notes on paper in college. However, once I started a real job I realized that this strategy doesn't scale to all situations. In college, I needed to be able to recall all of the information I had ingested: it was low-write, high-read. In the workplace, there's much more information, but I'm unlikely to need most of it: it's high-write, low-read. I need to be able to reference the information, but not necessarily recall it. Taking paper notes became too much of a burden and I moved to a wiki of markdown notes.
• A Poor Man’s API
  • PostgREST is a standalone web server that turns your PostgreSQL database directly into a RESTful API. The structural constraints and permissions in the database determine the API endpoints and operations.
• Solving the double (quintuple) declaration Problem in GraphQL Applications: How to not repeat yourself!
• Why we ditched GraphQL for tRPC
  • tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation.
• Asterisk Magazine - site UI
• CSS vs. CSS-in-JS: How and why to use each
• Microsoft API Guidelines #bookshelf
  • Microsoft REST API Guidelines
  • Graph REST API Guidelines
• Understanding Map and Set in JavaScript
• https://text-to-diagram.com/
• Why numbering should start at zero
• Note: The main difference is that the watchEffect starts instantly while the watch() runs lazily
• 👑 GOV.UK Design System #bookshelf
  • https://design-system.service.gov.uk/accessibility/ explains how the team works to ensure the Design System and Frontend are accessible.
  • https://github.com/alphagov/govuk-frontend#readme
• Accessibility Solutions #bookshelf
• A Guide To Keyboard Accessibility: JavaScript (Part 2)
• How a Rogue Developer Ruined Millions of Software (happened this weekend)
• What’s Up With Serverless?
• All About JavaScript Events
  • Browser Events These events occur in the browser window rather than the HTML page. Event handlers are bound to the window object, not to the element. E.g., load, error, scroll, resize, etc.
  • HTML Events This is the inverse of the browser event. They are the event that occurs in the element, and the event handlers are bound to the element. E.g., click, mouseover, mouseenter, etc.
• 5 takeaways from screen reader usability interviews
  • Usually when we think of alt text, we think "What is this a picture of?" - but in the case of links where the only content is an image, the alt text needs to describe the function of that link. Not the image itself.
• Automerge - A JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.
• Yjs is a CRDT implementation that exposes its internal data structure as shared types. Shared types are common data types like Map or Array with superpowers: changes are automatically distributed to other peers and merged without merge conflicts.
• Named Colors Wheel
  • https://yeun.github.io/open-color/
  • https://open-props.style/
• If you exercise without correction due to the fascia relaxation and stretching, it becomes asymmetric.
• The ratio of relaxation to contraction is 2:1
• Inclusively Hidden
• A Guide To Keyboard Accessibility: HTML And CSS (Part 1)
• The evolution of scalable CSS
• What is a realm in JavaScript?
  • Introducing Snow
• Writing API Design Standards #bookshelf
• Tree views in css - details open
  • The wasted potential of CSS attribute selectors
• Ask HN: What is the most impactful thing you've built?
• Google Style Guides #bookshelf
• Is 40 hours a week too much? Here’s what history and science say
  • Rules of Productivity
  • Overtime Kills
• Even if you stay on the plank for a long time, your core muscles won't get better
  • Spit out your breath - While stopping breathing, you can't use your core muscles properly.

Week 46, 2022

• Git Rebase... with Merges?
• How I became a better CTO using these 8 resources #bookshelf
• 5 Computer Science Papers That Changed How I Write Code #bookshelf
• My favorite tricks for navigating the Linux terminal faster
• Vite 3.0 is out!

  SvelteKit, Astro, Hydrogen, and SolidStart are all built with Vite. Laravel has now decided to use Vite by default. Vite Ruby shows how Vite can improve Rails DX. Vitest is making strides as a Vite-native alternative to Jest. Vite is behind Cypress and Playwright's new Component Testing features, Storybook has Vite as an official builder. And the list goes on.

• How I became a better CTO using these 8 resources
• Solving problems, learning and building new things all day can be very mentally exhausting. Cardio, sports, lifting; helps re-balance the physical with the mental.
• https://www.qualtrics.com/core-xm/survey-software/ - used by Google play store feedback
• Map of the Internet
• Web Automation: Don't Use Selenium, Use Playwright

  The killer feature of Playwright is: You can automatically generate tests by opening a web browser and manually running through the steps you want.

• 5 websites to learn Frontend-web development faster
  • Keyframes.app - It does not only help you to learn through experimenting with CSS animations attributes with real-time visualizer, but also helps you generate cool animations and shadows that best fit your design.
• 🤖 TanStack query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
• Using Web Components With Next (or Any SSR Framework)
• awesome-dendron: A Dendron awesome list of extensions, vaults, and more
• Designing The Perfect Mobile Navigation UX
• Jamstack Community Survey 2022 - outstanding vite's satisfaction score
• Joplin - an open source note taking and to-do application with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
  • That was the reason why I gave up Joplin very quickly. The last Joplin thread, here on Hacker News, has also shown once again that some still do not understand why "But Joplin can export Markdown from the database!" is not the same as simple, flat Markdown files.
• A Love Letter to React - Phoenix and LiveView creator was inspired by React
• How We Got to LiveView
• Dialogs, modality and popovers seem similar. How are they different?

Week 45, 2022

• Reasons to avoid Javascript CDNs
• Say goodbye to resource-caching across sites and domains
• Get your work recognized: write a brag document
• Type Coercion refers to the process of automatic or implicit conversion of values from one data type to another. #terminology (Private)
• https://shrtco.de/ - The privacy-friendly URL Shortener. on free.
• HTMX + Alpine.JS
• Django, HTMX and Alpine.js: Modern websites, JavaScript optional

  Alpine focuses on client-side state and operations, HTMX focuses on interaction with your server.

• Dynamic Web Apps without JavaScript - HTMX Showcase at DjangoCon and Devoxx
• re:Work is a collection of practices, research, and ideas from Google and others to help you put people first.
• Apple Is Tracking You Even When Its Own Privacy Settings Say It’s Not, New Research Says
  • https://twitter.com/mysk_co/status/1588308341780262912
• The Anatomy of SaaS PRICING STRATEGY
• WHY WOULD ANYONE NEED JAVASCRIPT GENERATOR FUNCTIONS?
• Module Resolution #terminology (Private)
• Barrel #terminology (Private)
• Comparing TCP and QUIC #network (Private)
• PDF-To-Markdown Converter - Javascript tool to parse PDF files and convert them into Markdown format. Online version at http://pdf2md.morethan.io!
• Your Next.js Bundle Will Thank You #divops #performance #bundler (Private)
• Implementing Claymorphism with CSS
• Sass — the map-merge pattern
• CONDITIONALLY ADAPTIVE CSS

  <link rel="stylesheet" href="mobile.css" media="(max-width: 767px)" />
  <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" />
  <link
    rel="stylesheet"
    href="animation.css"
    media="(prefers-reduced-motion: no-preference)"
  />
  

  • https://github.com/SassNinja/media-query-plugin
• A beginner’s guide to Chrome tracing #performance
• CSS Snake & Ladders: a multiplayer game developed in HTML+CSS with no JS
• Clean Architecture on Frontend #architecture
• Domain-centric Architectures (Clean and Hexagonal) for Dummies #architecture
• Feature-Sliced Design #architecture #bookshelf
• Building a self-updating profile README for GitHub
  • Using a self-rewriting README powered by GitHub Actions to track TILs
• What to blog about
  • https://til.simonwillison.net/
  • 📝 Today I Learned
  • How I Built a Learning Machine
• Body Doubling - It’s merely being in the same room with another person who is having trouble getting things done on their own.
  • I work better in office. Maybe it works based on this.
  • I think this is the reason why in-person work environments will be more productive over the longer term for any larger organization. Not saying I’m against remote work, as I actually prefer it myself.
  • https://news.ycombinator.com/item?id=33496800
  • https://en.wikipedia.org/wiki/Social_facilitation
• Does anyone else finds AWS and other Amazon services overly complicated?
  • JAMstack walk-through
  • AWS is basically a "construct your own custom infrastructure" service and does that well.
  • We have both tried and are unable to figure out how to tie payment info to our AWS organization.
• MDN converted to Markdown
  • https://news.ycombinator.com/item?id=33478392
• True Seniority in Software Careers
  • The Senior Shift - It’s now about your impact, not just your abilities.
• Nov 3 2022 Security Releases

Week 44, 2022

• Cracker test to find out the characteristics of diabetic obese people in 30 seconds
• Refactor Like a Superhero
• Icebreakers You Can Steal For a Better Meeting (I Promise)
• <relative-time> element - Web component extensions to the standard element. #localization (Private) #web-components (Private) #timezone (Private) #custom-elements (Private)
• How I Use Slack
• Static typing helps, but only a little.

  A statically-typed language like Java requires programmers to specify the data type of each variable; a dynamically-typed one like Python doesn't require them, though you can add them if you want, while TypeScript adds types as a layer on top of JavaScript. endrikat2014endrikat2014 found that declaring types does add complexity to programs, but it pays off fairly quickly by acting as documentation and by making auto-completion more accurate.

• NEW: Build responsive Figma-to-React components with almost no code
• Docusaurus 2.2
  • I prefer dendron.
    1. Hierarchy with flat file name (dev.tools.md) not sub directory
    2. Search page
• Why Functional Programming Should Be the Future of Software Development
• 🎉 Canvas Confetti - on-demand confetti gun #worker (Private) #canvas (Private)
• Slash libraries
  • @toss/hangul
• Google apps script of sheets for exporting i18n json
  • https://thenewstack.io/how-to-convert-google-spreadsheet-to-json-formatted-text/
  • https://stackoverflow.com/a/66308417/5163033
  • https://github.com/liddiard/google-sheet-s3
• Web Almanac - HTTP Archive’s annual state of the web report 2022 - HTTP Archive’s annual state of the web report
• Web Performance Metrics Cheatsheet
• Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.
• Scribe - Turn any process into a step-by-step guide, instantly.
• Is Turbopack really 10x Faster than Vite?
• Happy DOM is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG DOM and HTML.
  • The goal of Happy DOM is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.
  • Happy DOM focuses heavily on performance and can be used as an alternative to JSDOM.
  • Read more about how to use Happy DOM
• I bet you didn't know about these 15 HTML features.
• Quine Relay is a Ruby program that generates Rust program that generates Scala program that generates ...(through 128 languages in total)... REXX program that generates the original Ruby code again.
• Motion Controls In The Browser
• mkcert is a simple tool for making locally-trusted development certificates. It requires no configuration.
• The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the var() function and custom properties.
• Events that trigger workflows
  • Running your workflow only when a push of specific tags occurs
  • Running your workflow only when a push affects specific files
• 💯 Tech Interview Handbook - Curated coding interview preparation materials for busy software engineers
• 🛁 clean-code-javascript - Clean Code concepts adapted for JavaScript
• Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.
• Build your own x - Master programming by recreating your favorite technologies from scratch.
• Coding Interview University - A complete computer science study plan to become a software engineer.
• The System Design Primer - Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
• Superstar
• The Art of Command Line
• free-for.dev - A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev
• The Book of Secret Knowledge - A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.
• ✨😂 Spark Joy! - 2000+ ways to add design flair, user delight, and whimsy to your product.
• Nano Stores - A tiny (258 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
  • https://docs.astro.build/en/core-concepts/sharing-state/#why-nano-stores
• Comparing Astro and Next for React apps

  Next.js is best used for highly dynamic and image-heavy websites like dashboards because of its built-in image optimization. In contrast, Astro is best used for static websites like a portfolio or a personal blog.

• Dinero.js: Create, calculate, and format money in JavaScript and TypeScript.
• PhotoSwipe — JavaScript image gallery and lightbox
• Create Page Transitions in Next.js with Framer Motion

---

Footnotes

1. endrikat2014: Stefan Endrikat, Stefan Hanenberg, Romain Robbes, and Andreas Stefik. How do api documentation and static typing affect api usability? In Proc. ICSE'14. ACM Press, 2014. URL: https://doi.org/10.1145/2568225.2568299, doi:10.1145/2568225.2568299.˄

---

Backlinks

• Luke
• 👓 What I read in