Once in a while doesn't harm, this isn't a tech post but a few photos from a little trip to a park. It's been a while with the pandemic so it was very much appreciated!
While using Hugo as a static site generator, I've found a way to generate a colored placeholder with a little trick.
I used it on my music sharing website for example:
The trick is pretty simple in itself:
The final result will look at something like that:
{{ $original := resources.Get '/img/your-image.jpg' }}
{{ $visual := $original.Resize "x400" }}
{{ $placeholder := $visual.Resize "x1" }}
<div style="background-image: url(data:{{ $placeholder.MediaType }};base64,{{ $placeholder.Content | base64Encode }});">
<img src="{{ $visual.Permalink }}" width="400" height="400">
</div>
To go a bit further, I can imagine a solution where you generate a placeholder of 50x50px and add a background-size: cover in your css to have a blurred version for your placeholder.
Don't hesitate to contact me if you use this trick on your own project. I'm always curious of what can be done with it!
The fediverse webradio project is finally online on radio.eldritch.cafe!
Still on the mastodon webradio project, I'm working on the last part of the interface: the settings page.
I added a sticky player I designed a few weeks back.
It was also the opportunity to use the Intersection Observer API, it was great!
Hey, I have some news since we worked on Eldritch Radio this weekend with Milia.
Queue list is now integrated:
We added a sharing feature, which allows you to send a link to the radio by starting it with a song of your choice. A great way to share the radio to your friends!
In the same vibe than the queue current track icon, i had great time animating the checkbox icon:
Then today I added the “small” player version, by modifying the CSS grid:
Update on my volume control work: I decided the control should be always visible, showing it only on hover would risk to be too tricky for the user. On the affordance side, just a regular slider wouldn't be very explicit.
So i tried to make something similar to the Vimeo player: a right triangle.
The next question was: would it be codable, since i wanted to keep it as an input type="range" (for accessibility reason but also because i didn't wanted to code all the component's interactivity).
Spoiler: I've successfuly done a working prototype!
It's working only on Firefox (my main browser) for now, because of the browser-specific pseudo-elements, but I'm planning to use a PostCSS plugin (like this one) to do the dirty work for me.
For the people on another browser, i should looks like this at the end:
Customizing an input type="range" is mainly made with pseudo elements, but my main difficulty was making a triangle shape with rounded edges. To achieve that i used the very useful property clip-path. It allow to creates a mask around your element with a shape you choose. It could be a polygon, but also a svg path.
This is this last option that was useful: I've just had to copy/paste my svg path from my UI design app (Figma ā¤ļø) and that was it, i had a beautiful volume control!
Result of me trying to integrate a volume control in a music player I'm working on.
Two solutions. The first one on mouse hover, the second is always visible. Maybe more easly usable but less obvious it's a volume control. Still work in progress tho.
I had fun doing this logo and little animation for an upcoming side project.
I used the great Inter typeface.
I used the Light and dark themed SVG favicon article to make my own on my website. It's really easy, here is it in action:
