I'm a coder, a Linux sysadmin, soon to be security certified and explorer of new technologies

410 words @cotemaxime Guestbook
You'll only receive email when cotemaxime publishes a new post

Sometimes less is more

Sometimes with CSS, as with many other things in life, less is more as I've learned with CSS grids today. The idea was simple since I was using grids for the main templating of the app, I would use it also for the actual lines in chat make them all multi-row grids with columns for time, badge, nick and message. The implementation of that idea was fairly simple and worked well until I added a very long message to the test data, then things started to get harder. The result was this:

The line was mostly correct except the text was being restricted to its own column instead of overflowing under or to another row. Then came the research and experimentation to try and get the text to overflow correctly. Finally, after spending a lot of times I just got back to less and got my solution, instead of using grid the easiest and working way was to simply go with

and let the overflow being handled by the browser and then I finally could reach the right result:

So, in the end, less was more and simple was better with CSS as with so many other things.

Next project, vue.js

For my first documented project we're going with a migration from single file JavaScript + Bootstrap to a Vue.js, CSS3, CSS Grid and Typescript project.

Decided to go with that stack since coming from a object oriented and strongly typed background Typescript helps with a lot of JavaScript typing I'm used to, CSS with grids is a lot lighter than a full bootstrap mostly only used for the grid and finally to learn Vue.js to help with component splitting and also it's "reactivity".

I like a lot that each component can have its own style scoped and can hold all of its own logic and data, it makes things a lot simpler when you don't have to take the full project into account for CSS or naming. The other killer feature, in my opinion, is the way you can separate all the logic with the live change of data, simply change the data and it will be reflected on the page.

Now the real challenge comes with actually migrating everything over and not just small proof of concepts.


Ohi there, let's try this blog thing. I'll try to use this place to note, resume and explain when I'm working on project, for myself and it might help others.