Hey there,
Long time no see, I was busy dealing with a burn out and preparing an upcoming surgery at the same time, funny moments lmao 🙃.
You're reading this post so yeah, the surgery went pretty well, I'm good now.
I even had the luxury to going out from hospitalization and discovering the city under the snow (well… while trying to walk correctly).
After the hard part of recovery, to avoid boredom I decided, since the site was down anyway, to recode Vanilla List, but this time on a stack I could manage (bye rails & postgres).
Goals: fast & light, statically-generated, and without the Hugo pain-in-the-ass templating language.
I tried Eleventy: it was simple, easy to setup, fast and I could handle the templating how I wanted. This last point was really great, I had a lot of fun playing with Nunjucks and JavaScript Template literals.
Actually it took me some time to make something functional while being high on meds half of the time and with a attention span of max 30s. 😅 But hey it's working for now.
At the end I seized the opportunity to redesign+rewrite the frontend part and tried my best to optimize it.
👉 Enjoy the new Vanilla List!
That's it for the news. 2020 was a rough year for me and I don't expect 2021 to be better.
But I'm not alone at Glitch.Family (my “two-women-one-cat-and-some-friends little studio” as I like to call it) and we're hoping to push some ideas on Souvenir in the future:
For now the RSS reader project is on pause. Milia made a working prototype but I currently don't have the time to really work on the design.
Soooo i guess see you next time 👋 … or on Github… or on the new Glitch.Family Twitter account (yeah we're on this hellsite) 👀
We just started a new project the last few days at Glitch Family: a RSS web reader. For now there is just prototype of feed crawler on the Milia side and on mine I started designing some user flow.
So if I have the time and energy available, maybe there will be some update coming up.
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.
