 Courses from Vladimir Novick

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this video we will understand how you can easily get video insights such as questions, follow ups, action items, topics from Symbl Conversation API

Use Symbl Conversation API to Get a List of Insights From the Processed Video in Next.js

In this video lesson, you will learn the basics of Symbl AI Conversation API and get transcripts of the video. You will render them on the screen along with their timestamps

Render Video Transcripts From Symbl Once Processing Is Complete on a Next.js Screen

Symbl has Job API that gives you an option to check your async tasks process status. You will use this Job API in polling manner, to get an update once video has completed processing.

Check the Status of Processing for Symbl Job API by Polling with a Custom useInterval Hook

In this video lesson, you will learn how to send a video for processing to Symbl Async Video API. As a result you will get some parameters that you can use later on to retrieve insights about the video



Send a Video File From Next.js for Processing Using Symbl AI Video Async API

In order to send video for processing you will add a file input along with the preview of what video you gonna upload. 


> It’s important to note, that even though you are using a file input to send video file to Symbl Async Video API, it’s also possible to send URL instead of the file. You can read more about that [here](https://docs.symbl.ai/docs/async-api/overview/video/post-video-url)

Add Video File Input and Preview in a Next.js App

Storing token in the state is not the best idea, so you will migrate from storing the token in local state to a global state. For that you will use React context. With React Context, your token can be easily access from anywhere in the app. You will need that for API calls to Symbl.ai later on.

Store a Token Globally with React Context for Easier Use Anywhere in a Next.js App

In this video lesson you will implement Login functionality by using Symbl oauth2 endpoint.
You will be able to retrieve an access token, that you can use to authorize your REST API calls when calling Symbl APIs


Implement Login in a Next.js App Functionality by Authorizing with Symbl

In this video lesson, we will build ProtectedPage component, which will let us secure our Video Processing page behind the Login screen. The reason for doing so is because in order to process the video, we will need an access token from Symbl.

Secure a Next.js App with a Login Screen

In this video lesson, you will add Chakra UI component library to ease development of UI components. After all we want to focus mostly not on styling, but on implementing video processing functionality

Style a Next.js App Layout with Chakra UI

In this video lesson, you gonna learn how to get started with the basic NextJS web app from scratch. You will be using NextJS React Framework as it’s a modern standard used nowadays in lots of applications. The main reason of choosing NextJS is the lack of initial configuration we need to set up for things to “just work” 

Create a Basic Next.js App

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

Create Contextual Video Analysis App with NextJS and Symbl.ai

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.YugabyteDB is also a cloud-native database, so it can be deployed across both public and private clouds, including Kubernetes environments. In regards to serving as a backend for microservices, YugabyteDB brings together three must-haves: a PostgreSQL-compatible SQL API, low-latency read performance, and globally distributed write scalability. YugabyteDB with its global data distribution brings data close to users for multi-region and multi-cloud deployments.

In this lesson we will see how we can query YugabyteDB from NodeJS using PostgreSQL driver

Query YugabyteDB from NodeJS using PostgreSQL driver

PostgreSQL is a powerful, open source object-relational database system.

postgres

In this lesson we will see how you can run Hasura GraphQL engine on top of YugabyteDB Distributed SQL

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.YugabyteDB is also a cloud-native database, so it can be deployed across both public and private clouds, including Kubernetes environments. In regards to serving as a backend for microservices, YugabyteDB brings together three must-haves: a PostgreSQL-compatible SQL API, low-latency read performance, and globally distributed write scalability. YugabyteDB with its global data distribution brings data close to users for multi-region and multi-cloud deployments.

Set up Hasura GraphQL engine with YugabyteDB distributed SQL

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.YugabyteDB is also a cloud-native database, so it can be deployed across both public and private clouds, including Kubernetes environments. In regards to serving as a backend for microservices, YugabyteDB brings together three must-haves: a PostgreSQL-compatible SQL API, low-latency read performance, and globally distributed write scalability. YugabyteDB with its global data distribution brings data close to users for multi-region and multi-cloud deployments.

In this lesson we will see how you can run YugabyteDB Distributed SQL cluster using docker-compose.

Running YugabyteDB Cluster Locally using docker-compose

Bite-size video tutorials for badass web developers.

egghead

YugabyteDB can automatically handle failures and therefore provides high availability . You will create YSQL tables with a replication factor (RF) of 3 that allows a fault tolerance of 1. This means the cluster will remain available for both reads and writes even if one node fails. However, if another node fails bringing the number of failures to two, then writes will become unavailable on the cluster in order to preserve data consistency.

In this lesson we will see how fault tolerance is tested by using workload sample app and by stopping nodes in the local cluster. 

[Written instructions to get up and running.](https://gist.github.com/vnovick/06881138644641b4909983b5d9356dbc)



Explore YugabyteDB fault tolerance on local database cluster

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

When we run commands in OSX or Linux terminal which output long lines, these lines are wrapped making output sometimes not readable. This is especially true when dealing with tabular data outputted into console. In this lesson we will see a trick that you can do to disable this line wrapping while still being able to read the data.

Disable line wrapping in OSX or Linux terminal

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.

The Yugabyte Structured Query Language (YSQL) is the distributed SQL API for YugabyteDB and is compatible with the SQL dialect of PostgreSQL. Currently, YSQL is compatible with PostgreSQL 11.2 version. YugabyteDB and YSQL are optimized for RDBMS workloads that need horizontal write scalability and global data distribution while also using relational modeling features, such as JOINs, distributed transactions, and referential integrity (such as foreign keys).

The main components of YSQL include the data definition language (DDL), the data manipulation language (DML), and the data control language (DCL). A number of elements are used to construct these components, including data types, database objects, names and qualifiers, expressions, and comments. Other components are also provided for different purposes such as system control, transaction control, and performance tuning.

In this lesson we will see how we can connect and work with YugabyteDB YSQL shell on a local cluster running on MacOS.


Explore YugabyteDB YSQL shell in local database cluster

YugabyteDB is an open source, high-performance distributed SQL database for powering global, internet-scale applications.YugabyteDB is also a cloud-native database, so it can be deployed across both public and private clouds, including  Kubernetes environments. In regards to serving as a backend for microservices, YugabyteDB brings together three must-haves: a PostgreSQL-compatible SQL API, low-latency read performance, and globally distributed write scalability. YugabyteDB with its global data distribution brings data close to users for multi-region and multi-cloud deployments. 

In this lesson we will see how we can create YugabyteDB cluster locally on our Mac for dev environment and prototyping 

Set up YugabyteDB Distributed SQL Cluster Locally on MacOS

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

While creating your GraphQL API with [hasura.io](hasura.io), queries, mutations and subscriptions are auto generated for you. In this video I show an API explorer tool inspired by https://github.com/OneGraph/graphiql-explorer  that will help you to compose GraphQL queries by selecting what data you want to present or how you want to filter your queries.
This tool is also available as stand alone tool at [https://graphiql-online.com](https://graphiql-online.com)


Compose GraphQL Queries and Mutations using Hasura Explorer

In this video you will see how you can easily set up auto-generated GraphQL API for your app with Hasura free and open source engine

To get started with Hasura go to [hasura.io](hasura.io)

Create your GraphQL API auto-generated with Hasura

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

Vladimir Novick

Search Results