What Am I Doing Now?

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

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

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