teleren/devto huggingface dataset:
Firelinker + Testing
Tags: opensource
Published: 2020-11-28 02:33:04

## Intro
This week, I added testing to fireLinker. I always had my github action use npm test but I did not have any tests on fireLinker previously. This blog will talk about my experience with adding jest and mock testing. I also modularized my code to make a better experience when testing and adding new features.

## Modularize
I knew I wanted to work with jest because I have been doing a lot of testing with jest on telescope and find it easy to use and it gets the job done. The thing I realized when testing telescope was that the code was modularized. So, the first thing I did was make 2 file classes and utils. Classes would include any global data structure and utils would include each function in it own file. This made adding jest simple as all I added was a tests folder and added jest to my dev dependences.    

## Mock Testing
A big part of Firelinker is the linkchecker and to test it appropriately I need to do mock testing. The reason for this is that a website can change its status at any point so there is no guarantee that the status of a website will always be the same so. We create a mock environment where before each call of the function in the test file we give fetch a mock return value. The way my function works is it uses node-fetch to retrieve the head and only check the status code. So, my mock return value is just an object with a status property with the the expected status code.  

## Problem
One thing that happened was I kept getting an error when I made a test function in my test files. but when I would save and run npm test it would work. The problem was with not including jest as a global in eslint.

## Reflection 
Overall, adding tests to FireLinker has been a positive experience and there are many more tests I could add to test each and every aspect of the code for Example each file in the modularized files get a test file.  One thing I really want to add tests for is the Link class.

- Devansh Shah
React JS Log Blog - Prologue
Tags: react, beginners, codenewbie, todayilearned
Published: 2020-11-28 02:29:58

Hello Fellow Codenewbies 👋

I start to learn React recently.
This would be a series of posts logging my learning journey in React.
The series would be updated gradually as I learn something new.

## What Is React?

> React is a JavaScript library for building user interfaces.
-- [ReactJS docs](https://reactjs.org/)

### Prerequisite
- Basic knowledge of HTML & CSS
- Basic knowledge of DOM 
- **Strong** fundamental in modern Javascript (ES6 and above)


> *Author's personal opinion*:
The best way is for you to learn and understand the basic modern Javascript before diving into React.
But you can also take the hard way by picking up modern Javascript and learn it along the way. It will definitely take more time, but it's doable. 

### Tools
- **NodeJS** & **npm** installed globally
- Chrome or Firefox Extentions: **React Developer Tools**
- VSCode extention: **ES7 React/Redux/GraphQL/React-Native snippets** by ***dsznajder*** (optional)
Release 0.4 Part 1: Determined not to let everyone down once more!
Tags: opensource
Published: 2020-11-28 02:23:20

“If you’re walking down the right path, and you’re willing to keep walking, eventually you’ll make progress” ― Barack Obama 

The past week was a tough one for sure. Trying to recover from the past release was not an easy one. My morale was dropped to the lowest point it had been since the day I was kicked from University. To know that I tried and my efforts were in vain was demoralizing to say the least. I needed time and space away from the environment I had spent time with for most of my life. Time does not stand still, however, and like any other person, I had to come to gripes with what had occurred, accept it, and continue on. 

This is the last release for DPS909 and the most ambitious one yet. We're to make a PR or a series of PRs that were bigger than any we had ever done yet. Considering I didn't finish my PR for my external project and my PR for telescope was merged just after the deadline, this would my work to add to my resume. I wanted to make sure I didn't end up making the same mistake twice this time. So I talked with our professor, David.

Our telescope project is in the process of moving the front-end from gatsby to next.js and we're taking advantage of typescript. As a result, the front-end needs to be entirely ported over. I decided to take up the banner, footer, and footer in the about page. Simple in theory, but when you consider TS and next.js, two technologies that I have little experience with, it's certainly the challenge to hopefully get them up to par. I asked David and he not only mentioned that it was fine for this release but told me to have fun with this. It's a unique approach to teaching that I feel can only occur with open source since you can work with anything you want. It was certainly the morale boost that I needed and as such, will be the focus for me for this release.

Since this release will be focused on one PR, the next two blog posts I make on this release will be focused on the progress being made on this PR and the work to get this done. One thing is certain though. When I finish this semester, I will, absolutely plan on taking the follow-up open source course in the Winter Semester, DPS911. I think it's only fitting to continue working on open source as a way to improve and prepare myself for my coop which is fast approaching. Until next time!
Send information from Child to Parent - Callbacks in react
Tags: react
Published: 2020-11-28 02:09:32

Passing data between components of different levels is important and also a trickier thing to do in Reactjs. The data flow from parent to child is easier and really straight forward, is just about using the props but from child to parent can be a little bit trickier and I see how can confuse some developers. 

The first thing you have to do is create a callback function in the Parent to take in the parameter that you have accessed from the child and send the callback function to the Child as a prop.

```javascript
import React, { useState, Component} from 'react';
import ChildComponent from './child-component/child-component'

class Parent extends Component {

constructor(props) {
        super(props);
        this.state = {
            message: ''
        };
    }

modifyMessage= (data) => {
      this.setState({message: data})
},

 render() {
        return (
            <div>
                 <ChildComponent parentCallback = {this.modifyMessage}/>
                 <h1> {this.state.message} </h1>
            </div>
        );
    }
}
```

After doing this, in the Child we need to pass the data using this.props.callback(dataToParent), in this case, the event is sent at the click of the button in the page.

```javascript
import React, { Component} from 'react';

class Child extends Component {

constructor(props) {
        super(props);
    }

handleClick = (e) => {
    this.props.parentCallback('wow you click the child component');
};

 render() {
        return (
            <div>
                 <button onClick={this.handleClick}>Click this child!</button>
            </div>
        );
    }
}
```
When the button of Child is clicked, it triggered the ‘modifyMessage’ in Parent and set the message as “wow you click the child component”. We set in the state because if we do not do it like that we could not be able to use the data outside the function.

I hope this example will be useful for all of you, Thank you very much for reading and I wish you a nice day!!
Why Everyone Should Learn Programming?
Tags: discuss, webdev, watercooler, javascript
Published: 2020-11-28 01:15:17

# Introduction

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

Programming a simple "Hello World" for the very first time made us feel so powerful back then. Programming is used for not only developing software but also enhancing certain skills. The Greats from the industries always said that everyone should learn Programming. Today we are going to look into the some great quotes on "Why Everyone Should Learn Programming?".

# Quotes

## Bill Gates

![Bill Gates](https://dev-to-uploads.s3.amazonaws.com/i/pvz0mlyydwpzbngc5cde.jpeg)

> "I think it's fair to say that personal computers have become the most empowering tool we've ever created. They're tools of communication, they're tools of creativity, and they can be shaped by their user.”

<hr/>

## Stephen Hawking

![Stephen Hawking](https://dev-to-uploads.s3.amazonaws.com/i/elyh99giznrfyncilic7.jpeg)

> “Whether you want to uncover the secrets of the universe, or you just want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.”

<hr/>

## Steve Jobs

![Steve Jobs](https://dev-to-uploads.s3.amazonaws.com/i/ul9kiqp9acx2le72tm57.jpeg)

> “Everybody should learn to program a computer, because it teaches you how to think.”

<hr/>

## Elon Musk

![Elon Musk](https://dev-to-uploads.s3.amazonaws.com/i/x2skqw7v4emj6whbv0yv.jpeg)

> “I taught myself how to program computers when I was a kid, bought my first computer when I was 10, and sold my first commercial program when I was 12.”

<hr/>

## Mark Zuckerberg

![Mark Zuckerberg](https://dev-to-uploads.s3.amazonaws.com/i/vp2ty3sblvm0a83n6ach.jpeg)

> “All of my friends who have younger siblings who are going to college or high school - my number one piece of advice is: You should learn how to program.”

# Discuss

- You thought on "Why Everyone Should Learn Programming?".

# Last Note
I would love to know your response on the topic and Thank you reading the blog post.
Concurrency trong Go: Tạo goroutine (phần 2)
Tags: go, concurrency, goroutine, techmaster
Published: 2020-11-28 00:37:11

Ở [bài viết trước](https://dev.to/handuy/concurrency-trong-go-t-o-goroutine-4fe6), chúng ta đã biết cách tạo các goroutine bằng cách sử dụng từ khóa ***go*** trước lời gọi hàm. Tuy nhiên, các goroutine này chưa kịp chạy thì hàm main đã return khiến cho chương trình Go bị shutdown

Trong video dưới đây, mình chia sẻ một cách (hơi bị hacky "ăn gian" một xíu 😅 😅 😅 ) để cho hàm main chờ cho các goroutine chạy xong thì mới exit

{% youtube 6Pd3zv5fcJQ %}

Code sử dụng trong video:
```go
package main

import (
	"fmt"
	"time"
)

func printNumber() {
	for i := 0; i <= 100; i++ {
		fmt.Printf("%d ", i)
	}
}

func printChar() {
	for i := 'A'; i < 'A'+26; i++ {
		fmt.Printf("%c ", i)
	}
}

func main() {
	go printNumber()
	go printChar()
	time.Sleep(3 * time.Second)
}

```
CLI Project (Using an API)
Published: 2020-11-28 00:16:01

I made it guys! I did a whole project with little to no instruction & my creativity to drive me!
I decided to use an API as I found one that deals with Studio Ghibli. I knew I would have to find something I would enjoy seeing over & over again plus that awesome satisfaction of seeing it all working!
I have made a greeting for my users to see once they start my project and prompt them to "begin" or "exit". I hope they enter begin as they will find a list of films from Studio Ghibli that they will learn more about!
The user will be shown the film title, director, a small description, release date & Rotten Tomatoes score of the film they chose. It will then prompt them to "begin" again of "exit". 
If they chose to "begin", that previous list will be shown to them once more as half of the list will get cut off after a film or 2 & I wanted to make it user friendly although it might seem repetitive.
If the user got so excited with getting bitesize information about the films & wants to "exit" to go watch one, they will be told farewell in a Studio Ghibli fashion.  
I am so happy with how my project turned out as I even used a colorize gem to make it look fun!
Want to see what all the fun is about? You can download it & try it out!
https://github.com/LitatyHQ/amazingproject
#codevember - 28 - Fire effect - Made with tsParticles
Tags: codepen, showdev, javascript, html
Published: 2020-11-28 00:11:00

# Fire effect

**Made with [tsParticles](https://github.com/matteobruni/tsparticles)**

{% codepen https://codepen.io/matteobruni/pen/NWRPKQW %}

Checkout more samples on CodePen [here](https://codepen.io/collection/DPOage)
Black Friday discounts
Published: 2020-11-27 23:45:32

It's that time of year, time for big sales. Black Friday and Cyber Monday are great time to look for deals. It's a great time to buy someone the gift of education. If you are someone you know is eager to learn, there's some awesome content out there on sale this weekend.


**Wes Bos** 
Wes has all his premium courses for 50% off this week. He has several courses on JavaScript and JavaScript frameworks. These are $69 for the next few days, He even has a counter to when the sale ends.

* Master Gatsby
* Beginner Javascript
* ES6 for Everyone
* Fullstack Advanced React and GraphQL
* React For Beginners
* Learn Node
* Sublime Text Power User


He also has free courses. JavaScript30 is a 30 day challenge of vanilla JavaScript. Mastering Markdown is a good primer for using markdown. I picked up a few tips for it for this blog. He has a Grid and Flexbox lessons as well. I learned a lot from his stuff so check him out.
[Wes Bos][Wes]




**Andy Bell**
Andy Bell's Learn Eleventy from Scratch is $69, a savings of $145. This is a new permeant price. Andy is try to increase make it easier for people to afford his content. He is working on a CSS course that will debut at the $69 price tag. I haven't taken this course buy I do read his newsletter, Picalil.
[Andy Bell][11ty]

**Treehouse**
Treehouse had great content. Then they laid off most of their creators. There are reports they are not honoring agreements with the creators.
More recently the CEO laid off the majority of the staff without severance. 
I can no longer recommend them.


**Plurasight**
Plurasight is offering 40% off subscription till nov 30.
Subscriptions are normally $299 reduced to $179 till Monday 11:59 MT. There's tons of content here.
[Plurasight][ps]

**Codecademy**
Codecademy you can save 25% off of an annual subscription with the use of code CYBER25.
[Codecademy][cd]

**Leveluptutorials**
Save 50% off an annual subscription to Levelup Pro tutorials.
[LevelUp][lup]

Know of anymore? put them in the comments and I'll add them to the post.

[lup]:https://www.leveluptutorials.com/
[cd]:https://www.codecademy.com/
[Wes]:https://wesbos.com/courses/
[11ty]:[https://piccalil.li/course/learn-eleventy-from-scratch/]
Bandcamp Music Player and Discovery Tool
Tags: programming, webdev, computerscience, ux
Published: 2020-11-27 23:27:25

I love Bandcamp and personally use Bandcamp to browse for new tracks. But I dislike their music player and its user experience, if you're a Bandcamp user then you know what I mean. A streaming experience like Spotify is was better for my needs and that's what I decided to create.

My Bandcamp Player is open source and completely free, new feature suggestions are always welcome!

Website: https://nevolin.be/bandcamp/

Contributors: https://github.com/healzer/BandcampPlayer
The BEST React Icons Library
Tags: react, javascript, webdev, webdesign
Published: 2020-11-27 23:18:31

In this post, I will try not to enter in comparing icon sets because the one you choose will depend on the project itself and your personal preferences.

I am going to talk about a library that includes some popular icon sets, more than 20, and the possibility of working with all of them at the same time with some interesting features.

This library it's called *react-icons* and it has got more than five thousand stars.

[![GitHub stars](https://img.shields.io/github/stars/react-icons/react-icons.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/Naereen/StrapDown.js/stargazers/)


{% github react-icons/react-icons no-readme %}

**You can look for any icon [here](https://react-icons.github.io/react-icons/)**

# Basic Usage

To use this library you have only got to add the node package and import the component you want.

```bash
yarn add react-icons
# or
npm i react-icons
```

```jsx
import { FaBeer } from 'react-icons/fa'

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)
```

### Reducing Bundle Size

You can reduce the bundle size by adding a different package that includes all the icons in separated files.


```bash
yarn add @react-icons/all-files
# or
npm i @react-icons/all-files
```

```jsx
import { FaBeer } from "@react-icons/all-files/fa/FaBeer"

const Question = () => (
  <h3> Lets go for a <FaBeer />? </h3>
)
```

# Extended Features

This powerful package does also come with an option to configure all icons props: *configuration*

It is basically a react context where you can set some properties of all the icons you render below.

```jsx
import { IconContext } from "react-icons"

const IconContextProvider = ({children}) => (
  <IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
    {children}
  </IconContext.Provider>
)
```

# Extra
You can check [here](https://github.com/react-icons/react-icons/) it's documentation where everything is clearly explained.

---

I encourage you to share in the comments below if you knew this library, if you have worked with it, or even if you have anything to add to my explanation.
Predicates in Typescript
Tags: typescript, beginners
Published: 2020-11-27 23:10:20

---
title: Predicates in Typescript
published: true
description: Understanding type predicates in typescript
tags: typescript, beginner
//cover_image: https://direct_url_to_image.jpg
---

## What is a predicate?

It's pretty common to use helper functions throughout your code to determine whether something is or isn't a _thing_.

The definition of the word _predicate_ is, simply put:
> to say that something is true

So, you can call your `isFoo` and `isBar` functions _predicates_.

## How about an example?

Say for example we can magically create an animal but, for some reason, that animal can only be a `Bird` or `Fish`...

Now these two animals are pretty different, so we'd need to define them differently

```typescript
class Bird {
  fly() {};
}

class Fish {
  swim() {};
}
```

As you can see, a `Fish` can `swim` and a `Bird` can `fly`, but not the other way round.

Let's get one at random and see if we can figure out how to tell it to `fly` or `swim`.

```typescript
const animal: Bird | Fish = getAnimal();

animal.swim();
       ^^^^
```
```
Property 'swim' does not exist on type 'Fish | Bird'.
Property 'swim' does not exist on type 'Bird'.
```

Oh dear!

We need to make sure we only run `animal.swim()` when the `animal` is a `Fish`

---

**Let's make a predicate!**

```typescript
function isFish(maybeFish: any) {
  return typeof maybeFish.swim === 'function';
}
```

By default, typescript can tell that the return type of `isFish` is `boolean`. But that's not as helpful as we might think...

```typescript
if (isFish(animal)) {
  animal.swim();
         ^^^^
} else {
  animal.fly();
         ^^^
}
```
```
Property 'swim' does not exist on type 'Bird'.
Property 'fly' does not exist on type 'Fish'.
```

Typescript cannot tell that you're explicitly testing whether `animal` is of type `Fish` or not in `isFish`. We need to explain that we return `true` if `maybeFish` is a `Fish`.

Turns out that's a very simple fix!

```typescript
function isFish(maybeFish: any): maybeFish is Fish {
  return typeof maybeFish.swim === 'function';
}
```

We can use that magic `maybeFish is Fish` there to tell typescript _This function will return true if `maybeFish` is of type `Fish` and false if it is not!_

This is called a _type predicate_

## Hope that helps!
Day 265: Love
Tags: hiphop, code, coding, lifelongdev
Published: 2020-11-27 22:39:24

_liner notes_:
- Professional : Really should have taken today off. haha Got some stuff done, but not as much as I would have liked. I was able to attend our team meetup eventhough it was just the folks from the UK because everyone else in the US took the day off. I've got to remember to do that. haha.

- Personal : I went through A LOT of tracks the radio show this week. The week went by so quickly, that I forgot to send the station last week's show to play on air. So I did that. Speaking of the station, I got an email from the Station Manager. Seems like someone called into the station and left a very nice voicemail showing love to the radio show. Felt really good.

![The grass covered mountains of Brecon, United Kingdom at sunset](https://dev-to-uploads.s3.amazonaws.com/i/yb4v4lka9b2ab2qau5o3.jpg)

Going to finish up the pre show work for tomorrow. I've got a lot of tracks to put into the system. I may not need to do anymore work after this for a while! haha Been thinking about my next side project and I think I could find a to start working on another side project at the same time because they are related. We'll see. Going to think on it more this weekend.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube g04t3wevS-s %}
Motivation to Blog
Tags: writing, motivation, codenewbie, webdev
Published: 2020-11-27 22:32:44

Maybe you started like me - you were excited to start a blog, got it set up, and began publishing a few posts. Once the initial excitement wore off, you wondered where you'd get ideas for posts and if anyone would actually read your blog. 

With these thoughts, I started to ask myself why I wanted to start a blog in the first place. Here are some thoughts about why I blog:

## Personal Commitment 

I enjoy writing, so I thought writing about tech topics would be a great way to merge these two interests. I am working on how to create better routines to make blogging a part of my schedule. With a plan, I can maintain this blog at a consistent pace.

## Being Part of a Community

With so many great topics to write about, I'd like to share my ideas with other developers. Blogging gives me opportunities to share ideas, spark a discussion with others, and extend an idea or concept to continue a conversation. 

## Challenge Myself

While I am learning programming concepts, I can share my knowledge through blog posts. Writing these posts requires me to review what I know and clarify my thinking. This is a way to get a little uncomfortable, but it is a challenge worth trying. 

## Final Thoughts

Thinking about my why helps me make a stronger commitment to blogging. It also helps me overcome writer's block whenever I am not sure what to write about next. I'd love to hear your thoughts. Why do you blog? Leave a comment to let me know!

<span>Photo by <a href="https://unsplash.com/@laurenmancke?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Lauren Mancke</a> on <a href="https://unsplash.com/s/photos/laptop?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
HTTP Error Code Cheat Sheet (Meme Version)

Tags: errors, cheat, sheet
Published: 2020-11-27 22:32:28

The Meme Version

If there is a subject or topic you'd like to see Cheat Sheets for let me know in the comments section and I'll make that happen.

Shout out to Dan Silcox for the idea of this post.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fhuyg0lzcjn7uiricw6o.png)

Link the expanded list: 
https://dev.to/codebyjustin/http-error-code-cheat-sheet-1nha