DEV Community: Filip

0x96f: A simple and pleasant dark theme

Filip — Thu, 20 Feb 2025 23:59:22 +0000

Hello everyone! I have made a simple and pleasant dark terminal theme. It is something I wanted to do for a long time since I liked certain things from multiple themes but none of them caught my eye. I wanted to create a theme that would be easy on the eyes and aesthetically pleasing. Not too bright, not too dark.

I'd love to hear your thoughts and feedback! Feel free to try it out and let me know if you have any suggestions for improvements. Or fork it and do whatever you want with it 😁!

The theme for terminals is available here. I also have a theme for Zed, which you can find at here.

My thoughts on AI for developers

Filip — Fri, 12 Apr 2024 11:31:06 +0000

I have been a developer for 6 years now (not very long) and I have enjoyed every minute of it. Even thought it was tough at times, I still wanted to continue. When I started my career (even when I was in university) there were tools to automate some of the tedious stuff when writing code. For example, I remember discovering IntelliJ code generation tool for generating constructors, getters and setters. Even having that, most of the time I wanted to write them on my own to know them when I don't have this tool available.

When AI started getting popular, I approached it pretty conservatively, even though I really like testing new things. I chose this approach because I didn't see the value that it brings at the time. But recently I gave in (since I can't escape it, it's everywhere) and decided to try a few tools to aid me when I am developing. I wasn't sure what to use since there is a lot to choose from (and I wanted to give AI a fair shot) so I tried with the following:

Github Copilot
ChatGPT
Claude 3
Codeium
Sourcegraph Cody
Local LLMs (with ollama)
- Codellama
- Mixtral

At first I was impressed as it was far better than I expected. Thay all offered very useful tools such as code completion, explain code, generate tests, refactor code, etc. It was far from the IntelliJ code generation tool that I know.

Having said all that, I still think they suck. Why? Let's start with the downsides.

First are the "hallucinations". When generating a piece of code, often they will imagine a library that doesn't exist but resembles a couple of existing ones. This happened more often than I expected. Also, sometimes the code that it suggests is just incorrect. My point is that by the time the code generates, and you make the necessary tweaks and corrections, you could have written it by yourself.

The second is that it just makes coding a lot less fun. I enjoy sitting down with a cup of coffee and just writing some code. When I get stuck, I never see it as a problem or get discouraged, I see it as a challenge to learn something new. So why waste an afternoon writing code when you can generate so code with AI and just fix it up and ship it? It kills creativity, it leads to a lack of deeper understanding of the language and tools you are using (and also the thing you are developing).

The biggest problem I see is that developers, especially young developers at the start of their careers, rely too much on AI. I get the value it brings when it comes to helping with the tedious tasks that are repeated in almost every project, but constantly using it while developing for everything is just wrong. An inexperienced developer can't tell if the code generated is right or wrong. It may be right for some simple thing that he will try, but it might cause more problems down the line. Even I noticed that after using AI for a couple of months, I started to rely too much on it. An example of this is when the Copilot extension crashed. I found myself waiting about 5–6 seconds for the autocomplete of a simple function call because I was becoming lazy (to be honest, I could have written it in the same time I waited).

Just to be clear, I am not dismissing AI outright, but I think we are still not on the level as everyone is making it out to be. I think there is a lot of potential, but we are still not there yet. These are just my thoughts, I would love to hear what other people think of this.

Labeled statements - the forgotten JS feature

Filip — Thu, 21 Sep 2023 19:06:32 +0000

For years I have been following Svelte but never got around to trying it out. Recently I found some free time, so I decided to look into it. While going through the docs I found an interesting JS feature that I have forgotten about:

$: doubled = count * 2;

This feature is used in Svelte to power reactive declarations, which are re-computed whenever the variables declared into the statement change. In the case above doubled will be re-computed whenever count changes.

What are labeled statements?

Lets take a step back. What is a labeled statement? According to MDN:

A labeled statement is any statement that is prefixed with an identifier. You can jump to this label using a break or continue statement nested within the labeled statement.

Basically it is sort of a goto statement for loops. For example if we want to exit a nested loop we can use it in the following way:

loopX: for (let i = 1; i < 10; i++) {
  for (let j = 1; j < 10; j++) {
    if (i + j === 5) {
      break loopX;
    }
  }
}

In this example we can exit the parent loop from the child loop by just using the break statement with the label that we want to break on.

Labeled statements are not just exclusive to loops, they can also be used with if statements:

outerIf: if (count < 10) {
  if (true) {
    break outerIf;
  }
  // This will not log
  console.log(count);
}

Conclusion

It’s rare that you will need to use a JavaScript label. In fact, you can lead a very fulfilling career without ever knowing that this exists. However, you are now able to apply it if you happen to come across a situation where it is useful.

Benchmarking web servers in different languages

Filip — Wed, 18 Jan 2023 14:12:32 +0000

Being mainly a JS developer I often find myself testing out new frameworks (new ones pop up every week or so) to find what works best for the next project I do. I mostly worked and tested frontend frameworks, but recently I wanted to try backend development. So I started to look at different options for my next project.

Since I worked only with NodeJS so far I wanted to see how it compares to different JS runtimes (Deno and Bun) and to different languages. So for my research, I chose to test Deno, Bun, Go, Go and Fiber, Rust, and Actix against the ones I know (Node and Express).

Setup

For testing I set everything on my M2 Macbook and installed NodeJS, Deno, Bun, Go, and Rust. The setup was painless for all of them since for everything you just need to run a single command from their website and you are good to go.

I also used a tool called wrk to run the tests. This is an amazing tool to benchmark HTTP requests to your server. I ran it with the following configuration:

8 threads
256 concurrent requests
30-second test duration

I created the simplest web server for every language (+framework) I could find and ran the tests 10 times with the following command:

wrk -t8 -c256 -d30s http://127.0.0.1:8000

Results

After running the results I found some interesting stuff. While I expected Go and Rust to beat all the JS runtimes that didn't happen. Deno was almost as good as Actix, and Bun almost beat Go for the top spot. Sadly NodeJS fell well behind all of them with the worst being Express. Express came dead last being over 10 times slower than Bun, almost 6 times slower than Deno and 5 times slower than raw NodeJS.

Conclusion

While this is in no way a comprehensive comparison it gives me an idea of what to expect when choosing the technology for my next project. The results here may be different depending on what I need for my project. My main takeaway here is that it may be time to start moving away from NodeJS, at least when it comes to backend development.

All the results and scripts can be found here.

My top 3 new JavaScript features that made my life better

Filip — Thu, 18 Mar 2021 11:04:08 +0000

I've been working with JavaScript for the last 3-4 years but the last year I've seen massive improvement in the language. In my opinion ES2020 was a huge step in the right direction and ES2021 seems to have some great stuff to offer too. With ES2020 we have seen some very useful features added but I will talk about my top 3 that saved me countless hours. My top 3 (relatively) new features are:

Dynamic imports
Optional Chaining
Nullish Coalescing

Dynamic imports

Until now for every library, component, module or anything else you wanted to use in your code you needed to import it first at the top of your file. Even if it is used only in certain situations (like if the user clicks a button something shows up) the code will be imported. This could have a huge impact on performance because you load a lot of things you don't use. For this dynamic imports have been a lifesaver. With dynamic imports you can lazily import a module at runtime. This means you can delay the loading of non-essential modules until they are required.

For example instead of statically loading a huge library at the top of the file:

import LargeLib from "large-lib";

You can load it when it is required:

async function doSomething() {
  const LargeLib = await import("large-lib");
  // ----- do something with the lib -----
}

Optional Chaining

This has been by far the most popular and talked about feature of ES2020. And in my opinion it deserves the praise that it gets because it is a real lifesaver. Optional chaining in a feature that allows you to call a deeply nested property without throwing an error if the parent property is undefined.

In the past you needed to check every properly down to the one you need. For example we want to get the city of the company:

// Old way
console.log(company && company.address && company.address.city);

// Optional chaining
console.log(company?.address?.city);

This makes the code look a lot cleaner and more readable. With one look you can see exactly what you wanted to do.

Nullish Coalescing

Nullish coalescing is also one of the more popular new features. In the past when you wanted to set a default value to a property when it is undefined. Until now the common way of doing that was with the OR (||) operator. Let's do this with an example.

const duration = 0;

const animationDuration = duration || 500;

In the example above we want animationDuration to be set to duration only if duration is defined. But the problem here is when we want to se it to 0 it will default to 500. This happens because 0 is considered a falsy value and there for the OR operator takes the right one. We can fix this with type checking but that just makes the code messy. To fix this in a more elegant we can fix this with the nullish coalescing operator (??). It only checks if the value is undefined or null. All we have to do is replace the OR operator with the nullish coalescing operator and now we can use 0 as a valid value.

// This ...
const animationDuration = duration || 500;

// ... becomes this
const animationDuration = duration ?? 500;

Conclusion

JavaScript is truly becoming a modern and elegant language. It is amazing and wonderful to see how JavaScript came from a language which was booed on, to one of the strongest and most versatile language. There is much more to write about, so many new and very useful features, but I decided to keep it short and sweet.

Fish Shell - Is it time to replace Bash and Zsh ?

Filip — Mon, 08 Feb 2021 17:05:05 +0000

Bash and Zsh

Bash has been around for a very long time (since 1989) and if you open up a Terminal on Linux or Mac, you’ve seen Bash since it has been the shell of choice for a very long time. You can run commands, create aliases for commands, define and export variables, make functions and that’s about it.

Zsh is not much different from Bash, in fact it is an extended version of Bourne Shell (the same shell that Bash is based on) with plenty of new features, and support for plugins and themes. One of the coolest things about Zsh is color customization. You can easily change the theme and color of your shell just by using a framework called Oh My Zsh.

But both Bash and Zsh are limited in many ways. They both lack modern features like tab completions and autosuggestion, and can be a bit harder to configure if you are a beginner.

Why you should use Fish instead

Fish is the most user-friendly command line shell in my opinion. It has a number of smart features and improvements when compared to other shells, namely Bash and Zsh. When you first start typing in Fish, you will immediately notice that it has an autosuggestion feature where, as you type, Fish will suggest commands to you based on your shell history. Also as you are typing you will notice the commands will change color. When the command is not complete it will be red meaning it is not a valid command and once it is valid it will turn blue. For example when you type c it will be in red because it is not a command, but when you add a d to run cd it will turn blue because cd is a valid command. Also Fish supports 24 bit true color and it is customizable so you can make it look however you want.

Tab completions in Fish are really quite amazing. You don't need to add any plugins or hack Fish in any weird way to get tab completion to work either, unlike with Bash or Zsh. As you type a command, hit TAB and you will be presented a list of possible commands. If you are unsure of a flag for a command, you can hit TAB while typing flags, and you will get a list of possible flags. So if you type ls - and then hit TAB, you will get the flags for ls. Fish gets this data from the man-pages installed on your machine.

Configuring the Fish shell

Fish is configurable although for most users the default configuration will do the job very well. But for those that love to hack on things, Fish can be configured easily without ever needing to edit the config files manually. There is a built-in web configuration tool that you can launch with fish_config. This will open a page in your browser where you select the features and themes that you want. When you're done you just save the configuration and voila! Another easy way to configure Fish is with the Oh My Fish framework. Oh My Fish provides an infrastructure to allow you to install packages that extend or modify the look of Fish. It's easy to install with just one command in the terminal, and it's easy to use.

Scripting in the Fish shell

Fish is fully scriptable. Its syntax is simple, clean and consistent. It has a sane syntax where things like if and case statements no longer have to be closed with fi and esac, you can just use end. While the difference in syntax from Bash can be discouraging for some, it is really easy to get the hang of it and feels more natural. You can also define universal variables, which are shared instantaneously with all running Fish sessions and persists through shell restarts.

Cons of using Fish shell

Nothing is perfect so Fish has its down sides as well. First it is not compatible with POSIX sh. Depending on how you look at it this can be a positive and a negative thing. This just means that it's a separate language (like Java, Python) rather than an implementation or extension of sh (like Bash, Dash). Some other features are missing like no support for !!, but you can use the Oh My Fish framework and install the bang-bang plugin to have this shortcut in the fish Shell.

Conclusion

Depending on your needs you might be satisfied with Bash or Zsh but even when doing basic tasks the Fish shell can be a lot more helpful than the others. I certainly recommend trying Fish if you haven't already. You will be amazed by all of its advanced features that just work without the need to spend multiple hours on configuration.

Using CSS Modules with create-react-app

Filip — Tue, 14 Jul 2020 14:22:46 +0000

Starting a new React project used to be a complicated process that involved setting up a build system, a code transpiler to convert modern JS code to code that is readable by all browsers, and a base directory structure. Create-react-app offers a modern build setup that comes pre-configured with everything we need to start building our React app. One feature is CSS Modules that is available in create-react-app from version 2 and later.

What are CSS Modules ?

Stylesheets in large apps can get quite messy and coming up with new class names for slightly different components can get hard really quick. A CSS module is a CSS file, but with a key difference: by default, when it is imported in a component every class name and animation inside that module is scoped locally to that component. This allows us to use any valid name for our classes, without worrying about conflicts with other class names in our application. In this post I will show you how to get started with CSS Modules and explain what happens when you use them.

How to use CSS Modules in CRA ?

To get started you will need an app generated with the create-react-app package (version 2 or later, but it is recommended to use the latest). To generate a project you can use:

$ npm i create-react-app -g
$ create-react-app my-app

or if you have npx installed:

$ npx create-react-app my-app

The way that CRA is set up is that to use CSS Modules first we have to rename all the CSS files from [name].css to [name].module.css . In the css file any valid class name is acceptable, but it’s recommend to use camelCase for classes with more than one word. The reason for this is that we will access these classes later as properties of a JS object (e.g. styles.someProperty), but it is not enforced (you can access with styles['some-property']). Next we can look at how to use them in the components. First we need to change the import:

// From
import "./App.css";
// To
import styles from "./App.module.css";

Note that we are importing something from the CSS file the same way we do from a JS file. This is because during our build step, the compiler would search through the App.module.css file that we’ve imported, then look through the JavaScript we’ve written and make the .customClass class accessible via styles.customClass. Now we can use the classes as properties from the object that we imported:

import React from "react";

import styles from "./App.module.css";

function App() {
  return (
    <div className={styles.customClass}>
      Hello React!
    </div>
  );
}

export default App;

And that is it, you are ready to use CSS Modules...

But why do we need CSS Modules ?

Well as I mentioned in large project coming up with unique class names can be hard. CSS Modules enable you to use the same class wherever you want. Since the compiler handles the CSS it changes all the class names with different unique names in order make them locally available for that component. For example:

<!-- Normal class -->
<div class="customClass"></div>
<!-- Module class -->
<div class="App_customClass__28RXF"></div>

This means that we can have the customClass in multiple CSS files without worrying about conflicts between them.

Conclusion

This is not the only benefit of CSS Modules. You can find more about them in this great article. Hope this is helpful and as always - Happy coding.

React and Tailwind CSS Setup

Filip — Tue, 24 Mar 2020 10:37:53 +0000

Hi everyone, I'm Filip and I am a JavaScript developer. This is my first blog post. Hope you like it and I would love to hear what you think of this post and how I can improve my writing in the future.

What we need

Terminal / Command Line (e.g. PowerShell on Windows, Zsh on Linux)
IDE (e.g. VS Code)
NodeJS - 8.11.3+
npm - 6.12.1+

1. Getting started

First we will install the npx package globally. This package allows us to execute packages from npm without installing them. When we run this command it downloads the package, executes it and deletes it. We will install it with the following command:

npm i npx -g

Now we will create a starter React app using the create-react-app package with the following command:

npx create-react-app my-react-app

This will create a React app in a folder named my-react-app ( the name is given in the command above ). Now we will change into the directory and install some packages that we need. For now we will need react-router-dom ( for navigating in the app ), tailwindcss ( for Tailwind ), autoprefixer ( for prefixing CSS for different browsers ) and postcss-cli ( for watching and reloading CSS updates ). We can do this with the following commands:

cd my-react-app
yarn add react-router-dom tailwindcss autoprefixer postcss-cli

If you want to see the initial app created so far you can run the following command:

yarn start

The app will be started on localhost:3000 and will display the standard new React App screen.

2. Setting Up Tailwind & PostCSS

Now we will set up the configurations for Tailwind and PostCSS. First we will initialize Tailwind into our project. We can do this by running the following command:

npx tailwindcss init

This will create a file called tailwind.config.js with an empty configuration for Tailwind. We can customize this as we want but for now we will leave it as is. Next we will set up the PostCSS config. Fot this we will create the config file manually. You can do this with the following command:

touch postcss.config.js

This will create a file called postcss.config.js . Now we can add the configuration for PostCSS in this file. You can copy and paste the following configuration in the file:

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
      tailwindcss("./tailwind.config.js"),
      require("autoprefixer")
  ]
};

Now we can create a global styles file that will import Tailwind in our app. I recommend in the src folder that we create a folder called styles that will hold all the global styles that we need. In this folder we can create a file called tailwind.css or global.css ( besides tailwind in this file we can add some custom global overrides ). To use Tailwind all we have to do is put the following in the CSS file that we created:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* All other CSS will go here */

3. Connecting Tailwind, PostCSS, & React

Now we need to modify the starting scripts for the project that are defined in the package.json file. When we open the file if should look like this:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autoprefixer": "^9.7.5",
    "postcss-cli": "^7.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "tailwindcss": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

We will modify the scripts part of the file with the following commands:

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/global.css -o src/styles/main.css",
    "watch:css": "postcss src/styles/global.css -o src/styles/main.css"
}

Now we just need to import the CSS file that will be created when the app is built into index.js ( root of the app ) and we can start using Tailwind in our app. To do this just replace import './index.css'; with import './styles/main.css'; .

And that is it. Now we can start making beautiful React apps with Tailwind. For more info on how to use Tailwind I recommend the Tailwind documentation , it is very clear and has lots of examples.

The code for this tutorial can be found here.

Happy coding.