Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

CSS variables are here for ages

posted in CSS3 on 2014-08-13   div content font size color container css width div class footer variables

Every front-end developer that starts reading about CSS preprocessors thinks “Oh, finally variables in CSS". Indeed, the ability to create and use variables in CSS makes our code much more flexible. However, I think that there is no need to use a preprocessor to create flexible stylesheets.

read more

Testing responsiveness

posted in HTML5 on 2014-05-14   width content viewport device browser panel nav href chrome

We all know what responsive means nowadays. We, as developers, normally develop responsive applications. There is a dozen of instruments helping us achieving our goals. Some of us use extensions and even pay for them. However, I'm using one thing - Google Chrome browser. In this article, we will see what the Chrome's capabilities for testing responsiveness are.

read more

Using media queries in JavaScript (AbsurdJS edition)

posted in JavaScript on 2014-03-04   media css function var width window matchmedia dom html mq absurdjs

If you believe in responsive design you probably use a lot of media queries. That's a CSS feature which gives us the power to add something like if statements. We are able to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

read more

SASS mixin for grid generation

posted in CSS3 on 2013-08-20   div wrapper grid sizing border box box sizing border columns mixin div div width sass

The mixins in SASS are really helpful. Here is something really short which I just start using. It's a mixin which I apply on the grid's container.

read more

SASS mixins covering media queries

posted in CSS3 on 2013-08-15   point media content media query min width break points media queries means sass mixins

These days I'm working on this little thing. It's a CSS micro framework following atomic concept. My preprocessor of choice is SASS. That's why I wrote several articles on this subject. Today's post is about media queries mixin.

read more

SASS: differences between mixins, extends and placeholders

posted in CSS3 on 2013-08-05   awesome width height mixin body placeholders radius css sass extend awesome

I used LESS a lot. These days I decided to try SASS and to be honest it's a better choice for CSS preprocessor. It just gives me more functionalities and better control on my code. There are few instruments for architecting your CSS logic - @mixin, @extend and placeholders. However there are differences between them and specific use cases.

read more

CSS Challenge #2: Layouting

posted in CSS3 on 2013-08-03   layout width text sizing border box box sizing border padding image float left layout c layout b

The first challenge, was something which I was thinking about a lot these days. The next one is actually a well known common task, but it is still difficult. In every project we have different types of layouts. Of course there are some patterns. The idea today is to implement them with pure CSS.

read more

CSS Challenge #1: expand and center an image

posted in CSS3 on 2013-08-01   image background wrapper width div css center background size cover 200px overflow hidden height 200px overflow

That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript.

read more

CSS: :before and :after pseudo elements in practice

posted in CSS3 on 2013-07-26   content css block text font element width code links height

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

read more

Real time game with NodeJS and Socket.io

posted in Nodejs on 2013-05-13   user var function users socket io game data end clicks currentwidth

NodeJS gives me the ability to write back-end code in one of my favorite languages - JavaScript. It's the perfect technology for real time applications. In this tutorial I'll show you how to build a web chat with Socket.io.

read more

PHP: add text to transparent PNG image

posted in PHP on 2011-03-10   im digit image png font originalimage php width

Simple way to produce numbered image with PHP. The script uses PHP GD.

read more

Scaling rounded corners in Flash

posted in ActionScript on 2010-12-11   clip grid clip slicing height width void function rectangle resizing

I'm absolutely sure that you've already met this problem. You know, these nice rounded buttons that are provided by the designer. They are really cool, but sometimes the label of the button is so long that you have to resize/scale the image. ActionScript3 provides simple way to solve this issue.

read more

How to create realistic Earth globe in Flash (AS3, Papervision3D)

posted in ActionScript on 2010-09-16   stage globe var import org papervision3d rotationx rotationy moviematerial sphere stage stageheight stage stagewidth

Papervision3D is a perfect tool for the purpose. As you will see such a task needs only few lines of code. To make the example a little bit more interesting we will add additional code to control the rotation of the globe by the mouse.

read more