• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dion Almaer

Software, Development, Products

  • @dalmaer
  • LinkedIn
  • Medium
  • RSS
  • Show Search
Hide Search

Archives for April 2020

Die, Print Layout, Die…. the Chrome Extension

April 13, 2020

TL;DR I built a Chrome Extension that forces my layout of choice for Google Docs, all thanks to the escape hatches that extensions give you on the Web!

I admit to having a lil bit of OCD when it comes to my digital life. Seemingly small UI and UX choices irk my brain, and I spend a lot of time in Settings and Preferences tweaking my experience.


It’s because of this that I get frustrated when products don’t have the ability to tweak and change, often on purpose, claiming “a great product shouldn’t need complicated settings!”

I disagree. I want escape hatches, and all humans aren’t the same (nor use the product in the same way), especially for tools that you spend significant time in.

Facebook webOS edition 2010

Back in 2010, I got to work on the “official” Facebook app, for webOS. One of the great side effects here, was that we were able to sneak in a slew of power user features, and have keyboard shortcuts for everything.

The place to turn “Print layout” on and off

One of my ticks shows up in Google Docs. I rarely print documents, and thus rarely see the need for the notion of “pages”. For some reason, elves get into my computer and turn on “View => Print Layout”, even though I was constantly turning it off. Even when off, I don’t like the “——-” page break.

I knew I wasn’t the only one, as one way to bug Ben is to have this turned on as you go through something together, and then I saw this:

i once fleetingly got traction with a docs pm on this issue. the idea of removing page breaks was considered reasonable and sound but not a priority ¯_(ツ)_/¯

— Isaac Hepworth (@isaach) April 2, 2020

It was time to fix this…. once and for all!

Die, Print Layout, Die!

I have been enjoying building extensions recently so I fired up VS Code to create another one Die, Print Layout, Die, (open source code here) which simply makes sure to force off Print Layout mode when loading a document, and kills the page break.

Not only do I sleep better at night, not worrying over the elves and if they are messing with my layout, but this made my day:

you're my hero

— Michael Schade (@sch) April 9, 2020

Escape hatches FTW

I am very thankful that the Web has these escape hatches that enable the ecosystem to evolve products outside of the product development team.

This week, the local school district banned the use of Zoom, and my kids meetings were all moved to Google Meet. As this happened, teachers were emailing parents asking them to install the Google Meet Grid View extension so the kids could all see each other.

Some smart folks at Shopify built a little Chrome extension that adds a bunch of features to make Google Meet even better https://t.co/C53Vd6K6aN pic.twitter.com/bG3baRZjml

— Owen Williams ⚡ (@ow) April 13, 2020
And folk from Shopify got in the game too!

There are trade offs on allowing this type of power, which is why we are looking to rebalance them via the next iteration of extensions (manifest v3). Grid view is an awesome feature, but the extension isn’t able to implement it as efficiently as the team itself, and this is often the case. However, it fills a gap and hopefully gets into the core product some time soon.

Once you get used to the power and extensibility, you feel constrained on platforms that don’t enable this kind of flexibility.

And when you get used to the flexibility, you look to extensions as a way to find functionality:

I want a chrome extension that warns me when I’m about to tweet without adding descriptions of any images/gifs.

Does this exist?

— Josh W. Comeau (@JoshWComeau) April 12, 2020

Browsing the Web while watching it’s vitals

April 2, 2020

TL;DR I built some Chrome Extensions that show you vital metrics for sites as you browse the Web. Here I discuss the current metrics of choice, the extensions, and finish with some magic.


It sure is unprecedented times. My mental state has fluctuated between anger, frustration, grief, guilt (privilege), and beyond. I am thankful for the people in my life who have been amazing, and I am globally thankful to all of the people who are either staying at home to help flatten the curve, or who are courageously doing their duties.

Working (and loving!) from home has been a reset, and I am trying to use that reset by setting up new habits (tiny!) whilst also not being hard on myself for hitting them all.

One of these has been giving myself time to write a little code on something I have wanted to have in my browser for awhile.


web.dev/metrics

What’s the latest with Web Performance Metrics?

We all want to have great metrics that reflect the quality of our web experiences, and use them as guides for how we can improve.

These metrics have changed over time, as we get better at understand the mapping of the browser engine to parts of the experience.

At web.dev/metrics you will see a current set of metrics that each look to understand a different piece of the overall experience:

  • Load time:
    • First Contentful Paint (FCP): We see some content, looks like the page hasn’t errored out and is loading!
    • Largest Contentful Paint (LCP): I can see the most important bits of the page!
  • Interaction:
    • First Input Delay (FID): I am ready to interact with the page, and I can! (in the field)
    • Time to Interactive (TTI): In the lab, main thread has been free of long tasks for 5 seconds)
    • Total Blocking Time (TBT): In the lab, the total amount of time between FCP and TTI where the main thread was blocked for long enough to prevent input responsiveness.
  • Predictability:
    • Cumulative Layout Shift (CLS): Why is my UI jumping around?
This video goes into the metrics and much more on speed!

At the last Chrome DevSummit, we spoke about the evolution of metrics, and how they are rolling out across our tooling.

For example, in the field it always starts with Chrome instrumentation, which will then get picked up in CrUX, which will be reused in tools such as PageSpeed Insights.

In the lab, you get access to them as Lighthouse and DevTools implement support.


github.com/dalmaer/lcp-chrome-extension (The LCP extension)

Chrome Extensions that show the metrics

After spending time looking at metrics while developing, and spelunking in the CrUX datasets, I found myself wanting to feel the impact of the metrics, so I decided to build some ambient Chrome Extensions.

There are individual extensions that show scores as the browser’s PerformanceObserver spits them out, and change color depending on the thresholds of each metric.

For example, the LCP extension will be green if it occurs in less than 2.5 seconds (a good score), yellow if between 2.5 and 4 seconds (an adequate score), or red if it takes longer.

There are equivalent extensions for FCP, FID, and CLS.

Now that I have been browsing around the Web, what has surprised me the most is how variable the results can be with N=1. If I load a page while a message comes in to Hangouts Chat and I am on a VC…. it may be slow. When developing, it’s important to isolate your environment… something that we very much notice with Lighthouse development too.

It is also kinda fun to dive into a page when there is an expectation mismatch. I will think to myself “huh, that seems like a decent load, why is the CLS so bad?” and start digging…. and come to find that the web fonts loaded slow and did a swap, causing layout instability (most of the time its ads loading late and resulting in the change to be fair).

It’s been really nice having the traffic lights give me some feedback as I browse and letting me explore, but this is only the beginning. The product teams are working on much better tooling that can showcase this type of information, and also tie deeper into tooling to give you actionable feedback.

Don’t forget the magic

Hitting these thresholds are good guides for a quality experience, and they are only going to get better over time. It is important that we all take them into account, but also important not to do so blindly.

I like Derren as he explains that his magic is not magic (as it doesn’t exist 😉

I have been enjoying me some Darren Brown action, such as the classic video above. He used a series of techniques in his shows, and good ole misdirection is always involved.

Misdirection is a key trick with UI development too, as the goal centers around the perception of quality. This can sometimes be a touch at odds with pure metrics, as the browser engine may not be fully aware of the tricks that you are playing.

This is why it’s important to consider custom metrics such as the Element Timing API to measure what is really important to see on the page (which may not be the largest element that LCP will fire).

There are some absolutes (human perception research shows those), but it always makes sense to go the extra mile and really understand how users are using your site…. and using the appropriate tricks. It turns out we are simple bears that can only focus on a small area 😉

Primary Sidebar

Twitter

My Tweets

Recent Posts

  • I have scissors all over my house
  • GenAI: Lessons working with LLMs
  • Generative AI: It’s Time to Get Into First Gear
  • Developer Docs + GenAI = ❤️
  • We keep confusing efficacy for effectiveness

Follow

  • LinkedIn
  • Medium
  • RSS
  • Twitter

Tags

3d Touch 2016 Active Recall Adaptive Design Agile Amazon Echo Android Android Development Apple Application Apps Artificial Intelligence Autocorrect blog Bots Brain Calendar Career Advice Cloud Computing Coding Cognitive Bias Commerce Communication Companies Conference Consciousness Cooking Cricket Cross Platform Deadline Delivery Design Desktop Developer Advocacy Developer Experience Developer Platform Developer Productivity Developer Relations Developers Developer Tools Development Distributed Teams Documentation DX Ecosystem Education Energy Engineering Engineering Mangement Entrepreneurship Exercise Family Fitness Founders Future GenAI Gender Equality Google Google Developer Google IO Habits Health HR Integrations JavaScript Jobs Jquery Kids Stories Kotlin Language Leadership Learning Lottery Machine Learning Management Messaging Metrics Micro Learning Microservices Microsoft Mobile Mobile App Development Mobile Apps Mobile Web Moving On NPM Open Source Organization Organization Design Pair Programming Paren Parenting Path Performance Platform Platform Thinking Politics Product Design Product Development Productivity Product Management Product Metrics Programming Progress Progressive Enhancement Progressive Web App Project Management Psychology Push Notifications pwa QA Rails React Reactive Remix Remote Working Resilience Ruby on Rails Screentime Self Improvement Service Worker Sharing Economy Shipping Shopify Short Story Silicon Valley Slack Software Software Development Spaced Repetition Speaking Startup Steve Jobs Study Teaching Team Building Tech Tech Ecosystems Technical Writing Technology Tools Transportation TV Series Twitter Typescript Uber UI Unknown User Experience User Testing UX vitals Voice Walmart Web Web Components Web Development Web Extensions Web Frameworks Web Performance Web Platform WWDC Yarn

Subscribe via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Archives

  • February 2023
  • January 2023
  • September 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • November 2021
  • August 2021
  • July 2021
  • February 2021
  • January 2021
  • May 2020
  • April 2020
  • October 2019
  • August 2019
  • July 2019
  • June 2019
  • April 2019
  • March 2019
  • January 2019
  • October 2018
  • August 2018
  • July 2018
  • May 2018
  • February 2018
  • December 2017
  • November 2017
  • September 2017
  • August 2017
  • July 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012

Search

Subscribe

RSS feed RSS - Posts

The right thing to do, is the right thing to do.

The right thing to do, is the right thing to do.

Dion Almaer

Copyright © 2023 · Log in

 

Loading Comments...