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.