Vim & Tools

Watch User Created Playlist (34)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Show context around matches using grep

P

Editing breakpoints in Chrome devtools

The Vim Config file

P

Saving Files in Vim

P

Vim's different modes

P

Copy and Paste inside of Vim

P

Combining Vim commands

P

Chrome Devtools: Elements - Console Integration

Debug React Components with Developer Tools in Chrome

Unbundle your JavaScript with Source Maps in Chrome DevTools

Set Breakpoints for the Chrome Debugger

Moving around in Vim

P

Understand HTTP Status Codes with the Chrome Devtools

Examine a Page's Source Resources with Chrome DevTools

Introduction to Vim Plugins

P

Search the contents of files using grep

Create CSS Selectors in Chrome DevTools from Selection

P

Configure VIM

P

Chrome Devtools: Elements - Debug with Style!

Examine AJAX Requests with Chrome Devtools

Optimize SVGs for Better Performance using svgo

P

Intro to Vim

Test Slow Network Performance with the Chrome Devtools

Vim's built-in commands

P

Installing the AWS CLI on OS X and Linux

Analyze HTTP Requests and Responses with Chrome Devtools

Use Snippets to Store Behaviors in Chrome DevTools

Filter Requests in the Network Panel in Chrome Devtools

Chrome Devtools: Elements - Make Changes in Your Browser

Optimizing Javascript for Chrome and Node.js

P

Examine a Running App with the Chrome Debugger

Chrome Devtools: Elements - Inspect Elements vs View Source

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Angular Automation: Introduction to Gulp

otherjs tutorial about Show context around matches using grep

Show context around matches using grep

1:59 otherjs PRO

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.

js tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 js

There is more to breakpoints than just setting them. Learn how to edit and disable breakpoints, and log to the console without modifying your code.

otherjs tutorial about The Vim Config file

The Vim Config file

1:34 otherjs PRO

Now that you know how to enable features in Vim, let's store all of them in one place so we don't need to constantly set them all the time.

otherjs tutorial about Saving Files in Vim

Saving Files in Vim

1:01 otherjs PRO

We've learned how to add text in Vim using insert mode, now what about saving that file? We'll go over how to use Vim's write command.

otherjs tutorial about Vim's different modes

Vim's different modes

1:52 otherjs PRO

One of Vim's most unique features are it's different modes. Learn how to use these modes and speed up your editing

otherjs tutorial about Copy and Paste inside of Vim

Copy and Paste inside of Vim

0:55 otherjs PRO

Sometimes you just need to copy some code from one file to another. Vim allows you to do this, in a quick and efficient way.

otherjs tutorial about Combining Vim commands

Combining Vim commands

1:31 otherjs PRO

We've gone over some of the basic Vim key commands, but what else can you do with them? We'll go over how you can compose them and to create more powerful commands

otherjs tutorial about Chrome Devtools: Elements - Console Integration

Chrome Devtools: Elements - Console Integration

5:28 otherjs

The Element Inspector in Chrome DevTools offers powerful integration with the console - learn how to programmatically navigate your selected element, how to search through the history and use CSS selectors to control what you're looking at and how to quickly and easily listen for events as you debug your application.

react tutorial about Debug React Components with Developer Tools in Chrome

Debug React Components with Developer Tools in Chrome

4:14 react

React Development Tools is a Chrome plugin that provides handy ways to inspect and debug your React components.

otherjs tutorial about Unbundle your JavaScript with Source Maps in Chrome DevTools

Unbundle your JavaScript with Source Maps in Chrome DevTools

3:40 otherjs

Most of today’s websites use optimized, compiled, minified and obfuscated javascript and CSS. Examining this stuff here has some severely limited utility, which is why when developing we rely on sourcemaps. We’ll set up a webpack workflow that uses sourcemaps to show you how they can help your debugging!

otherjs tutorial about Set Breakpoints for the Chrome Debugger

Set Breakpoints for the Chrome Debugger

6:53 otherjs

There are a variety of ways to trigger the debugger in Chrome's DevTools. You can set breakpoints on line numbers, break on XHR requests or DOM changes, break on specific events or even manually break by using the special debugger keyword in your code.

otherjs tutorial about Moving around in Vim

Moving around in Vim

1:01 otherjs PRO

Learn how to efficiently move around Vim and stop reaching for your mouse

otherjs tutorial about Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 otherjs

Anyone who’s been around the net long enough has seen various HTTP error codes - things like “404 file not found!” or “500 internal server error”. But what are these, exactly? Let’s use the Network DevTool to better understand them. Learn the four major types of HTTP status code, and how to use the Network panel to inspect failed HTTP Requests.

otherjs tutorial about Examine a Page's Source Resources with Chrome DevTools

Examine a Page's Source Resources with Chrome DevTools

2:47 otherjs

Use the source navigator to browse through the various resources that your site has loaded from remote servers through the course of its session. Stylesheets, JavaScript files, media attachments and anything else that was requested as a part of your application’s lifecycle shows up here, and you can examine these resources in the context of your running app to see what exactly you’re rendering.

otherjs tutorial about Introduction to Vim Plugins

Introduction to Vim Plugins

2:14 otherjs PRO

Vim has the ability to extend its functionality through plugins that can be installed either manually or through plugin managers. We'll setup the vim-plug manager to install plugins for our .vimrc

otherjs tutorial about Search the contents of files using grep

Search the contents of files using grep

2:15 otherjs

Learn the basic syntax for using grep to search the contents of a single file or files. It's like CMD+F, but better! You'll be able to quickly see all matching results in a file.

css tutorial about Create CSS Selectors in Chrome DevTools from Selection

Create CSS Selectors in Chrome DevTools from Selection

1:32 css PRO

Chrome dev tools allow you to generate css selectors based on you your mouse selection. This lesson shows you how to leverage the dev tools to generate css selectors and then revise them to match your needs.

otherjs tutorial about Configure VIM

Configure VIM

1:16 otherjs PRO

Vim's defaults leave the editor in a pretty minimal state. Let's look at some of options we can configure to make Vim feel more like a traditional editor

otherjs tutorial about Chrome Devtools: Elements - Debug with Style!

Chrome Devtools: Elements - Debug with Style!

6:25 otherjs

Learn to use the Style panel within the Element Inspector to examine and tweak the CSS rules applied to your application as it runs.

otherjs tutorial about Examine AJAX Requests with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

4:04 otherjs

AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!

otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs PRO

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.

For a full list of options and plugins available to use with svgo, check out their documentation.

Note: This lesson assumes you have npm installed.

otherjs tutorial about Intro to Vim

Intro to Vim

0:32 otherjs

The Vim editor is a text editor that lives inside of your terminal. Learn how to start Vim, and more importantly how to exit out of the editor!

otherjs tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 otherjs

Often when we’re developing we’re serving our content directly from our local machines, meaning that our network performance is incredibly fast. In production, though, conditions are often much less reliable. To replicate production conditions for testing and debugging it can be useful to throttle our local network speeds - you can do that here.

otherjs tutorial about Vim's built-in commands

Vim's built-in commands

1:19 otherjs PRO

Vim likes to keep you in normal mode at all times. But this can be difficult when trying to delete or change some text in a file. Thankfully Vim has build commands to make this a breeze

otherjs tutorial about Installing the AWS CLI on OS X and Linux

Installing the AWS CLI on OS X and Linux

4:00 otherjs

Installing the AWS CLI on your local workstation may be one of the biggest boosts to productivity you can make if you use AWS often. Almost all AWS features are available via the CLI allowing you to script, schedule and automate many AWS related tasks.
In this lesson, I’ll show you how to setup and verify the AWS CLI.

otherjs tutorial about Analyze HTTP Requests and Responses with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

7:02 otherjs

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

otherjs tutorial about Use Snippets to Store Behaviors in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

2:56 otherjs

Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your browser against whatever website you’re looking at. This is a great way to store commonly used pieces of code that you rely on for debugging or customization.

otherjs tutorial about Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 otherjs

A large enough project will frequently flood the network devtool with content. Use the filter tool to restrict which HTTP requests you’re inspecting so that you don’t get overwhelmed.

otherjs tutorial about Chrome Devtools: Elements - Make Changes in Your Browser

Chrome Devtools: Elements - Make Changes in Your Browser

2:25 otherjs

Learn how to use the Elements panel in chrome devtools to make structural changes to the DOM as it runs - you can explore what your site would look like with different elements and attribute values, all without polluting your source code.

js tutorial about Optimizing Javascript for Chrome and Node.js

Optimizing Javascript for Chrome and Node.js

7:40 js PRO

Avoid JavaScript optimization killers and ensure that Chrome and Node.js are executing your code as efficiently as possible. This video demonstrates several limitations of the V8 JavaScript engine's optimizing compiler and inliner. Information that is not only interesting, but can prove to be very useful.

otherjs tutorial about Examine a Running App with the Chrome Debugger

Examine a Running App with the Chrome Debugger

10:06 otherjs

Use the Chrome Debugger to pause execution of your application as it runs to see what’s happening in slow-motion. The debugger is an advanced tool that allows you to examine every change that happens in your application so that you can understand how and why your application state evolves over time.

otherjs tutorial about Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Inspect Elements vs View Source

2:55 otherjs

Learn how to use the Inspect Elements panel in Chrome DevTools and how it differs from viewing the source of the HTML you're looking at.

otherjs tutorial about Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 otherjs

Use the Overview tool in the Network devtool to see requests over time, and to constrain the tool to a given window of time so that you can focus on a subset of traffic.

angularjs tutorial about Angular Automation: Introduction to Gulp

Angular Automation: Introduction to Gulp

4:26 angularjs

Angular projects require automation. Period.

In this series we will take a look at Gulp. Gulp is a task runner. It is the commander of our army of helper robots that take critical, yet totally mundane, tasks and perform them hundreds of times per day so we don't have to. When we sit down to work, we want to enter a single command, and then spend the rest of our day writing code, testing, and basically not thinking about how it is all glued together in the background.

Automation is critical to any project of significant size. We will start with the Eggly Bookmarks application, and develop proper build automation that will include production ready tools that you can start using in your applications today!

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