23 ms·

My Current HTML Boilerplate

• lloydatkinson 6y ago
  This is useful I think purely for the meta tags and the opengraph properties and related magic values you need to make things like twitter show images and descriptions properly when a link is embedded.
  • jbenner-radham 6y ago
    They forgot the OpenGraph prefix though. Small nitpick.
• nlitened 6y ago
  I like how the author says "we don't need these and these things because latest versions of X don't require it anymore" — well what about people who don't use the latest versions of X?
  • Daegalus 6y ago
    time to upgrade?
  • davewasthere 6y ago
    Well, it's perfect readable in lynx & IE6. I think for the most part, it's a pretty reasonable selection of tags. And there's almost no excuse to keep crazy old stuff around these days.
  • skrebbel 6y ago
    I think the argument that most X'es are self-updating browsers. I'm not sure how valid that is, but it seems to me that you need to do active effort to be eg on Firefox 70 today. The big non-self-updating X is IE11 which the author addresses separately.
• tsujp 6y ago
  I've never thought to do something like this as a way to detect whether or not js is being used. <html lang="en" class="no-js"> ... <script type="module"> document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js'); </script> It's so simple but so effective. Will be copying that.
  • dan1234 6y ago
    I first saw that technique used by Moderinizr, which was a very useful tool back in IE8 days! https://modernizr.com/ https://modernizr.com/
    • ok123456 6y ago
      What's wrong with using modernizer now?
      • frereubu 6y ago
        As long as you don't have to deal with IE11, cross-browser support is much better, partially due to fast release cycles. No point including a whole library if all you want to do is detect whether JS is enabled. Edit: To be clear, Modernizr isn't a big library like jQuery and you can specify the thing you want to detect, so you can cut it down, but it's still pointless if you just want to know if JS is enabled or not.
      • _-o-_ 6y ago
        Browser landscape changed, absolute majority of users are on one of the evergreen browsers with almost identical feature set.
    • jojohohanon 6y ago
      There was a post on Metafilter highlighting a similar approach to graceful javascripting, back when javascript was a question, not an answer. Basically, serve a page with formatting done via table layout, and then rewrite it with javascript in the client to use more modern layout tools, depending on which features were available on the browser.
• hawski 6y ago
  I expect this to become a thread of people sharing their preferences. I prefer something minimal, that I can almost remember and write by hand: <!DOCTYPE html> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <style> body{ font:menu;font-size:1.125em; margin:auto;max-width:40em; padding:0 0.5em 90vh 0.5em; } </style> I don't use html, head and body tags and I don't close tags that don't need to be closed like p. With this html is almost like markdown. I use this bottom padding, because I like to scroll all the way up and it also is useful if you have low anchors for one to see on top what was supposed to be there.
  • SquareWheel 6y ago
    No box-sizing: border-box?
    • hawski 6y ago
      I'm not doing anything complex enough for it to matter.
      • greggturkington 6y ago
        Like using margins or padding?
  • lrem 6y ago
    <meta name=viewport content="width=device-width,initial-scale=1"> Excuse my ignorance: what the heck does this achieve?!
    • ohazi 6y ago
      It's an incantation to make the page look slightly less stupid on a phone. https://www.w3schools.com/css/css_rwd_viewport.asp https://www.w3schools.com/css/css_rwd_viewport.asp for an example image https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... for more detailed info
• thanatos519 6y ago
  Why are the non-container elements like 'meta' and 'link' not terminated with '/>'? Did I miss a memo?
  • tomgp 6y ago
    yes, you don’t use those in html5 (though they are required in things like jsx)
  • Daegalus 6y ago
    that hasn't been a thing since xhtml. html5 did away with /> for tags that don't have a closing tag. like img, meta, br, etc.
    • jontro 6y ago
      xhtml was never supported by all major browsers. You couldn't do stuff like <div/> and get away with it. Not sure why the the self closing tags became widely used
      • mjhagen 6y ago
        Some editors had trouble with color coding non-compliant xhtml. At least that was my reason for doing it. (In the very early 2000s)
      • progval 6y ago
        > xhtml was never supported by all major browsers. Source? https://caniuse.com/xhtml https://caniuse.com/xhtml says otherwise > You couldn't do stuff like <div/> and get away with it. I just tried on both Firefox and Chromium, they parse it properly.
        • jontro 6y ago
          When xhtml was popular internet explorer was a major blocker for using it properly. I never saw xhtml served with the proper content type at the time. I don't see a reason to mix html and xhtml today. It will only lead to problems. (I.e using self-closing tags and &amp; mismatches in urls) If you use <div/> in html the browser will just ignore the end / See https://jsfiddle.net/sw8j9fo2/ https://jsfiddle.net/sw8j9fo2/
• davewasthere 6y ago
  It's missing an obnoxious cookie dialog, mailing list modal window and multiple ads.
  • 867-5309 6y ago
    they're hidden behind the script.js
    • matijs 6y ago
      You both made me laugh. Thanks :)
• Brajeshwar 6y ago
  Nice. Check this out too https://htmlhead.dev https://htmlhead.dev
• nicky0 6y ago
  The in-your-face disclaimer at the top is really not needed. The site looks fine.
  • squiggleblaz 6y ago
    I think it's expected to look fine most of the time. But since the author isn't developing it locally, but rather updating the live site and seeing how things go, sometimes they will stuff up.
    • Semiapies 6y ago
      It's still nicely readable on both my old, cheap android tablet and my desktop. Kudos to the author for using good basic styles, even while reworking things.
• jayd16 6y ago
  >because it’s a vector and not raster image, and we can add HTML and CSS to the SVG, which means that we can support dark mode. Doesn't work with the black chrome theme though, it seems. Can't see the icon at all because they gave it no outline.
• dheera 6y ago
  One more thing I do is this to prevent FOUC: <style>html{visibility: hidden;opacity:0;}</style> And then put this in your styles.css file: html { visibility:visible; opacity:1; } Honestly though the amount of meta tags in this boilerplate is ridiculous. What has the web come to? Why can't it use <title> for og:title? Why can't it use the favicon for apple-touch-icon? Why can't it use the URL for the url? Why can't we assume UTF-8 unless told otherwise?
  • hutzlibu 6y ago
    Because there are millions of people involved who have millions opinions on the topic and everyone wants their way. Thats why we have the bloody mess called HTML as a compromise. "Why can't we assume UTF-8 unless told otherwise?" And this I really do not understand either. I lost hours to restore data, that got lost in conversion from various text encoding formats, discovered too late.
    • deleted 6y ago
      [deleted]
  • mschuster91 6y ago
    > Why can't it use <title> for og:title? Because the <title> is often something like "My Content | The Example Blog", which is a redundant information on social media cards so you set og:title to "My Content" only. > Why can't it use the favicon for apple-touch-icon? Because the favicon usually is a 32x32 icon that is small and only seen in the tab of the browser, whereas the apple-touch-icon is physically huge, and so requires more resolution. > Why can't it use the URL for the url? I assume you're talking about the canonical link tag? This is to prevent SEO penalties - specify a canonical link and Google will prefer your site as origin for the content over spammers that don't bother setting the tag, or in case you run an old-school site with dedicated mobile and desktop sites (see https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls https://developers.google.com/search/docs/advanced/crawling/...). > Why can't we assume UTF-8 unless told otherwise? Historical baggage, mostly - the default charset for old content unless specified was either US-ASCII or its superset ISO-8859-1/latin1 (the HTTP/1.0 spec defaulted to US-ASCII, see https://tools.ietf.org/html/rfc1945 https://tools.ietf.org/html/rfc1945 section 3.4 and the HTTP/1.1 spec, section 3.7.1, https://www.ietf.org/rfc/rfc2616.txt https://www.ietf.org/rfc/rfc2616.txt that defaults to ISO-8859-1). And there is a lot of old content that would break if this default assumption would change.
• timdaub 6y ago
  Time ago, I made a minimal HTML boilerplate myself. Mainly because nobody seems to understand what the word minimal means... Mine is truly minimal: https://github.com/TimDaub/mynimal-html5-boilerplate https://github.com/TimDaub/mynimal-html5-boilerplate
  • enriquto 6y ago
    Not truly minimal, it is fairly bloated due to the unnecessary usage of implicitly opened tags. You could get away with this: <!doctype html> <title>Your website: title</title> <h1>Title of your site</h1> <p> Here begins the text of this page. This is a complete, conformant, html5 document. Markdown is unnecessary nowadays.
    • dheera 6y ago
      > Markdown is unnecessary nowadays. Exactly! I personally hate Markdown. I can never remember how many asterisks is bold, italic, or whether images are [!img(src)] or !(img)(src) or  or [link](src!) or some other nonsense. HTML is much more consistent, limiting yourself to a subset of HTML keeps things very readable, and it's super easy to slap a stylesheet on the top and make it come to life, and change that stylesheet at any time.
      • ZephyrBlu 6y ago
        * for italic, ** for bold. This is pretty standard on the internet in my experience. Links are [](), but I do mess that up sometimes as well. Markdown is not inconsistent though, and I find it very readable.
        • zimpenfish 6y ago
          > * for italic, * for bold. I think something ate one of your *s. One star or underscore for italic; two stars or underscores for bold. > Links are [](), but I do mess that up sometimes as well. If you use the "remote ref" style[1], links are `[text][ref]` which is much easier (I remember the order as "this [text] points to that [ref]"). [1] https://www.markdownguide.org/basic-syntax/#reference-style-links https://www.markdownguide.org/basic-syntax/#reference-style-...
• deleted 6y ago
  [deleted]
• mlang23 6y ago
  +1 for the natural language tag. Remember to actually update it to the language used on the site. I regularily stumble across pages with a wrong language declaration. You pretty quickly notice this if you rely on a speech synthesizer to read the page content to you. Just a small change which can make such a big difference :-)
  • dheera 6y ago
    Why can't the speech synthesizer detect the language, especially when the language of dynamic content may change on the client-side after the page is loaded? Language detection is much easier than synthesis, and one would think that a good synthesizer would devote the 0.1% of their engineering time necessary to have good language detection as well.
    • mlang23 6y ago
      Surprisingly, automatic language detection isn't always reliable. And since the DOM actually has an attribute for this, which can also be placed on individual elements like a p or div, the first choice IMO is to rely on what the site declared.
      • harperlee 6y ago
        Yeah in general, explicit declarations should not be overriden by guesswork!
        • sswam 6y ago
          It seems to me that correctly guessing a natural language is a whole lot easier than speech synthesis. I think it would be more common to have incorrect declarations than detection failures. A bit like how comments describing code are often incorrect because they weren't updated when the code changed.
    • harperlee 6y ago
      I wonder the same about Microsoft Word and Powerpoint. Is it so difficult to guess language in 2021? Particularly, to discern language between spanish and english, if both have already been manually set by the user in the document? It seems so...
• rsto 6y ago
  As a user of wien.gv.at I want to thank you for your work. It's great to use a website that puts HTML first, rather than a mess of Javascript to render what essentially is just text.
• rnhmjoj 6y ago
  Something worth mentioning if you're using color schemes: chromium has a "Force dark mode" option that inverts the colors of light pages to make them dark. This used to play well with color schemes: normal page → inverted, page with prefers-color-scheme: dark → use dark theme. Of course they managed to break it: for some reason (but it's not a bug!), new chromium versions always choose the light theme and invert it, even if the page declares it has a dark theme, which is not nice. They only way to make chromium in dark mode use the CSS color schemes is to add the meta tag: <meta name="color-scheme" content="dark light"> This is also useful on other browsers: for example, it will make safari choose dark/light UI elements (buttons, dropdowns, etc.) depending on the color-scheme preference.
• vanderZwan 6y ago
  Tangent: > I totally forgot about print style sheets You know who else seems to have forgotten about print style sheets, at least for a while? Wikipedia. Or maybe they didn't do anything and it was browser support that got worse for a while, I dunno, I shouldn't be too quick to assign blame to a specific party here. All I remember is that years ago, if I clicked the "print page" link I would get a nicely styled printable version with minimal markup. It was a great way to get a "light markup" version of the page before browsers had built-in "reader view" tools. Then for a while it just gave me a terrible¹ webpage version - basically showing the left menu bar and the huge logo when trying to print the page. Now it seems to have print style-sheets again, but with a "no longer supported" warning when used on a screen (not visible when printing though). See and compare: https://en.wikipedia.org/wiki/CSS https://en.wikipedia.org/wiki/CSS https://en.wikipedia.org/w/index.php?title=CSS&printable=yes https://en.wikipedia.org/w/index.php?title=CSS&printable=yes ¹ terrible in the context of printing, I'm not hating on the regular webpage here
  • runiq 6y ago
    It's using media queries now, so you can use the browser's default printing function instead of having to find a bespoke button for that functionality.
  • jakub_g 6y ago
    Must-have extension to use before printing anything: https://addons.mozilla.org/en-US/firefox/addon/aardvark-duex/ https://addons.mozilla.org/en-US/firefox/addon/aardvark-duex... (based on https://www.karmatics.com/aardvark/ https://www.karmatics.com/aardvark/ which is a bookmarklet hence does not work with Content-Security-Policy enabled pages) It allows to easily and quickly remove stuff from webpages, without opening devtools. Just hover over unwanted element, keep clicking `w` (wider) until you have its whole container, then `r` to remove.
    • vanderZwan 6y ago
      Oh wow, that is a really useful extension, thank you!
    • 6y ago
• twic 6y ago
  I use: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> </head> <body> <h1></h1> </body> </html> And according to the file timestamp, have done so since Nov 24 2005.
  • chrismorgan 6y ago
    For comparison, this would achieve the same thing now and is much shorter and more memorable: <!doctype html> <title></title> <h1></h1> (My recollection is that the HTML 4.01 Strict DTD doesn’t trigger quirks mode; if that’s correct, then it should be precisely the same, except for whitespace variation and the actual doctype node. Also neither is valid, because the title element can’t be empty.)
    • bloak 6y ago
      This is the shortest thing starting with that doctype that I can get validator.w3.org to accept without error or warning: <!doctype html><html lang=""><meta charset="UTF-8"><title>x</title>
      • chrismorgan 6y ago
        The ="" there is unnecessary; writing an attribute name only implies an empty value. If you’re going for shortest valid document at all, <!doctype html> is enough, provided the document exists in a context that makes title optional (e.g. email or <iframe srcdoc>) and that the charset is declared out-of-band.
      • aparks517 6y ago
        You may be able to use a UTF BOM instead of the meta tag, or I think someone mentioned elsewhere having the server declare the character encoding in a header. I guess it depends on whether you count the header size which is better for golfing.
    • twic 6y ago
      I fill in the title and h1 elements - this is just the template. And this version is not precisely the same, because it can't have the same timestamp :).
• coding_lobster 6y ago
  Why is type="module" the opposite of nomodule? This isn't a real question... just a big ol sigh
  • chrismorgan 6y ago
    It’s a way of conveniently achieving compatibility with old and new browsers. JavaScript is executed differently when it’s a “module script” to when it’s a “classic script” (using the HTML spec terms), so you want a way of preventing old browsers from executing it (whether they’re syntactically compatible or not). Hence type="module", because old browsers won’t execute scripts with the type attribute containing an unknown value. Once you have that, you commonly want to bifurcate on modules support, so you want a way of saying “don’t execute this if you support modules”. This can be done with feature-detection code, to the effect of “does it support modules? if yes, do nothing; if no, load the code, probably by adding another script tag with the correct src to the document”, but this is inconvenient and causes at least mild inconvenience with security measures like Content-Security-Policy. So the solution was to put another attribute there that new browsers could use as the inverse of type="module": nomodule. Perhaps it’s a big ol’ sigh, but as is very commonly the case with such sighs, they make a good deal of sense when you understand the reasons and history involved.
    • youngtaff 6y ago
      Be really interesting to understand when this actually get's executed <script type="module"> document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js'); </script> module has defer semantics by default i.e. it gets executed after the document has finished parsed, and I can't find anything in the WHATWG spec to suggest it's different for inline scripts Maybe inline scripts ignore module, as they do defer and async
      • chrismorgan 6y ago
        Inline <script type="module"> is executed after DOMContentLoaded. Inline <script> is executed during parsing. https://html.spec.whatwg.org/multipage/scripting.html#the-script-element https://html.spec.whatwg.org/multipage/scripting.html#the-sc... gives the full details of the interactions between type, src, defer and async. Inline scripts are normally referred to as script elements where the src attribute is not present.
• shivbhatt 6y ago
  I want to convert my html website mayurbhatt.c1.biz in wordpress but can`t code it properly what is solution for this?
  • PinkPigeon 6y ago
    Might I note that you are also lacking an SSL certificate, which marks your site as 'not secure' and can trigger various anti-phishing protections in browsers and firewalls. I am not sure what you mean by 'convert wordpress', but if you are looking for a no-code solution for throwing up a static site to Cloudflare (with SSL), I happen to make a website builder that does just that. I like to think it's much easier to use than Wordpress. I won't advertise it here, but have a look in my profile if you're interested. Ping me for a discount :)
• chrismorgan 6y ago
  A few notes: > It must come before the <title> element to avoid faulty characters in the page title. This isn’t quite true. Rather, any meta element declaraing a charset should occur within the first 1024 bytes, or it may be ignored. ——— Print styles: you might think that putting print styles in a separate file would let the browser not load them unless the user actually seeks to print, but in practice browsers load all stylesheets, even for media queries that will never match. I think this may be for fingerprinting reasons, but I don’t truly know. In the distant past (maybe a decade ago), print stylesheets would block rendering while they loaded in most browsers. No idea whether they still do, but I’d guess (uneducated) that they may be deferred a bit now. In light of all this, I generally recommend a small @media print { … } block in your existing stylesheet, rather than a separate print stylesheet file. ——— The favicon prefers-color-scheme thing: don’t put too much weight on this, it doesn’t actually do what people are commonly saying it does: there is only a slight correlation between prefers-color-scheme and the colour the favicon is rendered atop. prefers-color-scheme is for content, not chrome. If I recall correctly, Chrome’s incognito mode renders the tab bar dark; and in Firefox the concept of browser theme (light/dark/all kinds of custom) is completely separate from prefers-color-scheme—so I have dark browser chrome but light content. Understand that the favicon could be being rendered atop anything at all. Any solid colour, any image, anything. Very light and very dark greys are the most common colours for them to be rendered against, but you want to make it so that your favicon is at least not horrifically bad on any background.
  • kijin 6y ago
    Fun project: create a favicon using just the right tones of gray so that it appears one way against a light background and another way against a dark background.
    • chrismorgan 6y ago
      Related to this, alpha channels can be very useful in writing a single colour that appears as different colours against known dark and light colours. For example, see the mention of #8888 in https://chrismorgan.info/blog/dark-theme-implementation/ https://chrismorgan.info/blog/dark-theme-implementation/, where that #8888 becomes effectively #bfbfbf against white, and #484848 against black.
• shadowfaxRodeo 6y ago
  Someone correct me if i'm wrong but I've been doing a bit of research and I'm pretty sure you can remove these: <link rel="icon" href="/favicon.ico"> by default if a supported icon isn't found in the markup all browsers search for favicon.ico at the site's root. The same is true for apple touch icon, you can just remove it: <link rel="apple-touch-icon" href="/apple-touch-icon.png"> I've tested this and it works fine on apple devices. <meta charset="UTF-8"> By default servers add the charset as an http header. So you don't need to declare it in the document — in the case of offline where there are no http headers, the browser works out what encoding to use. And since utf-8 is the only valid charset for HTML5 it should be the default. I've tested this a bit, and it seems to work.
  • kijin 6y ago
    > the browser works out what encoding to use. Historically, letting the browser guess anything at all has been a disaster. Although IE is all but dead now, there's no guarantee that another browser won't try something similarly reckless in an attempt to be a little too convenient.
    • shadowfaxRodeo 6y ago
      So i guess the question is — should we keep markup for the case where someone downloads our webpage on a legacy browser? For me the answer is yes, if people are using an old netbook on a dialup connection and they save your site locally to save data. That could be a good idea. I'll do some testing though because I think even old IE defaults to utf-8.
      • kijin 6y ago
        The edge cases are hard to test. IIRC the weirdest issues had something to do with valid UTF-8 content the first X bytes of which also happened to be valid in some exotic charset related to the user's locale. English users would rarely come across such issues.
      • hsivonen 6y ago
        IE defaults to the locale-dependent legacy Windows code page.
• busymom0 6y ago
  Slightly related note, if you are a web developer, I would highly recommend reading this long read on "How to Section Your HTML". This is especially important if you want your site to function correctly when screen readers are used for accessibility purposes. I would pretty much give 100% credit to this article which helped me go from a newbie on HTML design to knowing how to correctly structure it: https://css-tricks.com/how-to-section-your-html/ https://css-tricks.com/how-to-section-your-html/
• runarberg 6y ago
  All these open graph data tags (!) and half of them redundant. I’m gonna be the one to complain about it here. Why are we adhering to a proprietary format by facebook when equivalent meta tags exists. e.g. why is og:description a thing when we have <meta name="description"> and why specify og:title when <title> is literally the only contented tag required by the HTML standard (so all websites are required to have one). This reminds me of a post from yesterday: “We were promised Strong AI, but instead we got metadata analysis”[1]. And a poor one at that indeed. https://news.ycombinator.com/item?id=26941332 https://news.ycombinator.com/item?id=26941332
  • Mauricebranagh 6y ago
    Because when someone (or our social media team/agency) shares one of our pages on FB we want it to look nice.
    • runarberg 6y ago
      Then a follow up question: Why are the scrapers on FB, Twitter, etc. so dumb? Why can’t they fall back to <title> if <meta name="og:title"> is missing? Why is it my job to make things look nice on their platforms, when all the metadata they require is already there?
      • Mauricebranagh 6y ago
        Optimal Titles are different lengths for different use cases for FB and Twitter ideally you want a call to action shorter title as compared to a longer optimised page <title>
        • runarberg 6y ago
          It still begs the question: What about the—in my experience—more common use case where they are the same (i.e. current title and description is sufficient for social shares)? Here is an example of a discord server refusing the expand the site description and title on one of my sites[1], just because there is no og:title and og:description (even though I provide both <title> and <meta name="description">). All I can take from this is either: a) Social media companies are bad at (or don’t care about) implementing common sense features, or b) Facebook is actively and aggressively pushing their own proprietary format over established standards. In either case it is bad. 1: https://forums.online-go.com/t/random-starting-position-flexible-komi/35771/19?u=runarberg https://forums.online-go.com/t/random-starting-position-flex...
• maddyboo 6y ago
  If you wanna get real fancy, you could replace document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js'); with document.documentElement.classList.replace('no-js', 'js'); https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/replace https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenLis...
  • ryannevius 6y ago
    But in the first example, `js` is always added, even if `no-js` doesn't exist.
    • C4stor 6y ago
      In the context of the presented html, the first line is <html lang="en" class="no-js"> . So, "no-js" does exist.
      • umvi 6y ago
        Indeed, but this is a case where you are reducing lines of source code in exchange for (slightly) increased coupling and fragility. By replacing remove/add with replace, you have now made an assumption that causes the replace line to be coupled to the html lang line where no coupling existed previously...
        • playpause 6y ago
          It's a well known convention (CTM), it's been part of a lot of front end application shells for years. Like other shells, an HTML boilerplate is somewhat expected to be a delicate, hand-optimised system. When it needs revising (which should be very rare) it should always be reasoned about as a whole. Its job is to bootstrap the front-end environment with maximum efficiency, and that means doing things that would be considered bad programming in another context.
  • spookyuser 6y ago
    Wow thank you, tangentially I was trying to figure out how to change a hidden object to visible with tailwind and this seems like it would be perfect for that!
• megous 6y ago
  You can also skip the " in many places, to be even more minimal. Browsers don't follow the standard here completely, so you can do: <a href = /some<!--li=nk<<"&wer' >link</a> and all that garbage is parsed as is as attribute content until the first space or >. Only thing that terminates attribute value is > or whitespace. You can also use entity refs in unqoted value. That means you can use unquoted attribute values for almost anything that doesn't contain whitespace when writing html manually.
• crazypython 6y ago
  Note that HTML allows you to avoid quoting parameters to make them easier to type: <html lang=en class=no-js> This is a feature React lacks.
  • xixixao 6y ago
    In JSX it wouldn’t be obvious whether “en” is a variable/literal or a string.
    • postalrat 6y ago
      It's always a string unless it's in a {} pair. So if < lang=en > it would always be a string.
• abbe98 6y ago
  What are the benefits of using the no-js approach over a style or link tag inside of a noscript element? Other than that all CSS can be contained in the same file.
• greggturkington 6y ago
  Cool, this is like https://github.com/h5bp/html5-boilerplate https://github.com/h5bp/html5-boilerplate but a little worse
  • edoceo 6y ago
    why worse?
    • greggturkington 6y ago
      Is it better in any way? There's very little difference. We might not need a canonical URL, the favicon declarations are not needed, there's no repo...there's a reason HTML5BP is an industry standard.
      • postalrat 6y ago
        Is it the same reason create-react-app is an "industry standard?"
        • greggturkington 6y ago
          no of course not, is this your first time hearing of HTML5BP? There's a reason most of OP's boilerplate is copied and pasted from HTML5BP.
• atum47 6y ago
  I used to have a template (with css and js) that can be used as PWA, with offline caching and all that stuff. I copy most of the stuff from Google itself, but I never found their explanation that great. I wish there was a guide for it too
• TheGoodBarn 6y ago
  The only other tag I suggest adding to this, especially since its a boilerplate is the <meta http-equiv="X-UA-Compatible" content="IE=edge">. [You can read more about why from smart people on StackOverflow](https://stackoverflow.com/a/8942455/10783165 https://stackoverflow.com/a/8942455/10783165)
  • matijs 6y ago
    As far as I know, edge is the default mode [1], no need to set it explicitly, especially not for sites that target modern browsers. [1]: https://docs.microsoft.com/en-us/archive/blogs/ie/living-on-the-edge-our-next-step-in-helping-the-web-just-work https://docs.microsoft.com/en-us/archive/blogs/ie/living-on-...
• ChrisArchitect 6y ago
  fix the fucking dates on these blog posts April 9., 2021
• deleted 6y ago
  [deleted]
• SavantIdiot 6y ago
  I think it is important to review best practices like this yearly. However I am also disappointed how much accomodation is required to make various platforms happy. From social media cues with og: to meta tags for crawlers, to manifests for Android. It just seems ... infected with ephemera. I mean, social media is pushing 20 years so I'm probably sounding my age, but something about all those customizations hidden behind meta tag prop lists is icky. IMHO.