teleren/devto huggingface dataset:
Day 4 ! Learning JavaScript
Tags: 100daysofcode, beginners, codenewbie, javascript
Published: 2020-10-02 18:10:54

I'm graduated as a bachelor degree in marketing management but due to pandemic I decided to get out of my box and learn coding which fun (airquotes) lol. For me I think coding need to be learn by anyone mostly in this generation because we are surrounded by computers!!. I know the journey is hard but I KNOW IT IS WORTH IT !
Build Fearlessly Podcast - Episode 3: Learning how to program (from a 12 year old)
Tags: serverless, podcast, fauna
Published: 2020-10-02 18:10:07

Publish Date: Sep 30, 2020

---

In this episode of the Build Fearlessly podcast, Fauna’s frontend developer, Ryan Harris, talks to the very talented 12 year old, Rishab Kattimani and his father Sanjay. Rishab has not only used his time in quarantine the past few months to get more acquainted with programming, but has also given back to the developer community through his YouTube channel, Rishab Teaches Tech, where he’s created video tutorials for other beginner programmers.

[LISTEN TO PODCAST EPISODE](https://fauna.com/blog/build-fearlessly-podcast-episode-3-learning-how-to-program-from-a-12-year-old)

##Show Notes
**Tools discussed:**
* [FaunaDB](https://fauna.com/)
* [Python](https://www.python.org/)
* [OpenCV](https://opencv-python-tutroals.readthedocs.io/en/latest/index.html)
* [Fauna’s Python Driver](https://github.com/fauna/faunadb-python)
* [Face_recognition](https://pypi.org/project/face-recognition/)
* [Raspberry Pi](https://www.raspberrypi.org/)
* [Amazon Web Services](https://aws.amazon.com/)

**Other resources:**
* [Rishab Teaches Tech (YouTube Channel)](https://www.youtube.com/channel/UC6OrQk8WsnCOR1OezlUU9zQ/featured)
* [Scratch programming](https://scratch.mit.edu/)
* [Facial recognition app (video)](https://www.youtube.com/watch?v=1tYCK4Yh8rQ&t=5s)
* Heroes:
--- [Elon Musk](https://twitter.com/elonmusk)
--- [Tanmay Bakshi](https://www.linkedin.com/in/tanmay-bakshi-b15012a1/)
How to setup TinyMCE + React
Tags: react
Published: 2020-10-02 18:05:48

Recently I had to setup TinyMCE with React in a project. I hope this post could help you. I had some issues trying to do this, and would like to share with you how I did it.

First of all, you need to download the packages for tinymce and the wrapper for reac:

`npm install tinymce`
`npm install --save @tinymce/tinymce-react`

And then you are able to start. In order to have TinyMCE self hosted available, you need to import in your React component all the packages that you are going to use.
```
 import React, { useState } from 'react';
 import 'tinymce/tinymce';
 import 'tinymce/icons/default';
 import 'tinymce/themes/silver';
 import 'tinymce/plugins/paste';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/image';
 import 'tinymce/plugins/table';
 import 'tinymce/skins/ui/oxide/skin.min.css';
 import 'tinymce/skins/ui/oxide/content.min.css';
 import 'tinymce/skins/content/default/content.min.css';
 import { Editor } from '@tinymce/tinymce-react';

 const App = () => {
   const [contentEditor, setContentEditor] = useState();
   const handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
     setContentEditor(content);
   }

   return (
     <Editor
         initialValue="<p>This is the initial content of the editor</p>"
         init={{
           skin: false,
           content_css: false,
           height: 500,
           menubar: false,
           plugins: [
             'link image',
             'table paste'
           ],
           toolbar:
             'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help'
         }}
         value={contentEditor}
         onEditorChange={this.handleEditorChange}
       />
     );
   }

 export default App;
```
On the `init` prop you have to set `skin: false`, and also `content_css: false`, so you can get the css you have downloaded from the packages.

To use the component as a controlled component, use the `onEditorChange` prop instead of the `onChange` props, and you need to have a state to set the content on it.

That is it, I hope you find this article useful. Thanks for reading!

References:
https://www.tiny.cloud/docs/integrations/react/
https://github.com/tinymce/tinymce-react
New Engineering and Product Leadership @ Fauna
Tags: serverless, fauna
Published: 2020-10-02 18:02:52

Author: Eric Berg
Publish date: Sep 22, 2020

---

I am super excited today to welcome two new leaders to the Fauna executive team who bring a deep excellence in their respective functions and successful track records defining, operating, and scaling enterprise-class services that both delight developers and make enterprise customers wildly successful.

Hassen Karaa joins as our Vice President of Product. Hassen and I worked together for several years at Okta where he played a critical role in scaling the products and company as Okta went from an early stage startup to a public company with $650M in revenue. Prior to that, he spent several years as a Senior Program Manager at Microsoft working on a variety of enterprise software products.

Tyson Trautmann joins as our Vice President of Engineering. Tyson has a great background for Fauna with experience both building large scale platforms for internal developers during his time at Riot Games and most recently was a GM at AWS where he was responsible for the enterprise developer offerings AWS CodePipeline and AWS CodeDeploy. He also spent some formative years early on in his career working on large scale distributed systems at Microsoft.

Enterprise developers are rapidly adopting serverless technologies to underpin their next generation of applications and very much expect their database to be serverless as well. Fauna has a huge opportunity ahead of us as we continue to deliver on our vision of the [data API](https://fauna.com/company) that enables developers to simplify code, reduce costs and ship faster.

One of my highest priorities after joining Fauna was to recruit world class leaders for our product and engineering functions to compliment the team that was already on the ground. The engineering organization has built a very impressive technology platform and as we have seen a tremendous amount of interest in Fauna from developers and enterprise organizations. The addition of Hassen and Tyson will really help us accelerate our innovation engine as we move forward.

So please join me in welcoming Hassen and Tyson to the Fauna community and please check out our [press](https://www.businesswire.com/news/home/20200922005250/en/Fauna-Expands-Executive-Team-With-Enterprise-Talent-From-AWS-and-Okta) release if you want to read more and hear directly from them as to why they are also so excited about the road ahead.
A TIP TO IMPROVE ACCESSIBILITY IN YOUR SINGLE PAGE APPLICATION
Tags: ux, webdev, a11y
Published: 2020-10-02 17:50:17


Navigating in a multi-page application is done by refreshing the webpage. In this case, the screen-reader announces to the user when the page is done loading. However, In single-page applications, navigation is done via JavaScript which makes the screen-reader unaware of the navigation.

The solution is easy. When the navigation is done, just set the focus on the `<h1></h1>` element on the loaded page. The screen-reader will read the text content of the `<h1></h1>` element, hence making the user aware that the page has finished loading.
Day 1 | Getting started with exercism.io
Tags: 100daysofcode, ruby, relearn
Published: 2020-10-02 17:43:44

Greeting, Dev.to crew

I had started to relearn with my the most confidence prog language like **Ruby** 😎

![carbonize-code](https://dev-to-uploads.s3.amazonaws.com/i/f0cuc3wt28fe4p96qt22.png)

So this guy advised me to try on [https://exercism.io](https://exercism.io)

{% user narze %}

Steps of this day

1. install `exercism` via [Homebrew](https://brew.sh)
2. Do `exercism download --exercise=hello-world --track=ruby`
3. Done
4. Post this on Dev.to!

![hello-world-done](https://dev-to-uploads.s3.amazonaws.com/i/ujy07xk5uy2k5vlwszmt.png)

Cheer me 🎉
NOTE IT DOWN About Python Programming Language #2
Tags: python, help, computerscience, codenewbie
Published: 2020-10-02 17:27:39

NOTE:Python Programming 
.
Concatenation in Python:
.
- If you add strings with numbers you will get error, but if you write number
under quotes then it will consider as strings (number will become string),
then you can add string with number.

.
Explained By DDSRY.
job sarkari exam
Tags: education
Published: 2020-10-02 17:25:05

Sarkari Exam Provide you all Latest online Form 2020 i.e banking IBPS Po Clerk Sbi Po Clerk, UPSC all Exam schedule Online Form information Only on Sarkari Exam SarkariExam all upcoming sarkari job Sarkari result, Railway exam details ssc cgl exam result time to time notice, all state latest and  sarkari work government jobs 2020 with all board exam i.f madhya pradesh board sarkari disha 
<a href="https://sarkariexama.com/"><strong>Sarkari Exam</strong> </a>Provide you all Latest online Form 2020 i.e banking IBPS Po Clerk Sbi Po Clerk, UPSC all Exam schedule Online Form information Only on Sarkari Exam<a href="https://sarkariexama.com/"> <strong>SarkariExam </strong></a>all upcoming sarkari job Sarkari result, Railway exam details ssc cgl exam result time to time notice, all state latest and  <a href="https://sarkariexama.com/sarkari-work/">sarkari work</a> government jobs 2020 with all board exam i.f madhya pradesh board <a href="https://sarkariexama.com/sarkari-disha/">sarkari disha </a>
lab 2: first PR
Tags: opensource
Published: 2020-10-02 17:21:13

To create a pull request, I need to find an issue on repos. Two new features were added to this [project](https://github.com/1jz/WISA), and the [pr address](https://github.com/1jz/WISA/pull/10#issue-496292834).

```go
// add new features to support -v --version and HTTP timeout.
flag "github.com/spf13/pflag"

filenamePtr = flag.StringP("file", "f", "", "filename input (required)") // filename input
verbosePtr = flag.BoolP("version", "v", false, "verbose output")         // (error logs)


client := http.Client{
		Timeout: 5 * time.Second,
	}
resp, err := client.Head(link)

```

I first add an issue to the repo, asked the author about the new feature. When I got the permit to work with the new feature, I forked the repo, and cloned it to my local machine. After adding the new feature, I merged it into the master(main) branch, then pushed it to the remote repo.

Github is pretty smart about the pull request process. When my forked version is one commit ahead of the original repo, Github gives me a choice to do a pull request.

When an issue was created, you can link the issue to a specific PR. The issue will be closed if we close the PR.
margin and code awkward behavior
Tags: html, css, margin, border
Published: 2020-10-02 17:10:43

What is happening here, it seems as if all the words are in a single line.

Because this is not the case with div etc.
This is happening only with the code tag
<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
		.ex{
		      border-left:5px solid green;
		}
		    code{
		        margin: 20px;
		      
		    }
		</style>
	</head>
	<body>
	    <div class="ex">
		<code>
            what happens here <br>
            whatever why not happening here <br>
		    whatever why not happening here <br>
		    whatever why not happening here <br>
		    whatever why not happening here <br>
		  
		</code>
		  </div>
	</body>
</html>
ShadowGas UI
Tags: blockchain, react, javascript
Published: 2020-10-02 17:08:54

I have finished the UI (Light Station) for my ShadowGas smart contract. The UI is in ReactJS and contains the Store and Transfer features of the contract.

After cloning the repo, setting up your environment, and deploying the contract, to run the UI in your local environment: 

```sh
cd client

yarn install

yarn start
```

This will open up a new web page in your default browser at *localhost:3000* and you should be taken to the *Connect* page of the UI.

---

**Connect**

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

*Connect with your MetaMask wallet*

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

*After accepting the connection via MetaMask pop-up, press the confirm button*

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

***Wrong Network***

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

*Default network is Kovan, change it in the `client/src/App.js` file (see below)*

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

**Balances**

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

**Store/Transfer**

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

*Verify transaction in MetaMask*

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

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

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

*Balances automagically updates*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k2jblwd5qxg1o0hgdbvm.png)

***Transaction Failed***

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

---

Check out my other posts on the ShadowGas smart contract:

Store - https://dev.to/traylorboy/shadowgas-store-40m9
Transfer - https://dev.to/traylorboy/shadowgas-transfer-59jg
Trade - https://dev.to/traylorboy/shadowgas-trade-1a5a
1.1.0 - https://dev.to/traylorboy/shadowgas-v1-1-0-3100

Repo: https://github.com/TraylorBoy/ShadowGas

I am working on the Trade feature for the UI, after that is finished v2.0.0 will be released!
Easy Web Development Internship Guide
Tags: webdev, javascript, html, css
Published: 2020-10-02 17:03:29

Step by step guide for securing an internship for Newbies - 
 
1. Learn basic Html, CSS, Javascript & React
2. SQL or MongoDB
3. NodeJs 
4. Git CLI
5. Build a small full-stack project
6. Apply for internships

Note - You don't have to master everything.
Make Easy Enemy AI | Finite State Machine in Unity
Tags: enemy, ai, unity3d, games
Published: 2020-10-02 16:46:11

In this video I'll teach you how you can create Enemy AI for your game using Unity Animtor to create a Finite State Machine,
We will make a basic AI that will patrol the scene and if it will detect our survivor the AI will change State and will start to chase us

Enjoy this Enemy AI / Finite State Machine tutorial!

{% youtube 9aU53qgc08E %}

> Like this post? 
> Consider Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Or Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
> You can also follow me on [Twitter](https://twitter.com/elbaz_eran)
CHAIN OF RESPONSIBILITY
Tags: oop, softwaredev, devops, webdev
Published: 2020-10-02 16:40:49

I have not written a piece concerning software development in a while, combining writing and coding can be a herculean task. oh dear!!!!

This article is about one of my favourite design patterns “THE CHAIN OF RESPONSIBILITY”.

According to Wikipedia “chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects.”

For us to really get and understand the importance of COR in software development, we need to create a problem that COR will help us solve effortlessly.

if(user != authenticated){
    //tell user he/she can’t see this page
}
else{
    //show user the page
}

Is that a bad approach? HELL NO!!!! Remember the KISS rule. No price for writing complicated codes, so keep it simple if it simple.

We deployed our client’s web app, and everything is fine and dandy. 4 months down the line, we got a call from our client “Hey, please I need you to work on the secret page, I don’t want users from Nigeria to be able to view that page”. Your response was okay I will get it done. 

Boom you edited your secret page code to something like this;

if(user != authenticated){
    //tell user he/she can’t see this page
}
if(user.IP == “nigeria”){
    //tell user he/she can’t see this page
}
else{
    //show user the page
}

Still not bad, I guess. You updated the application and your client pleased with the new change. In less than two weeks your ever-demanding client called again. Please I don’t want free users to be able view the secret page. In your usual manner you ran to your secret page code and altered the code to this;

if(user != authenticated){
    //tell user he/she can’t see this page
}
if(userIP == “nigeria”){
    //tell user he/she can’t see this page
}
if(user.status == “free”){
    //tell user he/she can’t see this page
}
else{
    //show user the page
}

At this point, your code is beginning to look like a mess, apart from that you also violated the second rule of the SOLID principle(Open and Close Principle) from the very time you added condition to check if the user’s region is not restricted. You couldn't care less anyway; it is working that is all that matter to you. 

Your Oliver Twist client called again this time you are getting fed up, the client does not want to show page to users that have not spent up to a year regardless of their location and status.

BOY OH BOY!!! Let us do it your usual way

if(user != authenticated){
    //tell user he/she can’t see this page
}
if(user.IP == “nigeria”){
   //tell user he/she can’t see this page
}
if(user.status == “free”){
    //tell user he/she can’t see this page
}
if(user.registrationDate < “1 year”){
    //tell user he/she can’t see this page
}

else{
    //show user the page
}

Now take a look at your code… Are you proud of it?  Can you put this up in an interview? I guess not.
Don’t bury your head shame, because in the next article we will solve this same issue using COR which will result to a clean, reusable and extensible code.
How To Run VS Code In Your Browser

Tags: javascript, vscode, chrome, codeserver
Published: 2020-10-02 16:29:00



If you like VS Code then you'll surely like this brand feature on VS Code!
Because yes! You can actually run VS Code on your browser!
And here is how!

First you need to check this repo : https://github.com/cdr/code-server

This is the official repo to get VS Code in your browser, once you get there you'll just need to copy & past those two command in your command prompt(You need to be administrator or sudo depending on what OS you're currently using).

First Copy & past this command: curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Now that you have code-server installed you need to copy & past this one: curl -fsSL https://code-server.dev/install.sh | sh

And after all that you're ready to go!
You just need to tape the following : code-server.

That will generate a log for you and you should search for this line right here:  HTTP server listening on http://127.0.0.1:8080.

Copy & past that URL in your browser and see the magic!


This link will take you to a YouTube video that talks about it:
https://youtu.be/gB1Pg5ge06g
Automation with Open Source Applications #hacktoberfest2020 
Tags: hacktoberfest, api, opensource, automation
Published: 2020-10-02 16:26:13

Join Quickwork to celebrate #hacktoberfest2020 on the 17th of October’20 at 11 am and learn "Automation with Open Source Applications".

Registration is free and open to everyone who is interested in learning about how to use APIs to build automated workflows with open source applications.

Register now: https://lnkd.in/ePmpW55

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean and DEV
hacktoberfest2020 #OpenSource #automation #workflows #API #DeveloperCommunity #github #digitalocean
Automation with Open Source Applications #hacktoberfest2020
Tags: automation, api, opensource, hacktoberfest
Published: 2020-10-02 16:22:47

Join Quickwork to celebrate #hacktoberfest2020 on the 17th of October’20 at 11 am and learn "Automation with Open Source Applications".

Registration is free and open to everyone who is interested in learning about how to use APIs to build automated workflows with open source applications.

Register now: https://lnkd.in/ePmpW55

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean and DEV

#hacktoberfest2020 #OpenSource #automation #workflows #API #DeveloperCommunity #github #digitalocean
Any Update On This?
Tags: github
Published: 2020-10-02 16:20:19

👆🏽 That's the most annoying message in a 'GitHub issues' ⛓️.

How about suggesting or contributing or just leaving teams/devs alone to prioritize issues as they see fit on their packages.

If we wrote a script that scraped and removed all of these 'issue comments' on GitHub who knows how much disk 💾 space would be saved...and how much we all have to scroll down discussions to finally see any relevant responses/updates/answers.

I can't imagine that those types of 'comments' get prioritized by open source maintainers. If anything, I might consider de-prioritizing those issues that have this comment showing up more than 2x! 😱 👼🏽

Thanks for reading my rant!
Why don't you use Ansible ?
Tags: ansible, devops, linux, aws
Published: 2020-10-02 16:20:16

Hi **Shellers** (people who use only shell command)

Many thanks for your support in my last post :
https://dev.to/simerca/trick-merge-a-js-array-with-1-line-of-code-not-as-simple-c6a

Today I want to ask you one question.

## Why you don't use Ansible ?

For the newbie, Ansible is a tool to set infrastructure with configuration file, the most efficient thing about it it's the powerfull to setup many server with one command line. 

exemple:

You should deploy 1 server with a webserver configuration, and another server with a bdd configuration.

Without ansible you will connect to the ssh tunel inside each server and set the command line associated to her configuration. 
**BUT !**

If you do deploy :

Webserver:
- 3 servers:
-- 1 prod
-- 1 preprod
-- 1 backup

- 3 databases:
-- 1 prod
-- 1 preprod
-- 1 backup

You will connect to the 6 servers and set manually the configuration ?
*Too repetitive...*

So ..
**Ansible** with an **Inventory** can do this for you exemple

*Inventory.ini*
```ini
[webservers]
server1-prod
server2-preprod
server3-backup
# Should be IP or domain

[databases]
db1-prod
db2-preprod
db3-backup
# Should be IP or domain
```
*Here is the set of all your servers ip or domain.*

Now you can easy execute a command with an **Ansible Playbook**.

## Ansible Playbook Exemple

Playbook.yml
```yaml
---
- name: Ansible Playbook Exemple
  host: webservers
  tasks:
    name: Update apt package registry
    command: apt-get update

    name: Install PHP
    command: apt-get install php

```

if you launch this command:
`ansible-playbook playbook.yml -i inventory.ini -v`

You will Update Package Registry and install PHP on all webservers at the same time. 

**Awesome no ?**

So go learn and code your infrastructure 💪

more docs at https://docs.ansible.com/
How we designed our part-time design + development curriculum
Tags: design, webdev
Published: 2020-10-02 16:16:30

[perpetual.education/how-we-designed-our-curriculum](https://perpetual.education/how-we-designed-our-curriculum)

{% vimeo 459620509 %}

We didn't count them - but here's the books and the order of _things_ and our thought process.

---

Join our [mailing list](https://perpetual.education/newsletter/) if you want to follow along as we build the school.

[Get paid to match us with great students](https://perpetual.education/get-paid-to-match-students/).