## Why should I change my workflow
I don't have a large case study about the benefits of using Volta. The reason is pretty simple. Volta just works™️. I tend to forget about it. I think that if you start to forget about a tool you're using daily it's a pretty good indication of how frictionless the tool is.
 
I have been using the **Y**arn **V**ersion **M**anager (YVM) and the **N**ode **V**ersion **M**anager (NVM). And yeah... I can't really recommend those. They work, don't get me wrong. But I never forgot about them. Even with the `.yvmrc` and `.nvmrc` files to save the version of each of my projects once in a while you always have to run `nvm use` or `yvm use` to change the version.
 
I don't want my tooling to take a toll on my dev time. Neither do I want it to be burdensome in any way. This is where Volta made a difference for me.
 
Volta is the kind of tool that does everything silently and doesn't really require your input.
 
You can install and manage your versions simply:
 
```
volta install node@x.y.z
volta install yarn@a.b.c
```
 
Then, you simply need to `pin` the yarn and node version for a project and Volta will handle the rest of it. It's magic:
 
```
volta pin node@12.19.0
volta pin yarn@1.22.10
```
 
Volta will add this in your package.json:
 
```
 "volta": {
 "node": "12.19.0",
 "yarn": "1.22.10"
 }
```
 
Whenever you will `cd` into this folder in the future Volta will automatically know it needs to use this specific version.
 
Volta can also handle global for you. Yarn and Node aren't the only things it can manage for you. If you often find the need to install `http-server` for each version of node/yarn you're using then you could run `volta install http-server` and it will always be available. Volta handle all of this for you :)
 
## Performance
 
Did I mention how fast it was? I often found myself waiting a couple of seconds for NVM and YVM to boot whenever I opened a new console. It not the biggest deal one could say but every second I can shave in my dev process is important. Not so much for my time but for my concentration. 
 
Volta is written in rust and is as fast as it can get. As I said, I keep forgetting about it. The only reason I thought to write this article is that I had to reinstall it to my new dev workstation.
 
In the following example, you can notice how fast the folder change is even though the node version is changing. I still ran `node -v` and `yarn -v` but you can see that my env picked up the new node version immediately by looking at the `via Node v12.19.0`.
 
<div style=" width:100%; margin: 1em; position: relative; padding-bottom: 55.65693430656934%; height: 0;"><iframe src="https://www.loom.com/embed/4e96d417c95d4d0495390f9839848151" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
 
## Drawback
I guess having the pinned version info in the package.json is not to everyone's taste. I guess they could probably add a `.voltarc` in the future 🤷‍♂️. Personally, it doesn't bother me.
 
## Try it now
 
Give it a shot, you won't regret it! If you don't like it you can always go back.
 
👉 https://volta.sh/ 👈
 
```
# install Volta
curl https://get.volta.sh | bash
 
# install Node
volta install node
 
# start using Node
node
```

Volta is a tool that will make your life better

Why you should use Volta

## Farewell Fizzer

What a ride. I'll forever be grateful for this opportunity. I think I can say there will always be a before and an after Fizzer in my life.

I was lucky enough to find this amazing job. At 22, I got the chance to land my first remote job. And the odds I ever work again in an office are pretty low. This is the company that showed me that there's more to work than work. That it doesn't need to be mindless 9-to-5 schedules all the time.

This is the team with which I got to create a culture. I got to make decisions and be there at the inception of an engineering team. I had the chance to hire people and help shape the face of this startup. I invested myself to improve an existing product and make it my own a little. 

For this fair bit of luck, I'm grateful.

I grew into something better. I'm much more accomplished than I was before and much more confident in my own ability to build and thrive in any workplace.

### Every good thing comes to an end 

I'm not the sentimental type. I try to look forward and not to have regrets. Still, I leave my colleagues of the last few years. I leave friends with whom I shared many Zoom calls (😂) and few European retreats. The pandemic shook our life and it's been more than a year since I had the chance to meet them in person. That leaves a bitter taste.

Thank you very much, but it's now time for me to move onto the next chapter.

## Hello Capdesk 😍

Again, life has its way. It's hard not to oversee the amount of luck required to land at such an amazing company. It was the right role, with the right team, at the right time. I'm beyond excited about the new challenges and opportunities I will face at Capdesk. It's with extreme pleasure that I accepted this role.

I will join a highly skilled team in the equity revolution they started a few years ago. The hiring process was delightful and it's hard to overlook how committed they are to create a top-tier culture while hiring only the _cream of the crop_.

<iframe class="ig-frame" src="https://www.instagram.com/p/CKg0LURBas_/embed" width="640" min-height="745" frameborder="0" scrolling="no"></iframe>

I feel very lucky to get the chance to keep working remotely. Remote work has been a blessing in my life. I was somewhat worried that career progression would be harder (if not impossible) remotely. It's relieving to find growth (during a pandemic 🙃) and to keep everything I love about remote work. 
 
When I first interviewed with Guillaume (Capdesk's CTO) I saw someone who shares my beliefs about remote work. The team member I met convinced me that individual growth is part of their mindset. It made a lot of sense when I learned that **Togetherness** and **Empowerment** were two of their values. It's impossible to list everything but the whole _thing_ just feels right. The role, the culture, the people, ✨ everything ✨.
 
I will keep improving my craft and further improve as a senior frontend engineer (yup, that's me 🏆) while working with some of the best engineers I've met in my career. As with every career change I went through, there's a healthy amount of stress (👋 [Impostor Syndrome](https://en.wikipedia.org/wiki/Impostor_syndrome)). I have found a group of human being willing to trust me 😅. I don't think I'll ever get used to it. And guess what? I'm going to prove them right 💪. I couldn't be happier.

> I have written 11 books, but each time I think, 'Uh oh, they're going to find out now. I've run a game on everybody, and they're going to find me out.'

> **Maya Angelou**

 
To my future self: **Godspeed**.
 

Three years later it's now time for me to seek new challenges.

I'm joining Capdesk

## Why is it useful?

One of the most important things, when I build something, is that I, Marc-Antoine Ferland, actually want to use it. If I don't need it I won't find the drive to complete it. I'll start the project, learn whatever I wanted from the tech stack I started and that's it. The project will soon be forgotten. Plus, it's very hard to build something that solved a real problem if you don't experience the issue yourself.

But not this time. So what was different you might ask? Well, I had a real use case. I wanted to generate a colour palette for a website. I could have simply screenshotted the whole page and generated the palette from the image but that wouldn't have been as much fun isn't it? I was also too lazy to pick the pipette and select the colours all by one.

> 💡 Initial idea was to generate a Slack theme. I was invited to my new company's Slack (more info on that soon 😍) and I wanted to customize my Slack.

### Have the end in mind

Generating a viable Slack colour theme was a little too complex. I decided to _simply_ generate the colour palette and not worry too much if it would be usable on Slack (it  is 😱). I say simply because as you will see, it ended up being a fair bit more complex than I expected. The infrastructure I ended up with is far different from what I had in mind. That's a great thing because I learned a couple of new tricks that could be very handy in the future.

### Scope it down

> 🚀 Shipping something small ＞ Shipping nothing

Another important aspect is that I think expectations must be scoped down. Keep it simple and iterate. I had the desire to ship a v1 quickly. This gives me a chance to collect feedback but also to feel some sense of accomplishment. Now that it's online I can iterate on it when I feel like it without any pressure. If the website ends up being used, well I can scale my infra and add more features. But at least it's **live** now 🎉. Even if I don't write another line of code for that project it's not rotting in a git repository. It provides real value (at least a little 😜).

## Let's build it!

I don't really want to dive into the step-by-step process of building it. It would be long and uninteresting. I just want to explain the high-level process of it.

First, I looked to if this product already existed. After a bit of due diligence, my answer was no it doesn't. I didn't search for an absurd amount of time so it might exist but I was satisfied not having found anything.

### Show me the packages

Then, I looked at how I could make this happen. This step is mostly me googling for the library name, looking on NPM for similarly named library and sometimes looking on Bundlephobia as it tends to suggest alternative lib.

I needed two specific libs to make it happen.

* One that could take a screenshot of a whole website page. This was somewhat difficult to find. Some lib makes it but the options I needed weren't always available. In the end, I found [capture-website](https://www.npmjs.com/package/capture-website) it uses Puppeteer behind the scene which will make my life a bit harder down the road.
* Another one to generate a colour palette from an image. This one was pretty easy to find. I could have sought an alternative but I didn't need it. [node-vibrant](https://github.com/Vibrant-Colors/node-vibrant) did the trick.

### Frontend stack

I elected to build the frontend part of the app with next.js because I really like this framework. Everything can be done super quickly. Most of the time I deploy my next project on [Netlify](https://www.netlify.com/). If you don't know about Netlify, go read about their offering. It's pretty cool and the free tier is super generous.

### Backend stack

I don't build a whole lot of backend apps. It's not part of my day-to-day job and I don't often have personal projects who need them. So when I need one, I try to use node.js because it's the tech I'm most comfortable with. I also happen to like serverless functions quite a bit. So it's pretty cool that Netlify had a built-in serverless function feature. It's super easy to build simple (and even somewhat complex) functions with it. This is a superpower for the Jamstack!

So I did that, I built my API calls as two serverless functions. One to screenshot the website and another to generate a palette from the image file. And it worked. At least it worked on my machine. You can use `netlify dev` to build and test serverless functions locally. This is great. The thing is it doesn't have the same constraint in production. Oopsy! 

What ended up being a deal-breaker was that my libraries were too big. The slug size was over AWS Lambda limit (on which Netlify Functions are built)


<iframe border="0" frameborder="0" height="250" width="850"
 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fma_ferland%2Fstatus%2F1356728708070047754"></iframe>


I had to rewrite my app as a node.js server that I then deployed to Heroku. That was pretty straightforward to do. A couple of bugfixes later I was ready. Or was I? Heroku has its specific sets of limitations. 

For one, the request timeout is slightly aggressive. Screenshotting a whole website page can be rather long (it's worse on a hobby dyno 😅). 

I discovered later that with the following `capture-website`'s configuration I could greatly reduce the screenshot time while keeping more than sufficient image quality.

```js
  captureWebsite
    .file(url, fileName, {
      fullPage: true,
      type: 'jpeg',
      quality: 0.75,
      scaleFactor: 1,
      disableAnimations: true,
      timeout: 45,
      overwrite: true
    })
```

But, I was again on the lookout for a new solution. Heroku offer background jobs whenever what you need to do is longer than its request timeout time. 

That's what I decided to do. After a bit of digging, I built my solution with a Redis queue. The rest call would look if we have the palette cached (in FaundaDB) otherwise, it would queue a job. The worker would later pick the job and generate the palette. 

I configured a bit of long polling and that was it. I had built a minimal product.

The frontend app handles most of the data normalization and error handling. 
It's where the polling is done and the results displayed for the user to access.

<img src="https://cdn.loom.com/sessions/thumbnails/892bae1e444b4fbd9ae4a33da95092ad-with-play.gif">

I'm quite satisfied with the general performance of the app and I'm happy because I think for once this app could benefit other people looking for a quick way to get a colour palette.

### Downside

The precision of the tool isn't great but it does the job. One such example is `example.com`

![](/img/screenshot_2021-02-20-example-domain.png)

Paletteify will generate the following palette 

![](/img/screenshot_2021-02-20-paletteify.png)

That's quite a lot of extrapolation, isn't it? I think it's still pretty useful. This tool is more meant as a design starting point. Don't rely too much on it. If you want the real colour code you're better just digging in the CSS and finding it by yourself.

## Conclusion

This post is high-level on the tech side on purpose. I would be glad to answer any specific question. If you happen to have one feel free to reach out!

The source code for both the frontend and the backend app is available on my Github.

* [Website](https://github.com/maferland/paletteify)
* [API](https://github.com/maferland/paletteify-server)

I'll most likely build additional features in the future. Or maybe not. I learned quite a bit about building a Redis queue in node.js with Heroku. And that, I think, is pretty cool.

Very few of the projects I begin end up being released. For once, I managed to build something useful. Here is how I built Paletteify.

Building a color palette generator

## But why?

I could answer with _Why not?_ but there are valid reasons do to so!

1. Why not automate mundane tasks?
2. I love to share my physical activity. I've found out it helps everyone to stay motivated.
3. When you're working remotely any chance you get to bond with your team should be taken!

So let's get started.

## Zapier

I'm not going to explain what's [Zapier](https://zapier.com/), they do it well enough by themselves. If you're not familiar with them go check it out, it's pretty useful to automate mundane tasks.

If you're too lazy to read this post and only want the Zap, I got something for you. Zapier now allows us to share Zaps. That's a super cool feature I wasn't aware of (until now). You probably will have to change one or two things but here is the end product I created for this post.

[BRING ME TO THE THING NOW](https://zapier.com/shared/2e057cdc4e53ff1c3820ac910d17b0e01c9f9392)

If you don't have an account go ahead and create it, we're going to need it :)

## Make a Zap

First, you're going to need to create your Zap.

![make a zap](/img/make-a-zap.jpg)

### Trigger

You need to select the trigger. A trigger is the app + event combo that will start the Zap.

In our case, we'll select Strava.

![select trigger app](/img/select-trigger-app.jpg)

Then you can choose what event should start the Zap. We want to use `New Activity`.

![select trigger event](/img/select-trigger-event.jpg)

You will be asked to log into your Strava account. Mine was already linked! 

![link strava account](/img/link-strava-account.jpg)

Then, you can test the trigger. Zapier will pull the last event of this type and display the payload content. All those information will be available in the next step.

![test trigger payload](/img/test-trigger-payload.jpg)

### Action

Now that we have a trigger, we need to choose what we want to do with it.
I found that I always end up posting to Slack. This might be because my use cases are a bit trivial but you can come up with much more complex flows.

Here, you're asked to select which app will react to the trigger. You could push your data into a spreadsheet to compile your results and maybe even pull the weather and find some sort of correlation between the temperature and your pace 🙃. Sky's the limit!

For now, let's just show off to our colleagues. So I'll pick Slack.

![select action app](/img/select-action-app.jpg)

For the event, we want to submit to a channel. I suggest selecting `Direct message` to debug the Zap before sending it to a channel.

⚠️  **I don't recomment sending your results to any a public channel such as #general**  ⚠️

![select action event](/img/select-action-event.jpg)

As before, you will be asked to log into your Slack account. Mine was already linked (again)! 

![link slack account](/img/link-slack-account.jpg)

### Configuration

Here comes the fun part. This is also the part where you can go off-script if you'd like. These are just my personal preferences.

The message builder is quite intuitive. Try it! If you're too lazy you can always use the zap sharing link I've put at the top of the article.

I picked the name of the activity, the distance, the duration, the pace and the URL (so people can go five me _kudos_ 😍). Also, I picked `Send as a bot`. But feel free to do otherwise.

![configure zap](/img/configure-zap.jpg)

Also, I didn't like having the Zap link at the end of the message. Plus, we get the event emoji from Zapier. Let's use it.

![advanced config](/img/advanced-config.jpg)

If you want to tag someone you will have to enable `Link Usernames and Channel Names` feature. Also, [check this](https://zapier.com/help/doc/tips-formatting-your-slack-messages#slack-announcements) if you want to learn why @username doesn't work. You will have to dig a bit for that 🙃.

I highly suggest that you tag yourself so people know who's the activity owner

In my case, I could do that by adding `<@UB7L6HMUL>` to my message.

![link username](/img/link-username.jpg)

## Release it

Woops, don't forget to activate it 🙈.
![turn it on](/img/turn-it-on.jpg)

Zapier only collect/submit event in a while (unless you're on a paid plan). So don't worry if it takes a few minutes for the event to appear in Slack.

## Conclusion

Here you go, you did it! Congrats :)
Feel free to try out other triggers and action combinations.

![see the result](/img/see-the-result.jpg)

If like me you use Strava and want to brag about your latest PR with your coworkers here's the best way I found to automatically post my results in Slack. Thanks Zapier!

How to integrate Strava into Slack

## 2020

Last year, I left my hometown and I was supposed to spend the whole years abroad as a digital nomad. My first stop was Mexico City. I fell in love with the city and the culture. Destiny brought me back home as I could not travel to my next destination. France and Hungary were not accessible anymore due to the pandemic. So I went back home instead. This was a tough decision. I was worried about how bad things could go and decided that being close to my family was the right thing to do.

I could have remained super demoralized. Trust me I was. But I decided to shift my sight to other objectives. I massively improve my cooking skills and I couldn't be happier about it. I really love cooking and I'm glad I can cook a great meal to share with my relatives. I learned lots of new tricks and I now try to cook almost everything by hand. Jam, pickles, sourdough, granola, mayonnaise, etc.

Since I had enjoyed Mexico so much, I decided to continue Spanish learning at my local university. In total, I completed three classes and I happily consume _a lot of_ Latin American books, music and shows to further improve my skills.

Let's not forget that this year I ran my first half-marathon, I ran 30k for fun on a sunny Sunday in September and I cumulated a total of 1200km on Strava. Cheers to that!

## 2021

At the end of 2020, I decided to quit my self-imposed schedule of 60+ hours of coding. I worked on several side projects and wanted to slow down a bit. I started reading a lot. I was an avid reader as a kid but I stopped taking the time to do it at the end of highschool So that's my first goal for 2021. I want to read 52 books. At least one per week. This is an ambitious objective and I would be seriously happy if I managed to read at least 40 books. But I like challenges 🙃. I will also try to switch back and forth between non-fiction and fiction. If I can manage it, I'll read all my fiction books in Spanish to help improve my vocabulary.

Also, I would like to reach the 2000 km milestone this year. I started my Strava journey a bit late in 2020 and this should be easily achievable as I boasted an average of 42km per week in November and December.

Last year, I integrated my Spotify and Github history into my website and I'll try to do the same with Goodread and Strava to have my personal stats panel.

## Books

Here is what I already read and what I'm currently reading. I'll try to update this often until I manage to integrate Goodreads or another system on my website :)

* [Como agua para chocolate](https://www.amazon.ca/-/fr/Laura-Esquivel-ebook/dp/B004774D14) ✅
* [That will never work](https://www.amazon.ca/-/fr/Marc-Randolph/dp/0316530204) ✅
* [La casa de los espiritus](https://www.amazon.ca/-/fr/Isabel-Allende/dp/0525433473) ✅
* [The Almanack of Naval Ravikant](https://www.amazon.ca/-/fr/Eric-Jorgenson/dp/1544514212) ✅
* [Ficciones](https://www.amazon.ca/-/fr/Jorge-Luis-Borges/dp/0307950921) (❌ -- Too hard for now)
* [The Art Of War](https://www.amazon.ca/-/fr/Sun-Tzu/dp/0486832945) ✅
* [La vida que no elegí](https://www.amazon.ca/-/fr/Lorena-Franco-ebook/dp/B01ECP5TDG) ✅
* [The 7 Habits of Highly Effective People](https://www.amazon.ca/-/fr/Stephen-R-Covey-ebook/dp/B01069X4H0/ref=lp_9351919011_1_2) ✅
* [Quédate conmigo](https://www.amazon.ca/-/fr/Lorena-Franco-ebook/dp/B01EX6CMM0) ✅
* [It Doesn't Have to Be Crazy at Work](https://www.amazon.ca/-/fr/Jason-Fried/dp/0062874780) ✅
* [El último invierno](https://www.amazon.ca/-/fr/Encarna-Bernat/dp/1539847136) ✅
* [Speed Reading](https://www.amazon.ca/-/fr/Justin-Hammond-ebook/dp/B008J2MMWU) ✅
* [A Beginner's Guide to the Stock Market](https://www.amazon.ca/-/fr/Matthew-R-Kratter/dp/1099617200/) ✅
* [The Insider's Guide to Culture Change](https://www.amazon.ca/-/fr/gp/product/B07T8S4TGY/ref=ppx_yo_dt_b_d_asin_title_o08?ie=UTF8&psc=1) ✅
* [Cien años de soledad](https://www.amazon.ca/-/fr/Gabriel-GarcÍA-MÁRquez-ebook/dp/B00NKDOYHY) (READING)
* [The Richest Man in Babylon](https://www.amazon.ca/-/fr/George-S-Clason-ebook/dp/B07H7HN6DN) ✅
* [Private Equity](https://www.amazon.ca/gp/product/B079W2BGKS) (❌)
* [How to avoid a climate disaster](https://www.amazon.ca/-/fr/Bill-Gates/dp/0735280444) ✅
* [American Dirt](https://www.amazon.ca/-/fr/Jeanine-Cummins/dp/1250754089) ✅
* [Europa: A cyberpunk chronicle](https://www.amazon.ca/-/fr/Elias-J-Hurst-ebook/dp/B07ZJRZHS2) ✅
* [Neo Cyberpunk: The Anthology](https://www.amazon.ca/gp/product/B08TWGBT7R?psc=1) ✅
* [Hyperion](https://www.amazon.ca/gp/product/0553283685) ✅
* [The Year of Less](https://www.amazon.ca/-/fr/dp/B078J4B3CV) ✅
* [Weapons of Math Destruction](https://www.amazon.ca/-/fr/Cathy-ONeil/dp/0553418831) (READING)


It's the first time I try this exercise. It's time to wrap up 2020 and set sail toward 2021.

Moving Toward 2021

## The problem

Have you ever been asked by a designer if you could make a transition from one background gradient to another? Something like that should work, right?

```css
.gradient {
  background: linear-gradient(red, blue);
  transition: background 0.2s ease-in
}

.invert {
  background: linear-gradient(blue, red);
}
```

Well, I did try it when this was part of a design I had to implement this week. Sadly, it doesn't work. The page will instead change suddenly from one gradient to another 😞. And it's pretty understandable. It would be a quite complex feature to take all the pixels of the gradient and compute the transition to another color.

 ## The workaround

This might not work for every issue but for simple gradients, you can clearly use this little hack to get pretty neat visual effects.

The idea is to use a transparent gradient as an overlay and use the simple background-color transition. To obtain a very similar effect.

```html
<div class="container" id="container">
  <div class="gradient"></div>
</div>
```

```css
.container {
  background: red;
  transition: background 1s ease-in;
  width: 400px;
  height: 400px;
}

.gradient {
  background: linear-gradient(white, transparent);
  width: 100%;
  height: 100%;
}
```

So, now we have this color gradient from red to white. And if we change the `.container` color we'll have the 1s ease in transition.

 ## Show me the code

Okay, here's a better example!

<br />

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="maferland" data-slug-hash="QWEZKYR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="QWEZKYR">

  <span>See the Pen <a href="https://codepen.io/maferland/pen/QWEZKYR">

Color Gradient</a> by Marc-Antoine Ferland (<a href="https://codepen.io/maferland">@maferland</a>)</span>

</p>

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

CSS doesn't support transition for background gradient. It will instead change the whole gradient suddenly. But what if you could? I wanna show you how I worked around the limitation of CSS with this nice little trick.

How to make a gradient transition in CSS

# Why such questions?
> Which came first: the chicken or the egg?

Is it a thought exercise or simply a fun question to blend philosophy and science? I don't really care. As of late, some interrogations started to hang out in the back of my mind. I wanted to share a little bit!

> How do you acquire new tech skills? 

This is actually a variance of an interview question I was asked when I joined [Fizzer](https://www.fizzer.com). The question was something like "How do you master a technological stack". Back then, I replied that you need to have worked with it for a while. This way you get enough experience to _master_ it. Seeing a wide array of problems and finding how to solve them is what gives you a better understanding of your stack.

To say that you master a stack is a pretty bold statement. And I would not dare to say that about myself. I have been working on the same product for two years as the sole developer. Yet, I'm far from perfect. I do make mistakes from time to time lots of the things I code are probably suboptimal. Since I'm working alone, I'm rarely challenged by others. I don't get a lot of opinions to help me refine my point of view. That's an issue. Code reviews are awesome. Try to get feedback on what you do!

Back to what brought me here. If two years of working full time on a single stack didn't achieve me some sort of mastery, what could? And more so, the main question I'm worrying myself with these days:

> How can one gain experience with a stack if he needs some experience to be hired in that stack?

Interesting don't you think? If you didn't learn a skill through school (or a bootcamp) and aren't a junior hire anymore, how do you transition to a new stack? Let's say from Vue to React, Angular, etc.? It seems that to be hired in a new role one would need to have experience with that stack. Since I mentioned working with a stack is what makes you better at it... Things are getting tricky.

That's where mastering the basics is super important. I believe it's much more important to be skilled in let's say JavaScript than to know a lot about each JS framework. Lots of people do think the same. Yet, this might not always be visible in the recruitment process.

As I'm trying to progress in my career and improve myself, I'm looking for ways to gain new experience, demonstrate said experience and feel like I'm making progress.

# How to gain experience

Couple hours before writing this I read this [article](https://kentcdodds.com/blog/how-to-get-experience-as-a-software-engineer) by [Kent C. Dodds](https://twitter.com/kentcdodds). It brings interesting ideas about how to progress and become more experimented as a software engineer.

Two main takeaway: 

- You need to face issues, problems

- Open source is a path toward gaining and demonstrating skills


That's interesting. No doubt, smooth seas never made a skilled sailor! But it can be hard to face real problems when you don't work on larger projects. I know I can't work on _fake_ side-projects for too long before losing interest. 

One solution for that can be to work on smaller things like the little library I talked about in my last [post](https://maferland.com/blog/publishing-library-minimal-config). Bite-sized projects make it much easier to complete and feel like you achieved something. You can still gain very valuable knowledge by working on those. Plus they help build a little portfolio! 

Bringing value to someone or generating any kind of public output makes it much more rewarding.

Contributing to open-source projects can be scary. Tackling simple problems you encounter is a nice way to build confidence and give you traction in the community. That's an area where I definitely want to improve.

# Learning in public

> [...] generating any kind of public output makes it much more rewarding

As I wrote this sentence, I thought of Shawn Wang's [Learn in public article](https://www.swyx.io/learn-in-public/). Go read it. Generating output, making stuff, having something to show. It makes you accountable, even if no one cares. 

This blog post, might not need to be a blog post. I could have kept it in my head. But it's a way for me to learn in public. It helps me improve my writing skills. Putting things down helps me organize my thoughts and see more clearly where I'm heading. Being a better writer makes me a better communicator which makes me better at my job!

It gives me momentum. It makes me want to write tons of little projects, tons of little libraries. It makes me want to write other blog posts and keep learning!

**Don't hide** what you're doing. I did that for a while. Try to release ASAP. Try to iterate, it'll give you momentum. It'll get you to solve harder challenges, to write more blog posts, to gain more momentum. It's a virtuous circle.

# About learning in the tech industry

Just want to note, that I feel like it's an industry where we are **required** to learn a lot outside of our job to stay relevant. Not everyone wants to spend dozens of extra hours outside of their job and it's perfectly normal. We need to normalize having hobbies and a healthy work-life balance!

I feel blessed that I'm very motivated right now and that I have the time to invest myself in this kind of hobby. But we might want to reflect on this as an industry. We are **extremely** well rewarded for our knowledge but _10x_ and _rockstar dev_ lingo gives me headaches 😆.

# Wishful thinking

Right now, I'm thinking I could write a Netlify CMS plugin to import images from Unsplash and resize/optimize them on the go. That would be super cool and it would make my blog writing workflow a little easier. 

Can anyone tell me why tech articles all start with a seemingly irrelevant image 🙃?

👉 I'll keep working on my [website](https://maferland.com). <br>
👉 I'll try to give a little doc to my latest (and first?) [library](https://github.com/maferland/hooks)... Releasing doc-less code is bad. Not releasing anything is worse!<br>
👉 And I will keep learning with [EpicReact.dev](epicreact.dev) <br>

## Keep reading 👇

Another nice article on the topic [Learn in public hack](https://www.swyx.io/learn-in-public-hack/) by [SWYX](https://twitter.com/swyx/)



Acquiring new skills takes time. Quite a lot in some cases. How do you validate your skills in the tech industry? Do you really have to work with a tech stack for years to be hirable?

When you need experience to gain experience

## Setting up

First thing first, this way of doing things might not be optimal! However, this is the fastest way I found to build/publish a library. My project is [here](https://github.com/maferland/hooks). As of writing this, the README is empty, there's no examples nor test. But for the sake of _shipping it_ it's online. Use it at your own risk 😜.

First, let's init our package.json :

```
npm init --yes
```

Then, install our dependencies. I'll skip explaining the linting and publishing steps as there are a lot of great articles on the topic.

```
yarn add -D react react-dom microbundle
```

`react` and `react-dom` are pretty straightforward. [microbundle](https://github.com/developit/microbundle) is a really sweet project I found while looking if I could use [parcel](https://github.com/parcel-bundler/parcel/) for the task. It does everything we need to bundle our library. Big perks, it takes barely any config 💪.


## Configuring our bundler

As I said, there's really not a lot to do here! Add the following to your package.json!

```
  "source": "src/index.js",
  "main": "dist/hooks.js",
  "module": "dist/hooks.module.js",
  "unpkg": "dist/hooks.umd.js",
```
Basically, we're saying `index.js` is our entry file and the other three are the output file for each bundle type.

Then, we can add two new scripts to use microbundle:

```
  "build": "microbundle",
  "dev": "microbundle watch",
```
`build` will bundle everything and output it into the `dist/` folder while `dev` will let us work on our hooks in peace.

Right now, nothing is working and that's perfectly fine. We didn't code anything just yet.

## Creating your custom hook

Here's what your repo will look like in just a few seconds:

```
├── package.json
├── src
│   ├── index.js
│   └── use-interval.js
└── yarn.lock
```

You have to create a `src/` folder and add `index.js` and `use-interval.js`. We will define the following hook in `use-interval.js`:

```
import {useRef, useEffect} from 'react'

const useInterval = (callback, delay) => {
  const savedCallback = useRef()

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  // Set up the interval.
  useEffect(() => {
    if (delay === null) {
      return () => {}
    }
    const id = setInterval(() => savedCallback.current(), delay)
    return () => clearInterval(id)
  }, [delay])
}

export default useInterval
```

I didn't write this hook. I simply updated Dan Abramov's implementation of the useInterval hook. There's a brilliant [article](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) about this hook. You should definitely have a look at it to learn why you might not be able to use setInterval with react hooks. 

I needed it for another project and felt like making a lib out of it 🙃.

Then, for your `index.js` we simply want an entry point for us to import the hook in our other projects.

```
export {default as useInterval} from './use-interval'
```

We're set! `yarn build` should generate something like this:

```
├── dist
│   ├── hooks.js
│   ├── hooks.js.map
│   ├── hooks.modern.js
│   ├── hooks.modern.js.map
│   ├── hooks.module.js
│   ├── hooks.module.js.map
│   ├── hooks.umd.js
│   └── hooks.umd.js.map
├── package.json
├── src
│   ├── index.js
│   └── use-interval.js
└── yarn.lock
```

## Publishing time!

I don't want to get into the specifics here but make sure you fill your `peerDependencies`, `repository` and `bugs`:

```
  "peerDependencies": {
    "react": "^16.x",
    "react-dom": "^16.x"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/maferland/hooks.git"
  },
  "bugs": {
    "url": "https://github.com/maferland/hooks/issues"
  }
```

Then you can proceed with npm cli:

```
npm login
npm publish --access=public     
```

In the futre, you can run `yarn add @maferland/hooks` in any project to install your shiny new library. I was able to `import { useInterval } from '@maferland/hooks'` and make it work out of the box as you can see in this here [commit](https://github.com/maferland/maferland/commit/8df2b1aa73925f8a9277cb5ffe1fde4a4e8c4f2e).

## Wishful thinking

I'll try to refine this repo to add and deploy an example project soon! I definitely hope to write some doc as well. Let me know if you have any questions or comments. Enjoy!


Looking to create your own react library? Want to avoid using create-react-library? Let me walk you through a super simple solution using microbundle!

Publishing a react library with minimal config

## What I know

This will be short. I basically know nothing. Not exactly nothing as I do have some basic. But I don't know enough. Not enough for building an accessible website. And by that, I mean a truly accessible website. Have you ever used a screen reader? I know I never did. At least not on purpose. Keyboard smashing? Anyone?

- Do I test what I develop with a screen reader? Nope ❌

- Do I make sure what I develop is accessible? Never ❌

- Will I work to improve that aspect of my work? Yep ✅

- Should this be as important as responsiveness? Sure ✅

## Better mindset

I recently built a little website. It's nothing really, but it's a place where I learn to use TailwindCSS. It's built with Next.js and is hosted on Netlify. While I worked on that project, I started to build a bunch of basics components; titles, nav, buttons, etc.

I started working on a little \`tooltip\` component. While working on it my mind drifted a bit :

> How should I write this component for it to make sense for search engines?

That's a normal reflex, isn't it? Performance, responsiveness and SEO are classic concerns for a frontend engineer. Then, something else came to my mind. How would I make it work with a screen reader? And that's it. Pandora's box was opened. A whole new part of my job was brought to my attention.

## Room for improvements

So, how should I build this component? The answer is not simple. Not at all. In fact, at this very moment, I still don't know how to make it. I toyed with some ideas and found one of the many resources that will help me in my learning process ([here 👈](https://inclusive-components.design/tooltips-toggletips/)).



Here is my plan:

1. I have to learn about how people with a wide range of disabilities use the web. This includes learning how to use a screen reader
2. Learn about accessibility and the best practices.
3. Keep building new components and learning how to make them fully accessible.
4. Write about it. Learning in public is something I want to more often. I'll write about my progress here.

I set myself on the quest of being more inclusive in my web development. This starts by making sure everyone can use and profit from the websites I build.

About accessible components

## Why did you build a custom solution ?

When I started to look for `nextjs generate sitemap.xml`, I was slightly disapointed. Maybe because I remember how easy it was to setup while using Nuxt.js. But mostly because most solution seemed either overkill (with a lot of configuration) or on the other hand a bit too bare metal and naive.

Odly enough, I decided to build a fully custom solution. [Martin Beierling-Mutz](https://dev.to/embiem) posted an article that is very close to what I need so I edited his [solution](https://embiem.me/blog/auto-generate-sitemap-in-next-js/) to meet my needs.

## List the content

My website being very simple I only have a handfull of pages (the home, /about and /blog). The most important part was to be able to automatically add new blog posts to the sitemap.

I use [Netlify CMS](https://www.netlifycms.org/) to write control the content of my website. It works very for simple static site generator. The logic of this git-based CMS is that all post/page/etc. are commited in the repo. Whenever there's a new commit the website is built and deployed again.

This mean there is no API to query to know the current articles available on the website. Martin's solution tried to solve this issue by listing the files found in the `/pages/` directory.

Since my articles are already in the repo I figured I could use that instead. I use custom slug in configuration so I have to read everyfile to define it's route. I can't rely on the file name. This is a bit of a drawback of my solution compared to Martin's. But, it's already online as I write this 🙈.

```jsx
paths.push(
  ...fs.readdirSync('site/blog/').map((file) => {
    const rawfile = fs.readFileSync(`site/blog/${file}`);
    const post = JSON.parse(rawfile);
    return `/blog/${post.slug}`;
  }),
);
```

## Writting the file on disk

My version only relies on newer `fs` features that weren't available (I think) when the original post was written. The files have to be at the root of the website. In my case, the output folder id `/out`;

This way, I can write the `robots.txt` like this

```js
const robotsTxt = `User-agent: *
Sitemap: https://maferland.com/sitemap.xml
Disallow:`;

fs.writeFile('out/robots.txt', robotsTxt, () => { 
  console.log('robots.txt saved!');
});
```

Then, I write the sitemap.xml like this

```js
let xmlPaths = '';

paths
  .map(
    (path) => `
  <url>
    <loc>https://maferland.com${path}</loc>
  </url>`,
  )
  .forEach((xmlPath) => {
    xmlPaths += xmlPath;
  });

const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${xmlPaths}
</urlset>`;

fs.writeFile('out/sitemap.xml', sitemapXml, () => {
  console.log('sitemap.xml saved!');
});
```

## Conclusion

I think writting this helped me a bit figure out the orginal post solution. You simply have to add [the full script](https://github.com/maferland/maferland/commit/fae200bb00043576c402f0b95829eb74bab9c17b) as a `postexport` script in your `package.json`.

Whenever your website will be deployed again this will be ran again. If your website is built using a flat-file cms this should provide an alway up-to-date sitemap.xml for Google to crawl 🙃.

I will probably write another version of this script very soon to apply my newly acquired knowledge. Don't copy paste it without asking yourself if it's good enough for your use case!

There are many steps to improve the SEO ranking of your website. Having a sitemap cannot hurt. Here is a method to generate a proper and up-to-date sitemap for a Next.js website powered by Netlify CMS.

How to generate your sitemap.xml for Next.js and Netlify CMS

## Getting started

Before going anywhere you have to create an [Icomoon account](https://icomoon.io/). This service allows creating custom icon packs. You can select Icon from various free and premium sources. This allows reducing the size of the icons your website has to load and gives much more flexibility if you want to import icons from a variety of packs. It also makes it very easy to add custom icons and use them in your project.

The free tier does all we need for this demo. Simply create an account, create a new project and pick the icons you'd like. 

![Icomoon dashboard](/img/icomoon.png)

Once you're ready, you can click on the `Generate font` then on the `Download` button. The archive contains the files we will need in the next step.

## Importing the font

Now that we have the required file we can proceed to import them in our project. For our purpose, we only need the `style.css` file and the `fonts` folder. The font folder will need to be served on our website. For this, simply move the `fonts` folder in the `public` directory of your Next.js website.

Then, you can add the `style.css` file alongside your other global style files. I suggest renaming it to something else (icomoon, icons, etc). You can simply add the following in [./pages/_app.js](https://nextjs.org/docs/advanced-features/custom-app).

```jsx
import '../styles/icons.scss';
```

This solution will add some webpack config to load the font file with `url-loader`.

```shell
yarn add url-loader
```

Then, go to your next.config.js file and add the following snippet :

```jsx
webpack(config) {
 config.resolve.alias['~'] = path.resolve(__dirname);
 config.module.rules.push({
   test: /\.(woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',
 });
 return config;
},
```

This will let know webpack that these file types should be loaded by `url-loader`. Hence why we needed to make sure our files are in the `public/` folder.

We should edit the content of the `style.css` to make sure our website is looking for the files at the right location.

```jsx
@font-face {
 font-family: 'icomoon';
 src: url('/fonts/icomoon.ttf?ixpxfq') format('truetype'),
 url('/fonts/icomoon.woff?ixpxfq') format('woff'),
 url('/fonts/icomoon.svg?ixpxfq#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}
```

We simply add the prefixing slash to clarify that this isn't a relative path. These fille will be served from the root of your website. In my case, it's https://maferland.com/fonts/...

## Using our shiny icons

I made a little wrapper for my Icons

```jsx
const Icon = (props) => {
 return <i className={`${props.icon} ${props.className}`} />;
};
 
export default Icon;
```

The way to use the icons might be slightly different if you changed the export configuration on Icomoon.

Then, whenever I want to use an icon I simply have to write the following :

```jsx
<Icon icon="arrow-right" />
```

## Conclusion

This whole solution allows me to use CSS properties that are exclusive to fonts. This might be a handy solution if you need to use `background-clip: text;` or `text-shadow` to apply a specific design.

Most of the time, you should be able to load font files by using `file-loader` but I ran into some issue in Next.js which prompted me to find this solution with `url-loader`.

You can see the end result [here](https://github.com/maferland/icomoon-next-demo).

Most of the icon libraries available are SVG based. In some project, I found useful to have your icons as a font-family instead. Here is how I integrated Icomoon in a Next.js project.

Blog