Logs.Now

Grief & Online Presence

Fri, 15 Nov 2024 06:32:00 +0000

Little personal online advice from my personal experience (I’m not super good with words so I’ll keep it short).

I know you mean no harm but please, to someone opening themselves online about the struggling of dealing with some recent griefs and the cruelty of their world:

Don’t send unsolicited suggestions on what they should do to go through this (like starting yoga, meditation or some spiritual journey for example).

Even if it feels relevant to you at the time. This is not the best time for that I assure you.

Please, keep in mind that everyone grieve their own way. Think twice before pressing the “send” button in those situations 🩷

🕯️ Imni

Wed, 13 Nov 2024 15:04:00 +0000

Fuck this world, we miss you 💔

Git as a way to gatekeep developers

Wed, 19 Jun 2024 18:05:00 +0000

Today, I’ve read Mayank’s Mastodon posts about how git knowledge as a tool is often used — more or less subtly, as a way to exclude people from considering themselves good as developer (whatever that means).

And I completely relate and agree with that.

To directly quote them:

You don't need to know Git to be a good developer

[…]
Is Git still useful to know? sure.

but knowing Git inside out is not a requirement for you being a good developer. it's just a tool for managing code.

~ Mayank (@mayank@front-end.social)

I relate because yeah, from my experience of my many years finding my way in diverse tech communities, it’s full of ~~dudes~~ people spending a lot of energy finding ways to gatekeep their “precious” knowledge (🙄) like newcomers were going to remove something from their own identity. *sigh*

I felt the need to share their words in case it could help them enter some minds. But also to add my own experience to it.

Command line is not required

I often saw and experienced myself, Git is being introduced through its Command Line Interface, aka writing commands in a terminal.

And as I can humbly affirm that I’m “pretty good with git”. I understand how it works, how to do diverse tasks to achieve collaboration between people in plenty of different configurations.

I however, never really spent time learning the git CLI. I always work with a graphical client and get shit done.

For those few exceptions where I have to use CLI (like with servers), it’s easy to search and find the commands when you know the actions you wanna do.

Also, as an additional opinionated point: the git CLI in prticular is shit, has a terrible developer experience.

So yeah, my advice would be to learn how Git works if you need to work with it. Its logic, what problem you face it can solves and the grammar around those solutions.
But don’t listen to gatekeepers deepshits, fuck them! 🖕 (Well actually no, don’t fuck them, no sex for gatekeeping techbros)

The graphical interface option

I personally use Fork as graphical client (available for macOS and Windows), as it has always delivered a great experience for the past ~5years.
I know coworkers from my previous job (on Windows and Linux) who were using Git Kraken too.
Some code editors, like VSCode to mention the most used, have extensions or a native integration in their interface that will do the job for 95% of your use cases.
If you’re on Linux, Flathub may be somewhere to start searching.

But there are be plenty of others!

As a conclusion

Tools are just tools: a way to get shit done. Obviously, there are materialistic parameters in our societies and industries that come into play. But things like tools, languages, frameworks and best practices comes and go. As long as achieve what you want (or have to to survive), ignore the noisy opiniatred dudes. This is a lost of time, and they’re even often wrong.

Screw the command line “religion” and the technocratic mindset that comes with it.

Sharing my bookmarklets

Mon, 11 Mar 2024 19:45:50 +0000

I’ve decided to gather the few bookmarklets I use regularly in one place, to be easily findable and sharable. So if you’re interested everything is over there:

→ https://github.com/TixieSalander/awesome-bookmarklets

What a bookmarklet you would ask me?

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.

~ from Wikipedia

02/04/2024 12:52 AM

Sat, 03 Feb 2024 23:52:38 +0000

End of another chapter, not expected.

2023, End of a chapter

Wed, 20 Dec 2023 00:04:10 +0000

It’s the end of a chapter, after 7 years working as lead frontend dev and accessibility advocate in a wonderful web engineering agency, since the beginning of December I leaved my post (in good terms) to focus entirely on recovering from a long-ass never-ending burnout I was dealing for the past 2 or 3 years.

And then, I don’t know maybe, find a way to create stuff I’m in love with again, in a more independent way?

Big step to the unknown, but fuck it we only have one life.

Feel free to follow and support me into this new part of my journey, as this chapter have a name: Guérilla.Studio, a small collective with the goal to improve the web one radical step at a time.

Let’s make beautiful things with no hope! 💜

Gallery:

09/21/2023 2:46 PM

Thu, 21 Sep 2023 12:46:54 +0000

I have some big news I’ll be finally able to share with you in a few weeks. Can’t wait!

08/20/2023 10:20 PM - Stop placing people on pedestals

Sun, 20 Aug 2023 20:20:07 +0000

Please stop placing people on pedestals. There are just people!

And I’ll would add: few of them are good people (and yet, only people) and some other are piece of shit (you don’t know it yet).

So yeah, burn your idols and just chill out folks 💜

07/25/2023 2:53 AM

Tue, 25 Jul 2023 00:53:15 +0000

Today my long term friend Hécate, published their own version of Now Playing so I made a few tweaks on my codebase to allow any folks to easily customize the accent hue and have a personalized theme.

You can check out the two versions their here: https://music.glitchbra.in
And here an showcase of the two website side by side:

Starting Fedi Monster revamp

Sat, 15 Jul 2023 23:59:00 +0000

I recently started working on a branding and web design revamp for our friends at Fedi.Monster

For now I’ll just share a peak at the new logo and their cute mascot.

For the rest, stay tune, it’s gonna be out when… well when ready, considering I’m doing it on the side and my energy level is still as low as possible.

05/26/2023 5:35 PM

Fri, 26 May 2023 15:35:32 +0000

I made this little something for Guérilla.Studio. Don’t know if it’s a final version but fuck it, it’s the web, I can update it later if I want 🤷‍♀️

My humble EDM Playlist

Fri, 26 May 2023 14:34:53 +0000

It was originally made for myself but since the few people I’ve shared it with loved it, It might as well be shared with everyone. So here, have this little Spotify playlist of ~Electronic Dance Music (EDM)~:

→ https://link.guerilla.studio/mix/edm

Testing the new experimental viewTransition API

Thu, 25 May 2023 22:05:33 +0000

I’ve been playing with the experimental ViewTransition API, and with the new “viewTransition API for navigations” that allow with just a few lines of CSS to define the common elements between pages from a classic website and get that smooth transition on page change.

This is for now experimental and only in the latest Chrome/Chromium under flag, so it demand some step to be able to play with it.

But by adding only a meta tag and few lines of CSS I made it working on Now Playing, my favorite music collection:

Sorry, your browser doesn't support embedded videos, but don't worry, you can download it and watch it with your favorite video player!

CompteurDeGrève is now open-source

Wed, 24 May 2023 16:09:55 +0000

I finally took the time to make a static postmortem version of CompteurDeGreve.fr and publish the website’s source code. It’s now available on Github.

This project had as goal to offer an independent platform to count the participation during the French strike of March 7th of 2023 against Macron’s pension reform(/destruction) for helping improving engagement around that date. The second goal was to gather resources on why and how participate in the mobilization.

I worked on the website’s design during a weekend and coded it with the help of Milia during a sleepless night of early March. Kind of a guerrilla type of project, since we didn’t had much time and we needed to get it published as soon as possible.

I used Eleventy as builder and a mix of Netlify’s On-Demand Builder and AlpineJS in a progressive enhancement mindset.

Eleventy easy integration with Netlify’s “on-demand builder” servers functions allowed to quickly serve the static website containing a slightly outdated version of the counter: the number fetched from the API at build time and a new version was updated (if needed) at best every 15min.
Then the JavaScript would handover and update the counter by pooling the API directly from time to time. That way even if JavaScript was disabled or had crashed, we would have a pretty accurate counter.

I’m pretty happy on how quickly i was able to make a responsive version thanks to fluid typography (cf third gallery image).

Some improvements could have been done:

Improve clarity of states changes when handled with JavaScript through ARIA semantic.
A more advanced shared cookie exchange with the API would have allow to directly display the “already-clicked” message when coming back to later on the page.

We also had a possible delayed feature to generate on the go social cards (open-graph/twitter card).
The idea was to include a dynamic message "{number} people gonna go on strike. It’s more than the population of {city}!" to help create some engagement while the counter was increasing.
A prototype was made, but I never had the energy to implement it after the big crunch.

Anyway, thank you again Salomé (who worked on the counter API) and Caroline De Haas (who initiated and managed the project) for this collaboration ❤️. It was a intense but great experience!

Gallery:

05/24/2023 5:41 PM

Wed, 24 May 2023 15:41:30 +0000

My little studio (renamed Guérilla.Studio) now have an actual homepage.

Nothing fancy, just the informative bare minimum, but at least it exists: https://guerilla.studio

White-noise audio loops from Archive.org

Sat, 18 Feb 2023 00:32:28 +0000

I’ve recently came across this collection of few white-noise audio freely available on the Archive.org’s Community Audio:

→ https://archive.org/details/whitenoiseloops

The collection includes 3 versions (Waterfall, Thunderstorm & Waves) and its loops so can be played (or use) on repeat over and over!

Published that way on Archive.org get the benefits of:

Be downloadable in a variety of formats (OGG, MP3, M3U, etc…) to match your needs.
A Web player directly available if you just wanna have a preview without download files or just listen through streaming.
It’s can been downloadable through Torrent, which means it’s also hosted in a relatively decentralized way.

The sounds looks unlicensed and the uploader used a burner email address so doesn’t seems interested to be contacted. So, just my humble opinion but feel free to enjoy and use them in your projects if you find them helpful.

It’s always gonna be better than using some random proprietary “noise” app, who can disappear overnight. Download and own your shit.

07/19/2022 10:08 AM

Tue, 19 Jul 2022 08:08:46 +0000

It may be heat messing with my head but hear me out:

Since they’re mostly working too much already, instead of sponsoring open-source contributors for work they had/are/will do, sponsor to make them take vacations!

For ~~dickheads~~ those who are practical, you can think it as a long term investment: reduce the (big) chance for your loved contributor to burnout (again) and end up with an unmaintained project.

11/21/2021 7:20 PM

Sun, 21 Nov 2021 18:20:23 +0000

Who would have guessed? Life isn’t getting better.

Waking up every day in a country falling into authoritarianism and fascism at a frightening speed. Having to buy some of my everyday meds with crypto on the black-market just be able to live because it’s not commercialized anymore. My exhaustion keep increasing at the same speed that any interests feels more and more unappealing.

I don’t know what the future will be, but it looks quite bleak.

Anyway… I worked on Souvenir v2 design and code maintenance for a few days. The new features imply a deep refactoring of how encoding is made, and I don’t know how to deal with that so don’t expect anything soon.

Anyway, all I can share is a few photos from The Netherlands, where I probably spent some of the happiest days of this year.

Gallery:

03/01/2021 11:21 AM

Mon, 01 Mar 2021 10:21:08 +0000

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 Guérilla.Studio (my “two-women-one-cat-and-some-friends little collective” 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 Guérilla.Studio Twitter account (yeah we’re still on this hellsite) 👀

Gallery:

08/10/2020 12:23 AM

Sun, 09 Aug 2020 22:23:03 +0000

We just started a new project the last few days at Guérilla.Studio: 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.

06/15/2020 12:31 PM

Mon, 15 Jun 2020 10:31:42 +0000

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!

Gallery:

How to make colored placeholder on Hugo

Tue, 17 Mar 2020 18:41:53 +0000

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:

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!

03/09/2020 1:07 PM

Mon, 09 Mar 2020 12:07:20 +0000

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

02/29/2020 1:20 AM

Sat, 29 Feb 2020 00:20:12 +0000

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

02/23/2020 11:39 PM

Sun, 23 Feb 2020 22:39:04 +0000

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!

02/23/2020 1:32 AM

Sun, 23 Feb 2020 00:32:28 +0000

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:

Gallery:

02/13/2020 8:03 AM

Thu, 13 Feb 2020 07:03:25 +0000

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.

See the Pen Customized Range POC by Tixie (@Tixie) on CodePen.

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!

02/12/2020 3:25 PM

Wed, 12 Feb 2020 14:25:48 +0000

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.

Gallery:

02/12/2020 12:36 PM

Wed, 12 Feb 2020 11:36:15 +0000

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

I used the great Inter typeface.

02/12/2020 11:56 AM

Wed, 12 Feb 2020 10:56:47 +0000

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:

02/11/2020 6:09 PM

Tue, 11 Feb 2020 17:09:08 +0000

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

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