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.

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.

Social Media Research Toolkit

Social Media Research Toolkita list of 50+ social media research tools curated by researchers at the Social Media Lab at Ted Rogers School of Management, Ryerson University. The kit features tools that have been used in peer-reviewed academic studies. Many tools are free to use and require little or no programming. Some are simple data collectors such as tweepy, a Python library for collecting Tweets, and others are a bit more robust, such as Netlytic, a multi-platform (Twitter, Facebook, and Instagram) data collector and analyzer, developed by our lab. All of the tools are confirmed available and operational.

Via Four short links: 14 Feb 2017.

GitHub starts the Open Source Guides

GitHub blog is “Announcing Open Source Guides“:

we’re launching the Open Source Guides, a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to open source.

[…]

Open Source Guides are a series of short, approachable guides to help you participate more effectively in open source, whether it’s:

  • Finding users for your project
  • Making your first contribution
  • Managing large open source communities
  • Improving the workflow of your project

These guides aim to reflect the voice of the community and their years of wisdom and practice. We’ve focused on the topics we’ve heard about most, and curated stories from open source contributors across the web.

I think it’s a great idea and I really like the execution too.  Most of what I know about Open Source comes from years of participation, and from reading old books, manuals and licenses – not something that is easy to share with people who are just getting their feet wet.

GitHub’s Open Source Guides are very simple, concise and specific.  And they cover a variety of subjects, not just the legal or technical side of things, but also communications, support, marketing, etc.

Fixing outdated Let’s Encrypt (zope.interface error)

I’ve started using Let’s Encrypt for the SSL certificates a while back.  I installed it on all the web servers, irrelevant of the need for SSL, just to have it there, when I need it (thanks to this Ansible role).  One of those old web servers needed an SSL certificate recently, so I thought it’d be no problem to generate one.

But I was wrong. The letsencrypt-auto tool got outdated and was failing to execute, throwing some Python exception about missing zope.interface module.  A quick Google search brought this StackOverflow discussion, with the exact issue I was having.

Traceback (most recent call last):
  File "/root/.local/share/letsencrypt/bin/letsencrypt", line 7, in <module>
    from certbot.main import main
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/certbot/main.py", line 12, in <module>
    import zope.component
  File "/root/.local/share/letsencrypt/local/lib/python2.7/dist-packages/zope/component/__init__.py", line 16, in <module>
    from zope.interface import Interface
ImportError: No module named interface

However, the solution didn’t fix the problem for me:

unset PYTHON_INSTALL_LAYOUT
/opt/letsencrypt/letsencrypt-auto -v

Even pulling the updated version from the GitHub repository didn’t solve it.

After poking around for a while more, I found this bug report from the last year, which solved my problem.

I recommend:

  1. Running rm -rf /root/.local/share/letsencrypt. This removes your installation of letsencrypt, but keeps all configuration files, certificates, logs, etc.
  2. Make sure you have an up to date copy of letsencrypt-auto. It can be found here.
  3. Run letsencrypt-auto again.

If you get the same behavior, you can try installing zope.interface manually by running:

/root/.local/share/letsencrypt/bin/pip install zope.interface

Hopefully, next time I’ll remember to search my blog’s archives …

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.

Vim setup for PHP development

Robert Basic shares his “current Vim setup for PHP development“.  He shows how setup the Gutentags plugin, jump to definitions with CtrlP plugin, display of the current file and method in the status line, add support for PHP namespaces, improve linting with Asynchronous Lint Engine, and add support for PHPStan.

Via PHPDeveloper.

GitHub to MySQL

GitHub to MySQL is a handy little app in PHP that pulls labels, milestones and issues from GitHub into your local MySQL database.  This is useful for analysis and backup purposes.

There are a few example queries provided that show issues vs. pull requests, average number of days to merge a pull request over the past weeks, average number of pull requests open every day, and total number of issues.

I think this tool can be easily extended to pull other information from GitHub, such as release notes, projects, web hooks.  Also, if you are using multiple version control services, such as BitBucket and GitLab, extending this tool can help with merging data from multiple sources and cross-referencing it with the company internal tools (bug trackers, support ticketing systems, CRM, etc).

This is not something I’ll be doing now, but I’m sure the future is not too far away.