and stuff

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

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 »

Rigging and skeletal animation in Three.js

Update: Do not move/rotate the armature, this will cause geometry stretching. Align the first bone using its tail/head position

Three.js supports some basic rigging and skeletal animation. The simplest way to achieve a nice character animation is to make it in appropriate software first. This article is going to be about Blender rigging workflow and how to do the best for a clean Three.js export.

Read More »

My first ever microcontroller

So, it’s Arduino Mega 2560. I know it’s a bit late, all the hype was back in 2010-2011, I think. But here I am in 2013 and still believing in these electronic things.

It’s all started about a week ago, when I was seeking for a dumb and somehow fun stuff on youtube at 4am, when suddenly I’ve noticed a link to video called AeroQuad (have no idea how did it happen). And that’s where I’ve got a slap in my face with two great things: Arduino and a quadcopter.

Read More »

Getting started with Babylon.js

Babylon.js: a complete JavaScript framework for building 3D games with HTML 5 and WebGL

Babylon.js is yet another Three.js, that’s what I’ve noticed when started with the lib. The framework is on its early stage, a lot features hasn’t been released yet, but there are a bunch presented already. So, let’s start with a simple scene.

Read More »