teleren/devto huggingface dataset:
A Compilation - Outstanding React meetups in January 2022
Tags: react, tutorial, reactnative, programming
Published: 2022-02-11 16:10:39

React was indeed in the spotlight last month, so we spared your time and collected the [champions of meetup videos in January](https://blog.meetupfeed.io/react-meetups-january-2022/). Learn about how to debug a non-reproducible crash, dive into better performance, security and custom renderers. And the list goes on! Which one is your favorite?

[Debugging a Non Reproducible Crash | Alexandre Moureaux](https://meetupfeed.io/talk/debugging-a-non-reproducible-crash-alexandre-moureaux-react-advanced-2021)
Debugging a Non Reproducible Crash POV: Your app has a crash affecting thousands of users, but for the life of you, you can’t reproduce it and have no idea what’s causing it. Hear the story of an epic struggle to vanquish a non reproducible bug and learn what to do (and what not).

[Performance with React Dev Tools | Yanai Edri](https://meetupfeed.io/talk/yanai-edri-react-performance-with-react-dev-tools-react-next-2021)
All of us are familiar with the react dev tool – how to select a component and observe the state and the props – but this tool also has the profiler tab – so let’s dig in with Yanai Edri who has more than 16 years of experience in the field.

[You thought your application is secure? Think again | Liran Tal](https://meetupfeed.io/talk/liran-tal-you-thought-your-react-application-is-secure-think-again-react-next-2021)
Modern frontend frameworks are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Liran Tal shows you how React applications get hacked in the real-world.

[Using Mediapipe to Create Cross Platform Machine Learning Applications | Shivay Lamba](https://meetupfeed.io/talk/using-mediapipe-to-create-cross-platform-machine-learning-applications-with-react-shivay-lamba)
This talk gives an introduction about MediaPipe. This is an open source Machine Learning Solution that allows running machine learning models on low powered devices. Moreover, it helps integrating the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way. This way, they can create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.

[The beauty and the beast: custom renderers | Nir Kaufman](https://meetupfeed.io/talk/nir-kaufman-the-beauty-and-the-beast-custom-renderers-in-react-react-next-2021)
Learn more about custom renderers in React from Nir Kaufman, who is in a long-time relationship with React as a developer, author, consultant, and trainer.
Python 101: Introduction to Modern Python
Tags: beginners, programming, tutorial, python
Published: 2022-02-11 16:06:31

# What is Python?
Python is an interpreted, high-level programming language that was created in 1991 by Guido van Rossum, and is currently being maintained by the Python software foundation. It has a syntax that focuses on code readability thereby allowing beginners to get started easily and programmers to express their concepts in fewer lines of code. 

# What can Python do?
Python can be used: 
- On a server to create web applications.
- In big data to perform complex mathematics.
- For system scripting
- For software development
- In machine learning and artificial intelligence

# Getting Started with Python 
To start programming in Python on your local machine, open a terminal or command prompt and type the following command:
```bash 
python --version
```
If Python is not installed on your local machine, download it [here](https://www.python.org/downloads/).
After installing python, run the above command to make sure Python is correctly installed. 
If python is correctly installed you can go ahead and write your python program. 

# Writing your first Python program
You can either write and run Python code on the command prompt or create a Python file. 
To write and run Python code on the command prompt, open the command prompt and type `python`. You will get output similar to this:
```bash
Python 3.10.2 (tags/v3.10.2:a58ebcc, Jan 17 2022, 14:12:15) [MSC v.1929 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
```
Here, type `print("Hello Python!")`. You will get output similar to this:
```py
Hello Python! 
```
Congratulations!!! You just wrote and run your first Python program on the command prompt.

To create a Python file and run the code, `cd` into the directory where you want to create the file using the Command Prompt and run the code below:

```bash
mkdir python_project && cd python_project 
touch HelloWorld.py
code .
```
The above instructions will create a folder named `python_project` and `cd` into the folder. The second command will create a file named `HelloWorld.py`. The last command will launch VS Code in our current folder. 
If you do not have VS Code installed, you can download it from [here](https://code.visualstudio.com/download).
After launching VS Code, open the `HelloWorld.py` file and type in the following code:
```py
print("Hello Python!")
```
Launch the integrated terminal by pressing `Ctrl + J`. In the terminal, type `python HelloWorld.py` and hit `Enter`.
Congratulations on creating and running your first python file.

You can learn more about Python on the [official documentation](https://docs.python.org/3/).
ignifugaciones
Published: 2022-02-11 16:00:59


[Ignifugaciones](https://ignifugacionespromatec.es/) Promatec somos la empresa de referencia en el sector. 

Aplicamos materiales y sistemas de protección contra incendios en diversas estructuras e industrias.

La actividad comercial en la que nos especializamos está enfocada a brindar soluciones globales a las empresas. Sistema de protección contra incendios de alta calidad, a precios competitivo.
 
En Ignifugaciones Promatec respetamos la normativa vigente en nuestros proyectos de ingeniería. Realizamos nuestros trabajos de ignifugaciones España, utilizando métodos y procesos respetuosos con el medio ambiente.

Garantizamos la integridad de cualquier estructura, ya sea una [ignifugacion de naves](https://ignifugacionespromatec.es/) o almacén, una industria o un centro comercial, utilizando materiales de primera y atendiendo puntos y lugares frágiles. Todo ello se debe a nuestro excelente equipo de expertos, que cuentan con la más avanzada tecnología pasiva de protección contra incendios, aislamiento acústico y aislamiento térmico a niel nacional.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lba5a2d2glg4enqezsg.PNG)

En Ignifugaciones España diseñamos tu proyecto técnico desde cero y nos encargamos de aplicar la protección contra incendios y la protección contra incendios necesaria para tu edificio. Contamos con los medios técnicos y profesionales necesarios, así como una rica experiencia en apoyarnos en la protección contra incendios.
memo, Window10 with Ubuntu
Published: 2022-02-11 15:58:02

source activate `virtual name`   

https://stackoverflow.com/questions/39281594/error-1698-28000-access-denied-for-user-rootlocalhost

https://stackoverflow.com/questions/62987154/mysql-wont-start-error-su-warning-cannot-change-directory-to-nonexistent
How To Get All Colour Code From Image.
Tags: css, rgb, colourcode, frontend
Published: 2022-02-11 15:47:59

Hello everyone! 🤝 

I hope all are well 🙂

Today i am going to show how you can get all colour code that are in the image. It will be too helpful for fronted developer and website and mobile app designer.

[https://imagecolorpicker.com/](https://imagecolorpicker.com/)

It is amazing website and too easy to get image colour code as well as you can also get **rgb colour** code.

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

In the above example you can see that we get all colour code of the image have and you can also use zoom the image to get descriptive colour.

## How to do this

**step 1 -** go to website [https://imagecolorpicker.com/](https://imagecolorpicker.com/).

**step 2 -** Click on **Use Your Image** and upload image.


 Thanks 🙂
mobiliario hosteleria
Published: 2022-02-11 15:45:48

Las cocinas industriales modernas precisan que los materiales utilizados en sus equipos y superficies de trabajo no sólo presenten un buen aspecto, sino que cumplan los mayores niveles de higiene. Nuestro **[mobiliario para hosteleria](https://mimobiliariohosteleria.es/)** son fabricados con acero de primera calidad y las técnicas más avanzadas, aportan las siguientes ventajas:
 Resistentes a la corrosión, poseen una larga vida útil.
 Adecuados a las normas higiénicas de salud pública.
 Higiénicos y de fácil limpieza, mantenimiento más sencillo.
 Optimizados con un diseño funcional (pliegues de acero anti-grasa, etc.)

Tu [mobiliario hosteleria](https://mimobiliariohosteleria.es/) al mejor precio del mercado, desde mesas de trabajo en acero inoxidable, muebles refrigerados, estanterías, campanas extractoras industriales, vitrinas, expositores, maquinaria industrial o cualquier otro equipo, repuesto o accesorio.
How to use Prismic.io on React Native
Tags: prismic, reactnative, react, javascript
Published: 2022-02-11 15:40:38

Prismic is a Content Management System, also known as headless CMS or API CMS. 

I was asked to integrate Prismic.io into a React Native project, so first thing I did was to check how it was implemented on the web project.

They were using [prismic-javascript](https://www.npmjs.com/package/prismic-javascript) library which is **deprecated** already and no docs available either.

The recommended solution on Prismic site is to use `prismic-client` along with `prismic-react` for react projects, but no particular examples for react-native.

I followed prismic installation steps line to line but at the time of bundling the app (I'm using an ejected expo app) came up the first issue:

```
While trying to resolve module `imgix-url-builder` from file `/Path/to/project/node_modules/@prismicio/helpers/dist/index.js`, the package `/Path/to/project/node_modules/imgix-url-builder/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Path/to/project/node_modules/imgix-url-builder/dist/index.cjs`. Indeed, none of these files exist:
```
So `imgix-url-builder` is not being resolved, and the solution is to add a source extension to the metro config like this:

```
const { getDefaultConfig } = require("expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push("cjs");

module.exports = defaultConfig;
```

Then I tried to bundle again, which succeeded but at the time of execute any prismic hook such as `usePrismicDocumentByID` I was receiving an error like:

```
error: Not implemented
node_modules/react-native/Libraries/Blob/URL.js:86:10 in URLSearchParams#set
...
```

After googling a little bit I found that according to [this post](https://justinnoel.dev/2020/12/08/react-native-urlsearchparams-error-not-implemented/) 

> React Native react-native/Libraries/Blob/URL.js doesn't import all the Web API functionality due to size concerns

And to fix this we need to add a polyfill for this particular issue.

First you need to `npm i react-native-url-polyfill`, then add this line to your `index.js`: 

```
import "react-native-url-polyfill/auto";
```

After that, and restarting your server (just in case), you will be able to start using the prismic hooks from `prismic-react` library.

Remember that you won't be able to use any Component exported from this mentioned library as this are intended to be used on web only but not on React Native.

Hope this hacks helps you to use this lib on your RN projects!
What is NPM?
Tags: node, npm, cli, programming
Published: 2022-02-11 15:38:34

## Introduction
If you are **Front End** or **Back End** developer It is sure to have been used **NPM** (**N**ode **P**ackage **M**anager) at least once in your projects, so in this series, we will talk about NPM and we will cover those topics:

1. Install NPM
2. `package.json` file
3. Install NPM Packages
4. Versions in NPM Packages
5. Dealing with NPM Packages
6. Update Existing Packages
7. Uninstall NPM Packages
8. Create and Publish Your Own NPM Package.
9. Update the published NPM Package.

And now let's begin in the first section.

---

## What is NPM?
NPM is a **Package Manager** which allows to developers shear their packages between them and use these packages in their projects, and it is a default package manager for JavaScript Run time environment Node JS.

At this article time, NPM contains **1,873,569** Package Which allows him to be the most famous package manager.

NPM consists of two main parts:
1. **CLI** Tool to deal with packages in the projects.
2. **Online repository** that hosts javascript package.

---

## Installing NPM
To install NPM in our machine we should Install **Node JS** and NPM will be downloaded with it, so first we will download Node Js:
Open the [**Node JS**](https://nodejs.org/en/) website and download it.
Setup Node JS like any program on your PC.
After that open your terminal and type this commands:

```
> node --version 
v16.13.2
```

```
> npm --version
8.1.2
```

And now Node JS and NPM are available in our Machine and we can use them in our projects.

We will notice that the Node version differs from NPM Version and this is normal because they 2 totally different pieces of software and evolve separately.

In this section, we talked about what is NPM and how we can install it in our machine to use it in our projects, and in the next article, we will talk about the `package.json` file in detail.
So See you in the Next Section...🖐️
How to return a response with OK HTTP Status Code with Jax-Rs
Tags: rest, jaxrs, java, codever
Published: 2022-02-11 15:19:50

Use the `ok()` method of the `javax.ws.rs.core.Reponse` class to create a `ReponseBuilder` with a status of 200 (OK),
or the `ok(Object entity)` to return **OK** with data

```java
import javax.ejb.Stateless;
import javax.inject.Inject;
import javax.ws.rs.*;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;

@Path("comparison")
@Stateless
@Tag(name = "Comparison")
public class ComparisonRestResource {

  @Inject private ComparisonService comparisonService;

  @HEAD
  @Operation(
      summary = "Ping HEAD",
      description = "Check availability of the resource. ")
  @ApiResponses(@ApiResponse(responseCode = "200", description = "Service is reachable via HTTP"))
  public Response head() {
    return Response.ok().build();
  }

  @GET
  @Produces(MediaType.TEXT_PLAIN)
  @Operation(
      summary = "Ping GET",
      description = "Check availability of the example resource. ")
  @ApiResponses(@ApiResponse(responseCode = "200", description = "Service is reachable via HTTP"))
  public Response ping() {
    return Response.ok("pong").build();
  }
}
```

**Note** that the `ok()` methods shown before are just shortcuts for
```
return Response
        .status(Response.Status.OK)
        .build()
```

and

```
return Response
        .status(Response.Status.OK)
        .entity("pong")
        .build()
```
respectively.

<hr>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/620672f4e102f148ceb9f3ba/details). Use :point_right: [**copy to mine**](https://www.codever.dev/snippets/620672f4e102f148ceb9f3ba/details) functionality to add it to your personal snippets collection.
2 methods to prevent form from submission
Tags: javascript, beginners, programming, tutorial
Published: 2022-02-11 15:09:43

Normally, when you submit the form, it redirects to the action attribute link. But you can stop that reload and call an AJAX or any other Javascript function.

## 1. preventDefault

You can call the **preventDefault** function on the event target and it will stop the form from redirecting to the page specified in the action attribute of the **&lt;form>** tag.

```
<form method="POST" action="your-page.php" onsubmit="onFormSubmit();">
	<input type="submit" />
</form>
```

Then you can create the following Javascript function to prevent the page reload:

```
function onFormSubmit() {
	event.preventDefault();

	// your Javascript code here
}
```

In this method, the form is first prevented from submission and then your Javascript code will be run.

## 2. return false

The second approach is to use the **return false** statement in your Javascript code. For this, you also need to return the value from **onsubmit** event function. Let's check this out.

```
<form method="POST" action="your-page.php" onsubmit="return onFormSubmit();">
	<input type="submit" />
</form>
```

Then create your Javascript function as like that:

```
function onFormSubmit() {
	// your Javascript code here
	
	return false;
}
```

In this method, your Javascript code runs first before preventing the form submission.

## Recommendation

We would recommend the 1st method i.e. **preventDefault** because it is the very first line of the Javascript function. So if there is an error in your Javascript code, your browser will not get reloaded and thus you will be able to view the error in the browser console.
useRef in React
Tags: webdev, react, beginners, programming
Published: 2022-02-11 14:59:38

## Getting started with `useRef`

To get started with `useRef` hook we first need to import it from React as :

```react
import { useRef } from 'react';
```
The hook only takes a single initial value and returns a ref.

```react 
const initialRef = useRef(null);
```
In the above example we created a ref named `initialRef` and it is set to a default value of null. `useRef` assigns the ref to an object having a `current` property,

```react
{ current : null }
```
Looking at the above example you might be thinking why don't we use the `useState` instead of `useRef` hook. The main difference between the `useState` and `useRef` is that the later persists between renders and doesn't cause the component to re-render each time its value changes.

## Using `useRef` hook

Until now we have understood that the main use of ref is for storing value between renders.

The most common use of refs is to reference the DOM elements, in fact every DOM element has a ref property which can be used for setting ref to the element.

```react

function InputWithButton() {
  const initialRef = createRef(); 
  const handleClick = () => {
    initialRef.current.focus();
  };
  return (
    <div>
      <input ref={initialRef} type="text" />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

```

In the above example, we have used the ref property of the input ref in order to set the current property. When we click the button it calls the `handleClick` which uses the current value to set focus on the input element. Thus being able to access any DOM element by using the `useRef` hook is extremely useful for managing attributes which cannot be directly controlled in React. 

## Conclusion

`useRef` hook in React is extremely useful for storing data between renders without causing the element to re-render each time. It can also be used for accessing DOM elements.
How are you sharing git ignored files with other developers?
Published: 2022-02-11 14:47:52

---
title: How are you sharing git ignored files with other developers?
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
As projects get huge and you need to protect directories and keys from the repo, you go to work and realize you can't without all these ignored files you need. It can get overwhelming, how is everyone else typically keeping ignored files in sync with computers and fellow developers?
CRUD Operations
Published: 2022-02-11 14:42:32

 CRUD meaning create, read, update and delete.
Based on the requirements of a system, varying user may have different CRUD cycles. A customer may use CRUD to create an account and access that account when returning to a particular site. The user may then update personal data or change billing information. On the other hand, an operations manager might create product records, then call them when needed or modify line items.
CRUD is an acronym that comes from the world of computer programming and refers to the four functions that are considered necessary to implement a persistent storage.
'CRUD' is the central tenet of every programming language, and we should strengthen our foundations to be a hardcore developer.
The purpose of this project is to demonstrate the working of CRUD operations by writing a 'Note Taking Application' in pure Modern JavaScript.
Paracetamol.js💊| #51: Explica este código JavaScript
Tags: javascript, beginners, webdev, spanish
Published: 2022-02-11 14:32:35

## **Explica este código JavaScript**

```js
function nums(a, b) {
  if
  (a > b)
  console.log('a is bigger')
  else 
  console.log('b is bigger')
  return 
  a + b
}

console.log(nums(4, 2))
console.log(nums(1, 2))
```


-     A:` a is bigger`, `6` y `b is bigger`, `3`
-     B: `a is bigger`, `undefined` y `b is bigger`, `undefined`
-     C: `undefined` y `undefined`
-     D: `SyntaxError`

Respuesta en el primer comentario.

---
Avoid Committing Secrets and Credentials to Git
Tags: git, secrets, githooks, security
Published: 2022-02-11 17:24:14

---
title: Avoid Committing Secrets and Credentials to Git
published: true
date: 2022-02-11 14:14:02 UTC
tags: git, secrets, githooks, security
canonical_url: https://bleedbytes.in/avoid-committing-secrets-or-credentials-to-git/
---

 ![Avoid Committing Secrets and Credentials to Git](https://i0.wp.com/bleedbytes.in/wp-content/uploads/2022/02/avoid-committing-secrets-and-credentials-to-git.png "Avoid Committing Secrets and Credentials to Git") 

Committing secrets to code repos or version control systems is considered one of the major security incidents, as a developer or code owners, we should be conscious about what we are pushing to the VCS. The reason for considering a security incident is, if we accidentally commit those secrets to public repos, it can be […]

The post [Avoid Committing Secrets and Credentials to Git](https://bleedbytes.in/avoid-committing-secrets-or-credentials-to-git/) appeared first on [BLEEDBYTES](https://bleedbytes.in).