teleren/devto huggingface dataset:
Creating Accessible Custom Components with React Aria: A Practical Example with Forms
Tags: beginners, tutorial, react, javascript
Published: 2023-07-18 22:12:07

As web developers, it is crucial to prioritize accessibility in our applications. In this blog post we will dive into how we can create custom components with react-aria hooks to make accessible components. React-aria separates the behavior and accessibility implementation for common UI components into React Hooks. This makes it easy to get the behavior, accessibility and internationalization for free. Using react-aria allows you to build components more quickly and ensures that they will work well across mouse, touch, and keyboard interactions as well as with screen readers, and other assistive technology. 

## Let's Get Started!

React Aria leverages the power of React hooks to seamlessly integrate accessibility into components. To incorporate accessibility into a component, there are two main steps. Firstly, you need to obtain a reference to the component you want to enhance with accessibility features. For example, if you have a button component, you can use the useButton hook from React Aria to access its accessibility-related functionalities. Secondly, you can spread the props provided by the useButton hook into the component to ensure accessibility support. This approach ensures that the component is properly enhanced and adheres to accessibility standards.

Here is the example component from my [codesandbox](https://codesandbox.io/s/react-aria-example-t37s7m?file=/src/components/Button.tsx:1135-1467):

```
export default function ThemedButton(props: Props) {
  const ref = useRef();
  const { buttonProps } = useButton(props, ref);
  return (
    <Button
      ref={ref}
      {...buttonProps}
      text="#ffffff"
      color={colors.primary}
      style={props.style ? props.style : null}
    >
      {props.text}
    </Button>
  );
}
```
Now that we have our custom button component set up, we can utilize it to leverage the accessibility features provided by React Aria. By using this component, we can effortlessly incorporate essential accessibility functionality without the need for manual implementation. Let's take a look at an example:

```
// Usage example:
function App() {
  return (
    <div>
      <Button onClick={() => console.log('Button clicked!')}>
        Click Me
      </Button>
    </div>
  );
}
```

In conclusion, this blog post provided a concise demonstration of how React Aria hooks can be utilized to enhance the accessibility of a custom button component. However, there are many more exciting possibilities to explore with React Aria for implementing accessibility in various components and scenarios. I encourage you to visit my [CodeSandbox](https://codesandbox.io/s/react-aria-example-t37s7m) example where you can delve deeper into the world of accessibility-driven development. Feel free to experiment, modify the code, and adapt it to suit your specific requirements. Let's embark on this journey together, continuously striving to build inclusive and accessible web applications. Together, we can create a more inclusive digital experience for all users.
Our Journey In The Open Source World - spyone
Tags: javascript, opensource, github, git
Published: 2023-07-18 22:00:00

Do you know we built an awesome caching library for Node at Jointly? No?! Well, check [this](https://dev.to/cadienvan/disrupting-the-node-caching-panorama-our-journey-in-the-open-source-world-cache-candidate-4gnb) out!

Today we want to present you our latest fatigue, *spyone*!

_spyone_ is a tool that generates a JSON heatmap of any Git repository's commits showing most edited files.  
It comes from the italian word _spione_, which means _spy_.

Please, keep in mind this project is not perfect. It was made to analyze our most edited files to create some sort of `heatmap` of the technical debt of our internal projects.

## What does it do?

This script downloads any Git repository and extracts statistics from its commits. The resulting data is then sorted by commit count, and if there is a tie, by the sum of additions and deletions in descending order. The result is opened in your default browser and you're able to save it in any location on your computer.

## Usage

To use it, run the following command:

```bash
npx @jointly/spyone <repo-url> <days-to-cover> <branch-name> <output-format>
```

The JSON output opens in your default browser.

### Parameters

- `repo-url`: the URL of the GitHub repository to extract statistics from. This can be either an https or ssh URL.
- `days-to-cover`: the number of days before today to consider when extracting data from commits. We suggest 30 for highly updated projects and 90 days for common day-to-day work projects.
- `branch-name` (optional): the name of the branch to consider. Defaults to `main`.
- `output-format` (optional): Accepts {html|json}. Defaults to `json`.
Day 785 : Marching Orders
Tags: hiphop, code, coding, lifelongdev
Published: 2023-07-18 21:30:19

_liner notes_:
- Professional : Pretty chill day. Had a meeting to review the updates I made to some API documentation. It was good to get another set of eyes to look at it. For the rest of the day, I worked on an upcoming blog post. Made some progress.

- Personal : Went through some tracks for the radio show. Did some work on my side project. Got listing data from the backend working. Next is to get a selected session into a form so that the info can be updated and then re-saved to backend.

![A metal walkway in Whangarei Falls, New Zealand leading to a forest.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17e3dlltocr85rg69hin.jpg) 

Going to eat dinner. Check out some tracks for the radio show. For my side project, I want to get the selected session to show up in a form so that some of the info can be changed and then have that info be sent to the backend. I'll see how far I can get. I have my marching orders, time to get started!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 3UKritOtMAE %}
Overwhelmed? Try this! - Part 2 - One-task-at-a-time
Tags: management, mentalhealth, productivity, programming
Published: 2023-07-18 21:27:52

> In this series, I describe all of the different methodologies I employ and encourage others to try to feel less burnt out, more focused and ultimately feel better during their working day.  Most of these are also job-agnostic so non-technical people - feel free to read on!

## What?

The phrase "I am a natural multitasker" or "I just juggle stuff all day" goes straight through me.  If you're a person who says this, I can say with relative certainty that you may do some tasks concurrently, but you do **none** of them well.  It sounds insane for me, a serial single tasker to say this now but **you can only do one thing at a time**.

## Why?

As you climb up the seniority ladder you will ultimately be leaned on more for your expertise, guidance and if you're technical, debugging.  More distractions, more people, more demand = evitable context switching.  You open Slack/Teams or whatever IM client in the morning and you're presented with a Christmas tree of chatter; it happens (*there's stuff as an organisation you can do to mitigate this - more on that later...) - or if you're still working in the 90s, you're inbox is full of "demanding" emails.

So, why is it bad to rifle through all of these as fast as possible, context-switching as much as possible because the Christmas tree lights need to be individually turned off?

Well here's why:

1. You **will** miss important contextual details on your road to mark things as read
2. You **will** forget about that "5 minute thing" you said you'd do "soon"
3. You **will** overcommit to stuff you don't have time for

So what can you do?:

1. Spend X amount of time (usually minutes prioritising) - For this I have a personal task backlog which is constructed and reprioritised throughout the day.  Those familiar with Agile should be familiar with a backlog and also familiar that personal backlog items belong nowhere near the Product backlog.  For those not familiar, in simple terms, it's a list in which the order of importance can change dependant on demands.
2. Once prioritised - I determine the steps to completion for the task.  A task is not always immediately and solely achievable; sometimes it involves collecting people or third parties and arranging dedicated sessions. 
3. I "complete" that task and that task ONLY - that task may be completed by scheduling a meeting, emailing a third party or dealing with an issue immediately and solely by me.  Either way; a task completion is a path forward, or a direct resolution.
4. I move onto my next task, in priority order.

I have scheduled appointments set with myself for personal backlog repriorisation throughout the day.

Doing the above means I suffer less from context-switching, over-promising and I make sure that my focus is 100% on the task I am working on.
Treasure Hunt - Engineering | Jul 2023
Tags: programming, computerscience, newsletter, webdev
Published: 2023-07-18 21:19:45

This will be the first post of a series of posts I will call *Treasure Hunts*. In each post, I will showcase 5 items that caught my attention (articles, libraries, any kind of link/reference really). This post will be a *Engineering Treasure Hunt*, where I list items that are not related to a specific topic. In the future, there will be topic specific *Treasure Hunt* series (ruby, linux and containers, databases, go). Hope you enjoy this new format.

1. https://www.16elt.com/2023/01/06/logging-practices-I-follow/
    
    A few months ago I had a production bug that required reading logs to track down the root cause. Unfortunately, the logs were useless. Not only because of the quantity but also the quality. In a sea of logs, we need a way to track what logs belong to the same flow and get something useful from a flow that we can test against (an id, a date, SQL, etc.).
    
    This incident made me think about a better way to do it and experiment while developing the next features.
    
    The article is a great shortcut. It sums up what I had to find out on my own.
    

2. https://www.quantamagazine.org/how-to-prove-you-know-a-secret-without-giving-it-away-20221011/
    
    I first ran against zero-knowledge proofs while diving into the world of blockchains. But they are not only applicable in that space. If you think about a system, many proofs exist. Things like authenticating a user, verifying if a user owns an asset and anything that a user needs to prove.
    
    This article explains this topic while keeping things beginner friendly.
    

3. https://theconversation.com/how-to-test-if-were-living-in-a-computer-simulation-194929
    
    If you have ever thought about our existence, this article might interest you. It gives a really interesting take on the simulation hypothesis (aka we live in a computer simulation).
    

4. https://github.com/alex/what-happens-when
    
    Explains what happens when we search on the web browser. From when *the"g" key is pressed* until the end of the first browser paint.
    

5. https://endoflife.date/
    
    Sometimes it can be hard to know when a version of a package/service has reached the end of life or when the day will come. Recently, I found this site that gives us these important dates. This way, we can plan our upgrades instead of stressing out when a warning appears.
Building a YouTube Video Downloader in Python: A Step-by-Step Guide
Tags: automation, python, beginners, programming
Published: 2023-07-18 21:15:51

Building a YouTube Video Downloader in Python: A Step-by-Step Guide

In this tutorial, we'll explore how to create a YouTube video downloader using Python. YouTube is home to an endless array of videos, and having the ability to download them can be a useful feature. By the end of this guide, you'll have a simple yet powerful YouTube video downloader that can save your favorite videos directly to your computer.

Prerequisites:
1. Basic knowledge of Python programming.
2. Familiarity with the command line or terminal.

Let's get started!

Step 1: Install Required Libraries
To build our YouTube video downloader, we need to install the necessary libraries. We'll be using the `pytube` library, which simplifies the process of downloading YouTube videos. Open your terminal or command prompt and run the following command:

```bash
pip install pytube
```

Step 2: Import the Required Libraries
Once the installation is complete, let's import the required libraries into our Python script:

```python
from pytube import YouTube
```

Step 3: Define the Video URL
In this step, we'll define the YouTube video URL that we want to download. You can either hardcode the URL directly into the script or ask the user to input the URL. For this example, we'll hardcode the URL:

```python
video_url = "https://www.youtube.com/watch?v=your_video_id"
```

Step 4: Create the YouTube Object
Now, let's create a YouTube object using the URL we defined earlier:

```python
video = YouTube(video_url)
```

Step 5: Get Available Streams and Select Desired Quality
A YouTube video typically comes with multiple streams of different quality and format. We'll get a list of available streams and choose the one with the desired quality for download. For example, we'll select the highest resolution stream (720p) for this tutorial:

```python
stream = video.streams.get_highest_resolution()
```

Step 6: Download the Video
Finally, it's time to download the video. We'll use the `download()` method from the chosen stream to save the video to our computer:

```python
stream.download()
```

Step 7: Complete Code
Let's put all the steps together to get the complete Python script for our YouTube video downloader:

```python
from pytube import YouTube

video_url = "https://www.youtube.com/watch?v=your_video_id"

video = YouTube(video_url)
stream = video.streams.get_highest_resolution()
stream.download()
```

Conclusion:
Congratulations! You've successfully built a YouTube video downloader in Python using the `pytube` library. Now you can download your favorite YouTube videos and watch them offline whenever you want.

Remember, technology is an ever-evolving field, and there's always more to learn and explore. Happy coding!
Docker Descomplicado: Um Resumo Prático dos Principais Comandos
Tags: docker, devops, beginners
Published: 2023-07-18 21:15:30

O Docker é uma plataforma de código aberto usada para criar, gerenciar e executar aplicativos em contêineres. Nas linhas abaixo vamos apresentar um resumo dos comandos essenciais do Docker com explicações para cada um deles:

`docker version`

Exibe a versão do Docker instalada no sistema.

`docker info`

Fornece informações detalhadas sobre o ambiente do Docker, como número de contêineres, imagens, redes etc.

`docker pull <nome_da_imagem>`

Baixa uma imagem do Docker Hub ou de um registro especificado para o seu sistema local.

`docker build -t <nome_da_imagem> <caminho_do_Dockerfile>`

Constrói uma nova imagem a partir de um arquivo Dockerfile no diretório especificado, e atribui a ela um nome com a opção "-t".

`docker run <nome_da_imagem>`

Executa um contêiner a partir de uma imagem especificada.

`docker ps`

Lista todos os contêineres em execução no momento.

`docker ps -a`

Lista todos os contêineres, incluindo os que estão parados.

`docker stop <ID_do_contêiner>`

Interrompe a execução de um contêiner especificado pelo seu ID.

`docker start <ID_do_contêiner>`

Inicia um contêiner que esteja parado, especificado pelo seu ID.

`docker restart <ID_do_contêiner>`

Reinicia um contêiner em execução, especificado pelo seu ID.

`docker rm <ID_do_contêiner>`

Remove um contêiner especificado pelo seu ID. (O contêiner deve estar parado)

`docker rmi <nome_da_imagem>`

Remove uma imagem específica do sistema local.

`docker images`

Lista todas as imagens disponíveis no sistema local.

`docker exec -it <ID_do_contêiner> <comando>`

Executa um comando dentro de um contêiner em execução. A opção "-it" permite a interação com o terminal do contêiner.

`docker logs <ID_do_contêiner>`

Exibe os logs de um contêiner específico.

`docker buildx create --use`

Cria um novo builder do tipo Buildx e torna-o o builder padrão.

`docker-compose up`

Cria e inicia todos os serviços definidos em um arquivo docker-compose.yml.

`docker-compose down`

Para e remove todos os contêineres, redes e volumes associados a um arquivo docker-compose.yml.

`docker network create <nome_da_rede>`

Cria uma nova rede personalizada para os contêineres.

`docker system prune`

Remove todos os recursos não utilizados, como contêineres parados, imagens não utilizadas, volumes e redes não utilizados.

Esses são alguns dos comandos mais úteis do Docker para começar a trabalhar com contêineres. Lembre-se de que o Docker oferece muitos outros comandos e opções, e a documentação oficial é uma excelente fonte de informações adicionais.

[CLI Cheat Sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf) oficial do docker.
Edge Case: What to do when you need to push data to front-end with formatting unaffected. The Pre tag
Published: 2023-07-18 21:01:53

When I was working on a personal project I ran into an edge case that required me to output my information on the front-end the same way it was coming in on the backend. 

There were no good resources to display information as such, but after some digging I discovered the (`pre`) tag. 

In React, the (`pre`) tag is used to render preformatted text, preserving any whitespace and line breaks within it. To use it, simply create a component or element in your JSX code and wrap the desired preformatted text with the (`pre`) tags. For example:

```
function PreformattedText() {
  return (
    <pre>
      This is an example of preformatted text.
      It will preserve all whitespace and line breaks.
      Useful for displaying code snippets or structured data.
    </pre>
  );
}
```
When the component is rendered, the text inside the (`pre`) tags will be displayed exactly as it is written in the code, maintaining indentation and formatting. This is particularly helpful when presenting code blocks or any content that requires precise visual representation.

Happy coding!
Ruby .sort and .sort! What's the difference??
Tags: beginners, ruby
Published: 2023-07-18 20:06:37

**Hello friends,**


Today I learned something interesting and helpful.  If you didn't know, in Ruby there are **Mutating** and **Non-Mutating Methods**.  Today, let's focus on the `.sort` and `.sort!` methods


**Mutating Method** `.sort!`
As you might expect, changes the value of an object.  When used on an array it sorts the elements in place, directly modifying the original array without creating a new one

```
# Mutating .sort! method
fruits = ['banana', 'apple', 'orange', 'mango']
fruits.sort!
puts fruits # ['apple', 'banana', 'mango', 'orange'] (sorted in place)
```

Notice how the original `fruits` array is now sorted alphabetically in place without the need for creating a new array.

**Non-Mutating Method** .sort
As you might expect, does not change the value of an object. When applied to an array, it returns a new array with the elements in ascending order, without modifying the original array. This ensures that the original order of elements remains unchanged.

```
# Non-Mutating .sort method
numbers = [5,2,8,3,1,7]
sorted_numbers = numbers.sort
puts sorted_numbers # [1,2,3,5,7,8
puts numbers # [5,2,8,3,1,7]
```

Knowing when to use `.sort` and `.sort!` is essential.  Use `.sort` when you want a new sorted array while preserving the original array's order.  Choose `.sort!` when you want to directly modify the original array.

Remember, using the correct method can make your code more efficient and maintainable.

I hope this helps!
"!" and "?" in Ruby Methods
Published: 2023-07-18 20:01:43

Thanks to a meeting with a student, I learned about some neat ways Ruby improves the readability of its code!

**Ruby methods ending with `!` indicates that it will modify the object it's acting on.**

For example, using the `reverse` method will return the array with the items in the reversed order. When you call the array again, it will return as it originally was.

```
a = ["red", "yellow", "blue", "pink"]
a.reverse 
# => ["pink", "blue", "yellow", "red"]

a = ["red", "yellow", "blue", "pink"]
```
However, when you add the `!` to the end of the method, it will overwrite it, and modify the array!
```
a = ["red", "yellow", "blue", "pink"]
a.reverse!
# => ["pink", "blue", "yellow", "red"]

a = ["pink", "blue", "yellow", "red"]
```


**Ruby methods ending with `?` indicates that it will return a boolean.**

```
4.odd? # => false
5.odd? # => true
6.even? # => true

```
react_strapi
Tags: webdev, react
Published: 2023-07-18 19:49:04


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/titg3wv89gi6eljme04l.png)
my project is a blog website made from react, strapi , mui. i have a home page that has a blogcontentpage components where blog component is displayed. amd when you click on a particular blog it redirects you to its content.
i am trying to fetch data from strapi as my backend server and i am using react for my frontend 
-i am not able to fetch my cover img no matter what i do i tested the url on postman i was able to see the image there, but its not found in the console log. that is 1 issue
-also i was able to fetch my blog content, its visible in postman as well as in the console but i am not seeing it on my display when i go to the link, it always says 'not found'.
can anyone help me with these two issues 
here is my github link
https://github.com/Sakshi-W/Blog_strapi_frontend.git
Command + R
Tags: ruby, beginners
Published: 2023-07-18 19:47:56

Becoming a Teaching Assistant for DPI's Intro to application development course has been a great refresher for me since completing the three-month in-person application development course in May. Being able to teach others about what I went through as being completely new to software development is a great way to share knowledge and refine my skills. As they say, the best way to learn is teaching. I hope to leverage this opportunity to better myself and communicate more efficiently with others.

Happy Coding!
Intersection on Word Association
Tags: todayilearned, beginners, day1
Published: 2023-07-18 19:31:33

Bash [bash] 

Verb: 
- *To strike with a crushing or smashing blow.* 
- *To hurl harsh verbal abuse at.* 


This was the first time I've ever heard the term `bash command`.


My initial instinct was to reminisce on my university days when I felt like bashing my head against the table after running a four hour organic chemistry lab and couldn't understand why my distillation wasn't running correct. Or why my percent error was over 200%. Or why when trying to print my lab report at the library someone had sent the printer to poster size and didn't revert it.    

All in all, I realized that frustration wasn't what the interfacing program was asking me to experience.  

I've come to learn that bash has another context that isn't listed by dictionary.com which to me appears to be a 100% error. However, Codecademy provides an excellent definition. 

 >A shell is a computer program that allows you to directly control a computer’s operating system (OS) with a graphical user interface (GUI) or command-line interface (CLI).

Bash, to someone who hasn't run a single line of code before yesterday, acts as a multitasking assistant that knows where everything is in your office. It runs simple or complicated scripts, can operate using less-resources, and overall can edit or create text files with ease. 

All together, `bash command` is almost the exact opposite of what I thought it was.