teleren/devto huggingface dataset:
The differences between typeof and instanceof in OO JS
Tags: beginners, javascript
Published: 2019-11-15 18:10:04

I want to explain the differences between the `typeof` and `instanceof` operators in object-oriented JavaScript. Both of these operators can be used to find out more information about a certain piece of data. 

`typeof` is an operator that can be used to verify what datatype a certain "operand" is. An "operand," as mentioned in the MDN documentation, is just a piece of data that is being manipulated or worked on. This operand can be pretty much anything, from a variable that contains a value to a function. When using `typeof` on an operand, all you need to is simply state `typeof` right before the operand. 

Here are two examples:

``` javascript
const a = 6;
typeof a;
//"number"


function hello(name) {
  return `hello, ${name}`
}

typeof hello
//"function"
typeof hello()
//"string"
```

In the first example, we are using `typeof` on the variable `a`, which contains the value of integer 6. Therefore, the return value is "number," because 6 is a number/integer. 

The second example is a little more tricky. Here, we have the `hello` function. When using `typeof` on `hello`, we get the return value of `function.` This is because `hello` refers to the function body, or the code that is between the brackets, also known as the code block. If we call `typeof` on `hello()`, however, we get the value of `string`. This is because the function is now being invoked, and therefore returns the string within the code block.

The `instanceof` operator tests to see whether the operand is an instance, or object, of a certain class. In JavaScript, just like `initialize` method in Ruby, instances of a class can be created/initialized with certain attributes using the `constructor` method. This makes each instance of a class unique. Let's take a look at this example:

```javascript
class Person {
   constructor(name,age) {
   this.name = name
   this.age = age
   } 
}

const person = new Person('David',22)
const david = new Person

console.log(person.name) 
//"David"

console.log(person.age)
//22

```

In this `Person` class, each new instance of `Person` will be created with a name and an age. `this` refers to the object/instance that is currently being created and initialized. `this` is similar in concept to `self` in Ruby.

With this knowledge of the constructor method in JavaScript, we can use the `instanceof` operator to verify whether the operand is actually an instance of a certain class. `typeof` returns a boolean value. Using the `Person` class above, we can use `instanceof` to verify whether `person` is an instance of the `Person` class.

```javascript
console.log(person instanceof Person;)
//true

console.log(david instanceof Person;)
//true
```
When applying this to `person` and `david`, we can see that both of the expressions return the value of "true." This is because both are instances of the `Person` class.

To summarize, `typeof` and `instanceof` are neat little operators that can be utilized when trying to verify the properties/characteristics of objects and data in JavaScript.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-11-15 17:04:39

---
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: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-friday-rabbits](https://media.giphy.com/media/l396FvhXOqm20Pogo/giphy.gif)
Integrating WordPress and React( The easiest way)
Tags: wpreact, reactwithwordpress
Published: 2019-11-15 16:59:38

---
title: Integrating WordPress and React( The easiest way)
published: true
description: Integrating react and wordpress with the help of create-react-wptheme.
tags: wpreact,React with WordPress
cover_image: https://thepracticaldev.s3.amazonaws.com/i/litcxq40ifrj155uipjh.jpeg
---
Integrating react and WordPress with the help of create-react-wptheme a npm package corresponding to the create-react-app in react. Here I have published a video you can check it:
https://youtu.be/z8CDk-bHFuU
I launch Devmates Challenges, what do you think?
Tags: showdev, webdev, discuss, computerscience
Published: 2019-11-15 16:26:28

Hello👋, 
My name is [Alex](https://twitter.com/alexwawl) and I'm maker of [Devmates.co](https://devmates.co). 😊

We are resolving daily coding problems which asked by top tech companies together. We share our solutions, give some help if anyone stuck, support each other and just hang out together on the internet. 🍻☕️💬

I decided to start working on Challenges because I believe that the best way to learn is learning by doing. So I want to make some challenges on a weekly basis and work on something interesting together. You can collaborate with someone or do everything by yourself. 

![Challenges](https://thepracticaldev.s3.amazonaws.com/i/csiu6rt3legr4hib8e83.png)


Challenges - micro-projects where you can learn new technologies, frameworks, languages, API, algorithms, approaches, etc. I hope it gives a chance for juniors developers to practice coding on some real projects. Senior engineers can learn something new by doing. 
For example, they can try to resolve it using a new language or framework. Challenges don’t have any language/framework/technology restrictions so you can resolve any problem using any tools. 

My motivation is to build a community around it and allow people to learn something new by making small projects. If someone stuck they can ask questions to people who are also working on the same “tasks” and get feedback.

Right now you can see the first challenge named "Conway's Game of Life". It's a kind of classic coding problem that can be implemented in different ways and can be asked in real interviews. It's not just plain "algorithmic" problem, you should visualize it or adding some additional "behavior". It's a kind of "test" version of challenges but in the future, I want to provide more interesting ideas.

So if you are working on some APIs, frameworks, etc let me know. Maybe we can collaborate and I can provide interesting challenges based on your Project. I think it's a great idea and would love to hear your feedback.


I'm working on it in my free time so I would love to hear any ideas about Challenges or about platform at all. It can give me a chance make the platform more useful.
Thanks for reading! 

Links:
[Main page](https://devmates.co)
[Challenges](devmates.co/home/challenges)
2019 Hacktoberfest t-shirt arrived
Tags: hacktoberfest, opensource
Published: 2019-11-15 16:26:21

It's here!
----------

I am the happy owner of a Hacktoberfest 2019 t-shirt and some dev.to gimmicks!

Thank you to the dev team for being part of this event, which I truly enjoyed.

I will not share a picture in case you want to be surprised. For everybody else: https://youtu.be/saYv5jhDSHg
Build a simple blog with GraphQL, Node.js, SQLite and (VUE, Angular Or ReactJS) - Part 2
Tags: vue, javascript, node, graphql
Published: 2019-11-15 16:17:09

##What we gonna do?

In this tutorial, we will show you how to create a simple client with **VUE**, to connect to graphql api we created in <a href="https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923">this previous tutorial</a>

**Prerequisites**

- Knowledge of JavaScript and Vue.
- You must have seen the previous tutorial: <a href="https://dev.to/jgilbertcastro/build-a-simple-blog-with-graphql-node-js-sqlite-and-vue-angular-or-reactjs-3923">this previous tutorial</a>

##Time to play the game! Hahaha

- Set up the project on previous directory created, run this on your favorite terminal:
 - <code>cd micro-blog</code>
 - <code>mkdir micro-blog-clients</code>
 - <code>cd micro-blog-clients</code>
 - <code>vue create vue-micro-blog-client  
</code>
 - <code>cd vue-micro-blog-client</code>
- Install the following dependencies:
 - <code>npm install --save vue-apollo graphql apollo-boost moment</code>

**Configurate Apollo Client**

**Apollo Client** is a complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI. <a href="https://www.apollographql.com/docs/react/">Read More</a>

- Config Apollo Client
 - Open <code>*src/main.js*</code> and paste this code:{% gist https://gist.github.com/jgilbertcastro/ba67e8f2982c8f687e8ed526d736ec87 %}

*Here we define const apolloClient to set graphql api url and add vueApollo plugin to global method*

- Consuming micro-blog API
 - Edit Home.vue in <code>src/views</code> and paste this code:
{% gist https://gist.github.com/jgilbertcastro/4dfcead5ec33803a32262456941db495.js %}

*In this file we write a code to get post like a select query but with gql query*

 - Add new File AddPost.vue in <code>src/views</code> and paste this:
{% gist https://gist.github.com/jgilbertcastro/8a1dc8e96d0fc48c722ce317771025bd.js %}

*Then we create a method to call by save button to add new post and another to format the create date. As you can notice here we define the mutate to call mutation to create a post and finally the method to clean the model*
 
 - Edit <code>src/router/index.js</code> with this:
{% gist https://gist.github.com/jgilbertcastro/eea35969967b2e0c1e09ec3b4c98f96a.js %}

 - edit <code>src/App.vue</code> and edit router line with this:
{% gist https://gist.github.com/jgilbertcastro/3e3cee549ee451646bef88b65737ed31.js %}

##Testing!

<a href="http://www.youtube.com/watch?v=f2lINRlc9DM&feature=youtu.be">see video</a>
WP Engine Review : Hosting Plans, Pros & Cons 🔍
Tags: wordpress, hosting, webhosting, wpengine
Published: 2019-11-15 15:58:26


Getting started with WordPress is easy. Most web hosting services offer simple one-click installations, and some also provide more capable managed WordPress plans. But although every provider claims great WordPress expertise, these plans are usually just a tiny part of the overall product range, and there's no way to tell how much experience of the platform a host might really have.

WP Engine is a provider of managed WordPress hosting – and nothing else. There are no e-commerce plans, VPS, dedicated servers or anything else to get in the way, just a single-minded focus on delivering and managing the best possible WordPress service. And the results look impressive, with the company trampling over the competition in just about every area.

All hosts claim their WordPress plans are optimized for speed, for instance, but typically that just means installing a few standard tools (NGINX, Varnish) and tweaking a handful of settings. WP Engine has its own custom EverCache system, HTTP/2 and PHP 7 support, a free CDN and a choice of data centers in North America, Europe and Asia.

Your site isn't hosted on some cheap and underpowered VPS, either. WP Engine is now using Google Cloud Platform interfaces in many zones, and the company claims these are 40% faster than Google's previous instances. (We're not going to try to assess that, but it's good to have transparency about the hosting infrastructure.)

An auto-migration plugin helps to import you existing site, or you might build something new with help from 36 bundled premium WordPress themes.

WP Engine does its best to keep the service running smoothly, automatically installing major WordPress updates and testing minor ones before recommending them. There's built-in malware detection and blocking, and help removing anything that might get through. Even if all that fails, you can still fall back on the automated daily backup (typically a premium extra elsewhere).

To learn more about WP Engine, check out the full [WP Engine Review](https://www.onlinetoolsexpert.com/wp-engine-web-hosting-review/).
Compiling Your Python Code with Cython
Published: 2019-11-15 15:54:50

Python is a great language to test and prototype with... partly because it is interpreted, so the code is readily referenced and changed. But there may be times when you'd like to compartmentalize your Python code (for example by compiling it); this is easily done using Cython. I'll outline the steps below (make sure you have Cython installed!). If you'd like to find out more, check out the [Cython](https://cython.readthedocs.io/en/latest/src/tutorial/cython_tutorial.html) documentation page.

1. Take all of your your Python code that you'd like to compile and add it to a utilities file. Here, as an example, we'll make a `utilities.py` file with a toy function.
    ```
    import numpy as np

    def everyother(a):
        return np.ascontiguousarray(a[::2])
    ```
2. Next, create a `setup.py` file:
    ```
    from distutils.core import setup
    from Cython.Build import cythonize

    setup(ext_modules = cythonize("utilities.py"))
    ```
3. Finally, compile it by typing `python setup.py build_ext --inplace`. 

On my computer, these steps produce an ".so" (shared object) file `utilities.cpython-37m-x86_64-linux-gnu.so` that you can import in a Python script or interactive instance.

    ```
    In [1]: import numpy as np                                                                                                                                                                                                                                                     
    
    In [2]: import utilities as ut                                                                                                                                                                                                                                                 
    
    In [3]: a = np.arange(12)                                                                                                                                                                                                                                                      
    
    In [4]: a                                                                                                                                                                                                                                                                      
    Out[4]: array([ 0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11])
    
    In [5]: ut.everyother(a)                                                                                                                                                                                                                                                       
    Out[5]: array([ 0,  2,  4,  6,  8, 10])
    ```

That's all there is to it!


![code](https://media.giphy.com/media/1lvotGQwhzi6O0gQtV/giphy.gif)
Argument Labels for Functions in Swift
Tags: swift
Published: 2019-11-15 15:45:12

---
title: Argument Labels for Functions in Swift
published: true
description: This will go over argument labels in Swift functions.
tags: swift
canonical_url: https://medium.com/@maeganwilson_/argument-labels-swift-f749a3f49590
series: Functions in Swift
---

# Functions in Swift - Argument Labels

This post is a continuation of Functions in Swift Part 1 by covering argument labels in Swift functions.

Argument labels are the parameter names that functions take in. When declaring argument labels, there are options to have them ignored or labeled as something different when calling the functions.

# Omit argument labels

To omit argument labels, use a `_` before the parameter name. A parameter name is still necessary to access the argument's value inside the function.

Omitting the argument label might be wanted to make the function more readable.

## Example

```swift

func addFour(_ num: Int) {
    print num + 4
}

addFour(2) // Prints 6
```

In the example, `num` is not needed when calling `addFour`. `num` is used in the function body to add 4 to the integer that is passed to the function.

# Specifying argument labels

To give a parameter name a different label, declare the label before the name.

```swift

func functionName(argumentName parameterName: ParameterType){
    // DO SOMETHING
}
```

When using the parameter inside the function, the parameter name will need to be used. This Swift feature is to make functions more sentence like. It allows for the function to be more human-readable.

## Example

```swift
var name = "Maegan"

func setName(to newName: String){
    name = newName
}

print(name) // Maegan

setName(to: "Thorgi")

print(name) // Thorgi
```

In this example, anyone using `setName` can read that the name will change to the string that follows `to`. When working on what the function does, it is also easy to understand since the parameter name is `newName`.


---

If you enjoy my posts, please consider sharing it or Buying me a Coffee!

<a href="https://www.buymeacoffee.com/appsbymw" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/arial-blue.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
A Full-stack Application with Svelte and Node
Tags: svelte, sapper, showdev, javascript
Published: 2019-11-15 15:37:58

A few days ago, I shared on github a complete full-stack application built with Svelte/Sapper on the frontend and Node/Express on the backend — check out the [live demo](https://svelte-news-app.herokuapp.com/).

This application is split into two projects: [the frontend](https://github.com/TahaSh/svelte-news-app) and [the backend](https://github.com/TahaSh/svelte-news-app-backend). The frontend communicates with the backend through its API to store data into the database and perform authentication/authorization, etc.

This project covers things like:

- Authentication/Authorization with JWT
- Maintaining logged-in user data with sessions and cookies
- Routing
- Communicating with a backend API
- Handling errors
- Pagination
- Loading states
- Preloading data
- Prefetching data
- Rendering nested components recursively
- More stuff

If you're interested in how this appilcation was built, stay tuned for the blog series that I'm going to start very soon. In this series, you'll learn how to build the same demo from scratch!

For updates on the blog series, follow me on twitter [@tahazsh](https://twitter.com/tahazsh).

---

Links:

- [Frontend](https://github.com/TahaSh/svelte-news-app)
- [Backend](https://github.com/TahaSh/svelte-news-app-backend)
- [Live Demo](https://svelte-news-app.herokuapp.com/)
There’s more to learning programming than just writing code
Tags: featured, insights, programmingnews
Published: 2019-11-29 14:01:08

---
title: There’s more to learning programming than just writing code
published: true
date: 2019-11-15 15:20:46 UTC
tags: Featured,Insights,Programming News
canonical_url: https://hub.packtpub.com/theres-more-to-learning-programming-than-just-writing-code/
---

Everyone should learn to code, right? If everyone learned programming not only would people have better jobs, the economy would be growing, and ultimately we’d all have far superior lives to the ones we lead now. Except – clearly – that’s just not true. Yes, perhaps that position is a bit of a caricature, but […]

The post [There’s more to learning programming than just writing code](https://hub.packtpub.com/theres-more-to-learning-programming-than-just-writing-code/) appeared first on [Packt Hub](https://hub.packtpub.com).
I'm Chris Coyier from CodePen, CSS-Tricks, and ShopTalk Show. Ask Me Anything!
Tags: codepen, csstricks, shoptalkshow, ama
Published: 2019-11-15 15:14:32

---
title: I'm Chris Coyier from CodePen, CSS-Tricks, and ShopTalk Show. Ask Me Anything!
published: true
description: An AMA where I do my best to answer questions you might have about front-end development, myself, or the projects I help run.
tags: codepen, css-tricks, shoptalk show, ama
---

Hello! Like the title says, I am the co-founder of [CodePen](https://codepen.io/) (I have two fellow co-founders: [Tim](https://codepen.io/tsabat) and [Alex](https://codepen.io/quezo)), I am the (owner? creator? CEO? lol it's just a blog ok) of [CSS-Tricks](https://css-tricks.com/), and co-host of [ShopTalk Show](https://shoptalkshow.com/) with [Dave](https://shoptalkshow.com/).

I think websites are great. I [have a personal one](https://chriscoyier.net/) in addition to the other sites I help run. I probably like yours.

Nothing has been more fun and helpful over the years than writing stuff publicly. It helps me think. It starts conversations. It gets me invited to stuff. Heck, a sizeable chunk of my income comes from sponsorship and advertising which is largely in and around that writing.

Every time I [tweet](https://twitter.com/chriscoyier) I think, *aw snap*, that would have been more useful as a blog post.

![img](https://res.cloudinary.com/css-tricks/image/upload/c_scale,f_auto,q_auto,w_1542/v1573766475/IMG_0665_gj3xdx.jpg)

I think of myself as a front-end developer because I mostly write code that is meant for the browser. I feel like I have a decent perspective on the trade, as I work on (and have worked on) lots of projects across lots of different stacks and at lots of different scales. There are good and bad ideas everywhere.

Ask me anything!
Add CSS styles to React components with ReactStrap
Tags: react, javascript, reactstrap
Published: 2019-11-15 14:44:07

---
title: Add CSS styles to React components with ReactStrap
published: true
description: Use ReactStrap to quickly style your React application
tags: reactjs, javascript, reactstrap
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191003-reactstrap.jpeg
---

## Use ReactStrap to quickly style your React application

React lets us create frontend applications quickly, but we still need to make those applications pretty to look at and efficient to use, and we all know that UI development takes a long time to get it right.

If you want to get up and running quickly, you may consider using a styling library to speed up your development.
*ReactStrap* is a way to quickly add *Bootstrap* styling to a React application.

It's a library of components already styled with Bootstrap, a popular frontend component library.
ReactStrap will make components available to you that are already styled, so all you have to do is include them into your project and tweak their appearance to make them fit into your application.
You can add buttons, alerts, navigation bars, modal windows and even carousels to your React project by simply including them.
The styling of your whole application will be consistent and professional.

### How do you add ReactStrap?

Before using ReactStrap you need to install it with the command below.
Note that ReactStrap itself does not include the Bootstrap library, so you need to install it as well in your project.

```
npm install reactstrap
npm install bootstrap
```

After the library is installed the next step is to import Bootstrap in `index.js` file so it's available everywhere in your application:

```js
import 'bootstrap/dist/css/bootstrap.min.css';
```

At this point, ReactStrap is ready to use.
When we need to use a ReactStrap component we import it at the top of the file
where we want to include it by adding the import directive and specifying the
components to add:

```js
import { Button, Alert } from 'reactstrap';
```

Then, we can use the components as usual:

```js
<Button color="primary">Default button</Button>

<Alert>Text alert!</Alert>
```

As you can see, inside the component tags we add the text that will appear on the button and in the alert box.
We can also pass predefined props to control the styling.
In this case we pass the `color` prop to the `Button` component.
`color` controls the way the button is displayed on the page and takes a list of several predefined options.

To learn more about ReactStrap and find out all the components and all the options available check out [their website](https://reactstrap.github.io).