teleren/devto huggingface dataset:
Create database and user with psql script for Postgres
Tags: postgres, rails
Published: 2021-01-23 09:59:27

Postgres is always a popular choice for many applications. It offers many features, hence it was used for my React on Rails App. When it comes to upgrading, I prefer to **re-create** my db on new server, then depends on rake task `db:setup_or_migrate` to perform db setup later. Data migration is not the scope of this post.

After installing/upgrading postgres via [Postgres.app](https://postgresapp.com/) you can launch psql with the command on terminal:

```
psql
```
![screenshot](https://dev-to-uploads.s3.amazonaws.com/i/43u962tgl7bseh4ujns6.png)

Once you are in the psql console,


**To Create User/Role:**
```
CREATE ROLE kyle WITH LOGIN;
```
OR
```
CREATE USER kyle;
```
the difference is that `CREATE USER` automatically gives the role login privilege.

Then, enter `\du` command to print the list of roles to check your newly created role - kyle.


**Once created, to set up password:**
```
\password kyle
```
you will be prompted to insert password



**To grant permission for creating database:**
```
ALTER USER kyle CREATEDB;
```
Also, enter `\du` to check your newly assigned role attributes (permission).


**To grant permission to user as superuser:**
```
ALTER USER kyle SUPERUSER;
```


**To create database:**
```
CREATE DATABASE kylefoo;
```
Then, enter `\l` command to print the list of database to check your newly created database.
![db list](https://dev-to-uploads.s3.amazonaws.com/i/d58mzyvd8q3nmqm5fbmp.png)


**To give ownership of database to user:**
```
ALTER DATABASE kylefoo OWNER TO kyle;
```

You are done with creating database `kylefoo` with owner `kyle` assigned as owner. You can use the credentials in the database.yml on your rails application. Cheers!


Next, to cover usage of `pg_dump` and `restore` for data migration.
Cloud Career Tips & Strategy for 2021
Tags: career, cloud
Published: 2021-01-23 11:09:26

{% youtube bJA-CZCJths %}

In this episode I’m sharing by best career tips & strategy for 2021. What should you focus on? What do you need to think about to start building a successful career in the cloud? Those are some of the questions we answer in this episode, along with Q&A with a live audience.

In this episode, we talk about…

- 2021 industry predictions from Forester & Gartner
- How to become multi-dimensional as an engineer
- Soft skills you need to be building, in addition to hard skills
- How to run experiments to gather data
- How to get more hands-on experience
- Q&A with a live audience
Building and compiling Linux Kernel : 
Tags: linux, kernel, opensource, compilation
Published: 2021-01-23 10:57:38

## __What is Linux Kernel ?__
* As we know `Kernel` is the core of any operating system which is the interface between computer's hardware and it's processes .
* And the main task of the kernel is :
```
1. Memory management
2. Process management
3. System calls
4. Device drivers
5. Security
``` 
* `Linux Kernel` is a free `opensource` `monolithic`, `modular` and `multitasking` Kernel for Unix like operating systems .

* Though it is `opensource` we can install and manipulate as per our need .

## __Dependencies :__
* Make sure to install these dependencies :
```
sudo apt-get install libncurses-dev flex bison openssl libssl-dev dkms libelf-dev libudev-dev libpci-dev libiberty-dev autoconf
```
## __How to installation :__ 
* Navigate to [kernel.org](https://kernel.org) and download the latest version .
* Here I am using Ubuntu as the operating system . 
* Install it with `wget` .
```$sudo wget https://cdn.kernel.org/pub/linux/kernel/v5.x/linux-5.10.9.tar.xz```
* Unzip the downloaded file .
```$ sudo tar -xvf linux-5.10.9.tar.xz```
* Make a directory in your home folder .
```$ mkdir kernel```
* Copy the file after extraction .
```$ cp -r linux-5.10.9/ /kernel```
* Navigate to :
```$cd kernel/linux-5.10.9/```

* Start the Linux source configuration tool
``` make menuconfig```

* `Edit` the configuration of kernel and save-and-exit.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lwcijonfkrngif07xjge.jpg)

* `Compile` the kernel .
```$make -j 5 KDEB_PKGVERSION=1.0 deb-pkg```

* Install the Kernel .
```sudo dpkg -i ../linux*.deb```

* Reboot your system and check for the kernel version .

## __Thank You__ 🤖🤖🤖
Built this Mac app since started to learn programming a year ago for extracting text from your Mac's screen.
Tags: productivity
Published: 2021-01-23 10:53:58

I am a self-taught developer. I started to learn programming more than a year ago. Mostly Swift and Node.js. Acquired knowledge allowed me to create my first website and first macOS application. The Application has been featured by MacRumors, 9to5Mac, TNW and others. Below I will show you what is TextSniper and what it does.

Do you often find yourself retyping text, that’s uncopiable or non-selectable? Probably, yes! In this post, I’ll show you how quickly grab any text in such circumstances.

 [TextSniper](https://textsniper.app/)   is Mac OCR (optical character recognition) software that allows extract text from a selected portion of your screen and almost instantaneously get it saved to clipboard as editable text. It is as easy as take a screenshot.

## **Step 1:**

After you launch the application, its icon will appear in the menu bar. Press on it and select Capture Text menu item. You can also use predefined keyboard shortcut Command+Shift+2 to start text capturing. The shortcut is customizable, which you can change in Preferences.

![TextSniper Shortcut.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1611273213004/c0ipeVQy3.png)

## **Step 2:**
Select the screen area with the text you want to capture. Just click and drag over some text on your screen.


![Image to Text.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611273318797/NRXVOM7P9.gif)

## **Step 3:**
Captured text from screen got copied to clipboard. Paste it into your favorite text editor or note-taking app pressing CMD + V shortcut.


![Paste Recognized Text.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1611273420011/potfjWLNH.gif)

As you can see, with three easy steps in no time, you can grab text from anywhere on your screen. Currently, it is great for normal text, but can have misreads when there are a lot of symbols such as you might find in computer code.

In my next posts I will write in more details how I come up with the idea, where first posted the app, how promoted it and mistakes I made. Let me know if you have any other questions. 

P.S.
I am 35 years old. Most of my adult life I worked at different jobs, none of them was related to programming. Last decade it was construction. I never found passion in what I do. I found this passion in programming. It's never late to change something in your life.

Originally, partially published at  [https://textsniper.app/blog/](https://textsniper.app/blog/) on January 19, 2021.
Write a Guest post and Earn $10.
Published: 2021-01-23 10:53:40

**[Write a Guest post and Earn $10.](https://www.phpcodingstuff.com/free-guest-posting.html)**

**Write article/post and earn money up to $10**
* You can earn up to $10 by writing one article/post.
* You can write a post for this website and you will get money for writing the post.
* The post you will write should be as per the above-mentioned topic.
* If your post match somewhere, your post will be rejected.
* When your post is approved, payment will be sent to your **PayPal account or UPI.** A screenshot will be given to your Email.
* When you send the post to us, also send the email of your **PayPal account or UPI** in it so that we can send your earned money to your PayPal account or UPI.

**[https://www.phpcodingstuff.com/free-guest-posting.html](https://www.phpcodingstuff.com/free-guest-posting.html)**
CSS help
Tags: help
Published: 2021-01-23 10:19:37

I have a bit of a tricky CSS problem and I am not sure what is the best way to go. I need to reproduce the page in the attachment both in a desktop and mobile version. I decided to use CSS grid but I am not sure what is the best way to achieve the offset column design. I thought about giving classes to certain images and offsetting them with translate(Y) but in the mobile version the images that need to be offset change. 
https://dev-to-uploads.s3.amazonaws.com/i/16kb3gefay8yjuilt7uv.png
Blog comments with utterances
Tags: blogging, rails, github
Published: 2021-01-23 09:44:28

### A lightweight comments widget built on GitHub issues. Looks great, and it's really easy to install and manage.

I was looking for a simple, safe and lightweight comment system to add to this blog, till I came across utterances through [Tania Rascia's blog](https://www.taniarascia.com/adding-comments-to-my-blog/).

Utterances is an [open source project](https://github.com/utterance/utterances) by [Jeremy Danyow](https://github.com/jdanyow) built on Github Issues. This makes the comment section of your blog look really dev-familiar with all the benefits of using Github to submit and manage comments.

In practice, this means that your visitors will have to login to github to submit a comment (hopefully avoiding bots and spammy content) and once submitted, all comments will be hosted on the issues area of a repo of your choice. It has to be a public repo though, otherwise comments will not be visible to the users.

The [utterance's documentation](https://utteranc.es/) is pretty straightforward. First, you'll have to install utterances on your repo. Just like Tania, I created a blog-comments repo just to host the comments and avoid polluting my blog's repo with issues. 

Once you've done that, you'll have to add a script tag exactly in the position where you want your comment section to appear. The utterances website provides a simple UI where you can choose the config options for this script. 

Here's what my final script looks like: 

```html
<script src="https://utteranc.es/client.js" 
  repo="anansilva/blog-comments" 
  issue-term="title" 
  label="comments" 
  theme="preferred-color-scheme" 
  crossorigin="anonymous" 
  async>
</script>
```

The `issue-term` tag defines the title of the issue that will be open on github once your visitors start commenting a post. In my case, it will be equal to the title of the post - fetched from the `meta_title` of the page. One other thing I love about utterances is that it has a `preferred-color-scheme` for the comments box, which means that it will adapt the styles to the visitor's operating system (light or dark mode). My blog is built on the same premise, so it comes in handy.

Check how it looks [on my blog](https://www.ananunesdasilva.com/posts/blog-comments-with-utterances), and feel free to comment there!
100 Doors
Tags: python, programming, coding, problem
Published: 2021-01-23 09:43:00

# 100 Doors

The name's strange but don't fret over it's as easy as making a for loop.

##Problem statement :

100 doors in a row are all initially closed.
You make 100 passes by the doors.
The first time through, visit every door and toggle the door (if the door is closed, open it; if it is open, close it).
The second time, only visit every 2nd door (door #2, #4, #6, ...), and toggle it.
The third time, visit every 3rd door (door #3, #6, #9, ...), etc, until you only visit the 100th door.
And so on it goes up to the 100th time.

## First solution 
Language: Python

```python
doors = [0] * 100       #initialized all doors to a closed state
for x in range(100):
  for y in range(x, 100, x + 1):
    if (doors[y] == 0):
      doors[y] = 1
    else :
       doors[y] = 0
```

Well, the amazing thing that caught my eye was that even after a 100 iterations of closing and opening doors the doors which were left open were the perfect squares. (why don't U try it and see the magic for your self)

## Second solution 
Language: Python

```python
doors = [0] * 100
for x in range(10):
  doors[x * x - 1] = 1
```

Well, this one's a little funny as I know that all the perfect squares doors are open. I only iterated once and simply opened only those that are perfect squares. (As easy as that.)

For more follow me on Instagram :
id : codeiswine
https://www.instagram.com/codeiswine/
My javascript / tech / web development newsletter for 23-01-2021 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-01-23 09:17:25

---
title: My javascript / tech / web development newsletter for 23-01-2021 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Deplatforming, Apple premium podcasts, MGM for sale, iPad-style Linux, Safari extensions, product reviewing, Kubernetes as linker, mattmullenweg@37, iPaaS, IPFS, VCs, gaming, darkmode, OSS woes, stack writeup...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-23-01-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Building and serving gatsbyjs with docker
Tags: gatsby, docker
Published: 2021-01-23 09:14:11

---
title: Building and serving gatsbyjs with docker
published: true
description: 
tags: gatsbyjs, docker
canonical_url: https://jonathanborg.net/multistage-docker-gatsbyjs/
//cover_image: https://direct_url_to_image.jpg
---

On a recent project I have been working on, I had to find a way to host a gatsbyjs project in a [docker](https://www.docker.com/) container.
After a quick search for `gatsbyjs docker`, most of the result pointed me to the fact that gatsbyjs have [official docker images](https://github.com/gatsbyjs/gatsby-docker),
but when using it like shown in the README

```dockerfile
FROM gatsbyjs/gatsby:onbuild as build

FROM gatsbyjs/gatsby
COPY --from=build /app/public /pub
```

I could not get it to work, after searching through the issues i found out that the [docker images needs to be updated](https://github.com/gatsbyjs/gatsby-docker/issues/38) but its still open so i decided to take matters into my own hands.

## Multistage docker builds

Docker has this awesome feature called [multistage build](https://docs.docker.com/develop/develop-images/multistage-build/) which allows us to basicly structure our dockerfile
in a way to minimize the size of the final image. A traditional dockerfile would look something like this

```docker
FROM node:14.11.0
#
# Install and setup nginx to serve static files, removed for brevity.
#
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . ./
RUN npm run build

RUN mv /app/public /usr/share/nginx/html

```

this would work, but you see that `FROM node:14.11.0` line at the top of the Dockerfile, that means that the final image will have node included, and all the dependencies that the application needs to build.
there is a better way.

### Enter multistage

```
FROM node:14.11.0 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . ./
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/public /usr/share/nginx/html
```

As you can see it starts of similarly,we have one stage that uses the `node:14.11.0` image, it sets everything up and builds the public folder with the generated gatsby site,
but at the end of the file we have a new `FROM nginx:alpine` and we then copy in only the public folder, This means that our final docker image will only contain our finished built site, and the bare minimun nginx to serve those files.
Perbedaan Frontend dengan Backend
Tags: architecture
Published: 2021-01-23 08:57:49

Istilah frontend dan backend ini sedang populer beberapa tahun belakangan, bersamaan dengan popularitas arsitektur berbasis REST API.

Pada [pembahasan sebelumnya](https://dev.to/hadihammurabi/apa-itu-rest-api-4dj0), temen-temen sudah paham ni apa itu REST API. Sekarang, kita bahas 2 bagian utama dari REST API, yaitu frontend dan backend.

# Frontend
Frontend bertugas menampilkan interface (antarmuka) kepada pengguna agar aplikasi mudah digunakan. Bagian inilah yang berhadapan langsung dengan pengguna, mulai dari menerima input, menampilkan data, bahkan bisa saja hanya sekadar aksesoris.

Bila sebuah aplikasi diibaratkan restoran, maka frontend ini merupakan resepsionis dan kasir. Tugasnya menyambut dan menerima pesanan pelanggan, kemudian meneruskan pesanan tersebut ke dapur agar permintaan pelanggan dapat disiapkan.

# Backend
Backend bertugas memproses data yang dikirimkan dari frontend dan juga menyediakan data untuk ditampilkan oleh frontend. Bagian ini tidak perlu dilihat oleh pengguna (walaupun sebenarnya bisa saja), karena ruang lingkup tugasnya memang di belakang. Biasanya, alur-alur bisnis, perhitungan, penyimpanan data, di lakukan di bagian backend ini.

Bila kembali pada analogi yang sebelumnya, backend dapat diibaratkan sebagai koki yang bertugas membuat dan menyediakan makanan yang dipesan oleh pelanggan. Tentunya pelanggan tidak perlu melihat bagaimana koki bekerja. Kemudian, penyajian akan dilakukan kembali oleh resepsionis atau pelayan.

# Penutup
Pada pembahasan ini, diharapkan temen-temen semua dapat mengerti apa itu frontend dan backend secara istilah dan apa bedanya. Pada materi berikutnya, kita akan bahas lebih detail untuk masing-masing bagian tersebut, sampai ke teknis-teknisnya.

Terima kasih sudah baca.
Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎
Capture Network logs using WebdriverIO 
Tags: webdriverio, automation, capturenetworklogs, devtools
Published: 2021-01-23 08:45:08

Capturing network logs is something that is key to complete automation. 

Often testers are left with the black box of not knowing when a call is being made while going the automation route, with this tool WebdriverIO using the Chrome dev tools protocol via puppeteer it becomes easy for us to achieve that. 

We can achieve automation of request analysis and also verify if the requests are made at the right place.

**How to do it with WebdriverIO**

Ensure you are running this with `Chrome` browser as this is not available for all the browsers

There are no additional changes required in your `wdio.conf.js` file

There are no additional libraries required as well

For you to capture a specific type of requests the control lies in browser.mock section

Example for when you want to capture all `GET` calls 

        var output = browser.mock('**',{method:'get'})
        browser.url('https://reqres.in')

Example for when you want to capture all `POST` calls 

        var output = browser.mock('**',{method:'post'})
        browser.url('https://reqres.in')

Example for when you want to capture any `POST` calls that end with `login` in the request URL

        var output1 = browser.mock('**/login',{method:'post'})
        browser.url('https://the-internet.herokuapp.com/login')

Example for when you want to capture any `POST` calls that end with `authenticate` in the request URL

        var output2 = browser.mock('**/authenticate',{method:'post'})
        browser.url('https://the-internet.herokuapp.com/login')

Example for when you want to capture any `GET` calls that end with `api/users/2` in the request URL

        var output3 = browser.mock('**/api/users/2',{method:'get'})
        browser.url('https://reqres.in')

**Note:** Once you specify a URL to capture, it will capture all the calls that are made let's say if you made 5 calls all 5 will be captured as a separate object inside that variable in JSON format.

In this video below I have gone about explaining all of the above scenarios and how to automate them. Hope you'll like it

{% youtube Be9IPyxHmLs %}

Br,
Ap.
A Fact, couple of Quotes and Useful links
Published: 2021-01-23 08:42:31

Hello Friends, Every Monday I'm publishing a blog about three things which I find useful.


1. One Fact.

2. Two Interesting Quotes/Questions.

3. Three Useful Links (Can be Articles about Programming, Fitness, Finance among other things)

This very idea was Inspired by James Clear's newsletter. I'm very excited about this journey and hope to help as many as possible.

Below are some of the links from the previous weeks

1. [On Owls, Life, Risks and web security](https://gokhale.me/on-owls-life-risks-and-web-security)

2. [On Shampoo, Miracles and 12 factors..](https://gokhale.me/2-on-shampoo-miracles-and-12-factors)

Looking forward to share my learnings with all of you.
Learn how to make a custom Home Slider using HTML | CSS | and Pure JavaScript
Tags: html, css, javascript, webdev
Published: 2021-01-23 06:40:15

<p>
If you're learning HTML, CSS, and JavaScript be sure to like and subscribe to my channel and never miss tips like this. 👇
</p>
<p>YouTube Link <a href="https://www.youtube.com/channel/UCzv-_oMxjX5yuq7CJxZYQmA">https://www.youtube.com/channel/UCzv-_oMxjX5yuq7CJxZYQmA</a></p>
<p>
Twitter: <a href="https://twitter.com/shahir_dev" target="_blank">https://twitter.com/shahir_dev</a>
</p>
<p>
Telegram: <a href="https://t.me/WeeklyTipsWithShahir" target="_blank">https://t.me/WeeklyTipsWithShahir</a>
</p>

{% codepen https://codepen.io/shahirhossaini/pen/rNMgaob %}
TWEET DATASET WITH PYTHON
Tags: python, twitter, beginners, help
Published: 2021-01-23 06:30:31

Hi, I'm new in the DEV community so let me introduce myself: I am an Italian university student and I am working on my master degree final dissertation. For this work I would need a dataset of tweets that meet certain criteria and that were published in a specific period in 2020.
I read a lot of articles and saw many tutorials and almost of them describe python as the fastest way to get a considerable number of tweets at a time that meet specific criteria. In fact, python can be used both to hydrate already existing datasets of tweets or to create new datasets from scratch. The problem is that I'm absolutely incapable of using these kinds of programs. Is there anyone who can help me out with this task? 
Thank you so much
Francesca
Get Product Prices via JS
Tags: cssselectors, css
Published: 2021-01-23 02:27:55

**Get the Amazon Product Price (& Highlight The Price)**
A Quick One that I Figured Out

```javascript
let price_of_product = document.querySelector(`span[id*="priceblock_"][class*="a-size"][class*="priceBlock"]`);

price_of_product.style.backgroundColor = "blue";   

console.log(price_of_product.innerText);
```
OutPut:

![Amazon Price Fetch 1 via JS](https://dev-to-uploads.s3.amazonaws.com/i/yd02ac0hbl8nhs6isa8m.png)





**A Bit More Styling**

Below i am using `cssText`, This helps to Set the Style Attribute with Plain CSS way of Styling
*Rather then using backgroundColor (JS way) as Normal CSS attr background-color (CSS way)*


```javascript
let price_of_product = document.querySelector(`span[id*="priceblock_"][class*="a-size"][class*="priceBlock"]`);

price_of_product.style.cssText = "background-color: orange; padding: 5px; border-radius: 10px; font-size: 24px!important;";   

console.log(price_of_product.innerText);
```

Output:

![Amazon Price Fetch 2 via JS](https://dev-to-uploads.s3.amazonaws.com/i/9ikju4s0fp6e8n5rsq9x.png)



+++ Added For Flipkart

# Worst JS Snippet But Still 


```css
let price_el = document.querySelector("#container>div>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)");
if (price_el) {
    price_el.style.backgroundColor = "red";
} else {
    let price_el2 = document.querySelector("#container>div>div:nth-child(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)");
    price_el2.style.backgroundColor = "red";
}
```


Copy this and add it in the console of any Flipkart Product Page it will highlight the Product Price...


Later u can use it in Python Script
Mainly the CSS Selector Path

and then can automate the process...