teleren/devto huggingface dataset:
How to Configure Jest for Vue apps Using Vuetify
Tags: vue, testing, javascript
Published: 2019-10-21 16:16:41

I have recently been working on a Vue project which utilizes [Vuetify](https://vuetifyjs.com/en/) for the base of some of it's components. Vue has the ability to register components globally, eliminating the need for importing base components. This works great in development, but I came across an error when testing the component with Vue Testing Library.

![Vue console error for using a globally registered component that could not be found](https://thepracticaldev.s3.amazonaws.com/i/wu57wynyir72dvd2p146.jpg)

This error occurred because Jest had not been configured to recognize Vuetify's global components. In order to resolve this, some additional information was required in the Jest setup file.

```javascript
// jest/setupFiles.ts
import '@testing-library/jest-dom/extend-expect';
import Vue from 'vue';
import Vuetify from 'vuetify';
    
Vue.use(Vuetify);
    
// Required for Vuetify
const app = document.createElement('div');
app.setAttribute('data-app', 'true');
document.body.appendChild(app);
```

First, we need to import both Vue and Vuetify in the setup file. By calling `Vue.use(Vuetify)`, Jest becomes aware of the plugin and the globally available components it provides. This solved the console error, but introduced a new warning, that no `<v-app>` or div with a `data-app` attribute was found. Vuetify requires one of these at the root of the application in order to mount its components to the page. Creating a div with this attribute and appending it to the body resolves this warning.

Now we have a test environment in jsdom that mirrors the requirements for Vuetify and can proceed with integration testing. Currently I have been using [Vue Testing Library](https://testing-library.com/docs/vue-testing-library/intro) for integration tests with good results. It uses Vue Test utils under the good, while hiding some methods that can encourage implementation testing practices.
HTML TIPS
Tags: ctrlshiftcode
Published: 2019-10-21 16:14:39

HTML TIPS

Here are some HTML (hypertext markup language) tips for newbies. The tips should be very helpful to you especially if you’re just starting out on building web pages. 

1.  Always close your HTML tags.
2.  Use HTML comments wisely.
To make your HTML code clearer for you (and for others) you can add comments to your code. These are snippets of code that are ignored by the web browser. A comment declaration starts with <! followed by a zero or more comments, followed by >. A comment starts and ends with “--” and doesn’t contain any occurrence of “--”. ( eg. <!--Hello-→)
3.  Never leave your title tag empty.
4.  Use online resources.
5.  Use your browsers development tools.
6.  Use keyboard shortcuts, here are some examples;
Save:                       CTRL+S            
Refresh:                    CTRL+R 
New tab:                    CTRL+T
Close tab:                  CTRL+W
Reopen the last closed tab: CTRL+SHIFT+T
Open up browser development tool: F12
7.  There is a HTML Validator that will check your work, you can sync it to your visual studio.

HTML is the foundation to all web pages. In comparison with building a house the HTML would be the walls, sheet rock, foundation. CSS would be the decoration, color of the walls, etc. And Javascript would be the working of the lights and other switches in the house.
#pretty_print_instance_variables
Tags: ruby, rails
Published: 2019-10-21 16:08:52

I was trying to learn about pretty_print, as that is how Pry displays objects to stdout, when I learned about this method. It is pretty simple so I will just show an example.

```ruby
class MyClass
  attr_accessor :long, :list, :of, :attrs
end

pp MyClass.new
#<MyClass:0xobject_id @long=nil, @list=nil, @of=nil, @attrs=nil>

class MyClass
  def pretty_print_instance_variables
    [:@long]
  end
end

pp MyClass.new
#<MyClass:0xobject_id @long=nil>
```
Cypress vs.....
Tags: discuss, testing, javascript, meta
Published: 2019-10-21 16:07:30

Hey folks, we're considering adopting Cypress for E2E testing on DEV, but want to get some feedback if anyone wants to propose other tools in this genre.

We currently do some E2E in rspec (Rails), but it's also a component of the app and process which is under-developed.

So feedback is much appreciated, thanks a lot!
How to use `import/export` in Node without Babel
Tags: node, javascript
Published: 2019-10-21 16:02:12

---
title: How to use `import/export` in Node without Babel
published: true
canonical_url: https://www.coreycleary.me/how-to-use-import-export-in-node-without-babel/
tags: node,javascript
---

<em><strong>Originally published at <a href="https://www.coreycleary.me/how-to-use-import-export-in-node-without-babel/">coreycleary.me</a></strong>. This is a cross-post from my content blog. I publish new content every week or two, and you can <a href="https://www.coreycleary.me/about/">sign up to my newsletter</a> if you'd like to receive my articles directly to your inbox! I also regularly send cheatsheets and other freebies.</em>

Have you ever found yourself wanting to ditch using `require` for your Node imports, ditch writing code like this?
```javascript
const knex = require('knex')
const itemService = require('../services')
```

If you've been writing any modern client-side JavaScript with React, Vue, etc., you've been importing code like so:
```javascript
import React from 'react'
import TodoComponent from './components'
```

It would be <strong>so great</strong> to be able to write in the same style in Node for your server-side code.

And if you have code that you need to share between client and server, you can easily just use `import`!

Sure, you can use Babel on the server... but if you're just using it for `import/export`, it's a big waste and headache to maintain the Babel config.

Plus... you have to still wait for Babel to transpile and that can be kinda slow...

<h3>The solution</h3>
There is experimental support for ECMAScript modules in newer version of Node using the [--experimental-modules](https://nodejs.org/api/esm.html#esm_enabling) flag.

But I've found a more robust and interoperable solution to use is the [esm](https://github.com/standard-things/esm) module.

<h3>Instructions</h3>
First, install the module with `npm i esm` or `yarn add esm` (if you're using Yarn).

Then, in "scripts" in `package.json`, for your start script: `node -r esm [.js entrypoint]`. If you're using `nodemon` this can be `nodemon -r esm [.js entrypoint]`!

And in the test script in `package.json`, `mocha -r esm [rest of your mocha config here]`

In case it's not already clear, you just have to add `-r esm` to your scripts!

And now instead of:
```javascript
const knex = require('knex')
const itemService = require(../services)
```
...you can write:
```javascript
import knex from 'knex'
import itemService from '../services'
```

Love JavaScript but still getting tripped up by asynchronous code? I publish articles on JavaScript and Node every 1-2 weeks, so if you want to receive all new articles directly to your inbox, <a href="https://www.coreycleary.me/about/">here's that link again</a> to subscribe to my newsletter!
RealmQL an "alternative" to GraphQL
Tags: graphql, realmql, express, api
Published: 2019-10-21 15:57:57

[RealmQL] (https://github.com/grkek/realmql) is a [GraphQL] (https://graphql.org/) "alternative" single end-point OM (Object Mapper) which acts as a query language. RealmQL maps the objects to the [Realm database] (https://realm.io/) and stores them locally.

RealmQL is still in its early stage of development, and it would be wonderful if any of you could contribute to it !

Some example commands are described below:

**CREATE**

Creates a schema model with the provided values
```json
{
    "Person": {
        "firstName": "John",
        "lastName" : "Doe"
    }
}
```

Creates a schema model with a nested model, first you need to create the object, which will be linked to this one
```json
{
    "License": {
        "privateId": "randomString"
    }
}
```

And then link it to the person
```json
{
    "Person": {
        "firstName": "John",
        "lastName" : "Doe",
        "license": {"id": 1}
    }
}
```

**READ**

Reads the schema model for specific values and returns it as an object
```json
{
    "Person": {
        "id": 1,
        "values": ["firstName", "lastName"]
    }
}
```

Reads the schema model for values and returns it as an object
```json
{
    "Person": {
        "id": 1,
        "values": ["*"]
    }
}
```

Reads the schema model for specific nested model values and returns it as an object
```json
{
	"Person": {
		"id": 1,
		"values": [
			"*",
			{"license": ["privateId"]}
		]
	}
}
```

Reads the schema model for nested model values and returns it as an object
```json
{
	"Person": {
		"id": 1,
		"values": [
			"*",
			{"license": ["*"]}
		]
	}
}
```

**UPDATE**

Updates the schema model with the provided values
```json
{
    "Person": {
        "id": 1,
        "values": {
            "firstName": "Joseph",
            "lastName": "Momma"
        }
    }
}
```

**DELETE**

Deletes the schema model
```json
{
    "Person": {
        "id": 1,
        "onDelete": {}
    }
}
```

The onDelete function will contain funtionality similar to the Django ORM, for example:
```json
{
    "Person": {
        "id": 1,
        "onDelete": {
            "CASCADE": {
                "objectReferences": []
            },
            "PROTECT": {
                "objectReferences": []
            },
            "SET_NULL": {
                "objectReferences": []
            }
        }
    }
}
```

I am open to suggestions and contributors, feel free to critique my project, review it, fork it and build your own ideas on top of it !

Thank you !

More information can be found at [RealmQL GitHub repository] (https://github.com/grkek/realmql)
TestNG Tutorial for Automation Testing
Tags: testing, java, tutorial, beginners
Published: 2019-10-21 15:53:44

TestNG Framework using IntelliJ IDE for Selenium Automation Testers 

TestNG is most popular framework used with Java and it is open source. It is become very popular in Test Automation especially in Selenium.

IntelliJ IDEA is an IDE specifically designed to maximize developer productivity. It has lot of options which will make user feel friendly UI.

In this course you will learn TestNG Framework using Intelllij IDEA specially designed for Java Developers and Selenium Automation Testers.

**Topics Covered:**
* Introduction to TestNG
* Create & Run Tests in TestNG
* TestNG Report
* Annotations in TestNG
* Prioritizing Tests
* Dependency Tests
* Grouping Tests
* Assertions
* Parameters in TestNG
* DataProvider in TestNG
* Parallel Tests
* TestNG Listeners

**What you'll learn:**
* TestNG Framework, IntelliJIDEA Tool

{% youtube Dfl_2aU5fVw %}
Multiple Series Specific to D - A Plan
Tags: dlang, tutorial
Published: 2019-10-21 15:50:53

I started a series based on the searches I performed to work in Python. I liked the results, but since I'm not asking questions of Python it misses the point of that series.

{% link https://dev.to/jessekphillips/boolean-in-d-943 %}

Thus I've decided on introducing three different series to continue in its spirit. 

* Toolbox
  * I will use this will focus on small tasks, simple solutions. 
  * {% link https://dev.to/jessekphillips/parsing-a-string-in-d-15pk %} 
* Workshop 
  * This will focus on items which are more complex. 
  * {% link https://dev.to/jessekphillips/argument-parsing-into-structure-4p4n %} 
* D Features 
  * These cover features provided by the language which support solutions but does not directly applying the feature to solve a problem. 
  * {% link https://dev.to/jessekphillips/templates-3dnf %} 

{% link https://dev.to/jessekphillips/my-case-for-d-444p %}

I also signed up for [ko-fi](https://ko-fi.com/jessekphillips) but I'm not sure if they are more than just a glorified link to PayPal. Maybe if I placed my content there...
Kubernetes Patterns : The Service Discovery Pattern
Tags: kubernetes, docker, devops
Published: 2019-10-21 15:33:24

Why do we need Service Discovery?
Kubernetes deploys applications through Pods. Pods can be placed on different hosts (nodes), scaled up by increasing their number, scaled down by killing the excess ones, and moved from one node to another. All those dynamic actions must occur while ensuring that the application remains reachable at all times. To address this critical requirement, we use the Service Discovery pattern. To understand service discovery, let’s briefly visit the Service Discovery Architecture (SOA).

In a microservices design, the application is broken down into a number of components, where each component is responsible for a specific role. Different components must communicate with each other using network protocols (for example, HTTP). So, imagine that a client component (consumer) needs to send an HTTP message to service (producer). If there’s only one instance of the producer, the solution is straightforward: place the producer connection information (like the IP address or DNS name, the protocol, and the port) in a configuration file for the client to use. However, to achieve high availability, there’s often more than one instance of a particular service available. In this case, the client cannot just hook itself to one of the producers. If this service instance was deleted or renamed, the client loses connectivity and part of the application breaks. Hence, the client needs some way to discover which service instance is healthy and available to that it can connect to it. So, back to SOA, there are two ways for a client to discover services:

Client-side discovery: in this mode, the client is responsible for determining which service instance it should connect to. It does that by contacting a service registry component, which keeps records of all the running services and their endpoints. When a new service gets added or another one dies, the Service Registry is automatically updated. It is the client’s responsibility to load-balance and distribute its request load on the available services.

Server-side discovery: in this mode, a load-balancing layer exists in front of the service instances. The client connects to the well-defined URL of the load balancer and the latter determines which backend service it shall route the request too.
NordVPN: Official response regarding the breach of one of our datacenters
Tags: vpn, nordvpn, security
Published: 2019-10-21 15:03:33

---
title: NordVPN: Official response regarding the breach of one of our datacenters
published: true
description: We have gathered all the data regarding the events of the last couple of days. 
tags: vpn, nordvpn, security,
---

We became aware that on March 2018, one of the datacenters in Finland we had been renting our servers from was accessed with no authorization. The attacker gained access to the server by exploiting an insecure remote management system left by the datacenter provider while we were unaware that such a system existed. The server itself did not contain any user activity logs; none of our applications send user-created credentials for authentication, so usernames and passwords couldn’t have been intercepted either. The exact configuration file found on the internet by security researchers ceased to exist on March 5, 2018. This was an isolated case, and no other datacenter providers we use have been affected.

You can read more on: https://nordvpn.com/blog/official-response-datacenter-breach/
chart-race-react: Seamlessly integrate Bar Chart Races to your website.
Tags: react, javascript, webdev
Published: 2019-10-21 14:55:10

2019 is the year for Bar Chart Races. If you have no idea what that is, simply look it up on Google. It is EVERYWHERE. 

As a React user, I decided to create an npm package that allows users to seamlessly integrate Bar Chart Races into their website. The name is `chart-race-react`. You can download it via `npm`.

The link is here: [Github Link](https://github.com/Mckinsey666/chart-race-react). 

```
npm install --save chart-race-react
```

Inside your project, you simply import `BarChart`, and pass in your props just like any React Component.

```
import BarChart from 'chart-race-react`;
```
Just a demo of the smooth bar chart race created using `chart-race-react`.

![Alt text of image](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/demo_icon.gif)

You can pass in customized data, define the duration of animation, specify colors and bar styles! This is a fully customizable and flexible tool for data visualization and web UI design. 

||||
|---|---|---|
|![color1](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/color1.gif)|![color2](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/color2.gif)|![color3](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/color3.gif)|
|![border1](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/border1.gif)|![border2](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/border2.gif)|![border3](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/border3.gif)|
|![speed3](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/speed3.gif)|![speed1](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/speed1.gif)|![speed2](https://raw.githubusercontent.com/Mckinsey666/chart-race-react/master/assets/speed2.gif)|
||||
Inspiring talks from GraphQL Berlin Meetup
Tags: graphql, webdev, tutorial
Published: 2019-10-21 13:57:07

---
title: Inspiring talks from GraphQL Berlin Meetup
published: true
description: Recordings of talks from GraphQL berlin Meetup #15
tags: graphql,discuss,webdev,tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9jrrjt7st2cooyjllkie.png
---


If you are not subscribing [GraphQL Weekly](https://www.graphqlweekly.com/) (if so it's a good moment to do it), you might have missed the recordings of the recent GraphQL Meetup in Berlin that took place at Berlin [Prisma](https://www.prisma.io/) office.

### The talks

#### "System Design and Architecture @ GraphQL" by Bogdan Nedelcu 

Designing GraphQL API's for scale is quite a challenge as GraphQL is relatively a new technology. Bogdan Nedelcu talked about system architecture patterns that have been around for a long time in different flavors that GraphQL bases on.

{% youtube S22rYsesrQc %}


#### "Pursuing Singularity" by Roman Paradeev

During his talk, Roman Paradeev made an overview of tools that provide type safety across your database, API & client-side in the GraphQL ecosystem.

{% youtube yN8NBXdRRfc %}


#### "Key learnings from implementing authentication and authorization using GraphQL" by Christoph Hartmann

Basing on his experience with GraphQL implementation Christoph Hartmann presented different approaches to implementing authentication and authorization for GraphQL services.

{% youtube pF6SH7Tm6Pc %}
Enqueue Wordpress Plugin Admin Panel Scripts
Tags: wordpress, webdev
Published: 2020-03-26 06:14:33

---
title: Enqueue Wordpress Plugin Admin Panel Scripts
published: true
date: 2019-10-21 13:00:00 UTC
tags: wordpress, webdev
canonical_url: https://nimblewebdeveloper.com/blog/enqueue-wordpress-admin-panel-scripts
---

## How To Enqueue Wordpress Plugin Admin Scripts Only Where You Need Them

### If you're building a Wordpress plugin with an admin panel, only enqueue your scripts/styles on your page

On of my pet peeves with Wordpress plugins is intrusive scripts and styles. They're the biggest contributor to big, slow Wordpress sites, and they give Wordpress a bad name.

When I'm building a plugin with an admin panel, I like to only enqueue my scripts and styles on that page.

Here's how I do it;

#### 1. First, create your admin page

```php  
<?php  
add\_action('admin\_menu', 'nwd\_add\_admin\_page');  
function nwd\_add\_admin\_page() {  
  // add top level menu page  
  add\_menu\_page(  
    'My Admin Page',  
    'My Admin Page',  
    'manage\_options',  
    'my-admin-page',  
    'admin\_page\_html'  
  )  
}  
  
```

This code will add a top level menu item 'My Admin Page', which will display the HTML returned by the callback 'admin\_page\_html'

You may also want to create a submenu page which will be slightly different code.

#### 2. Enqueue your scripts and styles cleverly

```php  
<?php  
  
add\_action('admin\_enqueue\_scripts', 'nwd\_admin\_enqueue\_scripts');  
  
public function nwd\_admin\_enqueue\_scripts($screen) {  
  // Check the $screen variable to see what page we're on  
  // if you created a top level page in the previous step  
  // $screen should be toplevel\_page\_$slug  
  // If $screen doesn't match, we will quit so we don't   
  // pollute the whole admin with our scripts/styles  
    
    
  // Quit if it's not our screen  
  if('toplevel\_page\_my-admin-page' !== $screen) return;  
    
  // If we get this far, it must be our screen  
  // Enqueue our assets  
  wp\_enqueue\_script('my-admin-page', plugin\_dir\_url( \_\_FILE\_\_ ) . 'assets/js/admin.js', array(), null, true);  
}  
  
```

This code is how you're probably already adding scripts, but the small difference is we check the $screen variable to see if we are on the right screen.

Wordpress will pass the $screen variable in when it calls your enqueue scripts function, and you can use this to check which admin page you're on.

Clever!
About Chris David Muggler
Published: 2019-10-21 13:52:37

Chris David Muggler was born in Trenton, New Jersey and was raised in Holland, Pennsylvania. From an early age Chris David Muggler competed in various sports and ended up having the privilege of competing in Track and Field at the collegiate level. Chris David Muggler graduated from UNC Charlotte with a Bachelors of Science in Psychology and a minor in Urban Youth and Development, with hopes to continue his education. Some of Chris David Muggler’s hobbies include hiking, writing, and spending time with God, his family, and friends.
Daily Challenge #96 - Easter Egg Crush Test
Tags: challenge
Published: 2019-10-21 13:44:58

---
title: Daily Challenge #96 - Easter Egg Crush Test
published: true
series: Daily Challenge
description: What is the maximum height, such that you can always determine which floor the target floor is when the target floor can be any floor between 1 to this maximum height
tags: challenge
---

Eulampy has a collection of some almost identical Fabergè eggs. One day his friend Tempter said to him:

- Do you see that skyscraper? And can you tell me a maximal floor that if you drop your egg from will not crack it?
- No, - said Eulampy.
- But if you give me N eggs, - says Tempter - I'll tell you an answer.
- Deal - said Eulampy. But I have one requirement before we start this: if I will see more than M falls of egg, my heart will be crushed instead of egg. So you have only M tries to throw eggs. Would you tell me an exact floor with this limitation?


Your task is to help Tempter - write a function

`height :: Integer -> Integer -> Integer`
`height n m = -- see text`

that takes 2 arguments - the number of eggs `n` and the number of trys `m` - you should calculate maximum skyscraper height (in floors), in which it is guaranteed to find an exactly maximal floor from which that an egg won't crack it.

Which means,

- You can throw an egg from a specific floor every try

- Every egg has the same, certain durability - if they're thrown from a certain floor or below, they won't crack. Otherwise, they crack.

- You have `n` eggs and `m` tries

What is the maximum height, such that you can always determine which floor the target floor is when the target floor can be any floor between 1 to this maximum height?


Examples
`height 0 14 = 0`
`height 2 0  = 0`
`height 2 14 = 105`
`height 7 20 = 137979`

Data range
`n <= 20000`
`m <= 20000`


***
_This challenge comes from Ivana on [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_