thinkful-ed / css_layout_exercises_starter_files Goto Github PK
View Code? Open in Web Editor NEWSolutions for CSS Layout Exercises
css_layout_exercises_starter_files's People
Contributors
Stargazers
Watchers
Forkers
mariajosetamayo niketarachhadia jenn083 amandaovermyer kevl927 taivic wtyler1 mkroma0642 phoebejlau gnarnia dkaf felsenbary danroche01 lavioli poiezen roudsari113 kmjacobsen y0haa colt15 chrisk74 shraddhayadav born2fly harari80 thitaphat29 mikefulp007 kasprin2 tlgbragdon artificered ajmannion elaineklaw sengjoe theatreknitter cclark11 deborahak alexander-poe mattressburn dennellmarie tangledtippet haraku1 jlgatapia annnak dsopel94 michellehl piseidesign victorsc45 ijbardales stupidvegan emiliakazoo cents123 hnnguyen45thinkful yosukeonrails briancbarrow joshatron1212 mushahidh rajbhavani jamiewarb rjsabia katajam jpke mlaw-thinkful kylewong975 kadinvanvalin zyining tindy360 jsylman cjransom kylemoser5 kevinasf thomasjhuang jayedward21 archbloom bd711 kellator lllacher ad66216 seancovington alexmazur6 valiukas0606 annejones817 raeizon malenamaffei khalidhakimi changfenxia georgeverity bryantee amcavinue ollienixon subhasischakrabortygit whyte22 icellent asmith1820 lawrence33 suyeda623 lunalisa cartradge brian-spaeth harsh183 mzarako lirina paschwyncss_layout_exercises_starter_files's Issues
Add display:grid exercise?
It is quickly becoming safe to use having landed in Chrome, Firefox, coming soon to Safari. Mostly just waiting on Edge.
http://caniuse.com/#search=grid
No Lang on <HTML>
📛 This is a serious violation of WCAG 2.0 Level A 📛
The <HTML> element should always have a lang attribute set. No exceptions.
If there are any questions or concerns resources can be provided but the TL;DR is that otherwise you wind up with screen readers reading the page in English with a French accent.
See Also
css_layout_exercises_starter_files
Defer Font Loading
There is a render-blocking request for the largest asset on the page. As it is now, the font has to be loaded before the stylesheet or any of our HTML content.
This can be resolved using a nifty pattern of JavaScript (onload) and a <noscript> tag.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">This will prevent the browser from seeing the stylesheet as a blocking request and then will set the media attribute to all (or screen, or whatever) on load. Problem is, if JavaScript is disabled, onload won't happen. So we use a <noscript> fallback.
Finally, our entire pattern looks like so:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="all"></noscript>Furthermore, we should be putting the <link> that loads the fonts at the bottom of <head> so as to not promote bad habits. The main style sheet should always be included before fonts and definitely before any scripts.
User Stories and Perspectives
- I’m a blind user with a screen reader. I'd rather not wait for content until something that isn’t relevant to me, and is a large file size, downloads.
(web fonts are generally larger than your average blocking stylesheet and stylesheets can still be pertinent to blind and low vision users) - I'm a low–vision user who uses user agent style sheets to override web typography to be more accessible to me. I won't see your typefaces anyways, so please don't make it block the content of the page or other styles.
- I am in a hurry and/or on a slow connection and would like styled web content to be consumable before large web fonts load.
Pros
- SEO improvements via significant improvements optimizing delivery of web content
- Noticeable speed improvements (more "snappy")
- More inclusive delivery, as we are not making delaying access to the content to the blind for something that is only relevant to the sighted
Con
- The web page may appear with standard fonts briefly before the web font is loaded. With best cacheing practices this can FOUT can be avoided on return visits.
See Also
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.