JSConf & CSSConf Budapest 2016 - A Short Summary

This year I was lucky enough to attend my first full-length JavaScript and CSS conference, which also meant I was able to travel to Budapest. The conference was hosted at the Akvarium Klub, which is an underwater nightclub located right in the city centre.

In this blog post, I'll discuss some of my personal highlights from both conferences. I'll also include some of the photographs I took from around the city. More of my photography from Budapest can be found here.

castle

Day One - Progressive Web Apps Workshop

On Tuesday, the day before the conference began, there were a number of workshops held at the Akvarium Klub which were included with a regular ticket. There were lots of cool workshops to choose from, but I decided to attend the 'Crash Course to Progressive Web Apps' by Nolan Lawson.

A progressive web app combines the best of web and native experiences and can be promoted by the browser. This means that a PWA has the capability to work offline, can be launched from the home screen, allows push notifications, background sync and has many other characteristics that native apps provide. Progressive Web Apps use service workers to build these rich offline experiences. A service worker is basically just a script that runs in the background to allow features to run that don't need any page or user interaction.

Progressive web apps have been talked about a lot lately, and it was really cool to explore this new technology by looking at Nolan's pokedex.org example.

building

Day Two - CSSConfBP

So the first conference day was the CSSConf, hosted by master of ceremony Thomas Gorissen, who came up with a new meaning for CSS - Centering Sh!t, Sometimes. There were many great talks at CSSConfBP and I came away with lots of great tips to improve my CSS skills at work. Here is the full list of talks:

  • CSS Animations, Orchestrated - David Khourshid (Slides)
  • Shedding Light on the Shadow DOM - David Berner (Slides)
  • The Super Mario Bros. Principle - Stefan Baumgartner (Slides)
  • The New CSS Layout - Rachel Andrew (Slides)
  • Simple Accessible - Estelle Weyl
  • CSS Modules, CSS Variables & the Future of Reusable CSS - Glen Maddern (Slides)
  • Responsive Web Applications with Container Queries - Jonathan Snook
  • Schrodiner’s Website: Using Sass to Build Indeterminate, User-generated Websites - Jackie Balzer
  • Visual Regression testing for CSS - Kevin Lorenz (Slides)
  • The Componentisation of the Web - Andrey Sitnik
  • In the Wild - Tim Holman

reflection

Layouts with Grid and Flexbox

One of my favourite talks from the CSSConf was about 'The New CSS Layout' by Rachel Andrew. In the talk, Rachel was discussing new ways of building page layouts in CSS that improve upon older methods such as using floats, table displays and messy markup from frameworks (Bootstrap).

Using tools such as Grid (for 2D layout) and Flexbox (for 1D layout) will automatically allow layouts to be responsive and flexible by default and can allow more precise control of vertical and horizontal alignment. I really like using Flexbox to simplify laying out elements on a page and find the minimal syntax to be a really nice alternative to adding endless amounts of <div class="col-md-12"> to child elements.

.parent {
  display: flex;
}

.child {
  flex: 1 1 250px;
}

For example, this shorthand example would allow all of the child elements, defined within the parent, to be equally spaced across a row with a default size of 250px each.

castle-roof

Modular and Reusable CSS

Another personal highlight from CSSConfBP was a talk called 'CSS Modules, CSS Variables and the Future of Reusable CSS' given by Glen Maddern. In his talk, Glen spoke about how we should be building better components rather than relying on tools to make our current components 'themeable'. He was also talking about how components should respond to their environment, meaning that externals should not be overriding the components.

"Layout is the concern of the parent"

Glen also reiterated Rachel's point on using tools such as Flexbox to create layouts using parent wrappers, rather than specifying grid columns on the child elements. We should also make sure to use variables to create strong, reusable custom properties in our CSS.

rainbow

Day Three & Four - JSConfBP

The JSConf was hosted by Jake Archibald, from the Google Chrome team, who did a great job of keeping everybody entertained. We were really looked after at the conference with lots of food and excellent coffee provided by Bloomberg.

Here are the list of talks from day one:

  • What Everybody Should Know About NPM - Laurie Voss (Slides)
  • The Hitchhiker’s Guide to all things Memory in JavaScript - Safia Abdalla (Slides)
  • Encrypt the Web for $0 - Yan Zhu
  • Why Performance Matters - Denys Mishunov (Slides)
  • Natural User Interface using JavaScript - Princiya Sequeira
  • Event Sourcing your React-Flux Applications - Maurice de Beijer (Slides)
  • Internet of Cats - Rachel White
  • The other Side of Empathy - Nick Hehr (Slides)
  • We <3 Music and the Web - Tim Pietrusky & Martin Schuhfuss

And the list of talks from day two:

  • The Formulartic Spectrum - Suz Hinton
  • Building an Offline Page for theguardian.com - Oliver Joseph Ash (Slides)
  • High Performance in the Critical Rendering Path - Nicolas Bevacqua (Slides)
  • Offensive and Defensive Strategies for Client-Side JavaScript Security - Anand Vemuri
  • Changing Live Audio with the Web Audio API - Sam Bellen (Slides)
  • Science in the Browser: Orchestrating and Visualising Neural Simulations - Rob Kerr
  • HTTP/2 is Coming! Unbundle all the Things?! - Stefan Baumgartner (Slides)
  • Down the Rabbithole: JS in Wonderland - Claudia Hernandez (Slides)
  • Works on my Machine, or the Problem is Between the Keyboard and the Chair - Lena Reinhard

klub

NPM Tips & Tricks

One of the great talks from the JSConf was given by the CTO of NPM, Laurie Voss. Laurie's talk was the first of the JSConf and featured lots of great tips that NPM users can utilise to improve their development workflows.

Laurie spoke about how you should not have to write anything in your project's package.json file yourself, as you can use npm init to generate this for you. It is also possible to create a npm-init.js file at the root of your project's directory, containing some setup configurations to further manage the package.json file of your project.

There were also lots of tips on how to use npm commands to improve your development workflow, including:

npm install --cache-min 999999 # ensure local installs  
npm publish --tag # publish package and push tags  
npm deprecate # safer alternative to unpublish  
npm outdated && npm update # check and update outdated dependencies  

parlament

Performance

Another key point I took away from the conference was about web app performance. There were a couple talks around this subject from Denys Mishunov on 'Why Performance Matters' and Nicolás Bevacqua on 'High Performance in the Critical Rendering Path'.

Denys was talking about how performance is not about mathematics, but more about perception, how a user perceives your app to be performing. This is quite an important point, and it's very useful to think of reducing the time in which the user is waiting 'passively'.

Nicolás' talk was more on the technical side of improving performance, and provided some tools to help do this. First, it's important to know what's going on, and this can be measured using tools such as the Chrome DevTools Audits and Google's PageSpeed Insights. PageSpeed Insights is also available as an NPM module.

$ npm install -g psi
$ psi danielgynn.com

It can be useful to set a performance budget to track the impact of every commit, which can be setup using a Grunt task.

view

Empathy

A really important issue that several people spoke about at JSConfBP was empathy and how being empathetic to other developers can vastly improve the tech industry as a community. Rachel White spoke about how trying new things can be scary because of things such as fear of rejection and imposter syndrome, and how we could improve this by being more empathetic to people trying new things. Rachel's talk was inspiring as she had learned several completely new tools to build a Node based cat feeder that works over the web, and gave an awesome live demo of this in action.

Nick Hehr reiterated some of Rachel's points, and spoke about how giving constructive and positive feedback is a much better way of helping someone on their project, rather than ranting at someone when something doesn't work as expected.

Possibly the most well-received talk of the entire conference was from Lena Reinhard and was called 'Works On My Machine, or the Problem is between Keyboard and Chair'.

“Privilege is the human version of ‘works on my machine’"

Lena was talking about how the tech industry should look at 'debugging' itself and improve on being empathetic to others to increase creativity, diversity and inclusion. There were also lots of ideas on how we can improve ourselves to help debug the system:

  1. Educate yourself, about systemic issues and oppression
  2. Practice empathy, because we need it to be good designers and developers
  3. Work on humility, because none of us are Unicorns
  4. Understanding Privileges, and use them for good
  5. Address biases, and establish policies to address them
  6. Listen, and actively look for voices outside of your networks
  7. Amplify others’ voices, and speak less
  8. Work on diversity, because it’s our moral obligation
  9. Work on inclusion, to make spaces welcoming and safe
  10. Give, our knowledge, time, technical skills, money
  11. Work on being allies, constantly

hero-square

Closing

I had a great time in Budapest and managed to meet and talk to lots of cool people. The organisers and volunteers did a really great job and managing the event and making it a really great experience for all of us. The speakers were also really great, and I learned a lot of new things which I can use to build myself as a developer.

sunset

Originally posted at danielgynn.com.

Read more posts by Daniel Gynn

Front-end developer.