Skip to content

Instantly share code, notes, and snippets.

@XOP
Last active September 5, 2016 09:58
Show Gist options
  • Save XOP/b7bb44ce7b77583d9d5e to your computer and use it in GitHub Desktop.
Save XOP/b7bb44ce7b77583d9d5e to your computer and use it in GitHub Desktop.
Front-Trends 2014 extended review with links and stuff

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.


DAY 1


Julian Cheal | Dancing with robots

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!

Tero Parviainen | Build your own AngularJS

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 Schmidt | API have a dream

Jed works at UNIQLO
and well-known for projects 140bytes.com and brooklynjs.com

slides

Also, Jed created the manburger icon, if you know, what I'm talking about.

What's more:

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 Messerschmidt | Supercharging Node with Kraken

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.

Yeoman generator

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 Andrew | We're not doing a Startup

Rachel drives Perch project.

slides

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 Rocha | A future called web components

Zeno is known for brasilJS and does a lot on github

The talk mainly about using and creating web-components.

slides

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!

Various speakers | Lightning talks

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.

window.onerror

Qbaka.com/bounce

web components

  • component kitchen
  • brick

Michael Hackstein | Arango DB

twitter

ArangoDB Foxx

  • rest api
  • creating SPA

Igor Zalutsky | JS debug with console

twitter

Console.assert
Console.count - helpful for events
Console.table - useful for elements and objects details
Command line api - $, $$, $n, ...

Varvara Stepanova

slides

Appgyver share apps via qr-code
Cloud services
Academy.appgyver.com

DAY 2


Lea Verou | The chroma zone: engineering color on the web

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:

  • filters and filter combinations (-webkit only)
  • background blend modes (FF only)

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

Brian Ford | Zone.js

slides

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.

Kyle Simpson | CSS: Yawn to Yay!

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.

slides

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.

Sara Viera | CSS is a programming language

slides

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)

Martin Ringlein | The ROI on front-end experimentation

ROI

Nice inspirational talk, but nothing to share actually.

Alicia Liu | Slaying the Dragon: refactoring CSS for maintainability

slides

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

Patrick Hamann | Breaking news at 1000ms

slides

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:

Use everyday gauges and tools:

Discussion Panel | Javascript frameworks - the good, the bad, and the beautiful

Jed was the host!
Efficient and hilarious closure of the day.

DAY 3


Horia Dragomir | The Mobile Development We Leave Behind

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

Ana Tudor | Pure CSS 3D Solids

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

Mary Rose Cook | Mary live-codes a JavaScript game from scratch

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:

Mariusz Nowak | Full Stack JavaScript Applications, Reactive Way

slides

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:

Rest of talk was devoted to elomas project, as a playground for demonstrating possibilities of full app. Very nice!

Kornel Lesiński | Modern Image Compressors

slides

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:

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

Max Ogden | Browserify - Using Node In Browsers

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!

Garann Means | Progressive Enhancement for JS Apps

slides

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.

Gunnar Bittersmann | Patterns & math with Sass

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.

@AlexanderTserkovniy
Copy link

Great stuff! Thanks you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment