teleren/devto huggingface dataset:
Deploy Flask App on Kubernetes - 1
Tags: python, docker, kubernetes
Published: 2020-08-03 09:12:49

## Introduction
This is part one of two part series: 
Here, I will discuss about creating simple flask app, containerizing it and pushing it to image repository [DockerHub](https://hub.docker.com/).
### Prerequisites
- You have [docker installed] (https://docs.docker.com/get-docker/)
- Familiarity with Docker commands and Dockerfile. You can go through [this blog](https://towardsdatascience.com/15-docker-commands-you-should-know-970ea5203421) 

### Create Flask APP

Lets create `requirements.txt` files for our app.
```txt
Flask==1.1.2
gunicorn==20.0.4
```

Flask comes with one development server, but we will use production-ready server, like [gunicorn](https://gunicorn.org/).

Create `src` folder and `app.py` file inside that. Our App will have only two endpoints:

- `/` -- returns welcome message.  
- `/names` -- lists countries I visited :P  

```python
from flask import Flask, jsonify
app = Flask(__name__)
from flask import Flask, jsonify
app = Flask(__name__)

country_list = [
    'Nepal',
    'India',
    'Germany',
    'Netherlands'
]

@app.route('/')
def index():
    response_dict = {
        "message": "Welcome to FlaskApp"
    }
    return jsonify(response_dict)

@app.route('/names')
def countries():
    country_dict = {
        'countries': country_list,
        'total': len(country_list)
    }
    return jsonify(country_dict)


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8083)
```

#### Run your app in debug mode
`python src/app.py`

#### Run your app from gunicorn
`gunicorn --chdir src app:app -w 2 -bind 0.0.0.0:8083` 

Lets create `deploy.sh`, we will execute this directly
```sh
#! /bin/sh
gunicorn --chdir src app:app -w 2 -b 0.0.0.0:8083
```
(Make it executable: `chmod +x deploy.sh`)

You can browse http://localhost:8083/
![Output](https://dev-to-uploads.s3.amazonaws.com/i/yk539szsvc36upouasjg.png)


### Building Docker Image
Lets write `Dockerfile` to create docker image of our app.
Here I am going with `python-3.7-slim-buster`. 

This is one of light weight and recommended images to use. 
[Follow this](https://pythonspeed.com/articles/base-image-python-docker-images/) if you want to learn more about other python images. 
```Dockerfile
FROM python:3.7-slim-buster

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY . /app

WORKDIR /app

ENTRYPOINT [ "./deploy.sh" ]
```
Now run following command to build image
>`docker build -t simple-flask-app .`
This will take some time depending on your network speed. Once completed you will see success message like this
#### Run your docker image
>`docker run -p 8888:8083 simple-flask-app`
If you browse http://localhost:8888/names, you will see following output.

![Curl Output](https://dev-to-uploads.s3.amazonaws.com/i/64ze60slkaulxoexlvo1.png)


Now Push your image to DockerHub using following commands
>`$ docker tag simple-flask-app <dokcer-hub-account>/simple-flask-app`

>`$ docker push <dokcer-hub-account>/simple-flask-app`


If you are not logged in, log in first.

>`$ docker login`
What does the low-code platform bring?
Tags: lowcodeplatform
Published: 2020-08-03 09:12:28

No-code and low-code development methods are becoming more and more popular in technology and other fields. According to a Forrester survey, as early as 2018, 23% of developers worldwide are already using team app builder, and another 22% plan to use it next year. Why should companies invest heavily in no-code and low-code solutions? Because these platforms have the potential to turn more employees into mature developers.

What is a low-code platform?
The low-code platform does not require manual programming or requires only a small amount of programming to realize application development. These platforms use visual modeling instead of coding, and users can drag and drop components into logical sequences to create powerful and even complex applications.

Eliminating the need to use manual programming to complete the need to solve two main problems from the production process:
Manual coding is very time-consuming and complicated
There is a severe shortage of qualified developers to meet the current demand for new software.
Depending on the platform, using low code for development can make application development much faster than coding.
 https://www.yeeflow.com/microsoft-teams
The benefits of teams app builder-a low code platform
Tags: lowcodeplatform
Published: 2020-08-03 09:09:02

In order to achieve digital transformation, companies are empowering employees to develop applications through low-code platforms.
 We generally believe that it must be a good thing to be able to code in a modern world that relies on technology. But do business teams and even software developers really need to write code to build applications?
 
Low-code development platforms have evolved very complex and gradually become popular in the market. With a low-code platform, you can build applications with little or no code. Business teams who know what they want can also make the applications they need by themselves, yeeflow is one of the famous teams app builder. For IT personnel, it does not need to spend months learning to code, so they can concentrate To complete user needs and more creative functional design.
 
In the short history of technology, the democratization of software development will be an important node in software development. In the latest IT revolution, low-code and citizen developer have become the two main driving factors.
https://www.yeeflow.com/microsoft-teams
GSAP ScrollTrigger + Lottie — scroll controlled animation
Tags: codepen, lottie, gsap, scrolltrigger
Published: 2020-08-03 08:43:44

---
title: GSAP ScrollTrigger + Lottie — scroll controlled animation
published: true
tags: codepen, lottie, GSAP, scrollTrigger
---

Just a simple example of controlling AE/lottie exported animation with new GSAP scrollTrigger.

Animation credits: [Alimograph](https://lottiefiles.com/alimograph)

Live example: [Codepen — GSAP ScrollTrigger + Lottie] (https://codepen.iohttps://codepen.io/karlovidek/pen/oNxvxRg)
Evolving WFH Setup - Now on GitHub!
Tags: wfh, office, workstations, remote
Published: 2020-08-03 08:26:12

Back in March, I posted for the first time [my home office setup](https://dev.to/n3wt0n/my-home-office-revealed-1l42)

Since then, many things have changed... and many will still change in the future.

For this reason, given the ever changing nature of my WFH setup, I've decided to create a [GitHub repo](https://github.com/n3wt0n/work-from-home-setup) to host the information.

I've chosen GitHub because it is much easier to keep it __always up-to-date__ and also because it will be much easier seeing the changes overtime, given the Version Control behind the scenes.

### This is my current setup:

![Office](https://dev-to-uploads.s3.amazonaws.com/i/u7yzm246vvnd5oq1v098.jpg)

__CHECK THE UPDATED INFO AT https://github.com/n3wt0n/work-from-home-setup__
[CP] : August Leetcode challenge solutions 🔥
Tags: codenewbie, challenge, java, showdev
Published: 2020-08-03 08:05:56

This **leetcode** august challenge is beginner-friendly & consists of 31 daily problems over the month of August. A problem is added here each day, and you have 24 hours to make a valid submission for it in order to be eligible for rewards.

For more information, check [this](https://leetcode.com/discuss/general-discussion/655704/LeetCode-Polo-Shirt-August-LeetCoding-Challenge!) post!

# Challenge & Solutions link 🔥

![Leetcode August Solutions](https://dev-to-uploads.s3.amazonaws.com/i/ijelsp6h5ed2bn6amc67.png)

[Leetcode challenge page](https://leetcode.com/explore/challenge/card/august-leetcoding-challenge/) ➡️ [Solutions](https://github.com/abhisheksurve45/leetcode-aug-2020) including premium problems 🔓


More such challenges can be found [here](https://github.com/abhisheksurve45)!


---

Thanks for reading!

Visit my github profile : [Github](https://github.com/abhisheksurve45)
Find me on Linkedin : [LinkedIn](https://www.linkedin.com/in/abhishekpsurve/)
Visit my personal page : [abhisheksurve](https://abhisheksurve.netlify.app/)
What are your fav ES6 features?
Tags: webdev, discuss, javascript
Published: 2020-08-03 08:01:56

---
title: What are your fav ES6 features?
published: true
description: 
tags: webdev, discuss, javascript
cover_image: https://i.morioh.com/2020/03/21/4c2be688efe4.jpg
---
Some of JavaScript ES6 features include: 

🔸 const and let
🔸 arrow functions
🔸 template literals
🔸 default params
🔸 destructuring
🔸 import and export
🔸 promises
🔸 rest & spread
🔸 extends keyword
🔸 classes

Which ones are your favorite?
Which ones do you use the most?
Animated Social media icons🤳
Tags: codepen, html, css, beginners
Published: 2020-08-03 07:50:30

Hello 👋, my dear Dev friends hope you all doing well and Happy [Raksha Bandhan](https://g.co/kgs/h87xVj). Today in this dev post you will learn how to make amazing Social media icons with animated effect on hover. 🛫

I have just made this small web section in 🛫⛵ [codepen](https://codepen.io/atulcodex/) so you can access my entire code and make some changes according to your skill.


{% codepen https://codepen.io/atulcodex/pen/MWygeOd %}
How to use firebase with ReactJS?
Tags: react, beginners, help, firebase
Published: 2020-08-03 07:49:50

Actually I am making a todo app by following a tutorial.
And for the backend firebase is used, but while setting up firebase I got stuck at this point. This is the error. (when I ran command firebase deploy)
>>> Error: Cloud Functions deployment requires the pay-as-you-go (Blaze) billing plan. 
So I searched on net and found out that for node.js10+ versions firebase doesn't let you use it for free.
Can anybody please help me with this?
Object Oriented Programming using JAVA
Published: 2020-08-03 07:35:22

Hey Students I think you all are doing well.
In this lockdown condiation you all are learning and exploring new techonology. We are here to help you.
You can take our Object Oriented Programming using JAVA course and can learn Core java and Object Oriented Programming concept FREE OF COST.
We also provide you an online verified Certificate after completion of this course.
This Course Covers this topics :
Material Includes -:
• Java Basics: Variables, Operators, etc.
• Conditional Statements and Loops
• Arrays
• Classes and Objects
• Encapsulation, Polymorphism, and Inheritance
• Abstract Classes and Interfaces
• Anonymous and Inner Classes
• Exception Handling
• Lambda Expression
• Lists
• HashMaps
• Sets
• Threads
• And Much More !
So don't wait and waste time. Enroll and start the course and learn a new technology.
Course Link : https://uaceit.com/courses/learn-oops-with-java/
Thank You.
How to Deploy your website in 5 minutes
Tags: javascript, webdev, deploy, tutorial
Published: 2020-08-03 07:22:24

If you are looking for a quick and easy way to deploy your project onto the internet with a personalised free link, look no further!

Deploying—or pushing code to a server—is a very important part of a developer’s daily responsibilities. Knowing how to deploy correctly is crucial.
In this video, I  show you how to deploy using the Hostman platform, in under 5 minutes, with a step by step visual guide.

Here are the relevant link for this weeks video:
UPDATE: Hostman have kindly offered to $50 worth of free credits on Hostman to each and every one of you! Please visit:
https://bit.ly/hostman

Hope you enjoyed this tutorial! Please do Like and Subscribe so I know you are enjoying it! :)

{% youtube sCPGfcQrdfc %}
GitHub Profile README: A Different Perspective
Tags: github, githubprofile, readme
Published: 2020-08-03 07:16:13

So you have heard about **Github Profile README** (It's a new feature github added recently, you might wanna google it if you don't know what I am talking about). I have come across couple of posts and articles on how to create a great README for github profile. They are great at explaning how markdown works and also in making a great profile. But is this only the way to use it? I mean there already are many platforms for your profile (LinkedIn, Twitter, Instagram and many more) right? Of course these platform might not seem as much for techies as github is, But you could also host your profile as a static website with github-pages for free. And yes, github-pages supports markdown too!! With a bit of javaScript you could also make your portfolio much more dynamic. The link to your personal portfolio can be place just below you display picture, what a perfect fit!

🤔 (Me): "Sooo what could this README possibly used for???"

This feature is available for all the users. So the README must be personal to a particular user...?

Me: Opens a web browser and starts searching for user profiles. 

This guy has a good profile. Ten repos! not bad. 
Wow! Thirty repos 😲!! This girl is amazing! Oh wait, there are many forked repos too without any contributions. 

(Me): Uses github search filters to display only the non forked repos.

Now that we have filtered out the irrelavant repos using <a href="https://docs.github.com/en/github/searching-for-information-on-github/searching-issues-and-pull-requests">github search filters</a>, we still need to go open their repositories and go through the README file to literally figure out what this users is actually into. This is where **Github Profile README** can be usefull. It can act as a index for your repositories.

<a href="https://github.com/sauravshah31/"><img src="https://dev-to-uploads.s3.amazonaws.com/i/6a2jrjaa7atx0qmenffb.jpeg" alt="My Github Profile README"></a>

You could use the README to list out your favourite contributions and with a link to the repository alongside a brief about that repo, you could make a useful index for listing out your open source achievements. *Rather than telling people who you are, listing out what you have done is a great way to showcase your skills*.

Have a look at <a href="https://github.com/sauravshah31/">my github profile</a> (I am kinda novice). You can also keep track of how many users visited your github profile. Have a look at <a href="https://hitcounter.pythonanywhere.com/">this hitcounter</a> if you want the counting thing. It bascally works by incrementing a count in the database whenever a page requests for an image, and then sends back the corresponding image for that count.

**Cheers!**
JavaScript Array methods
Tags: javascript, beginners, tutorial
Published: 2020-08-03 07:09:57

In this post, we will learn some of the arrays methods available in JavaScript.

### **1. Array.sort()**
This method sorts the items of the array. It takes an optional `compareFunction` in which you can define your own criteria for sorting.

**Syntax**
```
array.sort(compareFunction)
```
**Example**
```javascript
var numbers = [3,6,1,0,9];
console.log(numbers.sort()); // [0,1,3,6,9]
```
Using `compareFunction` to sort in descending order.
```javascript
var numbers = [3,6,1,0,9];
console.log(numbers.sort((a, b) => (a > b ? -1 : 1))); // [9,6,3,1,0]
```

### **2. Array.slice()**
This method used to get the array of elements from a given position to a given position in an array. Both parameters are optional in this function.

**Syntax**
```
array.slice(start, end)
```
**Example**
```javascript
var numbers = [1,2,3,4,5];
console.log(numbers.slice(2,4)); // [3,4]

console.log(numbers.slice(3)); // [4,5]
```

### **3. Array.filter()**
The `filter()` method in javascript is used to filter the elements present in the array based on the condition. It takes a mandatory function as an argument in which we define our filtering criteria.
 
**Syntax**
```
array.filter(function(element) { return condition: })
```

**Example**
```javascript
var numbers = [1,2,3,4,5];

console.log(numbers.filter((element) => element % 2 == 0)); //[2,4]
```
In the above example, the filter function returns only even numbers.

### **4. Array.reverse()**
The `reverse()` function in javascript reverses the order of elements in an array.

**Syntax**
```
array.reverse()
```

**Example**
```javascript
var cars = ["Audi", "Ford", "BMW"];
console.log(cars.reverse()); // ["BMW", "Ford", "Audi"]
```

### **5. Array.includes()**
This method is used to check whether the array contains an element or not. It returns `true` if the element exists in the array and `false` otherwise.

**Syntax**
```
array.includes(element, start);
```
The `start` is an optional argument, it defines at which index should the searching should starts.

**Example** 
```javascript
var cars = ["Audi", "Ford", "BMW"];

console.log(cars.includes("Tesla")); // false
```

### **6. Array.concat()**

This method is used to join two or more arrays into a single array.

**Syntax**
```
array1.concat(array2, array3,....arrayN);
```
**Example**
```javascript
var cars = ["Audi", "Tesla", "BMW"];
var numbers = [1,2,3];

console.log(cars.concat(numbers)); // ["Audi", "Tesla", "BMW", 1, 2, 3]
```

## Bonus
**Array.prototype constructor**

It allows us to add new **properties** and **methods** to the **Array** Object.

**Syntax**
```javascript
Array.prototype.yourProperty = value;

Array.prototype.yourMethod = function () {
    console.log(this); // this refers to the array
};
```

In this post, I showed you some of the array methods. If you want to learn about more javascript array functions consider watching **[this](https://www.youtube.com/playlist?list=PLgBH1CvjOA62PBFIDq55-S6Beivje30A2)** series of videos by [Florin Pop](https://www.florin-pop.com/). In this series, he has explained about 24 javascript array methods.
Docker + bash : This tip can save your time ! ⏰
Tags: docker, bash, beginners
Published: 2020-08-03 07:05:45

Today, I'm going to give you a tip on an inattention error with docker that cost me few minutes of my time!

*This advice is intended for beginners with docker.*

## Introduction

There are quite a few kinds of docker images, we'll take the [**ruby**](https://hub.docker.com/_/ruby) image as an example.
As you can see, there are different types of images available: buster, slim, alpine, stretch, ...

Some of these images are based on particular distributions, much lighter (alpine), others come with larger OS & dependencies.

To package and deploy my application, I chose to use an alpine image. This image has minimum dependencies & pre-installed packages, and therefore ideal for deployment.

## The problem

When you create your dockerfile, you have the option of using the `ENTRYPOINT` &` CMD` directives at the end of your file. These directives allow you to execute commands and to call scripts that you could have previously created.

If you are used to using bash to execute your script, you must have written the following line in your script file header: `# /bin/bash`.
This tells the terminal (inside docker) to use `bash` to run this script.

```bash
# /bin/bash

echo "test"
```

> When you launch docker with the dockerfile, it might doing nothing: no script starts, leaving you without an error message. 😨

## The solution

As said before, the alpine images are very light and do not embed superfluous dependencies. You must either install `bash` using the `RUN` directive in your dockerfile:

```bash
  RUN apk add --no-cache bash
```

Either change your script to make it compatible with the `sh` shell:

```bash
# / bin / sh

echo "test"
```

Hope I have been clear on how to fix this. 
I wish you all a happy coding ! 🐳 ✨
Understanding Docker: part 1 – Retrieve & Pull images
Tags: docker, devops, beginners, cloud
Published: 2020-08-03 06:59:08

---
title: Understanding Docker: part 1 – Retrieve & Pull images
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z6llfvmxtpv00khiquf8.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and others technologies like Kubernetes and Istio).

We start the serie of Docker Sketchnotes with a focus about retrieve and pull images.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z6llfvmxtpv00khiquf8.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ozo0fzb0iagsfibe8bb2.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jnqm3l3dizmhljy4gwh8.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/axn7iahalxqibnpaxc7a.jpg)

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
One line - Dark Mode using CSS
Tags: beginners, css, webdev, tutorial
Published: 2020-08-03 06:57:04

This is an absolute no-brainer method of converting an already developed website to support dark mode.

Without further ado let's get into it! 👾

Consider this news application for example
<br />
![News Peek Light](https://dev-to-uploads.s3.amazonaws.com/i/coyfa4pz914ota8e69wn.PNG)

Now add the magic CSS
```css
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}
```

Voila! you are done ✌

Dark mode achieved
<br />
![News Peek Dark](https://dev-to-uploads.s3.amazonaws.com/i/mqqnwcntuupp7tjsyyjw.PNG)

## Explanation

Now let's try and understand what is going on under the hood. 

The `filter` CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. (Reference: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter))

For this dark mode, we would be using two filters namely `invert` and `hue-rotate`

**invert** filter helps to invert the color scheme of the application. So, black becomes white and white becomes black and similarly for all the colors.

**hue-rotate** filter helps us with all the other colors that are not black and white. Rotating Hue by 180 degrees, we make sure the color theme of the application does not change but just attenuate the colors of it.
<br />
![comparison](https://dev-to-uploads.s3.amazonaws.com/i/9map1y1hrnuxf8on1cxm.png)
<br />
The only catch with this method is, it will also invert all the images in your application. So we will add the same rule to all images to reverse the effect.

```css
html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}
```

and we will also add a transition to the HTML element to make sure the transition does not become flashy!

```css
html {
    transition: color 300ms, background-color 300ms;
}
```
<br />
Result:
![Dark Mode Example](https://dev-to-uploads.s3.amazonaws.com/i/bz8sbl5x4bl4wclbi68z.gif)
<br />
There we have our Dark mode implemented. Great job guys!

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞
<br />
[<img src="https://cdn.buymeacoffee.com/buttons/lato-orange.png" alt="Buy Me A Coffee" height="51px" width="217px">](https://www.buymeacoffee.com/akhilarjun)
<br />
![Well done](https://media1.giphy.com/media/l4pTii07Gypi3GFPy/giphy.gif)