DEV Community: jonhourcade

Bootcamp Reflections

jonhourcade — Thu, 15 Jul 2021 14:36:37 +0000

I have less than one week left of my web-development immersion program. As such, I thought it would be fitting so share some of the strategies that helped me succeed.

As many hours as possible

When the program first started, we were only in class for three hours a day four times a week. I spent at least six hours a day writing code. Before class started, I was at the computer reviewing presentations and code from the day before. After class ended, I worked through Udemy videos.

When class jumped up to five days a week for nine hours a day, I squeezed in a few extra hours before and after class. Not only did this allow me to stay ahead of the course material but also built up my endurance for the eleven hour days that were yet to come.

You definitely need to build up your ability to sit at a desk for half the day. It's very difficult to go from three hours a day to eleven plus hours a day. I recommend you build that endurance up before you have to so you're prepared for the long-haul days.

Stay ahead of the curriculum

This helped me more than anything else. To succeed in a coding bootcamp, it's best not to learn anything for the first time in class. You should go into a topic with a working knowledge of the subject. Class time is best spent practicing and and assignments should cement the knowledge.

The following Udemy courses were particularly helpful. I, personally, prefer Colt Steele. I completed the entire course and used Angela's course to review subjects of which I was unsure. She speaks a little slower which can be helpful when the topic is complex.

If you're interested in design, Angela Yu is a great choice. All her projects have a modern look and feel and you can learn a lot about aesthetics by paying attention to how she lays out and styles her web apps.

https://www.udemy.com/course/the-complete-web-development-bootcamp/
https://www.udemy.com/course/the-web-developer-bootcamp/

I gained a strong understanding of React by going through John Smilga's React courses. He has one video with tutorials and another video where completes projects. He's also got a great eye for design and writes really clean code. He has a Udemy course which I would recommend as they're less than $15 when they're on sale (which is always).

The skills I gained working through his course transferred seamlessly over to Angular and will transfer to all component-based UI frameworks I learn in the future. Time very well spent.

https://www.youtube.com/c/CodingAddict

Review, review, review

Watching coding along to videos is great. I do it all the time. However, I spend almost as much time reviewing old code and making sure I understand each and every line. When you're coding along with an instructor, it feels like you understand the material. When you revisit it the next day or week, all of a sudden, you understand nothing.

While I'm reviewing old code, I'm adding comments that explain every non-obvious like of code. Frequently, this involves referencing documentation. Reading through documentation and actually typing the comments really helps me with retention.

I think this is especially helpful when using libraries and frameworks. When you're using one of these, you're making a lot of method calls. Some instructors are really good about explaining what each method call is doing under the hood, most are not. Sometimes, instructors type so fast it's hard to keep up and you miss the explanation.

Data structures, algorithms, and problem solving

Writing code isn't just about knowing how to use popular libraries and frameworks.

It's really important that you understand the basic data structures and sort and search algorithms. Not only do these come up all the time in interviews, they're a really good exercise in critical thinking.

Working with nodes and pointers is very different than working with real-life entities. When you're working with real-life entities, you're writing simple functions that map over lists and transform the list, filter the list, or reduce it to a value or object that contains values.

When you're working with data structures, you're thinking on a much more conceptual level. It's a completely different style of thinking and really improves your problem solving skills.

Colt Steele has a great class. I went through it once and rewrote them in TS a few months later to review:

https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/

It's also really important to seek out coding challenges. I get an email from Daily Coding Problem every morning with an interview question from a major tech company. Most of the questions are really tough. What they consider easy, I consider medium. What they consider hard I consider impossible given my skillset.

When I can't come up with an answer, I google it and see how others have implemented it. The best problem solvers are those that have seen the most problems. They recognize patterns and can quickly determine when a new problem shares similarities with a problem they already know how to solve. The more you solve, the better equipped you are to solve a new one.

Conclusion

There are my keys to success. Like many other aspects of life, you get out of a coding bootcamp what you put in. If you want to excel, you need to put in some extra hours and seek out supplemental material.

Getting Started With Socket.io

jonhourcade — Wed, 07 Jul 2021 03:36:38 +0000

Socket.io is a javascript library that makes it really easy for developers to create single-page web- and mobile-applications that employ 'bi-directional communication.' Simply put, it allows servers to push data to to all client browsers and devices instead of waiting for a request from the client.

The resulting real-time functionality is everywhere. Social media applications have feeds which are updated every time another user likes one of your photos or adds you as a friend. Messaging apps don't require you to refresh the page to see your new messages.

Socket.io uses the websocket protocol (ws or wss) to transport data between client and server. HTTP is a stateless protocol. After a message is sent the response is received, the connection is closed. The websocket protocol, however, is a stateful protocol. The connection persists until it is closed.

HTTP is unidirectional, clients make requests to servers and servers respond with the requested data. Websocket protocol travels in both directions. The client can request data from the server and the server can push data, unrequested, to the client.

Demo

Here's how to implement a socket.io server and client. I'm going to use express for my web server and react js for my client.

First, I ran the following command to create a react app. I cd'd into socket-io-demo and ran 'npm start' to open up the project in a browser.

npx create-react-app socket-io-demo

Next, I ran the following command to install express, socket.io, and socket.io-client. Socket.io is used to set up your express server as a socket.io server and socket.io-client is used on the client side to connect to the socket.io server.

npm i express socket.io socket.io-server

Server

Let's get started on the server side. First, I created a folder called server and added an index.js file. I'm going to put all server code in index.js to simplify things. Normally, I would put socket.io logic in its own file and run this file from the entry point to the server.

Now, I'm going to create an instance of app by requiring express, invoking it, and capturing the return value in a const called app.

I'll create an HTTP server object by invoking the createServer method of the http module. No need to import http cause it's built into node. Pass app into the createServer method.

Next, I'll create a new socket.io server by requiring socket.io and extracting Server from the return value. Then, I instantiate a socket.io server with the new keyword and pass in my HTTP server object in as an argument. I used the identifier 'io' to keep it consistent with the documentation.

Lastly, instead invoking the listen method on app like you do if you're creating typical express web server, I invoke listen on the socket.io server.

const express = require('express');
const app = express();

const { createServer } = require('http');
const httpServer = createServer(app);

const { Server } = require('socket.io');
const io = new Server(httpServer);

const port = 8080;
httpServer.listen(port, () => {
  console.log(`socket.io server listening on port ${port}`);
});

Add an npm script to start the server and run it and you should see the message in the console:

"server": "node server"

Client

On to the client side. When I created my react project, an App.js file was created. This is my root component. I'm going to connect to the socket.io server in this component because if I connect in a sub-component, every time the component re-renders, a connection will be re-created. You could also wrap your app in a socket context component to ensure a connection is made one time.

I'm going to import 'io' from 'socket.io-client' with the following line:

import { io } from 'socket.io-client';

Next, I'll connect to the server by invoking io and passing in the url of the server. Socket.io uses websocket protocol by default. If websocket protocol does not work, it falls back to a backup protocol

const socket = io('http://localhot:8080');

I'm creating a super simple chat application. When you learn how to use a component-based front end library or framework, you inevitably build a todo or grocery list. When you learn how to use a real-time library like socket.io, you build a messaging app.

I'll create three components: App, ChatInput, and Feed. App renders the ChatInput and the Feed. It looks like this. I'll need to pass the socket constant down to the sub-components cause they use socket to send data to and receive data from the server.

const App = () => {
  const socket = io('http://localhost:8080');
  return (
    <main>
      <ChatInput socket={socket} />
      <Feed socket={socket} />
    </main>
  );
};

The ChatInput component should look very familiar. There is a state value, a controlled input, and a submit handler. Here's where things get interesting. When you hit the submit button, instead of updating the state of the application. You're going to invoke the emit method on the socket (which was passed down s a prop from the App component). Emit will send data from the client to the server.

The emit method has two parameters: a string which is the name of the event and the thing you want to send to the server. I'm sending the state value text.

const ChatInput = ({ socket }) => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    socket.emit('sendMessage', text);
    setText('');
  };

  return (
    <section>
      <input type="text" value={text} onChange={setText} />
      <button type="button" onClick={handleSubmit}>
        Send
      </button>
    </section>
  );
};

Next, I'll go back in the server and respond to the event emitted by the client. After creating the socket.io server and before invoking the listen method on the http server object. I'll invoke the on method on the socket.io server. This method takes two parameters, a string and a callback. I'll pass 'connection' in as the first argument and a callback with one parameter 'socket' in as the second argument.

I like to log a message to the console to confirm the client connected to the server. Next I'll invoke the on method on the socket. I'll pass in a string which is the name of the event emitted from the client and a callback with one parameter. Call the parameter whatever is send from the client. In my case, it's text.

Now all you have to do is run the emit method on the socket io server. You can name the event whatever you'd like. I called mine the same name as the event emitted by the client. I passed in the text send by the client as the second argument.

io.on('connection', (socket) => {
  console.log(`client ${socket.id} connected to socket.io server`);
  socket.on('addMessage', (text) => {
    io.emit('addMessage', text);
  });
});

Next, in the Feed, invoke the on method on socket. Pass in the name of the event emitted by the server and a callback. Update the state of the component accordingly.

const Feed = ({ socket }) => {
  const [messages, setMessages] = useState([]);

  socket.on('addMessage', (text) => {
    setMessages([...messages, text]);
  });

  return (
    <section>
      {messages.map((message) => (
        <article key={Math.random()}>message</article>
      ))}
    </section>
  );
};

Those are the basics of socket.io. There are a lot of options. You can broadcast events from one client to every other client. The server can iterate over all clients and emit messages to some of them. The documentation is really helpful and easy to understand.

React Native Isn't That Scary

jonhourcade — Tue, 29 Jun 2021 12:54:21 +0000

Like most web developers in training, when I leaned to use "React", I was actually learning to work with React JS. It wasn't until I began working with React Native that I began to understand the differences between the two technologies.

React JS versus React Native

React JS is front-end library that allows web developers build web apps with interactive user interfaces. These interfaces use reusable components that speed up development time by drying up code.

Web apps built using React JS are FAST cause React JS employs the Virtual DOM. The Virtual DOM is an in-memory representation of the DOM tree. React JS tracks the state of each component. Only when the state of a component changes will the component re-render.

Components built using React JS are composed of the html elements we are all familiar with. You don't have to install any additional software on your machine. As such, it's very easy to get started building.

React Native is very similar to React JS in that it allows developers to build component-based UIs. However, React Native apps are not rendered in the browser. React Native Apps are actual apps that interact with a devices hardware.

Since React Native apps aren't rendered in the browser, React Native doesn't understand divs and form. Instead, you have to use components that the devices hardware understands.

Something else that confused me when I started working with React Native was how to view that applications. You have to install software on your machine that simulates an iPhone and /or an Android in order to view your application.

Essential React Native Components

Views

The View component is to React Native as the div element is to React JS. Whenever you start creating a screen, you're going to start with a View. A View should be used when there is a static amount of content and it can be displayed without the need to scroll.

The ScrollView component should be used when the amount of content is dynamic. For example, if you're iterating over data and displaying an element for each piece of data. If you're designing an app for an iPhone, the SafeAreaView component ensures everything inside your view is visible.

StyleSheet

In React Native, css is not a thing. Phones do not recognize style rules that govern how the browser should display web elements. Enter the StyleSheet component.

To use the StyleSheet component, import it as a named import from 'react-native.' Invoke StyleSheet.create and pass in an empty object. Next, add a key that describes the component you need to style (example: submitButton) and point that at an empty object. Add a 'style' property to the component and set it equal to the ..

In general, just change the css style name from kabob casing to camel casing and you'll be ready to style. I like to hit control and space (on a mac) to see possible values.

Text

Unlike React JS, you can't insert text just anywhere. It has to be wrapped in a Text component. Very simple to use.

The TextInput component maps to the input element in html. Two properties you're going to be using with the TextInput are onChangeText and value. To set up a controlled input, the onChangeText property should point to the function that changes the state of the component and the value property should point to the state value.

Buttons

Buttons are another pretty explanatory component. The onPress property points to a function that executes when the user clicks the button.

I think Pressable components are a little more interesting. They perform the same function as the Button but add flexibility. They have a onLongPress property that points to a function that is triggered only when the user holds the button for more than half a second.

Lists

When creating React JS apps, we frequently map over a list and render a component for each element. React native is no different. When working in React Native, there are two elements we use to dynamically display a list of data: FlatList and SectionList.

Use a SectionList when your list contains subsections (for example, a list of contacts separated into As, Bs, Cs, et cetera). Use a FlatList when your list does not contain subsections.

When using a FlatList, pass the array of items you'd like to display into the data property. Into the renderItem property, pass in a function that returns a component. Add a keyExtractor property. This property should be set to a function that returns a unique id (I like using uuid to ensure all my keys are unique).

When implementing a SectionList, use a sections prop instead of data prop. Also, add a renderSectionHeader property that points to a function that renders a header component. This can be as simple as a Text component. Check out the docs for examples cause these components are a little tricker than the rest to learn to use.

Images

Images are also very simple to use. Simply import Image as a named input from 'react-native'. Add the component to a View, and give it a source property. Source is spelled out in its entirety, not 'src.' Source can point at a URL or a require statement.

Combination Function using Javascript

jonhourcade — Sun, 20 Jun 2021 14:35:04 +0000

I was recently trying to solve a practice interview question that asked for every sub-array of an input array. My terrible solution involved a permutation O(n!) of the input array, an iteration over each permutation O(n), and a sort O(n^2). My computer couldn't handle an input array of more than eight or so elements. I was inspired by this awful function to learn how to finally write a combination function.

Combination functions are one of those functions that you won't use that often. However, when you do need to find all subsets, knowing how to write one will save you a lot of time (and time complexity), code, and frustration. It only takes about ten lines. Combination functions also come up during interviews so it's well worth your time learning this simple algorithm.

Combinations Versus Permutations

A permutation is every possible arrangement of an input. The length of every permutation is equal to the length of the input. An anagram is a great example. Permutations of the 'abc' include 'acb', 'bac', 'bca', 'cab', and 'cba.' Order does matter.

A combination can be constructed from an input. It's a subset of an input. All possible combinations of 'abc' include 'a', 'b', 'c', 'ab', 'ac', 'bc', and 'abc.' Order does not matter in in the eye of a combination: 'ab' and 'ba' are the same thing.

Combination Function Structure

This function will produce all combinations of an array. First, I'll define my function. I'll create a results array which will be returned at the end of the function. I used the keyword let instead of const because I'll reassign later in the function. I'll also set up a for loop to iterate over the array. I don't need the index so a for of loop will make the function a little cleaner.

Next, I'm going to set up my inner loop. I need to create a temporary array to store the results from the inner loop which will be added to the results array. I'm using the ES6 spread operator to set results equal to an array that contains all the elements in the results array and all the results in the temp array.

The hardest thing for me to understand when learning how to write this function was that the temp array must start with the current value of the outer loop. This is the key to making this function work. More on this later.

The last thing to do is push something into the temp array. In this example, I need to push an array that contains all the elements in result and the current element.

The following code snippet, in general, will solve most combination problems. Since this function is generating array combinations, I had to add a few things to make it work. These additions are specific to this problem and will vary from problem to problem.

What's Actually Happening

If I run this function and I pass in ['bears', 'beets', and 'battlestar galactica'], I get seven results. Prior to the first iteration of the inner loop, the state of the function is as follows:

results = []
temp = ['bears']

I iterate over results. There's nothing in results so after the first iteration, temp contains one element, 'bears.' I concatenate that to results (which is currently empty) so results now equals ['bears'].

Prior to the second iteration of the outer loop, the state of the function is as follows:

results = ['bears']
temp = ['beets']

The inner loop has one iteration (only one result in results). I push ['bears', 'beets'] onto temp (which is currently equal to ['beets']) and get [['beets'], ['bears', 'beets']]. I concatenate this with results and get [['bears'], ['beets'], ['bears', 'beets']].

Prior to the third iteration of the outer loop, the state of the function is as follows:

results = [['bears'], ['beets'], ['bears', 'beets']]
temp = ['battlestar galactica']

The last iteration will follow the same process and the end results will be an array that contains seven arrays.

It's a little confusing but if you write it out on paper it makes a lot of sense. It's a fun little algorithm that doesn't take too long to learn and is convenient to have in your back pocket.

Getting Started With Redis

jonhourcade — Mon, 14 Jun 2021 12:51:41 +0000

In-Memory Databases

In-memory databases store data, as the name implies, in random access memory instead of on a disk. As such, read and write operations are completed significantly quicker than those performed by traditional databases.

Available RAM is necessary for a highly-functioning server. Therefore, developers must be store data in-memory selectively. Else, the performance benefits associated with fast access and retrieval will be offset.

RAM is volatile. Every time the server powers down, all data stored in the in-memory database is lost. However, data stored in an in-memory database is not mission-critical and is typically set to expire after a set interval.

Traditional databases store data in relations in the case of SQL databases and collections in the case of NoSQL databases. Both kinds of databases employ schemas (a user has a username which is of type string and is required, a hash which is also of type string and is required, et cetera).

In-memory databases are data structure stores. There are no tables and no entities, there are only key-value pairs. In the Redis in-memory data structure store, keys point to strings, arrays, objects, and sets.

Use Cases

In-memory databases are very useful when storing data that does not need to persist. The first time I heard the term was when learning about sessions. Data associated with a session does not need to be saved after the user logs out or the session expires.

Servers can use in-memory databases to 'cache' query results from external APIs. This could be useful if it takes a long time to get results from the API, if there is a quota on the number of API calls a server may make, if it is expensive to format the returned data so the client can make use of it, et cetera.

Lastly, any application that requires real-time decision making can benefit from in-memory databases. Games are one example. Other, more significant, examples include Internet-of-Things enabled devices such as autonomous vehicles, smart cities, virtual reality, augmented reality, and many other technologies that we will see in our lifetimes.

Examples

I will now implement a very simple Redis database. The following implementation is written in Javascript using the Express web-server framework and the Node runtime environment. Redis can be implemented in almost every modern programming language. Check the official documentation out for a complete list.

After you've initialized node package manager, run the following command to install Express and Redis:

npm i express redis

Run the following command to start up your Redis database. Then, spin up your server using node or nodemon.

redis-server

Just like when using an ORM or ODM, you need to create a connection to the database before you can interact with it. Fortunately, Redis is incredibly simple to set up. The following implementation uses three lines. However, the first and second line could be combined.

After requiring the Redis package, invoke the createClient method on the default export. Capture the return value in a constant. Invoke the on method on the constant. The first argument is 'connect' and the second is a callback that runs when the connection is successful.

The following routes add and remove key-value pairs to and from the database.

To add a key-value pair to the database, call the set method on the client object (the object that is returned when you invoke create client on the default export).

The set method requires two arguments, the key and the value. The third argument is optional. It is a callback that runs when the insertion is complete. The callback can take up to two parameters, the first parameter is an error object and the second parameter is a success object.

The success object is the string 'OK'. I don't find that particularly useful so I opted only to pass one argument into the set method.

The get method only requires one argument, the key. I provided the optional callback with two parameters cause the second argument passed into the callback contains the data retrieved from the database.

The following routes add and remove arrays to the database.
The first argument passed into the rpush method is the key and every subsequent argument is an element in the array. I chose to spread them out using the spread operator.

The lrange method takes at least three arguments. The first is the key, the second is the starting index, and the third is the ending index. A starting index of 0 starts at the beginning of the array and an ending array of -1 retrieves the rest of the array. Just like with key-value pairs, a callback can be passed in that has access to the data returned by the query.

There are many more array methods. Some other useful methods include push, rpop (js equivalent of pop), lpush (js equivalent of shift), and lpop (js equivalent of unshift).

These routes add and retrieve objects from the database. The hmset method adds objets to the database and the hmgetall method retrieves objects from the database. The hget method takes a key and a property and returns the value associated with that property. The hset method sets the value associated with that property. The hdel method deletes a property.

The last two routes show how to remove a key-value pair from the database and add an expiration. Adding expirations is a method call you're going to be making quite a bit when you use Redis cause you're frequently going to use the database to store date you don't need to permanently.

They are both pretty explanatory. Expire takes a key and a number of seconds and delete takes a key.

Redis has a TON of methods you can use to interact with things stored in the database. I focused no the basic getters and setters to show how easy it is to implement into your projects. Here's a really good resource. If you want to perform an action, it's probably on this cheat cheat.

JS Bundling

jonhourcade — Sun, 09 May 2021 00:55:52 +0000

What is a module and why do we need them?

Modules are self-contained blocks of code that, when combined, build applications. They contain constants and functions and perform one task or one set of related tests (send requests, perform calculations, et cetera). They are often called scripts.

Modules are not supported by the browser. For years, web developers employed a simple workaround: script tag after script tag after script tag. While this is fine when you only need to load a few files, there are some serious drawbacks.

Every time the browser encounters a script tag, it has to stop what it's doing and make another HTTP request. Again, this is fine if there are only a few script tags but it increases load time.

Scripts add variables and functions to the global namespace or window. The more scripts you need to load the more polluted the global namespace becomes. It's easy to slip up and override window property. A bug such as this is very difficult to locate.

Since the scripts are dependent on each other, you have to load them in the correct order. If one script references a global property, the script that adds that property to the window must be loaded first.

Modules are great because they allow developers to write well-organized code that can be reused from project to project. If someone writes a really great module, they can distribute it to all developers. But what happens when our web app grows too big and script tags are no longer feasible?

What do module bundlers do and how do they work?

Module bundlers take all of your javascript files and from them create a single file. This monolithic file is then added to your index.html file as a script tag. Now, when the browser loads your page, it only has to make one additional HTTP request.

The bundling process is really interesting. It consists of two phases: dependency resolution and packing.

During dependency resolution, the bundler starts at the entry point to the app. It recursively scans every file that is used in the application looking out for the require function. If a file is not used in the application, it is not included in the final script. As the bundler scans the app, it constructs a directed graph modeling which scripts are dependent on other scripts.

If app.js requires dependency1.js and dependency2.js and dependency1.js requires dependency3.js, the graph would look like this:

During packing, the bundler traverses the resulting graph and creates an object containing scripts. Each key in the object maps to a script wrapped in a function. The function ensures each scripts namespace remains untouched. A new bundled script is created. The modules object will look something like this:

When you start the application, the interpreter begins execution at the entry point specified by the developer. When it reaches a require function, it grabs the function from the script object. It invokes the function. An exports object is created, properties are added to it, and it is returned. It is saved in a constant in the calling script. The calling file now has access to the exported values.

Most applications import the same script into multiple files. Bundlers use memoization to ensure the same script isn't run every time it it required. It stores the return object in cache after running for the first time. With every subsequent run, it simply grabs the object from the cache.

This implementation is specific to Webpack. I opted for this bundler because it's the one I've encountered most in my short web development journey. There are a ton of other options available. Some other options include Parcel and Rollup.

Really Great Sources
https://lihautan.com/what-is-module-bundler-and-how-does-it-work/
https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/
https://www.valentinog.com/blog/webpack/

Simplify your React project with useContext

jonhourcade — Tue, 04 May 2021 02:57:06 +0000

React projects can get out of hand quickly. You take a component and from it create sub-components. Each of those sub-components get refactored into sub-sub-components. Before you know it, your component tree is several levels deep. You have to pass your state values and functions all the way down the tree.

The resulting code is cluttered and hard to understand if you didn't write it. It's easy to make a mistake when you're passing your props between components. Furthermore, components are aware of state values and functions they are not making use of.

Fear not, there is a solution: the useContext hook! This React hook allows you to wrap your app in a global context. All child components of this context can access your global values and functions directly without the need for prop drilling.

This hook allows you to write clean code with uncluttered components. It allows you to group all your app-wide state values and functions together making it easier to debug. The best part is its very easy to implement. It uses a lot of boiler plate code so it doesn't slow down the development process.

The following example is incredibly simple. I've built contact list app. It displays the name, phone number, and email address of the current contact. There is a list of all contacts. The list contains the name and a button. When you click the button, the current contact is updated.

NOTE: the component tree for this app is so small there is no reason to use useContext. It's just for educational proposes.

Let's refactor using the useContext hook. First, we create a new file. I named mine context. Next, we need to create a context object. To do this, invoke React.createContext or import createCreate context and invoke createContext. Capture the return object in a variable. I called mine AppContext.

Then, create a component that you will wrap around your app. I called mine AppProvider. Pass {children} in as an argument. This component will return an .Provider component. Since I called my context AppContext, it will return an AppContext.Provider component. Wrap the AppContext.Provider component around {children}.

Add a value attribute to component. Inside the curly braces, open up another set of curly braces. This is where you will add your app-wide state values and functions.

Lastly, create a custom hook that will be called in each component. It will return the object inside the value attribute. I called mine useGlobalContext. The only naming rule is the name must start with the word use. To return the object containing the global properties, invoke React.useContext or useContext (don't forget to import if you choose the latter). Pass in the context object you created earlier in the file.

In your index.js file, import AppProvider component. Wrap your app in an AppProvide component.

Now, you can move all of your state values and functions out of your components and place them in the context file before your return statement. Add them to the object contained in the value attribute (make sure there are double curly braces, one to switch to javascript and one to open up an object).

In your component, you get access to these global properties by importing your custom hook. Invoke it inside the function and use object restructuring to grab the properties the component needs. Now just remove all the prop drilling from the application and it should function as intended. The refactored project follows.

Big shout out to John Smilga at Coding Addict (https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA). He taught me everything I know about React and Redux. Check out his YouTube channel and Udemy page for all his videos.

Mapping, Filtering, and Reducing Async Functions

jonhourcade — Sun, 25 Apr 2021 16:44:19 +0000

Map and filter do a lot of heavy lifting for javascript developers. They provide a syntactically-clean way to transform elements in arrays and remove items from lists based on the result of a boolean evaluation. Reduce can be used in place of any higher order function. It iterates over an array and returns one thing: an array, object, value, et cetera.

Web applications are aptly named. They are applications that are accessed through the browser. They don't use local storage because the user should be able to log in from any device and have access to their data. Since they rely on data stored on a distant server, they inevitably use asynchronous code to get and set that data.

What happens when you try to pass an asynchronous function into a higher order function? Async functions return promises. If you pass an async function into map or filter, you'll get back an array of resolved promises. This is not the behavior you're looking for. Luckily, there is a quick fix.

Enter the all method of the Promise class. All is a static method with one parameter: an array of promises. Only after all promises in the array have resolved will Promise.all resolve. All you have to do is wrap your higher order function in Promise.all. Put an await keyword in front of Promise.all and make sure the outer function is asynchronous, as well.

So when is this useful? This technique comes in handy when you need to map or filter an array and, inside the callback function, make another API call or get some data from a database.

In the following silly example, I'm using the Star Wars API to return a list of character objects. Each character object has a name property and a homeworld property. The name key points to the character name and the homeworld key points to the homeworld name.

To get the characters, I make an API call to the people endpoint. I then map over the characters. For every character, I make an API call to a specific planet endpoint in order to get the name of the planet. Without Promise.all, I get an array of resolved promises. By simply wrapping the map call in Promise.all, I get the desired results.

Reduce is a bit trickier. Here, I've created a function that takes the endpoint for a specific Star Wars movie (I chose Empire, I'm with Dante). The API call returns an object that contains an array of starship endpoints. I iterate over the array of starship endpoints and calculate the average hyperdrive rating. To do this, I have to make an API call to the starship endpoint.

First, you need to add the await keyword in front of the call to reduce. You need to wait for the last promise to resolve before proceeding. This means the outer function must be asynchronous.

Next, pass an async function into reduce. You can name the first parameter of the callback what you'd normally name it or if you want to be a little more overt, you can name it promise, prevProm, et cetera. The second argument passed into reduce must be a resolved promise. To achieve this, pass in an invocation of Promise.resolve. Into Promise.resolve, pass your accumulator. I chose zero cause I'm calculating a total;

Last, the first line or your callback should await the resolution of the accumulator. You can make a new variable or set it equal to itself. Proceed as usual and don't forget to return the accumulator.

The Case for Graphs

jonhourcade — Wed, 21 Apr 2021 23:57:05 +0000

A graph is a collection of vertices (nodes) and edges (the lines that connect them). They're unique in that they don't just model data, they model the relationship between objects. Furthermore, graphs do not have a single starting point. They can be traversed starting at any node.

Tree structures are also non-linear data structures. However, tree structures have one entry point (the root) and traversal moves in one direction, away from the root.

Undirected versus Directed

Undirected graphs model two-way relationships. Major highway systems can be modeled using an undirected graph. When driving from St. Louis, Missouri to New Orleans, Louisiana, you take 1-55 to 1-10. When driving from New Orleans to the St. Louis, you take I-10 to I-55. Every highway moves in both directions.

In this simple graph, the shortest path from A to E is the shortest path from E to A. The shortest path from the starting node to the ending node, when reversed, is the shortest path from the ending node to the starting node.

However, driving from your house to your friend's house in New Orleans is not as easy. You're probably going to have to take a few one way streets. The route from house A to house B, when reversed, will not transport you from house B to house A. This is how a directed graph works.

Much like you can take the same major street to and from work, directed graphs can have two-way relationships. However, edges are not bidirectional by default.

To get from A to E with the fewest number of stops, travel from A to B to D to E. You can't travel from E to D to B to A. You have to take a different route.

Weighted versus Unweighted

An unweighted graph only stores if a one- or two-way relationship exists between nodes. All the graphs we've looked at thus far are unweighted.

Adding data to the edge is where graphs get really interesting. I spend a lot of time window-shopping for Crocs on Amazon. Coincidentally, when Amazon sends me an email containing links to products I may like, Crocs always make the cut. Why is this?

Instead of just storing that a relationship exists, weighted graphs store data pertaining to that relationship. For example, the edge between my user node and the Crocs node contains a numerical field that is set to one the first time I visit the site. It is incremented with every additional visit.

When determining what products to include in email, Amazon can simply iterate over all the nodes with which I have a relationship and display products from those with the most visits.

In this graph we're just storing a weight. In the real world, the weight could represent the number of times a user looked at a profile or product or the distance in miles between cities.

Use Cases

Graphs are used all over the place. They are used in mapping applications. Mapping applications use weighted, directed graphs. They are weighted because, to provide you with the shortest route, the distance between intersections must be taken into account, as does speed limit, number of traffic lights, et cetera. They are directed because not every road is a two way street.

Social networks are made possible by graphs. They most likely use weighted, directed graphs as well to keep track of all the users a user follows. They also track the number of times a user visits another user. That's why when you start typing the name of a profile you've visited many times, it's the first on the list.

Objects and arrays can meet your needs much of the time. However, when you don't have a set entry point or you're concerned with the line that connects the node, turn no further than a graph.

Closure For Beginners

jonhourcade — Wed, 17 Mar 2021 19:52:29 +0000

During the "bootcamp" phase of the web-development program in which I am currently a student, we learned about closure. Coming from an object-oriented programming language, the concept was not new. Many of my fellow students, however, struggled not with how the feature works but why it is important. In this article I will use a java class to display two primary use cases.

The following class describes a bank account. There are four properties: username, password, balance, and isLoggedIn. IsLoggedIn is set to true when a user logs into their account and false after the user logs out. There are four methods: login, logout, getBalance, and withdraw. Login and logout set the isLoggedIn property. GetBalance returns the balance property and withdraw sets the balance property to the current value minus the number passed into the method.

The same code can be written in javascript:

An instantiation of a java class is similar to a javascript object. It contains properties (called instance variables) and methods that act upon those properties. Properties preceded by the reserved keyword private can only be directly accessed within the class. Client code has access to private properties via public methods.

In the example class, the only way to access the balance is to first pass the proper credentials into the login method. After logging in, a call to getBalance will return the balance of the account.

The following code throws a compile-time error because the client code is attempting to directly access the private instance variable balance.

The same thing happens when you attempt to directly access balance in the javascript object. An error is not thrown. However, const balance is undefined.

The following client code does not throw an error because balance is being accessed via the public method getBalance:

Here is the javascript version. As you can see, const balance is to 500 dollars.

Why is closure so important?

Closure protects sensitive data. Without it, client code has direct access to every property and method on the object. In this example, in order to access the balance of the account or make a withdraw, a correct username and password must be passed into the login method. In the real world, the user would be authenticated prior to logging in. Prior to getting or setting the balance, authorization code would ensure they have permission to do so.

Closure also ensures that client code follows the rules set forth in the class. In the example class, after successfully logging into the account, if the user tries to withdraw an amount greater than the balance of the account, an error is thrown. If client code had direct access to balance, it could change the value of balance to a negative number. In the constructor of the example class, instead of simply setting the password equal to the password provided, the constructor could make sure it met complexity requirements (capital letters, numbers, symbols, length, etc.) All clients would be forced to comply with these rules.