hello.js

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

Sunday, 30 July, 2017 UTC

Prerender Vue.js Apps With prerenderer-webpack-plugin

Prerender Vue.js Apps With prerenderer-webpack-plugin

SSR (Server-Side Rendering) gets all the love these days. Speeding up initial-page-loads by sending a full HTML page instead of a skeleton with a few scripts is a really great idea. There’s a catch though. SSR is hard . There are a lot of things to worry ... more


Friday, 28 July, 2017 UTC

Gatsby - Not Yo' Mama's Static Site Generator

Gatsby - Not Yo' Mama's Static Site Generator

Gatsby is a React-based static site generator (SSG) that combines the best of all worlds: blazing fast static sites using modern, best-practice, front-end development techniques such as route-based code splitting, PRPL, service workers, and offline support; ... more


Wednesday, 26 July, 2017 UTC

Using index.js for Fun and Public Interfaces

Using index.js for Fun and Public Interfaces

By using an index.js file in the root of each folder to re-export a subset of files, you can effectively create explicit public interfaces for your React modules. React Modules Organizing React projects into modules has been widely adopted by the React ... more


Tuesday, 25 July, 2017 UTC

Use Vue.js Template Niceties in JSX Components

Use Vue.js Template Niceties in JSX Components

Certain people like JSX. Certain people think JSX is a way of life. I’m sure though that all parties agree that Vue.js’ templates do offer some convenient shorthand for common practices, even if they might idealistically disagree on whether or not they ... more


Friday, 21 July, 2017 UTC

Functional Redux Reducers with Ramda

Functional Redux Reducers with Ramda

In a recent poll of react developers about their favourite libraries that change the way they code, ramda (a functional JavaScript library) came out on top. In this tutorial, we walk through a redux reducer, introducing ten ramda functions which you ... more


Tuesday, 18 July, 2017 UTC

Image Upload in Your Vue.js Apps With vue-picture-input

Image Upload in Your Vue.js Apps With vue-picture-input

File and image uploads are a must-have feature for many non-trivial apps. Lucky for us, it’s easy to setup in Vue apps with vue-picture-input. Check this post of ours if you're looking to create your own custom file selector input. Installation Install ... more


Tuesday, 18 July, 2017 UTC

Uploading Images to a Node.js Backend Using Multer & Express

Uploading Images to a Node.js Backend Using Multer & Express

File uploads from the frontend are pretty much useless without an API on the backend to receive them and save them to a database, so here we are! This post of ours goes over our Vue.js frontend setup. Installation First things first, prepare your Node.js ... more


Monday, 17 July, 2017 UTC

Upgrading to Vue.js 2.4

Upgrading to Vue.js 2.4

Vue 2.4 was just released this week with a number of under-the-hood changes and minor tweaks to fix a few pain points. This release focuses mostly on async components, and making them just work between client and server-side rendering. New Features There’s ... more


Thursday, 13 July, 2017 UTC

Angular Testing: async and fakeAsync

Angular Testing: async and fakeAsync

Testing asynchronous code has always been a challenge, but it’s now easier than ever, thanks to the async and fakeAsync utilities available for Angular 2+. This should make your Angular unit and integration tests that much easier to write. Async The ... more


Wednesday, 12 July, 2017 UTC

Object.values and Object.entries in JavaScript

Object.values and Object.entries in JavaScript

With ES2017 (ES8), the Object constructor gets two new useful methods: Object.values and Object.entries . Let’s go over their use really quickly. Object.values Object.values takes an object and returns an array with the values, in the same order that ... more


Tuesday, 11 July, 2017 UTC

Custom Async Validators in Angular

Custom Async Validators in Angular

We covered how to create custom validators for reactive forms in Angular. Sometimes however, you’ll want a validator that actually validates a value with a backend API. For this, Angular provides an easy way to define custom async validators. This post ... more


Tuesday, 11 July, 2017 UTC

Flow Type Aliases

Flow Type Aliases

When written solely as literals, Flow has a tendency to get very verbose very quickly. It is often useful to declare repeated types as type aliases. Declaring a Type Alias Let’s say you’re writing functions to manipulate todo lists: // Add a new todo ... more


Monday, 10 July, 2017 UTC

Swappable Dynamic Components in Vue.js

Swappable Dynamic Components in Vue.js

Have you ever needed to switch between various arbitrary components at the same mount point in Vue.js? Sure, it’s not a super common problem, but it’s the sort of things you’d have to do if you implemented your own router, or some sort of container component ... more


Sunday, 9 July, 2017 UTC

Adding, Removing & Toggling Classes With classList

Adding, Removing & Toggling Classes With classList

It’s much easier than it used to be to modify classes on an element, thanks in large part to the classList object. Say we have an element like this: <div class="cool new shades"> 🕶️ </div> Let’s play around with the classes on ... more


Sunday, 9 July, 2017 UTC

Apply Filters to Background Elements in CSS With backdrop-filter

Apply Filters to Background Elements in CSS With backdrop-filter

New in the CSS filter effects module 2 is the backdrop-filter property. It allows to set filters similar to the ones we’re used to (saturation, blur, hue-rotate,…), but for elements in the background. Coupled with the fact that it’s an animatable property, ... more


Friday, 7 July, 2017 UTC

Introduction to Maps in JavaScript

Introduction to Maps in JavaScript

We introduced sets in JavaScript, so it’s only logical that we follow with a discussion on maps, which was also introduced with ES2015. Maps are a new object type that allow to store collections of key-value pairs. Unlike with objects, map keys can be ... more


Wednesday, 5 July, 2017 UTC

Angular: Error Tracking Using Sentry

Angular: Error Tracking Using Sentry

Sentry is a popular error tracking service that allows to track errors in your productions apps. Sentry is a paid service, but it has a generous free plan and in your app you’ll use the open source Raven-js client to interface with Sentry. Let’s go over ... more


Tuesday, 4 July, 2017 UTC

Resizing Images in the Browser in Angular With ng2-img-max

Resizing Images in the Browser in Angular With ng2-img-max

So you want to allow for image uploads in your Angular 2+ apps, but would like to limit the dimension of uploaded images directly on the frontend before even uploading anything? The ng2-img-max module is just what you need! ng2-img-max will use web workers ... more


Tuesday, 4 July, 2017 UTC

Using Filters to Format Data in Vue.js

Using Filters to Format Data in Vue.js

Those from Angular-land might be familiar with filters (pipes in Angular 2+). You know, those weird little expressions that have a pipe and a function after your binding value, and somehow makes it look totally different on the way out? Yeah. Well, it ... more


Friday, 30 June, 2017 UTC

Scoping Your Styles in Angular With ViewEncapsulation

Scoping Your Styles in Angular With ViewEncapsulation

An application framework like Angular allows to create web applications that are made of reusable and independent building blocks (components). For this to work however, we need a way for CSS rules to only apply within a given component. We briefly mentioned ... more


Thursday, 29 June, 2017 UTC

Environment Variables in Angular

Environment Variables in Angular

Need to use different values depending on the environment you’re in? If you’re building an app that talks to the Stripe API for example, you’ll want to use your test publishable key during development and then your live publishable key in production. ... more


Wednesday, 28 June, 2017 UTC

Using Enums in Flow

Using Enums in Flow

If you’ve ever touched a more traditional Object-Oriented Language (C, C#, Java), you’ve probably seen an enum data type. While JavaScript does not have support for enums, Flow’s typechecking can make up for it. Where are Enums Useful? Let’s say you’re ... more


Monday, 26 June, 2017 UTC

Render Raw HTML In Your Vue Apps

Render Raw HTML In Your Vue Apps

Though it’s not that often, sometimes there is actually a good reason for needing to insert raw HTML stored as strings into the DOM. Very rarely, of course. In most cases you should never do this, as this opens you up to a variety of XSS attacks. A somewhat ... more


Friday, 23 June, 2017 UTC

Mapping Routes in React Router

Mapping Routes in React Router

In some cases, it may be beneficial to store routes as objects instead of components. The problem In larger applications, routes quickly get repetitive, verbose, and repetitive. 😉 // App.js class App extends Component { render() { return ( <BrowserRouter> ... more


Tuesday, 20 June, 2017 UTC

Introduction to Sets in JavaScript

Introduction to Sets in JavaScript

Sets are a new object type with ES6 (ES2015) that allow to create collections of unique values. The values in a set can be either simple primitives like strings or integers, but more complex object types like object literals or arrays can also be part ... more


Monday, 19 June, 2017 UTC

No-Nonsense Monetary Inputs in Vue.js with v-money

No-Nonsense Monetary Inputs in Vue.js with v-money

Formatting money inputs can be a bit of a pain. There are all sorts of little differences between how various countries and cultures format their currency and numerical values. Writing an input component that can handle any of these cases isn’t too much ... more


Thursday, 15 June, 2017 UTC

React Router Overview

React Router Overview

React Router has gone through some changes over the years. Here’s an intro to the latest version: React Router 4. Installing React Router Same as installing any package. You’ll probably want react-router-dom and not react-router , though: $ yarn add ... more


Tuesday, 13 June, 2017 UTC

Angular: The ng-container Element

Angular: The ng-container Element

ng-container is an element that’s available in Angular 2+ and that can act as the host to structural directives. You can’t use more than one template binding on an element. So you can’t combine structural directives like this: <!-- Can't do this --> ... more


Monday, 12 June, 2017 UTC

Hide SSR-Incapable Vue Components With vue-no-ssr

Hide SSR-Incapable Vue Components With vue-no-ssr

The prolific egoist is at it again with his latest super-useful, extra-tiny Vue.js utility. vue-no-ssr keeps Vue from attempting to render components on the server that don’t work there, while allowing them to keep rendering on the client. I’ve actually ... more


Monday, 12 June, 2017 UTC

Validity Styling of Form Inputs With :required, :optional, :valid & invalid

Validity Styling of Form Inputs With :required, :optional, :valid & invalid

When it comes to validating the content of input fields on the frontend, things are much easier now than they they used to be. We can use the :required , :optional , :valid and :invalid pseudo-classes coupled with HTML5 form validation attributes like ... more