free

Browse by Tag

Setup Nodemon to automatically restart the server

Add a Google OAuth 2.0 Login Button to Your Site

Update published npm packages using np

Set up testing of source code using jest with npm scripts

Publish npm packages using npm publish

Test npm packages locally in another project using npm link

Document npm packages using README files

Add package functionality using npm scripts

Run builds on file changes using watch with npm scripts

Set up compilation of source code using babel with npm scripts

Add manifest files to npm packages using npm init

Add version control to npm packages using git init

Sorting arrays in TypeScript

Prune Old Unused Docker Containers and Images

Build Your Own Custom Docker Image

Handle history in tmux sessions

Share a tmux session for pair programming with ssh

Customize tmux with tmux.conf

Reuse terminal workspaces using tmux sessions

Automate your workflow using tmux scripts

Copy and paste text from a tmux session

Enable mouse mode in tmux

Create collections of panes using tmux windows

Zoom and resize to view a particular pane within tmux

Organize your terminal using tmux panes

Manage terminal workspaces using session naming

Model problems using Algebraic Data Types (ADTs)

Re-order the appearance of grid items using the order property

Specify many grid properties at once with the grid shorthand

Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify the sizes of implicitly created grid tracks

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Nest a grid within a grid

Describe a grid layout using grid-template-areas

Change the auto-placement behaviour of grid items with grid-auto-flow

Use the repeat function to efficiently write grid-template values

Use the minmax function to specify dynamically-sized tracks

Refer to fractions of available space with the fr unit

Place grid items on a grid using grid-column and grid-row

Specify a grid gutter size with grid-gap

Getting started with Jest using TypeScript

Create iOS custom UIViewController components with NativeScript for Angular

Use Sets with Ord Typeclass instances

Use create-react-native-app to Set Up a Simple React Native App

Persist in-memory data to a file when developing Node.js LoopBack API's

Create a model to persist data in a Node.js LoopBack API

Use an Android library in NativeScript for Angular using Java apis

Create Flex Based Containers Using FlexboxLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

Position Views in a Dock Using DockLayout

node tutorial about Setup Nodemon to automatically restart the server

Setup Nodemon to automatically restart the server

1:02 node

Soon or later, we get tired of having to manually restart our Node.js application. We will install and configure Nodemon to help us with that headache.

Remember to install it as a development dependency with yarn add --dev nodemon and limit its scope with --watch [dir].

js tutorial about Add a Google OAuth 2.0 Login Button to Your Site

Add a Google OAuth 2.0 Login Button to Your Site

7:12 js

Many sites rely on Google's login functionality for creating accounts. This lesson walks you through using the Google OAuth 2.0 api to login to Google and access the basic profile information for your own site.

js tutorial about Update published npm packages using np

Update published npm packages using np

1:38 js

When we want to update our package we need to do a few things: pull latest from our git remote, bump the npm version and git tag, push to our remote, push tags to our remote, and then run npm publish. Phew, that’s a lot. In this lesson, we will set up a release script using the np package to simplify this process.

js tutorial about Set up testing of source code using jest with npm scripts

Set up testing of source code using jest with npm scripts

2:42 js

Adding tests to our package can ensure it works as expected. We will install a test framework jest. We will then create a test script to run our tests. Then we will create a test:watch script to keep tests running while we develop.

js tutorial about Publish npm packages using npm publish

Publish npm packages using npm publish

1:29 js

In this lesson we will publish our package. We will first add a prepublish script that runs our build script; this will ensure the built folder gets added to npm when published. We will also add a .npmignore so that only our built files get installed. We need to run npm adduser to log in to an npm account. We can then run npm publish to publish our package and view it on npm.

js tutorial about Test npm packages locally in another project using npm link

Test npm packages locally in another project using npm link

4:01 js

We will import our newly published package into a new project locally to make sure everything is working as expected. We can do this locally before publishing with npm link. This creates a symbolic link in our node_modules folder, so our unpublished local package is used like an installed published package. This is important because it lets us test making changes to our package and using them immediately without publishing and updating a package with each change we want to test. This is good practice to do before publishing a new version of a package.

js tutorial about Document npm packages using README files

Document npm packages using README files

2:01 js

Users need to know how to use our package. We can make this easy for them with a README.md file containing information about our project. We will put a simple example at the top for easy use.

js tutorial about Add package functionality using npm scripts

Add package functionality using npm scripts

3:18 js

We will run our dev and test:watch scripts to develop; we will create some tests for the expected functionality of our package; it should conceal any words in a string that are in a blacklist of words. Then we will write the logic to make those tests pass.

js tutorial about Run builds on file changes using watch with npm scripts

Run builds on file changes using watch with npm scripts

0:55 js

We can set up a file watcher to compile automatically while we develop. In this lesson we wire up a new dev script to run the build script when source files change.

js tutorial about Set up compilation of source code using babel with npm scripts

Set up compilation of source code using babel with npm scripts

2:27 js

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install babel-cli and babel-preset-latest and wire up a build script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

js tutorial about Add manifest files to npm packages using npm init

Add manifest files to npm packages using npm init

2:00 js

We can create a package.json automatically by running npm init and answering the questions it gives. This becomes the “manifest” file for our package; it is used to populate the published npm page as well as to help the package manager to know how to install the package in consuming projects.

js tutorial about Add version control to npm packages using git init

Add version control to npm packages using git init

0:57 js

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

typescript tutorial about Sorting arrays in TypeScript

Sorting arrays in TypeScript

3:54 typescript

In this lesson we cover all the details of how to sort a list of items using TypeScript. We also present a few tricks to make your sort logic more readable and maintainable using TypeScript.

Prune Old Unused Docker Containers and Images

0:52 docker

In this lesson, we will look at docker container prune to remove old docker containers. We can also use docker system prune to clean up any containers, images, volumes, and networks all in one command.

docker tutorial about Build Your Own Custom Docker Image

Build Your Own Custom Docker Image

13:43 docker

In this lesson we will cover how to build your own custom Docker image from scratch. We'll walk through the process of starting a Debian container, installing packages and working through configuration issues, as well as a strategy for building a Dockerfile.

otherjs tutorial about Handle history in tmux sessions

Handle history in tmux sessions

3:11 otherjs

In this lesson, we'll look at how to manage your history between tmux sessions, and ensure that your setup preserves your bash history between multiple windows. By adding a special PROMPT_COMMAND to your .bashrc, you can update and reload your history after every command, regardless of if you're in a different session, window, or tab.

otherjs tutorial about Share a tmux session for pair programming with ssh

Share a tmux session for pair programming with ssh

1:52 otherjs

By using ssh, you can share a tmux session, making pair programming much easier. We'll learn how to share a tmux session with another user.

otherjs tutorial about Customize tmux with tmux.conf

Customize tmux with tmux.conf

3:52 otherjs

You can modify tmux's behavior with your tmux configuration file, .tmux.conf. You can use your tmux config to change color schemes, set custom keybindings, set defaults, modify the status bar, and more. In this lesson, we'll change some of the default color options as well as modify the prefix key.

otherjs tutorial about Reuse terminal workspaces using tmux sessions

Reuse terminal workspaces using tmux sessions

1:54 otherjs

In this lesson, we'll learn how to detach from a running tmux session and leave it running in the background. Then, we can re-attach to it later.

We'll cover:
- How to exit a session by killing all active panes
- Detaching explicitly with C-b d
- Detaching a specific session with C-b D
- Viewing all running tmux sessions using tmux ls
- Reattaching with tmux attach -t

otherjs tutorial about Automate your workflow using tmux scripts

Automate your workflow using tmux scripts

3:53 otherjs

Do you have a standard workflow that involves setting up a specific tmux layout, or running certain commands? By writing tmux scripts, you can automate your tedious daily setup, while simultaneously documenting it for yourself. We'll cover the tmux command equivalents of common key bindings and write some simple, useful scripts.

otherjs tutorial about Copy and paste text from a tmux session

Copy and paste text from a tmux session

3:13 otherjs

One non-obvious, but extremely useful, feature in tmux is copy-pasting text between panes. This also allows you to scroll back in a tmux sessoin. We'll cover how to use copy and paste in tmux using C-b [ and C-b ], for both emacs- and vim-style keybindings.

otherjs tutorial about Enable mouse mode in tmux

Enable mouse mode in tmux

2:22 otherjs

We'll learn how to use mouse mode in tmux, including enable mouse control for resizing, scrolling and selecting panes. We'll also set keybindings in our tmux configuration to control mouse mode.

otherjs tutorial about Create collections of panes using tmux windows

Create collections of panes using tmux windows

1:19 otherjs

In tmux, a window is a collection of panes. Creating multiple windows is a great way to organize your workspace. In this lesson, we'll cover:

  • How to create a new window within a tmux session, using C-b c
  • Navigating between windows with C-b n and C-b p
otherjs tutorial about Zoom and resize to view a particular pane within tmux

Zoom and resize to view a particular pane within tmux

1:39 otherjs

Sometimes you'll want to zoom in on a specific pane within a tmux window. We'll learn to use C-b z to temporarily zoom in on one pane, as well as how to resize your panes with C-b -L, -R, -U, and -D.

otherjs tutorial about Organize your terminal using tmux panes

Organize your terminal using tmux panes

2:14 otherjs

Learn to organize your workspace using tmux. We'll create a new tmux session and learn how to create and navigate panes within a tmux window.

We'll cover:

  • How to create new panes via vertical splits with C-b %
  • How to create new panes via horizontal splits with C-b "
  • Navigating between panes with C-b and arrow keys
  • Closing panes with exit or Ctrl-d
  • Viewing available commands with C-b ?
otherjs tutorial about Manage terminal workspaces using session naming

Manage terminal workspaces using session naming

1:33 otherjs

It's a lot easier to manage your tmux session when they have sensible names. We'll cover:

  • How to create a new, named tmux session with tmux new -s
  • Rename an existing tmux session using tmux rename-session -t
  • Renaming sessions with C-b $
  • Listing sessions with C-b s

Model problems using Algebraic Data Types (ADTs)

7:13 purescript

Algebraic Data Types are a fundamental part of modeling data in Purescript. In this lesson, we'll look at some common methods of defining and using them.

css tutorial about Re-order the appearance of grid items using the order property

Re-order the appearance of grid items using the order property

2:05 css

As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and the appearance of our grid.

css tutorial about Specify many grid properties at once with the grid shorthand

Specify many grid properties at once with the grid shorthand

4:09 css

Using the grid shorthand property, we can set all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), and the gutter properties (grid-column-gap and grid-row-gap) in a single declaration.

css tutorial about Specify grid columns, rows, and areas at once with the grid-template shorthand

Specify grid columns, rows, and areas at once with the grid-template shorthand

3:33 css

We can specify grid columns, rows, and areas in one property using the grid-template shorthand.

css tutorial about Specify the sizes of implicitly created grid tracks

Specify the sizes of implicitly created grid tracks

2:22 css

What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

css tutorial about Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

2:10 css

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; auto-fill and auto-fit. We’ll explore what each one does and why we would need to use them on our grid-tracks.

css tutorial about Nest a grid within a grid

Nest a grid within a grid

1:56 css

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

css tutorial about Describe a grid layout using grid-template-areas

Describe a grid layout using grid-template-areas

4:40 css

We can describe the nature of a grid in an ‘ASCII-art’ way with grid-template-areas. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

css tutorial about Change the auto-placement behaviour of grid items with grid-auto-flow

Change the auto-placement behaviour of grid items with grid-auto-flow

2:39 css

We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the dense keyword. How do we approach this using grid-auto-flow?

css tutorial about Use the repeat function to efficiently write grid-template values

Use the repeat function to efficiently write grid-template values

3:14 css

We can use the repeat() function if we have repeating specifications for columns and rows. With the minmax() function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

css tutorial about Use the minmax function to specify dynamically-sized tracks

Use the minmax function to specify dynamically-sized tracks

2:21 css

Using minmax() is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.

css tutorial about Refer to fractions of available space with the fr unit

Refer to fractions of available space with the fr unit

1:54 css

There’s an unfamiliar fr unit pertinent to CSS Grid, which allows us to specify a fractional unit of space. Let’s see how to apply it.

css tutorial about Place grid items on a grid using grid-column and grid-row

Place grid items on a grid using grid-column and grid-row

3:13 css

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some grid-template-columns and grid-template-rows, and to the grid items, we’ll pass grid-column and grid-row some numeric values.

css tutorial about Specify a grid gutter size with grid-gap

Specify a grid gutter size with grid-gap

1:13 css

It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

typescript tutorial about Getting started with Jest using TypeScript

Getting started with Jest using TypeScript

3:17 typescript

Jest is a painless JavaScript unit testing framework from Facebook. It is designed to be super easy to setup and is packed full of powerful features. In this lesson we see how easy it is to add to your TypeScript project. This will be followed by a quick example application.

angular2 tutorial about Create iOS custom UIViewController components with NativeScript for Angular

Create iOS custom UIViewController components with NativeScript for Angular

10:00 angular2

Learn how to construct sophisticated custom components using UIViewController. Understand how to construct UIButton's programmatically and attach tap events via NativeScript using the static ObjCExposedMethods property. Also learn how to save images to the user's iPhone Camera Roll using native api's. Specifically we will look at creating a custom {N} view component for SwiftyCam (a Snapchat inspired implementation: https://github.com/Awalz/SwiftyCam).

Use Sets with Ord Typeclass instances

5:30 purescript

In Purescript, we can use set data structures using Purescript-Set, but many of its functions come with an Ord typeclass constraint. In this lesson, we'll learn how to understand the typeclass constraints on a function and how to create instances of typeclasses.

Use create-react-native-app to Set Up a Simple React Native App

0:55 react

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.

After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.

This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.

Download the Expo Client from App Store or Google Play

Persist in-memory data to a file when developing Node.js LoopBack API's

0:43 node

In this lesson you will learn how to persist the data from the memory connector. As the name suggests, the memory connector stores the data in memory. This means that if you restart the server, the data is gone. In development mode it can be useful to store this data in a file, so it gets persisted between server restarts, and it can be easily inspected.

Create a model to persist data in a Node.js LoopBack API

3:01 node

In this lesson you will learn what a LoopBack model is, you will create a Product model using the LoopbBack CLI. The product model will be based off the built-in PersistedModel which gives it basic functionality like Create, Ready, Update, Delete and some more. Using the API Explorer you can interact with the new model, store, retrieve, edit and delete the product data.

angular2 tutorial about Use an Android library in NativeScript for Angular using Java apis

Use an Android library in NativeScript for Angular using Java apis

7:26 angular2

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at Filestack’s Android SDK built with Gradle. Specifically, we will cover how to immediately start working with the library even when a NativeScript plugin does not exist for it.

js tutorial about Create Flex Based Containers Using FlexboxLayout

Create Flex Based Containers Using FlexboxLayout

5:15 js

Use the FlexboxLayout component to create a layout container that is based on the CSS flexbox-layout in modern browsers. We will examine several of the properties, behaviors, and benefits that the FlexboxLayout provides with native mobile UI layouts in a NativeScript app.

js tutorial about Create an Absolute Positioned Layout Using AbsoluteLayout

Create an Absolute Positioned Layout Using AbsoluteLayout

1:31 js

We will use the AbsoluteLayout component to create a layout container which uses left-top coordinates to position its child components in a NativeScript app.

js tutorial about Position Views in a Dock Using DockLayout

Position Views in a Dock Using DockLayout

1:42 js

We will use the DockLayout component to create a layout container which allows us to specify sides (top, bottom, left, right) to dock child components to in a NativeScript app.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?