teleren/devto huggingface dataset:
What is the best library to capture international phone numbers?
Tags: discuss, javascript, webdev, help
Published: 2020-10-01 04:15:17

---
title: What is the best library to capture international phone numbers?
published: true
description: Discussion on which phone library is best
tags: 
  - discuss
  - javascript
  - webdev
  - help
//cover_image: https://direct_url_to_image.jpg
---

I recently integrated http://intl-tel-input.com/ to capture international phone numbers (you can see the live stream [here](https://dev.to/antho1404/tailwindcss-discovery-and-integration-of-international-phone-numbers-1l2l)).

I'm not 100% satisfied with this library. Do you know other libraries that do the same job?
Rails db:migrate show alter SQL
Published: 2020-10-01 03:50:42

---
title: Rails db:migrate show alter SQL
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---


ref: https://qiita.com/pekepek/items/2dc9dfc9ed2b7f3b0f0c

#### 1. make a rake task
```ruby
task log: :environment do
  ActiveRecord::Base.logger = Logger.new(STDOUT)
end
```

#### 2. run a rake task with the log task
```sh
rake log db:migrate
```
Singleton Pattern
Tags: creational, designpattern, pattern, java
Published: 2020-10-01 03:48:11

Ensure a class has only one instance and provide a global point of access to it.

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

#Participants#

* Singleton: defines an Instance operation that lets clients access its unique instance. Instance is a class operation. Responsible for creating and maintaining its own unique instance.

#Code#
```java
public class Main {

	public static void main(String[] args) {
		Singleton s1 = Singleton.instance();
		Singleton s2 = Singleton.instance();
		if (s1 == s2) {
			System.out.println("Objects are the same instance");
		}
	}
}

public class Singleton {
	private static Singleton instance;

	protected Singleton() {
	}

	public static Singleton instance() {
		if (instance == null) {
			instance = new Singleton();
		}
		return instance;
	}
}
```

#Output#
```
Objects are the same instance
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
Dịch vụ của Khắc Dấu Mộc
Tags: dichvukhacdau
Published: 2020-10-01 03:40:20

Cơ sở Khắc Dấu Mộc chuyên nhận khắc con nhanh dấu lấy liền, khắc dấu lấy liền giá rẻ tại TPHCM, khắc con dấu theo yêu cầu thiết kế của khách hàng.
Cơ sở khắc dấu của chúng tôi với nhiều năm kinh nghiệm và sử dụng các công nghệ hiện đại nhất giúp cho con dấu của quý khách hàng:
• Độ bền cao, sử dụng sản phẩm cán dấu, con dấu chất lượng chính hãng
• Thiết kế theo đúng yêu cầu, thể hiện nội dung phù hợp nhất
• Bảo hành sản phẩm lên đến 2 năm
• Thời gian khắc dấu nhanh giao hàng tận nơi trong ngày
• Tại Khắc Dấu Mộc, bạn có thể đến trực tiếp cơ sở của chúng tôi hoặc gửi yêu cầu đặt hàng qua webiste, hotline, zalo để đặt hàng online tiện lợi nhất mà không cần phải đi lại, tiết kiệm thời gian, chi phí của bạn.
https://khacdaumocvn.com/danh-muc/khac-con-dau-tron
https://khacdaumocvn.com/danh-muc/khac-con-dau-vuong
https://khacdaumocvn.com/danh-muc/khac-con-dau-ten-chuc-danh
https://khacdaumocvn.com/danh-muc/khac-con-dau-hoan-cong
https://khacdaumocvn.com/danh-muc/khac-con-dau-logo
https://khacdaumocvn.com/danh-muc/khac-con-dau-oval
https://khacdaumocvn.com/danh-muc/khac-dau-chu-ky
Tailwindcss discovery and integration of international phone numbers 
Tags: livecoding, tutorial, tailwindcss
Published: 2020-10-01 03:35:41

---
title: Tailwindcss discovery and integration of international phone numbers 
published: true
description: I go through the tailwindcss documentation and get to know this UI framework
tags: 
  - livecoding
  - tutorial
  - tailwindcss
// cover_image: https://i9.ytimg.com/vi/FDRPFipPy8c/mq2.jpg?sqp=COSc1fsF&rs=AOn4CLBnjppQQONjiHWfqiN3Ow8snKP4Nw
---

Hello,

I published a new video and integrated a new website using [Tailwindcss](https://tailwindcss.com/). My application also needs users to give their phone numbers, so I decided to use https://intl-tel-input.com/ with more or less success.

{% youtube FDRPFipPy8c %}

Feel free to give your feedback, and please, if you have some recommendation on how to improve any of that, please share :)

Part 1: https://dev.to/antho1404/stripe-checkout-setup-and-integration-33ic
Higher-Order Components In React

Tags: react
Published: 2020-10-01 03:15:04

For this week's blog post I thought it would be a great idea to touch on higher order components in React! When I first heard about this technique it confused me, which drove me to dive deeper into the technique to better understand it. 
	According to the React Documentation,  a higher-order component (HOC) is “ An advanced technique in React for reusing component logic.” Essentially, a higher-order component is a function that wraps another function, “enhances” it by giving it more features, and then returns that “enhanced” component!

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


Using HOC’s is a great way to keep code clean and avoid writing the same or similar code throughout different parts of your React application. According to the React documentation, Higher-order components are considered to be an advanced technique. I’ve found that when trying to fully understand advanced techniques and patterns in programming, it’s best to create it and break down each part that seems to be confusing. I would definitely recommend using that learning approach in this situation. HOC can be confusing at first but once you get the hang of it, you’ll be excited at the opportunity to create them in your own code!
Does Anyone Still Code Golf? The 280 Character Challenge
Tags: python, showdev
Published: 2020-10-01 03:02:26

Awhile back, I had written a program to play Rock Paper Scissors in Python. It's a pretty simple program, but I really liked how eloquent the solution was. 

Flash forward a couple years and you'll find me, two years into a PhD program looking for anything to do but read more research. While browsing Twitter, I saw a tweet asking folks to share their favorite technical article:

{% twitter 1310692783909416961 %}

Now, I've been consistently writing two articles a week for the last four years, so I've amassed quite the collection of articles. But, for some reason, [that article on Rock Paper Scissors](https://therenegadecoder.com/code/rock-paper-scissors-using-modular-arithmetic/) is one that always sparks joy, so I decided to revisit it.

As many of you know, revisiting your old work is always a little weird. In this case, part of me was really excited to read it again because there's obviously a bit of nostalgia associated with it. Unfortunately, as I've learned while playing Super Mario 64 recently, sometimes you remember things as better than they were.

Well, when I was reading through that article, I noticed that there were ways I wrote the code that I wouldn't today. It was nothing major, but there were definitely things I would change. 

Of course, instead of editing the existing article, I decided to start a new one. This one would pick up where the last one left off two years ago. 

That said, instead of writing an article where I would slightly modify the code, I thought it would be fun to take a code golf approach. In other words, how small could I make the program while still maintaining some readability.

Unfortunately, when you go down this road, there's only one place it leads: incomprehensible code in as few characters as possible. 

While laying in bed after managing to shrink the program 25%, I had an idea: how cool would it be if I could shrink the program down to 280 characters, so I could post it in its entirety on Twitter? 

Alright, so maybe late night ideas aren't that great, but I went through with it anyway. Here's what that looks like:

{% twitter 1311450233717563401 %}

It's pretty wild, but those 280 characters are enough to execute a Rock Paper Scissors game in Python 3.8 against a computer. Go ahead! Try it!
Hacktoberfest is here! How do you get involved?
Tags: hacktoberfest, opensource, githunt
Published: 2020-10-01 02:37:01

It's here. October! And it's all about open source. This is the seventh year for Hacktoberfest, and it's bigger and better than ever. More maintainers are getting involved, more new contributors, and more events! So how do you get involved? Where do you start?

{% twitter 1310747809470054400 %}

Getting involved in open source can often be a little daunting. There's so many projects and so much noise. So how do you filter it all out? How do you find something?

Some tips for finding good projects for first time contributors are:
- does the project have a good [Readme file](https://www.twitch.tv/videos/751410803)?
- are there [good-first-issues](https://dev.to/github/good-first-issues-how-to-get-contributors-to-your-project-2c7f)?
- is the community welcoming?
- make sure you're passionate about what the project is doing

Finding a project actively looking for contributors is one of the best ways to get involved. Lots of projects now have good-first-issues, and even projects like [Supabase](https://github.com/supabase) have taken it one step further.

{% link https://dev.to/github/open-source-friday-with-supabase-4pi6 %}

I had the pleasure of interviewing Supabase recently, and their Hacktoberfest project board is on point! Check out their [board](https://github.com/orgs/supabase/projects/5) to easily see what skills they're looking for. You can even even filter between easy and hard contributions!

{% link https://dev.to/github/using-github-project-board-for-hacktoberfest-contributions-1lh8 %}

There's so many ways to get involved in open source, and you don't necessarily need to code. Projects are always looking for designers, writers, and managers. Whatever skills you have, you'll be needed. If you want to get involved, find a project you're passionate about and apply your skills to the project.

### Find out more about Hacktoberfest and contributing

If you're still not sure where to start, or you want some ideas on what projects to get involved with, we're here to help. Join us for some deep dives. We'll be streaming over on the [GitHub Twitch Channel](https://twitch.tv/GitHub) every week of Hacktoberfest. We'll be walking you through all things Hacktoberfest, how to get your PRs submitted, projects to get involved in, and what to look for when contributing.

[RSVP](https://www.meetup.com/en-AU/GitHub-Virtual-Meetup/events/273559165/) to stay in touch and up to date with the next event. If you have a Twitch account, you'll be able to engage with us and other members of the open source community. Looking forward to seeing you there, and can't wait for you to contribute to open source this October.
Using GitHub Project board for Hacktoberfest contributions
Tags: hacktoberfest, github, javascript, opensource
Published: 2020-10-01 02:32:59

Have you ever wanted to contribute to open source, but not sure where to start? [Good-first-issues](https://dev.to/github/good-first-issues-with-dry-rb-174i) is always a great place to begin if you're new to a project. But there's something even better!

On one of our recent [Open Source Friday streams](https://dev.to/github/open-source-friday-with-supabase-4pi6), I saw the most beautiful project board ever! [Supabase](https://supabase.io/) have built a project board specifically for [Hacktoberfest](https://hacktoberfest.digitalocean.com/). It's an easy to view board, laid out with various issues. Issues are grouped based on difficulty and type. This makes it really easy to see exactly where you can contribute based on your skills.

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

You can also use the search function to filter issues by language. This is probably one of the best uses of project boards I've ever seen. How are you using project boards?

If you want to see the full interview with myself and Paul from Supabase, watch it below. Don't forget to follow us on [Twitch](https://twitch.tv/github) to join the live sessions and interact with us.

{% youtube c1RUeRfqOJ8 %}
Had an amazing experience through participating in hacktoberfest 2k20
Tags: hacktoberfest, opensource
Published: 2020-10-01 02:27:49

Firstly, I am a beginner. I came to know about Hacktoberfest from one video. Frankly speaking,I was attracted to the goodies.
But,this competition helped me to learn about what actually the open source is and how to contribute in one!
Python: Get and Save Google images with Selenium
Tags: python, webdev, beginners, flask
Published: 2020-10-01 02:26:36

---
title: Python: Get and Save Google images with Selenium
published: true
description: 
tags: Python, webdev, beginners, flask
//cover_image: https://direct_url_to_image.jpg
---
Follow me!: <a href="https://twitter.com/EricTheCoder_" class="twitter-follow-button" data-show-count="false">Follow @EricTheCoder_</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<hr>
I create a small Python code to get and save images from Google images.

```python
from selenium import webdriver
import time, requests

def search_google(search_query):
    browser = webdriver.Chrome()
    search_url = f"https://www.google.com/search?site=&tbm=isch&source=hp&biw=1873&bih=990&q={search_query}"
    images_url = []

    # open browser and begin search
    browser.get(search_url)
    elements = browser.find_elements_by_class_name('rg_i')

    count = 0
    for e in elements:
        # get images source url
        e.click()
        time.sleep(1)
        element = browser.find_elements_by_class_name('v4dQwb')
        
        # Google image web site logic
        if count == 0:
            big_img = element[0].find_element_by_class_name('n3VNCb')
        else:
           big_img = element[1].find_element_by_class_name('n3VNCb')
    
        images_url.append(big_img.get_attribute("src"))

        # write image to file
        reponse = requests.get(images_url[count])
        if reponse.status_code == 200:
            with open(f"search{count+1}.jpg","wb") as file:
                file.write(reponse.content)
        
        count += 1

        # Stop get and save after 5
        if count == 5:
            break
    
    return images_url

items = search_google('dog')
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aeuxf084pnja8f39inxf.jpg)
Call a SQL function in EF Core 3 without Linq queries, mapping and translation
Tags: dotnet, csharp, entityframework
Published: 2020-10-01 02:17:35

I have come across couple scenarios where I need to call an already existing scalar function in SQL server that has some logic into my C# EF Core 3 application for reusability. But most the guides out there show how can this be done only by mapping it to a C# function with Throw new Notimplemented exception and using Linq queries like official documentation.
I did not need to use Linq queries so I am doing it in a different way as below.

Let’s say you have a SQL function.

````
CREATE FUNCTION dbo.IsStrogestAvenger(@Superhero varchar(100))
RETURNS bit
AS
BEGIN
    declare @result bit=0
    if(@Superhero ='Thor')
        set @result=1
    else
        set @result=0
RETURN @result
END
````

Now turn to our C# code.
For result, lets create a model to hold this output.

````
public class IsStrongestAvengerResult
{
   public bool IsStrongestAvenger { get; set; }
}
````

Map it in context class as below

````
public virtual DbSet<IsStrongestAvengerResult> IsStrongestAvenger{ get; set; }
````

And

````
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity<IsStrongestAvengerResult>(e => e.HasNoKey());
}
````


Now we use FromSqlInterpolated to call this function and map.

````
public bool IsStrongestAvenger(string Superhero)
  {
    return context.IsStrongestAvenger.FromSqlInterpolated($"select   dbo.IsStrogestAvenger ({Superhero}) as IsStrongestAvenger").FirstOrDefault().IsStrongestAvenger;
}
````

>*Important thing to note above is the use of AS >IsStrongestAvenger and it should match with the property name in >our model IsStrongestAvengerResult.IsStrongestAvenger*

Now this function can be directly call from C# to get the output.

Thank you for reading. Comments and Suggestion are highly appreciated.
Android Developer Roadmap Hacktoberfest!
Tags: android, hacktoberfest, roadmap, community
Published: 2020-10-01 01:48:33

Hey everyone!

Hacktoberfest is almost here and our Android developers community can't be out of this!

For this reason, and to improve our Android Developer Roadmap even more, we decided to create and invite you all to contribute in it with us in our new Study Content file, that can be filled with contents related to roadmap path, to help developers to have more tools to study important topics and to grow even more in our loved platform.

We already have issues about it and you can check it here: https://github.com/mobile-roadmap/android-developer-roadmap/issues

We expect your pull requests there!

Thanks and happy hacktoberfest!
VS Code setup for golang in 2020
Tags: go, googlecloud
Published: 2020-10-01 01:40:59

---
title: VS Code setup for golang in 2020
published: true
description: Snapshot of my current setup for vs code in 2020, extensions, settings, etc..
tags: golang,googlecloud
//cover_image: https://direct_url_to_image.jpg
---

My IDE setup usually change quite a bit overtime, so i figured it would be quite nice to document my current setup as a snapshot in time around the current development ecosystem that i am currently in.

My day to day tech stack usually revolves golang, and containers. I guess you could call that stack the 2020 serverless stack at this point really... Between using intellij ultimate and vscode i generally have a pretty consistent setup between either one. 


# Theme

- Color Theme: One Dark Pro
- Icon Theme: Material Icon Theme
- Font: Jetbrains Mono, Font Ligatures enabled

```json
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontSize": 13,
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.4,
  "editor.smoothScrolling": true,
  "workbench.iconTheme": "material-icon-theme",
```

![Theme Setup](https://dev-to-uploads.s3.amazonaws.com/i/9lidnvwr4beba7swdgvk.png)

## Settings for go

```json
  "go.lintOnSave": "file",
  "[go]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.organizeImports": true
    }
  },
  "go.docsTool": "gogetdoc",
  "go.formatTool": "goimports",
  "go.useLanguageServer": true,
```

## Extensions 

- Cloud Code (googlecloudtools.cloudcode) For all your serverless GCP needs (really nice way to run a cloud run like environment locally with it leveraging minikube)

![cloud code example](https://dev-to-uploads.s3.amazonaws.com/i/qkp3g89ubjrvjjnanpks.gif)

- Docker (ms-azuretools.vscode-docker) 
- GO (golang.go)
- gotemplate-syntax (casualjim.gotemplate)
- Golang postfix code completion (yokoe.vscode-postfix-go) This might be the most important extension to have installed. I find myself having more productive rhythm when using postfix tools across any language since i worry more about the core pieces of code and any thing else can be an afterthought. 

![demo](https://github.com/yokoe/vscode-postfix-go/raw/master/images/demo.gif)

- Intellij IDEA key mapping (k--kato.intellij-idea-keybindings)
I love `carton`, and you should to.
Tags: perl, hacktoberfest
Published: 2020-10-01 01:28:49

This one will be quick, promise!

Hacktoberfest is upon us once again, it's the most wonderful time of the year! That said, it's also the time where you dust off repositories that you haven't touched since _last_ Hacktoberfest and realize that you cleaned up the dependencies you were using. This, of course, leads to much frustration as you play whack-a-mole with the dependencies that you need. Granted, in Perl that's not as hard as it can be with Java or C++, but if you're doing it the "old fashioned way" where you simply hope you documented your dependencies, then you're in for a rough September 30th my friend!

Well, that's what just happened to me. Well enough is enough!

I've been using Carton a lot more lately, for work (https://github.com/washingtonpost/org-version-trawler) and now I'm also using it for play (https://github.com/net-amqp-rabbitmq/net-amqp-rabbitmq)!

What was that? I forgot to install `Module::CAPIMaker` after I cleaned up my Perl install? Grumble.

Let me just create my `./cpanfile`...

{% gist https://gist.github.com/manchicken/ec2c59547a28b676654a31dfa1e1b9b1 %}

And there you have it. I now have my package management working. One quick note about paths, though: you either need to add `local/lib/perl5` to your `PERL5LIB`, or you can simply prefix all of your commands with `carton run COMMAND_HERE` and it'll manage the paths for you.

See? That _was_ quick.

Now I'm off to `carton install` and cut this new build for `Net::AMQP::RabbitMQ`. Since it's October first somewhere, I'm hopeful that this counts as my first PR for Hacktoberfest 2020!
Dynamic and Abstract Nginx 
Tags: beginners, tutorial, microservices, todayisearched
Published: 2020-10-01 00:53:12

# Dynamic and Abstract Nginx

Nginx is a powerful webserver and can built dynamically by injecting environment variables with [envsubst](https://linux.die.net/man/1/envsubst) and importing modular configs with the [include](http://nginx.org/en/docs/ngx_core_module.html#include) directive.

## envsubst

<img align="center" alt="input/output" src="https://dev-to-uploads.s3.amazonaws.com/i/zi62s911lxxt0yy50dh5.png">

- Create `/etc/nginx/nginx.conf.template` with environment variables `${VAR}`
- Use envsubst to dynamically generate a new `/etc/nginx/nginx.conf`

```
# Define the environment variables
export SERVER='example' LOG='example'

# Run command to generate new nginx.conf
cd /etc/nginx
envsubst '${SERVER},${LOG}' < nginx.conf.template > nginx.conf
```

##### brew install

Mac users will need to install [gettext](https://www.gnu.org/software/gettext/) which includes envsubst.

```
brew install gettext
brew link --force gettext 
```

## Include

From the example above using the sample http config.

> `*` is a wildcard and will match on example.`com`.conf.

```
http {
    ...
    include /etc/nginx/conf.d/example.*.conf;
    ...
}
```

Here is an example folder structure for your Nginx modules.

```
/etc/nginx/
	nginx.conf					# HTTP
	/conf.d						# Server(s)
		example.com.conf		# Can contain multiple servers
		default.conf			# Comes with nginx
		*.conf
	/sites-enabled				# Includes
		/location				# Location Includes
			assets.inc			# /location blocks to static assets
			*.inc
		/SSL					# SSL Includes
			example.com.inc		# Contains SSL directives for example.com
			*.inc
		/*						# You can continue to modularize your code base
			*.inc
```

Check out this repo which has more `include` examples.

{% github 10up/nginx_configs no-readme %}
CSS Selectors 'nth-of-type' and '~'
Tags: html, css, javascript
Published: 2020-10-01 00:42:48

# Description
```css
p:nth-of-type(2)
/* Selects every <p> element that is the second <p> element of its parent */

p ~ ul
/* Selects every <ul> element that are preceded by a <p> element */
```
I often use those 2 selectors in CSS stylesheet.
But I did not know about this correctly.
So I would like to share about my fault here with all of us.

```css
div:nth-of-type(2n){
  background-color: red;
}
.c ~ .c {
  background-color:blue;
}
.d ~ .c {
  background-color:green;
}
```

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