Mathias Bynes
JavaScript ♥ Unicode
My notes:
He is currently working at Opera.
Created evil.sh – a collection of various subtle and not-so-subtle shell tweaks that will slowly drive people insane (but maybe you could ignore that I even mention it – disclaimer: I won’t be held responsible if you go ahead an test his script! )
He gave amazing examples of things that simply don’t match and “suppose to” with explanations and some solutions to work around it. Be aware: this section is “link-heavy”:
http://mothereff.in/punycode is a tool that uses Punycode.js to convert domain names between Unicode and Punycode (ASCII).
Nice site with insights on javascript and “those very special irregularities, inconsistencies and just plain painfully unintuitive moments” of the language – wtfjs.com
- Unicode standard varies from U+000000 to U+10FFFF possible symbols (not all used)
- Basic Multilingual Plane (BMP) U+0000 to U+FFFF
- The rest are “astral planes” (need at least 4 hexadecimal digits to represent)
ES6 uses brackets and uses the whole scope of unicode but this is not implemented in all browsers. The current solution uses surrogate pairs.
mths.be/punycode – library that counts the strings more accurately.
Now, in ES6, the string character count gets the correct number of chars, check how it works on mths.be/bmf
Countable.js – is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.
Check: http://mths.be/bed about JavaScript’s internal character encoding.
git.io/unorm – unicode normalization on ES6.
A Unicode-aware string reverser written in JavaScript – mths.be/esrever
Check: A robust & optimized ES3-compatible polyfill for the `String.prototype.at` proposal for ECMAScript 6/7 – mths.be/at
Create unicode-aware regular expressions – mths.be/regenerate and mths.be/node-unicode-data
A source code transpiler that enables the use of ES6 Unicode regular expressions in ES5 – https://mths.be/regexpu
The “Pile of Poo Test (TM)” – just use that symbol on your own unicode tests and check if it is returning what is expected or not.
Complete article/slides at mths.be/jsu – the examples will blow your mind… @mathias
Hvass And Hannibal
Collaboration – Making/Thinking/Illustrating Together
The story of Hvass&Hannibal and how we work with different materials and medias.
Amazing colourful and inspiring talk on design and illustrations by @HvassHannibal #AwwwardsBCN A photo posted by Monica Messaggi Kaya (@monicakaya) on
My notes:
Working more on music industry, illustration and exploring textile and 3D spaces. Started as fun, playful, as friends and with illustrations on wall/bars, playful creations with costumes and the ‘smoking ring’ until an ‘official’ poster for school when they decided to create the studio.
She showed some of their work and they were very inspirational to me. The process was of a “ping-pong” where Hvass and Hannibal were working on each other’s drawings and building up their design together. Some very creative ideas, and some “simple” ideas that were just so well executed that created amazing effects. A few:
- Working on “jungle theme” around and the illustrations got to furniture, aprons, plates, etc. Now using loads of MDF for creation and textiles.
- Working with ribbons and dancing on a project (which was raining), working outside and on “the field’ is much harder… lots of try-and-error techniques, amazing efforts.
- Sustainia Award 2012 – amazing work using glass design and materials for the awards. Glass layered with coloured glue.
- Cover for “Ghost of a chance” – manual work and origami-style paper work for a photoshoot. She mentioned that looks graphical/computer design but was manual work!
Unsuccessful sketches can be a “panic database” for future projects.
- Conference design, creating a more “human” conference, more tactile design props and elements, like cut shapes, wooden crate and boxes, hand painted chairs and hand-drawn name tags, posters, panels and decoration. including hanging elements cloud-shaped. Also using pallets for tables, boxes painted for stools, hand-tied name badges. Photo-booth with the props as well.
- Design for children’s library. With shapes allowing characters creation, signs all with the playful arrangements of these shapes.
And many more amazing work can be found at their website: www.hvasshannibal.dk
Check also Stupid Studio – a graphic studio in Denmark that they worked with.
Jeremy Keith
Enhance!
We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least _starting_ things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.
My notes:
Rewiring the brain…. the double meh, Fedex arrow, Toblerone bear, Ducks wearing dog masks – this last one I will never forget… take a look:
The moment you realise all ducks are wearing dog masks…
Remember the Dao of Web Design by John Allsopp – more relevant now than it was then.
Tapping into the Zen Garden to remind us of the separation of structure and presentation.
Progressive enhancement as well: HTML > CSS > Javascript
Shearing layers on architecture/building, where all layers are dependent on the one before.
HTML is fault tolerant, not throwing errors if tags not closed or not understood. He suggests to be structurally honest
don’t use a <div> or a <span> to represent a button, use a <button>!
CSS is also fault tolerant, it won’t stop parsing or showing content, just without style…
Javascript is not fault tolerant (it will throw errors), use safe defaults, but do not rely on them.
In the web front-end stack – HTML, CSS, Javascript and Aria – if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile and it will just work.
Suggests: ember first then angular and then backbone.
“No one wants to think that what they’re doing is trivial” – John Resig
He sees a problem with the phrasing of “the web platform”. It is not a platform… if you have iOS and I’m serving an iOS app you get 100%, if you don’t have an iOS device you don’t get anything, but if you are developing for the web “anyone” can get your content if it is on the web (even using devices in other platforms).
Do websites need to look exactly the same in every browser? Answer: dowebsitesneedtolookexactlythesameineverybrowser.com
BBC – cutting the mustard, supporting FEATURES not which browsers type/version… If a feature is supported then you can get the enhanced version.
Henry Daubrez
No guts, No glory
We are Dogstudio and we come from Belgium. Well, not especially the place you would dream of to grow a digital agency, isn’t it ? You’ve got to grow a pair, dream big, fail bigger and trust your guts. This is our everyday guide on how being weird, integrating research & development, personal projects and taking bold decisions got us to look into whole new perspectives.
My notes:
DogStudio does loads of amazing projects, from printing, web, 3D printing, light installation (and ‘weird stuff’), animation, etc.
A few of the projects they showcased (can we even flex this noun as a verb?)
- The congress
- Kikk festival
- Next Utopia (not sure, but this might be the link)
- superdog.be
Keep the creative juices flowing (yeah, sounds naughty)
You need to know what you are doing, without inspiration and creativity an immense budget won’t help
They use lots of videos, nice imagery, effects, sound effects.
Project cycle: rising up your team’s skills > higher expectations > high quality > better project > repeat.
“50% of a remarkable experience lies in the details.”
- “Bark to work” by dogstudio – fun game
- dragone.com
Live by your vision. Trust your guts. Aim for quality. Party like there’s no tomorrow
@benguedj Benjamin Guedj – @sarrimaxime Maxime Sarri
Amazing super production of sites by Dogstudio… *NEED* to check their website: http://www.dogstudio.be
Divya Manian
Responsive Design: Current State of Affairs and Where do we go from here?
In this talk learn about what we mean by Responsive Design, the workflows around responsive design that exist today, the problems that we have noticed amongst the current workflows and how we are addressing them at Adobe.
My notes:
Product manager at Adobe – her main focus lie in new features on Photoshop to help people on responsive design.
Design decisions outside of canvas…
The researched showed that people were not satisfied with workflows, they wanted to use tools they already have (not learn another), they didn’t like updating tools, there was an increasing collaboration, but lack of tools for collaboration.
The clients don’t really know what is responsive design, they feel hard to keep pace with changing browser feature set, tedious to update design for different devices.
She advocates to determine where the design breaks, determine the breakpoints and prototype for them.
Implementing the design – use same grid as prototype, inventory features you will use, use responsive frameworks.
Check site: html5 please – use the new and shiny responsibly
RD is necessary for websites and data agrees.
OMG! she did all slides in Photoshop! check this: adobe.ly/1CveCdj (didn’t work much for me though… 🙁 )
@divya – manian@adobe.com
Ricardo Cabello & Jaume Sanchez
The Web in the age of WebGL
In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors. During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.
My notes:
Project 3 Dreams of black – http://ro.me (2011) – code now on github.com/dataarts/3-dreams-of-black
Unity or Blender? They actually used Maya for many of their projects…
Check threejs.org – Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.
Google maps cube game – started using Maya – from .OBJ converted to .js
Example (very summarised) of workflow for the project Wind&Sun (2013): they used Maya again, but terrain and repeatable objects in Collada. Then review and fix meshes (CSI Models) then optimise and output to binary, finally webgl engine with camera edits.
Gravity (2013) – website for the movie – assets from movie > siplify meshes > preview assets > camera edits
WebVR – Oculus/Cardboard devices – mozvr.com
SmartWater experience http://drinksmartwater.com/#/explore-the-sky
David Navarro & Claudio Guglieri
Where we’re going we don’t need roads
It’s freaking hard to predict the future. Will there be flying cars? Flying skateboards? Self-drying jackets? What can we learn from movies about how the future is going to be? In this talk we will explore what we can learn from the big screen and how that can be applied to our daily jobs with the internet. As digital designers what we do today will have consequences tomorrow, it’s a great power that comes with a great responsibility.
My notes:
Digital interfaces in movies, touch screens, interactions everywhere. Example of Back to the Future II – the date on the display is this year!
The presentation is full of movie clips, frames, images that exemplify all these interfaces that we had contact on a movie (possibly first) and slowly becoming real (or already here!).
Movie references: Matrix revolutions, Avatar, Her, Back to the future, Minority report, War games, Blade Runner, AI, Knight rider, 2001 (Hal), Star Wars, Pacific Rim
Speech – voice interactions bring machines close to us
- Apple Siri
- Microsoft Cortana
- Amazon Echo
- heycubi.com – watch for kids
- Jibo
Movies: I robot, Time Machine, Minority report (store), Moon
Visual
Hendo Hoverboard (a la McFly!)
Touch – the tactile, the feeling
Movies: Strange Days, Metropolis, StarTrek (original series), Next Generation (surfaces), Sleeper, Jonny Mnemonic – feedback on wrong password.
bradfrost.com (right now I don’t remember why Brad Frost was mentioned… maybe about Atomic Design?)
Glass tables, glass tablets, surfaces where you put the hand and options appear.
Feelings/Emotions
Movies: I robot, A.I., Black mirror (smart houses), Minority report (delivering content according to emotional states).
“Future is design agnostic”
- Microsoft future vision productivity
- ‘self-driving’ cars – Mercedez
- www.navdy.com
- automobility.ideo.com
Note to self: check “Black Mirror” on Netflix (mentioned twice on the presentation…)
Augmented reality
Holograms – projected in public spaces
Holograms – private spaces
“the human body is the next computer interface” – Fjord on FastCoDesign
Possible future job descriptions?
- Brain director
- Augmented Reality Interior Design
- and so many others fun to hear…
@davidnavarro and @claudioguglieri
(if you know where they added their slides, please share on twitter and send me a note @monicams)
Conference site http://conference.awwwards.com/