teleren/devto huggingface dataset:
Deploy a NLP Machine Learning model and app to an AWS EKS Cluster via AWS Codepipeline-Yelp Search App Part 2
Tags: aws, devops, kubernetes, python
Published: 2021-06-20 20:22:32

This is the second part of the post series which you can find <a href="https://amlanscloud.com/yelpseacrhapp/" target="_blank">Here</a>. In the last post I described about the app and how it is built. Just to refresh, this is what we have in each of the post:    
-  <b><em>1st Post( old post): </em></b>Overview about the application and about its underlying logic. This will be more about how the app works and the overall architecture of the whole app ecosystem  
- <b><em>2nd Post (This post): </em></b>In this 2nd part I will be discussing how I deployed the app on AWS S3 and AWS EKS (Elastic Kubernetes Service) cluster using Codepipeline  

The limited demo of the app can be found here: <a href="https://yelp-search-app-demo.netlify.app" target="_blank">Here</a>.It has a limited dataset included. Only demo zipcode of 61820 can be searched. For e.g: 61820 pasta.  

For more details: https://amlanscloud.com/yelpseacrhapptwo/
Bubble sort algorithm
Tags: algorithms, computerscience, python, programming
Published: 2021-06-20 20:19:38

## Definition of the bubble sort algorithm
Bubble Sort is a type of **sorting algorithms** that works by comparing each pair of adjacent items and swapping them if they are in the wrong order.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4546jasj1x6rphrpvm7p.jpg)

## Space and Time complexity of bubble sort

| Time complexity | Space complexity |
|-----------------|------------------|
| О(n<sup>2</sup>) | O(1) |

## Bubble sort implementation using python
```python
def BubbleSortAlgorithm(items: list) -> list:
    """
        [name] => Bubble Sort 
        [type] => Sorting algorithms
        [space complexity] => O(1)
        [time complexity]  => O(n^2)
        @params (
            [items] => list
        )
        @return => sorted list
    """
    for i in range(len(items) - 1):
        isSorted = True
        for j in range(len(items) - i - 1):
            # if the number is greater than the adjacent element
            if items[j] > items[j + 1] :
                # swap 
                items[j], items[j + 1] = items[j + 1], items[j]
                isSorted = False
        # if the list is sorted
        if isSorted:
            break
    return items
```


## References and useful resources

+ [https://www.geeksforgeeks.org/python-program-for-bubble-sort/](https://www.geeksforgeeks.org/python-program-for-bubble-sort/)
+ [https://www.techopedia.com/definition/3757/bubble-sort](https://www.techopedia.com/definition/3757/bubble-sort)
+ [https://www.geeksforgeeks.org/bubble-sort/](https://www.geeksforgeeks.org/bubble-sort/)

\#day_8
 Have a great day.
An interesting take on reduce and Object.assign
Tags: javascript
Published: 2021-06-20 20:06:10

In this article [Why using object spread with reduce probably a bad idea](https://prateeksurana.me/blog/why-using-object-spread-with-reduce-bad-idea/) I saw this strange line of code:

```js
someArray.reduce(Object.assign, {})
```

I thought [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) was meant for merging objects. Why the `reduce`? What is going on here??

If I want to test some JavaScript I run `node` in a terminal to create a playfield:

```js
[1, 2, 3].reduce(Object.assign, {})

// output:
{ '0': 1, '1': 2, '2': 3 }
```

Ah, good to know, might be handy sometime!
Get Started with Google Cloud Functions
Tags: serverless, googlecloud, node, redis
Published: 2021-06-20 19:14:23


Google Cloud Functions is the second most popular serverless execution platform. Similar to AWS Lambda it is stateless, namely you need to access external resources to read or write your applications state. In this post, we will introduce Redis as a database for your Google Cloud functions.                  

This tutorial shows how to build a serverless API with Redis on Google Cloud Functions. The API will simply count the page views and show it in JSON format.

See the demo: https://us-central1-functions-317005.cloudfunctions.net/helloGET

See the code: https://github.com/upstash/examples/tree/master/using-google-cloud-functions  

### The Stack
- Serverless compute: Google Cloud Functions (Node.js)
- Serverless data store: Redis via Upstash
- Deployment tool: gcloud



### Prerequisites:
- A GCP account for Google Cloud functions.
- Install [Google Cloud SDK](https://cloud.google.com/sdk/docs/install).
- An Upstash account for Serverless Redis.

### Step 1: Init the Project
- Create a folder, then run `npm init` inside the folder.

### Step 2: Install a Redis Client
Our only dependency is redis client. Install go-redis via `npm install ioredis`

### Step 3: Create a Redis Database
Create a Redis database from Upstash console. **Select the GCP US-Central-1 as the region.** Free tier should be enough. It is pretty straight forward but if you need help, check [getting started](overall/getstarted.md) guide. In the database details page, click the Connect button. You will need the endpoint and password in the next step.
### Step 4: The function Code
Create index.js as below:
``` javascript
var Redis = require("ioredis");

if (typeof client === 'undefined') {
    var client = new Redis("REPLACE_YOUR_UPSTASH_REDIS_URL");
}

exports.helloGET = async(req, res) => {
    let count = await client.incr("counter");
    res.send('Page view:' + count);
};
```
Replace the "REPLACE_YOUR_UPSTASH_REDIS_URL" with your database's ioredis url.

The code simply increments a counter in Redis database and returns its value in json format.
### Step 5: Deployment
Now we are ready to deploy our API. Deploy via:
``` shell
gcloud functions deploy helloGET \
--runtime nodejs14 --trigger-http --allow-unauthenticated
```
You will see the URL of your Cloud Function. Click to the URL to check if it is working properly.

```shell
httpsTrigger:
securityLevel: SECURE_OPTIONAL
url: https://us-central1-functions-317005.cloudfunctions.net/helloGET
```

In case of an issue, you can check the logs of your Cloud Function in the GCP console as below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lugg0enwp7hd4s2094f0.png)
How to reset a default app preference in Samsung One UI 3.1 (Android 11)
Tags: android, oneui, samsung
Published: 2021-06-20 19:04:53

Couldn't find any writeup for this specifically elsewhere, so here's how:

1. Go to `Settings` -> `Apps` -> `Choose default apps` -> `Opening links`
2. In the `Installed apps` list, tap the app you no longer want to be the default for something
3. In the ensuing dialog, tap `Clear defaults`

The above worked on a Samsung Galaxy Tab S7 Wi-Fi.
Wordpress - Move cron jobs to CLI
Tags: wordpress, devops
Published: 2021-06-20 19:04:22

---
title: Wordpress - Move cron jobs to CLI
published: true
description: Move Wordpress cron jobs to CLI improves its performance.
tags: wordpress, devops
canonical_url: https://pplotka.dev/post/wordpres-move-cron-jobs-to-cli/
---
Some time ago we started to observe performance issues in our company’s site built with WordPress. One of the issues we have observed was calling crons in random user requests. It is realized by calling URL `https://yourdomain.com/wp-cron.php`. Although in this file WordPress calls PHP method `fastcgi_finish_request`, which sends a response to the user as soon as possible, the cost of calling sub-requests during the main request is worth acknowledging and improving. There are other drawbacks of this:
* Calling crons in request context means that it is limited, e.g. by php-fpm setting. We often have limited resources (such as memory or time limit) for HTTP requests. 
* What’s worse, calling cron as http request utilizes resource (e.g. php-fpm pools that might be necessary to handle our traffic). 

On the Internet, there are a lot of tips on how to disable making subrequest to call crons and move them to CLI. But there is one problem. A lot of these tips suggest calling these scheduled tasks using `crontab` by calling curl (or other http callings). This addressed first problem and makes user request free of sub-requests, but does not resolve two abovementioned problems. It is surprising because WordPress comes with `wp cron` command, which supports running scheduled tasks in CLI without making HTTP calls. 

In order to do this, you have to add one line to your crontab: 
```
*/5 * * * * wp cron event run --due-now --path=path_to_your_wp
```

In this case, we call the scheduled task every 5 minutes. WordPress is responsible for choosing a concrete task to run and runs it. 

Of course, you also have to disable calling sub-request to `/wp-cron.php` file. In order to do that, add the following to your wp-config.php file:
```php
define('DISABLE_WP_CRON', true);
```

In my opinion, you should also deny access to `wp-cron.php` file (because some bots might DDoS our site requesting this endpoint). I suggest making it on the application server level. For example, if you use Nginx,  add the following to your host configuration:
```
location = /wp/wp-cron.php { deny all; }
```
Overhauling our Documentation
Tags: books, opensource, documentation, bookstack
Published: 2021-06-20 18:37:34

The current Superbase documentation is poor, we know that. And over the last few months we've been trying to add to it and update it.

# Legacy issues

The current documentation was written in DocBook XML format, which although useful for certain things such as automating the Language Reference made it very difficult to use on the web and update. We decided as we enter this new era it was time to change to a more web-focused documentation style.

# GitBook and Nanoc

We originally wanted to use GitBook but since it is both no longer open source and there is no way to self-host we decided against it, despite its advantages.

We use GitLab, which uses nanoc for its documentation, but since this doesn’t look like and behave in the way we want we decided against it. Leaving us with two candidates: Wiki.js and BookStack

# Wiki.js vs BookStack 

This left us with only two options: Wiki.js and BookStack. Similar products, with Wiki.js slightly more feature rich, however we chose the PHP stack over Node.js as in our experience Node.js is too taxing on our servers, as such we are now officially running the upcoming Superbase documentation on BookStack. We are still working on finishing porting, and formatting, all our documentation, before we can start writing new documentation. 

It will be available under [docs.superbase.com](https://docs.superbase.com) as well as [docs.simpol.com (Coming Soon)](https://docs.simpol.com)
12 CSS Best Practices by Twitter
Tags: css, webdev
Published: 2021-06-20 18:31:15

1. When grouping selectors, keep individual selectors to a single line.![single-line-selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/996efsjnuinntlqk6ijv.png)

2. Don't prefix property values with a leading zero.
![leading-zero-prefix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsjbjp9hf636m5yzfif9.png)

3. Lowercase all hex values and use shorthand hex values whenever possible.![shorthand-hex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry3gqaxgwnnuw74dbol0.png)

4. Avoid specifying units for zero values.![no-units-zero](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98z2xi6ajgs3z9ooxfub.png)

5. Related property declarations should be grouped together following the order: *position, box-model, typography, visual. misc.*![declaration-order](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awrhul1os9x6v7qq1fpj.png)

6. Don't use `!important` - It is a last resort generally and  only use when you need to override something and there is no other way. Instead increase the specificity of the selector.![no-imp-use-specificity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibo1zf31l617fpu72m0f.png)

7. When a rule set includes only one declaration, consider removing line breaks for readability and faster editing.![single-declare-no-line-break](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmyk5yh1n7mabhatxvev.png)

8. Limit shorthand declaration usage to instances where you must explicitly set all available values.![shorthand-declare-limit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryiyros8hk3vocivr6j7.png)

9. Ensure your code is descriptive, well commented and approachable by others. Great code comments convey context and/or purpose.![good-comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnswmuygpvpr89envl93.png)

10. Class names:
    a. Keep them lowercase and use dashes to separate words
    b. Avoid excessive shorthand notation. (`.btn` is fine, `.s` is not)
    c. Use meaningful names: use structural or purposeful names over presentation.
    d. Prefix classes based on the closest parent or base class.![classname-rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/butixqdqp3c6xolzmcw2.png)

11. Selectors:
    a. Use classes over generic element tag for optimum rendering performance.
    b. Avoid using several attribute selectors (e.g. `[class^="..."]`) on commonly occurring components. *Browser performance is known to be impacted by these*.
    c. Keep selectors short and strive to limit the number of elements in each selector to three names over presentational.![selector-rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5sgk0fl2r6lk3qp1wyp.png)

12. Place media queries as close to their relevant rule sets whenever possible.![media-query-rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p576rlqnzhpki61kma98.png)

...


Follow me on [twitter](https://twitter.com/TheDoucheP) or [Github](https://github.com/pritam-patil).
Free Web-Development
Tags: wordpress, webdev, free, development
Published: 2021-06-20 18:13:20

Hi, how are you?

I'm 15 years old and have always been into technology, and one thing that I've always took a strong interest in, was Web Design & Development. I have created multiple websites in the past, I use WordPress, and also use HTML, CSS and even sometimes JavaScript with it. Until recently, all the websites I created were just for fun, but I wanted to turn it into a business and made my own website: https://echocreations.co.uk
After that I got three jobs, but since than I haven't really gotten any more clients. So I was looking for ways to improve and decided I want to create a few low cost or free websites just so I can add them to my portfolio, and hopefully that will attract clients.

If you send your web design ideas to info@echocreations.co.uk, if its something I can do, I'd happily give it a go, as I am looking for a bit more experience, feedback and to build up my portfolio.

Can't wait to hear from ya'all!
Top 5 Best Python GUI Libraries
Tags: python, programming, javascript, devops
Published: 2021-06-20 18:08:46

In this article, we will go through the top 5 Python GUI libraries that you can use in your projects. Keep reading to find out about them.
***

#What is a GUI?
A GUI or a graphical user interface is an interactive environment to take responses from users on various situations such as forms, documents, tests, etc. It provides the user with a good interactive screen than a traditional Command Line Interface (CLI).

***
##1. PyQT5
PyQT5 is a graphical user interface (GUI) framework for Python. It is very popular among developers and the GUI can be created by coding or a QT designer. A QT Development framework is a visual framework that allows drag and drop of widgets to build user interfaces

For the installation of PyQT5 , you can use the following command :

 ```pip install pyqt5```

***
## 2. Python Tkinter
Another GUI framework is called Tkinter. Tkinter is one of the most popular Python GUI libraries for developing desktop applications. It’s a combination of the TK and python standard GUI framework.

***
##3. PySide 2
The third Python GUI libraries that we are going to talk about is PySide2 or you can call it QT for python. Qt for Python offers the official Python bindings for Qt (PySide2), enabling the use of its APIs in Python applications, and a binding generator tool (Shiboken2) which can be used to expose C++ projects into Python.

So now let me show you the installation process and also an example. So for the installation, you can just simply use:

```pip install PySide2```
***

##4. Kivy
Another GUI framework that we are going to talk about is called Kivy. Kivy is an Open source Python library for the rapid development of applications that make use of innovative user interfaces, such as multi-touch apps.

Coming to the installation of Kivy, you need to install the dependency “glew”. You can use the pip command as below:

```pip install docutils pygments pypiwin32 kivy.deps.sdl2 kivy.deps.glew```

Enter this command and hit enter, it will be installed. After that you need to type this command to install Kivy:

```pip install Kivy```

***
##5. wxPython
So the last GUI framework that we are going to talk about is wxPython. wxPython is a cross-platform GUI toolkit for the Python programming language.

Now I’m going to show you the installation process and create a simple example. So for the installation just type the following command:

```pip install wxPython```
***
#Conclusion
So now we have seen 5 Python GUI libraries and in my opinion, PySide2 and pyQt5 are the more powerful GUI frameworks. But they do come with a commercial license and that explains why they’re feature-rich. Tkinter, Kivy, and wxPython are the free GUI libraries for Python.


What’s your favorite GUI library in Python?

#My Gigs - 
1 ) https://www.fiverr.com/share/4Xo9q1
2 ) https://www.fiverr.com/share/ZRl3vk
Looking for a coding buddy
Tags: react, gatsby, wordpress, woocommerce
Published: 2021-06-20 18:02:20

Hi, I am Omor, a frontend developer who loves to work with react. Currently I am learning react’s ecosystem, mainly focusing on gatsby. I wanna use gatsby for frontend and wordpress/woocommerce for backend. My main objective is to create an ecommerce theme for gatsby where stable latest version of many APIs like gatsby-source-wordpress, WPGraphql will be used.
If anyone is interested in collaborating in the project, let me know.
Create professional portfolio website with Nextjs and ChakraUI
Tags: nextjs, webdev, react, chakraui
Published: 2021-06-20 18:00:11

Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my portfolio website with Nextjs. And I really loved it. It was so easy to recreate my portfolio website with Nextjs. 
So far I'm using some of Nextjs features.

# Built with
- React Framework - [Nextjs](https://nextjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

> **Demo Link:** [Portfolio](https://mahmad.me)
> **GitHub Repo:** [Repo](https://github.com/MA-Ahmad/myPortfolio)

### Skills
![screen1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy9nhrh697g1czkbfy1z.png)

### Open source projects
![screen2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r98v94u1cidrf1ycq33.png)

![screen3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xel2ey7j60u5q7psjxmj.png)

### Developer story
![screen4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6srfuga2owd9xk32cu1.png)

Note: I have already created this website with reactjs and chakraUI.

{% link https://dev.to/m_ahmad/portfolio-website-template-built-with-react-and-chakraui-15ok %}
HTML <iframes>
Tags: html, css
Published: 2021-06-20 17:42:02

HTML <iframes> cuts a window out into your webpage where you can insert other pages for viewing. The word iframe stands for inline frame.

Great example of this is if you want to add Google Maps to your webpage.  So maybe you are working on a webpage for a store and you want your viewers to be able to see where your store is on a map and also get directions on how to get to your store.  You can create an <iframe> element.  

An <iframe> element will need attributes: 

src - this specifies the url of the page that you want shown inside that window
height - this attribute specifies the height of the iframe (in pixels)
width - this specifies the width of the iframe (in pixels)

Your code will look something like this:

<iframe
   
src="https://www.google.com/maps/place/Kings+Island/@   		   39.3451798,-84.271331,17z/data=!3m1!4b1!4m5!3m4!1s0x88405801b48c9003:0x64f9f426e5e19765!8m2!3d39.3451798!4d-84.2691423"  
   height="350"
   width="450"
</iframe>

This will add the google map page showing the location of King's Island in Mason, Ohio as a window inside of your webpage.  There are so many possibilities with <iframe>.  TRY  IT!
Project #4 : Vanilla JS Frontend with RoR API backend
Tags: rails, javascript
Published: 2021-06-20 17:32:56

### Intro
My fourth project for Flatiron School was building a Single Page Application(SPA) using Javascript as a frontend and Rails API as a backend. 

### Project Description
As always, for this time again, my 3 years old son gave me another idea what my project would be. It might be a little bit childish;however, I named my project "Dinosaur Flash Card" which will show the dinosaurs as cards and using CSS, flipping those cards to show the user to have brief details of the selected dinosaurs.

### Backend Setup
I added two model since "MesozoicEra" and "Dinosaur" with a relationship of has_many and belongs_to relatively.
After migration and seeding data, by using rails scaffold for both models, backend was easily set up without having trouble. 

### Frontend challenges
There were many difficulties and challenges when I worked on this project. Altering codes from Index.js file to each model folder's file in order to make my code DRY was the basic challenge;however, the most important part was understanding what JS code looked like since I am totally new in this city.
For this project, 'fetching' and using 'addEventListner' method were the most useful method I had to use for several times.

### Fetching 
I used 5 fetching method; render all dions, render all eras, render dinos by era, POST(creating a dino), DELETE dino.
For this post, I would like to introduce how I fetched all dinosaurs and made them displayed on the webpage. 

```
class API {
    static ALL_DINOSAURS_URL = "http://localhost:3000/dinosaurs"
    
   static addDinosaurs() {
        fetch(this.ALL_DINOSAURS_URL)
        .then(response => response.json())
        .then(dinosaurs => {
              dinosaurs.forEach(dinosaur => {
              const newDinosaur = new Dinosaur(dinosaur)
              newDinosaur.renderDinosaur(dinosaur)     
              Dinosaur.all.push(newDinosaur)
              })
        }) 
    }
}
```
Above code is the way how I fetched all dinosaurs as a class.
In services folder, I've created API.js file and added API class to make my code as DRY as I could. Since this is just fetching process, I needed to add the below codes to actually display all dinosaurs on the web page. 
```
document.addEventListener("DOMContentLoaded", function() {
  API.addDinosaurs() };
```

I called 'addDinosaurs' function and invoked it to Index.js file with "DOMContentLaded" event listener so that it finally rendered and displayed all dinosaurs from the backend to the front. 


### Summary
Throughout this basic fetching process, I felt much comfortable playing with Javascript. As a beginner of JS, all methods and functions do not look familiar just like when I learned RUBY as a first computer language. By practicing this simple fetching method and repeating those process to fetch other backend data, I finally ended up having better confidence than the beginning of this project.
Day 117
Tags: 100daysofcode, programming
Published: 2021-06-20 17:10:23

Day 117/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Highest Rank Number in an Array (6 kyu)
2 - Well of Ideas - Harder Version (7 kyu)