teleren/devto huggingface dataset:
Query counter for Hibernate

Tags: java, hibernate, orm, queries
Published: 2021-11-08 11:59:21

Hibernate is the most used ORM framework by Java developers, but there are still many misunderstandings about how it works and its best practices.

ORM provides great abstraction between objects and DB, and that is also the problem. Developers tend to forget that queries are expensive and that accessing DB like accessing common objects in memory creates an unpredictable number of DB queries.

One of the ways to prevent it from happening is to monitor queries that a code creates, and it is a tricky thing to do. You can set the level of Hibernate login to log DB calls and track it like that. The problem with that solution is that it is implicit, not part of the code, and you need to do it manually.

A more elegant solution is to create an interceptor ([QueryCountInterceptor](https://github.com/alchemycloud/todo/blob/master/backend/src/main/java/com/todo/backend/interceptor/QueryCountInterceptor.java)) and thread-local variable (like [AppThread](https://github.com/alchemycloud/todo/blob/master/backend/src/main/java/com/todo/backend/util/AppThreadLocals.java)) that will intercept hibernate prepare statements and process them. QueryCountInterceptor is great for code debugging. It is also a learning tool for newcomers into Hibernate. Besides that, it can be integrated with tests. For example, after each tested method, assert the number of queries that have been performed. In this way, you can avoid the situation that a code change unexpectedly changes method performance.


![QueryCounter.java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbip900a36zupp7uvjt2.png)
Windows 11, but for Web
Tags: javascript, webdev, beginners, css
Published: 2021-11-09 04:45:41

Hey Devs,

I just tried to make Windows-11 for the web.
Made in HTML, CSS and JAVASCRIPT.![Image description]
 
Live demo : https://window-11.netlify.app/

Features:
> Start Menu
> Search Menu
> Widget Menu
> Context Menu
> Taskbar hidden apps menu
> File Explorer
> Taskbar
> Quick Settings
> Calendar
> Adjust Brightness
> Adjust Volume
> Adjust icons size
> Settings
> Refresh
New features are adding continuously Day by Day 

By : Abdul Rehman

About Me:
I am 14 years old boy From Lahore, Pakistan. I belongs to a middle class family. I am interested in things related to computer and internet. I started my journey as a Web Developer From April, 2021 and start learning Html,CSS,Js from YouTube and created Windows 11 clone that is really awesome please Try once. I make Windows 11 on my PC(Which is too much slow) with 2gb ram and 32gb HDD.
Importance of double ampersand: logical AND(&&)in JavaScript
Tags: javascript, react, webdev, beginners
Published: 2021-11-09 04:36:20

- Saves time and code length.
- Gets rid of else statement.
 Basic Example:
> if/else statement
let x= 2, y =5;
if(y>x){
  console.log("y is greater than x");
  return;
}

> Using logical AND (&&) as short-circuit property
let x= 2, y =5;
y>x && console.log("y is greater than x");

- The difference the Short-Circuit property makes that you are able to write the code in few lines and is considered as one of the important features of JavaScript and hence making the JavaScript so powerful.
Pull Requests need more cute animals
Tags: actionshackathon21, javascript, github
Published: 2021-11-09 04:14:43

### My Workflow

I created a new GitHub action called [animal-action](https://github.com/circa10a/animal-action)

When a pull request is opened to a repository, it will comment with a cute picture of either a cat, dog, or fox!

The types of animals and comment supplied are completely configurable.

Current animals supported:

- cats :cat2:
- dogs :dog2:
- foxes :fox_face:

#### Example

![alt text](https://raw.githubusercontent.com/circa10a/animal-action/main/docs/img/example.png)

### Submission Category:

-  Wacky Wildcards


### Yaml File or Link to Code

{% github https://github.com/circa10a/animal-action %}


### Additional Resources / Info

Why?

More smiles in Open Source is a definite win. :smile:
BigData para devs
Published: 2021-11-09 03:30:16

Si es mucha información, debe tener altos flujos.
De donde la podemos sacar:
 * Redes sociales.
 * Videos.
 * Geolocalizacion de usuarios.
 * Datos no estructurados (si pueden venir registros como en json)
 * tambien aplica para cvs masivos.

Donde almacenamos estos:
 * Buckets/Datalake/storage: Un google drive pero mas interesante.
 * Datawarehouse

Para que sirve:
Tomar decisiones con información descriptiva, al mezclarse con técnicas de bussines inteligence como lo es la clusterizacion de clientes. 



Intentar predecir posibles eventos o generar recomendadores, basado en técnicas de aprendizaje automático.

El problema de la calidad del dato.
Mucha informacion, no siempre significa una buena calidad y veracidad de la informacion.

Horarios de procesamiento también puede ser un problema o oportunidad, dependiendo de la volatilidad de la información.
Burnout 
Tags: spanish
Published: 2021-11-09 03:18:47

Es primera vez que escribo en esta plataforma, mi nombre es Rodrigo Espinoza, tengo alrededor de 26 años, me dedico a mantener un sistema crm prácticamente solo. 

-La ultima vez que renuncie a un trabajo fue por que me habian ofrecido algo relativamente mejor, en sus distintas caracteristicas, pero esto a durado bastante poco.

Si me preguntas que si me gusta programar, si obvio. Me encanta esta carrera.
Pero si me preguntan sobre si tengo ganas de levantarme a trabajar. Probablemente tambalee en devolverte una respuesta. Hoy en dia la carga a estado pesada, he tenido que ignorar mis fines de semana, por tener que corregir errores a produccion por cambios validados por el usuario. Hacerme responsable de responder a quien pida ayuda y aclarar distintos requerimiento de algo que no desarrolle ... 

Por un lado, me gusta desarrollar. Pero tanto desarrollo o carga de registros fuera de horario, promesas ya no son de mi agrado.

He estado mirando distintas ofertas, siento que he perdido un poco el gusto de estar trabajando para otros, o tener que toparme con una situación similar de sobrepromesas de los superiores por desconocimiento o para quedar bien parados frente a otros.

El frase de hay que ponerse la camiseta me incomoda. Tener que responder mensajes pasado las  22:00hrs por que se les ocurre pasar un feature a prd.. que nadie realmente a probado y deja al 50% de actividad un sistema, no me es grato.

Suelo pensar que y si realmente soy yo el problema. 
No tenia pensado de que esto fuera un diario o algo por el estilo.
Solo que probablemente exista gente que ha o este pasando por lo mismo. Paciencia hay que aveces mirar un poco desde lejos, no es bueno quedarse donde mismo. Ni tampoco tomar como legitimas las promesas de subida o cambio de rango... 
Menos con personas que suelen venderse al negocio o dueños del producto para quedar bien.

--
Ahora pienso espero no seguir pasandome a llevar tanto, con lo de decir si voy a esperar a una oferta buena...
Esta vez buscare, para navegar por otros rumbos, a mis 26 años casi recién cumplidos puedo decir que he podido sobrevivir a aguas profundas.
O que é o pyenv ?
Tags: python, pyenv
Published: 2021-11-07 02:48:21

O [pyenv](https://github.com/pyenv/pyenv) é um gerenciador de versões do python, com ele é possivel utilizar diversas versões do interpretador.

A grande vantagem de se usar o pyenv, é a facilidade de criar ambientes rapidamente.

Veja abaixo como instalar e utilizar o pyenv.

Instalação:

Todos os comandos abaixo estão disponiveis no repositório oficial, que pode ser acessado aqui.[aqui](https://github.com/pyenv/pyenv)

Como sugere a [documentação do pyenv](https://github.com/pyenv/pyenv/wiki), é necessário a instalação de algumas dependências:
```
sudo apt-get update

sudo apt-get install -y make build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev xz-utils tk-dev libxml2-dev libxmlsec1-dev libffi-dev liblzma-dev git
```

Instalar o pyenv:

```
curl https://pyenv.run | bash
```

Configurar as variaveis de ambiente
```
export PATH="$HOME/.pyenv/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"
```

Reinicia o terminal
```
exec $SHELL 
```

**Usando o pyenv**

Verifique a versão que seu sistema operacional está utilizando:
```
python -V
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pzj9sp2xb15ki02alvr.png)

Para procurar uma versão especifica é necessário apenas digitar o comando abaixo:
```
pyenv install -l
```

Após escolher a versão é preciso instalar, com o comando:
```
pyenv install <versão-escolhida-aqui-EX: '3.9.7'>
```

Para listar as todas as versões que foram instaladas na sua máquina, digite:
```
pyenv versions
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a56ewq38cpw5umvctl2s.png)

Para definir a versão nova em seu sistema operacional, o comando “pyenv global” seguido da versão:
```
pyenv global 3.9.7
```

Para desinstalar uma versão especifica o comando “pyenv uninstall” seguindo da versão:
```
pyenv uninstall 3.9.7
```

Este foi um breve tutorial sobre **pyenv**, que pode ser muito útil, quando se esta trabalhando varios projetos com versões diferentes.
Coded a Profile Card Template
Tags: beginners, webdev, css, html
Published: 2021-11-09 02:58:18

This profile card was inspired by 2 things. There is a certain project called Profile Card Component on a website called [**Frontendmentor.io**](https://www.frontendmentor.io/)... this project featured a social media following profile card that had amount of followers and likes and etc.

This profile card was inpsired and created with code and structure from a CodePen called Profile Card Design by a developer named Florin Pop. Florin has an [**amazing blog**](https://www.florin-pop.com/), that I absolutely credit in inspiring this profile card I coded.

The code from this project I made is merely a bunch of text edits, a few css colorway changes, and soon enough... more moving around of elements.

For now, I will keep it like this, and make an updated post and version of this profile card, as these type of business card type websites are becoming more increasingly popular.

Besides those facts, the process of coding a card like this would most likely need a few divs, the right element tags, css organization skills, and appropriate colors, fonts, text size, and images.

I enjoyed coding this, and would like you to try making a copy of mine too!

==> [Profile Card Template](https://codepen.io/techkayacodes/pen/MWvGdwa) <==
React UseContext is Simple
Published: 2021-11-09 02:40:21

# Why use UseContext?
React _useContext_ hook is used to create global data that can be accessed throughout the component hierarchy without the need to keep passing the props down manually to each component level. 

This process of manually passing props down each level of child components (even though some child level does not need the data) to eventually reach the target child component is called **Prop Drilling**. Using useContext can help resolve this tedious process of Prop Drilling!

# Simplified code snippets
In Parent component or App.js, we just need to create & export the context, literally by using the createContext hooks! Simply use these few lines of code:

```jsx
// in App.js
import {createContext} from 'react';
export const contextToPassDown = createContext();
```
Then wrap the context Provider over the child components you wish to provide the context

```jsx
<contextToPassDown.Provider value={dataToPassDown}>
   <ChildComponent />
</contextToPassDown.Provider>
```

Then in any Child components that are wrapped by the <Provider/> tag, we just need to use the useContext hooks!

```jsx
// in ChildComponent.js
import {useContext} from 'react';
import {contextToPassDown} from App.js;

const ChildComponent=()=>{
  const contextToUse = useContext(contextToPassDown);

  return (<div> {contextToUse.username} </div>);
}

export default ChildComponent;
```

The use cases for useContext are usually:
1. To Pass down logged-in user info to authorized components
2. For 'light' or 'dark' theme

You may practice using this link to: [codesandbox](https://codesandbox.io/s/usecontext-demo-solution-tujgu?file=/src/components/App.js)
XO Capital Tech Writers
Published: 2021-11-09 02:38:41

We really need awesome developers who can write fun and cool tutorials. Posts should be around 1000 words. Can be a little shorter if it's full of nice images, etc. We're looking for really cool tutorials on building cool stuff with sheet.best and screenshotapi.net!

For more information click the link below.

https://airtable.com/shrN6S3NMZ7oxRXTt

You may also send us an email at julius@xoxo.capital.
Data Decryption and Encryption using AES
Tags: coding, blockchain, programming, cybersecurity
Published: 2021-11-09 02:25:43

---
title: Data Decryption and Encryption using AES
published: true
description: To learn about basic data encryption and decryption with 
tags: coding, blockchain, programming, cybersecurity
//cover_image: https://direct_url_to_image.jpg
---


In this post we are going to do a basic data encryption and decryption using OpenSSL.

## To encrypt the data
First, lets create a plain text file with a simple text in it
```
$ echo TextDataToEncrypt > message.txt
```
And we have successfully generated a text file!

Next we are using 256-bit AES in CBC mode to encrypt the file:
```
$ openssl enc -aes-256-cbc -in message.txt -out message.bin
```
It will then ask you to enter your password for the encryption:
```
enter aes-256-cbc encryption password:
Verifying - enter aes-256-cbc encryption password:
``` 
After that a file message.bin containing the encrypted data from the message.txt file will be generated.

We can view this file:
```
$ cat message.bin
```

It is desirable to encode the binary file in a text format for compatibility/interoperability reasons.
A common one is base64.
This is how to create base64-encoded message:
```
$ openssl enc -base64 -in message.bin -out message.b64
```
We can then view the file:
```
$ cat message.b64
U2FsdGVkX1/Xe/SswefSAEA6z3cykrRZOFEFwIvREwQTY=
```


## To decrypt the data
Here we are decrypting text data from message.bin:
```
$ openssl enc -d -aes-256-cbc -in message.bin -out message.dec
```
It will ask you to enter the password you've entered before:
```
enter aes-256-cbc decryption password:
```
It will then generate a decrypted file (message.dec).  We can view the decrypted text by running the command:
```
$ cat message.dec
TextDataToEncrypt
```

And that's it!

Source: Mastering Blockchain. I don't own any of these information, I am just sharing.
Mapa Interactivo Con Python
Tags: python, r, programming, leaflet
Published: 2021-11-09 01:58:40

Proyecto personal elaborando un mapa interactivo con el lenguaje de programación Python, el mismo esta creado con un conjunto de datos que obtuve de shapefiles de http://www.datos.gob.do/ y https://www.one.gob.do/ con el fin de explotar la información en capas de los centros SNS dentro de las provincias, municipios y sectores del país, y con esto mostrar todas la ventajas que se puede obtener con el buen uso de esta potente herramienta.
Mas información para aprender a desarrollar este tipo de mapas interactivos aqui --> https://bit.ly/Suscribete_MDS
Prepare your Rust API docs for Github Pages
Tags: beginners, tutorial, rust, github
Published: 2021-11-09 01:30:45

Rust comes with a built-in documentation system, [`rustdoc`](https://doc.rust-lang.org/rustdoc/what-is-rustdoc.html).  It's great, use it.

Github comes with a built-in web hosting service, [Github Pages](https://pages.github.com/).  It's great, use it.

To use Github Pages, you can either create a directory in your repository to host your deployed web content or a separate branch and then activate the feature in the "Pages" section of your repository settings:

![settings screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8lir12pnvm9v9v9q1go.png)

Great!

You get a directory located at `<project>/target/doc` when you run `cargo doc` to generate your Rust documentation.  It contains the complete web content ready to publish.  If you execute `cargo doc --open`, your default browser will open up and show you what it generated.

Unfortunately, this folder can't be copied strictly as-is.  If you try, you'll get a 404.  This is because Github Pages is looking for an `index.html` file in the root directory of wherever it's pointed.  However, `cargo doc` created a _subdirectory_ for your crate specifically, where `index.html` lives.  Here's my example for a Rust package called `build_wheel`:

```txt
$ tree target/doc/
target/doc
├── ayu.css
├── brush.svg
├── build_wheel
│  ├── all.html
│  ├── fn.build_wheel.html
│  ├── index.html          <-- RIGHT HERE
│  ├── sidebar-items.js
│  ├── struct.Config.html
│  └── struct.Tag.html
├── clipboard.svg
/* ... etc, etc... */
```

Uh-oh, it's nested.  Github can't find it.  You can't just make a symbolic link to an `index.html` in the root directory because all the relative links inside will break.

Luckily, the fix is easy.  You simply need to create an `index.html` that reroutes where you want.  This file only consists of one line:

```html
<meta http-equiv="refresh" content="0; url=build_wheel">
```

This file uses the [`http-equiv`](https://www.w3schools.com/tags/att_meta_http_equiv.asp) meta attribute to point immediately to the `build_wheel` subdirectory and load the `index.html` file found there.  Just replace the directory name with the name of your package.

You can easily automate this in a simple script:

```sh
cargo doc --no-deps
rm -rf ./docs
echo "<meta http-equiv=\"refresh\" content=\"0; url=build_wheel\">" > target/doc/index.html
cp -r target/doc ./docs
```

Feel free to get as fancy as you want for pulling the actual name. I've just hardcoded it ¯\\_(ツ)_/¯.

When Github Pages tries to build your content, now it will find this root index page.  Users will load this page and immediately refresh the page you intended to display, and all the internal links generated by `rustdoc` will work as expected.

Neat.

Cover photo by [Kelly Sikkema](https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/instructions?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
100 días de código: 6, el camino a seguir para ser un desarrollador full stack
Tags: spanish, webdev, career, 100daysofcode
Published: 2021-11-09 01:15:50

¡Hey, hey, hey!

Cuando alguien comienza a programar casi nadie se detiene a pensar en preguntas como ¿Cuál es el mejor camino que debe seguir? ¿Cómo debería hacerlo? ¿Cuál es mi motivación?

Es ahí cuando al pasar el tiempo y aprender lenguajes y frameworks el camino se pierde y se va como un tornado sin un destino, solo atravesando lugares sin darse cuenta hacia donde va. 

No lo digo porque estar generalizando si no porque eso es lo que me paso a mi. 
Hace tiempo que realmente no me he dado cuenta de que necesitaba un camino a seguir y agradezco a [Rammina](https://dev.to/rammina) una vez mas porque me mostro una guía con la que realmente siento que puedo superar el reto de convertirme en un desarrollador full stack.

La guía es la siguiente [The odin project](https://www.theodinproject.com/).

En ella me encontré con bastante contenido que además de ser gratuito siento que realmente me puede ayudar a ir en un camino mas correcto para lograr mi meta.

Cabe destacar que la guía esta en ingles pero el traductor integrado en Google Chrome hace lo suyo y con ello logro comprender todos los materiales que contiene. 

Es curioso porque a pesar de que ya había conocido guías como freecodecamp o cursos similares lo que te encuentras en ella es mas una experiencia porque en ella te hablan de entrevistas y motivación entre otras cosas además del código en el cual puedes encontrar proyectos que te ayuden a crear un historial de tus progresos en el aprendizaje. 

Cabe destacar que esto no es publicidad ni mucho menos, no se si desean remuneración económica con el trabajo que puedes encontrar pero desde luego es completamente opcional. Sin duda te lo recomiendo si quieres aprender desarrollo web full stack.

Ahora sin mas preámbulo volvamos a la sección regular donde explico cuales son los logros.

### Hoy:
- Comencé a practicar Touch typing para mejorar mi velocidad de escritura en el teclado.
- Escribí mi motivación para volverme un desarrollador full stack.
- Termine con el diseño de mi pagina del cual les dejo ver algunas imágenes abajo.
![diseño](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2zg7h71i9g1ds226lm1.png)
- Comencé a codificar mi pagina web personal con tecnologías básicas como HTML, Css y JavaScript ya que realmente no necesita el uso de frameworks pues es una pagina sencilla.
- Avance en la guía de the odin project.
- Aprendí a afrontar y prepararte para una entrevista de trabajo.
- Aprendí las fases de aprendizaje de software como lo son:
 - La luna de miel de la mano(The Hand Holding Honeymoon).
 - El acantilado de la confusión(The Cliff of Confusion).
 - El desierto de la desesperación(The Desert of Despair).
 - El auge de lo impresionante(The Upswing of Awesome).

Y muchas cosas mas!

Espero que les haya gustado este blog, recuerden que esto **no es una guía**.

Que tengan bonita noche y mucho éxito con sus proyectos!
quick textures without extra files in Phaser3
Tags: gamedev, phaser3, javascript
Published: 2021-11-09 00:51:48

---
title: quick textures without extra files in Phaser3
published: true
description: textures in phaser3
tags: gamedev, phaser3, javascript
//cover_image: https://direct_url_to_image.jpg
---

A really quick simple trick to generate textures to use in Phaser3.

You can use simple arrays of strings. The values are hexadecimal. You call another method that will generate the texture from the strings. 

```javascript
export let  bar = [
  "11111111111111111111",
  "1.FEDCBA9876543210.1",
  "11111111111111111111",
];
this.textures.generate("bar", {
    data : bar,
    pixelWidth : 16
});
this.textures.generate("bar8", {
    data : bar,
    pixelWidth: 8
});

```
Once you have the textures generate with the keys. Then you can use these as if they were image files all along.

```javascript
let img = this.add.image(0,0,"bar");
img.setOrigin(0,0);

let img2 = this.add.image(0,64,"bar8");
img2.setOrigin(0,0);
```

The palette values look like they come from here
https://androidarts.com/palette/16pal.htm

The Phaser3 documentation calls this Arne16. See here: https://photonstorm.github.io/phaser3-docs/Phaser.Textures.TextureManager.html