teleren/devto huggingface dataset:
JavaScript Integration with Docker and Kubernetes
Published: 2021-06-25 18:17:02

In this blog, we will be creating a CGI based Web Application which can serve all the functionalities of docker and Kubernetes running on Linux OS.

Prerequisites:
1. Apache web server should be configured first.
2. Docker needs to be set up on the linux machine for us to access from the Host OS.
3. Disable firewall in the Linux OS for any blockage.

We can run all the docker commands and it will obtain access to linux OS as shown, 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xfut5opc872379wve0c.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47gkpltieoxgsvmv0xyg.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xacb127vm7yt5fvvfvsi.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsgyfuwj49pp7p2a8cvl.png)

As shown above, we are accessing the linux machine from our host machine using CGI scripts that needs to be configured in order to access the linux OS.

Javascript code to access CGI script from Linux:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld3rzmca5366blsve0qc.png)

Advantage of using CGI scripts - 
We do not need to use SSH to access the linux OS.
Using CGI we can easily access our linux machine.
Top 5 Speech Recognition Open-Source Projects and Libraries With Most Stars on Github
Tags: python, machinelearning, datascience, computerscience
Published: 2021-06-25 18:01:49


https://medium.com/analytics-vidhya/top-5-speech-recognition-open-source-projects-and-libraries-with-most-stars-on-github-d705408b834

Speech recognition, also known as automatic speech recognition (ASR) is a capability that enables a program to process human speech into a written format.

Speech recognition technologies such as Alexa, Cortana, Google Assistant and Siri are changing the way people interact with their devices, homes, cars, and jobs. The technology allows us to talk to a computer or device that interprets what we're saying in order to respond to our question or command.

In today’s article, we are going to review the top five options for the best open-source Speech Recognition projects which have no less than 5000 stars on Github and can assist in your next project.

Here is the link to the article: Top 5 Speech Recognition Open-Source Projects and Libraries With Most Stars on Github

#deeplearning #machinelearning #datascience #AI #python #github #speechrecognition #opensource #projects #learning #education
TDD e testes com Mocks
Tags: tdd, mockito, java, braziliandevs
Published: 2021-06-25 17:55:45

#TDD

Test Driven Development é uma maneira de desenvolver o seu código onde o teste é criado antes da alteração/criação do código. Isso é feito para que o desenvolvimento tenha a garantia de sua funcionalidade.

O teste deve ser a primeira coisa a ser feita para que o código seja desenvolvido em volta desse teste para que, ao final do desenvolvimento, o mesmo esteja funcionando, provando que o código funciona.

Uma boa maneira de realizar estes testes é utilizando o Mockito.

#Mockito

Mockito é um framework de mocking que é frequentemente usado em
testes de unidade. Mockar um objeto é simular o seu comportamento. Ao criar esta simulação, fica possível realizar um teste sem precisar chamar um objeto complexo, chamamos apenas o mock.

###Exemplos

É necessário iniciar os mocks antes dos testes.

```
@Before
public void setup(){
	service = new RentService();
	RentDAO dao = Mockito.mock(RentDAO.class);
	service.setRentDao(dao);
	spcService = Mockito.mock(SPCService.class);
	service.setSpcService(spcService);
}
```

Estou simulando as interfaces RentDAO e SPCService com o Mockito.

RentDAO: `public void save(Rent rent);`
SPCService: `public boolean isNegative(User user);`

Com isso podemos realizar o teste chamando o mock.
```
@Test
public void rentTest() throws Exception {
	//given
	User user = UserBuilder.aUser().now();
	List<Movie> movies = Arrays.asList(MovieBuilder.aMovie().withValue(5.0).now());
	
	//when
	Rent rent = service.rentMovie(user, movies);

	//then
	error.checkThat(rent.getValue(), is(equalTo(5.0)));
	error.checkThat(DataUtils.isSameDate(rent.getRentDate(), new Date()), is(true));
	error.checkThat(DataUtils.isSameDate(rent.getReturnDate(), DataUtils.obtainDataInDifferenceInDays(1)), is(true));
}
```
Neste teste, um usuário e um filme foram iniciados e o serviço de locação foi mockado.

####Conclusão

Desta maneira, é possível testar se o serviço de locação funciona sem fazer, de fato, uma locação.
Isso é útil para evitar, por exemplo, idas desnecessárias ao banco de dados, basta mockar o objeto que faz a chamada.

Caso esteja interessado, aqui está o repositório no GitHub com mais testes mockados: https://github.com/pedro-henrique-arruzzo/poc/tree/main/MockTests
Has anyone taken these web-scraping courses?
Tags: education, learning, scraping, javascript
Published: 2021-06-25 17:22:03

I've been wanting to figure out web-scraping for awhile - my team is often working on content ideas that could be absolutely amazing if we could scrape content from a massive number of sources, but no one on my team has quite mastered this yet. I was hoping to get some expert opinions on these [web-scraping courses](https://www.scraperapi.com/blog/best-web-scraping-courses/) to see which would be the best to sign my tech team up for. Any thoughts?
Paid Market Research Interview Opportunity 
Tags: webdev, javascript, html, css
Published: 2021-06-25 17:12:42

HubSpot's marketing team would like to interview professional web developers to gather information about their skillset, career path, and any educational resources they use. Participants will be compensated for for time.

What does participation look like?

If you are selected to participate, one of our researchers will schedule an hour long call. During this time you will be asked a number of questions about your background and experience as a developer. Your name and answers will only be used internally within HubSpot.

Who are we looking for?

Full-time professional web developers
Front-end, back-end, or full-stack experience
Developers who work for a single employer, an agency, or are self-employed
Must be comfortable answering questions in depth via a call
How to Participate:
Complete the following form and we will reach out if you are a good fit for this project: https://forms.gle/ZsN46KjyrxTVQZBb7
Thank you for your time!
Learning Python - Week 3
Tags: python, learning
Published: 2021-06-25 17:02:28

This week I continued to learn the control flow in Python from last week. What I want to focus on in this post is accepting the input from a user. Having a user input information is very easy, all you need is the input function and as the argument for the function you pass in the text or information that you want to see in the console so that the user knows what information they need to put. Here is an example of how to use the input function:
```
name = input('Enter your name: ')
print("Hello there " + name.strip()) # strip removes any white spaces

age = input('Enter your age: ') # input returns a string not an integer
print(name.strip() + "... you are " + str(age.strip()) + " years old")
print(name.strip() + "... you will be " + str(5 + int(age)) + " in 5 years")
```
The name variable accepts an input of name and the age variable accepts the input of your age. When you run the program it will say:
`Enter your name: `
You will enter your name and press enter. The strip function at the end is a way to remove the white space meaning if you happen to add a lot of spaces before you enter your name, it will remove it. Next is the age, when you put your age in it is not an integer, it is a string. So when you press enter it will say 
`[your name] you are [your age] years old` and then it will say `[your name], you will be [add 5 to your age] in five years`.
This was a quick practice and this is what I really like to do when it comes to programming, having a user experience. I am sure I will be able to have a more advanced way of having a user experience in the future but for now this is what I know. I know this is a short post but it was for a good reason. Week 4 will be a whole new section focusing on packages, modules and object oriented programming. It’s still a fun time learning this and I will talk to you guys next week!
https://www.fiverr.com/ahmedali709/place-and-optimize-google-adsense-ads-on-your-wordpress-site
Published: 2021-06-25 16:43:53

https://www.fiverr.com/ahmedali709/place-and-optimize-google-adsense-ads-on-your-wordpress-site

About This Gig
What will you get my Fiverr gig?

STANDARD & PREMIUM & BASIC

Increase your website CPC (Depends on Your Keyword CPC)
Optimize your AdSense Google Code on Worpress Website
Place Adsense Ad on Wordpress,Wix,Blogger
Create niche related Ads
Create Google Ads Account (if Need)
Create better CPC
https://www.fiverr.com/ahmedali709/create-a-website-with-wordpress
Published: 2021-06-25 16:42:38

https://www.fiverr.com/ahmedali709/create-a-website-with-wordpress

Auto upgrade issues

Maintenance mode freeze

Problems with plugins

Problems with themes

Exceeding the Memory Limit

Plugin problems causing a WordPress blank page

 Fix syntax error in WordPress 

Fix WordPress  500 error,503 error,403 error

 White screen of death
What are OOP concepts in Java.
Tags: oop, java, programming
Published: 2021-06-25 16:34:05

This blog explains you about the Object Oriented Concepts (OOP) in Java in a understandable way in a simple manner. I hope this blog will clear your doubts on the concepts.

Java is a pure object oriented programming (OOP) language. It deals with object creation using classes. The classes has attributes and properties inside it.

Need of OOP Concepts:
OOP concepts are needed to solve a large problem by breaking it into smaller problems. Through solving the small problems, it is possible to build a productive complex program.
There are some terms which we need to know before moving to OOP concepts.

Class:
It is a collection of objects. Class act as a blueprint of a house where objects can be created using it by considering it as a template.

In Java name of the class(first letter) starts with capital letter.

class Animal{
//variable declaration
private String name;
private int …more at https://thavarajahpraveena.medium.com/oop-concepts-in-java-f0eb16ce498b
More web dev snippets
Tags: react, beginners, css, javascript
Published: 2021-06-25 16:33:14

Last month I posted a JS snippet for [verbose logs](https://dev.to/omarbenmegdoul/a-verbose-log-snippet-for-easier-debugging-gb6) -- it's easier to debug when the log contains the origin filename, line number, type, and name of whatever you're trying to log. Several classmates found it useful, so here are some others I've gotten good mileage out of.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a8snlldfkbbqwfz824q.gif" alt="A gif demonstration of what the snippet does and how to use VSCode snippets">

I improved on the verbose log snippet with these two. 
- The first is shorter and therefore less likely to take up vertical space on the screen. 
- The other omits the `typeof` operator since it's not needed in the majority of cases -- this also lets you log multiple arguments.

```json
 "Labeled log to console": {
		"prefix": "llog",
		"body": [
			"console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}' <\\${typeof ${2:expression}\\}>`,${2:expression});"
		],
		"description": "Logs filename, rough line called, name, type, and value of expression "
	},
```
Shorter version with no `typeof` - use with `slog` then tab:
```json
  "Short log to console": {
		"prefix": "slog",
		"body": [
			"console.log(`❗ $TM_FILENAME:$TM_LINE_NUMBER '${2:expression}'`,${2:expression});"
		],
		"description": "Logs filename, rough line called, name, and value of expression "
	},
``` 

## React component (💅)
While working on my final project for Concordia's bootcamp, I found myself needing these. 

Here's a React component snippet. It also imports styled-components and adds a `<Wrapper>` element inside the component -- I needed that, you might not.

```json
	"React component": {
		"prefix": "rreact",
		"body": [
			"import React from 'react';",
			"import styled from 'styled-components';",
			"const ${1:ComponentName} = ({${2:myProps}\\}) => {return (",
      "\t<Wrapper>",
      "\t\t'I'm a placeholder'",
      "\t</Wrapper>",
      ")};",
      "const Wrapper = styled.div``",
			"export default ${1:ComponentName};"
		]
	},
```
## Flexbox
90% of my flexboxes look like this and I got tired of typing them. `flex-direction:column` may not be what you need, but since `row` is the default it's easier to delete that line when you don't need it than to add it when you do. Depending on what you're doing, this might go in your JS or CSS snippets.

```json
"Flexbox boilerplate": {
  "prefix": "fflex",
  "body": [
    "display:flex;",
    "flex-direction:column;",
    "justify-content:center;",
    "align-items:center;"
  ],
  "description": "flexbox to center content"
},
```
🎬Login & Registration Form Using HTML & CSS & JS✨
Tags: html, css, javascript, login
Published: 2021-06-25 16:27:52

Hey Devs, today we're going to make an awesome **login and registration form** with  sliding animation just by using HTML and CSS and little bit of JavaScript.

---
{% youtube I5_T547tHf0 %}

---
**🏆 Recommended Projects 🏆**
🎬 Neumorphism Login Form | HTML & CSS 
➤https://youtu.be/QWh0S-3D7uY
🎬 Animated Sidebar Menu with HTML & CSS 
➤ Watch: https://youtu.be/QPZrQ_xPVs4 
🎬 Amazing Social Media Buttons Hover Effects | HTML & CSS 
➤ https://youtu.be/P9pi4hq7BBA 
🎬 Animated Login Form | HTML, CSS & JavaScript 
➤ Watch: https://youtu.be/ogNwc45qHKo 
🎬 Slider Sign In / Sign Up Form | HTML CSS Vanilla JS 
➤ Watch: https://youtu.be/Wz5THk0-Y1s 

---

🛴 Follow me on: 
👉https://www.facebook.com/WebdevMadeEasy

---
Login & Registration Form Using HTML & CSS & JS
Published: 2021-06-25 16:20:06

https://youtu.be/I5_T547tHf0

---

In today's episode, we're going to make an awesome login and registration form with  sliding animation just by using HTML and CSS and little bit of JavaScript.

---
🏆Recommended Videos🏆 
🎬Neumorphism Login Form | HTML & CSS 
➤https://youtu.be/QWh0S-3D7uY
🎬Animated Sidebar Menu with HTML & CSS 
➤ Watch: https://youtu.be/QPZrQ_xPVs4 
🎬Amazing Social Media Buttons Hover Effects | HTML & CSS 
➤ https://youtu.be/P9pi4hq7BBA 
🎬Animated Login Form | HTML, CSS & JavaScript 
➤ Watch: https://youtu.be/ogNwc45qHKo 
🎬Slider Sign In / Sign Up Form | HTML CSS Vanilla JS 
➤ Watch: https://youtu.be/Wz5THk0-Y1s 
---
🛴 Follow me on: 
👉https://www.facebook.com/WebdevMadeEasy
Docker web application
Published: 2021-06-25 16:02:57

 <style>

 body {
	background-image: url("whale.gif");
	margin-left:150px;  
	margin-right:250px
  }

  h1{
   margin-top: 30px;
   margin: 1em 0 0.5em 0;
	 font-weight: 600;
	 font-family: 'Titillium Web', sans-serif;
	 position: relative;  
	 font-size: 36px;
	 line-height: 50px;
	 padding: 47px 15px 15px 30%;
	 color: #141314;
	 box-shadow: 
		 inset 0 0 0 1px rgba(38, 39, 41, 0.4), 
		 inset  0 0 5px rgba(52, 54, 56, 0.5),
		 inset 0px 0 30px rgb(17, 17, 17);
	 border-radius: 0 10px 0 10px;
	 background:  url("images (1).png") no-repeat center left;
   }
   
  #screen {
   background: rgb(8, 8, 8);
   width: 90%;
   height: 500px;
   border-style:solid;
   border-color: #474545;
   margin: 0 auto;
   padding: 10px;
   opacity: 0.9;
   overflow:inherit;
 }
 #textBox {
	   width: auto;
	   color: #f2f3ed;
	   border: none;
	   box-sizing: border-box;
	   font-size: 20px;
	   vertical-align: middle;
	   background-color: #000;
	   opacity: inherit;}

    
    #injected {
      padding-left: 10px;
      font-size: 18px;
      color: white;
      text-align: justify;
      margin-top: 5px;
    }
  
    #injected ul {
      list-style: none;
    }
  
    #injected li,
    th,
    td {
      padding-right: 45px;
      padding-left: 25px;
      padding-top: 7px;
      text-align: left;
    }
  
    #userInput {
      margin-top: 30px;
      padding: 10px;
    }
  
 </style>
   
 
 <div id="container">
  <div id="bar"></div>
      <div class="header"><h1> Docker Web Application </h1></div>
    </div>
    <div id="screen">
      <div id="userInput">
      <input type="text" value="root@skn:~$" id="commandprompt" size="30" readonly="readonly">
        <input type="text" id="textarea"  placeholder="Enter the command here" name="x" size="70"
          autofocus>
        <button onclick="lw();">RUN</button>
      </div>
      <pre>
      <div id="injected">OUTPUT COMES HERE..</div>
      </pre>
    </div>
  </div>


  <script>

    function lw() {
    alert("request");
    var xhr = new XMLHttpRequest();
    xhr.open("GET","http://17.132.48.54/cgi-bin/docker.py?x="+ document.getElementById("textarea").value,true);
    alert("sending request");
    xhr.send();
    xhr.onload =  function()  {
    document.getElementById("injected").innerHTML = xhr.responseText ;

    }
    }
    </script>
Finding shortest social connection path
Tags: algorithms, bfs, python
Published: 2021-06-25 15:53:35

Human connections are like networks, I know someone, and they know someone else and so on, It could be friendship, relationship etc. 

Let's assume that I need to find the shortest social connection path from me to Queen of England (Well maybe :p).

We represent this in a graph format:
```
{
 'ali': ['mo'],
 'angela': ['queen', 'anna'],
 'anna': [],
 'dave': [],
 'dog': ['liea', 'dave'],
 'jimbo': [],
 'lee': [],
 'liea': ['lee'],
 'me': ['mum', 'dog', 'teacher'],
 'mo': [],
 'mum': ['angela', 'liea'],
 'queen': [],
 'teacher': ['ali', 'jimbo']
}
```

Now lets find the shortest social connection path:

```
def find_path(start, end, graph, path=[]):
    path = path + [start]
    if start == end:
        return path
    if start not in graph:
        return None
    for node in graph[start]:
        if node not in path:
            newpath = find_path(node, end, graph, path)
            if newpath:
                return newpath
    return None
```

Output:
```
>>> find_path("me", "queen", graph)
['me', 'mum', 'angela', 'queen']
```

This solution is loosely based on breadth-first search graph algorithm to find the shortest path.
From UNIX command to PowerShell command
Tags: unix, powershell
Published: 2021-06-25 15:29:53

ลอง map command จาก os ตระกูล UNIX ที่ใช้ในชีวิตประจำวันมาเป็น PowerShell ของ Windows

## mkdir

สร้างโฟลเดอร์

UNIX:

```
$ mkdir powershell_tut
```

PowerShell:

```
PS> New-Item -ItemType "directory" powershell_tut
```

## cd

เปลี่ยนโฟลเดอร์

UNIX:

```
$ cd powershell_tut
```

PowerShell:

```
PS> Set-Location powershell_tut
```

## touch

สร้างไฟล์

UNIX:

```
$ touch a.txt
```

PowerShell:

```
PS> New-Item a.txt
```

## cp

Copy ไฟล์จากต้นทางไปปลายทาง

UNIX:

```
$ cp a.txt b.txt
$ cp -r dir_a dir_b
```

PowerShell:

```
PS> Copy-Item a.txt b.txt
PS> Copy-Item -Recurse dir_a dir_b
```

## rm

ลบไฟล์หรือโฟลเดอร์

UNIX: 

```
$ rm a.txt
$ rm -r dir_a
$ rm -rf dir_b
```

PowerShell:

```
PS> Remove-Item a.txt
PS> Remove-Item -Recurse dir_a
PS> Remove-Item -Recurse -Force dir_b
```

## mv

ย้ายไฟล์หรือโฟลเดอร์

UNIX:

```
$ mv dir_b dir_c
```

PowerShell:

```
PS> Move-Item dir_b dir_c
```

## ls

List ไฟล์หรือโฟลเดอร์นั้น ๆ

UNIX:

```
$ ls
```

PowerShell:

```
PS> Get-ChildItem
```

## man

ดู manual ของโปรแกรมนั่น ๆ

UNIX:

```
$ man cp
```

PowerShell:

```
PS> Get-Help Copy-Item
```

## curl

Request data จาก url ที่ระบุ

UNIX: 

```
$ curl http://example.com
```

PowerShell:

```
PS> Invoke-RestMethod -Uri http://example.com
```
JSConfetti could be downloaded from CDN 🎉
Tags: showdev, javascript, webdev, frontend
Published: 2021-06-25 15:29:52


Hi everyone!

Wanted to share, that my open-source library [JSConfetti](https://github.com/loonywizard/js-confetti) is now could be downloaded from CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
```

After that, `JSConfetti` class could be accessed as global variable, and you can fire confetti by calling method `addConfetti()` on JSConfetti class instance

```js
const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()
```

JSConfetti works without any config, but could be configurable, check out [documentation on GitHub](https://github.com/loonywizard/js-confetti)

Links: [GitHub](https://github.com/loonywizard/js-confetti) | [NPM](https://www.npmjs.com/package/js-confetti) | [Library Website](https://loonywizard.github.io/js-confetti/) | [CodeSandbox Playground](https://codesandbox.io/s/confetti-vanilla-js-r5kqi)
Testeo de eventos en Laravel
Tags: laravel, php, testing
Published: 2021-06-25 15:15:33

👉🏼 Hoy vamos a ver como podemos **probar eventos en Laravel**, el ejemplo esta basado en el registro de usuario de Laravel Breeze.

En este vídeo vamos a ver como: 
✅ Probar el disparo del evento
✅ Probar el Listener

🔥 Accede al video para todos los detalles.

{% youtube bRepbcPtlQU %}
8 Amazing Instant Button Hover Effect
Tags: html, css, webdev, beginners
Published: 2021-06-25 15:07:26

Hello,

Today I have written post about the 8 Amazing Instant Button Hover Effect With using HTML & CSS. This is a very useful effect you can use that in your code. I hope you like this also comments about your thoughts.
For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

#####Checkout recent post : 
{% post https://dev.to/nikhil27b/amazing-button-animation-using-html-js-2ga1 %}

{% codepen https://codepen.io/NikhilBobade/pen/ZEePZrg %}

{% instagram CPn2eUwBTUp %}
Main Branch #3
Tags: programming, developer, comics, softwareengineering
Published: 2021-07-09 16:54:58

---
title: Main Branch #3
published: true
date: 2021-06-25 15:05:41 UTC
tags: programming,developer,comics,softwareengineering
canonical_url: https://blog.shiftleft.io/main-branch-03-533b6cb24137
---

#### The Most Secure

![](https://cdn-images-1.medium.com/max/1024/1*8A3KkjcJ1JnN1oEJBbka3Q.jpeg)

Main Branch is a comic strip for developers produced by James Gilbreath, Jason Green, and Vickie Li.

* * *