SoylentNews is people
SoylentNews
"Front-end" developer, Pete Lambert, writes about why front-end "web" developers should start to learn HTML. More and more developers are using only pre-made frameworks and quite unfamiliar with the fundmentals of the technology they are using, such as semantic markup. He notes that the continued failure to pay attention to the basics of semantics is slowly breaking what's left of the World Wide Web and suggests reasons to correct that and has some pointers to learning resources.
I’m a ‘frontend of the frontend’ kind of guy. My expertise is in HTML and CSS, so it’s easy for me to wax lyrical about why everybody should learn what I already know (for the record, I don’t know it all - we still have heated debates in the office about what the best way to mark up a certain component might be). This isn’t about ‘my job’s more important than yours. If you’re writing code that renders things in a browser, this is your job.
It’s about usability and accessibility. If you don’t think the semantic structure of your Web page or app is important then you’re essentially saying “Well, it works for me in my browser, ship it”. I don’t think you’d do that with your Javascript and you certainly shouldn’t be doing it with your CSS. Search engines need to read your content, not enjoy your swoopy animations or fancy gradients. Screen reader software needs to read your content. Keyboard users need to read your content. Who knows what technology will come next and how it will consume your app but I’ll bet my bottom Bitcoin it’ll work better if it can easily read, parse and traverse your content. The way these things read your content is that they know it’s actually content and not just strings of text wrapped in meaningless tags. They know what’s a table and how to present it, they know what’s a list and how to present it, they know what’s a button and what’s a checkbox. Make everything from divs and they’re going to have to work bloody hard to figure that out.
Earlier on SN:
How to Build and Host an Energy Efficient Web Site (2018)
Conservative Web Development (2018)
Dodgy Survey Shows 1 in 10 Believe HTML is an STD? (2014)
(Score: 5, Insightful) by NotSanguine on Tuesday July 02 2019, @05:46PM (17 children)
Actually, I'd prefer a hybrid. The height of word processors was WordPerfect 5 for Windows, IMHO.
Why do I say that? Because it allowed me to create stuff using a WYSIWYG interface, but also allowed me to use "reveal codes" mode and view *all* the formatting tags in the document.
The advantages are obvious if you've ever used Word or LibreOffice Write. Sure, you can do WYSIWYG, but if some formatting gets mangled, you're SOL and need to start over. With "reveal codes" mode, if there was an issue I could find it easily and remove/change the offending codes. Good luck with that on "modern" word processors.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 0) by Anonymous Coward on Tuesday July 02 2019, @06:09PM
You were just typing it wrong.
;)
(Score: 2) by Gaaark on Tuesday July 02 2019, @06:33PM (3 children)
I thought there WERE reveal codes in libre office....hmmmm...will have to check some time when I'm off the fecking tablet.
--- Please remind me if I haven't been civil to you: I'm channeling MDC. ---Gaaark 2.0 ---
(Score: 2) by NotSanguine on Tuesday July 02 2019, @07:58PM (2 children)
Could be.
I'll check out DannyB's suggestions [soylentnews.org]. Perhaps I missed a significant and useful feature of LibreOffice. If that's the case, all the better!
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 2) by Gaaark on Tuesday July 02 2019, @08:25PM (1 child)
Found them!
Go to View, then click Formatting Marks
--- Please remind me if I haven't been civil to you: I'm channeling MDC. ---Gaaark 2.0 ---
(Score: 3, Insightful) by NotSanguine on Tuesday July 02 2019, @08:34PM
Yup. I see that. It's little bit more intuitive than the "Styles" pane that DannyB suggested.
However, it's still significantly inferior to WP's reveal codes mode, which shows you plain text wrapped with tags for *every* single formatting option. See my reply [soylentnews.org] to DannyB for more detail.
Thanks for looking that up though. It can be useful.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 4, Interesting) by DannyB on Tuesday July 02 2019, @06:36PM (7 children)
It must be frustrating that you've had trouble with LibreOffice Write.
I've learned to love it. The Styles are its killer feature. Press F11 to reveal the Styles and Formatting. At first pay attention only to Paragraph and Character styles. A Paragraph style applies to an entire paragraph. Similarly a Character style applies to a range of characters.
In Write, each time you press ENTER you create a new paragraph, to which a paragraph style would apply. Initially an empty document has the Default style for the first paragraph. Each paragraph style (such as Default) defines which style will automatically apply to the next paragraph.
One of the first things I often do is create a "Code" style. It inherits from Default. It has a monospace font. The paragraph is indented a bit on both the left and right. One could assign other attributes such as a different background color (like very light gray, or black with white text, etc). This makes it easy to past in code fragments, and quickly change the pasted text to the Code style.
The easy way to use a style is to click the paintbrush icon near the top right of the Styles and Formatting. Select a style from the list. Then click paragraphs in the document, and they immediately change to that style.
Note that styles such as Heading 1, Heading 2, etc are very useful. If you use them properly, then you can automatically create a table of contents. If you export the document as a PDF, it can include an outline into the PDF document which some PDF viewers can take advantage of.
Microsoft Word does not have anything like the Styles feature, last that I knew.
To each their own. Although I remember the WordPerfect, VisiCalc, Altair 8800, etc, I could never imagine trying to use any of them today compared to the tools we now have.
The lower I set my standards the more accomplishments I have.
(Score: 2) by NotSanguine on Tuesday July 02 2019, @08:21PM (6 children)
Yes. That is useful. But it wasn't at all what I was talking about and is much less intuitive use than the old WordPerfect "Reveal Codes" Mode.
Essentially, reveal codes provides two panes, one with the WYSIWYG content and one with the text and formatting *inline* as editable tags in the text. This makes troubleshooting formatting issues much, much easier. This link shows reveal codes in action [wordperfect.com].
Actually, it's kind of similar to the SN "preview" section (wysiwyg) and the comment section while your'e writing a comment. In the "comment" section, you see all the formatting tags, while in the "preview" section you see it as it would be displayed.
Note that in WordPerfect, you can edit in both sections at the same time, or just use the WYSIWYG pane.
This is quite different from "styles" in LibreOffice or the similar functionality in Word, and far superior IMHO.
I haven't had "trouble" with it. I've used both LibreOffice and MS Office for decades without issue. I just *prefer* the functionality of "reveal codes" mode, which has (despite the fact that it kicks ass over pretty much any other format editing scheme) never been duplicated. That's sad.
What's more, functionality like "reveal codes" would be a huge boon to those creating HTML too.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 2) by DannyB on Tuesday July 02 2019, @08:29PM (5 children)
As I said, to each their own.
If I had a large investment in having learned those reveal codes, I would probably like them also.
Once ages ago (1982-1984) I used the UCSD p-System editor. I was extremely adept at it. Knew all the keystrokes. Just like watching an experienced Vi or Emacs user. In 1984 I started using GUI based editors and never looked back. As a result, I never learned Vim or Emacs. I've recently been learning Vim because it is very handy at the command line often, and I have started using some non-GUI installations in recent years. (for personal projects. Sometimes on raspberry Pi, or on VMs.) My point: I'm sensitive to the idea that people invest in learning things and are reluctant to change if what they've got works very well for them.
The lower I set my standards the more accomplishments I have.
(Score: 2) by NotSanguine on Tuesday July 02 2019, @08:41PM (4 children)
That's was the beauty of the thing, you don't need any investment at all.
Just use alt-F3 and it will show you exactly what the formatting is. No muss, no fuss, no selecting text and looking at a styles pane, it's *all* embedded tags in the plain text.
Whether that be fonts/sizes, tabsets, line spacing, bold, italic, etc., etc., etc. absolutely every single formatting option is represented as tags wrapped around the text it modifies. Simple and elegant.
But WordPerfect isn't mainstream any more and I haven't used it in decades.
I can (and do) use LibreOffice and MSOffice just fine, but that one feature would make usability *significantly* better.
And given that we're talking about HTML here, it would be even *more* useful in that space.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 3, Interesting) by fyngyrz on Tuesday July 02 2019, @09:02PM (3 children)
Any good text editor provides for a preview pane where you can view HTML, Markdown, etc. in it's already formatted form, while the actual source code is editable in the plain vanilla pane.
Most of them use OS-level HTML rendering engines, so generally, you do see exactly what you're going to get for most reasonable sets of HTML formatting.
I use a macro language that gives me exactly what I want, generating the CSS and HTML according to my personal specifications. Works great, nothing out of reach or hidden. It brings the ability to create any reusable formatting tool or toolkit I like to every formatting job, with the additional strength of write-once/debug-once. That's what generated this post, in fact.
For instance, when it turns out that some CSS thing needs a fix for browser X (not uncommon, because CSS is an out-of-control mutant), then (if I give a damn about browser X), it's one change to the macro and the entire suite of pages is fixed.
None of which would do me any good at all if I didn't have a decent handle on HTML/CSS markup.
--
Patience: What you exercise when there are too many witnesses.
(Score: 2) by fyngyrz on Tuesday July 02 2019, @09:49PM (2 children)
Sigh... in first para, "it's" should be "its."
I've known this for fifty years, and I still do it without thinking.
--
A journey of a thousand miles begins with a single schlep
(Score: 3, Informative) by NotSanguine on Tuesday July 02 2019, @10:48PM (1 child)
Perhaps you should have this [ambians.com] tattooed on this inside of your eyelids:
Just sayin'.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 2) by fyngyrz on Tuesday July 02 2019, @11:14PM
oy, lol
--
The only thing flat-earthers have to fear is sphere itself.
(Score: 2) by DannyB on Tuesday July 02 2019, @08:25PM (1 child)
The other thing about LibreOffice Write's Styles, suppose you edit a style, such as Code and change it to show white text on black background, *poof* instantly all of the paragraphs of Code style instantly change throughout your document.
Want there to be a 2 inch top and 3 inch bottom margin around all blocks of code? Just change the style.
Want some Warning boxes in your document that point out potential pitfalls? Define a Warning style. It could have a 3 inch left indent, so that the box appears further to the right in the document. It could have a very different font weight, etc. You can fiddle with your Warning style, and all paragraphs like that change.
I also use a Code character style. That way I can mark some characters within an ordinary paragraph as code. When I change the Code paragraph style, I make similar changes to the Code character style. But I only write very short phrases using the Code style.
Next, I could create, say, a Filename style. It could inherit from the Code style such that by default a filename looks exactly like Code. (both of these are character styles, because I would write filenames within the main text of a document, within sentences, etc.) But if I later have an itch to make Filenames look different, I can change the Filename character style to differ from the Code character style.
I hope that all makes since.
The lower I set my standards the more accomplishments I have.
(Score: 2) by NotSanguine on Tuesday July 02 2019, @08:47PM
Sure. Styles work just fine in LibreOffice. I never said they didn't. And I've used them quite a bit myself.
What I'm talking about is something more immediate that clearly shows current formats. That's so useful when you're not seeing what you expect to see. I'd love to say those are corner cases, but that happens *way* too often in both Word and Writer, with no *simple* way to see what's going on.
As such, we're talking about different functionality. I was just lamenting that Libre/MS Office don't have a specific and very useful feature. That wasn't an attempt to badmouth your favorite word processor, just pointing out that such a feature is quite useful.
And that it would be even *more* useful in an HTML editor.
No, no, you're not thinking; you're just being logical. --Niels Bohr
(Score: 1, Insightful) by Anonymous Coward on Tuesday July 02 2019, @08:38PM
I love WordPerfect.
Sure, it took 10 minutes to boot on my old Packard-Bell with win3.1, but it was such a good word processor.
(Score: 2) by Pino P on Wednesday July 03 2019, @01:11PM
Have you ever tried opening a .odt (LibreOffice Writer) or .docx (Microsoft Word 2007+) document as a zipfile? There's an XML file inside with all the codes revealed. I concede that there may not be live synchronization between the two.