VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more
the

Frontend

category

Make your stuff look better – in 3 easy steps!

CSS

Many developers dread that final part of a project when they have coded up a brilliant piece of work and all that is left is making it look presentable. Unfortunately, it’s repeatedly proven that technical brilliance is easily overlooked unless it looks half decent and preferrably a bit unique. And while the trustworthy Twitter Bootstrap takes care of the first, it fails badly on the latter. Sometimes it might also be a bit superfluous to pull out an entire framework for a small piece of work.

So here’s a short, simple primer – in three simple steps – that can help you make your project look a bit more presentable without the need of an entire library.
(more…)


CSS: Block formatting context

CSS

Floats, absolutely positioned elements, block containers (such as inline-blocks, table cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

~ W3C, CSS 2.1

Confusing? I at least thought so, but it’s actually quite simple when explained. The block formatting context is part of the visual CSS rendering of a web page. It affects the layout by changing how the contained elements float and clear. (more…)


Responsive CSS

CSS

The days when it was enough to create html stylesheets that work on one given screen width (eg 1024px) is over. As smartphones and tablets took the market, it was very common to have separate pages for such devices, like m.domain.com or touch.domain.com. Today, browsers are found on devices of all shapes and sizes. The transition between mobile and tablet is starting to blur, and soon browsers are found in both the television and the watch.
(more…)


Hover state on touch devices

Frontend

With an increasing number of users on tablets and smartphones, the need to take touch friendliness into consideration is greater than ever. Even though both the browsers and hardware are approaching desktop speed, there are still some issues with implementing web sites and web apps for these devices. (more…)


Speed up websites using DNS prefetching

Frontend

We recently added a couple of lines of HTML to our mobile website that potentially speeds it up for users with recent browsers (Chrome and Firefox, at the time of writing). The technique might not work for all sites, but it applied very well to ours. I’ll explain how and why (more…)




Safari on iOS 5 Randomly Switches Images

DevOps

Since the release of iOS 5 we’ve received several bug reports about images randomly displaying the wrong image(s) on our front page for smartphones. It seems to be completely random and could affect any of the images, anywhere and anyhow. During one week we would receive anywhere between two and ten reports about this error. In the same time period we would do about 4.5 million page impressions(2.9 million of them from iPhone) on the front alone. (more…)


Speeding up fonts for the web

Frontend

Custom fonts for the web are a bit of a pain. Browsers support different kinds of font formats, they can be relatively heavy and the rendering can vary between operating systems.

Luckily, Google Web Fonts have come along and helped out, providing free and open-source fonts that is easy to implement on any website and should work across browsers. Typekit also provides fonts for the web, although not free.

We were having trouble getting the touch-version of VG’s front page to render correctly on Android – the reason behind this is the use of the “Times New Roman”-font. While Android does have a serif-font (Droid Serif), its metrics are not equal to that of Times New Roman, which results in text breaking at different points compared to the original font we use.
(more…)