teleren/devto huggingface dataset:
Developing Real-Time Web Applications with Server-Sent Events
Tags: node, react, sse, standards
Published: 2018-07-26 11:01:19

---
title: Developing Real-Time Web Applications with Server-Sent Events
published: true
description: Learn how to create real-time web applications by using the Server-Sent Events specification.
tags: #nodejs #reactjs #sse #standards
canonical_url: https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/
---

Server-Sent Events (SSE) is a standard that enables Web servers to push data in real time to clients. In this article, we will learn how to use this standard by building a flight timetable demo application with React and Node.js. However, the concepts you will learn following this tutorial are applicable to any programming language and technology. 

[Read on 🏌️‍♂️](https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/?utm_source=dev&utm_medium=sc&utm_campaign=sse_app)

![Developing Real-Time Web Applications with Server-Sent Events](https://thepracticaldev.s3.amazonaws.com/i/plhe3e3rc4epmfs1w2k3.png)
How to install Let's Encrypt on Apache running Ubuntu 16.04
Tags: ssl, ubuntu, security, linux
Published: 2018-07-26 10:54:37

---
title: How to install Let's Encrypt on Apache running Ubuntu 16.04
published: true
description: Installing Lets Encrypt SSL certificates on Apache using an Ubuntu VPS
tags: SSL, Ubuntu, Security, Linux
---

Install
On Ubuntu systems, the Certbot team maintains a PPA. Once you add it to your list of repositories all you'll need to do is apt-get the following packages.

```
$ sudo apt-get update
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:certbot/certbot
$ sudo apt-get update
$ sudo apt-get install python-certbot-apache
```

Get Started
Certbot has a fairly solid beta-quality Apache plugin, which is supported on many platforms and automates certificate installation.

```
$ sudo certbot --apache
```

Running this command will get a certificate for you and have Certbot edit your Apache configuration automatically to serve it. If you're feeling more conservative and would like to make the changes to your Apache configuration by hand, you can use the certonly subcommand:

```
$ sudo certbot --apache certonly
```

Automating renewal
The Certbot packages on your system come with a cron job that will renew your certificates automatically before they expire. Since Let's Encrypt certificates last for 90 days, it's highly advisable to take advantage of this feature. You can test automatic renewal for your certificates by running this command:

```
$ sudo certbot renew --dry-run
```
Vue templates for Firebase Auth 🔥
Tags: vue, firebase, authentication, pwa
Published: 2018-07-26 10:53:35

---
title: Vue templates for Firebase Auth 🔥
published: true
description: Simplified Firebase authentication for vue projects with support for Facebook & Google login & Github & Twitter and with support Progressive Web Apps
tags: #vue #firebase #authentication #pwa 
---

![alt tag](https://i.imgur.com/5AnRW5j.png)

Simplified Firebase authentication for vue projects with support for Facebook & Google login & Github & Twitter and with support  Progressive Web Apps


## Config
### Step 1
Firebase Auth Provides Method Email/Password,Google,Facebook,Github,Twitter Enabled  [Firebase console](https://console.firebase.google.com/)

### Step 2
Initialize Firebase At `main.js` [Firebase Credentials](https://console.firebase.google.com/)
```javascript
firebase.initializeApp({
    apiKey: '',
    authDomain: '',
    databaseURL: '',
    projectId: '',
    storageBucket: ''
})
```

## Installation

``` bash
# Git Clone Project
git clone git@github.com:aofdev/vue-firebase-auth-vuex.git

# Cd project
cd vue-firebase-auth-vuex

# install dependencies
npm install || yarn install

# serve with hot reload at localhost:8080
npm run dev || yarn dev

# build for production with minification and to build Progressive Web Apps
npm run build || yarn build

```

**Source Code:** [vue-firebase-auth-vuex](https://github.com/aofdev/vue-firebase-auth-vuex)
How to get in shape as a developer?
Tags: question, discuss
Published: 2018-07-26 10:16:42

---
title: How to get in shape as a developer?
published: true
description: how to maintain a healthy lifecycle?
tags: question,discuss
---

Hey all, 

I’ve often wondered, how do I get in shape when I’m very much out of shape? What is needed to maintain a healthy lifecycle as a developer who works 12 hour days in average?
業務における関心事がずれていく話
Tags: 業務
Published: 2018-07-26 05:02:08

---
title: 業務における関心事がずれていく話
published: true
description: 
tags: 業務
---

## 業務における関心事は固定ではない

長いスパンで開発をすると初めに定義した業務における関心事が、開発を終えてみるとずれている。

⇒無理やり運用でカバー

⇒システムを手運用するはめに⇒せっかくのシステムの価値が・・・

⇒運用の負担も増

## ビジネスロジックの誕生

業務における関心事は変えられるようにしておく

⇒ビジネスロジックの誕生

ビジネスロジックはアルゴリズムと違って、技術に依存しない。

## ところが

ビジネスロジックを生かすことに注力するあまり、システムの性能が落ちたり、リソースが不足することがある。

当初の業務量予測とはかけはなれてしまう

⇒スケールアップ可能なシステム設計の誕生

複雑で高度なシステムの維持コストが増加

コンパクトな運用を迫られる

⇒サーバレス化による運用コストの節約
⇒Microservice化による運用チームの横断化（コスト節約）

## また今度考える
Namaste!
Tags: hello, firstpost
Published: 2018-07-26 04:31:34

---
title: Namaste!
published: true
description: this is some description    
tags: hello, firstpost
---

Hia there, 
This is my first post in dev.to. Just looking for a good developer community to be a part of. Looking forward! :bowtie:

PS: Please support emojis in the editor :D
An Intern's Point of view
Tags: career, beginners, internship, intern
Published: 2018-07-26 02:56:25

---
title: An Intern's Point of view
published: true
description: Some thoughts from an intern
tags: career, beginners, internship, intern
---
![sterotypical code picture](https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3f1d38bbdda690e28a81673c06325075&auto=format&fit=crop&w=1489&q=80)

Before I get too far ahead of myself I think I should say a little about me.
As I am writing this post I am starting the first day of the last week of 
my second internship. I have worked for a small(ish) insurance company and I am currently working for a large well-known company.

So armed with a cup of coffee, most of a CS degree, and just shy of 6 months
in the industry I have some observations. YMMV 

* The coffee is sacred. The coffee is life. Bring down the site, bring down the prod-like environments. **DON'T** bring down the coffee
* Everyone has [impostor syndrome](https://dev.to/kathryngrayson/share-your-experiences-with-impostor-syndrome). The best cure is to focus on the work.
* At the same time the [Dunning–Kruger effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect) exists too and is alive and well. You'll fall into both buckets at times, try to stay out of both.
* 5 minutes on Google can save you 10 minutes of trying to find out where the hell your mentor/senior/liege/etc. is at the moment
* Your senior will feel way less awkward answering questions than you will asking them
* That guru that seems to have all the answers was an intern at some point too
* You may have the opportunity to Q&A with upper management or executives. Ask questions. Listen to the answers. Remember that no one has any of this figured out and act accordingly.
* This will be one of the only moments of the entire experience that you will not have any questions. Come prepared.
* Hopefully your organization reminds you that you are here to learn. If not remind yourself. 
* Your fellow interns will help get you through this experience, be good to them. They'll likely follow suit. 
* Dress well. The way you are perceived is important, at this point your age works against you.  
* Productivity is a false god. Work diligently, but inspired thoughts won't always come in neat 25 or 90 minute intervals.
* There is a special place in hell for people who take conference calls on speaker in their cubicle.
* This may be your first job, but it probably won't be your last. Make some mistakes, learn from them, and have some fun
An Intern's Point of View
Tags: career, beginning
Published: 2018-07-26 02:40:55

---
title: An Intern's Point of View
published: true
description: Some thoughts from an intern
tags: career, beginning
---

Before I get too far ahead of myself I think I should say a little about me.
As I am writing this post I am starting the first day of the last week of 
my second internship. I have worked for a small(ish) insurance and I am currently working for a large well-known company.

So armed with a cup of coffee, most of a CS degree, and just shy of 6 months
in the industry I have some observations. YMMV 

* The coffee is sacred. The coffee is life. Bring down the site, bring down the prod-like environments. **DON'T** bring down the coffee
* Everyone has [impostor syndrome](https://dev.to/kathryngrayson/share-your-experiences-with-impostor-syndrome). The best cure is to focus on the work.
* At the same time the [Dunning–Kruger effect](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect) exists too and is alive and well. You'll fall into both buckets at times, try to stay out of both.
* 5 minutes on Google can save you 10 minutes of trying to find out where the hell your mentor/senior/liege/etc. is at the moment
* Your senior will feel way less awkward answering questions than you will asking them
* That guru that seems to have all the answers was an intern at some point too
* You may have the opportunity to Q&A with upper management or executives. Ask questions. Listen to the answers. Remember that no one has any of this figured out and act accordingly.
* This will one of the only moments of the entire experience that you will not have any questions. Come prepared.
* Hopefully your organization reminds you that you are here to learn. If not remind yourself. 
* Your fellow interns will help get you through this experience, be good to them. They'll likely follow suit. 
* Dress well. The way you are perceived is important, at this point your age works against you.  
* Productivity is a false god. Work diligently, but inspired thoughts won't always come in neat 25 or 90 minute intervals.
* There is a special place in hell for people who take conference calls on speaker in their cubicle.
* This may be your first job, but it probably won't be your last. Make some mistakes, learn from them, and have some fun
CSS Loading Effect
Tags: html, css, css3, webdev
Published: 2018-07-26 01:40:35

---
title: CSS Loading Effect
published: true
description: CSS Loading Effect
tags: html,css,css3,webdev
---

Css provides good opportunity to create loading effect. There is no need to include external gif loader.



HTML : 

```html
<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

```


CSS : 

```css
.spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

```




Few other types of CSS Loader

http://tobiasahlin.com/spinkit/

https://loading.io/css/
Pair programming with VS Code
Tags: video, vscode
Published: 2018-07-25 02:43:43

---
title: Pair programming with VS Code
tags: video, vscode
canonical_url: https://zellwk.com/blog/vs-live-share
description: VS Live share lets you do setup a pair programming session with your partner remotely. You're going to learn how to setup VS Live Share, how to start a collaboration session and how to join one.
published: true
---

{% youtube vq5FzSPmu-I %}

Today I'm going to share with you an awesome plugin that lets you live code with other people. It is called VS Live Share.

What we're going to do today is to setup VS Live Share. I'll also show you how to start a collaboration session and join a collaboration session.

## Installing VS Live Share

What you want to do is to install the [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) extension. The VS Live share extension can be found in Visual Studio Code's extension marketplace.

Type VS Live Share into the search box and you'll be able to find it.

Then, click on install to install the extension.

Then, click on reload.

## Signing in the VS Live Share

You will see a "Sign in" button at the bottom left corner of Visual Studio code, on the status bar. Click on the "Sign in" and a window will pop up to ask you to sign in.

You can sign in with a Microsoft account or a Github account. In my case, I use Github.

Now, you're ready to collaborate.

What happens next depends on whether you're starting a session or joining a session.

## Starting

If you are starting the session, you can click on your name at the bottom left corner, and select start collaboration session. Alternatively, you can simply click on "Share" to start the session.

Once you started the session, VS Code will show you a notice on the bottom right hand corner. It'll say a link has been copied to your clipboard.

You can click on "Copy again" to make sure the link is copied onto your clipboard.

This link looks like this:

```
https://insiders.liveshare.vsengsaas.visualstudio.com/join?0EUI09T34IISNETHUI09435
```

You'll pass this link to your parter for them to join your session.

## Joining a session

To join a session, you click on your name on the bottom left hand corner, then click "Join collaboration session" and paste the link your parter gave you.

That's it.

## Making it better

You might want to use a video chatroom application like [Zoom](https://zoom.us) or [appear.in](https://appear.in) to chat and type code at the same time.


<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/vs-live-share/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
Windows 10 Insider Preview フィードバックの報告方法の変更について
Tags: windows10, insider, windows
Published: 2018-08-01 01:23:35

---
title: Windows 10 Insider Preview フィードバックの報告方法の変更について
published: true
tags: windows 10,insider,windows
canonical_url: https://takimura.hateblo.jp/entry/2018/07/26/081158
---

[Windows](http://d.hatena.ne.jp/keyword/Windows) 10 Insider [Preview](http://d.hatena.ne.jp/keyword/Preview)のフィードバック Hubにて、報告手順に変更がありました...

[Read more](https://takimura.hateblo.jp/entry/2018/07/26/081158)
TypeError: 'int' object is not subscriptable
Tags: help
Published: 2018-07-25 23:10:22

---
title: TypeError: 'int' object is not subscriptable
published: true
description: 
tags: help
---

So here is the situation: I have a json object, requested from a 3rd party source, that has a list of items. 14 of them.

I am able to display them all by count: ie. 0,1,2,3...13. This is what I used to display them.

x = my_request["jsonObject"]["items"]
for ex in range(x):
  print(ex)

But each one of these items have additional attributes from within and I want to access at least one item's attribute. Let's say the one I want to access is "item_color", and according to the jSON file it is nested with other attribute.

This was my attempt:
for ex in x:
  print(ex["itemInfo"]["color"]) 

But I get an 'int' object is not subscriptable.

Is there a way for me to display the attribute that I want to display on the console, just like how I displayed all the items by count?

Please find a screenshot of the json object I am manipulating below to get a better idea.

https://www.dropbox.com/s/apao25r9j2b22ir/Screen%20Shot%202018-07-25%20at%204.07.36%20PM.png?dl=0
Talk: Using Keras with Apache MXNet on Amazon SageMaker
Published: 2018-07-31 15:04:51

---
title: Talk: Using Keras with Apache MXNet on Amazon SageMaker
published: true
tags: 
canonical_url: https://medium.com/@julsimon/talk-using-keras-with-apache-mxnet-on-amazon-sagemaker-69769df03658
---

I recently had the pleasure to deliver this session during the [AWS Innovate online conference](https://aws.amazon.com/events/aws-innovate/). I covered this topic in a [previous blog post](https://medium.com/datreeio/training-with-keras-mxnet-on-amazon-sagemaker-43a34bd668ca), but here’s the live action video ;)

Happy to answer questions here or on [Twitter](http://twitter.com/julsimon).

{% youtube c8Nhwr9VmfM %}
I choose self-learning!
Tags: beginners, discuss, career, help
Published: 2018-07-25 22:31:55

---
title: I choose self-learning!
published: true
description: There's no a right way to learn how to code.
tags: beginner, discuss, career, help
---

Hey guys! On my [last post](https://dev.to/brendazam/code-camp-or-self-learning-1klc) I asked for your help because I needed to decide a way to go in my developer life, as I said, a lot of you gave me awesome advice, and with that I made a choice, to go with self-learning. 

I don't know from where you are, but at least here in Mexico, (you're invited to visit and eat tacos with me) the tech community it's small, focused on just a couple of cities and if you don't have access, you can only try to go to college, books (a few) or internet. Now, analyzing the pros and cons, I decided self-learning. Make a plan, what kind of developer I wanna become, what's the job that I would like, find courses according to my learning method (I hate boring voices). 

But I also need pressure so I don't stop doing it, so [I started this] 
(https://www.youtube.com/watch?v=-nw-ANXaJVM&t=
), it's my own vlog, where some newbies can learn, get advice on what courses to take and so a lot of awesome people like you guys can help me become an awesome developer. 

I also create a design for my vlog, I think it's important to show always my personality, I haven't named it yet, so if you have some names for this little one, tell me! 

![Husky](https://thepracticaldev.s3.amazonaws.com/i/fx0dwz8rit7lwiugdpsf.png)

Thanks for all your support guys, my vlog is in Spanish but with cc in English, there's not a lot of content in Spanish so I wanna take that as an advantage.

Love you guys!
Hugs & Husky love 🐶
DEV Interview with Google Chrome Developers!
Tags: meta
Published: 2018-07-25 20:32:48

---
title: DEV Interview with Google Chrome Developers!
published: true
description: 
tags: meta
---


Hey! Just wanted to share this interview @ben and I did with Rick Viscomi from the Google Chrome team. We got to talk all about The DEV Community, from why we built the platform to certain trends we've discovered. It was lots of fun to film, but WOW, is it hard to watch yourself on video 😅

{% youtube ptJAlOSewW8 %}

If you haven't already, [please share your opinion on the current state of the web](https://dev.to/survey). We'll be going over the results next month!
SuperPWA - is a WordPress plugin to easily convert WordPress website into PWA
Tags: superpwa, progressivewebapps
Published: 2018-07-25 20:26:27

---
title: SuperPWA - is a WordPress plugin to easily convert WordPress website into PWA
published: true
description: SuperPWA is a WordPress plugin that helps to easily convert a WordPress website into a PWA easily.
tags: superpwa, progressive web apps
---
Super simple and fast delimited CSV data normalization with AWK
Tags: showdev, tutorial, productivity, bigdata
Published: 2018-07-25 20:01:06

---
title: Super simple and fast delimited CSV data normalization with AWK
published: true
description: 
tags: showdev, tutorial, productivity, bigdata
---

There was a discussion [here](https://dev.to/ben/which-programming-languageenvironment-is-more-powerful-than-people-realize-3cle) on dev.to which programming language or tool more powerful than people realize?

I shared my AWK snippet, where I normalize a 8GB sized delimited CSV data source for database import, only with AWK, as fast as a Go counterpart program. This task completes in 7 minutes on my home machine, same as my Go code:

```awk
#!/usr/bin/awk -f

# This block only runs once at the start, before the first line
# Use this to print CSV header on the top
BEGIN {
	FS="|"; # input field separator
	OFS="|"; # output field separator
}

# This block runs at every line
{
	# We will order a new named variable to every column
	line = $0; # variable `$0` stores the entire line
	url = $1;
	title = $2;
	body = $3
	tags = $4;

	if (line ~ /^$/) next; # if line is blank, then skip it
	if (NF != 4) next; # if column count is not equal to 4, then skip the line

	# Skip any line where tags column contains the word "cars"
	if (index(tags, "cars") != 0) { next; }

	# Normalize the url column with regex by only keeping the article id
	# Example input: <a href="https://example.com/article/foo123456">Hello</a>
	gsub(/.*example\.com\/article\/|[\042].*/, "", url); # outputs: foo123456

	# Skip lines that has non-alphanumeric characters in url column (like <>#&@)
	# Skip lines that has empty url column (after gsub normalization)
	# Skip lines where url starts with foo or bar
	if (url !~ /[[:alnum:]]/ ||
		length(url) == 0 ||
		url ~ /^foo|^bar/) {
		next;
	}

	# Replace multiple ; with one (needed for errorless CSV import in Postgres)
	gsub(/[\073]+/, ";", tags);

	# Print the line with OFS, aka: profit! :)
	print url, title, body, tags;
}

```

Then you should run this with:

`$ zcat my-csv-file.zip | ./normalize.awk | sort --field-separator="|" --key=1,1 > normalized-sorted.csv`

Pro tip: combine this with `tail` command when updating DB later on. ;)

Maybe you find this snippet useful and saves you countless time to develop similar solution in Python or Go. You're welcome!

If you have anything to add or modify, then shoot me!
Ripple Effect Animation On Button Click With CSS3
Tags: javascript, css, webdev, html
Published: 2018-07-25 18:02:50

---
title: Ripple Effect Animation On Button Click With CSS3
published: true
description: Ripple Effect Animation On Button Click With CSS3
tags: #javascript #css #webdev #html
---

Post Link : https://www.skptricks.com/2018/01/ripple-effect-animation-on-button-click-with-css3.html

If you have used lollipop version of android you see a nice ripple effect on button clicks. This tutorial is about achieving similar result, the CSS ripple effect on button clicks.

CSS Ripple effect does not involves any javascript or jquery library. The effect is achieved using CSS3 animation. Keyframe property of css provides very smooth animation effect.


<a href="https://www.skptricks.com/2018/01/ripple-effect-animation-on-button-click-with-css3.html"> Ripple Effect Animation On Button Click With CSS3 </a>

<img src="https://2.bp.blogspot.com/-cy3K4SYmxfA/WmTHwtisd4I/AAAAAAAABNc/7X5gTxG_u5krl2wfTjHFPGztkJ9KXWNrACLcBGAs/s400/ripple.jpg" title="Ripple Effect Animation On Button Click With CSS3" />

<iframe width="520" height="315"
src="https://www.youtube.com/embed/sMbSIch1gxk">
</iframe>

{% youtube sMbSIch1gxk %}
How to handle date, date time and timezone in API, UI, Database
Tags: discuss, webdev, programming, api
Published: 2018-07-25 17:10:00

---
title: How to handle date, date time and timezone in API, UI, Database
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/usenu6m6chxttm8vcog8.png
tags: discuss, webdev, programming, API
---
Handling date, date time and timezone is very difficult part of coding. Especially if your application is going to be access across countries from different regions.
It’s always painful to modify your code to support multiple time zones after production deployment. So before going it to production I need help.
Please share the standard technique to handle date and date time through out application i.e. at API, at UI and at Database level