Articles

Here are radical ways of optimizing SVG patterns so that they contain as little code as possible without affecting the overall image quality.

In 2021 I created a simple, short, unique SVG pattern each week on CodePen. Let's reflect on not only the good ones but the bad ones as well, and more importantly think about what made them so. Looking into failures is harder but has much more learning potential, so let's get into it!

Computer generated graphics are a pretty important part of the web. You can do a lot with CSS but you can't really do anything that looks natural or randomized, CSS simply doesn't provide the tools for that. SVG on the other hand has the filter which is a Perlin-noise generator. Explore its possibilities through the patterns and textures I made over half a year.

For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce new complexities. I know now that a good portion of these problems could be solved with a few lines of SVG.

Asking questions is a pretty important thing to do in software teams (most likely in any kinds of teams). So if you are ever pondering whether you should ask a question or not, rather ask away! Okay, maybe it's not always that simple because many factors come to play. But worry not, I put together a list of tips that could help you manage these factors and make you an effective asker!

Most people in the software industry rarely have to speak in front of a public audience. Let that audience be a meetup, the company you work at or your immediate team. However, sometimes you find yourself being assigned to do a presentation. If some sort of anxiety is starting to kick in thinking about this task, read on, this is for you.

The Software Industry can be daunting: seemingly infinite amount of things to learn, hundreds and thousands of pieces of technologies, groundbreaking hardware innovations every year. It's all normal to have doubts and uncomfortable feelings when you are starting your journey in this industry. However as soon as you overcome the hardship of beginning something new, things get a bit easier.

Side projects are a good way to enhance your programming skills and broaden your experience. You can learn a ton of things with usually no restrictions on what language, IDE, technology, etc. to use. I just launched my new side project: hypevizz.com, a data visualization blog built on Firebase, and I would like to share some pieces of it.

TeamTrees is an initiative to fight global warming by planting 20 million trees around the globe. It was started by youtuber MrBeast, former NASA engineer Mark Rober, and hundreds of others from the youtuber community. It was announced on Oct 25, 2019 by MrBeast in his video celebrating 20 million subscribers on his channel. The goal was to raise 20 million U.S. dollars to plant 20 million trees by the end of 2019, and it was met around two weeks before the target date, thanks to the more than half million individual donations.

Ever needed a grayscale color palette for different surfaces, shadows, or states in your web app? I created a little utility to generate such palette.

Imagine you have to find a color that looks good both on black and white. By "looking good" I mean conforming at least WCAG AA Contrast (Minimum), which is a ratio of 4.5:1.

There are some great features on CodePen that are not widely known. This post explains some of them and these are for every user (no PRO subscription needed)!

A not so surprising use-case of CSS variables is theming apps. Think of Twitter for example where you can specify the color of your profile. This color and its shades appear on many elements: links, buttons, borders, highlights, etc. When you customize your profile, you only have to specify one color, the rest is magically taken care of. I like the simplicity and ease of use of this concept, and I wanted something similar when I started thinking about making Pure CSS Material Components themeable.

Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. "Pure CSS" demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. In this article, I will walk through the key ideas of a Pure CSS Connect 4 game I built. I tried to avoid hardcoding as much as I could in my experiment and worked without preprocessors to focus on keeping the resulting code short.

This post describes how a simplified ripple effect can be achieved with minimal CSS and without using pseudo elements. If you are interested in enhancing the UX of your web app a little bit with close to zero effort keep reading!