@bfgeek.bsky.social
Pinned
bfgeek.bsky.social
@bfgeek.bsky.social
· Sep 13
Exploiting flex-grow for an Image Gallery
How to build a full-bleed Image Gallery with flexbox.
bfgeek.com
I've finally got around to documenting a cute way of building an Image Gallery with flexbox:
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
This was the cross-over I didn't know I needed.
November 13, 2025 at 4:54 AM
This was the cross-over I didn't know I needed.
When John Carmack shares one of your C++ ideosycricanies:
a baby wearing a penguins jersey holds up his fist in the air
ALT: a baby wearing a penguins jersey holds up his fist in the air
media.tenor.com
October 31, 2025 at 3:22 AM
When John Carmack shares one of your C++ ideosycricanies:
Reposted
Yes, but the browsers have implemented this optimization differently.
WebKit/Firefox have the same optimization in that they use (effectively) a linked-list of HashMap(s).
There are some performance cliffs with this - lookups can be slow, e.g. you check a HashMap, then check its parent, etc.
WebKit/Firefox have the same optimization in that they use (effectively) a linked-list of HashMap(s).
There are some performance cliffs with this - lookups can be slow, e.g. you check a HashMap, then check its parent, etc.
October 13, 2025 at 6:52 PM
Yes, but the browsers have implemented this optimization differently.
WebKit/Firefox have the same optimization in that they use (effectively) a linked-list of HashMap(s).
There are some performance cliffs with this - lookups can be slow, e.g. you check a HashMap, then check its parent, etc.
WebKit/Firefox have the same optimization in that they use (effectively) a linked-list of HashMap(s).
There are some performance cliffs with this - lookups can be slow, e.g. you check a HashMap, then check its parent, etc.
I've finally got around to documenting a cute way of building an Image Gallery with flexbox:
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
Exploiting flex-grow for an Image Gallery
How to build a full-bleed Image Gallery with flexbox.
bfgeek.com
September 13, 2025 at 5:55 PM
I've finally got around to documenting a cute way of building an Image Gallery with flexbox:
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
bfgeek.com/flexbox-imag...
This technique maintains image aspect-ratios, and ensures there is no additional free space (full-bleed).
Let me know what you think!
(@bram.us - I got around to this!)
This is an awesome proposal that the Microsoft Edge engineers have been working on.
It extends the existing column-rule-* properties to work for all gaps in an intuitive way. If you are interested I'd encourage you to try it out.
The repeat() syntax is really nicely with arbitrary sized grid/flex.
It extends the existing column-rule-* properties to work for all gaps in an intuitive way. If you are interested I'd encourage you to try it out.
The repeat() syntax is really nicely with arbitrary sized grid/flex.
You can now play with CSS gap decoration in Chromium 139+!
Learn more: developer.chrome.com/blog/gap-dec...
Try it out (current Canary w/experimental web platform features flag): microsoftedge.github.io/Demos/css-ga...
Learn more: developer.chrome.com/blog/gap-dec...
Try it out (current Canary w/experimental web platform features flag): microsoftedge.github.io/Demos/css-ga...
June 11, 2025 at 4:34 PM
This is an awesome proposal that the Microsoft Edge engineers have been working on.
It extends the existing column-rule-* properties to work for all gaps in an intuitive way. If you are interested I'd encourage you to try it out.
The repeat() syntax is really nicely with arbitrary sized grid/flex.
It extends the existing column-rule-* properties to work for all gaps in an intuitive way. If you are interested I'd encourage you to try it out.
The repeat() syntax is really nicely with arbitrary sized grid/flex.
Massive congratulations to the Edge team for sending out the intent to ship for subgrid. The Edge team always impresses me with the attention to detail they bring to a project, and quality of implementation.
https://groups.google.com/a/chromium.org/g/blink-dev/c/qvfOyAVePfs/m/S04XMmTlCwAJ
https://groups.google.com/a/chromium.org/g/blink-dev/c/qvfOyAVePfs/m/S04XMmTlCwAJ
Intent to Ship: CSS Subgrid
groups.google.com
June 15, 2023 at 4:18 PM
Massive congratulations to the Edge team for sending out the intent to ship for subgrid. The Edge team always impresses me with the attention to detail they bring to a project, and quality of implementation.
https://groups.google.com/a/chromium.org/g/blink-dev/c/qvfOyAVePfs/m/S04XMmTlCwAJ
https://groups.google.com/a/chromium.org/g/blink-dev/c/qvfOyAVePfs/m/S04XMmTlCwAJ