WTFE?! What the Front End

• ! > / b < # karl tynan. @karltynan wtfe?! what the front end?!

let’s get to know each other… ● senior software developer at Rock Solid Knowledge ● 16+ years working with HTML, CSS and JS ● 7+ years working with Umbraco (since v4) ● Umbraco Certified Professional ● co-organiser of umBristol meetups

do you even front end?

2019 2018 2017 2016 2015 2014 2013 2012 2011 display: flex; border-radius: 1rem; display: grid; transform: scale(1.5); position: sticky; color: var(—primary);

2010 2009 2008 2007 2006 2005 2004 2003

2010 2009 2008 2007 2006 2005 2004 <table> <img src=”spacer.gif” /> style=”color: red” 2003

tables <table>…</table>

! don’t use <table> for layout…

demo…

semantic html + css… <table class=”chart”> … <tr> <th class=”title”>Q1</th> <td class=”old”>£200</td> <td class=”new”>£400</td> </tr> …

lobotomized owl but .first … . amazing pun btw..

helper classes .first .last .odd .even etc…

the problem with helper classes… <ul class=”nav-menu”> <li class=”nav-item first”>…</li> <li class=”nav-item”>…</li> <li class=”nav-item”>…</li> <li class=”nav-item last”>…</li> </ul>

the problem with helper classes… .nav-item { margin-right: 1rem; } .nav-item.last { margin-right: 0; }

pseudo classes :first-child :last-child :nth-child(odd) etc…

the problem with some pseudo classes… .nav-item { margin-right: 1rem; } .nav-item:last-child { margin-right: 0; }

internet explorer did not support :last-child until IE9 wtfe?!

can we do it better?! yes, we can :not()

why not()… .nav-item:not(:last-child) { margin-right: 1rem; }

a warning on not()… .nav-item:not(:last-child) { color: red; } .nav-item { color: green; }

a warning on not()… .nav-item.not-last { // specificity of 2 color: red; } .nav-item { // specificity of 1 color: green; }

lobotomized owl +{…} Heydon Pickering: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

demo…

owl vs child… .side-bar * + * { margin-top: 1rem; } .module-one:not(:first-child), .module-two:not(:first-child) { margin-top: 1rem; }

so you want to be a hipster dev?

dark mode @media (prefers-color-scheme: dark) { … }

demo…

turn the lights out… .side-bar { background-color: #eee; // very light grey } @media (prefers-color-scheme: dark) { .side-bar { background-color: #222; // dark grey } }

…or turn the lights on @media (prefers-color-scheme: light) { .side-bar { background-color: #eee; // very light grey } }

…or the user doesn’t care @media (prefers-color-scheme: no-preference) { .side-bar { background-color: #c00; // vibrant red } }

so hot right now…

responsible motion @media (prefers-reduced-motion: reduce) { … } MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

prefers-reduced-motion ● media query based on user preference ● tailor animations to be more accessible ○ sensitivity, vertigo, nausea ○ remove distractions and frustrations ● works in Chrome, Opera, Safari and Firefox ● soon to be available for Edge

html dialogs <dialog>…</dialog> MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

html datalists <datalist>…</datalist> MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<datalist> ● native input options… like an autocomplete ● say goodbye (again) to JS plugins ● works in Chrome, Opera, Safari and Firefox (text inputs) ● partial, buggy support in IE10+ and Edge ● fixed in next version of Edge

thank you. karl tynan. @karltynan