From 1st-3rd June the Interactive Content team attended Scotland CSS & JS for the first time. The venue was Our Dynamic Earth and the list of presenters/attendees was truly international. Each of us have written a short summary on our favourite speakers.
Stuart Brett’s Notes
#01 – “Let’s Talk About Midi”- Ruth John.
A/V, Dev, Design, Code & Craft, R&D at a big mobile co. (@rumyra)
Ruth’s notes can be found here – https://midi-talk.herokuapp.com/
#02 – “The VR Web And The Future Of The Browser” – Livi Ericsson.
VR/AR Developer Evangelist, Microsoft (@Misslivirose)
Livi’s slides and project links – https://livierickson.com/blog/scotlandjs-virtual-reality-in-the-browser-today/
#03 – “Practical Colour Theory For People Who Code” – Natalya Shelburne.
Front end developer, Rooster Teeth. (@natalyathree)
Natalya’s talk on colour theory started with a show of hands to see who was aware of colour theory and the colour wheel. A 3rd of the room put up their hands. I was astonished to see so few coders, content and UI designers say that they are not familiar with colour theory or use it in everyday practice. My background is in Illustration and Graphic Design, all of which were part of my degree. Like Natalya, I’m an Art Student and my university days were not spent as a developer. I still struggle with using that side of my brain that relates to coding! However, I’m surprised that colour theory isn’t part of a modern student programmer’s syllabus. Learning Colour theory is super easy and there are heaps of apps and documents available on the web. Using a colour wheel is something I haven’t done for some time, as it sort of embeds itself into your subconscious. My years working in the design industry helped with that, but I found Natalya’s talk very useful and a timely reminder that it is always good to keep your colour theory up to scratch – and even more so, if you’re currently developing websites and have never worked used colour theory when approaching GUI design.
Natalya has an online demo of her functions for a complementary color scheme – pick any color on the color wheel and the functions will make sure that the scheme will still work! – http://tallys.github.io/color-theory
Jackie Aim’s Notes
#04 – “How Cognitive Psychology can help you write better code” – Sílvia Pina (@smourapina)
Sílvia is a polyglot software engineer working at Zalando. She previously studied psychology and neuroscience.
In an ideal world a programmer has:
- mathematical ability
- processing capacity
- analogical reasoning
- conditional reasoning
- procedural reasoning
- temporal reasoning
The Stroop effect
If anyone has ever done Brain training on the Nintendo DS you may have come across the Stroop effect. It consists of words i.e. red, blue, yellow and green and you have to read the colour of the word not what the word spells. So the word may say blue but its colour is red.
Many code text editors use Syntax colouring or highlighting. Software such as Sublime Text or Brackets.
- Everyday decisions
- Error prone
- Complex decisions
- Representativeness bias – if unfamiliar a tendency to look for similarities
- Availability bias – reliability on strong or emotional memories
- Anchoring bias – to rely on one piece of information
- Confirmation bias – interpretation that confirms your preconceptions
- Be aware of cognitive biases, >-<
- Question everything
- Pro’s and con’s
Sílvia talked about using probability & statistics and frameworks & theory to reduce biases. Wikipedia has a comprehensive list of cognitive biases.
#05 – “Creating Accessible Components” – Cat Hawker (@auberdjinn)
How to avoid the accessibility pitfalls of rich interactions and create a fantastic experience for all your users. Cat is a web developer and accessibility champion for the BBC in Glasgow.
- Smartphones and watches
- Screen magnifiers
- Screen readers
- Braille displays
How do people use your app?
- Voice input
Where to start?
- Test for visual accessibility
- Zoom in
- Use greyscale mode
- High contrast
- Font size in browser
- Relative units for text
- Use SVG’s
- Avoid text images
- Choose colours with sufficient contrast
Standard keyboard controls
- Shift & tab
- OS X: VoiceOver (cmd + F5)
- Windows: NVDA (free)
- iOS: VoiceOver
W3C Recommendation: Accessible Rich Internet Applications (ARIA)
ARIA-live listen out for changes e.g AJAX.
For more on accessibility – BBC: Mobile Accessibility Guidelines
Stewart Cromar’s Notes
#06 – “An A to Z of CSS” – Umar Hansa (@umaar)
- One memorable highlight for me in Umar’s very interesting “A-Z of CSS” presentation was multicolour web fonts such as Painter Kafeel
- Where you can stack multiple fonts together and apply different colours to various elements of each letter
- Painter Kafeel is the digitised version of handpainted lettering originally done by signboard painter- Kafeel. It consists of 9 fonts, which when used together recreate the unique multi colored look of Indian Street Lettering
- Sign up to Umar’s newsletter and receive a developer tip, in the form of a gif, in your inbox each week:
#07 – “How to Ask about Gender” – Chad Gowler (@kitation)
- One very engaging and recurrent theme during Scotland CSS & JS was gender identity and inclusivity. Several speakers showed how developers could improve both their personal approach and technical solutions towards these subjects
- Almost every presenter conveniently provided their preferred pronouns in either their PowerPoint slides or Twitter profiles, for example:
- Chad Gowler gave an extremely interesting and practical talk on “How to Ask about Gender” and what best she considers best practice
- One interesting takeaway was that a “title is not a legal required part of name”
- In addition to Mr, Mrs, Ms., consider adding the gender neutral title Mx
- Do not use titles to assume gender
- Having an ‘other’ option is “othering” and be deemed dehumanising
- A good example mentioned was the Scratch sign-up form – tells you why their asking for gender and gives a free text option in addition to male/female. Only fault is it’s missing a label for 3rd option for accessibility i.e ARIA. Maybe call it “please specify”?
- Gender – Why do we ask for this info?
- This helps the Scratch design team understand who is using Scratch, and provides information that helps us broaden participation. This information is not visible on your account, and is only used to describe overall participation.
- Previously highlighted for ‘bad practice’, Vimeo profiles are now updated to include a preferred pronoun selection
- Help us call you by the proper pronoun:
- Female / Male / Neutral / Rather not say