hello.js

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

Friday, 15 February, 2019 UTC

egghead: Implement a Redux Store with Easy Peasy & React Hooks

egghead: Implement a Redux Store with Easy Peasy & React Hooks

Easy Peasy is a JavaScript library that can be used to very simply implement Redux into a React application. In this lesson, we will learn how to setup Easy Peasy by creating a model, injecting that model into a StoreProvider React component, and calling ... more


Friday, 15 February, 2019 UTC

[Course] angular: Getting Started with Angular Elements

[Course] angular: Getting Started with Angular Elements

Angular elements are one of the major innovations in Angular 6+. Elements allow us to develop Angular components like we always have through Angular’s powerful API, and then compile them into browser-native custom elements. With custom elements, we can ... more


Wednesday, 13 February, 2019 UTC

javascript: Map and Flatten Multidimensional Arrays with ES2019 Array.prototype.flatMap

javascript: Map and Flatten Multidimensional Arrays with ES2019 Array.prototype.flatMap

ES2019 introduces the Array.prototype.flatMap method. In this lesson, we'll map and flatten a multidimensional array using Array.prototype.map, Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the ... more


Wednesday, 13 February, 2019 UTC

javascript: Object creation using ES2019's Object.fromEntries method

javascript: Object creation using ES2019's Object.fromEntries method

This lesson shows how to use ES2019's `Object.fromEntries` method to convert `[key,value]` array pairs stored inside of a `Map` into an object. Following this, we'll check out how we can use `Object.fromEntries` along with `Object.entries` to implement ... more


Sunday, 10 February, 2019 UTC

html: Build Flexible HTML with HTMLTemplates using Slots and Web Components

html: Build Flexible HTML with HTMLTemplates using Slots and Web Components

HTMLTemplates are part of the web components specification. In this lesson we will learn what are HTML templates, how to use them and how to use the powerful HTMLTemplates slots inside a web component. ... more


Wednesday, 6 February, 2019 UTC

javascript: Use ES2019 Array.prototype.flat to Flatten Multidimensional Arrays

javascript: Use ES2019 Array.prototype.flat to Flatten Multidimensional Arrays

ES2019 introduces the Array.prototype.flat method. In this lesson, we'll flatten a multidimensional array using Array.prototype.reduce and Array.prototype.concat, and then refactor the code to do the same thing using the .flat method. We'll then use the ... more


Wednesday, 6 February, 2019 UTC

javascript: Automate the process of flattening deeply nested arrays using ES2019's flat method.

javascript: Automate the process of flattening deeply nested arrays using ES2019's flat method.

Among the features introduced to the language of JavaScript in ES2019 is `Array.prototype.flat`. In this lesson we'll see just how easy the `flat` method makes the process of unboxing arrays regardless of how deeply nested they may be. ... more


Monday, 4 February, 2019 UTC

gatsby: Load Images in Gatsby.js with gatsby-source-filesystem

gatsby: Load Images in Gatsby.js with gatsby-source-filesystem

In this lesson you will learn how to increase performance of the images used in your website built with Gatsby.js. Img component provided by Gatsby enables lazy loading, applies cool visual effects on image loads and is virtually everything you need to ... more


Monday, 4 February, 2019 UTC

react: Detect user activity with a custom useIdle React Hook

react: Detect user activity with a custom useIdle React Hook

If the user hasn't used your application for a few minutes, you may want to log them out of the application automatically in case they've stepped away from the machine and someone nefarious attempts to use their session. Let's checkout how you can create ... more


Thursday, 31 January, 2019 UTC

react: Animate Page Transitions in Gatsby.js using react-transition-group

react: Animate Page Transitions in Gatsby.js using react-transition-group

In this lesson you will learn how to add native-like animation to the projects built with Gatsby.js. This lesson uses gatsby-plugin-layout to inject location property to the pages of the website and react-transition-group to add smooth animations when ... more


Tuesday, 29 January, 2019 UTC

css: Make a Responsive Web Page Without Using a CSS or JavaScript Framework

css: Make a Responsive Web Page Without Using a CSS or JavaScript Framework

The patio11bot site looks OK on a desktop, but terrible on mobile - so we'll turn it into a responsive webpage. First (and most important), set the meta viewport tag: `` Then, we can use media CSS queries to differentiate styles between mobile (smaller ... more


Tuesday, 29 January, 2019 UTC

css: Serve a Static HTML Page for Development

css: Serve a Static HTML Page for Development

We'll be building www.patio11bot.com from start to finish as a staic HTML document - so the first step is to setup a mini web server, so that we can view the webpage locally. There are three easy ways to do that: `// python 2:` `> python -m SimpleHTTPServer ... more


Tuesday, 29 January, 2019 UTC

javascript: Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

javascript: Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: 1. Using an `img` tag - which is easy, but doesn't let us access the internal SVG elements. 2. Copy/pasting the SVG directly into the HTML document. That works great, but ... more


Tuesday, 29 January, 2019 UTC

javascript: Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

javascript: Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

We'll add a text input box to patio11bot, and a button that allows the user to ask a question. Then, we'll use vanilla javascript (so no jQuery or other framework) to grab that input. ... more


Tuesday, 29 January, 2019 UTC

javascript: Add and Remove CSS Classes with Vanilla JavaScript

javascript: Add and Remove CSS Classes with Vanilla JavaScript

We'll use the `add` and `remove` methods on a DOM element's `classList` to add and remove classes with jQuery, or another framework. ... more


Tuesday, 29 January, 2019 UTC

javascript: Add a Dynamic Tweet Button to a Webpage

javascript: Add a Dynamic Tweet Button to a Webpage

To let people easily share the patio11bot, we'll add a "Tweet" button to the page. You can easily add a static share button by going to `https://publish.twitter.com/` and following the instructions there, but to make a dynamic tweet button is ... more


Tuesday, 29 January, 2019 UTC

webpack: Delete Unused Code with Webpack and unused-files-webpack-plugin

webpack: Delete Unused Code with Webpack and unused-files-webpack-plugin

As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become ... more


Thursday, 24 January, 2019 UTC

javascript: Remove unwanted properties from a JavaScript with ES6 spread operator

javascript: Remove unwanted properties from a JavaScript with ES6 spread operator

In this lesson we are going to learn how to remove unwanted properties from a JavaScript object following an example of an object containing sensitive data (such as password and bankBalance) and removing this kind of data from it. To achieve that we are ... more


Thursday, 24 January, 2019 UTC

javascript: Add default values to variables destructured from a JavaScript object

javascript: Add default values to variables destructured from a JavaScript object

In this lesson we are going to learn how to set default values to variables destructured from a JavaScript object, which may come in handy if we'd like to avoid setting those variables to `undefined` because a certain field is not specified in the object ... more


Thursday, 24 January, 2019 UTC

egghead: VS Code for JavaScript with Burke Holland

egghead: VS Code for JavaScript with Burke Holland

Visual Studio Code is an amazing tool for developers. It's lightweight and highly customizable, and perfect for creating web applications. In this video Burke Holland gives us an overview of VS Code, and shows us a lot of the powerful tools that you can ... more


Thursday, 24 January, 2019 UTC

node: Batch Create Markdown Files from a Template with Node.js and Mustache

node: Batch Create Markdown Files from a Template with Node.js and Mustache

Creating Markdown files from a template is a straightforward process with Node.js and Mustache. You can define a template, load it into your script, then push whatever data you have into your template, then write the files back out. Node.js built-in filesystem ... more


Wednesday, 23 January, 2019 UTC

javascript: Write a Generator Function to Generate the Alphabet

javascript: Write a Generator Function to Generate the Alphabet

When you need to generate a data set, a generator function is often the correct solution. A generator function is defined with `function*` and then you `yield` each result you want out of the function when you call it. Generators pair well with the `...` ... more


Tuesday, 22 January, 2019 UTC

javascript: Show More Lines in a Node.js Error Stack Trace

javascript: Show More Lines in a Node.js Error Stack Trace

Sometimes you are one or two lines short from finding the cause of the error in the stack trace but you can't because Nodejs displays only a handful of lines. In this lesson, you will learn how to increase the stack trace limit to show more lines ... more


Monday, 21 January, 2019 UTC

html: Track First Contentful Paint with PerformanceObserver and Google Analytics

html: Track First Contentful Paint with PerformanceObserver and Google Analytics

"If you can't measure it, you can't improve it." The first step when doing performance work is to measure meaningful metrics to establish a baseline for improvement. In this lesson, we'll measure Time to First Contentful Paint, a user-centric ... more


Monday, 21 January, 2019 UTC

egghead: Create Custom Emmet Snippets in VS Code

egghead: Create Custom Emmet Snippets in VS Code

Emmet is a very powerful tool that will save you a lot of typing. It also allows for extensibiltiy through a `snippets.json` file. You can configure VS Code to accept the `snippets.json` file through your VS Code settings and then start cranking out your ... more


Friday, 18 January, 2019 UTC

javascript: Intercept property access with Javascript Proxy

javascript: Intercept property access with Javascript Proxy

A Javascript Proxy object is a very interesting es6 feature, that allows you to determine behaviors whenever a property is accessed in a target object. In this lesson, you will learn how to use it to prevent users from accessing specific properties in ... more


Thursday, 17 January, 2019 UTC

javascript: Deep Merge Objects in JavaScript with Spread, Lodash, and Deepmerge

javascript: Deep Merge Objects in JavaScript with Spread, Lodash, and Deepmerge

If you are merging two objects that contain other objects or arrays, then you probably want to deeply merge those objects, instead of just shallow merging them. In this lesson, we'll look at three different ways to deeply merge objects, depending on what ... more


Wednesday, 16 January, 2019 UTC

javascript: Shallow Merge Two Objects in JavaScript

javascript: Shallow Merge Two Objects in JavaScript

This lesson looks at three methods that can be used to shallow merge two objects in javascript: `Object.assign`, both with mutating the original object and without mutation, and the spread operator. It also covers the potential danger of doing a shallow ... more


Tuesday, 15 January, 2019 UTC

javascript: Conditionally spread entries to a JavaScript object

javascript: Conditionally spread entries to a JavaScript object

In JavaScript, we often end up composing one object out of several other objects. Luckily there's a convenient [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) which allows us to spread entries ... more


Tuesday, 15 January, 2019 UTC

javascript: Render Hello World Text with Custom Elements

javascript: Render Hello World Text with Custom Elements

Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes. You'll learn how to create a Custom Web Element (that extends `HTMLElement`) that renders text to the browser and respond to a click ... more