teleren/devto huggingface dataset:
Cyber Security Cameras?
Tags: securitycameras
Published: 2020-06-11 18:04:22

What are people's thoughts about cyber security technology being implemented into <a href="https://www.chicagosecuritysystems.com/security-cameras-installation-chicago-il">security cameras</a>' technology? With many of the DIY systems getting compromised, more built-in security onboard needs to be implemented. With the future being distributed systems versus centralized storage how it is now, security will be even more important.
Learn how to Build 6 iOS Games with Swift and Xcode

Tags: ios, swift
Published: 2020-06-11 18:03:48

Hello! This might people that are looking for a very insightful course on building games on iOS. Me and my friends have tried it and we learned so much! Check it out here: https://www.udemy.com/course/learn-programming-for-app-development-on-the-apple-watch/
Build Todoist app with Vue.js and Parse Platform (Part 3 - Client side validation)
Tags: javascript, beginners, vue, tutorial
Published: 2020-06-11 17:46:47

---
title: Build Todoist app with Vue.js and Parse Platform (Part 3 - Client side validation)
published: true
description: 
tags: javascript, beginners, vue, tutorial
---

{% vimeo 428189241 %}

Hello! Let continue to build cool web apps with Vue.js and Parse.js. This time we will talk about client side validation with Vuelidate library.

Previous parts:

[Part 1](https://dev.to/andreevich/build-todoist-app-with-vue-js-and-parse-platform-3ad5)
[Part 2](https://dev.to/andreevich/build-todoist-app-with-vue-js-and-parse-platform-part-2-login-1pgo)

Source code is available [in this github repository](https://github.com/mednikoviurii/taskscamp)
Nullish coalescing and Optional chaining
Tags: javascript, ecmascript, webdev
Published: 2020-06-11 17:58:05

---
title: Nullish coalescing and Optional chaining
published: true
description: An overview of two new operators recently added to Javascript
canonical_url: https://ganes.dev/nullish-coalescing-and-optional-chaining/
tags: javascript, ecmascript, webdev
---

Canonical Url: https://ganes.dev/nullish-coalescing-and-optional-chaining/

In this post, I'll explain about two of the recent additions to the javascript. `Nullish Coalescing` and `Optional Chaining`.

## Nullish Coalescing

When accessing a property of a object in javascript, we usually provide a fallback value incase the property is not present (`undefined`) or `null`.

For Example. Consider a object like this

```js
const Blog = {
  showPost: false,
  blogTitle: 'A new Post',
  animationDuration: 0,
  blogSubTitle: '',
  nullVal: null,
};
```

A usual way for this handle fallback is by using the `||` operator

```js
const undefinedValue = Blog.someValue || 'default value'; // result: default value
const nullValue = Blog.nullVal || 'some other default value'; // result: some other default value

// Other Cases
const showPost = Blog.showPost || true; // expected: false, result: true
const postAnimationDuration = Blog.animationDuration || 400; // expected: 0, result: 400
const blogSubtitle = Blog.blogSubTitle || 'Subtitle'; // expected: '', result: Subtitle
```

The first two examples work as we expected, but for other cases we get the result as right hand side value of `||` operator as shown in the above example.This is because the values on left hand side already evaluate to `falsy` in Javascript.

For this problem, we use the `Nullish Coalescing` operator

```js
const showPost = Blog.showPost ?? true; // expected: false, result: false
const postAnimationDuration = Blog.animationDuration ?? 400; // expected: 0, result: 0
const blogSubtitle = Blog.blogSubTitle ?? 'Subtitle'; // expected: '', result: ''
```

Once we switch to nullish Coalescing, we get the expected results.

## Optional Chaining

When accessing a nested property in the object, we usually have to check whether intermediate properties are present.

For Example, Consider a object with nested properties like this

```js
const Person = {
  name:'Ganesh'
  address:{
    home:'Home Address',
    work:'Work Address'
  }
}

const homeAddress = Person.address.home

```

Since, we are accessing nested values, if `address` is undefined we get an error like `Cannot read property home of undefined`. In this case, we use `Optional Chaining` operator.

To use the optional chaining operator, we have to put a `?` before accessing a property. So above example changes to this

```js
const homeAddress = Person?.address?.home;

// We can also use this for functions
someObj?.func();
```

## Combining both of them

Although these both operators are good seperately, when combined they become very useful.
I can take the sample example and nullish coalescing operator at the end of it.

```js
// The result defaults to Home if left side of nullish coalescing is null (or) undefined.
const homeAddress = Person?.address?.home ?? 'Home';
```
Handling environment variable: React and AWS Cognito
Tags: react
Published: 2020-06-11 15:15:57

This post is for beginners. You can use the same code base for all environments if you have clearly handled the environment specific changes. Those changes should be minimised like the api urls. I have described the process in four steps.

First, I have created separate files where these differences are defined. For example, my files are named config.prod, config.qa and config.dev. And the contents of file is like
export default {
  api: {
    baseURL: “https://..”,
    fetchUsers: “https://..”,
  }
  cognito: {
    USER_POOL_ID: 1234,
  }
}
Prod config file will have prod api url domain and dev config file will have dev api url domain.
If your endpoints are same for all environments, you can export it from a separate common file. 
2: And i have written a util function which switches the custom environment variable (we will set in next step) and return corresponding config file.

export function getEnvConfig(){
let config = null
switch(process.env.REACT_APP_ENV){
  case “dev”:
   config = require(“../config.dev”)
   break;
  case “qa”:
   config = require(“../config.qa”)
  default:
   config = require(“../config.prod”)
  }
  return config
}

3: And inside my saga/thunk, i have imported and used the urls from config file.

const config = getEnvConfig()
const fetchUserUrl = config.default.baseURL + 'getusers'

4.On AWS Cognito secret manager, for each environment, I added a new secret with the name REACT_APP_ENV and value as my corresponding environment.

That's all. You can now access access your custom environment variable in your code using process.env.REACT_APP_ENV

Thank you!
Video Snippets: [5 => IAAS ] ☁️
Tags: beginners, todayilearned, googlecloud, aws
Published: 2020-06-11 17:30:47

Virtaulization and containers play significant roles in the cloud computing space. They are similar in several ways but also different. 

<h1>Virtualization</h1>

Virtualization is the foundation for Infrastructure as a Service. It is the logical division of physical computing resources. It turns a physical server into a virtual host machine. It involves fully self contained computers inside of a virtual machine. 

A hypervisor is the core element of a virtualization solution which allows one to run a virtual machine where a guest operating system has access to virtual hardware. 

<img src="https://images.pexels.com/photos/601798/pexels-photo-601798.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/>

<h1>Container</h1>

A software container is an operating system level virtualization that allows for isolated user spaces to run specific applications. Containers slice up the operating system to run specific applciations. Unlike with virtualization, there is one operating system and not multiple operating systems. This allows for less overhead. Containers involve fully self-contained applications inside a container. 


<a href="https://app.pluralsight.com/course-player?clipId=14a3aac2-1ebb-4d43-8f8f-bd0740c2dfb0">Fundamentals of Cloud Computing by David Davis</a>
File Upload in Livewire v 1.2.0
Tags: laravel, php, javascript
Published: 2020-06-11 17:17:59


File handling is very hard to handle, specially if you are using javascript to send file and then handling on laravel/php side.

With new Laravel Livewire v1.2.0, there is a new way to upload file with zero configuration (Yes no config needed)

Check this video for extensive explaination of every bit of new file upload.

{%youtube YkeKBe8l-lk %}


Before moving forward, I can tell you that this is soo easy that you may thing there is some magic behind it, but not its super simple.

Note: If you are new to laravel livewire, check this full livewire course link at the bottom of this post.


First, add the WithFileUploads trait to your component.

```php
use Livewire\Component;
use Livewire\WithFileUploads;

class UploadPhoto extends Component
{
    use WithFileUploads;

    public $photo;

    public function save()
    {
        $this->validate([
            'photo' => 'image|max:1024', // 1MB Max
        ]);

        $this->photo->store('photos');
    }
}
```

then just use wire:click on your input field to handle any file upload.

```
<form wire:submit.prevent="save">
    <input type="file" wire:model="photo">

    @error('photo') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Photo</button>
</form>
```

That's it.
I told you, it is super simple.


Livewire full video course

{%youtube HWTF-oi70e4 %}

For more information and awesome tutorials, follow me at https://twitter.com/sarthaksavvy

watch tutorials on https://youtube.com/bitfumes
Contribute to the Chingu Resource List
Tags: codenewbie, programming, webdev, opensource
Published: 2020-06-11 17:14:58

**__Announcing the Chingu Resources List Repo!!!__** :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: :fireworks: 

We're happy to announce the Chingu Resources List repo today. 

This is a crowd-sourced list of resources to help Developers & Teams learn, grow, & build projects. Our goal is to leverage the expertise of the Developer Community to make it easy to find & share the "best of the best" resources.

There are two additional benefits:

1. It's a quick and easy way to get experience contributing to an open source project
2. It's another way to increase your GitHub contributions

**_Get on board and help out your fellow Dev's_**
https://github.com/chingu-voyages/ChinguResourceList
Enums in GraphQL
Tags: graphql, codenewbie
Published: 2020-06-11 17:12:51

---
title: Enums in GraphQL
published: true
description: What are enums and how to use them in GraphQL
tags: graphql, codenewbie
cover_image: https://images.unsplash.com/photo-1468174482686-1047396f13b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
---

## What are enums?
Enums or enumerations are a data type in programming languages. Enums hold _named variables_, which is just a fancy way of saying that they hold a number of predefined values. Enums also help us by providing additional input validation. 

## When should I use an enum?
Typically, enums are used when you have a property that can only have a predefined set of values. For example, a student's attendance for the day. The value of `attendance` can only ever be _present_, _absent_, or _late_. Another example is the delivery status of a message. Possible values are `sent`, `delivered` and `read`.

## How to define an enum in GraphQL schema?

So now we've decided that we want our property to be of type `enum`. How can we define that in our schema? Simply:

```graphql
enum messagesDeliveryStatus {
    sent
    delivered
    read
}
```

## Example

```graphql
type RootQuery {
     messages(deliveryStatus: messagesDeliveryStatus): [Message]
}

type Message {
     id: ID
     message: String
     deliveryStatus: messageDeliveryStatus
     sentAt: String
}
```

This simple schema does two things. It defines an object type called Message which has some properties, specifically one property called *deliveryStatus*, which is of type `messagesDeliveryStatus` that we defined above. 

It also defines a query in root called messages, which returns all the messages we have, and we can filter them by delivery status. 

```graphql
query {
     messages(deliveryStatus: "read") {
        message
        type
        deliveryStatus
        sentAt
   }
}
```

Oops, running this query causes an error. The error message you'll see is:
`"message": "Expected type messagesDeliveryStatus, found \"read\". Did you mean the enum value read?",`

Now I faced this error message more than once, and when you're in a hurry or frustrated, it's likely the error message won't make a lot of sense. You're telling me you're expecting the value I'm passing?

The mistake we made here is that we passed the value `read` as a _string_. What we need to do is remove the double quotes around it. Let's try that again:

```graphql
query {
     messages(deliveryStatus: read) {
        message
        type
        deliveryStatus
        sentAt
   }
}
```

And now we're getting our expected results: only messages that were read!

Thank you for reading. Let me know how I can make this article better. Until next time 👋

_Cover photo by Kari Shea on Unsplash_
API Testing Using Postman: Part 1 ( What is an API? )
Tags: testing, tutorial, beginners, webdev
Published: 2020-06-11 17:11:13

In this series of API Testing using Postman - Part 1.

###TL;DR
> You are going to learn What is an API? and What is API Testing with Postman Installation and Quick Postman tool overview.

[![API Testing Using Postman: Part 1](https://i.imgur.com/3gv9OCC.png)](https://youtu.be/ISjyXzkF-4w "API Testing Using Postman: Part 1") 

- I have included other advance concepts like HTTP Methods basics which are helpful in API testing interview questions.

- ✅ Join Automation NewsLetter - https://sendfox.com/thetestingacademy

- You are going to learn the concepts of API, API testing, web services and HTTP Methods basics which are helpful in API testing interview questions. 

- You will learn about everything API Testing Using Postman.

✅ Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1

✅ Programming Java -
https://bit.ly/learnjava2020-p1

✅ Test Automation - 
https://bit.ly/learnautomation2020

✅ API Testing - 
https://www.learnapitesting.com

✅ Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Getting started with Angular
Tags: angular, javascript, typescript, framework
Published: 2020-06-11 17:10:20

### Pre-requisites :innocent:
:point_right: **node & npm** _i.e. node package manager_
:point_right: **angular/cli** _i.e. command line interface for Angular_
:point_right: **Code editor/IDE** _i.e._ [VS Code](https://code.visualstudio.com/download), [Sublime](https://www.sublimetext.com/3) or any you prefer

### :thinking: _If you don't have these installed in your machine, let's quickly get it installed._

### - installing ``node`` & ``npm`` :+1:

1. for ``Windows``:
[download link to node binaries](https://nodejs.org/en/download/)

2. for ``Ubuntu/Linux`` or ``MacOS``:
[select your OS to get command](https://nodejs.org/en/download/package-manager/)<br>

3. command for installation using package manager through terminal

**Node.js v14.x**:

```sh
# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
```
Verify with the below commands that _``node``_ and _``npm``_ fire below commands
```sh
# Using Ubuntu
node -v
npm -v
```
 
## - Let's get your hand dirty :raised_hand_with_fingers_splayed:
Now, we have our ``npm`` _(node package manager)_ installed, we can use it to install Angular in our system.
Use below command to install ``Angular CLI``

```sh
npm install -g @angular/cli
```

verify if ``Angular CLI`` is installed successfully, fire below command
```sh
ng v
```
it must look something like below:
![angular version in terminal](https://dev-to-uploads.s3.amazonaws.com/i/wyx0u7gtnnsk1rcui5ne.png)

## - Now, we will create our first Angular project
We need to fire below command in our ``terminal/command prompt`` to create our project
```sh
ng new angular-app
```
Here, ``ng new`` is used to create new project and ``angular-app`` is your Angular project name.

It will create ``Angular project`` with default template provided by ``Angular`` itself. To have a quick look on it, we can goto our browser and visit default url served by Angular _i.e. [http://localhost:4200](http://localhost:4200)_

Now, we need to point our ``terminal`` to Angular project, to achieve this use this command
```sh
cd angular-app
```
As of now, we are in our Angular project folder. We can use below command to serve our application to the browser
```sh
# to just serve and visit http://localhost:4200
ng serve

# to serve it on it's default browser
ng serve -o
```
&nbsp;
### Wow :star_struck:, we just created an Angular application. It was super easy, isn't it.
&nbsp;

### - Find the helping visuals :clapper: below here:
{% youtube XoeJINGrqgc %}

---

<center>We are open for contribution :handshake: [CodeCasm](https://codecasm.com)</center>

---

<center>:heart: Happy coding :heart:</center>

---
Get a basic understanding of DevOps
Tags: devops, aws
Published: 2020-06-11 17:09:38

This article is the first post from the series of "Get Started with DevOps". To understand the basics of DevOps. And various aspects of DevOps to deploy infrastructure and application using best practices.

## Introduction to DevOps

DevOps has become one of the most valuable business disciplines for enterprises. The quality and speed of application delivery have improved to a great extent.

## What is DevOps

“DevOps is the combination of cultural philosophies, practices, and tools that increases an organization’s ability to deliver applications and services at high velocity.”
- 'DevOps' is a combination of two words 'development' and 'operations.'
- A culture that promotes collaboration between Development and Operations. Team to deploy code to production faster in an automated & repeatable way.
- It helps to increases an organization's speed to deliver applications and services.

## Benefits of DevOps
- Improved operational support and faster fixes.
- Good processes across IT and teams, including automation.
- Increased team flexibility and agility.
- Happier, more engaged teams.
- Cross-skilling and self-improvement.
- Collaborative working.
- Respect from senior management.

#Summary
DevOps demonstrates the collaborative working of the ‘Developers’ and ‘Operations’ team. DevOps integrates a set of practices and tools for the fast delivery of applications and services. By building and producing applications and software in a quick and reliable manner, it helps in utilizing time; and completes development and operations timely. Thus, the teams can spend more time in innovation and new development, rather than fixing old issues.

I am a DevOps Consultant. My job is to help the startup to build and maintain application infrastructure. Provide technical solutions. Help to introduce and improve DevOps Practices in the application development lifecycle. Proficient with Kubernetes and docker across AWS, GCP, and on-prem. 

You can find me on [Twitter](https://twitter.com/safoorsafdar) and you can also check my [Linkedin](https://www.linkedin.com/in/safoorsafdar) profile. If you liked this post, please recommend and share it with your followers.

_Note: The substance of this post is derived from a variety of web assets to be instructed._
#007 Docker Images and Containers
Tags: docker, devops, tutorial
Published: 2020-06-11 17:02:18

# Introduction

this is part 7 from the journey it's a long journey(360 day) so go   please check previous parts , and if you need to walk in the journey    with  me  please make sure to follow because I may post more than once   in 1  Day  but surely I will post daily at least one 😍.

And I will cover lot of tools as we move on.
***
# Back to Hello World demo

in part 6 we run 

```bash
docker run Hello-World
```

![docker-hello-world](https://dev-to-uploads.s3.amazonaws.com/i/p4hnbrr9op0rrs2fq98y.png)

As we see in 1 the docker client contacted the docker daemon as we discussed earlier

in step 2 the docker doesn't find the image hello-world locally so he go to the docker hub and downloaded for us!

see how easy it is with one command we got an image!

in step 3 the Docker create a new container using the image we downloaded and run it so we got this output

in step 4 the deamon (server) send back the message to us ! (client)

***
# Docker Image and container

If you are a programmer and you study OOP(Object Oriented Programming) we can think about Image as an Class ,

and the container is an instance of it kind of 

```java
Car tesla = new Car();
Car toyota = new Car();
```

We can imagine the Image as the Car and the Container as tesla  and toyota , see I build on top of 1 Image 2 Containers and there is no need to pull image again from dockerhub so it will skip step 2!
***
## let's run an light linux system (alpine)

```bash 
docker run -it alpine sh
```

-it stands for **i** is interactive and **t** is an pseudo-TTY (pseudo terminal to communicate with bash) 

alpine is a light linux distro which contain basic files and kernel to run linux

sh is kind of a bash

![demo-1](https://dev-to-uploads.s3.amazonaws.com/i/xrl0668tv6290m6wiove.png)

as we see , docker doesn't find the alpine locally , so he pull it from docker hub

![demo-2](https://dev-to-uploads.s3.amazonaws.com/i/84o8zmnkdff9hksfs7zi.png)

as we see home directory is empty (home directory is linux folder like D: in windows you can locate personal files not system files)

mkdir (make directory is a linux also windows command to make a directory) and test is folder name

as we see when I restart the docker , I lost the changes I made !

this will be covered later.
JSByte: JavaScript Event handlers
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-06-11 17:00:22

*I will be sharing bite sized learnings about JavaScript regularly in this series. Follow along with me as I re-learn JavaScript. This series will cover JS fundamentals, browsers, DOM, system design, domain architecture and frameworks.*

---
 
### Event propagation
**Specificity**: 
If a node has children and has an event handler attached to it, it is able to listen to not only its own events, but also events on its children. 
However, if two DOM elements have a handler, the more specific one - the closest to the target, fires off first. 

**Targeting multiple elements**
A node can have only one `onclick` attribute, so you can register only one handler this way. 

A node can have multiple `addEventListener`, so you can attach multiple click handlers using `addEventListener`. It also gives access to `removeEventListener` to unsubscribe from the event.

When you have an event handler that needs to be attached to multiple elements, attach the handler to the parent element instead of targeting each element individually.

```html
<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>
</div>
```
```javascript

const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})
```

### Common events

`onclick`
`dblclick`
`mousedown`
`mouseup`
`mousemove`
`keydown`
`keyup`
`touchmove`
`touchstart`
`touchend`
`onload`
`onfocus`
`onblur`
`onerror`
`onscroll`




___

### Interested in more JSBytes? [ Sign up for the newsletter] (https://tinyletter.com/shrutikapoor )