teleren/devto huggingface dataset:
Guess What I Found
Tags: googlecloud, github, opensource, ai
Published: 2020-10-19 02:43:13

For a long time now, Google has provided the Google Assistant SDK free to use for developers.  This SDK runs on almost any platform, which is awesome!  However it's _headless_, which means it doesn't have an actual interface.  It's just code.  I knew it was only a matter of time before someone built out an actual client for it on Windows, Mac, or Linux.  Now it's happened - GitHub user [Melvin-Abraham](https://github.com/Melvin-Abraham) has started a smooth, consistent, and cross-platform interface for the Assistant!  Right now you have to sign in as a developer and there's no user friendly way to do it.  However, the project is well on its way to being a professional client, and its functionality is mostly complete.  I'm not a part of the project (yet!) nor have I contributed to it (also yet!), but I just wanted to share this useful project with you!  If you get a chance, definitely check it out and give it a shot.

{% github Melvin-Abraham/Google-Assistant-Unofficial-Desktop-Client %}
Introduction to Git & GitHub
Tags: github, git
Published: 2020-10-19 02:33:35

Hi👋, y'all welcome to my first article in my debut technical series, "Git & GitHub" 😊. 

In this series, we will be exploring Git and GitHub as they are vital tools to your success as a developer. 

To begin with, in this article, we will be defining the terms Git and GitHub. As a code-newbie, you probably have heard of the above at one time or another, but unsure of what exactly it means. Not to worry anymore, as we'll be tackling that right away. SO let's get kicking...

## What is Git? 
Git is a free, open-source version control system. In fact, it is the most widely used version control system. Most programmers, many times, interact with it daily, and definitely, you will too as you progress in your career as a developer. 
But, what do we mean by version control system? This is a means by which programmers track code changes during development of software. This helps us to see and understand what change was made and when it was made, such that, in the event, we are better able to track down bugs or revert to a previous version of the code if the need arises.      

## What is GitHub? 
GitHub is a cloud-based hosting service that lets you manage Git repositories. In other words, its a platform for developers to store their code and project development progress. That is to say, GitHub is designed to help developers manage Git repositories. Moreso, you can think of it as a portfolio for a developer to showcase his work. Virtually every developer has a [GitHub](https://github.com) account. If you don't already have one, I advise you go sign up right away! 



That's it for now, guys. Thanks for the audience!😊
Stay tuned for the next article where we'll be creating our very first GitHub repository.



If you enjoyed this article or found it helpful, be sure to give a thumbs-up. Feel free to drop a comment. And don't forget to click the 'follow' icon to get updated on every new article. 


You can also follow me on  [Twitter](https://twitter.com/_Joblyn_) and  [GitHub](https://github.com/Joblyn/).✌️
Lab 4: Fetch, Merge, Commit, Push, Pull. Just do them all
Tags: opensource
Published: 2020-10-19 02:14:28

Literally, I feel like the only thing I didn't use was rebase and that's coming in the next lab.

Anyway, for this week's lab, we were asked to implement a new feature for someone else's repo. Simple enough. The catch: No PRs allowed. We had to use branches to watch for updates, then merge them into our master branch before finally committing them to our github repo. Probably one of the most convoluted labs I've ever done. Git ready for the long haul (Too many puns, I'm sorry :D)

Anyway, the feature was an ignore feature that checks to make sure that the program skips all urls indicated inside the mentioned ignore_url file. I implemented this case for Mo (https://github.com/Metropass), strictly because he approached me asking if we could implement this feature for each other since we both did our release 0.1 in python. I figured, why not. The feature itself was not that difficult to implement, although I had to learn how click really worked since I dropped it for my release 0.1 while he went with it. Interesting library, I'll say.

The main issues I had were with setting up branches to watch the other. There were alot of times where my attempts to fetch would result in nothing actually being fetched. ![Failed fetch](https://dev-to-uploads.s3.amazonaws.com/i/e2f1iasjxe8kchni0buf.png) I also had merge conflicts that I had to resolve as well as this peculiar issue ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2il5k5bs3onjt5hshs7x.png)

It was a very unpleasant experience, especially whenever we had an issue that we had to resolve. Eventually, the feature I made worked to perfection and I had him fetch, merge, and push, which thankfully worked very quickly. 

This lab really made me value PRs alot more than I used to. The ability to see the merge conflicts as well as comment on what potentially needs to be changed is something I'll never take for granted ever again. While I believe I learned alot about the git options we needed for this week's lab, I just don't ever see myself going through this hell ever again, unless of course, my future workplace insists. I'll just pray that day never comes until then.

Next time, release 0.2 PR #2. Hopefully, it's less difficult than this lab was lol. Until next time!
OSD600 - Lab4 - Remotes and merges
Published: 2020-10-19 02:00:23

In Open Source Development at Seneca, [Lab 4](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/lab-4) "Using git remotes and merges… collaborative":  The requirements was to add a feature that ignores URL patterns to a peer’s [Release 0.1](https://github.com/Seneca-CDOT/topics-in-open-source-2020/wiki/release-0.1).  At first I did not think this was so difficult.  A class mate from class asked if I was interested in doing the collaborative part.  After making the [fork](https://github.com/strawberries73/OSD600-Release0.1) of the project, I created a [branch](https://github.com/strawberries73/OSD600-Release0.1/tree/Issue15).
I went to work on adding the feature.  I was not sure if I was on the right track.  I quickly realized that adding this feature was more difficult than I anticipated.  It kept printing the results twice and the ignore filter was completely not working.  I asked a good friend of mine to take a look and I asked my class mate to take a look.  We ended up spending hours on this and became frustrated that we could not figure this out.  Eventually I caved and asked my awesome professor.  I was able to fix some of the code but it still wasn’t filtering despite the help.  
Unfortunately I have been dealing with a family emergency this last week so my patience was thin at best.  When your father goes to the hospital, you end up doing homework all week until 2am kind of week… OMG is it reading week yet?  I really need some sleep!  I’m not so great at this late night stuff anymore and I’m sure I’m 15 to 20 years older then my class mates.  Those of you who are young and reading this, remember there is a point in time when your body hurts you back!  HaHa!  All joking aside, the solution needed to be found.  Thanks to my class mate’s obsessive determination to fix the problem…  huh, I thought I was the only one like that… 

Now that everything was fixed, it was time to use the command line.  I did struggle with learning how to clone but after the great professor we have showed me how simple it was, he told me that I would probably enjoy working from the command line but easier.  So this part for me was fun to learn. The first think was to create the remote from my class mate’s [fork]( https://github.com/joey2031/OSD600-Journey-on-rocky-trails ) and the name of the [branch]( https://github.com/joey2031/OSD600-Journey-on-rocky-trails/tree/issue-9). After fetching the name of my classmate I set up a tracking branch for the issue.  The file was added and then I created the [pull]( https://github.com/joey2031/OSD600-Journey-on-rocky-trails/pull/1) from the command line.  I created the merge and the pushed the origin to the master. The [commit](https://github.com/joey2031/OSD600-Journey-on-rocky-trails/pull/1/commits) was complete.

In the end, I am thankful for this experience and delighted to learn new things.  I have also learned that many of my peers experience similar struggles to myself and that I shouldn’t sweat it so much.  When I started this journey, I did not realize how challenging it would be.  However I do so love challenges.
My first DEV post!
Tags: beginners, javascript, css, codenewbie
Published: 2020-10-19 01:42:13

Hi, I’m Salah! I’m just starting off since January. I was in a bit of a dry spell, dealing with nerve damage. I’m doing much better since I started physical therapy, which I’m really grateful for. I was getting constant pinched nerves, numbness, back pain, and head pain. It was incredible scary and lasted a month and some change. Now, I’ve been able to start exercising(first time doing so in my life haha) and feel good.

I’m cleaning up some rust and getting back to a rhythm. I’m relearning CSS, HTML, and JavaScript(I was still learning it before I fell off, so not as proficient there).

I’m also beginning a free code camp with Leon Cole on the 20th which I’m really excited for. 

I’m hoping to make another post once the boot camp begins and further plan to document my attempts at getting into a job position in Web Development. I’ve not always been the most confident person but hopefully blogging my accomplishments and getting better can help me to build confidence.

Fully expect to be blogging by my lonely but to anyone who may come across this, thank you for reading & if you only scroll to this part, good luck if you’re starting off too! You got this, hope you the best.

Until the next post DEV! :)
Project folder structure
Tags: react, javascript
Published: 2020-10-19 01:33:00

There are so many ways to create a project folder structure.
You can find many examples of it with a quick search. Different structures solve different use cases. One that seems best to me may not seem adequate to someone else. But at the end of the day, the best folder structure is the one which suits your team’s use-case.

I am going to share the folder structure which we use in our organisation. 

```
- dist
- node_modules
- src
	- assets
	- js
	  - app
		- App.jsx
	  - modules
	  - index.js
	- styles
	- index.html
- webpack
- package.json
- package-lock.json
```

* `dist` is the location where final production-build code is present. Files under it should not be changed under any circumstances. This folder along with its content is automatically generated by webpack (or some other bundler you are using). This folder is also included the `.gitignore` so that no one commits this folder to git.
* `node_modules` is the directory where all kinds of dependency packages are being stored.  Whenever you run `npm install` , npm creates this folder. Same as `diet` there is no need to change the content of any file in this directory.
* `package.json` contains information regarding our project and all the packages used in out project.
* Whenever we do `npm install`, npm searches for `package-lock.json` (yarn.lock if you are using yarn) to install the dependencies. This file contains a json of all dependencies. This also contains all dependencies for the packages being used in the project. Ex. Suppose we are using a package called A. A may contain B and C as it’s dependencies. `package- lock.json` has all the information regarding packages and its corresponding dependencies.


Coming to the main part, all logics (or codes) are written in `src` folder.  It contains:

* assets
* js
* styles

As the names imply, `assets` and `styles`  contains images and css files respectively. The files may vary according to what you are going to use in the project. `styles` can contain css/scss/sass or combination of those. Same goes for assets.

`js` directory is further divided into `app` and `modules` .

*  `app` directory contains all common components, constants, app context or services.  
```
- app
	- components
	- constants
	- context
	- routes
	- services
```

* Same folder structure is followed for each module. Each module can have its own context i.e. Any component has access to app level context and its module level context.
AWS CodeBuild - Using Buildpacks to build Docker image
Published: 2020-10-19 01:27:56

AWS CodeBuild provides images for your CodeBuild stage. Standard way to build Docker image is to use *docker build* command.

Docker native commands are not only way to build images, and also not sometimes optimized. Here are several alternatives:
[Jib Maven](https://github.com/GoogleContainerTools/jib/tree/master/jib-maven-plugin) if you build your Java app using Maven
[Graal VM](https://www.graalvm.org/)
[Gradle plugin](https://plugins.gradle.org/search?term=docker)
[Cloud Native Buildpacks](https://buildpacks.io/)

So, what if you want to use one of those tools in CodeBuild?
The answer is — no problem, CodeBuild, is really flexible and you can insert your commands in *buldspecs.yml*
Let us see original file with *docker build*
![Default buildspec.yml](https://miro.medium.com/max/700/1*fGO9kHt1Zjm293DPAvUCIQ.png)

This is standard *buildspec.yml* — based on AWS Documentation

By modifying just 2 lines, you will now use “pack” command from [Buildpacks.io](https://Buildpacks.io).

Check lines 8 and 14 — it’s as simple as that :)

![Pack buildspec.yml](https://miro.medium.com/max/700/1*17r32cPEx2ehUy61AVv3hA.png)

Some notes:
* Both buildspec.yml files are available at [Github](https://github.com/virtiogroove/aws-helper-scripts/tree/master/CodeBuild)
* Do not use Google builder — it will fail. Heroku worked for me as I used Python app

![Buildpacks](https://miro.medium.com/max/700/1*T4t1qhQayHb2cltIb1NW_A.png)
-bash: ufw: command not found (ubuntu 18.04)
Published: 2020-10-19 01:13:17

**UFW** - Uncomplicated Firewall

Please note this tutorial is used in configuring the ufw for an ubuntu 18.04 server

1. Check whether ufw is installed or enabled by typing the following command : `sudo ufw enable `

2. If error still prevails install ufw by typing : 
   ` sudo apt-get install ufw `

3. Check status of ufw by typing : `sudo ufw status` 

4.If status show inactive type : `sudo ufw enable `

**NB** - after activating ufw ensure that ssh is enable to allow you to access your server through ssh.
Mi Primera vez en Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-19 01:09:22

## Mi experiencia en el Hacktoberfest

Fue una bonita experiencia colaborar en los proyectos, ver que mis PR fueron aceptados fue algo increíble, lo malo es que me toco esperar 14 días hasta que mis PR fueran aceptados y validos. Tenia miedo de no alcanzar la camiseta pero al final lo logre. Espero poder participar el siguiente año y seguir contribuyendo con la comunidad
Complex Shapes Part B (something I forgot to mention previously)
Tags: html, javascript
Published: 2020-10-19 01:07:02

---
title: Complex Shapes Part B (something I forgot to mention previously)
published: true
description: Create complex shapes with canvas api
tags: html5, javascript
series: Canvas API
//cover_image: https://direct_url_to_image.jpg
---

I want to add a quick addition to my previous post where I discussed creating a shape from a series of line segments like this: 

```
ctx.lineWidth = 3; // just making it a little more visible
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(100,100);
ctx.lineTo(20,200);
ctx.lineTo(100,200);
ctx.lineTo(200, 20);
ctx.lineTo(200, 200);
ctx.stroke();
```

<center>
	<img src="https://github.com/robotspacefish/blog-photos/blob/master/canvas_basics/continuous-line.png?raw=true
" alt="A line zig-zagging in different directions">
</center>

I forgot to mention that there is a way to write this using a 2 dimensional array so you don't have to repeat so much.

```
// set your points in a 2d array
const shape = [
	[20,20],
	[20,100],
	[100, 100],
	[20, 200],
	[100, 200],
	[200, 20],
	[200, 200]
];
  
ctx.lineWidth = 3;
ctx.beginPath();

// loop through each set of points
// if it's the first set (at index 0), `moveTo` that point,
// otherwise use `lineTo`
shape.forEach((p, i) => { 
  i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1])
})

ctx.stroke();
```
Python Zero to Hero - Ep.25 - Let's learn Django
Tags: python, django, livecoding, beginners
Published: 2020-10-19 00:42:04

---
title: Python Zero to Hero - Ep.25 - Let's learn Django
published: true
description: Today I started my journey learning Django by following the beginner tutorial at the official documentation. I made some discovery and it was fun.
tags: Python, Django, livecoding, beginner
---
Today I started my journey learning Django by following the beginner tutorial at the official documentation. I made some discovery and it was fun. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
How to get the difference between two arrays
Tags: javascript, node, vue, react
Published: 2020-10-19 00:40:03

Hey, everyone! how are you guys doing? :)

I recently passed through a situation where I needed to get the difference between two arrays. 

Messing around with arrays is a kind of tricky sometimes so I decided to share a simple solution for this specific case.

Let's declare two simple arrays:

```js
 const initialNumbers = [1, 2, 5, 7, 3]
```
and 
```js
 const initialWithMoreNumbers = [1, 2, 4, 7, 9, 5, 3]
```

Alright, now we must find the intersection between them.

Arrays have some great methods provided by ES6+ features like **filter**.

With __Array.filter()__ we can loop through an array and make some logic for every item in the array.

```js 
let result = initialWithMoreNumbers.filter(number => number)
```

the code above will return every item in a new array, but we can do more than this, right?

we can verify if an item of the first array is NOT included in the second one like this:

```js
let result = initialWithMoreNumbers.filter(number => !initialNumbers.includes(number))
```

after return, our result will be:

```js
console.log(result) //[4, 9]
```

### **And how about array of objects?**

If you need to compare keys in objects inside arrays, you just need to add a new method called __array.every()__ to loop again and search what you need:

```js
const people = [{name: 'cesar', age: 23}]
const morePeople = [{name: 'cesar', age: 23}, {name: 'kevin', age: 26}, {name: 'pedro', age: 25}]

let result2 = morePeople.filter(person => people.every(person2 => !person2.name.includes(person.name)))
```

__array.every()__ will loop through an array and return each element that passed on the test provided. In this case, if the name of the person in the second array __does not__ contains the name of the person in the first one.

You can try this out by yourself with the age field! 


Hope it helps! see ya!
Leetcode: FizzBuzz
Tags: javascript, 100daysofcode
Published: 2020-10-19 00:17:47

Today, I will be solving the famous FizzBuzz code challenge on Leetcode. The instructions are as follows.

#Instructions

For numbers with multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. The twist is, they want you to return the string representation of each output stored in an array.

#Overview

```
const fizzBuzz = n => {
    // Code goes here
};
```

#Let's play

###Step 1: 

I created 2 variables. One to handle a counter in a while loop, and one to store fizz buzz values as strings.

let count = 1 //Starting at 1 because we only want to check from number 1 to n

```
let results = []
```

###Step 2:

Start the while loop

```
while(count <= n) {
        if(count % 3 === 0 && count % 5 === 0) {
            results.push("FizzBuzz")
        } else if(count % 3 === 0) {
            results.push("Fizz")
        } else if(count % 5 === 0) {
            results.push("Buzz")
        } else {
            results.push(count.toString())
        }
        count++
}
```

In this while loop a few things are happening. We set a condition in the while loop to do what ever it is in the while loop block as long as the current count is less than n (n = any number). 

Then we setup our if else block. The first one is checking to see if count divided by both 3 and 5 is equal to 0. We should do this first to avoid having only Fizz or only Buzz print out when it see's that a count is divisible by ONLY that number. So remember, it should be FizzBuzz when count is divisible by both 3 and 5. If it is we push the string "FizzBuzz" into the results array.

In the else if's we are checking if count is divisible only by 3, and then only by 5. In that case either "Fizz" or "Buzz" will be appended to the array.

In the event that count isn't divisible by either 3 or 5 we'll stringify the current count and then append it to the array. For example => 1. 1 is not divisible by 3 or 5 so we'll just push 1 as a string ( "1" ).

Finally we return the results array. So after all is good we have...

```
const fizzBuzz = n => {
    let count = 1
    let results = []
    while(count <= n) {
        if(count % 3 === 0 && count % 5 === 0) {
            results.push("FizzBuzz")
        } else if(count % 3 === 0) {
            results.push("Fizz")
        } else if(count % 5 === 0) {
            results.push("Buzz")
        } else {
            results.push(count.toString())
        }
        count++
    }
    return results
};
```
🚀 Rocket11ty: A simple 11ty template with Halfmoon CSS
Tags: showdev, jamstack, 11ty, netlify
Published: 2020-10-19 00:04:04

I used the blog system from [11ty/eleventy-base-blog](https://github.com/11ty/eleventy-base-blog) because I'm really not that good with working with 11ty collections. 

**Features:**
- 🦐 Automatic HTML Compression (can save more than 20% bandwidth)
- 📕 NetlifyCMS for writing blog Posts
- 🌙 Dark/Light mode and theme provided by [Halfmoon](https://www.gethalfmoon.com/)
- 📊 Google & Facebook Analytics (only added if you add a tracking ID because, privacy matters)
- ⚡ Built-in caching so your users don't have to load pages over and over again.
- 📱 Mobile Friendly design
- 💻 Built-in PWA, all you have to do is change a few values and it's up and working!

**Why?**
I've seen many Blogs/websites that are:
- Too overpriced 
- Websites that over-bloated with widgets, tracking, ads, etc.

So, I made Rocket11ty. A combination of [Halfmoon](https://www.gethalfmoon.com/) CSS and [11ty/eleventy-base-blog.](https://github.com/11ty/eleventy-base-blog)

URLs:
[Netlify Demo](https://rocket11ty.netlify.app/)
[GitHub Repo](https://github.com/aboutDavid/rocket11ty)