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.

Goa Homebrew Website Club #2

With the help of the usual WordPress Goa group (Siddharth, Abhishek and me), we hosted the second Homebrew Website Club. Since we were expecting more people this time we needed a bigger venue, and the good folks at Diet Code were kind enough to provide one.

Work and discussion at the Homebrew Website Club. In attendance: Abhishek, Abhinav, Sidney,
Prateek, Milosha, Janosh, Rhea, Jane, Harshit, Meesha, Jitin, Salil, Siddharth, Wazid and Snehal

After some quick introductions we dove into to some deep topics:

  • Identity and anonymity on the Internet, especially in the current political climate.
  • Reliable hosting options that wont get affected by government blocking or trade sanctions.
  • Distributed web protocols like IPFS and Dat.
  • Data trails linked to our various online identities.
  • Differing Terms of Use on various Mastodon servers.
  • Customization limitations on Wix

In the peer-to-peer time I demoed WordPress to a few people who were contemplating using it. Their main concern was if they’d be able to find the right theme for their requirments and if it’ll be customizable enough to make their site look the way they want. I spent some time helping setup a travel blog. I also triaged issues for my WordPress theme—Zuari.

Sausages & Hamburgers

New Wink Docdash theme

Over the last few weeks I have been giving the WinkJS’s JSDoc theme some much needed attention. When we started using JSDoc for WinkJS packages we used the docdash theme. It was clean and simple, exactly what we needed at the time. After we update the main website though, the theme needed to look more on brand and so we forked it to add our colors and a navigation bar on top. We want to add tutorials for our packages soon and this means some more layout and design changes.

After initially adding the navigation bar, everything looked alright on desktop, but on mobile the two menus were fighting for attention—one would open a dropdown with the site-wide navigation, and the other would open a slide out with the API’s table of contents. The icons were quite close to each other and it was a mess.

hamburger and sausage menu diagram
Diagram of a few mobile menu options

So, when Siddharth showed me what sausage links were, I knew they would be perfect for this problem. I did some research and found some other documentation websites using them too. It is elegant and uses a simple horizontal scroll to show more items in the navigation. The trick is to be able to cut-off one of the menu items and show a fade on top of it so that its clear that there is something else there to see. Different screen widths mean that you can’t always control what is hidden so I decided to show a bigger fade on the left.

Demo of hamburger and sausage menus in action

🌭🍔😉