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: 2, Disagree) by SomeGuy on Tuesday July 02 2019, @05:00PM (30 children)
The thing is, this "fundamental" technology is complete and total shit. The only thing that surprises me is that people didn't start moving in this direction sooner. For too long idiots have considered HTML to be a "programming language" rather than just markup. WYSIWYG editors were a big thing very early on but fell on their faces as the browser wars kept breaking the rather vague HTML "standards".
The only people who should need to worry about HTML are those creating wikis, content management systems, custom forum software, and so on.
Would you write a letter using formatting markup commands like a 1970s mainframe typesetting system, or would you rather use a friendly WYSIWYG GUI word processor? (bitches about this very entry box and manual markup tags as well)
(Score: 3, Insightful) by DannyB on Tuesday July 02 2019, @05:19PM
If I'm writing text to appear on a web page, sure, I would like a nice editor that works at a high level.
If I'm building an application, then at some level I need to think about how the application's output is rendered into a browser. How buttons and more sophisticated controls work. Etc.
To transfer files: right-click on file, pick Copy. Unplug mouse, plug mouse into other computer. Right-click, paste.
(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.
To transfer files: right-click on file, pick Copy. Unplug mouse, plug mouse into other computer. Right-click, paste.
(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.
To transfer files: right-click on file, pick Copy. Unplug mouse, plug mouse into other computer. Right-click, paste.
(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.
To transfer files: right-click on file, pick Copy. Unplug mouse, plug mouse into other computer. Right-click, paste.
(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.
(Score: 5, Interesting) by Thexalon on Tuesday July 02 2019, @06:43PM (4 children)
I've recently hand-coded a couple of simple websites, and I quickly remembered that putting together some halfway decent HTML was not substantially harder than futzing with a CMS. Now, it helps that I'm fluent in HTML and CSS and JS, so I know how to quickly do what it is I want to do, but I'm also fluent in the PHP and MariaDb code somebody decided would be "standard" back in 1999 or so and I'm still not entirely convinced that all those layers of code make things massively easier.
Among other things, I've found that CMS work goes a lot more smoothly when you can switch to a text-only editor, fix some busted-up HTML, and go back to the visual view when you need to do that. Because when there's flaws in stuff like FCKEditor, you're not going to be wanting to dive in and fix them yourself, and the alternatives are to hand-code your HTML again or hope that a new release is imminent.
And of course the hand-coded site also runs much faster than the CMS-based site, because instead of "Run some PHP, load a bunch of stuff from MySql, build a page, send to browser, wait 15 seconds for the 148 JS libraries to load for all the latest whizbangs, ...", it's "Here's a copy of the file, here's a few images, here's the 20 lines of custom JS you actually need to worry about here, you're all set." And yes, you can address that time problem with caching, but that's yet even more complexity and more time when there isn't a cached version.
I'm not saying "never use a CMS ever", but I do think there are more tradeoffs involved than many Wordpress jockeys think, and that an awful lot of code has been written in search of the elusive "Do What I Meant Rather Than What I Told You" mode to questionable effect.
The only thing that stops a bad guy with a compiler is a good guy with a compiler.
(Score: 1, Interesting) by Anonymous Coward on Tuesday July 02 2019, @07:11PM (3 children)
It is all the code that you don't have to update across all files, along with a ton of UI improvements. CMSs allow abstractions that would be functionally impossible to do with pure HTML/CSS and if you allow JS then you basically re-create a CMS anyway. Once you learn a certain CMS it is almost always easier to build a site with it.
I will agree that for super simple sites it might be easier to hand code everything.
(Score: 3, Insightful) by Thexalon on Tuesday July 02 2019, @08:21PM (2 children)
There are plenty of times I've been able to get a lot of mileage out of the following extremely complicated PHP snippets:
...
and still code most of the site in simple HTML / CSS / JS and runs extremely quickly.
You seem to think that my defense of hand-coding is due to my lack of familiarity with CMS's. It's not: I'm good enough at both Wordpress and Drupal to get paid good money to fix other people's foul-ups with them (and less frequently, create new sites and/or add new features and plugins and such).
What I'm suggesting is that your "easier" comes with substantial trade-offs and downsides that you are probably not considering because pseudo-WYSIWYG is shiny.
The only thing that stops a bad guy with a compiler is a good guy with a compiler.
(Score: 0) by Anonymous Coward on Wednesday July 03 2019, @12:36PM
Nope, I mean advanced functionality that would involve more coding effort. As for wysiwyg editors you can always allow pure html. Except for the simplest of sites or some seriously custom and weird functionality I just don't see any reason not to use a cms.
(Score: 3, Informative) by canopic jug on Wednesday July 03 2019, @01:19PM
There are plenty of times I've been able to get a lot of mileage out of the following extremely complicated PHP snippets:
That's still too much PHP. If you just need some headers, footers, and maybe some menus, then you can do better with Server-Side Includes. Either use the XBit hack or add an output filter. After making a good template it becomes less work than using and maintaining a CMS, and is less risk than PHP.
Both Apache2 and Nginx support Server-Side Includes. Though with Apache2, you should remember to configure it noexec, just out of principal.
Money is not free speech. Elections should not be auctions.
(Score: 2) by RamiK on Tuesday July 02 2019, @08:11PM
Last letter I wrote was in markdown. I keep most of my notes and docs in TeX. If SILE had math package I'd use that. A good WYSIWYG GUI would definitely be nice. But it's neither required nor desirable if it means not having direct access to the markup.
Anyhow, as he rumors go, SGML and family share the same origin story as Microsoft's Office Open XML standardization process: A government procurement group required IBM to produce human-readable sources so IBM came up with the worst possible markup to lock down the government on their tool chain and software. So, people being traumatized by HTML and XML is really nothing new. Just another sad side of the industry.
compiling...
(Score: 2, Interesting) by Z-A,z-a,01234 on Wednesday July 03 2019, @06:49AM (3 children)
That's a nice way to show your ignorance.
HTML + CSS is a device / OS / browser independent way of describe your document. It offers separation of structure and presentation. Quite powerful attributes, if you ask me...
It was obviously impaired by the stupid economic interests of various key players, the most recent one being Google.
In the last 15-20 years the web experience has gotten from bad to worse, so much so that it's currently impossible to see *any* content on almost all websites unless you have JS enabled.
The size of webpages is insane. You could download 6-10 MB of shit to see 2 pages of text. And I do remember the adobe flash pages...
(Score: 3, Informative) by Pino P on Wednesday July 03 2019, @01:38PM (2 children)
In part, you can blame payment processing costs for that.
In a capitalist economy, it costs money to feed and house yourself while writing articles for a website. Any website not operated as a hobby or as a brochure for some other product needs to pay its writers somehow. Pay-per-page doesn't work when Visa and Mastercard demand a minimum transaction fee on the order of 0.30 USD. A monthly subscription doesn't work for readers interested in viewing only one document, such as an article found through SoylentNews, through a link shared by a friend, or through a web search engine.
The traditional model to derive revenue from single page views has been advertising. But over the years, advertisers have become pickier about demanding that ad networks show their messages only to those readers most likely to be interested in them. To accomplish this, ad networks have engaged in widespread surveillance of readers to infer their interests, and dozens of ad networks competing for a single page view can add up to megabytes of crap. One common measure to ensure that ads are viewed is to make the site dependent on proprietary script run in the reader's web browser.
More recently, a third business model has emerged called a benefit corporation [wikipedia.org]. This allows a company's charter to put a mission benefiting the public over the shareholder profit motive. SoylentNews, for example, is organized as a benefit corporation. But a benefit corporation is not available in all jurisdictions or in all situations. The Guardian has behaved similarly, offering perks for subscribing but not putting up a subscription requirement as many comparable publications have. The risk here is that if not enough subscriptions roll in, the site will have to close.
The nuclear option is to close all websites that are not operated as a hobby or as a brochure for some other product. This option has its proponents on the green site (1 [slashdot.org], 2 [slashdot.org], 3 [slashdot.org]). But this would result in widespread structural unemployment, and it might reduce the demand for home Internet access to the point where ISPs no longer see economies of scale in providing affordable home broadband for those people who do primarily visit hobby sites. So is there a better business model to pay the writers?
(Score: 1) by Z-A,z-a,01234 on Friday July 05 2019, @11:51AM (1 child)
I see your point. I don't fully agree, since there are counter-examples like the youtube channels funded via Patreon (youtube pays way to little per view)
I'll have to try a subscription to a newspaper and check if the premium offer has significantly lower size per page. I'm willing to bet that it will still be 70+% of the original, free version.
Broadband is also manly used for video / audio and less for text. As long we have youtube and netflix, and prime, all good :)
(Score: 2) by Pino P on Friday July 05 2019, @03:25PM
What I wrote in the previous comment applies equally to Patreon with a substitution of terms: "If not enough pledges roll in, the channel will have to close."
If the Internet is cut back to only hobby sites, you might end up having to go back to dial-up. Would you prefer dial-up?
(Score: 2) by Common Joe on Wednesday July 03 2019, @07:32PM
Strange. I'm writing a lot of documentation in very simple CSS and HTML simply because it reduces a lot of overhead and will have staying power for decades. Of course, this isn't for clients, it's just personal junk I'm coding. But that is a very good reason to use it.
Of course, I'd rather use WYSIWYG, but I have documents decades old that are difficult to pull up (and a few that are impossible) in modern word processors.