teleren/devto huggingface dataset:
How to download Instagram videos with VideoDuke for Mac
Tags: downloader, video, youtube, instagram
Published: 2019-09-11 07:46:51

---
title: How to download Instagram videos with VideoDuke for Mac
published: true
description: 
tags: downloader, video, youtube, Instagram,
---

![Videoduke interface](https://i.ibb.co/XzCjGG6/2019-01-10-3-06-19-PM.png)
Just imagine you can download photos or videos from Instagram on Mac in 1 click! This can be done using VideoDuke and other powerful download apps from the article. Read on to find [detailed information](https://www.yazsoft.com/instagram-video-download-mac.html).
Adding Angular Reactive Form Web Components to your static site
Tags: webcomponents, webdev, discuss, angular
Published: 2019-09-12 01:46:49

---
title: Adding Angular Reactive Form Web Components to your static site
published: true
tags: webcomponents, webdev, discuss, angular
cover_image: https://res.cloudinary.com/ajonp/image/upload/q_auto/v1568114056/ajonp-ajonp-com/blog/Web_Components.webp
series: static-site-webcomponents
canonical_url: https://ajonp.com/blog/adding-angular-reactive-form-web-component-to-static-site/
---

> Shoutout to Alligator.io for all the [help](https://alligator.io/angular/custom-form-control/) on this one!

# Adding dynamic features to a static site.

This is a multi part series covering all the different types of Web Components I am using on the [https://ajonp.com](https://ajonp.com) site currently. I just wanted to show how you can use each of them at a somewhat high level.

I was inspired to share more by Max's post: 

{% link ionic/why-we-use-web-components-2c1i %}

## Fully Functioning Angular Reactive Form in Web Component

This is SUPER simple, it sets the default value in the form to `Alex`, we will take this further in another part of the series to include more validations.


{% stackblitz ionic-core-angular-webcomponent-working %}

### Console output for example

This shows the `formGroup` values with `displayName: 'Alex'` as expected.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/v37qluuhug4ujkeoxbx4.png)

## Issue with using ion-input

Logged an [issue](https://github.com/ionic-team/ionic/issues/19326) (which had me banging my head for 24 hours) with Ionic repo.

{% stackblitz ionic-core-angular-webcomponent-not-working %}

## The BEST Part

Now we can package up a simple example as an NPM package (or GitHub package) and utilize it in other apps.

Let me know what you think!
What's your favourite job board?
Tags: discuss, career
Published: 2019-09-11 06:51:43

---
title: What's your favourite job board?
published: true
tags: discuss, career
---

How do you usually apply for frontend/JavaScript or other IT positions?

- through the company website
- through Linkedin
- through job boards

What's the website that works best for you? Asking for a couple of friends wanting to change job.
Bootcamp challenges and how I have adapted in the last few weeks
Published: 2019-09-11 06:37:30

There is a saying that says "The brain needs to be regularly challenged in order to attain its uttermost performance" and it was Michelle Obama who said, " Believe in yourself, take on your challenges, dig deep within yourself to conquer fears". I believe that we should never see challenges as disadvantages rather, they should be an advantage to grow and get experience in facing and overcoming difficulties. 
It has been almost two weeks into the Bootcamp and we had many challenges to overcome, so as to reach here. It is my first time at Bootcamp and this only was challenging, as I did not know what we had to do at the Bootcamp and what was required to be well feet for the Bootcamp. Then I had to adapt to the new environment of hard workers who can't let even a second pass for nothing.
The biggest challenge was that I started learning javascript when I applied to Andela. After receiving an email invitation to the Bootcamp, I had really to work harder as I was new to most of the tools, we had to use in the ADC(Andela Developer Challenge) and this was my first web application. Even though it was a little scaring but it also encouraged me to work harder so that I will be able to go with others and to finish everything I had to do.

Another challenge I met at the Bootcamp was stress management. As almost everything is new to me, I first have to find time to get some basic knowledge on it and after I integrate that thing into the ADC. This requires to take more time so as to accomplish everything. It was via the help of the LFAs(Learning Facilitator) and my team members who helped to boost my skills and manage this hard challenge.
The challenges I met through the Bootcamp booted my skills being technical and none technical skills, I learned a lot from them and what is amazing is that I have so far been able to adapt myself through those challenges even though it is not easy.

The biggest lesson from the challenges is that no matter what kind of difficult situations I pass through, I have to find the inner strength to get through everything. Now I am thankful to what I have been able to learn and accomplish with my ADC and I am looking forward to learn and get more.
My Capybara note
Tags: rails
Published: 2019-09-11 06:28:53

---
title: My Capybara note
description: This is my main capybara note.
tags: rails
series: note
published: true
cover_image: 
canonical_url:
---

# Overview
Capybara is good for Rails E2E (Feature) testing. It simulates user actions on a browser, like find a button and click it, wait for the next page. You can choose Selenium Driver or others as web driver. 


# SetUp
{% link n350071/setup-a-capybara-242g %}

{% link n350071/stop-pause-headless-selenium-testing-with-capybara-4mc0 %}

# Usage
## 🔨 prepare
{% link n350071/making-complex-test-data-in-capybara-2ojn %}

## 👁 look around your site
### inside of HTML
{% link n350071/find-in-capybara-4ohm %}

{% link https://dev.to/n350071/link-in-capybara-336k %}

{% link n350071/narrow-down-scope-with-within-in-capybara-rails-testing-14hi %}

### browser manipulation

{% link n350071/capybara-session-page-navigations-12de %}

## ✅ assert
{% link n350071/is-ignored-converted-to-a-space-at-capybara-find-text-3ef7 %}
{% link n350071/test-css-icon-with-capybara-5fb8 %}
{% link n350071/haveselector-is-good-for-waiting-test-in-capybara-5g5d %}
{% link n350071/capybara-like-sharedexamples-18be %}


```ruby
# get current path
current_path

# spec/rails_helpers/feature_helper.rb
module FeatureHelpers
  def current_path_with_params
    uri = URI.parse(current_url)
    "#{uri.path}?#{uri.query}"
  end
end
```

## 📝 form
{% link n350071/checkbox-in-capybara-3emj %}
{% link n350071/attach-a-file-in-capybara-52ke %}
{% link n350071/capybara-find-input-set-will-have-not-done-5cpg %}


```ruby
# input type=text
fill_in 'nav-search', with: 'n350071 capybara'

# select box
select 'Most Views', from: 'dashhboard_sort'

# submit
page.execute_script("$('form#your-form').submit()")
```

## 🧙‍♂️ Manipulate
{% link n350071/run-javascript-by-capybara-feature-test-ob8 %}


```ruby
# Change CSS/Style in Capybara
page.execute_script("$('selector').css('display','block')");
```

## 🎁 Opinion
- We should use what users will see, instead of the source code of HTML.
- The HTML is an essential factor to test.
  - We should align the HTML tag, CSS for testing. If it's different from a similar page, the testing is tough.
  - We should use the correct name in HTML to support easy testing.
- Using `find('label[for="model_attributes"]'` is better than XPath, because this way is simulate the users way.
When In Doubt Write It Out!
Tags: planning, problemsolving
Published: 2019-09-11 06:09:35

---
title: When In Doubt Write It Out!
published: true
description: 
tags: #planning, #problem-solving
---

An often overlooked tool in almost everyone's tool kit is the ability to write things out. I know I am not alone in having found myself jumping head first into a project or problem and getting lost or stuck when my half processed plans stall. Maybe it's a small error, a typo or syntax error, or maybe it's something larger, an improperly structured program, but any size of an issue running harder at it is 99 times out of 100 not going to fix the issue. I may not be breaking new ground here, but I've found that all of the issues I run into are always easier to solve when I write out the problem at hand.
Writing out a problem has many benefits but in particular it does two things of note; it *reframes the problem allowing new perspectives on what could be going wrong and it *deconstructs the environment in which the problem exists isolating apparently independent aspects of the environment that the problem could be originating from.

###Reframing
Reframing an issue is important because it forces an individual to take new perspectives of the issue at hand potentially revealing otherwise obscure, hidden, or unnoticed aspects of the problem the individual is looking to solve. Think of a perfect corkscrew. From above or below a corkscrew looks no different than a circle while from any other perspective the differences are more than apparent.

###Deconstructing
Deconstructing an issue is important because it forces an individual to identify important aspects of the environment in which an issue exists creating a framework of the issue's environment while also isolating relatively independent aspects of the issue's environment consolidating points of focus for a plan of attack. 

In conclusion when a problem arises writing out said problem will undoubtedly help in solving that problem. By writing out a problem one forces themself to reframe the issue by explaining the environment in which it exists and to destructure the issue for the same reasons. Both of these aspects of writing out anything force individuals to appreciate the issue in new ways and develop a framework of the where the issue exits to build a solution into or off of. 

Thanks as always for reading!

Maybe some back-to-basics blogging next week. 
Cheers!
Thoughts and Ideas
Tags: tutorial, webdev, design, help
Published: 2019-09-11 05:16:11

So I am thinking of writing about a variety of topics in tech. Creating tutorials, tips, and tricks on things like web development, web design, and maybe about Linux and maybe other things that interest me. Would you say that is a good idea? I haven't done anything like before... Well, I have but that was when I was first starting out and it was too inconsistent. 

If you have done this before or are currently doing so, what would be the best way to go about this and how do you stay consistent on your writing? I welcome all input and thanks for that output in advance.

きをつけて。 - Take care.
What is Partial & Required utility types in TypeScript?
Tags: typescript, javascript, utilitytypes
Published: 2019-09-11 05:09:47

---
title: What is Partial & Required utility types in TypeScript?
published: true
description: Apart from the basic type, TypeScript does support utility types.
tags: TypeScript, JavaScript, Utility types
---

In a real-world application, Basic types are used but there are scenarios where we need some types that can be derived from one or two types. TypeScript provides various utility types to make an easier transformation from the already defined type in our project. moreover, these utilities are globally available. Hence it can be accessed from anywhere.

Basic understanding of TypeScript requires in order to understand the below concept.

***Partial`<T>`***

   - Make a type with all properties of `T` set to Optional.
   - Useful when some of the properties of the type `T` to be updated.

```javascript

interface Todo {
    title: string;
    description: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>): Todo {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});

```

Above example, `<T>` denotes as a defined type that needs to be modified.

***Required`<T>`***

   - Make a type with all properties of `T` set to Required.
   - Useful when all the properties of the object to set all the properties of `T` to be updated.

```javascript

interface Todo {
    title: string;
    description?: string;
}

function updateTodo(todo: Todo, fieldsToUpdate: Required<Todo>): Todo {
    return { ...todo, ...fieldsToUpdate };
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

const todo2 = updateTodo(todo1, {
    title: 'title updated',
    description: 'throw out trash',
});
```

**Important Points to note**

Below are the scenarios where these two utilities can have some tweaks.

   - Useful when *strictNullChecks* flag is enabled.
   - Works only on a single level, does not work with the nested level.


And weirdly, If at all, `Partial` & `Required` are used together, the outer most will take higher priority(not useful in an ideal scenario, but mentioned just to understand it better).
Have you ever moved to a new state for work?
Tags: discuss
Published: 2019-09-11 05:01:24

I want to move to CO in the relatively near future - I'm fairly certain there's some good opportunity there, and I really want a change of scenery in general. 

However, I've never moved to another state before as an adult. How do you find and land a job in a place you don't live close enough to for in person interviews? How do you find a place to live if you don't already live nearby? 

Any tips or gotchas would be appreciated! Plus, I'd love to hear your stories on how the journey went, what worked and what didn't, and if you're pleased with the move!
Migrate from OsCommerce to Zen Cart with Next-Cart
Tags: oscommerce, zencart, migrate
Published: 2019-09-11 04:45:51

# What data can be migrated from OsCommerce to Zen Cart
You are able to migrate eCommerce data + extension data from OsCommerce to Zen Cart such as products, images, categories, customers, orders, taxes, reviews, blog posts, pages, etc.

### Products
1. Product Informations, e.g. Name, Description, Prices, Images, Meta Information, SEO URLs, etc.
2. Product Options. All option types supported by Zen Cart.
3. Product Links, e.g. Manufacturer, Categories, Downloads, Related Products.

### Product categories
1. Category Informations, e.g. Name, Description, Image, SEO URLs, etc.
2. Category Parents

### Customers
1. Customer Informations, e.g. First Name, Last Name, Email, etc.
2. Customer Addresses. All addresses with full informations.

### Orders
1. Order General Informations, e.g. Status, Currency, Total, History, Notes, Date, etc.
2. Product Details, e.g. Name, Model/SKU, Quantity, Price, Tax, Option Details, etc.
3. Customer Details, e.g. First Name, Last Name, Email, Billing/Payment and Shipping Addresses.

### Taxes
1. Tax Class, Tax Zones and Rates.

### Reviews
1. Reviews of migrated Products. Review Details, e.g. Customer, Comment, Rating, Status, Date.

# How to migrate OsCommerce to Zen Cart with Next-Cart
Next-Cart is a shopping cart migration service allows you to migrate data from your current store to another eCommerce platform. The whole procedure can be taken in 3 simple steps:

1. Upload Kitconnect to OsCommerce to Zen Cart store's root folder.
2. Choose the data you want to migrate
3. Perform the migration

{% youtube 05lTbqTDV8k %}

Are you interested in my video? Let try Free Demo Migration at: [OsCommerce to Zen Cart](https://next-cart.com/product/oscommerce-to-zencart/)

# Thank you
If you have any questions, feel free to contact us at [https://next-cart.com/contact/](https://next-cart.com/contact/), our technicians are always ready to help you 24/7. Don’t forget to like and share the guide with others if it’s useful for you.

Have an awesome day!
An one-minute fix to make your React site just a bit more Google-friendly 🤝
Tags: beginners, javascript, react, webdev
Published: 2019-09-11 03:38:59

SEO (Search-Engine Optimization) remains important as long as we live in the Google era. Many React apps are written as SPA (Single Page App) and are not Google friendly, as it takes extra effort for Google to render and scrape the front-end Javascript. 

Here is an example of how Google indexed my side-project [getd.io](https://getd.io) when it was initially launched. You can see the site description are just some random words from scraping my website's JS:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rc0dct1wfx1bth5i0aew.png)

*Btw, a shameless plug: [getd.io](https://getd.io) is a free, online API builder that I created as Postman without the native apps. Give it a try and let me know what you think. You can also read more [in this post](https://dev.to/getd/getd-io-an-online-api-request-tester-builder-with-cors-support-3d3m).*

Ideally, we could use SSR (Server-Side Rendering) to help Google get a fully rendered static page, but SSR is tricky and *ain't nobody got time for that* 😅

To quickly fix this, I used [react-helmet](https://github.com/nfl/react-helmet) to add `META` tags to [getd.io](https://getd.io). Then, I went to [Google Search Console](https://search.google.com/search-console/about) and requested a re-index. After that, the search result looked much better:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sheo1ryiaz8f8lrpi506.png)

And here is what my code looks like:

```react
const seo = {
  title: "getd.io/",
  description:
    "A free, online API builder that works with CORS. A Postman alternative without the need for client app installation.",
  url: "https://getd.io/",
  image: "https://getd.io/image.png"
};

<Helmet
  title={seo.title}
  meta={[
    {
      name: "description",
      property: "og:description",
      content: seo.description
    },
    { property: "og:title", content: seo.title },
    { property: "og:url", content: seo.url },
    { property: "og:image", content: seo.image },
    { property: "og:image:type", content: "image/png" },
    { property: "twitter:image:src", content: seo.image },
    { property: "twitter:title", content: seo.title },
    { property: "twitter:description", content: seo.description }
  ]}
/>
```
You can put `<Helmet>` component anywhere in your React tree, and they will be properly moved to under `<head>`:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s8131ut4d032n5nolfa3.png)
Setting up Kubernetes on bare metal behind a NAT with OpenVPN
Tags: k8s, kubernetes, openvpn, nat
Published: 2019-09-11 00:46:39

---
title: Setting up Kubernetes on bare metal behind a NAT with OpenVPN
published: true
description: How to set up a test cluster of k8s across several machines with OpenVPN
tags: k8s, kubernetes, openvpn, nat
---

I've been wanting to setup a kubernetes (k8s) cluster for a while, mainly because I want to learn how it works. But, because I'm me, I refuse to do anything the easy way, so I didn't want to use GCP or AWS. I have 4 _bare metal_ machines floating about the internet, there is no reason I can't use them, right?

Well, a couple reasons, actually. One, they aren't exactly bare metal, they are cloud bare metal, which means most of them are behind a weird NAT that doesn't share their external IP with them. So none of the interfaces have the external IP. Two, my home machine, which I plan to use for a control machine, is behind a router. So, again, NAT.

Surely that's not a problem, right? 

> Kubernetes imposes the following fundamental requirements on any networking implementation (barring any intentional network segmentation policies):

>    * pods on a node can communicate with all pods on all nodes without NAT [1]

Huh. Well, let's see. AWS and GCP clearly have to be able to make this happen with NAT, right? It's no way the IP space exists otherwise.

Let's use a VPN. This post look perfect, an easy install script for OpenVPN [2]

Installed it, connected the client, and the client promptly lost all internet connectivity. Huh. It could ping the VPN server, so that wasn't it.

Turns out you will want to edit a couple lines from the server.conf.

(you can find the full example here: [3])

You want to:

* remove the line that starts `push "redirect-gateway`
* add the `client-to-client` line

Now the server can ping the client, and the client can ping the server. Success! 

There's just one thing left to do, and that's to tell `kubeadmin init` to use the VPN. I used flannel as my pod network, so my init command was `kubeadm  -v 1 init --pod-network-cidr=10.244.0.0/16 --apiserver-advertise-address=10.8.0.1`

 And there we are!

```
drazisil@central:~$ kubectl get nodes
NAME      STATUS   ROLES    AGE   VERSION
central   Ready    master   28m   v1.15.3
server1   Ready    <none>   26m   v1.15.3
server2   Ready    <none>   94s   v1.15.3
```

[1]: https://kubernetes.io/docs/concepts/cluster-administration/networking/
[2]: https://www.cyberciti.biz/faq/install-configure-openvpn-server-on-debian-9-linux/
[3]: https://github.com/OpenVPN/openvpn/blob/master/sample/sample-config-files/server.conf
Imposter Syndrome And How To Get Off It
Tags: codenewbie, developers, impostersyndrome
Published: 2019-09-11 00:43:47

---
title: Imposter Syndrome And How To Get Off It
published: true
description: what is imposter syndrome,how you're affected and how to get off it
tags: Codenewbies, developers, impostersyndrome
---

USING PEOPLE IN TECH ESPECIALLY DEVELOPERS AS POINT OF TALK

Imposter syndrome is that feeling of “incompetency” in someone when they are trying to do something.

Practical Illustration:

Recruiter: What skill set do you have Me: I write web application programs with javascript and its frameworks like React. I have done a series of projects in the past. Recruiter: Okay, that’s nice. You are hired, you can start tomorrow

My head: Wow!!  That was quick, wasn’t expecting it to be this easy and fast. Anyways am hired already.

At office Boss: Add feature ABC in our existing application, do this…..that….. Me: Oh!!! My God, I’m not good as this guys think I am, I think I have been faking myself. My head: These guys will kick you out next month before you know it. You can’t do this.

Me:  feeling like an imposter right now, should I tell them I know no shit?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ca6ftvgm87zp1npe4oqn.jpg)


Okay, that’s how practical I can be able to explain imposter syndrome at my level right now, Lol.

So I decided to write about this imposter syndrome especially for developers because often times I have fallen in this very state of mind and have seen friends also who are stuck in it. Imposter Syndrome makes you feel like you’re a fraudster and you will be caught soon, it makes you feel very unqualified for the work you do or the work assigned to you to do. Yeah!! But the good news is that you’re not the only one affected by this thing, even senior developers most times find themselves in this truck of destruction and the bad news is if you allow it get deep to you without taking a proper action it might ruin your career. Lately, in the Tech industry especially in the Developers ecosystem, this imposter syndrome has become a talk and experienced people who have gotten off it try to preach how both senior developers, junior developers, and code newbies can get off imposter syndrome. Before anything else you should

stop comparing yourself with anybody else

know that know nobody knows it all (absolutely nobody)

Start setting goals and build growth rather than sit down and compare skill

Learn how to do things at your pace and which learning pattern works for you

When you are stucked ask from a friend (that's a great reason and importance of belonging to a Developer’s Community as a developer)

Learn how to Learn (drive your car yourself)

Don’t quit any step, it’s fine if you give it a break and then get back later on it

When you’re getting the feeling of imposter syndrome, try to do something different which you like doing so that you can clear your memory at the moment.

Don’t force anything on yourself

So at the last words, I encourage you not to feel you are the only one having this imposter syndrome experience. You are not alone, you are not unqualified.