teleren/devto huggingface dataset:
Como abrir o PhpStorm através de um diretório no terminal
Tags: tips, php, terminal, ide
Published: 2022-10-18 23:59:40

Primeiramente é preciso criar o script de linha de comando no PhpStorm. Abra o criador de scripts em `Tools > Create Command-line Launcher`.

![Tools navigation screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osi1t8d124bfk6pd8baj.png)

Agora nessa nova janela que foi aberta, é preciso especificar o nome do comando que será usado no terminal. Por padrão, é gerado como `pstorm`, mas você pode mudar para outro nome de sua escolha como `phpstorm`.

![Create Launcher Script screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4hv259ele6b3q9dwvza.png)

Ao clicar em OK, será criado um script com o nome escolhido no diretório `/usr/local/bin/`, que por sua vez, deve estar na variável `$PATH` nas configurações do seu terminal.

É isso! Agora será possível usar o comando com o nome escolhido no terminal. Por exemplo:

```bash
pstorm nome_do_arquivo
```

ou

```bash
pstorm pasta_do_projeto
```

ou simplesmente abrir o PhpStorm

```bash
pstorm
```

Veja mais:
- https://www.jetbrains.com/help/phpstorm/opening-files-from-command-line.html
- https://www.jetbrains.com/help/phpstorm/working-with-the-ide-features-from-command-line.html#standalone
- https://www.jetbrains.com/help/phpstorm/opening-files-from-command-line.html
Element Vs Component in React js
Tags: javascript, react, programming, beginners
Published: 2022-10-18 23:58:33

An Element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other Elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

the object representation of React Element.

```
const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)
```
The above React.createElement() function returns an object:

```
{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}
```
And finally it renders to the DOM using ReactDOM.render():

```
<div id='login-btn'>Login</div>
```
Whereas a component can be declared in several different ways. It can be a class with a render() method or it can be defined as a function. In either case, it takes props as an input, and returns a JSX tree as the output:

```
const Button = ({ onLogin }) =>
  <div id={'login-btn'} onClick={onLogin}>Login</div>
```

Then JSX gets transpiled to a React.createElement() function tree:

```
const Button = ({ onLogin }) => React.createElement(
  'div',
  { id: 'login-btn', onClick: onLogin },
  'Login'
)
```
**React Element**

A React Element is an object representation of a DOM node. It is a plain old object, and not an actual DOM element.

```
{
  type: 'h2',
  props: {
    className: 'heading heading-medium',
    children: 'React Deep Dive'
  }
}

const header = (
  <h2 className="heading heading-medium">
    React Deep Dive
  </h2>
)
```
An Element has a type, props, and any children nested inside of it. The type can be either a DOM Element (like 'h2', in the above example), or a Component Element (like the Heading described below).

**React Component**
A React Component is composed of React Elements. It is either a class with a render function, or a stateless functional component. It takes props as an input and returns an element tree as its output. Component names start with a capital letter (Heading vs h2).

```
const Heading = (props) => {
  return (
   <h2 
    className={`heading heading-${props.size}`}
   >
    {props.children}
   </h2>
  )
}
```
Comparism between The binary search algorithm and the logarithmic algorithm.
Published: 2022-10-18 23:04:26

BINARY SEARCH ALGORITHM
Binary search is also known as Half-interval search. It is a search algorithm that finds the position of a target value within a sorted array. Binary search compares the target value to the middle element of the array.
In Binary Search, we repeatedly divide the “sorted data” in half until we are left with just one element, or the search element is found. The Big O notation for Binary search algorithm is O(n). Binary search algorithm can be used to perform exact matching and set  membership ( determining whether a target value is in a collection of values).

LOGARITHMIC ALGORITHM
An algorithm is said to be logarithmic when its time of execution is proportional to the logarithm of input size. The Big O notation for logarithmic algorithm is O(log n). Logarithmic algorithm are algorithm where processing discard a large number of values in each iterations. 

The Binary search algorithm is a form of logarithmic search algorithm.
New Book for Experienced Gophers
Tags: go, books
Published: 2022-10-18 22:56:26

Dear DEV community, I am excited to announce the general release of my second Go book, [Beyond Effective Go - Achieving High-Performance Code](https://bit.ly/3EDgitA). This book is aimed at experienced Go developers who want to be more productive and write cleaner, faster, and easier-to-maintain code. 

As part of the release, I am looking for some folks willing to read the book and post an honest review on Amazon. Reviewers will be given a free PDF or ePub copy of the book, my gratitude, and (if interested) access to my private Slack group for direct one-on-one communication.

If this interests you, please reply to this post with your preferred contact method or reach out via [Twitter](https://twitter.com/CoreySScott) or [email](mailto:books@coreyscott.dev).

As you may have also noticed, this book is Part 1; Part 2 will be [Striving for High-Quality Code](https://github.com/corsc/Beyond-Effective-Go) and primarily focuses on quality and productivity. While it is still in progress, I am also looking for folks interested in reading and commenting on the drafts.
Code Smell 170 - Refactor with Functional Changes
Tags: webdev, beginners, programming, tutorial
Published: 2022-10-18 22:37:48

*Developing is great. refactoring is amazing. Don't make it at the same time*

> TL;DR: Don't change functionally and refactor at the same time.

# Problems

- Hard to review solutions

- Merge Conflicts

# Solutions

1. Never change functionality while refactoring

# Context

Sometimes we detect a refactoring is needed for further development.

We are experts at learning.

We should put our solution on hold. Work on the refactoring, and continue with our solution.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/f07e5ef021600a82d086fe7cb001fb84)
```kotlin
getFactorial(n) {
  return n * getFactorial(n);
}

// Rename and Change

factorial(n) {
  return n * factorial(n-1);
}

// This is very small example
// Things go works while dealing with huge code
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/7ae7ad75035ee5c5d1180d0db966dece)
```kotlin
getFactorial(n) {
  return n * getFactorial(n);
}

// Change

getFactorial(n) {
  return n * getFactorial(n-1);
}

// Run the tests

factorial(n) {
  return n * factorial(n-1);
}

// Rename
```

# Detection

This is a refactoring smell.

[X] Manual

# Tags

- Refactoring

# Conclusion

We should use a physical token.

Either we are in the refactoring stage or the developing stage.

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [Dannie Jing](https://unsplash.com/@dannie_jing) on [Unsplash](https://unsplash.com/s/photos/circus)
  
* * *

> When I’m studying code, refactoring leads me to higher levels of understanding that I would otherwise miss. Those who dismiss comprehension refactoring as useless fiddling with the code don’t realize they never see the opportunities hidden behind the confusion.

_Martin Fowler_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
How I fixed the most hideous bug I've encountered so far.
Tags: javascript, nextjs, react, webdev
Published: 2022-10-18 22:29:41

I don't usually like to pat myself on the back but today I did something I'm kinda proud of and I think it really has value to get an insight on how you could debug a difficult issue. I'm using Next.js and I had to implement a rich text editor. Given it's just a POC I went with an all ready solution with react-quill.
During development it all went down great, I rapidly setupped the RTF editor and pushed the code. The pr preview however had a problem: some commands of the toolbar stopped working. That's strange! So how do I approached this debug? First thing first I've tried to build locally and used npm start instead of npm dev. The bug was there. So it was a problem during the build. I hopped into stackblitz , created a new next project and tried a minimal reproduction there. THE BUG WASN'T THERE! I've then tried to add small pieces of my larger application one at the time to see if that was the culprit. Nothing seemed to break it. I downloaded the project and tried to do the same locally. Same story. Time to get serious: I've looked at the api of quill and saw that the command that the toolbar is probably running in the back is quill.format(). I've dived into the minified code, searching for "format" and manually added a debugger in the minified code to trying to understand what was happening. The function effectively was called but there was a strange piece of code that transformed the value that I was trying to set into a boolean. I've tried to modify the minified code and it worked! Cool...now: why it does this only in prod and how do I fix it? I've started to compare the minified code of the project where it was working with the one where it was not. That piece of code was effectively different 😱 I've tried to update the dependencies but nothing seemed to work. And then I finally realized what it was missing: there was no next.config.js in the working project. It was the swc minifier that changed the logic of the correctly minified code from react-quill! And that's the story of the craziest bug I've encountered and how I've fixed it! I've filed an issue for next.js with reproduction if you want to take a look.

https://github.com/vercel/next.js/issues/41527
HOW TO: Install Chrome on Ubuntu 20.04
Published: 2022-10-18 22:11:08

---
title: HOW TO: Install Chrome on Ubuntu 20.04
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

1. Open a terminal window `Ctrl + Alt + t`
2. Download Chrome current stable version

``` bash
sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
```

3. Install Chrome

``` bash
sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
```
Day 638 : Forever and a Day
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-18 21:41:17

_liner notes_:
- Professional : The project I've been working on for a while was mentioned at Firebase Summit today. 
{% embed https://twitter.com/lifelongdev/status/1582388902769618944 %}
https://extensions.dev/extensions/vonage/firestore-vonage-video-express Glad to see it out there. Seemed like I started working on it forever and a day. haha Other than that, I added some screenshots and details for another project I've been working on. Still have to update a slide and record a talk for later this week.

- Personal : Last night I worked on my side project. Made a lot of progress but ran into an issue where I'm making a call to a service but getting a 403 forbidden. I'll have to look into it more. Also watched "The Walking Dead" latest episode.

![Look down into the Grand Canyon, United States with colorfully striped plateaus extending into the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1o828zmjmg8iowxmuxh.png)

Going to eat dinner and then try to record this talk. Hopefully I can knock it out quickly. After that, I want to get some work done on my side project and maybe watch the new episode of "Chainsaw Man" if it's out.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Uvu4z8Oy9_o %}
How to set up your SSH key and link to GitHub
Tags: beginners, github, git
Published: 2022-10-18 21:24:30

## Linking SSH Key to GitHub or GitLab

Hey beginner coders! Linking your SSH key to GitHub or GitLab is ESSENTIAL to updating your repositories. Let's jump into it.

### Generating your SSH Key on Mac OS

If you already have an SSH key, skip to the next section (type `ls -al ~/.ssh` in your terminal to see if you have any ssh keys. Your ssh key will end in `.pub`).

`ssh-keygen -t ed25519 -C "your_email"`
The terminal will prompt you to enter a file "in which to save the key". Select "Enter".
The terminal will prompt you to enter a passcode. Choose a passphrase of your choice and enter. Make sure to note this passphrase in a secure location.

### Add SSH key to SSH agent on Mac OS
If you've already done this previously, skip to "Linking Your SSH Key to GitHub".

In your terminal type the following:

- `sudo -s -H` OR `exec ssh-agent bash` OR `exec ssh-agent zsh` (this depends on your environment)
- `eval "$(ssh-agent -s)"`
- `$ ssh-add --apple-use-keychain ~/.ssh/id_ed0000`

### Linking Your SSH Key to GitHub

1. Log into your GitHub/GitLab account
2. Navigate to **"Settings"** than **"SSH keys"**
3. Select **"New SSH key"**
4. Create a title for your key
5. Paste your _**public key**_
6. Click **"Add SSH key"**
___

#### What is your public key? 

Type `cat ~/.ssh/id_ed00000.pub` OR the name of your respective key (find file name using `ls -al ~/.ssh`)

The terminal will return something that looks like `ssh-ed... long_string_of_letters_and_numbers` `your_email`. 

Copy the `ssh-...` and the `long_string_of_letters_and_numbers` ONLY into the public key box on GitHub.

___

That's it! You're ready to pull and push changes to your repo.

## QUESTION FOR EXPERIENCED CODERS! 

How many SSH keys do you have? Do you make a new SSH key for every repository? Do you use the same SSH key for all work related projects? How many SSH keys do you recommend generating? **Let me know in the comments.**

Any tips that I missed? Let me know!

_Sincerely, a beginner developer._

Resources: UC Berkeley Coding Boot Camp and [GitHub](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent).
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-10-18 20:19:23

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Transport your Components Anywhere

Sometimes we want certain parts of a component in React to appear outside the component tree. Here, @smpnjn shows us how to transport our components anywhere! All we need to do is think with portals.

{% embed https://dev.to/smpnjn/transporting-your-components-anywhere-with-react-portals-6li %}


## Advice for Junior Devs

@jeroendedauw shares some general and technical advice for junior developers, as well as some solid recommendations for supplemental reading.

{% embed https://dev.to/jeroendedauw/advice-for-junior-developers-30am %}


## DevOps Roadmap to Fit Your Background

Looking to become a DevOps engineer but not sure where to start? Look no further, @techworld_with_nana has written a roadmap tailored to 5 common backgrounds (from newbies to sysadmins). 

{% embed https://dev.to/techworld_with_nana/from-zero-to-devops-engineer-devops-roadmap-for-your-specific-background-4h8n %}


## Get Rid of If-Else Chains for Longevity

All programming principles and paradigms aim to enhance code readability and maintainability. In this article, @smuhammed shares some basic tips for code longevity. 

{% embed https://dev.to/smuhammed/how-to-eliminate-if-else-chain-for-long-life-software-3ea3 %}


## We're Breaking Up with CSS-in-JS

@srmagura, the lead developer at Spot, delves into what originally attracted the team to CSS-in-JS, and why they have decided to shift away from it.

{% embed https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b %}


## React Just Got Even More Awesome

We're getting an exciting new feature in React that will make all things async, especially data fetching, a lot easier. Check out all the new features with @dayvster!

{% embed https://dev.to/dayvster/react-just-got-even-more-awesome-f15 %}


## Don't be Arrogantly Ignorant

Like @wesen, we agree that we should all aspire to make technology more welcoming. The best way to do so is to approach every situation with humility, compassion, empathy, and a love of technology & its communities. 

{% embed https://dev.to/wesen/dont-be-arrogantly-ignorant-dont-flame-814 %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
First Day of Boot Camp #DiaryEntryCD
Tags: beginners, codenewbie, watercooler
Published: 2022-10-18 19:31:39

# Day 1 of Front-End Coding Boot Camp

I am a student of a certain Front-End boot camp running in the UK. We have been encouraged to be a part of this community, make contributions (eventually), and grow within the industry. 

At the moment I don't have anything fancy or game-changing to introduce to make devs lives' easier, but I wanted to make this post so that I can look back on it and mark how far I went from Day 1 to last day of the boot camp. 

Before I share my experience, please know that previously I have been working in the IT industry for several years and studying Front-End on my own for about a year on and off before I came across this boot camp. 

Day 1 has been mostly exciting so far, I have met the team, talked with instructors and even helped a fellow student get back on track with their pre-requisite work before the first lesson after they messaged me directly asking for help. 

On the contrary, I have also met a "know-it-all" student, who was, in my opinion, stealing the spotlight a little too much by asking non-beginner friendly questions, trying to advance the course, only to be told that we go from zero to pro at a steady pace by the instructor :')    

I have also noticed that one person dropped out from the course in the middle of a lesson - I guess it just wasn't for them. 

Today's session had **a lot** of troubleshooting in it. There was a ton of students with SSH key generation issues, linking it to Github and being asked for a password at every request made, which I can totally understand - I recall doing it for the first time myself without any teacher help, it was very confusing, but I eventually did it, so I fully sympathise with those students. 

We then progressed onto using the terminal or Git Bash on Windows and started learning basic commands: changing directory, creating directories, creating files, deleting files, opening VS Code from the terminal/Git Bash - I admit it was not as exciting as figuring out a bug or writing code, but it was a nice refresher nevertheless.

Right now I will go back to my homework and ensure all is done to the best possible standard because for me this boot camp is an opportunity to really change my future and career, so I will give my 100% in everything that I do in it and beyond.

Thank you for reading and until next time :wave:
Curso gratuito de Componentes básicos en SwiftUI
Tags: swiftui, ios, apple, swift
Published: 2022-10-18 19:52:12

[Componentes básicos en SwiftUI](https://www.udemy.com/course/componentes-basicos-swiftui/)

Hola , si no puedo ponerlo aquí agradecería tu comentario : me gustaría compartir mi primer curso en udemy , me gustaría recibir feedback para crear mejor contenido para la plataforma
What do developers want?
Published: 2022-10-18 19:43:20

I would like to know which is the most loved or most hated programming language in the DEV community.
Tell me which is your favorite language and if you want your opinion too.

If you want to know what are the most used programming languages and technologies you can get an idea by looking at the links below.
<center>[**Manfred Developer Career Report**](https://www.getmanfred.com/developer-career-report)
[**The 10 Most Popular Programming Languages Of 2022** ](https://www.codecademy.com/resources/blog/most-popular-programming-languages-2022-stack-overflow/)
[**Most popular technologies by Stack Overflow**](https://survey.stackoverflow.co/2022/#section-most-loved-dreadedand-wanted-programming-scripting-and-markup-languages)</center>
___
Test Laravel Breeze Authentication with Cypress
Tags: laravel, php, cypress
Published: 2022-10-18 19:42:46

This post is showing some examples that are pretty easy to add to any Laravel project that use Laravel Breeze.

In order to use the full example you should require to use the [Laracast/Cypress package](https://github.com/laracasts/cypress).

Here a login example:

Take in mind that the default user factories from Laravel sets user password generated by factories as "password":

```js
describe('Authentication test', () => {
    it('tests a success manual authentication with the login form', () => {
        cy.visit(`/login`);

        cy.php(`
            App\\Models\\User::factory()->create(['email', 'john@doe.com']);
        `).then(user => {
            cy.get('input[type="email"]').type(user.email);
            cy.get('input[type="password"]').type('password');
        });

        cy.get('button[type="submit"]').click();

        cy.location('pathname').should('equal', '/dashboard');
    });
});
```

Some interesting ideas could be:

#### Test http status code

```js
cy.request('http://localhost:8000/dashboard').then((response) => expect(response.status).to.eq(200));
```

#### Test a middleware

```js
// visit a url
cy.visit('http://localhost:8000/dashboard');
// check the next url location
cy.url().should('match', /login);
```

Sometimes you require to test a larger workflow like logout and then check that some middleware works...

```js
cy.visit('/logout') // I got you cover, it would do the magic
```

#### Check some content

Take in mind that you should avoid testing texts that could be escaped, with that said, you can test something like a welcome message in the `/dashboard` url.

```js
cy.contains('Welcome');
```

Or even better, use the PHP method or the login helper to test exactly the current user welcome message:

```js
cy.login({ email: 'john@doe.com', name: 'John Doe' });
cy.visit('/dashboard').contains('Welcome Back, John Doe');
```


Hopefully this little examples, helps to provide enough guide to create you own tests for your applications.
🪄 Grype jq tricks : csv for spreadsheets 📊
Tags: docker, security, devops, infosec
Published: 2022-10-18 19:38:03

## ❔ About

Often, when you talk about an image vulnerabilities, you need to get that kind of charts in a spreadsheet:


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

Therefore we created the following issue : 

{% embed https://github.com/opt-nc/grype-contribs/issues/8 %}


## 🪄 The `jq` trick

Just follow (and bookmark) the following guidelines to enjoy the trick : 

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znw938ah74omekt61hwy.png)](https://github.com/opt-nc/grype-contribs/blob/main/JQ_TRICKS.md#csv-output)

## 🍿 Showtime

Enough talk, let's see the trick in action :

{% youtube _llZdBSS0iw %}

## 🔖 Resources

- [The trick](https://github.com/opt-nc/grype-contribs/blob/main/JQ_TRICKS.md#csv-output)
- [`jq`](https://stedolan.github.io/jq/)

{% github opt-nc/grype-contribs %}