Rusty Locks

Notes 2023

Extended WebApp Installation Dialog in Chrome

At the end of March, the Chrome team announced that they have extended the installation dialog of WebApps/PWAs on desktop and Android systems. To offer the user the new extended dialog it is necessary to include a meaningful description as well as a maximum of 3 screenshots in the manifest.

Extended WebApp Installation Dialog in Chrome

#Chrome #WebApp #Installation

#Link |  On POSSE and IndieWeb

Joel Auterson has written a wonderful summary on how to start with your site on the Indieweb and how to interact with others through POSSE. Learned something new to optimize my own syndication process.

On POSSE and IndieWeb

#Indieweb #POSSE

#TIL |  Scroll Listener Performance

As you might see, every page in this blog has a header image which shrinks proportional as you scroll down. Angelos Chalaris had yesterday a very useful tip how to prevent jerks while scrolling, due to performance problems. Now it’s way smoother, but not perfect. Didn’t find a CSS solution for it yet…

30 seconds of code - Tip: Improve scroll listener performance

#JavaScript #Scroll #Performance

#Link |  Adaptive icon support in PWAs with maskable icons

On Android smartphones, the icons of the apps can be adapted to one’s own taste in terms of shape. Rectangle, circle, drop … you name it.

This of course applies to PWA’s as well and it is to be hoped that the developer has thought of providing maskable icons to support this. Tiger and Thomas show how this works in this article.

Adaptive icon support in PWAs with maskable icons

(P.S. I have not until now ;)

#PWA #Manifest #Icons

StreetPass for Mastodon

rel=me links are an important part to verify users on Mastodon, but not every site provides a visible link to follow or you have to search around. StreetPass is a little extension for Chromium and FF which collects those REL links while browsing. Extremely convenient
… Thank you @tvler@mastodon.social

02-12-streetpass

#Link |  Typographic Hierarchy

I’m not a designated design specialist, but UI’s are and always have been important to me as a visual person. However, all web or other interfaces I designed as a developer were only created based on my feeling whether it looks good to me or not. Oliver Schöndorfer in his article about typographic hierarchies translates my simple feeling into psychological contexts (goal, levels, effect) without drifting into science. Very nice and helpful article @ https://pimpmytype.com/hierarchy/

Typographic Hierarchies Sample

#Typography #UIDesign

Writing with Thrust Reversal

Normally I’m coding something and later on I decide if it’s worth to write about it and I make a post. Last weekend I started to code something, but had too little time and started to capture my ideas directly in a blog post. This resulted in an almost finished post without me writing a single line of code.

This is incredibly effective, because in most of my posts I explain in a structured way how I came up with the solution. If I write before I code, most of the thinking is already done. I just must not forget to write the code then … 😉

#Link |  Using .NET code from JavaScript

Ever had a fancy calculation written in C# and now you need it in JavaScript? Blazor WebAssembly has been developed to build such bridges and with .NET 7 it is very easy to externalize individual functions. With some overhead, but never mind. Thanks for this @meziantou@hachyderm.io

https://www.meziantou.net/using-dotnet-code-from-javascript-using-webassembly.htm

#NET #Blazor #JavaScript

#TIL |  View Source on Chrome for Android

Unfortunately on Android there is no menu item “View Source” if you want to have a look at the HTML code of a page. But there is a way … just add view-source: in front of the URL on editing it in the address bar.

Prefixed URL to view source

#Chrome #Android

#TIL |  Avoid NPX install prompt

Using npx (Node Package Runner) in a GitHub Action can be difficult, because for security reasons the command requires to type YES at a prompt if the package is not present in the local project dependencies. This can be suppressed by providing --yes in version 7. But there is a workaround for v6 and above, by passing yes via environment variable: npm_config_yes=true npx ...

https://github.com/npm/cli/issues/2226

#NPX #GitHubActions

Background RGBA Color for Theme

Just for me to remember the next time…

Instead of using two different colors for the light and the dark theme, take ONE matching color and set the transparency to 50-60% via the alpha channel to let the light or dark background shine through.

#CSS #Colors #RGBA

Background RGBA Color for Theme

Grandpa Peter tell us ...

This morning I stumbled across an interview with a 100-year-old blogger in a German news magazine. Peter Meisen was born in 1922 and started telling his story to his great- and grandchildren 6 years ago. Poverty, Nazis, war, reconstruction, his daily life today. It is heartwarming and disturbing at the same time to read it all first hand. I could hardly stop reading, especially because so much is currently being repeated in #Ukraine…

https://opaerzaehldochmalblog.wordpress.com

#TIL |  CSS's :not([class]) selector

Some links need to look different from standard links, be it with a background image or other special formatting. Mostly you simply create a new class like a.img-link or something like that.

To be able to style the standard a tag (without classes) as needed, it may be necessary to exclude the special link classes, such as a:not(.img-link) {...}. If you have several of them, it quickly becomes confusing.

What I didn’t know until now is that you can use a:not([class]) {...} to generally exclude ALL links with a class. Very nice …

#CSS #TIL

personalsit.es

I don’t really know what the site personalsit.es is for, but since the first of the year I’m also listed there with my blog.

#Visibility #Fun

personalsit.es