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

Configure secrets and environment variables with Zeit’s Now

View source on your remote Zeit Now server

Setup a custom domain name with Zeit’s Now

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

Deploy a Docker project with Zeit’s Now

Deploy static assets with Zeit’s Now

Deploy a Node project with Zeit’s Now

Chrome Devtools: Elements - Debug with Style!

Chrome Devtools: Elements - Inspect Elements vs View Source

Chrome Devtools: Elements - Make Changes in Your Browser

Use DOM Break Points

Use the Device Toolbar to Emulate Different Screens

Understand the Event Listeners Panel

Chrome Devtools: Elements - Console Integration

Examine a Running App with the Chrome Debugger

Use Snippets to Store Behaviors in Chrome DevTools

Set Breakpoints for the Chrome Debugger

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

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

Use the Webpack Dashboard to Monitor Webpack Operations

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

Advanced Reduce: Safe Nested Object Inspection

P

Advanced Reduce: Composing Functions with Reduce

P

CSS Transitions: Easing and Other Timing Functions

P

CSS Transitions: Delays and Multiple Properties

Introduction to CSS Transitions

Advanced Reduce: Flatten, Flatmap and ReduceRight

P

Advanced Reduce: Common Mistakes

P

Advanced Reduce: Additional Reducer Arguments

P

Introducing Reduce: Common Patterns

Introducing Reduce: Reducing an Array into an Object

Introducing Reduce: Transforming Arrays Functionally

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

Use a hosted database with Zeit’s Now

10:50 otherjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Advanced Reduce: Safe Nested Object Inspection

Advanced Reduce: Safe Nested Object Inspection

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 Advanced Reduce: Composing Functions with Reduce

Advanced Reduce: Composing Functions with Reduce

8:19 js PRO

Learn how 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

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

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 Advanced Reduce: Flatten, Flatmap and ReduceRight

Advanced Reduce: Flatten, Flatmap and ReduceRight

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 Advanced Reduce: Common Mistakes

Advanced Reduce: Common Mistakes

4:17 js PRO

A programmer left her accumulator's initial value undefined - you won't believe what happened next!

js tutorial about Advanced Reduce: Additional Reducer Arguments

Advanced Reduce: Additional Reducer 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 Introducing Reduce: Common Patterns

Introducing Reduce: Common Patterns

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 Introducing Reduce: Reducing an Array into an Object

Introducing Reduce: Reducing an Array into an 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 Introducing Reduce: Transforming Arrays Functionally

Introducing Reduce: Transforming Arrays Functionally

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?