hello.js

var please = require('share');
console.log('thank you');

Monday, 5 June, 2017 UTC

Add Material Ripples to Your Vue.js Components

Add Material Ripples to Your Vue.js Components

Though it may appear that this week has been a fairly slow week for Vue.js news, at least one important, critical library has come into the light. That library is vue-ripple-directive ! Once you’ve used it you’ll wonder how you ever lived without it. ... more


Monday, 5 June, 2017 UTC

Introduction to Unit Testing in Angular

Introduction to Unit Testing in Angular

It’s easy to get started with unit testing for Angular 2+ apps. If your projects was setup using the Angular CLI, everything will be ready for you to start writing tests using Jasmine as the testing framework and Karma as the test runner. Angular also ... more


Thursday, 1 June, 2017 UTC

React Snapshot Testing

React Snapshot Testing

Snapshot testing is particularly useful in testing React components. Let’s see how it’s done. react-test-renderer You need to render your React components before you serialize them. Be sure to install react-test-renderer so you can do so. yarn add --dev ... more


Thursday, 1 June, 2017 UTC

An Overview of Mock Functions With Jest

An Overview of Mock Functions With Jest

A higher order function takes a function and returns a function. Jest offers a way to make sure the function you gave is being used right. Testing a Higher Order Function Let’s say you want to write a memoization function. It might look something like: ... more


Wednesday, 31 May, 2017 UTC

Document Your Vue.js Components with Propdoc

Document Your Vue.js Components with Propdoc

Every developer wants to read good documentation. Every developer wants to write good documentation. Few developers actually do. Let’s take a look at a really simple way to both generate documentation for your Vue.js components and render it as well ... more


Tuesday, 30 May, 2017 UTC

Firebase Authentication in Angular with AngularFire2

Firebase Authentication in Angular with AngularFire2

Firebase provides a very simple way to setup authentication in your apps. Here we’ll explore how to setup a simple email/password signup and authentication workflow for Angular 2+ apps using the AngularFire2 library. The first step will be to create ... more


Saturday, 27 May, 2017 UTC

Angular Router: Query Parameters

Angular Router: Query Parameters

Query parameters in Angular allow for passing optional parameters across any route in the application. Query params are different from regular route parameters, which are only available on one route and are not optional (e.g.: /product/:id ). Let’s see ... more


Friday, 26 May, 2017 UTC

Introduction to Snapshot Testing With Jest

Introduction to Snapshot Testing With Jest

One of Jest’s key features is snapshot testing; a very useful tool to write quick, accurate tests. Creating a Snapshot Let’s say you have a function that makes changes: // changeMaker.js export default function changeMaker(value) { let pennies = value ... more


Thursday, 25 May, 2017 UTC

Drag & Drop in Your Angular Apps With ng2-dragula

Drag & Drop in Your Angular Apps With ng2-dragula

Dragula is a popular JavaScript library for drag & drop, and ng2-dragula is a wrapper to use Dragula in Angular 2+ apps. Let’s see how it’s used. Installation First add ng2-dragula to your project using Yarn or npm: # Yarn $ yarn add ng2-dragula ... more


Wednesday, 24 May, 2017 UTC

Introduction to Testing With Jest

Introduction to Testing With Jest

Jest is a JavaScript testing framework requiring little to no configuration. Here’s a quick post to get you up and running with it. Setting Up Jest Are you using create-react-app? If so, Jest is already installed, so you can skip this part. Thanks, vertical ... more


Wednesday, 24 May, 2017 UTC

Control DOM Outside Your Vue.js App with portal-vue

Control DOM Outside Your Vue.js App with portal-vue

One of Vue.js’ greatest strengths is it’s ability to be used to enhance or replace parts of older apps or even static pages. This progressive nature allows Vue to be incrementally adopted or just used to improve a pre-existing app. portal-vue by Linus ... more


Wednesday, 24 May, 2017 UTC

Website Theming With CSS Custom Properties

Website Theming With CSS Custom Properties

You may have noticed that you can now toggle between dark and light themes on the site. This was done using CSS custom properties (aka CSS variables). In this post you’ll see how you can achieve something similar using only CSS and a touch of JavaScript. ... more


Monday, 22 May, 2017 UTC

Examining Content Placeholder Strategies with Vue.js

Examining Content Placeholder Strategies with Vue.js

A practice that has gained significant traction recently is displaying a UI full of placeholder styles that look like the fully-loaded page before the entirety of the content loads. This tactic, used by Slack , Medium , and Facebook , among others, helps ... more


Wednesday, 17 May, 2017 UTC

Use Web Workers with Ease in Vue.js with vue-worker

Use Web Workers with Ease in Vue.js with vue-worker

Like many developers, when Web Workers first emerged onto the web development scene, I was incredibly enthusiastic and dreampt of the various amazing things I could accomplish with them. However, my enthusiasm was quickly dampened when I realized that ... more


Wednesday, 17 May, 2017 UTC

Using the takeUntil RxJS Operator to Manage Subscriptions Declaratively

Using the takeUntil RxJS Operator to Manage Subscriptions Declaratively

Angular takes care of unsubscribing from many observable subscriptions like those returned from the Http service or when using the async pipe. Outside of that however, it can quickly become a mess to keep tabs on all subscriptions and make sure we unsubscribe ... more


Tuesday, 16 May, 2017 UTC

Introduction to the React Ref System

Introduction to the React Ref System

While React’s virtual DOM elegantly handles most situations you’ll run into, there are some cases where you’ll need to interact with the actual elements. For these occasions, React provides a ref system. Creating a Ref Creating a ref is pretty straightforward; ... more


Monday, 15 May, 2017 UTC

Handle the EU Cookie Law in Vue.js with vue-cookie-law

Handle the EU Cookie Law in Vue.js with vue-cookie-law

Developers in the EU are probably fairly familiar with the Cookie Law, the law requiring you to inform users if your website uses cookies and have them accept that or leave the site. Now, it’s just a tiny bit of extra effort to implement something like ... more


Friday, 12 May, 2017 UTC

Getting Started With ngrx for Redux-Style State Management in Angular

Getting Started With ngrx for Redux-Style State Management in Angular

The Redux pattern is a very powerful way to manage state in web apps, especially when the application gets more complicated. Redux the library is most often used with React, but thanks to the ngrx/store library, combined with the power of RxJS, we can ... more


Wednesday, 10 May, 2017 UTC

Using Bootstrap in Your Angular Apps with ng-bootstrap

Using Bootstrap in Your Angular Apps with ng-bootstrap

ng-bootstrap is a set of components and directives that wrap the latest version of Bootstrap ( v4.0.0 alpha 6 at the time of this writing). This makes it easy to use Bootstrap in your Angular apps. Angular 4+ is required to use ng-bootstrap. ng-bootstrap ... more


Tuesday, 9 May, 2017 UTC

A Gentle Introduction to Cycle.js

A Gentle Introduction to Cycle.js

Cycle.js is the most accessible FRP framework for JavaScript we’ve yet had the chance to be awed and confounded by. The upshot is it’s got plenty of training wheels to get you on your wobbly way. The down: it’s easier to implement than to comprehend, ... more


Tuesday, 9 May, 2017 UTC

Create a Reactive Data Pipeline with Vue.js

Create a Reactive Data Pipeline with Vue.js

Vue can do a lot of things. One of them, of course, is acting as the view layer for your apps. Actually, I think that’s the only intended purpose for Vue, but I know of a few others that are actually pretty neat. Today, we’ll eschew using Vue for the, ... more


Tuesday, 9 May, 2017 UTC

Class Component Overview in React

Class Component Overview in React

Class syntax is one of the most common ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks. This guide assumes that Babel has been properly configured for React. If you ... more


Sunday, 7 May, 2017 UTC

How to Customize Vue Webpack Loaders

How to Customize Vue Webpack Loaders

One of the most unique features of Vue is the built-in support for other languages and pre-processors in .vue single-file-components. This allows you to use whatever pre-processor you’d like so long as it has an available webpack loader. Often the defaults ... more


Thursday, 4 May, 2017 UTC

Managing Subscriptions in Angular With the Async Pipe

Managing Subscriptions in Angular With the Async Pipe

The built-in async pipe in Angular 2+ gives us a great tool to easily manage observable subscriptions. With it, we can learn to avoid having to manually subscribe to observables in component classes for most cases. Let’s say we want to have an observable ... more


Wednesday, 3 May, 2017 UTC

Handle Touch Events in Vue.js With vue-touch

Handle Touch Events in Vue.js With vue-touch

It seems these days that more and more people are foregoing their tried-and-true big screens, keyboards and mice, for a tiny new-fangled slab of glass and metal that does nothing but frustrate those of us with large fingers. Because of this, unfortunately, ... more


Tuesday, 2 May, 2017 UTC

Understanding Change Detection Strategy in Angular

Understanding Change Detection Strategy in Angular

Angular performs change detection on all components (from top to bottom) every time something changes in your app from something like a user event or data received from a network request. Change detection is very performant, but as an app gets more complex ... more


Tuesday, 2 May, 2017 UTC

Angular Quick Tip: Binding Specific Keys to the Keyup and Keydown Events

Angular Quick Tip: Binding Specific Keys to the Keyup and Keydown Events

When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key names. This makes it very easy to trigger the event only when specific keys are pressed. First, let’s see an example without using a key name. Let’s ... more


Tuesday, 2 May, 2017 UTC

Upgrading to Vue.js 2.3

Upgrading to Vue.js 2.3

The brand-new Vue 2.3 release is all about server-side rendering. It’s no small update either. The entire SSR process has been significantly improved and revamped, extensive documentation has been added, and a few old patterns have been deprecated. (Though ... more


Sunday, 30 April, 2017 UTC

Angular Router: Navigation Using RouterLink, Navigate or NavigateByUrl

Angular Router: Navigation Using RouterLink, Navigate or NavigateByUrl

In our intro to the Angular router, we briefly saw how to navigate to a different route declaratively using the RouterLink directive. This post builds on that to demonstrate a few more examples, as well as how to navigate imperatively in the component ... more


Sunday, 30 April, 2017 UTC

Copying Text With vue-clipboard2

Copying Text With vue-clipboard2

Sometimes it’s really convenient to have a nice little “copy” button next to a tidbit of information in your web app. No big deal, just a little button right? Well, it turns out that’s a bit more difficult than one might expect. Copying text requires ... more