Enjoy content similar to this post on my blog Arit, Developer!
Subscribe to my newsletter to receive quasi-monthly emails whenever I publish a new story.
My team was building out several React components for the front-end of what would be a highly-trafficked app. One of these components required that if the page's subtitle was longer than 70 characters, we inserted a break at the 70-character point, for the sentence to continue on a new line. Checking the database that supplied the app's data, we determined that no subtitle was longer than 140 characters. So we'd probably need to break subtitles only once.
Another dev had created the subtitle component, and I was tasked with adding another feature to it. I opened the file and saw this function for fulfilling the subtitle's 70-character width requirement:
It took me several minutes to understand what the function was doing:
- First the sentence (
string) is split into an array of its words (tokens), and a counteriis initialized to 1. - Next, accounting for spacing, we add the lengths of each word in
tokenstogether. With each addition, we check if the total is less than 70; if so, we add the length of the next word to our total. - The goal is to identify the word before which the sentence is at or just below 70 characters (indicated by the incrementing
ivalue), and then break the sentence at that word (this is what thereturnline does).
The approach was effective - it met task requirements. But could it be simpler?
I thought so, and googled "limit sentence length to number of characters html css". I discovered the ch property, one of several font-relative CSS units. 1ch is equal to the width of the zero ('0') character of the current font-family, at the current font-size. It is important to note that the ch value will change for different font-families. But considering that my team follows very strict typography standards, I wasn't worried about this potential variation in the ch value.
I deleted the Javascript function and then, within CSS, I set the maximum width of the subtitle's container equal to 70ch:
It was very satisfying to have my fellow devs review and embrace my implementation as the simpler approach indeed.
As a bootcamp-educated developer, I would always feel the pressure to quickly level up to the 'higher' programming languages, and 'graduate' from HTML and CSS. With more experience, however, I'm finding that it is not about how bloated my developer tool belt is. It always comes back to: Can I solve this problem/implement this feature? How will I do it? How simple is it? How understandable? How maintainable?
Enjoy content similar to this post on my blog Arit, Developer!
Subscribe to my newsletter to receive quasi-monthly emails whenever I publish a new story.
Top comments (11)
Yes! This is wonderful.
I'm always amazed at how many people default to JavaScript when CSS would solve the problem simpler, in less code, and with fewer demands on their users' bandwidth, CPU, and battery life.
On the opposite end of the spectrum are people who are vehemently opposed to touching JavaScript, even when it's the right tool for the job, and insist on writing hundreds of lines of obscure CSS :D
Fair point!
I don't recall ever having seen this in the wild, but I'm sure it must be out there (and I suppose really, I know far more skilled JavaScript programmers than those who are skilled in CSS, so my bubble is obviously pretty biased).
You'll often encounter it on Codepen, and it's usually done tongue-in-cheek to show off how far you can get with CSS alone. I haven't personally encountered devs who are actually obstinate about using CSS over JS.
That's a neat trick! But, the two code snippets are the same, we can't see the js solution.
The css solution also shows the js solution. But only in the app, maybe it's an bug…
Hmmm that's strange! I'm seeing it render normally on desktop and mobile. Perhaps I'll flag it for the dev team.
I can confirm the bug. Weirdly enough, it looked OK the first time I read it (JS snippet first, CSS solution later), but now I'm seeing them in inverse order :s
There might be something wrong with the handling of gist on DEV...
Hello! There's actually no JS solution, there's the original JS implementation, and then my implementation using CSS 😄
Hello! I want to thank grademiners.com/. Thought that I was expelled from the university, said goodbye to the diploma. But then I found a way out of the situation, on Google sites that write abstracts on order, and decided to order a scientific paper. They wrote great! I confirmed my work and got a diploma! Thanks guys.
The code snippets are in reverse order. The first is CSS and the second is JS, where as it should be the opposite
Some comments have been hidden by the post's author - find out more