teleren/devto huggingface dataset:
Pet projects shouldn't be optimal
Published: 2022-05-23 20:16:03

Over the years I started noticing a pattern in my life. It goes somewhat like this:

1. Find new hobby / skill / technology.
2. Start working on it and notice progress.
3. Become obsessed with it, read articles, watch videos, listen to podcasts, etc.
4. Start worrying about the optimal way to get results or the best practices.
5. It becomes a chore and I end up not working on it anymore.

I first noticed it with powerlifting.
I started going to the gym with my friends, having a good time and becoming really passionate about it.
After a couple of years I decided to join a club and start competing.
A year later I was working out for hours every day by myself, following strict and hard programs to add every pound I could to my maxs, and barely going out because I could feel my performance dropping if I skipped the diet.
In the end I left the club and powerlifting entirely. It took me more than a year to start truly enjoying it again.
However, it didn't click in my head. I blamed the long sessions, or the strict diet, or the insufficient results I was getting.

And of course, a similar thing happened when I started my first rendering engine.
I had a bit of experience with OpenGL but I decided to go all in with C++ and Vulkan.
I got pretty far pretty quickly, but eventually the time and mental cost of dealing with such low level tools led me to give up.

But then, a while I go I saw a tweet (sadly I haven't been able to find it again) about how _JavaScript_ of all languages is actually used in computer graphics research.

Anyone who has worked with computer graphics knows that performance is **everything**. C++ is king, with Rust trying to make a breaktrhough. So this was mindblowing to me. _JavaScript?? For real time graphics?? Really??_

The reasoning however was quite simple: When you are doing research, trying to develop new techniques, you don't really care about performance. You care about **relative** performance compared to other techniques.
What is vital though is **development** speed. How quickly you can iterate and add new features. And languages like JavaScript or Python are perfect for that.

And I believe the same applies to hobby projects (as long as the point is not precisely to get the most optimised solution you can, obviously).

So forget about finding the perfect language, API or framework for your pet projects. Focus on choosing one that you **enjoy** working with, and start coding.

---

Photo by <a href="https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Annie Spratt</a> on <a href="https://unsplash.com/s/photos/art-workshop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Introducing LineaPy!
Tags: opensource, datascience, news, python
Published: 2022-05-23 20:03:21


Going from data science development to production is full of friction. The engineering process to make messy development code production-ready is manual and time consuming.

That’s why we’ve built LineaPy – open source software that creates a frictionless path for taking data science work from development to production with just two lines of code.

LineaPy automatically captures data science development code and extracts data pipelines to be deployed to production. LineaPy traces a Python program execution and creates an intermediate graph representation that captures a program’s semantic meaning. From there, LineaPy can transform these graphs into different MLOps toolchain outputs, which can automatically run in production.

LineaPy is the solution to time consuming workflow problems data scientists face everyday such as cleaning messy notebooks, revisiting previous work and building pipelines. You can read more about our use cases here.

LineaPy can supercharge data science workflows, saving up to 40 percent of the bottleneck tasks that occur from the above workflow challenges. LineaPy is now available for download in GitHub. We welcome all contributions and feedback so that we can continue to grow LineaPy capabilities and help data scientists go from Juypter notebook to an Airflow pipeline in minutes.

We are excited to collaborate with the OSS community and develop LineaPy even further.

For those interested in learning more, please connect with us:

* [Twitter](https://twitter.com/lineapy_oss)
* [LinkedIn](https://www.linkedin.com/company/lineapy)
* [YouTube](https://www.youtube.com/channel/UCn0Ocjh8q5g02hwH2GVTzlw/featured)
* [GitHub](https://github.com/LineaLabs/lineapy)
* [Slack](http://lineacommunity.slack.com/)
* [Quick Start Guide](https://docs.lineapy.org/en/latest/fundamentals/quickstart.html)

We hope you’ll join us!
Meme Monday
Tags: discuss, watercooler, jokes
Published: 2022-05-23 19:53:09

Welcome to the inaugural **Meme Monday** post!

It's pretty late in the day on Monday for most of the world, so most people will probably see this on Tuesday, but it doesn't mean you can't meme!

DEV is an inclusive space! Humor in poor taste will be downvoted by mods.

_Reminder of `embed` syntax, i.e._

```
{% embed https://twitter.com/thepracticaldev/status/733908215021199360 %}
```

**Happy meming!**
Debes nombrar tus Áreas CSS Grid
Tags: beginners, css, tutorial, spanish
Published: 2022-05-23 19:51:27

Hay muchas maneras de maquetar en HTML y CSS, personalmente me gusta mucho utilizar FLEX BOX, pero en esta publicación te enseñare como definir las áreas para tu interfaz con CSS y 'Grid template areas'. Esta es una manera sencilla para definir áreas y nombrarlas. 

CSS Grid nos sirve para cuadricular el contenido de nuestro HTML de manera que mas nos convenga para ordenar la información que mostramos al usuario. Piensa en un blog, tenemos los siguientes elementos

- Cabecera (Header), en este espacio podemos tener el menú de navegación, el logo de nuestro proyecto, una imagen hero de proyecto u otros elementos. Esta area se ubica en la parte superior del contenido.

- Contenido (Main), esta es el área principal en donde tenemos la información que vamos a mostrar. Esta area la encontramos entre el Header y el Footer.

- Pie de pagina (Footer), en esta puede tener un menu espacial con enlaces a otros sitios. Esta área se encuentra al final del contenido.

- Lateral (Aside), esta area es la conflictiva, va entre el Header y el Footer y puede ir a la izquierda o a la derecha de Contenido (Main). Este espacio es mas angosto que el contenido main, pensemos que es un menu lateral. 

Considerando lo anterior podemos pensar en la siguiente estructura

![Estructura general de areas para interfaz](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vzqly82w6iq2d39n38p.png)

Después de algunas ajustes de dimisiones con CSS

![Estructura general con dimensiones aproximadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu13aal2ye08iqwo27sv.png)

Primero vamos a definir un contenedor para nuestro contenido, para este ejemplo lo creare con un < div >, tu puedes elegir otra etiqueta. No olvides asignarle una clase, en este caso la clase es 'grid-areas' 

>html

    <h1>Grid Template Areas</h1>
	<div  class="grid-areas">
		<div  class="header"> Soy el Header</div>
		<div  class="main">Soy el Main</div>
		<div  class="footer">Soy el Footer </div>
		<div  class="aside">Me llamo Aside</div>
	</div>
>CSS

    .grid-areas { 
		    display: grid;  <---- Definimos el uso de CSS GRID
		    grid-template-columns: repeat(4, 1fr); <---- Definimos 4 columnas
		    grid-template-areas: <---- Asignamos el nombre de las areas
				    "header header header header "  
				    "main main main aside"  
				    "footer footer footer footer";    
				    }
El resultado de esta estructura es la siguiente:


![Estructura para el contenido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzyg6406mfiebfh3alkr.png)
Why do I LOVE OpenSource?
Tags: opensource, love, spring, community
Published: 2022-05-23 19:50:12

I #love #OpenSource so much that I have created an "8 reasons why I love #OpenSource" Twitter thread https://bit.ly/3wJmydU

Please share and let me know your thoughts in the comments. Are you in #love with #OpenSource? Or, maybe, you don't like it? Why?

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

Thank you for really introducing me to the #OpenSource world, @brjavaman and @bmuskalla
Day 1: Fundamentals 1 Js
Published: 2022-05-23 19:42:03

Because I had previously learned HTML and CSS Foundation, I began with Js today. But, before deciding to dive right into Js, I made sure I remembered the basics of HTML and CSS, which I did.
Today I learnt how to run Js programs in the browser. The console.log()command . After that, I read about variables and concluded that instead of using var, only use const and let, give variable names that are easy to remember, and I was able to complete the assignments by the end of the lesson.
Lastly was numbers. 
It's all about basic math, assignments, operands, integers, floating points, doubles, unary, and binary.
So far so good #💪
Ruby quiz
Tags: ruby, quiz, 100daysofcode
Published: 2022-05-23 19:39:02

Hi, dev.to!
Here is my first post there. I hope there are people who like mind games. So I would like to introduce you to some interesting puzzles.

### 1. Choose the correct result of the code (ruby 3.0):
```ruby
{ language: 'ruby’, 'position' => 'engineer' }.transform_keys({ language: 'rust’ }, &:to_sym)
```
- `{"rust"=>"ruby", :position=>"engineer"}`
- `{ :rust => 'ruby', :position => 'engineer' }`
- `{ "rust" => :ruby, 'position' => :engineer }`
- `{ :rust => :ruby, :position => :engineer }`

{% details Answer %} `{"rust"=>"ruby", :position=>"engineer"}` {% enddetails %}

### 2. Choose the correct result of the code (ruby 3.0):
```ruby
{ e: :n, g: :i, n: :e, e: :r }.except(:e)
```
- `NoMethodError (undefined method 'except')`
- `{:g=>:i, :n=>:e}`
- `{:g=>:i, :n=>:e, :e => :r}`
- `{:e => :n, :g=>:i, :n=>:e}`

{% details Answer %}
`{:g=>:i, :n=>:e}`
{% enddetails %}

### 3. Choose the wrong way to call a lambda
- `->(){}::call`
- `->(){}[]`
- `->(){}()`
- `->(){}::===`

{% details Answer %}
`->(){}()`
{% enddetails %}

### 4. Choose the correct result of the code
```ruby
!?q::!. |001
```
- `true`
- `false`
- `raise an error`
- `1`

{% details Answer %}
`false`
{% enddetails %}

### 5. Choose the correct way to create an array [0,1,2,3,4,5]
- `Array[0..5]`
- `(0..4).take(5)`
- `[*0..5]`
- `String(012345).split('').map(&:to_i)`

{% details Answer %}
`[*0..5]`
{% enddetails %}

### 6. There is a code
```ruby
class Animal
  @@count = 0
  
  def self.inc
    @@count += 1
  end
  
  def self.count
    @@count
  end  
end

class Cat < Animal
  @@count = 100

  def self.count
    @@count
  end
end

Animal.inc
Cat.inc
```
#### Choose the correct result of the code
```ruby
[Animal.count, Cat.count]
```
- `[1, 101]`
- `[101, 101]`
- `[1, 102]`
- `[102, 102]`

{% details Answer %}
`[102, 102]`
{% enddetails %}

### 7. There is a code
```ruby
class Item
  def self.count
    $COUNT
  end

  def self.increment
    $COUNT += 1
  end
end

BEGIN { $COUNT = 0 }
Item.increment
```
#### Choose the correct result of the code
```ruby
Item.count
```
- `0`
- `1`
- `101`
- `undefined method '+' for nil:NilClass`

{% details Answer %} `1` {% enddetails %}
Rest e seus níveis de maturidade
Tags: rest, developer, backend, api
Published: 2022-05-23 19:36:22

**O que sabemos sobre Rest**:

- Muitos desenvolvedores "já sabem trabalhar com REST";
- Representational state of transfer (Transferência Representacional de Estado);
- surgiu em 2000 por Ray Fielding em uma dissertação de doutorado;
- Simplicidade;
- Stateless (sem guardar estado);
- Cacheável;

**REST: Níveis de maturidade (Richardson Maturity Model)**

- Nível 0 - POX:

Nível 0 de maturidade significa que uma determinada aplicação não utilizou os recursos de URI, métodos HTTP e Hypermedia (HATEOAS);

Iremos notar que nesse exemplo modelo mais comum, faz uso apenas de verbos POST e GET:

**POST** - `http://localhost:3005/products/saveProduct`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9osff8e48ah1ne5i8cm.png)

**GET** - `http://localhost:3005/products/getProduct/628bd53ff6a8e68c40859468`

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

Logo... _nada a ver com REST e muito distante de RESTful_.

- Nível 1 - Recursos:

Nível 1 de maturidade considera a utilização eficiente de URIs. Os recursos são mapeados, porém não empregam com eficiência o uso dos verbos.

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

- Nível 2 - VERBOS HTTP (HTTP VERBS):

Nível 2 de maturidade considera o uso eficiente de URIs e verbos HTTP.

Nesse nível, a API suporta os seguintes verbos HTTP:

– HTTP POST: utilizado para criar registro em banco de dados;

– HTTP GET: utilizado para a leitura de registros em banco de dados;

– HTTP PUT: utilizado para atualizar um determinado registro em banco de dados;

– HTTP PATCH: utilizado para atualizar parte de um determinado registro em banco de dados.

Exemplo:

```
POST /products
{
 name: "Notebook Samsung Book Np550 Celeron"
 description: "4gb 500gb 15.6 W11 Cinza"
}
```

```
HTTP/1.1 201 Created
Location: /products/628bda5a314e825e8965e05a
```

- Nível 3 - HATEOAS:

Nível 3 conhecido por _Hypermedia as the Engine of Application State_, Roy Fielding descreve HATEOAS como uma das premissas necessárias para considerar um API RESTful.

Exemplo:

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

Referências:

- [Alcancando a excelencia do rest com um modelo de maturidade eficiente](https://mundoapi.com.br/destaques/alcancando-a-excelencia-do-rest-com-um-modelo-de-maturidade-eficiente/)

- [Api rest tudo sobre](https://blog.betrybe.com/desenvolvimento-web/api-rest-tudo-sobre/)

Código de exemplo: https://github.com/williamkoller/rest-example-with-nestjs


Espero ter ajudado <3;
Today I Learned about the tr in Unix
Tags: ruby, history, todayilearned
Published: 2022-05-23 19:25:44

[**tr**](https://en.wikipedia.org/wiki/Tr_(Unix)) is a Unix command that is an abbreviation of translate or transliterate, indicating its operation of replacing or removing specific characters in its input data set. 

I came across it working on [this](https://www.codewars.com/kata/reviews/56541987fa08ab47a0000042/groups/628bdb3c63737e000193a5a4) problem on Codewars. One of the [top solutions](https://www.codewars.com/kata/reviews/56541987fa08ab47a0000042/groups/56541e6ef5e305e8cb000066) used the string::count method in ruby, but passed along arguments in a syntax I had not seen before. 

In Ruby, to get letters in a range say A to M you could pass, `"a".."m"`, but this will return a range object. However, the String#count method takes in strings. As such `str.count("a".."m")` would return an error. However, passing along `"a-m"` would not because the latter uses an implementation of the tr Unix command. 

TLDR : Ruby strings utilise an implementation of the tr Unix command allowing us to pass strings like `"a-z"` and have it unpacked into the entire range without having it as a Range object. Useful in commands that do not take in ranges as arguments.
Desktop first vs Mobile First Design - How to decide ?
Tags: ux, design, discuss, poll
Published: 2022-05-23 19:21:40

Since I do not want a fight over this question, I wanted to state from the beginning, I think we all agree that it should be decided according to different product requirements.(?)

However, in such discussions, we need to consider those who use the product rather than the developers. I always take a look at the data outputs while making such decisions.

Regarding to    [perficient.com](https://www.perficient.com/insights/research-hub/mobile-vs-desktop-usage#:~:text=Mobile devices drove 61%25 of,increase from 63.3%25 in 2019), at 2020, based on 30.02 trillion visits, 68% of users were browsing from their mobile phones but less than half the average time they spend per visit, according to desktop users.

This may because of several reasons, one is most of desktop users are more likely to spend time on their computers of course. On the other hand, we should also consider that most of websites are not REALLY optimized for mobile users so, this may cause users not to prefer to browse the site anymore.

It is always necessary to speed up and optimize any user experience;

In 1979, Walter J. Doherty (IBM Researcher)  mentioned that 

> user experience turns from painful to addictive after the system feedback time drops below 400ms.”
and they call it Doherty Threshold.

We are not here to understand whether its true or not, the thing is response time has a large amount of importance while we use “computer”. 

My personal idea is to start with mobile design, and be **minimalist.**

I did not arrive at this conclusion solely for the reasons I have stated here. I always take note of the applications whose UI designs I like on websites, mobile applications and desktop applications. What they all have in common is that they are extremely simple and useful.

First of all, we shouldn't consider the question of usability about which design we should base on because you can create a lousy user experience no matter which one you start with.

But minimal animation also brings maximum response time, and if you start with mobile design, you inadvertently fit those requirements just a little bit more.

In addition, you can present the contents that you fit on small screens (if you can) to the user in a more comfortable way as the screen expands.

I'm not a UI designer, but I see a lot of designers give priority to mobile design these days.

In fact, you can come across this while browsing websites where you can buy many templates, most of them put mobile application images at the beginning.

It is of course debatable whether this decision is due to the fact that the demand is mostly in mobile designs or that the designers can express themselves better in mobile design.

Which one you go first?
¿Qué es React?
Tags: react
Published: 2022-05-23 19:06:05

¿Qué es React?

React es una libreria de JavaScript que ayuda a crear aplicaciones web de manera eficiente, utilizando codigo declarativo para asi facilitar su lectura y mantenimiento.

React se basa en crear componentes con estado propio, los cuales ayudan a encapsular funcionalidades, pudiendo asi reutilizarlos en diferentes proyectos y tambien ayuda a tener el codigo de tu aplicacion mas ordenado.

Puedes iniciar un proyecto en React con el siguiente comando (necesitas node):

![create-react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mycwasx1n7hgn32z016x.jpg)

Lo cual te configurará distintos ficheros en los cuales se encuentra todo lo necesario para empezar a trabajar con React!


![carpeta del proyecto](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lncqqswpqe5oqwkgdoht.jpg)

Y para iniciar el servidor de desarrollo utilizarás el comando `npm start`
Switch Package Manager
Tags: npm, yarn, pnpm, showdev
Published: 2022-05-23 19:02:48

Well, I'm working on projects that use different Package Managers and I'm a little tired of writing wrong commands or mixing the incorrect flags.

I've started creating a command cheatsheet to guide me through, but if speak with truth, it was not enough, because don't solve the problem at all. 

{% post https://dev.to/equiman/npm-vs-yarn-vs-pnpm-commands-cheatsheet-3el8 %}

So, inspired by projects like `NVM` and `Volta` I've decided to create a CLI translator, to write commands in only one way and this CLI tool will translate them to the current package manager form used in the project.

That's how [swpm](https://www.npmjs.com/package/swpm) (Switch Package Manager) was born.

This is an example of how `swpm` works. The same command, no matter the package manager used on the project.

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

---

## Install

So, if you are in the same boat as me, or don't want to relearn commands for each package manager, install `swpm`...

```bash
npm install swpm --location=global
yarn global add swpm
pnpm install swpm --global
bun install -g swpm
volta install swpm
```

... and enjoy life.

## Commands

This is a **WIP** project, and for now, there are available for translation the most used commands `install`, `add`, and `remove`, but we will add other gradually (or by request).

But commands are **not restricted** only to this list. Using `swpm` will try to infer the package manager and reuse the rest of the parameters.

For example, shared commands between all the package managers, like:

```
swpm init [<name> --yes]
swpm run <command> [-- <args>]
swpm test
swpm publish
swpm unpublish <package>
swpm deprecate <package> <message>
```

## Flags

Flags are important to `swpm` because can modify or set his behavior.

For example, you can pin a package manager to be used by default on a project. 

```bash
swpm --pin <npm|yarn|pnpm|bun>
swpm -p <npm|yarn|pnpm|bun>
```

So, with this pin, you can change over the projects, and in the future, you not going to need to worry or remember about the package manager to use. Just use the `swpm` command and it will do all the work for you.

---

This is a little introduction about what `swpm` can do, if calls your attention, you can learn more about it on:

{% github deinsoftware/swpm/ %}

Comments and contributions are welcome. It's my first project using `node.js` and I'm sure not following the best practices, but if you have recommendations, I'm open to listening and learning.

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
CORS issues resolved
Tags: javascript, api, cors
Published: 2022-05-23 18:55:36

If you have run into a CORS issue before, you know that it can be a little frustrating or annoying to resolve.  But it is actually a pretty easy issue to fix, I'll show you how.

First, do you have access to the server?  If you wrote the code or can change it, then you just have to allow the origin that is sending the request.  

See this video to learn how: 
[Learn CORS in 6 Minutes](https://youtu.be/PNtFSVU-YTI?t=24)

If you don't have access to the server, many resources will tell you that you are out of luck.  But it turns out that there is a workaround.  

CORS issues are blocked by the browser.  You can test this by using Postman.  If your request works on Postman but not on the browser, this is evidence that the server is sending the response you want, but it is being blocked.  

This resource should be helpful in [creating a Proxy Server](https://www.twilio.com/blog/node-js-proxy-server).  If you are not familiar with proxy servers, it is basically a server between the your client and the server you are trying to access.  It allows you to bypass the browser issue, because you are connecting to a server that you trust.
make your vim editing faster!
Tags: vim, speed
Published: 2022-05-23 18:48:15

i use vim every day and the best productivity improvement that happened to me lately is that i found this keyboard setting in macos, highly recommend everyone who likes to work with code quickly, set these sliders to the maximum!

![macos keyboard settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4dv7h33mdf545vr4dio.png)