Newsletter #41

Intro

Hi there! I’m back with a bunch of links for you today, I hope you like them!

Shameless Plugs

• Build an extendable in-browser devtools

  I finally published a new blog post! This time, based on a project I built at work and it’s been very helpful for its users! Check it out and leave a reaction or a comment! 😊

• @remotion/lottie

  I finally contributed to open-source again! This time, me and Jonny, the creator of Remotion, turned a proof-of-concept repo I had for months into an official library. 🌟

Links

• little-planet - Interactive panorama viewer

  I loved this project, it deserves more stars on GitHub! It’s a Web Component that renders an interactive view of a panoramic photo. I built a small demo on CodeSandbox to play with it.

• skip-the-scroll - Quickly navigate GitHub issues

  A Chrome extension that sorts GitHub issue comments and allows us to iterate through them based on their social reactions.

• svg-path-morph - SVG paths interpolation

  A simple library for morphing between variations of SVG paths. Use it to smoothly morph between X variations of the same SVG path (i.e. same commands, different values).

• devices.css - Pure CSS phones and tables

  I don’t know how I never heard about this before but it’s amazing!

• JSONata - Query and transformation language

  Create complex and powerful expressions and evaluate them against a JSON.

• PocketBase - Open Source realtime backend in 1 file

  Built with Go, it has an embedded SQLite database with realtime subscriptions, files and users management, admin dashboard and an API. There are JavaScript and Dart clients.

• d3-interpolate - Interpolate whatever

  This module provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects.

• docusaurus-search-local - Offline/local search for Docusaurus v2

  If you have a site built with Docusaurus and don’t want or can’t use a hosted search solution, this plugin is a great alternative. It’ll create the search index during the build.

• HUDS+GUIS

  A place where you can find the most creative and interesting examples of UI design. Sources can come from anywhere ie. films, games, concept design and real-world developments.

• How to de-Google your site to make it faster and visitor-friendly

  A lot of tips and alternative services. A post from a co-founder of Plausible Analytics, which just reached 1M ARR!

• The Surprising Truth About Pixels and Accessibility

  Another great post by Josh. It’s full of examples of when to choose px or em/rem.

• How to replace useState with useRef and be a winner

  The title is a bit catchy but the content is very good. I recognized patterns I use every day and learned a couple of tricks too, like using requestAnimationFrame when setting state.

• sitespeed.io

  Sitespeed.io is a set of Open Source tools that makes it easy to monitor and measure the performance of your web site. It has a Docker image too.

🇧🇷 Em Português

• Tecno Brega Stack

  O framework Remix lançou Stacks e a comunidade criou uma pro tecno brega, um gênero musical popular surgida em Belém no estado do Pará nos anos 2000.

• node-dfe

  Biblioteca para geração/integração de NF-e/NFC-e em aplicações Node.js. Se você já utiliza a biblioteca e/ou tem interesse em open-source, eles procuram mantenedores. ****