-
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