Forem: Szymon Sadowski

Holiday gift guide for the Developer in your life

Szymon Sadowski — Tue, 05 Dec 2023 17:55:44 +0000

It’s that time of the year again! Are you someone who loves to surprise that special someone in your life? If that special someone is a developer, you might find some ideas here that will help you check one thing off your list.

Learning

I know, I know, learning? It may sound a bit dull for a holiday gift, but there are some incredible courses and books out there that any programmer would be thrilled to receive!

I won’t cover every language or stack, assuming you know a bit about the person. Here, I’ll recommend things I’d love to get (if I didn’t have them already!).

For the book, I've chosen perhaps the best thing I've read this year ”Refactoring UI” it’s a great book that explains user interfaces in a way I haven't found elsewhere. I use it every time I start a new project to remind myself of the rules it lays out. It also explains why Tailwind is the way it is and how to implement good design on your own.
The course I recommend is focused on TypeScript—specifically, how to become a TypeScript Wizard..”Total Typescript” by Matt Pocock takes you on a beautiful journey, and by the end, you'll know more than most about TypeScript and how to use it. All presented in an easy-to-understand format with a beautiful graphical setting.

Gadgets

Now, onto the most interesting stuff! I love gadgets, and I think most tech enthusiasts do too. Here’s a short list that hopefully won’t disappoint:

Desk mats. Does the person you're thinking of have a worn-out mouse pad or one with stains from four years ago? It's time to change that. I recommend two beautifully designed mats: one made from leather from Orbitkey or If you more like felt Oakywoood makes really great ones.
Charger. In this age of multiple devices, we all hate wires, especially on our desks. To fix that*,* Satechi offers a great charger that can charge your phone, watch, and AirPods all at the same time.
Mouse. Does this person use free company mouse? Please help them. There is only one good choice here and it’s MX Master 3s
Stand for MacBook. If you see someone using stacks of books to hold their laptop, that's not good. Make it more ergonomic and safe by getting them this stand from Twelve South

Lightning

I am personally big fun of lighting. I think it can change the space you live in, work in etc. without spending big bucks.

Led Light Bars. Govee Smart Led Light Bars are a great choice for affordable LED lights to put on your monitor or desk. They work well with Alexa, Google, and the Govee app.
Led Stripe. YeeLight makes one of the cheapest led stripes that work out of the box with homekit which is imporant for some people. It is not the best led stripe out there but it brings really good value for money.
Led lamps. This lamps i first notice in one of MKBHD vidoes. They are great but they are made by Phillips Hue that means they are quite expensive. But don’t worry Govee makes cheaper one though it doesn’t work with HomeKit without some hacks.

So, here's my holiday gift guide. I hope it helps you bring joy to your loved ones or find something great for the company Christmas party. Have a happy holidays! 🌲

Is learning Algorithms and Data Structures as Frontend Developer worth it?

Szymon Sadowski — Fri, 12 May 2023 16:56:19 +0000

As a Frontend Developer, I believe that data structures and algorithms are often neglected. We tend to focus on topics such as frameworks, new infrastructure tools, and styling options, while basic computer science concepts are left behind, particularly for self-taught developers.

Table of contents

Why would you learn them?
- The Importance of Data Structures and Algorithms in the Hiring Process
Ok, You have me so what I should learn?
- DS
- Algo
From What Should I learn?
- Summary

Why would you learn them?

There are many reasons here are the things I think are really important:

Problem-Solving Skills. If you ever tried to solve any leetcode or hackerrank problem and it was hard for you learning DS and Algo will really help you. Later you will also be able to use this skills in real life.
More Efficient Code, learning a thing or two about time and space complexity let’s you understand what’s really happening and what is the most optimal way to solve a problem. And we are all about performant code!
Learning basic concepts let’s you switch technologies later on. Even if you migrate from TS to Rust CS fundamentals will stay the same. Don’t close doors, open them.

The Importance of Data Structures and Algorithms in the Hiring Process

There is no way around it. Data structures and algorithms are important in the hiring process because they are fundamental to computer science and software engineering.

Demonstrating knowledge of these concepts is often expected in technical job interviews and is a standard benchmark for evaluating technical proficiency. If you want to enhance your career opportunities - many companies require candidates to have knowledge of this topic during technical interview - you have to get through it! By learning these concepts, you can improve your chances of landing a job or advancing in your current role.

Ok, You have me so what I should learn?

DS

Arrays: Basic data structure that is everywhere. They are like brick to a building, more complex structures are build out of it. (For people that are used to “arrays” in JS this could be eye-opener!)
Linked Lists: A linked list is a data structure in which each element (node) contains a reference to the next node in the list. Linked lists are often used to implement other data structures, such as stacks and queues.
Binary Trees: A binary tree is a hierarchical data structure in which each node has at most two children. Binary Trees are optimization monsters and can come really handy.
Hash Tables: A hash table is a data structure that uses a hash function to map keys to values, allowing for efficient retrieval of data.
Graphs: A graph is a data structure that consists of a set of nodes (vertices) and edges that connect them. Graphs are used to model relationships between objects. If someone will try to explain them to You there is 90% chance they will use flights or social networks.

Each of these data structures has its pros and cons. Although arrays are the most common, after understanding linked lists and binary trees, you will be able to see how you can replace them with more performant structures. Graphs, especially weighted graphs, are the hardest to understand, so I recommend ending your learning with them.

Algo

Sorting Algorithms: Sorting algorithms are used to arrange data in a specific order. Some commonly used sorting algorithms include Quicksort, Mergesort, and Heapsort. These algorithms are used in everyday programming tasks, such as sorting an array or a list of items. Understanding the basic concepts behind them, especially time and space complexity, is essential for any programmer.
Recursion: Recursion is a powerful technique used in programming that involves a function calling itself. Although it can be hard to understand at first, learning how recursion works will help you tackle many programming problems more efficiently. I recommend reading the chapter on recursion in "A Common-Sense Guide to Data Structures and Algorithms" by Jay Wengrow.
Breadth-First Search and Depth-First Search: These are two popular algorithms used for tree structures. They are commonly used in solving problems on platforms like LeetCode. Learning them will help you understand graph algorithms better.

From What Should I learn?

Two “Musts” for me are:

"A Common-Sense Guide to Data Structures and Algorithms" by Jay Wengrow.
"The Last Algorithm Course You Will Ever Need" by ThePrimegen on Frontend Masters (it's free!)

Here are some more “academic” books that are still really good even for begginer:

"Introduction to Algorithms" by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein: It is considered a standard reference for computer science students and professionals.
"Data Structures and Algorithms Made Easy" by Narasimha Karumanchi: This book provides a practical and easy-to-understand introduction to data structures and algorithms. Problem with it for me that examples are in Java or C++.
"Cracking the Coding Interview" by Gayle Laakmann McDowell: This book will help you prepare for next technical interview!

Summary

If you are a developer looking to improve your problem-solving skills, write more efficient code, and better understand how software works, then learning data structures and algorithms is a must. Even if you don’t think that you will apply to Google and knowledge of how to invert binary tree will be useful trust me some of the concepts will really have an impact on you as a developer.

While it may take time and effort to master these concepts, the rewards are definitely worth it. And with so many resources available to help you learn, there has never been a better time to start.

If you have any comments, opinions or more resources please drop them in the comments below!

10 Things from Pragmatic Programmer (almost) 25 years later

Szymon Sadowski — Sun, 30 Apr 2023 12:16:07 +0000

As someone who has been in the programming space for quite some time now, I have heard the title of this book many times. Upon reading it, I even realized that I knew many of the concepts that were either started or propagated by it.

Just recently, I had a talk with a more experienced colleague (let's say a senior software engineer for convenience) about various topics, including the principles of programming. We discussed how many people only know the library and not the language (hello Prime) and other similar topics.

My colleague mentioned that among the many books he had read, this particular book had a really big impact on him, and he still follows many of the rules set forth by the book to this day. This made me realize that I had not yet read the book. So, I got a copy of it, sat down, and tried to understand this 25-year-old programming knowledge.

10 Most impactful things that i got from reading

Always use a version control system - Nowadays, Git solutions are common; however, in 1999, this was groundbreaking.
Learn a new programming language or technology every year - Learning a new language every year may be demanding. Instead, consider learning a new framework or any new technology. Keep learning and trying new things, even if you won't use them. This will improve your skills overall, especially in the JavaScript world.
Practice good code hygiene - This means writing code that is easy to read, test, and maintain. Many books cover this, and it's hard to say what exactly is easy to read code, but we all know it when we see it, right?
Don't repeat yourself (DRY) - Avoid duplicating code or logic in your programs. Of course, repeating the same logic in code is bad. However, nowadays, some programmers try to abstract everything in ways that may be hurtful. So, don't write the same function logic five times, but if you only use it twice, don't build a whole module for it that will take 10 hours to understand.
Use automation to your advantage - Automate repetitive tasks to save time and reduce errors. In the prime DevOps era, use CI/CD. One of my favorite books is "Modern Software Engineering: Doing What Works to Build Better Software Faster." Maybe I will write 10 things from it later?
Keep it simple, stupid (KISS) - Strive for simplicity in your code and design.
Write tests for your code - This will help you catch bugs early and ensure that your code works as expected.
Refactor your code regularly - This means improving the design of your code without changing its behavior. Do not put tasks like "REFACTORING USER PAGE" in your backlog. Refactoring is a constant process. If you are adding a feature and see some part of code you would like to rewrite, just do it. If you are constantly doing this, you will never have to "waste" time for a big refactor.
Use patterns and idioms wisely - These are proven solutions to common programming problems, but they should not be applied blindly.
Continuously learn and improve - Never stop learning and experimenting with new technologies and techniques. This is the best advice not only for programming but for life in general.

So how it is holding up?

First of all, it's worth noting that this book was published in 1999, so some of the specific technologies and tools mentioned in the book may be outdated. However, the general principles and practices outlined in the book are still highly relevant today and are considered timeless.

For example, the book emphasizes the importance of writing code that is easy to read, test, and maintain, as well as the value of continuous learning and improvement. These principles are still highly relevant and are widely embraced by software developers today.

Additionally, the book emphasizes the importance of using version control, which is still a fundamental practice in software development. The book also introduces the concept of "DRY" (Don't Repeat Yourself), which is still a guiding principle for many developers.

One aspect of the book that some may consider outdated is the emphasis on object-oriented programming (OOP) and design patterns. While OOP is still widely used, there has been a growing trend towards functional programming in recent years, and some developers may view OOP as less relevant today. Similarly, while design patterns are still used, some developers may view them as overused and may prefer to focus on simpler, more flexible designs.

Overall, while some of the specific technologies and tools mentioned in "The Pragmatic Programmer" may be outdated, the book's principles and practices are still highly relevant today and are widely embraced by software developers.

If you are interested in this kind of knowledge here are books that great

"Clean Code" and "The Clean Coder" by Robert C. Martin - These books were published in 2008 and 2011 respectively, making them newer. "Clean Code" focuses on the importance of writing clean, readable, and maintainable code. It covers topics like naming, formatting, and code structure, and emphasizes the importance of writing code that is easy to understand and modify. "The Clean Coder" focuses more on you as a programmer, with topics like communication, teamwork, and ethical behavior. It offers practical advice on how to be an effective and responsible software developer.
"Domain-Driven Design" by Eric Evans - This book, first published in 2003, offers a comprehensive approach to software development that emphasizes the importance of understanding the business domain and designing software around it. It covers topics like bounded contexts, aggregates, and domain events, and provides practical guidance on how to implement domain-driven design principles in your projects.
"Refactoring: Improving the Design of Existing Code" by Martin Fowler - This book, first published in 1999, focuses on the importance of improving the design of existing code through a process called refactoring. It provides practical guidance on how to identify code smells and apply refactorings to improve the structure, readability, and maintainability of your code.

If you want to read more from me visit my blog

A Beginner's Guide to Edge and Serverless Functions

Szymon Sadowski — Sat, 08 Apr 2023 11:41:29 +0000

As a junior developer, you may have heard of edge functions and serverless functions, but do you know the differences between them? In this article, we'll explore the key characteristics of each type of function and their pros and cons.

What are Serverless Functions?

Serverless functions are pieces of code that run on a serverless computing platform (cloud), such as Azure Functions or AWS Lambda. They are small and self-contained and are executed in response to specific events. If you're using Next.js, the service you use to deploy them is Vercel. When you deploy the application, all the functions from api routes will be used as serverless functions. They can be used for a wide range of tasks, from simple data processing to complex business logic.

One of the main advantages of serverless functions is that they can scale automatically, without the need for manual intervention. This means that if your application experiences a sudden spike in traffic, the serverless function will automatically scale to handle the additional load. Another advantage is pricing. You only pay when the functions are executed, not for upkeep.

However, a disadvantage of serverless functions is the occurrence of cold starts. If you're not calling your function frequently, the service you use will need to create a new instance of the function, which takes time. After a cold start, the function will run faster for some time. High latency is also a common occurrence. Since they are mostly deployed on one server, if, for example, you're using a server from Oregon and your user tries to connect from India, the distance between the server and the client is quite long. That's why you probably shouldn't use them for tasks that require low latency.

What are Edge Functions?

Edge functions, also known as CDN functions, are pieces of code that run on the edge of a content delivery network.
What is a CDN you may ask. A CDN is a distributed network of servers that helps deliver content (such as images, videos, and static files) to users faster and more reliably.
Edge functions are not deployed only on one server like serverless functions but on many. This means that the function code is executed closer to the end-user, resulting in faster response times and reduced latency. Edge functions can be used to modify or augment content as it is being delivered to the end-user, without the need for additional server infrastructure. We can think of them as serverless functions living a layer closer to the user.

For example, imagine that you're building a web application that displays images. You want to ensure that the images are compressed before they are sent to the user, in order to reduce page load times. With an edge function, you can apply compression to the images as they are being delivered, without the need for additional server infrastructure.

A big disadvantage of edge functions is that, in contrast to serverless functions, which can use different runtimes, they useGoogle's V8 JavaScript engine. This means that they can't do as much as their serverless counterparts. For example, V8 does not support some popular Node.js modules and language features. Additionally, some developers may prefer other languages or runtimes for their functions, which limits their options when using edge functions.

Which One to Choose?

So, which type of function should you choose for your project? It depends on your specific use case and requirements. Edge functions are ideal for simple content manipulation tasks, such as image compression or code stripping. They are executed on the edge of the network, which makes them faster and more responsive.

Serverless functions, on the other hand, are more flexible and can be used for a wider range of tasks. They are executed in response to specific events, which means that they are well-suited for complex business logic or data processing tasks. They also offer automatic scaling, which can save time and resources.

Conclusion

Edge functions and serverless functions are both powerful tools for developers. Edge functions are great for improving performance and reducing latency, while serverless functions are better suited for more complex business logic. By understanding the differences between the two, you can choose the right tool for the job and build better applications.

Bonus

If you read to this point I think you are quite interested in this topic. Here are some resources that go on this topic more deeply.

Lee Robinson (Vercel) and Kelsey Hightower (Google) talking about Edge Functions

Theo (ping.gg) Going on one of his rants about Edge Functions and if they are future of the web dev

How to deliver personalized content at the edge?

Big thank you to the @iamjakeingle for the cover photo!

My Tailwind CSS Kit

Szymon Sadowski — Wed, 15 Mar 2023 17:51:00 +0000

Tailwind is probably the hottest CSS solution right now. This utility-first library provides amazing flexibility and speed of development with a small learning curve (if you already know CSS well).

In this short article, I will try to provide you with all the resources needed (all that I use) while developing an app with Tailwind.

Creating project

Hardest part of any project, from this point forward easy-peasy lemon squeaky. I mostly use create-t3-app because it provides all the libraries I require from the get-go. If you are using for example npm create vite or some other command to create your project, it’s almost sure that official tailwind docs has you covered.

How to remember all these shortcuts?

I had a problem with it at the beginning, but to be honest, they are quite simple. After your second project with Tailwind, you will know most of them. But I always keep a cheat sheet close-by.

Won’t lie if I say that basically anything you pick will work. The most important thing that I will fit your style/workflow. Here are the most common:

tailwind components → looks nice, has good toast info that you really copied the class,
nerdcave → looks the most out of ‘90, but big plus is that you can select Tailwind version,
flowbite → The one I use the most. For me, most visually pleasing, and you also can select Tailwind version easily.

So if you have one of these on your second monitor or anywhere close, I think you can style elements very really easy.

I must here say that not all the tech docs are well-designed and maintained (looking at you tRPC) but Tailwind has one of the best docs site there is. Very pretty, with UX you can dream of on your site. Mostly I use it to copy some classes or to learn a thing or two. It takes too much time (compared to a cheat sheet) to use it while programming for my taste. But I wouldn’t be surprised if many people preferred it.

Plugins

Now real magic enters the room.

Extension

Tailwind CSS IntelliSense is a godsend.
It’s enough if you are in the neighborhood of the property you want. Just press control + space (or whatever your IDE/operating system accepts) and there you can select the class you wanted but didn’t know how to name. If I say that cheat sheets are a nice-to-have intellisense is a must for me. Speeds up work so much, and the autocomplete is brilliant as always.

Prettier

I don't like Tailwind because of the long classes

How can I know where anything is in this mess?

What are some comments I read on the internet These people didn’t have their prettier tailwind plugin. This bad-boy sorts your classes as well as the librarian sorts books. Always the same order. If you get used to it, there is no going back.

Library

I know what you think, most of the components for Tailwind cost money! And you won’t spend your precious hard-earned cash on the side-project. Here comes a great man called shadcn. He created something really good.

A component library based on Radix (which I wrote about here) and styled them with Tailwind. It’s nice to mention that for some time, Radix official docs have Tailwind examples!
You can just copy and paste classes, and add to your project-specific Radix components and here You have a styled component that it’s responsive and have everything that You would want out of it.

You also have more selection as Tailwind is on top of the world right now:

I'm curious, I want to know more

That’s really great, here are some resources I recommend:

Book

Authors of Tailwind wrote a great book ”Refactoring UI". I can’t recommend it enough. Maybe it won’t teach you Tailwind tricks, but I will make you understand the whole design system below it. Why shadow-md have these values not other how to use color pallets etc. It’s definitely worth your time and I will for sure make you a better UI/UX expert, which even as developers we need to be.

Bonus

Interesting and helpful resources on Tailwind:

Outstanding themes and UI Kits by Michael Andreuzza
tremor.so - an Incredible open-source library built on top of Tailwind for devs to build dashboards and charts
All of the work that Simon Vrachliotis does
Ever tried to create an HTML template for email? Here a is better way to do it with Tailwind Resend,
Mega thread by surjithctly which shows some amazing tricks you can do with Tailwind!

There are many more people that are doing great work in the space. If the community is vibrant and active, you know that the tech is at least worth a try!

How Memo changes rendering?

Szymon Sadowski — Tue, 14 Feb 2023 14:51:47 +0000

As developers, we strive to achieve the best performance in our applications. One way to do that in React is to restrict the number of re-renders. There are many tools that we are outfitted with to do that. In this short article, I will focus on the memoization of the component.

What triggers re-renders?

To better understand the subject, it is important to know how React triggers re-renders.

The component has three main reasons to render:

when the state changes,
when its parent renders (by default when the parent renders, all children also render),
when the context changes (if the component is subscribed).

Out-of-the-box modern declarative frameworks mostly re-render too much.

To block re-renders we can use memo (or pure components in-class component, but we won’t focus on that). Using memo causes that component to “remember” props and compare them with new ones. When we are dealing with primitive types the situation is simple and clear, when we are dealing with more complex types behavior may differ.

Fig. 1. Memo blocking render even though parent re-renders

How to use Memo

Here we have our children component. It takes props checked and children. We export this component as memoized.

Fig. 2. Exporting component as memoized

Now we will test it with different props and see when memo works and when it does not.

Text and boolean

First, we try sending as a boolean checked and text as children.

Fig. 3. Sending boolean and text to component

In this case, our memo won’t work and both parent and child will re-render every time we click on the checkbox. Why? Because the value of checked changes, and it influences the state of our MemoizedComponent.

What if we would get rid of this checked prop?

Text as children

Here we are only sending children, which is normal text.

Fig. 4. Sending only string as children

Our memo will work just fine because the string is primitive, which React compares by value not reference. But this situation rarely happens. Most of the time we send JSX as children, so what will happen then?

JSX as children

Although, visual output will look exactly the same as in the previous case. Under the hood is happening something completely different and both child and parent will re-render every time we click the checkbox.

Fig. 5. Sending JSX as children

Why? Because every time when a parent is building its markup, this div is changed to React.CreateElement which is an object. Objects in JavaScript are compared by reference and that’s why a MemoizedComponent will always think that when parents re-renders prop changes even though nothing changes.

Summary

React Memo works, but only in specific circumstances. Most of the time in real-life applications it won’t help much. It can be used in components that have a lot of markup or are static like <Headers/>, <Footer/>, etc.

Your time will be better spent if you try to avoid prop drilling or go with hooks like useMemo or useCallback. But anyway always before you start optimizing your application try to profile it (using react devtools or similar). It’s important first to understand what is worth optimizing and spending your precious time on things that will improve performance.

Stitches CSS - is it any good?

Szymon Sadowski — Tue, 17 Jan 2023 17:25:58 +0000

As a Frontend Developer, You constantly have to style elements. To do that, we have CSS that’s obvious. Right now we there are many existing solutions to achieve the same result from pure CSS, preprocessors like SCSS, tailwind to full-scale libraries (which I'm not a big fan of) like Material-UI. In this series, I will try some of the more interesting ways to make your app look cool and modern.

I am a big supporter of basically everything that Vercel does. When I saw their projects being made with Radix and Stitches I had to try it. Here is how it went.

Why would You want to use Stitches?

As their website claims, it’s a near-zero runtime CSS-in-JS solution with multi-variant support. I don’t know about You, but this doesn’t sound very interesting. Another CSS-in-JS huh?

Not so fast. It has many advantages that for me were maybe not groundbreaking but definitely awesome to use. Especially the combination of them all together.

Tokens

What are tokens? They are basically variables in CSS. They allow us to write much faster code, making repetitions obscure. Now think how many times you wrote the same value with the same unit in your CSS code. A lot right?

But you can say that you can make tokens in pretty much any CSS. But here is how they usually look

/* Typography
    ================================================================= */
    /* Font sizes - 4x4 grid */
    --font-size-12: calc(var(--font-base-unit) * 3);
    --font-size-16: calc(var(--font-base-unit) * 4);
    --font-size-20: calc(var(--font-base-unit) * 5);
    --font-size-24: calc(var(--font-base-unit) * 6);
    --font-size-40: calc(var(--font-base-unit) * 10);
    --font-size-48: calc(var(--font-base-unit) * 12);
    --font-size-64: calc(var(--font-base-unit) * 16);
    --line-height-base-unit: 1;
    /* Line heights */
    --line-height-small:   calc(var(--line-height-base-unit) * 1.1);
    --line-height-medium:  calc(var(--line-height-base-unit) * 1.3);
    --line-height-large:   calc(var(--line-height-base-unit) * 1.5);
    /* Font weights */
    --font-weight-lighter:  100;
    --font-weight-light:    200;
    --font-weight-normal:   400;
    --font-weight-bold:     700;
    --font-weight-bolder:   900;
/* Space
     ================================================================= */
    --space-base-unit: var(--base-unit);
    /* Margin, Padding - 8x8 grid */
    --space-8:  calc(var(--space-base-unit) * 2);
    --space-16: calc(var(--space-base-unit) * 4);
    --space-24: calc(var(--space-base-unit) * 6);
    --space-32: calc(var(--space-base-unit) * 8);
    --space-40: calc(var(--space-base-unit) * 10);
    --space-48: calc(var(--space-base-unit) * 12);
    --space-64: calc(var(--space-base-unit) * 16);

And sure you can understand what’s going on, but for me isn’t too complicated. IT SHOULD BE EASIER. And it is.

Here is a sample from Stitches doing exactly the same

const spacing = {
  1: '0.25rem',
  2: '0.5rem',
  3: '0.75rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  7: '1.75rem',
  8: '2rem',
    ...
};

fontSizes: {
        xs: '0.75rem',
        sm: '0.875rem',
        md: '1rem',
        lg: '1.125rem',
        xl: '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
        '6xl': '4rem',
        '7xl': '4.5rem',
        '8xl': '6rem'
      },
      fontWeights: {
        hairline: 100,
        thin: 200,
        light: 300,
        normal: 400,
        medium: 500,
        semibold: 600,
        bold: 700,
        extrabold: 800,
        black: 900
      },
      space: {
        ...spacing
      },

Maybe I prefer JSON format but it’s much clearer for me.

Variants

This is the key feature of Stitches that allows You to create typed, composable component APIs. For example, you can create a component and use variants to add multiple, compound, or default styles to the component. You can have sharable properties that are applicable to all variants. But by using variant property you can change one of them, are more or do anything you would like to do.

import { styled } from '@stitches/react';

export const Button = styled('button', {
  padding: '$4',
  margin: 0,
  boxSizing: 'border-box',
  font: '$publicoText',
  fontWeight: '$medium',
    color: '$text',
  fontSize: '$small',
  '&:focus': {
    outline: 'none',
    boxShadow: '0 0 0 2px $colors$shadow'
  },
  '&:disabled': {
    pointerEvents: 'none',
    opacity: '50%',
    cursor: 'not-allowed'
  },
  variants: {
    variant: {
      primary: {
        backgroundColor: '$elementBackground',
        border: '1px solid $border',
        '&:hover': {
          backgroundColor: '$elementHover'
        }
      },
      secondary: {
        backgroundColor: '$elementGreenBackground',
        border: '1px solid $subtleBorder',
        '&:hover': {
          backgroundColor: '$highlight'
        }
      }
    },
    icon: {
      true: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        gap: '$1'
      }
    }
  }
});

Here we can see tokens and variants in one harmonious way of working. We use tokens to set properties like colors or sizes.

I’ve created two variants of buttons that differentiate in color.

<Button onClick={handleStart} variant="secondary" size="sm" icon="true">
    <PlayIcon />
</Button>

Here I use “secondary” variant button and in one go we initiate icon inside it.

I think creating variants is very useful, maybe not in your Sunday project, but when You work hand in hand with designers to create a proper design system you really can simplify your code.

Utils

The last advantage I want to bring up is utils. They are these little tricks that really speed up development. And for me, this is possibly the best feature of stitches. You can recreate one of the best features of Tailwind inside Stitches with just a few config lines.

Here is what I use them for but for sure they are many other ways and applications.

Want to use tailwind like shortcuts like p,py,px,mt etc? No problem

utils: {
      p: (value) => ({
        paddingTop: value,
        paddingBottom: value,
        paddingLeft: value,
        paddingRight: value
      })
}

By using this you abbreviate CSS properties and can call them what You want and aggregate them like in example above.

Why would You NOT want to use Stitches?

To be honest, it ain’t perfect. It has many flaws like every library, but here are the things that bugged me while working with it.

Resources

They are very sparse and to find how to use some of the more complicated and advanced features you have to work with YouTube tutorials that are quite outdated. Also, they are docs that are good but not covering every use case I wanted to read about.

When you go with a more popular solution when You find yourself stuck it’s much easier to find answers than when working with Stitches that’s for sure.

Example. I wanted to use my tokens in CSS properties when setting shadows etc.

 boxShadow: '0 0 0 2px $shadow'

At first, I thought that I should be easy and just use token I set, and we are all good to go. But no, You have to use additional $colors before.

 boxShadow: '0 0 0 2px $colors$shadow'

To find that out, I had to spend too much time searching for the answers. For my taste, of course. For many of You, many things that I found frustrating are just obvious because You had worked with similar libraries.

Config

The hardest part of working with Stitches is creating a config file. When You jump into a project with it already prepared, It would really be a lifesaver. But making it from scratch for small project is a time-consuming mess with answers that are not easy to find (see point above).

Example. As I said I was using Radix with it to provide some primitives. Radix also offers colors (which Stitches docs recommends, though they are all made by the same people). Theming is quite easy and fun to make with it but setting the colors? Very error prone.

How IT SHOULD work?

You just import color palette from @radix-ui/colors spread it in colors property and we are done. And in “light” theme I got it to work just perfect

createStitches({
    theme: {
      colors: {
        ...green,
        ...slate,
        ...blackA,
        // Alias
        appBackground: '$slate1',
        subtleBackground: '$slate2',
        elementBackground: '$slate6',
        hoverBackground: '$green6',
        border: '$slate5',
        highlight: '$green9',
        elementGreenBackground: '$green7',
        elementHover: '$slate8',
        shadow: '$blackA7',
        text: '$slate12'
      },
    )}

The same way should work for dark theme, right? Nope I had to write HSL colors to make it finally work.

const darkModeConfig = {
  colors: {
        ...greenDark,
    appBackground: 'hsl(200, 7.0%, 8.8%)', // slateDark1
    subtleBackground: 'hsl(195, 7.1%, 11.0%)', //slateDark2
    text: 'hsl(210, 6.0%, 93.0%)', // slateDark12
    hoverBackground: 'hsl(154, 50.9%, 17.6%)', //greenDark6
    elementBackground: 'hsl(199, 6.4%, 17.9%)', //slateDark6,
    elementHover: 'hsl(207, 5.6%, 31.6%)', // slateDark8
    elementGreenBackground: 'hsl(153, 51.8%, 21.8%)', // greenDark7
    border: 'hsl(199, 6.4%, 17.9%)',
    highlight: '$greenDark9', // won't work for me,
  }
};

Maybe I did something wrong If so please correct me In the comments! It would really want to figure out how it works properly.

Nonetheless I created a Pretty good config file which you can see in the github repo
and use it for yourself.

Would I use it again?

Yes. For me, it’s much better styled components or emotion. It has disadvantages, most of them coming from that this framework isn’t that popular, and it’s quite new on the market. But for bigger projects, I would really recommend it. You can separate styles, create variants, tokens and utils. If you don’t like to mix HTML, JS code with CSS this is perfect for you. As you can create one folder and style all the elements there and not worry about it again.

Me

This is my first article not really scientific. Would really appreciate feedback on my writing, code and everything. Use comments, my github https://github.com/szymonSadowski/mapGame or twitter.****

And of course try the project I created to play with Stitches and Radix. https://map-game.vercel.app/