DISCLAIMER:
The whole content comes "as is".
All commentaries refer to author's impression.
Some inconsistency possible as well.
The few details (mainly useful links) were added while transcribing notes.
title - that's pretty much all about the talk.
creative presentation about controlling devices, i.e. drones, via WiFi, Bluetooth, using JS.
Missed coding conceptions, but it was real fun :)
nice opening, Julian!
crucial point - if you don't like something about framework - propose fix or rewrite it
this is how The Book was born.
side, but positive effect of such approach - learning of language and library (framework).
Tero inputs a lot to AngularJS develelopment, coming up with useful and effective solutions.
Jed works at UNIQLO
and well-known for projects 140bytes.com and brooklynjs.com
Also, Jed created the manburger icon, if you know, what I'm talking about.
- DOM awful api... then libraries... then frameworks
- React - framework for building UI | virtual DOM, perfomance!
- now we have browserify
- and languages compiling to JS
What's more:
- underscore.js
- coffescript
- have you heard about Pete Hunt? he's cool
Now comes Jed's part:
dōmo-js
- new approach of building application
- virtual DOM
- declarative type
- DOM is presented in JS
- JS compiler
- the weird trick - using Objects (i.e. new String()) instead of static vars
- no libs, no frameworks, no build system
I really enjoyed the talk, one of the most memorable and impressive at the conf.
However, so far it's pretty intricate task to come up with perfect example for using domo-js in real life projects.
Tim works at PayPal
And the talk is about Kraken.js and PayPal opensource activity
the past of PayPal
- c++ | Java
- Java > Spring + special framework
current state
- prototyping - dust node.js
- dust + Java (Rhino) for production
perfomance issues - nodeJS worked for PayPal, but with minor benefit according to diagrams :/
this means just what it always does - target your goal
Kraken.js consists of modules:
Kraken is configurable via app.json.
yo generator-kraken
yo kraken::model something
Tim lists undisputed advantages of using Kraken-stack in PayPal:
- doubled request per second
- 35% decrease Average request time
- twice as fast development
- teams went 1/3 to 1/10 java developers
- using js for backend and frontend
Rachel drives Perch project.
Most of the talk Rachels covers the side project/start-up topic.
That's extremely useful for guys in same situation.
Like most, I guess.
A bit captain O speech, though.
Your project:
- know your audience
- deal with problems of your surrounding
- first release should be as soon as possible
- to get early feedback, of course
- complete product = small problem > small, but robust solution
- social-related products require substantial social base
- if there's no problem your product solves - create one
Time for your side project is the crucial point.
You must think not about how get the time, but what devote it for.
Tasks:
- set goals
- determine deadline
- be realistic
Set up and growth (Perch):
- start - 2009
- project income reinvested in project
- 2013 - full-time project
Audience:
- never promise any feature in time
- do not publish project plans
- rely on customer needs (know your audience first)
- please your customers often
- however, keep your product values
- small realeases often
- 10% of audience always moan and ask for something
- know requirements of other 90% in the first place
Zeno is known for brasilJS and does a lot on github
The talk mainly about using and creating web-components.
Where to get ready components:
How to get your web together and start creating your own components:
How to establish usage of custom elements using bower:
keywords : ["web-components"]There's a number of ready-to-use boilerplates for creating stuff:
- polymer-boilerlate
- x-tag-boilerplate
- js boilerplate
And nice yeoman generator of course:
yo element
yo element:repo
Visit webcomponents.org for more info!
3 tracks - 3 times more fun!
Talks were really swift, ~15 minutes or so to cover nice topics,
so not much data from these.
And as a result - it's somehow useless to transcribe theese notes, so I leave them just like this.
Qbaka.com/bounce
- component kitchen
- brick
ArangoDB Foxx
- rest api
- creating SPA
Console.assert
Console.count - helpful for events
Console.table - useful for elements and objects details
Command line api -
Appgyver share apps via qr-code
Cloud services
Academy.appgyver.com
Nice opening of the day and the most exquisite talk of the whole conference
Check out slides and presentation framework, 'cause it's more use to observe once
more slides
subpixel explorer by John Dagget
it's basically what it's called
There's also a lot of nice stuff to explore
Some math:
- the pixel is RGB unity of R,G,B primaries (image FTW)
- 1 primary is 1 byte or 8 bits
- 1 pixel = 3 colors or 3 bytes
- so very rough approximation for a picture size will be ( imageWidth * imageHeight * 3 bytes + metadata )
Lea explains what pain in the neck to get along with robotic color values, like #rgb or rgb() in a way of designing.
For instance, darken color, or changing saturation.
And not using preprocessors.
What fun can we have currently:
Lea explains what is lightness, luminance, perceptual uniformity, contrast ratio and color interpolation.
And why it's important (mostly for designers and reasons of accessibility).
Transparent color in chrome != transparent color in FF, so use with care.
What can be helpful:
- color.js (check it out in Lea's repo)
- currentColor variable - use it right now (not in IE)
Once again - hope and wait for CSS4
Zone.js is basically the part of AngularJS 2.0, that Brian works at lately.
What's a Zone?
A Zone is an execution context that persists across async tasks. You can think of it as thread-local storage for JavaScript VMs.
Considerable part of the talk Brian explains what Zone is for with code examples, as well as it's already explained on github.
So better stick with the presentation for this one.
Almost every JS developer ought to write his own templating engine
Kyle is author of You-Dont-Know-JS books series and well known for LABjs project.
And the talk itself was about approach to dynamic CSS via templates using Grips templating engine.
However it used a lot of live coding and switching between browser and editor, so not much for the notes, again.
Anyhow, here are some take-off points:
- dynamically it's much more convenient to put styles in head, rather than inline
- perfomance in both situations is equal (according to some brief tests)
- preprocessors are bad
- Grips allows you to handle code in a nice way
- like that: .gcss -> Grips -> JS -> CSS or HTML
Instead of conclusion, check out this nice video about how preprocessors actually work.
CSS has grown.
And in peculiar vision it seems to be alike any other programming language.
- vars (currently only scope - webkit and FF support)
- functions - calc (pretty good support so far!)
- more functions - animations
- conditional statements - @media and @support ("how do you know if browser supports @support? you don't have to")
- logical operators - "or", "and" (i.e. using @media)
Nice inspirational talk, but nothing to share actually.
Good talk about CSS refactoring principles.
Here come some useful notes:
- dont't rewrite code all at once - it takes hell of time and you never succeed
- use preprocessors
- @import comes in handy with organizing CSS
- variables, mixins, etc
- create and stick with the style guide (or better say code guide)
- consider using px or em or whatever as units
- what about whitespace - tabs, 2, 4 spaces?
- naming - you might want to think about it right away
- use .js-yourclass for JS hooks
- refactor by chunks at places - and later distribute them on whole project
- don't forget to clean-up legacy code
First things first - brilliant title!
Patrick is the developer at The Guardian
And here is their github repo
Great perfomance talk.
How high traffic sites can function efficiently
and what is hidden behind the curtains.
What Brad Frost mentioned and how it was reflected in Smashing Book #4 by Tim Kadlec in chapter "Culture of perfomace" - setting budget for the page loading time is the crucial point in developing.
What's more - perfomance strategy should become everyone's work on a daily basis - including designers and managers.
Nowadays, what we can operate with - 1000ms tops - to meet users' expectations and keep them from leaving the site immediately.
There is number of great articles, covering the topic, but I recommend this one by Jacob Nielsen.
These general steps must help:
- load JS asynchronously, keep only core part on page at start
- make basic CSS inline, so that page won't break apart and provide readability
- content is what user comes to your page at first place
At guardian they cache CSS in localStorage and just fire styles out on request.
It's the second talk, when the HTTP/2 was mentioned. The previous note was made by Rachel Andrew, if I recall it correct.
What about the fonts:
- non-blocking behavior in IE
- blocking in webkit
- timeout in FF
- webfontjson FTW
- check out grunt-webfontjson as well
Use everyday gauges and tools:
- keep an eye on static resources statistics
- refer to competitors perfomance for more data
Jed was the host!
Efficient and hilarious closure of the day.
Horia's talk has covered the topic of mobile web development history. As a result there's not much to take away.
Here's the useful part:
- using jQuery and similar libs is redundant on mobile
- phonegap is cool framework for building mobile apps using HTML, CSS and JS (and this articles series might also be helpful just to start)
- article A Dao of Web Design has been higly recommended by Horia
Math, geometry, whatever, a lot.
Really nerd stuff, but how sweet does it look in the end! (just like Ana's nickname)
Interesting points about CSS transforms
- skew() does not work as it intended, it requires scale() to maintain expected polygon form
- transform-style has options flat(default) and preserve-3d, allowing inner objects to behave as expected
- .5turn == 180deg
During the talk Ana managed to code rotating pyramid, consisting of 4 objects, using only CSS polygons and keyframe animations.
Really great things happen to live here: codepen.io/thebabydino
Awesome presentation - working game on canvas in vanilla JS right in front of your eyes.
So what it was all about - code, more code and then some new Audio() at the end (pew-pew sound).
Better check out the repo for the result.
For me, the most interesting part was about objects collision. That's one to be explored further.
In real work Mary uses frameworks:
I recommend to stick with slides for this one, because they are complete and self-explanatory.
In few words,
Mariusz once again promoted declarative programming approach to building apps (the reactive way).
His method involves:
- planning an app in modern way ("a living, reactive organism")
- reactive DOM - domjs which is yet another templater
- in-memory DB - dbjs DB written in JS
Rest of talk was devoted to elomas project, as a playground for demonstrating possibilities of full app. Very nice!
Great talk about image compression in general and jpeg and png in particular.
JPEG exposed:
- 64 levels of detalization for the piece (or better say block) of image
- detalization data is ~98% of total image size
- so jpeg quality is basically amount of theese detalization layers
- 50-70 compression comes up with best results
- 100 points gives you 6 times larger file
JPEG compressors:
- jpegmini.com is a paid service for handling your jpeg compression
- imgmin is a tool from Kornel, and it's CLI based
PNG compressors:
PNGquant offers number of different tools for any platform and taste, like:
- ImageAlpha - for Mac
- PNGoo - for Windows
Some notes:
-
some mobile devices corrupt images via extra optimization, to avoid this use
cache-control : no-transform -
use compression only 1 time, otherwise quality looses twice and size may even increase
Compared to other talks, this one seems to be superfluous (so double-check the slides and google for extras).
In fact, original presentation was extended with Lebron stack introduction and at the end it was like tons of information.
Lebron stack consists of:
and offers brilliant possibilities by making the most of npm.
That's why we should reconsider our module attitude.
Developers create modules. Actually, everyone can create one. But who cares?
Elements of good module according to Max (I just copy-pasted the slides :])
- does one thing and does it well
- isn't a grab bag (is designed to be a dependent)
- passing CI for browsers and linux/mac/windows
- no complicated steps to install and use
- clear, concise readme
- could be composed into bigger modules
- minimized vendor lock-in
Then goes the flow of links, that actually better study on your own.
Great online tool comes into view - RequireBin
Extremely useful thing to check and demonstrate your fresh modules just requiring it from npm!
The main idea of the talk was about meeting users' needs nowadays in perspective of building and using JS-driven apps.
The crucial points here:
- JS is used everywhere, a lot
- Graceful degradation works, but
- works slower
- and it's harder to plan
- Progressive enhancement FTW
- have usable baseline
- then upgrade functionality if needed
How to achieve this:
- track changes on client and server and put them in separate storages
- check online state periodically
- in case of going offline app will still work and save changes
- going back online will synchronize changes on both sides
Important thing about states - for consictency they should present in url, css and client/server vars.
Garann mentioned PouchDB as a candidate for such project.
It was real fun!
Shame on you, early-leavers :)
Like at Front-Trends 2013, Gunnar once again was obsessed with flags,
but this time it was all about sass and math,
probably not much of use in real-life projects,
and perhaps, he should have used a text-editor with code highlighting...
But anyhow he has demonstrated the pictures (flags, actually), that can be created with CSS gradients, using couple of sass functions and libs.
Something like this or this.
Nice near-inspirational presentation and conference conclusion.
the end.
Great stuff! Thanks you!