
I'm a big fan of Sudokus, is one of those things where it's possible to spend several hours and don't notice how much time has passed. The other day I stumbled upon this amazing Sudoku.

It starts with only two cells filled and several extra rules, besides Sudoku rules. It's really fun how he goes from "I'm being trolled" to "Oh my god..".

https://youtube.com/watch?v=yKf9aUIxdb4


When building this site I noticed that on the first load before anything is cached on the browser, the Font Awesome icons used in the footer and contact section were huge for a second or two, it looks ugly so it needed to be fixed.

## Why it happens?

The usage of a Font Awesome icon on React/Gatsby/etc is like this:

```javascript
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

const MyComponent = () => <FontAwesomeIcon icon={faGithub} />;
```

On a normal app, it works fine because the CSS is loaded right before the icon is rendered, so there is no visible change of the size, but on an <abbr title="Server Side Rendering">SSR</abbr> app (like with Gatsby), the code for the icon already exists before the CSS is loaded, so it gets the needed style after a few milliseconds, resulting in the flickering of the icon size.

## Solution

We need to disable the auto-loading of CSS by FontAwesome and add the styles ourselves, this way they are already embedded when Gatsby builds the site.

in my case it was accomplished by modifying the `gatsby-browser.js` file and adding:

```javascript
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';

config.autoAddCss = false;
```

And that's it!



A few days ago I saw a [tweet](https://twitter.com/gatsbyjs/status/1212388261315911680) about a challenge to learn more about [Gatsby](https://www.gatsbyjs.org/), and since my site was already a simple landing page and a separate blog, both built with it, thought this could be a good opportunity to improve both the site and my knowledge of it, so here we go!

## Challenge 1: Create a Gatsby Blog from Scratch

The old version of the site used a starter for the blog and I modified another starter for the landing, but I think it was over-bloated with all the things it had for a simple landing page, this time I wanted something simple but functional and to unify the landing and the blog.

For the design, I just tested some [color combinations](https://coolors.co/app) that looked good together (at least to myself) and it was interesting because even though I have several years of experience it's the first time I do a responsive mobile-first markup. Way to go, me!

For styling the choice was [Emotion](https://emotion.sh/), I've been wanting to try this CSS-in-JS thing that seems to be trending and what's better than with a project like this? I'm sure it still has issues with how it's being used, but I really liked the experience.

Initially, the idea was to use [TypeScript](https://www.typescriptlang.org/) because I'm trying to learn more of it by using in some small pet projects, but there were too many things I didn't understand yet and didn't want to spend lots of time trying to get it right, so I got back to plain JS.

Overall I'm happy with how it looks and with this initial version, there is still [some work to do](https://github.com/osiux/osiux.ws/issues), but I know myself and for sure I could have left it unfinished if I tried to do everything I have in mind in one go.

[Github repository](https://github.com/osiux/osiux.ws)


Latests Blog Posts

Miracle Sudoku

Get rid of huge Font Awesome icons on Gatsby

#100DaysOfGatsby