Frontend for backenders

# Frontend for backenders ----  ----  ----  --- # INTRO ## Once upon a time ----  ---- ## IE ### 🥴🤒🤕🤧😤🤯😩🤬😓 ----  ---- - Not following standars - Full of bugs - A pain to code for it ---- - IE Hacks ```html  ``` - `caniuse.com` ---- #### HTML ![](https://i.imgur.com/mkBZ5go.png) ---- #### CSS ![](https://i.imgur.com/GONelGC.png) ---- #### JS ![](https://i.imgur.com/PyhAYHv.png) ---- #### JS ![](https://i.imgur.com/NKS40UM.png) ---- #### JS ![](https://i.imgur.com/OgvBJdi.png) ---- #### Polyfill ```javascript= // https://tc39.github.io/ecma262/#sec-array.prototype.find if (!Array.prototype.find) { Object.defineProperty(Array.prototype, 'find', { value: function(predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); } var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1]; // 5. Let k be 0. var k = 0; // 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; } // 7. Return undefined. return undefined; }, configurable: true, writable: true }); } ``` ---- - 9/2004: 🔥🦊 - 12/2008: 🔧✨ ----  --- # CSS ----  ---- ### Selectors and specificity ---- #### Type selector ###### (Weight 1) ```css= div { margin: 10px; } img { width: 200px; } h1 { font-size: 16px; } ``` ---- ### Pseudo elements ###### (Weight 1) ![](https://i.imgur.com/g3QWV81.png) ---- ### Classes ###### (Weight 10) ```css= .item { border: 1px solid black; } ``` ---- ### Pseudo-classes ###### (Weight 10) ![](https://i.imgur.com/W1mEaU5.png) <aside> - disabled - first - focus - hover - not </aside> ---- ### Pseudo-classes ###### (Weight 10) ```css= input:disabled { color: grey; } ``` ---- ### Attribute selector ###### (Weight 10) ```css= [attr=value] { ... } ``` ---- ### Id selector ###### (Weight 100) `#content`, `#app` id selector ---- ### Inline styling ###### (Weight 1000) ```htmlmixed <h1 class="blueText" style="color: red;">I'm red</h1> ``` ---- ### Style rule weight ```javascript= weight = 1 * (countTypeElements + countPseudoElements) weight += 10 * (countClasses + countPseudoClasses + countAttributes) weight += 100 * countIds weight += 1000 * inline styling ``` ```sass= p { color: black; // weight 1 } .highlight { color: blue; // weight 10 } p.highlight { color: green; // weight 11 } #header .highlight { color: red; // weight 110 } #app form.active ul li label input.company[value=codestar]:hover { color: orange; // weight 5 + 10 * 4 + 100 = 145 } ``` ---- #### Combinators - ` ` descendant (space) - `+` sibling - `>` child - `~` general sibling ---- ### The importance of `!important` ```= <h1 class="a b">Do you know my colour?</h1> ``` ```css= #app form.active ul li label input.company:hover { color: red; } .b { color: blue; } ``` ```css= #app form.active ul li label input.company:hover { color: red; } .b { color: blue !important; } ```  ---- Weight 10000 Avoid `!important` --- ### SASS/SCSS ### CSS Modules ### CSS in JS --- ## HTML5 ---- ## HTML5 - Semantic tags - `<section>` - `<article>` - `<aside>` - `<header>` - `<footer>` - `<nav>` - `<main>` ---- ## HTML5 - Multimedia tags - `<video>` - `<audio>` ---- ## HTML5 - Forms - `<input>` - `type="email` - `type="tel"` - `type="color"` - `type="number"` --- # JS ---- ## jQuery ---- ## jQuery Launchedin 2006 <ul><li>In 2015, jQuery was used on 63% of the top 1 million websites, and 17% of all Internet websites.</li> <li>In 2017, jQuery was used on 69.2% of the top 1 million websites.</li> <li>In 2018, jQuery was used on 73% of the top 1 million websites, and by 22.4% of all websites.</li> <li>As of May 2019, jQuery is used by 73% of the 10 million most popular websites (according to W3Techs<i>)</i>.</li></ul> ---- ## jQuery Usefull - `$('.button').on('click', doStuff)` - `$.ajax()` ---- ## jQuery http://youmightnotneedjquery.com/ ---- ## ES6 and beyond <iframe data-src="https://kangax.github.io/compat-table/es6/" width="100%" height="500"></iframe> https://kangax.github.io/compat-table/es6/ ---- - angular - vue - react Screenshot 2019-09-05 at 07.59.31 ---- ### React ---- ```html <html> <head>...</head> <body> <div id="root"></div> </body> </html> ``` ```jsx import React from 'react' import ReactDOM from 'react-dom' import { App } from './modules/App/App' ReactDOM.render(<App />, document.getElementById('root')) ``` ---- ## Typing - typescript - flow ---- ## Compilers - Babel ---- ## What about mobile? - React Native - Ionic - Cordova ---- ## Libraries - `lodash` vs `underscore` - `date-fns` vs `momentjs` FP!  - `Modernizer`  ---- ## Tools - npm _(node package manager)_ TODO add npm's growth - webpack - CRA ---- # More - SEO - Accesibility - Mobile - Webcomponents ---- ## Want to know more? - frontedmasters TODO add links ---- - CSS 3 - you might not need javascript - which build tool use, - npm, webpack, why - recommend which tool to use if they want to use frontend - CSS - explain - possible in 2019 - links to learn - from jQuery.ajax to fetch to axios --- ### Thank you! ### hackmd.io/@mikel/fe4be ![image alt](https://api.qrserver.com/v1/create-qr-code/?size=512x512&margin=20&data=https://hackmd.io/@mikel/fe4be)