teleren/devto huggingface dataset:
How to Fix Font Awesome Icons Flashing Wrong Size in Gatsby
Tags: gatsby, css, javascript, webdev
Published: 2021-02-01 18:09:53

Recently, I was working on a project with Font Awesome and Gatsby. I noticed that every time the page loaded after publishing the site, the icons would render huge for a split second. In my pre-React days, I remembered running into this annoying problem with Bootstrap 3 and Glyphicons. In that case, I knew it happened because I was importing the styles for the Glyphicons in the wrong order but wasn't sure how to fix that problem using React and Gatsby.

Bugs that only happen on page load or the first action of an element always seem to be the most frustrating ones to debug. Thankfully, the solution is relatively straightforward and should relieve your frustration in no time!

## Why it happens
Since styles take a little extra time to download and get injected into the <code>head</code>, the icon is momentarily unstyled. <a href="https://twitter.com/fabianterh">Fabian Terh</a> has a really great <a href="https://medium.com/@fabianterh/fixing-flashing-huge-font-awesome-icons-on-a-gatsby-static-site-787e1cfb3a18">Medium article, "Fixing flashing huge Font Awesome icons on a Gatsby static site"</a>, which does a great job of explaining the why if you want a more thorough explanation.

## How to fix it
In Gatsby, you'll add these lines of code to the beginning of your gatsby-browser.js. (It just so happens that this fix also works in Next.js if you stick this code into your <code>_app.js</code> file.)

<pre><code>const styles = require("@fortawesome/fontawesome-svg-core/styles.css")
const config = require("@fortawesome/fontawesome-svg-core")

config.autoAddCss = false</code></pre>

You could import the styles and config using ES6 syntax, like so:

<pre><code>import '@fortawesome/fontawesome-svg-core/styles.css'
import { config } from '@fortawesome/fontawesome-svg-core'</code></pre>

Let's break those down.

First, we're importing the Font Awesome styles manually and the config from the Font Awesome core library.  

Then, we're setting <code>config.autoAddCss</code> to false so it doesn't automatically inject the CSS into the <code>&lt;head&gt;</code>.

That's it! I hope this helped someone because I know it'll certainly help me when I run into this problem again in the future!
Preston Lamb | ZDS 073
Tags: podcast, deno, angular, nx
Published: 2021-02-01 18:07:08

---
title: Preston Lamb | ZDS 073
published: true
description: 73rd installment of ZDS, with Preston Lamb!
tags: podcast, deno, angular, nx
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8ycxrtaalmkpbug80xz0.png
---

{% youtube YVCQyA2jJ8g %}

Preston Lamb comes By for ZDS 073!! Great chat, and looking forward to his upcoming "Getting Started with Deno" course, coming out soon!

# Links
[Preston's Getting Started With Deno Course Mailing list](https://landing.mailerlite.com/webforms/landing/c4e6f9)
[Tailwind Kit](https://www.tailwind-kit.com/)
[Camtasia](https://www.techsmith.com/video-editor.html)

# Chapters
00:00 Introductions
01:36 Angular + Tailwind
06:56 Using Nx To Share Code
18:27 Circling Back to Tailwind
28:00 NgChampions Program And Blogging
35:36 Our Community in Covid Time
40:45 The Stigma of touching your mouse
49:31 Recording Development Video Content
59:43 Deno

# More Content By Zack

[Blogs](https://zackderose.dev/blogs)
[YouTube](https://www.youtube.com/channel/UCIEY8ETWdW3EX-3nWE-T0dQ)
[Twitch](https://www.twitch.tv/zackderose)
[Twitter](https://twitter.com/zackderose)
[All Video Content Combined](https://zackderose.dev/videos)
📘 CSS es
Published: 2021-02-01 15:20:47

# CSS 
*Acrónimo del idioma inglés* ( **cascading style sheet**).

Su función es describir el estilo y diseño de una página web. En como debe ser mostrado y visualizado en diferentes tamaños de dispositivos según la compatibilidad de cada navegador. 

Para crear un archivo css usamos la extensión _.css_ y de allí somos libres de inventar el nombre de la extensión pero no la extensión que deberá seguir siendo _.css_

Ejemplo **yo amo**.css 

El conjunto de reglas para escribir CSS es la siguiente 

Debemos tener un selector y un bloque de algoritmo css.
Este bloque de código estará cerrada por un par de corchetes {}.

Y dentro de esos corchetes css detectará que hay propiedades y valores y cada línea de propiedades y valores se les llama declaraciones. Cada declaración al no haber más instrucciones se cierra con un punto y una coma (;).

En resumen una sintaxis css consta de selector + propiedades + valores O de selector + un bloque de declaraciones.

Nuestro selectores podrán ser elementos o etiquetas html, nombre de clases, un ID y más.

P {color:red;} el resultado es un texto o un párrafo de color rojo.
< p > es una etiqueta html para hacer párrafos. Y en css se vuelve un selector, color es una propiedad css y red es un valor css.

Continuará más descubrimientos.....

Comparte lo que sabes el aprendizaje es mutuo.
How Fluentd simplifies collecting and consuming logs | simply explained
Tags: devops, kubernetes, beginners, tutorial
Published: 2021-02-01 17:54:25

In this tutorial you will learn about Fluentd, an open source **log data collector**. 

With Fluentd, you basically can **send any data from any data source to any destination or storage**.

To understand what this actually means, I will also explain why we actually need logs 🤔 and the challenges of collecting and consuming application logs.

###Overview of topics covered###
- Why we actually need log data?
- Challenges of collecting and consuming logs
- Solution - a unified logging layer
- How does Fluentd work
- How to configure Fluentd?
- Built-In Reliability
- Other Use Cases

---------

Watch the full video here 🤓
{% youtube 5ofsNyHZwWE %}

-----------------
► Get **30% off**: [Udemy Course: Logging in Kubernetes with EFK Stack](https://www.udemy.com/course/logging-in-kubernetes-with-efk-stack/?couponCode=UDEMY_NANA_JAN2021)
► **Kubernetes 101**: [Compact and easy-to-read ebook bundle 🚀](https://www.techworld-with-nana.com/e-books) 
It's a handy way to quickly look something up or refresh your knowledge at work and use it as your cheatsheet  😎


**Like, share and follow me** 😍 for more content:
- [Private FB group](https://www.facebook.com/groups/techworldwithnana)
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
- [LinkedIn](linkedin.com/in/nana-janashia)
First Mile at Flatiron School for Software Engineering
Published: 2021-02-01 17:33:50

Hi! 


My name is Nathan Hains. I am currently 22 years old looking to further progress my journey as a Software Engineer at Flatiron School. I began this journey at Suffolk County Community College through an Intro to Java Class. I will admit my introduction into the programming world was difficult. That challenge, however, is what really pushed me to further my knowledge. I looked up to my professor and his skillset. I wanted to learn what it took to get to where they were. From there I was decided on where to focus my attention for the years to come. 

After graduating from SCCC I had gotten accepted into Farmingdale State College with a major in Computer Programming/ Information Systems for my BA. I had completed 2 semesters when I heard about the world of Coding Bootcamps. I was/am still very much in full force for attaining my bachelors at Farmingdale. But I decided to first focus my efforts on completing a Coding Bootcamp. I had heard great reviews from various bootcamp alumni. Flatiron in specific had caught my eye from the start. The passion I saw in these Flatiron graduates was inspiring. Regular people, like me, had changed their lives for the better! I saw how rewarding the challenge of completion can be and focused my efforts on how I could be one of these people. 

Now, on February 1st, 2021, I can proudly say I am beginning my First Mile with Flatiron School as a Software Engineer. I have met with my Cohorts and saw the happy faces of my fellow students. It is super exciting to see where the next 5 month will take us all. I am ready for this challenge. I will update my journey in hopes to serve as a source of inspiration as others have been for me. See everyone in the next milestone! Wish me luck!


Nathan Hains,
Future Software Engineer
Immutable data structures in TypeScript
Tags: typescript, functional, ts
Published: 2021-02-01 17:19:02

# Why would you want immutable data structures?

Immutable data structures are essential when you try to code in a functional way, and JavaScript by itself doesn't support these. Luckily we can leverage the type system provided by TypeScript to enforce these immutability rules on our frequently used data structures like arrays and objects.
I only recently found out about this feature and thought that other people might have also missed out so making this short blog post to hopefully provide useful information for at least a couple of you guys!

## Arrays

**_Regular way to initialize an array filled with some integers._**

```ts
const xs = [1, 2, 3, 4, 5]
```

The problem with this is that even though we are using **_const_** to prevent reassignments we are allowed to mutate the array as we please.

```ts
xs[1] = 100
console.log(xs) -> [1, 100, 3, 4, 5]
```

We can luckily fix this by just giving xs the type **_ReadOnlyArray<T>_**.

```ts
const xs: ReadOnlyArray<number> = [1, 2, 3, 4, 5]
```

Now we are not allowed to mutate the array!

```ts
xs[1] = 100
console.log(xs) -> error TS2542: Index signature in type 'readonly number[]' only permits reading.
```

This is quite awesome. Enforcing immutable data structures makes our code both easier to understand and to maintain. If you are freaked out by this and thinking that what can you even do with these data structures that cannot be changed, stop worrying!. We can still use all the functional techniques that won't modify the values in place, but return new values instead.

**_examples_**

```ts
const biggerXs = xs.map(x => x * 100)
const largestInXs = xs.reduce((acc, x) => x > acc ? x : acc)
const evenOnly = xs.filter(x => x % == 0)
```

## Objects

We can do similar things with objects.

**_Regular way to initialize a user object._**

```ts
const user = {
    firstname: 'foo',
    lastname: 'bar',
    age: 69,
}
```

I didn't define a type or an interface because in these kinds of situations the compiler can infer the types for free. If you want to make this immutable you actually have to define an interface for the type.

**Immutable way to initialize a user object.\_**

```ts
interface Iuser {
    readonly firstname: string
    readonly lastname: string
    readonly age: number
}
const user: Iuser = {
    firstname: 'foo',
    lastname: 'bar',
    age: 69,
}
```

Not if we try to modify a field on our user we get a similar compiler error as before with arrays.

```ts
user.firstname = 'bar' -> error TS2540: Cannot assign to 'email' because it is a read-only property.
```

Now if we want to update the user we need some functional techniques again...

```ts
const incUserAge = (user: Iuser): Iuser => ({ ...user, age: user.age + 1 })

const birthdayBoy = incUserAge(user) -> { firstname: 'foo', lastname: 'var', age: 70 }
```

That's all I wanted to share in this blog post. Hope you found it useful. I will post more stuff related to FP in the future so consider giving me a follow if that sounds interesting ;-).
You can find other blog posts by me on my [website](https://japiirainen.com).
How to fix Ubuntu NVIDIA driver is not loaded
Tags: ubuntu, nvidia, driver
Published: 2021-02-01 17:15:31

---
title: How to fix Ubuntu NVIDIA driver is not loaded
published: true
description: 
categories: [OS, Linux]
tags: [Ubuntu, NVIDIA, driver]
//cover_image: https://direct_url_to_image.jpg
---

I was using Ubuntu 20.04 on my PC with NVIDIA GTX 1060 card. Even after installed the driver from Additional Drivers, I got the below error when running `nvidia-smi` to check if the driver is working.

![Additional Drivers](https://dev-to-uploads.s3.amazonaws.com/i/6fwsidzicgnvi5ty2oc4.png)

```
$ nvidia-smi

NVIDIA-SMI has failed because it couldn't communicate with the NVIDIA driver. Make sure that the latest NVIDIA driver is installed and running.

nvidia-settings 
ERROR: NVIDIA driver is not loaded
ERROR: Unable to load info from any available system
```

After a lot of searching, I ended up with this solution:

To resolve the above issue, you can do these simple steps:
Step 1: Make sure you have nvidia-prime installed:

```shell
sudo apt install nvidia-prime
```

Step 2: Run these commands in Terminal:

```shell
sudo prime-select nvidia
sudo rm /lib/modprobe.d/blacklist-nvidia.conf
sudo update-initramfs -u
```

Step 3: Reboot
```shell
sudo reboot
```

Step 4: Check again
```shell
nvidia-smi
```

And ta-da! It's working.

![nvidia-smi](https://dev-to-uploads.s3.amazonaws.com/i/667a9g1lnjv7hf5sbjdc.png)
What are GitHub Actions?
Tags: github, devops, githubactions
Published: 2021-02-01 17:09:21

---
series: [28-github-actions]
---
GitHub Actions allows you to automate, customize and execute your software development workflows inside your repository.
  
In my projects, I like to run my test every time there's a push to my branch. To do this, I only need repository enabled with GitHub Action workflows. 

I can create a GitHub Action workflow by navigating to the Actions tab in my project.

![Workflow templates](https://dev-to-uploads.s3.amazonaws.com/i/08zwqri2h0jewrzomgz2.png)

GitHub recommends workflows for me to use and can even make recommendations based on the programming language.

![gif of tests passing in GitHub Actions](https://dev-to-uploads.s3.amazonaws.com/i/g5qfavdmytrexrmacgvc.gif) 

After committing the CI template workflow file, I can see my tests passing directly in my repo.

GitHub Actions run on several GitHub webhook events. I recommend checking out the [GitHub Documentation for the full list](https://docs.github.com/en/actions/reference/events-that-trigger-workflows).

Jump into GitHub Actions today by exploring outstanding community actions in the GitHub Marketplace is also a great place to get started.

![GitHub Marketplace screenshot](https://dev-to-uploads.s3.amazonaws.com/i/77sonyt2pey6nfz158xj.png)

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

Learn more about GitHub Actions in our [Community Support Forums](https://github.community/c/github-ecosystem/37).

{% link https://dev.to/github/test-anything-that-runs-in-the-browser-with-cypress-and-github-actions-4213 %}
Use FontAwesome ? This Extension is A Must Have!
Tags: fontawesome, vscode, extension
Published: 2021-02-01 16:52:22

Don't have the fontAwesome library memorized ? This Extension is A Must Have !

**Font Awesome Auto-complete & Preview**

[Link](https://marketplace.visualstudio.com/items?itemName=Janne252.fontawesome-autocomplete)	

This Extension Auto-complete & gives you a preview of Font Awesome icons. It'll save you time!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ss545awx0tyfy7alamai.gif)
joyshop, a small shortcut launcher for JoyCon
Tags: rust
Published: 2021-02-01 16:51:48

# Release of joyshop

![joyshop](https://dev-to-uploads.s3.amazonaws.com/i/vf0fzwe28gme02ir93d5.gif)

I've just released [SofiaWinters/joyshop](https://github.com/SofiaWinters/joyshop), a small shortcut launcher for JoyCon on Windows 10. With this app, I use JoyCon as a left-handed shortcut launcher for PhotoShop.

This is my first Rust project, and I met some obstacles and great crates.


# Lack of GUI libraries

For Rust, some GUI libraries work on Windows, including Iced, Azul, native-windows-gui, and Conrod. They have a lot of functionality and flexibility. However, I'd like to make a transparent layered window as a tooltip, so I decided to call Win32API directly.

Thanks to the winapi crate, writing GUI code in Rust is very similar to C. (My code to create window is [joyshop/window\.rs](https://github.com/SofiaWinters/joyshop/blob/main/src/window.rs))

This is just a tip; I needed to put `#![windows_subsystem = "windows"]` in `main.rs` to hide a command prompt window.

Building GUI with Win32API is unfamiliar to me. Everything was tough but worked. Next, I want to find a way to use a resource file to build GUI.


# Issue of mpsc::channel

I got panic when I call mpsc::channel's recv method. It should relate to [Panic in Receiver::recv\(\) · Issue \#39364 · rust\-lang/rust](https://github.com/rust-lang/rust/issues/39364).

I just switched to the [crossbeam\-rs/crossbeam](https://github.com/crossbeam-rs/crossbeam) because I couldn't find a solution or workaround.


# Great [KaiseiYokoyama/joycon\-rs](https://github.com/KaiseiYokoyama/joycon-rs) crate

joycon-rs is a crate that can get inputs from JoyCon and control lights and vibration.

I've tried to make the same application before with C#, but there are no stable libraries that meet my requirements. On the other hand, Rust has joycon-rs, which is stable and easy to use.

There is one pitfall to use. The example doesn't work correctly especially using multiple controllers.


All the examples have codes like this.

```rust
new_devices
    .into_iter()
    .flat_map(|dev| SimpleJoyConDriver::new(&dev))
    .for_each(...);
```

It looks like it works for multiple controllers, but doesn't. Because `flat_map` discards drivers that failed to be initialized. And often contiguous initialization for multiple controllers fails.

Thus, we have to handle the initialization error like this.

```rust
new_devices
    .into_iter()
    .for_each(|dev| {
        let driver = create_driver(&dev);
        ...
    });

fn create_driver(device: &Arc<Mutex<JoyConDevice>>) -> SimpleJoyConDriver {
    loop {
        match SimpleJoyConDriver::new(device) {
            Ok(d) => return d,
            Err(e) => {
                println!("JoyCon init error (will retry):{:?}", e);
                sleep(std::time::Duration::from_millis(100));
                continue;
            }
        }
    }
}
```
RabbitMQ with Nodejs Part 1
Tags: node, rabbitmq, javascript, programming
Published: 2021-02-01 16:46:56

Hi all,
Before moving on to RabbitMQ and its example in Nodejs, let us first understand what is a message broker.
#What is a Message Broker?
A message broker is a software that enables multiple applications to exchange information. The message broker does this by doing multiple things in itself which includes
1. Getting a new message from an application ie. Publisher
2. Routing the messages to the queue(s) as per the message's metadata
3. Maintaining multiple queues for different types of messages
4. Facilitating applications (Consumers) of subscribing to these queues and receiving relevant messages

#What is Rabbit MQ?
According to Wikipedia, RabbitMQ is an open-source message-broker software that originally implemented the Advanced Message Queuing Protocol and has since been extended with a plug-in architecture to support Streaming Text Oriented Messaging Protocol, MQ Telemetry Transport, and other protocols.
It is an open-source message broker that we can use to make our applications communicate using various messaging protocols.

Before starting with the implementation, We should know some of its components which will help us to understand how it works internally and is this the right software for our use case:
1. Connection
2. Channel
3. Exchange
4. Queue
5. Publisher
6. Consumer

We will start with the basic theory of the above mentioned components along with their implementation using Nodejs. 

Note: I am writing for the first time and will highly appreciate any feedback or suggestions.
Find me on [Linkedin](https://www.linkedin.com/in/lalit292929/)
[Part 2](https://dev.to/outspoken_dev/rabbitmq-with-nodejs-part-2-1ibm)
10 JavaScript project ideas!
Tags: javascript
Published: 2021-02-01 16:41:23

---
title: 10 JavaScript project ideas!
published: true
description: 
tags: #javascript
//cover_image: https://direct_url_to_image.jpg
---
1. Calculator 🧮
2. Photo Gallery 📸
3. Grocery List 🛒
4. Sign in | Sign up Form 💻
5. Weather Application ☔
6. E-commerce webiste 💳
7. Social Media Website 👍
8. Quiz Application 🤔
9. Tic Tac Toe Game ❌
10. Messenger App 💬
Trust Issues with setTimeout()! 💔 setTimeout Interview Question
Tags: javascript, settimeout, interviewquestions, webdev
Published: 2021-02-01 16:35:21

# setTimeout has trust issues! 💔

```javascript
setTimeout(function a() {
   console.log("Example");
}, 5000);
```
If you execute the above program it might take 5 sec or more than 5 sec to log the result of function a. Yes, you read it right because it all depends on the callstack.

To prove the above statement we will see one example:
Example 1:
```javascript
console.log("Start");

setTimeout(function a() {
   console.log("Callback");
}, 5000);

console.log("End");

let startDate = new Date().getTime();
let endDate = startDate;

// Added 10 sec timer
while (endDate < startDate + 10000) {
   endDate = new Date().getTime();
}

console.log("While expires");
```
Guess what will be the output of the above program. You might be thinking that first in the console **Start** will get print then **End** will get print. Which is absolutely right! After that you might be thinking setTimeout function a will execute after 5 sec but the answer is **NO**. Because at first GEC (Global execution context) is created and it adds in callstack as it will take 10 sec to run GEC code and setTimeout will get registered in Callback Queue and event loop will call setTimeout function only when callstack gets empty so that's why it will execute after 10 sec. So that's how the whole concurrency model works.

Output:

```javascript
Start
End
While expires
Callback
```
Take one more example to understand the concept.
Example 2:
```javascript
console.log("Start");

setTimeout(function a() {
   console.log("Callback");
}, 0);

console.log("End");
```

Now guess what will be the output of the program. In the above example, you can see setTimeout will be in callback queue and it will be called only after the callstack gets empty which will be after **Start** and **End** print in the console. 

Output:
```javascript
Start
End
Callback
```

You must be thinking who the hell writes 0 sec in setTimeout. But you can write 0 sec in setTimeout in particular condition like if you want to execute particular code after all function gets executed as setTimeout function will be in callback queue which will be executed once callstack gets empty. In such a condition you can use 0 sec in setTimeout.

Even I was not aware of this till I watched the *Namaste javascript* series by **Akshay Saini**. Believe me, friends many senior developers will fail to answer correctly the output of the above examples.

So, This is my first post do let me know in the comment section if you really amazed by this concept.