Skip to main content

Fullstack conference 2018 summary

Full stack conference 2018

This is my first time at Fullstack conference in London, full of talks and demos this post will run through some of the talks I attended. All talks and videos of the talks can be found here.

Day 1

Brendan Eich - JS the next Generation

Brendan Eich is the creator of JS and I take my hat off to him because I use JS every day as many developers do, he talked about the history of JS and what is to come in future years.
  • Dynamic import() (spec)
  • Array.prototype.flat/flat.map
  • let (x, y ...z) = {x:1, y:2, a:3, b:4} (spec)
  • Private methods 
  • Asynchronous iteration for await of (spec)
  • RegExp look behind assertions 
  • RegExp Unicode properly escapes
  • RegExp named capture groups 
  • /a (dotall) flag for regular expressions 
I cannot wait for these new features and for all browsers to catch up (ie) so developers can use ecma script 6 without polly fill, but still remains a dream for a while.

Quote from the talk:
Don't add cute things to your code just don't do it
He said this because when he was building JS he agreed to add a 'cute' feature and then regretted it later in life.

Dominik Kundel - Prison Break - When The Web Escapes The Browser 

This talk was about inspiring developers to go out and hack more hardware with JS.
For example he programmed a porg (from Starwars) to scream when a build failed.
Selfie with Dominik & Porg.

He also hacked a coffee machine and gave some examples of software (Jonny5) we can use to hack modern day things. He also suggested to start with something that is already made like a toy for example instead of building from scratch. It will also be useful if you have a basic knowledge of electronics.


This was quite inspiring and I should find my Microbit and do something with it again!

Chad Hietala - Compilers: The Next Frontier In Web Performance 

This talk was about compiling JS, he works for/with Linkedin, Ember and Glimmer. Glimmer is a compiler for JS. It takes your JS and makes it into binary code and then renders to the client and it does have some impressive time against react for example. If you want to see how they stack up against each other see this blog post.

Max Firtman - The Survival Kit of the Web and PWAs - Best talk of the day

This guy is pretty awesome and has written many O'Riley books. He discussed PWA'S and showed some good examples and the reason why we need them is simply, frustration. Frustration for the user, developer and business he discussed issues that users go through and the fact they don't really need to download an app that doesn't work offline or they will only use for 5 minuets. Its important to have more break points in css and responsive layouts for smaller phones/screens and things like apple watch. User accessibility and performance are the goals. There are some things that PWA's should take from web and native:
  • Linkable
  • Discoverable 
  • Easy to deploy
  • Easy to update
  • Standards 
  • Offline Access 
  • Installed Icon
  • Push Notifications 
  • Full Screen Experiance
  • Fast UI

 airhorner.com is an example of  a PWA.

Quote:
change will never stop on the web, learn how to deal with it!

Opher Vishnia - Web animations and state

This talk was about how we animate things and some of the different ways to achieve this with state.
When we have a animation where a state updates quicker than the animation time we can either use:
Skipping

Queing
Or Adaptive (same time)


It depends on what is more important to that project.

Sarah clark - learn JS like a Googler

We were taken through a few slides that tested us on our JS knowledge and problems to solve, it was quite interactive and I learnt about variables being hoisted inside of functions and revisited scope and vars.

quote / power phrase:
You learn from having the expectations and when it doesn't go right it surprises you and you will know how to get it right the next time and that is the best way to learn.

Day 2

Sarah Drasner - Serverless functions and vue

This talk was about serverless functions and how they can work with Vue/Vuex. Stripe is a good plugin for Vue for making nice checkouts in apps.

She made a data visualisation for where her colleagues were talking around the world which was very cool and it linked up with the google maps API and a xml sheet that contained all the locations and then used three.js to make the globe.


Colin Eberhardt - web assembly and the future of javascript - Best talk of the day

A brief overview of the web and JS and he pointed out that we use it for more than what it was designed to do. He also did a brief overview of asm.js which allows you to increase the execution time by changing the JS but only some browser will understand it. It was mostly a experiment but it paved the way for webAssembly.

Chart showing the speed difference between JS and webAssembly

WebAssembly is a new way to compile your code to the browser faster, javascript has to go through a lot before it renders to the browser. Software like Unity and Unreal are using webAssembly, it has been proven to be faster but it doesn't have a garbage collector yet so you cannot use JS but there are some you can use. Which include:
  • java/ c#
  • c / c++
  • Rust
Personally I think you would only really need this when you have a lot of code (for a game etc) and it takes a long time to load, you would need a serious project to use it because JS can already be rendered faster by things like asm.js and better development. 

Máté Nádasdi - 'The upside down of the web: video'

Many stranger things references and gifs, good so far. A small over view of video in the web and the video tag.  The video tag is good unless you want to make your own player.
In comes the Media Source Extensions API this allows you more flexibility with video on the web.
Quote:
flash is the demogorgon of the web

Code task set by compare the market
The task - students are in pairs find the odd one out that doesn't have a pair. (Get a number that does not have a pair out of an array).
Me and my work colleagues managed to do this in three different ways.

My idea was to use a regex to find the odd one out by turning the array into a string at first. I wanted to do this in one regex but found that to be very hard and it would need more than one regex. Instead I looped over the array made it into a string and then searched the string for the numbers if it returned length of 1. See code below.

var list = [5,3,2,2,3,5,4,6,9,6,4,12,8,9,12];



var x = list.toString();







for(var i = 0; list.length > i; ++i){



  var z = x.match(new RegExp(list[i], 'g'));



  if(z.length === 1) {



   console.log(z[0]);



   return z[0];



  }



}
The second way was kinda similar, it loops around the array and then checks its length with a array filter.
The third method went trough the array 'poping' out each number and then finding the duplicate, eventually you are left with the one that doesn't have a duplicate.
This was great fun and put me and my work collauges in a great mood once we had achived it. It wasnt about winning it was more about solving the problem in different ways that made us happy.

Day 3

Val Head - Chose your animation adventure. - Best talk of the day



This talk went through the different ways you can animate on the web focusing on UI design. Above is the world of web animation and we went trough each little island.

Css island
Its simple and adaptable, no library needed

Cons
Limted events
Transform property cannot be separated
Cannot do very complex animation

Some new things to check out in css:
- custom properties
- independent transform properties
- css varibles

Things to consider when choosing JS or CSS for animation


JS island
If you do need JS then do you need library or just JS?
If you do use vanilla JS you will be using  request animation frame which is great if you have quite a bit of time to work out all the math for the animation but if you don't these are her recommended top three animation libraries.

SVG Island
This has to be my favourite method because you can design it in sketch or adobe products etc and then it turns it into code so you can manipulate it.
Chris Gannon  - great guy for SVG animation.
There is 3 ways to animate SVG:

  • Smil not supported everywhere - not recommend for the future
  • Css however limited properties
  • Js can do anything with SVG
Svg 2 is coming so you will be able to do more in CSS for those

You can visually animate them as well by using Lottie which was made by air b and b. You can see examples on Lottie files.

Simon Riggs - JSON and JS inside your database

Gave a brief overview of what we used to use in database (xml, non relational).
Now we use JSON as a standard.
You can also use JS in your database but should only be used in some cases.
PL/v8 is a language that allows you to write JS into a database.
With this you can have JSON validation so that you don't put dodgy data into the database. Which is pretty awesome.

quote:
Make sure that things that should live in the database are in the database
Adrian Meredith - Graphics with WebGL
This talk was a beginners introduction  to WebGL and how it works and how to draw basic shapes like triangles, squares and lines. If you want to know more I would highly recommend watching this presentation.


If you want to see some demos or try it out yourself Shader toy is a good place to start.

Aleksandr Korotaev: Heros of might and magic in the browser. 

Went through how he spent 3 years making Heros of might and magic in the browser heres the demo. This was pretty amazing and hats off to him he did it all on his own and learnt a lot about JS and is still working on it.

Guys nam: dojo2 workshop
These guys had the coolest stickers at the event and also have a product called dojo2 which can be used to make PWA. In the workshop we made a mock instagram type app and it is similar to Vue or React.
After the workshop I would probably still use Vue because making the DOM in this is very different and somewhat odd and takes a lot of writing. But that is my personal preference it defiantly has it's bonuses and it is in type script.

End of full stack 2018!
Phew that was a lot a defo worth going if you were thinking about going next year.
Thanks for reading.
Labels:

Comments

Post a Comment

Popular posts from this blog

Poker chip CSS only checkbox

For this Sunday Funday project, I decided to make a poker chip checkbox out of pure CSS. DEMO The idea is that it will flip on its right edge like when people flip chips between their fingers. This can be improved by using images to get a correct dashed edge or make it more lifelike but this is CSS only. Tutorial 1. The markup We need a container to set the background and the size and width, we need the label to be clickable anywhere, input for the checkbox, top and bottom of the chip. <div class="container"> <label for="chip-checkbox"></label> <input type="checkbox" name="chip" value="1" id="chip-checkbox"> <div class="bottom-side"></div> <div class="top-side"></div> </div> 2. Hide the input input { visibility: hidden; } 3. Set the width and height of the background/container .container { width: 80px; height: 40px; bord...
Post a Comment
Read more

8bit Mario with css grids

The point of this task was to get more familiar with css grids. I aimed to use as little divs as possible but I wanted it to be to scale.  You can view it below or on Codepen. See the Pen mario with grids by Mel ( @Mellydevs ) on CodePen . Making Mario As I was making a 8bit character I made a 64 by 64 grid and made each grid size 8px by 8px. This allowed me to make Mario to scale.  NB: I do not own anything to do with Mario I am just a fan :). So after using reference images I managed to make divs turn into Mario by changing their position in the grid and background colour. If you want to learn more about grids I recommend css tricks article on it  or Grid garden which is a game that helps you learn grids. It turned out quite good and I was happy with it. I thought I was done but then.... I thought why not make him do a idle animation, So I looked at some sprite sheets ( whats a sprite sheet? ) Kirby's idle seemed to be the easiest so I ...
Post a Comment
Read more

Ionic RSS feed using Feednami

Tutorial of how to make a RSS feed using Feednami which is an alternative to google api which no longer works. This is a basic example and can be improved. First go ahead and make a new ionic project $ npm install -g cordova ionic $ ionic start exampleProject blank Now find index.html and insert... <script src="https://storage.googleapis.com/feednami-static /js/feednami-client-v1.0.1.js"></script> Into the header, then in <ion-content> below Ionic Blank Starter insert a new div <div id ="feed" ng-controller="feedCtrl"> </div> Open app.js, now we are going to make the controller from Feednami that will get our rss feed. .controller('feedCntl', function(){ var url = 'http://daringfireball.net/feeds/articles' feednami.load(url,function(result){ if(result.error){ console.log(result.error) } else{ var entries = result.feed.entries for(var i = 0; i < entri...
Post a Comment
Read more