hello.js

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

Friday, 22 March, 2019 UTC

[Course] javascript: Just Enough Functional Programming in JavaScript

[Course] javascript: Just Enough Functional Programming in JavaScript

In the last few years, the software development industry has seen a resurgence of functional programming. But what is it? And how do you get started? “Just Enough” is an introduction to functional programming, written in JavaScript, that doesn’t get bogged ... more


Monday, 18 March, 2019 UTC

react: Understanding how react-testing-library works with Kent C. Dodds

react: Understanding how react-testing-library works with Kent C. Dodds

Kent walks us through the internals of dom-testing-library and react-testing-library. There is a lot of set-up and tear down when testing UI components. These two libraries take away a lot of the work required to test React components well. Jest is commonly ... more


Monday, 18 March, 2019 UTC

javascript: Rapidly prototype and document user interface components in MDX using the ok-mdx CLI

javascript: Rapidly prototype and document user interface components in MDX using the ok-mdx CLI

The [ok-mdx](https://github.com/jxnblk/mdx-go) library gives users access to the `mdx` command-line tool. The lesson shows users how to leverage the `mdx` command to fire up a local development server where we can write markdown using the MDX syntax and ... more


Friday, 15 March, 2019 UTC

css: Converting Sass To CSS

css: Converting Sass To CSS

In this lesson we'll learn how to convert our Sass code to CSS code. We'll take a look at the sass watch command and use it to listen for changes within our Sass code. The `sass` executable can be downloaded globally through npm by running `npm i -g sass`. ... more


Thursday, 14 March, 2019 UTC

chrome-devtools: Use Logpoints to log messages without cluttering up your code with console.log() statments

chrome-devtools: Use Logpoints to log messages without cluttering up your code with console.log() statments

[Logpoints](https://developers.google.com/web/updates/2019/01/devtools) are one of the features recently released in Chrome 73. They allow you to easily log and debug your code (both on local environment and on production) without cluttering your code ... more


Tuesday, 12 March, 2019 UTC

[Course] bash: Advanced Bash Automation for Web Developers

[Course] bash: Advanced Bash Automation for Web Developers

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation ... more


Monday, 11 March, 2019 UTC

javascript: Using the focus event to improve navigation accessibility

javascript: Using the focus event to improve navigation accessibility

In this lesson, we use a bit of CSS and JavaScript to expand a menu on focus. This is important to ensure that if someone cannot use a mouse, they are still able to open the menu and see which link they are on. ... more


Sunday, 3 March, 2019 UTC

javascript: Transform an Array of Objects into an Array of Arrays with .reduce()

javascript: Transform an Array of Objects into an Array of Arrays with .reduce()

We use the same set of data that we used in my filter lesson (https://egghead.io/lessons/javascript-filtering-through-an-array-of-countries-using-filter) to create an array of coordinates. We use the .reduce() method to create the data structure that ... more


Wednesday, 27 February, 2019 UTC

[Course] ramda: Functional Programming in JavaScript with Ramda.js

[Course] ramda: Functional Programming in JavaScript with Ramda.js

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code. ... more


Tuesday, 26 February, 2019 UTC

html: Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

html: Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the ... more


Tuesday, 19 February, 2019 UTC

javascript: Filtering through an Array of Countries using .filter()

javascript: Filtering through an Array of Countries using .filter()

We are going to use the the .filter() method on an array of countries so that we only return the country that matches a particular country code. This could be useful if you are in multinational organization and you want to return data only from that country's ... more


Tuesday, 19 February, 2019 UTC

javascript: Explore ES2019 stable array sorting by example

javascript: Explore ES2019 stable array sorting by example

Before ES2019, array sorting in Javascript was not guaranteed to be stable. In this lesson, we'll learn what stable sorting is by seeing an example of unstable sorting. We'll use nvm to switch between an older version of Node and a newer version and compare ... more


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