Forem: Hans

Practical JavaScript Data Structures

Hans — Thu, 04 May 2023 18:38:27 +0000

This article builds on top of what was covered in a previous article, “What do you really know about Variables, Data Types and Immutability in JavaScript?”. If you are new to Javascript or still think array’s and objects are immutable, you should really consider reading the previous article before this one.

This article covers, Objects, Arrays, Hash Maps, Linked Lists, Stacks, Queues, Trees, Graphs, Hash-based Data Structures and Set-based Data Structures. However, it's too long to be published on Linkedin, so instead, we'll this article will stop after Stacks. If you'd like to read the full article check it out on medium.

Built-in Data Structures: Array (Array Object), Associative arrays (Objects), and Hashmaps

In a previous article, we went in depth about initializing, storing and retrieving values with both primitive types and non-primitive types like array’s and objects. So this article wont repeat that beyond code comments. Instead, we’ll focus explaining how to create and traverse 2D array’s, complex objects, hashmaps, etc.

Below is code snippet, I’d like to code along to. Here we define these 3 basic types. It’s important to note that in JavaScript, arrays, associative arrays, and hash maps have different characteristics and use cases, even though the terminology might sometimes be used interchangeably.

Now lets compare and contrast each because there are a lot of simularities.

In JavaScript arrays, are ordered, indexed collections of elements. They store elements sequentially, and each element can be accessed using its numeric index, starting from 0. Arrays can store any type of data, such as numbers, strings, objects, or other arrays.

“Associative arrays”, are objects used to store key-value pairs, where keys are strings and values can be any JavaScript data type. Unlike arrays, associative arrays are not ordered collections, and their elements are accessed using keys rather than numeric indexes.

Finally, hash maps using new Map() is a built-in data structure that stores key-value pairs, similar to associative arrays. However, Map objects offer some advantages over plain objects when used as hash maps:

The order of keys in a Map object is preserved, unlike in plain objects.
Keys can be of any data type, including objects or functions, not just strings.
Map objects have a size property that indicates the number of key-value pairs, which is more efficient than calculating the size of a plain object.Basic operations: insertion, deletion, and traversal

Practical Use Cases:
Now that you have an explanation of each, lets provide some practical examples.

Example 1: Using 2D Arrays / Matrix operations, such as addition, subtraction, or multiplication.

`const matrixA = [
[1, 2],
[3, 4],
];
const matrixB = [
[5, 6],
[7, 8],
];

const matrixSum = matrixA.map((row, rowIndex) =>
row.map((value, colIndex) => value + matrixB[rowIndex][colIndex])
);

//Display the original 2D Array
console.table(matrixA);
console.table(matrixB);

// Display the new 2D Array where the values from both are added
console.table(matrixSum);`

In this example, we have 2 separate 2D Array’s and we add them together.

Example 2: Complex objects — Representing a course with multiple attributes, including a nested structure for sections and lessons.

`const course = {
id: 'C001',
title: 'Introduction to JavaScript',
instructor: 'John Doe',
sections: [
{
id: 'S001',
title: 'Getting Started',
lessons: [
{ id: 'L001', title: 'What is JavaScript?' },
{ id: 'L002', title: 'Setting Up Your Environment' },
],
},
{
id: 'S002',
title: 'JavaScript Basics',
lessons: [
{ id: 'L003', title: 'Variables and Data Types' },
{ id: 'L004', title: 'Functions and Scope' },
],
},
],
};

console.log('Course:', course.title);
console.log('Instructor:', course.instructor);

course.sections.forEach((section, index) => {
console.log(Section ${index + 1}:, section.title);

section.lessons.forEach((lesson, lessonIndex) => {
console.log( Lesson ${lessonIndex + 1}:, lesson.title);
});
});

const flattenedCourseData = [];

course.sections.forEach((section) => {
section.lessons.forEach((lesson) => {
flattenedCourseData.push({
'Course Title': course.title,
'Instructor': course.instructor,
'Section Title': section.title,
'Lesson Title': lesson.title,
});
});
});

console.table(flattenedCourseData);`

In this example, we use an object store all the data about a JavaScript course and we use both console.log and console.table to access the data. console.table displays the data in a tabular format, making it easier to read and compare lessons across sections. However it’s not as useful for deeply nested data structures or when the hierarchy is important to understand the relationships between the elements.

Example 3: Hash maps — Storing a dictionary or translation table for multiple languages.

`const translations = new Map([
['en', { hello: 'Hello', goodbye: 'Goodbye' }],
['es', { hello: 'Hola', goodbye: 'Adiós' }],
['fr', { hello: 'Bonjour', goodbye: 'Au revoir' }],
]);

function translate(lang, key) {
const languageTranslations = translations.get(lang);
return languageTranslations ? languageTranslations[key] : null;
}

console.log(translate('es', 'hello')); // Output: Hola`

In this example, we are storing an 2D array of objects inside a hash map. Then we use the function translate to select a language and word (key) to translate.

Linear Data Structures (Linked Lists, Stacks, Queues):
Linked Lists
Now that we’ve given some practical examples of arrays, objects and hash maps, it’s time to go into Linked Lists. Before we begin, though, it’s important to note that things like fixed sizes or dynamically growing or shrinking are less relevant in JavaScript as it is in other languages due to how array’s work.

Here are a few general points about Linked Lists when compared to Arrays and Objects:

Elements are not stored in contiguous memory locations.
Insertion and deletion operations can be more efficient than in arrays, as elements don’t need to be shifted.
Accessing elements by index is slower since it requires traversing the list.
It can grow or shrink dynamically without the need for resizing .
Doesn’t have a fixed size, unlike arrays.

Linked List Example:

`class Node {
constructor(value) {
this.value = value;
this.next = null;
}
}

class LinkedList {
constructor() {
this.head = null;
this.tail = null;
this.length = 0;
}

append(value) {
const newNode = new Node(value);
if (!this.head) {
this.head = newNode;
this.tail = newNode;
} else {
this.tail.next = newNode;
this.tail = newNode;
}
this.length++;
}
}

const list = new LinkedList();
list.append(1);
list.append(2);
list.append(3);`

Here are a few practical use cases of Linked Lists and I highly recommend you rewrite these as prompts for AGI using different language to fully understand how linked lists in javascript differ from in their implementation with different languages:

Implementing a stack or queue: Linked Lists can efficiently add or remove elements at the beginning or end without the need to shift elements, unlike arrays.
Efficiently inserting or deleting elements in the middle: If you have a reference to the node before the insertion or deletion point, Linked Lists can efficiently perform these operations without shifting elements.
Implementing a cache replacement algorithm, such as Least Recently Used (LRU): Linked Lists can be used to efficiently manage the order of elements and remove the least recently used element when necessary.
Creating a playlist in a media player: Linked Lists can be used to manage the order of songs and efficiently perform operations like inserting, deleting, or moving songs within the list.
Developing a text editor with undo/redo functionality: Linked Lists can be used to maintain a history of text changes, allowing efficient traversal through the history and quick undo/redo operations.

In these use cases, LinkedLists have better performance compared to arrays or objects when it comes to insertion, deletion, or rearrangement of elements. However, if you need random access to elements or a specific order is not important, arrays or objects might be more suitable.

Stacks

Stacks are arguable one of the most important data structure in JavaScript because the entire language itself, revolves around a “call stack”. First, we’ll provide a basic example of a stack, then we’ll provide an example of an asynchronous call stack to help provide a practical example.

Basic Stacks Example:

`class Stack {
constructor() {
this.items = [];
}

// Add an item to the top of the stack
push(item) {
this.items.push(item);
}

// Remove and return the item at the top of the stack
pop() {
if (this.isEmpty()) {
throw new Error("Stack is empty");
}
return this.items.pop();
}

// Return the item at the top of the stack without removing it
peek() {
if (this.isEmpty()) {
throw new Error("Stack is empty");
}
return this.items[this.items.length - 1];
}

// Check if the stack is empty
isEmpty() {
return this.items.length === 0;
}

// Return the number of items in the stack
size() {
return this.items.length;
}

// Empty the stack
clear() {
this.items = [];
}
}

// Example usage:
const stack = new Stack();
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack.peek()); // 30
stack.pop();
console.log(stack.peek()); // 20`

In this example, the Stack class uses a JavaScript array (this.items) to store its elements. The class provides methods to push, pop, and peek elements, as well as to check if the stack is empty, get the stack's size, and clear the stack.

Using JavaScript’s built-in array methods for push and pop ensures good performance, as they are implemented natively and optimized for the language. The implementation is also easy to read and understand, making the code maintainable and reusable.

Please note that JavaScript arrays are implemented as dynamic arrays, which means that they can grow and shrink automatically without needing to resize them manually. This is an advantage when using arrays for stacks, as it reduces the complexity of resizing operations.

Asynchronous Stacks Example:

In this example, we will create a simple asynchronous call stack using Promises to fetch data from a fake API. Each function will be explained in detail.

// Fake API request function that returns a Promise function fetchData(id) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ id, data:Data for ID: ${id}` });
}, 1000);
});
}

// Fetch multiple data points in parallel
function fetchMultipleData(ids) {
return Promise.all(ids.map(id => fetchData(id)));
}

// Main function to execute the asynchronous calls
async function main() {
try {
const ids = [1, 2, 3];
const results = await fetchMultipleData(ids);
console.log(results);
} catch (error) {
console.error("Error fetching data:", error);
}
}

main();`

fetchData: **This function simulates an asynchronous API request using setTimeout. It returns a Promise that resolves after a 1-second delay with an object containing the requested ID and some fake data.
**fetchMultipleData: This function takes an array of IDs as input and fetches data for each ID in parallel using the Promise.all() function. It returns a Promise that resolves when all the individual Promises for each ID have resolved.
main: This is an async function that drives the execution of the asynchronous calls. It initializes an array of IDs, calls the fetchMultipleData function, and awaits the result. Once the results are available, it logs them to the console. If an error occurs, it catches the error and logs it.

If you'd like to read the full article check it out on medium.

Why you should learn JavaScript-First

Hans — Wed, 12 Aug 2020 03:43:24 +0000

Why learn JavaScript instead of another language?

Put simply, it comes down to educational / career opportunities. Most developers who’ve been coding for more than 5 years will probably agree that beginners should start off by learning one language and master it before learning another. The reasoning is that once you have a core understanding of the fundamentals such as variables, control structure, data structures (objects and arrays), functions/classes, and iteration (loops & recursion) it will be easier to pick up another language.

Being a browser-based language means anyone can learn the language, anywhere, and on practically any device. Moreover, the node.js runtime environment allows the language to go beyond that and run a server, mobile apps, hardware, AI, etc.

JavaScript is easy to learn and you can use it to build just about anything from websites, mobile apps, servers and even hardware projects.

So if there is a single programming language beginners should learn in 2020 and master, it’s gotta be JavaScript.

Everyone has there own opinion on what their favorite language is and I'm not here to tell you about that. JavaScript isn't a perfect language, but it's also not a "weird" one. It's just a dynamic one.

A lot of people will say you should learn HTML, CSS and then JavaScript. It's certainly not a bad approach but keep in mind the two are not programming languages. One is for markup and the other is to style that markup.

Here's my radical pitch.

I'm writing an open-source book and I just released the early access to the first ~3 chapters. I want you to give it a try and provide some feedback.

Unlike a lot of other books, this one isn't intended for you to read and nod along or buy to add to a bookshelf. It's meant to be interactive and collaborative and by the end (which isn't completed) you should know how to build a website, server in JavaScript, HTML and CSS (maybe a mobile app too).

Here is the link:
https://github.com/HansUXdev/JavaScript-First

It uses GitPod now, which means you don't need any programming experience or even an IDE (Integrated Developer Environment). You just a GitHub account and spin up a GitPod and follow along. If you get lost, don't worry. That's why I'm going to stream it on twitch.

GitPod is new to me too and it's going to make me rewrite a lot of the book. But on the plus side it means, you won't need a specific OS or a fancy computer to learn, professional development, just a browser and some spare time during quarantine.

Learn JavaScript First, with terminal, NVM & Node.js

Hans — Tue, 04 Aug 2020 16:10:11 +0000

In this article, you will learn the basics of terminal commands then we’ll go over installing git & NVM, and finally installing node and creating a test.js file.

This content is part of an ongoing educational series and based off content originally taught to high school coding students to teach them full stack JavaScript in a semester. It is now being turned into an open source book and therefore is considered a "living article" subject to change, new articles are published on github first, then on medium, then on here.

Pre-Assessments

Before you continue reading, consider taking the pre-assessment to test your knowledge of basic terminal commands. The knowledge assessments are intended to only take 60 seconds and are used to assess whether a reader has the required /preferred prior knowledge.

If you pass the assessment then feel free to skip the command line section and start installing NVM.

Why learn JavaScript instead of another language?

Put simply, it comes down to career opportunities. Most developers who’ve been coding for more than 5 years will probably agree that beginners should start off by learning one language and master it before learning another. The reasoning is that once you have a core understanding of the fundamentals such as variables, control structure, data structures (objects and arrays), functions/classes, and iteration (loops & recursion) it will be easier to pick up another language.
So if there is a single programming language beginners should learn in 2020 and master, it’s gotta be JavaScript. Being a browser-based language means anyone can learn the language, anywhere and on practically any device.

JavaScript is easy to learn and you can use it to build just about anything from websites, mobile apps, servers and even hardware projects.

This doesn’t just translate into becoming a full-stack developer, it translates into career opportunities whether you want to go into front-end web design, server-side backend, mobile app development, or even hardware programming, JavaScript can give you the necessary essentials to build on when you are ready to specialize in one area. Once you master the fundamentals of JavaScript, learning TypeScript makes the transition into such as TypeScript or more “traditional”, OOP languages such as C#.

A Brief History of JS

Originally, websites did not have the any interactive behavior and were essentially just displaying text files. Eventually HTML and HTTP and other related technologies changed this. The creators behind the Mosaic browser, created a language called “LiveScript” and shipped it in1995 to address this need. Within 3 months, it was renamed to “JavaScript” to build on the hype train programmers were on for Java, a completely separate and unrelated language. Eventually, Microsoft did what they always do, steal source code from someone else’s product and release their own version of it, Internet Explorer that used “JScript”. The browsers wars started and long story, short, Mosaic and other browsers basically died off due to Internet Explorer and multiple forks of JS existed as well as other languages such as ActionScript, etc. All of which were made to address the same issue of providing the browser interactive behavior.

What is Node.js ?

Node.js is a runtime environment for JavaScript created by Ryan Dahl in 2009 and built on the Chrome V8 engine. The runtime environment is what allows JavaScript to run virtually anywhere it is installed. Before node.js, JavaScript was just a web-based scripting language. After node was released, it changed the language forever and turned it into a full-blown programming language. This was made possible by two thing, callbacks for asynchronous code and modules like commonJS which allowed multiple files to be imported and exported via the require() and export methods. Combined with the HTTP method for servers, this made it easier for developers to transition into becoming a full-stack developer because they could work on the front-end (browser) and backend (server) without switching languages to PHP, python, pearl, etc.

Why use Node.js to learn JavaScript instead of the browser?

I’ve seen a lot of new developers ask on forums and groups if they should learn JavaScript or node first. Generally, most respond with learning JavaScript first. Its completely understandable but at the end of the day, node is just a runtime environment. So if node is installed on a server, then you can use it server-side. If its installed on a hardware device like a Pi, then you can use the johnny-five library to program the board.

What’s great about learning on node is it allows new developers to learn JavaScript without all the bulk of browser-based objects. Eventually when we get into the servers-side, it becomes easier to separate the server-side code from the client-side JavaScript because only the browser has access to browser-based objects like window, document, forms and everything else that’s part of the document object model.

Command Line Basics

Below is a list of just a few common commands you will need to use and understand to install some developer tools like nvm and others.

ls / dir , pwd, and cd are all commands that are useful for navigating system files & folders (directories). pwd will print the working directory and show you the full path to the directory you are in. dir & ls list directory contents but dir is used on windows where as ls is used on linux / mac. cd will allow you to change the directory you are in. ls & cd are the two you will use the most, so learn them well.
mkdir & touch are most often used for creating directories and files. mkdir is used for creating directories (folders). Whereas touch changes the file timestamps as well as creating files, etc. Read the documentation for each to see more.
rm will remove files and directory. BE VERY CAUTIOUS with this and again read the documentation because if you don’t know how to use it proper you can serious mess up your computer, especially if you used it on directories like system32 on windows...
chmod and chown are about security-related commands for changing files and directories. chmod stands for change modification and will change as files read, write, execution permissions. chown, on the other hand, will change the owner. Although it's less common to use these it is important for installing software on shared hosting or non-administrator files because you won't have sudo (admin) permissions.
curl is a tool used to transfer data from or to a server. We will use this to download a shell script in a minute.
nano is a terminal-based text editor. You may have heard of vi and vim. Those are great too but a bit overkill for what we are doing and confusing to new developers. So we’ll use nano instead of vi or vim.

There are a lot of ways these commands can be used and many are beyond the scope of this article. Now go ahead and install vscode. We are going to use the built-in terminal so you can see the directory and files being created during the exercise. If you want extra credit, use only nano or vim. Then show me that you read this and as well as a basic http server example. Or if you aren’t a student in my class, ignore that last part entirely.

Terminal Basics Exercise

I’ve included a gif of the exercise showing half of the commands above. It also has alt text of the commands I ran for screen readers. Then I have the instructional steps describing what I did and the commands I typed.

Instructional Steps:

Create a new directory called test with mkdir command.
Change the directory and Gg inside the test directory with the cd command.
Inside the test directory, create a file called test.js using the touch command.
Change the directory again and go back one directory by typing cd ../ check the current directory by typing pwd, check that the test directory you created exists by typing ls,
Finally, delete the /test directory using rm -rf /test note that the -rf flag is used to recursive delete the directory and all its contents.

If you were able to follow these steps then you should have all the basic knowledge of terminal commands to install node.js using Node Version Manager which is abbreviated as NVM. Here is a video version of the gif.

Installing git

Before we install node or nvm we want to install git. Git allows developers to use version control on files which means we can see files changed, who changed them and what was added or deleted. We are not going to cover git or version control, at the moment because I want to focus on installing nvm and node. We’ll circle back to this later if there is enough interest in it. Also if there is downtime in-between the publishing of the article of this series, I recommend these awesome resources also gitkraken if you want a useful GUI to learn but I stress the importance of learning command line first.

Installing Node Version Manager (NVM)

Instead of installing node via the download page, we are going to install it with NVM so that we can install different versions of node and switch between them as needed. We want to use NVM because as a developer you will need to maintain legacy code that may only run on older versions of node. NVM always us to switch between these different versions easily.

It’s very important to note that for windows users there is no official version of nvm. I’m considering writing a tutorial on the closest alternative below but I’m not sure if there is enough demand. So if I get enough comments, I’ll consider it. For now, unfortunately the link below is the best resource I have on the matter.

Installing NVM on Windows

Installing NVM on Linux / Mac

First, we need to check if there is already a bash profile and create one if there isn’t. The bash profile ‘is a configuration file for configuring user environments” such as the path to programs such as NVM. If we don’t have this file or if it's not configured properly, nvm, git, node, etc won't run. This file will have a dot before the filename which makes it a system file and a hidden file. Let open up the terminal and run nano .bash_profile. and if it doesn’t exist let's go ahead and create one with touch ~/.bash_profile.

Now we use curl to download and run a shell script which will install nvm. You may also need to have git installed on your machine.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

This should have created a .nvm/ directory. We can check this by running the pwd ~/.nvm which will show us if it's installed and where it is. Then we can check what’s in that folder with ls ~/.nvm.

Now run nvm in terminal. You should see the same thing as the image.

Now close your terminal completely, reopen it and check if nvm still shows you the same result.

If nvm isn’t showing after you closed and reopened terminal than something went wrong and you .bash_profile wasn’t updated.

If NVM doesn’t automatically install…

If that didn’t work, we’ll need to figure out why it didn’t install properly.
Let's check our .bash_profile and .bashrc files. Check the .bashrc with nano ~/.bashrc and check the .bash_profile with nano ~/.bash_profile.

If it’s not in either one then we need to use nano to edit the file.

nano ~/.bash_profile

Leave your terminal open and copy & paste the code below into the terminal.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nv
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

Then exit and follow the prompts to save the file.

Using NVM to install node

Assuming that all went well, we can use run nvm install —lts to install the long-term supported version. At the time of writing this article that would be 12.14.1 however version 13 is out and available to install and run however, it's just not entirely stable.

Using different versions of node

Now let’s say we have a command-line tool that uses an older version of node such as the foundation’s CLI. If we were to install it with npm install —global foundation-cli as the documentation says then try and use with the command foundation, we’d get an error.

However if we install node version 8 by running nvm install 8 the switch versions using nvm use 8 and run foundation we can now use the cli tool to rapidly prototype front-end websites.

Creating your first javascript file

Let’s go ahead and open up vs-code and install the code runner extension. We’ll be using this to run simple javascript files however once we start building a server we’ll be using nodemon instead.

Now let's begin the second exercise:

Create a javascript file. We can do this a number of ways. The fastest is with command n and then change plain text on the bottom to javascript. Or open terminal, run touch test.js and open the file with vscode.
Create some variables using the three types of variable declaration, var, let and const. Then print them with console.log(). We’ll go over the differences between var, let and const in the next article.
Run the file either by using terminal node test.js or by clicking the play button that was added by the code runner extension.

Conclusion

Now let's go ahead and test your knowledge with the post-assessment. By now, you should have some basic working knowledge on terminal commands, git, nvm and node installed and your first hello-world.js file written. Not bad for a 9-minute read.

Next Up in the series:

Thank you for reading all this way. I plan to update every article in the series like this so you can keep learning.

The next article in the series is a gentle (re)Introduction to Variables, Data Types and Immutability. It’s less of a tutorial and more of a dense overview that is packed with resources to provide a rock-solid foundation essential to learning javascript.

About the Spiciest Tech Channel on YouTube

If you would like to see a video of this, consider subscribing to, Hans On Coding and leaving a comment on here or on the channel. The channel will feature the following types of videos:

Podcasting / Interviews with Industry Professionals
Coding Events & Fun Challenges
Coding Tutorials (like this one)
JavaScript-based Hardware projects (such as nodebots and programming drones).
Open Source Coding Curriculum

Learn more about it:

Wanna make this coding teacher cry? Consider sponsoring him for the #CodeRedChallenge and feel good about supporting open source content:

Additional Resources:

Javascript with FreeCodeCamp
https://glitch.com for using nodejs on a real server.

Using the previous-sibling CSS “HACK” to create an Animated Star Rating

Hans — Fri, 17 Jul 2020 16:41:08 +0000

Read the Full Article on Medium

Educational Objectives:

Explain the difference between a CSS Selector and a CSS combinator
Compare & Contrast the "Adjacent sibling combinator" and the "General sibling combinator"
Demonstrate how to use flex-direction and hover to imitate a previous sibling combinator
Demonstrate how to use clip-path to create a star

Today I will go over a simple but surprisingly powerful way to use previous child selector CSS “Hack” to build a Star Rating Component.

Background on this Article

This article is part of an ongoing educational series that will be turned into an Open Source Book and therefore is considered a "living article" subject to change. If you have question, want to contribute or just wanna chat about the content, leave a comment!

If you have a find a bug, typo, or want contribute directly to this book, you can submit an issue:

CSS Basics in a single GIF

I like my posts to be beginner friendly, without sacrificing advanced content. So here is a gif by Umar Hansa that goes over some of the most basic rule around css. Try out the full link here.

What we'll be building today

I wrote some code, a description in code comments and made a gif... So I guess, that’s all folks.

I’m just joking, what am I the JavaScript Teacher? We can do a better job than that… So let’s dive in:

How is this a CSS “Hack”?

No it’s not a “hack” as in, a violation of the computer fraud act, type of hack. That’s illegal and we are law abiding citizens here.

It’s a just a creative way to problem solve by flipping the problem entirely upside down, doing the exact opposite of requirements and then presenting our lie to the user flawlessly because it doesn’t matter to them how you did it.

If that’s not a CSS “hack”, it’s certainly a magic star...

Star Rating With CSS Only:

Let’s break this down in terms of the project requirements and CSS selectors & combinators available to see if this is even possible.

Spoiler, we cheat… and that’s why its a “hack”.

So what exactly are the requirements of a star rating?

Generally when you see this coding challenge it goes something like this:

The Rating component consists of 5 stars, with each star represented by an element and held in a parent container.

When the star element is clicked or in this case hovered on, the star, should be change to an “active” color and all starts before it should be updated to do the same.
Also, the stars after the desired rating should not have an active color.

Problem Solving with CSS Selectors, Display types & Combinators

The CSS isn’t a programming language, it’s a “style sheet language used for describing the presentation of a document written in a markup language like HTML”.

In other words, we cant tell the browser what to do.
Instead, we can only tell the browser how to present the markup.

Using pseudo selectors like :hover, :focus, :focus-within, and :checked we can mimic the behavior of clicking and touching an element in the document object model (DOM) or more simply, the rendered HTML.

Ok great, that we can accomplish the requirement #2 easy enough. But what about requirement #1.
Well… this is why we have to “cheat” because there is no way to really target a previous sibling, we can only ever target the parent container, the child and their relatives in a cascading manner.

That’s why it’s called CASCADING Style Sheets, not ascending style sheet.

That also means we can’t technically accomplish either one of these, but we can do the exact opposite of both and present it, as if we were, in fact accomplishing them… So yeah, it’s definitely cheating and it’s going to be fun and hopefully make you appreciate CSS more.

Rewriting the requirements to the rules of CSS

When the star element is hovered on, the star, should be change to an “active” color and all starts after it should be updated to do the same.
Also, the stars before the desired rating cannot be styled, so we throw a childish fit and flip the damn thing up side down and reverse the order.
Lie to the user (and reader) and say it’s a Previous-Child Selector.

Since we can, “describe the presentation of a document”,
that includes how we present the order of the elements.
There several ways we can do this but I’m only going to cover two of them and the second is an anti-pattern and you should avoid using it. It’s only used to manually, demonstrate another way of describing what is happening.

Option 1: Display Flex & flex-direction

Because I want to show it as a row, we’ll apply flex-direction: row-reverse; to the class of .star-rating to reverse the order of every child element.
The DOM doesn’t change. We just change how we present it.
So enough our document, or HTML is written as the following:

<div class="star-rating">
  <div class="star star-1"></div>
  <div class="star star-2"></div>
  <div class="star star-3"></div>
  <div class="star star-4"></div>
  <div class="star star-5"></div>
</div>

The CSS applied in the .star-rating class, will reverse the order of every div.

Then we’ll change the color of the star.
To do this I’m going to use :hover to change the color on the selected star and we’ll use the CSS General sibling combinator ~ instead of the Adjacent sibling combinator, +. If we used the adjacent combinator, we’d have to write:

.star-rating .star:hover,      // the selected star
.star-rating .star:hover+.star, // the sibling after it
.star-rating .star:hover+.star+.star, // and so on
.star-rating .star:hover+.star+.star+.star, // and so on
.star-rating .star:hover+.star+.star+.star+.star, // and so on
.star-rating .star:hover+.star+.star+.star+star+.star // and so on..
{
  background-color: red;
}

That’s to much typing, I have a plate & 8 screws in my hand so it hurt to type.
Plus it’s just bad CSS, so instead, we’ll simply write the following:

.star-rating .star:hover,
.star-rating .star:hover ~ .star{
  background-color: red;
}

That’s much easier.

But it’s important to remember that we are not really styling the previous siblings, we’re styling the siblings after the star we select and just reversing how it is presented to the user.

Option 2: Using SCSS, grid, grid-area and grid-template

To read more there are two options, both completely free because I don't believe knowledge should be locked behind a paywall or die slowly in academia...

Read the original, Full Article on Medium without a pay wall because we're friends. And friends, get friend-links.
Contribute directly to this book by reading/discussing the section Star-Rating.md. And if you desire, submitting a PR, Issue, etc on github and reading the markdown article Star-Rating.md.

6 React Books worth reading

Hans — Sat, 06 Jun 2020 20:34:36 +0000

Why React?

If there is a single javascript front-end library or framework you should learn, teach or adopt, it may have to be React.
Once a small library for the web, React has grown into a large and very diverse ecosystem that effectively empowers developers to learn one core “library” and apply it’s core concepts to a suite of additional libraries and frameworks to build UI components for the web, mobile apps, and even VR.

Those reasons as well as the demand and popularity of React, make a compelling argument to learn the core library and a few others. For those unfamiliar with React lets clarify a few things:

React is a library, not a framework.
It was released in 2013.
Introduced JSX, an xml like super-set of JavaScript used to describe UI’s on the web
React started gaining popularity around 2015 as the JS community was learning to adopt the newest language standards known as ES6 /ES2015.
React-Native was also introduced in 2015 further adding to its popularity.
React VR was released in 2017 and renamed React 360.
React Ionic was released in 2019

There are several different libraries and frameworks developed and maintained by Facebook with key differences.

React — The core library that the three others below are built on top of. It is a declarative, component-based library for building UI that you learn once and can use everywhere.
React DOM — A library that renders React components for the web.
React-Native — A framework for building native apps on iOS & Andriod.
React-360 — A framework for creating web-based 360 and VR content.

There are also a few other React related projects by Facebook that are definitely worth keeping an eye on. Finally, there are countless components, hooks, libraries, and frameworks made by the greater react community such as react router, remix, react ionic, and countless others that help you build websites faster.
So if you’re excited and ready to learn React,
Here are a few book recommendations to help you.

Introductory Books

The first half of this article will be concerned with books that are reasonably safe for beginners and intermediate level developers. However, they do largely assume you have a working proficiency with JavaScript. My goal here was to narrow it down to 4 books that give readers such a solid understanding of React that they are confident enough to not only build the projects in advanced books but also try and improve upon them and explain the project they build well enough to pass an interview.

React and React Native 📖540

By Adam Boduch, 2018
Explanations ⭐⭐⭐⭐ Practice ⭐⭐⭐⭐
Assessments ⭐⭐⭐⭐⭐ Advanced Topics ⭐⭐⭐⭐⭐
If you are completely new to react, I highly recommend this book.
It’s packets full of illustrations, plain explanations and even assessments to make sure you have a solid understand of React whether you use it for web or mobile.

Learn React with TypeScript 📖492

By Carl Rippon, 2018
Explanations ⭐⭐⭐⭐ Practice ⭐⭐⭐⭐
Assessments ⭐⭐⭐ Advanced Topics ⭐⭐⭐
If you are hoping to eventually join a major company as a React developer, I would definitely recommend checking out this book as it provides a foundation for writing clean, maintainable code using TypeScript.

React Design Patterns and Best Practices 📖~326

By Carlos Santana Roldán, 2019
Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐⭐
Assessments ⭐ Advanced Topics ⭐⭐⭐⭐⭐
This book is honestly one of my favorite intermediate level books. The author is a senior engineer at Snap Inc & the book provides an indepth understanding of react under the hood.

Learn React Hooks 📖426

By Daniel Bugl, 2019
Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐⭐
Assessments ⭐⭐⭐ Advanced Topics ⭐⭐⭐⭐⭐
I was hooked within the first two chapters.
I cannot recommend this book enough.

Advanced Project-Based Books

After you have a firm understanding of the fundamentals of React, React Native, and react hooks, its worth considering learning the MERN stack (Mongo, Express, React, Node) and maybe even a little VR for the web. Here are a few books to help you build on what the previous books covered and hopefully modify them with your own knowledge and use cases.

MERN Quick Start Guide 📖536

By Eddy Wilson Iriarte Koroliova, 2018
Explanations ⭐⭐⭐⭐ Practice ⭐⭐⭐
Assessments ⭐ Advanced Topics ⭐⭐⭐
This is a great introduction to MERN stack.
Assuming you are talking about Mongo, Express, Redux, Node…

As far as quick-start books go, this book job does an amazing job covering Express, API’s, Mongo, and Redux. The chapters are overall very well organized, even for beginners.

Most of all though, the explanations of core concepts and code are worded in plain, simple, and concise ways that even my high school students found it easy enough to follow. The express chapter, in particular, does a fantastic job of breaking down the most common middleware and how to use them.

Full-Stack React Projects 📖440

By Shama Hoque, 2018
Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐⭐
Assessments ⭐ Advanced Topics ⭐⭐⭐⭐⭐

Shama Hoque’s book definitely isn’t intended for complete beginners but I would recommend it for some fun MERN stack portfolio items. Also, the good news is the second edition is coming out soon.

The book has four main projects:

Social Media Platform
Online Marketplace
Media Streaming Application
VR game

By the end of the book, you should have at least 4 projects that are worth showing off.

If you want to read the full version, check it out on Medium.

ES4, The Failed proposal the indirectly led to Node.js, ES6, TypeScript and Deno

Hans — Sat, 06 Jun 2020 20:27:19 +0000

This article was originally written on medium and if you interested in reading the full version check it out here:.

JavaScript History

Before "JavaScript Existed", The creators behind the Mosaic browser created a language called "LiveScript" and shipped it in 1995. Within 3 months, it was renamed to "JavaScript" to build on the hype train programmers were on with Java, a completely separate and unrelated language.

Eventually, Microsoft did what they always do, which is steal source code from someone else's product and release their own version of it, Internet Explorer that used "JScript". The browsers wars started and long story, short, Mosaic, and other browsers died off due to Internet Explorer. Yet multiple forks of JS remained as well as other scripting languages. All of which were made to address the same issues of providing the browser interactive behavior beyond hyperlinks and the page reloading.
Behind the Language & Engine that powers it

Standardization of Browser Behavior via Scripting

The first attempt at standardizing scripting languages was in 1997 with ECMAScript. (ES-1) as part of European Computer Manufacturers Association (ECMA). However, different implementations, competing languages, and egos prevented any real standardization from occurring until 2009. In between that time, the (failed) proposal for ES-4 (led by Mozilla and others) attempted to call for more traditional programming concepts like classes, modules, etc.

The standard was abandoned largely due to the concern of "breaking the web" and the introduction of AJAX ( Asynchronous JavaScript And XML") which allowed for client-side dynamic content. As a result of multiple factors, jQuery was created in 2006, largely to provide cross-browser support for different implementations of JavaScript and AJAX. By 2009 ES-5 was released and essentially became what the De facto Standard of JavaScript that most still refer to.

It is important to note, that virtually every proposed feature in ES-4 would later be implemented in ES-6 such as classes, generators and iterators, destructuring assignment, and most importantly a module system. The only feature truly noticeably absent are the various reimplementations of types. To read more about the The Real Story Behind ECMAScript 4.

The Birth of Node.js & JavaScript Module Systems

Beginning in 2009, serverJS was created to give JavaScript a module system and later was renamed commonJS . The goal was "to establish conventions on module ecosystem for JavaScript outside of the web browser" and was likely related to some of the failed ES4 proposals.

.Later the same year, Ryan Dahl would build on top of this to create the Node.js is a runtime environment for JavaScript, which used the Chrome V8 engine among others such as libuv and released in May, 2009.

This runtime environment, is what allowed JavaScript to run virtually anywhere the environment is installed.

After Node.js was released, it changed the JS language forever and helped slowly turn it into more of a programming language and less of scripting language. This was made possible by two things, callbacks for asynchronous code (which already existed in the language) and modules system (a rejected ES4 proposal) which allowed multiple files to be imported and exported via require() and export and eventually a package manager, NPM which would later become one of the largest sources of open-source software.

The Node.js API also came baked with some basic methods that allowed for reading/writing files (such as FS) and a basic HTTP method, both of which are essential for creating a simple server.
After Node.js was released, this runtime environment and its primary package manager, npm, allowed the ecosystem to grow more and more. Libraries on both browser-side and node-side became easier to publish, distribute, and concatenate together with tools such a grunt, gulp, webpack, etc.

This made it easier for developers to rapidly prototype websites on both the front-end and back. Consequently, the transition into becoming a full-stack developer suddenly flung the door wide open to just about anyone as it didn't require switching to other languages such as PHP, python, pearl, etc.

The Startup Scene

Over time, Node.js grew and exploded in popularity for a variety of reasons.

Namely, the environment made things easy to learn, because you didn't have to learn how to configure a local apache server, xampp, configure your vhost file, like you did with php & LAMP, etc. Virtually everything you could think of needing, there was a library for that on the front-end or back-end was a single npm install command away.

Oh yeah, and the servers are FAST and handle high amounts of concurrent traffic with minimial memory in many cases when implemented properly (async coding pattern) and for the right use cases. Oh and they are insanely quick to code.

This was an absolute dream for developers, new or experienced, and especially startups which almost always drive programming hype and trends. Once it reached maturity, People saw the advantages in terms of speed, server costs, learning costs, less potential training & recruiting costs, speed of rapid prototypes, communication between front-end and back-end teams, and most of all overall payroll costs could potentially go down as one good full-stack engineer could do both front-end and backend. The latter is especially important for startups because it means less equity and less overhead.

Responsive Design & Mobile App Development

Between the time Node.js was first created in 2009 and skyrocketing in 2013, mobile phones became smartphones, and apps became a make or break scenario for startups. It was a way to put your software in some's hands 24/7 and get an edge on your competitor or otherwise disrupt the other titans in the industry and establish an empire.

Media Queries were introduced between 2008–9 and Responsive Design was coined as a term in 2010, to explain the demand created by this fundamental shift in technology and our society more generally. Where responsive design handled the needs of the web design, new technology was about to emerge to disrupt mobile application development.

By 2011, another technology started to pop up, largely influenced by responsive design philosophy. Apache Cordova, which allowed web developers to use HTML, CSS, and JS to build mobile apps. Prior to this, you'd have to specialize in languages like Java for android, or objective C for iOS apps. These languages aren't just significantly harder to learn but the development environment was (and still is) harder to debug and slower dev time because you have to wait for your code to recompile. Cordova offered a solution, one programming language (JS), html (markup), and CSS (styling) and it was way easier to learn.
Of course, this did have huge drawbacks, namely, apps run slower than their native counterparts and consequently still haven't explored in the same way Node.js did. Ionic built on top of this in 2013 and has since taken it much further and has since largely replaced Cordova. But it also wasn't enough to save Microsoft windows phones as no one developed apps for their marketplace…
Personal note, my uncle worked for Microsoft (MS)for 20+ years & largely with their phones. So that's why I attempt to make humous jab MS throughout this article. He's like my second dad and I was always amazed and inspired by seeing the latest smartphone MS made in 2000–2008 that had the full internet too (windows mobile). A full decade before responsive design was coined.

On the hardware side of things, Johnny-Five.io first came on the scene in 2012 and with it, you could use the simplicity of JS and the power behind Node.js and NPM to rapid prototype hardware for the first time.

All the areas where you used to need a statically typed, OOP language to the developer had been encroached upon.

This allows us as developers to use build Arduino,Tessel 2, Raspberry Pi, and basically anything that you can get Node.js and johnny-five installed on. It's not just robots either, many IOT devices today are built on this today and it's had a profound impact in the ways most, even in the JavaScript scene may not be fully aware of or appreciate.

As a result, JavaScript as a language became arguably the most versatile and accessible programming language which can now be used on the client (browser), the server, phones/tablets apps, and even to an extent, on microcontrollers via Johnny-Five.
Oh and there are even a few libraries to build VR and even Games…
Node Forks & The ES6 problem

By 2014, Node.js started getting a few different forks for various reasons. The most notable was io.js which eventually merged back with node.js. But there were several other forks, I won't mention and the reason behind them varied from technical reasons (like promises), lack of contributors, and even petty and frankly, immature ego related personal differences (but I'm not linking to that can of worms, keep me far away from me, thank you…).

By 2015 the latest JavaScript standard, ECMAScript 6 was released and with it became almost everything originally drafted in ES4, minus the breaking changes and notably the introduction of let, const and symbol as opposed to more traditional local/global variables and static, strongly typed declarations. Again, unlike the original ES4 draft that would have broken the web, this approach had the power of Babel and allows us to use future features, today by compiling from ES6+ to ES5 (the standard at the time).

All this was made possible by Node.js.
These new JavaScript features included ESM or ECMAScript Modules (imports/export as opposed to require() via commonJS), async/await, the fetch browser API, and many others not in the original ES4 draft. Some of these features also introduced compatibility problems with the core architectures of Node.js to various extents. Most notably, over the last 5 years, the ESM standard has continued to be a very real and persistent issue that requires either using a 3rd party package, an experimental flag or using .mjs files depending on various considerations.

Birth & Rise of TypeScript: a response to ES4 & ES6?

Quietly lurking in the background, however, TypeScript was first made in 2012 but didn't have its 1.0 release until 2014 near the same time as ES6 was coming to the new standard.
Now, from here on out. I'm going to begin to interject small parts of my personal opinions based on my understanding of the history, the current landscape today in 2020 and I'll try and make a few projections about the future as both a sociologist and as a JavaScript developer with almost half a decade of experience, now.

I believe JavaScript is largely a broken language that should have been fixed before large parts of our entire global economy and technology that running off it intertwined with our social reality. In other words, they were probably right with ES4 proposals… But it's too late for that now.

Finally, I think TypeScript is really amazing for debugging the inherit bugs of the language itself and a good balance between rapid prototyping and quality code and I can't wait to see what Deno has in store for the language.

Birth of Baby Deno

Deno was first announced back in 2018, where Ryan Dahl the original creator of Node.js took the JavaScript world by storm by introducing a complete rewrite, entirely from scratch based on modern JS standards such as promises & async/await, ESM, typed arrays and TypeScript.

As a result of all this history and other factors, Ryan Dahl, the original creator started working on something new. In the talk, he talks about Deno as mostly a "thought experiment" and expresses his biggest regrets in building nodeJS, love for TypeScript, and hate for dart.

Versions 1 of Deno

Today, demo is ready and stable for you to try out and is at version 1. Truthfully, it's been stable enough since January when they have the installs compiled as executables. Anyhow, here is a more recent video from its creators. I'll let him do the talking.
I could go and write my own Deno Tutorial and compare it to the node example above (and I did…). But, I deleted it once these videos came out because and reused other parts for the history sections above.

Anyway, Brad Traversy is doing an amazing job, as always. The first video is a bit too long in my personal opinion.
However, the second video is great because it goes over denon which is like a weird mixture of nodemon, npm scripts & package.json. It's really cool sweet.

Possible Futures?

I want to start off with the same predictions I talked about when I taught high school students last year and told them to pay attention to 3 things that will change the development landscape:

TypeScript & Deno -- For learning Backend & code quality required in Industry jobs (FANG).
CSS Houdini -- For browser optimizations, custom layouts and so much more.
Web Assembly & AssemblyScript -- For native-like optimizations to servers, Mobile Apps & VR.

In other words, it's like we're back in 2009 only now it's TypeScript's turn to disrupt the landscape with it's own runtime environment.

Instead of JavaScript and Node.js, it's TypeScript and Deno.
Instead of Mobile Apps and Responsive Design, it could be VR/AR Design Interfaces, as we learn to adjust the reality of this global pandemic in a world of 5G & cloud gaming…

Instead of Cordova, Ionic or NativeScript, compiling to run natively with a wrapper, it'll be something that you write & debug in TypeScript and compiles down to Web Assembly and performance wont be near as much of an issue.

Thoughts or Comments?

I hope you enjoyed reading this and don't take any of my criticisms personally (unless you are my uncle, in which case it's just fun banter). I really want to hear your thought! Especially if you were part of JavaScript / ECMAScript's history as I didn't start using it until 2013 and wasn't really full-stack until 2015–2016. I tried to do the best research I could.

5 Best JavaScript Books: A Coding Teacher’s Perspective

Hans — Tue, 03 Mar 2020 19:22:37 +0000

Generally speaking, I wouldn’t recommend coding books or coding textbooks because by the time they are published they are already out of date or will be within a few years. That being said, when I was teaching coding I spent a lot of time reading/watching content from various avenues to make sure my students would have relevant content, practical exercises and knowledge for entry-level jobs.

Selection Process

As a teacher, I read a lot during the process of curriculum development. Usually, I speed read 2–4 books and often 10–20 online articles a week and then spend a week or two before the new unit putting it all together by creating slides, creating custom coding exercises & activities, and supplementing it all with youtube videos and additional readings for students who learn differently (IEP or more advance).

When I’m speed reading I’m looking to see how well the content meets the criteria below:

Explanations — Are the terms/concepts well explained? Do they have diagrams or visuals?
Practice — Does the book have step by step code exercises? Do they have more open-ended projects as you’d see on the job?
Assessments — Does the book have any knowledge assessments such as quizzes, interview questions, a glossary of terms/concepts?
Advanced Topics — Does it cover advanced topics such as design patterns, data structures & algorithms, immutability, functional programming, etc ?
Popular Technology — Does it provide in-depth knowledge of a popular library or framework?

Although there are plenty of needlessly long textbooks written on web development and built for college classes, most books, in my opinion, don’t completely cover all of these categories when it comes to JavaScript development or full-stack JavaScript. So in this article, we’ll use a star rating from 1-5 to quickly communicate how well they do in each category.

Example:
📖Number of Pages
Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐⭐ Assessments ⭐⭐⭐⭐⭐
Advanced Topics ⭐⭐⭐⭐⭐ Popular Technology ⭐⭐⭐⭐⭐

The first three books, I will be recommending are on JavaScript fundamentals. After that, I will be recommending one book on NodeJS and one on React. I could definitely recommend more books but I wanted to keep down to 5.

Eloquent JavaScript, 3rd Edition:

A Modern Introduction to Programming by Marijn Haverbeke
📖472 Explanations ⭐⭐⭐ Practice ⭐⭐⭐ Advanced Topics ⭐⭐⭐
Popular Technology ⭐⭐⭐ Assessments ⭐

You Don’t Know Js: this & Object Prototypes by Kyle Simpson.

📖144 Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐ Assessments ⭐
Advanced Topics ⭐⭐⭐⭐⭐ Popular Technology ⭐

Learning JavaScript Data Structures and Algorithms — Second Edition By Loiane Groner

📖314 Explanations ⭐⭐⭐ Practice ⭐⭐⭐ Advanced Topics ⭐⭐⭐
Assessments ⭐ Popular Technology ⭐

Node.js Complete Reference Guide

By Valentin Bojinov, David Herron, Diogo Resende, December 2018
📖732 Explanations ⭐⭐⭐⭐ Practice ⭐⭐⭐⭐⭐ Assessments ⭐
Advanced Topics ⭐⭐⭐⭐⭐ Popular Technology ⭐⭐⭐⭐⭐

Learn React Hooks By Daniel Bugl

📖426 Explanations ⭐⭐⭐⭐⭐ Practice ⭐⭐⭐⭐⭐ Assessments ⭐⭐⭐
Advanced Topics ⭐⭐⭐,⭐⭐ Popular Technology ⭐⭐⭐⭐⭐

Read the full article on my medium page.