teleren/devto huggingface dataset:
Create a simple spinner with reactjs + styled-components
Tags: react, typescript, styledcomponents
Published: 2022-12-30 16:30:47


In this post, I will introduce a simple spinner that uses reactjs + styled-components.

Spinner
https://vdxkbn.csb.app/

[props]

```ts
interface SpinnerProps {
  width?: string;
  height?: string;
  borderWidth?: string;
  borderColor?: string;
  duration?: number;
}
```

Actually, the main part is `CSS` (styled-components).
Create an animation and passing it to a created style, SpinnerBody.

The structure is quite simple.
width, height, and boarderWidth can be `number` or `string | number`. I use `string` because I would like to pass the value with `rem` or `px`.

```ts
const spinnerAnimation = keyframes`
from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`;

const SpinnerBody = styled.div<SpinnerProps>`
  height: ${(p) => (p.height ? p.height : "4rem")};
  width: ${(p) => (p.width ? p.width : "4rem")};
  border: ${(p) => (p.borderWidth ? p.borderWidth : "4px")} solid #d1d5db;
  border-top-color: ${(p) => (p.borderColor ? p.borderColor : "#3b82f6")};
  border-radius: 50%;
  animation: ${spinnerAnimation}
    ${(p) => (p.duration ? `${p.duration}ms` : "800ms")} linear infinite;
`;

export const Spinner = (props: SpinnerProps) => {
  return <SpinnerBody {...props} />;
};

```


Codesandbox
https://codesandbox.io/s/spinner-with-reactjs-vdxkbn?file=/src/components/Spinner.tsx
Metaverse
Tags: webdev, web3
Published: 2022-12-30 18:13:58

What is Metaverse
The word Metaverse is derived from the two words Meta means “Different “ Verse means “the universe” .The whole word Metaverse Means Different universe This concept is run by many human being brains by the help of movies, Novels, Fock stories etc. Facebook also named there app meta In this metaverse You will login by your computer You will enter cyber world of computer in this metaverse universe you see the technology animation, Virtual reality.
Metaverse Advantages:

5G , and 5D images used in metaverse world You see the head glasses invented by google In Future New head glasses discovered the metaverse technology made a avatar of human being and this avatar is enter in new metaverse world you can perform the movement possible and impossible movement in this different universe called metaverse you can enter this world and you can also invite your friends in this metaverse world and this universe set by user own computer In this world you can attend actual business meetings. You will buy plots and doing business You can Play and earn by the world of metaverse you can doing this by virtually
New(bie) around here 👋
Published: 2022-12-30 18:08:54

Hello all around,
I'm delighted to see how much this space/app is helpful to new/advanced devs.
In case some is interested to share some opinions that can be helpful, I would love to learn more about web3 development, wanting to know which are the best tools to learn having in count the speed that the space and the code development goes. 
Also AI, a today and mostly in the future lots of development will be time saving with this artificial a applications, besides stable diffusion I don't know much, even this one has some great requirements.

Anyways,
The end of the year is right at the door
Have all a great new year and ++🍾
Github unwrapped 2022 video
Tags: github, beginners, git, webdev
Published: 2022-12-30 17:58:41

Unwrap your GitHub Year In Review video.

Check my github unwrapped 2022 video in above image section

if you want to make your github wnwrapped video go to this url

[https://www.githubunwrapped.com/](https://www.githubunwrapped.com/)
Instalación y configuracion de Jest + React Testing Library
Tags: react, vite, jest
Published: 2022-12-30 17:55:07

Apunte para configuración rapida de Jest en proyectos React creado con Vite

### En proyectos de React + Vite

1.- Instalaciones

```
yarn add --dev jest babel-jest \ 
               @bale/core @babel/preset-env @babel/preset-react 

yarn add --dev @testing-library/react @types/jest \ 
               jest-environment-jsdom
```

2.- Opcional: Si usamos Fetch API en el proyecto:

```
yarn add --dev whatwg-fetch
```

3.- Actualizar los scripts del **package.json**

```
"scripts: {
  ...
  "test": "jest --watchAll"
```

4.- Crear la configuración de babel babel.config.cjs

```
module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};
```

5.- Crear Jest config y setup:

**jest.config.cjs**

```
module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
}
```

**jest.setup.js**

```
// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch';
```
Learning C# For Beginners Tutorials
Tags: csharp, tutorial, beginners
Published: 2022-12-30 17:53:21

Hi Everyone! 

I've decided to start my Youtube channel which will host programming tutorials. I've started with C# for Beginners. If you are looking to learn how to program in C# or you are just curious, feel free to like and subscribe to my channel :). 

The playlist is short but I plan on uploading it almost daily. 
Let me know what you think about my new channel! THANK YOU! 

[CodeFilez C# Tutorials](https://www.youtube.com/@CodeFilez)
Great tutorial by @nsebhastian on .map()
Tags: javascript
Published: 2022-12-30 17:49:52

I really enjoyed this tutorial:

https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/

I especially appreciate the final video which goes into detail about the syntax and different arguments you can give the .map() method. 

Spoiler! Here's my solution to the final challenge in the third video. 

```
let bio = completeUserData.map(function(element, index, array) {
    return `"${index + 1}. ${element.firstName} is from ${element.additionalInfo.hometown}. 
    ${element.pronouns.main.capitalized} has a ${element.additionalInfo.pet.species} named 
    ${element.additionalInfo.pet.name}. ${element.pronouns.possessive.capitalized} favorite color is 
    ${element.additionalInfo.favoriteColor} and ${element.pronouns.possessive.lowerCase} favorite food is 
    ${element.additionalInfo.favoriteFood}. ${element.pronouns.possessive.capitalized} siblings are 
    ${element.additionalInfo.siblings.slice(0, -1).join(', ')} and ${element.additionalInfo.siblings.slice(-1)}.`
});

```
Ten Potential Career Paths For A Database Administrator (DBA)
Tags: dba, devops, database, job
Published: 2022-12-30 17:33:57

Data architect: A data architect is responsible for designing and implementing the overall data management strategy for an organization.

Data engineer: A data engineer builds and maintains the systems and infrastructure that enable data-driven decision making within an organization.

Business intelligence analyst: A business intelligence analyst uses data to generate insights and inform decision making within an organization.

Data scientist: A data scientist uses advanced statistical and machine learning techniques to analyze data and generate insights.

Read More: 
https://thedbadmin.com/10-new-job-transformation-for-database-admin-in-2023/
https://thedbadmin.com/10-new-job-transformation-for-database-admin-in-2023/
Tags: dba, database, job, 2023
Published: 2022-12-30 17:30:36

It is difficult to predict with certainty what the role of a database administrator (DBA) will look like in 2023, as it will depend on the specific needs and technological advancements of the organizations that employ DBAs. However, there are a few trends that may shape the role of a DBA in the coming years:

Increased focus on data security: With the increasing prevalence of cyber threats and data breaches, organizations will likely place a greater emphasis on data security and the role that DBAs play in protecting sensitive data.

More emphasis on data governance: As data becomes an increasingly valuable asset for organizations, there will likely be a greater focus on data governance and the role that DBAs play in ensuring the integrity and quality of data.

Greater use of cloud-based databases: As more organizations adopt cloud-based technologies, DBAs may need to become proficient in managing and optimizing cloud-based databases.

Increased use of automation and machine learning: DBAs may need to become proficient in using automation and machine learning technologies to optimize and manage databases more efficiently.

Overall, the role of a DBA is likely to continue evolving as new technologies and trends emerge. It is always a good idea for DBAs to stay up to date with the latest developments in their field and to seek out opportunities for professional development.

Read More: 
https://thedbadmin.com/10-new-job-transformation-for-database-admin-in-2023/
Efficient Way to Invoke All Editors in Git Bash on Windows
Tags: git, bash, productivity, linux
Published: 2022-12-30 17:29:33

Just kidding, it works on all OS as well. Just configure the correct directory upon setting this method.

Vim comes as a package when installing Git even though you choose other text editor during installation.

You invoke vim as `vi <filename>` in Git Bash cli.

Short and sweet. What about the other editors?

1. For GNU nano: `nano <filename>`

2. For Notepad: `notepad <filename>`

3. For Notepad++: `start notepad++ <filename>`

4. For `<your favourite editor>`: `start <your favourite editor> <filename>`

Isn't very efficient it seems. You can however change the main editor via git config. But only one main editor is allowed at once. 

Worry not, here's an efficient way around it to use all editors in Git Bash:

## Add Permanent Alias in Git Bash

Run Git Bash as administrator.

Open aliases.sh

```bash
$ cd /etc/profile.d
$ vi aliases.sh
```

Add alias in aliases.sh. For example, we add npp as an alias for Notepad++:

```bash
# --show-control-chars: help showing Korean or accented characters
alias ls='ls -F --color=auto --show-control-chars'
alias ll='ls -l'
alias npp='/c/Program\ Files/Notepad++/notepad++.exe'
```

p/s: Use `\` to escape spaces in the directory.

Add as many other editors as you like in the aliases.sh file. Just follow the format:

```bash
alias <YourAlias>='/YourProgramDirectory/YourEditor.exe'
```
Save the settings, close Git Bash and reopen it to activate the new configuration. Voila!

If it does not activated by chances in the future, source it and it will be activated again:

```bash
$ cd /etc/profile.d
$ source aliases.sh
```
As a bonus, this method also works to add any linux commands as alias too. For example, instead of `clear`, you can alias it as cls.

```
cls=`clear`
```

That's it folks, happy days!

So what are your favourite editor? Comment down below.

Cheers!
7 tips to measure and analyze JavaScript performance
Tags: javascript, webdev, productivity, programming
Published: 2022-12-30 16:17:31

Performance is an important consideration when developing a website or an app. Nobody wants an app that crashes or a website that doesn't load, especially when the users' waiting time is limited. According to Kissmetrics, 47% of website visitors expect a website to load in less than 2 seconds, and 40% will leave if the loading process takes more than 3 seconds.

Although JavaScript is a fascinating language to work with, it can have a negative impact on the performance of your website. With that in mind, here are seven methods for monitoring the performance of your JavaScript.

1. **Use the performance-related APIs in modern browsers**: Many modern browsers provide APIs for measuring and analyzing the performance of JavaScript code, such as the performance object and the `console.profile()` method.

2. **Use a JavaScript profiler**: A JavaScript profiler is a tool that can help identify performance bottlenecks in JavaScript code. Some popular JavaScript profilers include the Chrome DevTools Profiler and the Firefox DevTools Profiler.

3. **Use a performance monitoring service**: There are many services available that can help monitor the performance of JavaScript code, such as New Relic and AppDynamics. These services can provide valuable insights into the performance of an application.

4. **Use the browser's performance timeline**: The browser's performance timeline can provide detailed information about the performance of an application, including the time it takes for the page to load and the time it takes for individual JavaScript functions to execute.

5. **Measure the real-world performance of an application**: It's important to measure the performance of an application in a real-world scenario, rather than just in a controlled environment. This can help identify performance issues that may not be apparent in a controlled setting.

6. **Use synthetic performance tests**: Synthetic performance tests are tests that are designed to simulate the performance of an application under specific conditions. These tests can help identify performance issues that may not be apparent in real-world usage.

7. **Use benchmarks**: Benchmarks are tests that measure the performance of specific code snippets or algorithms. Comparing the results of benchmarks can help identify performance issues and suggest ways to improve the performance of JavaScript code.

---

## Conclusion
It is critical to strike a balance between code readability and optimization. Computers interpret the code, but we need to ensure that it can be maintained in the future by ourselves or others, so it must be understandable.

Remember that performance should always be considered, but it should never be prioritized over debugging and adding functionalities.

Sometimes, people really just care about what works.
How to fix permission-denied issues when executing homebrew commands
Tags: ddev, bugfixing, homebrew
Published: 2022-12-31 18:56:52

---
title: How to fix permission-denied issues when executing homebrew commands
published: true
date: 2022-12-30 17:17:10 UTC
tags: DDEV,bugfixing,homebrew
canonical_url: https://davidloor.com/2022/12/30/how-to-fix-permission-denied-issues-when-executing-homebrew-commands/
---

![person holding green and white pack](https://i0.wp.com/davidloor.com/wp-content/uploads/2022/12/rfkadkptt-a.jpg?resize=800%2C534&ssl=1)

I tried to update ddev to the latest version, using `brew upgrade ddev` in the terminal, and after each attempt I got a permission denied error.

The solution that worked is the following command:

```
sudo chown -R $(whoami) $(brew --prefix)/*
```
The Everyday Life of an HNG Intern; Isaac Ojerumu’s Story
Tags: beginners, programming, career, github
Published: 2022-12-30 17:17:07

**Task 5**
New tasks were awarded to members of the Backend Track in Team **Axle**, individually. Isaac’s task was to work on the project's; **The Engineering 360**, controller. 
A controller plays the role of the directive traffic between views and models in an MVC Framework.
This controller in question comprised four endpoints;

1. getCompanies(): This endpoint gives users access to all the companies featured on the software.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3t27zieqsy8jdbhxtqf.jpg)
2.UpdateCompany(CompanyRequest $request, $company_id): It allows the admin to carry out the act of editing the company’s details that are displayed on the software.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r45ioswjqxpa4opoyzvf.jpg)
3. byCompanyId($id): This carries out the function of searching for companies on the software by their ID.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn6qc3om1xdintj739d9.jpg)
4.getCompanyByUserId($user_id): This enables a user to search for a company using his\her own ID.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vg0x5r40w2ne9cpjnbi.jpg)
After finishing off with the controller and its endpoints, Isaac pushed his work to Github’s repository.
Dear reader, thank you for walking through this story with me. I hope that this episode and the series as a whole have been insightful, educative, and inspiring. See you on the next page.
Please, let's get in touch on Medium; **Zini Zada**, and Twitter; **Zada_Zini**

Link to the next episode: https://dev.to/zadazini/the-everyday-life-of-an-hng-intern-isaac-ojerumus-story-5h3j
Patrón anclado o fijo
Published: 2022-12-30 17:01:23

Utilizar un contenedor con un `max-width` es un patrón de diseño comúnmente utilizado en el desarrollo de aplicaciones y sitios web. El patrón consiste en utilizar un elemento contenedor con un ancho máximo para encerrar el contenido de la aplicación o sitio web. Esto se hace con el fin de evitar que el contenido se extienda demasiado en pantallas más anchas, lo que puede mejorar la legibilidad y la usabilidad.

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

Este patrón de diseño a menudo se conoce como "contenedor anclado" o "contenedor fijo". El término "contenedor anclado" se refiere a la idea de que el contenedor está anclado a un tamaño máximo y no se extenderá más allá de ese tamaño, independientemente del tamaño de la pantalla. El término "contenedor fijo" se refiere a la idea de que el contenedor tiene un tamaño fijo y no se redimensionará automáticamente en función del tamaño de la pantalla.

### Ventajas 😃
1. ✅ Ayuda a mantener la apariencia de la aplicación o sitio web consistente en dispositivos de diferentes tamaños.

2. ✅ Evita que el contenido se extienda demasiado en pantallas más anchas, lo que puede mejorar la legibilidad y la usabilidad.

3. ✅ Facilita la creación de diseños responsivos.

4. ✅ Ayuda a evitar que la aplicación o sitio web se vea desproporcionado en dispositivos de pantalla muy grande.

---

### Desventajas 🥹
1. Puede limitar la capacidad de la aplicación o sitio web para adaptarse a pantallas muy anchas.

2. Puede requerir el uso de media queries y otras técnicas de diseño responsivo para ajustar el tamaño del contenedor y otros elementos en función del tamaño de la pantalla.

3. Puede ser más difícil de implementar en algunos casos.

---

### Resumen 🤔 

> En resumen, utilizar un contenedor con un max-width puede ayudar a mantener la apariencia de tu aplicación consistente y mejorar la usabilidad en diferentes dispositivos.
Need To Know How To Exclude An Checkout Theme Config
Tags: shopify
Published: 2022-12-30 16:56:40

I will explain my situation to be clear:

 

I was creating a store for me on Shopify, and I was going to use an extern checkout config, but my store was made on Sense theme, an free theme that you can use for your store. However, this theme have a checkout config on his code that blocks my other checkout option, so I just cannot use this other checkout that I like to use. Anyone knows why this happens, and how I can solve this? I had searched all theme and shopify documentation to solve my problem, but It don't helped me. All API keys is ok too, both Yampi and Shopify have the determined URL links and passwords.

 

For more details: I was trying to use Yampi for my checkout. The other stores was going very good, but with this theme I just can't use this Yampi checkout
We’ve moved to Fosstodon 🦣
Tags: meta, mastodon, fediverse, socialmedia
Published: 2022-12-30 16:39:34

---
title: We’ve moved to Fosstodon 🦣
published: true
description: 
tags: meta, mastodon, fediverse, socialmedia
series: DEV Explores the Fediverse
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4f27ra5gybvv1hz23ie.png
---

Back in November, the DEV Team announced that we had begun exploring the Fediverse:

{% embed https://dev.to/devteam/devcommunity-now-available-via-toot-3ah3 %}

With the caveat that…
> We look forward to expanding our presence into new and exciting servers in the future — for now, this is our home for toots.

The time for that expansion has come! Beginning today, we’ll be Tooting from [@ThePracticalDev@Fosstodon.org](https://fosstodon.org/@thepracticaldev). 🥳🎉 

Because this is such a novel and exciting time in the social media sphere, and we here at DEV are particularly interested in the independent web as well as the potential of open source software, we wanted to let you in on how and why this decision was made.

We started on [Mastodon.Social](https://mastodon.social/about) for a few reasons:
- @ben had already made us an account there back in 2017. Thanks Ben!
- At the time, it was the fastest-growing and best-known Mastodon server.
- It was a topic-neutral place to start as we observed the growth of the wider Fediverse.
- We knew that we’d have the opportunity to switch servers fairly easily and at any time.

Here’s why we chose [Fosstodon.org](https://fosstodon.org/about) as our new landing spot:
- Our OSS roots run deep! We’re eager to contribute to the conversation in a space that’s oriented around open source and its potential.
- At ~49k active users (at the time of this posting), Fosstodon is a large server, but still much smaller than Mastodon.Social (~213k active users). We’re hopeful that being part of a smaller, more focused community will help us reach our community members more effectively.
- Fosstodon is primarily an Anglophone server, and our social accounts are run in English.

We're still cross-posting our Twitter feed to Mastodon using [moa.party](https://moaparty.com/) for now. We recommend checking it out if you're looking for a simple solution to expand your presence across platforms.

Ok, your turn: how did you decide where to make your home in the Fediverse? Have you considered moving?