Rusty Locks

Notes 2023

Converting Callbacks to Promises

Ever stumbled over an third-party JS library which uses callbacks and had to build a Promise wrapper around it? In my today’s readings, an article from Scott Robinson draw my attention, as he was talking about an automatic conversion of these types of function calls. He utilizes Bluebird, which is able to convert a whole library into Promises with one call … never noticed, but sooo useful!

>>> Bluebird

#js #promise #callback #conversion

AI written Mastowall

This morning I stumbled across a Mastodon post that was excited about a Twitterwall-like alternative for Mastodon: Mastowall from @rstockm

Yes, the web solution is cool. It takes up to three hashtags, retrieves posts from a defined server every 10 seconds via <server>/api/v1/timelines/tag/<hash> as JSON and renders them as cards in a masonry grid on the page. A wonderful and useful little tool.

But the most interesting thing about it, is the following statement from the author on GitHub:

It was written entirely by ChatGPT4, guided only by text prompts.

#mastodon #ai #chatgpt

#Link |  EXIFR: Incredible Image Metadata Library for JavaScript

Two hearts live in my chest: web development and photography. When it comes to a combination of the two topics, I get very excited. For a small automation function of my blog, I needed a way to read the EXIF or IPTC data via Node/JavaScript from a JPG image and found EXIFR by Mike Kovarik.

https://github.com/MikeKovarik/exifr

This thing not only maps all sorts of image metadata, but is also incredibly fast. There are ESM as well as CommonJS versions and different bundles (full, lite, mini), depending on your needs.

I have bookmarked Mike’s example page, if I need the data of a photo quickly…

08-21-exifr

#JavaScript #NodeJS #EXIF

#TIL |  Stylus vs. CSS built-in functions

I think Stylus had its time, but it’s starting to be a real pain. 1 hour until I realized that it disassembles padding-top: max(30px, 3%) because it has such a function itself.

Workaround: padding-top: @css { max(30px, 3%) }

#stylus #css

Feed: Full Length Article

Since this blog has been around, I only display the excerpt of an article on the front page, and that’s how I’ve done it with my Atom feed.

However, I recently came across a Mastodon poll, where Sean wanted to know what readers prefer: excerpt or full article. More than 3/4 of the people said: full article and in the comments some understandable reasons were given.

So I have changed that now…

https://social.treehouse.systems/@deadsuperhero/110608652068691549

06-29-results-full-article-poll

#feed #poll

#Link |  Interactive Birthplaces

What do Simone Signoret, French actress, and John McEnroe, American tennis player, have in common? They were both born in my hometown of Wiesbaden, Germany. I know this now thanks to Topi Tjukanov, who created an interactive map showing the birthplaces of the world’s most famous people.

https://tjukanovt.github.io/notable-people

#map #people

06-27-notable-people

#TIL |  Jane Doe of Domains

In concepts, manuals, prototypes and the like, it happens again and again that one uses for illustration web domains like domain.com or similar. However, this can only be done safely with the following 4 domains registered and blocked by IANA since 1992:

  • example.com
  • example.net
  • example.org
  • example.edu

The German beispiel.de is not one of them, even if its owner provides it for this purpose.

https://en.wikipedia.org/wiki/Example.com

#domains

#Link |  Understanding OPFS

Storage in web apps can be a real pain, but nearly every year the possibilities expand. Thomas Steiner, from the Chrome Dev Team, highlights the latest expansion in detail: the Origin Private File System, which allows to handle complete file structures on the web.

web.dev - The origin private file system

#WebApps #Storage #OPFS

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