My Web Development Journey, Or How I Fell In Love With WebStorm
A story about my experience with different IDEs and code editors as a front end developer.
Recently, the wife of a friend of mine decided to start learning programming. She is determined to become a front end developer. My friend asked me if I could help her set up her VSCode.
While I was still in university, I programmed a lot using VSCode. That was almost 4 years ago. Since then, a lot has changed.
The conversation with my friend made me think about all the editors and IDEs I have used so far. Which turned out to be quite a few.
This article shall give you a chronological recap, from where I started off to where I am at the moment.
Overview
Notepad++
When I was in high school, I chose computer science as an elective course. The beginnings were very basic. We learned about a small robot, named Karel, who spends his time moving inside a grid. Later on, Java and Haskell came a long.
In class, we used the Microsoft Windows editor Notepad++. It was very popular among the classmates, who already had some experience with computers and coding. For absolute beginners, it is a great choice. The user interface (UI) is straightforward and focused on the code.
Brackets
Eventually, I enrolled in university to learn about web development. At that point, I learned a lot about HTML, CSS and JavaScript through YouTube tutorials. The channel I watched on YouTube, was using an open-source editor called Brackets. It’s even more light-weight in terms of the UI, than Notepad++. How is that possible?
Besides the default features, Brackets also provides the option to install custom plugins. Back then I only installed a handful of plugins, such as custom file icons, a beautifier (formatting code) and emmet (HTML and CSS completion).
The main selling point is the live preview. On the sidebar you find a lightning icon. When you click it, Brackets starts serving your project’s files. Your browser automatically opens and you can navigate through them.
All changes you make to your code are then immediately displayed in the browser. Another thing that amazes me, is that Brackets will highlight the elements in the browser, when you select them inside the editor.
It works like magic.
Back then, I didn’t know much about the whole ecosystem of tools that is available for developers. But even if I did, the option Brackets presents, is much easier, than having to set up a hot-reloading service on your own. Especially, as a total beginner.
Here’s a short YouTube video, that shows the live edit mode:
VSCode
You may remember, the intro to this article, where the wife of a friend of mine needed help setting up her VSCode. That’s the thing that also came to my mind, when I thought of VSCode. It’s an editor where a lot of things have to be set up by the user.
And that’s where I have trouble to remember how I configured my VSCode at the time. Like I said, it’s been almost 4 years since I used it actively.
To help me refresh my memories for this article, I installed it again and decided to set it up. One of the things that stood out to me, is the git handling. It seems to me, that the default git tools from VSCode are rather basic.
Back in the day, I didn’t really use git much. When I did, it was mostly about creating commits or branches and pushing them to my GitHub repositories. So it never bothered me.
Coming back to the present day, I tried to add more git tools to my VSCode. So, I typed “git” into the extensions sidebar browser and was presented with a selection of available tools. There is also a documentation on what features are available if you want to use git with VSCode.
But at a quick glance, it still feels like the best way to use git in VSCode, is to also add extensions. For example, I couldn’t find a way to use git blame using the default VSCode without using an extension, which is an absolute basic feature for WebStorm.
[ On the screenshot above, it shows the git blame extension. ]
All in all, VSCode requires you to tweak things to become a fully functional IDE. It depends on you, if that is what you enjoy or not.
JetBrains: PHPStorm and WebStorm
In my 5th semester of university, I started working as a working student. I was still using VSCode, but soon I was introduced to PHPStorm.
When I had my first code-related question, the senior front end developer looked at my screen and the first thing that came to his mind was:
“Why aren’t you using PHPStorm?”
A few minutes later, I had a brand-new copy of PHPStorm installed on my local machine.
In the latest chapter of my IDE journey, I switched from PHPStorm to WebStorm. The main reason is the subscription price. Webstorm is much cheaper than PHPStorm. The trade-off is the missing database integration and the PHP tools. Since I work mostly with JavaScript, it is fine for me to not have those features.
Git tools
In university, we, the students, often used git as a backup tool. We never really went too deep into the git workflow. When you work on bigger projects, with many developers and branches, versioning gets messy. That is where WebStorm shines brightest.
In my opinion, the git tools are what makes me love WebStorm so much. Most notably is the visualization of the changes that happened. I cannot live without them anymore.
This includes:
- Merge Conflicts (Resolve)
- Diffs (Commit)
- Uncommitted Changes (Highlighting)
- Branches (Tree visualization)
Let me give you a short overview, using a few example situations.
If you are curious, what theme I am using, check out Material Theme for WebStorm.
Example 1: Merge Conflicts
There is a merge conflict that needs to be resolved. The incoming changes (right) mess with my own changes (left). I can easily resolve them, using the visualization above.
Example 2: Diffs (Commit)
I decided to commit some changes I made. WebStorm provides me with a visualization of the changes I made and helps me to compare them with the previous version.
Example 3: Uncommitted Changes
I added a new line with a small comment, which is not yet committed. WebStorm highlights this for me.
Example 4: Branches
I am working on a project, with many different branches. To help me navigate, I opened the branch overview, which shows me all branches and the tree visualization.
Conclusion
Now when I was talking with my friend, on the topic of helping his wife to set up her VSCode, I immediately suggested going with WebStorm instead. Above all, she wants to become a front end developer, so WebStorm is the ideal solution, right?
After writing all of this, I can confidently say, that it totally depends on the situation.
The JetBrains products (WebStorm, PHPStorm, IntelliJ, etc.) all come with amazing tools right out of the box. They don’t require any configuration. It just works. When you start working, it helps you a lot, when you don’t have any issues with your IDE. You can focus on the important thing, the code.
Does this make WebStorm the perfect solution for a total beginner?
If I had to start all over again, writing small HTML snippets and CSS. I would start out using Brackets. It is free of cost, not like WebStorm and comes with basic tools (ex. emmet and the live preview). Essentially, you are able to write your code and not worry about any configuration.
When you are getting to the point, where you want to use versioning. Like, putting your awesome personal projects on Github. You should take a look at VSCode. There are a lot of tutorials online, that will help you with the basic setup.
VSCode is a good way to show you the power of tweaking things. Which is exactly, what you will need to do as a programmer. Finding solutions for mysterious and foreign problems you have never seen before.
Once you start working on bigger projects, in a commercial setting, it might be a good idea to look into the JetBrains suite.
Thank you very much for reading this text. Feel free to add your thoughts in the comments!
