I haven’t been able to spend a lot of volunteer time on Wikisource this year. So, instead of transcribing the 333 pages of History of India Vol II, I started validating Tagore’s work Nationalism. It’s a relatively small work, and Balajijagadesh and others had already done a great job transcribing and proof-reading it. The work is now fully done, ready to be downloaded and read. I even nominated it to be the featured text! This is my first time doing it, let’s see how it goes! 🤞🏾

The Coldest City

Cover of the book The Coldest City

After reading Logicomix on the Kindle app, I decided to try one more from my wishlist. The Coldest City was more fun to read because it was formatted specifically for the the app. Each “page turn” would pan between frames and then show the entire page before moving to the next one.

Actually, no! It wasn’t formatted like that. I just checked; it was static pages. I read it almost two years ago and this how my brain decided to remember it because of the art. The understated black and white style really drew me in. Most of the book doesn’t have much action, but drawing and layouts added so much action even in the static frames. See for yourself:

Panels from the book The Coldest City

I am looking forward to reading more work by Antony Johnston and Sam Hart, and will start with the free version of Fuse #1 (sorry for the Amazon link 😞). Hoping to get some printed versions soon.

Using gitattributes to make releasing WordPress themes easier

Zuari releases have been few and far apart in the last year. While I work on Zuari often, I cut a release only when I know I’ll have time to fix things in case they break for someone. This has meant that I haven’t paid much thought to the release process. Till now, I would create a copy of the directory, go through my list of files to delete, delete them and create an archive to upload to WordPress.org. As you can see this process is manual and error prone.

While looking at David’s syndication-links repository I saw a .gitattributes file. I had seen it before but never looked into it. Turns out, that among other things, you can use it to define a list of files to ignore when creating a git archive!

Continue reading “Using gitattributes to make releasing WordPress themes easier”

Design Systems Handbook

Cover of the book Design Systems Handbook

I’ve been involved in the process of instating a design system twice. First, with the short-lived attempt to move the MediaWiki platform to mediawiki.ui. And second, replacing mediawiki.ui and whatever else MediaWiki was using to OOUI.

While the first attempt was limited to a small CSS file and KSS generated documentation, the second one came with a full-fledged demos page and a styleguide to go with it. MediaWiki is in the process of transitioning once again, now to Vue.js. This time though, things are different, the style guide remains in place, it is only the implementation of the components that’ll change.

So when I first heard about the Design Systems Handbook on the Design Better podcast I was immediately interested. Large legacy products like MediaWiki have long suffered from bespoke designs for every corner. Design systems that can scale-up help build products faster.

Continue reading “Design Systems Handbook”

Dependency Paralysis, or Not Getting Things Done

When I am about to do a task, I think of all the requirements that need to be fulfilled in order to do the task well. I then list all the requirements for those requirements, and then again, ad infinitum. As you can probably tell, I worry a lot and get very little done.

Oh, but I have plans! And these plans are real — set in stone in my brain. These plans become more important than the work itself. Let’s take a look at some of these plans:

Use Google Drive for work
– Pick a new web host
– Migrate to new web host
– Decommission old host
– Use money from old host to get Dropbox
– Sort out files and backups
– Take backups on HDD and Dropbox
– Decommission personal Google Drive usage
– Use Google Drive for work only

Post notes about books
– I want to be able to format these posts well
– Make a plugin that’ll allow me to post sticky notes
– Make a plugin that’ll allow me to post charts
– Read about note taking
– Read about information architecture (the book is on my bedside table)
– Make plugin to show connections between posts
– Fix and deploy the wikidata plugin (structured data is important)
– Start posting about books

Now there are two things (among the hundred other) that always go wrong. One, is losing track of the why, and the other is fake dependencies.

The first one is an easy trap to fall into. I’ll be working on the sticky note plugin all the while worrying that I am wasting my time doing it. Why am I not writing about books instead? At this point I have forgotten that I am building the plugin so that I can write about books (silly, I know). I have to try and remember why I am doing something in the first place, and when I do I feel kind of stupid. Really, a WordPress plugin to be able to start writing about books?

The other one is more painful because it is not even true. For example, I don’t really need the money from the old  web host to get Dropbox. It is a silly dependency. But since I thought that is how I’d do it, that is how the brain wants to do it now. I have to spend significant effort to show myself that is not the case. I can be stubborn with myself too.

All of this makes me wonder if I am even in control of my brain. Am I running some sort of bureaucratic corporate structure up there? Processes, lists, approvals. It is weird to have to cut through your brain’s red tape to reach goals that the brain itself wants to achieve. While the dependencies are a good tool for planning, sometimes I need to be bold and just start. Things don’t need to be perfect from the start, and sometimes even dependencies, real or fake, can wait.

How to Take Smart Notes

I’ve always found writing to be an impossibly hard thing to do. So, for the last few years I’ve been trying to learn and practice it more often.

Cover of the book 'How to Take Smart Notes'

I’ve also always felt like I have thoughts that I never really know how to express. I’m amazed when other people are able to say the things that I am thinking more clearly than the way I’ve been thinking them. I see that people who’ve studied at good universities, or are generally smarter than me are just able to do this. When I discovered this book — How to take Smart Notes by Sönke Ahrens — I didn’t expect it would have anything to do with this, but it ended up giving me an insight into the learning and writing process of academics.

The book describes an external system for reading, thinking, and writing. It argues that moving things into an external system enables learning and frees up our brains. By putting things in an external system, we give our brains permission to forget and focus instead on thinking.

The gist of the system is:

  1. While reading, make notes using your own words. Only when we’ve actually understood the material can we express it in our own words
  2. Link these notes with other notes that could be related — this helps uncover patterns. Forming these connections also helps our memory, and recall becomes easier in the correct context
Continue reading “How to Take Smart Notes”

Gutenberg editor color palettes for WordPress themes

One of my favorite features of the Gutenberg block editor is the editor color palette. It allows themes to register a color palette that is shown in the block editor whenever a block needs to choose a color.

Allowing the theme to have a say in the styling of the content of the post is a powerful idea. It helps guide the user’s design choices while still allowing them freedom to make changes. When working on Zuari, it was important for me to get this right since the theme is otherwise just black and gray. 

Editor colors from Zuari
Since I am not very good at colors, I collected over a hundred references on Pinterest to pick and tweak from.

Once we have the colors picked and named (This can be tricky. What is ecru?) we need to let WordPress know that our theme would like to register a palette, and add our colors to it:

add_theme_support( 'editor-color-palette', array(
            array(
                'name' => __('Brick', 'zuari'),
                'slug' => 'brick',
                'color' => '#825A58'
            ),
            array(
                'name' => __('Baby Pink', 'zuari'),
                'slug' => 'baby-pink',
                'color' => '#E0BAC0'
            ),
            array(
                'name' => __('Ecru', 'zuari'),
                'slug' => 'ecru',
                'color' => '#E1D9D3'
            )
) );

Next, we’ll need to add two CSS classes for each of these colors so that they can be used on the different blocks as background and foreground colors. The naming convention for these classes is has-{slug}-color and has-{slug}-background-color:

.has-brick-color { color: #825a58; }
.has-baby-pink-color { color: #e0bac0; }
.has-ecru-color { color: #e1d9d3; }

.has-brick-background-color { background-color: #825a58; }
.has-baby-pink-background-color { background-color: #e0bac0; }
.has-ecru-background-color { background-color: #e1d9d3; }
Screenshot of Color settings in Gutenberg

That’s it! This will add the color palette to the block inspector for any blocks that need color, and show the right colors in the website once they’re selected.

I hope that WordPress adds these colors as options in the Customizer panels as well, allowing for more design guidance coming from the theme. I’ve been thinking about WordPress themes as design patterns and guidelines rather than skeletons for a website. I’ll be writing about this soon.

Deep Work

Cover of the book Deep Work by Cal Newport

I’ve been trying to be less distracted by the Internet while working. Stopping my instinct to open The Wire in a new tab while trying to debug something has been difficult, especially with news breaking as it has been in the last six months.

Knowing that focus is important for our work doesn’t always translate into us doing focussed work. This is because we constantly have the urge to turn our attention elsewhere. Deep Work by Cal Newport explains that if we didn’t have to use our willpower to resist urges we would yield better results. It goes on to suggest some strategies to achieve this.

Levels of deep work

The author offers different levels of deep work and notes that your mileage for this kind of work may vary.

Monastic: Maximise deep efforts by radically eliminating shallow obligations forever

Bimodal: Divide time clearly defined stretches of deep work and the rest for everything else. The scale of division could be anywhere between days to weeks, to months.

Rhythmic: Deep work as a regular habit combined with the chain (streak) method to make sure it is done consistently.

Journalistic: Rapidly switching between deep work and shallow work. Requires practice and confidence in abilities

Process

Ritualize: Decide when you’ll work for and for how long. Impose rules of distraction free work . Give yourself support in terms on nourishment and exercise. Experiment to figure out a ritual that works for you.

Execute: Lessons from the book titled The 4 Disciplines of Execution:

  • Pick an ambitious goal and use that to drive focus
  • Focus on and measure lead indicators
  • Keep a score of the lead indicators. Use it to track progress and milestones.
  • Review your scoreboard — celebrate successes and figure out how to ensure good days ahead.

Review: Take a look at your email and respond to anything urgent. Transfer tasks and ideas from your brain into your todo and notes. Review your calendar and make a rough plan for the next day/week.

Rest: Once work is over for the day (or the week) completely shutdown work thinking. This helps the brain consciously work on insights and get time to recharge.

Some other strategies that the author suggests are:

Grand gestures: Leverage a radical change in environment, possibly linked with an investment of time and money to increase the perceived importance of the task. For eg, booking a hotel for two days to finish the project you’ve been working on.

Collaborate: Leverage the whiteboard effect where you work side-by-side with someone on a problem, and both push each other toward deeper levels of work.

Finally, it’s important to remember that our focus improves as we practice it more. Like meditation, as we focus our attention on just the task at hand we become more used to working this way.

Further reading

Never nothing to see. Algorithmic feeds or an inbox?

Twitter, Instagram and Facebook always have something to show you. Whether it is posts you’ve already seen, posts from people you never asked for, or sponsored content and recommendations that you don’t care for. It doesn’t matter if the people you care about posted something new or not — the platform will always have something for you, and it’ll always be new.

A while back, I switched from Twitter to TweetDeck for the non-algorithmic, true chronological feed of tweets. While doing so made sure that I saw everything and not just what the platform was boosting, it also made me realize that there wasn’t always something new to see. Twitter had been making me believe that there was.

Empty state on feedly. No more articles left to read.

My next step was to read Twitter along with the rest of my feeds on Feedly. This was even better, not only was I reading them chronologically, but Feedly would let me know once I had ready everything and didn’t show me the same content again.

This wasn’t just a shift from an algorithmic feed to reverse-chronological one. It was a shift from the news stream pattern to the inbox pattern. The news stream never stops and it is always trying to keep us engaged. An inbox is different — sometimes we open our inbox and there is nothing to see.

Imagine if our email inbox showed us an old email when there were no new emails just to keep us engaged — we’d lose our minds, we’d never really know when we’re done with our email. The inbox pattern is meant for processing and clearing, it puts the focus on what we want to get done. The news stream pattern is meant for engagement and keeping us on the site for long, it puts the focus on what is good for the platform.

Engagement per se isn’t a bad thing but certain engagement tactics may make us do things that we don’t necessarily want. I’ve been much happier treating my feed like an inbox, happy in the fact that there is nothing more to see!

Setting up WordPress’s PHP coding standards for your theme

Setting up coding standards for your project is always a good idea. While it is ideal to start with one from the beginning, sometimes you have to do it after you’ve already written quite a bit of code (looks at Zuari 👀). Here is a quick guide on setting up the WordPress PHP Coding Standards for your theme or plugin:

For the purpose of this guide you’d need PHP and Composer installed locally, even if you are using docker for local development. We start by running composer init. This sets up the composer.json file and adds it to .gitignore. Next to get the phpcs and the WordPress coding standards, we run:

composer require squizlabs/php_codesniffer --dev
composer require wp-coding-standards/wpcs --dev
composer require dealerdirect/phpcodesniffer-composer-installer --dev
composer require phpcompatibility/php-compatibility --dev
Continue reading “Setting up WordPress’s PHP coding standards for your theme”

Anything You Want

Cover of the book "Anything you Want" by Derek Sivers

I tend to take things seriously, more seriously than I’d like, and more seriously than it is good for me. Anything You Want by Derek Sivers is a good lesson on taking most things as they come, but taking your core values seriously:

Make sure you know what makes you happy, and don’t forget it.

Page 73

It also reminds the reader to focus on what they want to do and not what they want to have.

The whole point of doing anything is because it makes you happy! …its about what you want to be, not what you want to have. To have something (like an album, or a million dollars) is the means, not the end. To be something (like a good singer, or just plain happy) is the real point.

Page 58

The book also had tons of advice for small business owners, while I couldn’t agree with all of it, some points really stuck with me:

  • The customers are more important than the business itself. The business’ objective should be customer satisfaction, not survival.
  • Tiny details of design and customer experience delight and thrill people enough to make them tell their friends about you.

It was a very quick read, and I’d recommend it to anyone thinking of starting something of their own and have an hour to spare 😊

The Backlog

All of us have a bunch of different backlogs — emails, todo tasks, articles to read. New backlogs get added all the time too — recipes to make, podcasts to listen to, places to see. While we keep working on our backlogs, the problem is, that we add to them faster than we subtract.

The book you just finished reading references others that are now on your reading list. After releasing your new project you already have a list of things that you need to fix in it. As you constantly move closer to death – the time you have is decreasing, but, your backlog is increasing, often exponentially. This is not sustainable!

the backlog graph
I wish I had better memory of this day

So what are we supposed to do? Prune? Prioritize? Panic? I’ve been practicing an unhealthy balance of these three for a while and am increasingly getting comfortable with its constant hum bothering me. As long as I keep making new spreadsheets and projects on Todoist, I’ll be just fine 😅

Dark mode & accessibility improvements in Zuari

This update has been a long time coming. I had added a ticket to support dark mode almost a year ago when I first came across the Webkit support blog post. The code sample was straightforward:

@media (prefers-color-scheme: dark) {
    :root {
        --special-text-color: hsla(60, 50%, 70%, 0.75);
        --border-color: white;
    }
}

Philip added the initial support and with a few adjustments to the Customizer we added the ‘Allow the operating system’s dark mode to override my color settings‘ checkbox. I didn’t want to force this change on every site because it would break the colors that people have picked for their page and headers. But if you do select it, the site changes colors based on the operating system’s setting:

Notice the increased line-height in the dark mode to improve readability

More recently, I was able to complete my laundry list of accessibility improvements including:

  • Adding aria markers where needed
  • Making sure all HTML was semantic
  • Improving keyboard navigation

You can get all these changes in version 1.4.0 from Github, or the latest from the themes repository. I have also requested another round of review from the WordPress theme review team so that I can officially add the accessibility-ready tag, but, I am not sure what the process here is. Hoping someone picks it up soon 🤞🏽

Interactive dashboard for COVID-19 India

NOTE: The scale of the spread has meant that the individual data is no longer relevant or useful. This visualization has been removed to reduce any confusion. See the main dashboard for up to date information.

I stumbled across the Covid-19 India Ops telegram group and through that the covid19india.org dev group. The people there have setup a website for live tracking, a way to report new patients and even a cluster map. They also have a live updated API end-point that provides patient data in JSON. Not limited to the total number of cases and their location, the data has patient demographics and reporting dates.

I started working on a tool that others can use to make sense of the data. Since I don’t understand the domain and nuances of the data, I have made no attempt to interpret it.

You can check-out the live dashboard here — Interactive Covid-19 India Dashboard — please share it with someone who might find it useful.

The above dashboard was made using dc.js which brings crossfilter and d3 together to be able to filter the visualisation on the fly by interacting with the charts. While making this I had help from two Sanjaya’s — one Sanjay helped me figure out the GeoJSON file and the projects, and another Sanjaya pointed out some key UX improvements. There are still quite a few things to fix and I’ve noted them in Github issues. As always, pull requests are welcome on Github.

Logicomix

Knowing that I’ve been trying to learn about Bertrand Russell and logic, Amber recommended this book to me. Since I was travelling at the time I decided to read it on the Kindle app instead of shipping a paperback home. This was the first time I read a comic on the phone and was surprised at how good the reading experience was. I sometimes had to zoom in to read the text, but most pages weren’t dense, so it was fine.

I did not like the meta comic when I started the book but it grew on me. By the end of the book, I was waiting to read more commentary, and learn about the process behind the book.

My favourite panel was when Russell visits Frege for the first time:

This other panel is very close to a theme my dad often takes in his conversations. I was happy to see that others share his point of view.

The book helped me learn a complex concept while keeping me entertained. Alecos Papadatos next work, Democracy is certainly on my wish-list. Paperback this time, but only because I want it on my shelf 🙂

How to add {{missing images}} on Wikisource

Coming back to Wikisource after a few months’ hiatus I have forgotten how to do common tasks like adding images to pages. Making notes here to refer back to:

Photoshop Levels dialog
  • Open the purple links (problematic pages with the {{missing image}} template).
  • Open that page on Commons and download the biggest available JPEG.
  • Open the file in Photoshop.
  • Command + Shift + U, to desaturate the image (if applicable).
  • Command + L, to bring up Levels. Use the “Sample the image to set a white point” options to get the correct colors.
  • Use the perspective crop tool if the image has a frame (lets you pick corners instead of a frame), normal crop if not.
  • Save with a naming convention, usually – Title – Page Number – Book name.
  • Use UploadWizard to upload images in bulk and copy over information like categories, date etc.
  • Remove the {{missing image}} template in pages and use pre-established convention to add the images to the page.

Also see the help section on Wikisource, specifically about making some of these changes using a command line tool. I still need to understand what kind of templates to use when uploading the images to Commons.