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. 🌟

Intro

It’s been a while since I published the last edition, I’m sorry about that. I haven’t bookmarked or read things that are interesting to share in a while too. It’s been a lot of work for me.

On top of that, it’s “summer” (because it’s been raining a lot) in Sweden and I’m occupying myself with personal things rather than side projects.

For those who are also in summer, enjoy it because it’s short 🥲

Promotion

I’ve been happily using Buttondown to publish these newsletters and recently built NewsletterThemes.com, which contains a few themes for it.

Check it out and let me know what you think about the project!

Links

Links

• md-to-pdf

  A tool for converting Markdown files to PDF using Node.js and headless Chrome.

  I’m using it to generate the instructions for each theme on Newsletter Themes.

• listmonk

  An open-source, self-hosted, newsletter and mailing list manager with a modern dashboard.

• micromatch

  Highly optimized wildcard and glob matching library.

• click-to-component

  Option+Click React components in your browser to instantly open the source in VS Code.

• Remotion 3.0

  This new release brings Remotion Lambda, a distributed video renderer based on AWS Lambda, parallel rendering and encoding and much more!

Links

• Newsletter Themes

  I publish these newsletters through Buttondown and decided to create a few themes for it.

  This project is built on Remix, parcel-css and cheerio. If there’s interest, I plan to add more themes and support other platforms. Let me know what you think about it 😊

• Locale-Aware Sorting in JavaScript

  The default sorting logic for strings doesn’t quite yield the results that you might expect. Thankfully there are a couple of options that you can use to apply locale-aware sorting.

• open-emoji

  Open-source emojis for designers, developers and everyone else!

• modfy.video

  A video transcoder and converter built using Web Assembly and FFMPEG to transcode and convert videos right in your browser while protecting your privacy.

• The Parallax Effect // 5 Minute WebDev Project

  An awesome and short introduction to @react-spring/parallax.

🇧🇷 Em Português

• 80 APIs para você usar nos seus projetos e praticar

  Várias das APIs são gratuitas!

Links

• gradient-string

  Use beautiful color gradients in your terminal output.

• Product Hunt Today

  A Twitter bot that tweet trending Product Hunt products every day, in a short video!

  The video is built with Remotion and the code is on GitHub.

• Saving time in UTC doesn’t work and offsets aren’t enough

  I related a lot to this article because I’ve faced the same issues on a freelance gig. 😄

• open-props.style

  Supercharged CSS variables.

• Move users to Microsoft Edge from Internet Explorer

  Microsoft has a list of websites that when an Internet Explorer user visits them, they’re instructed to switch to a more modern browser in order to use the website.

• SQIP

  An image processor available as a node API and CLI to do things like create tiny image previews, convert to abstract art, resize, etc.

• difftastic

  An experimental diff tool that compares files based on their syntax.

• md-to-pdf

  Hackable CLI tool for converting Markdown files to PDF using Node.js and headless Chrome.

• Nvidia shows off AI model that turns a few dozen snapshots into a 3D-rendered scene

  The tool is called Instant NeRF, referring to “neural radiance fields”. There’s a paper describing the work and some source code for the project.

🇧🇷 Em Português

• 7 Days of Code

  Um evento da Alura com desafios em diferentes áreas de programação.

Links

• StackBlitz has joined the Bytecode Alliance

  StackBlitz is a web IDE powered by WebAssembly. Now, they’ve joined a cross-industry partnership to bring WebContainers to all devices, languages, platforms, and runtimes.

• Sort your Git branches

  Have too many branches and don’t know much about them? The --sort flag can help!

• Startup Says It’s Created an Actual “Invisibility Shield”

  It is financing its invention through Kickstarter.

• Ladle: Develop and Test Your React Stories Faster

  It has been developed as a drop-in replacement of Storybook. It lacks some features that Storybook has but - hey, here’s an opportunity for open-source contributions!

• Indexes in SQL databases

  I was learning about indexes recently and found this video. It’s fun and well-explained!

• First Microsoft, then Okta: New ransomware gang posts data from both

  According to Okta, the affected users were notified. From the Microsoft side, the group reported hacking proprietary source code for Bing, Bing Maps, and Cortana.

🇧🇷 Em Português

• selic

  O repositório está em Inglês, mas a biblioteca pode ser usada para buscar dados de SELIC, IPCA e CDI.

• Design Systems Brasileiros

  Uma lista de Design Systems construídos no Brasil! 🇧🇷

Links

• How to implement a search shortcut (OpenSearch) on any website

  A post from yours truly about helping users find search results directly from the address bar.

• Making Music With Code

  Have you ever thought about generating music with code on the fly? This episode of Learn With Jason shows how it’s possible. Very cool episode!

• Atropos - Stunning touch-friendly 3D parallax hover effects

  A lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js.

  Awesome demos on its homepage but it seems to have some issues with Firefox.

• Good advice on JSX conditionals

  Conditional rendering is a cornerstone of any templating language. JSX chose to rely on JS boolean operators, which are not always as intuitive as one’d expect.

• How to create posters with Figma in just a few easy steps

  A 🤯 thread teaching how to create an awesome poster on Figma.

🇧🇷 Em Português

• Repo para divulgar criadores de conteúdo na língua portuguesa

  Este repo será construído para ajudar a divulgar nomes de autores brasileiros (ou pelo menos da língua portuguesa), independente do tamanho ou alcance do seu canal.****

• Semana JavaScript Expert

  Vem aí a sexta edição do evento. O projeto da vez é baseado no Spotify, mas implementa uma funcionalidade inexistente. Mais detalhes no post do Erick Wendel.

Links

• Infinite Passerella

  An infinite fashion show made by Lusion.

• Backlight - Build Design Systems

  An awesome tool for front-end teams to build design systems collaboratively. Some of its features were shown in an episode of Learn With Jason.

• Brutalita Sans

  Brutalita is an experimental font and font editor, edit in your browser and download OTF.

  It means “little brutal” in Spanish.

• caxa - Package Node.js applications into executable binaries

  Very interesting package. The author has a YouTube video demonstrating it and explaining how it works. I learned a lot from it!

  The author is also the creator of Kill The Newsletter too, a very useful tool if you prefer RSS feeds over e-mails.

• badass courses

  A selection of badass online courses.

🇧🇷 Em Português

• Semana JavaScript Expert

  Vem aí a sexta edição do evento. O projeto da vez é baseado no Spotify, mas implementa uma funcionalidade inexistente. Mais detalhes no post do Erick Wendel.

• Rocketseat - Automatizando edição de Reels

  Um vlog bem legal da Rocketseat, mostrando como foram da ideia à execução de uma tarefa que consome bastante tempo - edição de vídeo.

Links

• Worldle - Wordle but for geography

  It’s hard to guess a country for a picture but I liked it. 🤓

• The Story of Asynchronous JavaScript

  The story of callbacks, promises, and Async/await in JavaScript.

• Career Ladders

  “A sample of career ladders I use for my organization, open sourced for anyone.” - Sarah Drasner

• Medusa - The Open Source Shopify Alternative

  Create a headless commerce store in minutes and start your growth journey on a fast and flexible foundation. It has a lot of integrations with popular apps.

• napi-rs - Build compiled Node.js add-ons in Rust

  Write in Rust and compile to code that runs on Node.js. CJS and ESM are supported.

• sigma.js

  A JavaScript library aimed at visualizing graphs of thousands of nodes and edges.

• gyroflow - Video stabilization using gyroscope data

  Built with Rust. The demo video in the homepage is amazing!

• telegraf - Modern Telegram Bot Framework for Node.js

  I’m working on a Telegram bot for a side-project and enjoying using this library - although its docs could be better, I rely on Google more than the docs 🥲

Intro

A lot of links this week as I’m pursuing an inbox-zero (for the 912890th time).

Links

• The Passion Paradox

  This one “hit home” as some say. It’s a must-read.

• Who Can Use

  A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

• Monorepo explained

  A site with an in-depth explanation of what a monorepo is, including tools and what features they support - very in-depth indeed.

• Include diagrams in your Markdown files with Mermaid

  Mermaid is a JavaScript-based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.

  Thanks Emerson Laurentino for this link.

• Lightning Memory-Mapped Database

  A fast, memory-efficient database with the read performance of a pure in-memory database but persisting on a disk. It’s used on Gatsby v4 for DSG (Deferred Static Generation).

• Animate Anything Along an SVG Path

  Learn how to code creative animations using SVG paths and the getPointAtLength() function.

• frontend-challenges

  Listing some playful open-source's challenges of companies to test your knowledge.

• awesome-standalones

  A curated list of awesome framework-agnostic standalone web components.

• blurhash

  A very compact (20-30 characters!) representation of a placeholder for an image.

• human-id

  Generates human-readable strings by chaining common short words of the English language in a semi-meaningful way.

• nice-modal-react

  A nice modal manager for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id.

• pg-mem

  An in-memory Postgres DB instance for your unit tests.

Links

• Slowfiles - Slow-loading resources for testing

  Useful web API that generates slow, inaccessible or missing JS and CSS files that you can use in testing.

• remix-crash - A development ErrorBoundary for your Remix apps

  Get better insight on why your Remix app crashed during development.

• @faker-js/faker - A new package official package

  After the episodes with the “old” library, some people forked faker under a new organization. They're changing some things so it's not 100% complete. If you like the library, there are chances to contribute to it.

• Flutjs - Create websites with JavaScript using Flutter-like syntax

  Flutter for Web works but the result of the bundle size isn’t good, accessibility and SEO are not perfect either. So a developer started Flutjs to try and solve these issues with a new and shiny JavaScript framework.

• cal.com - Scheduling infrastructure for absolutely everyone

  The open-source Calendly alternative. Built with Next.js, Prisma and Postgres. You can self-host or use their SaaS alternative.

Links

• Introducing: TypeScript typegen for XState

  Code generation is great, something I want to learn at some point. In the meantime, I can only be mind-blown by things like these types improvements on XState.

• Imperative vs Declarative Programming

  A short and precise explanation between the diference of the two.

• figlet.js - A JavaScript implementation of the FIGfont spec

  Very fun library to use on the web and Node with many options and fonts!

  

• Coding Font by Typogram

  A cool game that helps you choose the perfect coding font. Btw, I’m using the Recursive Mono Linear for some years now and I like it a lot.

• FerretDB - A truly Open Source MongoDB alternative

  An open-source proxy, converting the MongoDB wire protocol queries to SQL, using PostgreSQL as a database engine.

• How To Process Images in Node.js With Sharp

  In this tutorial, you’ll use sharp to read an image and extract its metadata, resize, change an image format, and compress an image. Then crop, grayscale, rotate it and blur an image. Finally, you will composite images, and add text on an image. By the end of this tutorial, you’ll have a good understanding of how to process images in Node.js.

• Trace - Monitor your GraphQL queries at the resolver level

  A lightweight GraphQL query performance monitoring GUI with real-time, resolver-level performance tracing metrics and error logging.

• asciinema - Terminal session recorder

  It lets you easily record terminal sessions and replay them in a terminal as well as in a web browser using asciinema-player.

🇧🇷 Em Português

• 30 Minutes of Code - Remix.run

  Uma série de vídeos explorando o web framework.

• Evento Get Started

  O pessoal da Codar.me está realizando um evento durante esta semana, falando dos passos necessários para dominar a programação.

Links

• Inclusively Hidden

  An article on different ways to hide content while making it accessible for screen readers.

• npq - Audit packages as part of your install process

  By adding an alias for npm and yarn, it runs when you first try to install any dependencies.

• parcel-css - A CSS parser, transformer, and minifier written in Rust

  A recent release from the Parcel team, the benchmarks on this tool are pretty good (as most things built with Rust™  😄

• Flutter - ShrinkWrap vs Slivers

  I’ve faced issues with nested virtualized lists before and solved it with shrinkWrap: true without really understanding it. This video clarifies what happens and suggests Slivers as a better solution. The DartPad with the comparison is pretty good too.

• diff-so-fancy - The best-lookin' diffs

  A very nice tool built in... Perl! 😄

• webhook.site

  Test, process and transform emails and HTTP requests.

• webpagetest-docker-setup

  A collection of simple scripts to run an instance of WebPageTest locally. Very useful when the site you want to test is private.

• NFT Bay

  I don't know much about NFT but this project is funny.

🇧🇷 Em Português

• Canal do Fabio Vedovelli

  A última série dele foi sobre Remix. Ele também posta muito no Twitter.

Intro

The newsletter is back! \o/

You probably forgot I had this, it’s been quite a while since the last edition.

But I’ll try to get back to it this year 🙂

Links

Links

Links

Links

Links

Links

Links

Links

Links

Links

Links

Intro

I’m going into a short vacation (one week), so probably there won’t be an edition next week.

See you in two weeks!

Links

Intro

I was super busy last week and I couldn’t publish a edition of this newsletter - sorry about that!

Links

Links

Links

Intro

I’m sorry for the small delay, I prepared the newsletter but forgot to schedule it 😅

Links

Links

Intro

A good mix this week, starting with an article I wrote recently. I hope you enjoy it!

Links

Intro

I like open-source a lot, so I’m always finding new repositories and reading a lot of source code from them. Almost never I get to use the library or framework found but almost always I learn something from them and get to apply this knowledge in something I’m working on.

I wonder if any of you do the same. Let me know!

Links

Links

Intro

I hope you all had a good Easter. I did some camping for the first time - which didn’t went so well haha - and biked around the city.

Links

Links

• Super-Expressive Macro

Intro

As mentioned, this week’s edition contains links for content related to testing. I hope you find them useful for your work and side projects.

If you have any other good links to suggest, feel free to send me and I’ll make sure to add them next week.

Intro

I’d like to appreciate all the feedback you’ve given me so far. I’m trying to improve this newsletter every week and it’s helping me a lot! Keep it coming! 🙌

Spoiler

As I’ve been looking into tests recently, expect the next week’s edition to have some links on the topic 😉

Intro

This week’s content is focused on the front-end as it was my focus from last week. I hope you enjoy it as I read up for the next edition. 🤓

Front-end

Intro

Although my “social media bubbles” are good, I’m not used to log into them every day, so I miss a lot of things.

And there’s content from people that I don’t to miss, so I’ve decided to try RSS feeds - yes, they are not dead!

Productivity