5 ms·

Soundslice (https://www.soundslice.com/ https://www.soundslice.com/) — a website built around interactive/responsive sheet music, rendering the music entirely i

Soundslice (https://www.soundslice.com/ https://www.soundslice.com/) — a website built around interactive/responsive sheet music, rendering the music entirely in client-side JS — doesn't use JavaScript frameworks or libraries. I'm the developer of Soundslice and continue to be happy with the vanilla JS decision, 8+ years into the company. It means better performance, clearer code, smaller JS filesizes. I gave a talk about it here: https://www.youtube.com/watch?v=VvOsegaN9Wk https://www.youtube.com/watch?v=VvOsegaN9Wk ("A framework author's case against frameworks") and here: https://www.youtube.com/watch?v=XH5EtQge_Bg https://www.youtube.com/watch?v=XH5EtQge_Bg ("How I optimized my JavaScript sheetmusic rendering engine")

baxuz 7y ago
Amazing site. I noticed one thing that could easily improve the feel of the site — the sheet music playhead which is outside of the canvas. You are using fractional units to position it, but you're also using left/top/height properties which can't be fractional. If you convert these to GPU translated layers via translate, you'll get a smoother playhead since these can be positioned fractionally, plus you'll cut down on the repaints! Here's an example: https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fstyles.css&theme=dark https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hide...
- PudgePacket 7y ago
  The bars are identical for me. 4k monitor with firefox on windows. Could it be something to do with resolution?
  - baxuz 7y ago
    It's a firefox bug. I needed to add a very fine rotation for it to render subpixel, so you can try again. You can also see the repaints if you open up the dev tools: https://i.imgur.com/A8btxpu.png https://i.imgur.com/A8btxpu.png
- adrianh 7y ago
  Oooh, thanks very much for this! Will poke around...
- adrianh 7y ago
  Just wanted to say thanks for this tip. It's now implemented live on Soundslice! :-)
mromanuk 7y ago
I checked out the rendering of those scales, beautifully done!
- baxuz 7y ago
  <3

baxuz 7y ago

Amazing site. I noticed one thing that could easily improve the feel of the site — the sheet music playhead which is outside of the canvas. You are using fractional units to position it, but you're also using left/top/height properties which can't be fractional. If you convert these to GPU translated layers via translate, you'll get a smoother playhead since these can be positioned fractionally, plus you'll cut down on the repaints! Here's an example: https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fstyles.css&theme=dark https://codesandbox.io/s/magical-wind-mptqn?fontsize=14&hide...

PudgePacket 7y ago
The bars are identical for me. 4k monitor with firefox on windows. Could it be something to do with resolution?
- baxuz 7y ago
  It's a firefox bug. I needed to add a very fine rotation for it to render subpixel, so you can try again. You can also see the repaints if you open up the dev tools: https://i.imgur.com/A8btxpu.png https://i.imgur.com/A8btxpu.png
adrianh 7y ago
Oooh, thanks very much for this! Will poke around...
adrianh 7y ago
Just wanted to say thanks for this tip. It's now implemented live on Soundslice! :-)

mromanuk 7y ago

I checked out the rendering of those scales, beautifully done!

baxuz 7y ago
<3