This is a list of the articles that I've posted over the years. Since early 2019, I have been trying to post a new article every 10 days, but as you know, sometimes other things take precedence (which is a subtle way of saying that I'm lazy). I tend to write from personal experience, both from the mistakes of the past and the things I've learned while working in multiple projects.
There are a million articles out there focusing on how you can make your app faster by removing unnecessary re-renders & preventing unneeded component updates , but none of them talks about the one necessary render: the initial mount."
In an app that I’ve recently worked on, I had to interact with 2 different APIs; a typical JSON-based API from a django project, as well as a “real-time API” which was coming directly from Firebase. What I wanted is to have a unified way of querying & storing my data, without having to differentiate my approach based on where the data comes from. In this article we’ll implement just that.
I recently had to implement a multi-language static website, so I thought Gatsby would be a fun choice; surely people have a lot of guides out there on how to do it. Turns out, implementing it the naive way is easy, but if you want to minify manual work and streamline translations through automated processes, things can get hard. In this article, I’ll be attempting to showcase the problems that I’ve faced, the solutions that I ended up using and the benefits of each approach.
Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them
In this article I'm going to present to you a way of handling your API errors once and for all in a centralized and easily extendable way, regardless of the state-management library (Redux, Apollo, etc.) that you are using.
In this article I’ll attempt to share a few tips & optimization tricks that you should consider when aiming to minimize the footprint of your React app. I’m confident that after reading this article you will be able to reduce your bundle size by at least 5–10%, since I’ll start with conventional tips and move on to edge-case micro-optimizations. I also want to point out that most of the things that I’ll go through are not React specific, but apply to all JS apps that are built using Webpack.
Ever wondered why GatsbyJS is so popular? Well, part of it is due to the awesome way it helps you handle your images. With Gatsby, you can free up your designer's time and be more productive with image manipulations as code...
At first, these two (2) terms mind sound irrelevant to one another. After all UX (User Experience) is a different specialty and can’t be directly related to engineering, or can it?
In this article I’ll attempt to demystify all you’ll need to know when developing a Chrome Extension. I’m positive that after reading this article, you’ll be able to easily develop your own extension without too much trouble
This article will capitalise on the trend of custom hooks, in order to draw a line between React & external services with regards to the ways they communicate with one another. In other words, do your React components really need to know that you are using Amplify?
Although the title seems clickbaity, in this article I’ll be talking about how you can use CSS to replace some of your JavaScript code in order to make your React apps more responsive
React is fast, but for some reason your app feels slow. It doesn’t feel as smooth as it should given the fact that you are using “React”, and you can’t easily get your head around what’s causing it. In this article I’ll try and help you with situations like these, by giving you a list of steps to go through when you want to identify performance issues in a React app.
react-redux@7.1.0 has been released and with it a whole new set of hooks that could potentially change the way you write your redux in your React apps. In this article I will give you some insight in why it took that long to release, what the API is, and finally my thoughts on migrating to hooks.
The observer API has landed for some time now and is fully supported by all modern browsers. I questioned myself “Could I replace my scroll listeners with Intersection Observers? How cheaper and performance friendlier would it be”? Well this article attempts to answer just that.
React can be seen both as a UI library, as well as a State-and-UI management library. But is this scalable? This article emphasizes on the benefits of the actor model in large scale React apps
In my previous article I went through some core concepts of performance optimisation in React apps. This article will extend these concepts by focusing on practices which will make sure that the introduction of Redux into your project is not causing any perf bottlenecks as your app grows.
In this article I will try and list out a few easy ways to achieve better performance in your React app through simple development hacks
I always believed that analogies are a great way to understand something. Whenever I was trying to actually get my head around a certain concept, I was always trying to find the right analogy for it. Well guess what happened...
This is Part 2 of a series that will explore debugging of a front-end Javascript application. In the previous part we talked about Source breakpoints and in this article we will be focusing on the DOM and in particular how you can get the most out of the Elements tab.
This is Part 1 of a series that will explore debugging of a front-end Javascript application. Debugging can be reduced down to proper knowledge of the developer tools that each browser offers. In this article we will be focusing on Chrome developer tools and in particular how you can get the most out of the Sources tab, by focusing only on the most commonly used tools .
One of the most frustrating things i recently faced was trying to setup a custom semantic UI theme with Webpack. The end goal was to be able to create a theme configuration that would extend Semantic’s defaults, while changing some variables that the outputted semantic .css files depend upon
Much has been said about Webpack but I constantly come across people who are unaware, not only of its existence but of its actual purpose as well. In this article I’ll try and explain to you why Webpack exists, why is it needed and how can you benefit from integrating it with your project.
This is a list of the podcasts that I've recently started working on. I know it's not a list if it's only one, but more is coming. The main topics I tend to discuss about are tips for large scale projects using React & Redux.
The panel discusses the most common problems in react that cause poor performance. Aggelos gives a lot of advice on how to fix or avoid these problems and how to optimize performance. The panel discusses using CSS to optimize performance. The new React API’s are discussed and their effect on performance. The episode finishes with techniques for using redux.
