IMD: Assorted Tips & Tricks For Web Stuff

A set of bullet points, quick tips, and selfish opinions for building for the Web. Given as a guest lecture to University Of Ulster IMD students in March 2017.

Transcript

1. assorted tips and tricks (for Web stuff) UUJ IMD March 2017
2. neil mccallion njmcode.github.io codepen.io/njmcode @njmcode @belfastjs senior ui developer, moola former head of frontend development, +rehabstudio co-organizer, belfastjs
3. what i do in my job things i use working in the browser be great at/for the web things i ask of you quick wins & useful stuff
4. what i do in my job - work with designers, devs, producers, product owners and users to make things - create user interfaces on the web - write tools and scripts to make things better - be responsible for everything the user touches - promote performance, responsiveness, and accessibility
5. things i use javascript (es6) html5 + css3 webpack node chrome devtools github photoshop / sketch invision trello / jira html5 web apis react + redux mocha + chai angular phaserjs threejs express python some editor / IDE
6. working in the browser - keep it lean / fast - learn es6 - be consistent (style, linting) - react + redux are popular - learn patterns, not frameworks - user experience > dev experience - does it need js? - animate with css3 where possible - *always* test on a device
7. be great at (and for) the web - try not to think ‘mobile-tablet-desktop’ - start small, build/design upwards - add breakpoints to suit the design - build for small size despite the design - think ‘pointer’, not ‘touch vs mouse’ - accessibility & performance are features - practice progressive enhancement / offline - the web needs good experiences to stay relevant and viable - ‘joy?’
8. things i ask / beg of you - always respect the user - test designs fast and fail faster - find your passion / niche and grow it - keep an open mind (don’t restrict yourself) - show, don’t tell (but get good at telling) - don’t pretend to be something you’re not - find a mentor, then pay it forward - remember this is not life and death
9. quick wins & useful stuff - turn your linter on - add meta theme & viewport tags - add a manifest file - show *something* before you load your js - get a codepen / jsfiddle account - play with the web apis (canvas, webgl, audio, geolocation, etc) - devtools emulation, throttling, profiling - have a life
10. thank you and congrats! UUJ IMD March 2017