teleren/devto huggingface dataset:
Cypress for beginners: 5 basics commands to get started
Published: 2022-05-17 10:45:58

Cypress is a simple framework based in Javascript that allows you to write your tests for front-end applications. So, in this post I'll show you 5 basics commands to get started in Cypress.

## .visit
We use this command for access the address sent by parameter. This parameter can be a string with a value, a variable or a empty string, but in this last case the Cypress will look for *baseUrl* attribute on [*cypress.json*](https://docs.cypress.io/guides/references/configuration#cypress-json) file.

### Usage 
`cy.visit('https://dev.to/rodrigosta')`
`cy.visit(someVariable)`
`cy.visit('')` 

## .get
This command, as the name implies, select a element in [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) by selector or [*alias*](https://docs.cypress.io/guides/core-concepts/variables-and-aliases). It's one of the most simplest and basic commands and can get elements for any selector, for example: *id, class, data-testid tags etc.*

### Usage 
`cy.get('#emailInput')`
`cy.get('.dropdown-menu')`
`cy.get('input')`

## .type

When we want to type something in some element in the DOM, we use this command. The most common case is to pass a string or variable per parameter, but it can be special character too, to do actions, for example: *{backspace}, {enter} etc.*

### Usage 
`cy.get('input').type('something')`
`cy.get('.passwordInput').type(someVariable)`
`cy.get('#emailInput').type('teste@example {enter}')`

## .click


With this command we can click on the elements of the DOM. By parameter we can send coordinates or even specific positions to click on the page. Related to click, Cypress provides commands for some other behaviors, for example: *{.rightclick()} and {dbclick()}*. But the usage for .click() is below.

### Usage
`cy.get('input').click()`
`cy.contais('Some word').click(position)`
`cy.get('#button).click(‘topRight’)`


## .should

Last but not least we have the command that creates assertions in Cypress. Most of times it's common to send two values per parameter, the one you want validate and a value, but you have the possibility to send only one parameter as well. 

## Usage 
`cy.get('input').should('have.value', 'Jane')`
`cy.get('#loginInput').should('be.visible')`
 
Even though this post is very simple and short, I hope it awakens in you a passion for Cypress and automated software testing. If you want more information about the framework, you can access de [Cypress documentation](https://docs.cypress.io/). 

It's all for today, but I hope this text helps you, and if you have any ask, text me in the comments. I see you soon.
I made your stupid app ideas!
Tags: react, javascript, webdev, discuss
Published: 2022-05-17 10:36:01

About a week ago, [I asked you guys](https://dev.to/virejdasani/tell-me-a-stupid-app-idea-and-ill-make-it-1a9f) to give me stupid app ideas to make

I made a few of them, let me know what you think!

Also, consider giving the video a like 👍, thanks!

P.S. watch till the very end for a bonus app 👇

{% youtube ndmzLQPbg7s %}

Also, comment some more stupid app ideas and I'll make them!

Edit: new idea
{% youtube SGFNhz91yNQ %}

## Edit 2: I made some more of your app ideas 👇
{% youtube gheeg-5sxDQ %}
How to merge a branch when you forgot it's name ? -Git
Tags: git, github, beginners, productivity
Published: 2022-05-17 10:32:46

Have you ever wanted to merge a working branch after a checkout to master but you suddenly forgot the name of your working branch ? then reach to your tasks manager or hit a "git branch -a " to check all the branches just to get even more confused ?
well i have a little tip for you !

let's say that this is your working branch 

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

now let's head to the master branch using 
"git checkout master"
and to merge our working branch we just need to use this command 

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

what this does is that it refers to the previous visited branch as "-".
So basically it's like saying:
"git merge previousVisitedBranch"

**ps:it works also with "git checkout"** 

**try it yourself ! **

Happy coding
The built in dictionaries of macOS and iOS
Tags: macos, ios, language, tools
Published: 2022-05-17 10:20:01

Did you know that your Mac, iPhone and iPad comes with high quality foreign language dictionaries for many languages?

I don't mean machine learning translation, I mean real dictionaries like Oxford, Duden, Pons, etc.

For example there are Dictionaries for German, English, Mandarin, French, Italian, Korean, Thai, Turkish, Tamil and more.
Even dual-language dictionaries for combinations like French-English, German-English, Korean-English, and others.
As well as an English Thesaurus, which is super useful for copy writing.


I have written a [short blog post about how to activate and use the dictionaries on iOS and macOS](https://wokabulary.com/blog/built-in-dictionary-mac-iphone/).
Coin change problem
Tags: programming, computerscience, javascript
Published: 2022-05-17 10:19:09

https://www.cs.usfca.edu/~galles/visualization/DPChange.html


```js
const coin_change_bottom_up = (coins, sum) => {
  let memo = new Array(sum + 1).fill(Infinity);
  memo[0] = 0;
  for (let i = 1; i <= sum; i++) {
    for (let coin = 0; coin < coins.length; coin++) {
      if (coins[coin] <= i) {
        memo[i] = Math.min(memo[i], 1 + memo[i - coins[coin]]);
      }
    }
  }
  return memo[sum];
  // O(n*m)
};

let coins = [1, 5, 10, 25];
let sum = 18;
console.log(coin_change_bottom_up(coins, sum));
//---------------------------------

const coin_change_top_dowm = (coins, sum, memo) => {
  if (sum == 0) return 0;
  if (sum < 0) return 1e9; // 1e9 = 1,000,000,000
  // already solved cases:
  let ans = Infinity;

  for (let coin = 0; coin < coins.length; coin++) {
    if (coins[coin] <= sum) {
      let sub_ans = 1 + coin_change_top_dowm(coins, sum - coins[coin], memo);
      //   console.log(sub_ans);

      ans = Math.min(ans, sub_ans);
    }
  }
  memo[sum] = ans;
  return memo[sum];
};

let memo = new Array(sum + 1).fill(Infinity);
console.log(coin_change_top_dowm(coins, sum, memo));

```
Excluding files from code coverage in GO
Tags: go, testing, codecover
Published: 2022-05-17 09:47:11

It's not uncommon to find yourself in a situation where you would like to make an exception for some code from being included in code coverage; perhaps it's auto-generated code or perhaps it's a wrapper of a third party API. Unfortunately, unlike many other languages, there is no built-in way to do this in Go ([Hopefully not for too long](https://github.com/golang/go/issues/31280)). In this article, we go over a simple workaround to achieve this goal.

First things first, a quick recap. Code coverage can be generated using the `go cover` tool. From the docs, usage of the tool is described as: 

> Usage of 'go tool cover':
> Given a coverage profile produced by 'go test':
>         go test -coverprofile=c.out
> Open a web browser displaying annotated source code:
>         go tool cover -html=c.out

As such, we first run our tests using:

```
go test ./... -coverprofile=coverage.out
```

Subsequently, we generate code coverage using:

```
go tool cover -html=coverage.out
```

I like to run the commands one after the other in one call, like so:

```
go test ./... -coverprofile=coverage.out && go tool cover -html=coverage.out
```

## The workaround
 
It's simple. Code coverage is generated based on the `coverprofile` which is no more than a plain text file annotating which lines of each code file are covered and which are not. Remove all lines about a file from the `coverprofile` and it won't be included in the code coverage report. As simple as that. 

Here is what a `coverprofile` looks like

![Screenshot of a coverprofile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3uqab14j2ls2ts87olg.png)

It wouldn't be ideal if we have to manually manipulate the `coverprofile` every time we want to generate code coverage. A better way would be to automate this process. For that, We need to do 2 things. The first is a file that holds paths to files to be excluded from code coverage. File paths in this file should include the full package name. I created a file named "exclude-from-code-coverage.txt". Here is a snippet of what it looks like


![Screenshot of exclude-from-code-coverage.txt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubjq3xggvhyykk02hdjd.png)

The second is a script that removes files in exclude-from-code-coverage.txt from the `coverprofile`. This simple script (named exclude-from-code-coverage.sh) does just that: 

```
#!/bin/sh
while read p || [ -n "$p" ] 
do  
sed -i '' "/${p//\//\\/}/d" ./coverage.out 
done < ./exclude-from-code-coverage.txt
```

And finally, tying it all together:

```
go test ./... -coverprofile=coverage.out && ./exclude-from-code-coverage.sh && go tool cover -html=coverage.out
```

Let's break it down: 

1. The first command, `go test ./... -coverprofile=coverage.out` runs the tests and generates the `coverprofile`. 
2. The second command, `./exclude-from-code-coverage.sh`, removes files we want to exclude from code coverage from the `coverprofile`. 
3. The third command, `go tool cover -html=coverage.out`, generated the code coverage report.
What GraphQL Is and Isn't?
Tags: graphql, webdev
Published: 2022-05-17 09:44:11

### Definition : 
Graphql is a query language. But it does not mean it is a language that interacts with the database like popular SQL languages (e.g. MySQL, PostgresSQL).

> **So what does GraphQL do?**
 _Queries an API, not a database._

---


### Distinction between Query and Mutation in GraphQL
GraphQL doesn't require http requests method such as `GET`, `POST`, `PUT`, `DELETE`.

In GraphQL your most likely going to `GET` data by using `Query`. The other data update methods `POST, PUT, DELETE` will be handled by `Mutations`.

A `query` to fetch all the pets from the app might look like this:

```
query GetAllPets {
  pets {
    name
    petType
  }
}
```

And then a `mutation` that adds a new pet might look a little something like this:

```
mutation AddNewPet ($name: String!, $petType: PetType) {
  addPet(name: $name, petType: $petType) {
    id
    name
    petType
  }
}
```

---

### GraphQL Vs REST

<table class="table table-striped">
<tbody>
<tr>
<th>GraphQL</th>
<th>REST</th>
</tr>
<tr>
<td>GraphQL is an application layer server-side technology which is developed by Facebook for executing queries with existing data.</td>
<td>REST is a software architectural style that defines a set of constraints for creating Web services.</td>
</tr>
<tr>
<td>It follows client-driven architecture.</td>
<td>It follows server-driven architecture.</td>
</tr>
<tr>
<td>GraphQL can be organized in terms of a schema.</td>
<td>REST can be arranged in terms of endpoints.</td>
</tr>
<tr>
<td>GraphQL is a growing community.</td>
<td>REST is a large community.</td>
</tr>
<tr>
<td>The development speed in GraphQL is fast.</td>
<td>The development speed in REST is Slow.</td>
</tr>
<tr>
<td>The learning curve in GraphQL is difficult.</td>
<td>The learning curve in REST is moderate.</td>
</tr>
<tr>
<td>The identity is separated from how you fetch it.</td>
<td>The endpoint you call in REST is the identity of an object.</td>
</tr>
<tr>
<td>In GraphQL, the server determines available resources.</td>
<td>The shape and size of the resource are determined by the server in REST.</td>
</tr>
<tr>
<td>GraphQL provides high consistency across all platforms.</td>
<td>It is hard to get consistency across all platforms.</td>
</tr>
<tr>
<td>The message format for GraphQL mutations should be a string.</td>
<td>The message format for REST mutations can be anything.</td>
</tr>
<tr>
<td>It is strongly typed.</td>
<td>It is weakly typed.</td>
</tr>
<tr>
<td>GraphQL API endpoints are single.</td>
<td>REST API endpoints are multiple.</td>
</tr>
<tr>
<td>It uses metadata for<br>
query validation.</td>
<td>It does not have machine-readable metadata cacheable.</td>
</tr>
<tr>
<td>Provides consistent and high-quality UX across all operating systems.</td>
<td>It is difficult to get consistency across all operating systems.</td>
</tr>
<tr>
<td>Partners of GraphQL require API customization.</td>
<td>It offers flexible public API that can easily enable new applications.</td>
</tr>
</tbody>
</table>
What enterprise architecture strategy reduces cost and time to market?
Tags: architecture, aws, productivity, leadership
Published: 2022-05-17 09:35:42

Last year AWS published their case-study on Liberty Mutual’s serverless architecture [strategy](https://theserverlessedge.com/developing-for-the-cloud-are-you-wasting-time-and-money/). Read it [here](https://aws.amazon.com/solutions/case-studies/liberty-mutual-case-study/) to find out how Dave and his well architected teams did it!


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

This is a real life [digital transformation](https://theserverlessedge.com/how-to-start-your-enterprise-digital-transformation/) story about a one hundred year old organisation.

## Engineering partnership between Liberty Mutual and AWS
Liberty Mutual chose AWS to form an engineering partnership that would sustain through their serverless journey.

In the case-study, Dave explains that [enterprise architecture strategy](https://theserverlessedge.com/looking-for-the-right-tools-for-strategy-mapping/) that [Liberty](https://theserverlessedge.com/watch-matt-coulter-liberty-mutual-reminisce-about-cdk-patterns-serverless-and-the-value-flywheel/) adopted. There were many [serverless-first projects](https://theserverlessedge.com/aws-have-published-their-serverless-breakout-sessions-on-video/) completed using AWS Lambda. But when serverless-first wasn’t feasible, the team used a cloud-native option for legacy workloads. Now more than 50 percent of Liberty Mutual’s workloads run in the cloud.

There is also a review of Liberty Mutual’s use of AWS Step Functions. It was used to create an event-driven workflow in which the data feeds from each line of business are transformed into a series of events, or financial transactions. This resulted in processing 100 million transactions in one run at the end of every month. Which means that for the majority of the month, it is offline and therefore not accruing costs.

## Developer experience
And the [AWS Cloud Development Kit](https://aws.amazon.com/cdk/) (AWS CDK), an open-source software development framework in which engineers can use familiar programming languages to define cloud application resources.

As part of the enterprise architecture strategy, the company supports its engineers in earning AWS certifications and provides training and in-house workshops.

## Well Architected Framework
Engineers also use the [AWS Well-Architected Framework](https://theserverlessedge.com/how-to-make-well-architected-work-for-organisations-introducing-the-scorp-review-cycle-part-1/) that helps cloud architects build secure, high-performing, resilient, and [efficient infrastructure](https://theserverlessedge.com/our-guide-to-the-aws-cost-optimization-pillar/) for their applications and workloads.

Through the engineering partnership approach, Liberty Mutual have been able to capitalise on the ever expanding and transformative list of use cases that serverless offers.

“Our collaboration to figure things out feels like more than a customer-vendor relationship,” Dave says. “It genuinely feels like AWS is part of our team.
GitIcons - add folder icons to your repos
Tags: mac, github, icons
Published: 2022-05-17 09:22:57

---
title: GitIcons - add folder icons to your repos
published: true
description: Mac App that adds folder icons to your repos
tags: mac, github, icons
cover_image: https://raw.githubusercontent.com/samdenty/git-icons/master/banner.gif
---

git-icons is built in Rust, and uses the Rust Crate [`repo_icons`](https://github.com/samdenty/repo_icons) to fetch the icons for a given repository.

Once the icons are fetched, it writes them to the `Icon?` file inside all your repo directories.

It also has SQLite persistence with [Diesel.rs](http://diesel.rs/). This allows you to use a custom icon for a repository, or switch between the different icons returned by `repo_icons`

[Download the app for Mac now](https://github.com/samdenty/git-icons/releases) or [give it a star](https://github.com/samdenty/git-icons)


{% embed https://www.youtube.com/watch?v=jrO3qSEpAFU %}
I am officially an Auth0 Ambassador
Tags: news, help, motivation, tooling
Published: 2022-05-17 09:04:18

I am really happy to share with the community this awesome achievement: I got awarded as **Auth0 Ambassador**.

Honestly I received the confirmation email a few weeks ago, but I would like to finalize the first steps and the first on boarding call before sharing the great news with you all.

## What is Auth0?
Auth0 (Okta) is a service that provides authentication and authorization as a service (in a nutshell).
It's very easy to use from Single Page Applications, Native applications, mobile applications, web applications and much more.

You can find additional information here: [https://auth0.com/docs/get-started](https://auth0.com/docs/get-started)

![Auth0 Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dljypw61puwco821fhl9.png)

## What is the Auth0 Ambassador Program?
The Auth0 Ambassador Program was born with the intent to share the knowledge about identity and security in the applications.

In addition is a good program if you want to improve your skills for sharing content online (writing, webinars, videos) and at in person events (meetups, events).

If you want to read more information about the program, you can follow this link: [Auth0 Ambassador Program](https://auth0.com/ambassador-program)

![Ambassador logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73tazihq0uwniboil9g9.png)

There are more than 150 Ambassadors around the world with a lot of content ready for you and a lot of content ready to come.

You can find the list of the Auth0 Ambassadors [here](https://auth0.com/ambassador-program/ambassadors).

## What's my plan for the future?
Identity and Security are not two new topics for me.
I did a lot of presentations and workshop about Azure Active Directory and Web Applications in the last two-three years.
Of course I will continue to do so and I will also add some content related to Auth0 (I am creating a new SaaS and I'm using Auth0 as identity provider).

![Ambassador Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vavl2hg31vdq258yu3b8.jpg)

Keep in touch and follow me on [Twitter](https://twitter.com/kasuken) if you want to be updated about my journey.

Start to use Auth0 from today: [Get Started](https://a0.to/signup-for-auth0)

![Auth0 Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bx29nai9ztyzknbkr65.png)
RSpec & Rails: how to stub env vars
Tags: ruby, testing, programming
Published: 2022-05-17 09:02:25

In order to stub an environment variable in the test (which is probably missing in test environment), stub `:[]` or `fetch` method:

```ruby
# If code relies on ENV["CHARGES_TOKEN"]
allow(ENV)
  .to receive(:[])
  .with("CHARGES_TOKEN")
  .and_return("XXX")
```

```ruby
# If code relies on ENV.fetch("CHARGES_TOKEN")
allow(ENV)
  .to receive(:fetch)
  .with("CHARGES_TOKEN")
  .and_return("XXX")
```

If you want shorter syntax, take a look at [ClimateControl](https://github.com/thoughtbot/climate_control) gem:

```ruby
ClimateControl.modify CHARGES_TOKEN: "XXX" do
  # ...
end
```
useEffect vs useLayoutEffect
Tags: react, javascript, programming, webdev
Published: 2022-05-17 08:48:07

At the first glance, it seems like to be used for same purpose, but there are differentials of use cases from it's core principles.

## useEffect

`useEffect` is the one we use 99% in the React function component. When hooks are stable and if you refactor any of your class components to use hooks, you'll likely move any code from `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount `to `useEffect`.

The one catch is that this runs after react renders your component and ensures that your effect callback does not block browser painting. This differs from the behavior in class components where `componentDidMount` and `componentDidUpdate` run synchronously after rendering. It's more performant this way and most of the time this is what you want.

However, if your effect is mutating the DOM (via a DOM node ref) and the DOM mutation will change the appearance of the DOM node between the time that it is rendered and your effect mutates it, then you don't want to use `useEffect`. You'll want to use `useLayoutEffect`. Otherwise the user could see a flicker when your DOM mutations take effect. This is pretty much the only time you want to avoid `useEffect` and use `useLayoutEffect` instead.


## useLayoutEffect

This runs synchronously immediately after React has performed all DOM mutations. This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating state.

As far as scheduling, this works the same way as `componentDidMount` and `componentDidUpdate`. Your code runs immediately after the DOM has been updated, but before the browser has had a chance to "paint" those changes (the user doesn't actually see the updates until after the browser has repainted).


## Summary

- useLayoutEffect: If you need to mutate the DOM and/or do need to perform measurements
- useEffect: If you don't need to interact with the DOM at all or your DOM changes are unobservable (seriously, most of the time you should use this).


## One special case

One other situation you might want to use `useLayoutEffect` instead of `useEffect` is if you're updating a value (like a ref) and you want to make sure it's up-to-date before any other code runs. 

For example:

```
const ref = React.useRef()
React.useEffect(() => {
  ref.current = 'some value'
})

// then, later in another hook or something
React.useLayoutEffect(() => {
  console.log(ref.current) // <-- this logs an old value because this runs first!
})
```
So in situations like that, the solution is `useLayoutEffect`.


## Conclusion

It's all about defaults. The default behavior is to let the browser re-paint based on DOM updates before React runs your code. This means your code won't block the browser and the user sees updates to the DOM sooner. So stick with `useEffect` most of the time.
GUIDE TO CAREER PATHS IN PRODUCT DESIGN
Tags: webdev, career, design, beginners
Published: 2022-05-17 08:27:00


Wondering how to become a Designer? And what skills are required for a Designer?

In this [article](https://blog.getace.io/all-posts/career-paths-in-design), you will find Designer levels descriptions, what skills you need to be a Designer, as well as Designer career goals examples.

### Designer Career Path Templates

Click on the role & get the list of career path levels (or grades) for Designers and top Designer skills on each level.

- [Product Designer](https://www.getace.io/templates?category=Design+and+Product#skill-matrices)

## 50+ tech roles
Need more roles? Go to [Ace’s career path templates](https://www.getace.io/templates) for 50+ tech roles.

You’ll find career paths for Backend Developer, Front End Developer, Game Development, Software Testing (QA), Data Science, Design, Management roles, and more.