teleren/devto huggingface dataset:
Deploying your app to AWS S3 with Github Actions 
Tags: aws, cloudresumechallenge, 100daysofcode
Published: 2020-08-01 11:39:52

Wow! Finally I reached this final step which is so cool to do for the #cloudResumeChallenge!

So here, i'll explain how I setup CI/CD using GitHub Actions.

# 1. Introduction

Github Actions are a relatively new feature to Github that has opened up a new facet of product management in addition to version control. One of these features is Continuous Deployment (CI/CD), which was introduced last year into an already crowded market. However, the main advantage I can see to this feature is a single service taking care of all your deployment needs.

In this post, I will outline the steps to setup a basic continuous deployment pipeline with Github Actions to deploy an app to AWS S3. 

# 2. Steps
1. Setup workflow files for staging and production 
2. Add AWS secrets to Github
3. Install a Github Action.
4. Deploy an app to an S3 Bucket.
5. Repeat above steps for cloud resume backend for deploying AWS SAM.

# 3. Setup workflow

Create a workflow with this "Simple workflow" template under "Actions" tab in Github.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tezvxt54qe3fm9gtc5ut.png)

# 3. Add AWS Secrets

We need two main secrets for uploading files to S3 and for SAM. Which is AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. These 2 required for accessing AWS with AWS CLI.

And i have created these for accessing S3 bucket and invalidating CloudFront cache.

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

# 4. Install a Github Action

There are plenty of AWS actions already defined in GitHub Marketplace. You can choose any of them.
I have used this: [Configure AWS Credentials](https://github.com/marketplace/actions/configure-aws-credentials-action-for-github-actions)

# 5. Deploy an app to an S3 Bucket.

On adding following workflow with above code for uploading files to S3, a job will be triggered on any push to master branch.  

`on:
  pull_request:
  push:
    branches:
      - master`

# 6. A Successful Job run.

After a job is successful, your build action will look like below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/naqiiayaa2n5bxovw051.png)

Also, a successful AWS SAM Deploy CI/CD job will look like below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ftrnlliirpbrcdhiyqir.png)

# Next Step.

> Pending: With this all the steps of Cloud Resume Challenge is done.
And I'm gonna write a final blog of my journey experience.

**Thank you for reading! 😊**
Git Goodness
Tags: git, beginners, github
Published: 2020-08-01 11:20:56

Very first we need to download [Git](https://git-scm.com/downloads).
Set up a folder as a Git repository. and follow along ~
#### Basic Git Commands

   1. At a convenient location on your computer, create a folder named git-test.
   2. Open this git-test folder in your favorite editor.
    Add a file named `index.html` to this folder, and add the following HTML code to this file:

```
<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
    </body>
</html>
```

3.Initializing the folder as a Git repository.
     
*Go to the git-test folder in your cmd window/terminal and type the following at the prompt to initialize the folder as a Git repository:*
```
git init
```

4.Checking your Git repository status.

*Type the following at the prompt to check your Git repository's status:*
```
git status
```

5.Adding files to the staging area

*To add files to the staging area of your Git repository, type:*
```
git add .
```
6.Commiting to the Git repository

*To commit the current staging area to your Git repository, type:*
```
git commit -m "first commit"
```

7.Checking the log of Git commits

*To check the log of the commits to your Git repository, type:*
```
git log --oneline
```
*Now, modify the `index.html` file as follows:*
```
<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
        <p>This is a paragraph</p>
    </body>
</html>
```
*Add a sub-folder named templates to your git-test folder, and then add a file named `test.html` to the templates folder. Then set the contents of this file to be the same as the `index.html` file above.*
  * Then check the status and add all the files to the staging area.
  * Then do the second commit to your repository
  * Now, modify the `index.html` file as follows:
```
<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
        <p>This is a paragraph</p>
        <p>This is a second paragraph</p>
    </body>
</html>
```
 * Now add the modified `index.html` file to the staging area and then do a third commit.

8.Checking out a file from an earlier commit

 *To check out the `index.html` from the second commit, find the number of the second commit using the git log, and then type the following at the prompt:*
```
git checkout <second commit's number> index.html
```


9.Resetting the Git repository

 *To discard the effect of the previous operation and restore `index.html` to its state at the end of the third commit, type:*
```
git reset HEAD index.html
```

*Then type the following at the prompt:*
```
git checkout -- index.html
```

10.You can also use git reset to reset the staging area to the last commit without disturbing the working directory.

Conclusion
>This is the end of some basic Git commands. Experiment with these and more git commands...KEEP EXPERIMENTING.
Afraid of Java?
Tags: java, sql, beginners
Published: 2020-08-01 10:52:58

Afraid of JAVA?

For those afraid to dip their toes into java, consider learning both Java and SQL together. This way u can do more with the code up front and also acquire two valuable skills. Nobody says u need to know ALL of Java. Just learn a few basics like

1. Http
2. Request and response
3. JDBC
4. Import Java.sql
5. Servlet API and Tomcat

Read my blog at https://blog.javasqlweb.org/learn-java-getting-off-the-starting-blocks.html

and

Check out my FREE Java and SQL tutorials for beginners at https://javasqlweb.org
Survey form
Tags: webdev, css, html, beginners
Published: 2020-08-01 10:42:22

Hi there, This is RoughKing presenting my first developed survey form. This is form for your favorite learning courses from various websites like Udemy, freeCodeCamp and much more. I am also a learner. Check out this form on. Go to editor view to find out code, Drop a love and Comment. Follow Rough-King at Codepen https://codepen.io/roughking for more and on dev-community as well. {% codepen https://codepen.io/roughking/pen/abdrWrZ %}
A curated list of all the free services in all aspects of Information Technology.
Published: 2020-08-01 10:21:11

Hey guys whats up, today I'm gonna be sharing with you the ultimate website that contains all the free services, apis, cloud services, tools, and everything you'll ever need and so much more. I just found it out today, and can't wait to share it with you guys.

# Here it is: [free-for.dev](free-for.dev) 

A lot of us in the IT field is in a constant hunt for free and better services & tools. We all have some great ideas, and we all love to prototype it as soon as possible, without spending a lot of money upfront, and before we can realize our idea's full potential, it may turn out to be great, or a disaster, who knows. So for all of those who are like me, and would like to try out our ideas before spending a shit load of money on it, are always in a constant hunt for free and better tools and services. So, this is like the only website you'll ever need to find the right tools and services for your next project.
It is categorically organized, provides a brief description about it, and link to find it and learn more about it,

Hope you like it. Enjoy :)
HTML & CSS Learning Fatigue
Tags: beginners, html, css, webdev
Published: 2020-08-01 10:16:01

So  I have been caught up in the tutorial-learning loop on web dev for a while now. I want to bring out of it by using what I already know (in HTML & CSS) to build projects or challenges.
I know by doing this I will build confidence and be able to break out of this cycle. Please I recommendations and sites to help me get my hands "dirty".

Secondly, I noticed that the natural path of learning web dev is HTML > CSS > Javascript.

Is it possible to replace Javascript with Python ?

thanks
Sum square difference - Project Euler Solution
Tags: python, challenge, computerscience, algorithms
Published: 2020-08-01 09:41:14

![Sum square difference - Project Euler Solution](https://dev-to-uploads.s3.amazonaws.com/i/hq83e8cdperkcz7wjet5.jpg)

### Topic: [Sum square difference](https://projecteuler.net/problem=6)

### Problem Statement:
> The sum of the squares of the first ten natural numbers is,
```
1^2 + 2^2 + ... + 10^2 = 385
```
The square of the sum of the first ten natural numbers is,
```
(1+2+3...+10)^2 = 55^2 = 3025
```
Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is .
```
3025 - 385 = 2640
```
Find the difference between the sum of the squares of the first one hundred natural numbers and the square of the sum.

You can find the original question here -> [Project Euler](https://projecteuler.net/problem=6)

{% post codeperfectplus/largest-palindrome-product-project-euler-solution-53gd %}

### Sum square difference - Project Euler Solution in python

```python
def difference(n):
    """
        This program will return difference between the square of sum and sum of the square. 
    """
    sumOfSquare = 0
    squareOfSum = 0
    for i in range(n+1):
        squareOfSum += i  
        sumOfSquare += i ** 2
    return squareOfSum ** 2 - sumOfSquare
        
if __name__ == "__main__":
    print(difference(100))
```

Share Your Solutions for Sum square difference.
How does database indexing of Arrays work?
Tags: database, explainlikeimfive
Published: 2020-08-01 09:36:16

This is without doubt, one of the reasons I chose NoSQL, e.g. MongoDB; but can it apply to RDBMS? Will it be simple / intuitive to maintain?

<small>Usually one-to-many relationships, right? But I believe, 1. no relationship might be faster than one relationship; 2. what about maintenance and readability?</small> 

This only apply to easily indexable arrays, like Number or String, though.
What It is and What its not!
Tags: showdev, stupid, ideas, javascript
Published: 2020-08-01 09:22:09

---
title: What It is and What its not!
published: true
description: 
tags: #showdev #stupid #ideas #javascript
//cover_image: https://direct_url_to_image.jpg
---

Meanwhile at Stupid Ideas with Reaper.

We have another crappy idea. A vote based app for popular misconceptions of definitions that people have over job positions.

You'd have seen a lot of people post about , what *some postition* is and what it's not. 

Example

Software Developer 
 **IS**
 - writes code for the computer to understand.
 **IS NOT**
 - someone who can fix your refrigerator.

So yeah, 
we now have an app for posting those crappy definitions that job posters don't really care about no matter how much you explain them. 

Anyway.

[App](https://itsnot.reaper.im)

I should start an actual streaming of these ideas with me coding them live. Let me know if anyone would like to watch that.
Window resize observer based on RxJS combineLatest operator
Tags: rxjs, combinelatest, windowresize
Published: 2020-08-01 09:19:37

To better understand how `rxjs/combineLatest` works, I'm going to create a simple window resize observer function.

Some requirements:

The function should accept a `callback` that will be called whenever the window is resized. 
```javascript
function createWindowResizeObserver(callback) {
  ...
}
```
The `callback` function will takes an object with dimensions:
```javascript
function resizeCallback(dimensions) {
  const { width, height } = dimensions;
  console.log({ width, height });
}
```
Finally, `createWindowResizeObserver` must return an `unsubscribe` function to unsubscribe from these events later,  if necessary.
```javascript
const unsubscribe = createWindowResizeObserver(resizeCallback);

// unsubscribe later if necessary 
unsubscribe();
```

Let's implement this!

First, create a stream of window width and height changes

```javascript
import { fromEvent } from "rxjs";
import { map } from "rxjs/operators";

// Create a stream from `window` resize events
// and map it to get width of window
const width = fromEvent(window, "resize").pipe(
  map(() => window.innerWidth)
);

// Do the same with height
const height = fromEvent(window, "resize").pipe(
  map(() => window.innerHeight)
);
```

Then create a dimensions stream.
To do that I need to `combine` each change of width with `latest` value of height and vice versa :)
And then map result to the required shape

```javascript
// add combineLatest to imports
import { fromEvent, combineLatest } from "rxjs";

// combine here
const combined = combineLatest(width, height);
// `combined` produces an array of width and height values
const dimensions = combined.pipe(
  map(([width, height]) => ({ width, height }))
);
```

It will be good to add little [throttling](https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf) to prevent high cpu utilization

```javascript
import { map, throttleTime } from "rxjs/operators";

const dimensions = combined.pipe(
  throttleTime(100),
  map(([width, height]) => ({ width, height }))
);
```

To subscribe on dimensions stream use `subscribe` method
```javascript
// subscribe method returns the unsubscribe function
const unsubscribe = dimensions.subscribe(callback);
```

Finally wrap up all stuff to single function:

```javascript
import { fromEvent, combineLatest } from "rxjs";
import { map, throttleTime } from "rxjs/operators";

function createWindowResizeObserver(callback) {
  const width = fromEvent(window, "resize").pipe(
    map(() => window.innerWidth)
  );

  const height = fromEvent(window, "resize").pipe(
    map(() => window.innerHeight)
  );

  const combined = combineLatest(width, height);

  const dimensions = combined.pipe(
    throttleTime(100),
    map(([width, height]) => ({ width, height }))
  );

  const unsubscribe = dimensions.subscribe(callback);

  return unsubscribe;
}
```

And that's all!
Let's check the result 
> Open the Console and change preview window with or height

{% stackblitz rxjs-window-resize-observer %}
How do you track the series and movies you watch?
Tags: webdev, discuss, watercooler
Published: 2020-08-01 08:46:28

I have been using [trakt.tv](https://trakt.tv/) you can automatically track what you're watching. Find where to watch TV & movies and discover what's hot. Trakt even works with many services such as Kodi, Plex and Netflix among many others. They even have an API that lets you create your own app [trakt api](https://trakt.docs.apiary.io/#)
Data Types In Javascript | Javascript Crash Course
Tags: javascript, codenewbie, tutorial, webdev
Published: 2020-08-01 08:39:46

In this video, we will learn about the data types. We will learn about String, Number, Boolean, Null, and Undefined data types.

Hope you enjoy this video.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Smallest multiple - Project Euler Solution
Tags: challenge, python, computerscience, algorithms
Published: 2020-08-01 08:16:18

![Smallest multiple - Project Euler Solution](https://dev-to-uploads.s3.amazonaws.com/i/qziduy0wqq8urxo4u3l0.jpg)

### Topic: [Smallest multiple](https://projecteuler.net/problem=5)

### Problem Statement: 

> 2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.

What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20?

You can find the original question here -> [Project Euler](https://projecteuler.net/problem=5)

{% post codeperfectplus/largest-palindrome-product-project-euler-solution-53gd %}

### Smallest multiple - Project Euler Solution in python

```python
from math import gcd
def lcm(a,b):
    "Calculate the lowest common multiple of two integers a and b"
    return a*b//gcd(a,b)

from functools import reduce

result = reduce(lcm, range(1,11))
print(result)
```

Share Your Solutions for [smallest multiple](https://projecteuler.net/problem=5)
function in an array , how to declare and access?
Tags: javascript, array, function, console
Published: 2020-08-01 08:15:38

var arr = [ function fun(){ console.log("this is a funtion ");} ];
console.log(arr[0]() ); 
output:                                   
> "this is a funtion "
> undefined                        
To get the output "this is a function", how to access array.
And do not appear undefined in output
How to import CSS in React.js component?
Tags: react, html, css, beginners
Published: 2020-08-01 07:52:46

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-import-css-in-react-js-component

---

{% youtube DWv1BT_mgb4 %}

Now I’ll show you how to import CSS in react.js components, by the two most easy, and kinda popular ways.

When we build apps in React.js in some cases, we can use CSS-frameworks like bootstrap, Bulma, or something popular now.

Next, we can build a layout like puzzles and focus only on things like Javascript or Typescript logic.

But sometimes, we need to create our own styling even I’d say that can happen kind of often, and how can we solve that?

There are a few methods of including CSS into the React.js components, some of them are more complicated, some less, but all of them have pros and cons.

Anyway, today I’ll show you one of them, the easiest one, and the quickest to implement.

I like to use that method, especially in the bigger projects, when we need to have all the styles sorted and put into the separate folders.

We can import the sass file into our files by using a relative import path.

With that method, we can create a directory “styles” inside our project directory, sort all of the style files by feature, function or how we want, and import the file into our component directly.

It helps us sort all the helpers, variables, and necessary style up to files, where it’s needed, but still can be kept in one place.

```js
import './styles.scss';
```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
AR TRYON Platform – Shoe Tryon
Tags: shoetryon, artryon, shoetryonplatform, queppelin
Published: 2020-08-01 07:37:21

Going to a physical store for shoe shopping is a hassle. You have to make a visit to your nearby local mall or shopping center, find a shoe store, and then you have to track someone down to bring out different sizes, different colors, different designs. This is a difficult situation in this pandemic situation. However, thanks to AR Shoe TRYON platform by Queppelin and augmented reality, you can now try on multiple shoes, see how they look on, and then buy them right away from the comfort of your home! Learn More: https://www.queppelin.com/ar-shoe-try-on-platform/
What is a load balancer
Tags: devops, aws, node
Published: 2020-08-01 07:35:32

Load balancer is a industry standard now in software server architectures. In current generation systems atleast which I was building. There is increasing need to keep the servers reliable and with 24*7 available. This is where load balancers come to place. As the name suggests a loadbalancer is used balance the server load.

# Traditional server system
Consider you are running a server in production and now your client has 2 customer using the server. Soon its good times and number of customers increase. Then the server load will increase. This might cause the server to go down.
Forcing you to restart and fix the issue. Thus their will be down time and that marks your end. Escalations, mails, late nights, etc... Clearly this is not a good structure.

![Alt Traditional server](https://dev-to-uploads.s3.amazonaws.com/i/9j1apnj2ldfosj3vc811.png)

# Server system with load balancer
* Instead of a single large server. We will have to create two medium capacity servers that are capable of running the server.
* Create a load balancer
* Attach the servers to the load balancer

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

# How the load balancer works
Just as a traffic police officer the load balancer will be the first layer that receives the server request. Then it will direct to the server. In background the load balancer will be monitoring the server to check if its up by hitting any API in your server. If the API responds with 200 its fine else it will consider the server is down.

Therefore when the one server is busy like 100% utilisation or is its down. Then it will send the request to server 2 automatically. This is a minor setting but a major improvement on server availability. Of-course there are few disadvantages,

**Disadvantages**
1. You will have to run application in multiple servers.
2. You cannot use local server storage. Since there are two servers and you will never know which server the request will land.
3. Logs will be separate in both of the servers.

Personally i avoid using local system but in-case i need to use, i will go with S3 or other cache services like Redis, elastic cache, etc. There is a ton of info on how to do in AWS below are the reference links.

# Reference Links
Create AWS Load balancer: [https://docs.aws.amazon.com/elasticloadbalancing/latest/classic/elb-create-https-ssl-load-balancer.html](https://docs.aws.amazon.com/elasticloadbalancing/latest/classic/elb-create-https-ssl-load-balancer.html)
Largest palindrome product - Project Euler Solution
Tags: challenge, python, computerscience, algorithms
Published: 2020-08-01 07:10:34

![Largest palindrome product - Project Euler Solution](https://dev-to-uploads.s3.amazonaws.com/i/f6vik4xyfgwlkmsu2ovv.jpg)

## Topic: [Largest palindrome product](https://projecteuler.net/problem=4)

## Problem Statement: 

> A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99.

Find the largest palindrome made from the product of two 3-digit numbers.

You can find the original question here -> [Project Euler](https://projecteuler.net/problem=4)

{% post codeperfectplus/sieve-of-eratosthenes-1f93 %}

### Largest palindrome product - Project Euler Solution

```python
def largestPalindrome(bot, top):
    z = 0
    for i in range(top, bot, -1):
        for j in range(top, bot, -1):
            if isPalindrome(i*j):                
                if i * j > z:
                    z = i * j
    return z
    
def isPalindrome(num):
    return str(num) == str(num)[::-1]

print(largestPalindrome(100,999))
```

Share Your Solutions for the [Largest palindrome product](https://projecteuler.net/problem=4)