Running Android Simulator (AVD) on Desktop [Mac]

Testing and debugging app or website on a real device is always a win. Most of the times, we are lucky to test on some of the friends devices. That’s when running an AVD — Android Virtual Device is much help and is better than nothing. Hence process is not so straightforward this post was born.

Continue reading “Running Android Simulator (AVD) on Desktop [Mac]”

Hacking CSS position:fixed with position:absolute

Objective: Create a fixed position header and footer while maintain the scrolling functionality cross-browser.

Looking at tables for position:fixed support you can notice, the support is fairly good these days. Still I meet people with Android running version Android < v3 and (maybe fewer) iPhones running version of iOS <5.

Point of having a website, not an app is to be accessible as much as possible. But what if you still want to have cutting edge design, even just to wow your customers.

Continue reading “Hacking CSS position:fixed with position:absolute”

Replacing submodules for subtrees in SourceTree [quicknote]

When adding a subtree in SourceTree for the first time, make sure to:

  1. checkout master (master must exists issue)
  2. use relative path to the git root
  3. not really create the path you wish to pull into, let SourceTree handle directory creation

When fixing/relinking a subtree always use a relative path. Whenever the browse button in SourceTree pulls absolute path, rewrite it to relative.

Summary:

  • If the path is already filled with files, SourceTree assumes you want to relink. Linking is not a native git feature and you will need to link to subtree origin on each repository clone.
  • Adding can be triggered only on empty subdirs. Make sure you removed all files when replacing submodules with subtrees
Debugging Minified javaScript Cover

Debug compilation/parse errors of minified javaScript

It happens from time to time. You run into an issue that is hidden in the minified javaScript. The Console says not much as line 4, which has more than 1000 characters. Not so useful info to hunt the bug down. The pretty print button Pretty Print Button does not help much either.

Continue reading “Debug compilation/parse errors of minified javaScript”
Data driven websites using Macaw + Publisher Demo

Tutorial: Turning Macaw into a data-driven multi-language Publisher website

I’ve decided to show you how to change Macaw example website into Publisher powered website with data comming from a data source rather being hard-coded in the Macaw HTML export. Together we’ll create a website in two languages with one design/code base:

I’ll setup a fresh new project for you to follow, but you can already download the end result including the MCW file from it’s repository and study the example file as you read the tutorial.

Publisher is a small flat PHP engine I wrote and I open-sourced it under MIT licence.

Enjoy :)

Continue reading “Tutorial: Turning Macaw into a data-driven multi-language Publisher website”
From Macaw to a real website using Publisher

Building dynamic website using Macaw and Publisher [quicknote]

NEW TUTORIAL: Turning Macaw into a data-drive multi-language website →

Few days ago I’ve released Publisher – a website generator inspired by Squarespace, but using simple flat file database in a YAML file. It in early stage of development, but it has many to offer:

Continue reading “Building dynamic website using Macaw and Publisher [quicknote]”
Atomic Design with Mustache.PHP Cover

Atomic Design with Mustache.PHP

There’s PatternLab, Russian BEM from Yandex and maybe few other projects defining what atomic design is. Just briefly: Atomic design is a process of building websites from reusable tiny pieces up to complex collections.

What I was missing was the link between production code and library [of the PatternLab]. From my dumb perspective, having a pattern library for every project is quite overwhelming. My daily projects are considered rather small.

Is it possible to use these techniques on daily basis? How? Build it of course.

Continue reading “Atomic Design with Mustache.PHP”

i18n and l10n for Mustache (PHP) and Angular (Javascript)

English in fact uses just two forms of plural:

  • 0 children
  • 1 child
  • 2 children
  • 3 children

In Angular terminology it means ONE or OTHER1:

/**
 * Plural select rules for en locale
 *
 * @param {number} n  The count of items.
 * @return {goog.i18n.pluralRules.Keyword} Locale-specific plural value.
 * @private
 */
goog.i18n.pluralRules.enSelect_ = function(n) {
  if (n == 1) {
   return goog.i18n.pluralRules.Keyword.ONE;
  }
  return goog.i18n.pluralRules.Keyword.OTHER;
};
Continue reading “i18n and l10n for Mustache (PHP) and Angular (Javascript)”