A Dive Into Plain JavaScript

While I’ve worked over a decade building various websites, it has only been the past 3 years that I’ve started learning more on how to work with plain JavaScript, instead of using jQuery always as the starting point. The fact that I’m learning a dozen new things every day now, has made working on Adtile’s JavaScript SDK feel more like building an open source project than actual work, and I have to say I like that a lot.

Today, I’m going to share some of the basic things I’ve learned during the past years, which will hopefully also help you to dive into the world of plain JavaScript, making it easier to decide whether or not you will need jQuery in your next project.

Continue reading

A New Path

Today, after over two years, I’ll be leaving my position at Kisko Labs. I’ve started working on a new responsive advertising solution for smartphones and tablets called Adtile. Another big news is, that we have just received a $2.7 million funding to bring this product to the market. There’s also a story about us on TechCrunch, so check that out.

Banner ads might still function well in print, but it’s clear that they just don’t work on screen and especially on mobile devices anymore. Instead of trying to make the current model work somehow, we decided to start with an entirely new idea and ditch the old model—and the annoying banners. As we are focusing on mobile and building a customizable SDK for both web and native app developers, we will be also building another device lab soon only for this purpose.

The company where I’ll be working at, TenFarms, is based in Los Angeles, so I will be most likely spending time in the US a lot more too. Besides Adtile, I’ll be soon revamping the whole web presence of our second product, Photopoll iOS application too.

Continue reading

Plugin For Responsive Navigation

Responsive Nav is a tiny JavaScript plugin which weighs only 1.6KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition to height: auto, which isn’t normally possible with CSS3 transitions. The plugin, along the site, was released today on Smashing Magazine.

Continue reading

Prototyping Responsive Typography

The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type. Many of the basic concepts of typesetting are still the same as 500 years ago.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. Responsiveness, when added on top of this, makes this period of change we are living very fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is now changing too (as Mark Boulton states it).

When talking about “responsive typography,” I don’t just mean flexible body text, but also that all our decisions should be based on universality. Universality, as a design principle, should guide us when choosing web fonts and when testing how our type works on various devices and platforms. It should be the core principle behind all the work we do.

Movable Type

Continue reading

File Upload Support On Mobile

I were quite surprised few weeks ago when I found out with Matt, my colleague, that no one has tested thoroughly which mobile browsers support input type=file and how to reliably detect the support. After an hour of Googling we literally gave up and decided to find it out ourselves. The results are shared here to everyone for future reference.

For the detection part, I am using similar code as Modernizr does, but I’ve added a separate user agent regexp to check against browsers that falsely report support. There are quite many of those false positives really, at least all Windows Phone devices running OS 7.0-8.0, Android devices running OS 1.0-2.2, Kindle devices running OS 1.0-3.0 and all WebOS devices running OS 1.0-3.0.5 (Although the latter ones being quite old already).

Continue reading

Remote Preview

Remote preview is a tiny JavaScript based tool which I built for our test lab. It allows you to preview any URL on large number of mobile devices simultaneously. Just enter a URL, hit enter, and new URL gets automatically loaded on each device. Remote preview works on platforms like Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

Remote Preview works by making an ajax call every 1100ms to check if the url in the ‘url’ file is changed. If it is, the script will then change the src attribute of the iframe and load a new page into it. If there’s no changes, the script will just keep polling the url file until something changes. Remote Preview allows very fast previewing of different URL’s to check for possible layout problems, which can then be debugged using various other tools depending on the platform where they occur.

There are some issues and limitations with the way it’s being done, but as there currently is no other tool which allows you to preview web pages on all these platforms, I think this can be a handy addition to any test lab’s toolset.

Continue reading

Building A Device Stand

Not so long after the device lab was born I realized that we need a much better way to store and charge all the 40+ devices. There didn’t seem to be any existing solution available which you could just buy, so I started thinking what would be the easiest way to do something like that myself. After some research I ran into this device testing station by 64 Digital and thought it looked like a perfect solution.

The main idea is to provide a dynamic and secure way to store phones, tablets and other devices and make it possible to use them for testing without the need to actually remove them from the stand. Devices are held in place using Velcro tape which is attached both to the back of the phones and the stand. That makes it easy to detach the phones, but it also makes them stick securely to the wall. The whole stand system is done from two 800mm wide racks, and I’m planning to make a third one too so that we have available space to continue expanding our device collection.

The wood materials for both racks cost under 30 euros. The Velcro tape was actually the most expensive part as 25 meters of it cost about 70 euros + shipping. I used two full work days to built these and third to paint them. I guess someone with actual experience might be a lot faster as about half of that time went into trial and error. ❦

Continue reading