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.
Table of contents
- Day 1: dotCSS
- Day 2: dotJS
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.
- 3-digit shorthand
- Line graph
- Hue from shape
- Lightness from total
- 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
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.
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.
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.
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.
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?
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
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:
‘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
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.
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.
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|
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.
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|
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.
You can easily cache this with the module
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.
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
|View talk||View slides|
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.