Arrow with LESS mixin

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

Arrow in a knee

Hosting with github

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.

Ladies and gentlemen, please welcome our new best buddy: Github Pages!

Open cart with github

Masonry – beautiful grid-like layout in a click of a button

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.

Pinterest screenshot

Code sharing with WordPress

code sharing with wordpress

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.

Metatags for mobile development

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.

Multiple markers with the exact same location

Google Maps API is an awesome tool, even though it has enough cons to hate it, it still has more pros to enjoy. In 3d revision of the API Google introduced new feature called clusters, which allows you to unite multiple markers in certain location and display a cluster instead, with a number of places it includes. Clicking on a cluster leads to zooming in, which reveals hidden markers and cluster dissapers.

Map with multiple markers at the same location

wstdays-preparation
wstdays-audience
wstdays-calendar
wstdays-windows8
wstdays-mcss
wstdays-click-me

Web standard days in Kyiv

“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

Loading overlay in Mobile Safari

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.

Page with loading indicator

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 :)

Overlay on top of html5 video tag

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).

Browser mock-up, that shows video element with context menu on top of it

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