Egghead Instructor mykola bilokonsky

mykola bilokonsky

Myk writes codes, flies drones, and spends too much time thinking about consciousness.



Unlock all of mykola's PRO Lessons
click for instant access!

Browse mykola bilokonsky's lessons.

showing 45 lessons...

Use a hosted database with Zeit’s Now

P

Configure secrets and environment variables with Zeit’s Now

P

View source on your remote Zeit Now server

P

Setup a custom domain name with Zeit’s Now

P

Use Zeit’s Now to point a custom name to a specific deployment

P

Deploy a Docker project with Zeit’s Now

P

Deploy static assets with Zeit’s Now

P

Deploy a Node project with Zeit’s Now

P

Chrome Devtools: Elements - Debug with Style!

P

Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Make Changes in Your Browser

Use DOM Break Points

P

Use the Device Toolbar to Emulate Different Screens

P

Understand the Event Listeners Panel

P

Chrome Devtools: Elements - Console Integration

P

Examine a Running App with the Chrome Debugger

P

Use Snippets to Store Behaviors in Chrome DevTools

P

Set Breakpoints for the Chrome Debugger

P

Unbundle your JavaScript with Source Maps in Chrome DevTools

Examine a Page's Source Resources with Chrome DevTools

Understand HTTP Status Codes with the Chrome Devtools

P

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

P

Test Slow Network Performance with the Chrome Devtools

P

Filter Requests in the Network Panel in Chrome Devtools

P

Analyze HTTP Requests and Responses with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

Use the Webpack Dashboard to Monitor Webpack Operations

P

Logging Pretty-Printing Tabular Data to the Console

P

Logging Timing Data to the Console

P

Using console.count to Count Events

P

Proper use of console.assert in JavaScript

P

Grouping and Nesting Console Log Output

P

Advanced Console Log Arguments

P

Log Levels and Semantic Methods

P

Safely inspect nested objects with Reduce

P

Compose functions with reduce

P

CSS Transitions: Easing and Other Timing Functions

P

CSS Transitions: Delays and Multiple Properties

P

Introduction to CSS Transitions

P

Learn to flatten and flatmap arrays with reduce

P

Avoid common mistakes when working with reduce

P

Learn how to use the optional reduce arguments

P

Use reduce to filter and map over large datasets

Reduce an array into a single object

Transform an array into a single value using reduce

otherjs tutorial about Use a hosted database with Zeit’s Now

Use a hosted database with Zeit’s Now

10:50 otherjs PRO

If you need to persist data using now, it’s recommended that you use a hosted database service. In this lesson we'll create a new, free MongoDB database on http://mlab.com and wire it up to use with our node.js app running on Zeit's now hosting service.

otherjs tutorial about Configure secrets and environment variables with Zeit’s Now

Configure secrets and environment variables with Zeit’s Now

7:45 otherjs PRO

Often your project will require some secret keys or tokens - for instance, API keys or database authentication information. Learn how to safely and easily deploy secrets to now, and how to expose them as environment variables that your applications can load without making them public to the world.

otherjs tutorial about View source on your remote Zeit Now server

View source on your remote Zeit Now server

4:49 otherjs PRO

Zeit allows you to expose the inner working’s of your deployment’s source code to aid in debugging or understanding how your code works. Learn how to configure and use this powerful window into your live behavior.

otherjs tutorial about Setup a custom domain name with Zeit’s Now

Setup a custom domain name with Zeit’s Now

5:00 otherjs PRO

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.

otherjs tutorial about Use Zeit’s Now to point a custom name to a specific deployment

Use Zeit’s Now to point a custom name to a specific deployment

3:45 otherjs PRO

Because now deploys are immutable, you can’t push changes to a running instance - you just push a new instance, which means you get a new URL. But doesn’t that mean your URL is always changing? How do you share a link to your application? By using now alias to point a custom name to a specific deployment.

otherjs tutorial about Deploy a Docker project with Zeit’s Now

Deploy a Docker project with Zeit’s Now

3:06 otherjs PRO

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.

otherjs tutorial about Deploy static assets with Zeit’s Now

Deploy static assets with Zeit’s Now

4:00 otherjs PRO

Use Zeit’s now to quickly and easily share static files by making them accessible to anyone with the URL.

otherjs tutorial about Deploy a Node project with Zeit’s Now

Deploy a Node project with Zeit’s Now

5:34 otherjs PRO

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

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

Chrome Devtools: Elements - Debug with Style!

6:25 otherjs PRO

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 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 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 Use DOM Break Points

Use DOM Break Points

7:00 js PRO

There are a variety of ways to trigger the javascript debugger. Use the elements panel to set breakpoints on DOM elements so that you can hit the debugger whenever an element’s children or attributes change, or when it’s removed.

otherjs tutorial about Use the Device Toolbar to Emulate Different Screens

Use the Device Toolbar to Emulate Different Screens

3:53 otherjs PRO

The Elements panel includes a tool to show you how your site will look across a variety of devices. This can be tremendously helpful when troubleshooting layout issues on specific hardware that you don’t have access to, as well as general-purpose response design. You can mock different screen resolutions and behaviors to help put you into your users’ shoes.

js tutorial about Understand the Event Listeners Panel

Understand the Event Listeners Panel

5:46 js PRO

Use the Event Listeners tab within the Elements panel to list all DOM Event listeners. This is useful to understand how and why your site is reacting to various forms of input.

otherjs tutorial about Chrome Devtools: Elements - Console Integration

Chrome Devtools: Elements - Console Integration

5:28 otherjs PRO

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.

otherjs tutorial about Examine a Running App with the Chrome Debugger

Examine a Running App with the Chrome Debugger

10:06 otherjs PRO

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 Use Snippets to Store Behaviors in Chrome DevTools

Use Snippets to Store Behaviors in Chrome DevTools

2:56 otherjs PRO

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 Set Breakpoints for the Chrome Debugger

Set Breakpoints for the Chrome Debugger

6:53 otherjs PRO

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 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 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 Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 otherjs PRO

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 Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 otherjs PRO

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.

otherjs tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 otherjs PRO

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 Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 otherjs PRO

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 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 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!

js tutorial about Use the Webpack Dashboard to Monitor Webpack Operations

Use the Webpack Dashboard to Monitor Webpack Operations

4:59 js PRO

Learn how to use the new Webpack Dashboard from Formidable Labs 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.

js tutorial about Logging Pretty-Printing Tabular Data to the Console

Logging Pretty-Printing Tabular Data to the Console

3:09 js PRO

Learn how to use console.table to render arrays and objects in a tabular format for easy scanning over the values. We'll create some mock data and then render it to the log in various ways to explore console.table's API.

js tutorial about Logging Timing Data to the Console

Logging Timing Data to the Console

1:35 js PRO

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.

js tutorial about Using console.count to Count Events

Using console.count to Count Events

2:16 js PRO

Learn how to user console.count in order to log out how many times a given thing has happened.

js tutorial about Proper use of console.assert in JavaScript

Proper use of console.assert in JavaScript

3:06 js PRO

Learn about console.assert, which is syntactic sugar for logging an error the console when a given condition is not met. It's useful, but may not do what you expect if you're coming from another language - watch this lesson to learn how to use it, and when not to.

js tutorial about Grouping and Nesting Console Log Output

Grouping and Nesting Console Log Output

3:11 js PRO

Organize your log output by grouping your logs into collapsable hierarchies using console.group().

js tutorial about Advanced Console Log Arguments

Advanced Console Log Arguments

3:52 js PRO

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you.

js tutorial about Log Levels and Semantic Methods

Log Levels and Semantic Methods

4:38 js PRO

Go beyond console.log by learning about log levels, filtering log output and structuring your output to be meaningful and concise. The JavaScript console object offers many methods to make your life easier - start learning them here!

js tutorial about Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 js PRO

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

js tutorial about Compose functions with reduce

Compose functions with reduce

8:19 js PRO

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

css tutorial about CSS Transitions: Easing and Other Timing Functions

CSS Transitions: Easing and Other Timing Functions

3:55 css PRO

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 tutorial about CSS Transitions: Delays and Multiple Properties

CSS Transitions: Delays and Multiple Properties

3:33 css PRO

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 tutorial about Introduction to CSS Transitions

Introduction to CSS Transitions

2:27 css PRO

Learn how to use native CSS transitions to automagically add motion to your application. By specifying a simple transition rule, changes to the values of specific properties can be interpolated over time to give a graceful, polished look and feel to what used to be a jarring and sudden transition.

js tutorial about Learn to flatten and flatmap arrays with reduce

Learn to flatten and flatmap arrays with reduce

8:06 js PRO

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

js tutorial about Avoid common mistakes when working with reduce

Avoid common mistakes when working with reduce

4:17 js PRO

In this lesson, we will be looking at two common mistakes programmers make when working with reduce. We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

js tutorial about Learn how to use the optional reduce arguments

Learn how to use the optional reduce arguments

4:47 js PRO

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional index and array reducer arguments.

js tutorial about Use reduce to filter and map over large datasets

Use reduce to filter and map over large datasets

8:32 js

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

js tutorial about Reduce an array into a single object

Reduce an array into a single object

3:59 js

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

js tutorial about Transform an array into a single value using reduce

Transform an array into a single value using reduce

3:56 js

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.

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