teleren/devto huggingface dataset:
Our favorite sessions from WWDC 2020
Tags: ios, swift
Published: 2020-07-01 01:52:49

For the first time in history, WWDC didn't have a crowd, there was no cheers, and no awkward "Yeah!" during the keynote.

But it was jam-packed, like 100-sessions-jam-packed and a lot of ground-breaking news. 

To name a few things we're getting this year, iOS is getting widgets. Intel is dead (Ok maybe not). Mac can now run iOS and iPadOS apps. Face ID and Touch ID are coming to the web. App Clips are now a thing and SwiftUI is an adult now. 

But if you're like us and you enjoy WWDC sessions as much as the main keynote, we've got you covered with a list of our favorite sessions from this year's WWDC, here we go:

## Machine Learning
* [Build an Action Classifier with Create ML 🏃‍♀️](https://developer.apple.com/videos/play/wwdc2020/10043/)
* [Detect Body and Hand Pose with Vision 👁](https://developer.apple.com/videos/play/wwdc2020/10653/)
* [Make apps smarter with Natural Language 💬](https://developer.apple.com/videos/play/wwdc2020/10657/)
* [Explore the Action & Vision app 📱](https://developer.apple.com/videos/play/wwdc2020/10099/)
 

# Swift
* [What's new in Swift 🏎](https://developer.apple.com/videos/play/wwdc2020/10170/)
* [Explore logging in Swift 🌲]
(https://developer.apple.com/videos/play/wwdc2020/10168/)

## UI
* [Stacks, Grids, and Outlines in SwiftUI 🥞](https://developer.apple.com/videos/play/wwdc2020/10031/)
* [Advances in diffable data sources 💽](https://developer.apple.com/videos/play/wwdc2020/10045/)
* [What's new in SwiftUI ✨](https://developer.apple.com/videos/play/wwdc2020/10041/)
* [Meet WidgetKit 🍭](https://developer.apple.com/videos/play/wwdc2020/10028/)

## iOS 14
* [What's new in location 📍](https://developer.apple.com/videos/play/wwdc2020/10660/)
* [AutoFill everywhere ⌨️](https://developer.apple.com/videos/play/wwdc2020/10115/)
* [Explore app clips 💫](https://developer.apple.com/videos/play/wwdc2020/10174/)

## Troubleshooting
* [Become a Simulator expert 📲](https://developer.apple.com/videos/play/wwdc2020/10647/)
* [Background execution demystified 👻](https://developer.apple.com/videos/play/wwdc2020/10063/)
* [What's new in MetricKit 📊](https://developer.apple.com/videos/play/wwdc2020/10081/)
* [Why is my app getting killed? ⚰️](https://developer.apple.com/videos/play/wwdc2020/10078/)
* [Write tests to fail 💥](https://developer.apple.com/videos/play/wwdc2020/10091/)

## Misc
* [What's new for web developers 👨‍💻](https://developer.apple.com/videos/play/wwdc2020/10663/)
* [Get the most out of Sign in with Apple 🔒](https://developer.apple.com/videos/play/wwdc2020/10173/)
* [What's new in App Store Connect 🛍](https://developer.apple.com/videos/play/wwdc2020/10651/)
Ways to keep all your Github projects up and running!
Tags: github, react, javascript, html
Published: 2020-07-01 00:44:32

We upload our projects on GitHub repositories, Won't that be really cool if we can keep them live and running. For this, we generally host our application on Netlify or Heroku and other different platforms. But One of the most hassle-free and free options is "Github pages".

Github pages turns a repository into a working and live project via their username.github.io domain name.
![fun](https://media3.giphy.com/media/62PP2yEIAZF6g/giphy.gif?cid=ecf05e47635f8bbbb85d33a652a5ea14bff0e525da625064&rid=giphy.gif)

So, you will be getting an instant cook and serve feeling,like when in interviews people ask, can you show any of your work? ;).That's it! You have a plethora of skills and masterpieces at the display to impress.
![multitasker](https://media2.giphy.com/media/3oKIPzpnSr1MpFzGLu/giphy.gif?cid=ecf05e47d40d62e1600a2b2212f1836a5a4b1da5014c2d42&rid=giphy.gif)
Let's learn this setup in few steps:

1. Goto your Github repository's settings.
![gp1](https://user-images.githubusercontent.com/66199202/86186775-c77c0d00-baee-11ea-9fa4-09591aac85d2.png)


2. Scroll down till you find below
![gp2](https://user-images.githubusercontent.com/66199202/86186826-ec708000-baee-11ea-9fa1-b33af50c1372.png)

3. select the branch you want to deploy, you'll get a message.
 ![gp-3](https://user-images.githubusercontent.com/66199202/86187608-0ca13e80-baf1-11ea-8836-b82c738428d6.png)

4. Just click the URL and find your stuff live!
![gp-4](https://user-images.githubusercontent.com/66199202/86187788-7d485b00-baf1-11ea-9681-6b22bc1be2b1.png)

Cheers!

Just few points to be noted.
if in case you are stuck with only 'read.md' file (happened with me once) visible in place of your actual application.

You can switch to the other branch or docs/ folder in the repository settings. With that, we can put the index.html/root under the docs/ folder.
![gp-4](https://user-images.githubusercontent.com/66199202/86188671-390a8a00-baf4-11ea-9516-9a2f433c771a.png)

It is happening because Github pages work the way it is supposed to do, it takes the "master" branch as base by default and expects your root/starting point like index.html to be present outside in GitHub tree with read.mds and stuff, if not found, it ll treat "read.md" as default for launching the application.
What is the new Nullish Coalescing Operator in Javascript?
Tags: javascript, es2020
Published: 2020-07-01 00:22:46

One of the new implementations of the last ECMAScript standard is the nullish coalescing operator. Basically, it is a new logical operator that returns its right-hand side operand when its left-hand side operand is `null` or `undefined` and otherwise returns its left-hand side operand.

At the time of writing, it is in Stage 4, which means that this feature is ready for inclusion in the formal ECMAScript standard.

Let's see a basic example:

```javascript
const foo = null ?? "James";
console.log(foo); // > "James"
```

Here we can clearly see that because the left-hand side is `null`, the value `"James"` is assigned to the `foo` variable. With that said, what is the difference with the OR (`||`) operator? Don't we get the same result?

The answer is YES, but suppose you consider some *falsy* values as usable like an empty string or `0`. So, let's modify the previous example:

```javascript
const foo = "" ?? "James";
const bar = "" || "James";
console.log(foo); // > ""
console.log(bar); // > "James"
```

The variable `foo` is assigned with `""` because `""` is not strictly equal to `null` or `undefined`. On the other hand, `"James"` is assigned to the variable `bar` because `""` is a *falsy* value.

That being so, the nullish coalescing operator can prevent some unexpected behaviors in cases you consider some *falsy* values as valid ones.

One last thing about this new feature is that you can combine it with both `&&` and `||` operators but you must provide parenthesis to explicitly indicate precedence. Otherwise, a *SyntaxError* will be thrown:

```javascript
null || undefined ?? "foo"; // raises a SyntaxError
(null || undefined) ?? "foo"; // This is OK!
```

I hope this article helps you to know more about the `??` operator.

Got any questions? Leave a comment below.

Thank you for reading :)
Announcing CascadiaJS : PluggedIn
Tags: javascript, conferences, virtualevents, community
Published: 2020-07-01 00:12:56

---
title: Announcing CascadiaJS : PluggedIn
published: true
description: 
tags: javascript, conferences, virtualevents, community
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3ba7l71hywhtsrzya8hi.png
---

# 2020 --- What. A. Journey.

We have been working hard to figure out what we can do to best help our community and the people we have been working with in the Pacific Northwest. One of the ways we wanted to help is to move forward with our annual conference, but with a _twist_. This year CascadiaJS will come to you **plugged-in** on **September 1st and 2nd**. We are doing a themed week of content for our community and we are so excited to start sharing with everyone. Let’s dive in!

## Speakers … Announced!
We have some amazing content and speakers lined up and are excited to release them. In traditional Cascadia-style, we are releasing them in a roll-out pattern. Please help us by welcoming our first set of speakers!

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

**Stay tuned over the next week for more information!**

## Opportunity Scholarships
We have opened up our scholarships for our community to participate in our event this year. Traditionally we have always offered these to help off-set costs for those looking to gain access to information. This year is no different and we are working on ways to provide mentorship for these attendees beyond access. 

- _Interested in being a mentor?_ Join our #mentors [Slack](https://join.slack.com/t/cascadiajs/shared_invite/enQtNzYzMzYxMTc0OTc5LWM0ZDZiZDc5MDgwMmFkODdlZTdiMGE3NjFhYTZmNWVkMWEwMDcxNWE0Nzg5YTcwOGQzZDk0Y2M3ZWRmN2QwNzU) channel!  
- _Interested in applying for a scholarship?_ Review requirements and [apply here](https://2020.cascadiajs.com/scholarships). 
- _Interested in supporting the scholarships?_ Donate towards the [fund here](https://ti.to/event-loop/cascadiajs-2020/).

## Leading up to the event
Beyond the week itself, we want to kick off a few things to chat with our community! We will have a CascadiaJS Pre-Launch event in July. A prefunk so to speak! We’d love to have you join us to hear from Brian Leroux and James Quick. We will have more details on how to join soon, but mark your calendars for July 15th. 

## Sponsorship
Are you or your company interested in getting involved and supporting CascadiaJS this year? We have sponsorship opportunities still available you can review on our website or feel free to reach out to us at sponsorships@cascadiajs.com

We are so excited to bring [CascadiaJS: PluggedIn](https://2020.cascadiajs.com/) with you! Follow us on [Twitter](https://twitter.com/CascadiaJS) for quick updates or [subscribe to our newsletter](https://cascadiajs.us1.list-manage.com/subscribe?u=ffa37cf28eebc9e75b8558f3b&id=d1b100650c) for information.
Help me with the code, most of the test cases passed but when a negative number encounter it return its positive value.
Tags: javascript, beginners, computerscience
Published: 2020-07-01 00:00:52

var input =function(t){
var n = String(t)
var reg = /\d+/
var result = n.match(reg)
var a = parseInt(result)

if (result){
  return a
}
else{return 'Nan'}
}
console.log(input('-18.12'))
How to add styles using JavaScript?
Tags: javascript
Published: 2020-07-01 00:00:00

---
  title: How to add styles using JavaScript?
  published: true
  tags: JavaScript
  date: Wed Jul 01 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-styles-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-b4f2f80c22c865f25679bbf1f2c1179d.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-styles-javascript)
  
![paint colors](https://melvingeorge.me/_next/static/images/main-b4f2f80c22c865f25679bbf1f2c1179d.jpg)

<p class="text-center">
  Photo by
  <a href="https://unsplash.com/@kellitungay" target="blank">
    Kelli Tungay
  </a>
</p>

You can add styles to DOM elements in 2 ways in JavaScript.

- [Adding as inline styles](#add-styles-inline)
- [Adding as CSS class attributes](#css-class-attributes)

## <a name="add-styles-inline"></a> Adding as inline styles

Consider this HTML,

```html
<div>
  <h1 id="header">My Big Header</h1>
  <p id="paragraph">Hey, Its a small paragraph</p>
</div>
```

Let's add an inline style to the `h1` tag now using JavaScript.

First, you need to get a reference to the element you want to add the styles. Then you can add inline styles to the `h1` tag using the `style` property available on the element.

Let's make our the text of `h1` tag to red color.

```javascript
// get a referenc to h1 tag
const h1 = document.getElementById("header");

// add inline style: color
h1.style.color = "red";
```

Now our `h1` tag color will be changed to red. You can attach any valid CSS style to the `style` property.

![Header text color changed to red](https://melvingeorge.me/_next/static/images/inline-styles-red-e309a92dbc0a96c84ea70e65727181c8.png)

And if you inspect the element using chrome dev-tools you can see that the style is added directly to the element using the `style` attribute.

![Styles added directly to header element](https://melvingeorge.me/_next/static/images/inline-styles-directly-d1c497104d010363347b46508e1ae227.png)

### NOTE 🦄🦄 <br/> If you need to attach a style that contains a `-` (dash) like `background-color`, you need to omit `-` and make it into a camel-case `backgroundColor` and then attach it to the style property. <br/> eg: `h1.style.backgroundColor = "blue";`

## <a name="css-class-attributes"></a> Adding as CSS class attributes

Instead of attaching styles directly to the DOM elements, you can attach class names so that syles can be referenced from an external stylesheet.

To achieve that we need to make a class attribute in our `h1` tag and add the CSS class name to it.

To make an attribute you can use the `setAttribute` method available on the `h1` tag element.

The method accepts:

- name of the attribute as the first parameter
- value of the attribute as the second parameter

```javascript
// get a referenc to h1 tag
const h1 = document.getElementById("header");

// add class attribute and add a classname
h1.setAttribute("class", "colorRed");
```

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

---
Introduction to Stream Processing using Kafka Streams
Tags: scala, kafka, kafkastreams
Published: 2020-09-08 12:06:21

---
title: Introduction to Stream Processing using Kafka Streams
published: true
date: 2020-07-01 00:00:00 UTC
tags: Scala,Kafka,KafkaStreams
canonical_url: https://www.loginradius.com/engineering/blog/stream-processing-using-kafka/
---

Kafka Streams is a Java library developed to help applications that do stream processing built on Kafka. To learn about Kafka Streams, you need to have a basic idea about Kafka to understand better. If you’ve worked with Kafka before, Kafka Streams is going to be easy to…

   
[Read On](https://www.loginradius.com/engineering/blog/stream-processing-using-kafka/)
enchantedForest[3]
Tags: javascript
Published: 2020-06-30 23:45:11

Today we did some more work on the enchanted forest

Pretty much are just setting up the database stuff.

So we made a little login / create account page, 
and it sends a post request to python 
hashes your password checks if there are users with the same username, etc etc. 

And eventually you get redirected to the game site with all your user data

Then our idea is, in the game there will be these things called checkpoints.

They are physical locations that you can go to 

And save your game state.


So yeah, there you go. 



When working with a new library I find it's really helpful to use `ipdb`, for me its a nice complement to reading the docs, cuz I can play around with the objects and get a feel for them. 


Unfortunately I had some problems with `ipdb`, like cancelling stuff after it got a bunch of requests. ¯\_(ツ)_/¯ . not really sure what that was about @kaisucode's server
5 Non-Technical Ways to Protect Your WordPress Website from Hackers
Tags: wordpress, blogging, hacking, security
Published: 2020-06-30 23:20:00

---
title: 5 Non-Technical Ways to Protect Your WordPress Website from Hackers

published: true
description: 
tags: wordpress, blogging, hacking, security
//cover_image: https://direct_url_to_image.jpg
---
[This article was originaly posted on Jekayode.com](https://jekayode.com/5-non-technical-ways-to-protect-your-wordpress-website-from-hackers/).

WordPress is the simplest, most popular way to create your own website or blog. In fact, WordPress powers over 37% of all the websites on the Internet.

WordPress is a popular target amongst hackers and often has the notion of not being secure. But there are basic things you do to protect your website even without touching code or complicated plugins.

Here are 5 of those DIY steps you can take to protect your WordPress website:

1. Avoid ‘admin’ username During your WordPress installation, you should never choose “admin” as the username for your main administrator account. If you want to increase your website’s security, always personalize your username.

2. User strong passwords Always remember to use a strong password, even though it can sometimes be difficult to manage a long list of different passwords, it is absolutely necessary to do so.

3. Add Two Factor Authentication No matter how secure your password is there is always a risk of someone discovering it. Two-factor authentication involves a two-step process in which you need not only your password to login but a second method such as SMS, phone call or OTP.

4. Regular updates Keeping your WordPress up to date is a good practice to keeping your website secure. This includes WordPress core, plugins, and themes.

5. Regular Backups Backups are like the insurance policy in case the worst happens. There are quite a number of awesome plugins ready to backup on the cloud such as Amazon S3, Google Cloud Storage, Google Drive, or Dropbox

There are more technical WordPress security hardening methods that I will be sharing in subsequent posts.

Feel free to reach out to me if you have challenges with your WordPress website. I will be glad to take a look.
Run docker image with AWS SSM
Tags: aws, docker, bash, node
Published: 2020-06-30 23:16:41


Have you ever faced with. this situation: Your code works fine in local development but there are errors on staging or production. 

I always try to run the current deployed version via docker in my local machine and see is it works fine and via ssh try to investigate the docker container. 

It would be easy to run your docker image in local, attach a shell to it and see what is happening there just with `docker run --rm -it  -p 8080:8080 ....` 
but it will be complex if you use  **AWS EC2** and **AWS SSM**.

Let me to add some salt on it.  you (your company) use custom deployment tools with temp access to AWS.

 As you know __AWS Secrets Manager__ helps you protect secrets needed to access your applications, services, and IT resources. It is more secure. also you can use your secrets for different apps easily.

the issue is when you want to run your docker image with secrets which you stored in AWS. 

## Solution: 
AWS cli always keep his credential inside the file `$HOME/.aws/credentials`. [read more](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-files.html) 
Even you use custom tools to login or deploy to AWS, this file in your machine keep your credentials. 

This file normally is look like this:
```
[default]
aws_access_key_id=AKIAIOSFODNN7EXAMPLE
aws_secret_access_key=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

[CUSTOM_TEST]
aws_access_key_id=AKIAIOSFODNN7EXAMPLE
aws_secret_access_key=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
```

 You can set the default profile for aws cli by set the Environment variable `AWS_PROFILE`.

By this feature you can run your docker easily, mount your aws credential file to your docker image, and set the `AWS_PROFILE`

```bash
docker run --rm -it   -p 8080:8080/tcp \
-v $HOME/.aws/credentials:/root/.aws/credentials:ro \
--env "NODE_ENV=production" \
--env "AWS_PROFILE=CUSTOM_TEST" \
--env "AWS_DEFAULT_REGION=eu-west-1" \
--dns 8.8.8.8 \
MY_DOCKER_IMAGE:latest
```

Note: I have supposed you are using the amazon linux image, you need to change `-v $HOME/.aws/credentials:/root/.aws/credentials:ro ` based on the your image root.
How to create a load more button in React.
Tags: react, loadmore, button, pagination
Published: 2020-06-30 23:05:22

![load more button in react](https://miro.medium.com/max/1400/1*6-IY3VxltQKu4XDWzCjIFw.gif)

Here's a preview of what we'll be building.

Let's get into it.

# Create a new react project using CRA
`npx create-react-app loadmore`

# Get some sample posts.
- Get them from [here](https://jsonplaceholder.typicode.com/posts)
- Put these posts in a `postsArray.js` file and export them like below.
![posts exported from postsArray.js](https://miro.medium.com/max/1026/1*1hqDpsGS-jlKTIRr8gd1Kg.png)

# Create a component to display posts
- This component will accept a prop called `postsToRender`. We will pass this prop from our `App` component.

```
import React from "react";
const Posts = ({ postsToRender }) => {return (
    <ul>
      {postsToRender.map((post, index) => (
        <li key={index}>
          <strong>{post.id}</strong>
          &nbsp;{post.title}
        </li>
      ))}
    </ul>
  );
};
export default Posts;
```

# App.js. The main bit!
I'll quickly run through what we'll be doing before showing the code.
In App.js, import the posts from postsArray.js.
- create a variable called `postsPerPage` for the number of additional posts to show each time the user clicks the **load more** button.
- Declare a variable called `arrayForHoldingPosts` to hold the posts before we display them.
- create a `load more` button and give it an `onClick` handler called `handleShowMorePosts`
- create the `handleShowMorePosts` function that will run each time the **load more** button is clicked.

Now the code!
```
import React, { useState, useEffect } from "react";

import Posts from "./Posts";
import posts from "./postsArray";
const postsPerPage = 3;
let arrayForHoldingPosts = [];

const App = () => {
  const [postsToShow, setPostsToShow] = useState([]);
  const [next, setNext] = useState(3);

  const loopWithSlice = (start, end) => {
    const slicedPosts = posts.slice(start, end);
    arrayForHoldingPosts = [...arrayForHoldingPosts, ...slicedPosts];
    setPostsToShow(arrayForHoldingPosts);
  };

  useEffect(() => {
    loopWithSlice(0, postsPerPage);
  }, []);

  const handleShowMorePosts = () => {
    loopWithSlice(next, next + postsPerPage);
    setNext(next + postsPerPage);
  };

  return (
    <div>
      <Posts postsToRender={postsToShow} />
      <button onClick={handleShowMorePosts}>Load more</button>
    </div>
  );
};

export default App;

```
If you want to see the App.js code in a cleaner form, check out the [github gist](https://gist.github.com/onedebos/f0f38e566450e10c8099f5fa206fae38).