teleren/devto huggingface dataset:
What is the difference between 1 year and 10 years of experience programming?
Tags: experience, javascript, react, node
Published: 2020-08-23 04:31:05

{% youtube bsaFw7buLxM %}

Fredrik Christenson
In "What is the difference between 1 year and 10 years of experience programming?" I answer a programming question.

A podcast version of the channel can be found here: https://anchor.fm/fredrik-christenson
Step-by-Step Instructions for Testing your GitHub Python Project using GitHub Actions
Tags: beginners, tutorial, python, github
Published: 2020-08-23 04:23:11

{% youtube l6fV09z5XHk %}

Here is the complete step-by-step video tutorial for creating a python project and testing it automatically on every commit using GitHub actions. This can be a useful addition to your project.

[GitHub Repo](https://github.com/ZohebAbai/python_test_repo)

*This tutorial was created for autograding python assignments in GitHub Classroom*
Installing Ruby/Tk on Ubuntu
Tags: ruby, tk
Published: 2020-08-23 04:20:20

---
title: Installing Ruby/Tk on Ubuntu
published: true
description: Installing Ruby/Tk on Ubuntu
tags: ruby, tk
//cover_image: https://direct_url_to_image.jpg
---

Ruby/Tk is an old Gem.
But it still works well.

You need some option to install Ruby/Tk on Ubuntu.

Install dependencies.(There are various other packages in Tk, so you can install them as needed. `tcllib` `libtk-img-dev` `tkpng` and so on.)

```sh
sudo apt install tk-dev
```

Install Ruby/Tk gem.

```sh
gem install tk -- --with-tcltkversion=8.6 \
--with-tcl-lib=/usr/lib/x86_64-linux-gnu \
--with-tk-lib=/usr/lib/x86_64-linux-gnu \
--with-tcl-include=/usr/include/tcl8.6 \
--with-tk-include=/usr/include/tcl8.6 \
--enable-pthread
```

If you install a new tk package, you might need to reinstall Ruby/Tk as well.

Have a nice day.
Creating a modern beautiful and responsive button
Tags: responsivebuttons
Published: 2020-08-23 04:11:40

In this post , I'll show you how you can make responsive button for your websites using plain HTML and CSS. So let's get started.
Here the markup you need to follow this tutorial.

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



I've created a class "button-container" to
use the flexbox property.


And here's the CSS for the button:

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

The "cursor:pointer" changes the mouse cursor to pointer and the "font-size" and "height" are in rem unit just to make the button responsive.The "border:none" removes the annoying border and "border-radius:10px" makes the button edges circular (which is just nice).The "color" and "background-color" attribute are one's choice.
The "outline:none" removes the outline drawn around the button when it is clicked. The "box-shadow" property is to give the button some shadow.
And I've used some pseudo classes
The "filter:brightness(110%)" property increases the brightness of the button when we hover over it like it is changing the color.
The "transform:translate(0,0.3rem)" moves the button to the Y-direction
Using API with Discord Bots
Published: 2020-08-23 01:54:11

Welcome back to my weekly discord bot update. This time, I'll be using MyAnimeList api to write a cool search function with our discord bot!

Unfortunately, there is no real api for myanimelist yet. But there are current plans for an early official release. Our discord bot will be making use of Jikan which you can find the documentation [here](https://jikan.moe/).

Taking a look at this unofficial api, there has been already implementation for nodejs for this api!Thank you to xy137 for creating the github and making it easy for us to use Jikan!
[NodeJS Github](https://github.com/xy137/jikan-node).

Installation of this api is easy as pie! First we would want to install the packages with 

``npm install jikan-node --save``

And you're done! In order to use the api you'll only need to add two lines of code which are

``const Jikan = require('jikan-node');
const mal = new Jikan();``

We're just calling jikan through mal and wanting to use their search anime function.

Here is a basic fetch in order to grab an anime I want to search up.

``mal.search("anime", args, "page")
.then(info => console.log(info)``

With this one function, we're able to search up an anime with what the user typed.

I'll be breaking down the function! **mal** is Jikan and we would want to use the search function. **anime** is the a string that we want the type for. This can be interchangeable with people or manga as well. **args** is what the user searched for, and **page** is the result we would want about the anime.

This would bring us a result of of what we had search for. Since this is going to bring us an array of animes. You can look at your console.log and see what would you want to do with the results you have received.

Since I just want to find the first result of an anime and put it into a embed message, my code looks like 

``mal.search("anime", args, "page")
		.then(info => { 
			const exampleEmbed = new Discord.MessageEmbed()
			.setColor('#0099ff')
			.setTitle(`${info.results[0].title}`)
			.setURL(`${info.results[0].url}`)
			.setAuthor('Chulainn')
			.setDescription(`${info.results[0].synopsis}`)
			.addFields(
				{ name: 'Rating', value: `${info.results[0].score}` },
			)
			.setImage(`${info.results[0].image_url}`)
			.setTimestamp()
			.setFooter('Brought to you by Chulain');
			message.channel.send(exampleEmbed)
		})
        .catch(err => console.log(err))``

![My output looks like this!](https://media.discordapp.net/attachments/730946903835017277/746909843238944860/sFInb67.png)
Leetcode - Symmetric Tree (with JavaScript)
Published: 2020-08-23 03:00:59

Today I am going to show how to solve the Symmetric Tree algorithm problem.

Here is the problem:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vt67ehg7kc84pgqvefd5.png)

In this problem we need to test whether or not a binary tree is symmetrical in its structure and value. The question then is: when are two trees a mirror reflection of each other?
 
A tree is symmetric if the left subtree is a mirror reflection of the right subtree. If we draw a line down the middle of our tree, the tree can fold on itself and its node values will be equivalent.

Now, I am going to solve it recursively.

1) First, I check the root node. If it is null, no further action is needed. If it is not null, we need to go into recursion and check both the left and right subtrees.
 
```javascript
var isSymmetric = function(root) {
    if (root == null) return true;
    return isMirror(root.left, root.right);
};
```

2) If a left subtree and a right subtree are both null, it means that they are symmetric. If just one of them is null, then they are asymmetric. 

```javascript
var isSymmetric = function(root) {
    if (root == null) return true;
    return isMirror(root.left, root.right);
};

const isMirror = function(leftSub, rightSub) {
    if (leftSub == null && rightSub == null) return true;
    if (leftSub == null || rightSub == null) return false;
}
```

3)  If they are both not null, we need to check their values. If they are the same, we are going to continue our recursion to the left and to the right of the nodes. We have to make sure that our left subtree’s left node is equivalent to our right subtree’s right node, and our left subtree’s right node is equivalent to our right subtree’s left node.

```javascript
var isSymmetric = function(root) {
    if (root == null) return true;
    return isMirror(root.left, root.right);
};

const isMirror = function(leftSub, rightSub) {
    if (leftSub == null && rightSub == null) return true;
    if (leftSub == null || rightSub == null) return false;

    return (leftSub.val === rightSub.val 
            && isMirror(leftSub.left, rightSub.right) 
            && isMirror(leftSub.right, rightSub.left))
}
```
Stack Overflow Search GitHub Action
Tags: actionshackathon
Published: 2020-08-23 02:51:40

### My Workflow

I created a new [GitHub action](https://github.com/marketplace/actions/stack-overflow-search) that allows anyone to search on Stack Overflow via an issue or pull request comment. I created [a workflow that uses this action](https://github.com/neverendingqs/gh-action-ask-stackoverflow/blob/master/.github/workflows/ask-so.yml) so that you can try it out on this [issue](https://github.com/neverendingqs/gh-action-ask-stackoverflow/issues/1) or [pull request](https://github.com/neverendingqs/gh-action-ask-stackoverflow/pull/2)!

Usage: `/so <query>`


### Submission Category: 

Wacky Wildcards

### Yaml File or Link to Code

```yaml
on:
  issue_comment:
    types: [created]

jobs:
  ask-stackoverflow:
    runs-on: ubuntu-latest
    steps:
      - uses: neverendingqs/gh-action-ask-stackoverflow@master
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
```

{% github https://github.com/neverendingqs/gh-action-ask-stackoverflow %}


### Additional Resources / Info

* [GitHub Action](https://github.com/marketplace/actions/stack-overflow-search)
* [Workflow](https://github.com/neverendingqs/gh-action-ask-stackoverflow/blob/master/.github/workflows/ask-so.yml)
* [Playground (issue)](https://github.com/neverendingqs/gh-action-ask-stackoverflow/issues/1)
* [Playground (pull request)](https://github.com/neverendingqs/gh-action-ask-stackoverflow/pull/2)
Learning Graphs Part 2: Traversal
Tags: beginners, algorithms, javascript, computerscience
Published: 2020-08-23 02:00:05

In my [last post](https://dev.to/123jackcole/learning-graphs-part-1-implementation-4kpc) we covered how to implement a graph in javascript. 

In this week's post we'll be going over how to traverse through a graph. Similar to our [traversal of binary search trees](), there are two main methods of traversal that we'll be using. Breadth-first search(BFS) and depth-first search(DFS). 

However, for our graph searches we're going to need to keep track of which nodes we've traversed to. If we didn't we could potentially visit the same node multiple times due to nodes in a graph potentially having multiple vertices.

## Breadth First Search

For our BFS function we're going to start by creating a visited array  and populate it with boolean values for each node in our graph.

We'll then use a queue to keep track of nodes we need to visit and fill it with our starting node.

Then we loop through our queue and view our current node and its edges.

From there we loop through the nodes edges. If we have yet to visit the node we add it to the queue and mark it as visited. 

![BFS](https://dev-to-uploads.s3.amazonaws.com/i/8d6raz7j0hqfayttss1f.png)

## Depth First Search

For our DFS function we're going to utilize a recursive helper function instead of a queue of stack. 

We'll start in the same fashion with creating and populating a visited array.

Then we'll pass our node and our visited array into our helper function.

The function will set the node to visited, get its edges, loop through the edges, and pass non visited edges into our recursive function. 

![DFS](https://dev-to-uploads.s3.amazonaws.com/i/2l43e7zj5tyxjgmyr6js.png)

Thanks for reading! The code for my graph posts can be found [here](https://github.com/123JackCole/graphs).
"Bye 👋 Felicia" GitHub action
Tags: actionshackathon, github, opensource
Published: 2020-08-23 01:30:34

---
title: "Bye 👋 Felicia" GitHub action
published: true
description: A Github Action that will delete your repository by saying `Bye Felicia`. 
tags: actionshackathon, github, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hhnwwbkb9l8swn0kuien.png
---

We all have them, repositories that gather digital dust. They haven't been updated in years, with no plans to ever touch them again. Repos that we no longer look at, and get no love. GitHub doesn't limit the number of repositories so there is no incentive to tidy them up. 

You have probably always wanted a way to say "Bye Felicia" to your repo and it would automatically be deleted. Well, you are in luck because that is what I built. Say hello to the Bye Felicia GitHub Action.

**For those unfamiliar with the term here is a [link](https://www.dictionary.com/e/slang/bye-felicia/) to learn more.**

![Bye Felicia](https://media.giphy.com/media/SZioIIBxB7QRy/giphy.gif)

### My Workflow
"Bye Felicia" is the newest GitHub Action sure to be integrated into the [actions toolkit](https://github.com/actions/toolkit) package to make it easier to delete your repositories. 


### Submission Category: 
- Wacky Wildcards


### Yaml File 
Just add this action to your repos and whenever you don't want them anymore just say "Bye Felicia" in an issue comment and it will be deleted and 404.

Here is an example being triggered by an issue comment: 
```yaml
name: 👋 Felicia

on:
  issue_comment:
    types: [ created ]

jobs:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Run bye-felicia action
      uses: tonydiaz/bye-felicia-github-action@main
      with:
        github-secret: ${{ secrets.REPO_ACCESS_TOKEN }}
        github-repository: ${{ github.repository }}
```
### Link to Code
{% github https://github.com/tonydiaz/bye-felicia-github-action %}

### GitHub action in action
![Github action](https://dev-to-uploads.s3.amazonaws.com/i/04cd8fwupet6cmldm4la.gif)
Day 83 : #100DaysofCode - Reviewing variables of JS
Published: 2020-08-23 01:14:05

Today I began reviewing the basics of Javascript and completed some lessons from my bootcamp. I am reviewing variables and scopes. 

For variables, I found the following quote from my bootcamp valuable: 

<i>Use <b>var...</b> never.</i>

<i>Use <b>let...</b> when you know the value of a variable will change. For example, a counter variable that starts at 0 and is subsequently incremented to 1, 2, 3, and so on. In the lessons on looping and iteration in JavaScript, let will have its moment in the spotlight.</i>

<i>Use <b>const...</b> for every other variable.
Best practice is to always declare variables with const and then, if you later realize that the value has to change over the course of your program, circle back to change it to let.</i>

The ``var`` keyword allows us to overwrite variable declarations without an error. Unlike, const or let where a variable with the same name can only be declared once. 

The var keyword is declared globally, or locally if declared inside a function. Unlike the let keyword, which inside a block, statement, or expression, its scope is limited to that block, statement, or expression. 

I found other blogs on var, const, and let that may be helpful:

{% link https://dev.to/sarah_chima/var-let-and-const--whats-the-difference-69e %}

<h1><center><a href="https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/"> FreeCodeCamp Article</a></center></h1>

<h3><center> Look what I did! It is small but it is just the beginning </center></h3>

{% jsfiddle https://jsfiddle.net/sincerelybrittany/upr65j3b/2/ %}

As always, thanks for reading!

Sincerely,
Brittany

Song of the day: Throwback

{% youtube ufynqs_COF4 %}
Hide Your API Key In NodeJS
Tags: node, javascript, api
Published: 2020-08-23 01:02:56

Node has an object called 'process' that can be used throughout the whole Node project. 

When starting your Node project you can have a list of all your global variables in one file which we will call '.env'

If you do not have it then add it to the top level of your directory.
Inside of your '.env' file, put in your api key with any variable in ALL CAPS
```
API_KEY = blahblahblahimakey
```
Now go to your 'app.js' file or wherever you need the key,
and require the '.env' file

`require('dotenv').config()`

Now you are able to use the key in this file by calling
`process.env.API_KEY`

But to finally hide the key, since we were able to put this key into another file. We can include this file into the gitignore so we do not need to worry about our key being open on GitHub.
One Live Product 
Tags: oneliveproduct, challenge, developerlife, entrepreneurlife
Published: 2020-08-23 00:56:50

# One Live Product :helicopter: 

#### #OneLiveProduct is about the journey of an entrepreneur towards it's first product that can be leveled up as startup.  

![OneLiveProduct](https://user-images.githubusercontent.com/10295411/90968390-5878ce80-e509-11ea-967f-bcc42ef3ff60.png)

I was sitting at home and thinking, what am I doing? Does that has any worth? 

Due to curiosity, I started searching more about this topic and I saw so many people are doing great work in coding, writing, designing etc. But isn't their work deserves more. Or their should be something that shows their true presence and journey that they have covered or wants to cover as entrepreneur. 

**One Live Product** is about the same, let's give yourself some time and think, Is their any product that is your dream and you want to make it live to users. If yes, start posting about your product journey even if it is just a thought.

Might be people will love your concept and you may get help and support of any kind you want. Or, you may get your first few users. 

You can share anything you want towards your journey of your dream. But we cautious that you are representing your dream project. 

**Our AIM out of #OneLiveProduct is:**
- Build your dream product and make it Live. Start posting from the day you thought you just want to build your dream product. 

- You can take days to think and just post about whatever you feel like: how have you chosen the product you are developing, what are your learning, impact and growth, etc.

- It's not about updating on social media mandatorily, you may or may not  post daily but don't post irrelevant information like: I have completed 10 days of  #OneLiveProduct. These kind of information is not at all helpful and you may loose your actual users. Instead of posting like that. You can post about your thoughts on the problem, start some quiz, ask some questions or share some resources that are helpful, ask questions that are relevant to your product requirements  or share module update or ask users for review,  etc.

- Have some actual users on boarded and this journey will help you to connect with your initial users.
 
- Connect with other people following #OneLiveProduct to understand their journey and how they are handling problems of making a product live with actual users.
  
 **You can join [facebook](https://www.facebook.com/groups/632100480809375) and [linkedIn](https://www.linkedin.com/groups/8974208/) groups of #OneLiveProduct.**
 
 Always feel free to connect with me on any of the platform you love. 
 
**Stay Connected, Stay Save and Let's Build together.**
Setting up a Phaser 3 Project using the Matter Physics Plugin

Tags: javascript, phaser
Published: 2020-08-23 00:42:21

Phaser 3 is an open source JavaScript video game framework made to run in browsers.

It's easy to use, and if you know JavaScript, should be a breeze to start learning.

We're going to be setting it up with the Matter physics plugin, this will give us quick and easy access to collision detection and movement for our game objects.
___
Let's go through the basic setup that you'll need for basically any Phaser 3 project.

To start off, you're going to need to [import Phaser 3](1), either through their CDN or by importing it as a package. We'll also need to create a html file that has a `<div id="app"></div>` and imports your index.js. Whenever you want to run your game just use live-server to host your index.html file.

We're also going to need to import the Matter physics engine for Phaser 3. You can get it [here](2). This is going to let us get some cool physics up and running fast.

And now we need to setup our index.js file.
```javascript
import Phaser from 'phaser';
import PhaserMatterCollisionPlugin from 'phaser-matter-collision-plugin';
import GameScene from './GameScene';

const config = {
  width: 512,
  height: 512,
  backgroundColor: '#000000',
  type: Phaser.AUTO,
  parent: 'game',
  scene: [GameScene],
  scale: {
    zoom: 1
  },
  physics: {
    default: 'matter',
    matter: {
      gravity: { y: 0 },
    }
  },
  plugins: {
    scene: [
      {
        plugin: PhaserMatterCollisionPlugin,
        key: 'matterCollision',
        mapping: 'matterCollision'
      }
    ]
  }
};

new Phaser.Game(config);
```
Here we are just initially setting up the look of the Phaser game canvas. Most notably, we're setting the size and color. And then we're doing some initial set up on the Matter plugin. We want the y gravity to be 0 because we're going to be making a game in space, so we don't want any gravity.
___
Now let's set up our scene, which will handle all our game logic. In a more advanced game, you can have multiple scenes, but for ours, we only need one.
```javascript
import Phaser from 'phaser';

export default class GameScene extends Phaser.Scene {
  constructor() {
    super('GameScene');
  }

  preload() {
    // Called before the scene is created
    //  used to load assets
  }

  create() {
    // Called once when the scene is made
    //  used to do any initial setup of the scene
  }

  update() {
    // Called every game step
    //  used to update the game elements
  }
}
```
Notice that our scene is using `class` and is extending `Phaser.Scene` so we need a constructor method and we want to call super so that we can start using `this` to refer to this scene. We also set up a few more methods that are going to be useful for a scene.

Ok, now we're ready to start really diving into how Phaser 3 works. Check out my next article to see how you can really reinforce JavaScript fundamentals with Phaser 3.

[1]:https://phaser.io/phaser3/gettingstarted
[2]:https://github.com/mikewesthad/phaser-matter-collision-plugin
Passion for Technology
Tags: career, education, job
Published: 2020-08-23 00:20:34

[kodumaro]: https://kodumaro.cacilhas.info/2020/04/tech-passion.html
[medium]: https://medium.com/@cacilhas/passion-for-technology-d9ad99301cfc

From [Kodumaro][kodumaro], also in [Medium][medium].

![Input Magazine vol. 1](https://dev-to-uploads.s3.amazonaws.com/i/ncm9dxkcjx05ochwogzr.png)

I’ve seen a lot of job ads including the words “passionate about technology.” At first sight, it seems consistent, after all, who’d work with anything without enjoying it? The happier, the more productive, isn’t it?

However there’s a gotcha here.

Consistently and by definition, every tech-passionate workers has his/her technology to advocate for, and looks for issues that fit it. He/she isn’t interested in the problems, but in the solution. It’s called “**silver bullet**” – **there’s no way being passionate without the passion object**.

That mindset leads to more troubles than solutions.

By focusing on the problem, one can find the best solution for it. When technology’s on focus, it’s only possible to force the problem into the box, never really solving it.

Thus far, it’s way more productive not being tech-passionate, **focusing on the real issues** instead. Technology is a **tool** and shall be used by us, not the opposite.