5 ms·

Excellent! This is from the same author as "Modern JavaScript Explained For Dinosaurs"[1], that article got me much more closer to understanding the insane worl

Excellent! This is from the same author as "Modern JavaScript Explained For Dinosaurs"[1], that article got me much more closer to understanding the insane world of modern frontend development, I would recommend it to any other "dinosaurs" like me. I'm very excited about modern CSS, I grew up in the crazy world of floats and the transition to responsive, new concepts like flexbox and grid are much more sensible approaches to layout design. [1]https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 https://medium.com/the-node-js-collection/modern-javascript-...

avip 9y ago
Wow, I feel like going back in time and reading this to a younger self. Excellent writeup.
bringtheaction 9y ago
Thanks for the link, good and useful article indeed. What I miss from it though is an explanation of how to debug bundled or transpiled code. I am aware of the existence of source maps, but I've never used them. Until I am able to debug my code efficiently with source maps I cannot adopt bundling nor transcompilation for my projects. Does anyone have a good quality article or video that explains this?
- setr 9y ago
  I never used them myself but i thought the point of source maps was that the major browsers understand them; you load them in the browser on command, and can then debug from there, as you would normally with unbundled code
greggman 9y ago
I doubt it's ever coming but to really separate layout from content requires the layout tree and the content to be separate trees. Right now there's effectively only 1 tree, the DOM and CSS for the most part is just meta data on that tree. GRID requires things to actually fit a grid. If your grid isn't easily divided you add nested grids. But once you nest grids you can no longer seperate layout from content since the nested grid tree (layout) and the DOM tree (content) are tied together.
bwaxxlo 9y ago
I wrote an article[1] about this. It's aimed towards intermediate CSS peeps trying to understand how to organize CSS. It focuses on BEM mostly but still offers a decent look into managing CSS [1]: https://blog.kdamball.com/2017/12/28/maintanable-css-architecture/ https://blog.kdamball.com/2017/12/28/maintanable-css-archite...
pixelbash 9y ago
I grew up with floats and clearfixes, and while flexbox does a few things I couldn't do before I still find myself pulling up the flexbox cheat-sheet to get the correct syntax every single time.

avip 9y ago

Wow, I feel like going back in time and reading this to a younger self. Excellent writeup.

bringtheaction 9y ago

Thanks for the link, good and useful article indeed. What I miss from it though is an explanation of how to debug bundled or transpiled code. I am aware of the existence of source maps, but I've never used them. Until I am able to debug my code efficiently with source maps I cannot adopt bundling nor transcompilation for my projects. Does anyone have a good quality article or video that explains this?

setr 9y ago
I never used them myself but i thought the point of source maps was that the major browsers understand them; you load them in the browser on command, and can then debug from there, as you would normally with unbundled code

greggman 9y ago

I doubt it's ever coming but to really separate layout from content requires the layout tree and the content to be separate trees. Right now there's effectively only 1 tree, the DOM and CSS for the most part is just meta data on that tree. GRID requires things to actually fit a grid. If your grid isn't easily divided you add nested grids. But once you nest grids you can no longer seperate layout from content since the nested grid tree (layout) and the DOM tree (content) are tied together.

bwaxxlo 9y ago

I wrote an article[1] about this. It's aimed towards intermediate CSS peeps trying to understand how to organize CSS. It focuses on BEM mostly but still offers a decent look into managing CSS [1]: https://blog.kdamball.com/2017/12/28/maintanable-css-architecture/ https://blog.kdamball.com/2017/12/28/maintanable-css-archite...

pixelbash 9y ago

I grew up with floats and clearfixes, and while flexbox does a few things I couldn't do before I still find myself pulling up the flexbox cheat-sheet to get the correct syntax every single time.