What Am I Doing Now?

A status list of what I’m focused on

RSS
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!

undefined

In the same vibe than the queue current track icon, i had great time animating the checkbox icon:

undefined

Then today I added the “small” player version, by modifying the CSS grid:

undefined

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