posted on
categories speaking

Front End North 2014 Notes

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.

Slides

Simon Owen:

https://s10wen.com/blog/2014/11/15/front-end-north-2014-slides/

Phil Hawksworth:

https://speakerdeck.com/philhawksworth/dynamic-static-site-strategies-smashing-conference

Liam Richardson:

TBC

Katie Fenn:

https://katiefenn.github.io/building-testing-jquery-plugins-for-2015/

Rosemary King:

TBC

Edd Sowden:

https://speakerdeck.com/edds/accessibility-and-how-to-get-the-most-from-your-screenreader-front-end-north

Shaun Bent:

/speakerdeck.com/shaunbent/reducing-duplication-and-driving-consistency-at-the-bbc (no longer online)

Dan Donald:

TBC

Notes

Simon Owen

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!

Phil Hawksworth

Dynamic Static Site Strategies

great 'more ambitious slide'

  • cgi-bin

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

https://www.staticgen.com/ https://staticsitegenerators.net/

https://en.wikipedia.org/wiki/Jeff_Atwood "Atwood is credited with the proposal of "Atwood's Law" which is a corollary to the Rule of least power design principle. It states that any application that can be written in JavaScript will eventually be written in JavaScript."

1
2
npm install
npm isntall

automation

  • repeatable
  • predictable
  • low friction

http://site44.com

https://pages.github.com

https://bitballoon.com

  • optimise / compress / cdn / automated deployments

https://beerclub.hawksworx.com/ https://github.com/philhawksworth/beerclub

https://developers.google.com/web/fundamentals/ https://github.com/google/WebFundamentals

Search = fast instance response search, but what about page weight? load async after the page is loaded, cached and static

Comments = PooleApp.com = formkeep.com

Site checking = /factor.io (no longer online) = netlify.com

seek chances to simplify, make stuff faster

Slides: https://bit.ly/fenssgeewizz

Liam Richardson

Pure CSS cross browser animations for fun and profit

gifs!

Flash, used for animation, until iPhone…

CSS3 incoming.

CodePen demos

  • bw to colour demo

short code transition e.g. transition: all 1s linear vs

1
2
3
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 top:0 margin-left:0 to move elements. These might be better as translate: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

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/

https://caniuse.com/

  • keyframes

webkit browser prefix /valhead.com/book/ (no longer online)

Katie Fenn

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
  • reusable
  • testable

Using a boilerplate: jqueryboilerplate: https://jqueryboilerplate.com/

Bizarre account in JavaScript where you could override undefined: https://stackoverflow.com/questions/8783510/javascript-how-dangerous-is-it-really-to-assume-undefined-is-not-overwritten http://dsheiko.com/weblog/learning-javascript-from-the-code

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

Slides: tinyurl.com/btjp2015

Rosemary King

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

autosphere

  • inward focused play "the initial human geography"

microsphere

  • 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

macrosphere

  • 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.

"Anything's possible"

Edd Sowden

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

ARIA: https://www.w3.org/WAI/intro/aria.php

aria-live: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

aria-busy: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide

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.

tabindex="-1"

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.

form example

  • 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

Slides: https://speakerdeck.com/edds/accessibility-and-how-to-get-the-most-from-your-screenreader-front-end-north

Shaun Bent

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

1
2
font-size: 20px;
line-height: 22px;

now have

1
2
.get-trafalger
.gel-pica

Typography to work across products

https://www.bbc.co.uk/burmese

Delivering a consistent typography across products

Reduced development effort

Increasing re-use across the business

Ease of rolling out updates

Where next?

  • 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

Dan Donald

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

Agile?

  • Find out what works for you and why.
  • welcome changing requirements
  • deliver working software frequently
  • work together daily
  • trust
  • face-to-face conversation
  • technical excellence and good design

Autonomous and Collaborative

Stand-ups

  • 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

https://csswizardry.com/2014/05/my-trello-workflow/

Baseline

  • 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

package.json

  • 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.

Browse by category: