Finally had a proper look at @eleventy.

I really like that it can be as simple or as complex as you want it to be.

I'm not quite sold on it for hosting blogs (yet), but I've migrated a few of my smaller projects for which I've used a simple node app (mainly to take advantage of templating).

Huge improvement in memory consumption! For example, https://simplepagebuilder.app went from 67.89MB down to just 6.07MB.

Nice!

#webdev #11ty #eleventy

A simple page builder app by @stefan@stefanbohacek.online

Design your own personal page and find tools to host it for free.

^{simplepagebuilder.app}

This short history of web development is a useful overview for me as I haven't kept close tabs on the field. The post seems to cover all the main frameworks but a notable omission is Tailwind CSS.

https://gebna.gg/blog/brief-history-of-web-development

#retrocomputing #WebDev

A brief history of web development. And why your framework doesn't matter.

This is how I remember the crazy journey that web development has gone through in the past few years. Or rather this is *my* journey being a web developer. So I will omit events. I may mess up the timeline.

^gebna.gg

React Three Fiber Browser Games For Desktop & Mobile

A little while ago I started my adventure in React Three Fiber and I have created some browser based games and flashy sites in the meanwhile.

https://stux.me/web-dev/react-three-fiber-browser-games-for-desktop-mobile/

#WebDev #R3F #ReactThreeFiber

#tinySVGtip Better gooey effect with no matrix filter!

Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).

The assembly containing them gets an SVG filter as below.

Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG

#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment

7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK

A simple #SVG filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the gradient stops... magic! 🪄✨

#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

6⃣ 688 ❤️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv

A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091

#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment

5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qByGqOm

JS used only for
a) feature support detection
b) updating slider value in a --val

Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler

#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment

4⃣ 736 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd

The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/

Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.

#3D #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment

3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE

Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev

2⃣ 841 ❤️ neon hex https://codepen.io/thebabydino/pen/zGmdep

Most people know my CSS stuff, but this was my most hearted Pen for some three quarters of a decade... and it's a #canvas one! The JS feels dated nowadays, but oh, well... still my favourite out of this top 3.

#js #javascript #code #coding #frontend #web #dev #webDev #webDevelopment

I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:

1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv

My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!

#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev

8⃣ 496 ❤️ Pure #CSS 3D toggle with only input[type=checkbox] + label https://codepen.io/thebabydino/pen/ajpqYW

(awfully hacky, but cool-looking result... which nowadays I'd probably try to get with an SVG filter 🤔)

#3d #toggle #checkbox #css3D #code #coding #frontend #web #webDev #webDevelopment #dev

https://ttntm.me/albums/ -- use case no. 2 for my #Eleventy `customFilter` shortcode that's already been used for the /whisky page.

I did half an hour of refactoring last night, replaced an event handler with an IIFE and that was it pretty much. I ended up with code that's perfectly composable, takes a minimal configuration object and processes both collections and data files - nice 🤤

Reminder for self: good topic for a longer article.

#WebDev

Albums

A list of albums that I don't want to forget about.

^{Tom's Homepage}

Been watching/listening to the #11ty International Symposium off and on all day today. I probably would not appreciate it as much as I do if I hadn't learned and used #React back in 2022. There are definitely a lot of use cases for statically generated sites, and the benefits of performance are definitely appealing.

https://www.youtube.com/live/iLxJ6PtuF9M?si=Q6I2NNLcTNK0UB_R

#webdev #webdevelopment #frameworks

The 11ty International Symposium on Making Web Sites Real Good (Live stream)

https://conf.11ty.dev/00:00:00 Countdown00:20:05 Kickoff!00:35:56 Future of 11ty by Zach Leatherman01:09:50 Hints & Suggestions (First, Do No Harm) by Miriam...

^YouTube

Main motivation: catching up on the @eleventy #Conference talks yesterday and listening to @zachleat talking about the projects future.

Next steps: playing with the eleventy-img plugin and figuring out a caching on CF pages.

#WebDev

Double bubble! 🫧

On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of #CSS trickery and a simple #SVG #filter! 🪄

Live on @codepen
https://codepen.io/thebabydino/pen/NWmBmrZ

#CodePenChallenge #svgFilter #CodePen #text #textEffect #code #coding #frontend #webDev #webDevelopment #web #dev #scrollAnimation

Succintly wrote about how I migrated my personal website from #NextJS to #eleventy ! ^^

Check it out:

https://www.conor.zone/en/blog/migrating-my-website-from-next-to-11ty.md.html

#webDev #blog

🚨🚨🚨 new blog post alert 🚨🚨🚨

I did a little write up about a prototype browser-based visual scripting language I made

Take a look!!!!!!

https://blog.seedganggames.com/flowgrammer/

#webdev #indiedev #typescript

🚀 Excited to share my latest article detailing the step-by-step process of creating a high-performance blog site with @eleventy and @storyblok!

Read the full article here: https://estelafranco.com/blog/eleventy-storyblok-3/

#WebDev #Eleventy #11ty #Storyblok #CMS #StaticSiteGenerator

Create a Blog with Eleventy and Storyblok

This is a step-by-step tutorial on how to create a blog site using Eleventy and Storyblok.

^{estelafranco.com}

#tinySVGtip How do you create an *inset* shadow on an `img` element?

You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

SVG filters to the rescue for an elegant solution!

✨ offset & blur image
✨ subtract it out of original image alpha ⇒ get black inner shadow
✨ paint it 🍊
✨ place it on top of img

#SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment

This is AWESOME!

Thank you for developing this incredible plugin, @zachleat!

Now at #11tyconf: https://www.youtube.com/watch?v=iLxJ6PtuF9M

#11ty #eleventy #webdev

📣 We’re hiring for a DevRel position!

Love teaching about web development, traveling to conferences, and working with a small, remote team? You might just be who we’re looking for.

https://www.workwithcraft.com/jobs/developer-relations-engineer #CraftCMS #WebDev #DevRel

Developer Relations Engineer

Pixel & Tonic, the team behind Craft CMS, is looking for an experienced Developer Relations Engineer to help continue to improve Craft CMS.

^{Double Secret Agency}

Today I optimized https://linuxdaw.org with a new image scheme.

Up until now I've downloaded an original image from the deveoper and made 2 smaller versions of it in the same format.

Now I make 3 copies and instead use the webp format (https://en.wikipedia.org/wiki/WebP) which is much smaller and optimized.

The results in a faster and better site!

#linuxdaw #linuxaudio #webdev #webp

Linux DAW

Quality audio software for Linux Audio Production such as LV2, VST2, VST3, and CLAP effects, synthesizers and sampler plugins.

^{Linux DAW}

Service overview and uptime page with Kuma Uptime

With a bunch of free web services a status or uptime page is also a must. Luckily there are beautiful self-hosted solutions like Cachet and Kuma Uptime.

https://stux.me/web-dev/service-overview-and-uptime-page-with-kuma-uptime/

#WebDev #KumaUptime #service