hello.js

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

Tuesday, 1 May, 2018 UTC

node: Add Logging to a Node.js Application using Winston

node: Add Logging to a Node.js Application using Winston

Winston is a popular logging library for NodeJS which allows you to customise the output, as well as different logging targets. This lesson covers configuring Winston to run with different levels depending on a Node environment variable as well as enhancing ... more


Saturday, 28 April, 2018 UTC

react: Set up emotion-theming within a ReactJS application

react: Set up emotion-theming within a ReactJS application

This lesson takes a look at the theming aspect of the [emotion-js](https://emotion.sh/) library. Specifically, we'll walk through the steps of setting up a ReactJS application to use a global theme object which contains our styles. By the end of the lesson, ... more


Friday, 27 April, 2018 UTC

microsoft: Install a Node.js Application as a Windows Service

microsoft: Install a Node.js Application as a Windows Service

For a production Windows server it makes sense to run NodeJS applications as a Windows service. This way they can be automatically restarted if the server is rebooted. It also makes it easier to use monitoring tools like datadog to detect if there are ... more


Wednesday, 25 April, 2018 UTC

express: Structure a Node.js Project Feature by Feature

express: Structure a Node.js Project Feature by Feature

For medium sized apps and above, monoliths are really bad - having one big software with many dependencies is just hard to reason about and often leads to spaghetti code.The ultimate solution is to develop small software: divide the whole stack into self-contained ... more


Monday, 23 April, 2018 UTC

react-native: Reduce Long Import Statements in React Native with Absolute Imports

react-native: Reduce Long Import Statements in React Native with Absolute Imports

In large React Native projects, it’s common to have long relative import paths like: `import MyComponent from '../../../screens/MyScreen/MyComponent'` With import paths that go up and down the folder hierarchy like that, it can be confusing to figure ... more


Monday, 23 April, 2018 UTC

javascript: Lazy Load Images on a Website

javascript: Lazy Load Images on a Website

When it comes to websites performance is king. How long it takes for a page to load can mean the difference of millions of dollars for large ecommerce sites. In this lesson we'll use the IntersectionObserver to check when an image is in the viewport to ... more


Thursday, 19 April, 2018 UTC

express: Setup a Web Server in Node.js using Express

express: Setup a Web Server in Node.js using Express

In this lesson, we build a very simple Express server. This server will have a single route that displays the current date and time and a handler for 404 pages. ... more


Thursday, 19 April, 2018 UTC

react: Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

react: Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incoming prop changes, store state, and to invoke side effects like logging or fetching data from a server. ... more


Wednesday, 18 April, 2018 UTC

typescript: Narrow Down the Type of Variable with Type Guards in TypeScript

typescript: Narrow Down the Type of Variable with Type Guards in TypeScript

As you write TypeScript, the compiler will intelligently look at the flow of your logic and how it branches out and, if possible, will attempt to narrow down the type of different variables. It starts by inspecting the widest type a variable can have, ... more


Monday, 16 April, 2018 UTC

mocha: Test Driven Development in Nodejs with Mocha and Chai

mocha: Test Driven Development in Nodejs with Mocha and Chai

Test-driven development is a methodology for writing the tests first for a given module and the actual implementation afterward. If you write your tests before your application code, that saves you from the cognitive load of keeping all the implementation ... more


Thursday, 12 April, 2018 UTC

react: Use forwardRef() in React 16.3

react: Use forwardRef() in React 16.3

In this lesson, we look at the new forwardRef() method in React 16.3, and how it helps us forward a ref through a Higher-order component to reference an inner DOM node. Additional Resources: https://reactjs.org/docs/forwarding-refs.html ... more


Sunday, 8 April, 2018 UTC

react: Using createRef() to reference a node in a child component in React 16.3

react: Using createRef() to reference a node in a child component in React 16.3

In this lesson we'll use the new createRef() method to retrieve a node in a child component and pass it back to it's parent component. We'll also show how you can use a ref in a functional component with createRef(). Additional Resources: https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components ... more


Tuesday, 3 April, 2018 UTC

react: Reference a node using createRef() in React 16.3

react: Reference a node using createRef() in React 16.3

In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new `createRef()` method in React **16.3**. Additional Resources: [refs and the dom](https://reactjs.org/docs/refs-and-the-dom.html ... more


Friday, 30 March, 2018 UTC

react: Explore common Render Prop patterns used in React

react: Explore common Render Prop patterns used in React

Render props have become tremendously popular amongst the ReactJS community. Those new to the idea of a "render prop" can easily become confused as they can be implemented in various ways. In this lesson, we will walk through two extremely common ... more


Tuesday, 27 March, 2018 UTC

react: Extend Next.js' default Document class to ensure styles are rendered on the server

react: Extend Next.js' default Document class to ensure styles are rendered on the server

In this lesson, we learn how to modify Next.js' custom `Document` to ensure that our custom components are rendered on both the client and the server. Components in this lesson are built using the [emotion-js](https://github.com/emotion-js) library. * ... more


Wednesday, 21 March, 2018 UTC

[Course] angular: Angular Service Injection with the Dependency Injector (DI)

[Course] angular: Angular Service Injection with the Dependency Injector (DI)

Services and registering service providers are an inherent part of an Angular application. It is where you should define your application logic, they keep the state of the application and allow to share that among different components. That said, components ... more


Wednesday, 21 March, 2018 UTC

reason: Use BuckleScript to get up and running in a new ReasonReact project

reason: Use BuckleScript to get up and running in a new ReasonReact project

This lesson shows viewers how to get up and running in a new ReasonReact application using Bucklescript's `bsb` command-line tool. To access `bsb` on your local machine you can install globally by running ```bash npm install -g bs-platform ``` * [ReasonML ... more


Thursday, 15 March, 2018 UTC

[Course] purescript: Functional Programming Concepts in Purescript

[Course] purescript: Functional Programming Concepts in Purescript

PureScript is a small strongly, statically typed language inspired by Haskell and compiles to JavaScript. This means no run-time errors, human readable output, ADTs, and pattern matching (and more!) all at your fingertips. In this course we will use an ... more


Wednesday, 28 February, 2018 UTC

react: Inherit Styles using CSS Composition with React-Emotion's CSS Import

react: Inherit Styles using CSS Composition with React-Emotion's CSS Import

In this lesson we take a look at the `css` function provided by the [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion). By the end of this video, you'll have learned how to defines styles that you can inherit from ... more


Tuesday, 27 February, 2018 UTC

react: Use Props to Create Dynamic Styled Components with React-Emotion

react: Use Props to Create Dynamic Styled Components with React-Emotion

[Emotion](emotion.sh) is a high-performance library for leveraging CSS from within JavaScript files. In this lesson, we take a look at Emotion's React Library, [react-emotion](https://github.com/emotion-js/emotion/tree/master/packages/react-emotion), ... more


Tuesday, 27 February, 2018 UTC

node: Parse Image Files with the Google Vision API and NodeJS

node: Parse Image Files with the Google Vision API and NodeJS

Leverage the power of the Google Vision API by combining NodeJS and a simple web page to extract dominant colours from any uploaded image. In this lesson, you will learn how to set up a Express server to interact directly with the Google Vision. With ... more


Tuesday, 27 February, 2018 UTC

css: Create Dynamic Styles with CSS Variables

css: Create Dynamic Styles with CSS Variables

In this lesson we are going to use CSS variables to keep our application's colors consistent. This includes defining the variables inside our the pseudo class :root and using the var function within our classes. We finish up the lesson using JavaScript ... more


Tuesday, 20 February, 2018 UTC

react: Retrieve and Display Data with GraphQL Queries in Next.js using urql

react: Retrieve and Display Data with GraphQL Queries in Next.js using urql

Urql is a library focused on providing ReactJS users with easy access to GraphQL APIs. In this video, we learn how to connect components within a Next.js application. We take a look at using Urql's `` component and we'll also check out different ways ... more


Tuesday, 20 February, 2018 UTC

react: Universal GraphQL with Urql and Next.js

react: Universal GraphQL with Urql and Next.js

Urql is a library focused on providing ReactJS users with easy access to GraphQL APIs. In this video, we learn how to connect components within a Next.js application. We take a look at using Urql's `` component and we'll also check out different ways ... more


Friday, 16 February, 2018 UTC

[Course] react: Build a Server-rendered ReactJS Application with Next.js

[Course] react: Build a Server-rendered ReactJS Application with Next.js

In this course we we’ll see just how quickly next.js makes the process of building server-rendered ReactJS applications by creating and deploying an application that loads blog posts from the Google Blogger API. Along the way we’ll learn about many of ... more


Thursday, 15 February, 2018 UTC

webstorm: Improve JavaScript Code Completion in WebStorm with TypeScript Typings

webstorm: Improve JavaScript Code Completion in WebStorm with TypeScript Typings

JetBrains IDEs have a very good code completion for JavaScript code but you can do it even better by adding TypeScript typings, even if you don’t use TypeScript in your project. Should work in WebStorm, PhpStorm, RubyMine, PyCharm and others. ... more


Wednesday, 14 February, 2018 UTC

javascript: Hit the Ground Running with Hyperapp and Parcel

javascript: Hit the Ground Running with Hyperapp and Parcel

In this lesson we will combine two tools that have been developed with simplicity and ease of use in mind. With the lightweight framework of Hyperapp and the low configuration requirements of Parcel, we'll get an application up and running within 4 minutes! ... more


Tuesday, 13 February, 2018 UTC

javascript: Update StimulusJS State with Actions, Getters, and Setters

javascript: Update StimulusJS State with Actions, Getters, and Setters

In this lesson I go over the basics of StimulusJS with a simple Counter example. I show how state in Stimulus actually lives in your HTML and how to bind functionality from your controller to your html with data attributes. I also demonstrate how to use ... more


Friday, 9 February, 2018 UTC

puppeteer: Get the Percentage of Unused JS on a page with Puppeteer

puppeteer: Get the Percentage of Unused JS on a page with Puppeteer

It can be helpful when automating tests, metrics, and integration tools to know not only how much JavaScript there is on a page but to calculate how much is not being used. We are able to calculate the percentage of JS used by getting metrics from the ... more


Friday, 9 February, 2018 UTC

[Course] elm: Decode JSON into Elm

[Course] elm: Decode JSON into Elm

Any non-trivial Elm app will have a need to translate between JSON and Elm, as the Elm app communicates with JavaScript libraries through ports, or consumes JSON from a server API. Elm has the important and somewhat intimidating concept of "decoders" ... more