teleren/devto huggingface dataset:
How to make a mobile document scanner with just Javascript
Tags: webdev, computervision, javascript, programming
Published: 2023-05-20 19:06:52

We now live in an age where you no longer need to buy a $400 printer to scan documents. Tools like [Adobe Scan](https://play.google.com/store/apps/details?id=com.adobe.scan.android) and [CamScanner](https://play.google.com/store/apps/details?id=com.intsig.camscanner) allow you to do it straight from your phone!

Web developers are constantly pushing the limits of what can be accomplished on the web. Now, you can create a mobile document scanner with Javascript!

**Let's make one ourselves.**

---

## Introduction

We will be using [jscanify](https://github.com/ColonelParrot/jscanify) to do this.

The goal is to convert this image:

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdxk83qvyzhkxftf37gd.png" height="200"/>

To this:


<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo1z5wcmjdvo1i7v4lci.png" height="200"/>

---

### Setting up the environment

We'll be doing this in a web environment. If you want to do this server side or with React, jscanify supports it too (you'll need to check the [documentation](https://github.com/ColonelParrot/jscanify/wiki) though).


```html
<html>
  <body>
    <script src="https://docs.opencv.org/4.7.0/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
  </body>
</html>
```

---

## Getting the image and scanning

Now, let's load an image and scan it:

```html
<html>
  <body>
    <script src="https://docs.opencv.org/4.7.0/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
    <img src="https://colonelparrot.github.io/jscanify/images/test/test.png" crossorigin="anonymous" id="image" />
    <script>
      cv.onRuntimeInitialized = function() {
        function scan() {
          const scanner = new jscanify()
          const scanned = scanner.extractPaper(image, 386, 500)
          document.body.appendChild(scanned)
        }
        image.onload = scan

        if (image.complete) {
          scan()
        }
      }
    </script>
  </body>
</html>

```
We execute the code when OpenCV has loaded by waiting for the `onRuntimeInitialized` event. Once loaded, we initialize `jscanify` to create the scanner, and with one line, extract the paper with the `extractPaper` method. The parameters in the method are the width and height respectively.

So that's it! It's that easy :)
💻 Revolutionizing IoT: Web Browsers and NFC Open Up a 🚀 Future
Tags: webdev, iot, html, javascript
Published: 2023-05-20 19:02:06

With the unstoppable march of tech, we're entering a mind-blowing era for the Internet of Things (IoT) 🌐. The role of IoT, especially in terms of web apps, is about to expand far beyond what we've dreamt of so far. 🎆 A huge game-changer is the implementation of Near Field Communication (NFC) in Chrome 89 🖥️, launched in March 2021. This clever feature empowers web apps to connect with physical devices nearby, opening a door 🚪 to a universe of data transmission and user interaction possibilities.

Imagine this - NFC tech could enable your web apps to chat 🗣️ with everyday devices like fridges 🥶, cars 🚗, point-of-sale (POS) terminals 💳, and other machines. It's like turning them into smart, internet-enabled helpers. This fantastic leap forward could trigger a sea change in creating user-friendly Human-Machine Interfaces (HMIs) 🤖.

A perfect example might be a progressive web app, sitting on a static HTML server, having a conversation with your refrigerator 🧊. This kind of tech wizardry means there's no need for screens on appliances, because your smartphone 📱 is the perfect go-between. It's a win-win – cheaper for manufacturers, and slicker for users.

But the really cool part is that IoT can also reach devices with no internet connection 📵. These can still link up with progressive web apps that are safely registered from the web and work offline. This technology allows for peer-to-peer communication, using NFC or Bluetooth, straight from the web. It's an exciting leap forward that could totally transform the way we interact with things like dispensers, smart cars, POS systems, and loads more.

🌐 Web browser endpoints are at the forefront of this tech revolution. They're taking us into an era of awesome interactivity and integration. As the IoT world expands, we're seeing web apps become more secure, flexible, and lightweight. All this makes them practical, useful, and secure.

And guess what? IoT's not just for household appliances and POS systems. We're talking about building radars to detect aircraft ✈️ using JavaScript, thanks to clever APIs. Talk about pushing the boundaries!

The fusion of web apps, IoT, and NFC is totally transforming how we think about and interact with everyday items. It's stretching the limits of our tech capabilities and taking us into a world of unparalleled convenience, connectivity, and interaction 🎛️. So, hold onto your seats – as we keep innovating, the IoT landscape is going to get bigger and more exciting, making our lives more efficient and interconnected in ways we can hardly imagine today. 🚀
Unveiling Docker: A Primer on the Revolutionary Containerization Technology
Tags: webdev, programming, microservices, devops
Published: 2023-05-20 18:46:19

DevGnosis : https://devgnosis.substack.com/

Docker is a robust platform that leverages lightweight containers, streamlining container management tasks for developers. With Docker, you can effortlessly create and deploy applications, which are analogous to images in traditional virtual machine environments, but tailored for containerization. By handling container provisioning and mitigating networking complexities, Docker simplifies the development process. Moreover, Docker offers a built-in registry functionality, enabling convenient storage and versioning of Docker applications

The Docker application abstraction proves beneficial as it shields us from the underlying technology utilized to implement the service, similar to VM images. We employ Docker applications generated through our service builds and store them within the Docker registry, allowing us to seamlessly proceed with our development process.


Docker can also alleviate some of the downsides of running lots of services locally for dev and test purposes. Rather than using Vagrant to host multiple independent VMs, each one containing its own service, we can host a single VM in Vagrant that runs a Docker instance. We then use Vagrant to set up and tear down the Docker platform itself, and use Docker for fast provisioning of individual services.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtoo8bkz0i1x0iuyw5ni.png)
Como reduzir os custos de uma empresa?
Tags: reduzircustos, business, rpa, produtividade
Published: 2023-05-20 18:46:18

5 maneiras para reduzir os custos de uma empresa é:

- Automatizar tarefas manuais;
- Usar plataformas para aumentar a produtividade;
- Maximizar o uso de recursos;
- Reduzir falhas de processos;
- Aproveitar as últimas tendências em tecnologia.

O ideal é contratar uma consultoria em TI para realizar essas ações.

Fonte: [Como Uma Consultoria em TI Pode Aumentar Seus Resultados?](https://vicentepinheiro.com/como-uma-consultoria-em-ti-pode-aumentar-seus-resultados/)
Hide WordPress Default Field From User Backend Profile
Tags: wordpress, backendprofile, programming, usermetapro
Published: 2023-05-20 17:53:11

Do you want to hide default fields from the backend profile in your WordPress website? Look no further! In this tutorial, we'll show you how to effortlessly hide WordPress default fields using User Meta Pro.

WordPress comes with pre-defined fields in the user profile section, but sometimes these fields may not be relevant to your website or you may want to gather different types of information from your users. User Meta Pro is the perfect solution, empowering you to customize and control the user profile fields with ease.

Join us in this step-by-step video guide, where we'll cover the following topics:

- Introduction to User Meta Pro: Discover the powerful features that make User Meta Pro an excellent choice for customizing user profiles in WordPress.

- Installing and Activating the Plugin: Follow our simple instructions to install and activate User Meta Pro on your WordPress site.

- Hiding Default Fields: Learn how to effortlessly hide or remove unwanted default fields from the backend user profile.
Creating Custom Fields: Explore the intuitive interface of User Meta Pro to create personalized fields tailored to your website's needs

- Field Types and Options: Discover the variety of field types available in User Meta Pro and how to configure them to suit your requirements.

- Displaying Customized Profiles: Find out how to showcase the customized user profile fields on the frontend of your website.

- Additional Features: Uncover advanced features of User Meta Pro that can take your user profile customization to the next level.
By the end of this tutorial, you'll have the knowledge and confidence to effectively hide default fields in your WordPress backend profiles using User Meta Pro. Don't miss this opportunity to streamline your user experience and create a tailored environment for your users.

Remember to like this video, subscribe to our channel, and hit the notification bell to stay updated with more helpful WordPress tutorials. If you have any questions or need further assistance, please leave a comment below.

Let's dive in and learn how to hide WordPress default fields with [User Meta Pro](http://user-meta.com)!

https://youtu.be/sgahczxYOA0
Which are the biggest IT events in Latin America?
Tags: discuss, career, programming, codenewbie
Published: 2023-05-20 17:51:57

Attending conferences and events not only offers a chance to expand knowledge but also provides networking opportunities with like-minded individuals. 

I am interested in knowing if anybody can share some cool experiences and insights for what to look out for in the upcoming year. If you have any information regarding notable IT events in Latin America, I would greatly appreciate your input, thanks!.
A Brief Guide to Basic Data Types and Variables in Go
Tags: go, datatype, goprogramming, variables
Published: 2023-05-20 17:09:57

## Basic Data Types and Variables in Go

When programming in Go, it's crucial to grasp the essentials of data types and variables. These fundamental concepts form the building blocks of any Go program. In this concise guide, we will provide you with a brief yet comprehensive understanding of basic data types and variables in Go.

Go supports various data types, each designed to hold specific kinds of values. The common data types in Go include:

**Numeric Types:** Go offers several numeric types, such as int, float32, and float64, which hold numeric values like integers and floating-point numbers. Understanding the range and precision of these types is important for accurate calculations.

**String Type:** The string type is used to store textual data, such as names, messages, or any sequence of characters. Strings in Go are immutable, meaning they cannot be changed once created.

**Boolean Type:** The bool type represents boolean values, which can be either true or false. Booleans are useful for logical operations and conditional statements.

**Composite Types:** Go provides various composite types, including arrays, slices, maps, and structs. These composite types enable you to store collections of values or define custom data structures.

Variables in Go are used to store and manipulate data. To declare a variable, you specify the type and optionally assign an initial value. For example:

`var age int
var name string = "John"`

Go also supports the short variable declaration syntax:

`age := 25`

Variables can be assigned new values later in the program, and their types are inferred by the compiler. It's important to initialize variables before using them to avoid unexpected behavior.

Understanding data types and variables is crucial for writing efficient and bug-free Go code. By selecting the appropriate data type and utilizing variables effectively, you can enhance the performance and readability of your programs.

Expand your Go programming knowledge by exploring the extensive resources and tutorials available on [Programtown](https://programtown.com/beginner-tutorial-series/go-beginner-tutorial-series/). Our platform offers a wealth of information to help you master Go development and build robust applications.
My portfolio
Tags: programming, javascript, react
Published: 2023-05-20 17:03:41


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rsyjkuxlv3mkvyxf2tp.png)
Hey guys, I do have a sample portfolio site that i would like to share with you.
Currently, I am working on more projects so that can add them to that site. 
Please feel free to take a visit.
Here is the link: [katongole.isaac](https://katongoleisaac.netlify.app/)
I would like to recieve your feedback
Thanks.
How WebAuthn and passkeys work
Tags: security, webauthn, passkeys
Published: 2023-05-20 17:01:59

WebAuthn is a W3C specification and API that enables passwordless logins using passkeys which is a credential based on public key cryptography where the user's device keeps the private key locally to decrypt challenges encrypted with the public key on the authorization server.

Read more about [passkeys as a way to strength user credentials here](https://www.shouldiuseavpn.com/articles/passwordless-logins-with-passkeys).
Geek Ink Progress Discussions with Giscus
Tags: githubhack23, opensource, community
Published: 2023-05-20 16:55:03

## What I built 
At Geek Ink, we believe in the power of collaboration and community-driven learning. That's why we're excited to announce a new feature on our platform—interactive discussions powered by **Giscus**. With this latest addition, Geek Ink becomes an even more engaging and inclusive space for learners to connect, share ideas, and collaborate on their tech journeys

### Category Submission: **DIY Deployments**


### App Link
[Geekink](https://geekink.me/)

### Screenshots 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qn0fgdgi3x94dhej9s9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mi684rqtmtf9e50hba1.png)

### Description 
By leveraging **GitHub Discussions** through **Giscus**, we harness the power of a robust and familiar platform. **GitHub** is widely recognized as a hub for collaboration and open-source contributions. By bringing discussions directly to Geek Ink, we tap into this existing ecosystem, making it easier for learners to engage, contribute, and build a strong community around our platform.

### Link to Source Code 
[source code](https://github.com/AdamsGeeky/Adams/blob/main/Comments.jsx)

### Permissive License 
 **MIT License**

## Background (What made you decide to build this particular app? What inspired you?) 
 
I believe that by embracing collaboration and harnessing the power of discussions, we can unlock new opportunities for growth and empower learners to achieve their goals.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I utilized **GitHub Actions** to automatically build and deploy changes to the Geek Ink website whenever new content or updates were pushed to the repository. This streamlined the deployment process, allowing me to focus more on creating valuable content and less on manual deployment tasks

Secondly, I incorporated **GitHub Discussions** into Geek Ink using the **Giscus commenting system**. By leveraging GitHub Discussions, I tapped into the existing ecosystem of collaboration and open-source contributions. 

Throughout the process of building Geek Ink and implementing these features, I learned valuable skills in configuring GitHub Actions workflows and integrating GitHub Discussions. I gained insights into automating deployment processes and managing collaborative discussions on GitHub. This experience broadened my understanding of using GitHub as a powerful platform for development and community engagement

not only enhanced the functionality of Geek Ink but also picked up new skills and expanded my knowledge in utilizing these tools effectively.



### Additional Resources/Info

As I continue to develop and improve Geek Ink, I look forward to exploring more features and tools provided by GitHub, expanding my skill set, and delivering an exceptional learning experience to our community.
Techniques for Removing Falsy Values from Arrays in JavaScript
Tags: javascript, falsyvalues, array
Published: 2023-05-20 16:35:55

**List of falsy value**

In JavaScript, the following values are considered falsy:

1. `false`: The boolean value `false`.
2. `0`: The number zero (numeric zero).
3. `''` or `""`: An empty string.
4. `null`: The absence of any value.
5. `undefined`: A variable that has been declared but has not been assigned a value.
6. `NaN`: Not-a-Number, which represents an invalid or unrepresentable value in numeric operations.

These values are considered falsy because they evaluate to `false` when used in a boolean context. Any other value that is not explicitly falsy is considered truthy.


**How to remove falsy value from array**

To remove falsy values from an array in JavaScript, you can use various approaches. Here are a few methods you can use:

1. Using `Array.prototype.filter()`:
```javascript
const arr = [0, false, null, undefined, '', 1, 2, 'hello'];

const filteredArr = arr.filter(Boolean);

console.log(filteredArr); // Output: [1, 2, 'hello']
```
In this approach, the `filter()` method is called on the array and passed a callback function. The callback function uses the `Boolean` constructor as the predicate, which filters out any falsy values from the array.

2. Using a `for...of` loop:
```javascript
const arr = [0, false, null, undefined, '', 1, 2, 'hello'];

const filteredArr = [];
for (const value of arr) {
  if (value) {
    filteredArr.push(value);
  }
}

console.log(filteredArr); // Output: [1, 2, 'hello']
```
In this approach, a `for...of` loop is used to iterate over the array. Each value is checked using an `if` statement, and only truthy values are added to the `filteredArr` using the `push()` method.

3. Using `Array.prototype.reduce()`:
```javascript
const arr = [0, false, null, undefined, '', 1, 2, 'hello'];

const filteredArr = arr.reduce((result, value) => {
  if (value) {
    result.push(value);
  }
  return result;
}, []);

console.log(filteredArr); // Output: [1, 2, 'hello']
```
In this approach, the `reduce()` method is used to iterate over the array. The callback function checks each value and adds truthy values to the `result` array.

4. Using custom filtering function :
```javascript
const arr = [0, false, null, undefined, '', 1, 2, 'hello'];

const filteredArr = arr.filter(function (element) {
	return !!element;  // Double negation to convert value to boolean
});

console.log(filteredArr); // Output: [1, 2, 'hello']
```

All of these approaches will remove falsy values from the array and return a new array containing only truthy values.
Generics Hacks (1): ReadOnly in Typescript w/ 3 Examples
Tags: typescript, react, vue
Published: 2023-05-20 16:23:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuvi966u6okaejr4sfwb.png)


`readonly` is a keyword in TypeScript that we use when we want to make a property UNchangeable, so the value of the property cannot be changed after it has been set.

## 1) How to use the `readonly` keyword on a property of a type?

```ts

type Person = {
  readonly name: string;
  age: number
  }
  
   const person1: Person = {
      name = "John";
      age: 30
  }
  // name property will not change 'cuz it was assigned to be readonly
  person1.name = "Sarah"; ❌
  person1.age = 20; ✅


```

## 2) How to use the `readonly` keyword on an interface?


```ts

interface Car 
  make: string;
  model: string;
}

const readonlyCar1: Readonly<Car> = {
  make: "Tesla",
  model: "Model S"
};

// This will not compile because the make property is readonly
readonlyCar1.make = "Toyota"; ❌
// This will not compile because the model property is readonly
readonlyCar1.model = "Camry"; ❌
🟢
const car2: Car = {
  make: "Tesla",
  model: "Model S"
};

car2.make = "Toyota"; // OK ✅
car2.model = "Camry"; // OK ✅

```

## 3) How to leverage generics and use the `readonly` keyword dynamically?

This is a normal static interface 👇

```ts

interface postProps {
  name: string;
  relativeTime: string;
  tweet: string;
  retweets: number;
  likes: number;
  comments: number;
  userImg: string;
  likedUsers: Array<{ name: string; img_src: string; id: number }>;
}

```

Let's say now that we need to have a read-only version of this interface, now we have two scenarios:

1. You already know the type: then you could do it manually 🤚 one by one putting thereadonlykeyword before each property.
2. You don't know the type or you know it and it has tons of properties: then you use generics: 🤓

```ts

type readOnlyProps<T> = 
  readonly [K in keyof T]: T[K]; 
};
```

What that means:
- `T` is representing avariable for the type that you will use
- `K` is representing the key of each property in theT type
- you can think of it as an iterator that iterates over the passed types (postProps in this case)
- e.g. first iteration:
> Input 👉 readonly [name]: postProps[name] 
> output 👉 readonly name: string;

Now you can create your new type and use it:

```ts

// your new type:
type readOnlyPostPorps = readOnlyProps<postProps>;

// you could use the new type now:
function Post(props: readOnlyPostPorps): JSX.Element {
  return (
    <>
      {...your JSX goes here}
    </>
  );
}
export default Post;

```

---


Try this live example:

{% embed https://codesandbox.io/embed/typescript-typing-hacks-w-generics-pm0d4m?fontsize=14&hidenavigation=1&theme=dark %}



## Any good in using Read-Only? looks like it does only one thing.

1. Prevent bugs 🐞 by preventing developers from accidentally changing the value of a property.
2. Improved maintainability 🔧 Code will become easier to maintain thanks to the first point (preventing bugs)
3. Improved readability 👊 Code will become easier to read and understand by clearing out what can be changed and what cannot.