Hey, I'm Rares Portan

I'm a web developer & designer living in Timisoara, Romania 🇷🇴. I prefer to code in JavaScript and I love simple and fast software 🚀.

How to Contribute to Open Source

The company I work for, 3PillarGlobal , had a proposal for us: we can allocate a part of our time to work on open source. Each one can…

Using Xstate with React

For a long time, Redux was the way to do state management in a React app. Bases on the Flux architecture, popularized by Facebook, it…

A Short Introduction to Xstate

Welcome my son, welcome to the machine - Pink Floyd Everything that's interactive needs some state. All apps have state, web pages with…

Migrate to Gatsby V3

I decided to migrate this website to Gatsby 3 and write here how it went. The first question is of course "Why you did it?" The main…

How to Reduce Website HTTP Requests for Images

Images are an important part of any website. So important that we tend to use a lot of them. And then our websites become too slow. Using…

How to Implement a Simple React Playground

The playground has two parts: The code editor: Allows us to enter the React code we want to evaluate The code evaluation sandbox: Evaluates…

How to Make a Code Editor with Codemirror 6

These days hands-on, in the browser, programming language tutorials are the standard. They all provide some kind of code editor. People…

On Software Design

There are always the questions of design: How much design is needed? What is important to design? How do we communicate the design to…

The <Link> Element

The < link > element is used to load an external resource in the HTML. Link elements are part of the page metadata and not inside the…

The Future of Code Is No Code

The future of coding is no coding at all." - Chris Wanstrath, CEO at GitHub. Coding is my bread and butter, so what this means? Am I…

Make the Code Efficient

One quote that I hear a lot is this one: “Premature optimization is the root of all evil.” I hate that quote because is used by people as…

Html Basics - Part I

Looks to me that many web developers, especially "full-stack web developers," are not sure what is the correct HTML for a webpage and use…

How to Make Some Money with a Simple Metadata

While doing some research for an upcoming post, I've noticed several people added a strange metadata on their website. A metadata named…

Software Feedback Kits

There are times in every programmer's life when they must implement things that are hard to explain, hard to put down on paper, things that…

Let's Learn Eleventy (11ty) - Part IV

In the first part , the second part , and the third part parts we have seen: What is Eleventy and how to install it How to use data…

The <Picture> Tag

When Steve Jobs unveiled the iPhone in January 2007, few understood its implications on the web future. A couple of years later, millions…

Make Your Code Testable

There are two types of programmers: those who like to write tests and those who hate it. The hardest thing for me is always to convince one…

Cyberpunk 2077 Glitch Effect

Note: This post is about a motion intensive CSS animation. The examples will not work if prefers-reduced-motion is set to reduce…

How to Detect Object Changes in Javascript

Recently I've run into a frustrating issue: I worked with another team and we were supposed to exchange some objects between us. The…

Let's Learn Eleventy (11ty) - Part III

In the first part and the second part parts we have seen: What is Eleventy and how to install it How to use data inside a page Basic…

Five Easy Website Accessibility Tips

Lots of excellent talks at Inclusive Design 24 . Two of them, "Writing even more CSS with Accessibility in Mind" by Manuel Matuzovic and…

The Two Styles of Writing Code

What is programming fundamentally about? Programming is about transforming data: is the act of creating a sequence of computer instructions…

Let's Learn Eleventy - Part II

This is the second part of Let's Learn Eleventy series and will talk about collections. In the first part we have seen: What is Eleventy…

Let's Learn Eleventy - Part I

Eleventy is a static site generator like Jekyll , Hugo ,or Gatsby . Like Gatsby, Eleventy is a node.js application. But unlike Gatsby…

Functional Style Programming

The vast majority of us, programmers, use an OOP language like Java, C++, or C#. Very few are using a functional programming language like…

Make Me a Promise

Let's start with a short story. A girl asks his father: Daddy are there people in space right now? The father doesn't know but he…

Using Fetch

For years, the default way to call APIs from a web page was XMLHttpRequest. But working with XMLHttpRequest was not easy, so on top of it…

Building a Covid-19 Tracker

Here in Romania, every day, at 13:00, the latest COVID-19 data is communicated to the public. The data is presented as a series of cold…

Why There Is so Much Weak Software?

We have many great programming languages, IDEs, methodologies, excellent hardware, best practices, and so on, but still, a lot of weak…

How to Get 100 Website Performance Score

First, let's see what 100 website performance score means. A tool, called Lighthouse , can be used to measure website performance. The…

Server-Side Google Analytics

At Apple's WWDC this year, among the Safari improvements is a new feature that blocks the trackers on a website , and Google Analytics is…

How to Handle Future Blog Posts with Gatsby

I'm building this blog with Gatsby, as I've already explained . The blog is still in progress, and I'm adding new features -- like…

What Is an Application Programming Interface?

Lots of people have a rather vague or incorrect idea about what an API is. Some even think it is a kind of beer because it sounds like…

What Makes Good Code Good

There are things that make or break software, like good User Experience Design, marketing that should come up with the right features for…

How to Create an Npm Package

I’ve written some code that I thought might be useful to others, so I decided to share the code as NPM packages. I ended up creating two…

How to Automate Twitter Card Images for Your Blog

You work hard to create quality content. And you would like that content to stand out as it deserves. One thing that can help you with this…

10 Reasons Why You Are Not a Great Programmer

Let’s assume you are a programmer with a few problems: Hard to implement change requests, buried under bugs, missed deadlines, overtime…

Hello, World!

Turns out there is good side to this pandemic situation we all have to live with in 2020: I finally have time to start a blog. I'll write…