teleren/devto huggingface dataset:
How to graceful multiple select dom with mouse move area?
Tags: javascript, vue, react
Published: 2020-05-25 15:59:39

---
title: How to graceful multiple select dom with mouse move area?
published: true
description: Select elements in the drag area using the mouse or touch.
tags: Javascript, Vue.js, React
---

I have found a awesome repo which can select elements in the drag area using the mouse or touch.

In my case i just use it to select multiple photos on gallery and then edit, move, duplicate it like iOS photo’s.

It’s so cool just enjoy it [selecto](https://github.com/daybrush/selecto)
Depois do Café - Episodio 12 - Desenvolvimento de Software no Interior (com André Angelucci e Gabriel Dias)
Tags: podcast, programação, portugues, interior
Published: 2020-05-25 18:08:44

---
title: Depois do Café - Episodio 12 - Desenvolvimento de Software no Interior (com André Angelucci e Gabriel Dias)
published: true
description: Neste episódio a gente fala das diferenças, vantagens e desvantagens de ser uma pessoa desenvolvedora no interior. Falamos com o André Angelucci e o Gabriel Dias sobre trabalhar em Fernandópolis - SP.
tags: podcast, programação, portugues, interior
---

{% spotify spotify:episode:5E9VSdgwaZq5FNPVw7Qeoj %}

Não se esqueçam de entrar no nosso grupo do telegram para episodios exclusivos: https://chat.depois.cafe

Você também pode ouvir no seu aplicativo preferido: [iTunes](https://podcasts.apple.com/br/podcast/depois-do-caf%C3%A9-com-airton-zanon/id1480842641), [Breaker](https://www.breaker.audio/depois-do-cafe-com-airton-zanon), [Google Podcasts](https://www.google.com/podcasts?feed=aHR0cHM6Ly9hbmNob3IuZm0vcy9lMGU0MDU4L3BvZGNhc3QvcnNz), [Overcast](https://overcast.fm/itunes1480842641/depois-do-caf-com-airton-zanon), [Pocket Casts](https://pca.st/bpyo3i4y), [Radio Public](https://radiopublic.com/depois-do-caf-com-airton-zanon-6r2oLq), [Spotify](https://open.spotify.com/show/4cqX5o40bClwqtYHv9X7Lp) e outros...

Neste episódio a gente fala das diferenças, vantagens e desvantagens de ser uma pessoa desenvolvedora no interior. Falamos com o André Angelucci e o Gabriel Dias sobre trabalhar em Fernandópolis - SP.

De um jeito pratico, “Depois do Café” de ser, falamos sobre métodos ageis, diferença salarial, diversidade e muito mais.

----------------------

**Participantes:**

Airton Zanon - [@airtonzanon](https://twitter.com/airtonzanon) (twitter)

Andre Angelucci - [@AndreAngelucci](https://twitter.com/AndreAngelucci) (twitter)

Gabriel Dias - [@gdiasb12](https://twitter.com/gdiasb12) (twitter)

----------------------

 Para mais episodios e saber mais sobre o podcast acesse https://episodios.depois.cafe ou https://dev.to/depoisdocafe.

Siga-nos no twitter [@dpsdocafe](https://twitter.com/dpsdocafe)
Build Web App with Go for Beginners Part I
Tags: go, webapp
Published: 2020-05-29 22:04:14

---
title: Build Web App with Go for Beginners Part I
published: true
description: 

tags: #go #golang #webapp
---
![Cover Image](https://dev-to-uploads.s3.amazonaws.com/i/03p6pl4fwa9xz2tzc1j1.png)

> Go was designed at Google in 2007 to improve programming productivity in an era of multicore, networked machines and large code bases.The designers wanted to address criticism of other languages in use at Google, but keep their useful characteristics.

During past couple of days I have been learning Golang and I noticed some of the challenges I faced was the lack of constraints or standards, choosing external packages and much more😭. I would like to share some findings that have worked for me and also walk you through the steps by building a simple todo app.

## Prerequisites
* A Golang compiler installed on your Machine
* An IDE or text editor
* Basic understanding of Go
* Basic understanding of HTML and CSS
* Basic understanding of SQL (Only required to create Database 😉) 

### Project Layout
We would start by creating a module for our project so as to better track our packages in a file called `go.mod` which would makes it easier for distribution or deployment. it's more like `package.json` or `composer.json`.
```
 go mod init github.com/iamhabbeboy/todoapp
```
Next, we need to create the following folders.
> You don't have to follow this structure.😊
```
todoapp
├──models
|   └── Todo.go
├── controllers  
|    └── TodoController.go
├── database
|     └── connect.go
├── views  
|     └── index.html
|     └── create.html
|── main.go
|── .env
```

### Packages
The following packages would be used to better develop our project.
* Gorm: Go ORM that support mysql and other databases.   
```
go get -u github.com/jinzhu/gorm

```
* Mux: It's handles our routes and requests.
```
go get -u github.com/gorilla/mux

```
* Godotenv: Would be used to access our `.env` variables
```
go get github.com/joho/godotenv

```
* MySQL driver: Allow connection to MySQL DB
```
 go get github.com/go-sql-driver/mysql

```
I wouldn't want you to be bored with this post so I decided to split it into two. The other part would be posted in the comment section soon.

Please do leave a comment in case you have any contributions, I would really appreciate that.😉

Thanks for reading.❤️
NextJS APIs validator with Middleware
Tags: nextjs, express, middleware, api
Published: 2020-05-26 11:46:05

Validate the `request.body` is a must for every APIs development. NextJS is able to use [Connect](https://github.com/senchalabs/connect) compatible Middlewares for an extendable feature on top of each request/response like ExpressJS.

Here is a guide to integrating the `express-validator`, a wrapper of `validator.js` inside your NextJS application.


First, Install `express-validator` in NextJS project
```
yarn add express-validator
```

Next, Create NextJS Middleware Helper Method as `/lib/init-middleware.js ` 
```
export default function initMiddleware(middleware) {
    return (req, res) =>
      new Promise((resolve, reject) => {
        middleware(req, res, (result) => {
          if (result instanceof Error) {
            return reject(result)
          }
          return resolve(result)
        })
      })
  }
```

Next, Create NextJS Validator Middleware to handle error and response out as `/lib/validate-middleware.js`
```
export default function validateMiddleware(validations, validationResult) {
  return async (req, res, next) => {
    await Promise.all(validations.map((validation) => validation.run(req)))

    const errors = validationResult(req)
    if (errors.isEmpty()) {
      return next()
    }

    res.status(422).json({ errors: errors.array() })
  }
}
```

Now it's time to integrate validate rules and middleware into your NextJS API Routes. You can use any validator.js's [validator functions](https://github.com/validatorjs/validator.js#validators) as sample below.
```
import initMiddleware from '../../../lib/init-middleware'
import validateMiddleware from '../../../lib/validate-middleware'
import { check, validationResult } from 'express-validator'

const validateBody = initMiddleware(
    validateMiddleware([
        check('first_name').isLength({min:1, max: 40}),
        check('day').isInt({ min: 1, max: 31}),
        check('gender').isIn(['male','female']),
        check('mobile_phone').isMobilePhone(['th-TH']),
        check('boolean').isBoolean(),
    ], validationResult)
)

export default async (req, res) => {
  switch (req.method) {
    case "POST":
      await validateBody(req, res)

      const errors = validationResult(req)
      if (!errors.isEmpty()) {
        return res.status(422).json({ errors: errors.array() })
      }

      nextFunction(req, res)

      break;
    default:
      res.status(404).json({ message: "Request HTTP Method Incorrect." })
      break;
  }
}
```

Now the `express-validator` will be working on top of each HTTP Request to validate your `request.body` in NextJS API Route :)
Solving "Boo who" / freeCodeCamp Algorithm Challenges 
Tags: freecodecamp, algorithms, challenge, javascript
Published: 2020-05-26 18:51:29

---
title: Solving "Boo who" / freeCodeCamp Algorithm Challenges 
published: true
description: My guide, notes, and solution to freeCodeCamp's basic algorithm challenge, "Boo who" 
tags: #freeCodeCamp, #algorithms, #challenge, #javascript
canonical_url: https://virenb.cc/fcc-010-boo-who
series: Solving freeCodeCamp's Algorithm Challenges
---

Post can also be found on my website [https://virenb.cc/fcc-010-boo-who](https://virenb.cc/fcc-010-boo-who "Post on virenb.cc")

!['Boo who' Challenge](//images.ctfassets.net/yzwpq1epaq68/5E8GsD3x7ThdCwSy9T7Xdn/3115331226569db0dd19d7870012c460/ss-010.png)

Let's solve freeCodeCamp's Basic Algorithm Scripting Challenge, "Boo who"

## Our Starter Code (& Tests)
```javascript
function booWho(bool) {
  return bool;
}

booWho(null);

```
```
// Tests
booWho(true) should return true.
booWho(false) should return true.
booWho([1, 2, 3]) should return false.
booWho([].slice) should return false.
booWho({ "a": 1 }) should return false.
booWho(1) should return false.
booWho(NaN) should return false.
booWho("a") should return false.
booWho("true") should return false.
booWho("false") should return false.
```

### Our Instructions


Check if a value is classified as a boolean primitive. Return true or false.

Boolean primitives are true and false.


## Thoughts

* The argument's data types vary. Some booleans, strings, arrays, functions, etc.
* After reading the instructions and tests a few times, we must narrow in on true or false inputs/arguments only. 
* We have to return a boolean, true or false.


### Further Thoughts

Reading the instructions again, the challenge is asking us to return true for **boolean primatives**.

(Looking at the tests, booWho(false) must return **true**.)

So, we must write a function, which returns true if the input is a **true** or **false**. If it is any other value, we must return false.

There is a built in operator in JavaScript, `typeof` which returns the data type.

[MDN documentation: typeof]("https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof")

Some pseudo pseudocode:

```
booWho(input) {
	if input type is true or false
		return true
	else
		return false	
}
```

We are just checking the `typeof` of the argument.


## Solution

<details>
  <summary>**[SPOILER: SOLUTION TO CODE BELOW]**</summary>
 	
```javascript
function booWho(bool) {
  return typeof bool == 'boolean';
}
```
 
</details>

---

### Links & Resources

['Boo who' Challenge on fCC](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who "Basic Algorithm Scripting: Boo who Challenge on fCC Website")

[freeCodeCamp](https://www.freecodecamp.org/, "freeCodeCamp")

[Donate to FCC!](https://www.freecodecamp.org/donate "fCC Donation Page")

[Solution on my GitHub](https://github.com/virenb/fcc-algorithms/blob/master/010---boo-who.js "GitHub Solution")

Thank you for reading!
Say Hello to Reactjs
Tags: react, javascript, babel, webpack
Published: 2020-05-26 18:31:23

**Reactjs** is trending frontend javascript library in this article we will see how to setup reactjs.

In this blog we are going to setup react app using *create-react-app*

### #1. Install Nodejs and Npm
Before setup we need to install *nodejs* and *npm* you can install from here [click](https://nodejs.org/en/download/).
Note : If you install *nodejs* then *npm* will be added automatically 

### #2. Checking Node and Npm version 
Checking NPM version
```bash
npm -v
```
Checking Node version
```bash
node -v
```

### #3. Installing Reactjs App
```bash
npx create-react-app myapp
```

now move to *myapp* directory your react app project structure will be like this

![React folder structure](https://www.c-sharpcorner.com/article/folder-structure-of-react-application/Images/Folder%20Structure%20of%20React.png)

### #4. Running React in Dev Mode
To start with your react app in development mode run the following command
```bash
npm start
```

### 5. Testing React app
Our react app will be created along with **JEST**(testing framework created by facebook) and **React Testing Library**(library used to test components) here after RTL. We can use jest and RTL to test our app.

### 6. Generating Build 
To Generate build from our app we will use the following command
```bash
npm build
```

#### Lets make hands dirty by writing some code in react
open react app in your favourite Editor or IDE and go to *App.js* file and override that file with the following code.
```javascript
import React from 'react'

const App = () => <div>Hey I did It</div>

export default App
``` 
Now start the server and check the output in browser. To start the server use *npm start* command. once server started go to http://localhost:3000 and check the output in browser.

We are done with Phase 1. It's time to Phase 2 i.e Testing our APP

Go to *App.test.js* and override that file with the following code.

```javascript
import React from 'react'
import App from './App'
import {render} from '@testing-library/react'

test("It should work", () => {
  const {getByText} = render(<App />)
  expect(getByText("Hey I did It")).toBeTruthy()
})

```
Run *npm test* to run tests no need to specify names it will take all the files having extensions *(.test.js, .spec.js, .__test__.js)*

After successful test our work is getting a build use *npm build* to generate build and after successful you will able to find build folder in your project folder. You can deploy that folder in any server env like (Nginx, Apache or express static server etc..) 

### Finally 

![You did it GIF](https://media.giphy.com/media/3otPoS81loriI9sO8o/giphy.gif)
Group Conversation on Remote Working
Tags: remote, teams
Published: 2020-05-26 00:00:00

---
title: Group Conversation on Remote Working
published: true
date: 2020-05-26 UTC
tags: remote, teams
canonical_url: https://developer.salesforce.com/blogs/2020/04/group-conversation-on-remote-working.html
---



I was happy to sit down with [Robert Sösemann](https://twitter.com/rsoesemann), [Elizabeth DeGroot](https://twitter.com/elizabethdgroot), [LeeAnne Rimel](https://twitter.com/leeanndroid), [Peter Chittum](https://twitter.com/pchittum) and [Kevin Poorman](https://twitter.com/codefriar) to have an in-depth conversation about our experiences working from home. Personally, I used to have a standard commute – nowadays my immediate co-workers have been a couple of cats. In this session, we talk about a wide variety of topics, but focus on challenges in working remotely; including maintaining a healthy mental and physical lifestyle, productivity tips on getting things done while finding personal time, and working with team members over the Internet. Some key highlights include:



 * The importance of keeping a routine, even when your schedule is without cues (like a daily commute)

 * Making time and space that is both dedicated and distinct from work

 * How aspects of the development cycle can provide cues for work throughout the day

 * What kind of hardware is important in setting up your office space  –  especially the chair

 * Tips on what to do if you don’t have the luxury of a dedicated room for work




[Watch the full video](https://play.vidyard.com/cBe4poSNDKDdVvwXfycA42.html)

[![Group Conversation on Remote Working video](https://dev-to-uploads.s3.amazonaws.com/i/8m5bkd43vicljslvprfb.jpg)](https://play.vidyard.com/cBe4poSNDKDdVvwXfycA42.html)
Connecting Sucks...it shouldn't be so
Tags: codenewbie, mentalhealth, beginners, programming
Published: 2020-05-26 20:43:37

Hey there,

I'm a **17-year-old** but you can bet I've passed through a lot in life. I'm so happy that I even encouraged me to write this post.

From rejections to no replies to ...

There is just so much out there that leads to depression. 
 
I'm learning to javascript presently and I do frontend web design. 

From college rejections to not getting replies to not finding internships I can apply to, I've learnt to strengthen my emotions and keep pushing, but sometimes these feelings are just overwhelming and depressing.

I love connecting with people and most especially in the tech field it helps one to grow and I hear all about how to go about it, watch webinars on what to and what not to do and I'm super cautious in doing it right but then you just won't get accepted all the time(replies)...yeah people are busy and so I get it and I've trained myself to understand that but what hurts me the most is that some establish a relationship and we connect (do not spam them) but after some time they ghost you. 

I think it's really unfair to do such. If you are busy an explanation would really make a difference but some people are not just into that after all. This is the point where twitter and all social media platforms where you can decide not to see if the person has read your message or not have made me happy. 

Also, seniors in the industry(basically anyone not a beginner)- could also be juniors, should try to understand that we are beginners and if you think we're not doing it(communicating) the right way you should correct us rather than ghosting us.

Beginners also have a role to play. Many of us have not been the best we could have been and that's why a lot of this is happening. Please as a beginner there are tendencies to do things wrongly. Please try not to. Do your research, have a purpose before connecting!

Sincerely speaking, thinking about these things is really depressing. I give credit and appreciate all those who take time out of their busy schedule to assist others. They are real people and if you do otherwise please change today.

I hope we have a better tomorrow, starting with this.
All about aria-current attribute
Tags: web, security
Published: 2020-05-26 22:56:27


---
title: All about aria-current attribute
published: true
description: 
tags: #web #security
---

## `aria-current` 

The `aria-current` attribute is used when an element within collections is visually styled to indicate it is the current item in the set. This can be an active tab on the nav bar which visually is shown active, or make be a breadcrumb link which is active.

For some more info on this topic read on [digitala11y](https://www.digitala11y.com/aria-current-state/)

- In short `aria-current` is an attribute defined in the [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/#aria-current) specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree.
- It can take multiple values, for example: <i> <b>page, step, location, date, time, false, true </b></i>

##### According to the ARIA 1.1 specification, the `aria-current` attribute can be given one of a predefined set of values:

- page - represents the current page within a set of pages.
- step - represents the current step within a process.
- location - represents the current location within an environment or context.
- date - represents the current date within a collection of dates.
- time - represents the current time within a set of times.
- true - represents the current item within a set.
- false - does not represent item within a set.

#### Ok, so the concept goes like this: 

Using `aria-current` the right way.

- First we will go through <code>aria-current = page</code>

 <i> I am taking an example of my website. Below you see talks section is an active page the user is currently on.</i>

   ![](https://i.ibb.co/YknwVh8/Screenshot-2020-05-26-at-21-09-13.png)

```javascript

<a aria-current="page" class="css-wbxg5e active" href="/talks" style="font-size: 1em;"><i>Talks</i></a>

```

The active sections `talks` indicates the current page in the main navigation. While visible to sighted users, it also uses `aria-current="page"` to convey the information to screen reader users.


- `aria-current="date"` and `aria-current="time"` are very similar to each other. This can be used when implementing date picker, when we display a list of dates, and when it's today's date, we should use the `aria-current="date" to mark the current date to screen reader users.

- `aria-current="step"`
If we need to indicate the current step within a step indicator of a multi-step process (e.g: multi-step checkout process etc), aria-current="step" should be used to indicate the current step to screen reader users.

Some resources to checkout if you interested to learn more on <code> aria-current </code> &nbsp;[a11ysupport.io](https://a11ysupport.io/tests/tech__aria__aria_current), [tink.uk](https://tink.uk/using-the-aria-current-attribute/)

If you want to know more about ARIA attributes checkout [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

This article was originally published on https://www.manjuladube.dev/. Head over there if you like this post and want to read others like it."
Remote experienced professional developer teams
Published: 2020-06-04 16:59:44

Services:
Strategy & Consulting
We offer process consulting, strategic planning, finance, legal, analysis and documentation as a service which can enable and facilitate your business.

Dedicated Team
Your Team, Your Tools and Your Culture. Build a remote development team, remote distributed professionals and get work done directly using the tools and methods you know.

Startups and Ideas
Thinking about building an effective product for the world to last with long term commitment, but unsure of where to start? you are already here. we can help you work everything out from ideas to business.

We Promise. We Deliver.
Have an idea? Work with us and see how it goes. We promise to go the extra mile for every project that we take onboard.

If you have still have questions, Contact Us 
https://scaleblue.com/contact
"Drawing" with box-shadow
Tags: css, webdev
Published: 2020-06-05 22:35:49

I like to share one "trick" or technique that I really like, it's one of those things that's good to have in the tool belt and I've found myself using it pretty often over the years.

## The box-shadow property

When you think of box shadow, it's easy to only think of it as shadows on boxes, but it can do more. You can actually use it to draw in a sense.

{% codesandbox wandering-firefly-fjsgv %}
<small>*Here we have two boxes, one is obviously using a box shadow, but the other one is as well.*</small>

<hr>

You can "draw" on the outside:
```css
.el {
    box-shadow: 
        0 0 0 3px red,
        0 0 0 8px green,
        0 0 0 10px blue;
}
```

or "draw" on the inside:
```css
.el {
    box-shadow: 
        inset 0 0 0 3px red,
        inset 0 0 0 8px green,
        inset 0 0 0 10px blue;
}
```

You apply multiple box shadows to draw lines that overlap. So the above would result in a "border" of `3px red`, `5px green`, `2px blue` and in this lies the power.

<hr>

You can get really creative with this technique.

{% codesandbox quiet-fire-ogksm %}


Like the tablet above, it has two HTML elements with psuedo `::before` and `::after` elements. Most of the layers are box-shadows. 🙂