arthurdenner, I'm [arthurdenner](! 👋🏽 I consume content every day and I want to share the best of it with you. My newsletter contains curated content I've consumed recently, from a variety of topics: front-end, back-end, open-source, podcasts, design, people to follow... and sometimes non-tech content too. Although most of the content I consume is in English, this newsletter may contain a section of Brazilian Portuguese content for my fellow countrymen. 🇧🇷 &nbsp; From Maceió, Alagoas, Brazil 🇸🇪 &nbsp; Living in Stockholm, Swedenen-usThu, 18 Aug 2022 10:00:00 +0000Newsletter #41 <h2>Intro</h2> <p>Hi there! I’m back with a bunch of links for you today, I hope you like them!</p> <h2>Shameless Plugs</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">Build an extendable in-browser devtools</a></p> <p>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! 😊</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">@remotion/lottie</a></p> <p>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. 🌟</p> </li> </ul> <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">little-planet - Interactive panorama viewer</a></p> <p>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 <a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">CodeSandbox</a> to play with it.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">skip-the-scroll - Quickly navigate GitHub issues</a></p> <p>A Chrome extension that sorts GitHub issue comments and allows us to iterate through them based on their social reactions.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">svg-path-morph - SVG paths interpolation</a></p> <p>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).</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">devices.css - Pure CSS phones and tables</a></p> <p>I don’t know how I never heard about this before but it’s amazing!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">JSONata - Query and transformation language</a></p> <p>Create complex and powerful expressions and evaluate them against a JSON.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">PocketBase - Open Source realtime backend in 1 file</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">d3-interpolate - Interpolate whatever</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">docusaurus-search-local - Offline/local search for Docusaurus v2</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">HUDS+GUIS</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">How to de-Google your site to make it faster and visitor-friendly</a></p> <p>A lot of tips and alternative services. A post from a co-founder of Plausible Analytics, which just <a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">reached 1M ARR</a>!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">The Surprising Truth About Pixels and Accessibility</a></p> <p>Another great post by Josh. It’s full of examples of when to choose px or em/rem.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">How to replace useState with useRef and be a winner</a></p> <p>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 <code>requestAnimationFrame</code> when setting state.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank"></a></p> <p> is a <a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">set of Open Source tools</a> that makes it easy to monitor and measure the performance of your web site. It has a Docker image too.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">Tecno Brega Stack</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-41" target="_blank">node-dfe</a></p> <p>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. ****</p> </li> </ul> Thu, 18 Aug 2022 10:00:00 +0000 #40 <h2>Intro</h2> <p>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.</p> <p>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.</p> <p>For those who are also in summer, enjoy it because it’s short 🥲</p> <p>For those who are in the winter, best of luck 😁</p> <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">3D Icons</a></p> <p>A collection of more than 120 open-source 3D icons that are 100% free for commercial and personal use. The icons come in four predefined color styles and three camera angles.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">The Data Behind Why Apps Fail</a></p> <p>An interesting and data-backed read on why, even though the app market continues to raise, most apps don&rsquo;t get downloaded or generate any revenue.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">auto-animate</a></p> <p>A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">A Beginner’s Guide to Observability</a></p> <p>This free e-book is about observability, an interesting and important topic IMO. It was created by Splunk, which I learned a lot about in a <a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">workshop offered at work</a>. If your company uses them, try and learn it - it&rsquo;s so powerful!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">VEED Tools</a></p> <p>Online video editing made simple. Cut, trim, crop, add subtitles, progress bars, transcribe and more! They really have A LOT of tools!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">Rowy</a></p> <p>An open-source low-code platform for your backend. Airtable-like UI for your database meets cloud functions workflows, all in your browser.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">Feedback Fin</a></p> <p>From the same authors as Rowy, an open-source widget to collect feedback anywhere on your website. Lightweight and tiny.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">perfect-cursors</a></p> <p>Perfect interpolation for multiplayer cursors.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">fonoster</a></p> <p>The open-source alternative to Twilio.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">knitwork</a></p> <p>Utilities to generate JavaScript and TypeScript code like ESM imports, exports, TS interfaces and much more.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-40" target="_blank">Bágdex - 151 &ldquo;Pokémon&rdquo; baseados no nosso Brasil</a></p> <p>Um trabalho muito foda que levou 8 meses pra ser executado. Vale a pena conferir e espalhar pra todo mundo! 😍</p> </li> </ul> Fri, 17 Jun 2022 12:33:11 +0000 #39 <h2>Promotion</h2> <p>I’ve been happily using <a href=";utm_affiliate=affiliate&amp;utm_source=arthurdenner&amp;utm_medium=email" target="_blank">Buttondown</a> to publish these newsletters and recently built <a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank"></a>, which contains a few themes for it.</p> <p>Check it out and let me know what you think about the project!</p> <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank">Mechanical Watch</a></p> <p>This is a very long read but I was amazed at how detailed it is, specially with all the interactive animations throughout the article. I really appreciate the time put into explaining such an interesting mechanism in such details.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank">jest-axe</a></p> <p>Custom Jest matcher for aXe for testing accessibility. It doesn’t guarantee that what you build is fully accessible, but warns and prevents common mistakes.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank">Zaplib post-mortem</a></p> <p>An interesting and kinda brutal post-mortem of a startup around the idea of migrating from JS to Rust in heavy-graphics applications for performance boosts.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank">vanta.js</a></p> <p>Animated 3D backgrounds for your website.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-39" target="_blank">frontend-challenges</a></p> <p>O repositório não é em Português, tem muitas empresas brasileiras na lista.</p> </li> </ul> Thu, 19 May 2022 10:00:00 +0000 #38 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">md-to-pdf</a></p> <p>A tool for converting Markdown files to PDF using Node.js and headless Chrome.</p> <p>I’m using it to generate the instructions for each theme on <a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">Newsletter Themes</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">listmonk</a></p> <p>An open-source, self-hosted, newsletter and mailing list manager with a modern dashboard.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">micromatch</a></p> <p>Highly optimized wildcard and glob matching library.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">click-to-component</a></p> <p>Option+Click React components in your browser to instantly open the source in VS Code.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-38" target="_blank">Remotion 3.0</a></p> <p>This new release brings Remotion Lambda, a distributed video renderer based on AWS Lambda, parallel rendering and encoding and much more!</p> </li> </ul> Thu, 28 Apr 2022 10:00:00 +0000 #37 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">Newsletter Themes</a></p> <p>I publish these newsletters through <a href=";utm_affiliate=affiliate&amp;utm_source=arthurdenner&amp;utm_medium=email" target="_blank">Buttondown</a> and decided to create a few themes for it.</p> <p>This project is built on <a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">Remix</a>, <a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">parcel-css</a> and <a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">cheerio</a>. If there’s interest, I plan to add more themes and support other platforms. <a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">Let me know</a> what you think about it 😊</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">Locale-Aware Sorting in JavaScript</a></p> <p>The default sorting logic for strings doesn&rsquo;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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">open-emoji</a></p> <p>Open-source emojis for designers, developers and everyone else!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank"></a></p> <p>A video transcoder and converter built using Web Assembly and FFMPEG to transcode and convert videos right in your browser while protecting your privacy.</p> </li> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">The Parallax Effect // 5 Minute WebDev Project</a></p> <p>An awesome and short introduction to <a href=";utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">@react-spring/parallax</a>.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";t=1T6BMdaBWkJhWmr3Qn6bMA&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-37" target="_blank">80 APIs para você usar nos seus projetos e praticar</a></p> <p>Várias das APIs são gratuitas!</p> </li> </ul> Thu, 21 Apr 2022 10:00:00 +0000 #36 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">gradient-string</a></p> <p>Use beautiful color gradients in your terminal output.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">Product Hunt Today</a></p> <p>A Twitter bot that tweet trending Product Hunt products every day, in a short video!</p> <p>The video is built with <a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">Remotion</a> and the code is on <a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">GitHub</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">Saving time in UTC doesn&rsquo;t work and offsets aren&rsquo;t enough</a></p> <p>I related a lot to this article because I’ve faced the same issues on a freelance gig. 😄</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank"></a></p> <p>Supercharged CSS variables.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">Move users to Microsoft Edge from Internet Explorer</a></p> <p>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.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">SQIP</a></p> <p>An image processor available as a node API and CLI to do things like create tiny image previews, convert to abstract art, resize, etc.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">difftastic</a></p> <p>An experimental diff tool that compares files based on their syntax.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">md-to-pdf</a></p> <p>Hackable CLI tool for converting Markdown files to PDF using Node.js and headless Chrome.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">Nvidia shows off AI model that turns a few dozen snapshots into a 3D-rendered scene</a></p> <p>The tool is called Instant NeRF, referring to “neural radiance fields”. There’s a <a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">paper describing the work</a> and some <a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">source code</a> for the project.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-36" target="_blank">7 Days of Code</a></p> <p>Um evento da Alura com desafios em diferentes áreas de programação.</p> </li> </ul> Thu, 31 Mar 2022 19:56:35 +0000 #35 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">StackBlitz has joined the Bytecode Alliance</a></p><p>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.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Sort your Git branches</a></p><p>Have too many branches and don’t know much about them? The <code>--sort</code> flag can help!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Startup Says It’s Created an Actual “Invisibility Shield”</a></p><p>It is financing its invention through <a href="" rel="noopener noreferrer nofollow" target="_blank">Kickstarter</a>.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Ladle: Develop and Test Your React Stories Faster</a></p><p>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!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Indexes in SQL databases</a></p><p>I was learning about indexes recently and found this video. It’s fun and well-explained!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">First Microsoft, then Okta: New ransomware gang posts data from both</a></p><p>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.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">selic</a></p><p>O repositório está em Inglês, mas a biblioteca pode ser usada para buscar dados de SELIC, IPCA e CDI.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Design Systems Brasileiros</a></p><p>Uma lista de Design Systems construídos no Brasil! 🇧🇷</p></li></ul> Thu, 24 Mar 2022 16:00:05 +0000 #34 <h2 id="links">Links</h2> <ul> <li><p><a href="">How to implement a search shortcut (OpenSearch) on any website</a></p> <p>A post from yours truly about helping users find search results directly from the address bar.</p> </li> <li><p><a href="">Making Music With Code</a></p> <p>Have you ever thought about generating music with code on the fly? This episode of <a href="">Learn With Jason</a> shows how it’s possible. Very cool episode!</p> </li> <li><p><a href="">Atropos - Stunning touch-friendly 3D parallax hover effects</a></p> <p>A lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js.</p> <p>Awesome demos on its <a href="">homepage</a> but it seems to have some issues with Firefox.</p> </li> <li><p><a href="">Good advice on JSX conditionals</a></p> <p>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.</p> </li> <li><p><a href="">How to create posters with Figma in just a few easy steps</a></p> <p>A 🤯 thread teaching how to create an awesome poster on Figma.</p> </li> </ul> <h2 id="🇧🇷-em-português">🇧🇷 Em Português</h2> <ul> <li><p><a href="">Repo para divulgar criadores de conteúdo na língua portuguesa</a></p> <p>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.****</p> </li> <li><p><a href="">Semana JavaScript Expert</a></p> <p>Vem aí a sexta edição do evento. O projeto da vez é baseado no Spotify, mas implementa uma funcionalidade inexistente. Mais detalhes no <a href="">post do Erick Wendel</a>.</p> </li> </ul> Thu, 10 Mar 2022 11:00:00 +0000 #33 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Infinite Passerella</a></p><p>An infinite fashion show made by <a href="" rel="noopener noreferrer nofollow" target="_blank">Lusion</a>.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Backlight - Build Design Systems</a></p><p>An awesome tool for front-end teams to build design systems collaboratively. Some of its features were shown in an episode of <a href="" rel="noopener noreferrer nofollow" target="_blank">Learn With Jason</a>.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Brutalita Sans</a></p><p>Brutalita is an experimental font and font editor, edit in <a href="" rel="noopener noreferrer nofollow" target="_blank">your browser</a> and download OTF.</p><p>It means “little brutal” in Spanish.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">caxa - Package Node.js applications into executable binaries</a></p><p>Very interesting package. The author has a <a href="" rel="noopener noreferrer nofollow" target="_blank">YouTube video</a> demonstrating it and explaining how it works. I learned a lot from it!</p><p>The author is also the creator of Kill The Newsletter too, a very useful tool if you prefer RSS feeds over e-mails.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">badass courses</a></p><p>A selection of badass online courses.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Semana JavaScript Expert</a></p><p>Vem aí a sexta edição do evento. O projeto da vez é baseado no Spotify, mas implementa uma funcionalidade inexistente. Mais detalhes no <a href="" rel="noopener noreferrer nofollow" target="_blank">post do Erick Wendel</a>.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Rocketseat - Automatizando edição de Reels</a></p><p>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.</p></li></ul> Thu, 03 Mar 2022 11:00:00 +0000 #32 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Worldle - Wordle but for geography</a></p><p>It’s hard to guess a country for a picture but I liked it. 🤓</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">The Story of Asynchronous JavaScript</a></p><p>The story of callbacks, promises, and Async/await in JavaScript.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Career Ladders</a></p><p>“A sample of career ladders I use for my organization, open sourced for anyone.” - <a href="" rel="noopener noreferrer nofollow" target="_blank">Sarah Drasner</a></p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Medusa - The Open Source Shopify Alternative</a></p><p>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.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">napi-rs - Build compiled Node.js add-ons in Rust</a></p><p>Write in Rust and compile to code that runs on Node.js. CJS and ESM are supported.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">sigma.js</a></p><p>A JavaScript library aimed at visualizing graphs of thousands of nodes and edges.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">gyroflow - Video stabilization using gyroscope data</a></p><p>Built with Rust. The demo video in the <a href="" rel="noopener noreferrer nofollow" target="_blank">homepage</a> is amazing!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">telegraf - Modern Telegram Bot Framework for Node.js</a></p><p>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 🥲</p></li></ul> Thu, 24 Feb 2022 12:00:00 +0000 #31 <h2>Intro</h2> <p>A lot of links this week as I’m pursuing an inbox-zero (for the 912890th time).</p> <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">The Passion Paradox</a></p><p>This one “hit home” as some say. It’s a must-read.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Who Can Use</a></p><p>A tool that brings attention and understanding to how color contrast can affect different people with visual impairments.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Monorepo explained</a></p><p>A site with an in-depth explanation of what a monorepo is, including tools and what features they support - very in-depth indeed.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Include diagrams in your Markdown files with Mermaid</a></p><p>Mermaid is a JavaScript-based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.</p><p>Thanks Emerson Laurentino for this link.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Lightning Memory-Mapped Database</a></p><p>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).</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Animate Anything Along an SVG Path</a></p><p>Learn how to code creative animations using SVG paths and the getPointAtLength() function.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">frontend-challenges</a></p><p>Listing some playful open-source's challenges of companies to test your knowledge.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">awesome-standalones</a></p><p>A curated list of awesome framework-agnostic standalone web components.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">blurhash</a></p><p>A very compact (20-30 characters!) representation of a placeholder for an image.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">human-id</a></p><p>Generates human-readable strings by chaining common short words of the English language in a semi-meaningful way.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">nice-modal-react</a></p><p>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.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">pg-mem</a></p><p>An in-memory Postgres DB instance for your unit tests.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Vídeo - As “más práticas” mais comuns no JavaScript</a></p><p>O <a href="" rel="noopener noreferrer nofollow" target="_blank">Lucas Santos</a> criou um vídeo bem maneiro sobre o que evitar no JavaScript, e assim, evitar comportamentos inesperados nos nossos códigos. Há também um post com mais alguns exemplos no <a href="" rel="noopener noreferrer nofollow" target="_blank">blog dele</a>.</p></li></ul> Thu, 17 Feb 2022 11:00:00 +0000 #30 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Slowfiles - Slow-loading resources for testing</a></p><p>Useful web API that generates slow, inaccessible or missing JS and CSS files that you can use in testing.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">remix-crash - A development ErrorBoundary for your Remix apps</a></p><p>Get better insight on why your Remix app crashed during development.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">@faker-js/faker - A new package official package</a></p><p>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.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Flutjs - Create websites with JavaScript using Flutter-like syntax</a></p><p>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.</p></li></ul> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank"> - Scheduling infrastructure for absolutely everyone</a></p><p>The open-source Calendly alternative. Built with Next.js, Prisma and Postgres. You can self-host or use their SaaS alternative.</p></li></ul> Thu, 10 Feb 2022 11:00:00 +0000 #29 <h2 id="links">Links</h2> <ul> <li><p><a href="">Introducing: TypeScript typegen for XState</a></p> <p>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 <a href="">XState</a>.</p> </li> <li><p><a href="">Imperative vs Declarative Programming</a></p> <p>A short and precise explanation between the diference of the two.</p> </li> <li><p><a href="">figlet.js - A JavaScript implementation of the FIGfont spec</a></p> <p>Very fun library to use on the web and Node with many options and fonts!</p> <img alt="arthurdenner-figlet.png" src=""/> </li> <li><p><a href="">Coding Font by Typogram</a></p> <p>A cool game that helps you choose the perfect coding font. Btw, I’m using the <a href="">Recursive Mono Linear</a> for some years now and I like it a lot.</p> </li> <li><p><a href="">FerretDB - A truly Open Source MongoDB alternative</a></p> <p>An open-source proxy, converting the MongoDB wire protocol queries to SQL, using PostgreSQL as a database engine.</p> </li> <li><p><a href="">How To Process Images in Node.js With Sharp</a></p> <p>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.</p> </li> <li><p><a href="">Trace - Monitor your GraphQL queries at the resolver level</a></p> <p>A lightweight GraphQL query performance monitoring GUI with real-time, resolver-level performance tracing metrics and error logging.</p> </li> <li><p><a href="">asciinema - Terminal session recorder</a></p> <p>It lets you easily record terminal sessions and replay them in a terminal as well as in a web browser using <a href="">asciinema-player</a>.</p> </li> </ul> <h2 id="🇧🇷-em-português">🇧🇷 Em Português</h2> <ul> <li><p><a href="">30 Minutes of Code -</a></p> <p>Uma série de vídeos explorando o web framework.</p> </li> <li><p><a href="">Evento Get Started</a></p> <p>O pessoal da <a href=""></a> está realizando um evento durante esta semana, falando dos passos necessários para dominar a programação.</p> </li> </ul> Thu, 03 Feb 2022 11:00:00 +0000 #28 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Inclusively Hidden</a></p><p>An article on different ways to hide content while making it accessible for screen readers.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">npq - Audit packages as part of your install process</a></p><p>By adding an alias for <code>npm</code> and <code>yarn</code>, it runs when you first try to install any dependencies.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">parcel-css - A CSS parser, transformer, and minifier written in Rust</a></p><p>A recent release from the Parcel team, the benchmarks on this tool are pretty good (as most things built with Rust™  😄</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Flutter - ShrinkWrap vs Slivers</a></p><p>I’ve faced issues with nested virtualized lists before and solved it with <code>shrinkWrap: true</code> 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.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">diff-so-fancy - The best-lookin' diffs</a></p><p>A very nice tool built in... Perl! 😄</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank"></a></p><p>Test, process and transform emails and HTTP requests.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">webpagetest-docker-setup</a></p><p>A collection of simple scripts to run an instance of <a href="" rel="noopener noreferrer nofollow" target="_blank">WebPageTest</a> locally. Very useful when the site you want to test is private.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">NFT Bay</a></p><p>I don't know much about NFT but this project is funny.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Canal do Fabio Vedovelli</a></p><p>A última série dele foi sobre <a href="" rel="noopener noreferrer nofollow" target="_blank">Remix</a>. Ele também posta muito no <a href="" rel="noopener noreferrer nofollow" target="_blank">Twitter</a>.</p></li></ul> Thu, 27 Jan 2022 11:00:00 +0000 #27 <h2>Intro</h2> <p>The newsletter is back! \o/</p> <p>You probably forgot I had this, it’s been quite a while since the last edition.</p> <p>But I’ll <em>try</em> to get back to it this year 🙂</p> <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Remix vs Next.js</a></p><p>The most asked question to the Remix team is now officially answered.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Mockoon - Create mock APIs in seconds</a></p><p>Recommended by a coworker, this GUI enables mocking of APIs with features like environments, RegEx matching and much more.</p><p>I’d still use MockServiceWorker though 😛</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Gramma - Command-line grammar check</a></p><p>Nice CLI to quickly check if your message has typos without leaving the terminal.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Retry, Timeout and Cancel with fetch()</a></p><p>Although none of these are built-in, it’s easy to add retries, timeouts and cancellations to your fetch() calls without needing to use a full-featured third-party library.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Take advantage of promise-based APIs in Node.js</a></p><p>Some of the APIs have been around for a while, others became stable on v16.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Explore DOM Events</a></p><p>Learn about the DOM Event system through exploration. It was created by the author of the Egghead course “<a href="" rel="noopener noreferrer nofollow" target="_blank">Your Ultimate Guide to Understanding DOM Events</a>”.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Podcast Devs Sem Fronteiras</a></p><p>“Substituindo” o Carreira Sem Fronteiras, um dos meus podcasts favoritos, o Devs Sem Fronteiras traz os mesmos hosts, porém só entrevistando a galera de tech mesmo.</p></li></ul> Thu, 20 Jan 2022 11:00:00 +0000 #26 <h2 id="links">Links</h2> <ul> <li><p><a href="">Dependency-free Utilities</a></p> <p>A library of dependency-free JavaScript functions that do <em>just</em> do one thing.</p> </li> <li><p><a href="">react-colorful</a></p> <p>A tiny (2,5 KB) color picker component for React and Preact apps.</p> </li> <li><p><a href="">What makes urql different from other GraphQL clients</a></p> <p>I personally never used <a href="">urql</a> but it's always nice to hear how decisions in big projects are made and what impact they have.</p> </li> <li><p><a href="">Reuse the same tab on Chrome</a></p> <p>A package very handy when building CLIs that open tabs.</p> </li> </ul> Thu, 28 Oct 2021 11:19:02 +0000 #25 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">The Power of Composition with CSS Variables</a></p><p>Take a look at some patterns and get a peek at some CSS awesomeness!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Persistent Layout Patterns in Next.js</a></p><p>An interesting write-up about different approaches. The post is almost 2 years old but the concepts are still applicable.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">The terminal that supercharges your developer workflow</a></p><p>Warp is a blazingly fast, Rust-based terminal that makes you and your team more productive at coding and DevOps.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Lucy - A DSL for Finite State Machines</a></p><p>A concise language for describing Finite State Machines. It compiles to <a href="" rel="noopener noreferrer nofollow" target="_blank">XState</a>, the best-in-class JavaScript library for FSMs and statecharts.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">TablePlus - Database management made easy</a></p><p>I've just started to test this app. I'm a happy user of <a href="" rel="noopener noreferrer nofollow" target="_blank">Beekeeper Studio</a> but TablePlus looks solid too, seems to have more features and supports more databases too.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Tech stack collaboration for developers</a></p><p>Easily map out which open source &amp; SaaS solutions are being used across your engineering teams, why they’re being used, and who someone should talk to about each technology.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">How to OVER Engineer a Website // What is a Tech Stack?</a></p><p>A true video with a good sense of humour. I laugh every time someone prefers to put their very tiny project on AWS instead of hosting it easily in other services like Heroku.</p><p>Share your thoughts on this. I appreciate some insight that I may be missing out.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">.docx file generation</a></p><p>Easily generate .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Fresnel</a></p><p>An SSR compatible approach to CSS media query based responsive layouts for React.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">tRPC - End-to-end typesafe APIs made easy</a></p><p>Allows to easily build &amp; consume fully typesafe APIs, without schemas or code generation.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Making Electron apps feel native on Mac</a></p><p>A great write-up about small details of native apps that we may miss.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">node-rate-limiter</a></p><p>A generic rate limiter for Node.js. Useful for API clients, web crawling, or other tasks that need to be throttled.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">On the &lt;dl&gt;</a></p><p>A better way to represent key-value pairs on our web apps!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Twitter's div Soup and Uglyfied CSS, Explained</a></p><p>Have you ever wondered about the (apparent) mess of Twitter's DOM representation? Find out some reasons why it looks like that in this blog post.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Next Level Week</a></p><p>Outro evento gratuito da Rocketseat 🔥</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">cep-promise</a></p><p>Busca por CEP integrado diretamente aos serviços dos Correios, ViaCEP e outros.</p></li></ul> Thu, 14 Oct 2021 10:00:00 +0000 #24 <h2>Links</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Hacktoberfest #8</a></p><p>It starts tomorrow!</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">How I experience web today</a></p><p>Unfortunately, you've probably seen a site like this recently.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Fluid Earth</a></p><p>A WebGL-powered visualization of Earth's atmosphere and oceans.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">React Aria</a></p><p>React Hooks that provides accessible UI primitives for your design system for the web.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">React Native Aria</a></p><p>React Hooks for React-Native (Android/iOS/Web) to provide accessible UI primitives for a design system.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">ModHeader</a></p><p>A browser extension that allow you to modify HTTP request and response headers.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Mafs</a></p><p>React components for math visualization.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Bioicons</a></p><p>A library of free open source icons for science illustrations in biology and chemistry</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">How to "Google It" like a Senior Software Engineer</a></p><p>Besides the clickbait title, the videos has great tips on how to improve your searches.</p></li><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">Image Extractor</a></p><p>Extract images from any public website by using a virtual browser.</p></li></ul> <h2>🇧🇷 Em Português</h2> <ul><li><p><a href="" rel="noopener noreferrer nofollow" target="_blank">DoWhile 2021</a></p><p>A <a href="" rel="noopener noreferrer nofollow" target="_blank">Rocketseat</a> vai fazer mais um grande evento online e gratuito entre nos dias 1 e 2 de Dezembro. Garanta sua inscrição no link acima!</p></li></ul> Thu, 30 Sep 2021 10:00:00 +0000 #23 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">React Native EU Conference</a></p> <p>Free registration to watch the talks live.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Mistakes I made while maintaining an open-source React Native library for five years</a></p> <p>On the React Native topic, here is a great write up about decisions in open-source.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">typesafe-i18n</a></p> <p>An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Pulumi - Modern Infrastructure as Code</a></p> <p>Build cloud applications and infrastructure by combining the safety and reliability of infrastructure as code with the power of familiar programming languages and tools.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Meyda</a></p> <p>A Javascript audio feature extraction library. Supports both offline feature extraction as well as real-time feature extraction using the Web Audio API.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Mapus</a></p> <p>A map tool with real-time collaboration.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Hoppscotch</a></p> <p>Open source API development ecosystem.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Semana Full Stack Sem Custo</a></p> <p>Re-exibição do curso gratuito da</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Imersão Full Stack &amp;&amp; Full Cycle</a></p> <p>Mais uma edição do evento que ensina como desenvolver aplicações de grande porte e ter um dos perfis mais desejados e bem pagos do mercado.</p> </li> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-23" target="_blank">Inline-flex vs inline-block</a></p> <p>No início deste vídeo, há uma ótima explicação sobre os valores <code>inline-flex</code> e <code>inline-block</code> que podem ser usados na propriedade <code>display</code> no CSS.</p> </li> </ul> Thu, 26 Aug 2021 10:00:00 +0000 #22 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">A set of free webtools for your daily usage</a></p> <p>50+ CSS, HTML and JS tools and more coming in the future!</p> <p>Now half of my bookmarks can be replaced! Just kidding, but this is very useful.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">Fast, in memory work queue</a></p> <p>A simple but powerful module that allows you to run a worker (task) with parallelism.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">Stay Alert</a></p> <p>A post by Rich Harris, the creator of Svelte, about Chrome&rsquo;s recent change and reversal of some functions inside iframes. His posts about the web are always a hit.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">HonKit</a></p> <p>Building beautiful books using Markdown. The results are pretty great!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">Complex vs. complicated</a></p> <p>Would you rather work with a complex system or a complicated system?</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">Migração de 600 aulas do Vimeo em 3h (com Node.js)</a></p> <p>O Vimeo bloqueou vários vídeos gratuitos da Rocketseat e eles tiveram de migrar mais de 600 aulas para uma nova plataforma utilizando um script automatizado com Node.js utilizando recursos de stream e fila em paralelo. Uma ótima demonstração de problem-solving e uso de tecnologia.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">Descomplicando o Docker</a></p> <p>Um livro open-source com conteúdos que abordam do nível iniciante ao avançado sobre Docker. Está disponível em forma de <a href=";utm_medium=email&amp;utm_campaign=newsletter-22" target="_blank">site</a> (construído com o HonKit).</p> </li> </ul> Thu, 19 Aug 2021 10:00:00 +0000 #21 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">How I Built a Cross-Platform Desktop Application</a></p> <p>I shared Tauri back in <a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">#5</a>. In this post, Lukeed shares his experience building a desktop app with Tauri, Redis and Svelte Kit. His thought-process is very interesting and the result was a great tool. If you just want to see the result, the project is <a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">open-source</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">Creating an accessible autocomplete experience</a></p> <p>The team at Adobe shared their process of create an accessible and complex component. They mention problems, solutions and the packages resulted of months of research and development put into the project.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">Service Workies</a></p> <p>Play a beautiful game while learning about Service Workers. I completed yesterday and enjoyed it a lot. Honestly, I had some issues with Workers not unregistering properly between the scenes of the game/course, which required some refreshes but it was great overall.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">WebGL2 powered geospatial visualization layers</a></p> <p>I&rsquo;m always blown-away with some demos of WebGL and Geospatial data. This library enables this kind of visualization and has bindings for JavaScript and Python.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">As Leis de Lehman</a></p> <p>As “Leis de Lehman” descrevem e ajudam a entender o sensível equilíbrio entre as motivações para a evolução de um software, pela adição de novas features, e as causas para o aumento do lead time para atender demandas do negócio ao longo do tempo.</p> </li> <li> <p><a href=";pp=sAQA&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-21" target="_blank">Infra como código (IaC) com Terraform: O que um dev precisa saber</a></p> <p>Este vídeo traz uma visão geral do contexto de como grandes empresas conseguem automatizar seus ambientes através de código (IaC) e também verá na prática o Terraform em ação criando um cluster Kubernetes em minutos de forma automática.</p> </li> </ul> Thu, 05 Aug 2021 10:00:00 +0000 #20 <h2>Links</h2> <ul> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Analysing the results of cheap apps</a></p> <p>Jonny Burger from <a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Remotion</a> ordered the same app paying different prices ($10, $50 and $100) and analysed the results with <a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">William Candillon</a>. I found the experiment quite interesting.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">react-force-graph</a></p> <p>React components to represent a graph data structure in a 2 or 3-dimensional space using a force-directed iterative layout.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Extendable version manager</a></p> <p>With support for Ruby, Node.js, Elixir, Erlang &amp; more</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Write once, animate everywhere</a></p> <p>The React Native (+ Web) animation library, powered by <a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Reanimated 2</a>.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank">Semana Full Stack Sem Custo</a></p> <p>O pessoal da <a href=";utm_medium=email&amp;utm_campaign=newsletter-20" target="_blank"></a> vai liberar novamente os vídeos do evento que aconteceu em Abril. Não percam esta oportunidade!</p> </li> </ul> Thu, 29 Jul 2021 10:00:00 +0000 #19 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">bat - A cat(1) clone with wings</a></p> <p>A better <code>cat</code> command with syntax highlighting and Git integration. Written in <a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Rust</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Friendly Machine Learning for the Web</a></p> <p>ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of <a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">TensorFlow.js</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Typed-Emitter</a></p> <p>The native <code>EventEmitter</code> doesn&rsquo;t support strict TypeScript types and this library adds this feature. Very useful if you care about types.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Tiny 200-byte functional event emitter / pubsub</a></p> <p>An alternative to the native <code>EventEmitter</code>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">The Open Source Airtable alternative</a></p> <p>Turns any MySQL, PostgreSQL, SQL Server, SQLite &amp; MariaDB into a smart spreadsheet.</p> <p>You can <a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">deploy it to Heroku</a> to test it out for free.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">JS is Weird</a></p> <p>A quiz with 25 quirky expressions to guess the output. Most of this syntax is probably, and hopefully, not something you use in your daily life.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Top 5 BEST games to code as a beginner</a></p> <p>Regardless of your experience, this blog post should help you along your way into starting out with some game development, or at the very least motivate you to give it a go.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";ab_channel=ErickWendel&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Conheça as Streams do Node.js</a></p> <p>O Erick Wendel lançou um novo vídeo sobre Streams, mostrando várias utilidades e cenários diferentes.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-19" target="_blank">Desenvolvedor Web em Toronto, Canadá</a></p> <p>Muitos brasileiros têm o sonho de sair do país e morar no Canadá. Este episódio do Carreira sem Fronteiras, um dos meus podcasts favoritos, conta a história de um deles e pode servir de inspiração para você. Spoiler: ele está procurando outros brasileiros para levar ao Canadá.</p> </li> </ul> Thu, 22 Jul 2021 18:58:47 +0000 #18 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">handsfree.js</a></p> <p>Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">StaticShield - Password protect a website in less than 2 mins</a></p> <p>This project is very simple to use and can be integrated into static sites and many frameworks.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">WebSocket cat</a></p> <p>A tool to test WebSocket connections in the terminal.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">I made my first mobile game and here is what I&rsquo;ve learned</a></p> <p>A good write-up with some non-game related things that are very important to a game - or any other project actually.</p> <p>Have you ever built a game? Reply with a link if you did. I&rsquo;m working on a simple game to practice WebSockets and some other things. 🙃</p> </li> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Git Graph</a></p> <p>A VSCode extension to see the commit tree as a graph, helpful for complex Git operations. It&rsquo;s similar to GitKraken and others but inside VSCode.</p> <p>I found out about it in this blog post about <a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Git-related VSCode extensions</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Dump anonymized PostgreSQL database with a NodeJS CLI</a></p> <p>Sometimes it&rsquo;s useful to have an exact copy of a production database but without the data that identifies a user. This CLI tool aims to help with that.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Client/server side PDF printing in pure JavaScript</a></p> <p>The lib has a lot of utilities to dealing with things like tables, QR code and SVGs. You can find a lot of examples with code and output in the repository.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">npm audit: Broken by Design</a></p> <p>A deep look into how <code>npm audit</code> works and the big amount of false positives we see when working with Node.js dependencies. For some big projects out there, these have become a burden since the first <code>npm install</code> is a bit scary for beginners.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">VSCode Surround</a></p> <p>A simple yet powerful extension to add wrapper templates around your code blocks. This is so good - you can quickly wrap your code in a try/catch block or a loop.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">150+ free high-quality illustrations</a></p> <p>This collection has a HUGE <a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">undraw</a> vibe. I liked the with and without mask variations. 😂</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">The next generation web framework for Cloudflare Workers</a></p> <p>A collection of modules with utilities to deal with <a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Cloudflare Workers</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Fully-local Cloudflare Workers Simulator</a></p> <p>A simulator for developing and testing <a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Cloudflare Workers</a>. It&rsquo;s an alternative to <code>wrangler dev</code>, written in TypeScript, that runs your workers in a sandbox implementing Workers&rsquo; runtime APIs.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">O maior evento de Acessibilidade Digital do Brasil</a></p> <p>Em sua 4ª edição, o Link 2021 vai acontecer nos dias 9 a 12 de agosto de 2021, com conteúdos voltados à tecnologia, comunicação e diversidade, especialistas e personalidades discutirão o futuro da acessibilidade digital nas organizações e no mundo.</p> </li> <li> <p><a href=";ab_channel=Rocketseat&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-18" target="_blank">Podcast Alumni #29</a></p> <p>A história de Lucas Thomaz Ribeiro, que trilhou uma jornada incrível como atleta profissional e hoje atua como dev full-stack da ZUP. Ele conta como a trajetória na seleção brasileira de vôlei motivou seu foco, resiliência e disciplina e como aplicar isso na programação.</p> </li> </ul> Thu, 15 Jul 2021 10:00:00 +0000 #17 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Evans: more expressive universal gRPC client</a></p> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">gRPC</a> is widely used for communicating between microservices instead of REST and I&rsquo;ve been learning about it recently and this tool has been pretty helpful during manual tests - especially with autocomplete and the interactive prompt.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Jimp - Image processing library with no dependencies</a></p> <p>Jimp stands for JavaScript Image Manipulation Program. It can do things like blur, flip and resize.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Your AI pair programmer</a></p> <p>Late to the party, I bring GitHub Copilot. I&rsquo;m a happy <a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">TabNine</a> user and I got access to Copilot yesterday. I&rsquo;ll try to test it and share my thoughts!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Twoslash - Super-powering Markdown</a></p> <p>I came up with the headline above haha. But really, this tool is amazing! It mixes <a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Shiki</a> - a syntax highlighter - with the TypeScript compiler to generate incredible static code samples.</p> <p>Check out <a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">their documentation</a> for some great examples.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Windy</a></p> <p>A React UI Kit based on <a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Tailwind CSS</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Vechai UI</a></p> <p>As DJ Khaled would say: Another one! Vechai UI is a collection of accessible React UI components with the built-in dark theme using <a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">Tailwind CSS</a>.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-17" target="_blank">O Princípio de Peter</a></p> <p>Episódio muito bom e engraçado. Me digam o que acham desse Princípio depois de ouvir.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Imersão React</a></p> <p>Mais uma semana de conteúdo gratuito vai acontecer na próxima semana. Este evento será realizado pelo pessoal da <a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Alura</a>. Compartilhem com quem quer entrar no mundo do React.</p> </li> </ul> Thu, 08 Jul 2021 15:48:35 +0000 #16 <h2>Links</h2> <ul> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Advanced patterns for Progressive Web Apps</a></p> <p>Learn advanced PWA recipes that combine several modern web APIs using <a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Workbox</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">PostGraphile - Instant GraphQL API from a PostgreSQL database</a></p> <p>With one command, we can bootstrap a GraphQL API by pointing to a database. Pretty neat tool!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">React Query Devtools Flipper plugin</a></p> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">react-query</a> is awesome and this Flipper plugin enables debugging it in React Native.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Developer-friendly, open-source session replay</a></p> <p>A session replay stack that lets you see what users do on your web app, helping you troubleshoot issues faster. It&rsquo;s the only open-source alternative to products such as FullStory and LogRocket.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Python in a Box</a></p> <p>Interactive online Python REPL in 30 lines of JavaScript.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Imersão FullCycle 3.0</a></p> <p>O pessoal da <a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Code Education</a> fará mais um evento gratuito. Dentre as tecnologias abordadas estão Nest.js, Apache Kafka e Golang. Vale a pena participar se você tem interesse por back-end e arquitetura orientada a eventos.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Imersão React</a></p> <p>Mais uma semana de conteúdo gratuito vai acontecer na segunda semana de Julho. Este evento será realizado pelo pessoal da <a href=";utm_medium=email&amp;utm_campaign=newsletter-16" target="_blank">Alura</a>. Compartilhem com quem quer entrar no mundo do React.</p> </li> </ul> Thu, 01 Jul 2021 10:00:00 +0000 #15 <h2>Intro</h2> <p>I&rsquo;m going into a short vacation (one week), so probably there won&rsquo;t be an edition next week.</p> <p>See you in two weeks!</p> <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">GraphQL Made Easy for Spring Boot</a></p> <p>I&rsquo;ve been learning Java veeeery slowly and recently bumped into the DGS Framework (Domain Graph Service), made by Netflix. It&rsquo;s a GraphQL server framework for Spring Boot and comes with the whole thing: annotations, data loaders, subscriptions (Web Sockets).</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">File System Access API with legacy fallback in the browser</a></p> <p>This library allows to easily use the <a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">File System Access API</a> on supporting browsers, with a transparent fallback to legacy methods. This library is a <a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">ponyfill</a>.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">Ship Weird</a></p> <p>Don&rsquo;t seek the perfect API. The browsers have weird APIs, why can&rsquo;t we? :p</p> <p>But really, aim for a good one, not the perfect one.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">The perfect link</a></p> <p>Dive into the world of creating the perfect link, without making a pig’s breakfast of it</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">NLW/Together</a></p> <p>Na próxima semana, vai rolar outro evento gratuito da Rocketseat. Uma ótima oportunidade para aprender coisas novas ou iniciar em desenvolvimento. Não percam!</p> </li> <li> <p><a href=";ab_channel=EximiaCo&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-15" target="_blank">Dispositivos conectados e inteligentes estão revolucionando a competição</a></p> <p>&ldquo;A transformação digital tem modificado não apenas a forma como as empresas operam, mas, principalmente, os produtos que elas oferecem ao mercado.&rdquo;</p> <p>Mais um episódio interessante do Tech &amp; Biz com Elemar Jr.</p> </li> </ul> Thu, 17 Jun 2021 11:17:58 +0000 #14 <h2>Intro</h2> <p>I was super busy last week and I couldn&rsquo;t publish a edition of this newsletter - sorry about that!</p> <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">The Plan for React 18</a></p> <p>The news of the week is the announcement of the plan for React 18 and its first alpha release. There are some nice things coming in the next major version but it will take some time for a stable release too.</p> <p>There is a good summary of the alpha release at &ldquo;<a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">React 18 Alpha is out! Now what?</a>&rdquo;.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14#/" target="_blank">Collection of free services</a></p> <p>A huge and well-organized list of different services with good free tiers.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">Learn CSS</a></p> <p>An evergreen CSS course and reference to level up your web styling expertise. The course breaks down the fundamentals of CSS into digestible, easy to understand pieces.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">Debug in-production Electron based app</a></p> <p>It is also built with Electron! Recently, I had to debug an issue in the built version and this was super helpful. I added some <code>console.log</code>s to the app (I know, I know 😄) and through this app, I was able to verify which messages were logged.</p> <p>PS: I plan to take a look at how far I can go debugging other Electron apps such as VSCode, Spotify, MS Teams and Discord to see if I notice something interesting in them. 👀</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">Design for reading: tips for optimizing content for Reader modes and reading apps</a></p> <p>A great write-up by <a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">Sara Soueidan</a> about focusing on experience over styles and improving the experience by leveraging HTML and CSS only.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">Interactive Pipe To: The Node.js cli interactive workflow</a></p> <p>It takes any kind of list as an input and uses that list to build an interactive interface to let you select an element from it. You can then pipe the selected items into other commands.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">A modular geospatial engine written in JavaScript</a></p> <p>It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">A parable about startups and tech stacks</a></p> <p>A short story about a young man who wants to fulfill his dreams.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">This person does not exist</a></p> <p>A website with random faces made using AI. They look very real. 🤯</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-14" target="_blank">5 dicas do Trello pouco conhecidas para turbinar seus quadros</a></p> <p>Faz um tempo que não uso o Trello, mas continuo acompanhando as novidades de produto e o blog deles. Se você usa ou pensa em usar o Trello, as dicas do post podem ser úteis.</p> </li> </ul> Thu, 10 Jun 2021 10:00:00 +0000 #13 <h2>Links</h2> <ul> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">5 tips for your PWA</a></p> <p>Progressive Web Apps have evolved a lot in the last few years and this video contains 5 tips about improving and measuring your PWA. It uses <a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Squoosh</a> for the examples.</p> </li> <li> <p><a href=";utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Love, Death &amp; React</a></p> <p>I started to watch <a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Love, Death &amp; Robots</a> a few hours before this video dropped, what a coincidence! Btw, the show has been great so far!</p> <p>Back to the video, it&rsquo;s about <a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Remotion</a> and how you can use it to build amazing motion graphics using React.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">SkinDeep</a></p> <p>A project to remove tattoos from photos and images. The images and videos in the README are mind-blowing!</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">1Log</a></p> <p>Log function with superpowers.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">page-with</a></p> <p>A library for usage example-driven in-browser testing of your own libraries.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Learn Recoil 100% free</a></p> <p>&ldquo;Recoil is an incredibly powerful state management tool that you can use to build performant, complex React apps&rdquo;. I have yet to have a look at it but here&rsquo;s a free course on the topic.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Open UI</a></p> <p>&ldquo;The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as <code>&lt;select&gt;</code> dropdowns, checkboxes, radio buttons, and date/color pickers&rdquo;. I need to dig into it a bit more but I liked the idea.</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">VTEX lança programa com 10 mil bolsas para formar desenvolvedores</a></p> <p>O objetivo do programa é desenvolver profissionais em início de carreira, mas que já entendam de lógica e programação. Os selecionados terão dois meses e meio de aulas online e mentoria com profissionais do mercado de e-commerce.</p> </li> <li> <p><a href=";ab_channel=FelipeFialho&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-13" target="_blank">Collapse com HTML e CSS em 5min!</a></p> <p>Já precisou implementar um accordion? Recorreu a alguma lib, criou um componente acessível? Há muitas questões envolvidas nesse componente, que parece simples.</p> <p>Você sabia que o HTML tem uma tag que pode ajudar bastante na hora de implementar este componente? O vídeo acima faz uma apresentação com demo bem rápida e útil.</p> </li> </ul> Thu, 27 May 2021 10:00:00 +0000 #12 <h2>Links</h2> <ul> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Guide to creating animations that spark joy with Framer Motion</a></p> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Framer Motion</a> is an awesome library for animations. I&rsquo;ve been playing with it for a while and the post above taught me a lot - about the library and animations when I was starting.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Advanced animation patterns with Framer Motion</a></p> <p>From the same author as the previous article, here&rsquo;s an advanced guide on Framer Motion.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">HSL Colors Explained: What they are and when to use them in Dart/Flutter</a></p> <p>If you&rsquo;re not familiar with HSL, like I am, this blog post explains it very well! You can skip the Dart/Flutter usage if you&rsquo;re not interested in that - it&rsquo;s a separate part of the post.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">React Native Upgrade Helper</a></p> <p>It&rsquo;s sometimes (usually?) tricky to update the RN version of an app. RN is not stable, so there may be breaking changes between versions. This tool aims to help on the task.</p> </li> <li> <p><a href=";ab_channel=GoogleChromeDevelopers&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Thinking on ways to solve a MEDIA SCROLLER</a></p> <p>Adam Argyle shares thinking on ways to create inline scrolling experiences for the web that are minimal, responsive, accessible and work across browsers and platforms (like TVs!).</p> </li> </ul> <h2>🇧🇷 Em Português</h2> <ul> <li> <p><a href=";ab_channel=EximiaCo&amp;utm_source=arthurdenner&amp;utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Criatividade Cibernética</a></p> <p>Mais um vídeo incrível do Elemar Jr. falando sobre tecnologia e sua evolução.</p> </li> <li> <p><a href=";utm_medium=email&amp;utm_campaign=newsletter-12" target="_blank">Novo podcast da BrazilJS</a></p> <p>O pessoal da BrazilJS, que já recomendei em edições anteriores, (re)iniciou o podcast deles.</p> </li> </ul> Thu, 20 May 2021 10:00:00 +0000