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!
#js #promise #callback #conversion
Refactored the photo section on my blog and started to cross post some photos on my new Pixelfed account @kristofz@pixelfed.social and would like to collect and display the likes and comments as usual via brid.gy … but between @snarfed and @dansup it seems to be stuck somewhere…
https://github.com/snarfed/bridgy/issues/927#issuecomment-911780729
#pixelfed #bridgy #github
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
Ever got crazy on CORS problems when using an API? While examine the code of Christian Heilmann’s WebComponent github-include, I stumbled over his fetching URL towards GitHub:
let proxy = 'https://api.allorigins.win/raw?url=';
Never mind, but great…
#api #proxy #cors
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…
#JavaScript #NodeJS #EXIF
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
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
#feed #poll
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
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:
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
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
I really wasn’t aware of the new CSS Logical Properties, but as I read Chris thoughts on that, it makes absolutely sense to switch completely.
#CSS
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
