Paris!

This year for the first time Ordina JWorks travelled to Paris to attend a two day conference on CSS and JS, more exactly dotCSS and dotJS which are part of the dotConferences. dotConferences is a series of developer events in Paris that started in 2012.

We only included talks on which we could elaborate. You can find all talks on the YouYube channel of dotConferences.

The JWorks team at dotJS

Table of contents

  1. Day 1: dotCSS
    1. ‘Power of SVG’ by Sara Soueidan
    2. ‘Reading Hex codes’ by David DeSandro
    3. ‘Variable fonts’ by Mandy Michael
    4. ‘CSS taught me…’ by Dan Cederholm
    5. ‘Breaking the norm with creative CSS’ by Aga Naplocha
  2. Day 2: dotJS
    1. ‘The State of JS’ by Sacha Greif
    2. ‘Minecraft is getting a JavaScript runtime’ by Tobias Ahlin
    3. ‘Learning to Love Type Systems’ by Lauren Tan
    4. ‘Choosing Your JavaScript Framework’ by John Papa
    5. ‘JavaScript on the Desktop, Fast and Slow’ by Felix Rieseberg
  3. Conclusion

Day 1: dotCSS

‘Power of SVG’ by Sara Soueidan

Some websites really have nice visuals that contribute to a pleasant user experience when visiting them. Think of brands that incorporate their logos in images for instance, or cover pictures that look like some Instagram filters were applied to them. You would think that such assets are created by designers and that they are applied directly to the webpage, but there is also a way to get those Photoshop effects straight into your browser.

Sara Soueidan showed us a few possibilities to apply some stunning visual effects on images and text with code. The cool thing is that when using plain text, it’s still searchable! First she discussed some techniques that designers use to create templates in Photoshop and afterwards she applied the same techniques by only using SVG. It was very impressive to see how you can manipulate images by applying a set of SVG filters. Hopefully using those SVG techniques will become more common in the future so that more visual appealing websites will be created with the power of SVG.

View talk View slides

‘Reading Hex codes’ by David DeSandro

This was one of the most mind blowing talks of dotCSS by far. David DeSandro begins the talk with saying he has a special ability. He can read color hex codes. At that moment the most of us were like “What?” “You can tell the color based on the hexcode?” “Is that even possible?” And well, he proved it to us that you really can tell the color based on the hex code. He even showed us how to do so.

And so he told us that it requires 5 steps to read color hex codes.

  1. 3-digit shorthand
  2. Line graph
  3. Hue from shape
  4. Lightness from total
  5. Saturation from range

Just like this I bet you have no idea what these steps mean. But let us teach you the magic of reading color hex codes as well thanks to David.

To get started he taught us that the best way to describe colors is with the HSL color model. HSL stands for Hue, Saturation and Lightness. Hue is the pure pigment of a color and can be described with 12 color names. We’ll show you the color names later in Step 3. Saturation is how vibrant or muted the hue is and can be described as saturated, washed, muted or gray. Lightness speaks for itself and describes how light or dark the color is and this can be done with light, middle or dark.

Now that you know how you can describe a color all you have to do is to follow the 5 steps. And deterimine the hue, lightness and saturation. So let’s get started!

Step 1: 3-digit shorthand

To better understand the process let’s take #D49B25 as an example. The first step is to retrieve the 3-digit shorthand of the hexcode. This can be done easily by breaking up the hexcode in 3 pairs (D4 | 9B | 25). Keep in mind that each pair represents a value of the RGB color channel. Now drop the second number of each pair and that gives us the shorthand code #D92.

Line graph of shorthand hex

Step 2: Line graph

With the shorthand from step one we have to create a linegraph based on the numbers of the hexcode. With basic understanding of hexadecimal numbers we can visualize a little line graph for the channel values. D is high, 9 is around the middle, 2 is low. And that’s how we get our litle line graph.

Hex linegraph example Line graph of shorthand hex for color #D92

Step 3: Hue from shape

This is what we think is the most tricky part about reading color hex codes. With the line graph we got from the previous step you’ll have to find a matching color on the color wheel. So you’ll have to remember this one by heart if you really want to show off. For our example color, it matches best with the color orange.

HSL color wheel with color names

Step 4: Lightness from total

To determine the lightness you should look either at the total sum of the channel values (pairs) or at the values in the line graph we created. If the values are higher to the top, the color is closer to white and thus lighter. If the values are closer to the bottom, the color is closer to black and thus darker. For our example color #D92, the values are both high and low, so it has middle lightness.

Determining lightness of a color

Step 5: Saturation

Saturation is a measure of how vibrant or rich the hue/color is. To measure the saturation whe need to look at the difference between the highest and the lowest value in our shorthand code. The wider the range, the higher the saturation. Colors with small range have low saturation, appearing faded. A color with no saturation is a pure gray.

Measuring and describing saturation of a color

With our color, #D92, D is the highest value, 2 is the lowest. D is high. 2 is low. That’s a wide range, but not completely wide. So our color has moderate saturation, thus making it a washed color.

Now we have all three attributes for our color So we can say #D49B25 is Middle Washed Orange. Pretty amazing right?

#D49B25 color described as Middle Washed Orange

Since dotCss puts most of its talks online we definitely recommend watching this talk. He just explains it so well and goes a little bit deeper than we did here.

View talk View slides

‘Variable fonts’ by Mandy Michael

A variable font is an OpenType font format that includes new technology called OpenType Font Variations. Jointly developed by four of the most influential technology companies — Google, Apple, Microsoft, and Adobe — these font files contain a huge amount of extra data, compared to your average OpenType font. A variable font can contain a font’s entire glyph set, or individual glyphs with up to 64,000 axes of variation, including weight, width, slant, and, in some cases, specific styles, such as Condensed, Bold, etc.

There are two main advantages when using variable fonts:

  • The average file size is smaller than separate font files
  • Only one request is necessary to load the necessary font variations

A good example is the font Source Sans Variable or the font Decovar.

She also showed us the possibilities of variable fonts and what kind of awesome stuff you can do with them.
Did you know that you can make text animations with them?
Well you can, so check it out on her codepen.io collection.

You can easily check for browser support using the @supports CSS rule: @supports (font-variation-settings).

‘CSS taught me…’ by Dan Cederholm

Dan talked about all the things he learned in his lifelong journey of working with CSS. But in the end it all came down to this:

  • Have side projects to keep your skills sharp
  • It’s OK not to use the latest and greatest in business

‘Breaking the norm with creative CSS’ by Aga Naplocha

The last presentation of the dotCSS conference was about using other inspirations and tools to build webpages. Aga made a bold remark that most of the websites out there have the same structure and even look and feel the same. As a big fan of Brutalist Design she showed some examples to demonstrate what is possible when you think out of the box.

With her talk she wanted to encourage developers to try and use other CSS Properties for building and designing websites. The three CSS properties she mentioned were clipping, masking and shape-outside (all in combination with SVG — using masking with images is resource intensive since it operates pixel per pixel). She showed each property with a clear example and discussed the differences between them, and mentioned the compatibility of each property in the different browsers.

Saying that most of the websites have the same look and feel is a bold statement but after you look around for a while you notice that she actually has a point. Most of the websites are using frameworks that give you a uniform, recognizable look and feel but are also really easy to use. With the properties she mentioned you can certainly build a beautiful, well-designed website but it would take more time to make sure you have a responsive website that has the same look and feel over the different browsers and devices.

Day 2: dotJS

‘The State of JS’ by Sacha Greif

As we all know, the JavaScript ecosystem is richer than ever, and even the most experienced developers become victims of the amount of choices they have to make. It’s always changing. New libraries, frameworks, languagues… For this reason Sacha Greif, Raphaël Benitte and Michael Rambeau decided to create a global survey they called the ‘State of JavaScript’.

The survey contains data from over 20.000 developers from all around the globe and you can find the results on their website. The survey tries to figure out what these developers are using these days, what they like and what they would love to learn.

When they published the State of JS results of 2018 there was a lot of commotion regarding the results. More specifically regarding the front end frameworks Angular, React and Vue. The State of JS survey declares that Angular is suffering a lot in comparison with React and Vue.

#D49B25 color described as Middle Washed Orange

The Angular results are very disappointing and show us a high rate of dissatisfaction within its userbase. On the other side there is only love for both React and Vue. This lead to a war on Twitter and other channels saying the survey is flawed.

Olivier Combe who is a member of the core team called out to Sasha why they didn’t make the distinction between AngularJS and Angular. It makes total sense a lot of people are using Angular (read v2+) now and are not using AngularJS any longer.

There even is a YouTube Video that takes a closer look at the results.

In any case, we believe this survey can help lots of developers make choices and it gives at least some insights on the State of JavaScript. Besides the front end frameworks, the State of JS also offers lots of data of other subjects regarding JavaScript which are definitely worth checking out!

‘Minecraft is getting a JavaScript runtime’ by Tobias Ahlin

Tobias blew our mind with the message that Minecraft has a HTML based UI that is using a JavaScript runtime. Just think about it: a JavaScript runtime running on top of your games.

The JS runtime provides access to UI elements and an API to give developers enough freedom to work with the interface.

Worth mentioning is that this is completely mobile optimized and is based on flexbox. Using floats is just too expensive on processing power.

‘Learning to Love Type Systems’ by Lauren Tan

Since the introduction of TypeScript in 2012, web development has consistently looked more towards building software with the use of static typing. Lauren discussed why we should embrace the use of optional static typing that TypeScript provides.

By using types, we add more constraints to our code and how other developers can use our code. Thus this decreases the amount of possible bugs during the development phases of a project. According to Lauren, types are mathematical propositions on how a program should work and the written code that complies to the types is a proof of the type system.

Lauren explained that while using types we should be as strict as possible. The lower cardinality we have in our types, the less bugs will occur as we limit the possible inputs to our functions.

With TypeScript it’s convenient to use a type such as any but we’re better off avoiding using the any type. By consistently being as strict as possible in our type usage, we facilitate better integration between different developers and teams. It is definitely true that stricter typing helps with defining the limits of your code while also documenting your code indirectly.

View talk View slides

‘Choosing Your JavaScript Framework’ by John Papa

With all the current JavaScript frameworks out there it’s hard to pick one to work with. During his talk John Papa took a closer look to the three most popular frameworks at the moment: Angular, React and Vue.

When choosing the framework for your project you could ask yourself questions like “Does it have all the features that I need?”, “What about the documentation?”, “Is it backed by a strong community?” or “How fast is the framework?”. In this case all three frameworks would apply. But they all have a different way to work with components, lazy loading, state management and other stuff.
Take for example the language it’s written in. With Angular comes TypeScript, but React and Vue are by default JavaScript. Do you fancy TypeScript but you don’t like to work with Angular? No issue, you can perfectly use TypeScript in React and Vue.

They are all perfect for building successful applications and you can go on for hours on which one is the best. But in the end it comes down to one question: “How does the framework make you feel when you use it?”.
The only way to find out is by trying each one. That’s why John Papa created a Tour of Heroes project for each framework.

Do you wanna know which one he prefers? Well, he did not want to reveal that during the talk…

View talk View slides

‘JavaScript on the Desktop, Fast and Slow’ by Felix Rieseberg

Javascript is everywhere today, even in desktop applications e.g. Battlefield 1, Nvidia GeForce Experience and Adobe Creative Suite. Felix reveals his four tricks that can make your application more efficient.

Before importing a specific module, really consider if you need all of its functionalities as it might bring in some additional items that you don’t need. When you do require a specific module, make sure you embed it at the right place.

When using Node.js - which uses the V8 Javascript engine - the engine runs every time you build and compiles your code into something your machine can execute. You can easily cache this with the module v8-compile-cache.

Repainting the screen is an expensive operation. You can check with Chrome Developer Tools how much this operation costs and maybe tweak some code.

His third trick is that not all code is equal. Sometimes there is a more efficient way to structure your code or use different function calls with the same end result that could make your application faster. Using getElementByClassName instead of querySelectorAll for example would be 99% faster.

And to close off, application lifecycle. If your application is minimized, pause the network requests and stop refreshing every couple of seconds. You can check this with document.hidden.

View talk View slides

Conclusion

We had an interesting two days at dotCSS and dotJS, and had a lot of fun engaging with the wonderful people at the conference. One thing we noticed is that the talks at dotCSS were way more technical than the ones given at dotJS and somehow that made us feel a little bit disappointed. Nonetheless we learned a lot of things and had a great time visiting the city of love.

Explore some more

Vacancy frontend developer

Vacancy frontend developer

Create wonderful user interfaces

View more
Vacancy Angular developer

Vacancy Angular developer

Build enterprise Angular Apps

View more
NGRX VS. NGXS VS. AKITA VS. RXJS: FIGHT!

NGRX VS. NGXS VS. AKITA VS. RXJS: FIGHT!

Battle of the state managers

View more

Jan De Wilde is a Senior Frontend Developer at Ordina Belgium, focussed on building quality mobile/hybrid applications that are accessible on a big collection of devices. His favorite technologies are Ionic Framework, Angular and TypeScript. Jan is also Practice Manager for the Frontend Practice where he takes care of the development and coaching of employees.

Ines is a frontend developer, passionate about creating Angular applications. She is always open for trying new technologies or trying things in new and exciting ways.

Elke is a Frontend Developer with a focus on Vue, TypeScript, Angular and is very interested in other frontend technologies. In her spare time you can find her taking photographs at events, training for half marathons or enjoying music by collecting records and attending concerts.

Sam is a frontend developer who wants to master the Javascript frameworks, besides that he still has a strong interest in backend as well.

Gert-jan is a Software Developer at Ordina Belgium. He is passionate about frontend stuff, but you can easily throw him in the backend jungle and he will survive. In his spare time he’s practising some knee dragging on his motorcycle.

Stefanie is a frontend developer at Ordina Belgium. She is passionate about Angular and Ionic applications.

Michaël is a Front-End Developer at Ordina, passionate about all JavaScript related technologies. In his spare time, Michaël enjoys working out, running and enjoying his time with friends and family.

Dimitri is a Frontend and Mobile developer at Ordina Belgium. He enjoys writing user friendly apps in a clean, maintainable way. Dimitri loves new technologies and is eager to try them out.