My lightbulb moment with modular design

Cameron Lock, of Yammer fame, describes the complexities involved that led her and the team to a simpler, more modular approach to the mobile application design.  The most important bit after grouping everything into modules, practically, I think, is this:

We stopped defining margins between modules. Instead, all the spacing in the app would come from padding within the modules — specifically, top padding. Bottom padding would have worked, too; just not both. The key is to choose one of the two and stick with it.

Modular CSS : Block, Element, Modifier

I don’t do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS.

Recently, I came across the Block-Element-Modifier approach, aka BEM, which I find interesting.

If you’re not familiar with BEM, it’s a naming methodology that provides a rather strict way to arrange CSS classes into independent components. It stands for Block Element Modifier and a common one looks like this:

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

The principles are simple — a Block represents an object (a person, a login form, a menu), an Element is a component within the block that performs a particular function (a hand, a login button, a menu item) and a Modifier is how we represent the variations of a block or an element (a female person, a condensed login form with hidden labels, a menu modified to look differently in the context of a footer).

This follow-up article provides more details and examples.

Web design : from zero experience to a high paying job

Richard Yang, a UX designer at Sony, shares his path from a guy with zero experience in design to a respected professional with a high paying job.  Much like with any professional, in the past, present or future, it wasn’t an overnight success, but an inhuman amount of work and dedication, with plenty of failure.

Continue reading “Web design : from zero experience to a high paying job”

Creative Commons beta tests new search

Creative Commons is beta testing a new search implementation.  It helps with finding creative work (mostly images for now) that one can use commercially, modify, adapt, and build upon.  For now, it brings the results from a few different sources that you’d have to search separately before – 500px, FlickrMetropolitan Museum of ArtNew York Public Library, and Rijksmuseum.

I’m sure once the functionality and performance are stabilized, more resources and types of creatives will be added.  After all, Creative Commons works with quite a few platforms.

Oh, and if you’ve spent the last few years in a cave and don’t know what Creative Commons is all about, here are a couple of links for you:

Via WordPress Tavern.

 

HTML Canvas Tutorial

Skilled.co put together this HTML Canvas Tutorial, which covers the HTML 5 <canvas> functionality, that allows web developers to draw all sorts of graphics on the fly, using JavaScript.  The tutorial is available for download in PNG and PDF formats, as well as on the webpage, and it covers the following:

  • Shapes
  • Styles and color
  • Text
  • Images
  • Transformations
  • Compositing and clipping
  • Animation
  • Pixel manipulation
  • Hit regions and accessibility

It also provides a few useful tips, inspiration, and links to other resources.

WordPress Theme Developer Handbook

WordPress Theme Developer Handbook:

The Theme Developer Handbook is a repository for all things WordPress themes. Whether you’re new to WordPress themes, or you’re an experienced theme developer, you should be able to find the answer to many of your theme-related questions right here.

Finally, there is a more organized resources that WordPress Codex!

CakePHP 3 and the need for breadcrumbs

I’ve been catching up with the CakePHP roadmap.  One of the tickets for the next release (CakePHP 3.3.10, scheduled for tomorrow), is this ticket, relating to the breadcrumbs navigation.

When building applications with CakePHP, you have a couple of easy ways to generate breadcrumbs for the easier user navigation.  One, is to use HTML Helper, which provides a quick and simple way.  The other, is to use a feature rich Breadcrumbs Helper, available since CakePHP version 3.3.6 (but not mentioned in the release notes).

Digging further down into templates, and best practices for user navigation, and different ways of styling breadcrumbs (Smashing Magazine, Hongkiat, UI Patterns), I thought – wouldn’t it be nice to have breadcrumbs navigation built into a human brain?

I mean, how many times did you catch yourself in some dark corner of the Internet, trying to figure out how did you get there?  If only humans had breadcrumbs navigation built into our brains, that would be so easy to trace back the steps.  Browser history can, of course, help, but with so many open tabs and several things happening in parallel, a flat list of tabs is not much help.

Top 29 books on Amazon from Hacker News comments

hacker-news-books

I came across this nice visualization of “Top 29 books ranked by unique users linking to Amazon in Hacker News comments“.

Amazon product links were extracted and counted from 8.3M comments posted on Hacker News from Oct 2006 to Oct 2015.

Most of these are, not surprisingly, on programming and design.  A few are on startups and business.  Some are on how to have a good life.  Which is a bit weird.