Forem: Alexander Dyriavin

My Journey to Building a light theme

Alexander Dyriavin — Thu, 27 Apr 2023 04:58:47 +0000

Disclaimer:

My intention is not to persuade you that a light theme is superior to a dark theme or vice versa. This is simply my personal experience, and I am sharing it with you without any intention of giving a recommendation.

I was a Dark-mode person for a while, but a couple of years ago, I started to get less productive and got some strange pain in my eyes/head. I started looking around for what could be a root cause of this issue and came across those articles:

After experiencing issues with productivity and pain in my eyes and head, I knew that I needed to try a white theme to evaluate the differences and see if it could help solve my problems. I decided to conduct an experiment, which lasted for around two weeks, to determine whether a white theme would be suitable for me. However, the outcome was shocking, as by the end of the second week, after switching back to my favorite dark theme (Gruvbox <3) the experience was quite unexpected. I found myself struggling to focus for more than 15 minutes, and the symptoms of reduced productivity and pain in my eyes and head were slowly coming back. This made me realize the importance of finding the right theme for my own personal needs and preferences, and inspired me to continue exploring different options until I found the perfect fit.

Over the years, I experimented with various themes, but none of them seemed to satisfy my needs. While there's no denying that a dark theme has a richer color palette and looks cooler than a light theme, I still felt that it wasn't the right fit for me. I used the GitHub light theme for a year, but eventually realized that it wasn't the perfect solution for me. This realization sparked an exciting journey for me, as I decided to build my own light theme. While it was a pleasant experience to use a theme maintained by someone else that was available for most of the tools I used, I was determined to create a theme that perfectly aligned with my personal preferences and requirements.

As for my work setup, I use a MacBook as my primary machine for development, and I rely on a few key tools to get my work done. These tools include Visual Studio Code (Vscode), various products from JetBrains, and Warp.

Once I had my desired color palette in mind, I began building my own theme starting with Vscode. I found that building a theme in Vscode was a relatively straightforward process, and there are a few key things to keep in mind if you're interested in building your own.

First, it's important to know that Vscode uses textmate2 as a tokenizer engine, and you can find detailed documentation on how this works on the Vscode website. Additionally, there is a tool called VSCE that can greatly simplify the process of theme development, and I highly recommend checking it out if you're just starting out.

Once you're ready to get started, follow the steps outlined on the Vscode website to begin building your theme. One thing to keep in mind is that tokens can be combined into several groups in the theme.json file, which can help you organize your theme and ensure that it works seamlessly across different programming languages and syntaxes.
Vscode links:

During my first iteration of the theme, I understood that my color palette sucked.
Vscode offers Token Inspector that allows you to find and style the token type. The overall development experience is incredible, even though textmate2 does not support some token types.
After a few weeks of working on the theme - I was finally happy with the outcome.
For those who are interested - Mimesis theme vscode

But it was only one-third of the journey, the vscode theme was completed, and I started working on the theme for Warp.

Warp offers you a clean way of creating a theme. It's super simple:

Use this app - Warp themes
Use this vs code extension - Warp companion

Considering that I already had colors aligned, it took me 15 mins to make a couple of prototypes for warp.
For those who are interested - Mimesis theme warp

The last leg of my journey involved building the theme for JetBrains IDE's, which proved to be the most challenging part of the project. This was primarily because JetBrains products are JVM based, and the development process was quite heavyweight. However, the available documentation and tutorials were quite helpful in achieving the desired result. While creating the theme for the General Editor (where you type code) was relatively easy, and I could tweak it without writing any line of code, the process of getting the IDE UI just right was a mess.

Follow the steps from the official repository
Enable LAF
Use UI inspector
Update your theme file and re-run app, if you feel stuck follow this tutorial - there a lot of useful information in the playlist :)
Editor themes - Semantic Highlighting Overview
Customize themes - Reference to doc
IDE UI components - Reference to doc

For those who are interested - Mimesis theme JetBrains

I've open-sourced all of the work, if you are interested in contributing, investigate theme:

Summary:
I am not an expert in this field, but I had a problem and sought a solution. I decided to make this post to save some time for people with the same struggles as me.
I am happy with the results of my themes, but some minor inconsistencies will be fixed in the future. I enjoyed working with API/Documentation provided by all vendors, and it was a pleasant experience; I am grateful to the Product teams behind those products!

If you are looking for a light theme but have yet to find something that works for you, I am inviting you to try my theme.

But remember that I built it over my experiences and preferences - I don't and won't claim that this theam will boost your performance or it will work for you. This theme is a subjective interpretation of my personal preferences an experiences.

Underestimated PHP

Alexander Dyriavin — Sat, 02 Jul 2022 23:50:04 +0000

After browsing Reddit and Twitter I`ve noticed that the majority of developers underestimate PHP as a language.

As with any programming language or technology, PHP comes to us with its pros and cons, however, it doesn't change the fact that PHP is widely used.

PHP was changing over the years, but the last year provided a new breath to the language, seeing such effort from different people, I highly disagree with the opinion that "PHP is dying".

Just a recent finding shows that with each release, PHP as a language involves and brings new features to the community.
With combination with such great tools as:

Some of the references:
https://github.com/php/web-php/pull/602 - redesign the PHP home page, to make it look more up-to-date with UI/UX trends.
https://wiki.php.net/rfc/auto-capture-closure - Short Closures 2.0
https://thephp.foundation/blog/2022/06/30/php-core-roundup-3/ - Detailed report on progress from PHP-foundation collective

If you find have such post interesting, please share it with me.

Serving sites with different PHP-version using Laravel-valet

Alexander Dyriavin — Fri, 05 Feb 2021 21:43:30 +0000

Before starting doing anything from this article, make sure that you already have installed:

Brew (https://brew.sh/)
PHP (any version)
Laravel-valet (https://laravel.com/docs/8.x/valet)

Since this article is related to serving sites with different PHP version, I will skip parts with installing Brew, Laravel-valet, and so on.

Let's assume that you already have installed php7.* version, but for some reason, you need to serve app which is using different version neither your installed.

Run this commands step by step:

Install needed PHP-version (brew install php@. → in my case it will be php@7.2).

Once it installed, brew link php@7.2 and then brew will prompt that you need to add env-path to your .zshrc/.bashrc:

echo 'export PATH="/usr/local/opt/php@7.2/bin:$PATH"' >> ~/.zshrc
echo 'export PATH="/usr/local/opt/php@7.2/sbin:$PATH"' >> ~/.zshrc

Then you need to apply changes with :

source ~/.zshrc

Now we have locally instaled 2 versions of PHP, in my case php7.4 & php7.2

Next step will be changing the current version of PHP for Valet :

valet use php@7.2

All valet-services will be restarted and you will able to run commands from a terminal ( composer install, etc) for your project with the older version of PHP

Now we need to link our App to valet-sites, in my case app is built with Laravel, so I need to go to the entry point of application and link it to Valet:

cd my-app.loc/public
valet link my-app.loc

That will create folder in valet.

Now we need to secure our website to use SSL certificates and valet will generate Nginx configuration, which is needed to change fastcgi_pass

valet secure my-app.loc

Again valet will restart needed services, and you will be able to make changes in Nginx config for your app.

But for now, we need to make changes in our php.ini configuration.

You need to find your php.ini file, to that just run and cd to your PHP-directory:

php -i | grep php.ini
# output will look like this: 
# Configuration File (php.ini) Path => /usr/local/etc/php/7.4
# Loaded Configuration File => /usr/local/etc/php/7.4/php.ini
# cd to your php directory 
cd /usr/local/etc/php/*.*/

We are interested in PHP-fpm configuration which is used by Valet for serving sites, probably in most cases it will be located in the same folder as your PHP but in sub-folder called like "PHP-fpm.d", we need to change valet socket to ours, so cd to PHP-fpm directory and open "valet-fpm. conf" in your favourite IDE, we need to change "listen" directive

# By default it would like this
listen = /Users/**user-name**/.config/valet/valet.sock

We need to change it according to your requirements, in my case I have installed php7.4 ( primary ) and php7.2 (for the temporary project ), currently I am in php7.4 directory, so my settings will be :

listen = /Users/**user-name**/.config/valet/valet74.sock
# Save the file and exit

Now we need to do the same actions but for php7.2 version (in my case ) :

cd /usr/local/etc/php/7.2/php-fpm.d
vim php-fpm.d
# Changing listen to php72.sock
listen = /Users/**user-name**/.config/valet/valet72.sock
# Save and exit

Short explanation :

We need this to valet will proxy the request to different PHP versions, so :

php7.4 → valet74.sock

php7.2 → valet72.sock

php5.6 → valet56.sock and etc

Now we need to update our Nginx configs for apps:

cd ~/.config/valet/Nginx

In this folder, you will find-out Nginx. conf for each of your linked site:
Open needed config with any IDE, and find "fastcgi_pass", by default it will look like this :

fastcgi_pass "unix:/Users/**user-name**/.config/valet/valet.sock";
# Change it to needed version of your php

Now all we need to do it's just :

rm -f ~/.config/valet/valet.sock && valet restart

And finally, you can run different web-apps with different PHP-version at the same time. If something went wrong and your app doesn't work - and throws you an error like this :

    This package / app requires php 7.2 but your PHP version (7.4) does not satisfy that requirement.

Make sure that your php7.2 is up and running using this command :

brew services list 
# if error /stopeed 
brew services restart or start php7.2
rm -f ~/.config/valet/valet.sock && valet restart

If you got any problems to let me know in the comments! Thanks for reading this article!