I’ve used to make a dozen .arrow classes before, but than I got an arrow in my damn head…

I’ve used to make a dozen .arrow classes before, but than I got an arrow in my damn head…

Moving your project online sometimes can be a tedious task, which requires lots of time and financial investments. And what if your project life-cycle is less than a jar of milk in refrigerator? What if you just want things to work, with no extra hassle? Well, there is a solution.

I believe it’s hard to find an internet user, which haven’t heard about Pinterest. It’s beautiful layout with lot’s of stunning pictures and lightweight design is probably one of the most memorable experiences on the web. But how it all works, you may wonder. Let’s take a closer look at one of the reasons why this social network became so popular.


Once frontendfan.com went live last month, I’ve been thinking on things to improve. But there was one aspect that required my immediate attention – code sharing. Since my blog is primarily based on sharing challenges that I face, posting snippets of code in clear and nice-looking manner is a very important feature.
The first issue that you’ll ever encounter with your first steps into Mobile Development, is that your page doesn’t look like it was optimised for mobile devices. Browser just won’t treat it as mobile oriented by default, media queries won’t work and you’ll probably end up being confused.

“The “Web Standards” association is a community of web developers using such open standards as HTML, CSS, SVG, JavaScript and others. The core of the community was created by active participants of the Webmascon project forum in 2006.”
~ webstandards.ru
Sometimes it’s a good practise to put an overlay with a progress bar or a gif image on top of your page, to indicate that loading is in progress and hide page rendering from the user.

As usual, on mobile devices we might have issues …and we do. On iPhone and iPad element’s height is calculated in a weird way, so if you assign “height: 100%” to an overlay, it will only take 100% within the visible area. So if you scroll down, overlay won’t be there. Position fixed is supported in iOS 5.0 +, although it doesn’t work good (there’s a significant delay between scroll event and the moment when element with fixed positioning catches up).
Do you have the feeling when you know exactly what you mean, but you can't find a succinct way to express it? The guy that posted this classic piece of code to the forum surely does: if (flag == false) flag = true; else if (flag == true) flag = false; Hint: flag = !flag
I’ve just stumbled upon this hilarious post and I can’t pass by without sharing. Actually I’ve done stuff like that before, for instance when I’ve wanted to toggle object’s property along with the class assigned.
Enjoy :)
Placing elements on top of video tag isn’t any different from others. Yes, sometimes you should specify video’s z-index, since some browsers treat it in a weird way, but other than that, it should work fine. What I’ve discovered recently is that if you have an overlay on top of your video (e.g. navigation menu), touch event on an overlay will cause video playback. This issue is reproducible only in Mobile Safari (iPhone/iPad/iPod Touch).

Touch event on “Open Recent” link will trigger video playback.