Nordic.js - Two days in Stockholm
Last month a few of us developers were lucky enough to attend a javascript conference in Stockholm, Sweden. During this blogpost I’m going to speak about a few talks that interested me, but first I feel as though I need to talk about Stockholm. This picturesque city often takes your breath away, what with it’s cobbled streets, beautiful architecture, ochre coloured buildings entwined with history yet bursting with forward thinking ambitions. Every corner we turned revealed another charming, quaint street. We walked along the river bank dodging all of the super keen runners. There were diving boards in the river, saunas at the end of a pier, boules bars. Such a striking city! I am already looking into booking flights to go back for a city break in the winter.
Frans Rosén
The Smörgåsbord of web app hacking — Doing bug bounties as a developer
Rosén’s ability to instantly grab the audience’s attention and keep everyone engaged throughout was really impressive. Rosén used to be a developer, but got into being a security expert by doing bug bounties. He would find vulnerabilities with different websites, making the company aware of the vulnerabilities and in return gets a thank you, a t-shirt or money. Rosén explained how it wasn’t about the money, he just enjoyed finding the vulnerabilities. From a developer’s point it’s always fun finding a problem and working out the solution. He’s found bugs and vulnerabilities for all sorts of companies — such as Paypal, Google, Netflix, Facebook, LinkedIn. Bug bounty programs are great for companies, to check their security. Rosén wouldn’t just find a vulnerability and report it, he would take it a step further and make it fun. Rosén has made a really successful career out of continuously doing this, one weekend he went to DEFCON — one of the biggest security conferences, a company rented a suit in MGM Grand, a few of them sat down to try and hack into this particular website, he found 6 bugs and got 51k for it!
Patreon is a company for Youtubers to get people to subscribe and pay a small amount of money a month. Rosén told Patreon about a vulnerability but they explained that they already knew about the bug and we’re working on it. Soon after Patreon was in the news for being hacked. There’s high likelihood that Detectify helped Patreon resolve the bug through a blog post they wrote explaining their suspicions about what the bug was.
This was a really interesting talk, it gave web and game developers a different avenue to go down rather than the norm — you got to hack things, which is pretty cool and if you’re good at it you can get quite a lot of money from it — that’s also pretty cool!
Amy Cheng
Recreate masterpieces of modern art
Amy Cheng’s talk was hugely inspiring. Having come from an art background and now being focused on code, the idea of bringing the two together really excited me. It’s not necessarily a new thing, it’s just something I hadn’t thought about doing. Amy Cheng said “if you know javascript then you can make art”. Cheng explained how this could be done using a recursive draw function (being passed as a call back to the animation frame). The “requestAnimationFrame” function tells the browser that you wish to perform an animation before the next repaint. This is a smarter alternative to using “setInterval” function, one reason being if the browser tab is not in focus then the callback will not be executed.
She spoke about three different drawing libraries that all use the canvas API:
- P5.js — default colour is RGB (red, green, blue) — Cheng used HSB (hue, saturation, brightness)
- Fabric
- Easel
Cheng used the P5.js library, this was designed to be accessible to artists, designers and beginners, it’s an offshoot of the processing language which was originally developed by Ben Fry and Casey Reas.
“This started as an open source programming language based on Java to help the electronic arts and the visual design communities learn the basics of computer programming in a visual context.” — processingjs.org
These languages and libraries turn artists into programmers and programmers into artists. Javascript is an artistic medium that can do
- Procedural generation
- Parameterization
- Painting with algorithms
- Creating and running systems
- Self learning
- Collision detection between moving dots
Cheng replicated Damien Hirst’s art using Javascript, the P5.js library and a GUI called dat.gui to control the colours. The GUI was a really good way to demo how quickly you’re able to change the whole look and feel of a piece of art. He did a lot of spot paintings which he described as “sculptures to infinity”. Another artist that Cheng referenced was Yayoi Kusama who I found particularly interesting. She’s a famous Japanese artist, well known in the 1960’s — she even influenced Andy Warhol, with the nickname Polka Dot Princess. She’s created a variety of art from paintings to installation pieces. Kusama’s art was conceptual and shows signs of “feminism, minimalism, surrealism and abstract expressionism. Her art was infused with autobiogrphical psychological and sexual content” (http://www.westwoodgallery.com/artists/yayoi-kusama/).
Cheng really influenced me and made the idea of bringing art and javascript together very approachable and exciting. As a web developer, moving away from building generic websites and doing something different and creative is really exciting. Javascript is available to anyone with the internet, it’s a fantastic artistic medium, everyone should do it, make art with javascript!
Jem Young
Embracing the future
Jem Young’s technical talk was brilliant despite being late in the day when all of our heads were a little bit frazzled. As Young quite rightly pointed out, javascript is everywhere and in loads of things that we use every day (phones, cars, smart tvs, computers etc). Young argued that Javascript is the best language ever to have been written, although not forgetting it’s bad parts — part of a good javascript developer is about knowing what is good and what is bad practice.
The TC39 (technical committee) for ECMAScript language (The specification on which JavaScript is based on) are a group of developers that discuss progress on pending proposals and collectively work on moving things forward. They generally meet about 6 times a year. They put a lot of work into all the new features for ECMA6 (the latest version of the ECMAScript standard).
Young went through a number of features that have been introduced with the new version of ECMA6:
- Proxies
- Let & Const
- Generators
- Promises
Two useful changes came with ES6:
- Array includes (determines whether an array includes a certain element, returning true or false as appropriate).
- Exponentiation operator (rather than the math.pow function) — making a lot cleaner, nicer and easier to code and read.
During Young’s talk he spoke about how the future looked and what was likely to happen, two simple but effective methods (especially in the light of the “leftPad”) for progressive enhancement are:
- padStart — allows padding to be added to the start of a string
- padEnd — allows padding to be added to an end of a string
Young spoke about how you’ll be able to get object values a lot easier, which sounds like it should be simple, but sometimes in certain languages and certain frameworks it just isn’t. So, the below is really handy and again maturing the language:
- Object.keys — not new
- Object.values — gives you all the values
- Object.entities — values and keys
These things aren’t groundbreaking or hugely changeable to our day to day — they are niceties.
Young spoke about service workers and compared them to being as big as when AJAX came out — remember when you first saw a webpage change without having to refresh it?! He said that service workers are:
Persistent
- Exists outside the browser tab
- Knows when to expire
Separately threaded
- Similar to web workers
- Does not die when the tab is closed
Fully asynchronous
- Cannot use local storage or XHR
- Heavily uses promises
Event based
- No direct control from main thread
- There are 4 events: Oninstall, Onactivate, Onfetch, Onmessage
Intercept network request
- Persistent
- Cache storage — caches urls and the responses onto the disk
This all really inspired me. Whilst separately, each of these things are fairly simple, together they are extremely powerful.
The reason I picked to blog about these three talks is because they all really interested me but more than that they inspired me. This was also something that Young touched upon during his talk — he explained how important conferences are, for more reasons that just learning. He quite rightly said that we could as easily learn everything that we do at conferences through the power of videos, online tutorials etc. However, with conferences we get so much more out of them, we meet with like minded people, we talk and learn about theory, we share ideas, opinions, why we do things and how we do them. It’s all about being part of a community.
