teleren/devto huggingface dataset:
AzureFunBytes Episode 9 - Azure Regions, AZ's and SLAs with @chloecondon Reminder - Thursday 8/6/2020 2PM EDT 
Tags: azure, cloud, beginners, tutorial
Published: 2020-08-05 13:11:23

New #AzureFunBytes - Azure Datacenters, Regions, Availabilty Zones and Service Level Agreements.

This time we'll look at what components make up the Azure cloud including how datacenters are organized.

{% youtube kg53p8ZTtSk %}

My guest, [Chloe Condon,](https://twitter.com/chloecondon) will help me solve three problems on Twitch!

* What makes up the Azure cloud?
* How does this impact my application?
* How do we ensure high availability on Azure?

------

AzureFunBytes! - Byte-sized content with a live Twitch show!


Learn about Azure fundamentals with me!


Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.


https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes


Join me, ask questions and learn about Azure!

[Microsoft Learn: Azure Fundamentals](https://cda.ms/1jV ) 
[Microsoft Azure: $200 Free Credit](https://cda.ms/1tj ) 
[Microsoft Azure SLAs](https://cda.ms/1w5) 
[Azure geographies](https://cda.ms/1w6 ) 
[Regions and Availability Zones in Azure](https://cda.ms/1w7)
Learning Ruby: naming conventions
Tags: ruby, beginners
Published: 2020-08-05 13:03:23

Ruby has specific naming conventions that make it easier to write and read code. I would like to summarize them here in a cheatsheet format that is easier to refer to.

snake_case:
- files
- variables
- methods

```
#files
my_first_ruby_file.rb

#variables
programming_language = "Ruby"

#methods
def make_an_example
  #do stuff
end
```

UPPERCASE:
- constant variables

Constant variables represent values that will not change during your Ruby program. 

```
ID = AB123456
FAVORITE_FOOD = "Pizza"
```

CamelCase:
- classes

```
class Person
end

class Movie
end
```

####Additional note
When working with do/end blocks, it is preferable to use { } when the code can fit in a single line

```
characters = ["Eleven", "Mike", "Dustin", "Lucas", "Will"]
characters.each do |character|
  puts character
end

characters.each { |character| puts character }
```
Tips and Actions to Build your Network
Tags: career, productivity
Published: 2020-08-05 13:03:12

<span>Photo by <a href="https://unsplash.com/@alinnnaaaa?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Alina Grubnyak</a> on <a href="https://unsplash.com/s/photos/network?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

<br>

I just recently watched a YouTube video from [Noah Kagan](https://twitter.com/noahkagan) called ["How to Build a Million Dollar Network?](https://www.youtube.com/watch?v=YodeBu7vUGY)". 
It appealed to me since building a network is something I've recently started thinking more about. 

What I love about Noah is that he gives action steps on how to do something. 
And in this post, I want to follow one of his action and share with you the notes I took from that video.

Some of the actions might not be possible at this moment in time, but you'll definitely find something you can act on today.

## Ask interesting friends for referrals
Be specific:

- In what city/school/company?
- Gender/personal specification
- Category/niche
- Whatever else
    
Examples:

- "I'm in London for a month, who is the one person you hang out with when you come to London?"
- "Who is the most amazing person from city/school/company/category/niche that I should have lunch with?"

## Reach out to one impressive/up-and-coming person weekly

- Start building the relationship early on

## Do exciting stuff (and people might come to you)

1. Start a blog/YouTube/newsletter
2. Publish once a week for at least 90 days

## Make an intentional list of people you want to connect with:

A. Who has a career you like?
B. Who's working on something you're curious about?
C. Who's working in an exciting company?

## Take notes on podcasts/YouTube/webinars/posts and put online

- Send the notes to the creator and let them know (without expecting anything back)

## Financially support someone

Examples:
A. Buy their stuff (Products, books, courses, etc.)
B. Support their charity

## Add value to someone without expectations

A. Create something for them
B. Look at how they are spending their time (and assist them)
C. Compliment without expectations

## Keep a list of cool people in cities

- Then contact them when you're in that city

## Organize an online event

1. Identify someone you want to connect with
2. Make it worth it for them to sign up
3. Promote and make a great event

## Join online communities

1. Pick one of your passions
2. Find 3 online groups
3. Post and engage at least once a week for 90 days

---

Hope you found this useful, have a great week!

If you liked what you read, please consider signing up to my [newsletter](https://email.halldorstefans.com/).
How Salesforce CRM integration helps companies develop more leads

Tags: salesforce, crm
Published: 2020-08-05 12:58:50

Salesforce is surely an incredible tool for generating more leads, but its integration with other similar tools will offer you a revolutionary change by closing more [businesses](https://www.cloudanalogy.com/) and improving the productivity of your business.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7cptal44aesje5wuoz2j.png)

Salesforce is considered the best cloud-based customer relationship management tool that helps companies build a great reputation in the market. However, Salesforce CRM integration is a process that needs to be done correctly and efficiently if you want to get the most out of it. There are several tools that help you integrate your system with Salesforce, and Unbounce is surely one of them.

With the help of Unbounce, one can easily integrate with Salesforce and provide access to this popular tool as third party integration. By connecting your Unbounce and Salesforce accounts, you will be able to capture more and more leads and effectively manage your customers. This is done by creating forms on their landing pages that push leads to the Salesforce dashboard and A / B test pages, which is quite impressive.

**How do I integrate Salesforce with Unbounce?**
[Integrating Salesforce] (https://www.cloudanalogy.com/) with Unbounce is pretty straightforward. All you have to do is follow these simple steps and you're done. But first, you must have a Unbounce account with a professional subscription and a Salesforce account with access to the Web Services API, as well as object leverage permission to read, create and edit leads and leverage. field security to read, edit and create lead fields and finally a Cancel home page with email address, company and name.

**The process:**

1. Log in to your Unbounce account and navigate to the Salesforce page you want to integrate.

2. Now log in to your Salesforce account and grant Unbounce access to send lead information by clicking "Authorize"

3. Wait for Unbounce and Salesforce to authenticate.

4. When complete, the page will successfully integrate with Salesforce. The blue check mark indicates that new leads will be sent to Salesforce.

You can insert as many landing pages as you like to send more leads to your Salesforce. Just follow these steps again and if you have a problem, contact your customer service.

**Benefits of Salesforce CRM integration:**

The Salesforce integration has several advantages, namely:

1. Capture more leads from landing pages

2. Transfer campaign leads directly to your reps

3. Its cloud-based function allows you to access everything you need at your fingertips

4. Easy customer management and close as many offers as possible to grow your [business] (https://www.cloudanalogy.com/).
Angular Getter and Setters Properties in 2020
Published: 2020-08-05 12:55:35

The Typescript Equivalent...
```typescript
//assume this is our MessageComponent
 _message;
 get message() { return this._message };
 set message(value: string) {
   debugger;
   this._message = value;
 }

//how to use from another component
let mc = new MessageComponent();
mc.message = "You were always on my mind";
let message = mc.message;


```
Occasionally, we need to see *when* a value is being set; especially when the property is an @Input() variable. @Input properties accept input from other components.  

**Good Use Cases**
- We want to put in a debugger statement to find when and which program is making the change.
- We want to do additional validation than just the type. As for validation don't forget Angular's FormGroup and FormControl validation system. And the upcoming "Decorator methodology".

JWP 2020
Integrate Tests with BrowserStack - WebdriverIO
Tags: testing, javascript, webdev, tutorial
Published: 2020-08-05 12:50:59

BrowserStack allows you to easily run tests on multiple devices and OS and takes away the hassle of handling your own infrastructure. With WebdriverIO, you can get your tests running in BrowserStack under 5 mins, let's take a look at how to do that -

### **Prerequisite** 
You need to have a BrowserStack account, you can register for a free trial account that will give you around 100 mins for automated browser testing. Read more [here](https://www.browserstack.com/users/sign_up).

### **Installation**
Install the BrowserStack service - `npm install @wdio/browserstack-service --save-dev`

### **Configuration**
Make the following changes in your `wdio.conf.js` file
```javascript
export.config = {
    // ...
    user: process.env.BROWSERSTACK_USERNAME,
    key: process.env.BROWSERSTACK_ACCESS_KEY,
    services: ['browserstack'],
    // ...
};
```

### **Run Tests**
Now you can run your tests this way - `BROWSERSTACK_USERNAME={your_username} BROWSERSTACK_ACCESS_KEY={your_access_key} npx wdio`
Head back to [BrowserStack dashboard](https://automate.browserstack.com/dashboard/v2) and you'll see your tests running there 🙌 - 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ufjd4czbv53mhak1gyk.PNG)

***
#### Check out this video to see a detailed explanation on how to run tests on Browserstack:

{% youtube FeqBJEeVn20 %}

***

#### To learn more about WebdriverIO, check out my free tutorial series here - 
https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Follow [@automationbro](https://twitter.com/automationbro) on Twitter for latest updates
Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel to see more content like this
Quick A/B Poll: Which card style you like better?
Tags: discuss, ui, ux, poll
Published: 2020-08-05 12:45:58

**UPDATE 10/08/2020:**  

Thanks to everyone that took the time to vote and provide valuable feedback in this poll. You guys rock 🤘.

I decided to use **Option A** (even if B got more votes 🦄) with a few changes inspired by the feedback you gave me and considering the component surroundings:

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

> Card A is the real deal (dark background, vibrant colors, etc., all evoke the feelings of competition, passion, aggression, etc.).
>by [@AnkushThakur](https://dev.to/ankush981)

I added the character names, the logos in the bg similar to option B, and I added a small indicator of the stage just at the top.

I like the contrast that the card gives, it's eye-catching in all that light tournament page and clearly invites the user to check the next battle kinda feeling.

Here is another version of it

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

And how it looks in the same tournament page but in *knockout phase*: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1r67zuejk29uu4sv68o4.png)

Does that mean I threw the **Option B** to the trash 🗑? Not really, I actually going to use it on a page with historical of matches, because there doesn't need that much dynamism and contrast looks nice and clean.

I'm really happy with the result. and all the cool discussions happening on the comments, thanks, everyone!
 
---

Hi there 👋 . I'm a big fan of [Super Smash Bros](https://www.smashbros.com/en_GB/index.html) since I was a little kid.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8d16qd3wh3cm09w99ig9.png)

I'm doing some quick design for a tournament app in Vue and I could use your feedback, which card you like the most?.

- Option A: Vote heart ❤️ 
- Option B: Vote 🦄

Disclaimer: Characters and names are property of Nintendo of America.
Good first issues with Next.js
Tags: github, opensource, react
Published: 2020-08-05 12:41:30

---
series: [open-source-friday]
---

[Next.js](https://github.com/vercel/next.js) is one of the most popular frameworks built on React.js. Most developers are familiar with how they can leverage Next.js to make fast web apps. But did you know, their open-source repository contains a few "good first issues" just waiting for your contributions?

## Learn how to contribute to good first issues

This video is an excerpt from our Open Source Friday live stream. OSF is GitHub’s live interview where we chat with open-source project maintainers. They share tips on how to contribute to their projects for the first time. 

Tim Neutkens walks through how to find good first issues. They provide some helpful context on navigating the test suite and project organizational structure. 

## Join us live on Twitch

If you’re looking for a deep dive into contributing to open-source projects like Next.js, join us on Fridays at [twitch.tv/github](https://www.twitch.tv/github) for our next Open source Friday.

If you missed our previous OSF stream, or want to rewatch, you can find the full over on our YouTube.

{% youtube WK-UFw0ZOIw %}

For more information about contributing to open-source, checkout out [opensourcefriday.com](https://opensourcefriday.com/).
When & why should object destructuring be preferred?
Tags: javascript, node, discuss
Published: 2020-08-05 12:37:27

<!-- ###### I know this is common practice in React and React Testing Library, the code snippets serve just as an example. I'm talking about usage in JS in general.-->


When and _why_ should destructuring object methods be prefered:
```js
const { getName } = getUser(...);
const username = getName();
```

Over accessing methods on object itself:
```js
const user = getUser(...);
const username = user.getName();
```

---

### I see some "issues" with the first approach  

**What happens if we want to have multiple users?** 
We can rename them:
```js
const { getName: getName1 } = getUser(...);
const { getName: getName2 } = getUser(...);

const name1 = getName1();
const name2 = getName2();
```

but IMO, it makes it harder to follow, than just doing:
```js
const user1 = getUser(...);
const user2 = getUser(...);

const name1 = user1.getName();
const name2 = user2.getName();
```

Because it removes some of the context (or information) from the method. We need to look where `setName` has been defined to know what it does, needing to scroll up or following the code to where it was defined, making it harder to keep track.

**Take this example:**

```js
const { setName } = getUser(...);

...
// In another part of the file
...

setName('John'); // Where did `setName` come from? 
```

In this scenario, we must have a mental map of where `setName` came from and what it will affect.

Yeah sure, if it's our own code and we work on it often it will not be that big of an issue, as we will have a good mental map of the code. But imagine you work with more people, or come back to the code 1 year later...

**BUT if we do it as follows, we preserve some context:**

```js
const currentUser = getUser(...);

...
// In another part of the file
...

currentUser.setName('Babatunde');
```
With this approach, we know that `setName` affects the `currentUser` object. Reducing the mental map needed and making it easier to follow and understand.

---

What's your take on this?
YouTube Video | Mobile-First Website with CSS Grid -2
Tags: css, html, youtube, webdev
Published: 2020-08-05 12:37:17

We will create a website with CSS Grid and we will be using the mobile first approach. The mobile first approach is the approach in which we write the code for mobile screen first and after that move to larger screens.

This is the second part of the series.

{% youtube 37a3dXFZKk4 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
#1 Introduction to Gridsome VueJS
Tags: vue, webdev, developer
Published: 2020-08-05 12:25:26

---
title: #1 Introduction to Gridsome VueJS
published: true
description: Gridsome is Vuejs powered framework for building the static generated websites
tags: vuejs, webdevelopment, developer, 

---

# What is Gridsome?
**"Gridsome is Vuejs powered JAM STACK framework for building static generated websites."**

This is the definition available on the official website of the Gridsome. But what exactly it means for the developer?

To understand it better we first need to understand first what is JAMStack?

## JAMStack?
"JAM" in JAMStack stands for - "JavaScript, API, markup. "
"JAMStack is not based on the server".

JAMStack websites are the **pre-rendered files** served directly from the CDNs. This made the websites fast and secure. This also removes the dependency of managing the web servers.

To build the JAMStack websites we need:

1) HTML
2) CSS
3) Data Source Layer (API, CMS, GraphQL, etc)

Gridsome is not the only option available in the market to create JAMStack websites. We have Gatsby, NextJS, and a few more.

# Why Gridsome

- SEO
  As the Gridsome pre-render the HTML files with the data from APIS, etc. All the sites build with Gridsome are SEO friendly.

- Fast 
  Gridsome sites are not dependent on the server. Everything is pre-rendered and serve from CDN, this makes the sites FAST by default.

- Vuejs
  Gridsome is based on the Vuejs - one of the popular UI libraries.

- GraphQL data layer
 Gridsome is powered by GraphQL to read the data from different data sources.

- Plugins ecosystem
Gridsome has a very big and strong ecosystem of the plugins which ease the development of the developers as well as help in the implementation of the complex features too.

and many more...

In the next article, we will learn about how to install Gridsome and project structure walkthrough
Automatically upgrade security vulnerabilities with this Yarn audit fix  alternative
Tags: webdev, npm, todayilearned, security
Published: 2020-08-05 12:05:45

In this short guide I will explain how to automatically update and fix package vulnerabilities using Yarn. Much like running `npm audit`, running `yarn audit` returns a list of packages with vulnerabilities. NPM provides a command (`npm audit fix`) for automatically upgrading vulnerable packages and fixing the vulnerabilities but there isn't an equivalent command available within Yarn (as of 5th August, 2020).

---

It's frustrating that yarn doesn't have the equivalent command but the solution, while not ideal, is incredibly simple. 

_Before you begin modifying your packages, you should ensure that you have version control in place so it's easy to revert any changes if you run into any issues._

To start with you need to generate a package-lock.json by running

```
npm i --package-lock-only
```

Once this has been generated you need to delete the existing yarn.lock. Then run `npm audit fix` to automatically upgrade and fix security vulnerabilities using NPM. Now we're going to generate a new yarn.lock based on the package-lock.json (which has had the security fixes applied to it) using [the yarn import command](https://classic.yarnpkg.com/en/docs/cli/import/). To do this simply run `yarn import`, which should create our updated yarn.lock file. Finally delete the package-lock.json as we won't be needing it anymore.

This won't always able to automatically fix all dependency vulnerabilities, especially if there isn't a dependency upgrade/fix available. However in one project I was recently able to automatically fix over 1000 dependency vulnerabilities, and in another ~30. 

_If know what you're doing and you want to copy/paste the commands, all of the commands listed above combined are_

```
npm i --package-lock-only
rm -rf yarn.lock
npm audit fix
yarn import
rm -rf package-lock.json
```
----

_If you found this useful, have any questions, or want more content like this, feel free to follow me on [twitter](https://twitter.com/AndyPotts_)!_
My Favourite Web Development Tools!
Tags: webdev, css
Published: 2020-08-05 12:03:14

Every web developer has his or her favourite tools that he or she uses to make coding easier and "enjoyable". In this post, I'm going to share some awesome web development tools that I find really awesome! (although most of them are CSS designing tools 😳🙄) 

## 1. Glitch

https://glitch.com

Ok, this not just a tool, this a really nice coding platform with an awesome community. I can host my projects with the help of an inbuilt code editor. Supports many languages but works best for NodeJS. 

## 2. Smooth Shadows (by Phillip Brumm)

https://brumm.af/shadows

Smooth shadows help in generating CSS code that will result in *smooth* box shadows. It looks really smooth and satisfying. :sweat_smile:

## 3. Coolors

https://coolors.co

A really nice online tool that can generate matching and suitable color schemes for your project. If you don't like the current color scheme, hit the Spacebar and it will generate a new color scheme for you.

## 4. Blobmaker

https://www.blobmaker.app

Blobmaker helps you to generate really gooey looking SVG blobs of various sizes, colors and shapes randomly. Can be used as background or to create really cool looking animating blobs! 

## 5. Get Waves

https://getwaves.io

Similar to Blobmaker, Get Waves allows you to generate waves (the ocean ones) of different colors and varying number of waves randomly. It looks good as a footer of a webpage or the header.

## 6. Undraw.co

https://undraw.co

An awesome collection of SVG illustrations for open source projects, can be used for landing pages, 404 pages, etc, and in general as well! The illustrations can be used without attribution and without paying any money, although I feel like you **should** give some sort of attribution.

## 7. Marcdown 

https://liyasthomas.github.io/marcdown

A beautiful and real-time Markdown to HTML editor (by Liyas Thomas) online that can help you preview your Markdown code before publishing it on GitHub. It has a really beautiful dark mode 👻😏🤩. Works offline after first use, which makes it even more awesome. 

## 8. Postwoman (not Postman)

https://postwoman.io

Another beautiful tool built by Liyas Thomas. Postwoman is an API request builder that allows you to test out [your] APIs with or without a proxy. It's a Progressive Web App so it can be saved to your desktop! It's lightweight so basically it's a really nice online alternative to Postman. 

## 9. Screely.com

https://screely.com

This helps you to create awesome and beautiful (I really like awesome and beautiful stuff) mockups of screenshots of websites. Can be really useful if you're not a MacBook user and you need a nice picture of your website for your README!

## 10. CSS Grid Generator

https://cssgrid-generator.netlify.com/

This is another awesome :joy: website by Sarah Drasner which generates code to create dynamic grid layouts using CSS Grids. 

And those are the top 10 awesome tools that I use, let me know what are the cool stuff that you use in the comments! :v: