Jiayee.net

My learning diary

Truncating Strings With CSS

#software #css
A few days ago, I would not have realised truncating strings by number of lines with CSS was possible. I was beginning to sweat when I received a request to truncate strings by number of lines instead of number of characters. To be fair, only SWEs would think of truncating by number of characters instead of line numbers… My teammate shared an answer he found at CSS-Tricks. If I recall, it didn’t work out for me because of the way the containers were styled.

Continue reading "Truncating Strings With CSS"

Sticky

#software #web #css
I found myself entangled in CSS. I needed app-header to stick to the top at all times. I also needed template-header to be right beneath app-header at all times. Lastly, embedded-content should begin immediately after template-header and should not be sticky. Here’s how the page organisation might look like: <div class="app"> <div class="app-header"> <!-- Content --> </div> <div class="app-content"> <div class="template-container"> <div class="template-header"> <!-- Content --> </div> <div class="embedded-content"> <!-- Content --> </div> </div> </div> </div> The simplest approach is to place app-header and template-header inside a single div.

Continue reading "Sticky"

Some Similarities

#software #web #css
This .some-class { display: flex; flex-direction: column; justify-content: center; min-height: 20rem; } and this .some-class { display: flex; align-items: center; min-height: 20rem; } appear the same to me. CSS-Tricks says, You can think of align-items as the justify-content version for the cross-axis (perpendicular to the main-axis).

Continue reading "Some Similarities"

Center

#software #web #css
Why “Center” instead of “Centre”? Well, that’s because “center” is the version used in CSS. There were moments in my life when I wanted to give up writing in British English. There are so many other people using American English… except for me. Programming languages are expressed using American English as well. I felt like a rebel for naming my variables in British English, but that’s what I’ve learnt in school.

Continue reading "Center"