and stuff

Organizing Phaser project with RequireJS

Phaser + RequireJS logo

Recently I’ve joined a small game project as the only front-end developer, with responsibilities of actual client-side game implementation. So I started with Phaser, because it’s powerful and free. Phaser is built on top of Pixi.js, which is 2D WebGL renderer, so it’s really fast, and it has a straightforward API. A good process requires a good code base organization: proper directories structure and modularity.

Read More »

Polyfilling Web Components

Web Components logo

Polymer is doing great, since I last wrote about it, it got from pre-alpha to developer preview. On our project we decided to move gradually to components-based front-end. Because of its success, Polymer was the first option to try. We’ve developed and integrated a couple of components. It was great to work with Polymer, its API is pretty close to Web Components spec, so if you did native components, it’s going to be easy to get started with Polymer. Unfortunately Polymer has poor support for IE9, which is still the case for us. We have managed to fix IE9 specific issues, but still there were conflicts with other third-party libs on which our front-end is based. Figuring out all the stuff would take a while for us and unfortunately we have no time for this. From this point we have moved to pure JS solution. I’m really sad about how big companies doesn’t care much about the web.

Read More »

Tip: Use NVM to manage multiple Node.js versions

When you need both stable and unstable Node.js releases or trying to check your application on multiple Node versions or when someone reports an issue caused using another Node version. In these and other cases or without any it’s a good practice to have a tool for managing multiple versions of whatever.


Read More »

Single command front-end dev environment deployment with Vagrant

I’m currently working on a side project where everyone has different dev environments. Someone works on Win, someone on Mac OS, I prefer Ubuntu. Different OS means different environment deployment processes. Let’s say you need Node.js, MongoDB, Grunt, Bower and Compass (Ruby). As a front-end dev I already know how to install all the stuff without pain on all platforms, but other guys may doesn’t know about these components and still they need to install them all, just to be able to build and run project on local machine for further development. I don’t want to waste my time for explaining how to install everything to each person.

Read More »

Measuring loading performance with Grunt

If you ever did performance and optimization testing of your website or web application, you probably have used a service like WebPagetest, which allows to test things in real browsers, at real consumer connection speeds and capture resource loading waterfall charts etc. Among all these useful features, the whole loading process can be captured into a video to show how your application looks like while loading assets into user’s browser.

There’s an interesting topic about rendering performance were discussed, which is directly relates to loading perf. In short: your external CSS is blocking page rendering, huge amount of CSS being loaded on slow connection will probably make a blank screen for a while. That’s why it’s critical to make sure that everything runs fast and experiences acceptable on whatever connection user can be.

Since Grunt has already strongly entered my everyday workflow, I’ve made an attempt to move a part of a such service features to local dev environment.

Read More »

Node.js & real-time video encoding

So I’m doing some slides for my upcoming kind of a talk about Node.js, here in Lviv, at the office. We had one already about Node’s internal stuff and event loop on a really low level, like CPU caches and I/O. I’m going to talk about actual code, API, use cases and popular libs.

Read More »

AngularJS and side projects

This winter has began with fire and blood for Ukrainian people. You may already know why. Lots of things happened and there’s still a struggle between those who wants to be free and those who don’t care about others’ lives and the future of our country. While Ukrainian people are risking of their lives and freedom on the streets, we, IT community, doing our job on the front line of the web.

Read More »

News from the front

The seventh annual Blue Beanie Day is coming. Show some love for web standards.

It’s been a month since the last article. I’ve moved to the west of the country and finished my career as a freelance developer. Currently I’m working as a front-end developer at one of the largest outsourcing companies, and I’m happy with it. It was somewhat a hard decision, freelancing is full of freedom, but at the same time it’s a pain in the ass.

That’s it for now. Love your job.

JavaScript and Vector math

JavaScript is great, math is awesome, if you know both — you have a power. Everything can be represented as a vector: direction, speed and any force. Thanks to Daniel Shiffman’s “The Nature of Code” I learnt a lot about vectors and natural programming. I’m going to post a couple of articles based on my recently aquaried knowledge, where at the end I’ll tell how to make something like this. This is a JS implementation of path-following algorithm, documented code is available on GitHub. Maybe you can try to figure out how it works by yourself.

Read More »

PDF Reader as web component

(9.09.2014) Update: I’ve updated the repo with latest Polymer release and pushed native implementation of the component to ‘native’ branch. Chrome is already fully compatible with Web Components standard.

I’ve been working recently on a forked pages2pdf client-side converter, which is actually did what it stands for, but I wanted to add an ability to preview output PDF. So I made my own PDF reader with PDF.js. It’s already integrated into converter, so you can give it a try.

I thought it would be nice to try to implement the reader as a web component, since I’ve never tried Polymer before. Polymer is a polyfill lib with lots of great things inside. It allows to provide support for Web Components in unsupported browsers and use native APIs in compatible.

Read More »

Healthy CSS with Compass and Autoprefixer

If you writing a lot of CSS, you probably use one of many CSS preprocessors and a feature called mixins to write cross-browser code with ease. I love Sass and I use Compass framework which includes tons of great stuff, as well as CSS3 module.

But sometimes, using mixins/frameworks you can notice extra vendor prefixes in the output code which are simply doing nothing, because particular CSS property is not supported in older browsers at all and in the new one it’s already prefix free, this often happens with IE’s -ms- prefix. Vendor prefixes were just added for all browsers to make sure no one were missed. So your code can get some weight.

Read More »

GLSL Shaders

Well, it’s something about two weeks or more I’m trying to figure out how to make things really nice with shaders. It’s lots of math and low level stuff, but it’s still fun to try and maybe even create something to cheer yourself.

GLSL Shaders is so cool, yeah. But I feel lack of info for beginners, so it’s a bit hard to start doing things right in the moment.

Read More »

Web Components

There was an article about Shadow DOM on the old blog of mine, and folks on the internet still refers to it, so I thought it would be nice to get it back and tell more about Web Components

Everything in this article is true for the moment when it was published. Things may change in the future.

Web Components is a new thing to the web, they are intended to bring more sense and reusability to modern front-end web development.

Read More »