Yesterday I had a great time at Front End North http://makedo.in/frontendnorth/. Thanks again to @makedoers for organising and invting me to speak. Here are the links to the slides and my notes from the day.
Optimising Your Front-End Workflow
I was first up, my slides can found here: https://s10wen.com/blog/2014/11/15/front-end-north-2014-slides/
Thanks so much for the kind words on twitter!
Dynamic Static Site Strategies
great 'more ambitious slide'
return to simplicity
#amobilefirstresponsivewebapp otherwise known as a web site
"Bake, don't fry"
reduce complexity - ease of deployment - increased portability
static = cost of less code, maintenance, time, people, effort, especially at scale
npm install npm isntall
- low friction
- optimise / compress / cdn / automated deployments
Search = fast instance response search, but what about page weight? load async after the page is loaded, cached and static
seek chances to simplify, make stuff faster
Pure CSS cross browser animations for fun and profit
Flash, used for animation, until iPhone...
- bw to colour demo
short code transition e.g.
transition: all 1s linear
transition-this: that; transition-the: other; transition-e: g;
transition - can lay these on top for modern browsers, older browsers will still work, but just lose the transition
sass - mixins
I noticed some of Liam's demo examples showing
margin-left:0 to move elements. These might be better as
css transitions that are animatable: http://leaverou.github.io/animatable/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
animation timing function http://css-tricks.com/almanac/properties/t/transition-timing-function/
creating visual flair - codepen example, wooaaa
doing something crazy - R2D2 animation http://codepen.io/Xpressive_Team/pen/LeHGF
SVG animation with keyframes
SVG - snap.svg - http://snapsvg.io/
webkit browser prefix http://valhead.com/book/
Building and testing jQuery plugins for 2015
2015 = 10th anniversary of jQuery (nearly)
jQuery is a swiss army knife: http://vimeo.com/68549483
Dom / Events / AJAX / Extensibility (plugins)
benefits of writing plugins
- modular code
Using a boilerplate: jqueryboilerplate: http://jqueryboilerplate.com/
building and testing your plugin jasmine - http://jasmine.github.io/
behavior driven development
Signs you may need a framework: Co-ordinating behaviour across compononents Feature rich behavaiour angular / ember / react
Benefits of both jQUery / framework
- modular code
- unit tesing
- auto loading (require.js)
- CI (jarvis)
- Task automation
Get Back to Play: How Play and Playfulness Help Us Build Better Products and People.
Get back to play, how being play full can help.
3 types of play
- inward focused play "the initial human geography"
- omg these people are doing what I'm doing, kid moving to music and people around him are copying him dancing
- "where narratives start becoming constructive"
- e.g. where red means angry / danger
- getting the adult rules, but playing with them. e.g. 2 year old rapping, starting and stopping rapping at the correct time but not actually speaking actual words.
- "don't grow up, it's a trap"
einstein / picasso quotes
nobel awards - not afraid to try out new things - levitating frog
Google helping us with out macrosphere's with Google Doodle
Don't be a bully
- If kids don't know something, they'll have a go
- As adults we become frightened that asking a simple question, may be a stupid question and wasted time
Be kind and open about ideas.
"Make thoughts, don't receive them" - e.g. a Breaking Bad watching marathon. In this state we're constantly just receiving a brain wave and not using other brain waves.
Alpha and theta brain waves: http://www.finerminds.com/mind-power/brain-waves/
"Take time to go down rabbit holes" - Take a walk without a destination in mind.
Trying to make GOV.UK accessible
VoiceOver comes with OS X and iOS
It's really insightful to watch people use your website e.g. what's a hamburger?
Start with HTML
- write down the information first in only HTML - this will help a lot with accessibility
display: table-cell - was used in a prototype example, but oh oh we need IE6 support.
VoiceOver on/off: Cmd + F5 VoiceOver key (VO): ctrl and option key
Adding filters re-read out the lists every time a filter was updated.
- to get around this, instead of reading out all the lists every time, read out how many list items were available.
Using focus rather than aria-live we also helped keyboard only users.
Chances are if you can make things work better for a keyboard used, this will also help a screenreader.
Using tab on your site is also a quick way to help with accessibility.
Some ARIA properties need to exist at page load.
- blind person gets too much noise
- use a div if you need to extra styles
Listen to your website - Cmd + F5 - find out things you didn't know
Reducing duplication and driving consistency at the BBC
You can watch badgers live, although you may not see any...
GEL - Global Experience Language
GEL - Responsive Typography
bridging the language gap - Harry Roberts / Jeremy Keith
Abstracting typography out into class names e..g rather than
font-size: 20px; line-height: 22px;
Typography to work across products
Delivering a consistent typography across products
Reduced development effort
Increasing re-use across the business
Ease of rolling out updates
- Proof of concept
- Keep going as small little code snippets that people can choose to include if required
- Increase adoption around the BBC
Settings / Tools / Typography / Grid (the next big challenge!)
grid - sass tools? variable names? how are other people doing this? make it open source???
Other credits: https://twitter.com/itsaljones
Communication and Confidence
There is no perfect workflow
Products & Agencies
- difference between fast turn around within a week going to no developers to a year long project going to another team of developers.
Producer / UX / Designer / One or two front-enders / One or two back-enders / Tester
- Find out what works for you and why.
- welcome changing requirements
- deliver working software frequently
- work together daily
- face-to-face conversation
- technical excellence and good design
Autonomous and Collaborative
- quick, get the point across, move on, learn from experience and adapt as required.
Adapting to change
- "I don't want ditch that work I've done", "I don't want to work on it more".
- Let's put this aside and adapt to change and welcome it.
Focus & Confidence
"The need to understand why" - Just Enough Process™
Tools: fading tools out, simplifying github / bitbucket skype / slack
Testing: Etsy devices GhostLab / DeviceLab BrowserSync modern.ie - vms / vagrant
Design and UX: Get involved help / collaborate adapt along the way style guide first
Design Pairing or Art Direction: designer and front-ender working together, changing as they need to create better results
Consistency and Standards: http://cssguidelin.es/
- no dogma about just using it all, but talking it through as a team and working it in with the requirements for the team
- consistent tooling
- allows us to work from a Sass style guide
- typography / colour palette / grid (singularity) / uses sass for wire framing http://singularity.gs/
load-grunt-config (inc.load-grunt-tasks) CSS Testing Deployment / CI Project type specific tasks
- using variables to easily update paths across different projects
require.js Jasmine Yeoman
could be drupal / umbraco / whatever...
DANGER: learning-curves likely trying to get the balance
Perfect Worklow? Nope..
Figure it out as a team and update as required and what's working for you.
Align and Guide Your Project: http://pointnorth.io/
Harry Roberts Trello Workflow: http://csswizardry.com/2014/05/my-trello-workflow/
Adaptability Consistency Reliability Communciction
It's all about the client & their audience, they're paying you money to do a job.
Like this post? Hire Me!