teleren/devto huggingface dataset:
Condicional - Switch Case
Published: 2021-03-17 22:51:44

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

No post de hoje irei falar sobre outro tipo de verificação condicional, chamado de Switch Case.

### Switch Case

O `switch case` é usado para verificar múltiplos valores possíveis de uma variável ou constante.

Para utilizarmos, escreveremos a palavra chave `switch`, passando como argumento o que queremos verificar.

Vou colocar um exemplo abaixo e após o exemplo irei detalhar o que acontece.

```js
const hero = 'Superman'

switch (hero) {
 case 'Batman':
  console.log('Seu herói favorito é o Batman')
  break
 case 'Superman'
  console.log('Seu herói favorito é o Superman')
  break
 default:
  console.log('Seu herói favorito não é o Batman nem o Superman')
}

// Output
Seu herói favorito é o Superman
```
Como visto acima, pode observar que:

- `switch`: É a palavra chave para uso da condicional switch case e fica escutando o que foi passado por argumento.
- `case`: São os casos possíveis para verificação da expressão passada por argumento, caso um dos cases der match com o argumento do switch, o bloco de código dentro do `case` será executado e os outros ignorados.
- `break`: É a ordem de parada da condicional, caso não seja colocada a palavra chave `break` no final de cada bloco de `case`, isso fará com que a condicional continue executando o próximo bloco de código.
- `default`: É a palavra chave usada para que o seu bloco de código seja executado no caso de nenhum `case` satisfazer a verificação desejada. Importante frisar, que no bloco de código do `default` não utilizaremos a palavra chave `break`, pois ele já é o último item a ser verificado.

Vou deixar o link para a documentação da MDN sobre [switch case](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/switch)

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)
Contributors wanted for the 2021 Web Almanac, a new Chrome Developers website, and Tailwind CSS v2.1 | Front End News #025
Tags: frontendnews, news
Published: 2021-04-13 05:14:20

> **NOTE:** This is issue #025 of my newsletter, which went live on Monday, April 12th. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

Ever wanted to contribute to the Web Almanac? Here's your chance, for the team is looking for contributors. Next, we have the first update to the BAT Roadmap 2.0 from Brave and a new portal for Chrome Developers. Last but not least, the leading software update of the week is version 2.1 of Tailwind CSS.

***

## Contribute to the 2021 Web Almanac

The Web Almanac has become one of the most comprehensive resources to measure the state of the web. And even though you may have not finished reading the 2020 edition, the core team is already looking for contributors for 2021. The available roles cover a broad spectrum: Subject Matter Expert (Author)", Peer Reviewer, Data Analyst, Designer, Developer, Translator, and Editor. More details are available below.

- [2021 Web Almanac Interest Form](https://docs.google.com/forms/d/e/1FAIpQLSeZJhAvmSTFtQpahplL7uwdBo7UB1iAkRp2MUaPK74KsrN1fQ/viewform)

***

## Browser news

### Brave

Brave continues its quest of making crypto accessible to everyone. The team published the first update to their BAT Roadmap 2.0. This includes advancements to the Brave wallet, the Brave DEX Aggregator, and a bunch of community and partnership updates.

- [BAT Roadmap 2.0: Update 1](https://brave.com/bat-roadmap-update-1/)

### Chrome

The Chrome team is on a journey to improve the DevTools architecture. Following the introduction of JavaScript modules and Web Components, they are documenting the 13-month journey from the Closure Compiler to TypeScript. Oh, and they updated the portal website too. About time, I'd say.

- [Chrome Developers](https://developer.chrome.com/)
- [DevTools architecture refresh: migrating DevTools to TypeScript](https://developer.chrome.com/blog/migrating-to-typescript/)


***

## Software updates and Releases

- **[Fabric.js v4.4.0](https://github.com/fabricjs/fabric.js/releases/tag/v4.4.0)** - Javascript Canvas Library
- **[Marko v5.7.0](https://github.com/marko-js/marko/releases/tag/v5.7.0)** - eBay's UI library
- **[NodeCSV v5.5.0](https://github.com/adaltas/node-csv/releases/tag/v5.5.0)** - CSV generation, parsing, transformation and serialization for Node.js
- **[React Hook Form v7.0.0](https://github.com/react-hook-form/react-hook-form/releases/tag/v7.0.0)** - React Hooks for forms validation
- **[Tailwind CSS v2.1](https://blog.tailwindcss.com/tailwindcss-2-1)** - a utility-first CSS framework

***

## Wrapping things up

That's all I have prepared for this issue. Have a great and productive week, keep yourselves safe, and I will see you next time!
If Your Wifi Doesn't Show up in Windows Do this
Tags: wifi, windows, regedit, tutorial
Published: 2021-04-13 05:04:04

You have A wifi and in ur windows pc its name is not showing up do this:

1.Go to Regedit(Windows Registry Editor)
The Registry Editor allows you to view and make changes to system files and programs that you wouldn't be able to access otherwise. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14e6dvz96itcng68iuma.png)
 
 
 
 
2. Go to : HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Class
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2esthakqzcpg6vjlt6d.png)
 
3.Then find "CountryRegion" without quotes.

4.Set the value to 1

5.Reboot.

Then see.

Youtube Tut: https://www.youtube.com/watch?v=hTz8hNlnQtc&t=7s
Comparing strings in JavaScript
Published: 2021-04-13 04:39:46

This is extracted from the much larger post: [The Complete Guide to Working With Strings in Modern JavaScript](https://www.baseclass.io/guides/string-handling-modern-js)

---

# Equality

When you know you are comparing two string primitives, you can use either the `==` or `===` operators:



    "abba" === "abba" // true
    "abba" == "abba" // true


If you are comparing a string primitive to something that is _not_ a string, `==` and `===` behave differently.

When using the `==` operator, the non-string will be coerced to a string. That means that JavaScript will try and make 
it a string before comparing the values.

    9 == "9"
    // becomes 
    "9" == "9" //true

For a strict comparison, where non-strings are not coerced to strings, use `===`:

    9 === "9" // false

The same is true of the not-equal operators, `!=` and `!==`:


    9 != "9" // false
    9 !== "9" // true


If you're not sure what to use, prefer strict equality using `====`.

> When using **String** objects, two objects with the same value are _not_ considered equal:

>        new String("js") == new String("js") // false
>        new String("js") === new String("js") // false

---

# Case sensitivity

For case-insensitive comparisons, do not convert both strings to upper or lowercase and then compare them, as this is unreliable with some characters.

Instead use [localeCompare](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare):


    let a = 'Résumé';
    let b = 'RESUME';
    
    // Incorrect: returns 'false'
    a.toLowerCase() === b.toLowerCase()
    
    // Correct: returns '1'
    a.localeCompare(b, undefined, { sensitivity: 'accent' })

localeCompare is supported in the following browsers

![localeCompare browser support: Chrome 24+, Edge 12+, FireFox 29+, Safari 10+, Opera 15+](https://www.baseclass.io/guides/string-handling-modern-js/localeCompare_browser_support.png)

---

# Greater/less than

When comparing strings using the `<` and `>` operators, JavaScript will compare each character in 'lexicographical order'.

That means that they are compared letter by letter, in the order they would appear in a dictionary:


    "aardvark" < "animal" // true
    "gamma" > "zulu" // false


> When comparing strings using `<` `>`, lowercase letters are considered larger than uppercase.
>
> `"aardvark" > "Animal" // true`
>
>    This is because JavaScript is actually using each character's value in Unicode, where lowercase letters  are _after_ uppercase letters.

---

# True or false strings

Empty strings in JavaScript are considered false when compared with the `==` operator 
(but not when using `===`)


    ("" == false)  // true
    ("" === false) // false


Strings with a value are 'true', so you can do things like this:


    if (someString) {
        // string has a value
    } else {
        // string is empty or undefined
    }
A Quick Note About My Posts
Published: 2021-04-13 04:37:10


Hi, I just wanted to leave a quick note about my posts. I'm not an expert, I never claimed to be. Like a lot of you the code that I write is a culmination of me struggling through to find the best solution I can.

I might say stuff that's incorrect, but it's correct in my mind at the time that I wrote it. Feel free to tell me that I'm wrong, (in a constructive manner).

For me these posts are a way for me to check my understanding. If I write it out I can cement it better in my own head and if someone tells me that something I wrote is incorrect then I tend to learn better that way.

So don't be shy. Let me know.

Thanks for reading and that's all y'all.
49 Days of Ruby: Day 17 - Methods
Tags: ruby
Published: 2021-04-13 04:24:05

---
title: 49 Days of Ruby: Day 17 - Methods
published: true
description: Join us on a 49 day learning journey through Ruby!
series: 49 Days of Ruby
tags: #ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9m73qaetuse3nm3y3it8.png
---

**Welcome to day 17 of the 49 Days of Ruby! 🎉**

Today we are looking at an area that we have touched upon quite a lot in the past 16 days, but we have never focused on. The method is a cornerstone of programming in Ruby, and for day 17 we will devote our time to it.

## What is a method?

The best way to understand a method is with an example of what it can do for us. Let's take a look:

```ruby
prepare_coffee
pour_milk
add_sugar
```

In the above example, we are making our daily coffee with three different expressions: `prepare_coffee`, `pour_milk` and `add_sugar`.

If I want to do this as it is, then I need to call each expression separately each day. Wouldn't it be nice if it was all wrapped up together? Hence, the method!

```ruby
def make_coffee
  prepare_coffee
  pour_milk
  add_sugar
end

> make_coffee

# => coffee
```

We used a *method* to combine the expressions together and produce a single result, which is our coffee.

That is the benefit, at its most fundamental level, of a method. It lets you make a set of expressions for a common goal.

Methods can also call other methods! For our `make_coffee` method I invoked three other (imaginary) methods. You can see methods as the building blocks of an application. 

Each method should encapsulate the smallest amount of logic possible. This is because it makes it much simpler, later on, to edit it and trace back bugs, and also, you can build tests easier for smaller chunks of code than for more convoluted methods. 

Why don't you open up a session of IRB on your machine and play around with method creation today! Share your learnings with the community after with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).

**Come back tomorrow for the next installment of 49 Days of Ruby! You can join the conversation on Twitter with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).**
Thoughts on Blazor
Tags: blazor, csharp, dotnet
Published: 2021-04-13 04:18:13

Here are just some quick thoughts about Blazor so far. I'll give you the tl;dr upfront because I'm cool.

If you're running a node, or other backend you should keep using whatever frontend framework you're currently using. You can check Blazor out and maybe start learning it but I wouldn't rewrite any of your stuff in Blazor.

The reason behind this is because IMO you lose some of the benefits of Blazor if you're not running a dotnet backend. One of my current pain points is that I'm running a React frontend and an Azure Function(C#) API.

I'm doing a lot of extra mapping. On the backend we have our Entities and DTOs. Then on the front end I'm taking data from the API and remapping it to fit the React frontend.

Just as a quick example we might have a Database Entity with First Name, Last Name, and Middle Initial. We don't need the Middle Initial on the frontend so our DTO only has First Name and Last Name. Those Two fields are sent to the frontend and I want to display them like this:

`Lastname, Firstname`

So what I do on the frontend is create a mapping function:

```
const mapFormValues = (values) => {
    return `${values.Lastname}, ${values.Firstname}`
}
```

Now I **could** just pass down a field that is already a combination like `FullName: "Myers, Tim"` but there are places where I still need to have just the first name or just the last name.

Its easier to combine values than it is to try and substring the whole value.

Another issue is that in C# our field names are `Pascal Case` and in React our field names are `camelCase`. You don't want to know how much time I've spend trying to figure out why something isn't rendering only to find out that the API is sending me, `LastName` and I'm using `lastName`.

So if you're running a C# backend you can directly benefit from using Blazor because you can share a model between the front end and backend.

I have a small app that I've written in React/Node/MongoDB and I am going to rewrite it in Blazor/ASP.NET to see what the actual pros and cons are.

Thanks for reading and that's all y'all.
One Release, One Smile
Tags: programming, productivity, agile
Published: 2021-04-13 04:17:06

# Only so many hours in the day
Each developer on a tech team has 8 hours a day, 40 hours a week, 2000 hours a year to develop a product. Time is limited, we can't get any more. (Working more than 40 hours a week actually lowers per-hour productivity so that is inadvisable.) You can always add more developers to a team, but features can only be broken up so much; you can't grow a garden in half the time by having two farmers! Your tech team's time is limited, the sooner you accept that the better.

# Every release should make one user happy
Now that we accept that time is limited, we must figure out how to use the time in the best way possible. But what is the "best way"? The most lines of code written? The most features completed? The most code releases made? I suggest that the answer is: the most smiles created.

The thesis of "most smiles per release" implies two things: some features create more smiles than others and features must be released to makes the smiles happen. This definitely requires a balancing act: release too fast and nothing will be of enough value to create smiles or take too long to release and the frowns will multiply.

# Finding the most smiles
You may think you know what your users want. You might be right! However, it doesn't hurt to justify your assumptions with actual data. I've seen stakeholders respond to delays with: "it is okay that feature will take another month, nobody really cares about that". That's not a feature that will generate any smiles, is it? Remember, we have limited time; we shouldn't waste it on non-smile features!

The best way to find out which features will create the most smiles is to talk to your users. Not send a survey, ACTUALLY TALK TO THEM. You need to know how your different user segments experience the product. What do they love about it? What do they hate about it? Do they use it for business or pleasure? Would they use something entirely different if they could? Your users are people. if you want to work well with people then you have to be a person! Talk to them and really listen!

However, it is unlikely the user will come to you and say "here is the documentation of the feature I want with time estimates". You have to be prepared to steer the conversation. You have to be able to hear though what they are saying and interpret what they actually want. This is an art and a skill. It requires practice. Start now.

# Stop reading this and start releasing
Now that we know the features that will put the smiles at the most faces, assign them a duration to complete. Next, sort them by most smiles per day. This is your list of priorities. Now get to work, those smiles won't make themselves!

Your time as a tech team is best spent making your users as happy as possible. Anything else is a waste of time. It is about focus. By the way, reading more articles doesn't make more smiles! Cut it out and start making smiles: one release at a time!
Working with WordPress and GitHub Actions
Tags: githubactions, github, wordpress
Published: 2021-04-13 03:59:23

In the most recent Open Source Friday, we were joined with Helen Hou-Sandi, Director of Open Source Initiatives at 10up and Core Developer at WordPress, to chat about how GitHub Actions have improved everyday needs for WordPress development.

{% github https://github.com/10up/actions-wordpress %}

### [Deploying a plugin to the WordPress.org repository](https://github.com/10up/action-wordpress-plugin-deploy)

Whenever you tag a new version of your plugin on GitHub, your changes will be committed to both `trunk` and the appropriate `tags` subfolder in your WordPress.org plugin repository.

### [Deploying plugin asset/readme updates to the WordPress.org repository](https://github.com/10up/action-wordpress-plugin-asset-update)

If you push to your specified branch and it only contains changes to the WordPress.org assets directory (defaults to `/.wordpress-org`) or `readme.txt`, deploy those changes to the WordPress.org plugin repository. This is useful for being able to update things like screenshots or the `Tested up to` version in between tagged releases.

### [Publishing generated hook documentation to GitHub Pages](hookdocs-workflow.md)

If you follow the [JSDoc](https://jsdoc.app/) standard for your custom WordPress actions and filters, you can use this workflow to generate documentation for your theme/plugin and publish them to GitHub Pages. For an example of the output, see the [Distributor hook docs](https://10up.github.io/distributor/).

## Demo
Watch @helen show the workflows on YouTube.

{% youtube rsGnwoBHixo %}

## Open Source Fridays

Come along to our Open Source Friday live streams. We go live on the [GitHub Twitch Channel](https://github.community/t/attended-making-twitch-bots-that-talk-to-the-github-api-let-s-chat/159453/2) most Fridays. Join the [Meetup Group](https://www.meetup.com/GitHub-Virtual-Meetup/) to stay up to date and see the topics each week.
Node JS Resize Image Upload Using Multer Sharp With Example
Tags: node, resize, multer
Published: 2021-04-13 02:57:26

Resize image upload using multer, node js, and express js. In this tutorial, we learn node js resize an image using multer, sharp with node js, and express js. we learn javascript resizing images.

Image upload is the basic requirement of any project. So this example will guide you step by step on how to upload multiple images using multer Express js Framework. And you can understand the concept of multiple image uploads easily to use.

**[Node JS Resize Image Upload Using Multer Sharp With Example](https://www.phpcodingstuff.com/blog/node-js-resize-image-upload-using-multer-sharp-with-example.html "Node JS Resize Image Upload Using Multer Sharp With Example")**

**Install Express and Multer Dependencies**

`npm install express multer --save
npm install sharp --save`

**Import Dependencies in Server.js File**

```
const express = require('express');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
```

**Create Server.js File**

```
const express = require('express');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');
const app = express();
const port = 3000
   
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'uploads/');
    },
   
    filename: function(req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});
```

.....

Original Source: *[https://www.phpcodingstuff.com/blog/node-js-resize-image-upload-using-multer-sharp-with-example.html](https://www.phpcodingstuff.com/blog/node-js-resize-image-upload-using-multer-sharp-with-example.html "https://www.phpcodingstuff.com/blog/node-js-resize-image-upload-using-multer-sharp-with-example.html")*
Businesses & Web Components
Published: 2021-04-13 02:34:39

WHAT ARE WEB COMPONENTS?

Web Components is a suite of different technologies allowing you to create reusable custom elements with their functionality encapsulated away from the rest of your code which will be utilized in your web components. 

BORING -- THAT'S ALL THIS IS?

Slow down their young developer, there is more to learn! Web Components solve problems as well as developing code. The last thing you want to happen is reusing code and making your page a mess could lead to a disaster. 

That is why Web Components consist of three main technologies. These can be used together to create versatile custom elements with encapsulated funcitonality that can be reused where you like without the fear of code collisions. Here are the main technologies...

1. Custom elements: A set fo JavaScript API's that allow you to define custom elements and their behavior, which can then be used as desired in your user interface. 
2. Shadow DOM: A set o Javascript APIs for attaching an encapsulated "shadow" DOM tree to an element, which is rendered separately from the main document DOM and also control the associated functionality. This will then keep an element's features private so they can be scripted and styled with the fear of collision with other parts of the document. 
3. HTML Templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure. 

DOES WEB COMPONENTS IMPROVE ACCESSIBILITY? OF COURSE!!
As we have already answered -- yes, Web Components can certainly improve accessibility. When a business has Web Components, they have a free range what they can do to improve their website for the most sufficient usability all customers can access. This will give businesses the ability to design their website any way they feel without running into big problems. 

COMPANIES THAT ARE USING THIS
There are a HANDFUL of companies using web components. Why not right? Using Web Components is commonly used and with good reason why it helps their websites so much. Companies that I have discovered that use Web Components are sites such as YouTube, FootLocker, Nike, and a lot of college website as well!

YouTube Video:
https://youtu.be/sEmSVMVYVM8