About this

Bits are small notes and links that I share about web development, software engineering, and other topics that I find interesting.

Read by topic

Brandon from Flightcontrol writes an in-depth exploration of strategies for handling data in software systems that serve multiple clients or 'tenants'.

It emphasizes the importance of incorporating 'teams' functionality from the outset to avoid future complexities. The guide discusses various models for organizing data, including single versus multiple databases, and provides insights on implementing robust access controls, handling user sessions effectively, and ensuring data isolation across different tenants.

It also compares different access models from companies like the GitHub, Google or Linear.

A classic internet story where a university's statistics department could not send emails beyond 500 miles.

Full story in the link below:

Bret Victor takes you to 1973 to deliver a presentation on an overhead projector about the future of programming. He shows the latest innovations from the 60's and 70's and how they will change the future of computing.

'The most dangerous thought that you can have as a creative person is to think that you know what you're doing, because once you think you know what you're doing you stop looking around for other ways of doing things and you stop being able to see other ways of doing things. You become blind. I think you have to say: "We don't know what programming is. We don't know what computing is. We don't even know what a computer is." And once you truly understand that, and once you truly believe that, then you're free, and you can think anything.'

A beautiful presentation about innovation.

Understanding Layout Algorithms is definitely how I got decent at CSS.

The article explains a mental model shift needed to grasp CSS more intuitively. It explains that layout algorithms—like Flexbox, Grid, and Flow—are the ones that define how CSS properties behave. It provides insights into how these algorithms handle properties differently and how a deeper understanding of these mechanisms can lead to better, more predictable coding outcomes.

Dan Abramov's talk, "The Wet Codebase," discusses the challenges and lessons learned from creating abstractions in coding.

He narrates a scenario where attempts to follow DRY (Don't Repeat Yourself) principles led to overly complex and less maintainable code due to forced abstractions and unintended coupling. Dan emphasizes the importance of considering the trade-offs of abstractions, like accidental coupling and the difficulty in removing entrenched abstractions.

Also has good advices over testing concrete code and resisting premature abstractions, suggesting that sometimes duplication is preferable to the wrong abstraction.

PD: For the past years, this has been my go-to talk to share with people that might be too strict with DRY!

Nixpacks are abstractions over Docker with sensible defaults meant to simplify the process of deploying an application.

Ideally you shouldn't know that much about Nixpacks to use them, if your language and runtime is supported it should just work.

FĂ©lix LĂłpez shares how they defined and created their on-call process and their core principles.

Frequently on-call implementations are a controversial topic due to the fact that you might be asking people to work on weekends, Tinybird seems to have created a sustainable process to make it as less painful as possible.

The On-call process is a touchy subject for a SaaS company. On the one hand, you must have it, because your prod server always seems to go down at 2 a.m. on a Saturday. On the other hand, it places a heavy burden on those who must be on call, especially at a small company likeTinybird, where I currently head the engineering team.

I have actively participated in creating the on-call process in three different companies. Two of them worked very well, while the other didn’t. Here, I’m sharing what I’ve learned about making on call successful.

Great talk from Sam Newman explaining with examples how to implement trunk-based development, continuous delivery and how feature branches help to implement these practices in a "post-GitHub" world.

Talk Abstract:

During the evolution of the ideas behind Continuous Delivery, many of us came to the conclusion that having branches for features was not a good idea, and resulted in some fairly problematic issues.

This was contentious at the time, with lots of discussion around whether or not feature toggles or feature branching was the right way forward. Roll on several years, and through Git and GitHub, branches are everywhere. Is this a problem?

This talk re-examines the role of feature branches and feature toggles, and looks at them in the context of new research and technology to try and distill down some sensible lessons in a post-GitHub, but hopefully not post-factual, world.

The article describes key practices that distinguish highly effective engineers.

These habits include writing clear, simple code that serves both humans and machines, adhering to consistent coding standards, and embracing testing to avoid surprises in software functionality. I

It emphasizes the importance of collaboration, iterative improvement, and a focus on end-user problems.

Hono is a super fast and lightweight web framework designed for building applications across multiple JavaScript runtimes, like Cloudflare, AWS Lambda, Bun, Node.js, and more.

It's noted for its small size (the tiny preset is under 14kB), extensive support for middleware, and first-class TypeScript support, all contributing to a delightful developer experience.

Hono's architecture relies exclusively on Web Standard APIs, ensuring the same codebase can run everywhere.

The CSS Layout Generator is a tool designed to help create CSS and HTML for layout components that manage the spacing and arrangement of child elements within a webpage.

This approach is based on the philosophy that UI components should not include margins that affect surrounding elements, ensuring better encapsulation and usability. This tool allows for straightforward creation of components that control direction and spacing, enhancing design flexibility and consistency.

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Lucide.dev offers a collection of customizable vector icons, designed with a focus on consistency, cleanliness, and scalability.

These lightweight icons are tree-shakable, ensuring that only the icons you use are imported into your projects. Lucide supports all major package managers and offers extensive customization options, such as adjusting color, size, and stroke width.

Lucide is a fork of Feather Icons backed by an active community due to Feather being abandoned and no longer actively maintained. Feather had 287 icons and since moving apart, Lucide has added over 1000 icons (right now they have a total of 1460 icons).

Accessibility Myths challenges common misconceptions about web accessibility through a series of debunked myths.

It emphasizes that accessibility benefits not only people with disabilities but everyone, improving overall user experience and increasing website usability.

Integrating accessibility from the beginning of a project is cost-effective and enhances a development team’s skills while reducing legal risks.

Cloudflare Calls is a managed service that acts as WebRTC selective forwarding unit (SFU).

Orange Meets is Google Meet-like demo app built on the top of Calls, showcasing the capabilities of the whole Cloudflare stack.

It is built with Remix and also uses TailwindCSS.

Dead Simple Websites is a curated selection of websites following a minimal design.

(yes, at some point I'll improve this website with some inspiration from here)

shadcn/ui offers a selection of ready-to-use, customizable design components that you can simply copy and paste into your projects without needing to install them as dependencies.

This approach allows for greater flexibility and control over the code, as you can customize each component to your specific needs. It's designed to be accessible and open-source, providing a practical resource for building your own component libraries.

In their website you can find also a theme builder and bigger blocks putting together the components into cohesive pages.

Clack provides two packages:

  • @clack/core: unstyled, feature-rich components designed to be a strong foundation for your custom CLIs.
  • @clack/prompts: out-of-the-box with beautiful prompts and a straightforward API.

For the past months I felt that this site needed a bit more of activity, this was a single static page made with Remix v1 and only with the "Bio" section.

So after building some Astro sites for The Crafters Lab clients, yesterday I decided to fix it and update it with something similar to a blog.

The site is based on the Keystatic Astro template, you can test it just running: npm create @keystatic@latest

Technologies Used

  • Astro: Static site builder.
  • Keystatic: The markdown-based CMS powering this bits.
  • TailwindCSS: A minimal utility-based CSS framework.
  • Cloudflare Pages: A developer-focused platform designed for building fast websites.

The Good Parts

  • It's fully static. This means a very fast performance, stability and thanks to the Cloudflare pricing, fully free hosting with unlimited bandwidth.
  • Everything is owned by the developer. The code, the data and the CMS are open source local components that don't rely on external services being up or down.
  • WYSIWYG editor. Keystatic gives you a local editor that makes editing the markdown files a standard CMS experience (think Wordpress, Ghost, etc)

The Bad Parts

  • It's fully static. This means that editing and publishing a post involves editing a markdown file (either in GitHub or through the local WYSIWYG editor) and redeploying the site (deployment takes ~40s).

Conclusion

So, wrapping things up: your site's makeover really steps up the game by integrating Astro and Keystatic. It's sleek, efficient, and keeps things straightforward with its static setup. Yes, updates need a bit of elbow grease since you're editing markdown files and redeploying, but what you get in return is a site that's totally yours, costs nothing to host on Cloudflare Pages, and runs super smoothly.

It's a great balance of ease, control, and modern web tech!

Cloudflare Pages is a developer-focused platform designed for building fast websites.

It seamlessly integrates with Git, allowing developers to easily deploy updates by just pushing changes. The platform is optimized for collaboration, offering unlimited seats and preview links for every commit included in the free tier.

For static sites, bandwidth and static requests are free.

And for dynamic sites, Cloudflare Workers (their serverless offering) are deeply integrated and they come with zero cold-starts, db connectors and a better pricing than AWS Lambda.

CF Pages is compatible with popular frameworks like Astro, Remix, Next or Nuxt.

Tailwind CSS is a utility-first CSS framework that helps you design and build modern, responsive websites directly within your HTML.

It offers a wide range of classes for various styling options, from layout control to typography and colors, enabling a more efficient and customizable design process. Its system encourages consistency while still allowing for pixel-perfect custom designs, making it a versatile choice for web development.

TailwindCSS automatically purges the generated CSS, plus using a limited set of utility classes allows the output css files to be small.

Keystatic is a versatile tool that integrates content management into your codebase, allowing you to handle Markdown, JSON, and YAML files directly within your projects.

It offers a robust CMS experience without needing a database, supporting both local and GitHub-based workflows. This makes it easy to manage and edit your content either through a user-friendly admin UI or directly within your code. Keystatic is particularly compatible with web development frameworks like Next.js, Astro, and Remix, providing a seamless bridge between your content and code.

PS: Together with Astro it powers this website!

Astro is a modern web development framework designed to make building fast and efficient websites easier.

It allows you to write your website using multiple frameworks (like React, Vue, or Svelte) without loading all their JavaScript by default and rendering the html at compile-time. This approach results in faster loading times and better performance.

Astro also focuses on delivering a seamless developer experience, with features like out-of-the-box TypeScript support, file-based routing, and optimized build outputs. Whether you're building a simple static site or a complex web application, Astro provides the tools to help you create a high-performing website with less hassle.

PS: And it powers this very website!