DEV Community: Larry Schwall

The Inner Workings of UX Design

Larry Schwall — Mon, 16 Nov 2020 22:55:30 +0000

Introduction

When it comes to websites, the first idea I think of is the way teams devise a plan to convey their idea to the world. How do you create a color palette? How do you get the user to instinctively go to a certain feature? What's easy on the eyes? All these question, plus more, play a role in creating a well thought-out, well developed website design.

MY THOUGHT PROCESS

User experience has always struck a special chord with me. I find myself always working out ways to better engineer or reinvent the wheel. From how the wheel is structured or even its mechanics, the wheel we have now seems....boring...

When trying to design the layout, or structure, for a web application I try to keep a few key points in my head:

What is the goal with the site?
What is my target audience?
How can I make this site accessible to all humans (disabled or not)?

These few questions have helped my numerous times when laying out colors, grids, etc.

Let's talk about color palettes

Colors are a huge deal when it comes to appearance. Although my favorite color is black (it's not just a phase mom...), not everything can have that color.

We need to choose colors that work off the complimentary color chart and that appeal to the desired audience.

Generally older generations prefer matte, simple colors while younger generations prefer bold and bright. These distinctions can really help you decided on how you want to present your site!

I rely on a few different sites to help with palettes:

https://colorhunt.co/ (palettes)
https://imagecolorpicker.com/en/ (getting hex codes off pictures)
https://uigradients.com/#Neuromancer (gradients)

Structure? I barely even knew 'er.

Layouts for a page, whether mobile app or browser app, really make the site. You can have all the fancy colors you want, but having a good structure....

With structure, you want to make something that promotes the features you want and steers the user smoothly. You want the website to feel natural and look natural...not forced in certain direction. Don't create harsh lines denoting different spaces, unless necessary (form boxes, editing areas, etc).

The goal of structure is to create your box areas but without the boxes. Think more of a "bubble-ized" sectioning of the page.

I like to use a site for their grid system (though the pack offers TONS MORE!).

Material Ui

Material-Ui has been a savior. The complexity begins when you start to nest columns inside of rows that are inside of columns. Then those columns are inside of larger row...see where I'm going with this?

Allowing yourself to break these components down by drawing the structure out will help you immensely!

Accessibility. So my mom can read it...

Accessibility plays a MAJOR role in UX design. Every person is made differently but deserves the same opportunity to experience the world around them.

In regards to tech, using features such as: talk to text, translation, larger text, monochromatic themes, etc...allow users to interact with your application.

I like to use this as a good guideline: Accessibility Guide.

All in all, the goal with making your site accessible to all people is to make life easier on your neighbor. Because remember kids, you don't make decisions just for yourself. That's bad practice. You want to make decisions that benefit you AND the rest of humanity. Selfishness isn't a good color on anyone :D

Is it a burrito or is it a wrap?

To sum it all up, user experience makes or breaks your application. Without the user, the app does not have a purpose. Design with the user in mind. Make it easy on them by choosing easy to look at colors that compliment each other. Use structure and grid systems to get your user where you want them. Finally, don't be selfish! Make an app accessible to ALL walks of life!

Vs Code Extensions that really help out!

Larry Schwall — Mon, 09 Nov 2020 13:29:14 +0000

The thing that makes a mechanic good at what they do are the tools in their toolbox. The same goes for coding. A software developer is only as good as his or her tools. Using the right ones can make for a more efficient and more elegant coding process.

The preferred coding IDE, integrated development environment, is VScode, Visual Studio code. The best part about VScode is the vast number of extensions offered.

I will share with you a few of my favorites.

Note all of these are offered on Visual Studios MarketPlace

1. REST Client

Extension

This extension allows you to send an HTTP request and see the response in the IDE itself. You no longer need to use post man ;).

This extension alone has over 1,000,000 installs. Its extremely popular. Since Ive begun using this extension, my time between developing and waiting on postman has drastically fell.

Sending a request is really easy with this extension. The code is easy to read and plenty of options to change. One line of code and you can send a GET request!

2. Beautify

Extension

Like looking at clean code? Then this is for you. Beautify allows you to get your code clean and on point. It supports JS, HTML, CSS, SASS, and JSON.

The entire extension is fully customizable: ident size, end with new line, etc. Its also possible to customize by coding language.

This one has over 5,000,000 downloads.

3. Bracket Pair Colorizer

Extension

Tired of losing which pairs of [] , {} , or ()? Bracket Pair Colorize solves this for you! It gives each pair a specific color based on indention and placement in the nesting.

The colors are fully customizable and vary in range.

I have been using this since day one and this extension has really effected my code the most!

4. Auto Rename Tag

Extension

This extension does one very simple thing...that will change your life!

The extension automatically changes paired up HTML5 tags. Change an opening tag? Closed one: done!

This has saved me an EXTREME amount of time when coding!

5. Material Themes

Extension

I always found myself hating the default Visual Code Themes. Bright white? AH MY EYES! DARK? AH MY EYES x2!

With Material Themes you can customize the way your IDE looks. They offer a wide range of colors, and premade palettes. In fact, most palettes are also customizable.

The one I have been using since the install has been Palenight

Also checkout their icon theme: I use that also... icons

6. Javascript (ES6) Code Snippets

Extension

This extension has dozen of snippets you can use to generate es6 code. A list of commands can be found here.

This extension has saved me so much time. Rather than taking the extra seconds to type something like

arr.forEach(() => {})

I could simply do

fre

7. ES7 React/Redux/GraphQL/React-Native snippets

Extension

Typing out entire React components? Thing of the past!

This extension works similarly to the one listed above, but for react!

Instead of doing something like this

import React from 'react';

const Example = () => {
  return (
  )
}
export default example;

you can simple type

racfe

This will insert the typed out version. It uses the file name as the functional component name.

However! This is just one of the features of this extension, it can do many other shorthand inserts: check them out here

Constructive Thinking and Coding

Larry Schwall — Fri, 06 Nov 2020 04:46:52 +0000

When it comes to coding, a lot of times we find ourselves negatively thinking about our learning process. Sometimes we may learn slow...or sometimes we may learn fast! But at the end of the day, we still question ourselves time and time again when it comes to the unknown. How do I positively absorb the information? How come I can't learn it as fast as this other person? Why am I dumb? Why can't I learn?

The truth is: you can. You can set your mind to achieve anything you want. You've learned something everyday since you have been born...even if that lesson or tid-bit of knowledge was small. YOU LEARNED!

So hopefully from this post, you learn where your weaknesses may lie when approaching a difficult situation or even difficult code.

In this blog, we are going to do a quick test. Then explain how to look at code a bit differently.

THE TEST

Disclaimer: This test and explanations were taken from: Constructive Thinking Test

How to take the test

Rate on a scale from 1 to 5. *
*1 definitely false -> 3 undecided -> 5 definitely true
| try to avoid using 3 |

#### QUESTIONS

When something unfortunate happens to me, it reminds me of all the other things wrong in my life, which adds to my unhappiness.

I think about how I will deal with threatening events ahead of time, but I don’t worry needlessly.

When I am faced with a difficult task, I think encouraging thoughts that help me to do my best.

If I were accepted at an important job interview, I would feel very good and think that I would always be able to get a good job.

I think there are many wrong ways, but only one right way, to do almost anything.

I have found that talking about successes that I am looking forward to can keep them from happening.

I believe if I think terrible thoughts about someone, it can affect that person’s well-being.

Explanations

Question 1 addresses a general form of destructive thinking. If you rate yourself a 5 on this item, it suggests that you may partially create your own misfortune, allowing yourself to be overly influenced by the occurrence of one disturbing event. In general, destructive thinking involves automatically coming up with interpretations of situations that prevent you from adapting and coping with them.

Question 2 explores emotional coping, or the ability to calm yourself down by helping yourself to feel better. If you’re strong in this area, you’ve figured out ways to avoid worrying and instead to focus on the positive. By seeing situations as challenging rather than fear-provoking, you’ll be able to conquer them more effectively. A 5 on this item means you're good at self-soothing your way to success.

Question 3 conveys behavioral coping, also called “problem-focused.” This item taps your ability to get yourself through the tough times by concentrating on what must be done, building your feelings of self-confidence to give you a boost, so a 5 is a positive score. To be strong in this area, you almost have to be able to launch those action-oriented thoughts automatically.

Question 4 demonstrates naïve optimism, the tendency to overgeneralize in a positive way from one good event to all related events in general. A 5 means that you tend to jump to conclusions too quickly, assuming that one positive outcome will guarantee all future outcomes to be positive, also.

Question 5 expresses categorical thinking, in which you view everything in black and white terms. One of the qualities of maturity is the ability to understand that what’s wrong and right (within bounds) may vary according to the situational context. Scoring 5 on this item means that you’ll have more difficulty adapting when the situation demands that you take a less extreme position.

Question 6 indicates personal superstitiousness, or the belief that your life is influenced by extraneous factors. If you scored a 5 on this item, it means that you cling to private superstitions that no one necessarily shares vs. the general superstitions (e.g. avoiding black cats) that few of us take seriously.

Question 7 emphasizes esoteric thinking, or the belief that you can magically influence outcomes through. For example, your thoughts reflect the quality of esoteric thinking. Here a 5 suggests that you hold illogical beliefs about cause and effect. If you’re high on this tendency, you may also believe in scientifically dubious phenomena, such as ghosts.

How does it relate to coding?

When it comes to coding, you may find yourself stressed or overwhelmed. You can begin --like I do over and over again-- contemplate whether or not you are meant to be a coder. BUT! You are.

In conclusion, using the test, you can spot your weaknesses in thinking and how you look at coding in general .

Make a React App with Webpack, Babel and Express

Larry Schwall — Tue, 27 Oct 2020 02:06:50 +0000

INTRODUCTION

Have you ever wanted to build your own Node.js application? Well look no further. This guide is going to help you!

THE ESSENTIALS

The first step in creating any app is to give it a home. In your terminal, you need to issue the following command:

 mkdir NAME_OF_APP

NOTE: NAME_OF_APP is the name of the application you are making! Have some fun with it!

After creating your home for your new app, go ahead and cd into your directory. Then make sure you have node and npm:

node -v
npm -v

(if you do not have these installed find them here: NPM)

Now lets initialize the project with:

npm init

npm init -y

Adding the "-y" flag will allow you to answer yes to all the options that init will prompt you with. If you don't know what you want, I suggest add the "-y" flag.

Once all of these steps are complete, you should see a file in your structure called: package.json. If you have this in your file structure, then you have done the steps right so far!

STEP ONE: Express

Lets make a server! In this tutorial we will be using something called Express.js. This a framework that is especially popular with creating RESTful APIs and routes.

To install express, type the following into your terminal:

npm install --save express

node_modules folder will then be visible in your file structure. Any other dependencies can be found in this folder.

To get your server running, we need to do a few things first.

Set up a folder called Server. Inside this folder create a file called index.js. Add the following to your file:


const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const mockResponse = {
  foo: 'bar',
  bar: 'foo'
};
app.get('/api', (req, res) => {
  res.send(mockResponse);
});
app.get('/', (req, res) => {
 res.status(200).send('Hello World from the server!');
});
app.listen(port, function () {
 console.log('App listening on port: ' + port);
});

This completes the basic express server set up. Lets take a quick look at the package.json to get our server to start.

We need to install nodemon to keep our server running in the meantime:

npm i -g nodemon

Add the following to your "scripts" in package.json:

"scripts": {
  "start": "nodemon server/index.js",
  "test": "echo \"Error: no test specified\""
}

Now issue this command in your terminal:

npm run start

You should see in your browser "Hello World from server!" at localhost:3000.

STEP TWO: Webpack

The first step to get webpack to work is to run the following code:

npm install --save-dev webpack webpack-cli

In package.json, add this to your script:

"scripts": {
  "start": "node server/index.js",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\""
}

The second part is to this is to create a folder in the root called src. Most of the code in this application will exist here. Inside of this folder, you can place an index.js file that remains empty.

Now run:

npm run build

This will create a dist folder where your minified project will live. You do not need to modify this file in anyway.

STEP THREE: Babel

In react, certain files end with the extension .jsx. Babel helps compile these type of files into .js.

To install babel run the following in the terminal:

npm install --save-dev @babel /core @babel /preset-env @babel /preset-react babel-loader

In the root of your file structure, add a file name .babelrc and add the following snippet:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

The next step to getting babel integrated is into your file structure is to create a webpack.config.js in the root of your file structure. This is because webpack needs to tell babel to compile the .jsx and .js files before being bundled.

Inside of the config file add this:

    module.exports = {
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                }
            ]
        }
    };

STEP THREE: React

To install react, run the following:

npm install --save react react-dom

In the folder /src, add an index.html. In this file you need to add:

    <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>React Boilerplate</title>
            </head>
            <body>
                <div id="app"></div>
            </body>
        </html>

In the folder /src, add an index.js. In this file you need to add:

    import React from 'react';
    import ReactDOM from 'react-dom';
    const Index = () => {
        return <div>WELCOME TO REACT APP!</div>;
    };
    ReactDOM.render(<Index />,document.getElementById('app'));

In order to get your React app and webpack to work together, we want to install something called: html-webpack-plugin.

To get this to work, install the following:

npm install --save-dev html-webpack-plugin

and paste this into webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html", 
  filename: "./index.html"
});
module.exports = {
  entry: "./src/index.js",
  output: { // NEW
    path: path.join(__dirname, 'dist'),
    filename: "[name].js"
  }, // NEW Ends
  plugins: [htmlPlugin],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

The last and final step to getting this React App to work properly, you need to connect react with express.

In your package.json add a dev under "scripts":

"scripts": {
  "start": "node server/index.js",
  "dev": "webpack --mode development && node server/index.js",
  "build": "webpack --mode production",
  "test": "echo \"Error: no test specified\" && exit 1"
}

The next thing to do is refactor our server/index.js:

const express = require('express');
const path = require('path'); // NEW

const app = express();
const port = process.env.PORT || 3000;
const DIST_DIR = path.join(__dirname, '../dist'); // NEW
const HTML_FILE = path.join(DIST_DIR, 'index.html'); // NEW
const mockResponse = {
  foo: 'bar',
  bar: 'foo'
};
app.use(express.static(DIST_DIR)); // NEW
app.get('/api', (req, res) => {
  res.send(mockResponse);
});
app.get('/', (req, res) => {
 res.sendFile(HTML_FILE); // EDIT
});
app.listen(port, function () {
 console.log('App listening on port: ' + port);
});

Now run:

npm run dev

You should see "WELCOME TO REACT APP! at localhost:3000!

**A couple things to note with this tutorial. **

This guide is meant to speed through the bare bones of getting your app up and running. It is up to you to learn the logic behind each of these steps.
Create a .gitignore file to ignore your bundled files. This will make life easier if working in a team for your application. Include the following and anything else you want to hide from a user: > /client/dist/ >.env

Conclusion

Thanks for checking this out. If this helped, leave a like or bookmark for a quick reference!

Hooks: the kind that don't hurt ya

Larry Schwall — Mon, 19 Oct 2020 13:24:18 +0000

Introduced in version 16.8, React hooks adds an advantage to stateless (functional) components. This advantage being the ability to manage state and use life-cycle events inside of these functional components. Adding hooks helps in the development of an app as a whole, as it reduces complexity and less codes. It solidifies a clean screen of code lines and a "easier to read" data flow.

Typically if we needed to write any form of state or lifecycle events we would have to switch from stateless/functional components to a class/stateful component. However, hooks allows us to avoid this completely.

Why use hooks?

React hooks allow the user to access state and life cycle events inside of stateless components, without actually having to bind or write the typical

this.state = {
example: exampleData, 
}

instead we can use something in our stateless components like this

const [example, setExample] = useState();

Hook Types

Below we will introduce some uses of state and lifecycle methods that can help you overall!

useState()

import React, { useState } from 'react'

const Example = () => {
    const [exampleSearch, setExampleSearch] = useState('');

    return (
        <div>
            <input onChange={(e) => {setExampleSearch(e.target.value)}} />
            </div>
    );
} ;
export default Example;

The most prominent and primary React hook method is useState. To use it, you must first import it like above. In the above lines of code, we can see how much easier it is to use this is a functional component. To construct a useState consists of declaring an array. The first portion is the new state you wish to fill with date. The second portion being the function fills the first with data. The useState is passed an argument inside of the ( ). This argument is the starting state: an empty string, empty array, empty object, etc.

The useState uses something called destructuring for arrays. The same theory is applied to objects when using props. We can use many useStates in the same fashion to help build a dynamic site or application.

useEffect()

import React, { useState, useEffect } from "react";
const Example = () => {
    const [dataExample, setDataExample] = useState([]);
    useEffect(() => {
        fetch("route or endpoint")
        .then(response => response.json())
        .then(data => DataExample(data));
    });
    return (
    <div>
        <ul>
            {data.map(el => (
            <li key={el.name}>{el.age},{el.desc},{el.projects}</li>
            ))}
        </ul>
    </div>
    );
}
export default Profile;

This hook is the perfect place to add something called listeners. If you have some sort of data fetching, posting, deleting, updating, etc, this is the place to do it. Think of useEffect() as your componentDidmount(){}, componentDidUpdate(){}, componentWillMount(){}. This is the first item to load on the page before any rendering. The effect hook adds the ability to grab the data from backend server code and allow the front end to see it on load. This is how hooks simplifies the idea of stateful components.

useRef()

Take a look at the example below

import React, { useRef } from "react";

const Fieldfocus = () => {

    const inputElement = useRef()

    const focusInput = () => {
        inputElement.current.focus()
        console.log('indirect!')
    }

    const focusing = () => {
        console.log('direct!')
    }

    return (
        <>
            <input onFocus ={focusing} ref={inputElement} type="text" />
            <button onClick={focusInput}>Add Focus</button>
        </>
    )
}
export default Fieldfocus;

The useRef() hook helps us to allow access directly to a DOM element. It lets us create mutable variable inside the stateless. This hook will only be made when the component fully mounted and will be preserved during the full lifecycle.

NOTE: Updating a reference used inside of the useRef should be done inside of the useEffect() as it is considered a side effect.

useCallback()

import React, { useState, useCallback } from 'react';

const Button = (props) => {
    return <button onClick={props.onClick}>name</button>
}

const Example = ( ) => {
    const [counter, setCounter] = useState(0);
    const [active, setActive] = useState(false);    

    const countHandler = useCallback(() => setCounter(counter + 1), [counter]);
    const showHandler = useCallback(()=> setActive(!active), [active]);

    return (
        <div>
            {active && (
                <div>
                    <h3> {counter}</h3>
                    <button onClick={countHandler} />
                </div>
            <Button onClick={showHandler} name={active ? "hide" : "show" />
        </div>
    )
}
export default Example;

This hook returns a memoized callback. It is also helpful when we have a child element that is frequently rerendering in our application. We can pass a callback to it. useCallBack() often is used with useEffect because it can prevent recreation of an element or action.

The only time the recreation happens with useCallback() is when one of the dependencies changes.

In Conclusion

As you can see, React hooks are very useful. The allow you to turn stateless components into stateful components with two lines of code. There are many more life cycle methods for hooks, the ones listed above are the most useful. Hopefully this guide has helped you to better understands hooks and their usefulness!

A.C.I.D. and The Database: An intro

Larry Schwall — Thu, 24 Sep 2020 04:06:30 +0000

A.C.I.D. refers to a compliance checklist that is followed to create a working and reliable database. In order to work with the database and transfer information, we use something called a transaction.

A transaction is a single instance of work which performs some actions or modifies content in a database. Using A.C.I.D. compliance, we can ensure that our databases are built with consistency.

A.C.I.D.

A- atomicity
C- consistency
I- isolation
D- durability

Atomicity

Atomicity defines itself using the 'All or nothing' rule. It is treated as an atomic unit - meaning all the operations are done or none. There is to be no state in the storage that is partially completed. It uses two operations:

Abort
Commit

Abort: if the transaction aborts at anytime, changes mades in the database are not visible.

Commit: if a transactions commits, the changes are visible.

This atomicity type system must assure atomicity in every instance, including - but not limited to - errors/crashes, and power failures.

Consistency

Consistency defines itself using constraints. This holds the databases integrity to a very high standard. It makes sure that the database is consistent before and after the transaction.

This compliance makes sure a transaction can bring the database from one valid state to another. It checks on the correctness of the database. The state of the database should not change before or after any instance of work.

Consistency refers to pre-conditions, post-conditions, and transformational-conditions on any instance of work.

Isolation

Isolation defines itself using separation tactics. This ensures that every transaction will never interfere with another transaction. It also ensures that multiple transactions can occur without losing consistency in the database. Isolation persists that any transaction occurring a certain way will not be visible to any other until it has completed successfully.

According to Jim gray there are various degrees of isolation:

0 deg... a transaction does not overwrite data updated by another user or process ("dirty data") of other transactions

1 deg... degree 0 plus a transaction does not commit any writes until it completes all its writes (until the end of transaction)

2 deg... degree 1 plus a transaction does not read dirty data from other transactions

3 deg... degree 2 plus other transactions do not dirty data read by a transaction before the transaction commits

Durability

Durability defines itself using storage techniques. This ensures that once a transactions is completed successfully, it will be stored onto a server/hard disk and will persist. Persist meaning that even if the system fails, the data will stay the same. The updates to the data are now permanent and stored in memory. The recovery system of databases makes sure that each transactions complies to this durability measurement.

Some things to consider in regards to failures:

Recovery to most recent successful commit after database failure
Recovery to most recent successful commit after failure of CPU
Recovery to most recent successful commit after failure of Hard disk
Recovery to most recent successful commit after failure of software ___ ### Summary

The A.C.I.D. compliances ensure that databases retain their sustainability. These checks also make sure the correctness and consistency of databases. Each transaction will act as a single entity, consistent each time they are executed, isolated from one another, be stored in disks that are checked for durability over time.

React: a simple Introduction

Larry Schwall — Mon, 07 Sep 2020 03:23:43 +0000

Tired of hearing about Angular and AngularJs?! Well do I have a solution for you! Introducing: React! React is a framework built around the much needed improvement from Angular.

Created in 2013 by Facebook, React was invented with the intention of building reusable, simple interfaces. React is also the main framework being implemented in software development companies. The advantage it takes towards Angular JS is that React is easier to pass properties around the files.

There are some main concepts to keep in mind when using this framework:

1. Components
2. State
3. Props
4. JSX

Components

React interfaces are composed of components that serve to do one thing: be rendered to the DOM (Document Object Model). These components are written in HTML then added to the DOM. Components tend to be transcribed in two forms: class or functional.

class TestObject extends React.Component{
    render(){
        return <h1>Hello!</h1>
    }
}

The largest difference in the two forms is that class can hold something called "state." State can be thought of as a parameter. This allows components to be dynamic. Functional components cannot hold state.

function testObject() {
    return <h1> Hello! </h1>
}

State

State refers to an object to its class component. It can be loaded by a user or a API key. State is passed around through "props." Think of this framework as a hierarchy. A component must be high on the totem pole in order to skip the extra steps to pass its props.

State can be only passed down, NEVER passed lateral. Whenever a state is changed, the component and its kids will changed also.

class TestObject extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          isTrue: false,
       };
    }
 }

Props

Props are passed between components in order to create a dynamic. Props are the objects give to each component by its elder. Using props, we can ender dynamic & non-stagnant data.

The reason for a lot of children & parents is the ability to attack the entire problem in small batches. We want to use small components. If we uses one large component, the readability would be atrocious. Especially if we wanted to render a certain portion with certain props. We would need to re-render the ENTIRE component for just that small portion!

const customerData = props => {
    return (
       <div>
          <p>Name: {props.fullName}</p>
          <p>age: {props.age}</p>
          <p>email: {props.email}</p>
       </div>
    );
 };

JSX

JSX is considered a wing of JavaScript. JSX tells us what the user interface will resemble. This gives the control to create user interfaces and logic within the framework of React. When we implement this, we can embed Javascript thinking straight into our UI.

const testName = 'Larry';
const testObj = {
    height: `5'10"`,
    age: '25',
    sign: 'scorpio'
}
const element = <h1>My name is {name} and my stats: {testObj}</h1>;

Conclusion

To summarize, React is an incredibly useful framework. It allows us to create components in small doses to conquer a large problem. Using props from an "passed-down" type hierarchy, we are able to allow different type attributes to interweave from one file to another. React, all-in-all, forms a seamless way to interconnect properties!

Hopefully this small blog has helped you to better understand react and its workings. Stay tuned to the blog regarding the updated: React Hooks.

Event Loops: an Introduction

Larry Schwall — Mon, 31 Aug 2020 15:08:24 +0000

Event Loops

Event Loops are known as the cheat codes to Javascript's "multithreading" illusion. Event loops play a big part in the asynchronous workings. Javascript executes all code as a single thread (meaning that one thing happens at a time); however, utilizing certain data structures, you can give the faux appearance of multithreading (multiple things happening at one time).

With this idea in our heads now, let's take a look at some theories that go hand and hand with event loops

Call Stack

This is responsible for keeping the track of all operations that need to be performed. Whenever the particular snippet of code is ran, it gets popped from the stack. This stack is continuously checked to see if another line of code needs to be executed. Once this is empty, the event loop will look towards the event queue to see if there are code executions waiting to be done.

The Event Queue

The Event Queue has the role of holding code executions that are waiting to be ran. This uses the data structure call queue. The queue structure allows the future code to executed in the correct order. Think of this as the waiting room for any and all code that is below the current line being executed

setTimeout()

SetTimeout is used to have a function run after a certain amount of time at that interval (measured in MS). When this is processed in the call stack, the function is sent off to the server (or API) that will wait until the defined interval is met. After the interval, the API will send it back into the queue for processing.

By doing this setTimeout, when it is added to the queue, we create a system that is running async operations. The browser API is acting as individual threads.

setInterval()

This function is very similar to setTimeout(); however, setInterval() keeps triggering the function after every given interval, while setTimeout() will only trigger once.

setInterval() should be used if you want to have a continuous call of a certain expression or function. If you do not use setInterval(), you will need to need to call your setTimeout() at the end of every code block that you want to run.

Summary

Overall, the event loop is incredibly important to Javascript. The loop keeps track of the entire process. It constantly checks the call stack for emptiness. If it happens to be empty, new code to be run is added from the queue. If it is not empty, then the current code snippet is run from the stack.

Understanding how the event loop looks at code information will allow you to really set up your functions in the proper order. With this knowledge, you will be able to write functional code that isn't run out of order. Finally, the event loop allows us to make use of multiple single threaded processes creating a faster response time overall.

Conclusion

To close up, looking at event loops may seem scary as a whole. However, once event loops are broken down, they begin to make a clearer picture. Hopefully, this short blog helped you to better understand event loops.

Javascript Instantiation Patterns: An Introduction

Larry Schwall — Mon, 24 Aug 2020 03:01:57 +0000

Instantiation Patterns can be found throughout Javascript. Each pattern stems from a basic template then is configured as needed. Even if you choose the same instantiation as another developer, it may be applied completely differently.

Although individually custom, instantiation patterns aim towards the same goal: to create a function with certain properties and methods that can be called when needed.

The Patterns

Functional Instantiation (F.I.)
Functional Shared Instantiation (F.S.)
Prototypal Instantiation (P.T.)
Pseudoclassical Instantiation (P.S.C.)
Es6 Instantiation (E.6.)

Functional Instantiation (F.I.)

This is the very beginner level of instantiation patterns. When you first begin coding, you will be using this format more than anything!

Functional Instantiation offers an easy-to-implement and easy-to-decipher pattern. This pattern also allows for the methods and properties to stay local to their scope. Although, F.I. does have some downfalls.

One major issue with this pattern, specifically, is duplication. This stems from having to create separate objects (even if named the same) with their own properties. Remember, as stated above, F.I. keeps everything locally scoped. This does not allow for other objects to call on that specific method.

Even though duplication is an issue with Functional Instantiation, this pattern is still very good for beginners: it allows the beginner coder to really hone the skill of creating objects with their own properties and methods.

Let's have a look below at this pattern's format.

const name = function(firstName, lastName){
    let obj = {};
    obj.firstName = firstName;
    obj.lastName = lastName;

    obj.speak = function(){
        //insert code
    }

    obj.takeIn = function(){
        //insert code here
    }

    return obj;
}

//function calls
const jon = name('jon','doe'); 
jon.speak();

Functional Shared Instantiation (F.S.)

Functional Shared Instantiation was created in order to combat the duplication of properties and methods found in F.I.

Like F.I., we start by building a function and define certain properties within that function. However, to store our methods/properties, we need to create a separate object as a whole. You can think of this second object as the container for the methods relating to the first. Every object created using this pattern will have reference to the same methods without causing a duplication! This results in better memory efficiency!

However, much like its predecessor, there is a downfall with this pattern also. Once the object is instantiated, the relationship is made to the properties and methods; thus, if you change methods and create new objects, the two objects refer to different things.

Let's take a look!

const name = function(firstName, lastName){
    let obj = {};
    obj.firstName = firstName;
    obj.lastName = lastName;

    _.extend(obj, objMethods)
    return obj;
}

const objMethods = {

    speak(){
        //insert code here
    },
    takeIn(){
        //insert code here
    }
}

//function calls
const jon = name('jon','doe'); 
jon.speak();

Prototypal Instantiation Pattern (P.T.)

Prototypal Instantiation uses the prototype chain to create objects. Methods and properties are then attached to the object's prototype by using:

Object.create(); //this creates a new object

Start by creating a function. Inside of this new function, a new object for your methods needs to be created using the method shown above. This new object will be your container for all the methods.

P.T. does not create duplicates in memory and each method is available to all the other objects. Though this pattern is a bit more complex to achieve.

const name = function(firstName, lastName){
    let obj = Object.create(objMethods);
    obj.firstName = firstName;
    obj.lastName = lastName;

    _.extend(obj, objMethods)
    return obj;
}

const objMethods = {

    speak(){
        //insert code here
    },
    takeIn(){
        //insert code here
    }
}

//function calls
const jon = name('jon','doe'); 
jon.speak();

Pseudoclassical Instantiation Pattern (P.S.C.)

The Pseudoclassical Instantiation pattern is intended to correct the complexity needed to create objects as seen in prototypal instantiation pattern.

The best part about Pseudoclassical Instantiation comes down to two ideas: the new constructor and the keyword this. With the new constructor, we are able to accomplish the same theory we developed in P.T. pattern. As new is used, it achieves the creation of an object and its return all within one line! This saves space within our files and eases the readability of our code. In regards to the this keyword, we can use it to refer to the new object we are creating. Which, again, saves space and makes our code more efficient in computation.

To start, a new function is made and properties are added using the this keyword. Methods are then assigned to the overall object with the syntax

objectName.prototype.method

In order to have our object created, we must use the new constructor that is assigned to a variable to call each time we need the function!

Although pseudoclassical instantiation is a bit complex to code (as seen below), it implements built in functionality of Javascript. This produces for one of the most optimized methods of object creation.

const Name = function(firstName, lastName){
    this.obj = {};
    this.firsName = firstName
    this.lastName = lastName;
}

Name.prototype.speak = function(){
    //insert code here
}

Name.prototype.takeIn = function(){
    //insert code here
}

//function calls
const jon = new Name('jon','doe'); 
jon.speak();

ES6 Instantiation Pattern (E.6.)

The ES6 instantiation makes use of the class keyword. Using the class keyword permits for a different form of creating objects. Inside the class, a constructor function would be nested; therefore, the class scope is formed.

ES6 Instantiation generates an simpler implementation of methods and a simpler memory management. However, this pattern does create more complexity in its syntax and may run into some issues regarding older versions of browsers/operating systems.


class Name{
    constructor(firstName){
        this.speak = firstName;
        this.takeIn = 'larry' 
    }

    speak(){
        return this.name
    }

    takeIn(){
        return this.takeIn
    }
}

const jon = new Name('jon')

In Conclusion

Instantiation patterns are found throughout Javascript. Using these can improve your code with legibility, efficiency, and memory management. Overall, instantiation patterns may be difficult to decipher at first, but after some practice you to can understand them fully!