teleren/devto huggingface dataset:
Escapar correctamente expresiones regulares
Tags: spanish, regex, begginers, tips
Published: 2021-02-21 18:22:26

Las expresiones regulares suelen ser difíciles de entender y aún más de escribir. Probablemente uno de los aspectos más confusos al principio son los caracteres de escape.

## Cuándo y por qué escapar caracteres.

Las expresiones regulares (ER para abreviar) son herramientas para buscar patrones en texto. Hay algunos caracteres con significados especiales (su explicación no es el objetivo de esta publicación) y si queremos usarlos sin significado especial, añadimos una barra invertida (`\`) delante de ellos. A esto lo llamamos escapar un carácter. 

_Nótese que esto hace de `\` un carácter especial en sí mismo._

Un ejemplo simple: Una ER que coincida con `Balance de cuenta: 50$` sería `Balance de cuenta: 50\$`.
No obstante, en la mayoría de los lenguajes, `\` también es un carácter especial para los strings (además de para las ER). Por eso, el string que tendríamos que usar para construir la ER anterior, debería ser: `Balance de cuenta: 50\\$`.

## Consejo para escapar las ER manualmente.

Debemos pensar en el paso de las cadenas que buscamos a ER y de ER a string, en lugar de pensar en los pasos de string a ER y a cadena. Veamos un ejemplo:

¿Y si queremos hacer coincidir `[ERR] $var tiene valor “gg”`?

1. _Cadena coincidente_:
    `[ERR] $var tiene valor “gg”`
    
2. A _ER_: `[`, `]`, `$` y `"` son caracteres especiales en la ER, así que los escapamos:

     `\[ERR\] \$var tiene valor \"gg\"`

3. A _String_: `\` y `"` son caracteres especiales; los escapamos:

     `\\[ERR\\] \\$var tiene valor \\\"gg\\\"`

El punto es escribir un ejemplo de la cadena que quieres hacer coincidir y escapar, paso a paso, los caracteres especiales de la ER y el string hasta que tengas el que vas a usar en tu programa.

## Escapar ER con funciones

_(Enlaces a respuestas de Stack Overflow)_

También, otra opción es escapar la ER con alguna función auxiliar. Algunos lenguajes, como [Python](https://stackoverflow.com/questions/4202538/escape-regex-special-characters-in-a-python-string) o [Java](https://stackoverflow.com/questions/60160/how-to-escape-text-for-regular-expression-in-java) ofrecen estas funciones por defecto. En otros, como [JavaScript](https://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript) o [C++](https://stackoverflow.com/questions/39228912/stdregex-escape-backslashes-in-file-path) debes definirlas por tu cuenta.

**¡Atención!** Asegúrate de usar estas funciones con RE en las que no quieres caracteres especiales, porque si no tienes cuidado, puedes acabar escapando algún caracter sin querer y estropeando la ER.
Making a level editor with SFML (C++) - Part 1
Tags: cpp, sfml, gamedev
Published: 2021-02-21 18:21:29

A level editor is something that I've wanted to do for a long time in SFML, but has always been delayed. Fortunately, my last project (Candle, a library for 2D lighting), made me dive entirely into SFML again, so when I finished it, the natural thing was to start with the editor project right ahead.

{% twitter 1361810747764932611 %}

## The design

### The GUI

There are several libraries to make GUIs in SFML. However, I didn't want to use any of them, for two reasons: first, I wanted to learn to make GUIs from scratch in order to know how to implement one in my future game; second, I may suffer a little bit of [NIH](https://en.wikipedia.org/wiki/Not_invented_here) syndrome.

Anyways, the GUI I require is intended for my personal use and not very complex. The required features are:

- Pannable views with resizable viewports.
- A basic clickable menu.
- A color picker.
- Modularity centered around tools, so that it is easy to add new ones and scale the already implemented.

### The levels

The editor will be focused on a tile world (or grid world). The levels I want to make would have the following components (note: I will be using the words component and entity, but **not** in terms of the [ECS](https://en.wikipedia.org/wiki/Entity_component_system) architecture):
- Visual component. It will be divided in layers (maybe with parallax) and it would require tools to:
  - Set and transform the texture of a cell.
  - Set the color of a cell.
  - Set and transform visual elements that are not fixed to the grid.
  - Set and transform light sources and lighting areas (here I will use Candle).
- Collisions component. It will require a tool to set the type of each cell, where the type can be:
  - Solid cells.
  - Unsolid cells.
  - Cells with a solid slope.
- Dynamic components. These will be the entities within the level that do not belong to the grid, that will have the following elements:
  - A sprite, optionally animated.
  - A collision rectangle, circle or capsule.
  - Some basic physic properties, as velocity and bounciness.
- Lastly, I would like to make the levels scriptable. I will be embedding Lua in the editor, so I can test directly the scripts there.

# Serialization

Obviously, any editor would be useless if you couldn't save you work. I will use [cereal](https://uscilab.github.io/cereal/index.html) to serialize the levels and the custom assets.

***

What is your experience with SFML? Have you got any project that you want to share? Feel free to leave a comment with any library that would be useful for other people using SFML!
DRY way of adding slug to models
Tags: django, python
Published: 2021-02-21 17:59:04

Using mixins, we can automate how the slug field in a model is populated based on some other field in the model.

### Slugify mixin -
1. `slug_source_field` is name of field whose value will be used to generate the slug.
2. `slug_target_field` is name of slug field where the generated slug value is to be stored.
3. Override the `models.Model.save` method to make use of `django.utils.text.slugify` on `slug_source_field` to generate the slug.
4. If an entry with same slug exists already, try adding two random characters at the end of the slug and repeat the procedure.
5. Set the valid slug value in the `slug_target_field` and let `super().save(*args, **kwargs)` continue the procedure.

### Article model -
1. Make use of SlugifyMixin(*multiple inheritance*)
2. Set `slug_source_field` and `slug_target_field`

That's it. Here's the gist.

{% gist https://gist.github.com/tshrv/40d2119ab2e3f854093588bb4395d91d %}
Discovering the WebAudio API & Making a Simple Synth
Tags: html, javascript, webdev
Published: 2021-02-21 17:54:07

I work primarily as a web developer, but you might not know that I'm also a musician. I have a special appreciation for the creativity found in experimental electronic music. Recently I was curious about where audio tools for the web were at, and **I was impressed by the HTML `<audio>` element, though I ran up against what I considered a pretty big shortcoming: it can't loop seamlessly**.

That's what led me the **WebAudio API**. It's an API intended for people like me who have a little background in messing with sound and I had no idea it was out there. I quickly learned how to repeat an audio clip without the interruption in the loop provided by the standard `<audio>` element, and in the process I did some reading about WebAudio's other capabilities.

# A Few WebAudio Offerings

WebAudio features a number of different types of audio sources; in the documentation I noticed an oscillator type and I was inspired to see what kind of **web-based synthesizer** I could make with the WebAudio API. My goal wasn't to make something with a keyboard for playing pop music, but something simpler, more suited to creating **atmosphere** or sound effects.

WebAudio uses a metaphor carried over from physical sound equipment that describes the flow of audio through a number of nodes **connected** in a designated order. In JavaScript, I set up a couple oscillator nodes and connected them to the WebAudio destination; it felt like the JavaScript equivalent of **plugging instruments and effects units into a mixer**. I added some other nodes like **gain** nodes to control volume at different points in the "circuit", and **convolution** nodes to add reverb.

The controls for the synth? Simple HTML `<input>` elements. I was absolutely tickled to learn that a **range input** would stand in for a **potentiometer** in this WebAudio world. One of the reasons I left my synth visually unstyled is to emphasize the webbiness of it all—playing sounds involves yanking a bunch of browser-default sliders around and selecting from dropdown <select> menus. It brings a smile to my face.

# Introducing Dulce Baby

The final features of my synth, the [Dulce Baby](nathanpasko.com/dulcebaby), include one oscillator with variable waveform, coarse tone control, and volume control, another oscillator that plays a drone and fine tone control, and a master gain for overall volume. The drone options are frequencies borrowed from Cousto's *The Cosmic Octave:* they're the frequencies of the planets in our solar system.

![my web-based synthesizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmnbldfoyqu4dtnesn4x.PNG)

# Time to Explore

Overall the WebAudio API is a very exciting discovery for me. It's inspired this start to a new series about experimenting with WebAudio. Today I haven't shown much process or code, but in the future this series will delve more into the nitty gritty. Read along for some creative coding and non-visual web design!
Day 8
Tags: 100daysofcode
Published: 2021-02-21 17:46:46

Day 8/100 of #100DaysOfCode

Event KeyCodes | FAQ Collapse | PostgreSQL

Hours coded: 1.2 (Active code time)
Lines of code: 306
Keystrokes: 3438

My first-day experience with PostgreSQL was horrible


via @software_hq's #vscode extension
How I handle my notes with symbolic links
Tags: productivity, notes, markdown, git
Published: 2021-02-21 17:37:14

# Background

Handling notes has always been tricky for me. Should I use an app or have markdowns in a folder?

Lately, I decided to only use markdowns and have them centralised in a folder called `notes` while making them accessible in the relevant projects via symbolic links.

Objectives:
1. Access only project specific notes in VSCode (or any IDE)
2. Keep a folder containing all of my notes

# How-To

## Architecture

```
~
|-- .gitignore_global
|-- Documents/
    |-- notes/
        |-- project_foo/
    |-- project_foo/
        |-- .notes/ (ignore from version control)
```

## Instructions

The first step is to have the version control ignore the notes in each projects. For example, I decided to have my notes in a `.notes` folder under each project.

```
# Create a global gitignore
touch ~/.gitignore_global

# Add the folder that will contain the notes in each project
echo .notes >> ~/.gitignore_global

# Add the global gitignore to the git configurations
git config --global core.excludesfile ~/.gitignore_global
```

Now, let's create the folder that will contain all the notes:

```
# Create the folder where all the notes will be centralised
mkdir ~/Documents/notes
```

Finally, let's say we have a project called `project_foo`. We can now create the folder that will contain the notes and link it:

```
# Create the folder where the project specific notes will be found
mkdir ~/Documents/notes/project_foo

# Link the project specific notes folder into the project
ln -s ~/Documents/notes/project_foo ~/Documents/project_foo/.notes
```

# Summary

- Folder `notes` contains **all** the notes
- Each project has a `.notes` folder with **only related notes** and ignored by version control
- All the notes are synced between the `notes` folder and the `.notes` one in each project

Thanks to this architecture, I am now able to access my project's notes in my IDE directly and avoid using another app for that. To add to that, because they are synced in the `notes` folder, I still have the possibility to open all my notes at once if needed.

# Final words

Thank you for reading my **first ever blog post** and I hope it helps some of you :)

Let me know your thoughts and/or improvements!

[Photo by David Travis](https://unsplash.com/@dtravisphd?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
Zoom Image Point With Mouse Wheel
Tags: html, css, javascript, beginners
Published: 2021-02-21 17:17:41

***Hello guys, in this tutorial we will create Zoom Image Point With Mouse Wheel using <a href="https://blog.stackfindover.com/category/javascript/" rel="dofollow">JavaScript</a>***

###Zoom Image Point With Mouse Wheel Common Query###
1. image zoom in zoom out animation CSS
2. image zoom out animation CSS
3. CSS image zoom effect animation
4. css3 image zoom animation
5. Zoom Image Point With Mouse Wheel

**Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to add Zoom Image Point With Mouse Wheel using JavaScript**

First, we need to create three files **index.html** and **style.css** then we need to do code for it.

###Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>On point zoom with Scrollwheel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="zoom_outer">
      <div id="zoom">
        <img src="map.jpg" alt="zoom">
      </div>
    </div>
    <script>
      var scale = 1,
        panning = false,
        pointX = 0,
        pointY = 0,
        start = { x: 0, y: 0 },
        zoom = document.getElementById("zoom");

      function setTransform() {
        zoom.style.transform = "translate(" + pointX + "px, " + pointY + "px) scale(" + scale + ")";
      }

      zoom.onmousedown = function (e) {
        e.preventDefault();
        start = { x: e.clientX - pointX, y: e.clientY - pointY };
        panning = true;
      }

      zoom.onmouseup = function (e) {
        panning = false;
      }

      zoom.onmousemove = function (e) {
        e.preventDefault();
        if (!panning) {
          return;
        }
        pointX = (e.clientX - start.x);
        pointY = (e.clientY - start.y);
        setTransform();
      }

      zoom.onwheel = function (e) {
        e.preventDefault();
        var xs = (e.clientX - pointX) / scale,
          ys = (e.clientY - pointY) / scale,
          delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);
        (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);
        pointX = e.clientX - xs * scale;
        pointY = e.clientY - ys * scale;

        setTransform();
      }
    </script>
  </body>
  </html>
```
###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  padding: 0;
  margin: 0;
  outline: 0;
  overflow: hidden;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#zoom {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}
div#zoom > img {
  width: 100%;
  height: auto;
}
```
###Zoom Image Point With Mouse Wheel Video Output:###
{% youtube Aew5auHUzLY %}

###Zoom Image Point With Mouse Wheel Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/VwPgQQr %}
LeetCode 628: Maximum Product of Three Numbers (Ruby)
Tags: codenewbie, algorithms, leetcode, ruby
Published: 2021-02-21 17:17:26

Description: [https://leetcode.com/problems/maximum-product-of-three-numbers/submissions/](https://leetcode.com/problems/maximum-product-of-three-numbers/submissions/)

Solution:

```ruby
def maximum_product(nums)
    nums = nums.sort
    mins_and_max = (nums[0..1] << nums[-1]).reduce(&:*)
    maxs = nums.reverse[0..2].reduce(&:*)
    
    if mins_and_max > maxs
        return mins_and_max
    else
        return maxs
    end
end
```

Explanation:

There is only two possibilities here for the maximum product:

- The 3 numbers are: the greatest positive 3 numbers or
- The 3 numbers are: 2 of the greatest negative numbers + 1 of the greatest positive number

Solving:

1- Sort the array.

2- Get the greatest 2 negative numbers and the greatest positive number, multiply them.

3- Get the greatest 3 positive numbers and multiply them.

4- Compare the result from step 2 and 3, return the greatest.
Portfolio Website
Tags: react, typescript, tailwindcss, nextjs
Published: 2021-02-21 17:12:13

Hello everyone. I took a dig at Next JS along with Tailwind CSS and tried to create a portfolio website for myself with React. The website is hosted at https://anubhav7x.com

Please take a look at it and provide your feedbacks. 

Looking forward to some informational reviews.

Thanks in advance 😉😎
EXCLUSIVE: CHARTING THE MAKING OF THE ROULIS EPERON D’OR, THE LATEST ADDITION TO HERMÈS’ LEGION OF HANDBAGS
Published: 2021-02-21 17:07:10

The purveyor of luxury delves into cutting-edge technology to begin screen-printing on its famed leather handbags

Upholders of opulence and exemplary craftsmanship, French luxury house Hermès is a perennial presence in the conversations surrounding globally coveted creations. Makers of iconic handbags, exquisite ranges of printed silk adornments and small leather goods that combine sophistication with functionality, Hermès has ensured that every purchase is an exclusive affair.

Fashion idols Jane Birkin, the French singer and actor, and Grace Kelly, princess of Monaco, inspired eponymous styles, and the extensive waiting lists in place prior to their acquisition have made no secret of the fact that the in-demand Birkin and Kelly bags, often regarded as “investment pieces”, are designed in limited numbers.

Hermès’ offerings are further elevated with classy silk accessories for men and women – scarves, twillys, ties, pocket squares and stoles – that are illustrated in their distinctive prints. From dreamlike lands and mischievous leopards to royal carriages and mythical creatures, no source of inspiration is off-limits, and it eventually shapes the overarching story behind the design. Trends are waived in favour of unconventional patterns and motifs, piquing the interest of those who wish to add these intricately crafted works of art to their wardrobes. Most popular is Hermès’ versatile collection of silk scarves (also known as the “carré” or “square”), which are marked by hand-rolled edges and come in multiple sizes – wrap the fabric around your neck, transform into a makeshift belt, wear it as a bandana or use it to give your handbag an enviable makeover.

The fashion industry and its enthusiasts are constantly on the lookout for the next state-of-the-art innovation made by the house, and with such an illustrious history of designing timeless style symbols, Hermès makes sure to never disappoint. In tandem with this sentiment, high-resolution screen-printing on leather is the latest technique to be perfected by the French brand. Nothing less than a challenging lifestyle feat, the printer is reworked to adapt each design in a manner that reproduces the accurate depth and gradient of different shades.

Buyers can safely dismiss any concerns regarding the alteration of leather quality because Hermès guarantees that the fabric’s initial qualities such as robustness, suppleness, sheen and grainy texture are retained. It is then left in the capable hands of the cutter and the saddler-leatherworker, who are tasked with matching every piece of printed leather to recreate the original pattern.

visit here: https://www.effnbeelifestyle.com/
The space ship
Published: 2021-02-21 17:06:28

 Para esta entrada se discutirá del modelo presentado por Ariel para nuestro futuro proyecto. Este modelo consta de 2 partes, una en la que vislumbra la gestión de los dispositivos IoT  y la otra cuenta con una capa lógica donde se encargará de administrar la información recibida. En el ambiente de conexión de IoT, se planea recibir la información por medio de una Lorawan Gateway de los dispositivos. Esta información se pretenda que se reciba por medio de un archivo.

Luego desde el Lorawan se llamará al Api Gateway de la  segunda parte que estará implementado con base al patrón de  diseño Facade, ya que este controlará varios servicios y será indispensable que el acceso a cada uno de ellos sea lo más sencillo posible. El primer servicio es del manejo de usuarios y permisos que tendrán sobre los datos que será manejado por Coach Base. El segundo servicio es de Nats el cual se encarga de administrar los mensajes que ingresan de los dispositivos (Consulta). Estos utilizarán un canal por cada uno de los Lorawan. Finalmente vamos a utilizar un intermediario encargado de enviar la información hacia la base de datos. El último servicio sería la conexión directa hacía la base de datos los cuales utilizarán los clientes para realizar consultar. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o14h3m5xlgn2zvg7vls.jpg)
the rarest animal in the world 2021

Tags: javascript
Published: 2021-02-21 17:03:24

the rarest animal in the world 2021

Vaquita
The Vaquita is currently the rarest animal in the world, and quite possibly the most endangered, with only about 10 individuals left in the wild
https://www.fablabs.io/users/serdaduhdghdssd
https://www.fablabs.io/users/serdaduduters
https://www.fablabs.io/users/serdadufbdsdds
https://www.fablabs.io/users/pluralitychinese
https://jobs.westerncity.com/profiles/2239956-plurality-hd
https://jobs.westerncity.com/profiles/2239968-
https://jobs.westerncity.com/profiles/2239974-plurality
https://pluralityhd.tribe.so/user/plurality_zh
https://plurality-cinemas.tribe.so/user/plurality_tw
https://playfix.tribe.so/user/playfix_site
https://ello.co/pluralityhd
https://ello.co/pluralitycinemas
https://ello.co/pluralitycinemashd
LeetCode 234: Palindrome Linked List (Ruby)
Tags: codenewbie, algorithms, leetcode, ruby
Published: 2021-02-21 16:58:54

Description: [https://leetcode.com/problems/palindrome-linked-list/](https://leetcode.com/problems/palindrome-linked-list/)

Solution:

```ruby
def is_palindrome(head)
    return true if !head
    vals = []
    node = head
    loop do
        vals << node.val
        break unless node.next
        node = node.next
    end
    vals == vals.reverse
end
```

Explanation:

1- Create an empty array

2- Iterate through the linked list and add its values to array created in step 1.

3- Compare the array we created with itself reversed and return.