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

Clean and simple Z-index with SASS lists

CSS

So.. Z-index. Ever used it on a rather large scale site before? Or in a CSS environment that you don’t really know inside out? What number did you set? Did you make it really, really high just to be sure? Ever used z-index: 100003? Or 99999999?

Highest z-index was an astonishing 999999999999999999999999999 or 9.99e26. With a default key repeat on OS X, this would take 3 seconds of holding down 9 to type.

QuickLefts 2014 CSS report

You don’t do that, right? Perhaps you rather build systems with levels set in hundreds or thousands, to be able to sneak in future elements? The oddball z-index: 1005; here and there?

For my latest project I used a rather simple trick in SASS that got me out of this potential mess, and I didn’t even set a single number. SASS took care of that for me! (more…)


JavaScript Code Style

JS

Code is read much more often than it is written. Having a consistent and defined coding style helps developers read the code, and it also helps to make a code base feel like one unit, instead of individual pieces written by different authors with their own way of doing things.

Having a coding standards is beneficial, but making people follow it is usually a bit harder. Let me introduce two awesome tools to help you: JSHint and JSCS. (more…)


Writing, testing and publishing Javascript modules

JS

So you want to write reusable, maintainable and modular Javascript, huh? Good.

Here’s a rather extensive “getting started”-guide by yours truly – which means it’s my own preferred way of doing things. It’s written with open-source in mind, but most points can be applied to “private” modules as well.

(more…)


How I set up my local PHP development environment on Mac OSX Yosemite in three easy steps

PHP

When I first started writing this post, I considered giving it a title such as “How to set up local PHP development with dynamically configured mass virtual hosting on Apache 2.4″, “Quick and easy prototyping using Liip PHP, Dnsmasq or Proxy Auto Configuration” or even “The Ultimate Guide to Rapid Development on OSX 10.10″. I did not.

In my daily job as a Development Manager, I don’t get to code very much, but when I do, I want to have a setup that allows me to quickly create development projects and prototypes in the ~/Sites folder and have them show up as vhosts automagically, without having to edit any configuration file(s).

I also want to make sure my pseudo-toplevel domain .dev resolves to localhost and any domains/subdomains i choose to create lead into the relevant web root folder.

(more…)


Aggregator apps: friend or foe?

Android

Aggregator apps are changing the way news is discovered, consumed and packaged. The popularity of aggregator apps vary largely from country to country. A quarter of the top 20 apps in the news category on both Googles US Playstore and Apples US Appstore are aggregator apps.

More and more publishers have begun to understand the need to have a presence wherever their readers or potential readers are consuming content. Some have chosen to work together with aggregator apps like Flipboard, Smartnews and Yahoo news digest so as to capitalize on this relatively new distribution channel.

(more…)


The magic of createObjectURL()

JS

The web platform is maturing faster and faster, and we’re seeing the work normally done by native desktop applications now often shifting towards web-based applications instead. Features that may appear to have little importance can be really powerful when combined together.

A good example of this is URL.createObjectURL(). On it’s own, it really doesn’t do much. Paired with the HTML5 video and audio element, or even the good old image element, it gets to be really powerful.

(more…)


Is my pink your blue?

Design

pinkblue

When I grew up, far above the arctic circle, I was told that the sun is yellow, the sky is blue and the grass is green. However, most of the year the sun was gone, the sky was black, and the ground was covered with snow. Associations to colours were not always consistent. Light, and the environment around us, determines how we perceive colours. I do not know if everyone with normal vision see the same colours. My pink could be your blue, and so on. What I do know, is that some people are colour blind, some have low vision and some are blind. As a designer, I have a huge responsibility to create the best solutions possible, accessible for all. Recently, I have been diving into a wide open ocean of knowledge, swallowed some salty water and floated up with increased insight.

 

(more…)


Using local packages as composer dependencies

PHP

Composer changed pretty much everything when it comes to including dependencies in PHP projects. No more SVN externals or copying large library folders into your project. This is really great, but there’s one thing I’ve been struggling to find a smooth process for; developing dependencies for your project.

When implementing your project, the need for some module, library, service provider or something else will arise, and sometimes you’ll have to implement it yourself. So, how to do that? (more…)


6 deep link tactics to drive traffic to your mobile apps

Android

Many publishers have developed mobile apps that deliver a better user experience than their mobile websites. Getting people to use your app instead of your mobile website can increase user engagement with your publication. Using different deep linking techniques to link to content within your app is one way of increasing traffic to your mobile apps and establishing app reading habits with your users.

In an ideal world there should be no difference between an ‘app link’ and a ‘web link’, links should simply work no matter what device or platform you are using. The device should know whether to open the link in an app or in a website depending on the users preference. It should be possible to link from one app to another app or from a website to an app without knowing if the user has the app installed. There is currently no standardised way to do this but there are a number of ways this can be implemented.

Google, Facebook and Apple are among the many companies that have developed initiatives to improve deep linking and tackle some of these challenges. Here are some of the others mobile.deep.linking, SPARQ, AppURL, mURL.cc, appsfire, URX, Facebook applinks, Cellogic, Branch, Tapstream.

(more…)


Pushing the news, 7 things to consider when using news-related push notifications

Android

There is no doubting the power of push notifications to generate instant spikes in traffic to your app. Push notifications have proven to increase user engagement and loyalty to a publication. It can help with conversions and customer retention and they can simply remind the user of how great your app and content is. According to localytics push notifications drive 88% more app launches, 52% of people opt-in to push notifications and users who enable push have a nearly 3X higher retention rate compared to those who disable push.

The users who accept push notifications are some of your most loyal customers. Who else would care enough to download your app and give you permission to interrupt their day at a time you deem appropriate with a notification you feel is relevant to them. This even happens when the app is not running and the screen is locked. This is an incredible act of trust. This trust, if betrayed is difficult to win back. The is brilliantly portrayed by Breaking News in this video

(more…)