Osvaldas Valutis blog

Moving the first JavaScript array item to the end

Sun, 24 Dec 2023 00:00:00 GMT

As an example for the use case, have you every ran into API’s which proudly feed you with week day based data, but ordered not in a way you expected, typically starting the week with Sunday, not Monday, or the other way around?

  const data = [`Sunday`, `Monday`, ..., `Saturday`]

Well, there’s a single line cure for this:

  data.push(data.shift())

Result:

  console.log(data) // -> [`Monday`, ..., `Saturday`, `Sunday`]

Keep in mind you don’t need to reassign this to the variable as the modifications are performed directly on the array.

The Great Gatsby Redesign

Sat, 21 Jan 2023 00:00:00 GMT

Reading my previous redesign post from 2014 I cannot believe how significantly the industry has evolved since then: no more Modernizr, loadCSS, custom responsive image implementation; IE out of image for good, Edge and Opera adapting Blink, Jamstack and that’s just a drop in the ocean. Most of these “news” feel ancient already.

The latter fancy word is what I turned to this time, or to be more specific – Gatsby deployed on Netlify meaning I switched PHP for Node, SQL for GraphQL, CodeIgniter for Gatsby, vanilla HTML, CSS and JavaScript for React and Styled Components, custom made CMS for Markdown and static site generator.

We’ve been using Gatsby at Odd Camp for a few years now, starting from its very first version, so this felt like a natural choice for me (we’ve got our own Gatsby starter). Oh, and there some quality plugins to choose from. I’ve implemented the following:

gatsby-source-filesystem
gatsby-plugin-feed
gatsby-transformer-remark
gatsby-remark-copy-linked-files
gatsby-remark-extract-image-attributes
gatsby-remark-images
gatsby-remark-images-insert-wrapper-attributes
gatsby-remark-embed-video
gatsby-remark-http-to-https
gatsby-remark-external-links
gatsby-remark-prismjs
gatsby-remark-autolink-headers
gatsby-plugin-catch-links
gatsby-plugin-svgr
gatsby-plugin-styled-components
gatsby-plugin-sitemap
gatsby-plugin-offline
gatsby-plugin-eslint

Even though we have slowly started replacing Gatsby with Next.js I do have some Gatsby techniques I am going to share.

The previous version of my website is archived at v3.osvaldas.info.

Container-Adapting Tabs With “More” Button

Wed, 02 May 2018 00:00:00 GMT

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways..

There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Odd Camp we were debating on the most appropriate UX technique for tabs for our client’s website…

I wrote an article, coded a demo and got it all published on CSS-Tricks — you're very welcome to read, try and use it!

I Joined Odd Camp – Come Hire Us!

Fri, 06 Oct 2017 00:00:00 GMT

Actually I did that right before entering the year of 2017 and my official start was on January 1st. After getting back to freelancing in 2012 I felt a need again to join a team and thus gain more from my professional life. As the matter of fact during the first month at my new workplace I felt like I learned more than in a whole year of freelancing. I’m not saying freelancing is wrong. It’s good as long as: you are able to take out most of it; it doesn’t isolate you; it doesn’t become a routine suppressing your progress.

Therefore I couldn’t be more happy to have my road crossed with Odd Camp – a team of talented and highly experienced designers and developers. Supercharged with a great sense of humor we design and develop digital products and services for clients in Sweden and around the globe. We are a small team of 10 with the heart in Stockholm, but at the same time distributed accross the world: Sweden, Portugal, Greece, Slovakia, Bulgaria, Dominican Republic and Lithuania.

2017 was a blast. Besides getting my hands some fancy web technologies on and interesting client projects, we also had a one week long company trip in Nice (France) and its surroundings. Then a week later the most of our front-end division attended Mirror Conference in Braga (Portugal). As if this was not enough, during our conference visit we gave a warm and humble speech called “Designing the Remote Business” at Braga.Design.JS meetup:

In case you’ve been looking for a decent team to trust the design and technical parts of your online presence or business, don’t you ever hesitate to contact Odd Camp.

Service Worker for Middleman based websites

Sun, 24 Sep 2017 00:00:00 GMT

Middleman is a Ruby based static site generator which we use heavily both for prototyping (checkout our Middleman boilerplate) and production sites. In my previous article on Service Worker, I overviewed the most common challenges you may face when implementing the technology. This time I'd like to dive into a single specific topic of enabling a worker on Middleman based website as there are a few things to deal with…

Versioning

Service Worker is all about caching resources. In order to invalidate cache with a worker, you have to assign a version number to each resource cached. You could do that manually each time you make a change on a website, but that's probably not a thing you want to keep in mind and spend the time on. So how can we automate the process on the Middleman setup?

Since Middleman is a static site generator, one of the final phases of serving a website is making a build which, simply put, is converting source files into static ones. Adding .erb extension to a static file enables us to execute Ruby commands in it. This basically means that we can insert a dynamic content areas in the file and so make them differ on each build. Which is exactly what we need for implementing versioning for our Service Worker and thus instantly serve the fresh content for users.

The worker file ought to be placed here:

/source/serviceworker.js.erb

I found Unix timestamp to be a perfect method for naming the resource versions as in principle they are always unique on each build. Now we can put this in serviceworker.js.erb:

const version = '<%= Time.now.to_i %>';

…and take the advantage of version further in the code.

Digested assets

Digesting the assets is good for cache busting. This makes the change of your border radius instantly visible for users. Therefore, I wouldn't be surprised if you have :asset_hash activated. However, that leads to a problem: hardcoding paths of the assets won't work because they differ on each build (the files get renamed to be more precise). But because of .erb, we can insert dynamic paths in Ruby way:

const criticalResources = [
  '<%= asset_path :css, "/#{app.config[:css_dir]}/application" %>',
  '<%= asset_path :js, "/#{app.config[:js_dir]}/application" %>',
  '<%= asset_path :images, "logo.svg" %>'
];

As you might have noticed, CSS and JS implementations differ from images. I did run into a weird issue where asset_path were producing wrong paths to CSS and JS files. This tiny workaround solved this.

Multiple languages

The number of languages on a website is a thing that you do not alter very often. But if you decide to hardcode the list in worker's file, there is a big chance you'll forget to update it when the time comes. Again, that's probably not the thing you want to keep in mind, so it's best to automate stuff when possible. Luckily, there is a way to get a list of languages available in Middleman and they can be inserted like this:

const appLangs = ['<%= app.extensions[:i18n].options.langs.join("','") %>'];

Using appLangs you can automatically cache these front pages and serve the appropriate "offline" page/image.

Debugging

Service Worker is a test demanding technology and console logging is probably the most important factor in testing. But the thing is that you likely don't want to log these messages into user's browser and only want to do that in development mode. Middleman provides means to detect the environment type for an app:

const logMsg = (msg) => {
  if('<%= app.config[:environment] %>' == 'development') {
    console.log(msg);
  }
};
// ...
logMsg('Install event');
// ...
logMsg('Activate event');
// etc.

By the way, there is more to debugging Service Worker.

Service Worker gotchas

Thu, 03 Aug 2017 00:00:00 GMT

Service Worker has already been here for a while: since 2015–09 it has been fully supported in Chrome/Opera and if compared to what we have today it has gone a promising way of improvements, bug fixes, became more easily debuggable and is supported much widely (hello Firefox). That led us into using the technology in production and implementing it in our kollegorna.se website, as well as some client projects. We've learned there quite a few gotchas to grasp in order to get Service Worker working correctly…

Here is the list of what I'll be overviewing in the article:

Service Worker is a part of Progressive Web Apps
What Service Worker is for
Registering a Service Worker
HTTPS and localhost
Service Worker working scope
ES6: to be or not to be?
"Offline" page
Service Worker lifecycle and events hierarchy
Critical and non-critical resources
Service Worker strategies
Serving "offline" image
Garbage in cache is your problem
Service Worker and DOM
Service Worker for multilingual website
Service Worker is backend-dependent
Debugging Service Worker

Service Worker is a part of Progressive Web Apps

Service Worker is a part of Progressive Web Apps - a set of means for making websites accessible, functional… and annoying when not used properly (I'm talking to you, Web Push Notifications). The term of Progressive Web Apps was born at Google and is defined by several conceptual terms that you probably already know, but the latest and most exotic ones are: Web App Manifest, Web Push Notifications, Web App Install Banners.

What Service Worker is for

The best thing about Service Worker is that it enables you to cache static HTML documents, assets and be completely in control of what you are serving to the user. It means that if cached previously your website can be available to the user who has no Internet connection or if your server went down. You can also serve the cached documents and/or assets even if there are no technical issues and that results in much faster website load times. Sounds like fun? With the great power comes responsibility - you'll have to take care of cache size, make sure it's not exceeded and consists of the latest version of assets.

Registering a Service Worker

Think of Service Worker as a JavaScript file - serviceworker.js. The very first step in this journey is to tell the browser your website has a Service Worker that you want to register:

// a check if the technology is supported by browser
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/serviceworker.js');
}

It is that simple but here's the first gotcha discovered and documented by Jeff from Google:

For example, the Google I/O 2016 web app features a short animation before transitioning to the main screen. Our team found that kicking off the service worker registration during the animation could lead to jankiness on low-end mobile devices. Rather than giving users a poor experience, we delayed service worker registration until after the animation, when the browser was most likely to have a few idle seconds.

Similarly, if your web app uses a framework that performs additional setup after the page has loaded, look for a framework-specific event that signals when that work is done.

Because you can choose when to install Service Worker you should pick the idle moment for it. Here's the rough hypothetical code visualisation of the quote above

if('serviceWorker' in navigator) {
  document.querySelector('.hero').addEventListener('animationend', function () {
    // service worker is registered only when the animation ends
    navigator.serviceWorker.register('/serviceworker.js');
  });
}
// ---
App.init({
  // config
  complete: function() {
    // service worker is registered only when the app is initiated
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/serviceworker.js');
    }
  }
});

Anyway, if your website is simpler than that, still the minimum recommendation is registering the worker only when the page has been fully downloaded so that it doesn't slow down the other probably more important processes on your website:

if('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/serviceworker.js');
  });
}

HTTPS and localhost

Another gotcha is that in order to get the Service Worker going your website must be accessible via HTTPS protocol or localhost due to security reasons. The later only serves for development purpose. Despite the fact that Service Worker is operative through localhost it won't work through the IP of your internal network, like 192.160.0.100 or similar.

Service Worker working scope

The location of serviceworker.js file on the server is a gotcha as well: the worker will only operate on its current and child paths. In other words if the location of Service Worker file is kollegorna.se/serviceworker.js, it will work on the entire site (origin), even if I am browsing here kollegorna.se/ or there kollegorna.se/i/am/here.

As you might have realized having the file on kollegorna.se/about/serviceworker.js won't invoke the worker when browsing on kollegorna.se/ nor kollegorna.se/contact.

Note that domains and subdomains all are different origins, so for example the worker on kollegorna.se/serviceworker.js will not operate when browsing on labs.kollegorna.se. Placing multiple worker files will get you going.

ES6: to be or not to be?

It is completely safe to use the renewed JavaScript syntax in your serviceworker.js file, because browsers which support ES6 syntax also support Service Workers. However, I wouldn't recommend using the new syntax for code that registers Service Worker, unless you use a transpiler. Otherwise JavaScript errors will be thrown for users whose browser won't be able to interpret the new syntax.

I will be using ES6 syntax and functions for Service Worker file related code examples here in the article. I encourage you too as it's not the future anymore, it is the present.

“Offline” page

Berry on the cake: besides coding a Service Worker, you should also make a custom "offline" page with its own URL (e.g. /offline/) which is a part of Service Worker experience. It will be displayed when a requested page is inaccessible due to internet connection problems or server failure. The how to – later in the article. Our "offline" page at Kollegorna is pretty simple:

Service Worker lifecycle and events hierarchy

Each time the user visits your website, the browser downloads the worker's file. If it is a repetitive visit and the file has been downloaded before, the browser compares them both. If there's at least a byte's difference, it's considered there's a new Service Worker available, so it get's registered and the old one is deleted. That is called worker's lifecycle. Le roi est mort! Vive le roi!

Once the worker file has been registered, the browser then acts by the instructions defined in that file. Actually the browser triggers few events on different occasions. All we need to do is to catch them and act accordingly, be it to cache a file or respond with a resource. Some events are triggered only once in worker's lifecycle and some - multiple of times. Take a look at the scheme to see who is who:

As you see, it all starts with install event which is fired only once in worker's lifecycle. It is responsible for installing the service worker and initially caching the most important pages and assets of a website:

self.addEventListener('install', event => {
  // ...
});

Then there's activate event which is also fired only once in a lifecycle after the install event and we will use it for deleting the old documents and files from cache:

self.addEventListener('activate', event => {
  // ...
});

Finally - fetch. It's so powerful that it lets you kinda intercept HTTP requests and return relatively anything you want. It is fired on each HTTP request and for each request separately, for example: say you have a tiny website which consists only of index.html, app.css, app.js. files. When the user navigates to the website, the fetch event is triggered for each resource (three times in total) where you can choose what to return, be it a fresh page/asset or a copy from the cache.

self.addEventListener('fetch', event => {
  // ...
});

Critical and non-critical resources

You can choose to cache the initial resources along with the worker's installation. It's up to you picking a few most important ones, but usually they are a homepage, a pair of main CSS, JS files and of course "offline" page - this is enough for a basic offline experience.

The gotcha here is that Service Worker is installed only when the initial resources are downloaded by a browser, consequently it is very important not to overload the process with too many files. Otherwise if the user spends a very small amount of time on the website and/or also has a slow internet connection the worker might not get installed at all.

Now let's make a use of install event:

const criticalResources = [
  '/',
  '/offline/',
  '/assets/css/main.css',
  '/assets/js/main.js'
];

const cacheCriticals = () => {
  return caches.open(version).then( cache => {
    return cache.addAll(criticalResources);
  });
};

self.addEventListener('install', event => {
  event.waitUntil(
    cacheCriticals().then( () => self.skipWaiting())
  );
});

Here we have criticalResources array of the stuff we want to always be available for our worker (and thus users). Then there is a function cacheCriticals which is executed in an asynchronous manner. The function kinda opens a cache room for the resources and puts them in there. The sign text on the door is a value of a custom variable version which I elaborate on later in the article.

Since it is recommended to have a very limited amount of critical resources, we can have an additional array of files that does not block an installation of our worker. Therefore we can enrich our strategy for install event with "critical" and "important, but not critical"lists. Benefits are we get the worker installed as soon as possible along with the criticalscached whereas the resources from the new array will be cached asynchronously and only if/when possible. In order to achieve this, let's create an additional array and modify the function:

const otherResources = [
  '/about/',
  '/contact/',
  '/services/'
];

const cacheCriticals = () => {
  return caches.open(version).then( cache => {
    cache.addAll(otherResources); // important, but not critical resources
    return cache.addAll(criticalResources); // critical resources
  });
};

The return statement is important here as it labels a prerequisite for the worker to be installed.

Service Worker strategies

Let's move over to fetch event which is a cornerstone. As I mentioned, there are two ways to operate when the request for a resource knocks on – it's online-first and offline-first. The gotcha here is that you can choose different give-it-to-me strategies for each type of resource. I'd exclude three common Service Worker strategies:

Online-first everything

This means serving resources from the network first and falling back to the cache storage for the failed network requests. This is probably the safest strategy as it eliminates the chance of serving an outdated content for Internet-connected users and provides a fallback for disconnected ones. However, the strategy provides no gains in page download performance for the online users.

self.addEventListener('fetch', event => {
  event.respondWith(
    // try fetching a resource from the network
    fetch(event.request).then(response => {
      // cache the resource and serve it
      let responseCopy = response.clone();
      addToCache(event.request, responseCopy); // this is a custom function, I'll elaborate on it later
      return response;
    })
    .catch(() => {
      // the resource could not be fetched from network
      // so let's pull it out from cache, otherwise serve the "offline" page
      return caches.match(event.request).then(response => response || caches.match('/offline/'));
    });
  );
});

Offline-first everything

It's serving resources from cache first but falling back to network request if the resource hasn't been cached previously. The advantage here is that your website loads faster if cached: there will be no need for some network requests as things are pulled out right from the user's device.

self.addEventListener('fetch', event => {
  event.respondWith(
    // check if the resource was cached before
    caches.match(event.request).then(response => {
      // serve the resource if cached, otherwise fetch it through the network
      return response || fetch(event.request).then(response => {
        // cache the newly fetched resource and serve it
        let responseCopy = response.clone();
        addToCache(event.request, responseCopy); // this is a custom function, I'll elaborate on it later
        return response;
      })
      .catch(() => {
        // serve "offline" page if it couldn't be fetched from network
        return caches.match('/offline/');
      });
    });
  );
});

Performance gains are visible to the naked eye, but every bean has its black: a chance exists your users may be served with an outdated content. When the user comes to your website for the first time our Service Worker is installed and the critical resources along with a version number are stashed into the browser's cache. After a while the user returns to your homepage which, let's say, displays a list of your latest blog posts. The worker then immediately checks if the requested HTML document had been cached previously and serves it from there if the answer is true. So in that case if you published a new blog post before the user returned to your website they would not be able to see the post in the list because the homepage was served from the cache. After rendering the homepage our worker then detects that there is a change in the resource's version number and deletes the HTML document from cache. Therefore in order to see the updated page the user should refresh it. This may not be a huge problem for representative websites, but vise-versa for frequently updates ones.

Offline-first assets and online-first HTML documents

It's a combination of the first two strategies, but differentiated per resource types: offline-first assets and online-first HTML documents. The strategy partly solves the offline-first's refresh problem and so makes sure the users are always entertained with the latest content. The good thing is that you can check the request headers and so determine a type of the resource:

self.addEventListener('fetch', event => {
  const type = event.request.headers.get('Accept');
  // network-first for HTML documents
  if(type.includes('text/html')) {
    event.respondWith(
      // respondWith code from network-first section
    );
  }
  // cache-first for assets
  else {
    event.respondWith(
      // respondWith code from cache-first section
    );
  }
});

This could be very suitable for CMS-based websites as you don't need to manage cache on every database update (content insertion). That's exactly what we adopted to our client's WordPress based site.

Serving "offline" image

We have already learned how to cache and serve the "offline" page and turns out we can do the same with images: cache and serve a custom image for the image-type requests that failed. Another one nifty UX improvement, design is in details:

Actually there are at least two ways of implementing the "offline" image:

Inlined in worker's file

If the image is technically simple you can Base64 it or ideally have it in SVG format which is a complete win: the image is resolution-independent, style-able, easily maintainable.

event.respondWith(caches.match(request).then(response => {
  return response // cache-first
  || fetch(request).then(response => { // network
    // ...
  })
  .catch(() => { // offline
    if(type.startsWith('image')) {
      return new Response('<svg...', {headers: {'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store'}});
    }
    else {
      // ...
    }
  });
}));

Standalone file

If the image is more like a photo and Base64 or SVG conversion would not be rational, you ought to have it as a separate file placed on a server. Of course you should cache it as a critical resource when install event occurs and then it can be served like a typical resource:

event.respondWith(caches.match(request).then(response => {
  return response // cache-first
  || fetch(request).then(response => { // network
    // ...
  })
  .catch(() => { // offline
    if(type.startsWith('image')) {
      return caches.match('/offline.jpg');
    }
    else {
      // ...
    }
  });
}));

Garbage in cache is your problem

It's a sign of a really bad UX if your users are disturbed with error messages about exceeded memory quota. Therefore it's us who have to take care of the contents of cache, because browsers have no mechanisms for deciding whether the particular resources should be deleted or not.

Versioning

And so here the resource versioning kicks in. It begins by defining a version number or a key that will be used for caching new and deleting the old stuff. Instead of putting everything into a single place we will distribute different resource types across their own cache "rooms":

const version            = '1-',
      criticalsCacheName = `${version}critical`,
      otherCacheName     = `${version}other`,
      imagesCacheName    = `${version}images`;

Remember the addToCache function we used under the fetch event? Let's improve it by making it to accept an additional parameter – cache room name:

const addToCache = (cacheName, request, response) => {
  caches.open(cacheName).then(cache => cache.put(request, response));
};

The version number should be incremented along with every website update. Well, maybe not always "with every" - this depends on your Service Worker strategy. So with every increment pushed a new cache party is created in the browser. Resources are grouped by version numbers like this:

'1-critical': [
  '/',
  '/about/',
  '/offline/',
  // ...
],
'2-critical': [
  '/',
  '/about/',
  '/offline/',
  // ...
],
//...

In order to keep the cache lean, we should aways delete groups from previous lifecycles of the worker. Let's take an advantage of the activate event and clean up the old stuff:

const clearOldCaches = () => {
  return caches.keys().then(keys => {
    return Promise.all(keys.filter(key => !key.startsWith(version)).map(key => caches.delete(key)));
  });
};

self.addEventListener('activate', event => {
  event.waitUntil(clearOldCaches().then(() => self.clients.claim()));
});

In our case, having the current version key equal to 2-critical will delete the 1-critical as the condition !key.startsWith(version) is fulfilled: !'1-critical'.startsWith('2-').

Additional cache control

As I mentioned previously, this event is fired only once in a worker's lifecycle. The worker can live a long life therefore there is an increased chance the cache size may get exceed. A really good mechanism for wiping the dust was suggested by Jeremy Keith. We can kinda create a custom event and send a trigger-like signal from the website to our Service Worker. An additional code next to worker's file registration:

if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/serviceworker.js');
  if(navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage({'command': 'trimCache'});
  }
}

The message will be posted on every page visit - we can catch it and react accordingly, i.e. leave only a particular amount of resources by deleting the rest of them.

const trimCache = (cacheName, maxItems) => {
  caches.open(cacheName).then(cache => {
    cache.keys().then(keys => {
      if(keys.length > maxItems)
          cache.delete(keys[0]).then(trimCache(cacheName, maxItems));
    });
  });
};

self.addEventListener('message', event => {
  if(event.data.command == 'trimCache') {
    trimCache(otherCacheName, 50);
    trimCache(imagesCacheName, 25);
  }
});

We're not just keeping the cache size sane, but also ensuring we have the critical resources available since we do not apply trimming for criticalResources room.

Since we're separating our cache into several rooms, it's important to make sure the resources go where they are supposed to. Here's an improvement on how we cache things under fetch event:

if(criticalResources.includes(url.pathname))
  addToCache(criticalsCacheName, request, responseCopy);
else if(type.startsWith('image'))
  addToCache(imagesCacheName, request, responseCopy);
else
  addToCache(otherCacheName, request, responseCopy);

Omitting thrid-party resources

Websites usually contain various thrid-party resources like JS, CSS, image files, etc. Combine those kilobytes throughout the entire site and you may find yourself trying put an elephant into a canary's cage. Therefore omitting those resources by default and having a list of exceptions if needed is a good practice:

var thirdPartyExceptions = [
  'https://code.jquery.com/jquery.min.js',
  // ...
];
// ...
event.respondWith(fetch(request).then(response => { // network
  // cache only resources from this domain as well as the exceptions
  if(location.origin === url.origin || 
     thirdPartyExceptions.includes(url.href)) {
    // addToCache use
  }
  return response;
}))
// ...

location is a global variable associated with the worker. With the code above we only allow resources from the server the website is hosted at as well as the exceptions.

Forcing serviceworker.js file renewal

Remember when I mentioned that the browser tries to redownload serviceworker.js file on every page request made by the user? Well, that's the theory. But in practice serviceworker.js file updates does not necessarily always have an instant reflection in the browser. Consequently, a chance exists that some of your users will see the outdated content even if there's fresh stuff available. In order to overcome this and have a new Service Worker lifecycle started as soon as the file is updated, I added a server-level configuration targeted to serviceworker.js file which tells the browser and the computer do not ever cache this file.

Apache way

<Files serviceworker.js>
  FileETag None
  Header unset ETag
  Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</Files>

Nginx way

server {
  location ~* (serviceworker\.js)$ {
    add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    expires off;
    proxy_no_cache 1;
  }
}

Service Worker and DOM

Service Worker does not have a direct access to DOM at all, which means manipulating it is not possible. No window nor document variables are present, meanwhile globally available self variable points to WorkerGlobalScope, not Window like we are used to.

Anyway, just like we have proved before, we can still make a website and a Service Worker to communicate directly. postMessage does this in "to Service Worker" direction and looks like it is also possible to do it in "to website" direction as well.

Service Worker for multilingual website

Obviously, you may want to enrich the initial cache with more than just one language:

const criticalResources = [
        '/sv/',
        '/en/',
        '/sv/offline/',
        '/en/offline/',
      ],
      otherResources = [
        '/sv/projekt/',
        '/sv/om/',
        '/sv/kollegor/',
        '/sv/blogg/',
        '/en/work/',
        '/en/about/',
        '/en/colleagues/',
        '/en/blog/',
      ];

But the gotcha lies behind the "offline" page: wouldn't it be nice to have an "offline" page enabled for each language?

const appLangs = ['en', 'sv'],
      url      = new URL(event.request.url);

event.respondWith(
  fetch(event.request).then(response => {
    // ...
    return response;
  })
  .catch(function() {
    let lang = url.pathname.substr(1, 2);
    lang = appLangs.includes(lang) ? lang : appLangs[0];
    return caches.match(`/${lang}/offline/`);
  })
);

Before serving the "offline" page the code above checks the first two characters of URL of the requested resource for a language code. It also verifies if this code is available in the languages list otherwise it picks the first entry from the list which is treated as a default.

You may adapt this accordingly to your multilingual URL strategy. My example relies on what we have here at Kollegorna: all of the page addresses start with language code.

Service Worker is backend-dependent

In one of the previous sections of the article we realized the importance of versioning. The method of updating a value for version variable depends on your backend system and Service Worker strategy. If you are not looking to automate everything or got a simple static website that does not rely on a CMS, you may just edit Service Worker file manually and increment the variable's value or enter something random when updating the site.

The real fun begins if you prefer to have everything fully automated. For example, you've got a Wordpress based website and gone the offline-first approach way. In order to get the version number incremented on content updates you can write a custom hook function called when inserting or updating a post:

function update_sw_version() {
  // writes serviceworker.js file with a new value for "version" variable
}
add_action('save_post', 'update_sw_version');

We have enabled automated Service Workers on Trellis (Wordpress LEMP stack) and Middleman (static site generator) based sites, but I will elaborate on this in my future articles.

Debugging Service Worker

I found Chrome DevTools to be a very handy tool for debugging Service Workers. It has this nice Network Throttling feature which makes it easy to simulate offline experience:

Debugging worker might be tricky sometimes, because you first have to unregister the current worker before testing the updated code, otherwise you'll find yourself doing a Sisyphus work - investigating the old code. In Chrome you can unregister the worker manually via DevTools → Application → Service Workers:

In some cases I find Clear Storage to work better for me as it completely wipes out all the cached stuff and I am always served with the latest one when debugging:

Since Service Worker is a relatively new technology it could not do without alteration on interpreting various rules and directives. Therefore always be sure to test your worker on the future browser releases like Chrome Canary or Firefox Developer Edition.

Once you have your worker up and running, you can reasonably hope for 100/100 score on Chrome's website performance evaluation tool - Lighthouse:

Let me end up the article with an advice: don't ever take Service Worker code advices for granted. Always test them, because adaptations are very individual and what worked for one doesn't automatically mean it will work for you.

Lazy-Loading Disqus Comments

Wed, 07 Dec 2016 00:00:00 GMT

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.

I've written an article on that and got it published on CSS-Tricks.

You can also contribute, follow the project on GitHub.

Enabling CodeIgniter's Garbage Collector

Tue, 22 Nov 2016 00:00:00 GMT

My session driver of choice for CodeIgniter is database. A while ago, I noticed millions of rows in the corresponding database table. That means that garbage collector was not working. I checked config.php for sess_regenerate_destroy, but it was already set to false. It was really weird because the problem seemed to have come out of nowhere – not much ago things were working just fine.

After a short investigation, I found out this was and still is a common problem for those who had upgraded their CodeIgniter version from 2.x to 3.x. Turns out, the later possesses heavy changes for Sessions library. And most importantly – fundamental changes in dealing with garbage: CodeIgniter 3.x relies on PHP's native grabage collector. So, in order to get things working again, we need to configure PHP properly.

The Solution

Today there are three PHP-native settings for dealing with session garbage collector. CodeIgniter's Session library has already taken care of one of them – gc_maxlifetime – so there's no need for an extra touch here. The problem lies within the rest: session.gc_probability and/or session.gc_divisor. These two determine when the garbage collector is running. Here's what php.net says:

session.gc_divisor coupled with session.gc_probability defines the probability that the gc (garbage collection) process is started on every session initialization. The probability is calculated by using gc_probability/gc_divisor, e.g. 1/100 means there is a 1% chance that the GC process starts on each request.

In my case, using ini_get() revealed the following values: 0 and 1000. The equation 0/1000=0 meant there was no chance the garbage collector would even run.

Finally, I solved the problem by using the values officially stated as default and by putting the following lines of PHP code into config/config.php file:

ini_set('session.gc_probability', 1);
ini_set('session.gc_divisor', 100);

Theoretically, this means that the garbage collector usually runs once every 100th request. It's more than enough, but it is up to you whether that causes too many unnecessary hits to database. An alternative solution for heavy-traffic websites could be having a 0% probability on the production site and a Cronjob-based script which removes database rows of the expired sessions.

Lazy Loading Responsive Adsense Ads

Tue, 15 Nov 2016 00:00:00 GMT

You've been hard at work optimizing your site. You've already done things like lazy-loading Google Maps and been wondering if there was anything else you could do. For example, is there anything we can do to improve the loading of ads? Good news, there is some things you can do. You can respect user's mobile data plan by loading ads only when they are likely to appear in the viewport zone. You can also serve ads in the right size in accordance to the screen of the device. That would be nice of you. That would not only be responsive but also responsible.

I've written an article on that and got it published on CSS-Tricks.

You can also examine the demo on CodePen and contribute, follow the project on GitHub.

How to Display Publish Dates as Time Since Posted

Thu, 11 Feb 2016 00:00:00 GMT

It’s common to present dates on the Web in a format such as "Published on September 12th, 2015", or "09/12/2015 09:41:23".

Each of these examples tells the full date and/or time of some kind of activity – be it a published article, or a reader comment, or perhaps an uploaded video.

Date formats like this might seem perfectly reasonable. After all, they’re informative and human-readable. Well yes, but “human-readable” doesn’t necessary mean users will readily be able to understand how recently the activity has occurred. The Web is a fast-moving place, and giving your content a sense of freshness could be the key to engaging with your audience.

I combined my ideas and practical solutions into an article which you are very welcome to read on SitePoint.

Drag and Drop File Uploading

Tue, 01 Dec 2015 00:00:00 GMT

When working on ~~Readerrr~~, I wanted to enrich the experience of uploading an OPML file for importing feeds from other readers. There is nothing wrong with the traditional way for uploading a file, but it is a good thing to provide the alternative way – drag & drop file uploading. I've combined my experience into an article which you are very welcome to read on CSS-Tricks.

Customizing File Inputs the Smart Way

Thu, 08 Oct 2015 00:00:00 GMT

And so it happened that I published the latest post of mine on Codrops, not here this time. It’s about styling <input type="file" /> by taking the advantage of <label>. The technique is not perfect – nothing is perfect that imitates native HTML elements – but having in mind its pros & cons, I found it to be the most appropriate solution for styling file inputs.

Real-Time Search in JavaScript

Tue, 11 Aug 2015 00:00:00 GMT

What I meant was scanning the DOM of a page for text equivalents and showing the actual parts of the page, as well as hiding the irrelevant ones. I came up with the technique when I was designing ~~Readerrr’s~~ FAQ page. Take a look at the example:

~~I have also implemented the solution here on my blog.~~

How it works

All simple. Let’s take the FAQ page as an example. Here’s a typical markup:

<h1>FAQ</h1>
<div class="faq">
	<input type="search" value="" placeholder="Type some keywords (e.g. giza, babylon, colossus)" />
	<ul>
		<li id="faq-1">
			<h2><a href="#faq-1">Great Pyramid of Giza</a></h2>
			<div>
				<p>The Great Pyramid of Giza <!-- ... --></p>
				<!-- ... -->
			</div>
		</li>
		<li id="faq-2">
			<h2><a href="#faq-2">Hanging Gardens of Babylon</a></h2>
			<div>
				<p>The Hanging Gardens of Babylon <!-- ... --></p>
				<!-- ... -->
			</div>
		</li>
		<!-- ... -->
	</ul>
	<div class="faq__notfound"><p>No matches were found.</p></div>
</div>

I wrote a tiny piece of JavaScript code to handle the interaction and this is how it works:

When the page loads, the script indexes the content of all li’s into browser’s memory.
When a user types text into the search field, the script searches for equivalents among the indexed data and hides the corresponding li’s where no equivalents were found. If nothing found, a message is shown.
The script highlights the text equivalents by replacing phases, for example, babylon becomes <span class="highlight">babylon</span>.

Now, try it yourself:

See the demo.

Taking it further

Since I chose FAQ page as an example, there are some issues to deal with.

Toggling the answers

It is a good practice to hide the answers by default and show them only when user needs them, that is to say when they press the question:

.faq > ul > li:not(.is-active) > div {
	display: none;
}

$(document).on('click', '.faq h2 a', function(e) {
	e.preventDefault();
	$(this).parents('li').toggleClass('is-active');
});

In the CSS part I use child combinator selector > because I don’t want to select and, therefore, to hide the elements of an answer, which may contain lists and div’s.

What if JavaScript is disabled

The user won’t be able to see the answers. Unless you show them by default or develop a JavaScript-less solution. To do this, take a closer look at these fragments of the markup:

<li id="faq-1">
<a href="#faq-1">

The usage of fragment identifiers enables us to take the advantage of CSS’s pseudo selector :target:

.faq > ul > li:not(:target) > div {
	display: none;
}

Furthermore, the real-time search is not possible as well. But you can either provide a sever-side search possibility or hide the search field and so as not to confuse the user:

<html class="no-js">
	<head>
		<!-- remove this if you use Modernizr -->
		<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")})(document,window,0);</script>
	</head>
</html>

I added a class name no-js to <html> element. The <script> part removes that class name. If JavaScript support is disabled in a browser, the class name won’t be removed; therefore:

.no-js .faq input {
	display: none;
}

The no-js is a very handy technique, you can use it site-wide.

Improving UX

If there is only one list item that matches user’s query, it is a good practice to automatically show the content of that item, without requiring to press the title. To see what I mean, head over the GIF at the beginning of the post.

Hidden keywords

Here on my blog I have a filterable list of blog post titles only. Each post has some related keywords assigned. So, during the search, how do I make an item discoverable even if the title does not consist of a particular keyword? For example, how can I make the entry “Real-Time Search in JavaScript” visible if a user entered “jquery”? Yes, exactly, that is adding keywords and hiding them with CSS:

<li>
	<h2><a href="/real-time-search-in-javascript">Real-Time Search in JavaScript</a></h2>
	<p class="hidden-keywords" aria-hidden="true">jquery filter input html css</p>
</li>

.hidden-keywords {
	display: none;
}

A simple trick but not always that obvious.

You will find two versions of the code in the source of the demo: without dependencies and jQuery-dependent. These versions are also divided into three groups of code so you can adapt only what your project needs.

See the demo.

Detecting CSS Animation and Transition End with JavaScript

Tue, 23 Jun 2015 00:00:00 GMT

Detecting the end of CSS animation and transition could be useful if you want to back up some of your JavaScript behavior on CSS. The most common uses of this in my practice are:

Animating the display: none. I used the technique on ~~Readerrr~~ for tabbed content and modal boxes: the new content or modal box shows up only after the old one disappears. And…

Animating the disappearance of an element and then removing it from the DOM. I did this here on the cart of my shop.

Problem

Let’s take the shopping cart case as an example. Usually, I remove an item from the cart in this way:

$('.item').addClass('disappear').on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
	$(this).remove();
});

The problem with the code above is that it does not degrade gracefully: the callback would not be fired if the browser (i.e. IE 9-) did not support CSS animations. Also, the callback wouldn’t be fired if for some reason the duration of an animation was set to 0s. To sum it up, using this code is not safe enough.

Solution

In order to avoid these flaws, you can use these tiny helper functions I wrote:

onCSSAnimationEnd – for animations;
CSSTransitionEnd – for transitions;

Using them is that simple:

$('.item').addClass('disappear').onCSSAnimationEnd( function() {
	$(this).remove();
});

There is a version of no-dependencies JavaScript code for your service:

var item = document.querySelector('.item');
item.classList.add('disappear');
item.onCSSAnimationEnd(function() {
	item.parentNode.removeChild(item);
});

The source of both functions are available for download:

oncssanimationend.js; no dependencies (IE 9+);
360 bytes bytes when minified and gzipped;
jquery.oncssanimationend.js; jQuery dependency (compatible with v1 and v2);
322 bytes when minified and gzipped;

Finally, check out the demo page to see the functions in action and inspect the source code for implementation on your next project:

See the demo

Placeholder Polyfill with Password Support

Fri, 17 Apr 2015 00:00:00 GMT

I use input placeholders in two ways: (1) as labels in simple forms that have just a few input fields and (2) as tips or suggestions in complex forms:

<input type="email" name="email" placeholder="Your email address" />

The problem with placeholders is that the feature is not supported in IE 9 and below. This is a huge pain if you use placeholders as labels…

JavaScript polyfill

I have written a tiny jQuery-dependent plugin which enables placeholders in browsers that do not support the technology:

jquery.input-placeholder-polyfill.js (uncompressed; 2 KB);
jquery.input-placeholder-polyfill.min.js (minified; 966 bytes).

Basic usage example:

<script src="jquery.js"></script>
<script src="jquery.input-placeholder-polyfill.js"></script>
<script>
	;(function($, window, document, undefined) {
		$('input').inputPlaceholderPolyfill();
	}
	)(jQuery, window, document);
</script>

Or you can target input fields by a specific selector:

$('.textfield').inputPlaceholderPolyfill();

The plugin takes care of textareas and text-oriented inputs, including password type. Some other polyfills I have tried before had this bug, when you entered the text which was equal to input‘s placeholder value the input automatically cleared out, became blank. This is fixed in my version.

How the plugin works? Firstly, it detects if the browser does not support input placeholders. Then if the [placeholder] of <input /> has a non-empty value, the plugin sets the same value for [value] attribute and adds a class name for the input (is-placeholder by default). The plugin also makes various checks and actions on input focus, blur and form submit events to keep the values of [placeholder] and [value] correct.

What is the is-placeholder class name for? Firstly, it‘s for styling the input when it has a placeholder mode enabled. Just one additional line next to the styles for native placeholder:

.textfield.is-placeholder             { color: grey !important; }
.textfield::-webkit-input-placeholder { color: grey !important; }
.textfield::-moz-placeholder          { color: grey !important; }
.textfield:-ms-input-placeholder      { color: grey !important; }

Secondly, it‘s for managing the input via JavaScript. The classic example is validating input values. Since the plugin uses [value] for placeholder text, you have to make sure you are validating the actual value (the one that user enters), not the placeholder text:

$('form').on('submit', function(e) {
	e.preventDefault();

	$(this).find('.textfield').each(function() {
		var $this = $(this),
		    val = $this.val();

		if($this.hasClass('is-placeholder'))
			val = '';
		// ...
	});
	// ...
});

If you need, you can have a custom class name:

$('.textfield').inputPlaceholderPolyfill({
	className: 'textfield--placeholder'
});

But… what about browsers that do not support placeholders and has JavaScript disabled?

CSS fallback

You can use a combination of both: JavaScript polyfill and CSS fallback for it, or you can bypass the JavaScript part and completely rely on CSS fallback. Or vice versa. Your situation dictates what you should do. In the end, the user should be able to use your website.

CSS fallback as a complement to JavaScript polyfill

Unlike in JavaScript part, it is impossible to do placeholders feature detection in CSS. The only thing left is targeting specific browsers – IE 9 and below in this case.

<!--[if lte IE 9]> <html lang="en" class="no-js no-placeholder"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<!-- ... -->
	<script>
		// removes "no-js" class name from <html> element; remove this <script> part if you use Modernizr, because it will remove the class name for you
		;(function(window, document) {
			document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
		}(window, document));
	</script>
</head>
<!-- ... -->

Now, we have to repeat the placeholder text and wrap it with some tags:

<div class="item">
	<input type="email" name="" value="" placeholder="Email" class="textfield" id="input-email" />
	<label for="input-email">Email</label>
</div>

And of course, make the text visible when necessary:

html.no-placeholder.no-js .item label {
	display: block;
}

CSS fallback as the only solution

Bypassing JavaScript polyfill and applying only CSS fallback is very similar to what I wrote previously. The only difference is this (no <script> part here!):

<!--[if lte IE 9]> <html lang="en" class="no-placeholder"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->

html.no-placeholder .item label {
	display: block;
}

Demo

I combined everything in the demo. Feel free to investigate the source code of the demo page and use the stuff in your projects. You should try the demo on browsers that do not support input placeholders, such as IE 9 or below.

See the demo.

Forcing Description Text In a Newsletter

Sun, 15 Mar 2015 00:00:00 GMT

I have recently sent a newsletter to the users of ~~Readerrr~~, announcing a new feature (feed import). Besides the feature itself, it was not less important to send the newsletter correctly, i.e. to make it responsive, of course, and… to solve this problem (see the grayed description text):

This is a great example of bad UX. There are many email clients that provide an excerpt from the email text as a one-line (or a few) description (preview) under the email subject. Usually they take several first words from the email. If you checked the source code of the newsletters in your inbox, the first sentence in most of them would probably be (which means it is displayed as a description text) one of these:

“Is this email not displaying correctly? View it in your browser”
“View this email in your browser”
“Read this issue on the Web”

Such messages are completely useless. They do not provide any information on what this newsletter is about. Yes, there is a subject line, but that does not mean you should forget about the description. You could take an extra step in encouraging a user to read your newsletter if your subject was not that catchy.

For example, Mail app for iOS dedicates only one line for the subject and two for the description text! Email/Gmail apps for Android have two and Yahoo.com has one line for the subject+description combination. Windows Phone and Microsoft Outlook dedicates one line for the subject and another for the description. There is so much potential you can exploit!

Besides, “View this email in your browser” in description text looks lame.

Solution

The solution could not be more simple. What we want is to force a silent description message by not showing it in the newsletter. The range of CSS properties help to hide it in the newsletter across email clients:

<div style="font-size: 0; line-height: 0; width: 0; height: 0; display: none; overflow: hidden;">
	Your catchy description text
</div>

Inserting this code snippet at the beginning of the document body makes sure the text is used as a description:

<html>
	<head>
		<!-- ... -->
	</head>
	<body>
		<div style="font-size: 0; line-height: 0; width: 0; height: 0; display: none; overflow: hidden;">
			Your catchy description text
		</div>
		<!-- ... -->
	</body>
</html>

In the case of Readerrr, the result I got:

This is how the implementation of forced description looks on my end, with a little bit of flavor of PHP:

<div style="font-size: 0; line-height: 0; width: 0; height: 0; display: none; overflow: hidden;">
	<?=substr( strip_tags( $description ?: $content ), 0, 200 )?>&hellip;
</div>

There is a custom field description which I fill if I have anything catchy to write. Otherwise the content of the newsletter is truncated to 200 symbols and used instead.

Examples in the wild

I browsed my Mail app, and selected some good and bad examples (the first line is for sender’s name, second for the subject and the grayed lines are for the description):

This is what you should truly not do. Absolutely useless descriptions telling: “hey, this is just another one issue/theme, nothing special”.

Things gone messy here: repeating words and no clear message. “the modern desk welcome hi there once again” – what is that?

An example of self-repeating instead of providing further information.

Almost there, but the mix with “view this email in your browser” ruins the description.

The first word “Exposure” is taken from the value of alt attribute of the first image (logo) in the newsletter. Forcing a custom semantic description would fix that.

Forcing a custom description text would allow to use all of the space.

Great examples of semantic descriptions. Looks solid. Most importantly I can smell what is in these newsletters! “ARIA in HTML5” was an interesting article to read.

My favorite example is from Quora: a question in the subject line and an answer in the description. Perfection!

Caching SVG Sprite in localStorage

Thu, 05 Mar 2015 00:00:00 GMT

There are two ways of using SVG in HTML via <use>: with external source and without it. “The use element takes nodes from within the SVG document, and duplicates them somewhere else” – MDN. In the first case, the SVG graphics insertion (duplication) usually looks like this:

<svg><use xlink:href="sprite.svg#cart"></use></svg>

The good: the file sprite.svg will be cached by the browser. The bad: this technique does not work in IE11 and below (luckily, there is a JS fallback solution); you have to repeat the file name and the path to it on every insertion.

The second case, which is the topic of this post, is about using the locally defined (inlined) SVG graphics. Note that I use <symbol> when defining SVG. This means it is enough to set viewbox once instead of doing this on every SVG insertion. Also, the SVG definitions should be placed above the insertions (<use>), otherwise this will not work in some browsers:

<body>
	<svg style="display: none;">
		<symbol id="svg-cart" viewbox="0 0 50 50"><path d="..." /></symbol>
	</svg>
	<!-- ... -->
	<svg><use xlink:href="#svg-cart"></use></svg>
	<!-- ... -->
</body>

The good: it works in IE9 and above; you do not need to repeat the file name and the path (which is usually pretty long in real-life scenarios) to it on every image insertion:

<!-- this is much nicer -->
<svg><use xlink:href="#svg-cart"></use></svg>

<!-- than this -->
<svg><use xlink:href="theme/something/assets/img/sprite.svg#cart"></use></svg>

The bad: SVG graphics (definitions) is a part of the document and so it is not cached by the browser as a separate subject, which means it is not reusable across the pages.

What if you have a lot of SVG graphics, like 100 KB in size? It means that every page of your website will have an additional 100 KB because idealistically this amount can be cached and reused. For example, if there was a cellular data user who browsed 11 different pages on your website, they would waste 1 MB – this is bad for performance. So, can we cache the SVG sprite and at the same time avoid referencing an external file on every image insertion?

localStorage

Yes! localStorage enables web pages to store the data within the user’s browser. The storage limit is usually 5 MB per domain. This is way more than enough for storing SVG sprites.

I wrote a tiny piece of JavaScript code to handle this part (~444 bytes minified and gziped, no dependencies). Here is how it works:

On the very first load of the website it:
1. Reads the contents of a SVG file;
2. Inserts the data into the document;
3. Puts the data into localStorage.
On every following load it:
1. Reads the data from localStorage;
2. Inserts the SVG data in the document.

If localStorage is not supported, is disabled or overfilled, the script still reads the contents of a SVG file and inserts the data in the document.

;(function(window, document) {
	'use strict';

	var file = 'img/svg.html', revision = 1;

	if(!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect)
		return true;

	var isLocalStorage = 'localStorage' in window && window['localStorage'] !== null,
      request,
      data,
      insertIT = function() {
        document.body.insertAdjacentHTML('afterbegin', data);
      },
      insert = function() {
        if(document.body) insertIT();
        else document.addEventListener('DOMContentLoaded', insertIT);
      };

	if(isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) {
		data = localStorage.getItem('inlineSVGdata');
		if(data) {
			insert();
			return true;
		}
	}

	try {
		request = new XMLHttpRequest();
		request.open('GET', file, true);
		request.onload = function() {
			if(request.status >= 200 && request.status < 400) {
				data = request.responseText;
				insert();
				if(isLocalStorage) {
					localStorage.setItem('inlineSVGdata',	data);
					localStorage.setItem('inlineSVGrev',	revision);
				}
			}
		}
		request.send();
	}
	catch(e){}

}(window, document));

You can safely place this code anywhere in the document as the SVG file scanning works asynchronously. If you put the code at the head of the document, the icons will load a little bit faster. Test it to see what is best for you.

File & Revision

There are two lines you need to configure on your own:

var file = 'img/svg.html', revision = 1;

file is the path to the SVG file. It can be *.svg file but personally I do not use the sprite file as a SVG file, I treat it as a part of my HTML document. My svg.html usually looks this:

<svg style="display: none;" aria-hidden="true">
	<symbol id="svg-plane" viewbox="0 0 510 510"><path d="..." /></symbol>
	<symbol id="svg-close" viewbox="0 0 357 357"><path d="..." /></symbol>
	<symbol id="svg-fav" viewbox="0 0 510 510"><path d="..." /></symbol>
	<symbol id="svg-share" viewbox="0 0 459 459"><path d="..." /></symbol>
	<symbol id="svg-cart" viewbox="0 0 510 510"><path d="..." /></symbol>
	<symbol id="svg-tick" viewbox="0 0 510 510"><path d="..." /></symbol>
</svg>

revision is a version number of svg.html file. It tells the script when it should scan the file for changes and update the old SVG data which is cached in localStorage to a new one. For example, if you update the SVG file, you also have to change the value of revision variable in order to make the changes visible on the website.

You can do this manually or you can automate this via PHP (Perl, Python or any other server-side scripting language). If you have the JavaScript code placed directly into your HTML code (which is located in *.php file), you can use PHP function which returns file modification time (as a Unix timestamp):

revision = <?=filemtime( 'img/svg.html' )?>;

If you have the script in a separate JavaScript file, i.e. common.js, you can use a global JavaScript variable:

revision = INLINE_SVG_REVISION;

<html>
	<head>
		<script>var INLINE_SVG_REVISION = <?=filemtime( 'img/svg.html' )?>;</script>
	</head>
<body>
<!-- ... -->
<script src="common.js"></script>
</body>
</html>

No SVG support?

If a browser does not support SVG, we can rely on raster images and JavaScript fallback. We need data-img attribute for specifying the location of raster image, for example:

<li><svg><use xlink:href="#svg-cart" data-img="img/cart.png"></use></svg></li>

The fallback will convert that line to this:

<li><img src="img/cart.png" alt="" /></li>

Then, if you do not use html5shiv, you have to register svg and use elements so that the fallback code can later operate them. This should be placed at the document head, best before the first <script> occurence:

if(!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) {
	document.createElement('svg');
	document.createElement('use');
}

Finally, the fallback itself – it should be placed at the end of the document (I borrowed some lines from svg4everybody):

;(function(window, document) {
	if(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true;
	var uses = document.getElementsByTagName 'use'), use;
	while((use = uses[0])) {
		var svg = use.parentNode, img = new Image();
		img.src = use.getAttribute('data-img');
		svg.parentNode.replaceChild(img, svg);
	}
}(window, document));

JavaScript disabled?

The worst part about this technique is that you cannot get SVG sprite functioning if JavaScript is disabled in user’s browser. But, like in “no SVG support” case, we can rely on raster images, for example:

<li><svg><use xlink:href="#svg-cart"></use></svg><noscript><img src="img/cart.png" alt="" /></noscript></li>

Demo

I combined everything in the demo. Feel free to investigate the source code of the demo page and use the stuff in your projects where you have lots of SVG icons:

Demo

P.S. In this article I focused only on the technique of caching SVG and I did not show how to make things accessible in code examples. As for real-life projects I encourage you considering these SVG accessibility tips.

Auto-Hide Sticky Header

Wed, 14 Jan 2015 00:00:00 GMT

Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same. My client, Easy Shine, was happy to have this type of header for their website. I've also implemented this technique here, on my website (you can see it when the width of your viewport is below 768 px).

<header class="header" role="banner">
	<!-- ... -->
</header>

.header {
	width: 100%;
	height: 7.5em;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
}

A little bit of obvious HTML/CSS coding here, which makes the header stick to the top of the page, independently of the page scroll position. Now, how do we auto-hide the header?

Auto-hiding header

Auto-hide means hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up. There are at least two manners of hiding a header: reactive and lazy.

Reactive

It is when the header directly and instantly reacts to the page scroll. This manner may be a good small detail from the perspective of user experience because of the feel it brings. However it has a downside: it completely depends on JavaScript and because of the manner’s nature, we cannot use JS event throttling (calling a handler function only once in a custom period of time). In principle, that means making calculations on every scroll event and quite uselessly loading CPU. Luckily, in most cases this more a theoretical, but not a practical problem because the calculations are quite insignificant.

The JS algorithm changes the value of CSS property top when page scroll is performed:

//...
window.addEventListener('scroll', function() {
	//...
	if(wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
		element.style.top = '0px';

	else if(wScrollDiff > 0) // scrolled up; element slides in
		element.style.top = (elTop > 0 ? 0 : elTop) + 'px';

	else if(wScrollDiff < 0) { // scrolled down
		if(wScrollCurrent + wHeight >= dHeight - elHeight)  // scrolled to the very bottom; element slides in
			element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight) < 0 ? elTop : 0) + 'px';

		else // scrolled down; element slides out
			element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) + 'px';
	}
	//...
});
//...

Lazy

This one, however, may not have that feeling of responsiveness, which depends a lot on JavaScript event throttling interval. Anyway, the manner is much more CPU-friendly and the header animation is based on CSS, which means we can make a use of our imagination.

Differently from the previous option, here the JavaScript part does not change CSS properties directly. It adds and removes CSS class name header--hidden:

//...
window.addEventListener('scroll', throttle( throttleTimeout, function() {
	//...
	if(wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
		removeElementClass(element, elClassHidden);

	else if(wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
		removeElementClass(element, elClassHidden);

	else if(wScrollDiff < 0) { // scrolled down
		if(wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
			removeElementClass(element, elClassHidden);

		else // scrolled down; element slides out
			addElementClass(element, elClassHidden);
	}
	//...
}));
//...

In CSS we define what the class name means:

.header {
	-webkit-transition-duration: .5s;
	transition-duration: .5s;

	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

.header--hidden {
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}

An extra state for header

Sometimes, especially on homepage, it might be useful to have a bigger header when at the top of the page in order to grab visitor's attention. We need an additional CSS class for controlling header height:

.header--narrow {
  height: 5em;
}

Whereas JavaScript part controls the usage of the newly defined CSS class name – it adds the class name when a page scroll starts and removes when a user reaches the page top.

// ...
window.addEventListener('scroll', throttle(throttleTimeout, function() {
	// ...
	if(wScrollCurrent > elNarrowOffset) { // toggles "narrow" classname
		if(!hasElementClass(element, elClassNarrow))
			addElementClass(element, elClassNarrow);
	}
	else removeElementClass(element, elClassNarrow);
	// ...
}));
// ...

Examples

The source of the demo consists of both pure-JavaScript (IE9+ compatible) and jQuery-dependent versions of the code. Feel free to investigate and use it.

See the demo.

Lazy-loading Google Maps

Thu, 11 Dec 2014 00:00:00 GMT

I would call this year a year of web performance. The very useful web performance solutions developed by people who make websites. The cult of website performance analyzers. The rise of mobile data users. The releases of faster mobile browsers. The better raking on Google for faster websites. The conferences dedicated to web performance. All of these affected my work and web performance has become a core factor. I started questioning every element of a website: can I optimize this?

For my latest responsive freelance project there was a contact page where I had to display several Google Maps instances on a single page. I believe you can see where I am heading to: what if a user is not going to scroll down the page because the very first map is what a user was looking for? What if the user is accessing the page on a smartphone under the cellular internet connection?

The easiest way would be unconditionally loading a script file and map instances at once. But that would be a very very wrong way. The right way is to lazy-load the script file and map instances one by one.

jQuery plugin

As usual, I have developed a tiny jQuery plugin, which just loads the maps and then gives away the full control of the loaded ones to you:

jquery.lazy-load-google-maps.js (uncompressed; 2 KB);
jquery.lazy-load-google-maps.min.js (minified; 1 KB).

$(selector).lazyLoadGoogleMaps([options]);

The plugin accepts some options. The defaults are:

$(selector).lazyLoadGoogleMaps({
	key: false,
	// just an API key if you have one

	libraries: false,
	// libraries to load, i.e. 'geometry,places'

	signed_in: false,
	// sign-in on a map enabled/disabled

	language: false,
	// set language, i.e. 'en', 'en-GB'

	region: false,
	// set region, i.e. 'GB'

	callback: false
	/*
		a callback function called within every map instance initiation;
		there are two variables that are passed as parameters to the function:
		function( container, map )
			* container - the container element which has a selector 'selector' (see the first line)
			* map - the map instance which is a part of Google Maps API
	*/
});

It also has two helper methods, which I’ll explain later in the post:

var $instance = $(selector).lazyLoadGoogleMaps([options]);
$instance.debounce(duration, fn);
$instance.throttle(duration, fn);

How the plugin works?

On every scroll and browser resize interval the plugin checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn’t loaded before) Google Maps API script file and then initiates the corresponding map instances. Finally, there’s a callback function which is called within every map instance initiation so that you can continue doing whatever you need with your maps.

Let’s say you have five maps with different locations, and you need to mark them and center the view. The most simple practical use of the plugin would look like this:

<div class="google-map" data-lat="40.7056258" data-lng="-73.97968"></div>
<div class="google-map" data-lat="51.5072113" data-lng="-0.1144521"></div>
<div class="google-map" data-lat="31.2243489" data-lng="121.4767528"></div>
<div class="google-map" data-lat="48.8588589" data-lng="2.3470599"></div>
<div class="google-map" data-lat="35.7090711" data-lng="139.7321219"></div>

<script src="jquery.js"></script>
<script src="jquery.lazy-load-google-maps.min.js"></script>
<script>
	;(function($, window, document, undefined) {
		$('.google-map').lazyLoadGoogleMaps({
			callback: function(container, map) {
				var $container	= $(container),
					  center= new google.maps.LatLng($container.attr('data-lat'), $container.attr('data-lng'));

				map.setOptions({ zoom: 15, center: center });
				new google.maps.Marker({ position: center, map: map });
			}
		});

	})(jQuery, window, document);
</script>

The callback function will be called 5 times here and will walk through the each map. Using HTML [data-*] attributes to specify the coordinates and later retrieving them with jQuery’s $container.attr( 'data-*' ) makes the maps easily maintainable. You can pass more information in this manner according to your needs. So basically, you can fully use Google Maps API inside the callback function. You can also store the map instances in an array and use the API outside the callback function. This is the next example…

Responsive maps

Of course, your map containers are fluid because you design responsive websites. But the problem is that when a container resizes, the map looses focus. When the container becomes smaller, the location mark usually hides; when larger, you usually find the mark in the part of the container where you don’t want it to be. Google Maps API does not take care of this by default, so we have to.

Let’s assign the information of the default center for each map instance and, as mentioned previously, store the map instances in an array. Finally, during each browser resize interval, we walk through the map instances and set the map center to the default value.

var $window = $(window), // variable cache for a better performance
	  mapInstances = [], // stack of map instances
    $pluginInstance = $('.google-map').lazyLoadGoogleMaps({
      callback: function(container, map) {
        var $container = $(container),
            center = new google.maps.LatLng($container.attr('data-lat'), $container.attr('data-lng'));

        $.data(map, 'center', center);
        mapInstances.push(map);
      }
    });

$window.on('resize', $pluginInstance.debounce(1000, function() {
	$.each(mapInstances, function() {
		this.setCenter($.data(this, 'center'));
	});
}));

Wondering what $pluginInstance.debounce() does here? The next part of the post is exactly about the importance of throttling and deboucing events in JavaScript…

Throttling & debouncing

Have you ever experienced a browser crash when flipping your smartphone/tablet? There are a lot of chances it has happened because of the poorly developed website…

Throttling. Simply put, the number 250 (0.25 seconds) means that during the page scroll, the script makes 4 calculations per second at most. Without throttling, it would be ~20 times per second, but there’s totally no need to calculate it that often and, therefore, to put so much weight on user’s CPU.

Debouncing. The number 1000 (1 second) means that the calculation will only be performed 1 second after the last browser window resize action. For example, if you keep resizing the window for several seconds by moving the mouse around, no calculations will be performed during that time. The action is only performed after you release the mouse button and 1 second passes – the code then thinks that you have finished resizing the window. There’s totally no need for calculations during the resize process.

My advice: if you have never implemented throttling and debouncing before, you should check your codes and update where necessary. Be responsible.

Both throttling and debouncing are used inside the plugin; therefore, I 've made them available as plugin methods so you can use them in order to optimize your maps experience.

Efficiency

Finally, let’s see how we can save the mobile data plans of our visitors. The hypothetical situation I mentioned previously: a user opens the contact page on his smartphone connected to cellular network, sees the first map and does not scroll down the page because the first map is what was looking for. If the contact page was like in my demo, the whole download size would be 2.58 MB. Without lazy-load it could have been 6.44 MB. In this case we save 3.86 MB and the mental impact was that the page was loaded 2.5 times faster. Way to go!

The demo contains all of the features I described previously and there are a few user experience enriching additions.

Demo

You can also contribute, follow the project on GitHub.

I am going to share more lazy-loading techniques, so be sure to subscribe for the updates! Thank you for reading.

Changelog

The plugin now is on GitHub too. Fixed the key issue: use key instead of api_key. (2016-11-23)
Added new options: libraries, signed_in, language, region. (2015-11-07)

Keeping CSS short with currentColor

Thu, 27 Nov 2014 00:00:00 GMT

Turns out currentColor has been here for quite some time now, but I heard about it only a few months ago when I read Dudley Storey’s post. He states that it is supported very well across the browsers (IE9+). This was enough for me to start using it in production. I was quite surprised how useful the keyword is: it helps to keep CSS code shorter and smarter.

Before diving into practical usage examples, here is a short theory course. This is how MDN describes currentColor:

The currentColor keyword represents the calculated value of the element’s color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

SVG

This is my favorite. Take a very common example on the Web – a button with SVG icon and a title in it. I have these here on my website too:

Of course, you are a very responsible web designer, and you style :hover, :focus, :active states of the button for a better interaction with a user. This is how your code usually looks like:

.button  {
	color: #000;
	border: 2px solid #000;
}

.button:hover,
.button:focus {
	color: #333;
	border-color: #333;
}

.button:active {
	color: #666;
	border-color: #666;
}

.button svg {
  fill: #000;
}

.button:hover svg,
.button:focus svg {
  fill: #333;
}

.button:active svg {
  fill: #666;
}

Currently I am writing a front-end code for client’s e-commerce website which has a few different button designs. Moreover, there are anchors that have :visited state styled in addition. And there are many more similar SVG usage cases (toolbars, etc.) where SVG has to have the color of the text. currentColor helps to reduce the code twice:

/* put this in your reset-normalize-defaults.css file */

svg {
	fill: currentColor;
}

/* now you don't have to style SVG and border-color at all */

.button {
	color: #000;
	border: 2px solid currentColor;
}

.button:hover,
.button:focus {
	color: #333;
}

.button:active {
	color: #666;
}

Gradients

The keyword can be used anywhere where the value is the definition of the color, including gradients. In my previous post I talked a little about how I implemented that trendy hyperlink underlining:

Usual CSS equivalent including interactive states:

a {
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
	color: #000;
	background-image: -webkit-linear-gradient( left, #000 0%, #000 100% );
	background-image: linear-gradient( to right, #000 0%, #000 100% );
	background-repeat: repeat-x;
	background-position: 0 95%;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}

a:hover,
a:focus {
	color: #333;
	background-image: -webkit-linear-gradient( left, #333 0%, #333 100% );
	background-image: linear-gradient( to right, #333 0%, #333 100% );
}

a:focus {
	color: #666;
	background-image: -webkit-linear-gradient( left, #666 0%, #666 100% );
	background-image: linear-gradient( to right, #666 0%, #666 100% );
}

a:visited {
	color: #999;
	background-image: -webkit-linear-gradient( left, #999 0%, #999 100% );
	background-image: linear-gradient( to right, #999 0%, #999 100% );
}

background-image is responsible for the underline and it has the same color as the text. The code looks massive. Nevertheless, you usually do not limit yourself to one link color. In my personal experience there are at least three of them: general link color, grey, and white (when on dark background). This means 3x more of the code. But currentColor does the magic again:

a {
	text-shadow: 2px 0 0 #fff, -2px 0 0 #fff;
	color: #000;
	background-image: -webkit-linear-gradient( left, currentColor 0%, currentColor 100% );
	background-image: linear-gradient( to right, currentColor 0%, currentColor 100% );
	background-repeat: repeat-x;
	background-position: 0 95%;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}

a:hover,
a:focus		{ color: #333; }
a:focus		{ color: #666; }
a:visited	{ color: #999; }

/* grey links */

.grey-links a			    { color: #999; }
.grey-links a:hover,
.grey-links a:focus		{ color: #666; }
.grey-links a:active	{ color: #333; }

Pseudo-elements

I believe you are familiar with CSS triangles and have used them many times. Me too, and very often I use them to enrich the link styling, like this:

CSS pseudo-element ::after is a triangle in this case. By using currentColor you don’t have to repeat color settings for the triangle and its interaction states:

a			    { color: #000; }
a:hover,
a:focus		{ color: #333; }
a:active	{ color: #666; }

a::after {
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-right: none;
  content: '';
  display: inline-block;
}

a::after,
a:hover::after,
a:focus::after,
a:active::after {
  border-left-color: currentColor;
}

Horizontal line

This isn’t an example of writing less code. It’s more like an example of writing efficient and maintainable code. The purpose of the horizontal line, the <hr />, is to divide different parts of the content. I think that visually the line shouldn’t be disturbing, it should be subtle:

Dudley has already mentioned this among his examples, so I’m just repeating this and adding a little tweak:

.post {
	color: #000;
}

.post hr {
  width: 33%;
  height: 0.313em; /* 5px */
  border: none;
  background-color: currentColor;
  opacity: .2;
}

The smart thing about this code is that if you ever change the color of the text, you will not need to change the color of the horizontal line. Automation is what we always seek in our work. The more code we write, the more we value the automation solutions.

Before I go…

Have any more practical and code-saving usages of currentColor? Be sure to share them.

Redesign

Thu, 30 Oct 2014 00:00:00 GMT

After almost three years I have finally arrived at the point where I had to redesign my personal website. I was forced by a few reasons.

The first one is that I had this huge image on the homepage for the newest blog post. It was okay as long as I had something unique to show, preferably my own creation. But what if I wanted to write a short post, a comment, for example, which has no relation to any unique graphics? Stock images – no, thank you. I wanted to lose this dependency.

The second reason is the ad by AdPacks. I wanted to have it on every page of my website. Web design audience does not conflict with real, useful web design related ads. That’s one more reason to keep sharing web design techniques.

Lastly, there were many small details which I was mad about and I knew I needed to eliminate these evils. Realignment just wouldn’t have worked out, so I put my the previous design under v2.osvaldas.info and came up with this…

The feel

I wanted a different mood for the website. A more personal and authentic feel, rather than white-color-dominating and sales-first design. I chose the background color similar to the color of my Moleskine notebook pages’ and a typace from Serif fonts family.

Browsing through Google Fonts the typeface named Playfair Display quickly took my attention. It’s extremely good looking for large text but not so appealing for smaller sentences and paragraphs. For the later cases I am using Google’s famous Roboto. I’ve been struggling a lot to find a readable typeface and Roboto seemed to be a good way out.

Layout

Reading text is much easier when the content block is centered on the page because your face is naturally centered in relation to the screen. Despite the sidebar, the layout is centered in relation to the content block rather than the whole layout. Most of the time this helps to keep the content block centered. Try resizing the window to see how the layout behaves.

On smaller screens the sidebar is transformed to a header-like element of the website, which auto hides when scrolling down in order to give more room for content.

Buttons

Quickly after Google introduced their new design language, front-enders created a button-click effect technique equivalent for web. It’s a nice effect, but it uses JavaScript and some extra markup which is why I think implementing is not reasonable. I wanted something similar but with a lighter implementation. Thank you, pseudo elements and CSS animation. I am going to share the code in one of my future blog posts. Inspired by Google’s Material Design and interpreted by me:

Links

I was skeptical about this CSS gradients based technique when I first saw it, because it requires text shadow. Although, that is not a problem if you have a solid color background behind the links, which is exactly my case. Finally, David’s implementation persuaded me to try this out.

Beauty demands victims. The bad thing about this technique is that you have to define few properties: you have to know the background color behind the link, and you have to know the color of the link. I found a trick that basically eliminates that last flaw – it’s a CSS variable currentColor. There are many more cases where it saves me lines of CSS and which I am going to document later.

With the help of Modernizr I target browsers that do not support CSS gradients and browsers which have JavaScript disabled (because Modernizr will not function and most likely they do not support gradients as well) for fallback:

html.no-js a,
html.no-cssgradients a {
	text-decoration: underline;
}

html.cssgradients a {
	text-shadow: 2px 0 0 #f2f6ed, -2px 0 0 #f2f6ed;
	background-image: linear-gradient( to right, currentColor 0%, currentColor 100% );
	background-repeat: repeat-x;
	background-position: 0 95%;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}

Responsive images

Native responsive images technique ([scrset] and <picture>) is making just the first steps – the browser compatibility is very low. Picturefill polyfil fails when JavaScript is disabled – no images will be displayed and crawled by search engines. I ended up writing my own polyfil. The technique is based on the usage of <noscript> tag and has four main features:

Images are displayed even if JavaScript is disabled;
Images are reachable by search engines. Nick Power did a test to find out if the contents of <noscript> are crawled by search engines. The result was positive;
Images are lazyloaded. Images are loaded and displayed only if user will see them. Why download these megabytes if the user is not going to scroll down the page?
Finally and most importantly, the script picks the most appropriate image source from data-srcset attribute by using the the syntax of native [srcset].

Let’s have a look to what this has helped to achieve so far. Take my work page for example. There are 31 large images. The “problem” is that a user may not necessarily scroll down the page and see all the images. What if they will just click the first link and use an in-page navigation to see the rest of the works? So, the initial size of the page viewing it on 13” laptop is 1.34 mb. If a user scrolls down the page, the size increases up to 3.50 mb. Repeating the same scenario on iPhone, the numbers are respectively 0.78 mb and 2.61 mb. Mobile data users would appreciate that.

Green and resources-saving web design starts here. I am going to share the code very soon.

Fonts

99% of the time I use Google Fonts. This is a third-party service which not necessarily works smoothly all the time. In order to prevent these services from badly influencing website loading, it’s a good practice to use third-party services in a non render blocking manner – asynchronously. Thanks to Filament Group for writing and sharing a JavaScript function loadCSS. Along with no-JavaScript fallback the insertion looks this:

<noscript>
	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />
</noscript>

<script>
	function loadCSS(e,t,n){"use strict";var r=window.document.createElement("link");var i=t||window.document.getElementsByTagName("script")[0];r.rel="stylesheet";r.href=e;r.media="only x";i.parentNode.insertBefore(r,i);setTimeout(function(){r.media=n||"all"})};
	loadCSS( '//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' );
</script>

However, this does not prevent from text flashing. To fix that I am going to consider two techniques: Smashing Magazine’s and Web Font Loader.

SVG icons

The only rastered graphics on this website is images. I have fully switched to good ol’ SVG, because the device screens are improving so fast that @2x is not enough today. SVG saves the time and provides huge manipulation possibilities.

Firstly, I tried encoding SVG files with Base64 and inserting them directly into CSS. However, the method has various flaws and isn’t recommended. You cannot color the images by simply using CSS property fill, neither take the advantage of viewbox and other related attributes. On some browsers (i.e. IE Mobile) the images look blurry, etc. I am still using this method on Readerrr, but that will change soon.

Finally, I stayed on Inline SVG. It is still weird for me to insert icons using HTML tags, because I have always treated icons as a decoration, not content. Anyway, I can ignore that because of the flexibility that Inline SVG gives.

I have developed a custom, still experimental way of providing the SVG icons for the document. If possible it stores icons onto browser’s localStorage. Else and if possible it loads icons asynchronously. It also guarantees that icons are displayed in both JavaScript and no-JavaScript environments, including IE 9, 10, 11. I am going share the code soon.

Performance

Besides asynchronous CSS, there is also a very similar way to load JavaScript files. Thanks again to Filament Group:

<script>
	function loadJS(e){"use strict";var t=window.document.getElementsByTagName("script")[0];var n=window.document.createElement("script");n.src=e;t.parentNode.insertBefore(n,t);return n};
	loadJS( 'file.js' );
</script>

Putting this into <head> means that downloading of the JavaScript file starts along with the downloading of the whole document. It also means that downloading of the document is not interrupted or blocked by downloading of the document. What a win.

The fewer render-blocking cases the faster the website loads. Or, which is very important, at least gives that impression to a user.

The size of the homepage is 231 kb, including AdPacks ad. 86 kb belongs to jQuery. I think the proportion is saying “go jQuery-less”…

I had this idea for some time now. I also had a newsletter module for my CodeIgniter based back-end system which I developed for my client. So I am double sizing the amount of options for subscribing to my news. No regular emails for now, just important news, such as big blog posts, shop items, or personal projects.

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

Sat, 12 Jul 2014 00:00:00 GMT

After I’ve published the post on how I had implemented responsive equal height blocks into ~~Readerrr~~, I received some useful feedback from the community. Daniel Sturm suggested using CSS3’s Flexbox rather than JavaScript, and Veerle Pieters tweeted “<...> you could do with Flexbox & use this as JS fallback”. Exactly! How did I not think of that at all?! I’ve read several articles about Flexbox before but never tried it myself, therefore this thing totally went out of my head.

Why Flexbox? In short, the Flexbox Layout module was designed to solve problems exactly like this. It is an efficient and flexible way to manage probably all types of layouts. It provides almost no time gap between initially wrong and correctly laid out layout look. In JavaScript solution case it takes time to download the document, then to download the corresponding JS file, and, if there are any, download images in the blocks. Flexbox is instant and JavaScript takes seconds. Even so, this JavaScript case is perfect for people who use older browsers that do not support Flexbox.

The problem

If you haven’t read my previous post, you don’t need to. Here’s the code and the problem (broken-like layout) to solve:

<ul class="list">
	<li class="list__item"><!-- content --></li>
	<li class="list__item"><!-- content --></li>
	<!-- other items -->
</ul>

.list {
	overflow: hidden; /* just clearing floats */
}

.list__item {
  width: 25%; /* 4 items per row */
  float: left;
}

The solution

If you haven’t had any touch with Flexbox, you’ll be surprised how magical it is. display: flex initiates Flexbox for the container element and flex-wrap: wrap tells to wrap child items rather than fit them onto one line. Repeating display: flex for the child items makes sure the elements have the same heights in their rows.

.list {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.list__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

This works perfectly in the latest versions of Chrome, Android, Safari, Opera, Firefox, and Internet Explorer 10+. For the rest I have a JavaScript pill.

I did not include this into the previous CSS code, but some of the older WebKit browsers support the old Flexbox syntax (display: -webkit-box). However, the wrapper property -webkit-box-lines: multiple simply does not work on iOS Safari 6.1- nor on Android 4.3-.

JavaScript fallback

This part covers a fallback solution for such browsers as Internet Explorer 9-, Android 4.3-, iOS Safari 6.1-, and Opera Mini. I wrote a tiny piece of jQuery-dependent code which:

Detects if the browser does not support Flexbox;
Calculates the number of items per row by dividing the widths of .list and .list__item;
Virtually divides the list into rows accordingly to that number;
Detects which item has the biggest height in each row;
Sets these heights for other items in each row correspondingly.

;(function($, window, document, undefined) {
	var s = document.body || document.documentElement, s = s.style;
	if(s.webkitFlexWrap == '' || s.msFlexWrap == '' || s.flexWrap == '') return true;

	var $list = $('.list'),
		  $items = $list.find('.list__item'),
		  setHeights	= function() {
        $items.css('height', 'auto');

        var perRow = Math.floor($list.width() / $items.width());
        if(perRow == null || perRow < 2) return true;

        for(var i = 0, j = $items.length; i < j; i += perRow) {
          var maxHeight	= 0,
              $row = $items.slice(i, i + perRow);

          $row.each(function() {
            var itemHeight = parseInt($( this ).outerHeight());
            if (itemHeight > maxHeight) maxHeight = itemHeight;
          });
          $row.css('height', maxHeight);
        }
      };

	setHeights();
	$(window).on('resize', setHeights);
	$list.find('img').on('load', setHeights);

})(jQuery, window, document);

What if JavaScript is disabled in a browser? The problem is that CSS’s native feature detection is less supported than Flexbox itself. Therefore, using @support rule will not cover every browser that supports Flexbox. But that’s better than nothing.

What I suggest is to treat things this way: disabled JavaScript = no Flexbox support (I believe this equality is mostly correct) and fix the exceptions with the help of @support. Technically, add a class name .no-js to <html> tag and remove it with JavaScript. That’s how we’ll know if it is disabled or not. Then, style the list items respectively and finally “compensate” this styling with the help of @supports.

I chose to present the blocks as full-width rows in this case. If there are any images, they will be aligned by the right edge of the row on larger screens.

<html class="no-js">
	<head>
		<!-- your stuff -->
		<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")})(document,window,0);</script><!-- remove this if you are using Modernizr -->
	</head>
	<!-- your stuff -->
</html>

html.no-js .list__item {
	width: 100%;
	float: none;
}

html.no-js .list__item img {
  max-width: 9.375rem; /* 150 */
  float: right;
  margin-left: 1.25rem; /* 20 */
}

@supports (display: -webkit-flex) or (display: flex) {
	html.no-js .list__item {
		width: 25%;
		float: left;
	}

  html.no-js .list__item img {
    max-width: none;
    float: none;
    margin-left: 0;
  }
}

Demo

See the demo.

Responsive Equal Height Blocks

Thu, 10 Jul 2014 00:00:00 GMT

Update: after publishing this post I received some useful feedback from the community and wrote a new post with much smarter solution to the problem. I recommend you reading Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback instead._

When I was designing ~~Readerrr’s~~ features page, I wanted to put the features list content in a semantic markup, i.e. <ul>, <li>, and to have two list items per row on larger screens as well as one item per row on narrower screens. Each item has a different unknown amount of content which means every list item has a different height. Therefore, when you float them next to each other, you naturally get the layout which looks kinda broken, like this:

This could be fixed by virtually dividing the list into rows, picking the height of the highest item in each row, and setting it for the other corresponding row items. Most importantly, this should be done in a responsive way:

Basic layout

Let’s start from where we began by constructing the “problematic” layout:

<ul class="list">
	<li class="list__item"><!-- content --></li>
	<li class="list__item"><!-- content --></li>
	<!-- other items -->
</ul>

In my example I’ll initially have 4 items (100% ÷ 4 = 25%) per row:

.list {
	overflow: hidden; /* just clearing floats */
}

.list__item {
  width: 25%; /* 4 items per row */
  float: left;
}

As I mentioned and showed previously, this code produces the layout which looks broken.

Responsive equal heights

Before controlling the heights, let’s set the number of blocks per row for smaller screens with the help of CSS media queries:

@media screen and (max-width: 50em) /* 800px */ {
	.list__item {
		width: 33.333%; /* 3 items per row */
	}
}

@media screen and (max-width: 40em) /* 640px */ {
	.list__item {
		width: 50%;  /* 2 items per row */
	}
}

@media screen and (max-width: 20em) /* 320px */ {
	.list__item {
		width: 100%;  /* 1 item per row */
		float: none;
	}
}

I wrote a tiny piece of jQuery-dependent code which:

Calculates the number of items per row by dividing the widths of .list and .list__item;
Virtually divides the list into rows accordingly to that number;
Detects which item has the biggest height in each row;
Sets these heights for other items in each row correspondingly.

These steps are performed once when the page loads and repeated every time the browser’s window resizes.

;(function($, window, document, undefined)
{
	'use strict';

	var $list = $('.list'),
		  $items = $list.find('.list__item'),
		  setHeights = function() {
        $items.css('height', 'auto');

        var perRow = Math.floor($list.width() / $items.width());
        if(perRow == null || perRow < 2) return true;

        for(var i = 0, j = $items.length; i < j; i += perRow) {
          var maxHeight	= 0,
              $row = $items.slice(i, i + perRow);

          $row.each(function() {
            var itemHeight = parseInt($(this).outerHeight());
            if (itemHeight > maxHeight) maxHeight = itemHeight;
          });
          $row.css('height', maxHeight);
        }
      };

	setHeights();
	$(window).on('resize', setHeights);

})( jQuery, window, document );

What if there are images in the blocks?

This part is not relevant if there are widths and heights defined for images in HTML or CSS. However, here’s what will happen if the exact dimensions of images are unknown:

The way out is to repeat these four mighty steps by calling the respective function within each image load. This serves fine if you have just a few blocks and lightweight images.

// ...
setHeights();
$(window).on('resize', setHeights);
$list.find('img').on('load', setHeights); // the trick!

However, if you are about to build a huge gallery or some kind of masonry with a lot of heavyweight images, this would not work well because of the constant visual content overlaps and “jumps” while images are being downloaded. I suggest loading the images manually and building the layout block by block.

To start with, let’s put each image tag into <noscript></noscript>. These images will not be loaded by the browser if JavaScript is enabled. Luckily, they will remain accessible for search engines and will be loaded if JavaScript is disabled!

<li class="list__item">
	<figure>
		<noscript class="list__item__image"><img src="img.jpg" alt="" /></noscript>
		<figcaption>Text</figcaption>
	</figure>
</li>

Now hide the blocks with some CSS and, if you prefer, define the transition for opacity for animated block fade-in:

.list__item {
	opacity: 0;
	-webkit-transition: opacity .5s linear;
	transition: opacity .5s linear;
}

One more tiny piece of jQuery-dependent code recursively replaces all the noscript’s with their child img’s, loads them, and fades in their parent blocks one after another.

var loadImages = function() {
	$items.filter('.js-load-images:first').each(function() {
		var $this		= $( this ),
        $imgs		  = $this.find('noscript.list__item__image'),
        imgTotal	= $imgs.length,
        imgLoaded	= 0;

		$imgs.each( function() {
			var $noscript	= $(this),
				  $img		  = $($noscript.text());

			$img.load(function() {
				$noscript.replaceWith($img);
				imgLoaded++;
				if(imgLoaded >= imgTotal) {
					$this.css('opacity', 1);
					setHeights();
					loadImages();
				}
			});
		});
	});
};

$items.addClass('js-load-images');
loadImages();

What if JavaScript is disabled?

Graceful degradation using CSS! In order to check whether JavaScript is enabled or disabled via CSS, append a class name no-js to html tag and remove it using JavaScript (you can skip the script part if you are using Modernizr in the document). Naturally, the class name will not be removed if JavaScript is disabled.

<html class="no-js">
	<head>
		<!-- your stuff -->
		<script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")})(document,window,0);</script>
	</head>
	<!-- your stuff -->
</html>

Now you can easily modify the blocks for no-JavaScript case. I chose to present the blocks as full-width rows. If there are any images, they will be aligned by the right edge of the row on larger screens:

html.no-js .list__item {
	width: 100%;
	float: none;
}

html.no-js .list__item img {
  max-width: 9.375em; /* 150px */
  float: right;
  margin-left: 1.25em; /* 20px */
}

@media screen and (max-width: 20em) /* 320px */ {
	html.no-js .list__item img {
		max-width: none;
		float: none;
		margin-left: 0;
	}
}

Demo

Three types of examples for you to try and investigate:

See the demo.

Minimalist Newsletter Subscription Form

Thu, 12 Jun 2014 00:00:00 GMT

Subtle, minimalist and intuitive UI is what I like most about web design, having the visual part of it in mind. The design is in details. Refine each of them in the context of user experience and you’re almost perfect.

Newsletter subscription form is the detail that can easily get you one step closer to the perfection. But it’s probably the most simple web form with just an input field and a submit button. "What more can you do with it?" you may ask. The first impression can be deceptive: there are quite a few things you can do with it, such as floating label, unusual visual approach, etc. But there’s one thing we’ll surely do now: hide the submit button by default and only show it if user enters the correct email address.

HTML

Traditionally, let’s start with the minimalist markup for minimalist form:

<form class="newsletter">
  <input type="email" value="" placeholder="Enter your email address" />
  <input type="submit" value="OK" />
</form>

JavaScript

This sets a “trap” on the input field to check with a little help from RegExp if the typed text has “symptoms” of an actual email address. The check is performed with each symbol typed. In case of success a custom class name is added, else – removed. Just that. The rest will be handled using CSS.

With jQuery dependency

;(function( $, window, document, undefined) {
  'use strict';

  var form        = '.newsletter',
      className   = 'newsletter--active',
      email       = 'input[type="email"]';

  $(form).each(function() {
    var $form   = $(this),
        $email  = $form.find(email),
        val     = '';

    $email.on('keyup.addClassWhenEmail', function() {
      val = $email.val();
      $form.toggleClass(className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test(val));
    });
  });
})(jQuery, window, document);

The code is compatible with both 1.x (IE6+) and 2.x (IE9+) library branches. The namespace addClassWhenEmail for keyup event provides a possibility to remove the functionality whenever you need this, for example:

$('.newsletter input[type="email"]').off('.addClassWhenEmail');

Without dependencies JavaScript code

;(function(window, document, undefined) {
  'use strict';

  var form        = '.newsletter',
      className   = 'newsletter--active',
      email       = 'input[type="email"]',

      addEventListener = function(element, event, handler) {
        element.addEventListener ? element.addEventListener(event, handler) : element.attachEvent('on' + event, function(){ handler.call(element); });
      },
      forEach = function(elements, fn) {
        for(var i = 0; i < elements.length; i++) fn(elements[i], i);
      },
      addClass = function(element, className) {
        element.classList ? element.classList.add(className) : element.className += ' ' + className;
      },
      removeClass = function(element, className) {
        element.classList ? element.classList.remove(className) : element.className += element.className.replace(new RegExp( '(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi' ), ' ');
      };

  forEach(document.querySelectorAll(form), function($form) {
    var $email = $form.querySelectorAll(email);

    if($email.length) {
      $email = $email[0];
      addEventListener($email, 'keyup', function() {
        $email.value != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test($email.value) ? addClass($form, className) : removeClass($form, className);
      });
    }
  });
})(window, document);

The code functions in Internet Explorer 8+. All fine with the other browsers.

If you paid attention, you saw I was using a loop. This means you can have multiple newsletter subscription forms on the page and each of them will be served. If you need different configurations for each form, check the end of the post for plugin version.

Configuration

There are three variable values that you might want to change accordingly to your selectors eco-system:

var form        = '.newsletter',            // form selector
    className   = 'newsletter--active',     // class name for form when correct email is entered
    email       = 'input[type="email"]',    // email input field selector

CSS

The JavaScript part provides us with a full control of form management when there is a correct email address entered. In my case the button hidden or displayed.

.newsletter:not(.newsletter--active) input[type='submit'] {
  display: none;
}

I’m also using a simple CSS animation to display the button in style. Check it!

See the demo.

Plugin version

For your convenience, I wrapped the JavaScript code into a form of a plugin, so that you can have multiple instances with different options if you wish. The same settings and browser compatibility applies.

jquery.add-class-when-email.js; 366 bytes when minified.
add-class-when-email.js; 867 bytes when minified.

// jQuery
 
$('.newsletter').addClassWhenEmail( {
  className:  'newsletter--active',
  email:      'input[type="email"]'
});
 
 
// non-jQuery
 
addClassWhenEmail('.newsletter', {
  className:  'newsletter--active',
  email:      'input[type="email"]'
});

A thought

It’s not an absolute truth that you should always hide the button by default. The decision should be dictated by the situation: importance and context.

Update

After publishing this post, I submitted it to Designer News and received some well-aimed feedback. Dan Klammer observed that we can control the button without JavaScript by using CSS’s pseudo-class :valid. However it’s quite poorly supported today. IE supports it from the version 10, Android from 4.4.3, not supported in Mobile Safari at all. Also, this method does not give control for the whole form, only for the button.

Keyboard Shortcuts for Pagination

Tue, 03 Jun 2014 00:00:00 GMT

Computers have multiple input devices for easier usage. Imagine entering text without a keyboard or using a website without a mouse. Therefore we, people who make websites, should enable these devices on our products. The most basic but very useful thing would be keyboard shortcuts for pagination.

When I was developing a custom Tumblr theme for ~~Tree House Love~~, I wanted to make navigating through the posts as easy as possible. I started by designing visually obvious Previous / Next buttons and ended up by applying a custom keyboard event callback via JavaScript. The latter is super-easy and should be “implanted” anywhere where this could be usable on the web. For the sake of better UX.

How it works

The custom callback function code detects which one of the two keyboard arrow keys were pressed: left or right. It then selects a corresponding pagination link and simply simulates (triggers) a click event for it.

Pagination patterns

In UI world there are a few patterns of pagination. The pattern could be a single or a combination of the following options:

Numbered (1, 2, 3, …) links;
Previous page and Next page links;
First page and Last page links.

Usually, the 3rd option is only used in a combination with other options.

HTML

Let’s “illustrate” the most common pagination patterns with some accessible markup.

Numbered (1, 2, 3, …) links

<nav class="pagination" role="navigation" aria-label="Pagination">
  <ul>
    <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="Page 1, current page">1</a></li>
    <li class="pagination-number"><a href="" title="Page 2" aria-label="Page 2">2</a></li>
    <li class="pagination-number"><a href="" title="Page 3" aria-label="Page 3">3</a></li>
    <li class="pagination-number"><a href="" title="Page 4" aria-label="Page 4">4</a></li>
    <li class="pagination-number"><a href="" title="Page 5" aria-label="Page 5">5</a></li>
  </ul>
</nav>

Previous and Next links

<nav class="pagination" role="navigation" aria-label="Pagination">
  <ul>
    <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>
    <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Numbered (1, 2, 3, …), Previous and Next, First and Last links

<nav class="pagination" role="navigation" aria-label="Pagination">
  <ul>
    <li class="pagination-first"><a href="" title="First page" aria-label="First page">First</a></li>
    <li class="pagination-prev"><a href="" rel="prev" title="Previous page" aria-label="Previous page">Prev</a></li>
    <li class="pagination-number pagination-current"><a href="" title="Page 1, current page" aria-label="1, current page">1</a></li>
    <li class="pagination-number"><a href="" title="Page 2">2</a></li>
    <li class="pagination-number"><a href="" title="Page 3">3</a></li>
    <li class="pagination-number"><a href="" title="Page 4">4</a></li>
    <li class="pagination-number"><a href="" title="Page 5">5</a></li>
    <li class="pagination-next"><a href="" rel="next" title="Next page" aria-label="Next page">Next</a></li>
    <li class="pagination-last"><a href="" title="Last page" aria-label="Last page">Last</a></li>
  </ul>
</nav>

JavaScript

I wrote a lightweight plugin to handle this part. You will love this – there are two versions of the plugin:

Without dependencies: keyboard-pagination.js; (2kb when minified);
With jQuery dependency: jquery.keyboard-pagination.js; (1kb when minified);

The plugin accepts some options:

Name	Default value	Description
num	false	List items selector for numbered (1, 2, 3, …) page links
numCurrent	false	Currently active numbered list item selector
prev	false	List item selector for the previous page link
next	false	List item selector for the next page link
first	false	List item selector for the first page link
last	false	List item selector for the last page link
doublePressInt	250	An interval (delta) in milliseconds between two button presses. Serves as a shortcut for first and last, which must be set. The lower the value the faster the button should be pressed two times.
keyCodeLeft	37	Key code for previous page
keyCodeRight	39	Key code for next page

// non-jQuery
 
keyboardPagination('.pagination', {
  num:        '.pagination-number',
  numCurrent: '.pagination-current',
  prev:       '.pagination-prev',
  next:       '.pagination-next',
  first:      '.pagination-first',
  last:       '.pagination-last'
});
 
 
// jQuery
 
$('.pagination').keyboardPagination({
  num:        '.pagination-number',
  numCurrent: '.pagination-current',
  prev:       '.pagination-prev',
  next:       '.pagination-next',
  first:      '.pagination-first',
  last:       '.pagination-last'
});

The plugin has a two public methods:

Name	Description
pause	Stops the plugin
resume	Resumes the plugin

// non-jQuery
 
var pagination = keyboardPagination('.pagination', { /* options */ });
pagination.pause();
pagination.resume();

// jQuery

var $pagination = $('.pagination').keyboardPagination({ /* options */ });
$pagination.pause();
$pagination.resume();

Tips

Only specify what is necessary. You do not have to set values for every selector option.

If your pagination consists only of Previous / Next links, you only have to set the values for prev and next, for example:

keyboardPagination('.pagination', {
  prev: '.pagination-prev',
  next: '.pagination-next'
});

If your pagination only has numbered (1, 2, 3, …) links, you only have to set the values for num and numCurrent, for example:

keyboardPagination('.pagination', {
  num:        '.pagination-number',
  numCurrent: '.pagination-current',
});

If you have a pagination with both types of Previous / Next and 1, 2, 3, … links, you should specify only one group of options, either prev and next or num and numCurrent. There is no need for both groups.

If you have First and Last links in your pagination and prefer enabling double press shortcut for arrow buttons, specify first and last, for example:

keyboardPagination( '.pagination', {
  first:      '.pagination-first',
  last:       '.pagination-last',
  num:        '.pagination-number',
  numCurrent: '.pagination-current'
});

See how it works and study the real-life code:

See the demo.

Compatibility

The jQuery version of the plugin is compatible with both 1.x (IE6+) and 2.x (IE9+) library branches. The non-jQuery version functions in Internet Explorer 8+. All fine with the other browsers.

Introducing Readerrr

Wed, 26 Feb 2014 00:00:00 GMT

I love RSS. I think it is the best method to get the news. Way better than newsletters or social media. Why? I will dedicate one of my further posts to answer this question. So, because of my huge love for RSS, my heart was crying when I heard the sad, sad news: Google Reader is shutting down on July 1, 2013. The very first question that came into my mind was: "I have lots of coffee supplies, how will I follow my favorite websites then?!".

I started looking for the alternatives, but none of them was what I expected. Most of them did not differ much from MS Word, therefore they were not available on mobile devices. Others were slow and complex. They had no focus on design and UX. They did not have these tiny little tricks that make reading joyful. Even though today there are few good RSS readers that I would probably use, but they were too late – at the end of May 2013 I decided to do it myself (yeah, that’s my curse) and started wireframing…

Two or maybe three months passed by and I had the first fully working version of my RSS reader. I could do all these essential things such as subscribing to new feeds, managing current subscriptions, sorting them, marking content automatically as read, etc. The design and development process was quite exciting and involving. I was building features one after another, fixing bugs, testing on various mobile devices. The result gradually took a state of potentially shippable product. I had this cautious idea at the early stage of building it, that it would be great to go public one fine day. And it’s today. I named it – Readerrr.

Readerrr is a RSS reader. A place where you can follow your favorite websites. Just that. Nothing less and nothing more. Narrow enough focus zone, but with its own specific problems to solve. I will review some of them here.

Built for everyone, balanced for web designers

Nothing unexpected: it’s simply because I am a web designer, front-end developer and because I built it firstly for myself. As a result I implemented syntax highlighter. For now, that’s the only (but probably the most important) feature specifically useful for website makers, but I have more in my plans. One of my favorite features on Readerrr.

Reading experience and UI

RSS reader’s UX = reading experience which depends a lot on how user interface works. Readerrr has a fully scalable and zoomable UI. You can zoom in / out using default browser’s shortcuts (Cmd / Ctrl and + / -) or change default browser’s font size (in most cases default is 16px). This is super useful if you want to sit back and read your feeds from the distance or have weak eyesight.

There is more to UI: it is simple and clear. I believe in functional, distinctive and reasonable design. I also believe in this quote by Jonathan Ive. I think it perfectly sums up the theory of "good design":

An indicator has a value when it’s indicating something, but if it’s not indicating something, it shouldn’t be there.

Responsiveness

Web designer’s bread. I have tested Readerrr on iOS 6+, Android 4+ and Windows Phone 7+. I have plans to extend this circle of trinity a little bit in the nearest future.

On much larger screens there is a logical, mathematically calculated (woah!) break-point at which the content is centered relatively to the browser’s window, not sidebar. Keep your look straight, there’s no need to position browser’s window.

If you are an iOS user, I strongly suggest you adding Readerrr to Home Screen because fortunately it won’t open Safari when you tap a link as it does in 99.9% cases. Readerrr will function in fullscreen mode like a normal app without downloading and installing anything.

Keyboard shortcuts

Doing repetitive actions with mouse or touchpad is annoying. Here come keyboard shortcuts to ease the life: skipping through posts, switching through subscriptions, entering fullscreen mode, etc.

My favorite one is Space (spacebar). I redesigned the default functionality: instead of just scrolling down the page at 100%, it does that at 90% and marks the place where you’ve been reading with a red line. Quite practical, isn’t it?

Paid, but no free-trial?

The majority of the best online products and services are paid. That’s how business owners can guarantee quality. I am extremely skeptical about ads (evil) and quite skeptical about freemium (confusing) monetization types. I chose to be straight and simple in all the ways, not excluding the pricing.

The business decision I took is based on a consistent and responsible growth. I want to limit the amount of short-term users, and thus achieve the highest possible amount of users who are not too happy with their current RSS reader. At some point this is similar to invite-only strategy which is based on the same goal: consistent and responsible growth. Because bubbles burst!

Future

I have tons of improvement and feature ideas for Readerrr. I will consistently make them happen. I will also share the process, discoveries of growing a product as well as front-end and design techniques here, on my personal blog. I am going to announce a new feature in a couple of weeks!

P.S. did you know that Google Reader would never tell you which of your subscriptions were broken because of dead RSS links? I discovered that after importing my huge base of subscriptions to Readerrr. These were like the cows in your list that silently stopped giving you milk. Readerrr marks these entries and advices what you should do!

Image Lightbox, Responsive and Touch‑friendly

Mon, 27 Jan 2014 00:00:00 GMT

As for the image lightboxes, I have always lacked simplicity for them. I mean not only the visual design, but the overall experience: from implementation to UX. All due respect, but I have never liked any of these light-fancy-face-boxes. They all were solving problems that just don’t exist: lots of unwanted features by default, total mess in markup, no native behavior for touch screens. I was working on a project and needed an image lightbox that solves these problems. I needed a lightbox only for images, not video, text, and iframes at once. I made ImageLightbox.js.

Features

Ascetic. No captions, navigation buttons or background cover by default. Nothing that would distract user from the main purpose. That’s why I enjoy pointing out Jony Ive’s observation: “An indicator has a value when it’s indicating something, but if it’s not indicating something, it shouldn’t be there”. I think it is the most common thing that designers forget to solve.
Minimalistic. No bunch of default raster image files that fail on higher resolution screens. Just one source file which is only 4kb in size when minified. No messy markup. Just one simple element – <img>.
Extensible & configurable. If the default functionality is not enough, you can easily extend the plugin with custom JavaScript functions, change the settings or use a couple of useful method functions.
Responsive and touch-friendly. The most trending topics in web design and they are here. Images fit to any screen size and are swipe-able (native behavior) on touch capable devices.
iOS, Android and Windows Phone compatible. As well as desktop versions of Safari, Chrome, Firefox, Opera and Internet Explorer.
jQuery 1.x, 2.x, 3.x compatible. Just saying.
Preloads next image. While user is viewing the current picture, the plugin silently preloads the next picture which shows up without any delay when respective action is triggered.
Uses CSS transform and transition for moving images. Turns out CSS’s transform performs better than left (as well as right, top, bottom). But the plugin falls back on left if a browser does not support transform.
Interacts with keyboard. Standard, but essential Arrow Left, Arrow Right to switch images and Esc to quit the lightbox.

HTML

As I mentioned earlier, the plugin produces a single-element markup by default:

<img src="picture.jpg" id="imagelightbox" />

CSS

No default CSS. Everything is up to you. The minimal configuration I recommend is:

#imagelightbox{
  position: fixed;
  z-index: 9999;
  -ms-touch-action: none;
  touch-action: none;
}

position value can be anything, but in most cases fixed will produce what’s expected. Configure z-index to anything that fits your context best. touch-action: none removes the default touch manipulation from the element.

JavaScript

Source: imagelightbox.js (uncompressed; 9kb) and imagelightbox.min.js (minified; 4kb).

The plugin takes the advantage of jQuery. That means the plugin code or file must follow jQuery code or file. An example of the basic implementation:

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
  $(function() {
    $('a').imageLightbox();
  });
</script>

ImageLightbox() accepts some options. The defaults are:

$(selector).imageLightbox( {
  selector:       'id="imagelightbox"',   // string;
  allowedTypes:   'png|jpg|jpeg|gif',     // string;
  animationSpeed: 250,                    // integer;
  preloadNext:    true,                   // bool;            silently preload the next image
  enableKeyboard: true,                   // bool;            enable keyboard shortcuts (arrows Left/Right and Esc)
  quitOnEnd:      false,                  // bool;            quit after viewing the last image
  quitOnImgClick: false,                  // bool;            quit when the viewed image is clicked
  quitOnDocClick: true,                   // bool;            quit when anything but the viewed image is clicked
  onStart:        false,                  // function/bool;   calls function when the lightbox starts
  onEnd:          false,                  // function/bool;   calls function when the lightbox quits
  onLoadStart:    false,                  // function/bool;   calls function when the image load begins
  onLoadEnd:      false                   // function/bool;   calls function when the image finishes loading
});

It also has a couple of method functions, as mentioned:

var $instance = $(selector).imageLightbox();
 
$instance.switchImageLightbox(index);
// switches to the other image; accepts integer argument (an index of the desired image)
 
$instance.quitImageLightbox();
// quits the lightbox
 
$instance.addToImageLightbox($('a.is-new'));
// adds new image

Examples

Plugin without demo is a rhyme without reason. I have crafted a few practical examples how ImageLightbox and its options can be used in real life.

See the demo.

You can contribute, follow the project on GitHub.

The most interesting part in making of the plugin was mastering touch events on Windows Phone. That’s what the next post will probably be about.

P.S. I have recently discovered Fluidbox which is another approach to view images and, which I liked about it most, basically matches the design principles I’ve mentioned at the beginning of the post.

Changelog

The plugin now is on GitHub too (2016-11-22);
Support for jQuery 3.x and addToImageLightbox function (2016-06-17);
Added arrow buttons navigation example in the demo page (2014-07-22).

Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout

Mon, 02 Dec 2013 00:00:00 GMT

Dealing with CSS browser compatibility and solving technical issues is probably the real charm (I mean it) of front-end development. None of the projects do without it. Working on one of those I finally had my first experience with CSS function calc():

With calc(), you can perform calculations to determine CSS property values.

I know that you know this, and I also know that you have already seen these examples and have even tried them at home:

div {
  width: calc(100% - 2.5em);
  background-position: calc(50% + 50px);
  margin: calc(1.25rem - 5px);
}

As you see, calc() takes writing CSS to much higher level. It is so powerful that front-enders have no idea what to do with it yet. And with the recent appearance of KitKat (Android 4.4) the function has become supported in all major browsers (sorry 3rd brother, Opera Mini). Start using it, wisely.

Situation

Imagine this painfully standard situation: content and sidebar areas floated side by side, separated by gap:

Usually you have two div’s wrapped into one and styled:

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

.container,
.content,
.sidebar {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 80em; /* 1280 */
  padding: 2.5em; /* 40 */
}

.content {
  width: 80%; /* 960 */
  float: left;
}

.sidebar {
  width: 16.666%; /* 200 */
  float: right;
}
 
@media only screen and (max-width: 40em) /* 640 */ {
  .content,
  .sidebar {
    width: 100%;
    float: none;
  }

  .sidebar {
    margin-top: 1.25em; /* 20 */
  }
}

Looks like a perfectly responsive layout and there is nothing left to add, however…

Problem

The layout I worked on had quite a small initial width of the sidebar and a wide content area. Therefore, when resizing down the viewport, the sidebar becomes extremely tight very quickly. What to do when the sidebar gets too narrow and moving it under the content is yet too early?

Solution

It is a fixed-width sidebar, calc(), and a fallback for browsers that do not support this function. A minor modification of CSS classes .content and .sidebar brings these three bolds to life:

.content {
  width: 80%; /* 960 */
  width: calc(100% - 15em); /* 240 */
  float: left;
}

.sidebar {
  width: 16.666%; /* 200 */
  width: calc(12.5em); /* 200 */
  float: right;
}

If you were attentive you should see that the line width: calc(12.5em) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do.

The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions.

The second: width: calc(100% - 15em) and width: calc(12.5em). This is for newer browser versions which will override the previous width definitions. There are a couple of things to explain:

Content: calc(100% - 15em) = 100% - sidebar width - gap width. Besides that this calculates the width of the content element, it also assures that the gap between the sidebar and content is always equal to 2.5em (40px). Total win for perfectionists.
Sidebar: calc(12.5em) – who said that you need to calculate something between the brackets. This little trick cheats browsers into seeing width properties in pairs and using the only understandable one for them. I called this “imitating calc() fallback”, but actually it is vice versa. Um…

Party… Demo time! I made a button to imitate calc() support, you may want to try it:

See the demo.

One more thing

Just like many other CSS features, calc() was an experimental one and only available under the vendor prefixes some time ago. So let’s get the maximum of it:

.content {
  width: 80%; /* 960 */
  width: -webkit-calc(100% - 15em); /* 240 */
  width: -moz-calc(100% - 15em); /* 240 */
  width: calc(100% - 15em); /* 240 */
  float: left;
}

.sidebar {
  width: 16.666%; /* 200 */
  width: -webkit-calc(12.5em); /* 200 */
  width: -moz-calc(12.5em); /* 200 */
  width: calc(12.5em); /* 200 */
  float: right;
}

There is a way to do without calc(), and that is by taking the advantage of CSS property position. However, the whole layout would fail (which you do not want) if the sidebar was higher than the content area.

Drop-Down Navigation: Responsive and Touch-Friendly

Tue, 02 Apr 2013 00:00:00 GMT

What if you need a multi-level navigation? In most cases, you design a drop-down menu using unordered lists. But what do you do to make it usable on small and / or cursorless screens? By usable I mean being able to use hyperlinks on parental anchors and open them with a double-tap (which is a native act on touch devices), also being able to close the drop-downs by tapping anywhere outside them to avoid flashing and other huge usability faults but having a usual bulletproof drop-down menu on desktop screens at the same time. A while ago I came up with quite a simple technique. I have been successfully implementing it into my projects as there is no room for one-sided techniques anymore.

The Problem

...is a drop-down on touch screen because there is no cursor and you cannot hover on the navigation items! It gets even worse if you have links on parent menu items. Once you click them, the drop-down shows up for a second and then immediately disappears because the browser has just opened the link of an anchor you pressed! That sucks. As well as using hash symbol for parental link href's: as a consequence, you cannot use normal URLs, the page sometimes may scroll up after the link is clicked, the drop-down may flash, you won't be able to shut it off, etc. Sorry, that is not a problem anymore – it is solved in this post! Watch my very first video montage to get the idea:

Talking about responsiveness, there is a plenty, plenty of responsive navigation solutions out there. I admit, I have hardly gone deeper into any of these, but still my favorite one is David Bushell's off-canvas navigation. It is awesome. However, as for my personal projects I fit the usual one-button responsive navigation pattern. The same one goes here as well.

Composition

The technique consists of three main parts:

Simple drop-down navigation based on HTML and CSS;
Responsiveness implementation using media queries;
Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Now about everything in turn…

Firstly, simple markup of multi-leveled unordered lists with a little bit of HTML5 flavor. My example consists of two levels. Two is not the limit, you may have infinite levels on your next super project.

<nav id="nav" role="navigation">
  <a href="#nav" title="Show navigation">Show navigation</a>
  <a href="#" title="Hide navigation">Hide navigation</a>
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <a href="/" aria-haspopup="true">Blog</a>
      <ul>
        <li><a href="/">Design</a></li>
        <li><a href="/">HTML</a></li>
        <li><a href="/">CSS</a></li>
        <li><a href="/">JavaScript</a></li>
      </ul>
    </li>
    <li>
      <a href="/" aria-haspopup="true">Work</a>
      <ul>
        <li><a href="/">Web Design</a></li>
        <li><a href="/">Typography</a></li>
        <li><a href="/">Front-End</a></li>
      </ul>
    </li>
    <li><a href="/">About</a></li>
  </ul>
</nav>

Now let's just give a sense to the HTML above with the CSS below. Presenting only the principle parts of CSS. Full code – later in the demo.

Do not be surprised by Show / Hide navigation anchors. I am going to hide these for now using #nav > a selector and flick on later in the next step.

#nav {
  /* container */
}

#nav > a {
  display: none;
}

#nav li {
  position: relative;
}

/* first level */

#nav > ul {
  height: 3.75em;
}

#nav > ul > li {
  width: 25%;
  height: 100%;
  float: left;
}

/* second level */

#nav li ul {
  display: none;
  position: absolute;
  top: 100%;
}

#nav li:hover ul {
  display: block;
}

User interface behavior on non-touch screens is based on the result of position: relative and position: absolute manipulation. On touchscreens it still fails at solving the problem, but we will make it right later in the 3^rd part of the post.

Let's pour some responsiveness in. 640 pixels is my choice for a major breakpoint at which with the help of a single media query, the navigation shrinks to a button (icon). Therefore, the menu can only be called out by pressing the button.

@media only screen and (max-width: 40em) /* 640 */ {
  #nav {
    position: relative;
  }

  #nav > a {
    /* ... */
  }

  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }

  /* first level */

  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  
  #nav:target > ul {
    display: block;
  }
  
  #nav > ul > li {
    width: 100%;
    float: none;
  }

  /* second level */

  #nav li ul {
    position: static;
  }
}

CSS pseudo selector :target makes it easy to toggle menu as the anchor's href attribute coincides with CSS ID selector name. Therefore, as you might have understood, the first anchor of #nav > a is responsible for showing and the second for hiding the menu.

The most important things go in the end: let's finally solve the problem described in the very first paragraphs of the post. Here comes the promised super lightweight jQuery plugin which I called DoubleTapToGo.js and it is only 550 ridiculous bytes in size when minified.

When you tap the parent item for the first time, DoubleTapToGo prevents the browser from opening a new URL but allows that if tapped once again in succession. If there is an intermediate tap(s) between the first one and the second the counter resets. Quite simple principle of operation, isn't it? It may be hard to believe but this solved all of the flaws I have mentioned before.

Considering the markup above, the plugin should be only applied to the items that are parents – in order to avoid double-tap requirement on drop-down-less items:

$( '#nav li:has(ul)' ).doubleTapToGo();

This is it! Complete fulfillment, full code and working example – all in the demo:

Conclusion

I have ran quite successful tests on both Mac and Windows versions of the latest (April, 2013) Chrome, Safari, Firefox, Opera releases, also IE9+, iOS 6 / 7, Android 2.2 / 4.2 / 4.4, Windows Phone 7 / 7.5, Opera Mobile.

Changelog

Windows Phone 7.5 is tricky when it comes to :hover. Append aria-haspopup="true" to the anchors that have <ul> siblings. (2014-01-29)

Audio Player: Responsive and Touch-Friendly

Thu, 27 Dec 2012 00:00:00 GMT

A couple of months ago I built a jQuery plugin that replaces <audio> element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.

To sum it up, the plugin enables indirect styling of <audio> element. That's why I built it. I wanted the player to fit the design theme for one of my present projects – IP telephony for business (VOIP). The audio element serves for IVR (Interactive Voice Response) function where clients can built their own voice responders / menus, make audio records and rehear them.

A couple of weeks ago I wrote an in-depth article about the plugin for Codrops, which I recommend for people who think of themselves as less experienced in the field. Receiving some helpful feedback there, helped me to improve the player. Obviously, this is not the end and I will be looking for your feedback here as well.

Features

Before deciding to build a plugin on my own, I did a little research on existing alternatives. I had clear and strict requirements: (1) it must be lightweight, customizable; (2) it must solve contemporary problems like touch and responsive; (3) it must not solve problems I don't have yet. However, nothing passed through the filter. As the matter of fact, the player I built is:

Responsive.

To achieve this, full responsibility falls on your CSS. My example is responsive. You can have a non-responsive player as well, but that is not recommended. Responsiveness is an important sign of a good web experience.

Touchable.

Touchableness is an important sign of a good web experience as well. Having these two, you are device and screen independent. And that is a half job done!

Adaptive.

When the browser does not support the audio element entirely or any of the provided audio files, the player then gracefully degrades to a one-button (Play/Pause buttons only) <embed /> element based player which will use a third party plugin (mostly Quick Time on Mac, Windows Media Player on Windows) to play the audio file. Another possible scenario: JavaScript disabled in the browser. Browser's default player takes action then. And that is totally fine.

Native.

The player is in no way directly native. The plugin accepts audio element's attributes (src, autoplay, loop, preoload) and tags (<source>). Besides that, autoplay and loop attributes are inherited on the previously mentioned fallback case.

Usable.

The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).

Image-less.

This depends on your CSS as well. The looks of my player is all CSS, not a single image file used. Having that and sizing everything with em units, enables the player to be scaled and zoomed.

Flash-less.

So long, Flash. You are unwanted here.

Lightness.

The minified version of the plugin is just 4KB large small.

Usage

Add the audio element, set the attributes you need and add source(s). The more different sources you add, the more users will be able to listen to your audio (because none of the audio formats are supported across all browsers). Three examples:

<audio src="audio.wav" preload="auto" controls></audio>

This will just preload the audio.wav file and won't play it until user clicks Play button. Other preload values (none, metadata) will not preload the file.

autoplay the file when it loads and then loop it in this way:

<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

Specify multiple audio formats to solve the previously mentioned problem:

<audio preload="auto" controls>
  <source src="audio.wav" />
  <source src="audio.mp3" />
  <source src="audio.ogg" />
</audio>

Mystic controls? It is a boolean attribute which does not influence the plugin in any way, but ensures that browser's default player is displayed and displayed with controls when JavaScript is disabled.

The final step – calling the plugin (by including jQuery and the plugin files in the document if that hasn't been done previously) on the audio element:

<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>
  $(function() {
    $('audio').audioPlayer();
  });
</script>

The plugin has some optional parameters. The most important one is called classPrefix. The passed value becomes a class name for the parent element and class name prefix for child elements. Other options may only be advantageous for languages other than English. Example with default values:

$('audio').audioPlayer({
  classPrefix: 'audioplayer',
  strPlay: 'Play',
  strPause: 'Pause',
  strVolume: 'Volume'
});

HTML

As I mentioned in the very first paragraph, when the plugin is called, the <audio> element is replaced then with some HTML:

<div class="audioplayer audioplayer-stopped">
  <audio src="audio.wav" preload="auto" controls></audio>
  <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
  <div class="audioplayer-time audioplayer-time-current">00:00</div>
  <div class="audioplayer-bar">
    <div class="audioplayer-bar-loaded"></div>
    <div class="audioplayer-bar-played"></div>
  </div>
  <div class="audioplayer-time audioplayer-time-duration">&hellip;</div>
  <div class="audioplayer-volume">
    <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
    <div class="audioplayer-volume-adjust"><div><div></div></div></div>
  </div>
</div>

There are some class names, which are assigned to the parent element when:

audioplayer-playing – audio is being played:

<div class="audioplayer audioplayer-playing">

audioplayer-stopped – audio is being stopped:

<div class="audioplayer audioplayer-stopped">

audioplayer-muted – volume is muted:

<div class="audioplayer audioplayer-muted">

audioplayer-novolume – no volume adjustment is available:

<div class="audioplayer audioplayer-novolume">

Important: when the audio element is not supported or none of the given audio files are compatible with the browser, the player switches to Mini mode, which basically reduces the player to Play/Pause button (because "embed" element is limited in terms of manipulation):

<div class="audioplayer audioplayer-stopped audioplayer-mini">
  <embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
  <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>

Reminder: using classPrefix options on the initiation of the plugin you can replace every audioplayer occurrence with your own value in the HTML and so to have different looks of multiple players on the same website.

Now, everything depends on how you will style the player using CSS. I will skip this part here and go directly to demo, but you can read my article on Codrops about the styling anytime.

Demo

As mentioned hundreds of times before, my player is responsive and isn't even dependent on Media Queries. I have a made a scheme which explains the layout:

The parent element .audioplayer is position: relative; whereas the child elements .audioplayer-* are position: absolute;.

See the demo.

Grab the plugin: audioplayer.js (uncompressed; 8KB) or audioplayer.min.js (minified; 4KB).

Feedback

I tested the player and it works fine on the latest Safari, Chrome, Firefox, Opera both Mac and Windows versions. The player works well on Internet Explorer 9, 10 and gracefully degrades to mini mode on earlier versions. I have also been lucky with iOS 6, Windows Phone 7 and Android 4.2 default browsers. However, the earlier Android versions does not support "audio" nor "embed" elements, so the player won't work there at all.

P.S. do not confuse the plugin with the media centre or so. It was not built to have playlists or display album covers.

Responsive jQuery Masonry

Tue, 18 Sep 2012 00:00:00 GMT

…or Pinterest-style layout. jQuery Masonry is a jQuery-based plugin for a dynamic grid layout built by David DeSandro. What it does is “arranges elements vertically, positioning each element in the next open spot in the grid” and what you get is “minimized vertical gaps between elements of varying height”. Let’s dive into that.

~~Sheepy Me~~ is a website where I constantly combine time-tested techniques and new trends. As for the blog where pictures act big in both ways, Pinterest inspired layout (a trend, popularized by Pinterest) probably was the best choice for listing items attractively. Although, JavaScript-based layout is not a good practice and should be avoided while CSS is capable to do this instead. This time, so far, it's not. Will take a look closer at this later in the post anyway.

jQuery Masonry is not the only plugin and method for achieving the same effect, but it was the one actually working as well as working in the way I prefer. In responsive way. We're at the nice times when not thinking responsively is a bad habit and non-responsive techniques are considered as, to put it mildly, poor ones. jQuery Masonry is responsive-friendly, but that's not enough and some extra work is necessary in order to make it all meaningful.

The Grid

Three-column grid is when screen width is higher than 640 pixels. Two columns – when screen width is equal to or less than 640 pixels, but is more than 320 pixels. And one column – when screen width is equal to or less than 320 pixels. The scheme may be easily adjusted to any other manner.

Setting It Up

Apart from the obvious include-jQuery-first, let's see how actual things look like before bringing them to the world of responsiveness.

HTML structure is the simplest thing here. The further content goes into .item elements. Thinking of better semantics, it would be nicer to go with unordered list. At Sheepy Me I used <ul>'s for comments, date and tags to present into .item's. To avoid any conflict and keep CSS clean, div's was the only choice.

<div id="wrapper">
  <div id="list">
    <div class="item"> ... </div>
    <div class="item"> ... </div>
    <div class="item"> ... </div>
    <!-- ... -->
  </div>
</div>

CSS is a little bit more specific as it puts our layout to fluid mode. Instead of ritual px, I use em (based on browser's default size 16px, 100%) and ` to define sizes and so to achieve complete flexibility across the browsers, screen sizes and people habits.

#wrapper {
  max-width: 60em; /* 960 px */
  margin: 0 auto;
}

#list {
  width: 103.125%; /* 990px */
  overflow: hidden;
  margin-left: -1.562%; /* 15px */
  margin-bottom: -1.875em; /* 30px */
}

.item {
  width: 30.303%; /* 300px */
  float: left;
  margin: 0 1.515% 1.875em; /* 15px 30px */
}

What's interesting, I did a small workaround to solve the problem of horizontal margins by setting the width of #list to more than 100% and left margin to the negative value. Though jQuery Masonry manages horizontal spacing automatically, the workaround gracefully degrades when JavaScript is disabled in the browser.

Finally some JavaScript. Only shameless initialization of the plugin for now.

$(window).load(function() {
  $('#list').masonry({ itemSelector: '.item' });
});

Pouring In Responsiveness

Now that we have a working formation, let's teach it to adapt to savage environments: small and constantly changing screen sizes as well as zooming without remorse. However, the zoom is not handled well enough due to the absence of bulletproof active zooming detection.

HTML stays the same, but CSS code gets a makeup – media queries. The first of them transforms the grid to two-column one, whilst the second to the simple one-column layout.

#wrapper {
  max-width: 60em; /* 960 px */
  margin: 0 auto;
}

#list {
  width: 103.125%; /* 990px */
  overflow: hidden;
  margin-left: -1.562%; /* 15px */
  margin-bottom: -1.875em; /* 30px */
}

.item {
  width: 30.303%; /* 300px */
  float: left;
  margin: 0 1.515% 1.875em; /* 15px 30px */
}
 
@media only screen and (max-width: 40em) /* 640px */ {
  .item {
    width: 46.876%; /* 305px */
    margin-bottom: 0.938em; /* 15px */
  }
}

@media only screen and (max-width: 20em) /* 640px */ {
  #list {
    width: 100%;
    margin-left: 0;
  }

  .item {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

What's for JavaScript, function setColumns(); initially counts the number of columns accordingly to the screen width. $(window).resize(setColumns); does the same, but when window is resized. jQuery Masonry, luckily, has an option named columnWidth. Putting under (for value) a function actually solves the problem.

$(window).load(function() {
  var columns    = 3,
      setColumns = function() { columns = $(window).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };

  setColumns();
  $(window).resize(setColumns);

  $('#list').masonry({
    itemSelector: '.item',
    columnWidth:  function(containerWidth) { return containerWidth / columns; }
  });
});

That's it! ~~Sheepy Me~~ is a real life example of the whole experience. Besides that, I made a separate demo which consists only of the relevant code and helps to focus on the technique itself.

Demo

See the demo.

CSS-only solution?

Kushagra Agarwal suggests to do without JavaScript and use CSS's column-* properties instead. So how CSS code would change? #wrapper remains the same, but the rest:

#list {
  width: 100%;
  overflow: hidden;
  margin-bottom: -1.875em; /* 30px */
  -webkit-column-count: 3;
  -webkit-column-gap: 1.875em; /* 30px */
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 1.875em; /* 30px */
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 1.875em; /* 30px */
  column-fill: auto;
}

.item {
  margin-bottom: 1.875em; /* 15px 30px */
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}
 
@media only screen and (max-width: 40em) /* 640px */ {
  #list {
    -webkit-column-count: 2;
    -webkit-column-gap: 0.938em; /* 15px */
    -moz-column-count: 2;
    -moz-column-gap: 0.938em; /* 15px */
    column-count: 2;
    column-gap: 0.938em; /* 15px */
  }

  .item {
    margin-bottom: 0.938em; /* 15px */
  }
}

@media only screen and (max-width: 20em) /* 320px */ {
  #list {
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
  }
}

Demo

See the demo.

How lovely is that, even with those vendor prefixes. It would absolutely be the best technique, if it hadn't the following limitations:

Not supported by IE9 and below;
Different rendering among supported browsers. Safari and Chrome does in one way, whilst Firefox and Opera in another. And both manners doesn't seem to be logical enough.

Conclusion

column-* isn't fully standardized yet across web browsers. jQuery Masonry is a JavaScript thing. Two evils. You can stay with just one of them. You can combine them, by attaching jQuery Masonry only to IE9-and-below or JavaScript-less users and applying CSS columns for the rest. Whichever your decision is, just make sure it's best for your users.

A Book Apart: Design Is A Job

Mon, 03 Sep 2012 00:00:00 GMT

The book Design Is A Job is not the first book from that wonderful A Book Apart collection I have read. But it's the book from the whole series that I want to talk about first, because it analyzes a different aspect of design as a profession, as a daily bread. Your design is useless if you are unable to sell it, if you can't convince people that your solutions are in the right place and at the right time. So finally there comes Mike Monteiro from Mule Design to tell you how to do that and shares his best from 11 years experience.

First of, this book was not written for people who expected 137 pages of wish-wash how clients are bad and how they want to suck you till the last drop of blood. Vice versa, the author would repeat himself a few times that "there are no bad clients" and you, you are the one and only blacksmith of your own fortune. I was lucky enough to notice one of 400 million made-per-day-tweets (2012 statistics ) with this perfect statement which perfectly closes this completely vacuous topic: "a lot of 'clients from hell' are 'designers who fail to communicate'".

Reading the very first paragraphs may make a false impression. Personally, I found the 1st chapter a little bit prosaic. Luckily, it was just the first one and then things got far more entertaining. I think the author would agree that it wasn't very exciting, but it was necessary and a correct way to start this victorious bénéfice. While the foreword writer Erik Spiekermann describes the author as "a living bullshit detector", I'd add that Mike should turn his studio into a mediation-of-designer-to-client agency which, I have no doubt, would be leading agency in the field. Probably because Mike did not completely move away from making things and did not dedicate himself to clients. He stayed somewhere in the middle, successfully balancing between two sides.

Analyzing clients takes the lion's share of the book. From the very first handshake or phone call, to finally paying for work. Mike does not wrap the words in wool. He writes in style. Here's a classic situation how to smell the ruse:

You know that douchebag at the bar who walks up to your friends and says "You know, I usually date models...". Yeah, that guy. The client services version of that is "You know, we've got some really big name agencies who'd love to get this job". Great, go call them. Don't work for someone who tries to make you feel they're lowering themselves to work with you, even as negotiation tactic. Good work comes from mutual respect.

Having said that, Mike also perceives how important self-treatment is. If you do not respect yourself, no one else will. Designers, first of all, are thinkers, innovators and so problem solvers. Technical work is the last thing you need to do.

Beware of clients who have waited to call you until they have a perfect diagram of what they need and want you to color it in. If they're not coming to you for strategy and problem-solving, they're not coming to you for design, they're coming to you for production. And if you take on production work, you don't get to call yourself a designer.

I would exclude the 7^th chapter as the most important for me personally. I will read it every time (until I finally memorize it word by word) before presenting my work to clients. Presenting your work in a room could be a crucial moment. Coincidence or not, but I had been watching Mad Men series and reading this book at the same time. At some point, it was like watching this book based movie. Double effect.

Stop trying to get your clients to "understand design" and instead show them that you understand what they hired you to do. Explain how choices you've made lead to a successful project.

Something that is obvious but not always visible – I remember myself being this immature:

Don't waste client's time walking them through what they can already see. Your job is to explain how what they're looking at is the best way to achieve their goals.

Design Is A Job could be useful at every aspect of your professional life. Well, obviously, except pushing pixels and writing a markup. It's perfect if you are a freelancer or own an agency. It's still great if you work at agency. It's indispensable if you build websites. It's still relevant if you make logos or do other graphic work. Recommended.

Gestures-Sensitive Slideshow: Responsive and Touch-Friendly

Tue, 22 May 2012 00:00:00 GMT

I'm not quite sure, but it was probably 2006 (correct me if I'm wrong) when with the birth of jQuery the very first non-Flash slideshows/sliders appeared on Web. Before that time, writing JavaScript was a horrible pain and therefore websites were boring, Internet wasn't that attractive as it is nowadays. Because nobody wanted to spend a week writing a thousand-lines code just to have something that does not work properly on any browser! Luckily, things have changed: JavaScript had become practical and that had heavily influenced the whole craft. Now things have changed even more: you can't ignore mobile & tablet devices, you must have your content accessible on any modern device.

The Problem

While working on a client project, I wanted to present interior portfolio in appealing and more appropriate way than what usually resides under the slideshow term. Not to mention accessibility on touch devices. So I thought: after all, moving mouse or sliding finger on screen is much easier than clicking or tapping arrows for dozens of times, right? Voila!

The Solution

The technique is based on some lines of HTML, CSS, JavaScript and (whole) jQuery framework. Unlike responsive and touch-friendly tooltip, I made it plugin-like so that you can call plenty of the slideshow instances from wherever you want.

Notice that the slideshow is returning what means anchors do not perform their primary function on touch devices. Consequently, this type of slideshow may not fit in every situation. Anyway, if you have a specific purpose, as it is in my case, the technique should serve well.

HTML

The structure couldn't be simpler: container and unordered list. What about content? It's totally up to your imagination: it could be anything from pure images to tables. An example with images:

<div id="slideshow">
  <ul>
    <li><img src="1.jpg" alt="" /></li>
    <li><img src="2.jpg" alt="" /></li>
    <li><img src="3.jpg" alt="" /></li>
    <li><img src="4.jpg" alt="" /></li>
    <li><img src="5.jpg" alt="" /></li>
  </ul>
</div>

CSS

I think you have just felt what the CSS code is like only by looking at the HTML above, but just in case, here's what to start with:

#slideshow {
  width: 100%;
  height: 500px; /* slideshow height */
  overflow: hidden;
  position: relative; /* or absolute, but not static */
}

#slideshow ul {
  width: 9999%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#slideshow li {
  height: 100%;
  float: left;
  margin: 0 20px; /* spacing between items */
}

JavaScript

The plugin, actually, is very tiny, however, it has too many lines to paste them here. Paradox. So I made gestured-slideshow.js available in the next tab of your browser.

There's no surprise you can call slideshow instance(s) in this way:

$( '#slideshow' ).gesturedSlideshow();

Captions, shadows, rounded borders, gradients, textures, animations and other loud phrases, for sure, are the way to style your next slideshow, but I decided to keep my demo calm and technique-focused.

Demo

See the demo.

Offscreen. The people behind bits and pixels

Wed, 18 Apr 2012 00:00:00 GMT

As our industry grows up, many of us seem to forget the human side of digital. There still hides a story of real people behind every interface.

With this really nice idea and a real sentence, Kai Brach starts the first issue of his magazine named Offscreen. The quote also explains what it is all about. It's about people behind bits and pixels. And by word people I mean not just people who design websites and other related digital products, but also designers who live in this and are deeply passionate about web & design. Therefore, it is even more interesting!

The first thing which falls into eyes is that the magazine wasn't printed on that cheap flashy thin paper. I did not expect this, because all of at least the web-related magazines that I bought before – were. So the feel of naturalness is probably the first thing which helps Offscreen to stand out from the rest. But this would be nothing without a good, really good content…

From the very first pages it becomes apparent how many people were included in writing, designing and making of this magazine: contributors, sponsors, interviewers. Therefore it isn't a magazine of one person, but it's more like a voice of community. May it be a paradox, but you won't find no stupid advertisement or banner carelessly dropped on article to make it harder to read for you. Advertise in style – that's how external things are presented there.

The magazine itself is also an example of perfect typography, artistic graphic elements. A special attention is paid to small details.

Unique stories-interviews of individuals play the biggest role in the magazine. I did like that there were only a few people mentioned, who I knew and heard about their works before. Actually, first when I saw Dan Cederholm's name on the front page, I thought this was going to be just another read about people I have already heard of. Nothing like that. From roughly 50 contributors I knew only 7 of them before. Now I know all fifty! Apart from interesting Dan's shares about Dribbble, you will read not less interesting as well as funny stories about creator of Pictos Drew Wilson, former interactive designer of Last.fm Hannah Donovan and so on, and so on.

The magazine also presents some sections, such as A Day In The Life Of where few designers reveal their schedule of a usual workday; On The Desk Of where selected designer shows his/her most important stuff; etc. Looks like Offscreen has everything to be an exclusive journal in the field. It really has that cozy mood.

Lots of photos in the magazine makes it fresh and playful!

Offscreen is the latest read on paper I have recently read. I found it very interesting and looking forward to receiving the second issue when it comes out or, as said, in the middle of 2012. Because I enjoyed it so much, I decided to write this blog post and support this nice initiative of Kai in this way.

I would like to end up this humble review by quoting a thought I found in the page number nine:

Every time dad tells me his idea, it's a reminder to step away from the machine and pay attention to the world.

Jack Cheng

Letterpress Business Cards

Sun, 25 Mar 2012 00:00:00 GMT

Business cards, for me personally, for a long time were like a phenomenon from prehistoric times. Just like wired phones or cassette players. And there's no need to look deeper why so, because bad design is always obvious. It just happened that all of the business cards I saw in my life were so crappy, that I have been always questioning myself why people share these ugly sheets of paper with one another.

Before

In the last few years as the Internet has reached its new heights in terms of information sharing, it also became very popular among graphic designers to share and sell their business card designs online. I believe that this direct competition has helped to improve the look of business cards all over the world, because if you want to be noticed, you must produce a good design. I would lie if I'd say I was blind and did not see what was happening. These gorgeous, funny and typographic cards have been spreading like a virus. As the matter of fact, I finally designed my very first business card. It was mine and had a feel of my personal website at that time.

Now

Along with the redesign, I also redesigned my personal business card for an obvious reason. After dealing with big printing houses, their poor customer service, thin paper and cheap paint, I simply decided to search for quality services. Actually, I did not need to search, because I had met Saulius Dumbliauskas via Twitter a couple of years ago and knew he has been running a small letterpress studio called Elegante Press in Kaunas, Lithuania.

Being charmed by their works, I designed my wish in Photoshop and sent them the image asking if they were able to bring this on my table. From the vary of options (sizes, types of paper, colors, edge painting, etc.) offered, I picked probably the most simple approach as this was my primary idea of simplicity and sent off the final PDF. I did choose one color, radiant white 430gsm paper.

After two weeks I received the package. The first impression was very promising, really lovely and careful presented. I liked how one of the cards was put out of the inner package in the front, so that when you open the parcel with shaking hands of curiosity, you can finally calm down and start enjoying the result immediately.

But most importantly, what about the cards? Clear letterpress effect. Precisely reproduced model from PDF that I sent. Thick paper, which you can touch and feel its surface. The cards are just fantastic. The people that I shared the cards with, were extremely delighted. They obviously felt special, therefore they won't throw it away to the first trash bin available. It's all about the small details.

If you are designing your personal business cards, invitations, stationery – make it special, leave an impression. And again, huge thanks to Elegante Press for the remarkable result!

More Noticeable HTML Bookmarks

Fri, 23 Mar 2012 00:00:00 GMT

I have always been interested in elegant yet helpful techniques that in some way extend or rewrite native browser functionality and therefore help making websites a bit more better than they could be. The last time I shared a technique for mobile-friendly and responsive tooltip, which indirectly extends functionality of title attribute in HTML. This time: thoughts and a piece of code for, as titled, more noticeable HTML bookmarks with jQuery.

Actually, it's nothing new, nothing that you could not do or think of on your own. Just sharing thoughts and code of what I have come up with while working on UX purposes.

The Problem

Let's say you have an anchor that links to a particular location (which is actually location of the respective HTML element) on the same or other page of your website. Fine if the element is surrounded with a huge amount of the famous white space, fine if it is in the user-focus area and therefore easily noticeable. But, what if, in the worst case, it is a tiny little object squeezed among larger ones? Actually, I have a pure example here...

There is a small newsletter form in the footer of this website and I would like to encourage you subscribing to my newsletter if you haven't yet. If I bookmarked it in the old way I am pretty sure you would hardly notice the form in a second or two. In web design this is a huge amount of time which means a lot when it comes to engaging users to your product.

How It Works

When a page is loaded or an anchor is clicked, the script looks up for an element in HTML by id whose name has been provided via fragment identifier on page-load or href attribute value of an anchor when clicked. If the element exists, the browser then just smoothly scrolls to the location of the element and shakes it horizontally if it has an attribute/value data-bookmark="nudge" defined.

So, it's not only the shake that helps to notice the target, but also, the animated scroll itself makes easier to understand where you are on the page, whether you are being thrown to the top or bottom. I think your users would thank you for that.

Code

Here's a piece of JavaScript code, which is responsible for doing what mentioned above except the nudging.

$( document ).ready( function()
{
    function notice( selector )
    {
        var el = $( selector );
 
        if( el.length < 1 )
            return false;
 
        $( 'html, body' ).animate( { scrollTop: el.offset().top }, 500, function()
        {
            if( el.attr( 'data-bookmark' ) == 'nudge' )
                el.nudge();
 
            if( window.location.hash != selector )
                window.location.hash = selector;
        });
    }
 
    $( 'a[href*="#"]' ).click( function( e )
    {
        var current_url = window.location.toString().replace( /#(.+)/i, '' ).replace(/\/+$/, '' ),
            new_url     = $( this ).attr( 'href' ).replace( /#(.+)/i, '' ).replace(/\/+$/, '' );
 
        if( new_url == '' || new_url == current_url )
            e.preventDefault();
 
        notice( $( this ).attr( 'href' ).replace( /(.+)#/i, '#' ) );
    });
 
    if( window.location.hash != '' )
        notice( window.location.hash );
});

Now that we have the the first part done, still there is one unknown – a function called nudge. The way I applied it may automatically mean it is a native method of jQuery. Unfortunately not, but why not to extend the library so that we can use this function in a vary of situations later?

No matter how your element is positioned, the function adapts and keeps it in a default state when shake is complete.

jQuery.fn.extend(
{
    nudge: function()
    {
        this.each( function()
        {
            if( $( this ).is( ':animated' ) )
                return false;
 
            var obj      = $( this ),
                pos      = obj.css( 'position' ),
                left     = obj.css( 'left' ),
                left_int = parseInt( left ) || 0;
 
            if( left_int != 0 && left.search( '%' ) > -1 )
                left_int = obj.parent().width() * left_int / 100;
 
            if( pos == 'static' )
                obj.css( 'position', 'relative' );
 
            setTimeout( function()
            {
                obj.stop( true, true )
                   .css( 'left', left_int + 'px' )
                   .animate( { 'left': left_int - 5  + 'px' }, 50 )
                   .animate( { 'left': left_int + 10 + 'px' }, 100 )
                   .animate( { 'left': left_int - 10 + 'px' }, 100 )
                   .animate( { 'left': left_int + 10 + 'px' }, 100 )
                   .animate( { 'left': left_int - 10 + 'px' }, 100 )
                   .animate( { 'left': left_int + 5  + 'px' }, 50, function()
                   {
                       obj.css( { 'position': pos, 'left': left } );
                   });
            }, 500 );
        });
    }
});

Finally, let's just write some typical HTML code, for example:

<a href="#newsletter">Subscribe to newsletter!</a>
 
<!-- here goes some "stranger" code -->
 
<form id="newsletter" data-bookmark="nudge">
  <!-- ... -->
</form>

I recommend using data-bookmark="nudge" wisely and nudge only what is really necessary. Do not shake huge elements. This may look and feel inadequate and lame.

Demo

See the demo.

How To Implement it

Just put both JavaScript's in existing JS file or create a new one and include in HTML. See the example above and modify your HTML if necessary. That's it, couldn't be more simple.

Post Scriptum

Because I defined nudging function as an extension/method of jQuery, next time I am going to fully justify my behavior by putting it in more use. What about shaking user login form when wrong username/password entered? Yes, that's Apple-inspired.

Database-driven Routing in CodeIgniter

Sat, 18 Feb 2012 00:00:00 GMT

CodeIgniter is simple yet elegant, open source PHP framework developed by EllisLab. They also built the well-known ExpressionEngine by using CodeIgniter as a base. So that probably just proves, how powerful the framework is as well. Nevertheless, it is extremely easy learnable. Basically, their User Guide is all you need to craft easy websites.

I chose CodeIgniter over Wordpress because wanted to have my website customized as much as possible and be able to control it all over. This post is probably an exception as I won't be blogging much about server-side things. But this time I just wanted to share a small, but very useful technique that I came up with (a year ago) after long hours of unsuccessful googling.

The Problem

Actually, it's not a problem, not a bug of the framework. It just have this annoying 'feature' that each time you want to add a page/controller, you must define it in application/config/routes.php file by adding a line like this:

$route[ 'journal' ] = 'blog';

It means that Blog controller is executed when someone visits /journal URL. Although array key accepts Regular Expressions, that does not rescue the situation: you still have to edit the file to enable your controllers. Awfully uncomfortable. It limits your abilities to make website dynamic and control pages somewhere in your super-duper backend. But what is the smart way enable the database-driven routing in CodeIgniter?

The Solution

The whole technique consists just of a small MySQL table and a few lines of PHP code. How it works? The table holds our URL → Controller records whereas the code fetches them and lists array entries (like mentioned above) dynamically. It also makes sure that further URL levels are directed to the base controller (or folder).

Database Table

Add the table app_routes to your MySQL database:

CREATE TABLE IF NOT EXISTS `app_routes` (
  `id` bigint(20) NOT NULL auto_increment,
  `slug` varchar(192) collate utf8_unicode_ci NOT NULL,
  `controller` varchar(64) collate utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `slug` (`slug`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

PHP Code

Replace the code in application/config/routes.php with the one below:

$route[ 'default_controller' ]  = 'main';
$route[ '404_override' ]        = 'error404';
 
require_once( BASEPATH .'database/DB'. EXT );
$db =& DB();
$query = $db->get( 'app_routes' );
$result = $query->result();
foreach( $result as $row )
{
    $route[ $row->slug ]                 = $row->controller;
    $route[ $row->slug.'/:any' ]         = $row->controller;
    $route[ $row->controller ]           = 'error404';
    $route[ $row->controller.'/:any' ]   = 'error404';
}

Feel free to change the values of default_controller and 404_override to what you need or already have. That's it! Now you have a database-driven routing in CodeIgniter enabled!

Example

Let's say you have a controller (class) named Portfolio, but prefer to make it reachable not by very long /portfolio URL, but by shorter /work. Simply add a database entry and you're done:

INSERT INTO `app_routes` (`slug`, `controller`) VALUES ('work', 'portfolio');

Managing routes via MySQL queries is pretty the same as editing the routes.php file. To make this type of routing meaningful, you should develop a tool for your backend that allows to manage app_routes table. Have a look at mine for an idea:

Responsive and Mobile-Friendly Tooltip

Thu, 16 Feb 2012 00:00:00 GMT

Tooltip is a splendid invention. Small detail in web design that plays a big role when it comes to user experience. Usually, tooltips are used to present a tiny amount of hidden content (mainly explanatory, so-called tips), that pops up when user moves a cursor over or clicks (less common) on a special target.

When working on my personal website, I was in need of a tooltip. I decided not to limit it just on a typical definition of a tooltip, but also make it a better occurrence using CSS and jQuery technologies.

Key Features

It’s responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target (top, bottom; left, center, right);
It’s mobile-friendly. It pops up when a call-to-action button is tapped and disappears when tapped on the tooltip itself;
It’s HTML formatting capable. Need to write some words in italic or so? No problem, this will work out.

CSS

To begin with, let's build the look of our tooltip. No fancy styling, just major properties so you can clearly see how it works (all of the sexy things will take part in the demo below).

#tooltip {
  text-align: center;
  color: #fff;
  background: #111;
  position: absolute;
  z-index: 100;
  padding: 15px;
}

#tooltip::after {  /* triangle decoration */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top::after {
  border-top-color: transparent;
  border-bottom: 10px solid #111;
  top: -20px;
  bottom: auto;
}

#tooltip.left::after {
  left: 10px;
  margin: 0;
}

#tooltip.right::after {
  right: 10px;
  left: auto;
  margin: 0;
}

JavaScript

$( function()
{
    var targets = $( '[rel~=tooltip]' ),
        target  = false,
        tooltip = false,
        title   = false;
 
    targets.bind( 'mouseenter', function()
    {
        target  = $( this );
        tip     = target.attr( 'title' );
        tooltip = $( '<div id="tooltip"></div>' );
 
        if( !tip || tip == '' )
            return false;
 
        target.removeAttr( 'title' );
        tooltip.css( 'opacity', 0 )
               .html( tip )
               .appendTo( 'body' );
 
        var init_tooltip = function()
        {
            if( $( window ).width() < tooltip.outerWidth() * 1.5 )
                tooltip.css( 'max-width', $( window ).width() / 2 );
            else
                tooltip.css( 'max-width', 340 );
 
            var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                pos_top  = target.offset().top - tooltip.outerHeight() - 20;
 
            if( pos_left < 0 )
            {
                pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                tooltip.addClass( 'left' );
            }
            else
                tooltip.removeClass( 'left' );
 
            if( pos_left + tooltip.outerWidth() > $( window ).width() )
            {
                pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                tooltip.addClass( 'right' );
            }
            else
                tooltip.removeClass( 'right' );
 
            if( pos_top < 0 )
            {
                var pos_top  = target.offset().top + target.outerHeight();
                tooltip.addClass( 'top' );
            }
            else
                tooltip.removeClass( 'top' );
 
            tooltip.css( { left: pos_left, top: pos_top } )
                   .animate( { top: '+=10', opacity: 1 }, 50 );
        };
 
        init_tooltip();
        $( window ).resize( init_tooltip );
 
        var remove_tooltip = function()
        {
            tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
            {
                $( this ).remove();
            });
 
            target.attr( 'title', tip );
        };
 
        target.bind( 'mouseleave', remove_tooltip );
        tooltip.bind( 'click', remove_tooltip );
    });
});

HTML Example

<abbr title="User Experience" rel="tooltip">UX</abbr>

Demo

See the demo.

How To Implement

Put the CSS code anywhere in existing CSS file or create a new one. You can also insert it in HTML file in head by wrapping the code with <style> tag.
Put the JavaScript code in existing JS file or create a new one. You can also insert it in HTML file in head or, better, body by wrapping the code with <script> tag.
Assign the attribute rel="tooltip" and title="Enter your tip here" to any of body tags in HTML file where you want the tooltip to pop up when called. Set title value with your tip (use <strong>, <em> etc. to distinguish text fragments, but avoid block elements).

Also, be sure that you already have jQuery library included.

That's it! Simple enough. If you've got any suggestions or insights, feel free to share them: leave a comment or send me a tweet.

Background-Independent CSS Bars

Tue, 07 Feb 2012 00:00:00 GMT

Have you ever wanted or needed to do something like this?

Typical Background-Dependent Solution

This is probably the most common heading (or other text block) bars solution which I believe you have used at least a couple of times in your projects. Here's how this typical situation usually goes in code:

HTML

<div>
  <h1>
    <span>
      Heading Bars
    </span>
  </h1>
</div>

CSS

div {
  background-color: #fff;
}

h1 {
  background-color: #000;
}

span {
  background-color: #fff; /* the same as div's */
  padding: 0 10px;
}

Obviously, the code is only effective when you have a solid color in the background. Moreover, you are relatively limited on the appearance of a bar. And yes, extra inner HTML (<span>) is evil if you care about the semantics. But what if you want to push an image or a gradient in the background?

Background-Independent Model

Great, now let's transform the code above into this:

HTML

<div>
  <h1>
    Heading Bars
  </h1>
</div>

CSS

div {
  background-image: url('wallpaper.jpg');
}
 
h1 {
  position: relative;
  padding: 0 26%;
}
 
h1::before,
h1::after {
  width: 25%;
  background-color: rgba(0, 0, 0, .5);
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
}

CSS pseudo-element ::before stands for the left and ::after for the right bar. To better understand the model, have a look at the scheme below:

As you see, subtraction of pseudo-element's width and element's horizontal padding (left or right) is a minimal gap between the bar and the content. Keep padding greater than width to make sure the gap does not overlap the content.

Demo

See the demo.

Summarize

Independence of the background;
Highly customizable appearance;
Perfectly works in responsive environments.

Because there's no smoke without fire, the model may have a disadvantage in some situations if compared to background-dependent solution. It's a non-persistent gap between content and bars. The wider heading, the wider gap.

Browser Support

How the model works in different browsers depends only on how they do support ::before and ::after pseudo-elements. Everything goes fine in recent modern browsers, however, it would collapse in IE7 and down. Luckily, there is a great JavaScript fallback (used in demo) written by a very good people – IE7.js.

The Last Bit

Before discovering this method, I found Chris Coyier's Full Browser Width Bars which may also appear to be useful for you.

Welcome!

Fri, 03 Feb 2012 00:00:00 GMT

Hey! My name is Osvaldas and I live in Klaipėda, Lithuania. Within a completely new version of my personal website I decided to start a blog. I feel indebted to our fantastic community and am here to influence it positively as much as possible. A humble introduction – below.

Short story

In 2003 I discovered Microsoft's famous, now legendary FrontPage. Back then I thought Paint was quite a good tool to draw designs and Comic Sans was definitely a king of fonts. Inspite of the fact that I will have this shame (as well as majority of you) for the rest of my life, I found web extremely interesting and never spending itself area. New phenomenon, always growing, expanding deeper and deeper into our daily routines, transforming into various forms of use. I decided to go with it. Since then I've been working more on freelance and less on personal projects.

After two interesting years of learning the craft, I was asked to create a website and got my very first paid deal. ~~Believe it or not, it is still live and as I left it.~~ Since then I call myself a shoemaker.

A shoemaker without shoes?

After realizing that web designer without a website is basically like a shoemaker without shoes, in 2009 I finally built my personal website. And it's still available to admire at v1.osvaldas.info. Uh, at least to drop an eye on.

Lately, as my professional horizons gone wider, one-page website began to seem too tight. So, to play games you need a sandbox: the larger the better.

New responsive sandbox

Today you won't suprise your collegue nor your friend with a term responsive web design. Of course, it does not mean you don't need a responsive website. By each iPhone sold the responsiveness becomes more and more important. HTML5 and CSS3 is what the world stands on now (not Hercules's pillars anymore!).

The whole site is built on Codeigniter framework (sorry, Wordpress), which I think God sent exactly for web designers. In term of frameworks, jQuery was my favourite right from the beginning, so I did not betray it this time as well. For sure, it would be much harder in JavaScript garden without the help of html5shiv, Selectivizr, css3-mediaqueries.js, IE9.js, SyntaxHighlighter, Placeholder Fallback, CKEditor, CKFinder.

Life before Apple was tough. Web before Cinema Display, Mac OS X, iOS looked ugly. Together with Dieter Rams and the promoters of Web Standards they influenced this place irreversibly.

Driven by design

Despite how young our craft is, there has been many great ideas spread out by people who made Web a better place on Earth. Personally, some of the ideas I see as a principal laws of web design instance. Being a typography enthusiast I have written these minds down, got them printed and hung on my wall. It's better to see once than hear ten times, you are very welcome to my check humble ~~shop~~.

Enough for the first time

They say you better leave earlier than face a fiasco later. I'm going to keep sharing thoughts, ideas and useful material on web, design, development subjects. Feel free to leave a comment or drop me a line on Twitter.

Osvaldas Valutis blog

Moving the first JavaScript array item to the end

The Great Gatsby Redesign

Container-Adapting Tabs With “More” Button

I Joined Odd Camp – Come Hire Us!

Service Worker for Middleman based websites

Versioning

Digested assets

Multiple languages

Debugging

Service Worker gotchas

Service Worker is a part of Progressive Web Apps

What Service Worker is for

Registering a Service Worker

HTTPS and localhost

Service Worker working scope

ES6: to be or not to be?

“Offline” page

Service Worker lifecycle and events hierarchy

Critical and non-critical resources

Service Worker strategies

Online-first everything

Offline-first everything

Offline-first assets and online-first HTML documents

Serving "offline" image

Inlined in worker's file

Standalone file

Garbage in cache is your problem

Versioning

Additional cache control

Omitting thrid-party resources

Forcing serviceworker.js file renewal

Apache way

Nginx way

Service Worker and DOM

Service Worker for multilingual website

Service Worker is backend-dependent

Debugging Service Worker

Lazy-Loading Disqus Comments

Enabling CodeIgniter's Garbage Collector

The Solution

Lazy Loading Responsive Adsense Ads

How to Display Publish Dates as Time Since Posted

Drag and Drop File Uploading

Customizing File Inputs the Smart Way

Real-Time Search in JavaScript

How it works

Taking it further

Toggling the answers

What if JavaScript is disabled

Improving UX

Hidden keywords

Detecting CSS Animation and Transition End with JavaScript

Problem

Solution

Placeholder Polyfill with Password Support

JavaScript polyfill

CSS fallback

CSS fallback as a complement to JavaScript polyfill

CSS fallback as the only solution

Demo

Forcing Description Text In a Newsletter

Solution

Examples in the wild

Caching SVG Sprite in localStorage

localStorage

File & Revision

No SVG support?

JavaScript disabled?

Demo

Auto-Hide Sticky Header

Making header sticky

Auto-hiding header

Reactive

Lazy

An extra state for header

Examples

Lazy-loading Google Maps

jQuery plugin

How the plugin works?