Rusty Locks

Notes | 2023

#Link |  Better Mobile Inputs Playground

WebDevs use INPUTs all the time, but often neglect to set the right attributes, especially for mobile devices. Alex Holachek has already created a very practical playground for the use of type, inputmode and autocomplete in 2020. It shows you the resulting keyboard layout for Android/iOS and links to the appropriate docs.

better-mobile-inputs.netlify.app

She also wrote about it on CSS Tricks:

Better Form Inputs for Better Mobile User Experiences

#html #inputs #mobile #playground

#Link |  CSS text-wrap balanced and pretty

In this worth reading article, Stephanie Stimac (@seaotta) shows the possibilities of using text-wrap in CSS to improve the typography of body text. On the one hand, there is the value balanced, which ensures that text that goes over several lines is distributed over them as balanced as possible, and the still experimental pretty, which is supposed to prevent that individual words of a paragraph are placed in a last otherwise empty line.

When to use CSS text-wrap: balance; vs text-wrap: pretty;

#CSS #Typography

#Link |  Responsive type scales

This CSS calculation to create responsive type size by Tobias Ahlin is somewhat the sickest I’ve ever seen …

.container-adaptive {  
  --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
  
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);  
}

… but works great. It would only be nice if it were simpler.

https://tobiasahlin.com/blog/responsive-fluid-css-type-scales

#css #responsive #type

More modern CSS Reset

Each browser or browser engine interprets the common CSS rules a bit differently, especially with the default values. A general reset to your own standards is very helpful. Andy Bell’s Modern CSS Reset from 2019 is a kind of gold standard in this respect. He has now modernized this and a few things came up for me that were new to me or that are in some forgotten notes. Future me, please apply:

  • text-size-adjust: none;
  • text-wrap: balance;
  • text-decoration-skip-ink: auto;
  • scroll-margin-block: 5ex;

https://andy-bell.co.uk/a-more-modern-css-reset

#css #reset

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

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

#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 … 😉

#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