DEV Community: Anthony Le Goas

My tech trends of 2020

Anthony Le Goas — Mon, 18 Jan 2021 10:21:54 +0000

That’s it! 2020 is over and it's time for me to share my trending topics of the past year.
Here is the list of technologies about which I spent a lot of time reading, watching videos or listening to podcasts. It does not include all technologies I worked with but only the main, those at the heart of my tech watch.

Svelte

For sure my top 1! 🏆

I've been very interested in Svelte for two years now, in fact since the release of version 3. I like the syntax, the simplicity and the technological choices that have been made, mainly to improve the developer's experience. I also like the way it grows and the emulation that surrounds it. The community is great and growing every day. Just take a look at the discord server ;)

I spent a lot of time working with Svelte on side projects and also in the Svelte source code! I really enjoyed diving deep into it and discovering how a project like this is built. Obviously, it also helps me a lot to understand how it works and makes me appreciate the project even more.

During this year, I also wrote and spoke about Svelte :

📝/🏴󠁧󠁢󠁥󠁮󠁧󠁿 Svelte, why so much hype ?
🗣️/🇫🇷 Svelte, pourquoi tant de hype ?
🗣️/🇫🇷 Svelte, le framework qui sauve les bébés phoque

I even organized with my colleague Karine Sabatier the French chapter of the Svelte Society Day in september. It was such a great event and so fun to organize! We held a 4-hour event with 11 talks for the Svelte's French-speaking community and even a quick video in French from Rich Harris himself, the creator of Svelte! 😍

Vue.js 3

The release of Vue.js 3 has been for me one of the best news in the front-end ecosystem this year! There are so many great features that make me love the project more than I did in the past: reactivity, composition API, multiple v-model, Suspens, Portal, ...
The project is still led by Evan You -who is still at the cutting edge- always looking for improvements for the framework he created 6 years ago.
Moreover, he seems to be inspired by Svelte (see RFC#222, RFC#227, RFC#228). Based on the feedback from the community, this could be quite controversial but to me it's good news because it might beautify the syntax.

Nuxt.js

Part of the Vue.js ecosystem, Nuxt.js is a framework built on top of Vue.js that allows Server Side Rendering and Static Site Generation.

Server-side techniques are becoming more and more important in the web ecosystem for obvious performance reasons. And when it comes to optimizing web performance, here I am! I think that frameworks like this one, that care about performance without neglecting the developers experience push the web in the right direction. That's why I tried Nuxt.js this year. I loved it and can't wait for version 3! By the way, you can watch this video, the State of Nuxt, if you want information about Nuxt v3.

Web Components

Year after year, it's still a subject which is at the heart of my tech watch. I have worked with them a lot in the past and I continue to follow how the Web Components ecosystem evolves.

In particular, I follow the LitElement project (and lit-html), which is part of the Polymer Project. I'm also interested in the adoption of Web Components. It doesn't seem to be used as much as I thought a few years ago, but a dedicated post would be needed to analyze why. However, some companies use them a lot. And this year, I've especially noticed the fact that SpaceX sent Web Components into space (see this Reddit thread).

TypeScript

I’ve been using it for many years now, since 2014 and the release of the alpha of Angular 2 in fact. TypeScript continues to grow in popularity (see StateOfJS 2020) and I recommend his usage in many contexts because, to me, it facilitates teamwork and helps JavaScript developers build more robust applications.
The Microsoft team released 4 versions of TypeScript in 2020: 3.8, 3.9, 4.0, 4.1, including many very interesting features. Check out the roadmap for incoming features!

Cypress

How to get a really nice end-to-end testing experience? Easy: just use Cypress. What a nice testing framework! I really enjoy using it and I advise all front-end developers to give it a try. In the past, end-to-end testing was a bit difficult and this has influenced the way we test applications. Today, with the help of tools like Cypress, I'm pretty sure we are going to change our testing approach to make it more end-to-end focused.

The Cypress Team did an incredible job in 2020 and released new versions at a very steady pace: from version 3.8.2 to... 6.2.0. The announcement of a $40M raise is good news and I wish Cypress an awesome year 2021.

Tailwind CSS

I'm not a big fan of CSS frameworks, mainly because using a CSS framework feels like removing a part of my work that I really love: writing CSS. I like CSS, I'm good at using it, I'm efficient and using something that I didn't build is always more difficult. However, I know that writing CSS is not a piece of cake for all developers and that's why I also look at CSS frameworks. In 2020, I saw the emulation around TailwindCSS (see StateOfCSS 2020) and I decided to lift the hood to understand the hype and to be able to help teams I work with.

It was a great surprise, I enjoyed using it more than I thought even if I'm still not super convinced, not enough to use it on my own projects. I'm still thinking that I'm more efficient with my own CSS 😅. But, I have to recognize, it's a good product. I understand why people use it: it's easy to use and lets you quickly prototype an application without writing a line of CSS.
Well done Adam Wathan! 💪

Gitlab CI/CD

Out of the frontend ecosystem, I worked a lot with GitLab CI/CD in 2020. Before that, I was used to working on it but only as a "simple user", I didn't expect all the empowerment it brought to me nor how fun it could be to work with. I added it to my tech watch and dove into some advanced features. It was really cool and I will continue to work with it.

Flutter

I tried Flutter during the first lockdown in France, in March, and it was a great discovery. I wanted to try something different, another language than JavaScript that I used a lot. I was quite afraid about Dart and the way we do templating in Flutter but finally, I liked it! I quickly found my marks and interesting resources in the Flutter documentation to effectively increase my Flutter competence.

Yet, I did not have the opportunity to work with it professionally (I hope I will) but I continue to use it on side projects, I still read about it and check the news regularly: the Flutter Medium is a good place to find many interesting articles.

Sustainable IT

During 2020, I have read a lot about Sustainable IT, at first seeking answers on websites' environmental footprint. Then, I looked for guidelines to make the applications/website I built more "green".

I enjoyed what I've read because it brings me back to the web fundamentals. To me, it's satisfying to build websites while trying to have the minimal environmental footprint possible. It is of course because of the sustainable goal but also because of the technical challenge: working out of the complexity of the front-end ecosystem, with the minimum of JavaScript code, without frameworks, makes you think differently and leads to focusing on essentials.

If I can sum up in just one sentence what I've learned about building low impact websites in 2020, it could be "Do I really need this website/feature ?".

The rest

I had many other technologies in my tech watch in 2020:

React, because it's still a framework I like to work with.
Angular, mainly because I wanted to understand precisely how Angular Ivy works (based on incremental DOM).
Rollup, because I wanted to explore an alternative for Webpack.
Snowpack, because of SvelteKit.
Core Web Vitals, because it combines web performance and user experience, two important subjects for me.
Web accessibility, more and more a subject I'm passionate about, pushing the front-end developer experience even more.
CSS, SEO, Github actions, ArcGIS JS API, Warp 10 and more...

Improve your styling with Chrome DevTools - v86-87

Anthony Le Goas — Wed, 16 Dec 2020 11:09:06 +0000

Regularly, interesting features are added to Chrome DevTools. They all have a common goal: to improve the developer's experience, to make his life easier by adding tools that make him more efficient. Some of them are useful for CSS development and debugging and this is what interests us here. This post is about the new DevTools features of Chrome 86 and 87.

Now let's see what these new features can help us do!

Fix non-accessible colors

In Chrome 86, DevTools now proposes a color suggestion feature in the Styles pane.
Here we have a low-contrast problem for h1:

open the color selector of the color property
in the expanded Contrast Ratio section, look at suggestions - to make the contrast AA or AAA compliant
just click on the suggestion to apply it

Identify color contrast problems

Here's another feature that helps us make websites more accessible. Since Chrome 87, we now have an easy way to identify color contrast problems in the CSS Overview panel:

access a list of texts on the page with low color contrast
click on the low color contrast problem and the list of items with this problem is displayed at the bottom

Note that the CSS Overview panel is still experimental. If you wish, you must activate it as described below :

⚙️ Open the Settings of the Chrome DevTools.
🧪 Open the Experiments tab from the left sidebar.
☑ Check the CSS Overview checkbox.
🎉 The CSS Overview panel is now available in your DevTools, enjoy his features !

Debug grid layouts

Since version 87, Chrome DevTools provides better support for debugging CSS grids. We can now access a Grid section in the Layout pane of DevTools. This section contains 2 sub-sections:

In the Overlay display settings, you can:

Show/hide the line labels for each grid overlay
Show/hide the line numbers for each grid overlay
Show/hide the line names for each grid overlay (in the case of grids with line names)
Manage more precisely what should be displayed: track sizes, area names, extend grid lines.

The Grid Overlays section contains a list of all the grids present on the page with a checkbox to select the ones to debug.

Note that, in the Elements panel, all HTML elements with display: grid or display: inline-grid applied now have a grid badge next to them, you can click on these badges to display grid debugging labels, lines, names and so on.

Group CSS properties

Chrome 87 also introduced a nice little feature: in the Computed pane, it is now possible to group CSS properties:

check the box Group in top right corner
all properties of the focused HTML element are now grouped by type : Layout, Appearance, Grid, ...

Stay tuned for the next tips and thanks for reading 😉

Svelte, why so much hype ?

Anthony Le Goas — Mon, 18 May 2020 15:06:14 +0000

Since the release of version 3 in April 2019, Svelte has been in the news all the time. But why? What fuels this popularity? What is new about it? Can Svelte be seen as the successor to the trendy front-end JavaScript frameworks? So many questions that I will try to answer through this article.

What is Svelte ?

Svelte is a component-oriented JavaScript library like React and VueJS for example. Like most popular front-end JS libraries, Svelte offers a lightweight framework, with powerful features and syntactic sugar to make the developer's job easier. The main difference with Svelte is the library internal engine, because Svelte is primarily a compiler.

Rich Harris

An outstanding personality

Svelte was developed by Rich Harris, Graphics Editor at the New York Times. He is best known for developing:

Ractive, a template-driven UI library
Rollup, a module bundler
Bublé, an ES2015 compiler

With Svelte, Rich Harris is not at his first attempt at creating a JavaScript library.

On top of his developer skills, Rich is also very active in the JavaScript community. Very active on Twitter, he participates in discussions about the JavaScript ecosystem, often with a very strong opinion and good repartee. He's also an excellent and inspiring speaker who travels to meetings and conferences to talk about Svelte. I highly recommend his talks, especially this one about reactive programming:

Undeniably, his presence on social media and in meetups greatly contributes to Svelte's fame and make people talk about it (for good or ill), bringing the most interested ones to discover Svelte.

History

Svelte has been the talk of the town in recent months, and its popularity has risen sharply since April 2019, when version 3 was released. The project has now reached 34k stars on GitHub ! 🤩

But Svelte is nothing new. Though much reactions focus on version 3 these days, the project started in 2016. Why did we have to wait for version 3 to hear about it? Well, because Svelte version 3 focuses on two key points that most developers worry about:

Simplicity of syntax
Reactivity

What Rich Harris criticizes about frameworks

When version 1 of Svelte was released, Rich Harris published an article "Frameworks without the framework: why didn't we think of this sooner?" in which he points out a number of problems with current frameworks:

Weight of applications
Poor performances
Lack of interoperability

In this 2016 article, he imagines that in 2018, front-end developers would have entirely given up frameworks that work at runtime.

Wait, this new framework has a runtime? Ugh. Thanks, I'll pass. - front-end developers in 2018

From where he stands web applications embed too much code. This is a reality and it has a big impact on their performances. The time lapse before a possible interaction with the web application you want to access, the famous "time to interactive", is not only related to the network time needed to download the application's content but also to the time spent by the JavaScript engine to parse and interpret the code. Motivated by this observation, Rich Harris decided to create Svelte and make it a compiler and not a runtime framework.

Rich Harris likes to compare Svelte to React or VueJS, he especially likes to provoke them a little and remind that they are not really reactive and that on this point, Svelte has a head start. This seems to be part of his communication strategy to promote Svelte and maybe that's also why we talk about it so much. But why does he feel that React and VueJS are not reactive?

Reactivity is what occurs when an event happening in our application (for example a button is clicked or a value is saved) triggers another action (update the display for example) : a piece of code reacts accordingly and updates the DOM.

The reactivity of React and VueJS is based on a virtual DOM system. It is actually a JavaScript object that contributes to the internal functioning of these two libraries. It is a virtual representation of the real DOM and is used to make comparisons without having to manipulate the DOM API. Thus, frameworks can detect if there are changes to be made to the real DOM and generate a new rendering for the user.

In React and VueJS, reactivity works as follows: when a change is detected in the state of a component, the Virtual DOM is updated accordingly and compared to its previous version. If a difference is detected, then an update of the real DOM must be done.

The virtual DOM works well, the comparison algorithm is well optimized, its use is suitable for the majority of uses but when we have performance needs in terms of rendering, especially if we work around data visualization (DataViz) as Rich Harris does at the New York Times, then it is not enough. He also presents the limits of the virtual DOM in a blog article:

Svelte's stances

A compiler to embed only the essentials

React, Vue, Angular, to name a few, work at the runtime. So for your application to work, a large amount of the framework code is embedded in the bundle sent to the user, even for a basic "Hello World". The code written by the user is somehow embedded in an application to work with the code of the framework.

Svelte has a different approach, and that's what compilers are all about. What Svelte offers is the ability for developers to write code using a particular syntax, and Svelte will only be the tool that can understand that code and generate standard browser-optimized JavaScript. Since it is a compiler, no unessential code will be embedded in the application. The final bundle will only contain what the developer has written following the Svelte syntax, translated by the compiler. Svelte only translates instructions into browser-optimized code during the build phase.

Write less to produce more

Svelte's foremost promise is to allow developers to write less code. We, developers, spend most of our days reading and writing code. Every line of code we write contributes to the technical debt we accumulate on our projects and generates new bug possibilities. In fact, it is common to hear that the best possible code is the code that isn't written.

The more code a file contains, the greater the cognitive effort required to understand what is being done. To remedy this, we take time to do some refactoring to simplify understanding: we mutualize pieces of code, add comments, etc. Sometimes, all this leads to writing even more code, and then, we enter a kind of vicious circle that hurts productivity.

Finally, and everyone will agree on this fact, writing more code takes more time, leaving less time for other tasks, especially optimization. That's why one of Svelte's goals is to allow developers to write as little code as possible while still ensuring high readability.

Rich Harris wrote about it on Svelte's blog. He presents the syntax of Svelte v3 and has fun comparing it to React and VueJS:

Increased reactivity

Reactivity is at the heart of Svelte, it is certainly the main point of this version 3 and the feature that caused this sudden rise of popularity.

In Svelte, the idea is to put reactivity back into the language. Reactivity in Svelte is based on the assignment of variables, which means that defining a variable in Svelte already makes it reactive.

Let's not forget that Svelte is a compiler and thanks to this, it can, in the build phase, insert instructions in the code that will be used for reactivity. The added instructions simply say "each time an assignment occurs, calculate the dependencies or side effects, and update the DOM accordingly". Svelte being a compiler, it can calculate the side effects of each user action at the build phase, something its competitors working at runtime can't do. Thanks to this, Svelte directly targets the places in the DOM where to make changes. The responsibility for reactivity is finally borne by the compiler, not by the browser. It's very efficient and above all it's extremely powerful!

Conclusion

Almost a year after the release of its version 3, Svelte continues to make people talk. Rich Harris, especially through his communication, is obviously the main architect of this. He initiated a project that, at a time when developers are looking for new ways to optimize, allows to reduce the size of web applications and enjoy high performance rendering. Svelte keeps its promises of simplicity of writing and reactivity; this contributes to its continuous notoriety.

Compiler frameworks uncover new horizons for the future of the web. Are we heading towards a decline of front-end frameworks as we know them today to make way for compilers? When will this happen? How? Who will be the main actors? It's far too early to say, all this will take time, but one thing is sure, Svelte contributes strongly to this new momentum and makes the web move forward.