Toolset I trust

Idea behind 🤔

Occasionally I get questions about the tools I’m working with and tech stack that I prefer to use in side-projects. I’ve decided to answers those questions and give beginner developers an idea and inspiration for extending their toolset.

You can also consider it as a letter to myself in the past: all the things I’m going to mention are priority choice for ME now , and would have been 2-3 years ago when I started if I knew about their existence back then. Given the variety of tools you can use today I will try to also provide some alternatives so this post doesn’t look too opinionated.

Tools 👨‍💻🛠️

IDE - VSCode

I’ve been a huge fan of Atom for last year and a half and admired its configurable functionality but at some point I decided to try Typescript and stumbled on some unpleasant issues especially with regard to syntax highlighting and auto-suggestions for some specific technologies like styled-components. Many people advised me to try out VSCode and praised its out-of-box functionality and lots of other benefits thatAtom didn’t have. My first impression was unbelievably good and I loved to work in VSCode. It took me a couple of hours to configure it the way I preferred and it became my main editor which I am enjoying until today! If you are interested in what extensions I use and what are general editor settings feel free to DM me on twitter and I will send you a link to the gist😃

💭 Other options: Atom, Sublime Text

Theme - Dracula

I use Dracula for general development and Light VSCode for recording screencasts to ensure that videos are accessible as much as possible.

💭 Other options: Shades of Purple

Font - FiraCode

I’ve decided for this one because it offers those little neat things for developers like ligatures that make some elements look natural. As developers we are often writing symbols that mean something: =>, !=, ===. This font makes them look more integral and thus makes them easier to comprehend in large code chunks.

💭 Other options: 💵💵💵Operator Mono

Browsers - Firefox Development Edition

I’m not that picky when it comes to choice of browser but recently I’ve started to use Firefox Developer Edition and it gives really good debugging tools, supports ccs-grid dev tools and has cool UI. You can also check out accessibility tab which offers insights on how accessible a website is. When it comes to testing how things work in different browsers, I find the option of opening Chrome, Safari and Firefox in different workspaces the easiest and do that almost all the time when the app I’m working on is ready.

💭 Other options: Google Chrome

Terminal - Default MacOS terminal

I use default Mac OS terminal both in IDE and in separate windows with little cool tweaks to the configuration that remove noise in the prompt and aliases which are shorthand for longer commands. If you are curious to know more, just drop me a line and I will try to share as much as possible!

💭 Other options: ITerm

Planning and organizing - Notion

I am using Notion HQ to keep my thoughts organized as it offers friendly and easy to use UI for solving tasks that are complex enough. It is very feature rich and after using it for several month I can’t imagine keeping stuff in order without it.

Screencasting - Screenflow

I’ve been recently accepted to the team of instructors and that means that I will be shooting video-tutorials quite often. I’ve already picked up tool for that! It’s called Screenflow and one can record a screen with it and edit it afterwards to cut pauses or modify given pieces of the tutorial for example. It was a completely new thing for me but in fact I was able to become familiar with the basic functionality while making the first screencast and it was quite easy to deal with later.

Putting emoji where they fit… and don’t fit - Rocket

I remember the time when I had to install packages in Atom to get the ability to past emojis into the text elements and almost all of them weren’t perfect. Lately I’ve discovered a great tool that allows you to use emojis literally everywhere and it’s called 🚀Rocket🚀. You just have to type : + emoji name and nice emoji-picker will pop up. Easy and super cool!

Writing blogposts - iA Writer

Now that I try to share all the useful tips I have for the greater benefit of the community I write a lot. To get a really distraction free experience I use iA Writer which has very minimalistic interface that makes you focus on just one thing - writing content✍️

Hardware - MacBookPro 15

I’ve spent almost 5 years working on Mac OS and can really vouch for all the benefits of working on these wonderful machines. I’m not quite happy with the battery life on my laptop but apart of that everything is amazing. It is fast, Retina display = love and doing front-end on Mac just seems more natural to me!

💭 Other options: I think you can use whatever machine you prefer if it serves your needs well!

Technologies 👨‍💻⚙️

The following technologies are rather my personal favorites for day-to-day working and I must have a disclaimer here that those are ones you are supposed to look at after having a good grasp on basics like HTML5, CSS3 and Javascript.

Front-end framework of choice - React

I’ve begun to work with React more than a year ago and since then I started to write cleaner, better comprehensible and maintainable code. I’m quite sure that component-based approach where you assemble your app in lego-blocks fashion is ‘to blame’ here. Moreover, the community behind is so large and helpful that any problem that could arise will either have a solution on Stack Overflow or is covered in awesome documentation.

💭 Other options: Vue.js

Back-end handling - Firebase

I have a very curios mind and when I’ve already been doing front-end for some time I had an urge to complete an app that would be something close to real application. With this in mind I started to look for something that allowed easy log in/log out functionality, real-time database operations, and cloud functions. I was quite lucky to stumble on Firebase which offered all the needed functionalities and didn’t really require that extensive back-end knowledge that you would think. Its documentation is super beginner friendly and you can use it in your client code which means low entry barrier for you as front-end specialist.

Styling React apps - styled-components

Styling applications written in React has been a real pain for me before I gave styled-components a try. Adapt styles based on props in a really intuitive way, have a clear and self-explanatory semantics, ditch the need to control for duplicate CSS classes and much more. Styled-components is too good not to give it a try, seriously!

💭 Other options: CSS Modules

Static site generator - Gatsby

When it comes to writing React code it’s very pleasant and fast process after you have played with it for some time. But I feel like one of the best things that happened to my development workflow is Gatsby. To make it short, Gatsby is a static web-site generator that uses React components and plugin-based approach to create blazing-fast websites that can be immediately hosted on platforms like Github Pages or Netlify. It has very rich infrastructure and thanks to hundreds of plugins it’s very easy to add whatever features you need on your website. It is open-sourced, has cool team and uses the cutting-edge tech stack behind the scenes. If you still don’t really understand where this could be useful I will give you some ideas:

  • Personal blog
  • Portfolio website
  • Simple e-commerce
  • Documentation website and many more…

💭 Other options: Honestly I can’t make myself recommend you anything else. It would be just unfair towards you😅 Gatsby is on 🔥 now!

Thanks for reading 🙏

I really hope that I at least persuaded you to try out couple of those new things if you haven’t heard of them before and I would much appreciate if you reach out to me on twitter with your questions regarding anything covered in this blogpost.

Comments section

Dimitri Ivashchuk

Written by Dimitri who lives and works in Vienna building useful things. He is passionate about modern web technologies and enjoys learning something new everyday as well as sharing his knowledge with others.

Front-end engineer @CubeTech