teleren/devto huggingface dataset:
Implement OCR with React#2
Tags: beginners, opensource, tutorial, react
Published: 2020-10-16 16:42:31


 In the last [tutorial](https://dev.to/honorezemagho/implement-ocr-with-react-45k7) we have implemented the upload functionality.
In this tutorial we are going to add [Tesseract.js](
https://tesseract.projectnaptha.com/).

This article is divided in two parts. This is the  **part 2** , for the **Part1** click [**here**](https://dev.to/honorezemagho/implement-ocr-with-react-45k7)

# Requirements
- [Nodejs](https://nodejs.org/) version 8.10 or Higher.

First, we are going to install Tesseract.js package
```
npm install tesseract.js
```
After we are going to import **createWorker** function it in `src/App.js` file .

```
import {createWorker} from "tesseract.js";
```

inside the function **App()** we are going to add a worker and a method to recognize text inside an image.  

```
  const worker = createWorker({
    logger: (m) => console.log(m),
});

const ExtractTextFromImage = async (imageUrl) => {
  await worker.load();
  await worker.loadLanguage("eng");
  await worker.initialize("eng");
  const {
      data: {
          text
      },
  } = await worker.recognize(imageUrl);
  setText(text);
  await worker.terminate();
};
```

After we are going to define the state for image URL and text display. we are going to use **useState** and **useEffect** React Hook. First of all, we need to import **useState** from **react**.

```
 import React,{useEffect,useState} from "react";
```

After 
```
 const [ text, setText] = useState(null);

 const [imageUrl] = useState(null);

 useEffect(() => {
        if (imageUrl != null) {
            ExtractTextFromImage();
        }
    });
```

Now we are going to add a container to display the text from the image in ***React.Fragment*** bloc.
```
  <div className = "container text-center pt-5" >
          {text}
  </div> 
```
and update the text when processing the image.
```
const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded");
      setText("Recognizing...");
ExtractTextFromImage(meta.url);
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}
```
 
For the GitHub repository click [Here](https://github.com/honorezemagho/react-ocr)

This article is divided into two parts. This is the  **part 2** , for the **Part1** click [**here**](https://dev.to/honorezemagho/implement-ocr-with-react-45k7)
Code Climate Chrome extension
Tags: codequality, todayilearned
Published: 2020-10-16 16:39:37

Today while pairing with two colleagues I noticed that our Code Climate maintainability score and test score was showing on the Github pull request pages. Also, any code quality issues are shown inline which makes it really helpful when doing code reviews. Checkout the extension here:

https://chrome.google.com/webstore/detail/code-climate/phgahogocbnfilkegjdpohgkkjgahjgk?hl=en

Hope this helps someone :)
Great Documentation Examples:
Tags: discuss, beginners, csharp
Published: 2020-10-16 16:39:01

My programming journey started last year when I enrolled in a Computer Science course. This course used Java to teach computer architecture, program control structures, and functional decomposition. The textbook was terrific (also very expensive) and provided over 1,000 pages of valuable information. This was also my first experience using documentation as a learning tool and guide. 

![Alt Text](https://media.giphy.com/media/3LrK7Q7UhF5MnhZ5ja/giphy.gif)

I struggled to parse helpful information outside of the textbook. I’m a visual learner and need to see examples to understand a concept. With this being my first exposure to documentation, I assumed that all other documentation followed the same fashion. 

That assumption changed when I decided to look into C#. Now that I’m applying for jobs, I noticed that companies I was interested in were requiring C# experience. The first thing I did was head over to Microsoft to view the official C# documentation, and I was blown away. There is a getting started section, a video series, and multiple tutorials. It even has an in-browser .NET Editor and coding challenges for you to solve!

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

I’ve always heard that “Microsoft cares about their developers.” The C# documentation is proof. The C# 101 video series is a great example of this, as there are 19 videos in nice “bite-size” chunks. For a visual learner, this was a great way to get familiar with C# fundamentals. 

The best part about the C# documentation is that it has something for everyone. Microsoft has done a fantastic job of accommodating to the various learning styles. You can read, watch, listen, and even type out your code. Click on the link below to check it out for yourself: 

[C# Documentation Link](https://docs.microsoft.com/en-us/dotnet/csharp/)

So my question to you is, what are other great examples of documentation?
CSS Halloween Faces: Alien WIP
Tags: css, wip
Published: 2020-10-16 16:31:36



Here's an alien made using CSS and HTML. This branched off Cody Pearce's [Bender in CSS post](https://dev.to/codypearce/draw-and-animate-bender-s-face-with-css-e8p). I followed his tutorial and made Bender them made a some LEGO minifig faces. I decided since it's Halloween why not make some creatures here's my first an Alien. It is a work in progress. I figured if I share it will motivate me to continue.

![Green alien face. Alien has large round eyes with thin black pupils.](https://dev-to-uploads.s3.amazonaws.com/i/1bh2y5ptyouhkfvt79qf.png)

Here's the code for the eyes.

HTML
```HTML

	<div class="eyes_pair">
			<div class="eye_socket">
			   <div class="eyes">
	                     <div class="catchlight">
		                <div class="pupil"></div>
			      </div>
			    </div>
			<div class="eyes">
			    <div class="catchlight">
			      <div class="pupil"></div>
			    </div>
			</div>
		    </div>				
		</div>

```

CSS
```CSS

.eyes_pair {
	width: 400px;
	height: 150px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eye_socket {
	width: 375px;
	height: 125px;
	display: flex;
	justify-content: center;
}


.eyes {
	height: 145px;
	width: 145px;
	background: white;
	border-radius: 100%;
	border: solid 4px black;
	margin:-10px 10px 0px 10px;
	display: flex;
	justify-content: center;
	position: relative;
}

.pupil {
	width: 5px;
	height: 100px;
	margin-top: 5px;
	background: black;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}

```


A slightly different version where I added a color gradient as a `backrground-image` to the skin. I trying to see if I can add some scales. 

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

Have you ever made something cool with CSS? Share it.

-$JarvisScript git push
Code Kata: Opening Hours
Tags: challenge
Published: 2020-10-16 16:23:50

I was recently working on something for a client where they were going to provide opening and closing hours for each day of the week, and we were going to parse that in our UI.

The client decided to simplify the requirements, but I still think it would be interesting to see some people's solutions to the following challenge.

# The Challenge 

Given an object with the same  structure as this example:

```js
{
 Monday:{open: '09:00', close: '17:00'},
 Tuesday:{open: '09:00', close:'17:00'},
 Wednesday:{open: '09:00', close:'15:00'},
 Thursday:{open: '09:00', close:'17:00'},
 Friday:{open: '09:00', close:'17:00'},
 Saturday:{open: '10:00', close:'16:00'},
 Sunday:{},
}
```

Return a new array of strings which groups continuous days with same hours together, and keeps the rest seperate. 

If a day or group of days has no hours, return the day(s) followed by `Closed`

In the case of the above example, it would return the following

```js
[
 'Monday-Tuesday: 09:00-17:00'
 'Wednesday: 09:00-15:00'
 'Thursday-Friday':'09:00-17:00'
 'Saturday: 10:00-16:00'
 'Sunday: Closed'
]
```

## Challenge Criteria:
* Can work with any dates and times as long as they're in the expected format.
* Use whatever programming language you feel comfortable with

**I'm going to have a play around with this challenge myself and will post how I went about it in the comments, feel free to respond with how you did it.**
Ask Octopus - Can I use the date in the release number?
Tags: octopus, tutorial, devops
Published: 2020-10-16 16:09:27

---
title: Ask Octopus - Can I use the date in the release number?
published: true
description: You want to base your release versions on the current date. What do you do? Find out in this Ask Octopus!
tags: octopus,tutorial,devops
series: Ask Octopus
---

You want to base your release versions on the current date. What do you do? Find out in this Ask Octopus!

{% youtube ebN0wuzazVI %}

Do you have a question about how to use Octopus? Email advice@octopus.com and someone from our team will get you an answer. You might even see it in a future episode.

Join our community slack at https://octopus.com/slack
Hack-to-Learner Fest
Tags: hacktoberfest
Published: 2020-10-16 16:08:53

## What I Learned From Hacktoberfest
It was great contributing to other developers.

The following were the contributions made: 
1)Added: Longest Palindrome to IEEE-IIITSricity/DS-ALGO
2)Power Calculation to seeditsolution/cprogram
3)Added: Binary Tree Right View to madhabi8240/Algorithm-with-cpp
4)Print k distant node from given target node to IEEE-IIITSricity/DS-ALGO
5)Max XOR of two elements in array to IEEE-IIITSricity/DS-ALGO
6)Paytm_Question_Sort_Array_0_1_2 to codewithdev/C-plus-plus-Algorithms

 It felt amazing to solve problems that other devs were facing which can help other new aspiring people.
What I Learned From Hacktoberfest2020
Tags: hacktoberfest
Published: 2020-10-16 16:03:05

## What I Learned From HacktoberFest 2020

In the unprecedent of the COVID pandemic, I had been eagerly waiting for Hacktoberfest2020 to make various contributions to public repos on GitHub. 
Whilst making Pull Requests, I had learned to have effective communication with the Repo owners, understanding their requirements and catering to it. The repo owners were polite and guided me really well. 
Moreover I had earned amazing HacktoberFest 2020 schwags!!!
The schwags included T-shirt and lost of stickers!!

I thank the @digitalocean_staff to organize #HacktoberFest.
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-16 15:59:45

## Got introduced to the world of open source and collabration

<!-- At first I thought this will be hard for me to complete 4 pull request . Then my friends shared with me different programs organized by different tech communities , to help beginner to participate in hacktoberfest.After attended I was confident the i can do it . So what I have to say is that come of comfort zone and do somethig productive   -->
What is the Main difference between Page Object Model and Page Factory in Selenium? (Download Code)
Tags: testing, tutorial, selenium, beginners
Published: 2020-10-16 15:53:36

In this video, We are going to cover a very important topic for the Selenium interview and answers for experienced people, What is the main difference between Page Object Model and Page Factory in Selenium.

✅  Download Mind Map - https://sdet.live/2CYx
✅  Download Page Object Model with Page Factory : https://sdet.live/2CZ3

{% youtube EcjDrADDEfw %}

✅  What is Page Object Model?
Page Object Model (POM) is a design pattern, mostly used in test automation with selenium that creates Object Repository or OR for web UI elements(with Page object Classes. 

We use the Page Object model because it reduces code duplication and improves test maintenance.

There are two important things - 
There should be a corresponding Page Class
Page methods which perform operations on those WebElements

✅  Why Page Object Model?
Script maintenance 
object repository is independent of test cases
Provides Structure to Automation Framework

✅  What is Page Factory in Selenium?
Page Factory in Selenium is an inbuilt Page Object Model concept for Selenium WebDriver but it is very optimized. 

It is used for initialization of Page objects or to instantiate the Page object itself. It is also used to initialize Page class elements without using "FindElement/s."

Here as well, we follow the concept of separation of Page Object Repository and Test Methods. Additionally, with the help of PageFactory class, we use annotations @FindBy to find WebElement. We use initElements method to initialize web elements

@FindBy can accept tagName, partialLinkText, name, linkText, id, css, className, xpath as attributes.

✅  Download Mind Map - https://sdet.live/2CYx
✅  Download Page Object Model with Page Factory : https://sdet.live/2CZ3

✅ Want to become an Automation Rockstar  ? https://thetestingacademy.com/
-----------------------------------------------------


👪 Join our Community - http://bit.ly/learntesting2019
✅ Automation Community - https://thetestingacademy.com
🐦Follow us on Twitter  - https://twitter.com/itstechmode
📖 Like us on Facebook - https://www.facebook.com/scrolltest
🎤  Listen to our Podcast - https://anchor.fm/thetestingacademy
-------------------------------------------------------

#automationtesting #manualtesting #testautomation #thetestingacademy #scrolltest
🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅API Testing - 
https://www.learnapitesting.com

✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com
[ByteSize] RabbitMQ management UI and Nginx
Tags: rabbitmq, nginx
Published: 2020-10-16 15:37:14

---
title: [ByteSize] RabbitMQ management UI and Nginx
published: true
description: 
tags: rabbitmq, nginx
cover_image: https://miro.medium.com/max/940/1*0HvJ7oQ21H4D79n1QT188A.jpeg
---
*I originally posted this article on my own site [daveodea.com](https://daveodea.com) - stop by and say hi!*😀
***
Because of the nature of how RabbitMQ structures its API endpoints and for other reasons I won't get into here (hence Byte-size), I've previously struggled with getting the RabbitMQ management plugin UI available at a URL route controlled by Nginx. 

Hopefully, this will save you the same headaches I endured ...
Of course, you'll want to make sure you have both RabbitMQ and Nginx installed on your system.

Nginx configuration
Let's  firstly setup our nginx.conf file:
`sudo vim /etc/nginx/nginx.conf`

```bash
upstream rabbitmq {
        least_conn;
        server localhost:15672 weight=10 max_fails=3 fail_timeout=30s;
    }
```

Next, let's edit add location blocks for RabbitMQ:
`sudo vim /etc/nginx/sites-enabled/default`

```bash
location /rabbitmq/api/ {
            rewrite ^ $request_uri;
            rewrite ^/rabbitmq/api/(.*) /api/$1 break;
            return 400;
            proxy_pass http://rabbitmq$uri;
        }
        location /rabbitmq {
            rewrite ^/rabbitmq$ /rabbitmq/ permanent;
            rewrite ^/rabbitmq/(.*)$ /$1 break;
            proxy_pass http://rabbitmq;
            proxy_buffering                    off;
            proxy_set_header Host              $http_host;
            proxy_set_header X-Real-IP         $remote_addr;
            proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
```
Reload your Nginx config:
`nginx -s reload`

Ensure you have the RabbitMQ management plugin enabled:
`rabbitmq-plugins enable rabbitmq_management`

Now, you can head over to https://your-domain.com/rabbitmq/ and the RabbitMQ login screen will be available.

Thank you for reading,️
~ Dave
***

*Credit*:
Thanks to [lukebakken](https://gist.github.com/lukebakken) for inspiration I got from their gist on Github, original [here](https://gist.github.com/lukebakken/a6bae4759979b37ad2e87d48b47aa02e).
What is the best pathway for a 15 years old to learn Artificial Intelligence? 
Tags: python
Published: 2020-10-16 15:33:32

Hello everybody, my name is Talha Quddoos, and I am a 15 years old high school student who aspires to become a computer scientist. I have learnt HTML, CSS, JavaScript, PHP, jQuery, Python, C (from CS50), SQL (also from CS50), Selenium, Django, Django Channels, NodeJS and Express.js. I am learning React JS these days. I also want to go towards AI. What you think is the best pathway for me to follow? 
Your help would highly be appreciated.
µStyler
Published: 2020-10-16 15:30:27

<em>... A minimalistic CSS style injector, usable either as function or as template literal tag ...</em>

See it in action : [µStyle](https://flems.io/#0=N4IgtglgJlA2CmIBcBWATAOgJwGYA0IAzgMYBOA9rLMgNoAMeAjCgByMC6BAZhAobaAB2AQzCIkIDAAsALmGoFi5QTPgrkIADqCAPFMYA+bQAkAogBlzAeQAE2nQHp9RwdpAFC8BMRkRl-CTRUEABfPCFRcUkAK35FZVV1CQgwAAdyUhkbYkJCGy4KMBsAcgBXQhkATwRSYoBubQcHbP8snLyAXhtSeABHUogegAoyiur4WoBKBtdBJUEKmzGEGy72gANtGxsAI3IoSptgLe38hIBaQggAL3gkGyw6VIAPGe2Q7XWZ7U8ZABUUvByKUZEMhpNVgYllUEBgemByAA3eDgvA2Rh0THTdxELzwHx+BYaLBIHBYc50JB0ULhEAiMQaDDtHHzRIyDShdghIA)

```js
import css from 'ustyler';
// const css = require('ustyler');

const style = css`
  body {
    font-size: 90px;
  }
`;

setTimeout(() => style.remove(), 1000);
```
Hacktoberfest 2020 Experience
Tags: hacktoberfest
Published: 2020-10-16 15:29:22

## What I Learned From Hacktoberfest

Its been a fun ride over last few days, continuously writing codes and putting PRs. Celebrating open source is fun and contributing to some quality repos was really awesome. Glad that this month got to know a lot from the community and gave back my part in the same.
Also as a maintainer, the fest has been challenging but always been fun. Enjoyed reviewing codes, helping new developers and overall building something super cool. Looking forward to more such events.
HactoberFEST 2020
Tags: hacktoberfest
Published: 2020-10-16 15:18:21

Completed my first Hacktoberfest. Yay!😏
## What I Learned From Hacktoberfest.
### 1. What is a PR?
### 2. How to make a PR?
### 3. More features from GitHub. 

###### Did you notice that the "Fest" is capitalized in the heading? Yes, it was absolutely a fest(at least for me and my friends).   
Thanks for reading.   :)
My Hacktoberfest Journey
Tags: hacktoberfest, opensource, github, devjournal
Published: 2020-10-16 15:02:58

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

## What I Learned From Hacktoberfest

This is the first time I participated in Hacktoberfest . I have been contributing in open source from my sophomore year. I learned a lot of new skills from Hacktoberfest ,working with new developers on their projects helps me to improve a lot.This journey helps me to make new friends and work on some new projects for which I have to upgrade my skill set. It was a great experience. Being an open source enthusiast ,I am looking forward to participate in more events and contribute more to the community .

Skills I gained during this period -
- <u>Shell scripting</u> : I worked on a CLI based app to show the price of Cryptocurrency . I was assigned for the issue of Styling the CLI interface using commander Js.
![Screenshot from 2020-10-02 19-08-22](https://user-images.githubusercontent.com/47265493/94929633-fab1ac00-04e2-11eb-93e6-0d9eb049dd5d.png)

- <u>React and Nodejs</u> : I use this tech to work on a project about COVID-19 web app tracker using react . I worked with flexbox and improving the interface .

- <u>Python</u> : I contributed to many repository for Python , like code snippets for Python and automation scripts using selenium.
 
- <u>Finding Bug</u> : It is also an important part of open source projects . Finding bug in someone project helps to improve and secure the application .

I also made one of my project for Hacktoberfest ,It is a website for coding materials ,and many people contributed to it by providing their lessons and projects for the website . Have a look <a href="https://suubh.github.io/CodeClass/templates/index.html">here.</a>

<a href="https://suubh.github.io/Shubham/index.html">Lets connect !</a>
My HacktoberFest Experience
Tags: hacktoberfest
Published: 2020-10-16 14:51:26

Hacktoberfest proved to be a great month to get into Open Source. GitHub was filled with issues labelled Hacktoberfest that needed your help.And it was fun for me to contribute.   :)

I got an opportunity because of #hacktoberfest to be a part of this world-wide fest. I got to learn a lot and also to understand and debug projects of others in the community.It was a wonderful learning experience for me, to work on something like this.Also, I contributed in competitive programming repositories by others and it was a great way to improve my competitive programming skills as well as get to know more about open source contribution.

Thankyou @DigitalOcean
Starting open source contribution with Hacktoberfest
Tags: hacktoberfest, opensource
Published: 2020-10-16 14:43:32

## Begin a journay of open source with Hacktoberfest

I never do open source contribution. But when I read about hacktoberfest word, I serach and find that this is which I want from long time.

I found that there was a many other technology to learn. I get experiance of open source working method.And now I want to more contribution in open source projects.

Thanks **@Hacktoberfest** to give me this awasome kick-start of open source contribution.
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-16 14:36:27

## What I Learned From Hacktoberfest

I came to know about this event through youtube. Then I decided to participate in it. I want to make contributions to open source but was finding the right opportunity. Finally i got one. Thanks Hacktoberfest. I learnt never to miss any opportunity.
Blood Face Detector in Python, Tensorflow and OpenCV
Tags: python, opensource, machinelearning, datascience
Published: 2020-10-16 14:28:14

###Face recognition systems have been widely adopted for user authentication. One such application is to detect whether there is blood on the face of the person or not. It can be helpful to:

###1. To detect if any severe accident has taken place on a highway using traffic cameras and calling the ambulance automatically. 

###2. In sports such as Wrestling or Fighting to detect if any sportsperson is injured(bleeding) or not so that the match could be stopped and necessary safety precautions could take place.

###Similarly, there are many applications and use-cases of this classifier system which I have recently implemented using Python, Tensorflow and OpenCV.

##The source code link: [https://github.com/abhiwalia15/Face-Classification-into-Blood-No-Blood]

##You can find the article link to the blog post here: [https://waliamrinal.medium.com/blood-face-detector-in-python-part-1-machine-learning-and-deep-learning-classification-project-74aba7067e50]

###(#python #datascience #machinelearning #deeplearning #artificialintelligence #computervision)