teleren/devto huggingface dataset:
Extract characters from image using tesseract.js (OCR)
Tags: javascript, html, ocr
Published: 2021-01-21 18:39:24

Hello 👋🏻.

Welcome to my first post here,So in the past couple of years i readed many posts in this website and i feel it's very useful to share informations with other and have differents opinions about many tech subjects.
My name is Alaa ,I am a web developer and a 'Webmaster' graduated from the Faculty of Economics and Management of Nabeul and a 2nd year computer science engineering student specializing in WEB technologies at the Private School of Engineering and Technologies (Esprit).
What is OCR ? Well ,it's an algorithm that we use to extract characters from a photo where we teach the algorithm to know the shape of a character in pixels prospective.
We gonna use tesseract.js (OCR) package to extract the words from an image and a file contain the data (characters shape) to use it for the character recognition.
**To run the tesseract.js properly you should run the .html file that we gonna make on a server not on local.**
1. Create a HTML file with the name **index.html** 
```
        <!-- the tesseract javascript file -->
        <script  src = "js/tesseract.min.js" ></script>

        <script>
		console.log("Processing");
                Tesseract.recognize(
				"OCR.png", 
				"eng",{
  workerPath: "js/worker.min.js",
  langPath: "langs-folder/",
  corePath: "js/tesseract-core.wasm.js",
}).then(function(result){
                    
					
                    console.log(result.data.text);

                    
                   // alert(result.data.text);
                }).finally(function(){
                    
                   
                });
        </script>
```
2.Create a directory in your root named **js** and put the js files :
Download the files : https://github.com/geekalaa/OCRJS/tree/main/js
3.Create a directory named 'langs-folder' and download the data files : https://github.com/geekalaa/OCRJS/tree/main/langs-folder
**The global lang directory : https://github.com/tesseract-ocr/langdata**
4.We gonna use an image for the test : https://github.com/geekalaa/OCRJS/blob/main/OCR.png
### Execution :
![Sans titre-1](https://dev-to-uploads.s3.amazonaws.com/i/8iuubhgz0d8413ygkrsj.png)

I used the same script with more advanced features in my online tool try it : [Character Count](https://texttools.topvoce.com/character-count/)
Great GitHub Profiles
Tags: github
Published: 2021-01-21 18:14:39

Details matter - these days your GitHub is a type of resume.  Show your work off effectively.  

I created a short course with best practices on LI_L 'Create great GitHub Profiles'

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

As is typically with most of my LI_L courses, I created a companion GitHub Repo with even more information about this topic as well - [link](https://github.com/lynnlangit/great-github-profiles)

What does your GitHub profile look like? Here's [mine](https://github.com/lynnlangit)...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g11jg9t6d5evsx94vco4.png)
Is there any way to show gitlab contribution in github? 
Tags: git, gitlab, github, help
Published: 2021-01-21 18:12:12

I recently switched company where they are using gitlab instead of github & I'm contributing to project with company's email id to gitlab.
Now in future when my work will be done I'll loose access to project & I think there will no way to see that I had contributed to some project.
And since I'm contributing in gitlab my github contribution chart started to show as blank. 

So I there any way I can show contribution of gitlab on GitHub? 

Or any other better idea?
How Do You Take Notes?
Tags: codenewbie, javascript, beginners, notetaking
Published: 2021-01-21 18:03:51

 When I started my self-learning boot camp experience, I lived for Google Docs. That was my go-to for note-taking. I have so many documents for every course, and I even used Google Sheets to create spreadsheets of terms, definitions, and examples. 

So here is what I would do. I would copy and paste all of the information into the Google Docs editor, and that was my note-taking. I did this method from the beginning of HTML to JavaScript.

I thought I was so smart. I thought that by doing this, I would have access to these notes digitally, anywhere and everywhere I could go. Which is true!

### But here is where I messed up. 

Since I copied and pasted all my notes, I wasn't retaining any of that information. I was literally skating through the courses, not applying what I had just learned, and now I am facing the consequences of doing so. 

I am relearning JavaScript because I did not comprehend it the first time. And if I am honest, I am reviewing some CSS coursework as well, due to copy and pasting notes. 

### So now, I am taking notes the old fashioned way: Pen and Paper. 

Almost as good as peanut butter and jelly.
Yeah, it takes more time writing out all of that information, but it is paying off now. I am actually retaining more information writing it out than I was before. 

Either if you are using Pen and Paper, or digital software, I think the main takeaway is to **Never Copy and Paste. PERIODT!** :)
Introducing, Meteor Cloud
Tags: javascript, opensource, devops
Published: 2021-01-21 18:00:29

Hi everyone,

As you’ve probably seen, **Meteor Cloud** is now live! This release is the evolution of our commercial offering. We’re so thrilled to share it with you!

Here’s the breakdown of some of the changes. Instead of having a separate space for hosting, open-source, and performance monitoring, we’re now unifying the product offering for Galaxy Hosting, Meteor APM as well as Atmosphere and merging these into one centralized dashboard. You’ll see these changes reflected in your Dashboard after login.

We’re even more excited to announce the addition of some key features, a lot of which have been requested by the community for some time. Take a look at some of the changes and updates below:

- A new Meteor Cloud Dashboard
- Easy access to Galaxy Hosting, APM, and Atmosphere
- Return of the Free Plan
- Free MongoDB Shared Hosting
- Github Sign-in and Sign-up

To see all of these changes, you can sign in (or sign up) with your existing Meteor credentials to access your new dashboard. Additionally, if you already have an account, your app’s functionality and hosting configuration has not changed and will function as normal upon sign-in.

As always, please let us know if you have any questions or comments. We’re always happy to help and appreciate any feedback. Thank you for being on this journey with us - we’re very thankful to have such an active, engaged, and helpful community behind us.

-Meteor Team
Pesar por membros da comunidade da UFAM
Tags: ufam, covid19
Published: 2021-01-21 17:54:27

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

Lamentamos o falecimento de três docentes da Universidade Federal do Amazonas:
- [Ivaney Machado Teixeira](https://www.ufam.edu.br/ultimas-noticias/2139-nota-de-pesar-docente-do-icsez-ivaney-machado-teixeira.html)
- [Marcelo Menin](https://www.ufam.edu.br/ultimas-noticias/2143-nota-de-pesar-docente-do-icb-marcelo-menin.html)
- [Ágida Maria Cavalcante dos Santos](https://www.ufam.edu.br/ultimas-noticias/2145-nota-de-pesar-docente-da-faced-agida-maria-cavalcante-dos-santos.html)

Os três docentes morreram entre os dias 19 e 21 de fevereiro. Notícias locais indicam que [Ivaney](https://www.parintinsamazonas.com.br/?q=279-conteudo-191403-professora-de-artes-da-ufam-iva-tai-morre-de-coronavirus-no-hospital-jofre-cohen), [Marcelo e Ágida](https://www.portaldoholanda.com.br/manaus/ufam-perde-mais-dois-professores-nesta-quinta-feira) morreram de COVID.

Eles tristemente se juntam a [outros membros da comunidade acadêmica da UFAM vitimados pela COVID-19](https://ufam.edu.br/memorial-ufam).

Atualização em 27/01/2021: [9 professores do IFAM também morreram de COVID](https://amazonasatual.com.br/com-9-professores-do-ifam-mortos-pela-covid-docentes-querem-aulas-so-apos-vacina/).
Debugging Spring Security
Tags: security, spring, bloggolf, todayilearned
Published: 2021-01-21 17:53:57

Spring Security is hard to debug and hard to test. Make your life easier with significantly better log output by using `debug = true` in the `EnableWebSecurity` annotation:


```java
@EnableWebSecurity(debug = true)
public class CustomConfig extends WebSecurityConfigurerAdapter {
	// your config here
}
```

Don't use this in production!
Force include classes in critical CSS
Tags: css, javascript
Published: 2021-01-21 17:43:22

[Critical CSS](https://github.com/addyosmani/critical) build by [Addy Osmani](https://twitter.com/addyosmani) is a useful library that extracts and inlines critical-path CSS in HTML pages.

In the documentation page, there are a lot of configurations available _but_ they are not the only ones! 😏

Critical CSS uses as its engine [penthouse](https://github.com/pocketjoso/penthouse) which has in turn a lot of configuration options. One of them, is `forceInclude`.

`forceInclude: [...]` description from docs 📚:

> Array of css selectors to keep in critical css, even if not appearing in critical viewport. Strings or regex (f.e. ['.keepMeEvenIfNotSeenInDom', /^\.button/])

For instance, if we want to add a cta class injected via JS and not available in DOM nodes when the critical path is generated, we have to configure our critical CSS options like this:

```javascript
critical.generate({
  base: './',
  src: 'template-homepage.html',
  css: ['production/css/style-1.css' , 'production/css/style-2.css'],
  ....
  penthouse: {
    forceInclude: ['OPTIONAL-CLASS-HERE'],
  },
})
```
Adding Typescript to my existing Node + Express API - Part 1 - Set up
Tags: typescript, node, express, api
Published: 2021-01-21 17:40:39

This is some documentation I am writing mostly for myself and   for anyone who might want to add typescript to their own projects.

The project we are adding typescript to can be found at [https://github.com/tintindas/quotes-api](https://github.com/tintindas/quotes-api)

## 1. Making a new branch

Always make a new branch before screwing around with code that already works. Learnt this the hard way.

`git checkout -b add-typescript`

## 2. Adding typescript and required types as dev dependencies

The typescript compilers and the types of the libraries used in our project need to be added as developer dependencies so that we have access to all the type definitions we require.

```
npm install -D typescript @types/node @types/express @types/mongoose @types/cors
```

## 3. Make a tsconfig.json file

If you have typescript globally installed run 
`tsc --init`
else run 
`npx tsc --init` 

## 4. Edit tsconfig.json

Edit the outDir and rootDir properties in the tsconfig file. 
Set the rootDir to be the directory where all your logic is stored. 
The outDir is the destination where the typescript transpiler puts all the files vanilla javascript files produced after transpilation. 

```
"outDir": "./dist",                         
"rootDir": "./src",   
```
I named my input directory **src** and the target directory **dist**

Set the include property to be **src** or whatever you have named your rootDir if there are typescript files you do not wish to be transpiled outside of the rootDir folder.

How my tsconfig.json file looks like

```
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",                         
    "rootDir": "./src", 
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}
```

## 5. Create src directory and move all of your logic into it.

Anything outside of the src folder will not be put into the dist folder which will be our final production code.

## 6. Change extension .ts

Change the javascript files into typescript files by changing all the extensions to .ts.

---

This was the setup part of the project. VSCode should be screaming at you right now. Don't worry we will fix that in next part.

---

If you liked this post consider, 
- checking out my projects at [https://github.com/tintindas](https://github.com/tintindas)
- following me on twitter [@tintin_das](https://twitter.com/tintin_das)
Generate Barcode in the Browser Javascript  & Tailwind
Tags: html, css, javascript, codenewbie
Published: 2021-01-21 17:24:12

Generate Barcode in the Browser Javascript  & Tailwind

demo == > https://codepen.io/Bilal1909/full/vYXMEKG

Snippets:·

Html Part 
<img src="https://i.postimg.cc/cJrjhfHZ/carbon-1.png">

Js Part
<img src="https://i.postimg.cc/qqyg3tnx/carbon-2.png">

<img src="https://i.postimg.cc/QCQxM2G6/screenshot-codepen-io-2021-01-21-22-21-03-501.png">
How to make a modal window on a PowerApp screen
Tags: powerplatform, m365, tipsandtricks
Published: 2021-01-21 17:05:04

This is a cross-post from [here](https://homol.work/blog/powerappmodal20201223).

> Modal windows and pop-ups are a staple of applications. Ever just needed to quickly make one in your PowerApp?

Here is a quick and easy step-by-step for making a pop-up modal window on a screen in your PowerApp.

Let's assume we have an app screen that's collecting some survey data. Like so:
![Start Screen](https://homol.work/img/blog/modal/start-screen.png)

It would be nice if we could provide a little more information to explain the Account Number that is needed.

Insert a new Icon onto the screen and give it the Information image.
![Information Icon](https://homol.work/img/blog/modal/info-icon.gif)

Select your screen and add the following to the OnVisible event:

```javascript
UpdateContext({ ShowModal: false });
UpdateContext({ ModalText: "" });
```

Next, select your new information icon and add the following to the OnSelect event:

```javascript
UpdateContext({
  ModalText:
    "Your account number is located at the top right of your most recent bill.",
});
UpdateContext({ ShowModal: true });
```

Insert a label onto the screen and adjust it's width and height to cover the entire screen. Name this label `ModalBackground` and remove it's Text.  
![Modal Background Label](https://homol.work/img/blog/modal/modal-background.gif)

Next, set the Fill property of this background label to `RGBA(169,169,169,.5)`. It should look like this:
![Gray Modal Background](https://homol.work/img/blog/modal/modal-bg-gray.png)

Add a second label and name it `ModalBox`. Center it's horizontal alignment and make the vertical alignment in the middle. Additionally, give it a Fill of White, center align its text and give it some extra padding. It should look something like this when you're done.
![Modal Textbox](https://homol.work/img/blog/modal/modal-box-1.png)

Set the Text property of the 'ModalBox' label to `ModalText`.

Add a Cancel Icon to the screen and place it in the top right corner of the `ModalBox` label. Name it `ModalClose`. Now you should have something like this:
![Modal Textbox with Close](https://homol.work/img/blog/modal/modal-box-2.png)

Put the following code in the OnSelect event of `ModalClose`:

```javascript
UpdateContext({ ShowModal: false });
UpdateContext({ ModalText: "" });
```

Group the 3 new controls you have added and name the group `Modal`.
![Modal Group](https://homol.work/img/blog/modal/modal-group.png)

Set the Visible property of the `Modal` group to `ShowModal`.

If you've done everything, you're modal should look and work like so:
![Modal in Action](https://homol.work/img/blog/modal/modal-in-action.gif)

This is a quick and painless process to have modals at your disposal in your next PowerApp. Happy low-coding!
How to reuse input elements in the form React
Tags: javascript, typescript, react
Published: 2021-01-21 16:50:56

We normally use text fields with lots of similarity especially styles in our forms, they just differ in values they store, placeholders and some types they have. For that case I often iterate the array of objects (formElements) and reuse the input component.

Here is how.

## Form

```javascript
import React, { useState} from 'react';

const SigninForm = () => {
  const [formData, setFormData] = useState({});

  const changeFormData = (key, value) => {
    const formdata = {
      ...formData,
      [key]: value,
    };
    setFormData(formdata);
  };

  const submitFormData = (event) => {
    // Submit form data here
    event.preventDefault();
    console.log(formData);
  };

  const formElements = [
    { name: "email", type: "text", placeholder: "Email"},
    { name: "password", type: "password", placeholder: "Password"},
    { name: "button", type: "submit", value: "Submit"},
  ];

  return (
    <form onSubmit={submitFormData} >
      {formElements.map(element => {
        // Return submit button
        if (element.type === "submit") {
          return (
            <button
              key={element.name}
              type={element.type}
              onClick={submitFormData} 
            >
              {element.value}
            </button>
          );
        }
        // Return text inputs
        return (
          <input
            key={element.name}
            type={element.type}
            value={formData[element.name] || ""}
            placeholder={element.placeholder}
            onChange={(e) => changeFormData(element.name, e.target.value)}
          />
        );
      })}
    </form>
  );
};

export default SigninForm;
```
Convert array to an object in JavaScript
Tags: javascript, array, object, script
Published: 2021-01-21 17:01:57


During development we often came across a need of conversion an array to an object.

In this article, lets see how to convert, JavaScript array to an object quickly using widely popular and accepted **spread operator (`...`)**.

### Example

```javascript
var fruits = ["apple", "grapes", "mangoe", "orange"];
var fruitsObject = { ...fruits };
console.table(fruitsObject);
```

### Output for `console.table`

| (index) | Value    |
| ------- | -------- |
| 0       | "apple"  |
| 1       | "grapes" |
| 2       | "mango"  |
| 3       | "orange" |

---

Read others post on our site [MeshWorld](https://meshworld.in)

Hope you like this!

Keep helping and happy 😄 coding

With ❤️ from 🇮🇳
🙅 Check out 6 common UX writing mistakes to avoid in 2021
Tags: ux, webdev, discuss, development
Published: 2021-01-21 17:01:49

Learn about the 6 most common UX mistakes you should avoid in 2021 in order not to ruin your customer experience 💡

Robotic tone of voice, SEO keyword stuffing, confusing website or app navigation, and more big no-no's 👇

[Check them out](https://uibakery.io/post/top-ux-writing-mistakes-harming-customer-experience?utm_campaign=ui_bakery%20-%20article%20-%20blog%20-%20cacq%20-%20ux_mistakes%20-%20views&utm_source=DevTo&utm_medium=ux&utm_content=article_announce)
How We Are Saving Costs By Dumping AWS Cloud
Tags: aws, startup
Published: 2021-01-21 16:59:22

Amazon is using the same trick with AWS pricing as cellphone providers: they rely on bad math capabilities of their clients. The costs for one single item, in the case of AWS this is one hour of computing, is incredibly low, parts of a cent - but most people out there are not able to do simple maths like multiplication (by 720, the number of hours in a month) or summation (with the costs of the other services you have to implicitly use).
When hosting a simple one-node Kubernetes cluster the costs are easily at a three-figure number per month - the fees for EKS, the fee for the EC2 node, the fee for the inbound load balancer, the fee for storage, ...

Let's do a simple calculation for a Kubernetes cluster:

    $58,40 for one EC2 instance (r5a.large, reserved)
    $74,40 for EKS (Elastic Kubernetes Service)
     $9,00 for EBS (Elastic Block Storage)
    $20,00 for ELB (Elastic Load Balancer)
    ... and some minor costs for data transfer and VPC
   
So even the most simple Kubernetes clusters has costs of around $150 per month - for computing power, open source software and inbound traffic.

We decided to switch to another baremetal provider pretty quick - the costs are **$11** for a root server that outperforms the EC2 instance for $60 easily.

Amazon is selling shovels in the gold rush: overpriced computing power for unprepared startups.
Be good and be good at it
Tags: cloudskills, azure, codenewbie
Published: 2021-01-21 16:56:14

Frontend? Backend? Android development? Cloud engineering? When I decided I wanted a career in technology, I thought coding was the only path I could take. I was very confused and it took a long while before I knew what exactly I wanted. I made several mistakes that I could have saved myself from if I had a clear direction.
I came across FreeCodeCamp.org sometime in 2019 and I started using it almost immediately. I liked how straightforward and beginner-friendly the curriculum is. I enjoyed the magic feeling of writing in an editor and seeing it in my browser. That joy was short-lived when I met CSS😪. it was just too much for me. I soon realized that design and user interface were just not my thing.
![Nope](https://media.giphy.com/media/gnE4FFhtFoLKM/source.gif)
I eventually found out what I loved when I started encountering errors with the system at work (after several iterations). I was denied access to several resources for reasons I didn’t know. What does _administrative access_ even mean😐? As a curious person, I started googling the specific error messages I got, which led me to [Microsoft docs]( https://docs.microsoft.com/en-us/).
I spent so much time learning about new things on [Microsoft learn](docs.microsoft.com/learn) and I was impressed by how easy and defined the paths were. I wasn’t interested in certifications; I was just hungry for knowledge. I was learning about teams, power apps, azure, among other new things. Since my organization is a Microsoft shop, it felt familiar and it helped me become more efficient at work.
When lockdown started and I had to work from home, I promised myself then that I had to be better than before. I had more time and flexibility and I could pursue whatever path I wanted. It was a defining point of my career and the resolve was clear; to come out of lockdown a better person. I searched for several communities that I could be part of because I read on Twitter that it was essential to be part of one. The Microsoft Learn ambassadors in Nigeria (@mlsanigeria) have been exceptional and I am thankful to them.
2020 was very different, I knew exactly what I wanted and why I wanted it. curiosity is definitely a pushing force for me because the more I learn about a new thing, the more I realize that I know nothing about it. By the end of the year, I had achieved my goal of passing all Microsoft fundamental certificates, got a great offer, and I will be moving to a new city! 
![Yass!!!](https://media.giphy.com/media/NEvPzZ8bd1V4Y/source.gif)
In 2021, I would be learning more about Azure, getting more Cloud certs and continue learning in public. I am glad that I know where I belong now despite feeling lost at a point. It doesn’t matter how long it took me, the plan is to be good at it and be known for it!
Bill of rights 
Published: 2021-01-21 16:37:17

I want to first just say, this video is very interesting. There are many good things that I could take away from me, as well as new information that was brought to my attention. In the past years learned about the Constitution and Bill of Rights, I felt like it was something I had to do rather than what I wanted to do. The original constitution was created by the Bill of Rights and I learned that the states were unhappy that the Bill of Rights were not included in the constitution in delegates only decided to radify