teleren/devto huggingface dataset:
How To Improve Your Git Commit Messages Using Conventional Commits
Tags: frontend, git, webdev
Published: 2023-08-04 16:13:53

When working with code, explaining to others what we've done in our code is not easy. Writing commit messages to convey our changes can vary for each team member. Everyone has their own way of writing commit messages, and sometimes we don't know what to write in the commits.

Every team member communicates their changes differently, making it difficult to understand what changes have occurred. What if we established a standard or team agreement for writing commit messages?

The solution is to use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).

## Conventional Commits

Conventional commits are a specification that helps write semantic messages by following certain rules. These rules make it easy for us to know what and how to write our commits.

## Git Conventional Example

When writing a commit following the conventional commits guide, it has the following structure.

```typescript
type: scope: description or message
optional body
optional footer
```

The **type** expresses the intention, and the **scope** indicates the affected area. For example:

```bash
fix: (icon-library) 
Change the input prop of the state icon to match the identifier.
Refs: #jira-ticket-number or pbi
```

More options are:

* feat: new feature
    
* fix: when fix a bug.
    
* docs: documentation, edit markdown etc.
    
* chore: changes don't affect code or source code.
    

You have additional options such as test, revert, build, ci, styles, or BREAKING CHANGE. For more options, please refer to the [official documentation](https://www.conventionalcommits.org/en/v1.0.0/#specification).

## How I Write Conventional Commits?

I prefer to use an extension instead of writing every time or make it easy with a single click, integrating it into my IDE or terminal.

VSCode: [https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)


![push](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ceryn62wn9trrqi48oad.gif)

WebStorm: [https://plugins.jetbrains.com/plugin/13389-conventional-commit](https://plugins.jetbrains.com/plugin/13389-conventional-commit)

Terminal: [https://ttys3.github.io/git-cz/](https://ttys3.github.io/git-cz/)

## Recap

We learned how to use Conventional Commits to provide a standardized approach to writing commit messages, making it easier for team members to understand code changes.

I hope to use it with an extension in your IDE or Terminal for future projects.
How to solve ModuleNotFoundError No module named userena in error in Django
Tags: python, django, programming
Published: 2023-08-04 15:53:48

{% embed https://youtu.be/hl2WDFwfm4k %}
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tht23sfvi8lcx2qgkap0.jpg)

Hello again today I'm going to talk about a problem in Django
This problem occurs when you try to authenticate in Django
It may occur for other reasons
Anyway, I had this problem and I solved it in a very easy way

The first step is to stop the server
Then install this library

``` pip install django-userena-ce ```


The second step
After installation, restart the server
Now the problem has been solved 😎

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396
AI bulk image upscaler with Node.js
Tags: node
Published: 2023-08-04 15:53:13

---
title: AI bulk image upscaler with Node.js
published: true
tags: ['node']
canonical_url: https://sevic.dev/notes/ai-bulk-image-upscale-nodejs/
---

Image upscaling can be done using [Real-ESRGAN](https://github.com/xinntao/Real-ESRGAN), a super-resolution algorithm. Super-resolution is the process of increasing the resolution of the image.

Real-ESRGAN provides [Linux](https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesrgan-ncnn-vulkan-20220424-ubuntu.zip), [Windows](https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesrgan-ncnn-vulkan-20220424-windows.zip) and [MacOS](https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.5.0/realesrgan-ncnn-vulkan-20220424-macos.zip) executable files and models for Intel/AMD/Nvidia GPUs.

The snippet below demonstrates bulk image upscaling with scale factor 4 and using the `realesrgan-x4plus-anime` model.

```js
(async () => {
  const inputDirectory = path.resolve(path.join(__dirname, 'pictures'));
  const outputDirectory = path.resolve(
    path.join(__dirname, 'pictures_upscaled')
  );
  const modelsPath = path.resolve(path.join(__dirname, 'resources', 'models'));
  const execName = 'realesrgan-ncnn-vulkan';
  const execPath = path.resolve(
    path.join(__dirname, 'resources', getPlatform(), 'bin', execName)
  );
  const scaleFactor = 4;
  const modelName = 'realesrgan-x4plus-anime';

  if (!fs.existsSync(outputDirectory)) {
    await fs.promises.mkdir(outputDirectory, { recursive: true });
  }

  const commands = [
    '-i',
    inputDirectory,
    '-o',
    outputDirectory,
    '-s',
    scaleFactor,
    '-m',
    modelsPath,
    '-n',
    modelName
  ];

  const upscaler = spawn(execPath, commands, {
    cwd: undefined,
    detached: false
  });

  upscaler.stderr.on('data', (data) => {
    console.log(data.toString());
  });

  await timers.setTimeout(600 * 1000);
})();
```

### Demo

The demo with the mentioned example is available [here](https://sevic.dev/demos).
Removing Values from Lists with del Statements in python.
Tags: webdev, python, tutorial, beginners
Published: 2023-08-04 15:34:27

The del statement will delete values at an index in a list.All of the values in the list after the deleted value will be moved up one index. For example,enter the following into the interactive shell:

```
>>> spam = ['cat', 'bat', 'rat', 'elephant']
>>> del spam[2]
>>> spam
['cat', 'bat', 'elephant']
>>> del spam[2]
>>> spam
['cat', 'bat']
```
The del statement can also be used on a simple variable to delete it, as if it were an “unassignment” statement. If you try to use the variable after deleting it, you will get a NameError error because the variable no longer exists.
In practice, you almost never need to delete simplevariables. The del statement is mostly used to delete values from list.
Intro to Python - Day 5 - Encapsulation in OOP
Tags: python, beginners, programming, oop
Published: 2023-08-04 15:34:16

*Hi there. I'm a New York City based web developer documenting my journey with React, React Native, and Python for all to see. Please follow my dev.to profile or [my twitter](https://twitter.com/stonestwebdev) for updates and feel free to reach out if you have questions. Thanks for your support!*

Today I continue my boot.dev journey learning Object-Oriented Programming with Python. The topic of the day today is encapsulation.

In any programming language when you create a class or object, there may be variables or methods on the object that you don't want public.

Now encapsulation is not encryption. It's not enough of a safeguard to store truly sensitive information with on the class or object, but in Python it is a convention that helps other developers know which variables they should expose to the public and which should only be accessed with getter / setter methods, or internally within the class.

The convention in Python to designate a private variable is to use a double underscore. If we want to make a private ID method on our Student class, for example:

```python
class Student:
    def __init__(self, name):
        self.name = name
        self.__id = 12345
```

This lets other developers know that the instance variable __id should not be exposed to the public, and developers should be careful manipulating this variable's value when using the class.

This convention in the language also uses what's called **name mangling** such that Python (mostly) disallows users from directly accessing variables on a class that start with a double-underscore.

Ideally, private variables are not accessed directly but if need be they should be exposed to the public via a getter method like so:

```python
class Student:
    def __init__(self, name):
        self.name = name
        self.__id = 12345

    def get_student_id(self):
        return self.__id
```

**If you like projects like this and want to stay up to date with more, check out my Twitter [@stonestwebdev](https://twitter.com/stonestwebdev), I follow back! See you tomorrow for another project.**
List Concatenation and List Replication in ptyhon
Published: 2023-08-04 15:19:12

The + operator can combine two lists to create a new list value in the sameway it combines two strings into a new string value. The * operator can also be used with a list and an integer value to replicate the list. Enter the fol-
lowing into the interactive shell and try out to see the output:

```
>>> [1, 2, 3] + ['A', 'B', 'C']
[1, 2, 3, 'A', 'B', 'C']
>>> ['X', 'Y', 'Z'] * 3
['X', 'Y', 'Z', 'X', 'Y', 'Z', 'X', 'Y', 'Z']
>>> spam = [1, 2, 3]
>>> spam = spam + ['A', 'B', 'C']
>>> spam
[1, 2, 3, 'A', 'B', 'C']
```
Finding first tech job!
Published: 2023-08-04 15:16:58

Hi! I’ve just recently graduated from a bootcamp now I am trying to find work. I have been applying for months now actually and haven’t even had an interview with any of companies I’ve applied to. I have been trying to look for Front-End developer positions, as well as fullstack developer or web developer. I just would love if someone could give any advice or suggestions on how to get my first tech job? As well as if anyone has any idea how to reach out to hiring managers of companies when trying to apply?? #code #softwareDev #webDev #FrontEnd #career
Changing Values in a List with Indexes
Tags: webdev, programming, python
Published: 2023-08-04 15:15:03

Normally a variable name goes on the left side of an assignment statement, like spam = 42. However, you can also use an index of a list to change the value at that index. For example, spam[1] = 'aardvark' means “Assign the value at index 1 in the list spam to the string 'aardvark'.” Enter the following to see the output.
into the interactive shell:

```
>>> spam = ['cat', 'bat', 'rat', 'elephant']
>>> spam[1] = 'aardvark'
>>> spam
['cat', 'aardvark', 'rat', 'elephant']

```
Windows Talker
Tags: microsoft, ai, programming, python
Published: 2023-08-04 15:04:49

Everyone who uses Windows 11 will eventually have a Windows 11 Copilot. This is Microsoft's AI built right into Windows; Here you should then be able to change settings via text input.
I have already programmed a sample code that has exactly such functions. How do you like this?
I would be happy if you write me tips and tricks!
{% embed https://github.com/SchBenedikt/WinTalker %}

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

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



Thanks,
schBenedikt.
Kumo becomes Serverless By Theodo ☁️
Published: 2023-08-04 15:03:54

I am thrilled to announce a significant transformation in our brand as Kumo evolves into **Serverless by Theodo**. Over the years, the Kumo team has grown and shared here our learnings and achievements in the field of Serverless. Now, we are taking the next big step to enhance our platform and naming our blog after our Mother Company [Theodo](https://www.theodo.fr/).

Rest assured, while our name evolves, the recipe remains unchanged. If anything, this rebranding allows us to better communicate our values and focus on providing you with even more insightful and relevant articles on serverless computing.

The whole team is incredibly grateful for your support the past 2 years. We are looking forward to embarking on this new chapter as Serverless By Theodo. As always, your feedback and suggestions are essential to us. Reach out to us with any comments or ideas you may have.

Together, let's continue our journey to better serverless computing with Serverless by Theodo!
What is Profiler in React ? <React.Profiler>
Tags: react, programming, tutorial, reactjsdevelopment
Published: 2023-08-04 15:02:07

The Profiler is a component in React that allows you to measure the performance of your components in terms of rendering times and frequency of renders. It's useful to identify potential performance bottlenecks in your application.

Here's how to use the Profiler component in your React application:

1- **Import the Profiler Component**: First, you'll need to import the Profiler component from React.

```jsx
import { Profiler } from 'react';
```

2- **Wrap your Component**: The component or components you want to analyze will need to be wrapped with the Profiler component.

```jsx
<Profiler id="MyComponent" onRender={handleRender}>
  <MyComponent />
</Profiler>
```

3- **Provide Required Props**: The Profiler component requires two props: `id` and `onRender`.

- `id` (string): A unique identifier for this Profiler instance. It can be used to select the specific Profiler from the React DevTools.

- `onRender` (function): A callback function that React calls any time a component within this Profiler tree "commits" an update. It gets parameters describing what was rendered and how long it took.

```jsx
function handleRender(id, phase, actualDuration) {
  console.log(id, phase, actualDuration);
}
```

In this callback function, `id` is the `id` prop of the Profiler tree that has just committed. `phase` is either "mount" (if the tree just mounted) or "update" (if it re-rendered). `actualDuration` is the time spent rendering the committed update.

4- **Check Performance in DevTools**: Now, you can run your app and check the React DevTools Profiler tab for the performance readings. There, you'll find different visualization options to inspect your app's performance.

***Remember, you should only use the Profiler component in the development environment and not in production as it might add unnecessary overhead and slow down your application***

Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects. I am currently seeking a remote job or internship.

Twitter: https://twitter.com/Diwakar_766

GitHub: https://github.com/DIWAKARKASHYAP

Portfolio: https://diwakar-portfolio.vercel.app/
Authorization vs authentication
Tags: webdev, javascript, security, authjs
Published: 2023-08-04 14:57:05

"Authentication" refers to the process of verifying the identity of a user, system, or entity. It ensures that the claimed identity matches the actual identity. "Authorization," on the other hand, comes after authentication and involves granting or denying access rights or permissions to resources based on the authenticated identity's privileges. In simpler terms, authentication confirms who you are, while authorization determines what you're allowed to do.
CSS Media queries with math operators
Tags: frontend, css, sass, util
Published: 2023-08-04 14:54:07

If you work mainly on backend, you may figured the same problem as I did: wtf are all these min-width, max-width instructions inside media queries. And how many pixels is a tablet, or any other mobile device?

For these reasons I made a simple mixin with sass that can help creating media queries. 

## First things first
If you are already too bored to read till the end, you can try it downloading from Github o NPM

[https://github.com/maiobarbero/device_media_query](https://github.com/maiobarbero/device_media_query)

`npm i device_media_query`

## How it works
The library provides a mixin called device that takes in logical operators and values corresponding to screen widths. You can create complex media queries using operators like >, >=, <, and <= combined with predefined device variables or custom values.
These are the setted variables, that you can override before importing the library in you project

```
$phone: 480px;
$phone-landscape: 812px;
$tablet: 1024px;
$tablet-landscape: 1366px;
$desktop: 1920px;
$laptop: 1920px;
$screen-4k: 3840px;
```
You can use the following logical operators with the device mixin:

- `>` : greater than
- `>=` : greater than or equal to
- `<` : less than
- `<=` : less than or equal to

## Example Usage
Here's an example of how you can use the device mixin:
```
@include device('>', $tablet, '<=', $desktop) {
  .my-class {
    font-size: 18px;
  }
}
```

This will generate a media query that applies the specified styles to screens greater than $phone and less than or equal to $tablet. The rendered CSS will look like:

```
@media (min-width: 1025px) and (max-width: 1920px) {
  .my-class {
    font-size: 18px;
  }
}
```

Happy coding
What Is Redux.?
Tags: redux, webdev, javascript, top7
Published: 2023-08-04 14:50:10

Redux is a popular JavaScript library used for managing the state of an application in a predictable and centralized manner. It's commonly used with frameworks like React to handle the state of a user interface. Redux follows a unidirectional data flow pattern and emphasizes the use of a single immutable state tree. Actions are dispatched to describe changes, and reducers handle these actions to update the state. This helps in creating maintainable and testable code by separating concerns and providing a clear way to manage application state.
Front-End e o gerenciamento de estado global
Tags: vue, react, vuex, redux
Published: 2023-08-04 14:12:59

> As bibliotecas Flux são como óculos: você saberá quando precisar delas. Dan Abramov, o autor do Redux.

E aí carinha do computador. Como que anda a vista? E os óculos? Tudo em dia?

Eita, o gerenciamento de estado global! Já ouvi falar muita coisa sobre ele:

- "Você só usa quando precisa passar dados de irmão para irmão(componentes) para facilitar a vida"
- "Só usa quando a hierarquia entre os componentes fica muito distante"

Vamos cortar o papo, do que é, onde vive, do que se alimenta, etc. E vamos focar no propósito de existência do gerenciamento de estado global em um projeto.

Veja:

![Vuex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17qqqbqvp8qqzouestcd.png)[fonte](https://vuex.vuejs.org/ptbr/index.html#o-que-e-um-padrao-de-gerenciamento-do-estado)

Antes de qualquer coisa, vamos falar do _Vuex_, mas isso pode se aplicar as bibliotecas que fazem uso do Flux Pattern, para aquele seu projeto de 5 páginas, ou qualquer coisa nesse sentido, provavelmente não fará sentido algum adicionar gerenciamento de estado global, inclusive, é uma recomendação do _Vuex_, _Redux_.

Se o seu projeto consome uma API, ele já poderia fazer o uso do gerenciamento de estado global! "Mas pera, e a história do projeto de 5 páginas?", é simplesmente uma escolha! Deve se considerar os prós e contras do uso em seu projeto.

Mas vamos ao propósito, viu a imagem ali em cima e o que cada camada faz? Vamos lá!

- **Actions**: A camada que tem como responsabilidade a comunicação com a API do projeto.
- **Mutations**: A camada que tem como responsabilidade modificar estados.
- **Getters**: A camada que tem como responsabilidade facilitar a busca dos dados de um estado.
- **State**: A camada que tem como responsabilidade armazenar o estado.

Com o gerenciamento de estado global, a aplicação irá centralizar os dados vindos da API no _State_ fazendo com que qualquer componente tenha acesso aos dados, da mesma forma as chamadas de API ficam ao alcance de qualquer componente por meio do _Vuex_, como à qualquer outra camada, e sim, as _Actions_ seriam um tipo de "_Services_", centralizando todas as chamadas de API. Claro, você não irá guardar apenas os dados vindos da API, poderá adicionar qualquer dado de interesse global ou de contexto.

## Conclusão

Para pequenos projetos, mesmo com consumo de API, o gerenciamento de estado global pode parecer verboso e desanimador, mas na minha opinião o uso se paga e muito bem ao longo do projeto, você sabe de onde vem os dados, são modificados de forma previsível e isso ajuda muito na manutenção.
#LearnedToday: range() in JavaScript
Tags: javascript, webdev, range, array
Published: 2023-08-04 14:10:42

How nice would it be to have a `range(start, stop, step)` function in JavaScript similar to the [native Python function](https://www.w3schools.com/python/ref_func_range.asp)?

```javascript
const myRange = range(1,4,1)
// [1,2,3,4]
```
## Let's do it!
Until an official method is created, we can do it ourselves in a "one" line of code using [`Array.from()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) method:
```javascript
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
```

### Examples

```javascript
// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]
```

## What about range of letters?
Let's try to go further and try to work with **letters**. Python does not have a native function to do this either, but thanks to JavaScript methods [`charCodeAt()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt) and [`fromCharCode()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode) we can achieve our goal with some minor modifications!

The idea is to convert the letters to `UTF-16` char code (aka numbers) to create the range and eventually convert them back to letters:
```javascript
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E",  ..., "X", "Y", "Z"]
```

Thus our reusable function could be updated this way:
```javascript
const range = (start, stop, step) => {
  const isString = typeof start === 'string' && typeof stop === 'string';

  if (isString) {
    start = start.charCodeAt(0);
    stop = stop.charCodeAt(0);
  }

  return Array.from(
    { length: (stop - start) / step + 1 },
    (_, i) => start + i * step
  ).map((n) => (isString ? String.fromCharCode(n) : n));
};
```

### Examples

```javascript
// Generate the alphabet using Array.from making use of it being ordered as a sequence
range('A', 'Z', 1);
// ["A", "B", "C", "D", "E",  ..., "X", "Y", "Z"]

// Generate a sequence of letters with a step of 5
range('D', 'X', 5);
// ["D", "I", "N", "S", "X"]
```

## Demo
As usual, I created a [stackblitz project](https://stackblitz.com/edit/js-pnu5qs?file=index.js) to play with this code.
Live Loading Content is Now Available for Gatsby SDK v6.1.1! 🚀
Tags: storyblok, gatsby, react, headles
Published: 2023-08-04 14:10:37

We’re thrilled to share that the Live Loading Content feature for Gatsby SDK has been unleashed, elevating it from version v6.0.2 to v6.1.1. Prepare for an exceptional content experience with real-time updates as you edit and publish within Storyblok. Bid farewell to manual refreshes – your Gatsby site effortlessly stays current!

### Advantages:

- Real-time Updates :arrows_counterclockwise:
- Enhanced Efficiency :zap:
- Enhanced User Experience :chart_with_upwards_trend:
- Instant Error Handling :shield:
- Unmatched Customization Flexibility :art:

### Known Limitations:

Cache forces to load the previous content by only hitting a save button on the visual editor. To solve it, after hitting a save button, hit the reload :arrows_clockwise: button on the visual editor to load the most updated content.

Ready to elevate your content management? Dive into the upgraded version today! For intricate specifics, peruse our refreshed documentation.
Here’s to exhilarating Gatsby-ing with Storyblok! :tada: