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.
/speakerdeck.com/shaunbent/reducing-duplication-and-driving-consistency-at-the-bbc (no longer online)
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
- 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
/factor.io (no longer online)
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 - 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: https://leaverou.github.io/animatable/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
animation timing function https://css-tricks.com/almanac/properties/t/transition-timing-function/
creating visual flair - codepen example, wooaaa
doing something crazy - R2D2 animation https://codepen.io/Xpressive_Team/pen/LeHGF
SVG animation with keyframes
SVG - snap.svg - http://snapsvg.io/
webkit browser prefix
/valhead.com/book/ (no longer online)
Building and testing jQuery plugins for 2015
2015 = 10th anniversary of jQuery (nearly)
jQuery is a swiss army knife: https://vimeo.com/68549483
Dom / Events / AJAX / Extensibility (plugins)
benefits of writing plugins
- modular code
Using a boilerplate: jqueryboilerplate: https://jqueryboilerplate.com/
building and testing your plugin jasmine - https://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
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
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: https://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 https://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: https://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!