teleren/devto huggingface dataset:
Understanding the useRef hook in react
Tags: javascript, react, hooks, beginners
Published: 2022-12-25 21:24:37

The useRef hook in React is a way to access the properties of a DOM element in a functional component. It allows you to create a mutable object that persists across re-renders of the component.

Imagine that you are a painter and you are creating a new painting. You have a canvas and a paintbrush, and you want to keep track of the current color of the paint and the position of the paintbrush on the canvas. To do this, you can use the useRef hook like a palette and a paint tray.

Here is an example of how you might use the useRef hook to access the properties of a DOM element in a functional component:

```
import { useRef } from "react";

function Painting() {
  const canvasRef = useRef(null);
  const paintbrushRef = useRef(null);

  function handlePaintbrushMove(event) {
    const { x, y } = event.target.getBoundingClientRect();
    paintbrushRef.current.style.top = y + "px";
    paintbrushRef.current.style.left = x + "px";
  }

  function handleColorChange(event) {
    paintbrushRef.current.style.backgroundColor = event.target.value;
  }

  return (
    <div>
      <canvas ref={canvasRef} />
      <div
        ref={paintbrushRef}
        className="paintbrush"
        onMouseMove={handlePaintbrushMove}
      />
      <input type="color" onChange={handleColorChange} />
    </div>
  );
}


```
In this example, the useRef hook is used to create a canvasRef and a paintbrushRef object. The ref attribute is used to assign the DOM element to the ref object, and the current property is used to access the properties of the DOM element.

The handlePaintbrushMove function uses the getBoundingClientRect method to get the position of the paintbrush element on the canvas, and the style property is used to update the top and left CSS properties. The handleColorChange function uses the value property of the input element to update the backgroundColor CSS property of the paintbrush element.

I hope this helps to clarify the concept of the useRef hook in React.
5 Fun JetBrains Plugins to Enhance Your Development Experience
Published: 2022-12-25 23:35:34

_As a developer, it's important to not only focus on productivity and efficiency, but also to have a little bit of fun while you work. JetBrains has a wide range of plugins available that can add a touch of whimsy to your development environment, while also potentially boosting your productivity. Here are five fun JetBrains plugins worth checking out:_

## 1. Nyan Progress Bar

> This plugin adds a colorful Nyan Cat progress bar to your JetBrains IDE. Not only is it visually pleasing, but it can also provide a quick and easy way to see the progress of your build or test run. Plus, who doesn't love Nyan Cat?



![Nyan Progress Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuv6ydrjqzqf0p4zqhtk.png)





## 2. Power Mode II

> This plugin adds special effects to your coding experience, such as particle explosions and screen shaking, every time you type a specific character or combination of characters. It's a great way to feel like a coding superhero as you knock out lines of code.

![Power-Mode-II](https://plugins.jetbrains.com/files/8251/screenshot_15884.png)

## 3. Background Image Plus

> If you spend a lot of time in front of your computer screen, you may appreciate having a little visual stimulation. Background Image Plus allows you to customize your JetBrains IDE with a personal background image. Not only can this help keep you motivated, but it can also make your workspace feel more personalized.


![Background Image Plus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdnps8xobjkb3zwrldc2.png)



## 4. StopCoding

> Sometimes, it's easy to get lost in the coding process and lose track of time. StopCoding can help you stay focused and avoid burnout by reminding you to take breaks. You can customize the interval and duration of your breaks, as well as the messages that appear.


![StopCoding](https://plugins.jetbrains.com/files/15740/screenshot_02073d1a-cc87-419c-9643-0799a7c9bb90)



## 5. WakaTime

> WakaTime is a great plugin for tracking your coding activity and productivity. It records how much time you spend coding, what files you work on, and even which programming languages you use. This information can be useful for identifying patterns in your work habits and finding ways to optimize your workflow.

![WakaTime](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgmi58i7t06ksmhymhvg.png)

---

There you have it, five fun JetBrains plugins that can enhance your development experience. Whether you want to add some visual flair to your code editor, improve your productivity, or just have a little bit of fun while you work, these plugins have you covered. Give them a try and see how they can make your development workflow more enjoyable.
SQL🔥Get Expertise in SQL with These Top Free Courses💯🏆
Tags: sql, database, datascience, beginners
Published: 2022-12-25 23:35:22

- There are many great SQL courses and certifications online.

- The best SQL courses and certifications are typically offered by large universities or certification bodies.

- However, not all of them are free.

- Here are some of the best courses available.


🎥[Courses link:](https://www.youtube.com/watch?v=00loCpVmozI)

### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Red Flags 🚩 to watch out for before joining any bootcamp in Nigeria.
Tags: webdev, beginners, programming
Published: 2022-12-25 23:10:39


In the past, if you wanted to be a software engineer, you either got a computer science degree or studied part-time and read how-to books in your spare time. Both approaches take years, and there's no guarantee that you'll get a job immediately after completing it.
Companies now need programmers. They don't have the resources to train new programmers. And non-technical people looking to change careers don't have time for a four-year degree. Join a coding boot camp. There has been an influx of bootcamps in Nigeria in recent years. Many of them charged exorbitant fees and promised huge post-training benefits to attract many innocent, humble but enthusiastic individuals to the program, but only those students graduated from the boot camp. , Faced with the reality of overwhelming employment rates.The picture drawn in most of these boot camps is completely different from the reality of the field, so try to join one of these boot camps Students should conduct thorough background checks to avoid becoming victims of well-planned lies. 
There are several red flags to watch out for before joining any tech bootcamp. Here are a few:

1. High tuition costs: While the cost of a tech bootcamp can vary widely, be wary of programs that charge excessively high tuition fees. Consider whether the cost of the program is justified by the value it provides, such as job placement rates and the earning potential of graduates, former students of these programs always have better view on this, so contacting few of them to sample their opinions is a great way to find answers.

2. Unrealistic job placement guarantees: Some bootcamps may claim to have a high job placement rate, but be sure to do your own research and verify these claims. Consider asking to speak with recent graduates or reaching out to alumni to ask about their experiences finding jobs after completing the program.

3. Lack of transparency: Be wary of programs that are not transparent about their curriculum, faculty, or job placement rates. It's important to have a clear understanding of what you'll be learning and who will be teaching you before committing to a bootcamp.

4. No trial period or money-back guarantee: Some tech bootcamps offer a trial period or a money-back guarantee to allow students to try out the program before committing fully. Look for programs that offer this type of assurance to ensure that you can test out the program before making a long-term commitment.

5. Poor reviews: Do some research and read reviews from past students to get an idea of what their experiences were like. If you see a lot of negative reviews or complaints, it may be a red flag that the program is not meeting the needs of its students.
Poor man's Github Copilot - Part 1
Tags: webdev, vscode, programming, opensource
Published: 2022-12-25 23:02:49

Couple days ago Open AI released ChatGPT and the game of AI changed forever. The abilities that ChatGPT has shown are exceptional. It was able to generate, explain and comment out code like no other AI and this got me thinking, why not create a VS Code extension similar to Github Copilot.

So I started my journey with no actual experience of creating a VS Code extension. Which in simple terms just means that I opened youtube and searched `How to create a VS Code extension`. Thankfully enough I found a really helpful guide by [Ben Awad](https://www.youtube.com/@bawad) and it gave me a solid start.

Long story short, I created an open source extension OpenPliot. I tend to release the extension later this week as I'm still building it. At the moment I'm just able to generate comments by the selected code.

[Check it out in action](https://youtu.be/lTelBPzFRRk)

Check out the repo [here](https://github.com/ShakeebAftab/openpilot)

If anyone want's to collaborate, please hit me up at [ShakeebAftab](https://www.linkedin.com/in/shakeeb-aftab/)
tsParticles 2.7.1 Released
Tags: javascript, typescript, webdev, showdev
Published: 2022-12-25 22:52:54

## tsParticles 2.7.1 Changelog

### New features

- Added loop options to sounds audio values
- Added volume buttons to sounds plugin

### Other Changes

- Moved out some plugin specific code from the engine to the dedicated plugin

--

## Social links

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [WhatsApp](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

---

{% github matteobruni/tsparticles %}
Laravel creates an Admin API from scratch - Part 1 - Installation
Tags: php, api, laravelframework, laravel
Published: 2023-01-02 19:44:20

---
title: Laravel creates an Admin API from scratch - Part 1 - Installation
published: true
date: 2022-12-25 22:24:45 UTC
tags: php,api,laravelframework,laravel
canonical_url: https://blog.devgenius.io/laravel-creates-an-admin-api-from-scratch-part-1-installation-91e8651514ae
---

[![](https://cdn-images-1.medium.com/max/2600/0*9eP6VB5MKC6KMuEd)](https://blog.devgenius.io/laravel-creates-an-admin-api-from-scratch-part-1-installation-91e8651514ae?source=rss-17217f29618a------2)

Laravel Sail & Breeze API Installation

[Continue reading on Dev Genius »](https://blog.devgenius.io/laravel-creates-an-admin-api-from-scratch-part-1-installation-91e8651514ae?source=rss-17217f29618a------2)
Installing Ansible on AWS EC2 Instance
Tags: aws, ansible, devops, cloudskills
Published: 2022-12-25 22:05:39

Here in this blog post I will show you how to install Ansible on an AWS EC2 instance.

 Bellow are the pre requisites 
 

1. Have an AWS account
2. Spin and EC2 instance and connect to it via ssh or directly from your aws console . 

 For the purpose of this post I created an aws ubuntu instance.


  After connecting to your instance run the commands bellow. This will make sure that your instance is up to get and that you got access to Ansible repos for install.

```
sudo apt update 
sudo apt-add-repository -y ppa:ansible/ansible

```
 Once the steps above are done, now you may get started with the real deal by installing Ansible with the command bellow 

```
sudo apt-get -y install ansible
```

After that, Ansible will be installed on your instance . You can now check the version with the command below 

```
ansible --version
```
 You will get the version of ansible installed along with the path to the configuration file.


![asksouleyAnsibleVerion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvlzo810iw1dytaa3yro.JPG)

 Since the main goal of using Ansible is to automate our resource provisioning process, we will need to have boto3 installed. To learn more about boto3 , check my other blog post here

 To install boto 3, just make sure that your instance is up to date one more time and running the command bellow 

```
sudo apt update
sudo apt install python3-boto3
```
Just to make sure, you can also check that boto is installed by running the commands bellow 

```
Method 1: pip show boto3
Method 2: pip list
Method 3: pip list boto | greb boto
```

  Let me know if you like it .  I tried to make it as short as possible . Next will be how to  automate the creation of EC2 instance using Ansible. 

Like it? 
Follow me on [@asksouley](https://twitter.com/asksouley)
2022 Side Project: Teamzone
Tags: showdev, productivity, react, sideprojects
Published: 2022-12-25 21:46:46

---
title: 2022 Side Project: Teamzone
published: true
description: 
tags: showdev, productivity, react, sideproject
cover_image: https://user-images.githubusercontent.com/10219539/209482478-db867ce5-3a4e-431d-9221-718e0feeeb86.png

# Use a ratio of 100:42 for best results.
# published_at: 2022-11-29 23:54 +0000
---
Hello Devs,

I created a simple productivity tool called **Teamzone**.

Teamzone is a timezone web app for remote international teams. It allows you to see the local time of your teammates and quickly schedule meetings.

It's very simple to use.

- Login
- Create a team
- Invite teammates

I'm working on a feature that allows teammates to schedule countdowns for holidays and PTOs. I also plan to add Slack, Google meet, and Google calendar integrations.

Teamzone is powered by React, Prisma, and Apollo GraphQL.

GitHub: [Teamzone Frontend](https://github.com/usmansbk/teamzone-app)
Live: [Netlify](teamzone.netlify.app/)

Please give it a try and tell me what you think. Any feedback is appreciated.

Merry Christmas!
Top Reasons for Learning Javascript
Tags: beginners, discuss, javascript
Published: 2022-12-25 21:43:43

1. **It is a widely used programming language**: JavaScript is one of the most popular programming languages in the world, and it is used on a large percentage of websites and web-based applications. Knowing JavaScript can help you to develop skills that are in demand in the job market.

2. **It is a widely used programming language**: JavaScript is one of the most popular programming languages in the world, and it is used on a large percentage of websites and web-based applications. Knowing JavaScript can help you to develop skills that are in demand in the job market.

3. **It is versatile**: JavaScript can be used to build a wide range of applications, including web-based applications, mobile apps, desktop apps, and more. It can also be used to create interactive elements on websites, such as forms, games, and animations.

4. **It is easy to learn**: JavaScript has a relatively simple syntax, and it is a good language for beginners to learn. There are also many resources available to help you learn JavaScript, including online tutorials, books, and courses.

5. **It is constantly evolving**: JavaScript is an actively developed language, and new features are being added all the time. Learning JavaScript can help you to stay up-to-date with the latest developments in the field and to build modern, cutting-edge applications.

6. **It is used in many different industries**: JavaScript is used in a wide range of industries, including finance, healthcare, education, and more. Knowing JavaScript can open up new career opportunities in these industries and others.

Overall, learning JavaScript can be a valuable skill for anyone interested in programming and web development, as it is a widely used, versatile, and constantly evolving language that is used in many different industries.
Se aventurando em eletrônica #6
Published: 2022-12-25 21:36:31

 Entender os tipos de correntes que temos disponíveis é uma necessidade que eu precisava revisitar e entender alguns pontos para dar sequência aos meus estudos.

## Forma de onda
 Forma visual de representação da tensão ou corrente típica(não entendi o ponto do "típica") ao longo do tempo. O eixo x é o tempo e o eixo y é a tensão ou a corrente, podendo ser observado em aparelhos como o osciloscópio. 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvvvh82xz0l1ouhe4smt.jpg)

 **PS: Existem algumas formas de onda que poderiamos listar porém sinceramente no momento eu não consigo absorver então voltaremos a falar com isso mais detalhadamente no futuro**

## Corrente contínua(DC)
 Os elétrons se movimentam em uma única direção e de forma linear conforme podemos ver no gráfico a seguir:
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/405ia909slw7t275r7qa.png)
Exemplos de aparelhos que utilizam corrente contínua:
 * celulares
 * Lâmpadas
 * Carregadores
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msvwijv18uppnngs643l.gif)

**PS: Existe dois tipos de corrente continua(Corrente contínua constante e pulsante) mas não consegui representar então deixei de fora e revisitarei no futuro**

## Corrente alternada(AC)
 Os elétrons se movimentam oscilando entre  um ponto máximo, ponto zero, ponto mínimo e ponto zero novamente. causando uma dinâmica de inversão de polos.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhjgail24daiahefi8vu.png)
 Exemplos de aparelhos que utilizam corrente alternada:
 * Ventilador
 * Liquidificador
 * Aspirador de pó
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f9x39u7ui4478vx5fam.gif)

## Uma forma visual de comparar AC X DC

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

## Conclusão
 Esse é um assunto muito massa, mais pra frente desejo voltar e tentar entender como exatamente as duas formas fazem esses comportamentos de corrente e tensão acontecer, no momento vou ficar com a base superficial.

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

## Referência
* Videos

{% embed https://www.youtube.com/watch?v=dfNmTe9mqPQ %}
{% embed https://www.youtube.com/watch?v=JPVB_LPCeBc&t=471s %}
* Artigos 

[FORMAS DE ONDA ELETRÔNICAS - SENO, QUADRADO, TRIÂNGULO, RAMPA, ETC.](https://www.raisa.com.br/formas-de-onda-eletronicas-seno-quadrado-triangulo-rampa-etc)
[Corrente Alternada: Entenda como Funciona](https://www.citisystems.com.br/corrente-alternada/)
[Corrente contínua](https://www.todoestudo.com.br/fisica/corrente-continua)
I need help for some code optimization while using lambda
Tags: lambda, aws, python, docker
Published: 2022-12-25 21:04:52

I need help for some code optimization while using lambda. 
I am using a dockerized lambda(i.e. lambda using a container image). 
This docker image is made from a dockerfile that calls the lambda_handler function. 
This lambda_handler() is in python that calls two functions: load() and invoke()
load() loads an ML model and invoke() performs further computation on the model.
Whenever I test this lambda it runs successfully in approx 500 ms. 
I need to further optimize it and reduce the computation time.
To do this I need to restructure the code/lambda in a way that once the container is created and load() is called 
for the first time it takes approx 500 ms time as above. But, if the lambda runs again I should not need to call the 
load() function again and agin and I can directly call the invoke() and it should run in less time. 
So what I basically want is since I have already used load() function once, the loaded ML model  should be there in some memory so that I do not need to load it again 
Please let me if this possible and if yes pls let me know how I can achieve it. 
Also I am not aware that to achieve this, I would need to make some changes in the python code or in aws lambda function.
So please help me with this.
URL encoding
Published: 2022-12-25 21:00:23

This post was first published [on my blog](https://javascript.plainenglish.io/url-encoding-fb8e6ea4a1a4). For more details check it out.

In my last article I talked about what an URL is. In this article I’ll go a little bit further and talk in easy to understand way about what URL encoding is and why it is so important to URL encode.


Photo by NASA on Unsplash
URL was designed to make it as usable and interoperable as possible. Therefore the internet standard defines so called “unsafe characters”.

Examples for unsafe characters are:
The space “ ”, because they seem to disappear when printed or you don’t know how man space characters are there.
The pond/sharp character “#”, because it is reserved for the fragment (we covered what a “fragment” is here already).
The caret “^”, because not all network devices transmit this character correctly.

What is considered a safe and what an unsafe character is defined in the RFC 3986. RFC stands for Request for Comments. It’s a recommendation made by the IETF (Internet Engineering Task Force). Even though it is officially a recommendation only it is considered a de facto standard.

The RFC 3986 defines safe characters as alpha numeric characters in the US-ASCII and a few special characters like the colon “:” and the slash mark “/”.

If you want to transmit one of these unsafe characters, then you have to “percent-encode” or also called “URL encode” them. For example if you want to store on the server foo.com the file “^hello world.txt”, then the valid URL would look like: “http://foo.com/%5Ehello%20world.txt”

As you can see the caret “^” and the space “ ” have been replaced with “%5E” resp. “%20”. The characters after the percent characters “%” represent the corresponding hexadecimal number in the US-ASCII charachter table, i.e. “5E” and “20” are stands for “^” resp. “ ” in the US-ASCII table.

The full US-ASCII table can be found here.

Once these characters arrive at the server as a request it has parsed through an URL decoder. An URL decoder basically reverses the process of URL encoding. So, instead of having “%5E” or “%20”, you’ll have the caret “^” or the space “ ” character again.

Have you used URL encoding before? What kind of project was it? Do you have any questions? Comment below and let me know.

This article was first published on my blog. For more details or to support me, [read that article on my blog ](https://javascript.plainenglish.io/url-encoding-fb8e6ea4a1a4)
Web Server
Tags: webdev
Published: 2022-12-25 20:55:38

A web server is a computer system that stores and manages the content and functionality of a website. Web servers are an essential part of the modern internet, as they enable users to access and interact with websites and web-based applications.

## Web Server Working:
When you type a website's address into your web browser and hit enter, your computer sends a request to the web server hosting the website. The web server then responds by sending the website's content back to your computer, which your web browser displays for you to view.

There are several types of web servers, including Apache, Nginx, and Microsoft IIS. Each type of web server has its own set of features and capabilities and is designed to work with different operating systems and programming languages.

In addition to serving content, web servers can also handle other tasks, such as managing user sessions, handling security, and performing data processing.

## Here are some popular web servers, along with a short description of each:

- Apache HTTP Server: Apache is an open-source web server that is widely used on the internet.

- Microsoft IIS (Internet Information Services): IIS is a proprietary web server developed by Microsoft for use on Windows-based servers.

- NGINX: NGINX is an open-source web server that is known for its high performance and low resource usage.