🔖 Thoughts on Themes (archive)

Gutenberg is meant to be the common interaction point for making and customizing your website’s elements — navigation, content, site elements. It is not meant to take agency away from themes. Themes will continue to provide templates, designs and layouts. Blocks only make these things more portable and easier for the user.

Themes make overarching decisions of typography, color and design, this should make it easier for the user to make specific decisions for their website. The customizability that Gutenberg provides must be guided by themes.

🔖 The Good WordPress Theme (archive) themes and premium WordPress themes differ in scope. The former is narrow and only handles styling and layout, the latter is supposed to be a one-stop-shop for a website. Good premium themes:

  • Solve a specific problem. They don’t try to do everything and instead, decide their limitations based on the use-case they’re solving for
  • Are integrated with plugins that help solve the said problem
  • Keep the users safe from themselves — by helping them take good design and plugin decisions, and itself — by not locking the users in.

By adding extensive customizability Gutenberg seems to be shifting these responsibilities from the theme to the user. Premium themes have long been responsible for moving the WordPress platform forward, the changes brought by Gutenberg might negatively affect this landscape.

🔖 Can We Teach Graphic Design History Without the Cult of Hero Worship? (archive)

Graphic design history is often taught through styles, or iconic designers and not through the lens of society, culture or the audience of the work. The connect to technological, economic and political contexts is equally, if not more important.

  • Tschichold responded to economic considerations by standardizing Penguin book covers
  • Dadaist photomontage was used to protest World War I
  • Modernists dreamt of universal communication after emerging from war-torn societies

We should stop perpetuating the idea that designers somehow act on culture from outside of it, and instead focus on the complex worlds in which they did their practice.

🔖 How the Blog Broke the Web (archive)

Web homepages used to be weird hand-made things until blogging and content-management systems like Movable Type came into the picture in 2001. People switched to these systems because they were easier to use, but it meant that everyone got reverse-chronological diaries whether they liked it or not. This trend has continued with Twitter, Instagram, Facebook etc.

A reverse chronological feed is not the only way that hypertext can be molded, but the early systems have put the web on this trajectory. Other shapes of hypertext like wikis or forums have not remained as popular and don’t have many tools around them either. Even newer shapes of hypertext could still be discovered.

🔖 The ‘3.5% rule’: How a small minority can change the world (archive)

Research by Erica Chenoweth, political scientist at Harvard shows that non-violent protests that are able to actively engage 3.5% of the population always succeed. These protests can take the form of general strikes, consumer boycotts etc. Since they’re non-violent they are able to engage a broader demographic.

The researchers reviewed social movements from 1900 to 2006. The movements were considered a success if they were able to achieve their goals within a year of their peak engagement. They also applied a strict non-violence test (India’s independence movement, for example couldn’t be considered). Some examples were:

🔖 Kerala vs Gujarat Models: History Matters (archive)

A historic look at the Gujarat and Kerala development models, separated from political biases. The two models have evolved over the last two centuries, and even have some commonalities.


Known to have a market-friendly, growth first approach that aims to raise incomes that would lead to trickle down.

The trading communities in Gujarat — Parsis, Bohras etc — weren’t evangelical and there were fewer Christians here. Thus, there wasn’t much focus on education or health.

The route to prosperity was through business and commerce, not education.

The freedom movement was strong in Gujarat with many important figures coming from here. The people were politically aware, but it didn’t lead to any significant social reforms.

Presently, the citizens who’ve left the state have set up businesses and developed roots in other places. The remittances contribute to ~1% of the state’s GDP.


Known to have a state-led focus on human development parameters like health and education, creating a foundation for economic growth.

Princely states of Travancore and Kochi and the british controlled the region of present day Kerala in the 1800’s. When the Christian missionaries arriived they opened up schools. Seeing this the princely states followed suit and started providing free education. They also focussed on public health and vaccinations.

Travancore introduced private property rights to increase incentive for farming productivity. This led to a budget surplus which was invested in education and health.

Since the royal families were focussed on taking care of their subjects the freedom movement didn’t get a stronghold here. However, there was a focus on social reform for civil rights of the lower castes that was led by the non-varna Hindus.

Presently, even with high HDI scores, citizens leave the state to find opportunities elsewhere, but remittances from them contribute to ~14% of the state’s GDP.

🔖 Building empathy in a product team (archive)

Product teams should always keep their customers in mind so that the changes they make doesn’t affect UX negatively. Ideas about making changes to the product should be based on empathy, not assumptions. Empathy means:

  • Understanding the users perspective
  • Not placing blame, rather understanding the cause of the problem
  • Realizing the emotional impact of the problem

While design researchers can communicate some of this, real empathy is felt by seeing users interact with the product first-hand. This empathy leads to a shared understanding of the problem and a motivation to work towards a common goal.

🔖 ABEM: A more useful adaptation of BEM (archive)

ABEM brings BEM and Atomic Design together by adding some variations to the BEM convention:

  • Prefix blocks with a-, m- or o- to signify its level.
  • Allow block names to be camelCase, changing .o-subscribe-form__field-item to .o-subscribeForm__fieldItem. This makes grouping of the class names easier and our brains can parse the shapes faster.
  • Use selectors that have multiple classes, especially for modifiers.
  • Modifier classes should have a - prefix.

For example:

.m-signUpForm--isOpen { display: block }
/* ... would become... */
.m-signUpForm.-isOpen { display: block }

This makes the HTML easier to read too:

<section class="m-signUpForm m-signUpForm--isOpen"></section>
<!-- ...would become... -->
<section class="m-signUpForm -isOpen"></section>

Applying modifiers like this has its drawbacks since it applies to all child elements too. The article goes into detail on how to resolve this.

🔖 Atomic Design (archive)

Atomic design is a strategy for creating design systems by breaking elements into distinct levels:

  • Atoms are the smallest building blocks, that is HTML elements (like inputs, buttons and headings)
  • Molecules combine atoms together to build something useful (like a form or a card)
  • Organisms combine molecules to create distinct sections of an interface (like the header or the product grid)

These are combined to make the actual designs in the form of:

  • Templates are organisms stitched together to form pages.
  • Pages are specific instances of templates.

This system allows you to design by assembling rather than deconstructing which means you don’t have to cherry pick patterns later.

🔖 BEMIT: Taking the BEM Naming Convention a Step Further (archive)

BEM only tells us about how classes relate to each other. They don’t provide an insight into the global non-relative meaning of the class. This is where namespaces based on ITCSS help.

Namespaces like o- for objects and c- for components should be added as a prefix to the normal BEM classes. Now by looking at class names — like o-card and c-user__photo — we are able to reason about its scope, where else we can use it, and how we can reuse or modify it.

Responsive classes should be added as suffixes with with an @. For example – u-hidden@print or o-layout@md. The @ symbol needs to be escaped in the CSS like so .u-hidden\@print.

🔖 MindBEMding – getting your head ’round BEM syntax (archive)

BEM class names are meant to be descriptive of their place, relationships and states.

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

In the above example it is important to note the order of --modifiers and __elements:

  • A person has an element hand with the modifier for which side.
  • A person has a modifier for gender that has the element hand.

Good BEM naming requires us to understand which category something falls into. Just because a something lives inside a block doesn’t always mean that it is an element. It could be a block in its own right. For example, something like a site logo on the header could be .header__logo, but if you are going to reuse the logo in the footer too you could separate it out into its own block .site-logo.