hello.js

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

Friday, 22 September, 2017 UTC

RxJS: Hot And Cold Observables

RxJS: Hot And Cold Observables

Observables are known as either hot or cold , depending on the nature of the data producer. Here we’ll go over the differences, why it matters, and how to properly manage both types of observables. Cold Observables Cold observables are observables where ... more


Thursday, 21 September, 2017 UTC

Simple Error Handling in RxJS

Simple Error Handling in RxJS

Creating complex observable pipelines is all good, but how do you effectively handle errors within them? Let’s go over some of the basics here with the catch , finally , retry and retryWhen operators. Observer’s Error Callback At its most basic, observers ... more


Tuesday, 19 September, 2017 UTC

Composing Custom Elements With Slots And Named Slots

Composing Custom Elements With Slots And Named Slots

With Shadow DOM , we can create Web Components that are a composition between the component’s internals and elements provided at author-time by the user of the custom element. This is similar with using either option or optgroup elements inside a native ... more


Monday, 18 September, 2017 UTC

Easy Online / Offline Detection with Vue.js & v-offline

Easy Online / Offline Detection with Vue.js & v-offline

One of the key cornerstones of any progressive web app is that any functionality that can be available offline should be available offline. In order to do that, you need to know when a device is online or offline. If you’re using Vue.js, there is a convenient ... more


Thursday, 14 September, 2017 UTC

Styling Your Custom Elements

Styling Your Custom Elements

Thanks to Shadow DOM, it’s very easy to style your Web Components using simple CSS selectors. In this post we’ll cover a few extra styling options available to us to style custom elements. On top of that, we’ll see how to allow the creation of styling ... more


Wednesday, 13 September, 2017 UTC

Attributes and Properties in Custom Elements

Attributes and Properties in Custom Elements

Now that we went over some of the basic concepts of Web Components and Custom Elements, let’s push our exploration a little bit further and discuss attributes and properties. This post discusses the Custom Elements V1 spec. We’ll start with a few important ... more


Monday, 11 September, 2017 UTC

Hassle-free Spinners with Vue.js

Hassle-free Spinners with Vue.js

I am exceedingly lazy. So lazy, in fact, that I default to downloading packages for itty-bitty components like spinners. Well, laziness coupled with the fact that for some reason my custom spinners are always glitchy. The upside of this is that occasionally ... more


Monday, 11 September, 2017 UTC

A New Way to Handle Events in React

A New Way to Handle Events in React

“Property Initializer Syntax” sounds more fancy than it really is. In this bite-sized tutorial see how this alternative way of writing event handlers will help eliminate boilerplate in your constructor and also defend against frivolous memory usage in ... more


Friday, 8 September, 2017 UTC

Polyfills and Transpilation for Your Custom Elements

Polyfills and Transpilation for Your Custom Elements

We covered the basics of creating custom elements using Web Component specs, but at the end we hinted that our simple custom element was not yet production-ready because of the use of new JavaScript features and the fact that Custom Elements and Shadow ... more


Tuesday, 5 September, 2017 UTC

Your First Custom Element

Your First Custom Element

So your interested in learning about Web Components and creating your own custom HTML tags? In this post we’ll explore the basic syntax and concepts to allow you to start dabbling with Custom Elements and Shadow DOM . We’ll create a silly <my-title> ... more


Monday, 4 September, 2017 UTC

Syndicating ESLint: Configure Once, Extend Everywhere

Syndicating ESLint: Configure Once, Extend Everywhere

In code, as in ice skating, style counts. Legibility, consistency, and team harmony are all benefits of embracing the pedantic pursuit of rules. More than any of these benefits, however, a well defined style guide can help us avoid common pitfalls and ... more


Monday, 4 September, 2017 UTC

Understanding Vue.js Transitions

Understanding Vue.js Transitions

Despite having worked with Vue.js on countless projects, and having learned the ins-and-outs of various parts of it, for some reason understanding the transition system has always left me confused. Hopefully this article can help shed some light on what ... more


Friday, 1 September, 2017 UTC

Introduction to Routing Using Stencil

Introduction to Routing Using Stencil

@stencil/router is the NPM package to use with Stencil to make it easy to define routes for your web component-powered PWA. The API for the router is very similar to React Router’s, so you may already be familiar with the syntax. In this post we’ll build ... more


Friday, 1 September, 2017 UTC

Using the Intersection Observer API to Trigger Animations and Transitions

Using the Intersection Observer API to Trigger Animations and Transitions

With rapidly increasing browser support, there’s been a lot of excitement around the Intersection Observer API, which provides an easy way to watch and register callbacks to trigger when elements on a page come into view. Probably the most obvious use ... more


Tuesday, 29 August, 2017 UTC

Getting Started With Stencil

Getting Started With Stencil

Stencil is a new tool from the Ionic team that allows to create native web components, but with added niceties like virtual DOM, reactive data-binding, TypeScript and JSX. At build time, Stencil compiles away everything that’s not native to the web platform ... more


Sunday, 27 August, 2017 UTC

Writing Abstract Components With Vue.js

Writing Abstract Components With Vue.js

Vue components are great, right? They encapsulate the view and behavior of your app into nice little composable pieces. If you need a little extra functionality on them, just attach directives! Thing is, directives are fairly inflexible and can’t do ... more


Thursday, 24 August, 2017 UTC

Copying to Clipboard Using Vanilla JavaScript

Copying to Clipboard Using Vanilla JavaScript

We covered a great little library, Clipboard.js, that makes it easy to copy text to the clipboard without the need for Flash. We also covered vue-clipboard2 to use Clipboard.js with Vue. The thing is though, you can now pretty easily implement the feature ... more


Wednesday, 23 August, 2017 UTC

slice vs splice in JavaScript

slice vs splice in JavaScript

Are you finding yourself always looking up the difference between slice() and splice() ? Well, here’s a quick rundown of the difference. TL;DR: slice is immutable and splice mutates the array. Array.prototype.slice The slice method returns a new array ... more


Monday, 21 August, 2017 UTC

CSS-in-JS Roundup: Styling React Components

CSS-in-JS Roundup: Styling React Components

Together, we will look at the top 15 CSS-in-JS libraries as judged by total accumulated GitHub stars. We’ll compare their features, strengths & weaknesses. Included are some really new libraries such as emotion , as well as some of the originals, ... more


Sunday, 20 August, 2017 UTC

Painlessly Lazy-Load Images In Vue.js With vue-clazy-load

Painlessly Lazy-Load Images In Vue.js With vue-clazy-load

Images are a fun part of web development. They look great, and are incredibly important in almost every app or site, but they’re huge and slow. A common technique of late is that of lazy-loading images when they enter the viewport. That saves a lot of ... more


Saturday, 19 August, 2017 UTC

Creating Compositional Components in React With this.props.children

Creating Compositional Components in React With this.props.children

If you’re a newcomer to React, you may have seen this.props.children in various tutorials. Sometimes its purpose isn’t clear or you may have thought, “I could have done it a different way.” Let’s find out the unique perks of using children in React so ... more


Wednesday, 16 August, 2017 UTC

Using Chart.js in Angular With ng2-charts

Using Chart.js in Angular With ng2-charts

Chart.js is a popular JavaScript charting library and ng2-charts is a wrapper for Angular 2+ that makes it easy to integrate Chart.js in Angular. Let’s go over the basic usage. Installation & Setup The first step is to install both Chart.js and ng2-charts ... more


Monday, 14 August, 2017 UTC

Simplify Common Vue.js Computed Properties With vue-computed-helpers

Simplify Common Vue.js Computed Properties With vue-computed-helpers

Computed Properties in Vue are an amazing innovation that really cut down on development time. Some of the most common uses for them are “local reducers” for some data structure. (For example, to pull a particular element out of an array, or find the ... more


Sunday, 13 August, 2017 UTC

Marble Testing RxJS Observables

Marble Testing RxJS Observables

RxJS Observables are a really powerful and elegant way to compose asynchronous code but can get complex to test. Testing is made much easier with marble testing. This post explains marble testing and an example of how we would use it to test a ColorMixer ... more


Wednesday, 9 August, 2017 UTC

A Reference for Angular Templates

A Reference for Angular Templates

We covered many of the different Angular template syntax concepts like data binding or the ngIf and ngFor built-in directives. Here we’ll take an opportunity to summarize the different possibilities for syntax for an easy reference. This post covers ... more


Monday, 7 August, 2017 UTC

Quick Introduction to Template-Driven Forms in Angular

Quick Introduction to Template-Driven Forms in Angular

We’ve covered reactive forms in Angular, so now let’s cover an alternative way to declare and work with forms: template-driven forms . Template-driven forms are similar to how forms work in AngularJS and they can be simpler to work with because everything ... more


Monday, 7 August, 2017 UTC

Persist Vuex State With vuex-persist

Persist Vuex State With vuex-persist

Vuex is great for handling state in your app, but sometimes you want it to persist across multiple pages loads and whatnot. The naive way to do this (and I’m as guilty of it as any,) is to add a quick little function call in each mutation to save the ... more


Saturday, 5 August, 2017 UTC

Anatomy of an Angular Module

Anatomy of an Angular Module

In Angular, we get modules, known as NgModules, to act as the unit that glues together an app or features within an app. All Angular apps have one root module, the app module, that deals with unifying the whole app together. It’s also a best practice ... more


Saturday, 5 August, 2017 UTC

JavaScript String Replace

JavaScript String Replace

Replacing text in a string is a very common operation, and thank’s to the replace method available on the String prototype, it’s very easy to do. The simplest use-case is to provide a string that will act as a substring to match and a string replacement ... more


Tuesday, 1 August, 2017 UTC

Quick Intro to the Payment Request API

Quick Intro to the Payment Request API

The Payment Request API is a new JavaScript API that makes it easy to collect payment information that can then be sent to a payment processor such as Stripe. The aim is to improve payment UX by making it easy for users to save their card information ... more