 Resources from Mykola Bilokonsky in 2021

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

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.

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

`now` allows you to take your JavaScript (Node.js) or Docker powered websites, applications and services to the cloud with ease,
speed and reliability. In practical terms, any directory that contains a `package.json` or `Dockerfile` can be transported to the cloud with one command: `now`.


zeit-now

Using now’s `alias` command you can point your own domain name to any now deployment. In this lesson I'll actually buy a new domain name and configure it to work with now, showing you every step along the way.

Setup a custom domain name with Zeit’s Now

Use Zeit’s now to deploy a docker container to the cloud quickly and easily. We will see that the process is exactly the same as deploying a Node project. This lesson will also show how log information is displayed on the generated url by `Now` while the app is being deployed.

Deploy a Docker project with Zeit’s Now

Use Zeit’s `now` to deploy a node application from your local machine to a remote cloud service in moments. 

Deploy a Node project with Zeit’s Now

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.

Understand HTTP Status Codes with the Chrome Devtools 

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. 

Examine a Page's Source Resources with Chrome DevTools

Cascading Style Sheets bring order and beauty to our applications.

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

CSS Transitions: Delays and Multiple Properties

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. 

Chrome Devtools: Elements - Inspect Elements vs View Source

Learn to use console.time with console.timeEnd to get accurate timings of operations in javascript. This tool can help with javascript profiling and performance optimization, and knowing how to use the console to do it means you don't have to pollute your codebase with timers and placeholders.

Logging Timing Data to the Console

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

Learn how to use the new <a href="https://github.com/FormidableLabs/webpack-dashboard">Webpack Dashboard</a> from <a href="https://formidable.com/blog/2016/08/15/introducing-webpack-dashboard/">Formidable Labs</a> to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

Use the Webpack Dashboard to Monitor Webpack Operations

Learn how to apply timing functions to CSS transitions. We'll talk about pre-defined functions like 'ease-in', 'ease-out' and 'step', and then look at how to specify a custom function capturing the exact transition effect you're looking for.

CSS Transitions: Easing and Other Timing Functions

Bite-size video tutorials for badass web developers.

egghead

A lot of characters have been spent talking about "engineering time" or about how to manage "engineering personalities", and many engineers may wryly chuckle at the archetype.

But advances in our understanding of neurodiversity mean it's time to look again at things like Autism, ADHD and other conditions that impact millions of undiagnosed people in various and often subtle ways.

Are you running on "Engineering Time" - or are you an undiagnosed neurodivergent person, likely with a number of unmet needs? Let's talk about it!

Check out the [community notes for the course](https://github.com/eggheadio-projects/egghead-Talks-Things-Every-Software-Engineer-Should-Know-About-Neurodiversity).

Topics

Instructors

Content Type