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

🌭🍔😉

Goa Homebrew Website Club #1

After more than a year of trying to be part of the IndieWeb and working on my website alone, I thought I should try to start a Homebrew Website Club in Goa. So, with the help of the usual WordPress Goa group (Siddharth and Abhishek), we decided to host the first such meetup at the GrandWorks office on the 24th of July.

We saw a mix of people of attending—from seasoned developers, to graphic designers, and to people just thinking of making their first website.

Hampus, Mikhail, Siddharth, Abhishek, Wazid, Prateek, Nupura, Anika, Sameera, Salil, Shanon and Kimberly at the GrandWorks office for the Goa Homebrew Website Club #1
Hampus, Mikhail, Siddharth, Abhishek, Wazid, Prateek,
Nupura, Anika, Sameera, Salil, Shannon and Kimberly at the GrandWorks office
for the Goa Homebrew Website Club #1

Since this was the first such meetup I gave a quick introduction of the IndieWeb movement and technology, and encouraged everyone to join the wider community on the wiki and chat. After that, we went around the room introducing ourselves, talking about our websites and experiences in building them. Some of the topics we covered were:

  • Differences in using WordPress, and services like Wix and Squarespace.
  • Hitting certain limitations on Wix, and how in WordPress there is always a plugin for that.
  • Cost (time and money) of hosting your own server vs the price of Squarespace.
  • How one-click WordPress installs offered by hosting services aren’t really easy to use for beginners.
  • Wix’s AI in design feature.
  • How the Balance Project would like to run their own community website and not give all their data to Facebook.
  • Finding an audience on one’s own blog vs on platforms like Medium and LinkedIn.

We didn’t have a lot of peer-to-peer time left after the discussions, but I was able to show a photographer how they could design their portfolio website using Gutenberg on WordPress.com.

There was quite some interest in a group like this, the technical folks wanted to dive deeper into Webmentions and Micropub, and others expressed a need for a place to ask their questions and get their doubts clarified. So, we’re thinking of hosting another one on the 21st of August. Join the WordPress Goa meetup group to get notified when we do.

Zuari on WordPress.org

After staying in review for nearly seven weeks, my WordPress theme finally got approved and deployed on the WordPress.org theme directory. Big thanks to @rabmalin for the review 🙏🏽

The Zuari theme on latest page of WordPress.org theme directory.
The Zuari theme as seen on WordPress.org

I wanted to make a theme that supported the new Gutenberg block styles, and gave a lot of customization options to the users. I have been working on it on and off since November last year. The idea was to give it an hour everyday, but travel and life did not let me be as consistent as I’d like. By March I realized that it might be better to work on a subset of features and do a version one release first. Now that this is done, I am excited about making improvements.

Roadmap

  • Use ITCSS to better architect the CSS. It’ll also help in getting the editor styles out.
  • Add microformats support for the IndieWeb.
  • Plugin support for the IndieWeb plugins.
  • Improve animations.
  • Bug fixes.
  • More customization options.
  • Accessibility improvements.

Hopefully by the end of the year I can actually recommend the theme to people who want to join the IndieWeb 🤞🏽 If you give it a spin and run into problems do raise an issue and I’ll try to help. Pull requests are welcome too!

Migrating to Dreamhost

My websites have been hosted on WebFaction since I can I remember, but with them recently getting acquired by GoDaddy, I started to look for alternatives. Looking for a cheap shared host to keep the three WordPress sites I maintain, I decided to check WordPress.org for recommendations. They suggested Bluehost, DreamHost and SiteGround. After a week of trying, Bluehost support couldn’t convert my domain account to a hosting account so I setup a new one on DreamHost.

The migration went smoothly but it took me a while to get used to the way DreamHost manages users, sites, and apps. Now that the DNS has (hopefully) fully propagated, the website is up and running on the new server, on https (for the first time 🥳), and using the new theme I am working on. Excited to be working on my site again!

Rework

Rework book cover

I have been a fan of 37Signals since I can remember — I used to use prototype.js, learnt Rails for freelance work, and made everything I worked on look like Basecamp. But, when their book released I assumed it won’t be available in India (it was), or that it would be too expensive to buy anyway (it wasn’t).

So, when on a recent visit to the GrandWorks office I saw it lying on Sid’s desk, I borrowed it and read it in a single sitting. Here are my highlights:

Sacrifice some of your darlings for the greater good. Cut your ambition in half. You’re better off with a kick-ass half than a half-assed whole.

When something succeeds, you know what worked-and you can do it again. And the next time, you’ll probably do it even better. Failure is not a prerequisite for success… Success is the experience that actually counts.

The problem with abstractions (like reports and documents) is that they create illusions of agreement. A hundred people can read the same words, but in their heads, they’re imagining a hundred different things.

Their approach to planning is one that I have recently adopted in my daily life, especially my side projects:

When you turn guesses into plans, you enter a danger zone. Plans let the past drive the future. They put blinders on you… Plans are inconsistent with improvisation… Working without a plan may seem scary. But blindly following a plan that has no relationship with reality is even scarier.

Mass is increased by: permanent decisions, inventory (physical and mental) long-term road maps… less mass means you’ll be able to change direction easily. The more expensive it is to make a change, the less likely you are to make it.

Don’t make up problems you don’t have yet…the decisions you make today don’t need to last forever. Decisions are temporary. Optimize for now and worry about the future later.

This year, I have been trying to be more proactive at sharing my work. The ideas in this book, and Show Your Work have greatly influenced how I think about it:

Everything has a by-product. Observant and creative minds spot these by-products and see opportunities.

So build an audience. Speak, write, blog, tweet, make videos – whatever. Share information that is valuable and you’ll slowly but surely build a loyal audience. Then when you need to get the word out, the right people will already be listening.

Instead of trying to outspend, outsell, or outsponsor competitors, try to out-teach them… Teach and you’ll form a bond you just don’t get from traditional marketing tactics… They’ll trust and respect you more.

Don’t be afraid to show your flaws. Imperfections are real and people respond to real. It’s why we like flowers that wilt, not plastic ones.

Don’t be afraid to give a little away for free – as long as you’ve got something else to sell. Be confident in what you’re offering.

Even though I’ve been late in both reading and writing about the book, it couldn’t have been at a better time — 37Signals recently announced their new book It Doesn’t Have To Be Crazy at Work. Looking forward to reading it when it releases in India!

Docker Compose for local WordPress development

Docker, specifically Docker compose, has served me well in keeping a sane development environment for my WordPress projects. MAMP was too much of a black box, and having a local PHP and SQL for both MediaWiki and WordPress was going to be more maintenance than I would have time for. With compose I have little to no maintenance burden, and my system is squeaky clean.

The following docker-compose.yml file starts two services — using the mysql, and the wordpress images:

version: '3.3'
services:
   db:
     image: mysql:5.7
     volumes:
       - ./dbdata:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress
   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8008:80"
     volumes:
       - ./wp-content:/var/www/html/wp-content
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress

The way this is setup is that both the services share a part of their file system with the host. The mysql one shares all the database data, making it easier for me to move test data around different instances and configurations of WordPress that I might be running. And, to be able to work on plugins and themes the wordpress service shares the wp-content directory. This way, I can easily clone and work on anything directly on my local system.

With this, all I need to do now to setup a new WordPress install is — create a new directory, copy this YAML file into it, and run docker-compose up. I change the wordpress service’s port mapping when I need to run multiple instances at once. That’s it!

Indian Government and Politics

Indian Government and Politics
Indian Government and Politics

I didn’t pay attention to Civics class in school, so it was time I revisited the syllabus and found out how the Indian government worked. This interest was triggered by the Aadhaar case, and also by my attempt to understand where the ISRO WikiProject lies in the larger Indian government system.
I decided to get Indian Government and Politics from SAGE publishing because I read somewhere that it was a textbook for UPSC exams (of which I learnt more in the book). I supplemented my reading with an entertaining YouTube series called Consti-tuition hosted by Meghnad. I even got a subscription to Newslaundry to access the bonus content.

The video series and the book covered what the constitution said, and what reality is like. This was important for me as it helped me learn where the system fails and what kind of structures are made ad-hoc to deal with it. As Dan Kaminsky points out, this part of my learning will go on for much longer, maybe forever.

Graph of Indian political parties and their ideologies, as listed on Wikidata.

It also gave me a lot of new WikiData projects ideas. The first one being to visualize the national political parties and their ideologies. I’ll be working on more as time permits. Click image below for the Wikidata query.

This book was a good first step to learn the system and it’s lies. It seems pretty complex, and I know I’ve only scratched the surface, but at least I’ve begun to understand something… the me in school would have understood nothing, even if he did pay attention.