4 ms·

I just settled on https://oxal.org/projects/sakura/ https://oxal.org/projects/sakura/ and added a handful of lines for my grid view widget, that's all. Maybe i

I just settled on https://oxal.org/projects/sakura/ https://oxal.org/projects/sakura/ and added a handful of lines for my grid view widget, that's all. Maybe it's me, but I originally learned that the concern of CSS is to make a document look pretty. Not magic CSS classes or inline styles (or both, this bugs me on tailwind), so the recent "shift" towards "classless css" is very appealing. Sidenote: Yes, the screenshots could be way smaller, but originally I had them full-width instead of the current thumbnail, and still thinking about how to present this as lean as possible. Thanks for the feedback, though!

thomasfortes 6y ago
I use the picture tag with a bunch of media queries to deliver optimized images for each resolution in websites that I build, resizing a 1080p image to only 200px width does wonders to mobile performance while keeping it perfect for full HD monitors.
- anonyfox 6y ago
  Since Zola has an image resizing feature and shortcode-snippets, this could be a nice way to automate things away (i‘d hate to slice pictures for X sizes by hand). Will have a look, thanks!
  - fuzzfactor 6y ago
    Your pages are excellent by comparison to comparable offerings of similar information density mostly seen. But there's always room for experimentation. How about preserving a copy of your portfolio page now (and the PNG files it's now using) and giving it an address like /portfolioOLD? Then using an image editor, ruthlessly resize/resample-at-lower-bit-depth one of your PNG's so their actual rectangular pixel dimensions are about the same size that they appear on a full-size monitor now. Then ruthlessly compress it until it looks just a little less high-quality than it does now. Just a little bit, you want to be able to tell the difference but you don't want other people to notice. These are just thumbnails anyway. Use these editor settings on the rest of the PNGs, renaming them accordingly as you go. Deploy the new portfolio page linking to the resized renamed thumbnails instead. Just guessing, but I expect it can bring the load time down to about 10 percent of the old portfolio. And it would be really easy for anyone to A/B test and get representative numbers. This is how we used to party like it's 1999.
oxalorg 6y ago
Thank you for using sakura.css, really appreciate it and glad you enjoyed using it! ^_^ On the other hand, I really enjoy working with tailwind. Having html and css "together" works really well with my mental model, and I can iterate very fast with it. Though setting up tailwind is a bit of a pain, and I still use sakura + good old css everywhere I possibly can.

thomasfortes 6y ago

I use the picture tag with a bunch of media queries to deliver optimized images for each resolution in websites that I build, resizing a 1080p image to only 200px width does wonders to mobile performance while keeping it perfect for full HD monitors.

anonyfox 6y ago
Since Zola has an image resizing feature and shortcode-snippets, this could be a nice way to automate things away (i‘d hate to slice pictures for X sizes by hand). Will have a look, thanks!
- fuzzfactor 6y ago
  Your pages are excellent by comparison to comparable offerings of similar information density mostly seen. But there's always room for experimentation. How about preserving a copy of your portfolio page now (and the PNG files it's now using) and giving it an address like /portfolioOLD? Then using an image editor, ruthlessly resize/resample-at-lower-bit-depth one of your PNG's so their actual rectangular pixel dimensions are about the same size that they appear on a full-size monitor now. Then ruthlessly compress it until it looks just a little less high-quality than it does now. Just a little bit, you want to be able to tell the difference but you don't want other people to notice. These are just thumbnails anyway. Use these editor settings on the rest of the PNGs, renaming them accordingly as you go. Deploy the new portfolio page linking to the resized renamed thumbnails instead. Just guessing, but I expect it can bring the load time down to about 10 percent of the old portfolio. And it would be really easy for anyone to A/B test and get representative numbers. This is how we used to party like it's 1999.

oxalorg 6y ago

Thank you for using sakura.css, really appreciate it and glad you enjoyed using it! ^_^ On the other hand, I really enjoy working with tailwind. Having html and css "together" works really well with my mental model, and I can iterate very fast with it. Though setting up tailwind is a bit of a pain, and I still use sakura + good old css everywhere I possibly can.