
Front-End Checklist - tomcam
https://github.com/thedaviddias/Front-End-Checklist
======
Raphmedia
> Alternative text: High All <img> have an alternative text which describe the
> image visually.

Please don't do that. Don't put an alt on ALL images. Screen readers will read
all of them. Skin and flavour images don't deserve to be read outloud. Nobody
wants to hear "bottom left corner of logo" or "rounded corner".

~~~
rimliu
This recommendation would be fine 20 years ago. You should not have any
decorative images in your markup, they belong to CSS.

~~~
Raphmedia
Agreed but it does happen. Sometimes, the line between content and decorative
it pretty thin.

Should you add an alt to a stock photo?

Should you disturb a user with a reading of "stock photo of a business man
smiling" next to a sales paragraph? What about "sunset over a mountain" on a
page for a SaaS website?

~~~
extra88
Some people disagree but I think most say the stock photos should have
alternative text. The photo is there for a reason, to convey something, and
the text should indicate that (though usually not explicitly). Usually you
don't use "photo" in alt text, the assistive technology will announce "image"
with the text, and usually you don't want to call attention to the fact that
an image is a stock photo. "Businessman smiling" or "smiling man in suit"
would probably be good. You might add some adjectives that help convey why the
image was used, "peaceful sunset over mountain."

The goal is not so much to make the best experience for the assistive
technology user but to provide as close to the same experience as possible,
bullshit marketing crap and all.

------
MatthewPhillips
Note that you don't actually need the head or body tags in your page. The
browser already knows what is allowed in the head. It looks weird at first,
but you can write your html like so:

    
    
      <!doctype html>
      <html lang="en">
      <title>My Title</title>
      <div id="main"></div>
    

Also note that the html tag can also be omitted, unless you need to set the
language. Don't worry about closing it either.

~~~
Deimorz
Edit: my original comment (retained below) is wrong about this being
malformed, and it's completely valid. Some more info here:
[https://html.spec.whatwg.org/multipage/syntax.html#optional-...](https://html.spec.whatwg.org/multipage/syntax.html#optional-
tags)

\---

 _Original comment_ :

The fact that browsers are _able_ to handle malformed HTML doesn't mean that
you should do it that way. There's no meaningful benefit that I can think of,
and the potential to break a ton of things that aren't as lenient.

~~~
irrational
My understanding is that it is not malformed, but actually a part of the spec.
Maybe someone else has a link to the appropriate part of the spec, but
following someone else's link to the spec and reading it for myself is how I
learned that it is not malformed.

~~~
SippinLean
>Tag omission in text/html:

>An html element's start tag can be omitted if the first thing inside the html
element is not a comment.

>An html element's end tag can be omitted if the html element is not
immediately followed by a comment.

[https://www.w3.org/TR/html5/semantics.html#the-html-
element](https://www.w3.org/TR/html5/semantics.html#the-html-element)

------
davedx
These are very subjective, I've never done half of the 'high' priority items,
and I've never had any issues with my site having a 'disfunction'. Take this
list with a gigantic grain of salt.

For example, your site certainly won't break from missing the 'lang'
attribute.

~~~
groby_b
No. But e.g. automated translation now needs to guess your language, and
that's... not always successful. Screenreaders will need to guess the language
to pronounce properly. Search engines will have to infer the language. And so
on.

Your site isn't "broken", per se, but it's not as high quality as it could be.

~~~
chrismorgan
I wonder how much lang=en can actually be trusted—enough things put it in by
default that I can easily imagine its presence on non-English pages.

 _Update:_ from elsewhere on this thread, Google ignores <html lang>:

> But the language attribute within the HTML markup is something we don't use
> at all. We've found that this language markup is something that is almost
> always wrong. So we tend to ignore that.

[https://www.seroundtable.com/google-ignores-the-html-lang-
at...](https://www.seroundtable.com/google-ignores-the-html-lang-
attribute-22974.html)

~~~
groby_b
It tends to be more reliable if it's not lang=en. The cargo culting nature of
web development makes some things a bit painful.

FWIW, Chrome's translate feature does care about lang=. Or at least it did
last time I checked.

It's one of the things that has no downside, and a small upside. If you leave
it out, your site isn't horribly broken. People will always get the content,
but tools that process the content might be wrong.

------
ozaark
Seems like this could be presented without as much clutter. Not really useful
at a glance for a checklist. Also, some of the info isn't well researched and
lacks citations for claims as others have mentioned.

One would be better off just using the Google Web Starter kit[1], other
boilerplate options, or just chrome dev tools running Audits to get started
with a solid front-end.

[1] [https://developers.google.com/web/tools/starter-
kit/](https://developers.google.com/web/tools/starter-kit/)

------
rco8786
Following this list is a great way to never launch something into production.

~~~
sergeyfilippov
Just keep a boilerplate handy

I've helped a friend to publish a one-page website over the weekend, and I
believe it follows most of this checklist

------
amk_
This would be a good checklist for anyone considering building a UI framework.
This kind of thing is the reason Bootstrap & friends are so large - they do a
lot for you.

------
frio
I can't help but notice there's no "Security" section. Perhaps by the time
you've got the HTML rendering it's too late, but SRI tags, CSP headers and
whatnot all deserve some mention.

[https://github.com/thedaviddias/Front-End-
Checklist/issues/2...](https://github.com/thedaviddias/Front-End-
Checklist/issues/23)

------
ravenstine
> All <img> have height and width set (Don't specify px or %)

So what unit should be used?

~~~
CM30
None, image height and width attributes don't have the unit included.

(They generally assume these values are in pixels by default[1])

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/im...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/img)

------
stefantheard
Awesome list, I always forget about several things on here it's going to be
nice to have a reference to prevent that from happening.

------
speedplane
Here's a better checklist: Run a W3 validator on your HTML, fix the red stuff
that isn't too annoying to fix. Launch. Deal with all that other stuff later.

------
franze
<body lang="en"> \- High?

why?

~~~
Teichopsia
I also found that odd. I've always placed mine in the HTML tag.

    
    
      <html lang="en"> 
    

tough, I don't know what the difference is.

~~~
robin_reala
Putting it on <html> is better as that defines the language for <title> as
well. The lang attribute defines the language of the tree that the element is
the root node of.

~~~
franze
still, who uses it for what? browsers dont change behaviour because of it,
search engines ignore it, users dont see it.

~~~
robin_reala
1\. The main reason is screen readers. Imagine a screen reader trying to
pronounce ‘Je ne regrette rien’ with an English voice, then imagine the same
with a French voice.

2\. I’d be surprised if search engines didn’t use it at least as a flag for
content language (although I’m sure that it‘s only supplemental at best).

3\. Styling based on language. CSS has a :lang() pseudoclass selector so you
can do p:lang(en) { color: red; } p:lang(fr) { color: blue; } . Or tie quote
styles to language based on generated content. Or most usefully adjust font
metrics based on language for multilingual sites (typically you’d want to
boost the font size a little for Chinese or Japanese as there are less
characters for same information, but each character is a little more dense).

------
swoongoonz
>Pixel perfect: High Pages are close to pixel perfect. Depending on the
quality of the creatives, you may not be 100% accurate, but your page needs to
be close to your template.

What is this 2004?

------
threatofrain
An oft overstated thing -- but the organization of CSS is currently being
massaged by the front end community, and in-line CSS is no longer considered
an awful thing with Radium and others.

------
adad95
I love the [http://webdevchecklist.com/](http://webdevchecklist.com/) site.

------
chente
Pixel perfection, are we still striving for that?

------
jkaljundi
Are sitemaps still a thing that really matters?

~~~
miguelrochefort
Don't you wanna get crawled?

~~~
jkaljundi
Have not found the crawl rates changed for sites where everything is well
linked together. Then again, these have been just small sites with a few
million pages.

~~~
franze
measurability

crawling != indexing

with a segmented sitemap (i.e.: one per pagetype, per namespace, ..) you get
important communicated to indexed ratios you otherwise do not get.

if crawling and indexing works, it works but if it doesn't you should know it
(see it in google search console) and debug it (narrow it down via segmented
sitemaps).

~~~
andrei_says_
Curious if you have examples of the types of sitemaps you mentioned:
segmentation, namespacing, one per pagetype etc. and the reasoning behind the
variations.

~~~
franze
i.e.: tourradar.com/robots.txt

------
iKenshu
What about back-end? Should be nice have one

~~~
techtalsky
OWASP guidelines are a good start.

------
miguelrochefort
It's already missing iPhone X support.

~~~
zeronight
It will be interesting to find what the visitor percentages are for iPhone x.

Even though its Apple, at some point its not worth spending the time and
money.

~~~
miguelrochefort
The iPhone X will be sold out everywhere until 2018.

------
mycentstoo
What would be a great idea is an app that scans for the presence of these
conditions.

~~~
laktek
If anyone wants to have a crack at it, you can use Page.REST to build it. If
not I might be able to get to it towards next week :)

