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”
iOS 7 Photo App Cover

The new redesigned Camera App for iOS 7

Taking photos is more about passion than technology, more about art than technique. Photo composition is really important aspect for every photographer and is vital for getting the best results.

Still when technology stays in your way, it’s sad. because all of this could have been easily overcome.

Continue reading “The new redesigned Camera App for iOS 7”
mustache

In Search for Template Reuse Between Angular.js and PHP

PHP itself is a great templating engine. No doubts. Why to add another overhead? From my perspective is the reuse between back-end and front-end. Why is there need to produce same code on server? Few of my concerns: SEO, usability (fallback for no-javascript on old devices)

Language diferences for building any web apps:

  • on client: HTML + CSS + Javascript
  • on server: HTML + CSS + PHP (or any language of your choice like Ruby, Pyton, Java, ASP,…)

If you are lucky, your host supports Node.js and reuse of templates is very doable. But most of the time you can consider yourself lucky when your host is running latest PHP codebase.

Continue reading “In Search for Template Reuse Between Angular.js and PHP”

Responsive Design Without Using @Media Queries

Why? Answer is simple: You cannot turn off media queries, but you can disable script from processing and thus control the User Experience.

I came across the GSS in March this year. From the GSS website:

Grid Style SheetsGSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.

Take a look for yourself at the constrains and Visual Format Examples.

Guess I am not about to use it any soon, but wait a sec…

Continue reading “Responsive Design Without Using @Media Queries”

The Content and Managing it (on the web)

My thoughts around creating websites, content, CMS-es (not particulary an article with a conclusion).

There are few areas I wish were more in-line with current development of HTML5, apps, websites, forms, APIs, content management if you put it in the context of Angular.JS, Ionic Framework, Macaw and AppPresser taking spotlight.

Continue reading “The Content and Managing it (on the web)”

Mobile Emulation using Chrome Developer Tools

Interesting reading about:

  • Enabling the Emulation Panel
  • Emulating Touch Events
  • Emulating Devices
  • Useragent Spoofing
  • Network Bandwidth Throttling
  • Geolocation Overrides
  • Device Orientation Overrides
  • CSS Media Type Emulation

Displaying the emulation tab is fairly hard for the first time, as it is hidden under Console drawer (that thing that slides up whenever you hit Esc button. The emulation has to be enabled in the settings first.

Notes:

  • Android artificially increases the font metrics (important when using EM based layouts)
  • It is possible to see @media print { ... }
  • On Mac, there is the Network Link Conditioner (part of Xcode) to test network speed

Link: Mobile Emulation

Building web sites from pieces

Modularity might be the answer to addressing the DRY principle in web development. I write maybe, because this is just my initial research into these prototypes. None of them might be the answer.

BEM – Block, Element, Modifier

Your markup might look like this:

<!DOCTYPE html>
<html class="i-ua_js_yes i-ua_css_standard">
    <head>...</head>
    <body class="b-page b-page__body">
        <div class="head"></div>
    </body>
</html>

Atomic Design

Again, nice philosophy. Not so much of science around. See the presentation, it speaks for itself.

First thoughts

As much as I like the philosophy and all the russian science glow around the BEM project, well… I’m not a big fan of using underscores in CSS classes. Not because I just don’t like it, it’t because it’s hard to jump from word to word using keyboard shortcuts. And eventually, you will need to fire up some favourite editor of yours to edit that .css file.

I am more inclining to the Atomic way, but my feelings are irrelevant right now.

Let’s see where it goes.