DEV Community: philip-haines

Dynamic Dispatch and Dispatch Tables

philip-haines — Fri, 14 May 2021 16:12:20 +0000

Starting with the Computer Science Theory

The first time I heard about dynamic dispatch I was shocked, confused, intrigued, and excited all at the same time. It was an enlightening moment. I barely grasped the concept at the time, but through some practice and research came to the understanding that dynamic dispatch, and dispatch tables are truly the way.

When we talk about dynamic dispatch there are really two types of languages, there are static languages (C++, Java), and there are dynamic languages (JavaScript, Ruby, Python). The difference between a static language and a dynamic language is what happens at runtime.

At its core dynamic dispatch is when a program determines what chunk of code is going to be run when you send it a message.

A great example of this is console.log(). Have you ever actually looked at console.log() and broken down whats happening? It's fascinating. Console is a global object in JavaScript, and log is method on object. The "log" part of console.log() is the message. When you use a console.log() you are sending the message “log” to the console object with some data attached to it, console then looks up the method "log" and runs it showing you the argument that you passed in when calling console.log().

The way console.log() works could not work in a static language as at runtime a static language needs to know exactly what is going to happen in every function, and where all of that code lives. The fact that the message of log is being passed into the console object during runtime is what makes JavaScript a dynamic language.

So, let's look at how this works in practice. In Ruby, inheritance and prototype chains are common occurrences. A prototype chain is a chain of inheritance where attributes are passed from once object model down to the other.

Let's say we have a model for a Dog. The Dog class inherits from a Mammal class, the Mammal class inherits from the Animals class, and the Animal class inherits from the Object. The prototype chain would look something like this:

Dog < Mammal < Animal < Object

Our Dog model has a method to make the Dog bark, and that method can be called with Dob.bark. Since Dog inherits from Mammal and so forth, Dog also has access to the methods belonging to Mammal, Animal, and Object. If we want out Dog to breath(which I think we do!) we can all Dog.breath. However, the breath method doesn't belong to Dog, it belongs to Animal, and this is where the beauty of dynamic dispatch kicks in.

At runtime our program evaluates Dog.breath and looks for a method of "breath" in the Dog class, when it cannot find it there, it looks for the method in Mammal, when it cannot find it there the program continues up the prototype chain until it finds the method and runs the associated task. This would simply not work in a static language, and would cause some potential errors.

Ok, ok, enough with the theory side of things, let's look at some of the cool stuff we can do with our new knowledge.

Let's pretend that we are making a game, and in our game our user can hit arrow keys, and the character turn the direction of the arrow keys. In order to know what to do when a key is pressed, there needs to be some logic programmed into the computer. To start let's make some methods that will handle a key response. For the purposes of this article, these methods will print the string for the corresponding key.

So now that we have these functions, lets implement some conditional logic to call the corresponding function with a simple if/else statement.

Now, theres nothing wrong with handling the logic this way. It satisfies rule number one "Make it Work", but it's clunky. If we had more conditionals who knows how long this if/else statement could get, and it's not very dynamic. If we want to add a new conditional we need to find where the statement is stored and then write in a new else if line. There are better ways. One would be to use a switch statement.

The switch statement was made for this! It shines here, just look at all of the beautiful logic thats happening. This works, and it works well, but it could be better. with all of the break keywords in there case statements are difficult to reach through, and we still haven't solved how to add a new condition on the fly... Enter the hero of our story, the dispatch table.

A dispatch table is just an object with key-value pairs. The keys are the cases from the switch statement, and the values are the functions which print our string directions. When setting up a dispatch table this way, it's important to note that the functions are not being invoked in the dispatch table and are just giving the instruction of the function to the object. By doing this, it makes importing the dispatch table much easier, as you know exactly where all of your functions are running.

So, how do we trigger our functions? In a real fame you would have a loop that listens for a key press, and inside of that loop there would be a function to trigger the dispatch table like so:

All that is happening here is that at the key of the user input, just like any other object, the dispatch table will look at the value, evaluate it, and then we invoke the function that it finds based on the key. It really is that simple!

One last example to truly show off how dynamic a dispatch table can be would be a calculator. In this fake calculator there are going to be methods for math operations and will be set up in a dynamic dispatch table like so:

function add(x, y) {return x + y;}
function subtract(x, y) {return x - y;}
function multiply(x, y) {return x * y;}
function divide(x, y) {return x / y;}

let dispatch = {
    "+": add,
    "-": subtract,
    "*": multiply,
    "/": divide,
}; 

let x = 5;
let y = 4;
let operator = "+";

dispatch[operator](x, y);

Once the data is collected from user input, all that needs to be done is to look up the key of operator in the dispatch table, and run the correct function. If a programmer wanted to come in later and expand the functionality of the calculator app they could do so wherever they like by simply setting a new key value pair in the dispatch object. An example would be a function that allows users to use exponents.

function exponent(x, y) {
    return Math.pow(x, y);
}

dispatch["^"] = exponent;

In a static language, that would not be possible, because at runtime, the dispatch table is locked with the key value pairs that were programmed into it, and new key value pairs cannot be added on the fly.

Getting Started with TypeScript

philip-haines — Thu, 13 May 2021 19:16:43 +0000

Getting started with TypeScript can seem scary if you look at it as an entirely new language, but in reality, TypeScript is just a layer on top of JavaScript. All of your JavaScript skills and knowledge will only help in your TypeScript journey. Let's get another thing straight, no one is expecting you to know ever piece of syntactical sugar in TypeScript, theres much better use of the finite amount of memory that we have. Just like anything else, if you can understand the concepts enough to ask google a coherent question, you're in great shape.

Getting Started

So, how do you get started? Just like with many things in JavaScript, we need to download TypeScript using NPM. If you're unfamiliar with NPM you can download it here. Once you have NPM open up a terminal and install TypeScript globally with npm install -g typescript. Once that installs, thats it! TypeScript has been installed and is ready to use... BUT we still have a few things to talk about before we can get our fingers on the keys.

So earlier I mentioned that TypeScript is a layer on top of JavaScript, in technical terms this is called a superset. A superset is a programming language that contains all of the features of a given language and adds a layer of functionality on top of it. With TypeScript the extra functionality is the ability to strongly type our code, and catch possible type errors on compile. This is great for working with larger files and for cutting down on debugging time, especially when working in larger teams.

Having the Right Setup

Having the right set up is always the first step to success with anything, and TypeScript is no different. The first thing to do is to make sure your IDE is set up for TypeScript. If you're using VS code, good news, TypeScript Support is already baked in. The next thing to do is create a tsconfig.json file. The tsconfig file allows you to customize project settings, and acts like an object with key/value pairs. You can easily create a tsconfig by running tsc --init in your terminal. This file will have some default options, and some roll your own options that you can add into your project as you see fit.

Since the internet runs on JavaScript and TypeScript is not technically JaveScript we're going to need to talk about how to transpile the TypeScript into JavaScript at run time. This is done by running the tsc command in your terminal. The tsc command looks through your root directory for the tsconfig.json file, and then turn that code into JavaScript with you having to do anything else.

Time to Get Dirty

Ok you've made it through the boring stuff, let's start programming. PSYCH! We need to talk about understanding the seven actual types of data that JavaScript has:

Undefined
Null
Boolean
Number
Object
String
Symbol

These seven types are given to us by JavaScript and are dynamic types. This means that data types are checked at runtime, and will not error out your program before you actually try to run your program. TypeScript makes these dynamic types static, so that at compile time your IDE is checking the types of your data to prevent undefined or null values being passed where they shouldn't be. This can save hours and hours of debugging and trying to find single places where they data type may be incorrect.

Ok, now we will really get into coding...

How to Type Your Data

For each different variable that you have in your application you need to type the variable. Its super easy to do this let's check it out starting with some of the easier types.

const letsRock : boolean = true

Breaking this down is pretty simple. We declare a new variable letsRock and then set it to equal true (because who doesn't like rocking). The big difference here is that I declared letsRock as a boolean type. If the value of letsRock ever equals anything except a boolean we are going to get an error.

let myAge : number = 0
let myName : string = "Phil"

the same pattern is applied to strings and numbers. You declare the variable, declare the type and then set the initial value. Thats three out of seven types down, were cooking with gas now. Let's check out some of the other types and how we can type them. This is where things get fun .

let students: string[] = ['Matt', 'David', 'Jake']

On the surface, this looks really scary, but take a step back and checkout whats happening. There is a variable of students being declared, and students is going to be an array. Arrays are a type that is given to us with JavaScript, so in TypeScript we know that we can set variables to be arrays. The cool part is that we can define the type thats INSIDE of the array! Think about this, by declaring the type that is going to be inside of an array, that could save debugging time when an error is thrown because a piece of data doesn't match the declared data type. Are you starting to catch on to what is happening here? The alternative syntax to the above code would look like this

let students: Arrray<string> = ['Matt', 'David', 'Jake']

Continuing the Journey

This should be enough to get you started with TypeScript and for you to know just enough to be dangerous. The world of TypeScript is much deeper than what we covered in this blog post, so be sure to be on the lookout for part two of this blog post.

Until next time,
Happy coding, and remember to keep that GitHub green.

Getting started with Vue.js

philip-haines — Tue, 04 May 2021 17:24:41 +0000

So, what is Vue.js?

Vue.js is a front-end framework, and design to make developing Single Page Applications (SPAs) a breeze. After working at Google, Evan You created Vue.js in 2014. You's main objective was to take all of the good parts of the Angular framework and make a more lightweight framework, which is the main draw of Vue.js.

Vue.js is one of the "big three" front-end frameworks, the other two being Angular and React. Aside from syntax the largest differences between Vue.js, React, and Angular is the level of rigidity. Angular is a very opinionated front-end framework, meaning there is generally only one right way to achieve a desired effect, while react is on the opposite side of the spectrum and allows devs to achieve the same effect in a multitude of ways. Vue.js sits right in the middle of the two of them, which, in my opinon, is why its a great first framework to learn.

Getting Started

The first thing that you will need to do is to get Vue.js set up. There are two different ways to do this:

Using a CDN and linking Vue.js in an HTML file
Using the Vue.js CLI tools and installing Vue.js on your machine

Today we are going to be using the Vue.js CLI tools. The first thing you will need to do is make sure that you have node installed. You can check if you have node installed by running $node -v in your terminal. If you do not have Node installed you will need to run $npm install -g npm. Next, run $ npm install vue to install the latest version of Vue.js onto your computer.

Now that Vue.js is installed, make a file where your new app will live, cd into that file and run $vue create name-of-project. This will initiate an options list to configure how Vue CLI scaffolds your application. You can either choose a Vue 2 default that uses Vue version 2.x, a Vue 3 default that uses Vue version 3.x, or manually select features. Manually selecting features allows you to add things like Vuex or Vue Router. There are also other options like end to end testing, Progressive Web App (PWA) support, and CSS Pre-processors allowing you to style with SASS.

You can use the up and down arrows to select which option you would like to toggle and then use the space bar to toggle the option. Continue to select configurations, and make sure to pay attention to which version of Vue.js you select to use in your project as all features are not supported by all versions. Once you select all of the required options your Vue.js app is ready to rock!

Test it out by running $npm run serve in your terminal!

Setting up a Vue.js template

For those coming from React the first, and largest, difference you will see in Vue.js is how components and views are set up. In react you will see that all of the JavaScript and HTML are written together in a syntax called JSX, where as in Vue.js, there is a little bit more of a separation of concerns.

There are three main parts to a Vue.js component:

Template
Script
Style

Template

The template section is where all of the HTML goes for the component or view that is being developed. HTML tags are able to accept dynamic data by using the {{Mustache syntax}}. Adding double curly braces inside fo an HTML element enables the ability to add data using JavaScript syntax (data.pieceOfData). Furthermore, the Mustache syntax also allows you to write Vanilla JavaScript between the double curly braces... pretty cool, right?

Style

The style tag is fairly basic but does have the ability to be scoped or global. By adding scoped to the style tag, all of the styles will be local to ONLY the component or view that is currently being worked on. If global styles are required, it's recommended to write them in the App.vue file.

Script

This is where all of the real magic happens. Inside of the script tag lives all of the methods, props, state, and data for a view or component.

Data and Computed

The data option in the script tag is a function that returns static data. This is where data that does not have stateful behavior, and does not need to be reactive to the users behavior can be declared. The data function will always need to return an object of the static data.

<script>
  export default {
   data: {
      firstName: 'Foo',
      lastName: 'Bar',
    }
  }
</script>

The computed option allows for data to be manipulated and then return in the template. For the above data, if we needed an element to have read out a fullName, you could simple created a function in the computed section that computes the full name for you, and returns it.

<template>
  <div id="demo">{{fullName}}</div>
</template>

<script>
  export default {
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  }
</script>

This fullName function takes our static data of firstName and lastName and concatenates them into a single fullName string that is accessible to the entire component. Computed functions can also be used to update and return data that is in state.

Methods

Simply put, methods are functions that are associated with a particular view or component. These methods can do all sorts of things including fetch and setting data. Here is a simple example with a method called handleClick that will trigger an alert with the string 'learning Vue.js':

<template>
  <a @click="handleClick">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick: function() {
      alert('learning Vue.js')
    }
  }
}
</script>

Methods come in handy when paired with v-on directives designed to handle events on elements. When this link is clicked, it will invoke the handleClick method that is defined in the script tag, and the alert will fire.

Props and State

In the props option, this is where you can declare values that will be passed to children components. Props act as custom attributes, declared on a component in the Script tag. To declare props you simple set up a key-value pair within your export default.

State is the current status of the application, and thus how it effects data. Many things can change the state of a piece of data from actions and events, to user verification. State and state management are extremely important topics when discussing SPAs and deserves its own deep dive.

Putting it All Together

So what does it all look like when it comes together? Well, now that you're all set up, it's time to explore. Vue.js is a great way to get comfortable with the main concepts surrounding SPAs, and will hold your hand throughout the process. Make sure to have the docs handy, and leave a comment with a link to your first Vue.js project!

Happy Programming!

Beautify your GitHub!

philip-haines — Mon, 03 May 2021 19:19:13 +0000

If you have ever visited someones GitHub and noticed that they have some fancy pictures, cool emojis, and stats on their homepage you may have wondered how to make a page like that on your own. If this sounds like you, keep reading, because in this blog post I'm going to tell you exactly how to make your GitHub README sparkle!

How to Make Your Own

(Its easier than you think!)

Creating a GitHub profile README is super simple super simple but a little hard to find by yourself. Once you are signed into GitHub, initialize a new repository by going to https://github.com/new. Name your new repository the name of your GitHub account (hint: this can be found by hovering over your profile icon in the top right of the screen), and click "Create Repository". How easy was that?

For a shortcut checkoff "Add a README file" when creating your repository. The README has to be there in order for your new fancy profile to be fancy. Speaking of which...

Make It Stand Out

Now that you have your GitHub README created, theres a few things you need to know about making it pretty. GitHub README uses something called Markdown language. You can use Markdown to add images, link, gifs, headers, and so much more. No need to memories Markdown, just use the cheat sheet

One thing that I really like on a GitHub profile page is a header. It's a nice personal touch, and really easy to make with a program like PhotoShop, Sketch, or even Google Docs. Or for something even easier check out Canva Headers.

Your header could have your name, photo, job title, location, and a plethora of other things. Here are a few examples that I really like:

https://github.com/jlengstorf
https://github.com/bdougie
https://github.com/sindresorhus

It's super simple to add pictures into your GitHub README. If you have the file saved locally you can just drag and drop it into your Markup and its imported. If you want to add a link as a photo you can use the <img /> tag and add a src with a path to the photo you want to add. Remember, the <img /> is a self closing tag, you can still have bugs in Markdown so be sure to close that tag!

Tell People About Yourself

People are interested in other people, tell your story. A couple of lines of text about your dev philosophy could go a long way to showing a potential employer or collaborator who you are! Even better, give a list of things you're currently working on, excited to learn about, and link to a few of your projects. Looking for collaborators on your current projects is one of the best ways to network.

This is another great opportunity to also slip in an interesting fact about yourself. Make sure to keep your bullet points short and to the point. Add emojis for a little fun, who doesn't like emojis?

Highlighting Your Skills

Displaying your skills right on your GitHub homepage is highly recommended. You worked hard for those skills, show them off! When potential employers or collaborators land on your GitHub page this small future will give them a quick understanding of the languages that you can work in.

There are a couple of ways of doing this, you can have logos of all of the languages, tools, and technologies that you're adept in.

The easiest way to find these icons is to use google images and then click on "tools", then "color", then "transparent". This should return a large number of .png images that you can easily resize in your Markdown.
<img height="20"src="https://img.icons8.com/color/452/graphql.png">

Some other awesome places to look for logos or icons are https://simpleicons.org/ and if you're looking for something a little fancier, check out https://shields.io.

Show Off Your Work

Another really good way to boast your skills is by showcasing your repos. The first way to do this is by pinning your top repos directly to your home page. While you don't technically do this in the README, it's still super important to make sure that your top repositories are actually your top repos.

To change your pinned repositories, go to your GitHub homepage github.com/your-user-name and scroll to your "pinned" section. On the top right of your currently pinned repositories, there is some clickable text that says "Customize pinned". Click that and a modal with a list of all of your work will pop up. Check off the work you want to show off, you can pin up to six repos on your home page.

If you want to take it to the next level, look no further than GitHub README Stats. GitHub README Stats is a tool that allows you display stats on your GitHub homepage in nicely formatted cards. You can pass in many information options such as top_langs, which will give you a card for your README that displays your top languages. There are many other arguments that you can pass into the stats URL and the docs are super helpful.

Putting it All Together

Now that you're a Markdown master, and a champion of the GitHub homepage, go ahead and push your README to the master branch and brag about your beautiful new GitHub on LinkedIn! Remember, you can always go back and edit your README at any point so make sure to market test a few different setups.

Happy coding, and remember to keep that GitHub green!

Setting Up for Success: A Guide to ERD's

philip-haines — Mon, 05 Apr 2021 21:02:36 +0000

So, what is an ERD? To start, it stands for Entity Relationship Diagram, and it isn't actual programming. An ERD is the first step in setting yourself up for success in Object Oriented Programming (oop). As I began dipping my feet into the oop waters it quickly became clear that having a well organized plan of attack would set me up for success, this is where ERDs came in.

In short, an ERD is a hand drawn diagram that represent relationships between objects in your program. Think of an ERD as an electrician's blueprint of how everything is connected under the hood. Your ERD blueprint will do the same thing. Having the visualization of all of the methods needed for each class you create, and other data needed at initialization will save many head aches later down the road.

ERD's are also important in helping other developers who may not be familiar with your project have an understand of relationships in your database. The best thing for readability is to stick to convention.

These are the notations that you should use in your ERD:

So how does this all look when it's put together?

If we look at this diagram you can see that we have two classes, "User" and "Food". A User can eat many Food objects, and Food objects can be eaten by many User objects. These classes are joined by a "Meal" joiner object, a User eats many Food objects at a Meal.

By using an ERD there is now a clear blueprint as to the data each class initializes with, the methods that will need to run on all of the classes, and the relationships that persist.

Is creating an ERD necessary? Maybe not, but hopefully this post will help you understand why it's important and how it will set you up for success on your next project.