Posts tagged "web-dev"

15 posts
A detail section of this blog’s header image featuring a cartoon illustration black and tan dog with a red bandana on a blue background with falling autumn leaves, rain, sound waves, and letters spelling "KING" on the left side of the image.

Autumn is here!

| In Blogging
| 9 minute read

Quite literally: this blog is now officially in autumn mode! 🍂

During our summer vacation, while watching over our dog Elvis, I spent some time doing recreational coding on the balcony of our vacation home in Sottomarina, Italy. The result is a seasonal bit of JavaScript/SVG animation for this blog’s header, which you can now enjoy on the main page, constantin.glez.de. But only during the autumn months, of course!

What started as a simple idea to add variety to my header turned into a 903-line journey of learning physics, mastering SVG patterns, and discovering just how much fun coding can be when there are no deadlines or requirements—just curiosity and Claude as my sparring partner. 🎯

Here’s what I learned along the way:

A black and tan dachshund named Elvis sitting on wooden flooring, wearing a pink bandana with watermelon print. He has soulful dark eyes, floppy ears, and is looking directly at the camera with an alert, friendly expression.

Welcome Elvis to this blog!

| In Blogging
| 8 minute read

Over the last few days, I’ve been working on putting Elvis, our Dachshund, onto this blog’s banner. The goal was to create a smooth animation where Elvis appears by rising from the bottom of the banner, then leans his paws over the border—adding some personality to the site while exploring modern web animation techniques.

A dreamy, ethereal landscape with soft pink and purple clouds in a pastel sky. Flowing sine waves made of code characters weave through the scene in translucent ribbons of light, creating gentle wave patterns. Several colorful butterflies - including blue, purple, and pink ones - flutter gracefully across the composition. The overall mood is serene and fantastical, blending programming elements with natural beauty.

Animating SVG with plain JavaScript and CSS

| In Blogging
| 5 minute read

Refactoring my banner into SVG was only the beginning: the next step was animation. I continued with the “AI as a teacher” model and asked Claude to explain to me concepts like IIFE, how the browser’s DOM processes SVG elements, which SVG properties are GPU-accelerated and other CSS performance conc…

Abstract digital landscape with flowing wave-like forms in vibrant magenta, purple, and cyan colors, overlaid with glowing geometric patterns and data visualization elements against a starry black background.

This time I coded it myself: using AI as a teacher

| In AI
| 7 minute read

If you’re a returning visitor, you might notice the header image on this blog looks more sharp and crisp—that’s because it is! ✨ After creating my own URL shortener, I wanted to modernize my header image. I built it back then in 2022 using p5.js, but the resolution wasn’t great. Now I wanted a more …

Abstract network visualization with glowing golden nodes connected by luminous lines against a deep blue background, representing interconnected systems and data flow.

Adding Webmention support

| In Blogging
| 4 minute read

This weekend, I added Webmention support to this blog. What is it? From the Webmention W3C recommendation:

“Webmention is a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites mention it.”

Think of it …

Surreal landscape with bonsai-like trees growing on small floating islands in calm water, their reflections creating perfect mirror images below. Translucent soap bubbles float through a soft pink and purple sunset sky, with distant mountains silhouetted in the background.

Adding responsive and efficient images to your blog

| In Blogging
| 6 minute read

It’s been a while since I was up to date on image formats for the web. Back then in the 90s, I actually read the original JPEG paper in order to understand how it worked, because I was preparing a presentation to my study group on the MPEG paper and needed to understand how I-frames were encoded. At…

Whimsical steampunk factory scene with cartoon workers operating brass machinery among clouds and stars.

The IndieWeb is like the good old Blogosphere

| In Blogging
| 3 minute read

While refactoring my blog, I discovered the IndieWeb community. From the website:

“We are a community of independent and personal websites based on the principles of: owning your domain and using it as your primary online identity, publishing on your own site first (optionally elsewhere), and ownin…

A surreal digital garden where intricate code structures elegantly transform into growing plants. Old code blocks gracefully crumble into luminous particles, seamlessly reforming into new, refined structures. Tiny, detailed programmer robots meticulously tend to the transformation. Bonsai-like HTML trees evolve into more sophisticated forms, their leaves shimmering with embedded code snippets. The scene is bathed in soft morning light with a subtle lens flare, casting a dreamy atmosphere. Teal and amber color accents enhance the ethereal quality. The composition is harmonious and uncluttered, evoking a sense of wonder and innovation. In the style of digital surrealism with influences from contemporary digital art and futuristic aesthetics.

From Pelican to Zola: Refactoring my blog

| In Blogging
| 2 minute read

So, I did it again! In the near future, I plan to blog more often (this time for real). But, meanwhile, my blogging setup felt a bit dated. So I re-factored it again. How?

I used Anthropic’s Claude Sonnet (first 3.5, then 3.7) to help me refactor stuff. Claude lives inside my new favourite code edi…

Antique Typewriter on Dark Wood

LanguageTool

Linkpost| In Blogging
| 1 minute read

When writing my post on renovations, while mentioning automatic link checking and automatic HTML checking, I thought to myself: “Hey, how about automatic spell-checking?”. After all, OSes, word processors, etc. come with some built in spell checking.

Some research pointed me at LanguageTool. It’s free for basic use, open source, built in Europe, and has credible customers. It also supports multiple languages. And Markdown. What’s not to love?

(BTW, this is my first post in the “link post” format, popularized by John Gruber and others. These are short posts about cool, useful, or otherwise interesting links I found on the web. Just click on the post title to check it out.)

A construction crane with some steel beams.

Blog renovations (again)

| In Blogging
| 9 minute read

A long time ago (2017), I wrote about modernizing my blog’s infrastructure. Guess, what: Time to modernize again! Back then, I migrated from Drupal to a self-written, Jekyll-inspired static site generator written in Python (my current language of choice for most projects). I spent the majority of th…

A big, friendly, sign that says ‘Hola’.

Welcome Back!

| In Blogging
| 2 minute read

A lot has happened since I changed my job more than 5 years ago.

I learned new stuff, met a lot of customers, blogged and podcasted (though on other platforms), and I didn’t get to give this blog much care.

drupalhtml5.jpg

How to Easily Add HTML5 YouTube Videos to Your Drupal Site

From the archive| In Blogging
| 4 minute read

For my last article, I wanted to include a couple of videos from YouTube.

First, I pondered using the standard YouTube embed code, but I wanted a more simple, elegant solution. The Drupal RepTags module supports powerful macros and it comes with some pre-built YouTube macros, so that wasn’t bad.

But I wanted more: HTML5. Read on and see how easily you can create your own Drupal RepTags, including the code I use to add HTML5 support for the Drupal YouTube RepTag.

DrupalKey

How to Get Drupal to Work Through Strato’s SSL Reverse Proxy

From the archive| In Blogging
| 7 minute read

Yesterday, I had two hours in a cafe, a Cappuccino on my table, a piece of lemon cake and free WLAN. “Cool”, I thought, “I’ll write an entry for my blog!”. How romantic. Right after I entered my blog user’s password, it dawned on me: The connection to my blog wasn’t encrypted! Anyone able to sniff on the local WLAN would have been able to catch my password as I entered it and steal my blog user ID! It took me some time (slightly more than the 2 hours I had…) to figure this out, so here’s a howto on how to make your login/admin tasks secure for a Drupal instance running on Strato as the hoster.