I've been a passionate software developer for a very long time ...
now I'm a tech-savvy IT manager and tinker with things like this
blog in my free time ;)
Developing software never lets you go. It's a creative passion
and for me it's the web that has fascinated me for almost 30 years.
I recently introduced a Bottom Sheet dialog on this blog to display a page’s metadata (like this), using Ali Dincer’s work: downupPopup. I described the way to do this in a post a couple three weeks ago.
Important for this post is that Ali’s bottom sheet solution did not offer everything I wanted for my implementation:
1. Make Dialog Reusable
As I have already described in the above mentioned article: Ali’s approach to calling the dialog was to create and initialize the necessary HTML elements if it didn’t already exist in the DOM. I pulled out the initialization to make the component reusable. There is now a preparation part and an initialization part and the latter is always called, no matter if another bottom sheet dialog was already created before.
This Discoveries issue is generally about tutorials from different areas: CORS, Azure, Elektron, GitHub Action, SVG. Outstanding articles by outstanding authors, who explain things in an easy and understandable way.
Happy Reading…
CS Visualized: CORS
Use Azure Functions, Azure Storage blobs, and Cosmos DB to copy images from public URLs
Build a Secure Desktop App with Electron Forge and React
Node.js API Authentication with JSON Web Tokens
How To Build an SMTP Mail Server with Express, Node, and Gmail
Advanced Git Series 1/8: Creating the Perfect Commit in Git
Learn how to use Git and GitHub in a team like a pro
In the template files are the three main tags for driving content:
Scriptlet tag for control flow (no output)
1 2 3
<% ... my JavaScript code to process data into the template %>
Output a value as escaped HTML
1
<%= myVariable %>
Output of a raw value, usually in the form of a JavaScript function
1
<%- myFunction() %>
Hexo’s helper system is based on the latter. So you can include a JavaScript file in your template that makes use of the JS Helper in node_modules\hexo\lib\plugins\helper\js.js as follows …
So far and short, so good … but I recently tried to use this way to include a JSON file whose data one of my scripts needed as startup options and I noticed that the above mentioned JS helper unfortunately takes care of the possibly missing file extension js. It doesn’t matter if you only pass the path to the file as a string or if all necessary attributes as an object.
Visualize the generated meta code on your page in a sliding panel for review and information purposes
A few months ago I introduced new meta data (JSON-LD) for the pages of this blog and also wrote about my implementation. Works also everything quite well … only the verification of the generated data was a bit cumbersome:
Open DevTools for a page in Chrome.
Search in the HEAD of the source code for the included script (“application/ld+json”)
Copy out JSON-LD code
Format JSON into VS code … and check
Nothing for now and simply impossible on the smartphone, even if there would be a reasonable Chrome extension for displaying JSON-LD data, but it does not exist (yet). Another problem was that I use automatically generated Socal Media images for my articles, which are included in the JSON-LD, but do not appear anywhere in the page and thus were beyond my control. I simply wanted to display all the generated stuff.
Since I’ve been a fan of the so-called bottom sheets since the first version of Google’s Material Design, I imagined a script that grabs the code embedded in the page and pushes a panel with all the data visualized there into the page from the bottom … and the whole act was easier than I thought.
A while ago I posted my favourite pens of 2022. Many of them came from the pen of John Kantner and that was reason enough for me to highlight his most beautiful works in a post.
My “Best of Jon Kantner” selection is focused on the usefulness for UI’s to be created, i.e. all these things I urgently need to try out or one or the other will end up in one of my projects.
I’m such a UI person. It’s a blast for me to discover and try out new interface components on the web and for the web. Simplicity and a tidy text desert is not my thing. Here are a few JavaScript UI gems I found the other day for you…
‘Le Bretagne’ (Brittany) is one of the most beautiful and historic parts of Europe and always worth a visit. It combines the sometimes rugged English flair with the art of living of France, both scenically and in the architecture and the way people live there. My wife likes all things English and I am a friend of the french ‘Savoir Vivre’, and we were able to combine the two beautifully on a trip to Saint-Malo and Jersey. It was a photographers dream…
As a visual person, I’m always thrilled when I come across small but subtle tips, tricks or even entire solutions that lift my understanding of what can be done with CSS to new heights. Of course, this month :has() is once again one of them, but also once again contributions from Bramus van Damme and Ahmad Shadeed, whose posts I read without exception because they are both so good at what they do.
Tree views in CSS
Scroll Shadows With JavaScript
CSS Mirror Editing in Edge DevTools for VS Code
Prevent Scroll Chaining With Overscroll Behavior
Display content in the title bar - Microsoft Edge Development
The large, small, and dynamic viewport units
An Interactive Guide to Flexbox in CSS
Flexbox Dynamic Line Separator
Style a parent element based on its number of children using CSS :has()