DEV Community: Sergi Miral

One Byte Explainer: Web MIDI API 🎹

Sergi Miral — Tue, 26 Mar 2024 13:38:25 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

The Web MIDI API connects browsers to MIDI devices, enabling interactive music creation and control directly in web apps. With user permission, it turns your browser into a versatile musical instrument or controller hub.

Additional Context

A few years ago I built allthemidi, a suite of WYSIWYG apps to build custom MIDI controllers, leveraging the Web MIDI API for its core functionality.

My goal was to make it available as an iOS app for my iPad. However, due to Safari's lack of support for this API at the time, I had to engineer a workaround that facilitated communication between the browser and the native client.

Building the the bridge between JS to Obj-C/Swift bridge was challenging but once I figured it out it was music to my ears 🎹🎶🥳 I ended up publishing different apps for each controller type (knobs, faders, pads & toggles).

The iOS apps are not available in the AppStore anymore simply to avoid the yearly developer's license. For now you can enjoy the web version ✨

CSS Art: Favorite Snack 🍫

Sergi Miral — Tue, 26 Mar 2024 13:06:13 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Smores, CSS & more… (but no JS!⚡️)

Demo

Click to assemble! ✨

Journey

I didn't have much time to put this together and I've only tested in on Chrome so far. I might still do some tweaks before the deadline ;)

Glam Up My Markup: Camp Activities 🔥

Sergi Miral — Sat, 23 Mar 2024 13:24:46 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

A lively and colourful form experience, enhancing the given markup just with CSS and JS, without touching a line of HTML 💅✨

Demo

Journey

Just for reference here's the provided markup:

So I got started:

Style the form (yay, easy)
Spent too much time styling a select box (argh, again…)
Realised that the dropdown was boring…
Realised that the whole form was boring…
At this point I didn't want to go to the camp anymore…

Then I thought:

Is there a nice piece of content in this form?
Maybe we should give more importance to the activities?
How can we make them more visible?
What if they were radio buttons?

And then I did this:

Add custom UI to fill the original form.
Use css variables for easy customisation.
Add generative landscape background by @qub3r-001🏆🙏
Add icons from The Noun Project by Estudio Poncho, Katie Watson, Michael Finney, Thanga Vignesh & Grégory Montigny. 🏆🙏
Change global color based on selected activity.

Oh, btw:
I couldn't use the mask-image approach for the SVG icons in the textarea fields. Doing so would also mask the background and the border of the input box… Thoughts?