teleren/devto huggingface dataset:
OAuth & Heroku Play Nice
Tags: codenewbie, rails, ruby
Published: 2020-07-01 18:22:34

Hosting my Rails app on Heroku was A Lot. But that story ended in success!

And yet, when I tried to log in using Google, no dice. My OAuth authentication that worked seamlessly prior to hosting on Heroku was now broken.

I won't tell you *exactly* how long it took for me to address this issue, but I will approximate: 2 months, shame on me!

My ever-patient-and-generous friend Noah helped me get the ball rolling, and I owe this guide and this knowledge to him. 

In the event you are in a similar spot and need to get your OAuth authentication working on your hosted app, Godspeed and may this help.

##Assumptions

1) You have built a Rails app with third-party authentication using OAuth.

2) You've already gone through the initial setup of Google APIs and created your original OAuth Client IDs - which you used within your app.

3) OAuth authentication is working when you host your app locally.

##Start here

1) Go here: [Google APIs](console.developers.google.com).

2) In the left-side menu bar, click on **Credentials**.

3) There you should see the header, **OAuth 2.0 Client IDs**.

4) Create a new URI (and keep the existing).

`https://your-app-url/auth/google_oauth2/callback`

6) Save your updates.

7) You'll then need to set your google client id and secret, and you can do so within your terminal. 

Run the following two commands:

`heroku config:set GOOGLE_CLIENT_ID=yourclientid`

`heroku config:set GOOGLE_CLIENT_SECRET=yoursecret`

It will set the id and secret and after each, restart the app.

8) Thought that would do it! But, login via Google continued to fail, and this time I received a semi-helpful error message about cross-site request forgery (csrf).

To combat this, I added the following to both my Users Controller and Sessions Controller - both of which deal with login:

`skip_before_action :protect_from_forgery, raise: false`

And that did the trick. 

If you've given this a try, or even if you've figured out how to do this already, sure would love to hear about your experience!

Thanks so much for reading - until next time.
How to launch ec2 instance in AWS and install LAMP (Linux, Apache2, MySQL, and PHP): Hands-on!
Tags: aws, tutorial, codenewbie, linux
Published: 2020-07-01 18:08:34

{% youtube beciCCqMdr8 %}
Let's understand, how to launch ec2 instance in AWS and install LAMP (Linux, Apache2, MySQL, and PHP).

The points will be covered in this tutorial are below
00:00 Launch EC2 instance on AWS
06:03 Install Apache2 server
07:22 Install Mysql
08:36 Install PHP

Prerequisite
You should have an AWS account.

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/ 

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
YouTube Video | Create App using unsplash API in ReactJS — 1
Tags: react, webdev, showdev, youtube
Published: 2020-07-01 18:06:58

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel.

We will create an web app from scratch using ReactJS, which will consume the Unsplash API. We can search for any image from unsplash.com and it will show them.

{% youtube -uuUI5zKE0M %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

You can also read the complete blog here -

https://thewebdev.tech/image-search-unsplash-react-1
Webpack style-loader, what does it cost?
Tags: webpack, css, javascript, webperf
Published: 2020-07-01 18:06:23

If we are not carefully writing our webpack config file, then may be the css styles are getting loaded via css-loader and style-loader through any default framework configurations. 

To revisit, css-loader converts the css file into javascript string. And style-loader injects that string to html dom. The former operation causes no issue as it happens during _say_, compilation time. But the latter happens during run time which is, every time user loads the page. 

This is the [link](https://github.com/svaani/style-loader-test) of a very minimal webpack configuration code. Here, bootstrap is considered as it is a pretty large library and for the sake of measuring the numbers. All that displays is a DOM alert message with bootstrap class. When we observe the performance, it causes one layout operation per css file which is shown as below.

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

Many times, we have one css file per module. That means, if we have 20 modules, we will have 20 additional layout operations. 

So, we must carefully bundle the css using any external webpack loader and load it separately. 

_Thanks for reading_
How to host your website on AWS S3 Bucket & setup your domain using Route 53
Tags: aws, s3, tutorial, codenewbie
Published: 2020-07-01 18:01:48

{% youtube chvAsxNrn5s %}
In this tutorial, we will learn how to host your static website on AWS S3 Bucket and add your custom domain using Route 53

Prerequisite
1. You should have an AWS account.
2. Domain
3. Static Website

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/


Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Definition of ready DOR and definition of ready DOD templates
Tags: agile
Published: 2020-07-01 18:01:40



Defining when a task can be started or when the task is completed is a basic requirement that helps the development team to control the flow of tasks and avoid getting stuck when requirements are not clearly defined

## Definition of done DOR

First definition helps the team to validate if a task is ready for starting the development. Next is a basic list of validations than can help the team determining if a task has the necessary information:

```
├── Is ready to start?
│   └── acceptance criteria is correctly described?
│       ├── If is a user interface, are the prototypes well defined and the gherkins written?
│       ├── If is an API, are all the entities and their attributes defined?
│       └── if (task cannot be started)
│          ├── add a comment
│          ├── move to parking lot
│          ├── assign to the person responsible for solving
│          └── end
├── update task status
│   ├── check estimated story points
│   ├── move the task to in progress
│   ├── create branch to work
│   └── create a pull request
└── end
```
## Definition of done DOD

```
├── basic validation
│   ├── follow TDD required tests?
│   ├── do structure follows CQRS structure?
│   ├── test that every jira requirement was completed?
│   ├── follows the required graphical design?
│   └── are resources translated?
│       └── was static code analysis performed?
├── developer local tests
│   ├── validate that all automated tests are working
│   ├── check static code analysis results
│   ├── format code if needed
│   ├── check comments grammar
│   ├── remove commented code
│   ├── remove visual studio warnings
│   └── test with other required services
├── developer test environment validation
│   ├── commit changes
│   ├── merge changes from the integration branch
│   ├── remove static analysis reported errors
│   └── send pull request
│   └── basic integrated tests
```
A different bookmark management tool
Tags: javascript, extension, chrome, webdev
Published: 2020-07-01 18:00:25

Bookmarking content on the web is not a new thing and there are so many third-party apps already doing that. However, most people I know, do not use them or choose to use makeshift methods like copy-pasting URLs somewhere on their PC and mobile. 

The reason behind this?

These bookmarking tools do nothing to ensure that you actually visit the content you have saved. They focus on the saving part, while **completely ignoring the retaining part of the process**. 

For this, I have built a chrome extension called - **Netsips**.

What Netsips does differently that once you bookmark content, it ensures that it is shown to you later like you intended to. 

How?

###1) You save the articles using Netsips extension.

![Save](http://netsips.in/cws1.png)


###2) You choose the day(s) you want to be reminded of them

![Select](http://netsips.in/settings_pic.png)


###3) You receive a compilation of all your bookmarks in a PDF format in your email

![Receive PDF](http://netsips.in/cws3.png)


Now, you can create and read your reading list in a PDF format, whenever you want without any ads bothering you! Consume the content while it's still relevant. 

Moreover, Netsips also provides you with a bookmark management dashboard so you can organize and manage your bookmarks much better. 

To check out Netsips -> [Chrome Web Store](https://chrome.google.com/webstore/detail/netsips/gbahaeoliekjdeaklngijenopidoifhc)
What is DynamoDB | Serverless Application using Python(part-3) | Hands-on
Tags: aws, serverless, tutorial, codenewbie
Published: 2020-07-01 17:59:59

{% youtube kWfWiyuMLL0 %}
In this tutorial, we will learn what is DynamoDB and connect from AWS Lambda and execute the Lambda function.

This is a series of tutorial for serverless where will learn how to develop a serverless application using AWS Lambda, API Gateway, and DynamoDB.

Prerequisite
1. You should have an AWS account.
2. Basics of Python

Boto3: https://boto3.amazonaws.com/v1/documentation/api/latest/guide/dynamodb.html

Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
What is an Amazon API Gateway | Serverless Application using Python(part-2): Hands-on!
Tags: aws, serverless, tutorial, codenewbie
Published: 2020-07-01 17:58:30

{% youtube lMMHNJ8gwaI %}
In this tutorial, we will learn what is API Gateway and connect to AWS Lambda and execute the Lambda function.
This is a series of tutorial for serverless where will learn how to develop a serverless application using AWS Lambda, API Gateway, and DynamoDB.

Prerequisite
1. You should have an AWS account.
2. Basics of Python

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/


Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Ruby Conf 2005 Agenda Released
Tags: pastrubies
Published: 2020-07-01 17:56:40

**Enjoying PastRubies? Know a friend who would be into this type of content? Let em know! :)**   
  
_Past Rubies is a tiny weekly newsletter that shares curated historical content from the Ruby community. Consider it Ruby's version of 'on this day in history'. New issues every Wednesday. [Subscribe](http://pastrubies.com)_

* * *

## [RubyConf 2005 Agenda Released](https://web.archive.org/web/20050708034507/http://www.rubyconf.org/agenda.html)
  

 ![Jfxrkqd](https://i.imgur.com/JFxrKQD.png)
  

_This week in 2005 saw the release of that year&#39;s RubyConf agenda. I always find these as a gold mine for really interesting information about what was going on in the Ruby Community at the time! I was tempted to make this week just highlighting the talks of the time but think you&#39;ll enjoy parsing the agenda as much as I did. Familiar faces included DHH and Matz, and other legends such as the late Jim Weirich and Ryan Davis. Would have loved to have been there!_

## [Converting Ruby to Javascript (fourteen years ago!)](https://web.archive.org/web/20080528153536/http://po-ru.com/diary/convert-ruby-to-javascript/)
  

 ![Kkml0c9](https://i.imgur.com/kkml0C9.png)
  

_In 2006 this week London&#39;s Paul Battley had written a Ruby-to-JS converter in under 200 lines of Ruby code. It&#39;s hairy, and I didn&#39;t even try to run it nowadays. However it&#39;s a real treat to see folks looking at these issues when even JavaScript still feels so young sometimes. If you play around with the code let us know! (But I&#39;m unsure how much use you&#39;d get out of 2006-JS these days...)_

## [Let&#39;s collect some garbage](http://blade.nagaokaut.ac.jp/cgi-bin/scat.rb/ruby/ruby-talk/147345)
  

 ![Eij6syx](https://i.imgur.com/eIj6SYx.png)
  

_Now if you want to dig into the real, REAL nitty gritty of Ruby history, it can be a lot to parse but the `ruby-talk` community is great. It&#39;s something I&#39;m going to try to feature more. Today&#39;s `ruby-forum` only goes back to 2008, but you can still get back into the 2000&#39;s with some gumption. (Which we all have, right?) This week in 2005 we say an interesting post that piqued the Ruby community, having a dig into the **GC** and finding weird failing edge cases. I think sometimes it&#39;s too easy to just think of the Garbage Collector as a **there be dragons** area of Ruby and never play around with it. This thread and following discussion is a \*great\* example of that._

## [Web spidering back in the day](http://www.rubyinside.com/web-spidering-with-anemone-1927.html)
  

 ![Ixlsq1i](https://i.imgur.com/IxLSQ1I.png)
  

_If \_why is the Herodotus of Ruby circa 2003-2009, then [Peter Cooper](https://rubyweekly.com) is the Tacitus of Ruby 2006-present. We are so grateful for all of his work the last decade to effectively chronicle the goings on of Ruby. Here he shares a neat tool of the time, Anemone, to manage your own spiders and configure your own web crawling. Neat!_
Paso a paso de construcción de un modelo en Vensim
Published: 2020-07-01 17:55:59

---
title: Paso a paso de construcción de un modelo en Vensim
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
Nuestro objetivo es construir un **modelo**, en el cual podamos realizar simulaciones. En este caso, el modelo trata de población.

# Paso 1
Una vez en Vensim,debemos configurar lo limites de tiempo de nuestro modelo, eso lo hacemos en la pestaña `models > settings > Time Bounds`.

Para este modelo lo dejamos configurado de la siguiente manera:

![Configuración de limites de tiempo del modelo](https://dev-to-uploads.s3.amazonaws.com/i/vm6sd8vyd0ovwh354swn.png)

# Paso 2
How to Host Multiple Websites on One Apache Server: Hands-on!
Tags: tutorial, codenewbie, virtualhost, apache
Published: 2020-07-01 17:54:37

{% youtube qf_9H9He6I0 %}
In this tutorial, We will learn how to configure a virtual host on the Apache2 server. 

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/


Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
How to Configure AWS Certificate Manager for Websites Hosted on EC2: Hands-on!
Tags: aws, cloud, tutorial, codenewbie
Published: 2020-07-01 17:52:03

{% youtube 4mn9DFypGG4 %}
In this tutorial, we will get started with ACM(AWS Certificate Manager) and I will take you through the free SSL installation step by step using AWS Application Load Balancer and Rout53.

00:00 Welcome
01:36 What is SSL
02:14 Why AWS Certificate Manager
02:52 How to create Certificate for your domain using ACM, LoadBalancer, and ROUT53

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
How to install Free SSL on your websites with Cloudflare: Hands-on!
Tags: tutorial, cloud, codenewbie
Published: 2020-07-01 17:50:31

{% youtube 0lgKTsNv3zc %}
In this tutorial, you will learn how to install Free SSL on your websites or applications with cloud flare.com.

Content:
-----------------------------------
00:00 Welcome
00:20 What is Cloudflare?
00:48 Why Cloudflare?
01:48 Setup your Domain
06:25 End-to-End protection

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
How To Get FREE SSL for your Website with Let's Encrypt on EC2 Ubuntu 18.04: Hands-on!
Tags: tutorial, codenewbie, ssl, free
Published: 2020-07-01 17:47:58

{% youtube 2sMrf9LiO00 %}
In this tutorial, you will learn how to install Free SSL on your websites or applications with Let's Encrypt.

Note:
You can renew your certificate using Cron job by executing the command below: 0 * * * * certbot renew 

Content:
--------------------------
00:00 Welcome
00:39 What is Let's Encrypt
00:54 Why Let's Encrypt
02:00 Install Let's Encrypt on your server

Follow on:
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Leave any questions in the comments section and don't forget to subscribe to be notified of new content! :)
Day 6 of #30DaysOfCode | pointers and new() in golang
Tags: go, codenewbie, motivation, challenge
Published: 2020-07-01 17:44:11

Today is the 6th day of #30DaysOfCode challenge. I started my day by reading the Go Programming Langauge Book by  Alan A. A. Donovan and Brian W. Kernighan. And I would like to share what I have learned today with you so let's just jump right into the code.

First, Take a look at the image below and try to understand the code.

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


There are multiple ways to declare a variable and I learnt a new way today. You can also declare a variable using new() function. The new function takes the type(such as int bool string) as an argument and it returns the address of the memory location. In the example, the new function is creating an integer type variable and it is returning the address. In the line just below, we are accessing the value of the variable using the * symbol.

There is just one thing that I want to learn from this post at least, which is that the * symbol is used to access the value and & is used to access the address of the variable in the memory. And if you understand this then it will help you in understanding how pointers work. But just keep in mind that when * is used before a type (such as int, bool or string), it means a different thing. We will talk about this in my later posts. So don't worry about that for now. Just know that in this example, it means that the function takes a pointer of type int.

In the example, we have a function which increments the value of the variable. The function takes a pointer of type int as an argument. We are using the * symbol to access the value and we are returning the value. In the main function, we are using & symbol to access the address and we are passing the address in the incr() function. The function runs and it increments the value of the variable by 1. And that's all that our program does.
I hope that it's all clear to you. If you have any question then feel free to ask in the comments below.

Alright! That's all for today and I will see you in my next post. Bye.


Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Creating Chrome extension in under five minutes
Published: 2020-07-01 17:37:31

---
title: Creating Chrome extension in under five minutes
published: true
description: A very simple guide to creating Chrome extension
tags: 
cover_image: https://images.unsplash.com/photo-1544449464-e8cab52594a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80
---
Developing an extension for chrome is very easy and doable with just HTML, CSS and JavaScript.

## What are we building

We are building simple extension that reads an API from Breaking Bad quotes and shows it, that is it.

## Step 1

We need to create few files to have a chrome extension `index.html`, `manifest.json` ,`script.js` and a png file for your icon. You can add style.css file and link it but I am keeping this as simple as possible.

## Step 2 - working with manifest.json

This is a JSON file that contains data about your extension. 
Most of its attributes are self explanatory. Here is a full example of our extension `manifest.json`
```
{
  "manifest_version": 2,
  "name": "Breaking bad",
  "description": "The breaking bad quote extension",
  "version": "1.0",
  "browser_action": {
    "default_icon": "bb.png",
    "default_popup": "index.html"
  }
}
```

Please note that manifest_version, name and version are required. 
Most important part here is `browser_action`. This is where you tell chrome where to find file to open and icon to have in chrome.

## Step 3 - Markup

This markup is going to to have a header and a section to have our quote after API calling is done

```
<!DOCTYPE html>
<html>
  <head>
    <title>Breaking bad</title>
  </head>
  <body>
    <main style="text-align: center;" class="pt-20">
      <h1 class="text-center text-4xl font-bold leading-10 tracking-wide">
        Breaking bad quotes
      </h1>
      <section id="quote-section"></section>
    </main>
    <script src="script.js"></script>
  </body>
</html>
```

## Step 4 - The JS part

In our index.html we have imported `script.js` file. This file is going to call `https://breaking-bad-quotes.herokuapp.com/v1/quotes` and get a random Breaking Bad quote. 

Here is the script for our extension
```
var quoteSection = document.getElementById('quote-section');

fetch('https://breaking-bad-quotes.herokuapp.com/v1/quotes')
  .then((res) => res.json())
  .then((res) => {
    console.log(res);
    quoteSection.innerHTML = '<div>' + res[0].quote + '</div>' + '<h4>' + res[0].author + '</h4>';
  });
```

## Step 5 - Uploading extension

This is s simple drag and drop step. But before make sure you have enabled developer mode in your browser. Then head to `chrome://extensions/` and drag the folder where all files in and drop inside extensions tab.

That is it. The full code is found [in this repo.](https://github.com/tarekhassan410/BreakingBadExtension)