web development

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.

Composer require inline alias

Here’s a feature of composer that I didn’t know about until a few days ago – require inline alias. Here’s the example from the documentation:

{
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/you/monolog"
        }
    ],
    "require": {
        "symfony/monolog-bundle": "2.0",
        "monolog/monolog": "dev-bugfix as 1.0.x-dev"
    }
}

This is super useful when you have dependencies in your project that require a particular version of a third-party library or plugin, and you want to try a branch of that library or plugin. Switching to the branch alias doesn’t solve the problem, as everything that has version constraints on that requirement, will complain. With inline alias, you can alias a particular branch of the dependency as a particular version.

With inline alias, composer will fetch the branch that you want, but will assume that that branch works as a particular version that you specify, and thus satisfy all the other dependencies that require that particular version.

In my particular case, I was working on the CakePHP-based application, which was using a few CakePHP plugins (installed via composer). Those plugins require CakePHP v3+. I wanted to test a branch of CakePHP which had a particular fix I was interested in, but without disabling all the plugins. Switching my application’s composer to require a branch dissatisfied all the plugins, as now composer didn’t know if the branch that I am requiring is of the CakePHP v3 or not. Aliasing the branch to v3.4.1 (current stable version at the time) worked like a charm.

Programmer Interrupted

Slashdot runs a thread on “Are Remote Software Teams More Productive?“. The original post links to a few research references that, unsurprisingly, show how expensive interruptions are to programmers, and how unprepared we are, as an industry, to deal with this problem. I particularly liked a rather in-depth look at the issue in “Programmer Interrupted” article.

Like you, I am programmer, interrupted. Unfortunately, our understanding of interruption and remedies for them are not too far from homeopathic cures and bloodletting leeches.

Here are a few points, if the article is too long for you to handle:

Based on a analysis of 10,000 programming sessions recorded from 86 programmers using Eclipse and Visual Studio and a survey of 414 programmers (Parnin:10), we found:

A programmer takes between 10-15 minutes to start editing code after resuming work from an interruption.

When interrupted during an edit of a method, only 10% of times did a programmer resume work in less than a minute.

A programmer is likely to get just one uninterrupted 2-hour session in a day

And also this bit on the worst time to interrupt a programmer:

If an interrupted person is allowed to suspend their working state or reach a “good breakpoint”, then the impact of the interruption can be reduced (Trafton:03). However, programmers often need at least 7 minutes before they transition from a high memory state to low memory state (Iqbal:07). An experiment evaluating which state a programmer less desired an interruption found these states to be especially problematic (Fogarty:05):

During an edit, especially with concurrent edits in multiple locations.

Navigation and search activities.

Comprehending data flow and control flow in code.

IDE window is out of focus.

Overall, not surprising at all, but it’s nice to have some numbers and research papers to point to…

WordPress.vim – Vim Plugin for WordPress Development

If Vim is your editor of choice, and WordPress is something you work with on a regular basis, then check out WordPress.vim – a Vim plugin for WordPress development.

Some of the features are:

Auto-Completion for the WordPress API
WordPress Hooks Integration
WP-CLI Integration
Jump to Definition in WordPress Core
UltiSnips Snippets
Syntax Highlighting for WordPress PHP files.
Markdown Syntax Highlighting for readme.txt
PHPCS Syntax Checker integrated with WordPress Coding Standards
Search in Codex
Integration with WpSeek API.
Readme.txt Auto Validation.

Morphos – morphological solution in PHP for English and Russian

If you ever had to deal with morphology in English, you probably found one or two libraries to help you out. But if you had to do that for Russian, than I’m sure you are missing a few hairs, and the ones that you still have are grayer than they used to be. I’ve got some good news for you though, now there is Morphos (GitHub repository).

Morphos is a morphological solution written completely in the PHP language. Supports Russian and English. Provides classes to decline First/Middle/Last names/nouns and generate cardinal numerals.

Just look at this beauty!

var_dump($dec->getForms($user_name, $dec->detectGender($user_name)));
/* Will produce something like
  array(6) {
    ["nominativus"]=>
    string(8) "Иван"
    ["genetivus"]=>
    string(10) "Ивана"
    ["dativus"]=>
    string(10) "Ивану"
    ["accusative"]=>
    string(10) "Ивана"
    ["ablativus"]=>
    string(12) "Иваном"
    ["praepositionalis"]=>
    string(15) "об Иване"
  }
*/

Just this alone can make user interfaces and emails so much better. But there is more to it than that.