Everything Frontend

Dealing With Makefiles in IntelliJ

Lately I've started to use Makefiles for my frontend projects for their simplicity. In fact a combination of make + webpack + karma/mocha has been working quite well and saves me from installing three hundred gulp / grunt plugins since I can do most of the file manipulation just in bash.

A minor annoyance that has been bugging me is lack of the support for Makefile in IntelliJ. Of course you can install C/C++ language for IntelliJ that does support Makefile, since node includes many native modules IntelliJ starts to index and interpret stuff that it shouldn't.

So there are two things that should be there — basic syntax highlighting and tabs instead of spaces.

Syntax Highlighting

It's turns out it is possible to create custom file types in IntelliJ, I've created one for Makefiles. The number highlighting is a bit funky but the rest should be good. To install it you can download this settings jar:


Then just go to File > Import Settings and import that file.

Indent with Tabs

If you have a setting to detect indentation enabled, this should just work, but in case it doesn't you can install EditorConfig plugin and then add the following to your .editorconfig settings:

# Override for Makefile
[{Makefile, makefile, GNUmakefile}]
indent_style = tab
indent_size = 4

Live HTML goes OpenSource


Live HTML was developed in hopes of providing true live editing of an HTML file starting from nothing and then properly handling CSS and JS insertion, and other quirky changes, but while it was development a lot has changed in a way I approach code and the ecosystem that is available.

Continue reading →

App Version from Git Tag in Qt / QML

Qt + Git

While making an app it is really important to keep accurate track of the versions. Usually such a tracking is implemented via tags in version control system like git. It's also a good idea to keep in mind semantic versioning when assigning version to your code.

But tagging your code with the right version number is only the first step. You also need to show version to the user and in some cases the system.

Continue reading →

Introducing Live HTML App


While developing web pages it is now more and more important to see how changes to HTML markup or to CSS rules affect website appearance across multiple browsers and platforms.

There are tools like LiveReload that address some of those challenges but quite often fall short when you working on a page that has some JavaScript-driven state, like opened popup or expanded menu on mobile device. Applying any change to HTML markup on such page results in loss of this state because of reloading forcing you to either restore state manually after each change which is slow and annoying or to code up shortcut to that state in JavaScript that also takes time.

Wouldn't it be nice if instead you could just update a changed part of the HTML on working page and keep the state intact allowing for live development? There are a few implementations of that idea in the wild, but unfortunately all of them are tightly coupled to Google Chrome debugging capabilities and internal representation of HTML tree inside the editor itself.

A couple of month ago I've decided to see if it would be possible to do something more powerful and more universal and today I'm happy to introduce Live HTML app.

Watch sneak peek video →