Photo by Pawel Czerwinski on Unsplash I’ve recently started working with Vue 3 and Nuxt 3 so I had to figure out how to get proper development experience in my favorite editor - Vim. Yes, I could have switched to VSCode or any other modern editor / IDE, but it is hard for me. I am one of those folks who learned Vim early in his career and now I have Vim syndrome - in every editor I go to, I try to make it like home (Vim). Before, I worked mostly with React and TypeScript, and I have a popular post on how to configure TypeScript in Vim. In my current work, the TypeScript stayed but I switched ..read more

Photo by Everaldo Coelho on Unsplash If you are into web development, you must have come across the term “Lighthouse score”. It is a unanimous way of measuring how well the website performs in the wild. To measure the Lighthouse score, you can use Lighthouse. Lighthouse is an open-source tool that monitors and measures your website’s performance, quality, and correctness. Lighthouse lets you to start quickly and measure your website directly in the browsers. Some teams and companies run Lighthouse on each change/push. That is where Lighthouse CI (LHCI) steps in. LHCI helps you run Lighthouse ..read more

This blog post was coauthored with my coworker, Jelena Keravica. Thanks for collaborating back in the day. Introduction With AWS Elastic Beanstalk, you can quickly deploy and manage applications in the AWS cloud without having to worry about the infrastructure that supports those applications. AWS Elastic Beanstalk automatically handles all the details of capacity provisioning, load balancing, scaling, and application health monitoring. This article will explain how to set up continuous deployment for your Rails application on Elastic Beanstalk using Semaphore. First, we will initialize an e ..read more

Photo by Austin Neill on Unsplash If you’re wondering how to run multiple processes in your project, look no further. You came to the perfect place where you’ll learn how to quickly and effectively run all the services your project needs. Forget about opening multiple tabs in your terminal and typing out several commands. Today, you’ll harness the power of running everything with a single command. The Procfile Welcome to the Procfile file - a place where all your project’s services are defined. The Procfile is a place where you define one or more processes to be run in order for your app to f ..read more

Photo by Thalia Ruiz on Unsplash In today’s interconnected digital landscape, file uploads have become essential to creating web applications. Whether you’re building a social media platform, an e-commerce site, or a collaborative document editing tool, enabling users to upload files seamlessly is crucial. Angular has been around since 2010, and according to the State of JS research, it is still the second most popular front-end framework. However, you can often take time and effort to implement a reliable and user-friendly file upload functionality with Angular. Fortunately, with the collabo ..read more

Photo by Daria Nepriakhina on Unsplash React is one of the popular tools for building user interfaces and is a skill worth knowing. If you’re building something with React, you will face the challenge of uploading files sooner or later. Do not worry; writing a file-uploading logic in React is straightforward, and this post will show you exactly how to do it. We’ll cover how to upload a single file, upload multiple files, and see how you can use a 3rd party library that does the heavy lifting for you. But first, let’s dive into uploading a single file in React with fetch. Uploading a single fi ..read more

To err is human. It happens all the time. If we don’t account for errors on our websites, then our users will get an awful browsing experience. That’s why it is better to plan for errors. In today’s post, we’ll go through different ways of handling errors in Preact applications. Let’s get going! Catching Rendering Errors in Preact Since Preact is a lightweight React alternative, similar rules to the React world also apply here. You can’t use the classic try...catch method of resolving errors while rendering because it’s meant to handle imperative code. But what is a typical rendering error, yo ..read more

We’re excited to announce Design System Automation by Anima, which automatically turns your Storybook into a native Figma library, then keeps it continuously synced with any code updates. The generated Figma components include variants, Auto Layout parameters, Figma Styles, and actual code from Storybook. Designers can build flows with the same components developers will use to build the product. Developers get designs containing the exact components they have in the code, along with names, props, Storybook links, and their own code references. That makes handoff and implementation a breeze ..read more

For some time now, Jamstack has asserted itself in the space for creating modern websites. The name Jamstack comes from the “JAMstack,” where “JAM” stands for Javascript, APIs, and Markdown. In practice, you can build a website that can easily combine all your content channels and serve it as a lightning-fast website that visitors will enjoy. But there’s more to it. Let’s dive in and find out more. What is Jamstack? To better understand Jamstack, we can compare it to traditional website architectures, where the content (backend) and user interface (frontend) are tightly coupled. When a user v ..read more

Wanna launch your React app fast and easy, with the option to scale? These serverless hosting solutions can help you go live in a jiffy, deploy updates on a dime, and slash the cost of delivering your app to users. So you built a React app, but you’re not sure how or where to host it. In this article, we’ll walk you through 8 free React app hosting services, show you how we deployed this React app using each one, and tell you what we learned in the process. We built our app in Figma using the Anima plugin, which allowed us to add functionality, insert live, customizable React components from ..read more