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.
#Chrome #WebApp #Installation
Christoph Stoepel has created an awesome visualization of the geographical distribution of surnames in Germany. He started this genealogical project back in 2004, but I just stumbled across it now. Interesting to see where most namesakes live…
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.
#Indieweb #POSSE
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
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
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
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/
#Typography #UIDesign
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 … 😉
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
Olivia Brown’s tutorial about using Unsplash’s API in your Node.js or JavaScript project is a great resource to brighten it up with appropriate pictures.
A Beginner’s Guide to Unsplash API in JavaScript
#Unsplash #Pictures #Tutorial #JavaScript
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.
#Chrome #Android
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
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
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…
Ever wanted to change something in a NPM library, but won’t wait for bug fix release or break your build?
Johannes has the answer how to lower your headaches: clone, make changes, build, pack, use package locally and add to bundledDependencies.
I wish I would have had this tip a few month ago…
https://stricker.digital/posts/how-to-vendor-npm-dependencies/
#NPM #Tip
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
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
