teleren/devto huggingface dataset:
A Gentle Reminder to Take a Vacation
Tags: devjournal, career, productivity, webdev
Published: 2021-05-20 17:56:38

I landed on my own Github profile the other day, which is a pretty rare occurrence as I'm usually looking for repos in my company's account, but I was in search of a tutorial project I had done a while back. It had been a minute, and I noticed the Github wizards had further expanded the contributions panel (yay, code reviews are finally acknowledged!). But I also saw something more disturbing: too much green.

Let me explain.

I started coding for a living in 2018. This is what my contributions look like from that year:

![2018 Github contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5m9v7vkt47xv8iw9ynm.png)

The big gap in May is the period between finishing code school and getting a job in June (during which I went to Mexico, because YOLO). There's a gap in September when I took a week off to meet my parents in San Francisco and drive up through the redwoods with them back to Portland (highly recommended), and then a winter holiday break in December into January 2019.

Next, there's 2019, my first full year of working as a software engineer:

![2019 Github contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdmffkdqd79ua59gsrl1.png)

There are some solid gaps in there: May 2019, when family from Poland came to visit and we toured up and down the West Coast. October, when I flew to Germany and Poland for more family time and a wedding. Another couple of weeks off for the holidays in December-January. Good times.

And then... 2020.

I suppose this one won't be too surprising - there was this little thing about a global pandemic and all:

![2020 Github contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbtnka1rkbrpxpyjw1z5.png)
 
Wow, so solid green it would give that subway station envy. Ok, there's one little gap: in October, around my birthday, I took a road trip to the [Alvord Desert](https://traveloregon.com/things-to-do/destinations/parks-forests-wildlife-areas/the-alvord-desert/) (also highly recommended). But that didn't even last a full week.

And yeah, it makes sense. We were in lockdown. There was literally nowhere to go most of the year, and a pandemic killing millions that made even weekend trips seem like unnecessary risks. Understandable.

But what I saw that disturbed me was my 2021 so far:

![2021 Github contributions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ira2zkxpeam8n58f2jnt.png)

Pretty dang solid. And possibly on the road to burnout (anyone else feel that?).

Luckily, I'm now fully vaccinated, and taking my first full week off next week to go on a road trip (by car, to a pretty remote area, because the pandemic's not over). Even planning it a few weeks back felt strange, as if vacations are another thing the pandemic took away. But that doesn't have to be the case.

So, for whoever needs to hear it: this is a gentle reminder to take a vacation. Even if you can't go anywhere yet, your mind and body need time away from the green squares. You'll thank yourself later.
How to implement Builder Pattern in Node.js
Tags: node, pattern, builder
Published: 2021-05-20 17:54:46

https://ozenero.com/implement-builder-pattern-nodejs-example

How to implement Builder Pattern in Node.js

When we want to create complicated object which has multiple parts, we can use Builder Pattern that separates the building of these parts. This creational process does not care about how these parts are assembled.

In this tutorial, we're gonna look at 2 ways to implement Builder Pattern in Node.js:
<ul>
<li>using Builder function</li>
<li>using Builder class</li>
</ul>
<!--more-->
<h2>Node.js Builder Pattern example using Builder function</h2>
Our Builder function works as a Builder object that can build a Person object.
A Person object has 4 fields: <code>name</code>, <code>age</code>, <code>location</code>, <code>languages</code>.

<em>PersonBuilder.js</em>
<pre><code class="language-javascript">
function PersonBuilder() {
    this.person = {};
    this.setName = name => {
        this.person.name = name;
        return this;
    }
    this.setAge = age => {
        this.person.age = age;
        return this;
    }
    this.setLocation = location => {
        this.person.location = location;
        return this;
    }
    this.setLanguages = languages => {
        this.person.languages = languages;
        return this;
    }
    this.buildInfo = () => this.person;
}

module.exports = PersonBuilder;
</code></pre>
Now look at the code in <em>app.js</em>:

More at:

https://ozenero.com/implement-builder-pattern-nodejs-example

How to implement Builder Pattern in Node.js
Install Sublime Text 3 on Ubuntu 20.04
Tags: ubuntu, sublimetext, install
Published: 2021-05-20 17:53:29

perform the following steps as root or user with sudo privileges to install Sublime Text 3 on Ubuntu:

1.Install the dependencies necessary to add a new repository over HTTPS:

sudo apt update

sudo apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

2.Import the repository’s GPG key and the Sublime APT repository to your system’s software repository list by typing:

curl -fsSL https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -

optional//
if curl is Not Found
sudo snap install curl  # version 7.76.1 

sudo add-apt-repository "deb https://download.sublimetext.com/ apt/stable/"

03.Once the repository is enabled, install the Sublime Text 3 by typing:

sudo apt install sublime-text

That’s it, you have installed Sublime Text 3 on your Ubuntu 20.04 desktop, and you can start using it.

When a new version is released, you can update the Sublime package through your desktop standard Software Update tool.
Starting Sublime Text
sudo apt update

You can start the Sublime Text editor either from the terminal by typing subl/sublime or by clicking on the Sublime icon (Activities -> Sublime)
DEV.to internal search is... bad?
Tags: meta, discuss, healthydebate
Published: 2021-05-20 17:41:12

I remember the dev.to search being super useful, but it ain't so anymore

Compare a search for `Sprint interview questions`
https://dev.to/search?q=spring%20interview%20questions

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17mmqj7p7ealcn08jhgp.png)

Versus Google

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pdbmx1gaf9pn970xecv.png)
Splashgen: Create splash pages in less than 20 lines of python for free. 
Tags: showdev, contributorswanted, news, python
Published: 2021-05-20 17:28:29

[Github package repo](https://github.com/true3dco/splashgen)
[Github repo using Splashgen] (https://github.com/true3dco/splashgen.sh-site)
[Example splash page](https://splashgen.sh/)


## What

SplashGen is a free and open source project that lets you rapidly build simple splash pages as easily as you can build a simple command-line application.

## How

You write this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70rfs6o6t2d52c87435n.png)
 
and get this:

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


## Why?

The main motivation behind this project is that backend developers don't like to write CSS, so I wanted to give them a way to get around that. When I was a backend engineer at FB we had a bunch of tools that let backend developers build UIs by leveraging predefined but flexible components without ever leaving PHP. When I left FB, I couldn't find anything similar, so I kicked off this project.

While this isn't super compelling today,(we are just giving people a single splash page that they can go and create), we plan to add a ton of templates and eventually a component system. If you are looking to deploy a splash page that requires a template we don't currently have, let me know and I can spin it up for you super quickly.


Any/all feedback is welcome :)
Python Script to get the AWS EC2 Instance Details
Tags: python, aws, devops
Published: 2021-05-20 17:17:23

Used python version 3.7 and Boto3, Kindly configure the AWS IAM Credentials in your local or workstation

AWS Profile Configuration
```
aws configure --profile name(my_proile)
```
```
import boto3
import sys
import time

session=boto3.Session(profile_name="my_profile", region_name="us-east-1") #boto3 session, aws profile 

ec2_resource=session.resource(service_name="ec2") # resource object method

'''
client object method, commented because this script using resource object method
ec2_client=session.client(service_name="ec2")
'''

#using Resource Object
'''
for each_instances in ec2_resource.instances.all():
    print(each_instances.id, each_instances.state['Name'])
'''

for instance in ec2_resource.instances.all():
     print(
            "Id: {0}\nPlatform: {1}\nType: {2}\nPublic IPv4: {3}\nAMI: {4}\nState: {5}\n".format(
         instance.id, instance.platform, instance.instance_type, instance.public_ip_address, instance.image.id, instance.state
         )
     )
```
complex search queries
Tags: elasticsearch
Published: 2021-05-20 17:09:45

I am not sure it is the right place to ask this question. 

Is it possible to apply range search on the associated field? 
my document:

PUT villas/_doc/2094
{
  "id": 1,
  "status": "active",
  "is_featured": false,
  "price": 750.0,
  "offers": [
    {
      "price": "210.0",
      "publish_date": "2021-04-02",
      "end_date": "2021-04-30"
    },
    {
      "price": "250.0",
      "publish_date": "2021-05-01",
      "end_date": "2021-05-26"
    },
    {
      "price": "310.0",
      "publish_date": "2021-05-27",
      "end_date": "2021-06-09"
    },
    {
      "price": "440.0",
      "publish_date": "2021-06-10",
      "end_date": "2021-06-30"
    },
    {
      "price": "650.0",
      "publish_date": "2021-07-01",
      "end_date": "2021-07-21"
    },
    {
      "price": "750.0",
      "publish_date": "2021-07-22",
      "end_date": "2021-08-21"
    },
    {
      "price": "650.0",
      "publish_date": "2021-08-22",
      "end_date": "2021-09-04"
    },
    {
      "price": "440.0",
      "publish_date": "2021-09-05",
      "end_date": "2021-09-18"
    },
    {
      "price": "310.0",
      "publish_date": "2021-09-19",
      "end_date": "2021-10-02"
    },
    {
      "price": "250.0",
      "publish_date": "2021-10-03",
      "end_date": "2021-10-24"
    },
    {
      "price": "210.0",
      "publish_date": "2021-10-25",
      "end_date": "2021-11-01"
    }
  ],
  "not-available-calendar": [
    "2021-01-26T12:01:00.000Z",
    "2023-01-29T12:00:00.000Z"
  ]
}

I am trying to achieve what booking.com does.

If I search by price range and date range with

min_date = 2021-10-20
max_date = 2021-10-30

min_price = 100
max_price = 200

Then the document will not appear in the search result. But if I set max_price = 250, then it will appear in the search result.
 
If I change the filter to 
min_date = 2021-09-05
max_date = 2021-10-30

min_price = 100
max_price = 439

Still, the document should not be in the search result.

More misery is, if the date range doesn't intersect with the offers, price range will be applied to the price field of the document.

Any kind of hints will be appreciated(Complete query will be challenging). 

Thanks
Link, NavLink or useHistory?
Tags: reactrouter, webdev, womenintech
Published: 2021-05-20 17:07:20

I used to use *NavLink* instead of a *button* more often because I didn't know how to link that button to a specific URL while using *react-router*,  **useHistory** hook provided by *react-router* can be used with a **button**.
``` javascript
import { useHistory } from 'react-router-dom'

const history = useHistory();
const handleLogin = () => {
history.push('/homepage')
}
<button onClick = {handleLogin}>Login</button>

```
**NavLink** should be used with some kind of *navigation bar* as it will be helpful in showing which tab is active and at the same time will be able to take to some other linked URL.
And also if the navigation bar is visible to the user while navigating to other pages then *NavLink* is a better choice.

``` javascript
import { NavLink } from 'react-router-dom'

<NavLink to = '/home' style = {{background: 'green'}} activeStyle = {{background: 'red'}}>Home</NavLink>
<NavLink to = '/about' style = {{background: 'green'}} activeStyle = {{background: 'red'}}>About</NavLink>
<NavLink to = '/dashboard' style = {{background: 'green'}} activeStyle = {{background: 'red'}}>Dashboard</NavLink>

```
**Link** too should be used with some kind of *navigation bar* but it will not be helpful in showing which tab is active without some extra *css* effort but the sole purpose of linking it to some URL will be served.
And also if the navigation bar is not visible to the user while navigating to other pages then *Link* is a better choice.

``` javascript
import { Link } from 'react-router-dom'

<Link to = '/home' style = {{background: 'green'}>Home</Link>
<Link to = '/about' style = {{background: 'green'}} >About</Link>
<Link to = '/dashboard' style = {{background: 'green'}} >Dashboard</Link>

```
AWS Community Builders Twitter chat with #100DaysOfCloud
Published: 2021-05-20 17:06:22

1 Night Only! 
Tonight 5/20 at 9pm Eastern time.
#100DaysOfCloud is hosting a Twitter chat on: https://twitter.com/100DaysCloud
Calling on all Past & Present AWS Community Builders to come join us and have some fun. Help us answer some questions about the program so future builders can learn about this wonderful opportunity! 
Hope to see you there! 

https://aws.amazon.com/developer/community/community-builders/
Finding an Archinstall Bug
Tags: archlinux, archinstall, linux
Published: 2021-05-20 17:05:53

I had an older laptop that I've been neglecting to reinstall Arch Linux on, and I came across the new Arch Installer (`archinstall`). So I decided to try it out.

I used the ArchLinux liveCD (About 2-3 months old) and booted it up. Since my LiveCD was not a newer one, `archinstall` was not available at default. So I updated the repo's with `pacman -Sy` and lo-and-behold I could install it with `pacman -S archinstall`.

I ran `archinstall guided` to get a feel for it and I made it to the partitioning scheme. At which point, `archinstall` quit stating...

```
ArchInstall currently only supports machines booted with UEFI. MBR & GRUB support is coming in version 2.2.0!
```

Great....

So I decided to checkout their Github project to see where they're at and I found

![github-issue](https://eli-xciv.github.io/content/images/size/w1000/2021/05/Screenshot_2021-05-20-archlinux-archinstall.png)

Legacy Support was closed! Okay, wait. Lets go look at it....

![github-closed](https://eli-xciv.github.io/content/images/size/w1000/2021/05/Screenshot_2021-05-20-archlinux-archinstall-1-.png)

Whoooooo, it's in master and should be completed. Lets check it out (literally w/ git).

```
git clone https://github.com/archlinux/archinstall
cd archlinux
```

cool we got master, now lets install the requirements..... 

```
python install
```

Now we can run this with python. `python -m archinstall guided`

I followed the prompt and this time it didn't complain about `MBR`. So cool lets select the default partitioning scheme.

...

Great, all config items are set, now let it rip,

```
Error: New partition never showed up after adding new partition on /dev/sda (timeout 10 seconds).
```

What!? - Okay maybe it's a fluke, lets run it again.

Same error....

Okay.... well lets look at `/dev/sda`. There's a partition there but that's from the OS I'm trying to write over.... well lets remove it since it'll be overwritten anyway.. and verify it's removed

```
$lsblk
/dev/sda
|-> /dev/sda1
$
$parted /dev/sda rm 1
$
$lsblk
/dev/sda
```

Now lets run `python -m archinstall guided` again...

Everything completes. Yay! Time to go report this to the `archinstall` folks.

And I did. [Here](https://github.com/archlinux/archinstall/issues/478)

So, if there is a will, there's a way!
Thanks for reading!
JavaScript is the Future | Podcast
Tags: javascript, podcast
Published: 2021-05-20 16:23:00

{% spotify spotify:episode:7wnK6Ok1iLU8DiNdwx7nUb %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment, and time management. You can join them for both their successes and their struggles as they try to manage to expand their Web Development business without stretching themselves too thin. 

## What's This One About?

In this episode Matt and Mike discuss something that most (if not all) web developers have heard about - JavaScript. JavaScript can take your web pages to the next level with all kinds of cool animations, interactions, and more...but...if you're new to web development you may not know all the power that is behind this seemingly simplistic language. Beyond that first glance JavaScript can do all kinds of things like make mobile apps, run website backends, and even (although in its infancy) power AR and VR technologies. Come learn all about JavaScript and why it has a high potential of taking over our futures by tuning into this episode!

## Show Notes
1:35 - What is JavaScript?
7:50 - V8 engine optimization
10:30 - ECMAScript facilitates fast new feature rollout
11:55 - Cross platform compatibility
34:50 - Full Stack development
36:55 - Massive community support

###The future of JavaScript
41:30 - TypeScript
45:00 - Blockchain development
47:05 - Machine learning
48:55 - Virtual/Augmented reality

## Corrections
* V8 JavaScript engine is used in Chromium based browsers. Safari and Firefox have their own JavaScript engineers. The claim that all browsers use the V8 engine was straight up wrong in the podcast. Sorry about that!

##Key Takeaways
* You can build anything with JavaScript. Web Apps, Mobile Apps, Web sites, Games, Desktop apps, and so on. Great starter language to learn and be able to accomplish almost any task. 
* JavaScript is easy to get started with because of its growing popularity and huge community. The community creates amazing tutorials and courses to easily teach anyone programming and web development. 

##Links
[https://twitter.com/DThompsonDev/status/1392823886127960067?s=20](https://twitter.com/DThompsonDev/status/1392823886127960067?s=20)


##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)
[Tiktok (htmlallthethings)](https://www.tiktok.com/@htmlallthethings?lang=en)
Translate PDF to Text & Text to Audio
Tags: developer, python, personalproject, vscode
Published: 2021-05-20 15:58:25


**The intent is to have a personal Translator program that translates PDF document into a langugae of your choice and then converts it into Audio**

##Concept: 
1. Any local file in PDF format can be picked up and converted. into a language of your choice. 
2. Use (tkinter) filedialog library to pick up a PDF file.
3. Use googletrans library to extract and translate.
4. Use pyttsx3 library for playing translated text.

##Featues:
1. Ability to load a file in PDF format.
2. Parse the file and extract content. 
3. Translate the file into the language of your choice. 
4. Play the translated text.


**Output:**

English to Japanese Translation:
![translatorwithPDF-Japanese to English](https://user-images.githubusercontent.com/834120/118864344-e2de3b00-b8ad-11eb-98e2-daec2925d1ad.GIF)

Japanese to English Translation:
![translatorwithPDF-Japanese to English](https://user-images.githubusercontent.com/834120/118864456-01443680-b8ae-11eb-8262-c5ae666bcb3a.GIF)

## Project in progress, Next Steps : Add pause and clear button
 
Code Repo : [Github](https://github.com/swapanroy/Translate-PDF-to-Text-to-Audio-)

*Call for Collab : Interested ? reach me on [Twitter](www.twitter.com/royswapan)*

Note:Thanks to Nubelson Fernandes for title photo via@unsplash 🎁

Reach me on my  [Twitter](www.twitter.com/royswapan)

Other item to look into: 
{% post https://dev.to/swapanroy/currency-converter-with-python-9ef %}

{% post https://dev.to/swapanroy/dictionary-using-api-calls-in-python-with-audio-pronunciation-3hjp %}
Closure as a strategy pattern
Tags: javascript, closure
Published: 2021-05-20 15:55:51

Recently I have a complicated task (and interesting too) and I've resolved it with closure, let's see how I do that.
(In case you didn't know about closure, I recommend [this link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures))

So, let's talk about the task. Imagine that we have a table that shows data get from a database. It has a search bar, a pagination, and sort buttons on every column so, on every change event, we have to fetch new data. Everything is fine till now. It's just a normal table on a modern website now.

And here is the hard part. Even though we just have one table, but based on the previous action of the user (some criteria), we have to fetch data in different ways.

To get more clear about the task, let see the following example:

![table task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5nvpsb1y998rtul3g1l.png)

In the example, we have a table that shows a list of cars. The list is fetched based on the user's action before (called outer criteria) combined which criteria of itself (search, paging, sort) (called inner criteria).

Basically, we can implement a table component that checks all criteria from outer and inner then make a request to the backend. But, I think, it isn't a good solution. Because, in this case, we just have 2 simple actions but in real life, we have more than 2 as well as more complicated.

So, my solution is using closure like strategy pattern. In simple words, the strategy pattern says a context can choose/select function at runtime. In our case is fetching data.

Then how to implement that?
It's very easy, instead of sending action criteria to the table component, we will send it a function, a closure function. And It will call that function to get a list of cars. A simple implementation as following:

{% gist https://gist.github.com/phinguyen202/c04e9a30b297e969e5e216f7b6007a9c %}

That's it. This approach makes functions easier to manage and extendable.

How do you think about this? Do you have any approach to this task?