What Am I Doing Now?

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

RSS
March 01, 2021 โ€” Permalink

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).

The hospital courtyard under the snow

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!

New design showcase

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:

  • Gif History: Consult and re-dl your precedents gifs
  • WebShare API: Share your souvenir more easily to contacts or to other apps on your phone
  • Vue3 & Parcel2 upgrade

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) ๐Ÿ‘€

August 09, 2020 โ€” Permalink

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.

User interface prototype

June 15, 2020 โ€” Permalink

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!

undefined

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.