teleren/devto huggingface dataset:
Daily Developer Jokes - Wednesday, Apr 22, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-22 12:00:16

---
title: "Daily Developer Jokes - Wednesday, Apr 22, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Apr%2022%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591e45d64.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why didn't the `<div />` get invited to the dinner party?

___A:___ Because it had no class!
 -->
Should I write about a topic that's been already explained many times over the internet ?
Tags: writing
Published: 2020-04-22 11:55:50

My answer is __YES__ for most of the times, especially if you are going to present it differently in a way that helps others understand it better. 
I believe that you can achieve this if you come with at least one of the following:

1. If you have experienced a specific situation or a problem you solved that is related to that topic and you want to talk about it in a way that reinforces your explanation or discussion.

2. If you make or collect demonstration examples about that topic in a way that explains it differently and in a more clear way.

3. If you prepare drawings, graphs, GIFs, or any kind of presentation that will help in your explanation.

4. If you have a different explanation or point of view about that topic.

5. If you are going to make your writing on a specific internet platform or community that is accessible to a larger number of people. __For instance__, one of the things that I like about __Dev.to__ community is that a post can pop up in your feed talking about a specific subject or highlighting on a specific idea or technique that may help you while you never knew it existed to even be able to find the words to search about on the internet *(the idea here is with the posts feed)*.

Finally, it's preferable that your writings will add value to others' or present something different, but, in my opinion, you can always write about any topic you want as long as your information is correct, and I don't find any harm with writing about something that's been already explained many times even if you are going to just write a few lines. If that didn't help anyone directly it might help you practice becoming a good writer in the future and you may then be able to help many others.
Quickest way to open any Github repo in Codesandbox
Tags: github, codesandbox
Published: 2020-04-22 11:48:22

Quickly open any Github repo in Codesandbox:

1. Go to a repo on GitHub.com
2. Replace url github.com with url githubbox.com
3. There's no step three!

![demo](https://i.imgur.com/V4SlrrK.gif)

---

Thank you for reading, I would love to connect with you on Twitter [@GorvGoyl](https://twitter.com/intent/follow?user_id=325435736)
Dynamic weather🌤 Interface with just CSS!
Tags: html, css, 100daysofcode
Published: 2020-04-22 11:37:14

When I opened the twitter app today, I came across this beautiful weather widget by Ellie:

{% twitter 1252636989016375297 %}

I thought to myself, "Wow that is great!😲. Wish I had that kind of CSS skills." and the very next moment I thought, "Why not give it a shot!". I spent the next 2 hours👨🏾‍💻 struggling with it and googling several CSS properties and got this end result. Not bad for my first time, I would say.

{% codepen https://codepen.io/kokanek/pen/wvKoYgq %}

I urge you guys to give it a try too!
Let us utilize this lockdown duration to upskill ourselves and learn new stuff on a daily basis. Let me know how your challenge turns out in the comments section below.
**Cheers!**
What is the difference between var, let and const in JavaScript?
Tags: javascript, beginners, webdev, tutorial
Published: 2020-04-22 11:29:34

Hello, everyone 👋, I hope you are doing great 😊.

So, today you are going to learn **what is the difference between ``var``, ``let``, and ``const``?** in this article.

In ES5, you can declare a variable via ``var``. The variable created with the var has **function scoped**. It means that you cannot access the variable outside the function.

```javascript
// function scoped
var apple = "🍎";

```

**var keyword**
* function scope
* Can be initialized during or after the variable declaration
* Can be reassigned 
* Can be redeclared


In ES6, you can declare a variable via ``var``, ``let``, and ``const``. The variable created with the ``let`` or ``const`` is block-scoped. It means that you can not access the variable outside the block.

```javascript
// block-scoped
let banana = "🍌";

// block-scoped
const grapes = "🍇";

```

**let keyword**
* block scope
* Can be initialized during or after the variable declaration
* Can be reassigned 
* Can not be redeclared

**const keyword**
* block scope
* must be initialized during variable declaration
* Can be reassigned 
* Can not be redeclared

Example

```javascript
function displayFruit() {
    if(true){
        // function-scoped
        var apple = "🍎";

        // block-scoped
        let banana = "🍌";

        // block-scoped
        const grapes = "🍇";
    }
    console.log(apple);     // "🍎";
    console.log(banana);    // ReferenceError: banana is not defined
    console.log(grapes);    // ReferenceError: grapes is not defined
}

fruit();
```

**Pro Tips** 
* Use ``const`` when you do not want what to reassign a variable.
* Use ``let`` when you want what to reassign a variable.
* Avoid using ``var``.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1587554748/memes/u2yfikczt0igcbicveam.jpg)

Now, you know **what is the difference between ``var``, ``let``, and ``const``?** 🤘.

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills 😊. You can follow me on [Twitter](https://twitter.com/Bipin_1598) if you’d like to be notified about new articles and resources.
My First Post 🎉
Tags: firstpost
Published: 2020-04-22 11:23:54

Here's the first post, and I'll never have to write one ever again!

But it doesn't mean that I won't have other things to write.
___
TL:DR;

I chose an awful time to come back to the UK to change career paths after spending three years abroad. 2020 meant to be new employment, and then COVID-19 hit!
___

Back in 2011, I wanted to be a photographer because that's what I loved doing. I loved capturing moments and preserving them endlessly. However, what I loved doing (The old stuff with raw chemicals and wooden boxes) was a very niche market that didn't even inspire my tutors at University. Resources dwindled, and I slumped into my temporary bar job that turned into a full-time position, eventually turning into being part of the management team. Fast forward to 2016 and a said f*k it to the wind and went travelling with the money I had a single backpack that was 60% camera. A year later, I did a TEFL course and started teaching in Asia for two years to sustain a life in an atmosphere that was unapologetic 'no-expectations' & multi-cultural by default.

Some people thrive on that ladder of expectations and constantly unobtainable bar; I wasn't one of those at the time. The UK atmosphere at the time was to constantly side-hustle and over-work in a home that was falling apart but paid top-dollar for it. I'm sure a lot of places still are, but while travelling and trying my best to integrate locally, I found that it didn't have to be that way. 

Aside: I'm a person that like to quantify changes or results, think of it akin performance testing or sanity-checking the effort vs result. I'm genuinely curious if learning languages or immersing yourself in other cultures re-wires your brain. I've found that I think very differently after this experience abroad.
___

I left China at the end of August '19, which wasn't perfect timing for me. However the country had gotten more hostile of foreign influence, and I'm sure everyone has seen some form of a headline about it over the past twelve months. Saved some money, visited a couple of places in Europe and spent the next few months finishing up the learning that I thought would be beneficial for the leap into Web Development. Something I had planned since 2017-2018. Well. That was the plan anyway.
___

So, after re-adjusting to the new situation over here, I've started again with learning industry demands, making comprehensive documents (I <3 well-written Documentation) and I'm going to try at-least to start giving back to the communities that have given so much already.
Hello World!
Published: 2020-04-22 11:03:58

What an appropriate title for my first blogpost!  Hey everyone, I'm Aaron and someone who is new to the world of programming.  My current job at a real estate tech company involves a little coding which got me interested (re-interested actually) in computer programming.  A few free Codecademy courses later, I found myself thoroughly enjoying it!

Starting in high school, I wanted to be a video game designer.  I learned a small script to create a prank computer program but never took it beyond that.  Apparently now, they teach coding basics in high schools and even have computer-building classes where students can build their own computer - I wish I had that!  But it's not too late right?

Right now, I'm learning JavaScript and want to make a sincere effort to learn the program over the next few months.  I'm taking an online eDX course at the moment and will most likely go through freeCodeCamp's JavaScript course soon as well.

Feel free to say hey, send me a message, or whatever!  I'm looking to meet more programmers and learn as much as I can.

Cheers y'all.
What VS Code theme do you use?
Tags: discuss, vscode
Published: 2020-04-22 10:51:02

I use a less famous theme called "[Hackpot](https://vscodethemes.com/e/wwmyers.hackpot)", a perfect partner for me along with a cup of coffee in midnight. 

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

So, which one do you love?
Second Year Group Project?
Tags: projects, help, javascript, html
Published: 2020-04-22 10:45:49

<img src="https://2.bp.blogspot.com/-L4hdMV-hxsw/WETQq24Ta7I/AAAAAAAEGfc/6GTxNH-pnOs8sereif-ikfZdy7tjT-1AwCLcB/s1600/AW323862_07.gif">

Recently our university assigned us with group projects. It's a team project and each team has either 4 or 5 members. My team, we are looking to build something useful in day to day life. 

We agreed to build a web based solution but It has to be done using HTML, CSS, Vanilla JS and Golang for backend. Can't use any Frameworks and no Firebase.

Anyone got suggestions?
Simple trick to instance a class without `new`.
Tags: javascript, typescript
Published: 2020-04-22 10:32:35

I have a case where I want a callable object, or at-least the feeling of:

``` JS
{}()
{}.prop
```

I am not the biggest fan of classes in the world but I have to admit it they have been getting some special treatment of late so in my case its unavoidable. private fields, class field and more. Anyway to achieve the following in a non hacky simple kind of way we need to do this:


Worth a note that this is typescript but should work in JavaScript too.
``` TypeScript
class Dog {
   static legs = 5;
   constructor() {
       console.log('woof');
   }
}

// progmatic use of `new` via .construct
// preload the first argument with the class we want to call;
// proxy the actual Reflect.construct method but point all gets and sets to the static Class constructor, in english: makes static available NOTE this does not mess with Reflect.construct
const callableObject = new Proxy(
  Reflect.construct.bind(null, Dog),
  {
    get(tar, prop, val) {
      // access static 
      return Reflect.get(Dog, prop, val);
    },
    set(tar, prop, val) {
      // access static 
      return Reflect.set(Dog, prop, val);
    },
    apply(target, thisArg, argumentsList) {
      // make the constructor work 
      return target({...argumentsList, length: argumentsList.length});
    }
  }
);
callableObject(); // calls constructor
callableObject.legs; // 5
```

magic :)
Add bootstrap to angular
Tags: bootstrap, angular, angularjson, add
Published: 2020-04-22 10:29:59

---
title: Add bootstrap to angular
published: true
description: How to add bootstrap to an angular project?
tags: bootstrap, angular, angular.json, add
---

###Step 2. Add Bootstrap to Angular Using angular.json

Open the `angular.json` file of your project and include:

```javascript
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"              
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ],
```
<hr>
###Step 1. Install Bootstrap & Jquery using NPM

```javascript
 $ npm install --save bootstrap
```

```javascript
 $ npm install --save jquery
```
# <center>OR</center>

###Step 1. Install Bootstrap & Jquery using Yarn

```javascript
 $ yarn add bootstrap
```

```javascript
 $ yarn add jquery
```
React Updating Array SetState Callback in for loop using Push 
Published: 2020-04-22 10:17:56

Having an issue in react state updating in an array, and also found the solution the problem is i need to know the cause of the issue.


constructor() {
    super();`
    this.state = {
      name: "",
      exampleArray: [],
      nameArr: ["s", "s1", "s2", "s3", "s4"]
    };
  }

  componentDidMount() {
    for (let i = 0; i < 5; i++) {
      this.setState({
        name: "Manikandan",
        exampleArray: [
          ...this.state.exampleArray,``
          this.state.exampleArray.push(this.state.nameArr[i])
        ]
      });
    }
In the above code am maintaining a state array called nameArr and looping this array in didMount LifeCycle and changing the state of exampleArray by pushing into this i know setstate is async and react will batch these and will render the component only once, but the problem is the result array am getting for the exampleArray is exampleArray = ['s','s1','s2','s3',5] However i solved this issue using setState via Callback without using array.push, simply appending the array in newly created reference by using spread operator.

But i want to know why particularly the last element of the loop is pushing the length of the array instead of the value when using normal setState.


Please see the below code for full reference

class App extends Component {
  constructor() {
    super()
    this.state = {
      name: "",
      exampleArray: [],
      nameArr: ["s", "s1", "s2", "s3", "s4"],
    }
  }

  componentDidMount() {

    for (let i = 0; i < 5; i++) {
      this.setState({
        name: "Manikandan",
        exampleArray: [
          ...this.state.exampleArray,
          this.state.exampleArray.push(this.state.nameArr[i]),
        ],
      })
    } //LOGS: exampleArray: ['s','s1','s2','s3', 5]

    for (let i = 0; i < 5; i++) {
      this.setState((prevState) => {
        return {
          name: prevState.name + "Manikandan",
          exampleArray: [
            ...prevState.exampleArray,
            prevState.exampleArray.push(prevState.nameArr[i]),
          ],
        }
      })
    } //LOGS: exampleArray: [1,2,3,4,5]

    for (let i = 0; i < 5; i++) {
      this.setState((prevState) => {
        return {
          name: prevState.name + "Manikandan",
          exampleArray: [...prevState.exampleArray, prevState.nameArr[i]],
        }
      })
    } //LOGS: exampleArray: ['s','s1','s2','s3','s4'] ----> Expected Result
  }
}
Considering `??` vs `||`
Tags: javascript, typescript
Published: 2020-04-22 09:58:42

The nullish coalescing operator `??` will result in the left expression unless that contains null or undefined - in that case the right expression is used. It mainly resolves the issues of the logical or operator `||` in combination with the conversion into boolean of falsy values like zero or empty strings.

It should therefore be a no-brainer to just replace all `||` with `??` - or is it?

Consider the following code snippet:

```es6
item[kind] || null
```

This would usually be a prime example for the nullish coalescing operator, *were it not for the fact that the right expression of the or operator is `null`*.

Now imagine this example in the context of a react application, where the number zero or an empty string, which are both falsy, are rendered as text node. Had we used the nullish coalescing operator instead, it would result in unwanted nodes being rendered, in the case of the number zero even visible ones.

Values may be coerced on purpose and using the nullish coalescing operator without prior consideration could therefore cause a regression.

TL;DR: if the right value of or/nullish coalescing operator `||`/`??` is `null` or `undefined`, take a closer look if the effects of type coercion could be intended. Otherwise, using `??` instead of `||` will make your code more predictable.
Day 01: 30 Days of Codewars.js
Tags: challenge, javascript, todayilearned, 100daysofcode
Published: 2020-04-22 09:54:33

> ## Table Of Contents
   * [String ends with?](#kata-1)
     - 📃 [Description](#kata-1-desc)
     - 🤔 [Thinking](#kata-1-think)
     - 👨‍💻 [Code](#kata-1-code)
     - 🐞 [Bugs](#kata-1-bugs)
     - 🏁 [Finally](#kata-1-finally)
   * [Does my number look big in this?](#kata-2)
     - 📃 [Description](#kata-2-desc)
     - 🤔 [Thinking](#kata-2-think)
     - 👨‍💻 [Code](#kata-2-code)

---

<a name="kata-1"></a>
# String ends with? : ✍ by [jhoffner](https://www.codewars.com/users/jhoffner)

<a name="kata-1-desc"></a>
### 📃 Description
> Complete the solution so that it returns true if the first argument(string) passed in ends with the 2nd argument (also a string).

<a name="kata-1-think"></a>
### 🤔 Thinking
I wasn't thinking right at first.

I wanted to make an array with the end of the given string and then compare it to the given ending by `pushing` end length times

<a name="kata-1-code"></a>
### 👨‍💻 Code
```javascript
const solution = (str, ending) => {
  const arr = str.split("");
  let endingL = 0;
  let endingArr = [];
  
  while(endingL < ending.length) {
    endingArr.push(arr.pop());
    endingL += 1;
  }
  
  let endingStr = endingArr.reverse().join("");
  
  return ending === endingStr ? true : false;
}
```
<a name="kata-1-bugs"></a>
### 🐞 Bugs
- I think it's the time complexity
- Too much code for a simple task 

<a name="kata-1-finally"></a>
### 🏁 Finally
Right After submitting my answer, my internet connection lost and I didn't even have the chance to read other people solutions, So I had the time to laugh on myself and see how stupid I was 🤣, And I remembered the `substr` method

So after the internet is back I submited this code
```javascript
const solution = (str, end) => str.substr(str.length-end.length) === end;
```

---

<a name="kata-2"></a>
# Does my number look big in this? : ✍ by [JulianNicholls](https://www.codewars.com/users/JulianNicholls)

<a name="kata-2-desc"></a>
### 📃 Description
> A [Narcissistic Number](https://en.wikipedia.org/wiki/Narcissistic_number) is a number which is the sum of its own digits, each raised to the power of the number of digits in a given base. In this Kata, we will restrict ourselves to decimal (base 10).

<a name="kata-2-think"></a>
### 🤔 Thinking
I have to turn the number into an array so I can `map` over it and power every digit with number length and then add it with the reduce method and then check if it's equal to the original number

I removed the `map` and made it all with the `reduce`
<a name="kata-2-code"></a>
### 👨‍💻 Code
```Javascript
const narcissistic = num => {
  const arrOfDigits = Array.from(String(num), Number);
  const pow = arrOfDigits.length;
  
  const sum = arrOfDigits.reduce((acc, val) => val ** pow + acc, 0 )
  
  return sum === num;
}
```

> # Now I ranked up to `7kyu` So I have the ability to mark the comments as having spoiler code
TwilioQuest Earth Day Challenge
Tags: twilioquest, earthday
Published: 2020-04-22 09:06:22

## Earth Day 2020

Wednesday, April 22nd is Earth Day’s 50th anniversary (www.earthday.org). Some pretty incredible milestones have been achieved over the years, including the Clean Air, Clean Water and Endangered Species Acts in 1970, and the signing of the historic Paris Agreement on climate change in 2016. This year’s Earth Day theme is climate action, and at a time when social distancing is a necessary requirement, Earth Day is going digital. TwilioQuest started the year with a goal of planting 10,000 trees to support reforestation efforts in Australia, and we’re participating in Earth Day with our Earth Day tree-planting challenge.

![Tree-planting Chest] (https://res.cloudinary.com/practicaldev/image/fetch/s--NnEOGmgV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://twilio-cms-prod.s3.amazonaws.com/images/Screen_Shot_2020-04-20_at_1.07.31_PM.width-1600.png)

## #SaveTheCloudSaveTheEarth
If you’ve played TwilioQuest, you may have already encountered a few tree-planting chests in the game. In light of Earth Day, we have added 8 additional tree-planting chests that will be visible from Tuesday, April 21st. The goal of this challenge is to see how many trees the TwilioQuest community can plant in one day. To get started, download TwilioQuest (www.twilio.com/quest), join the event "Earth Day 2020", find as many tree-planting chests as you can, and take on the Earth Day challenge! Share your progress online using the hashtag #SaveTheCloudSaveTheEarth.

## Earth Day Challenge on Twitch
In addition to the new chests, we will be live on Twitch (www.twitch.tv/twilio) with the support of streamers from around the world who will be planting trees in TwilioQuest from 5am EDT (10am BST). Show them some love by tuning into their streams, and join the Earth Day tree planting challenge live.
How do you deploy frontend and backend separately?
Tags: help, discuss, devops, webdev
Published: 2020-04-22 08:56:33

Initially, the idea comes from Now.sh, where frontend is static, backend is serverless. The website loads faster, but when we need an API, there will be a little warm-up time.

But what if I want a full-blown powerful backend? (I use Fastify,  actually.)

I plan to put backend on *Heroku*, as I am not sure about the cost if I put on Google Cloud Run...

For frontend, I'll just put on *Netlify*. An issue with Now.sh is just it knows too much. It won't let you host a static site without building first, for instance.

My concern is *security*. OK, I can use a CORS header on Heroku side, but do I need some kind of *API secret to protect the API*? If so, how do I put API secret on Netlify?
Difference between Angular vs React
Tags: angular, react, javascript
Published: 2020-04-22 08:44:03

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0uo63ebh62dtyl9486j9.png)
Angular Pros:
1. Complete Framework. 
2. Support for Web Components.
3. Usage of Typescript - It is a Super set of JavaScript.
4. Dynamic Change Detection.
5. Component Model.
6. Separation of presentation and data.
7. Detailed documentation.
8. Plenty of useful tools.
9. Vibrant community

Angular Cons:
1. Angular Versions migrating issues and Heavy weight code.





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

React Pros:
1. Just a library.
2. Easy to work.
3. Component Model.
4. One way data binding.
5. Virtual DOM.
6. Separation of presentation and data.
7. Big community.

React Cons:
1. High Dependency on tooling and libraries.
2. JSX substitute to regular HTML and JS.
3.Debugging is bit hard.