OnlyRSS https://onlyrss.org OnlyRSS started out as an RSS feed—with no associated website (hence the domain name.) The articles only existed in the feed, and they could only be accessed via RSS readers such as Feedly and Inoreader. As I became increasingly interested in typography, I decided to be a little more traditional and actually make my articles visible on a website. At that point, OnlyRSS.org became my “learning tool” i.e. it was my reason to learn the fundamentals of HTML, CSS, and JavaScript. https://onlyrss.org/pwaicons/windows11/LargeTile.scale-200.png OnlyRSS https://onlyrss.org article37 What can you do with an AI browser? https://onlyrss.org/posts/ai-browser-examples.html Sat, 11 Oct 2025 19:15:00 GMT

What can you do with an AI browser?

I've been using an AI browser for a few days, so thought I'd share some examples of what you can do with it. I've tried to think of tasks that I often find myself doing when online, that I find tedious.

Background

It's easy to suffer from AI fatigue at the moment. We're bombarded with new product launches, endless webinars and presentations (some of which I'm responsible for, sorry), marketing spam, and let's not forget the LinkedIn posts telling you that "you are prompting wrong".

Given the deluge of AI-related news, it's easy to miss some of the genuinely useful releases that have happened recently. I've already covered the Nano Banana image editing model that's part of Google Gemini—which is particularly useful for enhancing and colourising old photographs. But I've not yet covered an "AI browser". This is mostly because I had initially dismissed them as not being useful to me. Well, I recently installed the Comet browser, and I have to say, it's actually quite useful.

The Comet browser is a free (currently) AI-native web browser developed by Perplexity. Its key differentiator is that it has a built-in AI assistant that can help you with a wide range of tasks, from the mundane to the complex.

Most importantly, it can perform actions on websites e.g. it can navigate UIs, fill in forms, wait for elements to load etc. If it fails or hits a dead end, it's "smart" enough to try again using a different approach.

Below are some examples that I've had some success with in my limited usage.

Examples

Look for alternative/competing products

While on a product page, ask the AI to find competing products.

Screenshot of a Garmin Forerunner 255 product page on a website, showing a blurred person in a video banner at the top, several feature icons and descriptions below the heading 'Run At A Higher Level,' and three Garmin Forerunner watches displayed at the bottom. On the right side, there is an AI assistant panel listing alternative running watches to the Forerunner 255, including Coros Pace 3, Garmin Forerunner 265, Polar Pacer Pro, and Suunto Race S/9 Peak Pro.
On the product page for the Garmin Forerunner 255 I asked for product alternatives, and got back a good list that includes some options I've considered in the past.

Get a broader view of the news

Get a different perspective on the news. While reading a news story, ask the AI to find other sources.

Of course, we should all be using Ground News for this, but if you happen to be on a news site that's not Ground News, then this might be handy.

Screenshot of a BBC News article titled 'It's going to be really bad: Fears over AI bubble bursting grow in Silicon Valley' with a large aerial image of Silicon Valley, including the circular Apple headquarters. The article is written by Lily Jamali and discusses concerns about an artificial intelligence bubble. On the right side, an AI assistant panel provides a list of finance and stock market-focused news sources related to AI bubble risks, including Yahoo, The Telegraph, CNN, RTÉ, SVB Financial, and Investopedia.
As impartial as the BBC is, it's always good to get a different perspective on the news. In this example I asked for similar sources, but asked it to focus on sources that specifically covered finance.

Easily extract data from websites

Extract data from a website that would otherwise be difficult or time consuming to get manually e.g. lists, links etc. and then output in your preferred format.

Screenshot of the OnlyRSS About page featuring a photo of the author. Below the photo is a row of colorful social media icons, representing various social platforms. On the right side, an AI assistant panel displays a Markdown list of the social links shown on the page, including CodePen, BlueSky, Threads, Facebook, Twitter (X), LinkedIn, Instagram, GitHub, Strava, Goodreads, Concept 2 Log, Komoot, Mastodon, YouTube, and Zwift.
The only place I actually list all my links to social networks is on my blog, but the list is all wrapped up in HTML. Comet did a good job of exporting the list to Markdown.

Help you get the best price

Get the AI to do the tedious stuff for you. For example, find the best price (per unit/weight/volume) while doing the weekly shop.

I actually did this manually before I got access to Comet. And I thought I'd found the cheapest price per unit weight for a bag of fruit & nuts, but when I then tried this search with Comet the following week, it found a cheaper option. Whereas I had searched for "fruit and nuts", Comet had tried that, but it then also tried "raisins and nuts", and that's where the cheaper option was. Note to the people at Ocado, you need to add semantic search!

Screenshot of the Ocado website product page for 'Ocado Mixed Nuts & Raisins,' showing a 200g bag priced at £1.70 (£0.85 per 100g). The product details, price, and weight are clearly displayed, as well as additional information such as vegetarian and vegan attributes and user ratings. On the right, an AI assistant panel summarizes this item as the lowest cost per unit weight fruit and nut bag available on Ocado, with a detailed breakdown of composition and attributes
I thought I was good at finding the best deal, but it looks like AI is even better.

Manage Docker containers 🤓

Ok, this one is a little niche, but I wanted to give the AI a slightly more complex task, and updating a Docker container seemed like a good test. I use Portainer on my NAS to manage my Docker containers, so I asked the AI to upgrade one of the running containers (SpeedTest) to the latest version.

It performed the following steps:

  1. Stopped the existing SpeedTest container
  2. Pulled the latest SpeedTest image from the registry
  3. Recreated and started the container with the same settings (including ports) and ensured the config was preserved
  4. Verified the container was running and had upgraded to the latest version

This is particularly impressive because it required the AI to navigate a complex web interface, understand Docker concepts, and execute multiple sequential operations without any errors.

Screenshot of the Portainer.io dashboard showing details of the 'SpeedTest' Docker container. The interface lists container status information, including the container ID, name, internal IP address, and status as running. Administration options and actions like stopping, restarting, and removing the container are visible. On the right, an AI assistant panel summarizes the process for updating the SpeedTest container to the latest version, including steps for stopping, pulling the latest image, recreating with the same port mappings, and preserving volumes and settings. The update is confirmed as successful and fully operational
I wanted to give the AI a slightly more complex task, and updating a Docker container seemed like a good example.

Conclusion

I've only been using Comet for a few days, but I'm already finding it useful. It's not perfect, and it can be a little slow at times, but it's already saved me time and effort on a few occasions.

I'll be sticking with it over the next few weeks at least, and I'll be interested to see if I continue to use the AI features or end up using it like any other browser.

]]> article36 Photo editing using Gemini https://onlyrss.org/posts/nano-banana-examples.html Sun, 05 Oct 2025 14:30:00 GMT

Photo editing using Gemini

Ten examples of photos edited using the new Nano Banana model from Google Gemini. The key takeaway? Each example just required uploading an image to the Gemini app and typing a single prompt—no tech skills needed.

You're reading this in your RSS reader, which is great! But, in the version on the source site the images are clickable, which toggles between original and AI edited. If you want to see that, then go here. Otherwise, the content is identical between the RSS version and original

Nano Banana

Nano Banana (officially Gemini 2.5 Flash Image) is an AI image generating and editing tool created by Google. It's the first AI image tool I've used that actually edits your original image, rather than creating a brand new one where key elements—like people's faces—are distorted beyond recognition.

Android users can get Gemini from the Play Store. Apple users can get it from the App Store.

A screenshot of the Gemini app on an Android device displays a dark interface with the greeting Hello Mark, and buttons for Create Image, Write, Build, and Deep Research. Near the bottom, a chat window shows a user prompt requesting to 'Add the King of England at our table having a drink'
Just add an image and a prompt, that's all you need to edit photos using the Nano Banana model in the Gemini app.

Examples

Below are 10 examples using my own photos. My favourite use-case is enhancing and colourising old family photos. I used to do this with Adobe Photoshop, but it was a long and tedious process. With Gemini, it's just a few clicks and a single prompt.

A man crouching on a grassy field holding a young girl standing in front of him, with a backdrop of houses and hills in the distance.
Prompt: "Enhance and colourise."

The original photo was taken in 1949 in Cwmbwrla Park, Swansea, Wales. The large building seen in the back-left that looks like a prison, is in fact my old school (Manselton School). The exact spot this photo was taken is now the location of the new(ish) Burlais Primary School.

In the AI version, the image is in colour and is much more detailed.
The result

You can take a photo of a model and place it in a new scene.

A detailed model of a white and red spaceship (colonial Viper Mark 2 from Battlestar Galactica) shown on a stand indoors
Prompt: "Place this model in a real space scene, as if it's a real space fighter, make sure to show the engine thrust and a nebula in the background."
In the AI version, the same ship appears in space with a nebula in the background.
The result

You can take a photo of a real person and turn it into a model!

A man wearing a blue t-shirt stands outdoors in front of a mountain landscape under a bright sky in the first image.
Prompt: "Create a 1/7 scale commercialized figurine of the characters in the picture, in a realistic style, in a real environment. The figurine is placed on a computer desk. The figurine has a round transparent acrylic base, with no text on the base. The content on a black computer monitor is a 3D modelling process of this figurine. Next to the computer monitor is a toy packaging box with a single two-dimensional flat illustration of the figurine on the front of the box and no words or logos."
The man is depicted as a realistic figurine next to a illustrated box, with a computer screen showing his model in the background.
The result

You can enhance and colourise photos of U.S. Army Air Forces personnel who came to South Wales during WW2 and stole our women! (It's ok great uncle Pete, I think she was happy to be stolen).

A sepia-toned World War II-era photograph of a man in a military uniform with sergeant chevrons and ribbons, standing outdoors in front of a building.
Prompt: "Enhance and colourise."
The AI-restored version enhances the image in color, making the uniform, insignia, and man's features clearer and more vivid.
The result

You can take a photo of a real scene and turn it into an oil painting in the style of Van Gogh (other styles are available).

A realistic photograph of a countryside scene with grassy field, a dirt road curving to the right, and a sun shining through a partly cloudy sky.
Prompt: "Turn this into an oil painting in the style of Vincent van Gogh."
The AI image is a vibrant impressionist painting of a rural landscape with a bright sun and dynamic swirling clouds in the sky, showing lush green fields and a dirt path on the right.
The result

You can have a drink with a friend… and a king!

Two men smiling and sitting together at a table with glasses of beer in a relaxed indoor setting.
Prompt: "Add the King of England at our table having a drink."
In the AI image, a third man, resembling the King of England, has joined them at the table, and all three are smiling for the photo.
The result

You can remove elements of your past that you're not proud of.

Two young children sit on the bonnet of a car, both wearing blue jackets, they are holding crosses.
Prompt: "Remove the crosses in the kids' hands and replace with ice creams."
In the AI image the crosses have been replaced with ice creams.
The result

The prompt used to create the scale model above isn't limited to people.

A vintage green motorcycle parked outdoors in front of a tiered stone wall and garden.
Prompt: "Create a 1/7 scale commercialized model of the motorbike in the picture, in a realistic style, in a real environment. The model is placed on a computer desk. The model has a rectangle wooden base, with no text on the base. The content on a black computer monitor is a 3D modelling process of this model. Next to the computer monitor is a toy packaging box with a single two-dimensional flat illustration of the motorbike on the front of the box and no words or logos."
The AI image shows a highly detailed model version of the same motorcycle on a desk, with a box and computer screen displaying its digital design in the background.
The result

You can imagine famous artworks as real people (who may or may not look like Kate Winslet).

A marble bust of a figure wearing ornate armor and an elaborate winged helmet, displayed on a wooden pedestal in a museum setting.
Prompt: "Imagine this statue as a real person"
In the AI-generated image, the statue appears as a lifelike person with realistic coloring and texture, closely matching the pose and details of the original sculpture.
The result

You can make yourself look far cooler (and more serious) than you actually are.

Man with short gray hair and beard standing outdoors in a blue shirt, with a mountainous landscape in the background; default view is a clear, bright photograph.
Prompt: "Turn this image into a dark, moody, oil painting"
In the AI version, it's now a dramatic, dark oil painting style of the same scene.
The result
]]> article35 The enshittification of UK supermarkets https://onlyrss.org/posts/the-enshittification-of-UK-supermarkets.html Sun, 27 Jul 2025 14:30:00 GMT

The enshittification of UK supermarkets

UK supermarkets have transformed simple shopping into a data-harvesting nightmare. What was once as easy as picking up an item and paying has become a multi-tiered pricing system requiring apps, weekly unlocks, and surrendering personal data just to access “normal” prices.

A rant about the enshittification of UK supermarkets.

I remember the first time I visited the US when I was around 10 years old. I was in a shop, had my chosen product in hand, and approached the counter with the exact change ready. But, of course, I didn't actually have the exact change ready, because the price shown wasn't the actual price as it didn't include sales tax, and I remember thinking that this made absolutely no sense—mostly because it makes absolutely no sense!.

Skip forward 40 years, and now in the UK, across all major supermarkets we have the “standard” (or as I like to call it “artificially inflated” price), and the “member” price. i.e. what would more realistically be considered the “normal” price, but now you have to hand over your personal details and fuss about with a card/phone every time you want to buy something.

At Sainsbury's it's got worse. The member price is called the “Nectar Price”, and now they have introduced a 3rd tier, called “Your Nectar Prices”. Did you notice what they did there? It's different because it starts with “Your…”, which is part of the marketing name for this “feature”. I'm sure this won't confuse anyone, although according to this thread on Reddit, it is clearly confusing everyone.

“Your Nectar Prices” are personalised prices. And to get these personalised prices, you have to open the Nectar app each week and hit an “unlock” button. This is very important, because without this no one would ever open the Nectar app and see the ads (sorry, “partner offers”), and the people who thought that this UX Hellscape was a good idea would never hit their Success Metrics. I can just see them celebrating now, probably a 10,000% increase in engagement with the Nectar app 🥳🥳🥳… 🤮. Although, unlike publicity, there is such a thing as bad engagement.

It's all a bit confusing, so I've lifted the following extract from the Sainsbury's website.

  • Nectar Prices
    • Nectar Prices are discounted prices available to Nectar members on selected products from time to time.
    • Nectar Prices are available when you shop instore in supermarkets via any checkouts or when using SmartShop (SmartShop App or handset) or online at www.sainsburys.co.uk or using the Sainsbury’s App.
  • Your Nectar Prices
    • Your Nectar Prices are up to 10 personalised price offers made each week, on things you love or things we think you’ll love based on your shopping history.
    • Each week before you shop, unlock your available Your Nectar Price offers (see below). New Your Nectar Price offers will land each week on a Friday. If you do not unlock your offers before you scan the item, you will not receive the discount.

So, in summary, to pay “normal” prices now in Sainsbury's, you have to register, install an app, open the app each week, and hit a button. In the past all you had to do was pick up an item and go to the counter!

I recently noticed that my local Co-op was also inflating their “normal” prices, sorry… I mean “offering discounts to members”, so I signed up to the app. A week later they were hacked and lost the names and addresses of all 6.5 million of its members.

Also, GDPR states that you should only hold PII if you need it to run your business (not sure why, maybe to reduce the exposure when you get hacked?)—maybe I'm being stupid, but you don't need to know my name or where I live to sell me a sandwich!

And as annoying as these pain points are, there's a far more serious side to this particular enshittification. Who is least likely to jump through all these hoops? The elderly, the poor, and the vulnerable. Those who don't have Smartphones, or who don't have the technical knowledge. These are the people who will be paying well above what's fair for food.

My message to UK supermarkets is simple, focus on making money from the margins on selling goods. Invest your profits back into more efficient supply chains, etc., not on making apps your customers shouldn't need and don't want.

As an aside, I have an extra message for Sainsbury's. Beef Mince is NOT beef that has previously been minced and is now compacted so tightly that it has a measurable gravitational field. It's beef that has been minced and is STILL minced.

]]> article34 AI-assisted coding is the electric-assisted cycling of software development https://onlyrss.org/posts/vibe-coding.html Fri, 11 Apr 2025 09:30:00 GMT

AI-assisted coding is the electric-assisted cycling of software development

My premise here is that electric bikes don't just make cycling easier for existing cyclists—for many people they make cycling possible. I see many parallels with AI-assisted software development i.e., for existing software developers AI-assisted coding makes their job easier, for people who can't code, it makes software development possible. And I see both (electric bikes and AI coding) as good things.

Why I'm defending vibe coding (and electric-assisted cycling)?

Creating software using an AI-coding assistant, relying fully on the AI and without ever writing the code yourself is termed “vibe coding”.

I see a lot of comments and memes online related to vibe coding, typically pointing out that vibe coding can only get you so far (before even the AI can't maintain/update what it's created), or it's simply “bad” as the developer does not understand the code that's been created. And these things are true, yet they are only relevant if you're a professional software developer.

If you're not a professional software developer, and you just want to create an app for yourself that accesses a weather API and determines the best period to go cycling during the day, or a circuit training app that selects 10 exercises at random for you to do each day based on the equipment you have access to, then the fact that you don't understand the code that has been created by the AI is utterly irrelevant.

Is the generated code well commented, efficient, scalable, and does it embrace best practice? The answer to all these is simple: it… does… not… f**king… matter. There's only one thing that matters—does it solve the problem?

For many people, AI coding (like electric-assisted cycling) is the only option

I see more people cycling now than I did even just a few years ago. That's not exactly true (or at least it's hard to prove, I've not actually been counting), I guess what I mean is that I see a much broader variety of people cycling now than I used to.

I live in the UK, where cycling typically means a middle-aged guy, with enough disposable income to drop £3-5k on a bike (or bikes! all purchased via the Cycle to Work scheme, that are never going to be used to cycle to work, and weighs less than the roast dinner he ate the previous day), dressed in Lycra, and looking like he's training for the Tour de France, or at least like he's in an urgent rush to get somewhere. We know these people as Middle-Aged Men In Lycra (MAMILs).

More recently, while out on my bike, I've seen older people (yes, people, not just men!) wearing normal clothes—as if they don't care about the loss of efficiency due to their baggy t-shirts and flappy shorts. Not only that, but they're also sitting up straight on their bikes, and looking around at their environment, some of these fools are even smiling and chatting to each other (wasting oxygen that could be better used to help propel them forward), it's madness I tell you, madness!

Anyway, my point is that these new cyclists are typically on electric bikes. And if it's the electric bike that has encouraged enabled them to get outside for a few hours to explore their environment on a sunny Sunday afternoon, as opposed to sitting in front of the telly watching Cash in the Attic (other old-people shows are available) then I'm all for it.

Vibe coders should just learn to code

Damn right! And you should sell your car and walk everywhere, and I should learn how to spell “seperately” “sepratley” “separately”, and addicts should just stop taking drugs, and Trump should stop lying like the sack of sh… I digress.

The simple fact is that many people can't code. It might be an issue with not having time to learn, or that the return-on-investment on learning is not worth it i.e., maybe they only wanted to create that one bike-ride weather app, or circuit training app. Is that worth a month-long Python course? (And anyway, shouldn't Python developers learn real languages like assembly and machine code?)

Accept it or not, but for many people, coding (like spelling for me) is just not something they will ever get, it doesn't matter how much they try and learn it.

And anyway, why should they learn to code? Coding is a means to an end isn't it? Isn't the aim to create working software?

I've heard similar comments about electric-assisted cycling e.g., “it's cheating, they should just use a real bike”. And it's true, if they were hoping to use their electric bike during the Tour de France, it would indeed be classed as cheating, but I suspect this is not the aim in most cases. And a “real” bike? What does that even mean, do real bikes have suspension and gears? Is using a bike computer like a Garmin or Wahoo cheating?

Conclusion

In conclusion, if you have a problem, if no one else can help, and if you can find them… maybe you can hire The A-Team then give vibe coding a try. It's not bad, or wrong, or cheating, and there's no need to take a shower afterwards.

And if all goes well, you might create something that has never before existed, and I reckon that's probably a good thing… unless of course you created Truth Social, in which case… you can just f**k off.

A sketch of an old-man cycling on an electric bike while also using a laptop
Warning: Vibe-coding and cycling are mutually exclusive activities.
]]> article33 Same news, different views: The BBC's design at home and abroad https://onlyrss.org/posts/same-news-different-views.html Sun, 06 Apr 2025 17:30:00 GMT

Same news, different views: The BBC's design at home and abroad

Around a year ago I noticed that the BBC news site had updated their article format—and I really liked the new look. But, I then realised that I had my VPN on and was actually seeing the site as viewed from the US! Have our American cousins evolved so much during our split 400 years ago that they now have a better appreciation of typography and design?

Introduction

It's perfectly normal for news websites to have different layouts and styles. Image and paragraph width, choice of typeface (Serif vs Sans-Serif), use of colours, horizontal page-alignment, position of the byline, location of the search field etc. All these features differ between news publishers, but, they are typically consistent within a single publisher.

Apart from consistency providing the reader with a more user-friendly experience, it also helps to build brand recognition, and, maybe even more importantly (at least from a cost point-of-view), it's simpler to design, build, and support one solution than it is two, especially when you consider that many of the choices are subjective. For example, does it really matter if the byline is above or below the header image?

This is why I'm confused as to why the BBC News site went to the trouble of creating a different design for its international audience. I understand that differences around content were required (due to rights issues etc.) and that some layout changes would be required (as the international version is ad-supported), but why change the typography, layout, colours etc.?

Page Layout

I guess we (in the UK) like colour, and the rest of the world… doesn't?

UK version (2-column, red header)
International version
Page Element UK International
Layout Two column One column
Background colour Off white Pure white
Header images Image width > Copy width Image width > Copy width
Body images Image width > Copy width Image width = Copy width
Byline Below header image Between title and header image
Original publish date Yes No
Updated date Yes Yes

Features

Even though the BBC is very insistent that UK users now register when using the website, the site lacks the ability to save articles. Yet this is a feature in the international version. Saving articles on a news site isn't the most common feature, and I tend to save useful articles to a Feedly board anyway, so this isn't an issue for me, but it's still a strange inconsistency.

The international version also has a share button (as do almost all news websites), which is missing from the UK version. I'm not sure why this is the case, but I suspect it's because the international version is ad-supported, and the BBC wants to encourage sharing to increase traffic to the site. But, it's such a useful feature (after all, sharing is caring), and it's such an easy feature to implement, it seems like a very odd omission to me.

Typography

In the UK we get a sans-serif font, narrow paragraph width, and for some reason, a grey background (ok, I know, I use an off-yellow background, so who am I to criticise). The international version gets a larger serif font, wider paragraph, and a white background.

There is some consistency—unfortunately. Across both versions the BBC still refuses to use real quotes (“ ”) and em dashes (—), and instead uses typewriter style quotes (" ") 🤢 and en dashes (–) 😱.

Comparison: UK version (sans-serif, grey background, narrow)
International version (serif, white background, wider)
Paragraph Element UK International
Font size 16px 18px
Typeface BBC Reith Sans BBC Reith Serif
Width/Measure 580px (~73 characters) 722px (~86 characters)
Line height 22px 26px

Conclusions

The international version of the website is operated by BBC Global News Ltd., the for-profit BBC subsidiary, which also operates the BBC World News television channel.

This commercial distinction likely explains many of the differences. The international version, with its revenue-generating objectives, employs more reader-friendly typography (serif fonts are generally considered easier to read in longer articles), offers social sharing to increase traffic, and provides article-saving functionality to encourage return visits. Meanwhile, the UK version, funded by the license fee, doesn't have the same commercial pressures.

What remains puzzling is why the BBC maintains two entirely different design systems rather than a single flexible system that could accommodate both commercial and non-commercial needs. The development and maintenance costs for dual systems must be substantial, and the brand inconsistency seems counterproductive to the BBC's global identity.

Why does this bother me so much that I wrote a blog post about it? To be honest, I much prefer the international version, and I do pay a license fee to the BBC, so I guess I'm just a little jealous!

]]> article32 Why Product Managers need to embrace the tech https://onlyrss.org/posts/why-product-managers-need-to-embrace-the-tech.html Sun, 16 Mar 2025 17:30:00 GMT

Why Product Managers need to embrace the tech

After 16 years as a Product Manager, I share my thoughts on why technical knowledge is highly beneficial for product managers.

Background

I’ve been a Product Manager for 16 years. I don’t mean I’ve worked in product management for 16 years, I mean I’ve literally had the individual contributor (IC) role of Product Manager (PM) for 16 years.

Does this mean I lack the skills required to become a Director-, VP-, or Chief-of-Product? No idea, it’s never occurred to me to apply for any of those roles. Is it just a lack of ambition then? The answer to that depends on how you define ambition. If you limit your definition of professional ambition to mean “taking on more responsibility”—which is business speak for “managing people”—then yes, I have no ambition. But, if your definition of ambition includes “trying to be as good as you can in your current role”, then I would consider myself to be very ambitious (surprise! I subscribe to the latter definition).

If this all sounds like me trying to justify why I’ve had the same role for the last 16 years, then I’ve done an effective job of writing my introduction, because that’s exactly what I was aiming for.

The upshot of this is that I’ve gained some experience developed strong “opinions” on what it takes to be a good IC PM. But before I dive into what I’ve learned over the last 16 years, here’s my definition of Product Management (it can mean different things in different organisations or industries).

A PM listens to customers, understands their problems, and then uses his/her knowledge of the technology available to define and build* solutions.

*in many organisations, the PM role ends with the definition, which is a shame, the building part is one of the most rewarding aspects of being a PM—it also helps that I’ve never met a software engineer I didn’t want to go to the pub with.

While understanding customers is crucial, that ground has been thoroughly explored in PM resources. Instead, I want to focus on an equally vital but oft-overlooked aspect of product management: technical knowledge.

But that’s what engineers are for, right?

I like to compare being a PM to being an architect (of buildings, not software). Imagine you’re an architect who designs homes. You meet with the client, and you try and understand their unique situation e.g. Are they young or old? Do they enjoy entertaining or are they hermits? Do they have cats or dogs? Do they have (or plan to have) a large family? Do they enjoy gardening? Do they work from home? Do they own multiple cars? What’s their budget? When do they want to move in?

These are important questions that need to be answered before an architect can begin the design process. The home has to be designed to meet the client’s needs, but it should also be designed so that it takes advantage of the latest building materials, can be constructed economically, and that once built, is easy to maintain. To do this the architect needs to be aware of trends and advances in engineering, in building materials, in building standards etc.

Just as an architect needs to understand construction materials and engineering principles, a PM needs knowledge of the technical tools and platforms available. Without this knowledge, we risk designing solutions that are impractical, inefficient, expensive, or even impossible to build.

In other words, a PM must deeply understand not just the problem space (#obvs), but also the solution space to be truly effective.

What follows is a description of the types of technologies I try to keep up with, and the methods I use to ensure that I stay updated efficiently. I’ve also thrown in a few examples of how keeping abreast of these technologies has benefited me, my products, and my users. One big caveat, I’m a PM for a data analytics company with a big focus on UI products that run in the browser. If you’re a PM for a company that makes Halloween costumes for horses, I’m sorry, this is not the blog post for you.

The tech & resources

HTML, CSS, and JavaScript

Your tech stack might use AWS, Azure, or Google Cloud. Your developers might be coding in C# on .Net or JavaScript on Node.js. But at the end of the day, when your users interact with your product in the browser, that browser is using HTML, CSS and JavaScript to display your content.

  • HTML is the language used to define the semantic structure and content of web pages, like the skeleton and text.
  • CSS is the language used to control the visual styling and layout, everything from colours and fonts to animations and responsive design.
  • JavaScript takes care of the user interactions, manipulating content dynamically, and communicating with servers, enabling everything from simple button clicks to complex single-page applications.

Each of these 3 technologies is being constantly developed and updated, but it’s CSS that has probably been through the most rapid changes over the last few years. Many of the recent additions to the CSS spec can be implemented into your products to improve the experience for your users, but also to simplify the build effort i.e.  reduce the time required by your developers.

Resources

  • The CSS Podcast : Each episode focusses on a single CSS feature. If you only pick one resource from this list, I'd recommend this one.
  • Kevin Powell's YouTube channel : Lots of great content on CSS (and some HTML). With a strong focus on upcoming CSS features.
  • Just a Spec: Podcast series with a focus on web standards and understanding the fundamentals.
  • Bad at CSS : A podcast series where developers discuss their struggles with CSS, and share their learning experiences.
  • ShopTalk : If you enjoy listening to two smart people chatting about web tech, this is the one for you. They're up to episode №655!
  • RSS: Chris Coyier's Starred Articles : Chris Coyier is a web designer, founder of CSS Tricks and co-founder of CodePen. He's also a co-host of the above mentioned ShopTalk podcast. When Chris comes across an interesting article he stars it in his RSS reader. This RSS feed is a collection of those starred articles.

Browsers

Your product is going to be displayed to your users via a browser, and most likely one of the big 4 i.e. Chrome, Safari, Edge, and Firefox.

You should keep up-to-date on the latest features of each, understand what they have in common, and what differentiates them. For example, across the 4 browsers I've listed, there’s actually only 3 rendering engines used (the rendering engine interprets the HTML, CSS, and JavaScript to display web pages). Chrome and Edge are both based on Chromium, which uses the Blink engine. Safari uses WebKit, and Firefox uses Gecko. But, on mobile Apple devices, whatever browser you install (Chrome, Firefox etc.) you’re actually just installing Safari wrapped in some Chrome/Firefox UI.

Resources

  • Chrome blog (RSS) : For Google's Chrome.
  • Mozilla blog (RSS) : For Mozilla's Firefox.
  • WebKit blog (RSS) : For Apple's Safari.
  • Edge blog (RSS) : For Microsoft's Edge.
  • Interop 2025 : Each year the browser vendors get together and decide what to focus on for the following year. There's a high probability that some of these new capabilities might be worth taking advantage of across your products.
  • Baseline : Baseline gives you clear information about which browser features are ready to use in your products today.

Browser Dev Tools

The Dev Tools is a whole suite of developer focused tools running in your browser that can be accessed by hitting the F12 key on Windows (Cmd + Option + I on a Mac). These are incredibly powerful, and not just for developers. You can use them when doing some QA, to take full-page screenshots, and even to edit live web pages (very useful when you want to try out some changes you're considering to the content or UI).

Much like the browsers themselves, the Dev Tools are also updated frequently with new features, and it’s worthwhile knowing what new capabilities are available.

Resources

Windows, Mac, iOS, and Android

So, all our apps are rendered using HTML, CSS, and JavaScript, and then displayed via Chrome, Safari, Edge, and Firefox. But, those browsers are most likely going to be running on Windows, Mac, iOS, or Android. And the browsers are quite well integrated into the OS, so an app running in Chrome on Windows won’t necessarily render your product the same as Chrome running on a Mac. For example, subtle differences in font rendering, device-specific features, or OS-level optimizations can lead to variations in how a web app is displayed.

Resources

Microsoft 365

If the product you manage has an export capability, then it's likely that the exported data is going to end up in MS Office. If it's unstructured data then it's likely to be imported into Word or PowerPoint, if it's structured data then it's probably going to be end up in Excel.

By keeping up-to-date with the features of these products you can ensure that your products' exports are compatible with the products included in M365 (including Copilot). You can even advise your users on how best to derive maximum value from the data you provide them when using MS Office apps.

Resources

Examples

Ok, so what has all this technology monitoring done for me as a Product Manager? Or more importantly, how has it benefited my users? Good question, and what better way to answer than with examples?

View Transitions

View Transitions are a recent addition to CSS that allow a page element (title, paragraph, image etc.) to animate between an initial and final state. This can be within a single page or across pages. A typical example would be from a thumbnail of a video, which when clicked would transition/animate to the full size playback version of the video.

I use View Transitions on this site to transition from the article titles on the homepage, to the article titles on the article pages, this is shown in the animation below (25% of normal speed).

Animated screenshot of a list of blog titles on a blog homepage. When a title is clicked, the title transitions (or fades) into the same title but on the top of the blog article page.

The Web Share API

I recently discovered the Web Share API (via this blog post), a powerful tool that bridges JavaScript, browsers, and operating systems. Not only will it provide my users with an enhanced sharing experience, but it will also significantly reduce our research, development, and maintenance effort.

Rather than having to research the most common sharing destinations e.g. Facebook, X, LinkedIn, WeChat etc., used by my clients, and then define, build, and maintain those options—and probably sacrifice the less popular ones. The Web Share API simply invokes the Operating Systems’ native sharing menu (yes, apparently this is a thing that exists!).

The result is that the user will see only the options for the apps they have installed. This even includes the people the user most frequently/recently shares content with.

The screenshot below is taken from invoking the share option on this website, and it’s an example of what a Windows user (in this case, me) would see.

A screenshot of a modal dialog showing icons for a variety of email clients and social networks

There is one caveat however, the Web Share API is not supported on Firefox (what’s even more unfortunate is that “it’s not supported on Firefox” is something I find myself uttering far too frequently).

Progressive Web Apps

Much like the Web Share API, Progressive Web Apps (PWAs) require very little effort to implement, but can greatly improve the users’ experience.

With very little development effort, you can allow your users to “install” your web application on their OS (desktop or mobile). Your app will get a dedicated launch icon, a splash screen, and no browser chrome. On mobile your app will fill the screen, just like a native application.

Once installed, as far as the user is concerned your app will look and behave like a native Windows, Mac, iOS, or Android application—PWAs even support offline capabilities and push notifications.

The screenshot below is of this blog, which has been implemented as a PWA.

A mockup of 2 mobile phones, each of which are showing a page from the onlyRSS blog. The blog page contents take up the whole screen of the phone.

There is one caveat however, Firefox dropped their support for PWAs in 2021. A decision that has angered and perplexed developers and users alike. The good news is that PWAs are a progressive enhancement. If the user’s browser supports PWAs, then that’s great, if it doesn’t, then there’s no downside. Your app will continue to run in the browser as usual.

Python & Copilot in Excel

I’ve been waiting for this update to Excel for months (I subscribe to the MS Office roadmap updates via RSS), and only recently (Jan 2025) got access. MacOS users will have to wait until March.

The combination of Python and M365 Copilot in Excel means that Excel users can now use natural language to analyse and visualise data in Excel with the full power of Python—no knowledge of coding in Python required.

As an example, the jitter chart shown below (which is a replication of one available from within one of my products) can be created with Python in Excel with just a few prompts.

I’ve mentioned this game-changing Excel update to a few colleagues (all of whom use Excel), and none were aware of its existence.

A screenshot of a data visualisation, specifically a jitter chart that shows the age distribution of aircraft grouped by aircraft type.

Dev Tools

Here’s the description of the Chrome Dev Tools (other browsers have their own version of dev tools) taken directly from the Dev Tools website.

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.

I’ve highlighted one specific section of the description, because for Product Managers I think it’s really useful. It’s really easy to use the Dev Tools to edit the text on a webpage, and if you know some HTML & CSS, you can even make more fundamental changes to the page. This can be useful if you want to add a ticket to your backlog asking for small changes. Rather than trying to describe what you want (which could be misinterpreted) simply make the change to the live page and capture a screenshot—there’s even a screenshot tool built into Dev Tools (it even lets you capture a full page screenshot, including any of the page currently below the bottom of the viewport.)

An animation showing the dev tools being used to manually change the text of a live BBC article title. The user is swapping the word “Trump” with the word “moron”. Clearly the author of this blog post believes (correctly so) that Trump is a moron.

CSS one-liners

  • scrollbar-gutter: stable This will stop horizontal content shift when moving between pages that require/don’t-require a vertical scrollbar. Or when you open a modal/popup. See this in action in this YouTube Short from Kevin Powell.

  • @view-transition {navigation: auto;} This one line of CSS will add a subtle fade effect when your users navigate between pages. When combined with an app running as a PWA on mobile, this gives your application a much more native feel. I learnt about View Transitions from an episode of the Shop Talk Show podcast. You can also visit my own blog post that covers both versions of View Transitions i.e. same-document and cross-document.

  • p{text-wrap: pretty;} This single line will improve your application’s typography by removing widows & orphans. i.e. single words that stand alone at the end of a paragraph or text block. You can see this in action in this Chrome for developer blog post by Adam Argyle.

  • font-variant-numeric: tabular-nums; If you have tables with columns that contain only numeric data (that represent quantities or an order/position), then please use a font that supports tabular numbers, and ensure that font’s tabular-nums feature is enabled—yes, fonts have features. To understand why this is important, see this blog post from Seb De Deyne.

Last but definitely not least

I cannot write an article on the benefits of keeping up-to-date with tech without mentioning the Daily Tech News Show podcast. This podcast covers the most important tech news of the day.

The host, Tom Merritt, is a great presenter, and the show is always highly informative. I’ve been listening to DTNS (and its earlier iteration, Tech News Today) for almost 15 years, and if I ever sound like I know what I'm talking about when I'm talking about tech, it's because of Tom Merritt.

Conclusion

I hope I’ve convinced you that as a Product Manager, keeping up-to-date with the latest technologies can greatly benefit you, your products, and your users. I’ve also tried to show that it’s not as difficult as you might think. The resources I’ve listed are all free, and many are available in audio format (so you can listen while you workout), or via RSS feeds (so you'll never need to go looking for new content, and can always skip articles/posts that are not of interest).

The above tech topics and associated resources are not meant to be exhaustive, they are just some of the ones that I find useful. I think the key point is that you should be aware of the technologies that are most relevant to your products and your users, and then find the resources that will help you keep up-to-date with those technologies.

]]> article31 Learning Log: 2024 https://onlyrss.org/posts/learning-log-2024.html Tue, 24 Dec 2024 13:30:00 GMT

Learning log: 2024

My 2024 learning goals and resources. In this post I outline my learning goals for 2024 and list the resources I used.

2024 goals

During January 2024 I finally completed the Mimo JavaScript course. This course took many months, and was my primary source of training for JavaScript. It also represented the end of chapter 1 of my learning journey (i.e. HTML, CSS, and JavaScript ). I'll continue to use learning resources for these technologies, but it's now time to focus on chapter 2 i.e. SQL and Python. Again, I'll be using Mimo as the primary learning resource for these.

Resources

HTML, CSS, and JavaScript

FormatResourceProgress
Mimo: JavaScript
web.dev: Learn PWA
web.dev: Learn Performance
Google: Designing in the browser.
The Odin Project

SQL and Python

FormatResourceProgress
Mimo: SQL
Mimo: Python

Typography

FormatResourceProgress
Legibility
Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students.
Universal Principles of Typography: 100 Key Concepts for Choosing and Using Type.

Miscellaneous

FormatResourceProgress
Google: Generative AI learning path
Mind the Product: AI for Product Management
Atomic Design.
Storytelling with Data: A Data Visualization Guide for Business Professionals.
The Little Know-It-All: Common Sense for Designers.
Understanding SVG paths
Kevin Powell's SVG beginners guide
Visualize This: The FlowingData Guide to Design, Visualization, and Statistics.
]]> article30 Visualising my daily constitutionals (walks) https://onlyrss.org/posts/visualising-my-daily-constitutionals.html Tue, 17 Dec 2024 17:30:00 GMT

Visualising my daily constitutionals (walks)

The result of my attempt to build a calendar heatmap from scratch with HTML, CSS, and JS. The heatmap visualises my daily walks in 2024.

Calendar heatmaps

It's hard to think of another chart type that can show daily data over a 12-month period in such a small space as well as a calendar heatmap.

Calendar heatmaps allow you to glean: relative values between individual days, busiest days e.g. Mondays, weekends etc. (by looking at the rows), busiest weeks (by looking at the columns), and any trends throughout the year.

Building from scratch

My version below is based on the GitHub commit calendar heatmap. And like the GitHub version, you can hover over each cell to see the relevant data for that day, in my case, the date and distance walked.

My initial version used a linear colour scale (specifically the brightness, referred to as “lightness” in the oklch colour space), the problem I found was that the majority of my walks were ~5 km, but I had a single walk that was 50 km. The result was one very bright cell, with the rest all pretty much the same dull shade of green.

I then decided to use a logarithmic scale for brightness, and this worked much better. The logarithmic scale allowed the short (5–10 km) walks to remain visible, and the differences between them to be discernible.

The issue now was that the long walks were too similar to each other in brightness e.g. my 50 km walk looked almost the same brightness as my 20 km walk. So, I decided to bring in a second parameter i.e. a drop-shadow. The spread of the drop-shadow increases (linearly) with the distance walked, specifically, each 10 km walked adds 1 pixel of spread to the shadow. The result is an “overspill” effect, reminiscent of an old CRT display.

As an aside, I noticed that the overspill was appearing behind adjacent cells, so I set the z-index of each cell to be equal to the distance walked, so brighter cells are always on a layer above less bright cells.

NOTE: As you're reading this in an RSS reader, you'll need to visit the source article to view the heatmap as an interactive element, below it's included as a simple image.

A calendar heatmap showing the distance walked each day in 2024. The heatmap uses a logarithmic scale for brightness, and a drop-shadow effect to show the distance walked. The result is an “overspill” effect, reminiscent of an old CRT display.

Conclusions

I really like the way this one has turned out—especially the overspill effect. But, I'm far less happy with the code itself. I was about 90% of the way through building it—struggling to align the day and month labels—when I realised that I should have simply used a HTML table, rather than CSS Grid & Flex.

]]> article29 Bring back the daily constitutional https://onlyrss.org/posts/the-daily-constitutional.html Wed, 11 Dec 2024 17:30:00 GMT

Bring back the daily constitutional

After discovering the concept of the daily constitutional recently while reading Sherlock Holmes, I think it's a phrase (and practice) that deserves a comeback.

Introduction

I've been working my way through Arthur Conan Doyle's Sherlock Holmes short stories. It's a great way to boost my end-of-year Goodreads stats (I'm counting each short story as a “book”—this is Goodhart's Law in action), and I've always enjoyed the TV adaptations. Recently, in addition to the books, I've been listening to the Sherlock & Co. podcast, which I highly recommend.

The first Holmes story was published in 1887, and it turns out that language has evolved over the last 137 years (and maybe not always for the better). The standout example for me was the use of the word “ejaculate,” which is used 23 times throughout the books. Today it refers to a very specific type of “outburst,” but back then it referred to any form of outburst, and in Doyle's books, it specifically refers to verbal outbursts (which is a good thing, otherwise I'd expect the whole series of books to be banned in American schools). Honestly, I'd love to try and bring back this use of the word, maybe by using it in the office? (alas, I have a mortgage to pay, so I think I'll give this a miss).

Although I managed to determine the meaning of “ejaculate” from the context, the word “constitutional” (example below) was something I had to look up (one thing I love about eReaders is how easy they make it to look up the meaning and etymology of a word).

It just happened, however, that this hour coincided with Blessington's constitutional, which seems to show that they were not very well acquainted with his daily routine.
— Dr Watson in The Resident Patient

The daily constitutional

Here's the definition of constitutional from the Oxford dictionary:

noun: constitutional; a walk taken regularly to maintain or restore good health. e.g. “she went out for a constitutional.”

The dictionary describes the above usage as dated, which leaves the modern-day usage as the two adjectives below:

  1. relating to an established set of principles governing a state.
  2. relating to someone's nature or physical condition.

It's the second adjective above that relates to its use as a noun. i.e., taking a daily constitutional is good for one's constitution, aka health.

This is a phrase (and practice) that I think deserves to make a comeback.

Wouldn't joining a gym be better?

As I write this post it's December, typically a month of overindulgence (alcohol, mince pies, rom-coms, etc.). The good news is that in December we can all eat and drink as much as we like, because in January we're all going to “work it off” by going to the gym or taking up running. The problem with going to the gym or going for a run is that those things are really hard, and also (at least for beginners), they're not fun.

I suspect that the vast majority of people who take up running or join a gym in January have quit before February kicks in. And then it's back to sitting at a desk all day, ready for the cycle to begin again the following December.

But there is another option, a boring but much easier, cheaper, and more enjoyable option, and that's to just go for a walk each day i.e., to take a “daily constitutional.”

You're not going to get a six-pack by taking a one-hour walk each day (you're not going to get one by paying a gym membership either), but you will get to take a break from work/sitting, get some fresh air, explore your local surroundings, burn some calories (~300kcal), and maybe learn something from listening to a podcast.

How's my campaign going?

Not well to be honest.

Screenshot of a WhatsApp message between my wife and me, where I state I'm about to go for my daily constitutional, and she asks if I mean a walk or something else
A recent—and real—exchange with the wife.
]]> article28 Learning Log: 2023 https://onlyrss.org/posts/learning-log-2023.html Fri, 29 Dec 2023 13:30:00 GMT

Learning log: 2023

My focus this year was meant to be SQL & Python, but it ended up being mostly JavaScript, and then of course, like everyone else, I got a bit distracted by Generative AI. On this page you'll find links to all the resources I used.

2023 goals

I'm disappointed with my progress this year. It was meant to be the year I finally learnt SQL, but about halfway through the year I changed my working hours (I now officially start at 7am), and the hour I used to spend each morning learning new skills was no longer available to me.

Generative AI also affected my learning this year, in two ways:

  1. I needed to learn about how GenAI works, and had to brush-up on my "prompt-engineering", specifically for some work projects (I'm sure I'm not alone in this!).
  2. My subscription to GitHub Copilot (in VSCode) changed the way I was learning to code. Essentially providing me with a "learning assistant".

I'm almost at the end of my JavaScript course (on Mimo), so once this is complete, I'll then switch to SQL and Python. My aim is to have a good understanding of HTML, CSS, JavaScript, SQL, and Python by the end of 2024.

Resources

HTML / CSS / JavaScript

FormatResourceProgress
web.dev: Learn Images
web.dev: Learn HTML
Mimo: JavaScript
JavaScript for web designers

Data visualisation

FormatResourceProgress
HDX: Data Visualization Guidelines
Pencil & Paper: Data Table Design UX Patterns
Datawrapper: Data Viz Do's and Don'ts

AI

FormatResourceProgress
Google: Generative AI learning path

Miscellaneous

FormatResourceProgress
Understanding SVG paths
Legibility
]]> article27 Holiday: The Canadian Rockies https://onlyrss.org/posts/the-canadian-rockies-holiday.html Thur, 21 Dec 2023 13:00:00 GMT

Introduction

To celebrate our 20th wedding anniversary the wife and I spent two weeks in Canada during late September 2023. We flew into Vancouver and then drove to Whistler, Clearwater, Jasper, Banff, and finished in Calgary. The scenery was breathtaking, and the weather was perfect. The following image gallery is a selection of my favourite photographs from the trip.

Gallery


For anyone viewing this in an RSS reader, you'll need to visit the source article to view the gallery.



Building the gallery

I needed some help with this post. I'd already built filters for the Homepage and Changelog page, so I had that ready to go, but, I wasn't sure I had the CSS skills to get the gallery working the way I wanted. I managed to get close, but not close enough, so I followed an online tutorial.

I wanted the image popups to be a Web Component, so I could easily reuse them in future by simply using a custom HTML tag e.g. <dialog-image>. I also wanted to use the <dialog> element (now that it's supported across the main browsers), which I'd never used before, to serve up the full-sized images. Luckily, a tutorial appeared recently which describes how to do exactly that.

Links to all the resources I used are listed below:

Web Components

Here's a definition of Web Components I just pulled off the web:

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
— WebComponents.org

So basically, developers now have the ability to create their own custom HTML tags, and via JavaScript and CSS, control how they work and look. This is a big deal, and I'm sure it will be a game changer for web development in the future. I'm not going to go into any more detail here, but if you want to learn more, I recommend you check out WebComponents.org.

The image popup Web Component I created for this post was my first Web Component. I then went off on a bit of a "Web Component All The Things" binge, and created 4 more. I targeted article page elements that are common across all articles, and then created a Web Component for each. So far, I've converted the following page elements into reusable Web Components:

  • Global navigation
  • Table of contents
  • Feedback footer
  • Share buttons

I suspect I'll create a few more, and that the amount of copying & pasting I'll be doing in future will be greatly decreased!

Conclusions

I am aware that this article is the modern-day equivalent of a slideshow of holiday snaps, but I don't care. I'm pleased with how the gallery and popups look and am glad I went off on a Web Component creation tangent, as it's going to make my website much easy to maintain in the future.

The page requires just 1.1MB of resources to load, although each thumbnail image selected will trigger the load of the full-sized image (≈150KB each). Even so, I'm pleased with the overall page performance.

]]> article26 View Transitions: A basic implementation https://onlyrss.org/posts/view-transitions.html Tue, 06 Dec 2023 16:00:00 GMT

Background

I hadn't written an article for quite some time, so decided to write about the View Transitions feature that has been added (behind a feature flag) to Google Chrome. I implemented View Transitions on this site about 6 months ago, and I couldn't remember why I hadn't already written about it. Then, during my research, I remembered Dave Rupert's blog post "Getting started with View Transitions" and I realised it covered everything I wanted to say, and he'd done a much better job of explaining it than I could have.

However, it's such a cool little feature, and so easy to implement, that I decided to write about it anyway. And let's be honest, the web can't have too many cool animated GIFs, can it?

Browser support

Currently only Google Chrome (v115+) supports multipage View Transitions, and even then it's behind a flag. So, if you want to test your implementation (or see how it looks on this blog), then copy chrome://flags/#view-transition-on-navigation to the clipboard, paste it into the URL bar, then select 'Enabled' alongside the 'viewTransition API for navigations' option.

Now that you've enabled the feature in Chrome, you can test the feature by navigating between pages on this site, or better still, try the following blogs which have both implemented View Transitions:

Transition between pages

With the Chrome feature flag enabled, to achieve a fade as you move between pages (fig. 1), you need to add the following code to the <head> of each page: 

<meta name="view-transition" content="same-origin">

The result is a subtle fade as you move between pages (the animation shown below has been slowed to 25% of normal speed). On mobile—especially when combined with a Progressive Web App (PWA)—the feeling you get is very “native-app” like.

An animated GIF showing a user selecting various pages from a mobile blog's top navigation menu. When the new page loads, the previous page fades away, and the new page fades into view.
Transitions between pages. This animation has been slowed to 25% of normal speed.

Transition between page elements

To achieve a transition between page elements, for example, a blog post title on your homepage, and the title on the blog post itself (fig. 2), we need to create a link between the two elements, to do this, we use the 'view-transition-name' style.

For example, on my blog's homepage, for the most recent blog post i.e. post23, I have the following code: 

<card-body>
        <h2 style="view-transition-name: post23">Using 'text-wrap: balance'</h2>
        …
      </card-body>

Then, on the corresponding blog post page, I have the following: 

<header>
        <h1 style="view-transition-name: post23">Using 'text-wrap: balance'</h1>
        …
      </header>

This is all the information the View Transitions API requires. The result is a smooth transition between the two elements (and locations), as shown in the animation below (the animation shown below has been slowed to 25% of normal speed).

An animated GIF showing a list of blog articles on a blog's homescreen. When one of the article titles from the list is clicked, the article title transitions upwards towards the top of the screen, at the same time, the page transitions to the blog article proper. The title finally settles at the top of the article and matches the location of the article title.
Transition between page elements. This animation has been slowed to 25% of normal speed.

Summary

There's a lot more to View Transitions than I've covered here, but I wanted to keep this article to just the basics. If you want to learn more, then I recommend you read Dave Rupert's article "Getting started with View Transitions".

]]> article25 Using 'text-wrap: balance' https://onlyrss.org/posts/css-balance.html Tue, 11 Apr 2023 11:30:00 GMT

Background

If you're reading this then you are probably already aware of the upcoming new CSS feature: 

text-wrap: balance;

If not, then please visit the Chrome dev blog for the full details.

Basically, it's a way to "balance" titles, headings, and short paragraphs such that there are a similar number of words per line (and hence avoid widowed words). For simplicity, I'm going to refer to it as CSS Balance from now on.

I'm not going to repeat the information that's available on the Chrome dev blog, the aim of this article is to demonstrate the effect of using CSS Balance on a typical blog, specifically this blog. Basically, I'm going to show some examples so you can decide if it's something you should implement on your website.

Examples

The following examples have not been configured specifically to demonstrate the effects of CSS Balance, they are simply the result of enabling CSS Balance on titles and headings on this website.

Homepage cards

Figure 1 below shows the first 3 cards from my homepage. Figure 2 shows the same 3 cards but with CSS Balance enabled.

A screenshot of 2 identical html cards, both include an image, a title, and a short description. In the card on the left the title is on 2 lines, but the second line only includes the word '10', in the second card, the title is also on 2 lines, but the second line includes the words in 'Windows 10'.
Figure 1. Without CSS Balance enabled.
A screenshot of 2 identical html cards, both include an image, a title, and a short description. In the card on the left the title is on 2 lines, but the second line only includes the word '10', in the second card, the title is also on 2 lines, but the second line includes the words in 'Windows 10'.
Figure 2.With CSS Balance enabled.

As you can see, CSS Balance has had an effect on the titles of all 3 cards. The effect is probably most beneficial on the first card, where the words "Product" and "Manager" belong together, and on the second card, where the words "progress" and "bars" benefit from being together.

In total, 13 out of the 22 homepage cards have multiline titles, and each one of those multiline titles was altered when CSS Balance was enabled.

Where CSS Balance is probably most beneficial is in stopping scenarios like that shown below in Figure 3, i.e. where a single number has appeared on a line by itself. Although to be fair, a non-breaking space should probably have been used in this scenario to keep "Windows" and "10" together.

A screenshot of 2 identical html cards, both include an image, a title, and a short description. In the card on the left the title is on 2 lines, but the second line only includes the word '10', in the second card, the title is also on 2 lines, but the second line includes the words in 'Windows 10'.
Figure 3. Without CSS Balance (left), and with CSS Balance (right).

Article titles (Desktop)

I use a wider article page layout compared to the majority of blogs i.e. 840px, and I don't tend to use very long article titles. Because of this, my article titles typically only span a single line, and therefore CSS Balance has no effect when viewing my articles on a typical desktop.

Article titles (<Desktop)

Once you view articles on something narrower than a typical desktop display, the situation is very different.

A screenshot of 2 identical html cards, both include an image, a title, and a short description. In the card on the left the title is on 2 lines, but the second line only includes the word '10', in the second card, the title is also on 2 lines, but the second line includes the words in 'Windows 10'.
Figure 4. Without CSS Balance.

In Figure 4 above, where CSS Balance is NOT enabled, we see that as the viewport width is reduced, the last word on the first line simply drops to a new line, as you would expect. This is a good example of why CSS Balance is useful, without it "meters" becomes disconnected from "million", which then becomes disconnected from "15".

With CSS Balance enabled (Figure 5 below), there is far less movement of the title as the viewport width is reduced, and the phrase "15 million meters" remains together.

A screenshot of 2 identical html cards, both include an image, a title, and a short description. In the card on the left the title is on 2 lines, but the second line only includes the word '10', in the second card, the title is also on 2 lines, but the second line includes the words in 'Windows 10'.
Figure 5. With CSS Balance.

Summary

So, should you enable CSS Balance on your website? Yeah, why not, it's literally 1 line of CSS. It's easy to enable it for your website (you'll need to try it in a canary build of Google Chrome) and then see if you like the effects. I'll be leaving it enabled on onlyrss.org, and will wait for browsers to add support.

]]> article24 10 benefits of RSS for Product Managers https://onlyrss.org/posts/10-benefits-of-rss-for-product-managers.html Sun, 02 Apr 2023 11:30:00 GMT

The benefits

RSS can be a valuable tool for Product Managers. It allows them to stay up to date on industry news and trends, track competitors, and better understand their customers. If you're new to RSS, then see my previous article: What is RSS and what are aggregators?

In the list below I summarise 10 benefits (if humans had 8 digits, I'd have only listed 8) for Product Managers.

1. Stay up to date with technology trends

RSS feeds can deliver the latest emerging technology trends to your RSS aggregator without having to scour the web. This can help you stay ahead of the curve and make you aware of new technologies that could be leveraged to improve your existing products—or enable entirely new products.

2. Identify new opportunities

RSS feeds can also be a great way to identify new opportunities. By reading about the latest news and trends in your industry, you can better identify industry specific problems early, and therefore start the product discovery process before your competitors.

3. Monitor your competitors

RSS feeds can also be used to track your competitors' activities. This can help you identify new trends, see what features they're adding to their products, and get a sense of their overall strategy.

4. Understand your customers

RSS feeds can also be used to listen to your customers. By subscribing to your customers' websites, social media platforms etc. you can get a sense of their needs and pain points, and better understand their future strategy. This information can be invaluable for making decisions about your product roadmap.

5. Know your tools

Subscribe to product blogs in order to be aware of the latest enhancements to tools often used by Product Managers e.g. Microsoft 365, Jira, Confluence, Feedly, Aha!, Figma etc. Some of these tools (Microsoft 365?), might also be the same tools that your customers use. Can your product take advantage of upcoming enhancements e.g. integration with MS Teams?

6. Monitor the effect of your go-to-market activities

RSS can be used to monitor websites for any mention of recent go-to-market activities. Set up keyword search alerts related to the specific product (or product enhancement) you've launched and have any mentions delivered directly to your RSS aggregator.

7. Monitor any mentions of your product

It's always good practice to have keyword search alerts setup for your portfolio of products. Whenever one of your products is mentioned online (news, blogs, forums etc.) you can be alerted via RSS. Many RSS aggregators will also make it easy to share this insight with your colleagues either via a custom RSS feed, or via an email newsletter.

8. Monitor any mentions of your brand

Similar to №7, but for your brand. i.e. set keyword search alerts for any mention of your brand.

9. Add RSS to your products

RSS is not only a technology that can be used to make you a better Product Manager, but also a technology that can be added to your products. Do you have a product blog? If so, does it support RSS? Do your products include a news or alerting feature? If so, can this be implemented via RSS?

10. Save time

It's possible that as a Product Manager you're already doing many of the things listed above—but without the help of RSS. If so, then using RSS can save you a great deal of time. That's really the main benefit of RSS. Visiting multiple websites to check for updates is time consuming and inefficient. Using RSS to have these updates delivered to you and made available in a single application is fast and efficient.

If you have any comments on this article then please get in touch via Twitter or Mastodon.

]]> article23 HTML and CSS table with progress bar and percentage https://onlyrss.org/posts/table-with-progress-indicator.html Sun, 05 Mar 2023 11:30:00 GMT

Background

I recently created my first HTML tables for my Learning Log 2022 article. Each row in the table was a course or book I had used during the previous year, and I wanted to add a progress indicator within the rows to show my progress. It took some effort to get the tables looking and functioning the way I wanted (mostly due to declaring the progress variable in the HTML and not the CSS) so I thought the solution was worth sharing.

The difference between the table shown below and those used in my previous article is the inclusion of the percentage value. That required a little hack that takes advantage of CSS Counters.

The result

An image of the table is included below. You can visit CodePen to see (and edit) the table and view the HTML & CSS. The CodePen version includes some helpful comments in the CSS.


Notes and code

The tags in the first column are added via ::before pseudo-elements.

The second column will use an ellipsis when the text is too long for the column (there's a special place in Hell for people who build tables with unequal row-heights).

For the third column, the percentage progress for each row is declared in the HTML as a CSS Variable. This is then used to set the progress bar length, and also the percentage text. If the percentage is equal to 100%, then the text is swapped for a “✓” and the progress bar colour is changed to green.

To show the percentage value alongside the progress bar (without including it as separate text in the HTML or CSS) I define a CSS counter-reset and set it to the progress variable. I then use the ::before element where the content is set to the CSS counter value (nothing has been “counted”, so this is equal to the counter-reset i.e. the progress variable). It's a bit of a hack that allows me to get a CSS Variable displayed as text on the page.

]]> article22 Air India: putting their recent order into context https://onlyrss.org/posts/the-air-india-order.html Tue, 21 Feb 2023 11:30:00 GMT

Putting the numbers into context

A lot of articles have been written recently that discuss Air India's record-breaking order of new Airbus and Boeing aircraft. Many articles have not however mentioned the size and breakdown of Air India's current fleet.

I thought I'd try and reuse the same data visualisation (the isotype chart) from my previous blog post and create a new isotype chart for Air India that attempts to compare their current fleet alongside their recent order.

Before we get to the chart, just a quick note on the order itself. Strictly speaking, it's not what would be referred to as a firm-order. Air India have signed a Letter of Intent (LoI), this is defined below:

Letter of Intent: a written document stating that a customer agrees in principle to purchase aircraft from a manufacturer at a given price and for a given quantity, sometimes including an approximate delivery schedule. However, a deposit has not been paid and the buyer has not fully committed to the purchase as they are still able to walk away from the deal. Thus, the manufacturer cannot guarantee the delivery slots until the finer details of the purchase agreement are negotiated and agreed upon. Once the purchase agreement is signed and a deposit paid, the LoI is converted to a firm-order.

The chart

Whenever the media quote a number or a statistic, you should always ask yourself one question i.e. Is this a big number? (Or, in some cases, is this a small number?). Well, when it comes to the Air India Letter of Intent… yes, it's a really big number!

Air India's fleet
Solid colours reflect their current fleet i.e. in-service, stored, and firm-orders (there are just 5 aircraft on firm-order).
Faded colours reflect the aircraft currently on Letter of Intent (LoI).

They have a current fleet of 126 aircraft, the current fleet plus the LoI fleet is 596 aircraft. That's an increase of 373%.

The data source

Data was sourced from Cirium's Ascend Fleets Analyzer. Current fleet includes in-service, stored/parked, and aircraft on firm order. Data was captured on 19 February 2023.

]]> article21 Infographic: 25 largest passenger airlines https://onlyrss.org/posts/top-25-pax-airlines.html Sat, 4 Feb 2023 11:30:00 GMT

Background

Inspiration for this chart came from the recent infographic on VisualCapitalist.com which visualises the world’s top 25 fleets of combat tanks (they specifically state “combat” tanks, which intrigues me, are there tanks designed for the daily commute?).

Their chart was a jpg, and I wanted to see if I could build something similar using HTML & CSS (without JavaScript or a charting library). I used a similar set of airline fleet data that I used for my previous data viz article.

The result

Note: If you are reading this in an RSS aggregator, then the HTML/CSS/JS version of the chart below has been replaced with a static image, to see the full version please view the article at my blog.

My 'small-multiples isotype infographic' (a very pretentious name for a chart that's full of tiny pictures of aircraft) was built using HTML, CSS, and just a little JavaScript.

To display this page (not just the infographic) the browser requires 334 kB of resources (text, styles, images, fonts etc.), but due to the magic of text compression, only around 255 kB is actually transferred to the browser. On a good internet connection, page load times are around 200 ms. For comparison, the 'top 25 fleets of combat tanks' image is 920 kB, and when that image is loaded in their article page, 4.9 MB of resources are transferred to the browser!

I've included details on how I built it and what I learnt along the way after the infographic—that information is strictly for nerds, or “normies” who are trying to fall asleep.

Click here to download this infographic as an image.

How it's built

The isotype charts

There's nothing clever about the construction of the isotypes. Each chart is just a single <div> that contains between 1 and 3 <span> elements (one for each manufacturer). Each <span> then contains a series of aircraft glyphs e.g. 🛧🛧🛧🛧🛧.

The aircraft glyph

Each tiny aircraft image is the Up-Pointing Airplane Unicode glyph (&#x1F6E7;), and there are 10,016 tiny aircraft in the chart! My first attempt at this chart used inline SVGs for the aircraft, it worked, but it wasn't very performant. It then hit me that I could simply use an aircraft Unicode glyph i.e. a font, and this solution worked on my desktop, but not on Android, where the aircraft glyph was replaced with squares.

It turned out my default font did not support the aircraft glyph, so I had to find one that did. I eventually settled on Noto Sans Symbols 2. My only issue with this font was the size, i.e. it's >300 KB (it contained a lot of symbols). I then learnt about Font Forge, and I used this to remove all glyphs except for the aircraft, essentially creating a new single-glyph font file (3 KB, yeah!).

Populating the isotypes

As mentioned above, 10,016 aircraft glyphs are used in the chart, and although I could have entered them into the HTML manually, I actually updated the dataset quite a few times while making the chart, and updating the number of aircraft for each airline (and manufacturer) would have been laborious. In order to make things easier, I decided to let JavaScript (and my friend, Mendhak, help me out).

The JavaScript function is a simple loop that adds a string of aircraft glyphs into a <span> element based on a number I enter i.e. the number of aircraft from each manufacturer for each airline.

The JavaScript function: 

  
  function drawAircraft(numAircraft) {
    for (var i = 1; i <= numAircraft; i++) {     
      document.write('🛧');
    }
  }

The HTML source: 

  
  <span class="airbus aircraft grey-fill">      
    <script>drawAircraft(40);</script>
  </span>

The HTML output (as viewed in the browser's Developer Console): 

  
  <span class="airbus aircraft grey-fill">
    <script>drawAircraft(40);</script>
    🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧🛧      
  </span>

I could have used the function above to create the isotype charts, then viewed the HTML output, copied the resulting aircraft spans from the HTML output and into the source, and then removed the JavaScript (essentially pre-computing them all). And if this was the only use of JavaScript in the page then that's what I would have done, but I had to resort JavaScript (and my friend Mendhak, again) to build the 'Split by manufacturer' option, so I decided to leave this JavaScript in place.

Enabling the “Split by manufacturer” option

I placed a "grey-fill" style in the HTML head (which sets the aircraft font colour to grey) and applied it to all the aircraft spans. When the 'Split by manufacturer' option is ticked, this style is removed, and the manufacturer colours (defined in the CSS) are then visible.

The airline tailfins

Each airline tailfin is an SVG. Most were created from scratch in Figma (some were modified from existing SVGs kindly sent to me by another nerd friend i.e. Paul.

There are no bitmap/raster images used in the chart (even the aircraft font is a vector at its core). If you use your browser's zoom feature, you can zoom in on the chart and you'll notice no loss in image quality (you'll also notice that each little aircraft is a wide-body four-engine jet). A screenshot of the zoomed in isotype chart for Alaska Airlines is shown below.

A closeup image of the isotype chart for Shenzhen Airlines. At the top-center of the image is the Shenzhen Airlines logo, followed by their name and position in the top-25 i.e. 24th. Below the airline name is a grid of 198 small aircraft glyphs. 116 of them are coloured for Airbus, and 82 are coloured for Boeing.

What I learnt

How to remove unwanted glyphs from a font file

This is going to come in handy. The largest resources loaded for the majority of my pages are the font files, and I've always wanted to reduce the size of the files by removing glyphs I know I'm never going to use. I didn't know of an easy way to do this until I came across this guide (and then downloaded the free and open source software 'Font Forge').

Line breaks in HTML do matter (but only sometimes)

I was under the misguided assumption that line breaks in HTML had no effect on what was rendered in the browser. For the isotope charts where an airline had aircraft from more than a single manufacturer, this required multiple <span> elements, one for each manufacturer. In my code these were each separated by a line break. Unknown to me this placed a small space between the <span> elements' rendered output, which meant that the aircraft glyphs in the isotype charts were not forming a regular grid. The solution was to simply place the <span> elements on a single line. You can see this on this JSFiddle.

You can define your inline SVG's path in your CSS… but not in Safari!

In the first version of this infographic, I used an inline SVG for the aircraft glyph, but that meant repeating the SVG 10,016 times in the HTML. I was therefore very pleased to discover that the SVG's path could be pulled out of the inline SVG and instead defined in the CSS. I was then very unpleased to discover that this was not supported in Safari!

The data source

All data was sourced from Cirium's Ascend Fleets Analyzer. Airline fleets include only stored (AKA parked) or in-service passenger aircraft. Data was captured on 26 January 2023.

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article20 Airbus vs Boeing: An experiment in charting https://onlyrss.org/posts/airbus-vs-boeing-charts.html Tue, 20 Dec 2022 11:30:00 GMT

Background

Inspiration for the first chart came from the recent infographic on VisualCapitalist.com which displays the share of men versus the share of women among smokers (across the world's 50 most populous countries).

Their chart was an embedded image. I wanted to see if I could build a similar chart using HTML & CSS. I'm sure there are charting libraries that would let me build something similar, but I wanted full control of the design, and more importantly, I wanted to test my knowledge of CSS.

The result

The result is the first chart shown below. In the chart, the vertical axis is used to show the airline's total fleet size (in-service and stored passenger aircraft only), and the horizontal axis shows the percentage split between Boeing and Airbus. The chart is sorted descending by total fleet size.

If the chart were to be rotated 90° and the elements shared a common baseline, then it would be a mosaic plot (or a Marimekko chart).

chart showing the percentage of airbus vs boeing aircraft for the top ten airlines

If you are reading this in an RSS client, then you'll need to visit the original article to see the original CSS version of the above chart

The first, skeleton version of the chart was done in about an hour – and I won't lie, I was very proud of myself. It then took me many hours (okay, okay, days) and three iterations to get to the finished version.

It's all built using CSS Flexbox, which, as the name suggests, is very… flexible, so there is often more than one way to achieve similar results. Multiple iterations were required as my first version only worked on desktop and tablets, not on mobile ie, it wasn't responsive.

The chart above looks okay, and might be suitable as an infographic, but I wouldn't add it to a report, and as a product manager I wouldn't include it in any of my analytics products. For that, I'd probably stick with the ubiquitous stacked column chart.

An alternative

A stacked column chart version using the same data is shown below. This was far easier to create than the chart above.

chart showing the percentage of airbus vs boeing aircraft for the top ten airlines

If you are reading this in an RSS client, then you'll need to visit the original article to see the original CSS version of the above chart

It's not as visually interesting, but it is more informative. For example, it's easier to gauge the relative differences between the total fleet sizes.

It's still not quite what I'd add to a report or in one of my products. To get to that point I'd replace the logos with names, and rotate it through 90° (so it becomes a bar chart), this would let me use horizontal text labels for the airlines' names.

The data source

All data was sourced from Cirium's Ascend Fleets Analyzer (one of the products for which I am responsible). Airline fleets include only stored (AKA parked) or in-service Boeing or Airbus passenger aircraft (freighters were not included). Data was captured on 19 December 2022 using the search criteria shown in the screenshot below.

A screenshot from Cirium's Ascend Fleets Analyzer showing search filters and a table of results.
A screenshot from Cirium's Ascend Fleets Analyzer showing the search used to generate the data for the charts on this page

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article19 Learning Log: 2022 https://onlyrss.org/posts/learning-log-2022.html Sat, 10 Dec 2022 11:30:00 GMT

2022 goals

My primary learning goal for 2022 was to gain a deeper understanding of the online presentation of unstructured content.

In addition to understanding the basics, I also wanted to be able to put what I had learnt into practice. This required the continuation of my deep dive into HTML & CSS, and a total redesign and rebuild of this website—with a focus on typography and speed.

In addition to my primary goal, I also made a start on the understanding, querying, and manipulation of structured data, as this will be my focus for 2023.

Below is a list of the resources I used during 2022 to help me achieve my learning goals (★ = highly recommended).

Resources

Typography

FormatResource
Practical Typography ★
The Elements of Typographic Style
Better Web Type ★
Combining typefaces
Google’s ‘Font Knowledge’

HTML & CSS

FormatResource
The Odin Project (only the HTML & CSS parts)
Interneting is hard! ★
An Interactive Guide to Flexbox ★

Data visualisation

FormatResource
Better Data Visualizations
Cartographies of time

Miscellaneous

FormatResource
Figma Web Design Tutorial
GitHub Skills
UX writing guide

Understanding, querying, and exploring data (2023 goals)

Planned and in progress

FormatResource
LinkedIn's ‘Become a data analyst’
W3School's ‘SQL tutorial’
DBeaver User Manual
PL-300: Power BI Data Analyst

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article18 Zoom and enhance! https://onlyrss.org/posts/zoom-and-enhance.html Sun, 02 Sep 2022 11:30:00 GMT

Background

If you are reading this in an RSS reader, although the full article is included below, the source article has a better comparison of the original and restored photos which cannot be replicated here (as it uses JavaScript)

"Zoom and enhance!" is a movie trope that has long infuriated anyone who has even the most basic understanding of what is (and isn't) possible when manipulating images. In the past I often found myself shouting at the TV, “You can't recover information that was never there!”. It turns out that for movies and TV shows set before 2022 my outbursts were justified, but for those set during or after 2022, it's starting to look like I was very wrong.

Zoom and enhance!
— Rick Deckard (and every character from CSI)

With recent advances in AI—especially with regard to image interpretation, manipulation, and generation—a few new tools have become available online that remove a lot of the skill that was previously required to enhance and colourise old black & white, or colour degraded photos.

Below I provide links to 2 such AI tools and include 5 examples of old family photos that I've restored using them. I've also taken a recent colour photo, degraded it, and then used the same tools to see how the “restored” version compares with the unaltered original.

The restoration tools

Examples

Below are 5 examples using my own family photographs that date between 1920 and 1979. Figures 1, 3, and 5 were originally black & white. While Figure 2 was originally colour, but the colour has degraded considerably and now has a very strong red cast. Figure 4 is a duotone. Each photo was digitised by scanning the original print (not the negative).

Two young boys on a ladybird ride.
Two restyored photograph of young boys on a ladybird ride.
Figure 1. Original (top), restored (bottom). My brother (right) and me (left) riding a ladybird carousel, circa 1979.
A red cast image of a young boy and his grandfather.
A restored photo of a young boy and his grandfather.
Figure 2. Original (top), restored (bottom). My brother and paternal grandfather (aka bampi), circa 1975. 2 Torrington Rd, Gendros, Swansea, UK
A young girl and her monther in black and white.
A restored photograph of a young girl and her monther in black and white.
Figure 3. Original (top), restored (bottom). My mom and her mother, circa 1949.
A portrait photograph of a girl in her early twenties. The image is a duotone photograph and is out of focus.
A restored portrait photograph of a girl in her early twenties.
Figure 4. Original (top), restored (bottom). Edith Lilian Evans (nee Mabbett, born 1899), my great-grandmother, circa 1920.
A black and white photograph of a baby in a bathtub located in a garden.
A restored photograph of a baby in a bathtub located in a garden.
Figure 5. Original (top), restored (bottom).Gillian Heinson (my mom's cousin), circa 1947.

Are the results “real”?

The results in the examples above look amazing, but are they real? i.e. are they an accurate representation of the original photos’ subjects? We can't know for sure, as when restoring old photos the only source of truth we have are the old photos themselves. But what if we used a modern photo, removed the colour, and added a blur to the image in an attempt to make it look old? How closely would the results of face enhancement and colour restoration match the original image?

For this experiment I used an image of the wife and me that was taken a couple of weeks ago. I then desaturated the image and applied a 2 px blur to remove enough of the details such that it started to look like the old photos in the examples above (actually, I think it looks worse).

The original image is shown in Figure 6 below. The degraded and restored images are shown in Figure 7

A recent photo of my wife me.
Figure 6. The good lady her indoors, and me.
The degraded version of the recent photo of my wife me.
The restored version of the degraded photo of my wife me.
Figure 7. A degraded modern image (top), and the results of the restoration process (bottom).

There are some pink flowers in the bush that should be green, and the face enhancement has decided to shave my beard off, but apart from that it's pretty good. Is it as good as the original? of course not. The key point here is that it's substantially better than the degraded image, and it's close enough to the original that it doesn't look like the faces or colour are "made up".

Conclusion

Some people might look at this type of AI photo restoration as some form of “distortion of the truth”, but I'd argue that an old faded black & white photograph is not the truth, it's a degraded version of the best “truth” that could be captured at the time. Does an AI colourised photo represent a perfect reproduction of the true colour? no, but guess what—the world was never black & white either.

I've always felt very disconnected from the people and events shown in old black & white photographs—even when they were my own family members—I didn’t understand how big the disconnect was until I saw the work of Marina Amaral, especially her 'Faces of Auschwitz' project. Seeing those manually colourised photos made the events and people appear more real—which is extremely important given the events and people that they record.

I'm sure that these AI photo restoration tools will soon become part of the many online photo libraries (such as Google Photos, Amazon Photos, and Microsoft's OneDrive), and I hope they do, as that will mean they are available to the general public and hopefully no specialised knowledge will be required.

Feedback

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article17 My first JavaScript app https://onlyrss.org/posts/my-first-javascript-app.html Sat, 11 Jun 2022 06:30:00 GMT

Background

I started to build this website in January 2021 with the aim of teaching myself HTML, CSS, and JavaScript. It's now June 2022, and over the last few months I've been asking myself when I'm going to get around to JavaScript.

Three days ago, while I was halfway through a circuit training session in my home-gym, I realised that since starting circuit training (about a month ago) I'd been doing the same 6 exercises, and had not added anything new. I was getting stuck in a routine, and decided that I needed to change it up a bit.

Rather than create a new routine, or a selection of routines, I decided that it might be interesting if each circuit session included a random selection of exercises. Up to this point my circuit training had consisted of 6 exercises, repeated for 3 circuits. I decided to create a long list of exercises that were practical for my home-gym, and then pick 6 at random for each session. My rule would be simple, whatever was chosen for that session—I had to do—even if it was exercises I disliked (yes, burpees).

I could have just written the exercises down on bits of paper and picked them out of a hat, but I'm a nerd, so “complex solutions to trivial problems” is a mantra I live by. My first thought was to use Excel (where non-programming nerds do their data analysis), but then I realised that this was the excuse I needed to start learning JavaScript.

My starting point

Like most people writing code, I started with a Google search, i.e. how to pick random elements from an array. That search led me to this example on JSFiddle. The example shuffles an array of numbers, and then slices off the first "n" numbers from the array. It's this solution that forms the basis of the “app” that I ended up building.

The app

I really want to call it a “programme”, but I feel that doing so puts me in a certain age category, so I'm going to be cool and describe it as an “app”. It's very basic, you pick the number of exercises you want, and then hit the 'create new workout' button, at which point you're presented with your chosen number of exercises in the form of an ordered list.

To see the app in action, jump out of your RSS reader for a minute and visit the article page.

You can see my source code over at CodePen.

How it works

The first thing that happens is that the max value of the slider input control is set to the array size i.e. the total number of possible exercises. Once the button is pressed, the array order is randomised, and then the current slider value is grabbed (i.e. the number of exercises the user has chosen) and that number of exercises is read (in sequence) from the start of the randomised array. Any existing list items (exercises) are cleared from the front-end, and the new exercises are added to an ordered list and displayed to the user.

Planned improvements

  • Make the app available on a page by itself which is hidden from the usual website navigation.
  • Add the hidden page link to the PWA app shortcuts. (So I will be able to quickly open the app on my phone, and it will look like a full-page app.)
  • Add some rules to tweak the randomised output, e.g. if output includes ring tricep-dips, don't also include bench tricep-dips etc. Maybe using nested arrays?

What I learnt

During the 3 days I spent working on the app (a couple of hours each day), I learnt:

  • How to create a simple array
  • How to calculate the length of an array
  • How to get user input and set it as a variable
  • How to apply a variable to a HTML element's attribute
  • How to run a function on page load
  • How to pass an array into an Ordered List
  • That there's lots of different ways to randomise using JavaScript
  • That ring tricep-dips are really hard!

Feedback

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article16 Adding screenshots to your PWA install experience https://onlyrss.org/posts/adding-screenshots-to-your-pwa-install.html Sat, 04 Jun 2022 11:30:00 GMT

Background

During February 2022 OnlyRSS.org became a Progressive Web App (PWA). The plan wasn't really for anyone to install OnlyRSS on their mobile or desktop, it was for me to understand what was required to turn a website into a PWA—and the best way for me to understand that was to do it.

The Google Play and Apple App store are great places to discover new apps, and once you find an app that might be useful, you get to read a description and view some screenshots of the app before you decide to install. There is no convenient store for PWAs, so initial discoverability is still an issue. But, once a visitor does happen upon your PWA enabled website, and is prompted to install your PWA, there is now a solution for providing the visitor with screenshots and a description. And all that's required is a few new entries in the existing manifest file.

New Manifest file entries

Below you can see the required entries in the manifest file for the screenshots and description. Webp images are supported, so after capturing suitable screenshots, I'd recommend using a tool such as CompressOrDie and converting them to webp and compressing them as best you can (my images are all ≈40 KB each.)


            "screenshots":[
            {
              "src":"pwaicons/screenshot1.webp",
              "sizes": "485x1024",
              "type": "image/webp"
            },
            {
              "src":"pwaicons/screenshot2.webp",
              "sizes": "485x1024",
              "type": "image/webp"
            }
            ],
            "description": "Mark's blog of shower thoughts. Articles on productivity, Data Viz, HTML & CSS, software, hardware, and maybe even some fitness.",

Result

Once the new manifest entries have been added, when a visitor accesses your website on Chrome on Android (or Samsung Internet on Samsung devices,) in addition to being prompted to install your PWA, they will have the option to swipe-up on the install prompt and view your app description and screenshots [fig. 1]. The visitor can tap on the screenshots and view them full size.

Animated GIF showing the user expanding the PWA install prompt on a mobile phone, and then being presented with the PWA description, and 2 screenshots.
Improved PWA install prompt, showing description and screenshots on Chrome on Android.

Compatibility

According to mdn web docs, app screenshots are supported in:

  • Edge on Desktop (≥88),
  • Chrome on Android (≥88), and
  • Samsung Internet on mobile(≥15.0).

I've tested them on Android, where they work as advertised, but I had no luck getting them to work on Windows with Edge. I added additional screenshots to the manifest and set the 'platform' member to both 'wide', and 'windows', and neither resulted in the screenshots (or description) being visible. I've left those entries in my manifest file (in the hope that Edge/Chrome will support them in future,) they can be seen under the "screenshots" section of my manifest file.

Conclusions

Adding screenshots and a description to your PWA is yet one more step in moving your app away from being “just a website” and towards being an “application”. It's easy to implement, and improves the installation experience for Android (and Samsung) visitors on mobile. I also suspect that in future, these app screenshots and description will start to surface in web search results (alongside an install prompt), and maybe even in app stores 🤞.

Feedback

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article15 Automatically numbering figures using CSS counters https://onlyrss.org/posts/auto-numbering-of-figures-with-CSS-counters.html Mon, 30 May 2022 12:15:00 GMT

Background

For the first 13 years of my career I worked as a research scientist for the Defence Evaluation and Research Agency (DERA, an agency of the UK's MoD). I worked on 3–5 year projects covering a wide range of subjects. Even though the projects varied, they did all have one thing in common, i.e. one of the deliverables was always a report, and much like the infamous TPS reports from Office Space, the DERA reports also had to adhere to a strict format.

One of those strict formats related to numbering, not just numbering of chapters, but sections, paragraphs, figures, and list items. Depending on how the document was structured, it was not unusual to have a list item with a number such as 2.1.2.15. Don't get me wrong, this convention was actually useful, if you were on page 50 and wanted to reference an item on page 5, the numbering made a lot of sense.

As useful as numbering was for those DERA reports, it's not something I find myself missing when writing a blog post. But, I do still find myself numbering figures in blog posts, this is useful as I often reference the figures from within the body text.

Anyone who has written a long report that requires any form of numbering knows that it's not something you should attempt to do manually—it has to be automated—otherwise you'll find yourself updating all the following chapters/sections/paragraphs etc. each time you insert a new one into the middle of the document.

Solution

There's no solution for this in HTML/CSS that's as convenient as the numbering and cross-referencing that's part of Microsoft Word, but, there is a CSS solution that can at least handle the numbering part (but not the cross-referencing), and that solution is based on CSS Counters.

CSS Counters are, in essence, variables maintained by CSS whose values may be incremented or decremented by CSS rules that track how many times they're used.

Source: mdn web docs

To see a full description of CSS Counters and how they can be used, visit the CSS Counters page over at mdn web docs. The use of CSS Counters below deals only with counting figures and displaying that count within the figure's caption i.e. the figcaption HTML element.

Set the counter to zero

First, we define a counter called "figures", and we set it to zero (it defaults to zero when reset), this goes in the body CSS declaration:

body {counter-reset: figures;}

Increment the counter

Then, we increment the counter for each figcaption element that's in the page, this goes in the figcaption CSS declaration:

figcaption {counter-increment: figures;}

Display the current count

Lastly, we display the current count of figcaptions within the figcaption CSS declaration. We do this by using the ::before pseudo selector. We place the figcaption count between the text "Figure" and ".", so we end up with something like "Figure 5.":

figcaption::before {content: 'Figure ' counter(figures) '. ';}

Implementation example

The screenshots below show the CSS used on OnlyRSS.org to display figcaptions, and the HTML used to generate figures 1 & 2.

A screenshot showing the figcaption CSS used on onlyRSS.org
The CSS used on OnlyRSS.org to automatically number all figures.
A screenshot showing the figcaption HTML used to display figure 1 and figure 2.
The HTML used on this page to display figures 1 & 2.

You'll notice from figure 2 above that the figcaption HTML elements do NOT include the text "Figure 1." or "Figure 2.", yet they are both visible in the figures' captions (well, they are on the main website, if you are reading this in an RSS aggregator it's possible you can't see them either!)

Issues with this solution

Although the solution described above provides an easy method for automatically numbering figures within a page (actually, across all figures on a site that share the same style sheet,) it does have a couple of drawbacks:

Cross-referencing

One of the main reasons for numbering figures is so they can easily be referenced from within the article body e.g. "as you can see in figure 5". Although adding new figures into the article will not require you to manually update the figure numbers, you will still have to update any cross-references, as there's no link between the figure number and the cross-reference

Accessibility

Although this solution automatically adds "Figure #" in your figcaptions, it's important to note that anything added via the ::before or ::after pseudo selectors is NOT guaranteed to be available for reading aloud by screen readers (if you try and select the figcaption text above you'll notice that "Figure 1." cannot be selected.) But, I've read a couple of articles recently (here and here) that seem to suggest that the majority of popular screen readers do in fact read ::before and ::after elements, even though they are not part of the DOM.

Feedback

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article14 Loading images only when (or if) they are needed https://onlyrss.org/posts/loading-images-only-when-they-are-needed.html Mon, 4 Apr 2022 12:15:00 GMT

I recently created a subscribe page (which can be reached from the RSS link on the homepage). The aim was to create an easy way for users to copy the RSS feed URL (previously the link simply opened the RSS feed, which many users might have found confusing), and also gives some basic instructions on how to subscribe to OnlyRSS via two popular RSS aggregators i.e. Feedly and Inoreader. The Feedly and Inoreader instructions are both displayed as ordered lists, but I also wanted to include an animated GIF showing the subscription process for each app.

The problem

The problem I encountered was that each GIF was quite large (both in terms of page real estate and file size) and users who are already familiar with RSS probably wouldn't need to view the animations at all. In that sense, the animations are not essential to the page, but could be considered complementary to the ordered lists, furthermore, it's unlikely that a user would want to view the animation for both Feedly and Inoreader.

Loading both animations would not only be wasteful (in terms of page resources), but given the large vertical size of each image, the first image (for Feedly) would push the second image and instructions (for Inoreader) below the fold, where they could potentially be missed by users entirely.

What I wanted was to hide the animations from the user, and for the browser to hold-off downloading them until they were required (if at all). And I wanted this to be as seamless as possible i.e. I wanted to avoid modals and opening new tabs etc. And, of course, I wanted to avoid using JavaScript (because I don't know JavaScript.)

The solution

I've already used a non-JS method for hiding content until it's requested by the user on the Changelog page i.e. the <details> and <summary> HTML elements. So I decided to use these elements with the summary text of Show me how, which when clicked would display the contents of the <details> element i.e. the animated GIF. You can see this in action for a static image by clicking on the text below to display [fig. 1].

Click here to see Figure 1
Figure 1. The original Subscribe page (left) alongside the final Subscribe page (right).

This solved the problem of the Feedly animation pushing the Inoreader animation and instructions below the fold, but it didn't help with page performance, as both animations were still being loaded by the browser.

I'd previously used the image attribute loading="lazy" to improve page performance by letting the browser decide if an image needed to be loaded e.g. was the user close to scrolling to the part of the page that contained the image? I didn't expect this to influence images hidden within the <details> element—I was wrong. After applying loading="lazy" to both animations, they were no longer loaded by the browser until the user clicked on the summary text. This was exactly the solution I was after.

With this solution in place the subscribe page loads quickly—around 40ms—with all the content being above the fold, and the animations only loading if the user selects the relevant summary text.

Conclusions

The solution I've described above is probably suitable for instructional pages where the reader would only be interested in one of many options e.g. Those explanation pages that show you how to perform some complex tasks in Excel but give you four versions of the solution, one for each recent version of Excel. In that type of scenario, hiding and delaying the load of any associated images makes a lot of sense, it condenses the page (so it looks more appealing) and improves page performance.

As I've mentioned before, I'm not a dev, and I'm still new to HTML & CSS, so I might well look back on this post in a few months' time and cringe due to its naivety. There’re probably far easier methods to hiding (and delaying the loading of) images than what I've described above, but hey, we learn better from our mistakes, so if I do come across a better solution, I'm guessing I won't forget it :-)

]]> article13 Linking tables to their associated bar charts https://onlyrss.org/posts/linking-tables-to-bar-charts.html Sun, 6 Mar 2022 12:15:00 GMT

Stacked bar charts

For the purpose of this article I'm going to be using a real world example, specifically a stacked bar chart designed to show the number of aircraft of each type e.g 737-800, A320-200 etc. in an Airline's fleet, categorised by the aircraft status i.e. In Service, On Order, and Storage. This 'fleet breakdown by type and status' is essential when trying to understand the composition of an airline's fleet.

Figure 1. The fleet breakdown for American Airlines (as at 4 Mar 2022 - Source: Cirium Airline Profiles.)

Figure 1 above shows the Fleet breakdown for American Airlines. This chart enables us to:

  1. Determine the total aircraft of each type e.g. ≈300 737-800.
  2. Determine the relative difference in total aircraft between types e.g. ≈80 fewer A321-200 than 737-800.
  3. Determine the relative differences between statuses within a type e.g. More than ½ of the 737 Max are On Order.
  4. Easily compare the number of In Service aircraft across the different aircraft types.
  5. Compare (but not easily) the number of On Order and Storage aircraft across the different aircraft types.

The problem with stacked bar charts

The main problem with the list above is №5. Although it's possible to compare the number of On Order and Storage aircraft across the aircraft types, it's not easy to do this comparison well. The In Service category is on the far left i.e., it touches the chart's baseline, whereas the other statuses typically don't. For example, which aircraft type in Figure 1 includes the highest number of Storage aircraft? It's like trying to compare the height of individuals in a group when everyone is standing on a box of different height.

Possible solutions

Filtering

This stacked bar chart was taken from an online application that includes the ability to filter by status. So one solution is for the user to filter the data by the status of interest. e.g. On Order. This would make the chart far simpler (it would no longer be a "stacked" bar chart), and make a comparison of the number of On Order aircraft across the aircraft types very easy, but, you'd lose the context e.g., is the number of On Order large or small compared to the number of In Service?

Figure 2. The same fleet summary but filtered by On Order aircraft only.

Choosing a 'primary' status

Another option would be to allow the user to select which aircraft status is aligned to the baseline. What we're really asking the user to do in this scenario is to prioritise one of the aircraft statuses over the others, i.e. to select one of them as being of 'primary interest'. This isn't a typical request we make of users when asking them to interact with charts, there's no convention to ask users to "choose their most important category". But, there is with tables…sort of.

Often, when presented with a table of data, users will sort the column of data that's of most interest to them. There's no filtering going on (although previous research has shown that when users are asked to filter a dataset that's presented in a table, they will often sort a column, rather than actually apply a filter), so there's no loss of context.

For Cirium Airline Profiles (the product where the stacked bar chart above is used) each stacked bar chart has an associated table of data, and both the chart and table are always visible (initial mock-ups included options where the user could toggle between table and chart, but there was a strong user preference that both should be visible at the same time.) With table and chart always visible, it opened up the possibility for some linking between the two visualisations i.e. for some table interactions to directly affect the chart.

Linking a data table to its associated stacked bar chart

In the animation below in Figure 3, each table column header is selected in-turn by the user to be sorted i.e. Total, Storage, On Order, and In Service. When a specific status in the table has been sorted (or "prioritised" by the user), the stacked bar chart is adjusted accordingly i.e.:

  1. the sorted status is moved to the chart's baseline
  2. the bars are sorted to match the sort order chosen in the table
  3. the status category colour is emphasised (and the others de-emphasised)

    The result is essentially a bar chart within a stacked bar chart. It retains some of the simplicity of a "non-stacked" chart (as shown in Figure 2) while not throwing away the useful contextual data.

    The link between the table and chart is further emphasised by the fact that each bar in the chart aligns horizontally with its associated row in the data table (in Figure 3 below the chart and table are stacked vertically, this view is used on tablets and mobile, the desktop view has the visualisations side-by-side.)

    Figure 3. Table-sort choice, and it's effect on the linked stacked bar chart.

Conclusion

The solution described above, and which we implement on Cirium's Airline Profiles is not perfect (the colours specifically need to change), but I do feel that the solution does go some way to overcoming one of the issues with stacked bar charts. I wouldn't describe this feature as "essential", but I'd like to think that it's one of those "micro-interactions" that might bring a small moment of delight to some of our users.

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article12 Drop Caps and Indents https://onlyrss.org/posts/drop-caps-and-indents.html Mon, 17 Jan 2022 19:00:00 GMT

If you are reading this in an RSS reader, you might want to visit the actual blog, as the article refers to style elements that won't appear in your RSS reader.

All the best blogs tend to be written by experts, and also tend to keep to a specific field or topic. My blog does neither of those things. For example, this post is about separating paragraphs using CSS, I'm only just starting to learn CSS, and this is my first post dedicated to the subject. Some of what's included below was touched upon in my previous post, specifically the section dedicated to what I'd learnt while using CSS to build my Kindle mock-up.

Indents

While writing my Kindle post last week, it made me think about how paragraphs are typically distinguished from one another in print and on the web. That led me to look into how various paragraph spacing solutions can be implemented with CSS.

On the web, where an article is typically presented as one long page of text, essentially giving the author access to infinite vertical space, paragraphs are typically separated by some extra whitespace. But, in print, and on eReader devices, where content is presented on pages of fixed vertical height, paragraphs tend to be separated by simply indenting the first line. This results in more text on a single page when compared to adding whitespace.

Strictly speaking, this indentation is only necessary for paragraphs that directly follow other paragraphs. No indentation is required when a paragraph follows a heading, sub header, figure, blockquote, etc.

Luckily, there exists a CSS Selector specifically designed to target an element that directly follows another element, i.e. the "+" selector. And as we need to only target paragraphs that follow other paragraphs, we simply use:

p + p {text-indent: 2.3em;}

You'll notice that all the paragraphs above have an indent, with the exception of this paragraph (which follows a code block), and the first paragraph (which follows a heading), i.e. neither of these paragraphs directly follow another paragraph. The first paragraph does start with a 'drop cap' though, and that can be implemented via the "+" selector in CSS as well.

Drop Caps

I decided that I wanted to use a drop cap at the start of each new chapter, specifically the first letter of the first paragraph following each h2 heading. To target the first paragraph after the h2 heading, we simply use h2 + p. But, we don't want to apply the drop cap style to every letter in that paragraph, we only want to target the first letter. To do this we add the ::first-letter CSS Selector.

h2 + p::first-letter {

float: left;

font-size: 2.3rem;

line-height: 1;

margin: 0 0.1em 0 -0.1em;

padding: 0.1em;

}

That's all that's required, 2 little bits of CSS, neither of which you have to assign to any individual paragraph, and you end up with 3 different paragraph separators. i.e. indented, drop cap, and flush.

]]> article11 Why I prefer the Kindle https://onlyrss.org/posts/why-i-prefer-the-kindle.html Wed, 12 Jan 2022 19:00:00 GMT

If you are reading this in your RSS Reader, then well done, RSS is cool, and therefore, by extension, so are you!. But, much of this article won't make sense unless you visit the actual blog post, as much of the article is inside a mock-Kindle that I created with CSS.

I created this article for two reasons: I wanted to highlight some Kindle benefits that are often overlooked (probably because they are specific to me), and I wanted to attempt some CSS that was a bit more adventurous than my usual tweaks to font and paragraph styles.

My aim was to try and reproduce the Kindle Oasis reading experience as best I could (given my limited knowledge of CSS). The article is contained within the Kindle below. Use the Kindle's navigation buttons (on the right of the device) to page through the article. At the bottom of this page I've described what I learnt while creating my "mock-Kindle".

Background

I didn't used to read. Don't get me wrong, I had books, almost enough to fill a shelf (it was a mix of physics text books and a small but treasured collection of Calvin & Hobbes) but I wasn't "a reader". I didn't go to bed with a book, and picking up a book during the day was not part of my routine.

This all changed about 7 years ago when I made a deal with a colleague, if she watched the TV show Firefly, then I'd read a book that she had recommended. I read that book on a Kindle, and I have barely put the Kindle down since. I'm not saying that I only kept up the habit of reading because of the Kindle, but I'm not sure I would have carried on if I had to order books, wait for them to arrive, and then struggle to read them in the dark while the wife tried to go to sleep next to me.

The first device I bought was the Paperwhite, then I passed that onto the wife and I got a newer version of the Paperwhite, and a while later I bought an even newer generation Paperwhite, more recently I treated myself and upgraded to a Kindle Oasis.

benefits

1 - The dictionary

Unlike Donald Trump, I don't know all the words, so being able to press my fingertip on a word and see the definition is great. Even more useful than the dictionary is the etymology, I find that learning how a word came to be helps me to remember its definition.

2 - The backlight

I mostly read in bed, and unlike my wife, I don't fall asleep as soon as my head hits the pillow, so the backlight on the Kindle is essential for me. On the Oasis you have the added benefit of adjusting the colour temperature, and switching to dark mode.

3 - The clock!

Ok, this one might seem a bit silly, but as I read when I go to bed, it's useful for me to keep an eye on the time, otherwise I might find myself reading well into the small hours. Like many people these days I don't have a clock in the bedroom as I rely on my phone. Having the clock on the Kindle stops me periodically reaching for my phone.

4 - Saving quotes

Not so important when reading fiction (which represents about 80% of what I read), but when I do venture into the world of non-fiction, I often like to save quotes or other useful sections of text so I can easily find them again later. This is a feature of the Kindle that often gets overlooked.

5 - Kindle Unlimited

Kindle Unlimited in the UK costs £7.99 pm and includes more than 650,000 books that can be borrowed (up to 20 at a time). Of the 4 books I read per month, probably 2-3 of those I've borrowed via Kindle Unlimited, so for me it easily makes financial sense.

6 - Whisper sync

This is Amazon's name for the feature that lets you sync your reading progress across Kindle devices and Kindle apps. When I find myself in the car waiting for one of my kids to finish [insert name of activity that seems really important to them now but they will quit once they become a teenager here], then I'll often fire up the Kindle app on my phone, and start reading where I'd finished off the night before.

7 - Font size

Being a man of a "certain age", I'd recently noticed that my arms were no longer long enough to allow my eyes to focus on objects held in my hands. For a little while, increasing the font size on the Kindle allowed me to put off the inevitable purchase of reading glasses.

8 - Time left in chapter

You have some options when it comes to what's displayed in the page footer on the Kindle, you can choose from the following: nothing, page number, time left in chapter, time left in book, and loc (like page number, but is independent of your style choices e.g. font-size etc.). As I don't like to stop reading mid-chapter, the length of a chapter is a metric I use when determining whether or not I'll start a chapter.

9 - Ergonomics

You can only read one page at a time, but with physical books you are forced to always have 2 pages on display, so you're always holding something that is twice the size it actually needs to be.

There's also no distortion due to the page curving in towards the spine of the book (there's also no spine to break!).

10 - Dark mode

When it comes to dark mode on my PC and mobile apps I tend to leave it off. But, when it comes to the Kindle, I do prefer to turn dark mode on. As I read at night I always use the Kindle's backlight, and in dark mode, there's just less light being emitted. At the end of the day, it's the letters I want illuminated, not the background.

What I learnt

It's time to go back to formula

My CSS "skills" are far worse than I thought. I'm comfortable enough with the typical CSS required for defining the style of a typical article body (which is one of the main reasons why I started this blog), but when it comes to using CSS for layout, I really don't know what I'm doing. Creating the Kindle above with CSS was more the result of trial and error, than it was me actually knowing what I was doing. So I'll be looking out for some CSS layout tutorials in the near future.

Tabular numerals are not just for tables

Tabular (as opposed to proportional) numerals are numerals where each figure takes up the same width. i.e. 1111 takes up the same with as 0000. This is important in tables, where users are comparing values that are stacked vertically. Basically, you want the hundreds, tens, units etc. to all be aligned vertically (for more details see this article).

While creating the Kindle above, it occurred to me that tabular numerals should be used within body text when the numerical value can change dynamically. If tabular numerals are not used, then as the number changes value (and therefore also width), the proceeding content can shift horizontally, potentially leading to a word slipping onto the next line (OMG THE HORROR!!!). My case was a little less dramatic, and was related to the page number and percentage read indicators in the footer. Without tabular numerals, moving from page 1 to page 2 resulted in a small shift of the percentage read indicator. Not a big deal, but it taught me that tabular numerals are not just for tables. You can see this in action below, the top example uses non-tabular numerals (i.e. proportional), the bottom example uses tabular numerals.

example showing the movement associated when using non-tabular numerals

example showing the lack of movement when using non-tabular numerals

Separating paragraphs

This article made me think about how paragraphs are visually distinguished from one another. I'm a fan of some extra padding between paragraphs, but, while trying to make the Kindle text look as authentic as possible, I realised that most of the Kindle books I've read have no extra vertical space between paragraphs, but rather, they indent the first line of each paragraph (which makes sense I guess, as it doesn't waste any vertical space, which is important on devices such as eReaders). This is how paragraphs are separated in the "book" above.

This wasn't new to me obviously, but what I hadn't noticed was that when indentation is used, it's usually omitted for the first paragraph in a section/chapter (this also makes sense, there's no paragraph directly above from which to be separated, and if the chapter heading is left-aligned, then both heading and the start of the paragraph are nicely aligned along the left margin, and we humans like stuff that is nicely aligned).

At first I thought I would have to create a new paragraph class in CSS specifically for the first paragraph of each section (that removed the default paragraph indent), and then add the class manually, but it turns out that CSS has an easy solution for this.

p + p { text-indent: 1.5em; }

The "+" above means that the style (the text-indent in this example) is only applied to paragraphs directly proceeding other paragraphs.

Conversely, if you wanted to apply a specific style to the first paragraph only, i.e. the paragraph directly proceeding a heading e.g. Heading 1, then the CSS selector would be:

h1 + p { ... }

Using the :target selector to show hidden content

I haven't started to learn JavaScript (JS) yet, and as the purpose of this blog is for me to learn some basic web dev, it shouldn't (yet) include any JS. Unfortunately, the page navigation used above for the Kindle requires JS,...sort of.

I did manage to create a version of the Kindle with working navigation that didn't require any JS, instead it took advantage of the :target pseudo selector in CSS, usually this is used to move the user to a specific section of a page after clicking on a link or button (e.g. creating a clickable Table of Contents). But, it can be used to selectively show page elements that are otherwise hidden.

My non-JS version does work, but, it suffers from an unwanted "side-effect" (well, unwanted for my specific use case) i.e. it moves the page to the specific section (which is what it's meant to do!). You can see this in action when you select one of the nav buttons in the CodePen below (you also have to click on the start link first). So in the end I decided to create this page using JS, even though I had to ask a friend to provide the required JS.

My non-JS implementation can be seen in the following CodePen. But you'll find a better description of how to use the :target selector to show hidden contents here.

See the Pen Only RSS - Kindle (No JS) by mark evans (@dbssticky) on CodePen.

]]> article10 Tops of 2021 Wed, 29 Dec 2021 17:25:00 GMT

There's no web article associated with this RSS entry. This post exists in the RSS feed only. If you're reading this, you are a member of a very, very, small club.

Every year a group of friends and I exchange our 'Top's of the year'. Here's my list for 2021.

Movies (first watched during 2021)

  • Promising Young Woman
  • Captain Fantastic
  • Nobody
  • Predestination
  • The Invisible Man
  • The Dig
  • Whiplash
  • Molly's Game
  • Pride
  • Greenland

Podcasts

  • Daily Tech News Show
  • Tech's Message
  • Kermode and Mayo's Film Review
  • More or Less: Behind the Stats
  • Full Fact

TV Shows

  • The Expanse
  • Arcane
  • Bosch
  • Star Trek: Voyager
  • Mare of Easttown
  • Ted Lasso
  • Squid Game
  • Invincible
  • Catastrophe
  • Foundation

Books (books I rated 5 stars on Goodreads)

  • Project Hail Mary
  • Shadows of the Fall (Shadow of Terra, #2)
  • Fundamentals of Data Visualization: A Primer on Making Informative and Compelling Figures
  • The Visual Display of Quantitative Information
  • Exile (Trilogy)
  • Heaven's River (Bobiverse, #4)
  • Flight of the Javelin (Trilogy)
  • Asylum
  • Saga (Trilogy)
  • House of Suns
  • The Divide (2 books)
  • The Code (2 books)
  • The Palladium Wars (Trilogy)
]]> article9 Why every Product Manager should build a website https://onlyrss.org/posts/why-every-product-manager-should-build-a-website.html Sun, 18 Apr 2021 17:00:00 GMT

I've used very specific wording in the title of this post. The key word in the title is build, I specifically don't state that every product manager should have a website, or write a blog, I don't even think it's that important if Product Managers actually publish the website's they build, but I do believe that all Product Managers (ok, not all, only those who are responsible for online products) should go through the process of building a website. Why? well, like many of my suggestions, it all comes back to Ben Franklin (or maybe Confucius) and the following quote:

“Tell me, and I will listen; Teach me, and I’ll remember; Involve me, and I will learn.” — Benjamin Franklin

The reason I like this quote so much, (and refer to it so often) is because I really believe it. It's the reason this website exists, I wanted to learn HTML, CSS, and JavaScript. I didn't start with a book or a course...I started by building a page. This meant I made a lot of mistakes initially, mistakes I wouldn't have made if I'd started with a book, but I find that mistakes are hard to forget, whereas it's easy to forget some instructions in a book that tell you how something should be done.

OK, but what does this have to do Product Managers building websites? To help answer this question, I'd propose a small tweak to the above quote i.e.

“Tell me, and I will listen; Teach me, and I’ll remember; Involve me, and I will understand and appreciate.” — Mark Evans

Learning something new is great, and I've really enjoyed learning how to build this website, but, it's also had a couple of side effects:

  1. I have a much better understanding of what my development team does.
  2. I have a much better appreciation for what my development team does.

Before I go any further, let me make one thing clear, I am not in any way comparing my tiny blog to the products that my developers build. This website, and the products I manage, are so far apart in scale and complexity that it would be laughable to even attempt to compare the two.

Understanding & Appreciation

Without a data team (to source, qualify, cleanse etc.) and a development team (to build the tools that allow users to easily access the data) my role would be utterly redundant, I'd literally have no products to manage, sales would have no products to sell, and marketing would have no products to promote. So, I've always had a strong sense of appreciation for both of these teams. But, building my little hand crafted website (with just HTML and CSS...so no actual programming) over the last few months has only increased my appreciation for what my developers do. Even my meagre website, with its 7 pages has required quite a lot of effort to create and maintain. For example, I've:

  • Moved from using CodePen to VSCode.
  • Gone through a retagging exercise to ensure that article specific HTML5 tags are used e.g. <article>, <section> etc..
  • Refactored the website's folder structure, as I realised my initial structure wasn't scalable.
  • Moved the source files from my local PC to GitHub.
  • Updated my version of Git due to a recent security vulnerability.

The important thing to note about the list above, is that none of that effort has resulted in any changes that are visible to someone visiting the website. Now, if all that has been required for my little website, imagine the size and quantity of "unseen" tasks that are required for a global data product built with numerous dependencies, strict security and privacy requirements, multiple databases, complex access and entitlement systems, and multiple frameworks etc.

So, stop reading about building websites, and pop over to CodePen and start building one 😊.

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article8 My indoor rowing tips after 15 million meters https://onlyrss.org/posts/my-rowing-tips-after-15-million-meters.html Fri, 9 Apr 2021 16:00:00 GMT

Background

I bought my Concept 2 Model C rower in 2001, my plan (like most people who buy exercise equipment) was to use it every week. And, like most people, I failed. I used the rower sporadically for a while, and then I moved house, and it just sat there in my new home, gathering dust. I'd get the urge to start using it again (yes...January) and as usual, it didn't last. I've always done some form of exercise, either in the gym or running, and have had some long periods of running every week, but I don't think I've ever exercised consistently every week for a period longer than a year.

2014 - New Year's day

This all changed when I hit 40. My daily routine was basically, driving to work, sitting at my desk for 8hrs, driving home, making the family dinner, and then sitting in front of the TV with the wife for an hour or so before bed. This was not exactly an active lifestyle. So I made a New Year's resolution to row at least 30km every week (4x5km, 1x10km). I used Excel and made a big table where each row was a week, and each column was 5km (it had 10 columns, so 50km). I printed the table on A3 paper, and stuck it up on the wall in the garage right next to the rowing machine. The aim was simple, "don't break the streak", the longer I could hit 30km each week, the less likely I would be to miss a week, because I'd "break the streak". I had to start off slowly, but by week 3 I was up to 30km, and with the exception of a few weeks (house move, and a work trip to NYC) I hit my target.

The table was not the thing that kept me going, 30km per week on the rower meant about 2 1/4 hrs of my time, and just rowing can be boring. To help alleviate the boredom I attached my iPad to the rower, got some sports headphones, and started watching Star Trek (original) from the very beginning. Exercise time was now also Star Trek time!. When I got to the end of Star Trek, I watched Stargate SG1, all 10 seasons, and then Atlantis, and then...you get the idea. I watched TV that I would look forward to. During September I hit 1,000,000 meters, and as I'd been logging my rows in the Concept 2 online log book, I qualified for my free 1 million meter t-shirt and badge.

Here's an image of the initial simple setup:

And here's the chart for my first year:

2015

2015 carried on much like 2014, 30km per week (this time I didn't miss any weeks). I hit 2 million meters in May (you don't get any freebies for 2 million) and I also rowed my first 20km. I did my first 1/2 Marathon in July, and then my 2nd in December, when I also hit 3 million meters.

2016 - This is the year when I realised I had been lazy

There were three things that happened in 2016 that made me realise that I needed to up my game:

  1. I set a New Year's resolution to row a Marathon by the end of the year.
  2. I read Row Daily, Breathe Deeper, Live Better: A Guide to Moderate Exercise.
  3. A friend of mine casually mentioned that she swam for an hour each day.

2016 started well, with my 3rd 1/2 Marathon in January, but by week 6 my long running streak was broken due to a case of "man-flu" that lasted more than 2 weeks. There followed another couple of 1/2 Marathons during the year. But, it was points 2) and 3) that eventually led me to reassess my rowing goal of 30km per week, and this happened in August.

I was already doing a lot of what was discussed in "Row Daily, Breathe Deeper, Live Better: A Guide to Moderate Exercise", but it was only when I got to the chapter on case studies that it suddenly occurred to me that the book was targeted at old people (ok, at this time I was 43...but I mean really old people, as in 60+). All the case studies were of people in their 60s and 70s. So, here was me thinking that my 30km per week was pretty good, and here's this book encouraging people in their 70s to row 70km per week! Combined with my friend doing an hour swim every day, I realised that it was time to up my game. So, during August I set a new goal of 70km per week (typically 7x10km). I rowed my first Marathon in November (3hr12m53.6s, 2:17/500m,), and hit 5 million meters in the first week of January (finally...a new t-shirt and badge).

Setting challenges - 100km in a day

Each year I try and set a new rowing challenge, this is typically something like "row a Marathon this year", or "beat my 10km time", but during 2017 I set myself the challenge of rowing 100km in a day, I started around 8am and rowed 10km, then had a 30min break, followed by another 10km, and so on, unfortunately after 80km I had some serious knee pain, so had to stop.

During late 2020 I was approaching the 15 million meter mark, so decided to attempt the '100km in a day' challenge again, but I timed it such that I'd hit the 15 million meters during the 100km attempt. I started around 8am, finished around 11pm, and spent around 9hrs on the rower in total. This time there were no knee issues, I'd done it! and I swore to never do it again, it was probably the hardest physical activity I'd ever done. Rowing 10x10km in a day requires similar effort to running 10x10km in a day (ok, maybe about 80% when compared to running). Note: Two ladies in France each managed to row 100km per day, every day, for a month! That's more than 3 million meters in a month (it typically takes me around 2 years to row 3 million meters). When setting goals, don't worry about what other people are doing (it's a big world with a lot of talented people), if you do it will only demotivate you. Your goals should be personal to you.

Concept 2 setup, maintenance, and upgrades

My rowing setup has evolved over the years to the point where I'm quite happy with the current configuration, which includes:

  • A dedicated wall mounted TV
  • An Ethernet connected Amazon Fire TV stick (you don't want to be dealing with Wi-Fi issues 1/2 way through your row)
  • An Amazon Echo (for audio and voice control of the TV).
  • A wall chart for marking off each row.

Here's the current setup:

At the end of this Summer (2021) my Concept 2 will be 20 years old. Concept 2s are built to survive the harsh environment of commercial gyms, if you buy one for home use, they should last forever and require very little maintenance (they also hold their value well, during the pandemic my rower was still worth about 80% of what I paid for it!). Most of the changes I've made to mine have not actually been required, here's how I've maintained and upgraded it over the last 20 years:

  • After each row, I clean the main rail with glass cleaner (as the seat rollers collect gunk).
  • Every month I oil the chain, nothing fancy, just some basic 3-in-1.
  • Every year I give the main flywheel enclosure a vac to get rid of the dust.
  • Every year or so I replace the batteries in the Performance Monitor (PM). Not because they are flat, but to reduce the chance of them leaking and killing the PM.
  • Every 3 million meters or so I replace the seat rollers, they cost around £28.
  • I upgraded the handle from the original Model C version to the version that ships with the Model D and E. There was nothing wrong with the original handle, I just wanted to use the latest version.
  • I upgraded the PM from the PM2+ that it originally came with, to the latest PM5. Again, this was not really necessary as the PM2+ was working just fine, but, I wanted to link the PM to a phone, so I could automatically log all my rows with the Concept 2 online logbook (I'd been adding them manually up to this point). The PM5 is quite expensive (£155), but, I got £90 for my PM2+ on eBay, so the upgrade only set me back £65.
  • I few years ago I bought a replacement bungie cord (the part that pulls back on the handle), but I've not got around to fitting it yet.

My tips for anyone who's new to indoor rowing

  • There's nothing harder than getting home from work, and then dragging your arse back out again to go to a gym. If you can, buy a rower, Concept 2s hold their value really well, if it turns out that rowing is not for you, just sell it.
  • Set a goal, print out a table/chart, and mark off each row, start a streak, and try to keep it going.
  • Attach a tablet to the rower, or set up a TV and watch some sci-fi (other genres are acceptable), or listen to podcasts or audio books, but do something that will keep your mind occupied.
  • Put some padding on the seat, those things are not meant for long rows!
  • Log your rows with the Concept 2 Logbook, the rewards might not be much, but I wear my t-shirt with pride.
  • Sign up to the Concept 2 forum, it's a good place to get answers to any rowing or Concept 2 related questions.

Conclusion

Rowing is now part of my lifestyle, it's fully integrated into my daily routine. I'm not trying to break records (obviously, I'm watching TV at the same time), but I am trying to make up for the 8hrs a day I spend sitting at a desk, and to be honest, 10km per day is probably only just managing that.

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article7 Chart Picker https://onlyrss.org/posts/chart-picker.html Sun, 28 Mar 2021 11:00:00 GMT

Background

Whether you work in data science, data analytics, finance, strategy, user experience, sales, marketing, or product, at some point you will be creating data visualisations, either for use externally (in your products and on social media), or internally (in your presentations and reports). As an employee of an information and analytics company, it’s important that the visualisations I choose reflect the same high standard as the underlying data, or at the very least, don’t misrepresent the data.

As a product manager, I’ve used a variety of tools over the years to create mock-ups. Some tools output high-fidelity designs, but typically I’m dealing with high-level concepts that need to be created quickly and updated often (based on user feedback). For these scenarios, I’ve recently started using a free and open-source tool called Excalidraw (see my blog post about Drawing with Excalidraw).

During early 2021 I was managing the rebuild of one of my company's analytics tools, and the new version required the extensive use of charts in order to visualise a wide variety of data, as usual, I turned to Excalidraw to create the initial mock-ups. Before I knew it, I had amassed a large number of basic chart types, so I turned these into an Excalidraw library and added my library to the project in GitHub. You can download my library here (title: 'Data Viz', author: '@dbs-sticky').

I then decided to take my library of charts and generate a “chart picker” diagram. I based this off an existing concept developed by Dr. Andrew Abela from ExtremePresentations (anyone interested in charting is probably already familiar with this classic version). I made some changes to Dr. Abela's design, mostly around the Distribution section which I have expanded with more options. My diagram is designed to help you choose a chart based on your data, and what you are trying to convey to the user. My initial aim for creating this chart picker was to share it with my colleagues, I've since shared it publicly, and have now made it available on GitHub for anyone to use or to improve upon.

Chart Picker links

Chart Picker screenshot

This is a zoomed in view of the distribution section of the chart picker.

A snippet of the 'Chart Picker'

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article6 What is RSS and what are 'aggregators'? https://onlyrss.org/posts/rss-part-1.html Sun, 7 Mar 2021 16:00:00 GMT

What is RSS?

RSS (Really Simple Syndication) is a web feed that allows users and applications to access updates to websites in a standardised, computer-readable format. These feeds can, for example, allow you to keep track of many (potentially, hundreds) different websites in a single news aggregator.

Below you can see an example of the contents of an RSS feed. It's simply a channel (e.g. your favourite news site), followed by a list of articles. Users of RSS never actually look at the feed (in the same way that you never see all the metadata associated with each e-mail you receive), it's not meant for people, it's meant for machines, i.e. the RSS aggregators.


        <channel>
        <title>OnlyRSS</title>
        <link>https://onlyrss.org</link>
        <description>The latest posts from OnlyRSS.org</description>
            <item>
                <title>Drawing with Excalidraw</title>
                <link>https://onlyrss.org/drawing-with-excalidraw</link>
                <description>Excalidraw is described by its creators...</description>
            </item>
            <item>
                <title>Working from home hardware</title>
                <link>https://onlyrss.org/working-from-home-hardware</link>
                <description>I recently wrote about my weekday lockdown...</description>
            </item>
        </channel>

RSS aggregators

An RSS aggregator is similar to an e-mail client, but rather than e-mails, it aggregates articles. And like e-mail applications, some RSS aggregators are desktop apps, and others are online applications. Feedly and Inoreader are two popular online versions and both have similar capabilities.

Here's how the example above could appear in an RSS aggregator. It doesn't have to appear like this, for example, you could choose to view a list of just the titles, or you could select to step through each article in turn (no different to the options you would get in any decent e-mail client).

It's not just articles

For simplicity, so far I've only discussed articles, but RSS aggregators can do more than just show you the latest news. Below is a list of the various types of content that you can aggregate:

  • Articles
  • Blog posts
  • Forum posts
  • Videos e.g. YouTube
  • Keyword search alerts e.g. Google\Bing etc.
  • Newsletters
  • Daily weather reports
  • Podcasts
  • Updates to documents e.g. Wikipedia, Confluence etc.
  • Status changes e.g. parcel tracking, Jira tickets etc.
  • Price alerts e.g. CamelCamelCamel etc.

...and it's not just aggregation

The basic requirement of an RSS aggregator is that it aggregates content via RSS feeds. But, much like e-mail clients, RSS aggregators tend to offer more than just this basic capability. In addition to aggregating content, RSS aggregators can offer other benefits, e.g.:

  • Searching for feeds (so you don't have to hunt down the feed at the source website)
  • Keyword search results e.g. allowing you to see all new Google results for a keyword search
  • Deduplication i.e. remove or bundle together articles with similar content
  • Prioritise content e.g. highlight all content that includes a certain keyword, or from a specific source.
  • Mute content e.g. hide all content that contains a certain keyword or phrase like "Game of Thrones finale"
  • Store all read content and index for search
  • Tag content to be 'read later'
  • Tag content as 'favourite'
  • Group content into folders, or apply categories e.g. UX, DataViz, etc.
  • Highlight sections of content and add notes
  • Share content e.g. directly to social networks, as an e-mail newsletter, or even an RSS feed!

Summary

Hopefully I've managed to explain what RSS is, and also to convey some of the benefits of using an RSS aggregator. My original plan for this article was to also describe in detail how I use an RSS aggregator (specifically Feedly) to keep on top of my various interests, but I didn't want anyone reading this article to be overwhelmed and to lose sight of the one key takeaway i.e. RSS is a powerful tool for keeping on top of online content, and keeping your knowledge up to date.

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).

]]> article5 Drawing with Excalidraw https://onlyrss.org/posts/drawing-with-excalidraw.html Wed, 3 Mar 2021 20:00:00 GMT

Excaliwhatnow?

Excalidraw is described by its creators as a "Virtual whiteboard for sketching hand-drawn like diagrams". I'd describe it slightly differently, I think I'd go with "a drawing tool that's so easy to use that you spend your time making sure the drawing is effective, rather than 'pixel-fiddling'".

Excalidraw is great for quickly creating diagrams (you can see lots of great examples on the bottom of this page), but it can be used for "sketch" style drawings, like the drawing below of my rowing setup.

click to view full size

Some of Excalidraw's features:

  • runs in the browser
  • supports real-time collaboration
  • supports multiple export formats
  • is secure (end-to-end encrypted)
  • is vector based (so scales to all sizes)
  • is very easy to learn (no "learning" required)
  • is open source
  • is free to use

How I use it

As a Product Manager, I'm often having to define what apps look like, how they're structured, what components they include etc. and I used to do this using hi-fidelity mock-up tools such as AxureRP (or even Adobe illustrator!). And to be honest, I wasted a lot of time obsessing over the size, colour and exact location of various page components. Once my company got serious about UX and started embedding dedicated UX resource within our squads, then it was no longer my responsibility to make my mock-ups pixel perfect.

This is where Excalidraw really shines (it's hard to be pixel perfect when there are no straight lines!), as its focus is on a "hand-drawn" aesthetic, it lends itself well towards the creation of "quick-and-dirty" sketches where the focus is to portray an idea or concept, rather than to represent a final pixel perfect design. Sketches can be created and altered quickly, and all from within a browser (important for those of us who work for large corporations and don't have the admin rights required to install apps on our PCs).

The mock-up below of a news search page took about 15mins to produce, but the sketch does highlight quite a few important features about the search page concept.

click to view full size

In addition to using it at work for mock-ups, it's also my "go-to" drawing app for this blog, as you can see in my post about my lockdown days.

Libraries make creating diagrams even quicker

As I've mentioned, one of the benefits of Excalidarw is the speed, but the existinace of a small (but growing) community of users who share their Libraries makes it even faster to create diagrams.

Conclusions

I really can't recommend Excalidraw strongly enough, it's a great tool, built and maintained by a group of enthusiastic developers who are actively engaging with their users. But, the only way to see how good it really is, is to go and sketch something :-)

If you have any comments on this article, then please reply to the tweet below:

]]> article4 Working from home hardware https://onlyrss.org/posts/working-from-home-hardware.html Thu, 18 Feb 2021 08:00:00 GMT

I recently wrote about my weekday lockdown routine. In this article I'll be describing the hardware I use to do my job while working from home. As a Product Manager for a suite of News and Data Analytics products, I use the tools that most office workers are familiar with, i.e. Office 365 apps, but I'm also often sketching UIs, writing requirements in Confluence, or using tools such as PowerBI etc. to analyse and visualise large datasets.

My PC is located in a bay window at one end of my kitchen diner, it's used by the whole family, and is always on. When I'm working from home I use my work laptop via a docking station and a keyboard\mouse switch, switching between work and home computers only requires the push of a couple of buttons.

The setup

Here's my WFH components:

  • 2 x Dell U2715H monitors (27" 2560x1440)
  • Logitech C920 HD webcam
  • Logitech MX Master mouse
  • TerraMaster F2-421 NAS (2x4GB raid 1)
  • Keychron K2 keyboard (with Red switches)
  • Ikea Bekant desk (160x80cm)
  • Dell D6000 Universal dock*
  • Dell Latitude 7490 laptop*
  • Plantronics C520 headset*

*provided by employer

The setup is connected to a 300Mbps (down) and 40Mbps (up) Broadband connection (g.fast) via Gigabit Ethernet.

article4figure1

Outputs

Monitors

If you are using a laptop when WFH and have NOT got it connected to an external monitor, for the love of God please just stop right now, go on Amazon, buy a new monitor (or two) and do not return to your laptop until after the new monitor arrives. There are lots of good ways to save money in life, not buying a decent monitor is not one of them! You are staring at your monitor for more than 8hrs a day, this is not a component where you want to cut corners and 'make-do'. Your employer should provide you with a suitable monitor, or reimburse you if you buy your own. If your employer does not believe a good monitor is worthwhile, then hold off on ordering a new monitor from Amazon, as your highest priority is finding a new employer.

When deciding which monitor to choose, I'd suggest that anything with a resolution of 2560x1440px. A width of 2560px means you can have 2 apps of 1280px side-by-side, and most apps run well at 1280px. Your laptop display can be reserved for your more "reference" style apps, e.g. calendar, chat application, etc., while your main display is reserved for the apps required for your current task.

Speakers

My family don't need to hear what others are saying during my conference calls, so I use a wired headset. I know many people use Bluetooth headphones, and as good as modern Bluetooth is, I still find it less hassle to use a wire (wired headphones don't suddenly decide to connect to other devices when you're about to join a conference call).

Inputs

Mice

Again, not a component where you want to make compromises. I'd recommend any of the Logitech mice in the MX Master series. They're geared towards productivity, and include enough useful features to make them good value for money. You don't have to get the latest version (the MX Master 3 retails for almost £100), the original version is often heavily discounted and sometimes dips below £50 (view price history).

Keyboard

Whereas the benefit of a good monitor and mouse are clear, the return on investment of a good quality keyboard is less clear. Keyboards come in 2 main flavours:

  1. The 'rubber dome' keyboards that you'll find on almost all office desks across the World, and the
  2. 'mechanical' keyboards that you'll find on the desk of any discerning journalist, developer, or gamer.*

*and maybe on the desks of very discerning Product Managers :-)

'Mechanical' and 'rubber dome' here refer to the type of switches used for each key to register the key's actuation. You can buy a good 'rubber dome' keyboard for less than £20. To get a good mechanical keyboard you're looking at at least £50, with serious mechanical keyboard enthusiasts (yes, it's a whole thing) spending £100+ on the keyboard itself, and then another £50+ on the keycaps (yes, that's also a whole thing). I have a mechanical keyboard on my desk, but I'm not recommending anyone goes out and buys a mechanical keyboard. I'd definitely put this component in the 'nice to have' bucket.

Webcam

My wife and I both have the Logitech C920, this has been the 'go to' HD webcam for streamers for many years now. When I bought mine back in 2018 I paid just £35...today they cost closer to £100. You can see how the price has changed for this particular webcam since February 2020.

article4image2

Before spending money on a price inflated HD webcam, the first thing to try is to improve your lighting. There's no point having a good quality camera if you have a south facing window directly behind you. Shut the blinds, and pick up some LED lighting that can be mounted on top of the monitor. Maybe then consider a good webcam (after supply has caught up with demand).

Microphone

As I mentioned above, I use a headset, and it's not just becasue of Bluetooth issues. The best way to avoid background noise during conference calls is to use a dedicated headset with a mic, the mic is located right next to your mouth, and is unlikely to pick up other sounds from within your home. Bluetooth ear buds are great when you're out and about, or going for a run, and they are OK for the occasional call, but, if you are working from home on a regular basis, then you don't need to compromise. Get a dedicated wired headset, the other people on your call will thank you.

Other

Ethernet

I was lucky enough to wire up the house with Ethernet (CAT6) in January 2020, just before the whole COVID-19 thing kicked off. At home I have number of bandwidth hungry stationary devices i.e. 3 TVs, 2 desktop PCs, and a NAS. I also have a laptop (permanently on a desk), a Chromebook (that get's moved around a lot) and a very large number of IoT devices. As good as modern Wi-Fi is, it just doesn't have the same level of consistency that you get from Ethernet cable, and when you have 4 people potentially all on video calls at the same time, consistency is what you want. If it is at all practical, I would strongly recommend wiring up your home for Ethernet.

Conclusions

I realise that my setup might be considered 'overkill', but my thinking is simple, I'm spending >8hrs per day sitting at that desk, staring at those screens, tapping on that keyboard and shifting around that mouse, therefore it's worth putting some thought (and some money) into those components.

]]> article3 Anatomy of a lockdown weekday https://onlyrss.org/posts/anatomy-of-a-lockdown-day.html Sun, 07 Feb 2021 15:23:00 GMT Prior to lockdown

Prior to lockdown, I used to work from 4 different locations:

  • Bishopsgate (round trip commute ≈ 3hrs, car, train, tube, walk)
  • Heathrow (round trip commute ≈ 2hrs, car)
  • Sutton (round trip commute ≈ 2.5-3.5hrs, car)
  • Home (0hrs)

My start time each day was dependent upon which office I was working from, the earliest being when I was working from Sutton. To avoid the M25 traffic, I'd wake at 5:30am, leave home at 5:50am and arrive at the office around 7am.

During a typical week, I was spending around 11hrs simply travelling to and from my place of work. And when I arrived at work, I was typically sitting at a desk in front of a laptop.....a laptop that I'd just carried with me from home.

In a typical week I'd work from each of the 4 locations at least once, so there was no real sense of a fixed routine.

During lockdown

During March 2020, when all employees in the UK were asked to work from home (if practical), this all changed. Being a Product Manager who was often in a different location as the teams I needed to work with e.g. Tech, Sales, Marketing, Data Science, Data engineering, etc., I was used to "remote working", even when that meant being in one office, and connecting with teams in a different office.

I'd also got into the habit of working from home at least once a week (usually when I had to focus on a task). So shifting to working from home full-time was not a big deal, and in many ways it was preferable (for a start, I was saving 11hrs by not travelling).

A new routine

After a few months of working from home, I'd found that my weekdays had settled into a repeating pattern that included: reading, working, eating, exercise, and TV. This is shown in the sketch below:

article3figure1

I'd start the day by getting up around 7am (I struggle to sleep past 6am to be honest) and would read my Kindle for around an hour, then I'd start work around 8:30am. First thing I would do is check the news from the previous night via Feedly (I subscribe to around 120 feeds). I'd often have a small lunch at 11:30am while at my desk, and then I'd either go for a 5km run or walk at midday (while listening to podcasts). Right after my lunch\exercise break I'd check Feedly again, and then get back to work. At the end of the workday (around 5pm) I'd check Feedly one last time, and then I'd be thinking about what to cook the family for dinner (we eat at 6pm, which I guess is earlier than most).

After dinner I'd read again, and then it would be time for my second exercise session of the day, typically a 10km row on the Concept 2 which I'd combine with watching TV. After that I'd settle in front of the TV with the wife and we'd watch a show that we both enjoy (so not the sci-fi I'd typically watch while I row). At around 10pm I'd be off to bed, but would typically read again for up to an hour.

Reading

I read around 45 books per year, mostly fiction, and mostly space operas, although recently I've started to read more non-fiction. I'd always struggled to read non-fiction, until I started reading in the mornings, I find that reading non-fiction in the morning, and fiction in the evenings really suits me, so it's something I'm planning to continue. Follow me via Goodreads.

Exercise

I exercise for 2hrs per day. On the face of it this might seem like a lot, its not. When you consider that I'm basically not moving for the other 22hrs (sleeping or at my desk) then moving for 2hrs each day actually doesn't feel like it's enough. And I think this is one of the most important things I've learnt from working from home for almost a year. I no longer walk to the train, or from the tube to the office, or around the office, or go outside to buy my lunch. The only exercise I now do is via planned exercise sessions i.e. walking, running, or rowing. Apart from those activities, there's very little else I do that's burning calories. For this reason I'd suggest that 2hrs of exercise each day is probably a minimum for anyone who's working from home 5 days a week. Follow me via Strava.

Conclusion

I don't know what's going to happen once this pandemic is over. There's a lot of discussion about us never returning to the previous office routines, and I'm all in favour of not going back to the old ways. Working from home suits me, and to be honest, I think it suits employers, as I think most employees are more productive (not to mention the costs my employer must be saving on office space and reduced travel).

What is OnlyRSS?

OnlyRSS is a collection of articles that exist only in the RSS feed itself. There's no CMS used for article creation\storage, and there's no website where articles can be viewed, the articles can only be viewed in RSS Aggregators such as Feedly and Inoreader. If you have any comments on this article, or any questions about OnlyRSS, then please ask me (Mark Evans) via Twitter.

]]> article2 Using Virtual Desktops in Windows 10 https://onlyrss.org/posts/using-virtual-desktops-in-windows-10.html Sat, 06 Feb 2021 15:00:00 GMT A typical day

On any typical workday I might have the following applications open on my PC:

Tasks (Outlook for Web), Agenda (Outlook for Web), Email (Outlook for Web), MS Teams (chats and meetings), Journal (Excel, where I document my activities), WhatsApp (non-work chat), Signal (non-work chat), Feedly (news aggregator), BBC.co.uk (news), Confluence (User Stories), JIRA (backlog), Word, Excel, PowerPoint, Adobe Analytics (product analytics),Tableau (product analytics), Axure or Excalidraw (prototyping & sketching).

In turns out that these applications fit quite nicely into groups, where each group is based around different tasks:

  1. Plan, record, and communicate (Tasks, Agenda, Email, MS Teams, Journal)
  2. Taking a break (WhatsApp, Signal, Feedly, BBC News)
  3. Monthly reporting (Tableau, Adobe Analytics, Excel)
  4. User Story creation (Confluence, JIRA, Axure or Excalidraw)

1 & 2 are 'reference tasks', I need these open all day as I'll check them frequently, 3 & 4 are examples of 'focused tasks', this is where I'd spend the majority of my day (I'd typically never have more than 2 of these on the go at the same time). Each of the above task groups is mutually exclusive. I'm either drafting my monthly report or taking a break, I'm not documenting a User Story while also communicating with a colleague via MS Teams. Many of the apps within each task group benefits from being visible at the same time e.g. when I'm planning my day it's good to see my task list and agenda side-by-side, when I'm checking to see who is trying to contact me, it's good to see emails and MS Teams open at the same time. Taking the above into account, you end up with the following basic requirements:

  1. The ability to group multiple apps together (by task). i.e. form 'task groups'.
  2. The ability to view apps side-by-side within the task groups.
  3. The ability to only view one task group at a time.
  4. The ability to quickly switch between task groups.
  5. The Windows Taskbar is poorly named.

The Windows Taskbar does not show you a list of tasks, it shows you a list of apps (it's an "App bar"), and as I mention above, planning my day requires 2 apps, writing my monthly report requires 3 apps. There is no real task switcher in Windows i.e. there's nothing that allows you to easily switch between groups of apps (I think Windows Sets was Microsoft's proposed solution to this, it would have satisfied requirements 1, 3 & 4 from the list above....but not 2. But, it currently looks like Sets is not going to become a feature in Windows 10).

Enter Virtual Desktops!

First, let's start with a definition of what a virtual desktop is:

In computing, a virtual desktop is a term used with respect to user interfaces to describe ways in which the virtual space of a computer's desktop environment is expanded beyond the physical limits of the screen's display area through the use of software. This compensates for a limited desktop area and can also be helpful in reducing clutter.

Although virtual desktops have been around since the late 1980s, they were not available natively in Windows until the launch of Windows 10. Because virtual desktops are discrete, make full use of the real desktop, and allow fast switching via keyboard shortcuts, they satisfy all 4 requirements from my list.

An example

To keep things simple, I'm going to assume that I'm only working on a single focused task and am not taking any breaks. This leaves me with only two task groups required for my day i.e. 1) plan, record & communicate, 2) monthly reporting. For me, these task groups would look like those displayed in the image below:

sketch of dual displays

As I have a dual monitor setup, each virtual desktop includes both monitors. My first virtual desktop includes three web instances of Outlook (tasks, calendar, and emails), MS Teams (for chat and meetings), and Excel (for my journal). The second virtual desktop includes a web browser (product analytics via Adobe Analytics and Tableau) and Excel (monthly report). All the apps are open and sized appropriately, so there's no need to switch between, minimise, maximise, resize, or drag any windows. The only "window management" that's required is via the keyboard shortcuts that enable moving between virtual desktops i.e. Ctrl+Win+LeftArrow and Ctrl+Win+RightArrow. And it's this change that I believe is what makes virtual desktops so valuable.

It was only when I started to use virtual desktops in this way that I realised how much time I was spending scanning the taskbar looking for apps, moving them around, resizing them, and opening and closing them. And I was repeating this process multiple times per day as I was switching between tasks. With virtual desktops, I'll set up my reference desktop as soon as I start my day, I'll check for any unread emails, and see what meetings and tasks I have scheduled, once that's done, I'll then setup my focused desktop. Every 1/2 hour or so I'll quickly switch back to my reference desktop to see if there are any new messages or meeting requests, if not, I'll jump straight back into my focused desktop. The process of switching takes less than a second, and I've not had to hunt and peck at the Taskbar, or do any window managed to achieve this.

Even in this simple example with only 2 task groups, I've saved myself a lot of window management, but, typically I'd have 4 virtual desktops on the go, I'd have my 'taking a break' group, and sometimes a second focused group (I find it hard to focus on a single task for 8 hours, so I like to switch between two different tasks whenever possible).

Using Windows Virtual Desktops

To create a virtual desktop, click the Task View icon located on the Taskbar (or use the shortcut Win + Tab), then, in the top left corner, select "New desktop". To move between these 2 desktops, use Ctrl+Win+LeftArrow and Ctrl+Win+RightArrow.

While in the Task View, you can also drag apps into the virtual desktops, or right click the app and select "move to", to move apps between virtual desktops.

sketch of dual displays

What if I only have a small single display?

If you are limited to a single small display, then it's likely that you are running your apps maximised and using the Taskbar to quickly switch between them. If this is the case, then virtual desktops aren't going to provide you with any extra utility (at least not as far as I can tell, if you've found them useful in this scenario, then let me know).

Summary

Virtual Desktops might not be for everyone, but since using them I've been surprised at how much more efficient I find my app management on Windows. Virtual Desktops is something I'll be sticking with, and I'm hoping that Microsoft continue to build on this new Windows 10 feature.

]]> article1 What is OnlyRSS? https://onlyrss.org/pages/about.html Sat, 06 Feb 2021 14:00:00 GMT I've been using RSS feeds to aggregate web content for almost 20 years. I believe that having relevant content available in a single location makes the web a much better experience and makes me a far more productive and more knowledgeable person\employee. Unfortunately, many “modern” websites don’t support RSS, so I’m fighting back. To help readdress the balance, I’m publishing my blog articles as an RSS feed only. There’s no destination website (or CMS), the RSS feed will contain the entire article.

What does this mean? Well, for a start it makes my articles very difficult to find (and I’m ok with that), and it means that you (the subscriber) has full control over the reading experience via your RSS aggregator of choice.

I’ll probably only add an article once a month, and those articles will be on things that interest me and that I think might interest others, e.g., Data Viz, RSS, News BI tools, productivity tools etc.

If you see something in an article and want to comment, look me up on Twitter @dbs_sticky (MarkEvans)

]]>