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! 😊
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. 🌟
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 🥲
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 😊
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.
A video transcoder and converter built using Web Assembly and FFMPEG to transcode and convert videos right in your browser while protecting your privacy.
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.
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.
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!
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.
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.
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.
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.****
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.
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.
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.
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 🥲
Mermaid is a JavaScript-based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser.
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).
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.
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.
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.
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.
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.
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.
I've just started to test this app. I'm a happy user of Beekeeper Studio but TablePlus looks solid too, seems to have more features and supports more databases too.
Easily map out which open source & SaaS solutions are being used across your engineering teams, why they’re being used, and who someone should talk to about each technology.
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.
Share your thoughts on this. I appreciate some insight that I may be missing out.
A post by Rich Harris, the creator of Svelte, about Chrome's recent change and reversal of some functions inside iframes. His posts about the web are always a hit.
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.
Um livro open-source com conteúdos que abordam do nível iniciante ao avançado sobre Docker. Está disponível em forma de site (construído com o HonKit).
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 TensorFlow.js.
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.
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á.
Sometimes it'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.
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.
A deep look into how npm audit 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 npm install is a bit scary for beginners.
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.
A simulator for developing and testing Cloudflare Workers. It's an alternative to wrangler dev, written in TypeScript, that runs your workers in a sandbox implementing Workers' runtime APIs.
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.
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.
A session replay stack that lets you see what users do on your web app, helping you troubleshoot issues faster. It's the only open-source alternative to products such as FullStory and LogRocket.
O pessoal da Code Education 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.
Mais uma semana de conteúdo gratuito vai acontecer na segunda semana de Julho. Este evento será realizado pelo pessoal da Alura. Compartilhem com quem quer entrar no mundo do React.
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.
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.
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 console.logs to the app (I know, I know 😄) and through this app, I was able to verify which messages were logged.
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. 👀
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.
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 Squoosh for the examples.
"Recoil is an incredibly powerful state management tool that you can use to build performant, complex React apps". I have yet to have a look at it but here's a free course on the topic.
"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 <select> dropdowns, checkboxes, radio buttons, and date/color pickers". I need to dig into it a bit more but I liked the idea.
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.
Já precisou implementar um accordion? Recorreu a alguma lib, criou um componente acessível? Há muitas questões envolvidas nesse componente, que parece simples.
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.
Framer Motion is an awesome library for animations. I'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.
If you're not familiar with HSL, like I am, this blog post explains it very well! You can skip the Dart/Flutter usage if you're not interested in that - it's a separate part of the post.
It'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.
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!).
Machine Learning is much more accessible nowadays and this tutorial shows it by teaching us how to use a ML with TensorFlow.js in a Chrome extension... 🤯
I've seen some introductions to WebAssembly and Rust but nothing close to this video. It's really good as it brings a real use case, uses libraries and different approaches with some refactoring. If you're interested in learning a bit about this topic, make sure to watch it.
I like Design Patterns although I don't use them often (mostly working with JS on the front-end). This one is pretty nice and it's worth a read as we can probably use a similar strategy anywhere.
The team behind the awesome Excalidraw released a product that extends the free tool. Have a look if you want to support the team or have more features, the pricing plan is quite good.
Not every tool in the JS ecosystem is written in the language itself. The listed tools in the link don't have a "big piece of the market" right now, but they will likely evolve and grow in usage in the next years, so keep an eye on them.
Have you ever implemented retries on HTTP requests? It doesn't seem like a common thing to do but it's definitely valuable for some cases. This tutorial teach us how to implement in two different simple ways, that we can adopt to our needs.
A post about how simple it is to create a proxy server that intercepts requests.
Unfortunately, I didn't find a way to see the server in action locally by running Chrome from the terminal on Mac. Let me know if you know how to do that!
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.
The React team has created a video series featuring technical deep dives on React. At the time of writing, there's one for React Server Components - and I liked it.
Jason, who I admire a lot, wrote on how honest feedback is needed in our lives - in and outside of the job. It's hard to give honest feedback initially to we should try as it gets easier with time and helps much more in the long-term relationship.
WebAssembly is quite interesting and it's present in apps like Figma, Squoosh and MongoDB Compass but there's a learning curve for it. This video gives an introduction to AssemblyScript, which aims to lower this barrier.
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 getting stressed with looking into tests recently, expect the next week's edition to have some links on the topic 😉
