teleren/devto huggingface dataset:
Using Display Name to Debug Prop Type Warnings
Tags: testing, javascript, react, mocha
Published: 2019-02-09 16:37:59

---
title: Using Display Name to Debug Prop Type Warnings
published: true
description: Using Display Name to Debug Prop Type Warnings
tags: #testing #javascript #react #mocha
---

For my React testing environment, I use Mocha, Enzyme, and Sinon. When I run my npm `test` script, Mocha runs and enters &quot;watch&quot; mode.

Recently, I noticed a strange and slightly annoying issue, where my _initial_ test run would display prop type warnings, but successive runs via watched file changes _would not_.

__Note:__ I am using the `min` reporter inside my mocha.opts file. Also, the component name shown below is respective to my code base, but we can assume any generic name, i.e. `MyComponent`.

Here's an example of the test output:

##### Initial Test Run
![Initial test run](https://thepracticaldev.s3.amazonaws.com/i/xngt4yo9iir05pkljaym.PNG)

##### Subsequent Test Runs (via watched files)
![Subsequent test run](https://thepracticaldev.s3.amazonaws.com/i/oy460u5d0wi0g84ztgnh.PNG)

In the second screenshot from above (a test run via a watched file change), I had not fixed the problematic prop types code within the offending component, yet my prop type warning disappeared. Why does this happen? It turns out, this is by design within the React code base. They only warn about props when a &quot;new&quot; component is rendered. Subsequent renders _of the same component_ will _NOT_ display warnings, as to avoid spamming the console or STDOUT.

So how do we fix this? The answer is fairly simple, actually. We can take advantage of the `displayName` property on the component, and update this within the `beforeEach` hook for any given suite.

```javascript
describe('My suite', () => {
    beforeEach(() => {
        MyComponent.displayName = `MyComponent${Math.random().toString()}`;
    });

    // Test code down here...
});

```

Now, when our tests run, React will interpret the component as &quot;new&quot;, since its `displayName` is changing. You'll see warnings on _every_ test run, rather than just the initial one. Here's an example of the output (cropped from right):

![Test results after update](https://thepracticaldev.s3.amazonaws.com/i/uxm60caurrv0pl3ik6l8.PNG)

Once you've fixed the warnings, just be sure to remove the `displayName` code from your tests!

Hopefully this helps you to quickly and somewhat painlessly fix any random PropTypes warnings in your Mocha tests!

## References
<a href="https://github.com/facebook/react/issues/7047" title="Github Issue Link">Github Issue</a>
Using react-navigation 3.0 in React Native apps
Tags: react, reactnative, javascript, android
Published: 2019-02-09 16:01:23

---
title: Using react-navigation 3.0 in React Native apps
published: true
description: Using react-navigation 3.0 in React Native apps
tags: #react #reactnative #js #android
---
------------
Source : <a href="https://www.skptricks.com/2019/02/using-react-navigation-3-in-react-native-app.html" >Using react-navigation 3.0 in React Native apps </a>
-----------


This tutorial explains how to move or navigate from one screen to another using React Navigation 3.X Library in react native application. In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack.


 react-navigation version : 3.X

Similarly, React Navigation's stack navigator provides a way for your app to transition between screens and manage navigation history.React Navigation is that React Navigation's stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

If you would like to learn about react navigation version 2.X in react native application, then follow the below link :
react-navigation version : 2.X   

Before we start the tutorial, we need to aware of some important function, which we required during the page navigation from one screen to another. So Lets get started :
createStackNavigator  : createStackNavigator is a function that takes a route configuration object and an options object and returns a React component. Basically here we are maintaining the route information for different screen or activity.
navigation prop : The navigation prop is available to all screen components, that helps for screen navigation.
this.props.navigation.navigate('RouteName') : pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen and pops the already open screen.
this.props.navigation.push('RouteName') : pushes a new route to the stack navigator even if already present in the stack.
this.props.navigation.goBack() : when you switch to new window using stack navigator, then it will automatically enabled the back button in header bar.(On Android, the hardware back button just works as expected.) Also you can do the same programmatically by calling the goBack() function.
this.props.navigation.popToTop() : This function helps to switch back to the home or first screen of your react native application.

<img src="https://4.bp.blogspot.com/-_xOWQpwxnao/XF7xqf3cGdI/AAAAAAAACaE/twzU81j8O8M7QyarIpbTkVgdY59kU1UyQCLcBGAs/s640/navigation3.png" />
Prototype Design Pattern [Creational]
Tags: blog, concepts, designpattern, designpatterns
Published: 2019-02-18 18:12:01

---
title: Prototype Design Pattern [Creational]
published: true
tags: blog,concepts,Design Pattern,Design Patterns
canonical_url: https://itscoderslife.wordpress.com/2019/02/09/prototype-design-pattern-creational/
---

The prototype pattern should be used when the construction of new instances is inefficient. When the initialization of an object is expensive, you should consider using the prototype pattern.

- The prototype pattern creates clone instances from a prototype object. 
- The clones are created by copying all the properties of the prototype instance. 
- The clones are independent objects. 
- Modifying the clone does not affect the prototype and vice versa. 
- Value types get ultimately copied upon assignment, whereas we need to implement the copying for reference types, that is for classes. 
- The prototype pattern creates new objects by copying a prototype object. Use this pattern if initializing an object is expensive. 
- Value types make implementing the prototype pattern very easy because they are automatically copied upon assignment. 
- The cloning of objects stands at the core of the prototype pattern. 
- To correctly clone objects, we must understand [the difference between the shallow and the deep copy](https://wordpress.com/block-editor/post/itscoderslife.wordpress.com/930). I am going to provide code examples for that too.
- Prototype: creation through delegation. Factory Method: creation through inheritance.

> The prototype pattern creates new objects by copying a prototype object. Use this pattern if initializing an object is expensive.

Example: AddressBook – while creating a new contact of an employee in an organization the details like Basic Info, Address, Employment details, Notes & links will have empty prefills.

Link to understand Deep vs Shallow copy: [https://wordpress.com/block-editor/post/itscoderslife.wordpress.com/930](https://wordpress.com/block-editor/post/itscoderslife.wordpress.com/930)

**Summary** : The prototype pattern creates new instances by cloning a prototype object and copying all its properties, instead of constructing new objects. The copied instance is an independent object. Changing its properties doesn’t affect the cloned object. Use this pattern when creating new instances of a given type is inefficient.
What was your win this week?
Tags: weeklyretro, discuss
Published: 2019-02-09 14:08:14

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: weeklyretro, discuss
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

It's weekly retro time!

Looking back, what was something you're proud of?

All wins count -- big or small!

Examples of 'wins' include:

- Getting to all your meetings on time
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄
🎉
Dropping the working database (NO! NO! NO!)
Tags: beginners, webdev, rails
Published: 2019-02-09 14:04:48

---
title: Dropping the working database (NO! NO! NO!)
published: true
description: I did just that
tags: beginner, webdev, rails
---

Today was supposed to the final day for my first project using rails. I had implemented the post page, user authentication and markdown feature for the blog. I had one thing that I felt I needed to do, add a user edit feature. For this. for some reason, I chose to use the `devise gem`. I thought it would be a good practice working with this gem. So far, I had been working with `bcrypt`. Since,devise came with all the users related features, I thought about giving it a try.

I made a separate branch on my git repo so that I could work on this feature. At least I thought I had this process nailed down. Working on a different branch would make my working code safe. I did know that regardless of what branch I worked on the database would be shared. However, I decided to delete my users database, and start fresh with devise. This was a big, big error on my part. 

I started building the entire user feature using devise. This was a straight forward approach I thought. But, then disaster struck, I started receiving all sort of errors. It was then, I realised, I should have created a separate database for my users and I could have named it anything else. However, my inability to come up with a database name meant that I dropped my working model. I now wanted to go back to using bcrypt, and at least my app would be working. I could then deploy it to heroku as planned. 

Instead of adding a feature, I was, therefore, working to fix the howler I had made. In the end, though, I was able to fix it, and have the app working on heroku.

I will implement the app again using devise, but this time, with the experience that I can create a new model and not touch my working database.
How do I get all the input tag elements on a web page?
Tags: javscript, html, webdev, jquery
Published: 2019-02-09 13:06:24

---
title: How do I get all the input tag elements on a web page?
published: true
description: 
tags: javscript, html, web-development, jquery
---

I'm trying to get all input elements present on a webpage with the below code.

```
document.onload = function() {
    var elements = document.getElementsByTagName("input");
    console.log(elements);
}
```

But I see that on some web pages, I don't get the input elements present on the web page. For example on this web page web page -> https://www.wufoo.com/gallery/templates/forms/tuition-reimbursement-form/

What am I doing wrong?
Synchronize program start over network
Tags: python, network
Published: 2019-02-09 12:46:41

---
title: Synchronize program start over network
published: true
description: Query on Pythonic network syncronization
tags: Python, network
---
I'm trying to get two computers to start a program (to play a video) simultaneously using a network connection in Python.

I'm starting down the path of opening a socket server on one machine, connecting to it on the other, and sending some kind of communication saying "Now!", which is do-able, but seems unnecessarily complicated.

Is there some easy thing I'm missing here?  Ideally I'd have a program called "Block.py" that I'd start from a bash script on one machine, which would wait till I run it on the other machine, and they'd then both continue on to the omxplayer command...

Both machines have static IPs, if that helps simplify things.

Many Thanks in advance!
Open Source Project for ChromeOS and Chromebook Users
Tags: opensource, webdev, chrome, tools
Published: 2019-02-09 12:32:26

---
title: Open Source Project for ChromeOS and Chromebook Users
published: true
description: 
tags: #opensource #webdev #chrome #tools
---
I made an open source (MIT license) screen capture/recording ChromeOS application. It works, but I'm sure there are still a good number of bugs to be found in the back end. Also, the front end is very ugly at this point.

I created it because I couldn't find any other free screen recorders for Chromebooks. The paid ones typically have a free version, but it puts a watermark on the video, and I didn't want that.

I got my use out of it, so I figured I would open source it for others to use or contribute.

I would love to see someone contribute a nicer UI (just some HTML, CSS, JS stuff), but really any contributions would be super appreciated!

Here is the project repository: [https://github.com/joekreydt/Captis](https://github.com/joekreydt/Captis).

Hit me up here on Dev.to, over on [GitHub](https://github.com/joekreydt), or DM [me on Twitter](https://twitter.com/joekreydt), with any comments or questions.

Peace!
Explain Inheritance in JavaScript Classes Like I'm Five
Tags: explainlikeimfive, javascript
Published: 2019-02-09 11:42:25

---
title: Explain Inheritance in JavaScript Classes Like I'm Five
published: true
tags: explainlikeimfive, javascript
---

I am currently learning JavaScript with the aid of Codecademy Interactive JavaScript course and I find inheritance a bit confusing in JavaScript Classes especially in the case of a parent class with say two subclasses and how to implement them
Understanding basic GraphQL Schema
Tags: graphql
Published: 2019-02-09 10:21:19

---
title: Understanding basic GraphQL Schema
published: true
description: 
tags: #graphql
---

![](https://cdn-images-1.medium.com/max/1200/1*RHQ7lpGDV_M3yWRa9DiR2g.png)

It's my first post on DEV. Also, I'm not an expert in GraphQL, I'm just learning it, so...

Goal: understand how GraphQL Schema is working.

I've decided to rebuild my portfolio website with Gatsby. So I started to learn from [Gatsby Tutorial](https://www.gatsbyjs.org/tutorial/) how to work with Gatsby. In [tutorial-part-four](https://www.gatsbyjs.org/tutorial/part-four/), reading about data in Gatsby, I move to [howtographql tutorial] cause I've had no experience with GraphQL before. If you check out basic core concept for GraphQL you can see an example of Schema Definition:

```graphql
type Query {
  allPersons(last: Int): [Person!]!
}

type Mutation {
  createPerson(name: String!, age: Int!): Person!
}

type Subscription {
  newPerson: Person!
}

type Person {
  name: String!
  age: Int!
  posts: [Post!]!
}

type Post {
  title: String!
  author: Person!
}
```

Trying to understand, how it works I write [short syllabus about core concepts](https://github.com/DmitryVdovichencko/JS-Learn/blob/master/graphQL/fundamentals.md) from full article for myself in Russian.

And also I've created picture for visual perception. Hope, it'll help somebody.
 
![GraphQL Schema](https://thepracticaldev.s3.amazonaws.com/i/90hhjmdwd077crgzu6bn.png)
Membuat Timestamp Footer Dinamis Dengan Javascript
Tags: javascript, web, developer, frontend
Published: 2023-02-13 01:34:51

---
title: Membuat Timestamp Footer Dinamis Dengan Javascript
published: true
tags: javascript,web,developer,frontend
canonical_url: https://medium.com/@Risyandi/membuat-timestamp-footer-dinamis-dengan-javascript-1d9a165ef7de
---

![images](https://cdn-images-1.medium.com/max/1024/1*wrc-hErSQwDXK6jMIR-KRg.jpeg)
<figcaption>Source by : pexels.com</figcaption>

Kali ini saya akan membahas tentang bagaimana cara membuat sebuah timestamp di footer dinamis, dimana biasanya timestamp di footer itu statik dan tidak otomatis update ketika atau saat perpindahan tahun.

Berikut adalah kode yang bisa teman-teman coba, saya menggunakan Javascript murni untuk membuatnya berikut adalah kodenya :

```html
<footer>
  <script>  
    **document.write(new date().getFullYear());** </script>
</footer>
```

dan hasilnya akan jadi seperti ini,

```html
**2019**
```

dan contoh yang lainnya bisa teman-teman seperti berikut ini :

```html
<footer>&copy; name company, since 1994
 <script>
**document.write("- " + new Date().getFullYear());**
 </script>
</footer>
```

dan hasilnya akan jadi seperti ini,

```html
**© name company, since 1994 – 2019**
```

itulah yang bisa saya bahas, semoga bermanfaat, dan untuk detail penggunaan metode **_date()_** ini bisa cek [disini](https://www.w3schools.com/js/js_date_methods.asp) , selamat mencoba! 😃
AJAX - GET, POST, PUT,and DELETE 
Tags: ajax, javascript
Published: 2018-11-01 20:06:53

---
title: AJAX - GET, POST, PUT,and DELETE 
published: true
description: 
tags: Ajax, javascript
---
Hi everyone, I've been thinking about writing on how to make AJAX call immediately after I wrote the blog, "What is AJAX" [https://dev.to/gyi2521/what-is-ajax-34c2], about a month ago; however, I've been busy with my first group project, "InstagramClone", from my Boot-camp class, so here I am..  writing the second part of AJAX a month later..;)
Good thing is that I can use the AJAX call examples from my project.

In our "InstagramClone" project, we used jQuery's AJAX "GET" method on the client side to retrieve photos from the back-end. 

<pre>
 $.ajax({ url: 'api/photos', method: 'GET' })
            .then(function (data) {
                let content = '';
                if (data != '') {
                   data.forEach(e => {
                   content += `some code`;
 code continues...
</pre>

Our GET method starts with '$.ajax' followed by an object with two properties which are url and method. The Url field is populated with the API address that will provide the desired data from the back-end and the method field is populated with 'GET'. The next line, '.then(function(data))' is the process that executes once the data has been retrieved from the ajax call. In our case, we iterated through the data and displayed the photos on the screen.

Now, lets look at AJAX POST(=create new) method. The following is the code we used to add a comment to a photo.

<pre>
$.ajax({ url: '/api/comments', method: 'POST', data:allComment})
            .then(function () {
                $(`#${photoid}_divForComments`).append($(`<div class="DBComments">            
                <b>Instagram_Clone</b> ${theComment}</div>`));
            });
</pre>

The code is similar to GET method but we populated "POST" for the method field and also added the data that contains newly created user comment.

The PUT(=update) method, is really identical to POST method as you can see below: 

<pre>
$.ajax({ url: '/api/comments', method: 'PUT', data:likes})
            .then(function() {
                some code...
            });
</pre>


For the DELETE method, we are passing in photoId to delete. 

<pre>
        $.ajax({ url: `/api/photo/${$(this).attr('photoId')}`, method: "DELETE" })
            .then(function (data) {
                some code...
            })
            .catch(function (err) {
                some code...
            });
</pre>

In above example, we just added '.catch(function (err)' to get the error message if there is any, and you can add this to all other calls as well.

With AJAX, we can simply update the parts of a web page without reloading the whole page, and this makes the process much faster and responsive for users.

Thanks for reading!
D3.js Chart with Gradient Color
Tags: d3js, javascript
Published: 2019-02-09 07:53:47

---
title: D3.js Chart with Gradient Color
published: true
description: 
tags: #d3js #javascript
---

<script async src="https://static.codepen.io/assets/embed/ei.js"></script> 

Gradient color is not only just looks colorful but also informative depending on how you use it. But how should I use it?

Look at the following bar chart. 

{% codepen https://codepen.io/chooblarin/pen/wNyWLJ default-tab=result %}

This shows [IMDb 2018 Movie Rankings' votes](https://www.imdb.com/list/ls021348496/). Let's use gradient color on it. 

First, you might think just specifying like `"fill=url(#gradient)"` in bar `rect`. It would result as follows. 

{% codepen https://codepen.io/chooblarin/pen/MLQGEz default-tab=result %}

That's not bad. But there is another option. You may want the color to change as the Y-value increases. Look at the following. 

{% codepen https://codepen.io/chooblarin/pen/omEeOY default-tab=result %}

Perfect! This uses a technique of [`<clipPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath) element. 

The technique actually works for other charts (e.g. time series chart like follows). 

{% codepen https://codepen.io/chooblarin/pen/pGaVqq default-tab=result %}

Thank you for reading. Happy coding ☺️
Create an ASP.NET Core Website in Visual Studio 2017
Tags: tutorial, dotnetcore, orchard, webdev
Published: 2019-02-09 00:03:55

---
title: Create an ASP.NET Core Website in Visual Studio 2017
published: true
description: 
tags: tutorial, dotnetcore, orchard, webdev
canonical_url: http://charles.stuartedwards.me.uk/blog/create-an-orchard-core-site-and-deploy-using-azure-devops
series: Create an Orchard core site and deploy using Azure DevOps
---

> This post is part of the [Create an Orchard core site and deploy using Azure DevOps](http://charles.stuartedwards.me.uk/blog/create-an-orchard-core-site-and-deploy-using-azure-devops) series.

We are going to create a .net core website from scratch in visual studio 2017.

1. In visual studio create a new project.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-1.png" style="width:100%"/>

2. Under the **Web** section select **ASP.NET Core Web Application** template.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-2.png" style="width:100%"/>

3. Set the **Name**, **Solution Name** and **Location** where you want the solution created
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-3.png" style="width:100%"/>

4. Make sure **.NET Core** and **ASP.NET Core 2.1** are selected. Then choose the **Empty** template and click OK.
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-4_2b.png" style="width:100%"/>

5. Once it is all set up you will see the following project structure: </br>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-5.png" style="width:50%"/>

6. Click play. </br>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-6.png" style="width:20%"/>

7. And boom! done. </br>
<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-7.png" style="width:50%"/>


Open the Startup.cs file to see the magic:

<img src="http://charles.stuartedwards.me.uk/media/Blog Images/Post 1/1-8.png" style="width:100%"/>

Awesome right!.... Well OK, so it is doing a Response.Write which isn't a great way to build websites, but what you see here is the very basics of .Net Core. What you do next is totally up to you, for example you can turn this into an MVC site or a Web API site or an Orchard Core site. For more info on what you can do with .Net Core check out [Microsoft's Introduction to ASP.NET Core ](https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.1)

Before we add Orchard Core we are going to add our code to source control: [Add Project to Source Control in Azure DevOps (VSTS)](http://charles.stuartedwards.me.uk/blog/add-project-to-source-control-in-azure-devops-vsts)

> Originally published on my personal blog: [Create an ASP.net Core Website in Visual Studio 2017](http://charles.stuartedwards.me.uk/blog/create-an-orchard-core-site-and-deploy-using-azure-devops)