teleren/devto huggingface dataset:
Displaying third party data - Building SaaS #7
Tags: python, django, saas
Published: 2019-09-24 18:02:09

{% youtube fNEZ_1dmVyE %}

In this stream episode, we added our third party integration (Prompt) to the page where school information is displayed.  This involved some Django model changes, view additions, and template development.

Show notes for this stream are at [Episode 7 Show Notes](https://www.mattlayman.com/building-saas/display-third-party-data/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-09-24 17:53:07

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

@miguelmota jumped into the **[Explain Kubernetes to me like I'm Five](https://dev.to/inidaname/explain-kubernetes-to-me-like-i-m-five-5a3f)** thread to offer a great explanation using the analogy of cows and a rancher:
{% devcomment filh %}

The **[What would the programming language sorting hat pick for you, and why?](https://dev.to/ben/what-would-the-programming-language-sorting-hat-pick-for-you-and-why-57cp)** produced some fun replies.  @integerman talked about their likely pick if they put on that programming-sorting-hat:
{% devcomment fikd %}

@andrewbrown provides a wonderful list in response to **[If you were tasked to conduct a security audit on a server/database-backed web app, where would you start?](https://dev.to/ben/if-you-were-tasked-to-conduct-a-security-audit-on-a-server-database-backed-web-app-where-would-you-start-573o)**:
{% devcomment fe54 %}

There's always a lot of fun conversation surrounding **[How to exit Vim](https://dev.to/jeremy/how-to-exit-vim-11dm)**.  @gypsydave5 provides a fairly thorough list of tips for those looking to exit:
{% devcomment fgo0 %}

Finally, **[The Interview Study Guide For Software Engineers](https://dev.to/seattledataguy/the-interview-study-guide-for-software-engineers-764)** was an incredibly popular read.  @smitjel talks about something to keep in mind as you study and prepare:
{% devcomment fe0e %}

See you next week for more great comments ✌
MailChimp Popup Dialog on Click
Tags: javascript, mail, mailchimp, popup
Published: 2020-04-17 04:55:36

---
title: MailChimp Popup Dialog on Click
published: true
date: 2019-09-24 17:42:00 UTC
tags: javascript,mail,mailchimp,popup
canonical_url: http://english.catchen.me/2019/09/mailchimp-popup-dialog-on-click.html
---

## Problem
 

MailChimp provides sign-up form as pop-up dialog, but has limited options for when to trigger it. Available triggers are like “immediately after the page is open”, “when the user scrolls to the bottom of the page”, etc. **I want to trigger the dialog when a reader clicks the sign-up link on my blog.** Instead of navigating to the sign-up page, I want to open the dialog and speed up the experience. I hope this can improve subscription rate.

 
## Solution
 

MailChimp provides an HTML snippet for the pop-up dialog. It contains two `<script>` tags. I left the first one untouched and modified the second one. Read the code below for reference:

 <script src="https://gist.github.com/CatChen/06063464c7c205fe477243f18b439f27.js"></script> 

In the first `<script>` tag, I did nothing. In the second `<script>` tag, I wrapped the original JavaScript in a function called `displayDialog`, which will be called in the sign-up link’s click event. I added a third `<script>` tag to search for sign-up links in the page and add the click event handler.

 

Within `displayDialog` function, I not only call the original code in the second `<script>` tag but also delete two cookies before that. That’s because MailChimp set one of these cookies when a user dismisses the dialog or subscribes through the dialog. The presence of one of the cookies will prevent the dialog from opening again. This behavior makes sense when using MailChimp’s automatic triggers – a user shouldn’t see a dialog again after either dismissing or subscribing. It doesn’t make sense when the trigger is user clicking a link because it’s a clear intention to open the dialog. **(If you want to reuse my code, remember to replace `window.dojoRequire(...)` with the code from your own MailChimp campaign.)**

 

The third `<script>` tag is customized for my own blog. It looks for any link that points to the sign-up page and add the click event handler. The event handler calls `displayDialog` to trigger the dialog and then cancels the browser’s navigation to the sign-up page.

 

If you want to test this feature, make sure you open this post from my blog and [click this link to subscribe](https://chen.cat/subscribe-to-blogs). It should open the sign-up dialog instead of the sign-up page. If you like this post, remember to put in your email and subscribe!

 ![](http://feeds.feedburner.com/~r/CatChen/English/~4/w6zmPW0iFsQ)
Quick start with docker in windows 10 : Part 1
Tags: docker, devops
Published: 2019-09-24 17:26:43

- first install docker desktop app in your local windows 10 machine from google
- open that docker app // docker starting will be displayed in notification
- after that docker is running

- then open cmd

# show docker install version
```bash
docker --version
```

pull docker image

```bash
docker pull IMAGE_NAME:tag
i.e

docker pull ubuntu:latest
```

# list available docker images
```bash
docker image ls
```

# to run a docker run image 
```bash
docker run IMAGE_NAME
```
# now list which container is mapped to your docker image and running one
```bash
docker ps
```
# run the container of your image
```bash
docker exec -it CONTAINER_NAME /bin/bash
```
!! now you are in the bash mode of your container


# committing the changes made in container
```bash
docker commit CONTAINER_NAME IMAGE_NAME:tag
```
# after that you can stop container , your changes would be kept
```bash
docker stop CONTAINER_NAME
```
# list all active containers
```bash
docker container ls
```
# list all active images/containers history
```bash
docker image ls -a
docker container ls -a 
```
Add a Published Field to Your Gatsby Posts to Control Their Visibility
Tags: gatsby, javascript
Published: 2019-09-24 17:15:15

---
title: Add a Published Field to Your Gatsby Posts to Control Their Visibility
tags: gatsby, javascript
published: true
canonical_url: https://stevenmercatante.com/manage-draft-posts-in-gatsby
---

## The Problem

After converting [my site](https://stevenmercatante.com) to Gatsby, I quickly realized I needed a way to manage draft posts - pieces of writing I started, but for whatever reason weren't ready to be released publicly. Gatsby makes your posts public by default - as soon as you create that Markdown file and build your site, your post is available for all to see.

## The Solution?

Easy! Throw a `draft: true|false` flag in the post's frontmatter, update the page query to only fetch pages where `draft === false`, and call it a day. Or, maybe not...

## The Real Solution

The problem with the `draft` flag is that it's not explicit enough for this use case. The post will still be made public if I either forget to include the `draft` flag, or if it has a typo (e.g `dratf: false`).

Let's flip the conditional on its head and check if a `published` flag is `true` instead. What if I forget to add that flag, or have a typo (👋 `publisehd`)? The post doesn't appear until I fix the flag. This is a minor annoyance, but not as bad compared to if I accidentally publish something that isn't ready to be released.

## The Code

Here's the frontmatter for this post - nothing crazy going on:

```yml
---
title: Manage Draft Posts in Gatsby
slug: '/manage-draft-posts-in-gatsby/'
tags: gatsby
published: false
---

```

And here's my page query:

```graphql
query {
  allMdx(
    filter: { frontmatter: { published: { eq: true } } }
    sort: { fields: [frontmatter___date], order: DESC }
  ) {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
        }
      }
    }
  }
}
```

That `frontmatter: { published: { eq: true } }` line in the `filter` block is where the magic happens.

A few things to keep in mind:

- you'll need to restart your Gatsby dev server after adding new fields to frontmatter before you can query them
- adding a `published` flag has implications if you have Previous Article and Next Article links: you need to make sure you're not linking to unpublished articles. I'll show you how I handle that in the future article. Stay tuned, friends!

👋 **Enjoyed this post?**

Join my [newsletter](https://stevemerc.com/newsletter/?r=dev) and follow me on Twitter [@mercatante](https://twitter.com/mercatante) for more content like this.
Headless CMS + JavaScript renderer
Tags: javascript
Published: 2019-09-24 17:09:16

I have been developing my portfolio website for years and each time I stopped, mainly because I was overthinking things. This time I am developing the minimum viable product which must meet the following requirements.

- accessibility to the nth degree
- headless cms to decouple front end and prevent me from rolling my own for some reason
- Vue with tsx (no classes)
- fully unit tested

I used contentfull in the past which was enjoyable, but each component used its own id prop that mapped to the content id that populated it, that was a nice approach because it leant itself to things I value most, reuse and flexibility... However there is a gotcha, requests, requests, requests. Every piece of data would link to some other bit of UI via a reference, that sounds okay but each reference was just a pointer to some data, it soon became API spaghetti. 

This time was going to be different, I cut a branch named contentful, I realized that the free CMS plan didn't offer the solution I needed, enter graphql. Graph query language let's you in a word, query what you want your API to return in one request. So there you go, just get the data for the view before router navigation and hey presto, one request, plenty of data. The idea is so appealing but I needed a platform as good as contentful. Google revealed GraphCMS, it had a free developer plan with some catches, but still it did give me graphql powers, I took performance over features like internationalisation.

So I'm happily learning to query my graph and thinking about this in a different way. I will show you when it's ready for feedback. Thanks for reading.
How do you count your lines of code?
Tags: benchmarks, performance, css, javascript
Published: 2019-09-24 17:06:38

---
title: How do you count your lines of code?
published: true
description: How do you count your lines of code? There is css, javascript and html.
tags: benchmarks, performance, css, javascript
---

As Javascript developers, we have to wield several technologies to get a UI built. How do you go about counting your lines of code on a per screen basis?

Do you factor in css line-count and html line-count or do you look at your line-count as being pure Javascript logic?
Javascript Learning From Scratch -00001
Tags: javascript, beginners, postone, khanacademy
Published: 2019-09-24 16:58:27

background(255,200,60)

255->Red
200->Green
60->Blue

RGB color mode

arkaplan rengini değiştirir.

||||||||||||||||||||||||||||||||||||||||||

ellipse(186, 193, 245, 287);

186-> x position
193-> y position
245-> width
287-> height

çizilen elipsin boyutu ve konumunu belirleme

||||||||||||||||||||||||||||||||||||||||||

fill(22, 33, 44);

22->Red
33->Green
44->Blue

RGB color mode

çizilen nesnenin iç yüzeyini boyamak içindir.

||||||||||||||||||||||||||||||||||||||||||

line(83, 116, 271, 74);

84-> x1 point position
116-> y1 point position
271->x2 point position
74-> y2 point position

line çizginin oluşturulmasını sağlar.

||||||||||||||||||||||||||||||||||||||||||

stroke(250, 0, 242);

250->Red
0->Green
242->Blue

RGB color mode

stroke çizginin rengini belirler. yani dış sınırını.

||||||||||||||||||||||||||||||||||||||||||

strokeWeight(33);

33-> line weight

çizginin kalınlığını oluşturur.

||||||||||||||||||||||||||||||||||||||||||

rect(200,100,44,55);

200-> x position
100-> y position
44-> width
55-> height

çizilen dikdörtgenin boyutu ve konumunu belirleme

||||||||||||||||||||||||||||||||||||||||||

arc(241,237,111,122,0,180);

241-> x position
237-> y position
111-> width
122-> height
0-> start of arc
180-> end of arc

Bayağı parametre alıyor yay çizimi ilk dördü hepsindeki gibi aslında, yalnız son 2 parametre açının başlangıç değeri ve bitiş değerini vermektedir. Yani 0 ile 180 arasını açısal değer olarak kabul edeceğiz. 30, 140 olsaydı bu değerler sırasıyla -> açısal değer 110 derece olacaktı.
Stubbing calls to AWS in Rails tests
Tags: rails, testing, tips
Published: 2019-09-24 16:40:17

I use `aws-sdk` gem to deal with file uploads to S3 in my Rails application. I needed to add tests for the account logo upload and removal feature. I use Paperclip gem to do the file uploads. 

Typically, applications use file storage in test environment to avoid hitting AWS API but in this application I was constrained to not use file storage in test environment.

Obviously I did not want to hit the AWS API during tests. I came up with a solution using a technique provided by `aws-sdk` gem.

Just drop following line of code in `test_helper` or `rails_helper`.

``` ruby
# Stub all calls to AWS
  config.before do
    Aws.config.update(stub_responses: true)
  end
```

And you are good. All API calls to AWS are now stubbed!

Happy testing.
Deterministic Ansible
Tags: ansible, devops, automation
Published: 2019-09-26 16:42:09

---
title: Deterministic Ansible
published: true
tags: ansible, devops, automation
canonical_url: http://bakey.us/blog/posts/deterministic-ansible/
---

Recently I had to deploy AppDynamics agents out to some systems that ran both tomcat and JBOSS workloads, and here's how I used one playbook to rule them all.

___

## 1 - Figure out which platform I was dealing with

```ansible
#check to see if we're tomcat or jboss
- name: Check to see if tomcat user exists
  stat:
    path: /home/tomcat8
  register: tomcat8

- name: check to see if jbossadm user exists
  stat:
    path: /home/jbossadm
  register: jbossadm
```

As you can see, I'm doing a simple stat module check on the home directory of the user running the java workload here.  In our use case those 2 users would never coexist on a server.

## 2 - Swap ownership on files/folders based on our findings above

```ansible
#creates directory path
- name: Create the directories for site specific configurations owned by tomcat8
  file:
    path: /usr/local/appdynamics/appagent/
    state: directory
    owner: tomcat8
    group: tomcat8
    mode: 0755
  when: tomcat8.stat.exists

- name: Create the directories for site specific configurations owned by jbossadm
  file:
    path: /usr/local/appdynamics/appagent/
    state: directory
    owner: jbossadm
    group: jbossadm
    mode: 0755
  when: jbossadm.stat.exists
```

So, in each case we're creating the same folder path and changing linux file system ownership based on which platform we're running this ansible playbook on.

The [stat](https://docs.ansible.com/ansible/latest/modules/stat_module.html) module and [when](https://docs.ansible.com/ansible/latest/user_guide/playbooks_conditionals.html?highlight=conditionals#the-when-statement) conditions are pretty powerful tools you can use to make Ansible super flexible without having to pass a bunch of extra parameters in to control which tasks get executed in your playbooks.
How I can pass a state obtain for a onchange select and pass it like a parameter in a another component using fetch api
Tags: react
Published: 2019-09-24 16:12:45

//this is my component Formulario where I obtain idDepartamento using a onchange event

import React, { Component } from 'react';
import Provincia from './Provincia.js'
class Formulario extends Component {
    constructor(props) {
        super(props);
        this.state = {departamento:[],idDepartamento:null };
    
        this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
       // this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    handleChangeDepartment=(event)=> {
    
        this.setState({idDepartamento: event.target.value});
        alert(this.state.idDepartamento)
     
      }
 
  
    componentDidMount() {
        fetch("http://10.85.110.6:81/api/Departamento")
        .then(res => res.json())
        .then((data) => {
          this.setState({ departamento : data })
          console.log(data)
        })
    }
  
  
      
       
    render () {
        const {departamento,idDepartamento,provincia}=this.state;
        let optionItems = departamento.map((departamento) =>
                <option key={departamento.idDepartamento} value={departamento.idDepartamento}>{departamento.descripcion}</option>
            );
         
    
        return (
            <div>
            <form onSubmit={this.handleSubmit}>
             <select onChange={this.handleChangeDepartment}>
                {optionItems}
                
             </select>
    
               <Provincia />
   

           
             </form >
            
             </div>
        )
    }
}
    export default Formulario;

/// and here is where I want to pass idDepartamento like parameter using fetch api
import React, { Component } from 'react';
import Formulario from './Formulario.js'
const tournyAPI="http://10.85.110.6:81/api/Provincia?idDepartamento=4";
class Provincia extends Component {
    constructor(props) {
        super(props);
        this.state = {provincia:[],idDepartamento:props.id,idProvincia:'',departamento:[] };
    
        this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
       // this.handleSubmit = this.handleSubmit.bind(this);
    }

    
    handleChange(event){
        this.setState({idProvincia: event.target.idProvincia});
        console.log(event.target.idProvincia);
    }
  
 
    componentDidMount() {
        const abc=this.handleChangeFormulario();
        fetch(tournyAPI+abc)
        .then(res => res.json())
        .then((data) => {
          this.setState({ departamento : data })
          console.log(data)
        })
    }
    render(){
        const {departamento,idDepartamento,provincia}=this.state;
    let provinciaItems = provincia.map((provincia) =>
    <option key={provincia.idDepartamento} value={provincia.idDepartamento}>{provincia.descripcion}</option>
);
        return (
            <div>
                {provinciaItems}
            </div>
        )
    }

}
    
    export default Provincia;
LeetCode "Pow(x, n)"
Tags: leetcode, python
Published: 2019-09-24 15:48:32

---
title: LeetCode "Pow(x, n)"
published: true
description: 
tags: [leetcode, python]
---

[Pow(x, n)](https://leetcode.com/problems/powx-n/)

I had amazed that everyone can write short code😨

```python
class Solution:
    def myPow(self, x: float, n: int) -> float:
        
        if n == 0:
            return 1
        elif n == 1:
            return x
        elif n == -1:
            return 1/x
        
        n1 = int(n / 2)
        v = self.myPow(x, n1)
        if n % 2 == 0:
            v *= v
        else:
            v *= self.myPow(x, n - n1)                
                
        return v
```
An Overview Of Amazon Web Services (AWS)
Published: 2019-09-24 15:28:17

AWS stands for Amazon Web Services, a cloud Solution provider.
With this portal, I’m trying to explain the key points of the AWS, categorised in the kind of services.

[General] (https://dev.to/vikashagrawal/aws-general-2c71)
[Security Identity And Compliance](https://dev.to/vikashagrawal/aws-security-identity-and-compliance-mpa)
[Compute](https://dev.to/vikashagrawal/aws-compute-services-2pig)
[Storage](https://dev.to/vikashagrawal/aws-storage-services-4ocl)
[Database](https://dev.to/vikashagrawal/aws-database-services-303p)
[Application Integration](https://dev.to/vikashagrawal/aws-application-integration-18oi)
[Management Tools] (https://dev.to/vikashagrawal/aws-management-tool-4p1k)
[Network And Content Delivery](https://dev.to/vikashagrawal/aws-network-and-content-delivery-371d)
[Analytics](https://dev.to/vikashagrawal/aws-analytics-41da)
[Customer Engagement](https://dev.to/vikashagrawal/aws-customer-engagement-774)
[Desktop And App Streaming](https://dev.to/vikashagrawal/aws-desktop-and-app-streaming-42io)
[Media Services](https://dev.to/vikashagrawal/aws-media-services-4pi5)
[Migration Services](https://dev.to/vikashagrawal/aws-migration-services-k9b)
[Developer Tools] (https://dev.to/vikashagrawal/aws-developer-tools-4228)
Working with upstream repos
Tags: git
Published: 2019-09-15 07:02:36

---
title: Working with upstream repos
published: true
description: A quick write up on how to keep your down stream repos up to date.
tags: git
---

A downstream repository (aka a “*fork*”) maintainer commonly needs to stay current with upstream work (aka "*original*"). The case is development continues on the upstream repo while you work on your own origin fork. You want to fetch the upstream changes and apply them to your origin so you don't make conflicts.

![image cannot be displayed](https://i.stack.imgur.com/LtFGa.png)

The following steps allow you to achieve this on the command line in a local git repository.

## Add the Remote Upstream Repository

This step defines the upstream repository of your fork. First is the syntax followed by an example.

```bash
git remote add <any_name_you_choose> [Upstream git URL]
git remote add upstream https://github.com/QubesOS/qubes-doc.git
```

## Fetch the Upstream Branches

```
git fetch <the_name_you_chose_earlier>
git fetch upstream
```

## Merge Upstream Changes into your Downstream Repository

From your master branch, use the following merge command to merge the upstream master branch changes into your local source:

```
git checkout origin/master
git merge upstream/master
```

You then can either merge into the branch you were previously working on or start a new branch. Since starting a new branch is easy, this sample is merging the master branch into the develop branch.

```bash
git checkout origin/develop
git merge origin/master
```

# Workflow Example

![image cannot be displayed](https://docs.rhodecode.com/RhodeCode-Enterprise/_images/git-flow-diagram.png)

1. You *fork* from the upstream repo using clone and then create a *local* copy on your computer.
2. You create a new branch branch-1 off of the master branch to do your work on.
3. You push those commits from branch-1 to your own origin repo.
4. You then create a *pull request* with the upstream repo into the master branch.
5. Your *pull request* is merged into the master branch and development continues on the upstream master branch past your *local* and origin repo.
6. You then have to fetch the upstream repo before you continue your work to avoid conflicts
7. You then push the upstream changes to your origin repo keeping origin up-to-date with upstream.

# Legend

|  Access  | Upstream | Origin | Local |
|----------|:--------:|:------:|:-----:|
| Own      |   No     |  Yes   |  Yes  |
| Read     |   Yes    |  Yes   |  Yes  |
| Write    |   No     |  Yes   |  Yes  |
| Remote   |   Yes    |  Yes   |  No   |