teleren/devto huggingface dataset:
A VR headset changed my life
Tags: virtualreality
Published: 2021-03-14 02:15:06

It was March 2020, and we were asked to work from home. First two months were immensely boring as I didn't have any social life and world was at standstill. Until one day I finally got my Oculus   headset after 2 months of wait. I installed the trending Apps like Beat Saber, Rec Room, Super-Hot. 
Wearing VR headset took me into a different world, it felt like I am inside a video game and it's not necessary for me to win but to enjoy the immersive experience.
Well not completely immersive as I still saw pixels and blur images, sometimes I was stuck and world around me was literally revolving.

I tried making pottery, solving puzzles, mediating, and attending virtual meetups.
I did things that I wouldn't have otherwise if it weren't for my VR headset.

I was a person that hardly ever goes to gym regularly, but with VR I was able to do a fun cardio workout using Supernatural. I am addicted to the level of endorphins I get with VR exercise experience.

In 6 months, a VR headset changed my life and my habits. I felt sense of accomplishment to try out things I always wanted to but never did due to my introvert nature or for useless excuses.

During my discovery phase I met nice people in apps like  https://altvr.com/ who guided me how to use the App and make most use of it. Some of them also showed me how with code and create my own virtual world with all music and jazz. 

Being a Product manager at heart I was very curious to know what a day in a life of a Product Manager would be for Mixed reality.
This curiosity made me learn about this technology, understand the future scope and use cases.

In upcoming articles I am going to share what I have learned so far in my journey of 60DayXRLearning. 

Stay tuned!
Making the network slower when debugging the webpage UI
Tags: webdev, debugging
Published: 2021-03-14 02:01:35

When we need to make sure the loading UI, error message, etc are all working fine, we may need to make the network slower to see the UI changing sequence.

Google Chrome has built-in network throttling.  Just go to the Developer's Console, Network Tab, click on the small triangle next to "No throttling", and for example, choose slow 3G speed.

![Network tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaqs06q89jj0n478aiud.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv58vy1vdh3hweme52wi.png)

There is even a custom setting, so that for example, we can set a two second delay (using the latency), and then get the data at high speed.  This case, we don't have to rely on the data api to have the delay built in for our debugging.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouh3079s8u7kn4fv217l.png)
pre-commit-golang v0.8.2 - Now with gosec support
Tags: showdev, go, github
Published: 2021-03-14 02:01:16

## About

pre-commit-golang is a set of [pre-commit](https://pre-commit.com) hooks for Golang with support for Modules.

Quick Links: [Project Page](https://github.com/TekWizely/pre-commit-golang) | [Available Hooks](https://github.com/TekWizely/pre-commit-golang#hooks) | [Installation](https://github.com/TekWizely/pre-commit-golang#installation) | [Releases](https://github.com/TekWizely/pre-commit-golang/releases)

## Release Announcement: v0.8.2

This release adds support for [gosec](https://github.com/securego/gosec), a popular golang security checker.

### go-sec hooks
The following gosec hooks are now available:

| Hook ID           | Description
|-------------------|------------
| `go-sec-mod`      | Run `'cd $(mod_root $FILE); gosec [$ARGS] ./...'` for each staged .go file
| `go-sec-pkg`      | Run `'gosec [$ARGS] ./$(dirname $FILE)'` for each staged .go file
| `go-sec-repo-mod` | Run `'cd $(mod_root); gosec [$ARGS] ./...'` for each module in the repo
| `go-sec-repo-pkg` | Run `'gosec [$ARGS] ./...'` in repo root folder

##### Installing gosec
```
go get github.com/securego/gosec/v2/cmd/gosec
```

##### Learning More About gosec
 - https://github.com/securego/gosec#usage
 - `gosec (no args)`

## Conclusion

If you use git for your golang project's source control, I hope you will give my project a try.

I am happy to answer any questions you might have.

Thank you for your time,

-TekWizely ( https://github.com/TekWizely )
Let’s deploy the starter Gatsby template
Tags: react, gatsby, javascript, tutorial
Published: 2021-03-14 01:19:36

## Gatsby and Netlify Form integration

This is an example site integrating Netlify’s contact form handling with Gatsby: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8f3rh3zlzds55hvtfem.png)

### Adding Forms
Gatsby is built on top of React. So anything that we can do with a React form is possible in Gatsby. Additional details about how to create React forms can be found in the React forms documentation (which happens to be built with Gatsby!)
How to get started documentation can be found [here](https://reactjs.org/docs/forms.html)


# Integrating Netlify Form Handling in Gatsby
Example for integrating a basic contact form with Netlify’s form handling feature. Demo: https://gatsby-netlify-form-example-v2.netlify.com/

Features: Basic form submission. Example use controlled form to offer more flexibility. 
## Deploy

To Deploy on Netlify you will need to follow few steps:
1. Connect to Github
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m8k4de7k0xooqj53kpd.png)
2. Configure your site - Save and Deploy (change your Repository name)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rdvdtak2oijbjilo2p.png)


To connect please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile). 

Thank you for reading!
:is()
Tags: css
Published: 2021-03-14 00:30:39

I've been trying to improve my understanding of CSS recently and discovered the `:is()` function. `:is()` allows you to apply styles to nested elements without the need to specify each element individually.

{% codepen https://codepen.io/brandonmweaver/pen/KKNEKYO %}

In the example above, I use the function to group styling which I want to apply to both the red and blue nested paragraph elements.

In this example, you could get the same result with the following selector, however, when you have deeply nested, `:is()` helps to prevent the need for repetitive selectors.

```css
.red p,
.blue p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}

/* same as above */
:is(.red, .blue) p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}
```
3 Quick Tips to Convert Types In JavaScript
Tags: javascript, webdev, node
Published: 2021-04-05 15:59:33

---
title: 3 Quick Tips to Convert Types In JavaScript
published: true
date: 2021-03-14 00:00:00 UTC
tags: javascript, webdev, node
canonical_url: https://mannes.tech/js-type-conversion/
---

JavaScript has 6 primitive data types.

They are string, number, boolean, null, undefined, and symbol.

*What's a symbol you ask? ECMAScript 2015 introduced them. They are a way to create globally unique values/identifiers with descriptions. [This article](https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/) does a great job explaining them.*

> And then there are objects. We will talk about them in another article.

Here are 3 quick tips for converting data to one specific primitive:

- **Boolean conversion.** All JS values are truthy, except `""`, `null`, `undefined`, `NaN`, `0`, and `false`.
You can explicitly convert values to a boolean by using `!!`.
`!!0 === false && !!NaN === false && !!"" === false`.
- **String conversion.** Convert any primitive value to a string by adding an empty string.
`null + "" === "null"`.
Since ES6 you can also use template strings for this: `` `${null}` === "null" ``.
- **Number conversion.** The primitive values string, null, and boolean can be converted to numbers with `+`.
`+null === 0 && +true === 1 && +false === 0 && +'0' === 0 && +'100' === 100`.

You can also use the global methods `String()`, `Number()`, and `Boolean()`.
They make your conversion explicit and readable.

[_Follow me on Twitter @simon_mannes_](https://twitter.com/@simon_mannes)
How to check if a variable is a string in JavaScript?
Tags: javascript
Published: 2021-03-14 00:00:00

---
  title: How to check if a variable is a string in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Mar 14 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-variable-is-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-bc5942187118e5c299a3d8cceb5f8866.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-variable-is-string-javascript)
  
To check if a variable is a string, you can use the `typeof` operator followed by the variable or expression in JavaScript.

```js
// Check if variable is a string
const str = "Hello World!";

typeof str; // string
```

- The operator will return the type of the variable as a string, in our case, it will be a `string`.

See the above code live in [JSBin](https://jsbin.com/suluzoyeli/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Why do we have version numbers?
Tags: release, version
Published: 2021-03-14 10:47:07

---
title: Why do we have version numbers?
published: true
date: 2021-03-14 00:00:00 UTC
tags: release, version
canonical_url: https://jhall.io/archive/2021/03/14/why-do-we-have-version-numbers/
---

Practically every software project must answer one question, regardless of the tech stack it uses, regardless of the team’s size, or which version control system it employs:

**What versioning scheme should we use?**

What does it really matter? Well, there are different reasons that the version scheme can matter. Let me offer three broad reasons to care about versions:

1. **Marketing** — When your product is marketed to humans, it can be useful to have a human-friendly version number. This version may be the same version you use in your VCS, as with products like [PostgreSQL 9.6.21](https://www.postgresql.org/about/news/postgresql-132-126-1111-1016-9621-and-9525-released-2165/). Or it may be purely a marketing label, as with [Windows 2000](https://web.archive.org/web/20001203133300/http://www.microsoft.com/windows2000/default.asp).

2. **Dependency management** — When your software project is used by other software projects, the version number can be a great way to indicate the significance of changes, such as the addition or removal of functionality, or that a bug was fixed.

3. **To facilitate troubleshooting** — When you’re troubleshooting a software problem, it’s good to know which version of your code is executing. Including the build version in server logs is a great way to help this. The version number you see when you click **Help** then **About** in most desktop applications is an instance of this as well.
Zen of Every Day Things
Tags: reading
Published: 2021-03-27 01:58:14

---
title: Zen of Every Day Things
published: true
date: 2021-03-14 00:00:00 UTC
tags: Reading
canonical_url: https://programmerdays.com/2021/03/14/Review.Zen.Of.Every.Day.Things/
---

This month, I read most of [Zen and the Art of Motorcycle Maintenance](https://www.amazon.com/Zen-Art-Motorcycle-Maintenance-Inquiry-dp-0688002307/dp/0688002307) and some of the [Design of Everyday Things](https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654). I couldn’t quite finish either of them before time ran out and they were due back to the library. With that said, I think I got a good feel for what each author was saying overall.

Both books delve into the relationship between objects and people. In Zen of Motorocycle Maintenance, the author views objects with reverence. For him, a motorcycle is a dynamic being. He observes and responds to it. As it strains from overuse, he reduces the speed of the bike so it can recover. He is attuned to any signs of failure and promptly works to correct issues. The limitations of a motorcyle, such as overheating, are not strictly design flaws. They are bounds in which the object can work well. If you place the object out of bounds, you can not blame the bike for coming up short.

In the Design of Everyday things, the author was much less forgiving of the object. Objects provide some utility and give some hints as to how a user may access that utility. For example, a door provides the utility of transit into a building. Its door handle will have a certain shape that indicates to the user whether you should push, pull, turn or slide to open the door. If the user of a door cannot easily deduce how the door should be used, the blame is on the door, or the designer of the door. It should have been made in a way that would make things easier for the user.

I wonder how the authors of these books would feel about the other book.

I sympathize with both camps. As a software developer, it’s good to think like the author of Design of Everyday Things. You want to make things that are generally easy to use. Any confusion can lead to user errors and overall dissatisfaction. So, you have to put yourself in the mind of the new user and guess how they might feel about your product or API. Is the most natural way to use your product also the correct way and also the easiest thing to do? Telling people to read the manual is a signal that the design can be improved.

As a software developer, it’s also good to think like the author of Zen of Motorcycle Maintenance. You need to observe and be attuned to your code. If it misbehaves with bugs or bad performance, you can’t just blame the original authors and say the design is poor. You have to foresee or at least react to issues. Each bug is an opportunity to understand your system a little bit more and improve your system to be a little more robust.

In total, while I see the merits of both, I think I lean towards the Zen of Motorcycle philosophy. What about you?
Create a sitemap with Next.js
Tags: nextjs, seo, webdev, tutorial
Published: 2021-03-13 23:53:35

Creating a sitemap is an easy way to bring traffic to your site. It helps search engines find and index all related pages on your domain and understand how they fit together.

## Create the sitemap

With NextJS, creating a sitemap is even easier since all routes are organized in the `pages` directory. Start with the following code in a `lib/` or `util/` folder in your project root.

```javascript
const fs = require('fs');
const globby = require('globby');
const prettier = require('prettier');

(async () => {
  const pages = await globby([
	'pages/**/*.js', // get all static pages
	'!pages/**/[*.js', // ignore dynamic routes as those won't work
	'!pages/_*.js', // ignore nextjs components
	'!pages/api', // ignore api routes as those aren't actual pages 
  ]);

  const sitemap = `
	<?xml version="1.0" encoding="UTF-8"?>
	<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	  ${pages.map(page => {
		const path = page
		  .replace('pages', '') // make the path start with '/'
		  .replace('.js', '') // remove the extension
		  .replace('/index', '') // remove the unnecessary word index
		return `
		  <url>
			<loc>${DOMAIN}${path}</loc>
		  </url>
		`;
	  }).join('')}
	</urlset>
  `;

  const formatted = prettier.format(sitemap, { parser: 'html' });
  await fs.writeFileSync('./public/sitemap.xml', formatted);
})();
```

Note that if you have any dynamic routes, you will need to either list those manually, or write a script to first fetch a list of those dynamic routes (you can use the same query functions you use in `getStaticPaths` in those dynamic pages). Once you have the list, you can simply add them to the array passed into `globby()` so they get added to the sitemap.

## Generate at buildtime

The final step is to generate the sitemap at buildtime. This will ensure the sitemap that gets deployed is always the latest, and always reflects the changes made to the site. To do this, we need to add a custom config to webpack in `next.config.js`.

```javascript
module.exports = {
  webpack: (config, { isServer }) => {
	if (isServer) {
	  require('./util/sitemap.js')
	}
	return config
  }
}
```

And that’s it! When `next build` is run, the sitemap will automatically be generated and placed in the `/public` folder, making it accessible at `your-domain.com/sitemap.xml`.
Standards/RFCs a web-dev should know about!?
Tags: discuss, webdev, learning, productivity
Published: 2021-03-13 23:36:29

### [ISO8601 Date + Duration + Time Interval](https://en.wikipedia.org/wiki/ISO_8601)

This one will be very familiar to a lot of you. I guess this is the format that is most commonly used for date/timestamp representation. But despite that, many people don't know that this standard also defines a format for durations and time intervals.

### [OAuth](https://tools.ietf.org/html/rfc6749)
The OAuth spec is an authorization framework that describes how a third-party app can access resources own behalf of a user. It has various flows depending on the trustworthiness or the use case of the developed client. OAuth is used by many well known names that also function as authorization provider.

### [geoJSON](https://tools.ietf.org/html/rfc7946)
Describes a format based on JSON that is used to interchange geospatial data. 
### [iCalendar](https://tools.ietf.org/html/rfc5545) / [jCal](https://tools.ietf.org/html/rfc7265)
Often seen as iCal or ``.ics`` files, iCalendar is a specification to exchange calendar and scheduling information. There is a variety of use cases where this format is used (calendar events, to-dos, journal entries, and free/busy information for e.g. meeting rooms). So if you accept a meeting invitation and put it into your calendar app, there is a good chance it was sent in iCalendar format.

(jCal is the JSON representation)
### [vCard](https://tools.ietf.org/html/rfc6350) / [jCard](https://tools.ietf.org/html/rfc7095)
These rfc describes a format for exchanging a variety of information about individuals (name, phone number, email, etc...). If you want to share a contact from your smartphone, often vCard is used to share that infos.

(jCard is again the JSON representation)


---
What standards/rfcs am I missing that you use in your daily work? Let me know
Be Openly Confused
Tags: vulnerability, engineering, teams, culture
Published: 2021-03-13 22:37:48

---
title: Be Openly Confused
published: true
description: Level up as an engineer
tags: vulnerability, engineering, teams, culture
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsjsdq96s4did1tq63uk.jpg
series: How To Level Up as an Engineer
---

Fostering a culture in your software engineering team where people can share openly that they are confused is **productive**.

Sharing when you are confused provides an opportunity for:
- team bonding
- knowledge sharing
- clarification of potential ambiguity
- transparency

Others on your team might be confused too but may not feel confident enough to share it. **Value vulnerability and truth over comfort and the guise of understanding because the team will benefit as a whole.**
Practical Applications for Regex
Tags: javascript, programming
Published: 2021-03-13 22:00:06

---
canonical_url: https://blog.katherinempeterson.com/practical-applications-for-regex
---

Regular expressions can be hard to understand and difficult to learn. However, they are extremely powerful and have many use cases in the real world. In this post, I will explore some practical applications of regex. 

---

## Form Field Validation

One of the most common use cases for regex is validating form fields such as emails, usernames, credit card numbers, phone numbers, dates, password strength, etc. 

The following example is a regex that validates the format of an email.

```jsx
const emailValidatorRegex = /^[^@\s]+@[^@\s]+\.[^@\s\.]{2,}$/

function isValid(email) {
	if emailValidatorRegex.test(email) {
		return true
	} else {
		return false
	}
}

isValid('dummyemail@gmail.com') // true 
isValid('dummyemail@gmail') // false

```
---

## Find and Replace

Regex can be used to write complex find and replace functions. You can even use regex to find and replace inside editors like VSCode.

The following example takes all normal javascript function declarations and replaces them with arrow functions. 

```jsx
const normalFunction = `
function add(x, y) {
	return x + y
}
`

const arrowFunction = normalFunction.replace(/function\s*(\w+)\s*\(([^\)]+)\)/g, "const $1 = ($2) =>")

console.log(arrowFunction)
/*
const add (x, y) => {
	return x + y
}
*/
```

Here is how you could use this to find and replace in VSCode.

![Using Regex for find and replace in VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qic9m91t430rfjnhbg9u.gif)
 
---

## HTML Parsing

Another use case for regex is for parsing things like HTML. Maybe you want to extract image sources from some HTML or extract all the URLs from a Google search result.

Let's say you have some HTML, and you want to extract everything that is inside of an `<li>` and put it into an array. Here's how we could do this.

```jsx
const markup = `
<html>
  <body>

    <h1>Shopping List</h1>

    <h2>Produce</h2>
    <ul>
      <li>Celery</li>
      <li>Apples</li>
    </ul>

    <h2>Frozen</h2>
    <ul>
      <li>Ice Cream</li>
      <li>Hot Pockets</li>
    </ul>

  </body>
</html>
`

const listParser = /(?<=<li>)(\w|\s)+(?=<\/li>)/gm

const shoppingList = markup.match(listParser)

console.log(shoppingList)
// [ 'Celery', 'Apples', 'Ice Cream', 'Hot Pockets' ]

```
---

## Conclusion

 There is so much you can do with regular expressions. However, they are definitely not the solution to everything. Despite their power and flexibility, they are not the most readable for other developers. 

Maybe don't reach for it for something like trimming whitespace from a string. There are string methods or basic functions for this. But for complex search, find and replace, validation, and parsing, regular expressions are a great solution. Plus, they are fun to write!


---

Want to learn regex? 

Check out my interactive course: https://www.slip.so/courses/regular-expresssions-in-javascript

Follow me on Twitter for updates: https://twitter.com/katherinecodes
Another one down...
Tags: awesomity, taskforce, coding, webdev
Published: 2021-03-13 21:08:55

Another week down at the task force and just like the last one, this one was very interesting as well.

I learned a lot of things in this week especially technical-wise as it was packed with practical sessions where we were learning a new framework and getting more insight into how things are done in the company on a day-to-day basis.

Nest.js was the talk of the week as we went through it from scratch and honestly i think we made unimaginable progress. I couldn't imagine getting this far in a new framework in just one week. Learning everything from setting up, building CRUD endpoints, authentication, security and documentation in just five days is amazing and all thanks to a very gifted member of the Awesomity team.

Something else that i really liked in this week was getting to search the net for different gestures used in communication around the world and how different cultures communicate. It's crazy how much information one can give up without saying a single word. That was also a great experience that i had this last week and definitely something to remember. It's very important to know that one's ways are not everyone's and realize that we need to blend in with the crowd that we're in at the time.

Another definite highlight would be today, More specifically the '5 WHYs'. To be more descriptive, the 5 WHYs is one of the many techniques used in the critical thinking process the helps to identify the cause of the problem. I liked this one in particular because of how it's so effortless and natural and yet so effective. If you're reading this and don't know about this technique already, you should definitely check it out.

Long story short, this was yet another educational, insightful and fun week and i can't wait to see what comes next.