7 posts tagged


Useful Tool: Regex 101

Ilya Gelman

Sometimes we need to write or understand complex regular expressions. It might be hard to remember all the syntax tokens, especially if not dealing with RegExp on a daily basis.

There’s a great tool called Regex 101 that can ease the pain. It lets you write a regular expression and test it on example inputs, providing visual explanation of what the heck is going on. It also shows the match information for the expression so you can know what values to expect when testing a string in code.

There’s also a quick reference in case you need to refresh your memory. Just make sure you select the JavaScript “flavor” in the left sidebar.

Addy Osmani on Flame Charts

Ilya Gelman

When it comes to optimizing performance, flame chart is a powerful tool for profiling that provides insights on the application performance.

In this short video Addy Osmani shows how to work with this feature of Chrome DevTools.

On Thursdays we post videos that we believe are worth watching and that can make you a better front-end developer. Have such a video to share? Share with us

Useful Tool: Octotree

Ilya Gelman

Sometimes when looking at some project’s source code on GitHub, it is hard to navigate and find files without cloning the whole repository.

Buu Nguyen has built a great tool to solve this problem: Octotree. We use it when we look and work with open-source libraries.

Octotree is a browser extension that scans the project on GitHub and shows its file structure in tree format that is easy to navigate. This way you can explore any project contents and jump between files instantly. Working with third-party libraries is now more efficient.

Get it here

Git   GitHub   Tools

Useful Tool: SCM Breeze

Ilya Gelman

Git is great. We use it in all our projects. Some people prefer GUI: either built-in VCS integration from VSCode or WebStorm, or stand-alone apps like SourceTree. For the rest of us that are more comfortable with the command line, there is a must have productivity tool: SCM Breeze

Demo from the original repository

It saves time when working with git from the Terminal by adding shortcuts for git commands. Obviously it is faster to write gs instead of git status, gb instead of git branch and grhh rather than git reset HEAD --hard.

To see all git shortcuts added by SCM Breeze, run git_aliases.

Of course you can also easily add such aliases in your shell rc file by yourself, but this tool have even greater feature: file shortcuts. They allow you to reference files by numbers. Imagine that you need to stage 4 files out of 15 for commit. With this tool it would be as easy as gs followed by ga 1-3 6 (translates into git add $1 $2 $3 $6).

Referencing files by numbers is very efficient

This works both with bash and zsh. Get it here.

Git   Productivity   Terminal   Tools
Earlier Ctrl + ↓