What Am I Doing Now?

A status list of what Iā€™m focused on

RSS
March 17, 2020 ā€” Permalink

How to make colored placeholder on Hugo

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:

colored placeholder example

The trick is pretty simple in itself:

  • Firstly use the Hugo's image processing to generate a version of your image resized at 1px by 1px (your image must be a page resource).
  • Secondly generate a base64 version using the `base64Encode` function.
  • Then add it as an inlined background-image using the base64 version prefixed by the media type. That way this image not gonna be an external resource and will be visible before your final image.
  • Finally specify your image size to define a space for your placeholder to expand

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!

March 09, 2020 ā€” Permalink

The fediverse webradio project is finally online on radio.eldritch.cafe!

undefined

February 29, 2020 ā€” Permalink

Still on the mastodon webradio project, I'm working on the last part of the interface: the settings page.

settings page

February 23, 2020 ā€” Permalink

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!

undefined

February 23, 2020 ā€” Permalink

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:

February 13, 2020 ā€” Permalink

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.

player showcase with a right triangle volume control

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:

an animated demo of triangle volume control

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!

February 12, 2020 ā€” Permalink

Result of me trying to integrate a volume control in a music player I'm working on.

Volume Controls Playthrough

undefined

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.

February 12, 2020 ā€” Permalink

I had fun doing this logo and little animation for an upcoming side project.

I used the great Inter typeface.

Eldritch Radio animated showcase

February 12, 2020 ā€” Permalink

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:

February 11, 2020 ā€” Permalink

It's almost a year since the first version of Souvenir.

To celebrate, I moved it from an Glitch.Family sub-domain to its own domain: souvenir.cam

Showcase of app's main screens