 Resources from Dimitri Ivashchuk in 2024

This collection gathers lessons that resemble JavaScript interview coding assignments and teaches you to write quality, readable and reusable code. It's always frustrating when you learn the language for months and then some tricky question at the interview stops you from getting a job. Follow the lessons in this collection and be prepared for tricky coding challenges!

Although solving coding assignments is pretty important the true value of the collection lies in the approaching problems correctly, using shortcuts where it's needed and writing verbose code where necessary.

This collection starts with an overview of how to set up a scratchpad in VSCode using quokka.js, so you can follow the lesson in an easier fashion, as this is the technology used to explain concepts! It is followed with an explanation of how to write arrow functions as those are also frequently used throughout the playlist. 

!!! New content is still getting added to the collection !!!

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

JavaScript interview: Learn functional programming with solving coding challenges

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 lesson we will learn how to animate SVGs(Scalable Vector Graphics) imported as React components. As most SVGs are built with different shapes and paths we can use this and apply specific animations to them.

 The whole idea is not 100% dependent on styled components as the same result can be achieved without using CSS-in-JS.

Animate complex SVG in React with styled components

In this lesson you will learn how to add native-like animation to the projects built with Gatsby.js. This lesson uses gatsby-plugin-layout to inject location property to the pages of the website and react-transition-group to add smooth animations when navigating between them.

Animate Page Transitions in Gatsby.js using react-transition-group

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

In this lesson you will learn how to increase performance of the images used in your website built with Gatsby.js. Img component provided by Gatsby enables lazy loading, applies cool visual effects on image loads and is virtually everything you need to comfortably work with images.


Load Images in Gatsby.js with gatsby-source-filesystem

In this lesson you will learn how to create a minimalistic JavaScript playground with quokka.js and zen mode. You will also get an overview of some cool features quokka provides.

[Download quokka.js here](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

Create JavaScript Scratchpad with quokka.js in VSCode

Gatsby is super fun technology, so are Telegram and Netlify! As a frequent telegram user I find it the fastest to have notifications from my websites to be delivered directly to telegram as messages.

It is very convenient and easy to implement the transport for the messages from the static website directly to the telegram. Learn how in this lesson!

Send notification from Gatsby to Telegram with Netlify lambda functions

In this lesson you will learn how to solve a beginner interview question, namely how to rewrite a normal function as an arrow function. We go trough syntactical peculiarities, explicit and implicit return versions of arrow functions and touch the non-syntactical distinguishing features of arrow functions.

Rewrite a JavaScript Function as an Arrow Function

In this lesson you will learn how to remove duplicates from the flat array which is a common coding challenge for beginner JavaScript interviews. 

We will learn how to write a duplicate removal function using functional programming approach with filter. The array filter method allows you to create a new array out of elements that pass a certain condition within the filter. You'll see how we can use `indexOf` to filter out any duplicates.

Filter out Duplicates from Flat JavaScript Array with array.filter 

In this lesson you will learn how to remove duplicates from the flat array which is a common coding challenge for beginner JavaScript interviews. 

We will employ the easiest and one of the fastest duplicate removal methods with the help of Set. Set is a data structure in JavaScript that only allows unique elements to be stored within it. By converting an Array to a Set and then back to an Array you'll see how we can easily filter out duplicates.

Remove Duplicates from Flat Array in with JavaScripts Set Data Structure

In this lesson you will learn how to remove duplicates from the flat array which is a common coding challenge for beginner JavaScript interviews. 

We will learn how to write a duplicate removal function using functional programming approach with reduce array method. You will see how we can remove duplicates by checking whether the accumulator in reduce already contains a value that is trying to be added to the resulting array.

Remove Duplicates from Flat Array with array.reduce in JavaScript

In this lesson you will learn how to answer a typical beginner interview question of writing a function that check for a string to be a palindrome(reads the same backward as forward). 

We will employ string methods like split() and toLowerCase() as well as array methods like reverse() and join(). After writing a step by step function to perform the check we refactor it to be shorter but still readable and working.

Write a Palindrome Check function in JavaScript using string and array methods

Reduce is one of the of the hardest array methods to understand for beginners, mastering it gives you better chances to shine at the interview when asked a question regarding it! 

Let's implement one of the easiest array methods (map) with the hardest one (reduce).

Implement array map function with array.reduce method

Bite-size video tutorials for badass web developers.

egghead

Learn how write a function that capitilizes words in the string from the scratch. We will use map array method, some native string functions and overall apply functional programming approach to solve this popular interview question.

Capitalize words in the string with array.map and string methods

In this lesson we will use functional programming approach to solve the challenge which requires you to capitalize all the letters of the string passed to the function. We will employ ` array.map` together with `string.split` and `string.join` to achieve this functionality.

Write a capitalize string function with array and string methods

In this lesson you will learn how to write an anagram check function with 'array.filter' and 'array.sort' methods. We will use functional programming approach to compare if two string have the same letters but in different order, excluding all special characters like spaces, exclamation marks etc.

Write anagram check function with array and string methods

Recursive functions are inherently hard concept to grasp for many beginners. `reduce` array method shares the same title of being the hardest among the methods. Let's bring it up a notch and create a recursive reduce function that flattens a nested array in JavaScript to finally figure how both of them work!

Flatten nested array using recursive reduce function

In this lesson you will learn how to write an interview coding task which challenges you with reversing the integer and keeping the original sign intact. You will use different methods like `toString`, `reverse`, `split` and `join` to achieve the needed functionality using functional programming approach.


Topics

Instructors

Content Type

Dimitri Ivashchuk