• 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

Progressive Web App

Active Recall now out of beta and open for all learners!

May 4, 2022

I have been working with a great friend on a learning tool that gives you super powers, and I am very excited for it to launch today. I have been dogfooding it for some time but it’s also just the beginning of the journey to help people succeed through learning and retaining knowledge. The tool is Active Recall, and people are using it to become language proficient, study for exams, retain key knowledge for work, and so much more.

This is my story using it as a lifelong learner.

Active Recall Knowledge Base
Active Recall Knowledge Base

I wish I understood the power of spaced repetition and active recall as a kid. I believe it would have been life changing, and that it would have resulted in better results in school, life, and work… and all the while saving me time.

We know about the value of compound interest in growing wealth, and the best time to start compounding if you haven’t already, is today.

This is the story I would love to be able to time travel with, to share with a much younger me, and I hope it is helpful as you start your compounding journey.

How I became a lifelong learner

When Walmart acquired my small startup over a decade ago, I remember reconciling the fact that I was brand new to retail, with the knowledge of how Walmart was famously data driven. I knew I needed to up my game as I dove into this new domain, and pondered how.

My wife is a teacher, and we have discussed and debated learning and education the entire time we have known each other. This resulted in a deep dive into the research on how to best study. How can you optimize your time, and get results?

Leitner System

The magic of spaced repetition

The first step on the journey was spaced repetition, and learning how I had gone so wrong with my study habits. Put in the work. Keep repeating. Read and re-read. It turns out that this is wrong-thinking, that is wasteful of time, and doesn’t even work!

Once you start digging, you find that there is a lot of research out there on learning, and books such as Make It Stick bring it all together. It turns out there are two important pieces to the puzzle of long lasting memory. The first piece is to ensure that you are quizzing yourself vs simply reviewing. This forces you to actively recall the material which strengthens your memory.

The second piece is about being quizzed right at a time when you struggle to reach for the answer. This is where the “spaced” in “spaced repetition” comes in. To serve the question up at the right time, the gap in time grows longer when you find the answer, and shortens when you have forgotten it.

After I read this, I admit…. I didn’t quite believe it. Surely constant repetition is better? But it turned out to work wonders in practice. Previously, when I would re-read a passage, I would unwittingly deceive myself, as growing familiarity with the text comes to feel like mastery of the content. Now, when I spaced out the study with larger and larger intervals, my recall was drastically superior.

Thus, the life changing habit was born…

The Active Recall habit

The Dashboard

I have a morning routine, and it includes ~five minutes of using Active Recall as I hit “Study All”. It connects me to the knowledge that I want to have available. It gives me confidence that I have access to my knowledge, which will help me though-out my day:

“The very processes that teachers care about most–critical thinking processes such as reasoning and problem solving–are intimately intertwined with factual knowledge that is stored in long-term memory (not just found in the environment).” — Daniel T. Willingham

What shocks me to this day, is that it only takes me a few minutes, thanks to the power of the exponential backoff of the prompting interval.

As I go through the day, I am capturing knowledge as I go. I don’t worry about taking time right then to make the content perfect, as I often don’t have time right away…. so I focus on capturing it and putting it into the Unsorted folder for later gardening.

At a later time, usually when at my laptop, I go through the unsorted content. I clean it up, and I use some tricks to make it more effective for recall and synthesis, such as:

  • Your brain casts around for answers, it results in generation which creates and firms up associations. Build associations that make sense to you, and your brain can find the path easier.
  • Much of our brain is tied to visual processing. Lean into that power, and use images in your content to build association. A picture is definitely worth a thousand words.
  • If you think of an emotional moment in your life, it’s probably quite easy to visualize. Emotions result in strong association, so lean into that too. One example that tells the tale is how I put names to faces. When I met someone named Justin Toupin, I put his information into Active Recall and pictured him being hit in the face with two bowling pins. A lil gruesome I know, but it gets across the point. I never forgot Justin Toupin again!
  • Create more questions to hit the knowledge from multiple angles. Find the atoms and build from there. An example here is studying the history of World Cup football (soccer for some of you ;). I start simply: For a given year, which country hosted the World Cup? Then I added more knowledge… which country won? Who was the other team in the final? What was the score? Finally I can have compound questions where a given year results in the full score between both teams and includes where it was played.

What do I put in my knowledge base?

After years of using Active Recall and growing my knowledge base, I have seen how it spreads to so many areas. My knowledge base now includes:

  • Work related. I am in technology, and I have probably the bulk of my cards here. I have general information on the technology I need to understand, engineering, product management, management in general, as well as the lessons I have learned throughout my career. I love how Active Recall is both a general purpose platform (you can put any information into it) but is also purpose built for certain content, such as code!
  • General knowledge. There is a ton of knowledge that I want to capture and save, on all kinds of topics. When I took a boating exam, I put the information into Active Recall and it is always fresh in my memory. Geography, Science, Health, History, Sport, and on and on. When I read a non-fiction book, I now capture all of the lessons. In the past I would read something and forget 99% of it after the fact… after all that time that I invested in reading it! Now? The important information is always there.
  • Personal information. Information on people, both my loved ones (What was the name of my uncles first hairdressing salon? What instruments could my Grandad play?), new connections (What was the name of $NEW_PERSONS children?), and… myself (Who was my favorite teacher? How much solar power does our house produce? What is the silent Notepad.exe story?) It is always fun to get a “tickle” when this information pops up. This is why I often put information in that isn’t a Question / Answer…. but just pops up as I enjoy having it back in my consciousness! Quotes from things my kids did and said is a particular pleasure 🙂

Over time, you may not need all of this information top of mind. This is when I suspend that content. Now, it’s available to me via search, but doesn’t come up in studying.

Active Recall gives me what feels like a super power. I am so excited for you to start and share your journey. There are so many other tips and tricks that I am excited to share, but for now… welcome to lifelong learning!

App Mode

August 17, 2021

What would <html app> do? 🤔

The Web can continue to evolve by taking the long term view and chipping away with adding necessary functionality, and eliding some of the mistakes (albeit hard).

However, I have been pondering if we should be exploring some bigger bets:

  • First, looking at certain verticals (content, commerce, apps) and prioritizing web platform features and tooling to make them successful holistically
  • Second, breaking out of the “browser” and be progressive all the way to the native platforms by adding escape hatches

I also miss Flash (or at least the capabilities and DX thereof), so I'm probably worth ignoring…

— Paul Lewis (@aerotwist) August 12, 2021

Now, let’s take another look at building the UI for apps on the Web in a very webby way, embracing what’s good about HTML, CSS, and JavaScript, but really re-thinking it for apps.

Don’t let evolution get in the way

How connected are we? Very.

Evolution is resilient and special. Pair it with immense time frames, and life will find a way, even as many experiments will be left on the way side. One of the strengths of the Web is how it evolves as a platform, but it can be a double edge sword.

We can’t expect to constantly evolve while keeping the entire history front and center. We have fragments in our DNA that go back to the birth of life, but much of it is very much hidden and ignored.

We can embrace evolution that allows us not to keep the baggage around. If you look at a hello world web app, that supports a decent set of browsers, you will find yourself setting up resets of sorts, meta tags, and a series of cruft. This cruft creates cognitive overhead for developers.

In hindsight, we will always make mistakes in the platform and come up with solutions. One simple example that we all know, is that of box-sizing.

I don’t want the default content-box model, and instead agree with Paul from 2012, and many since, who recommend we go all in and flip the default to: box-sizing: border-box;

In 2021, the vast majority of your users will be coming at you via an evergreen modern browser. This is huge, and allows us the ability to flip to a modern-first approach of development that doesn’t tax all of our users for the lowest common denominator. Finally, we can speed up evolution!

While it’s phenomenal that old content sitting on the Web can still be browsed (but of course, this isn’t always true, plenty of old content breaks), it also means that browsers are constrained. They can’t just flip the defaults because *new* content is being developed using new ways, thus we are a lil stuck.

How could browsers do the best job they can at rendering all content, including great content written many moons ago, whilst allowing for new content?

Multiple Rendering Paths

Remember quirksmode? I still see developers accidentally finding themselves confused, because they have put their document into quirks vs. standard mode.

We also have AMP, which forces a constrained mode, optimized for documents keyed off of:

<html ⚡ lang="en">

So, what if we took a leaf out of these books, and had something like:

<html app lang="en">

This could give us a way to tell the browser that we want a new world, one optimized for apps rather than documents. A way to trigger a reset. This would give us a chance to re-think building web apps that still uses HTML, CSS, and JavaScript and feels very webby, but in a sane way for the app use case that is quite different to content.

What could we see?

App-oriented Layout

I love our Grid and Flexbox world, but we could also look into constrained layout modes, working closely with tooling vendors as the Android team did when they shipped their most recent layout systems.

App-oriented Components

Take another look through the HTML spec and the various elements you have built in. I bet you will find some elements that you have never used, such as <aside>. There are a ton of document focused elements, which is great!

But we stopped. While it’s great to abstract and create our own components, either through Web Components themselves, or via framework abstractions that spew out div soup, why haven’t we undergrounded the great learnings from the ecosystem? My kingdom for tabbed UI, and the good ole UITableView! Fortunately, I am seeing more exploration and appetite for this!

App-oriented Data Flow

When you are building rich web apps, and you try to really build your app offline-first, with optimistic UI, you run into a lot of issues around data and syncing.

It’s a shocking shame IMO. Maybe I’m remembering history a lil incorrectly but I think Mozilla was one of the proponents to get rid of WebSQL and Indexeddb was implemented on top of …… SQLlite!

There is room for IDB, especially cleaned up, but ….

— Dion Almaer (@dalmaer) August 12, 2021

We just saw James Long dig into the mess that is IndexedDB and the lack of a portable WebSQL/SQLite. What can we do to really enable experiences that can rely on data?

Are we forcing it? What about WebAssembly?

But wait a minute, are we barking up the wrong tree here? Maybe the solution is to keep HTML, the DOM, and friends for the content Web? Or maybe content++… allowing for interactivity but not as far as full on apps!

Flutter using the Web as a target

With WebAssembly, we could keep URLs, but have them toss back apps that are WebGL renderers! We could just use Flutter for Web as an example. This would allow many runtimes to evolve on top, and bobs your uncle.

While this may make sense for some use cases, and I love that Flutter developers have a path to Web, I don’t think that we should cede all apps to this model, as it naturally ends up with blobs at the end of URLs, and we lose a lot of what is great about the HTML/CSS/JS web.

I know that it is quite niche, but I love how Chrome Extensions can compose and hack the Web. This is a super power akin to an after market for car parts. Someone can create functionality that helps you with another services, and I would like more of that, not less. The Web is fantastic at streaming UI, and we can do more to make this all work well with apps, versus the years of fighting against it and downloading the world before rendering anything.

Thus, I find myself dreaming of layers, or adding the primitives that allow for evolution, but also having another go at baking app UI right into the web as a first class citizen, instead of it being a render target with so many foot guns and uncanny valleys. I dream of a studio of tools, aligned with the platform, to make this possible working hand in hand.

Chrome 91 removed the ability to do alert(), confirm() etc from cross-origin <iframe>s. https://t.co/1n1hhfVhE5

Probably a net-good move, but that means you literally can't use these on CodePen (and others) in any way.

Is there a sandbox flag or something to re-allow?

— Chris Coyier (@chriscoyier) July 27, 2021

And then I wake up to see debates around a simple alert(), and how hard it is to make changes, and I once again ponder escape hatches that allow us to make bold changes.

It’s complex and hard to make some moves, as when you have a platform you need to make sure that both:

  • developers have a happy path, know when they are doing something sub-optimal and how to fix it, and make that happy path the one that doesn’t lead you there
  • and, we minimize the attack surface to make it as hard as possible for bad actors to do harmful things to users and businesses.

And there’s often the rub, as the same capabilities and loopholes can be used for both.

Apps were born on a document platform, and we are still lacking a holistic web-first app platform that could unlock experiences that have great attributes from the web, but are also more fun and productive for developers to build.

What is in your app mode?

Time to Embrace Escape Hatches on the Web Platform?

July 27, 2021

Progressive Web Apps aren’t reaching their potential at scale. I just spoke about how I think it’s important for the Web to push on its own vision as a platform, but as a universal app platform (one of the key segments, along with content and commerce) it isn’t hitting the mark, mainly on mobile. What if we rethink the web platform, and embrace the “progressive” quality to allow for escape hatches on top of web standards as an interop layer for maximal reach?

The default mode of evolution on the web is deliberate. This gives us a nice eventual consistency across multiple implementations, but  there are times in which it is held back too much and at those times I think it is important for us to break out of the mold, branch off and prove value, while always looking to merge back in the future. We are at one of those times, and here is why our current situation isn’t working for users and developers (and thus the platform).

User Expectations

People go to app stores to find apps. On desktop, the browser as a virtual machine kinda works, and there is enough real estate for the browser chrome to be a feature not just a bug. On mobile that isn’t the case. And expecting users to understand Add to Home Screen is swimming upstream. And of course, there are plenty of uncanny valley situations when using a PWA. It doesn’t come across when you migrate devices. It doesn’t show up across an ecosystem (e.g. widgets, watches, notifications on some platforms, etc).

Developer Expectations

As a developer, knowing that I can’t hit the user bar already has me thinking about how far I can go. I sure as hell don’t want to rewrite a mobile app to target multiple platforms, and LOVE the idea of not reinventing the wheel, but I need to not be locked out of key platform capabilities and user flows.

Add to that the notion of FOMO. When iOS and Android release their new SDKs, how long will it take for me to get access via a web standard feature? Can I risk being locked out of $SOME_COOL_NEW_FEATURE?

Support :focus-visible, Safari, you toilet.

— Heydon (@heydonworks) July 27, 2021

And will Apple ever implement what I need? They have shown, through action, that they have a different vision for the Web, one that is much more focused on the content Web. Given their business and app strategy, it isn’t being evil, it makes sense. They want developers building on their native stack and offering experiences that are differentiated.

We have all tried to push on this for some time, but maybe it’s time for a different tact. Instead of slowly doing all we can to change the calculus for Apple to implement something (e.g. finding ways for their internal teams to request a feature, or getting adoption of something so that it works poorly or slowly, such as YouTube supporting Web Components) let’s think different.

Web as an Interop Layer

It’s interesting to look at iMessage and SMS as another path. The SMS standard acts as an interop layer, where you are able to text between iOS and Android. It doesn’t have all of the fancy features… but it allows for fast iterations when each platform is talking to another device on it’s own system.

This is far from perfect. How frustrating is it to react to a text on iOS, but because someone on the thread is on Android, you get another text with: Liked “repeat of the message”. I see this and conspiracy theories start up in my head…. Surely you could write the Regex to see the pattern and just show the reaction on that message :/

And then there is Spotify and podcasts. Originally, you were very much locked in, but recently Spotify supported RSS and your ability to monetize your own way if you wish. If you can offer choice to developers where they can get different levels of integration based on the direction they go (doing extra work for a platform vs. open standards) that is a real trade off with real choice. Once again though, far from perfect, and I am frustrated with Spotify sucking up “exclusives”, and shoving podcasts down my throat in the app when I just use it for music.

What would this look like for the Web? The standards (and really the implementation of them… which is why compat efforts will always be so important) are the interop layer that gives you the base level functionality and allows you to reach every user with a device that implements a web client. We use progressive enhancement as always to do the right thing to make the experience work as well as it can for the given device and modalities and browser and version that a user is browsing your site with.

But we progressively enhance further, breaking out of the sandbox as needed. The starting point is on getting browser vendors onboard, but if to bogged down you aren’t stuck. We lean into Capacitor type approaches, letting you reach to native when needed, and getting you into the stores that don’t support you with a simple URL. Platforms can give you extras and you can choose to put in the extra work to enhance to them if the ROI is there. We learn from this evolution and always push to eventually bake it into the standards. Just like how I wish that reactions get baked into new versions of texting standards, and how chat apps could eventually get interop (fun fact: I used to be an IRC admin for the University of Minnesota!)

What does this look like?

Let’s say I build an image editor application. On ChromeOS the web is the app platform, so I want my users to be able to double click on the PNG file on their desktop and have it launch and load in the PWA. If this feature isn’t fully implemented on other browsers, give me a way to do it on ChromeOS first. It’s OK!

Now let’s say we want to bring this editor to mobile and are frustrated at the lack of support for *simple* features such as access to a file system. If one OS isn’t getting you what you need, we break off and have a wrapper API that bridges through the native SDK. We have polyfills where we can, and clean ways to use enhanced APIs that don’t break the web experience when we can’t. We can even embrace the fact that the app install step is a nod that the user cares about this experience.

Trust is important. The ephemeral nature of the web is key, and I’m all for leveling the field, but we also need user signals that don’t make UX of an API awful.

Let’s take the image editor example and say that we want to add rich font support and we want to be able to access your local system fonts. If you meet with the security and privacy team first they may point out that a web site knowing which fonts you have is just what finger printing folks would love to see. Instead, what if we protect users and when you sign in we ask users to choose which fonts they want to share…. Like sharing images via a picker vs granting access to your camera roll. You nod for a bit, and then you think through that UX.

Wait, how do I know which fonts I want to use in the future? In my editor I want users to be able to play with their design and quickly flip through fonts to see how they look with the content I have?

Now imagine that this image editor is from Adobe, and picture the user…. Logging into creative cloud which they pay for, and seeing this? Does this keep them safe? Or does it result in closing the web app and just switching to native?

We have this working now!

After many years deep into building an enterprise app development company, I've come to the conclusion that the average developer has no clue what technologies are actually being used at scale inside of large orgs

— Max Lynch (@maxlynch) July 27, 2021

We a history of this evolution. On desktop with Electron, and a huge number of mobile apps embed WebViews, use custom bridges, and use products such as Capacitor.

And we are seeing success stories, particularly within certain verticals such as enterprise and publishing. I remember meeting with a huge media company in Latin America who switched from their native apps to using web + native where needed. It wasn’t just useful for their general ROI, all of their metrics went up and to the right:

  • Positive App Store ratings increased by 25%
  • App size was reduced by 70%
  • Crashes reduced by about 80%
  • Engagement increased.

But how? Well, context matters. They had a large web team and small native teams and this resulted in native always being far behind in features and the overall quality not being the best. You don’t get platform leverage for free. You still need native skills but a core group could watch over some of that and the feature teams could run faster.

And now when this years SDK comes out, they can bridge over to it and access that new branch of evolution.

Let’s consider how to keep up the pace and deliver on user and developer expectations by offering progressive enhancement down to the underlying platform vis escape hatches, and do it in a way that learns from the past (e.g. MS universal apps) allowing us to be constantly merging improvements into main, which are the web standards that we hold dear.

Next Page »

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...