p tags or br tags?
Should we create multiple <p> tags for each new paragraph like this? Or use <br> instead?
27 Replies
use p tags
you should generally avoid br tags because they have no structural meaning, they're only for presentation
<p> means that the contents of the tag is a paragraph of text, so you're adding information about the contents of your page that a screen reader or other assistive technology could use to help the user browse your content more quickly or easily
<br> just means "insert a line break", which adds no meaning to the contents, and is purely for layout, which doesn't belong in HTML in that wayUsually when writing a blog, I use max 3 sentences in a paragraph for best readability. So there will be A LOT of <p> tags used in a let's say on average 2k words blogs?
Is that not considered DOM heavy?
if it's a lot of p tags, then it'd be a lot or even more br tags
That's considered "Doing it Right™️" 😜
from the MDN article on Accessibility Concerns:
Creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within <br>s. This can be a confusing and frustrating experience for the person using the screen reader.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
Browsers are very good at creating the DOM from HTML elements, it's kinda what they're designed to do. They can download and parse a metric 💩 tonne of HTML elements per second without breaking a sweat.
Don't worry about "too many elements" unless you're using JS to modify the DOM. JS isn't as good at it as the browser
also, pre-optimization is a Bad Idea™️
There was a study done on HTML performance that pitted an entire Twitter timeline in HTML of about 8k tweets vs rendering one tweet in React and the 8k HTML-only timeline rendered perceptibly faster than the one React-rendered tweet. I can't find the link right now, but keep that in mind. The browser was able to download, parse, and render 8k tweets worth of elements faster than React rendered one tweet.
You don't need to worry about too many
p tags being "DOM heavy".Zach Leatherman (@zachleat)
Which has a better First Meaningful Paint time?
① a raw 8.5MB HTML file with the full text of every single one of my 27,506 tweets
② a client rendered React site with exactly one tweet on it
(Spoiler: @____lighthouse reports 8.5MB of HTML wins by about 200ms)
Likes
853
Retweets
291
Twitter
Sorry, it was over 27 thousand tweets, not 8 thousand.
that fully explains why my ancient server-side rendered PHP apps feel much more responsive than most React or Vue apps, despite requiring server round trips for almost everything you do
You'll be hard pressed to find anything that's worse at DOM rendering than JS
Uhh I don't wanna hijack my own post but then why are react and vue apps made?
For a few reasons, but the main ones:
1) Back-end engineers don't understand HTML/CSS so they use a "real" programming language (JS)
2) Easier on the developer, but not on the end-user
Keep in mind you're asking a php developer and someone so dedicated to vanilla JS that it's in his username
React was made by Facebook to solve Facebook's scale issues with rendering their site to billions of users. "If it's good enough for FB it's good enough for us!" said everyone who doesn't have FB's scaling issues
but I agree, perceived developer experience is a big chunk of it. It lets you do some stuff much more easily, potentially lowers the load on your server, and can be made resistant against intermittent connections more easily (though that's a whole other can of worms)
So SAAS apps should be built with html, css, and php?
HTML and CSS most certainly. The backend is up to you. PHP, Go, C#, Rust, Java, whatever floats your boat
I'm a big fan of Go as a newer language, but I'm learning C# in my bootcamp and it's finally clicking with me and .net 6 is pretty slick
Dang I was adviced to learn react and nodejs and c++
Do you know FB still uses PHP?
Nodejs is a great first back-end language for those coming from the front-end, since it's just JS. And JS can be performant to a point. And for small, personal, projects it's fine. But Twitter/Facebook/Discord aren't using it for a reason
C++ is…not the best to be learning in 2022, honestly. It's older than I am, which is saying something :p
It's still taught in most universities 😭
Instead of C++ you can learn C#, Go, Rust. They're all more modern C/++ ish languages that have more modern syntax and less baroque syntax.
SAAS apps should be written in whatever language makes the most sense for the project. Sometimes that's a heavy framework because that's what the team knows and can get something usable out the door the quickest, sometimes performance is key and then you should use something else.
It's a good idea to follow KISS when it comes to picking your stack though, Keep It Simple Stupid doesn't only apply to code but also to stacks.
PHP can be a valid choice, but it's not going to be a lot of people's first choice anymore. It can be fast, but compiled stuff like Go or Rust are going to run circles around it... but then again, most tasks you need to do for a webapp backend aren't going to be very computationally heavy and it doesn't really matter if your code runs in 30ms or 3ms, neither is perceptible to the user until your server's load starts to go up too high
Yep. That's because universities take years for curriculum changes to be approved. By that time the changes are obsolete anyway :p
as for PHP and Facebook/Meta: They stopped using PHP proper an Age ago, I'm pretty sure they still use their own version though, I forget what it's called. But don't do stuff because facebook is doing it, that's how we ended up with React in the first place
Facebook does things that make sense for Facebook, and the requirements having one of the biggest websites on earth puts on them. Your app won't be that big. It won't even be 1% as big as Facebook, so you can't just copy what they're using and call it good enough
C++ isn't going anywhere anytime soon because it's used in a lot of industries due to it being the best option for high performance for decades. That kinda of inertia doesn't disappear overnight.
But very few companies are making new things in C/++. Rust, Go, C#, hell even Python and Java are more popular for new things. C/++ was designed to run on systems with very few resources. We're talking designed for computers with kilobytes of RAM. We now have gigabytes of RAM, so the memory safety of C/++ isn't relavent for most things…unless it's for an IoT device with kb of RAM. But for that Rust is arguably a better choice