Taking advantage of the quarantine as a developer

Mathieu Lavoie — Mon, 24 Aug 2020 19:47:05 +0000

The current world situation is (hopefully) something we'll experience once in our lives. In a sense, for us developers, it is a unique opportunity to take advantage of all this free time to perfect our skills. If you did not do at least one of those items, you might have missed a great opportunity to take your career to the next level.

Update your portfolio

Your portfolio is both where you describe yourself and your experience and you have an unique opportunity to showcase your skills and your creativity in this sandbox. The more unique the better.

Catch up on (new) technologies

New packages and frameworks come out almost every day, it's pretty much impossible to keep up. However, now's a one of a kind chance for you to read and play with this fancy new tech you never got the chance to take a couple of hours with. Don't forget it doesn't have to be a new technology. You can definitely catch up on anything that can help your day-to-day job. As an example, I am reading a lot on design systems and on Web Accessibility lately.

Think about your career path

When we're on the 40h/week wave, we tend to put our career on cruise control and not think about it too much. What about sitting with a coffee and thinking about if you're where you wanted to be a year earlier. Even better, are you doing the right things to get where you aim career-wise? And where do you want to go in the first place? You should all write that down with a clear goal and some action items to achieve this. If you struggle with all of this, your manager certainly can help with that.

Find a side hustle

Ever heard of passive income? As a developer, you are in the best position possible to build and publish some source of passive income over the internet. Don't get me wrong, it is super hard to get it to even pay back your servers (don't even think about your time your put in it). My point here is not to get rich, but more to get your hands dirty in a real project where you have to touch to every part of a complex project (design, front-end, back-end, ...). The journey is more important than the destination in that use case, and I found myself learning way more doing that than any other project.

Contribute to an open-source project

Chances are you are daily using an open-source library. Ever wonder how the heck they achieve [any problem it actually solves for you]? Well, why don't you take 5 minutes and dig in their code? Often times, you'll realize they have a very similar project structure to your own project, and that not this many code is involved. Or even better (at least I felt this way the first times I opened OSS code): you realize you can understand their code. At some point, you'll even see things they could improve! What now? Why not simply opening a pull request on their repo!

Whether that's to update your 4 years old portfolio, reading a ton of articles over the internet, writing what seems to be useless Codepens, or starting a new side-project, I hope you tried your best at taking advantage of the pandemic by improving your skills as a developer. Did I miss to cover something else in my list (I probably did.)? If so, write it down in the comments!

How I managed to use SCSS inside Web Components

Mathieu Lavoie — Fri, 01 May 2020 00:32:17 +0000

A couple of years ago, I remember rushing to learn the fourth version of Angular to get up to speed with "moderns" web frameworks. About when I got okay-ish with it, we started writing more and more React at work, so I switched onto it. Then emerged Vue.js, svelte, and many others. Modern frameworks keep being easier to implement, to use, and being lighter. At some extend, the more they evolve, the closer they get to barebone Javascript. During this time, another concept is making its way quietly: Web Components. Why are we so reticent to start daily drive this nice technology? I asked myself the question, and tried it for a while. Let me walk through my road blocks, and how I managed to get over each one of them.

For a while now, I have been reading quite a bit on Web Components and even though it's still at early stages (let's be honest), the potential of this concept truly is insane. Like any developer, I quickly dropped my in-progress project to play around with Web Components and realized how amazing they are. Soon enough I stumbled upon three deal breakers (or challenges, you pick!) before making Web Components my go-to technology:

It's not supported by every browser
I miss Typescript
Reusing CSS is pretty much impossible in the Shadow DOM

So I started digging, and you might also probably know, but it is pretty trivial to make web components supported in every modern browsers with Polyfills, and adding Typescript to Web Components is very possible (my personal stack to transpile to CommonJS is babel-loader inside webpack).

The part I scratched my head a bit more is to reuse CSS to keep my code as DRY (Don't Repeat Yourself) as possible. Plus, working without SCSS would be too much of a bummer for me to move forward with Web Components. There had to be a way.

What exactly is the issue?

We need a proper example here. When you create a Web Component with a Shadow Root, you can't just hook it with a .scss file like in React or Angular. You need to pass the actual plain boring CSS to a created style element.

class CatViewer extends HTMLElement {
  constructor() {
    super();

    const style = document.createElement('style');
    style.textContent = `
      p {
        color: blue;
      }
    `;
    const shadowRoot = this.attachShadow({mode: 'open'});
    const paragraph = document.createElement('p');
    paragraph.textContent = 'Here is some blue text.';

    shadowRoot.appendChild(style);
    shadowRoot.appendChild(paragraph);
  }
}

Note that you can attach a stylesheet to a Shadow DOM, but that implies your stylesheet won't be bundled in your component. This is exactly why this solution does not work for me

So after hours of googling, I could not find much, except having something more less like CSS-in-JS, bleeding CSS variables, or the deprecated @apply rule. There had to be a way.

Ever heard of shower thoughts?

To be honest, I am not sure if I was about to give up, or ready to put this Web Component thing on the ice again, but I had a shower thought: What if there was a way of compiling a SCSS file, and retrieve its result as a javascript string? Easy enough! To do so, a simple webpack loader could do the trick just fine.

That's how I ended up creating my first webpack loader: sass-to-string and started dogfooding it just to realize how convenient it was (for me at least) to use SCSS inside plain Web Components.

Installation

First off, install the dependency

npm install sass-to-string --save-dev

Then, all you need to do is add this webpack config

module.exports = {
  module: {
    rules: [
      {
        test: /\.styles.scss$/,
        exclude: /node_modules/,
        use: [
          "sass-to-string",
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                outputStyle: "compressed",
              },
            },
          },
        ],
      },
    ],
  },
};

If you already had an existing .scss config, you'll want to specify an exclude statement in it

module.exports = {
module: {
  rules: [
      {
          // Your new shiny sass-to-string config
      },
    {
      test: /\.(scss|css)$/,
      // Excluding the `.styles.scss` extension
      exclude: [/\.styles.scss$/, /node_modules/],
      use: [
        "style-loader",
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
          loader: "sass-loader",
        },
      ],
    },
  ];
}
}

And that's pretty much it!

Once this is done, the usage is pretty simple : you create a *.styles.scss file alongside your component (or wherever you want, who am I to judge?) and import it, like such

import styles from './CatViewer.styles.scss';

This will give you a string containing the compiled CSS. Then, all you need to do is to inject it inside a style.

Let's assume CatViewer.styles.scss contains the following:

p {
  color: blue;

  span {
    color: pink;
  }
}

The variable styles would end up with the following value:

p {
  color: blue;
}
p span {
  color: pink;
}

I know this is a stupid example, but you get the point! Let's take this into our component above.

import styles from './CatViewer.styles.scss';

class CatViewer extends HTMLElement {
  constructor() {
    super();

    const style = document.createElement('style');
    style.textContent = styles;
    const shadowRoot = this.attachShadow({mode: 'open'});
    const paragraph = document.createElement('p');
    paragraph.innerHTML = 'Here is some blue text with some <span>pink</span>.';

    shadowRoot.appendChild(style);
    shadowRoot.appendChild(paragraph);
  }
}

And bam! We just took a shiny .scss file, imported it as plain CSS in a Web Component class. If you did not notice already, since sass-to-string relies on Webpack, it supports HMR (Hot Module Reload)!

At the moment of writing those lines, I've been using this tool almost daily since about a month both at home and at work and it's been great so far. This simple loader added a lot more weight into the consideration of moving our future code into Web Components at work. Being able to re-use CSS in our components is a key for having a nice and clean CSS codebase. Not only that, but it also allows us to move away all the CSS code in a separate file, helping the separation of concepts at the same time.

I really hope this article was helpful, or at least interesting. I spent many hours reading and messing around with Web Components and they are totally worth a shot. I know this article sounds like I'm trying to sell my package, but that's not it at all. I want to share my thought process on how I went from "Yeah impossible to do it" to "It's actually fairly easy to do!". We, developers, sometimes tend to forget our job is to create things from scratch, literally.

Cover by Ryan Quintal on Unsplash

DEV Community: Mathieu Lavoie