DEV Community: BunnyDunker

Sequelize, your favorite database library

BunnyDunker — Mon, 16 Dec 2019 13:59:18 +0000

Alright, welcome. I am here to give you a brief introduction to sequelize and tell you why you should be using it if you are using some of the most popular SQL databases out there.

But why?

First off, why would you want to use Sequelize? Well I'm glad you asked. Sequelize is a promise based ORM for popular databases such as Postgres, MariaDB, MySQL, SQlite, and Microsoft SQL Server. ORM stands for Object-relational-mapper and what that means is that it is a way of making those long SQL queries:

SELECT * FROM users WHERE email = 'test@test.com';

into a more manageable object oriented style. This ORM will let you skip the process of writing out these long and complicated queries out by hand and can bring down the complexity of using a database while still keeping its depth.

Ok but how?

To start the only thing you need to install is sequelize using either npm or yarn, apart from the database you want to use if you want it to run locally. Once you have it downloaded you can set up your sequelize connection to the database you are using like so:

const Sequelize = require('sequelize');

const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: /* one of 'mysql' | 'mariadb' | 'postgres' | 'mssql' */
});

The passed parameters are fairly self explanatory, database corresponds to the name of the database in the server running, username and password are the credentials needed to connect to the database server. The object in the last place has two key value pairs, the host is the location of the database server (either local host of a locally run database or the ip address of the server that is hosting it for you), and the dialect corresponds to which SQL database you are using.

Model time

Now that we have the connection to our database lets setup some models. To do that we just need to take the connection we made to our database and call its define method. By assigning that to a variable we are able to keep an easy reference to each model we have for creation and searches. This can be done in the following way:

const User = sequelize.define('users', {
  id: {
    type: type.INTEGER,
    primaryKey: true,
    autoIncrement: true,
  },
  firstName: type.STRING,
  lastName: {
    type: Sequelize.STRING
  }
});

When defining a model the keys always correspond to the name of the column and the value determines the specific details that value can be. The values can not only be type descriptions but whole objects with other details for the value such as whether or not it's the primary key, or what its default value is. In this object you are also able to determine the connection between tables if you pass in this key value pair:

references: {
  model: 'users',
  key: 'id',
},

When passing using this key value pair, model corresponds to the model you want to reference and id being the column from that table this value references.

Query time

Ok, before we can make full use of these models we need to make sure they are created in our database and for that we need to synchronize it. We can call the .sync method on each of our models or on the database connection itself to apply it to all models. A little tip here, you can pass an object with the key value pair of {force: true} to make the database drop the models if they exist already and recreate them. Now to show off the beauty of Sequelize, each query is performed by calling a method on the model you want to reference. You have methods like .create, .findAll, .update, .destroy, .findOne, and many more. For the sake of time let's just go over .create and .findOne. For the most part each of these methods only takes in an object as its argument, and in the case of .create the key value pair correspond to the direct values you want to insert into the table and under what column. Now for .findOne you can pass in the key 'where' and give it an object where the key value pairs inside would correspond to the entry with that exact pair in the table you are looking for.

There are too many specific keys to pass in to each method so go check them out in their documentation and have fun writing efficient databases!

Graphics come in Three(.j)s

BunnyDunker — Mon, 09 Dec 2019 14:52:34 +0000

If you are looking for a powerful JavaScript library to display 3D graphics in a web browser, then meet Three.js. This handy library can get you set up with some stellar graphics with just THREE components. And here they are:

Scene

First off we have the Scene. This is the component that houses the 3D environment that we are going to be creating. There really isn't much to this part of working with Three.js, all you have to do is create a new instantiation of one like so:

var scene = new THREE.Scene();

As I said the scene is what will hold everything that we want to display as well as be able to provide a background. We can do this with the following methods:

scene.background = new THREE.Color( 0xcce0ff );

scene.add(thing);

Camera

Next up is the Camera. This is going to determine everything related to our viewpoint in the scene. There are multiple types of cameras that Three.js has to offer including a stereoscopic, orthographic, and a perspective camera, and for the sake of this post we are just going to stick with the perspective camera since it is what we tend to think of when we think of a camera dealing with 3D spaces. Once again we need to create a new instantiation, this time passing in some values so lets look at what those are right here:

var camera = new THREE.PerspectiveCamera( FOV, AspectRatio, NearClipping, FarClipping );

The perspective camera takes in a field of view value first which is going to determine the extent of the scene that is seen on the display at any given moment. This value is input as degrees. The next is the aspect ratio, this describes the proportional relationship between the width and height of the view. This is commonly done with window.innerWidth / window.innerHeight to easily get the aspect ratio of the current window. Finally we have the near and far clipping planes. These values determine how near or far an object can be compared to the camera before it is no longer rendered. This is necessary to not render objects that are no longer relevant to the camera and the user and save processing resources.

Renderer

Finally the last of our three necessary components is the renderer. This piece is in charge of putting all of our work on the web page. Once again we just instantiate a new one using:

var renderer = new THREE.WebGLRenderer( {antialias: true} );

and we pass in an object of settings for the renderer, but the most common and simple implementation is the one above with antialias set to true. Once again there are a few different built in renderers to choose from but the one listed above is the simplest and most commonly used. Every built in renderer uses WebGL which is a JavaScript API for rendering interactive 2D and 3D graphics in compatible web browsers without plugins.
The next important step with the renderer is to set its size, which will be the size of the screen through which we see this 3D world:

renderer.setSize( window.innerWidth, window.innerHeight );

Finally we want to put the renderer to our webpage so we can actually see it:

document.body.appendChild( renderer.domElement );

Finishing touches

Now we have a whole 3D space on our web page using Three.js. It's a tiny bit empty so lets quickly add a little cube in there and animate it:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
};

animate();

And don't forget to call the render function on your renderer passing in your scene and camera!

Abstraction & Programming Languages part 2

BunnyDunker — Mon, 09 Dec 2019 14:52:07 +0000

High level languages

Finally we have arrived at our high level languages that most of us use today. At this level we have taken our abstraction one step closer to how we use language today. Here we have popular languages like C, Java, Python, Ruby and too many more to count. These languages operate by putting the code through a compiler or interpreter that will translate it into assembly language or another form of machine readable code. These languages are more abstract because it isn't just a simple one to one translation that can be done with them but a more complex process. Compared to the low level languages, these languages are considerably slower due to the work needed to compile them, but considerably easier to use as they resemble human language and are portable across multiple different architectures and operating systems.

Outside the box

Now that we've covered the concrete side of code, lets take a look at some of the more abstract side of things. When thinking of how we interact with computers, one of the farthest ways from machine code and binary that we do this is through GUIs or Graphical User Interfaces. You are actually using one right now to even be able to read this. This form of interaction is so far removed from how computers understand things that it would be easy to assume that no coding can happen in this form. Well in comes Drag and Drop programming, which is exactly what you might think it is. Here we have programs like Beetle Blocks and Scratch that operate entirely through a GUI and don't need any code to be actually written. Just like with the leap from low level to high level languages, there are benefits and tradeoffs. These ways of programming are perfect for beginners or for people who don't need to go as in depth in to programming as full on developers, but can also be more limiting in what can be achieved with them.

Next up we have esolang or esoteric programming languages. These are a bit of an oddball and take abstraction to a whole new level. Esolangs are languages designed as a proof of concept, a joke, or as a way to push the boundary of how we program today. These include languages such as LOLCODE, one designed to look like the speech of lolcats, or Shakespeare Programming Language, designed to look like a Shakespearean play. Here is a "Hello World!" script in LOLCODE:

HAI
CAN HAS STDIO?
VISIBLE "HAI WORLD!"
KTHXBYE

As you can probably tell, these languages are not as used for modern programming as the finely tuned high level languages we have, but rather these serve to push the conceptual boundaries of what we can do when creating new programming languages and can help spark the more creative side of programming.

Final thoughts

This is just a brief overview of how our modern programming languages have evolved and the direction in which they are still going. It is by no means a comprehensive explanation but hopefully enough to satisfy your curiosity on the subject.

And now here is a "Hello, World!" script in the esolang of COW:

MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO Moo MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO Moo MoO MoO
 MoO MoO MoO MoO MoO Moo Moo MoO MoO MoO Moo OOO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO Moo MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO
 MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO Moo MOo
 MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo MOo
 MOo MOo MOo MOo MOo Moo MOo MOo MOo MOo MOo MOo MOo MOo Moo MoO MoO MoO Moo MOo MOo MOo MOo MOo MOo Moo MOo MOo MOo MOo MOo MOo MOo MOo Moo
 OOO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO MoO Moo

Abstraction & Programming Languages part 1

BunnyDunker — Mon, 09 Dec 2019 14:51:56 +0000

Alright, let's have a quick chat on abstraction and programming languages and how we can better understand the technology we are working with. First off abstraction, when it comes to programming languages, is how far removed we are from the way that a computer physically accomplishes what we want it to do. To start talking about this we have to start at the bottom most level of this sort of scale and think of how computers work fundamentally.

Computer mechanics

First off we have the physical computer. Here we can't really talk too much about code because it is all how the computer is physically built. All of the logic comes with how it is physically organized and how the electricity is allowed or not allowed through it. This would be the lowest level of abstraction in the sense that it is the most removed from us as humans.

Binary

Our next step up is binary. Here we step into a conceptual and digital representation of how computers process things. It is a series of ones and zeros, corresponding to on / off, true / false, yes / no, and any other binary means of separation. Using this very basic level of logic we can accomplish so many crazy tasks. With binary we are able to pass instructions to a computer in its own language so to speak, and have it understand and do what we want it to do based off of how we built and set it up. To keep it all organized, each 1 and 0 is a bit and eight bits make a byte. Now with a byte we are able to make this grouping of bits correspond to 2^8 or 256 different conceptual things. Through encoding such as ASCII (American Standard Code for Information Interchange) and UTF-8 (Unicode Transformation Format) we are able to have these bytes go from conceptual things to actual characters. Now as you might expect, it is quite difficult to understand and write with binary. Here is how you would write "Hello World!" in binary:

01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100 01100100 00100001

Pretty illegible right. In comes our next step up the abstraction ladder.

Low Level Language

Assembly language

With assembly languages we now take a big step closer to a what a modern programmer sees. The short and sweet of how these languages work are by passing the assembly instructions (the code) through an assembler which translates it into machine code, the format the computer needs to understand it. These are really practical because they are extremely fast as the computers don't need to do much to execute it. One of the downsides though is that each assembly language is specific to a particular computer architecture and sometimes an operating system which doesn't allow for easy use.
Here is how you would print out "Hello World!" in Linux Assembly

section .text
   global _start     ;must be declared for linker (ld)

_start:             ;tells linker entry point
   mov  edx,len     ;message length
   mov  ecx,msg     ;message to write
   mov  ebx,1       ;file descriptor (stdout)
   mov  eax,4       ;system call number (sys_write)
   int  0x80        ;call kernel

   mov  eax,1       ;system call number (sys_exit)
   int  0x80        ;call kernel

section .data
msg db 'Hello World!', 0xa  ;string to be printed
len equ $ - msg     ;length of the string

Still not quite easy to use, but a big step from the ones and zeros from the previous level.

See part 2 for high level languages, the outlying esoteric languages, and GUIs

Building your own computer

BunnyDunker — Mon, 25 Nov 2019 14:34:52 +0000

So you want to build your own computer. Don't worry, it's not as complicated as it might seem. It is basically like a large puzzle once you have all the pieces. It can save you a lot of money and get you a much more specialized machine than you could buy from retail. I'm going to help you understand a bit more about the planning process, since the assembly process is mainly like a large puzzle that you have to assemble. One last thing before I start, when I say computer, I'm talking about a desktop, not a laptop, those are bit more difficult to assemble as they require much more precise tools. So here we go, lets take a look at how to choose your parts to buy

The Big Brain

The first part you should decide on is your processor. The processor is essentially the part that will be doing the heavy lifting with your computer in terms of all the heavy duty processing. The reason you want to choose it first is because a few other parts are going to depend on which type you choose. Here your main choice is between AMD and Intel. These are the two largest processor manufacturing companies out there and offer two different styles of processors. Historically the difference between the two has been AMD offers processors with less processing power but with more cores and a lower price, and Intel offers more processing power with less cores and a higher price point.

For those who do not know, cores in a processor are what allow them to perform processes, so the balancing act that it brings is the more cores a processor has, the more it can multi-task since it essentially has multiple smaller processors. Learning more about how this difference can affect what you are aiming to do with your desktop will help you narrow down which manufacturer you want to go with. Once you've made your choice, set yourself a price point and look up some charts showing the price to performance ratio of different processors in the type you chose and make your choice from there. The second step for the CPU is choosing a cooling system you want here. Since processors usually get really hot they have a whole heat sink and fan dedicated just to them. If this is your first time, I would recommend getting just a regular fan cooled heat sink, since they are a bit easier to install than a liquid cooling system. As far as your choice for which one to go with, I would look up what people have used for the CPU you chose.
Read reviews before making a final decision on any part! I cannot stress this enough. The last thing you want to do is get a part that has some big known issues and not have a planned solution.

The Central Nervous System

Next up now that you've made the choice between Intel and AMD you can choose your motherboard. The motherboard is kind of like a barebones computer by itself, and is what's going to bring all of our parts together.

The reason we have to choose it next is because they are specialized for either type of processor, so a motherboard meant for an AMD processor cannot use an Intel processor. So since we first chose our processor, the key part we want to pay attention to when choosing a motherboard is the type of processor socket it has. We want to find the same type as the one our processor is, usually for Intel that will be indicated by LGA followed by a number, and for AMD it will be AM followed by a number.

The Final Pieces

The last few pieces you have to choose aren't as difficult a decision to make but are still important. These are the graphics card, the RAM and the case. As with the rest you need to make sure the ones you choose are compatible with the rest of your parts, mainly the motherboard by matching socket types again. See what I meant by a large puzzle. For these parts it really depends on how intensive in those two areas you expect your computer to be. Since you can buy multiple sticks of RAM to work together, one tip to keep in mind for the RAM specifically is buy the exact same ones. There are issues you can run into when using different sticks of RAM and to just avoid that buy the exact same ones. Don't mix and match a 4GB stick with an 8GB stick, it can end badly. Now the case that is mainly going to depend on the size of motherboard you chose since it is directly mounted on the side of the case, as well as you need to factor in the size of your other parts. If you got a fan cooled heat sink for your CPU, make sure you know how big it is so that you get a large enough case.

The extra not extra

Finally here are some parts that you might need and are not dependent too much on your other parts. Monitor, keyboard and mouse. Don't want to forget those since you can't really use your computer without it. A hard drive to store all of your precious data. A power supply, to give life to your creation. Be sure to get a power supply that can handle all the parts you just got, there are websites you can use to make sure you are giving the right amount of power to your parts. And lastly, a wifi card if you want to have wifi (just go with ethernet) and a disk reader (if you still use disks). As a quick recommendation, if you don't know where to get your parts, Newegg has a great selection and great deals. There we go, now you just have to get the parts and assemble it.

I promise you'll know promises after this

BunnyDunker — Mon, 18 Nov 2019 07:48:11 +0000

Alright, lets start off with a brief explanation of what promises are. So one important thing to note about Javascript is that it is single threaded. Meaning Javascript can only perform one thing at a time. This can get pretty annoying if you are trying to perform a computationally heavy function that might take a few seconds, or are using a somewhat slow API, the time really adds up and makes for some fairly inefficient code. One way to solve this issue is Asynchronous code / functions. This allows code to be set up to run at a later time after the rest of your non asynchronous code runs. But, this can get a bit hectic when you have other operations depending on that asynchronous call, and then more depending on that one and so on and so forth. That's how you end up in callback hell.

Promises to the rescue! What promises allow us to do is set up our code to say: "Don't worry about doing this right away or waiting for a response, keep going with this other important stuff and I promise I'll get back to you with the results"

Terminology, Keywords and Use

Alright, lets get some keywords down so that you can know how to use promises. The first one, naturally, is Promise! The way you use it is by placing the new keyword in front of it to create a new instance of a promise object.
In this example our new promise takes a function that it runs that takes a resolve and reject parameter. What these are saying is "Oh yeah all good here's the result" or "Nope, sorry, no can do. Something happened and I can't fulfill this promise for you :(" These are the two outcomes when a promise is run and these can be nicely chained like so:
By putting .then() and .catch() after a promise we are able to set up more code to run when either the resolve or reject function is called from the promise, so whether it succeeds or fails / throws an error. With .then() we can pass in a function that takes in a single parameter which is the results from the resolved promise and use that data for whatever we need. Similarly .catch() takes a function that takes the error log as the first parameter and from there we can do whatever we want. We don't even have to use that error log, we can just use the catch as another form of conditional where if the previous promise fails then we do something else.

Chaining

Here is where things start to get fun. If your .then() or .catch() call returns another promise, then you can keep chaining .then() and .catch() after it like so:
Ahh there we go, that looks a lot better than our callback hell from earlier. One thing to keep in mind, each .catch() call will catch errors from all the .then() calls above it so you only need one for each split in logic you want.

Promises in the wild

All of this how to use and set up promises is all good, but the real strength of where they lie is in all of the libraries that use promises to deal with asynchronous functionality. Some of the most widely used would be Axios to deal with sending requests to a server, and Sequelize to deal with searching a database, and getting comfortable with promises is the key to writing elegant and efficient code with these libraries. Now go forth and use this knowledge, I promise you it'll be useful.

Passport, your ticket to easy authentication in JavaScript

BunnyDunker — Wed, 13 Nov 2019 16:15:58 +0000

If you are looking for an easy solution to dealing with reliable authentication then you have come to the right place. Passport is a set of authentication middleware for your Node.js server that allows you to use authentication from widely popular and secure companies such as Facebook, Google, Twitter, GitHub, and so many more. This ultimately takes a lot of work off your hands from having to deal with the security of storing user data and takes away the hassle of creating a new account for users.

Pre Flight Checks

First things first, get your file-base set up, a basic front end, a database, and your Node.js server set up. For that I recommend using Express since it is really easy to set up. I also recommend setting up a separate file to deal with your authentication routes since the authentication process will be fairly isolated. If you want to follow along with me I will be using the passport-google-oauth20 strategy for passport. And finally be sure you go get yourself credentials for authentication from whatever service you chose. Here is the one for google that I am using.

Takeoff

Ok first step, require passport in your main server file, along with cookie-parser. That will make dealing with cookies a breeze. Alright now we are going to leave that for a minute to go set up our strategy in a separate file. Here's the requirements you want for this file:

Here we are bringing in our User model from our database setup because in our strategy setup is where we tell it what to do with the profile information it retrieved from google or the whatever other strategy you choose. Next we are going to use our strategy in Passport by using, you guessed it, passport.use() like so:

The first argument the strategy takes is an object with the endpoint you want the login to redirect the user to, and the clientID and clientSecret that you got from google (or other service). The second argument is a function for what to do with the info the authentication sends back. We are going to ignore the accessToken and refreshToken parameters of that function for now as they aren't necessary for a basic authentication. The next step is to verify if the user that logged in is already in your own database and if not to create one using the profile info you got back from them logging in. and finally the last step for it is to make sure you call the next function with the user that logged in as the second argument since we are dealing with middleware after all.

The Journey

Take your time, enjoy the learning. Journey before destination

Landing

Alright, time to go back to our main server file. Here we are going to set up two things, first our cookieSession like so:
this lets us store a session identifier as a cookie to send back to the client. And second thing we need to do is initialize our passport to be able to serialize and deserialize the user data from the request like so:
For this to fully work we need to add one last thing back in our file where we set up our strategy and that's the actual serialization and deserialization of the data we get like so:
serializeUser is fairly simple, it takes in the user and we just call next with the specific identifier we want to serialize from the user, and deserializeUser takes in the id and does the reverse process so we want to search our database for the user with the matching identifier.
And finally at the end of our journey we need to set up our some useful routes to deal with the authentication like so:
We have a /logout endpoint that needs to call req.logout, a function put on the request by passport that removes the req.user property, functionally logging out the user. We have our main login route that I have set to the /google endpoint and all it needs to do is run the passport.authenticate() middleware specifying which strategy to use, in my case that is google, and I have an object as well with the scope key, this determines the scope of what you can access from logging in and is provider specific so you will have to look at the strategy's documentation.

Tada

Whew all done. There you have a basic setup for authentication. Now go have fun going even more in depth with your strategy of choice with passport with all the documentation on their awesome website!

The programming skills in MTG

BunnyDunker — Mon, 14 Oct 2019 03:42:48 +0000

Preface

As a brief note before I get into the meat of my point, this is the second post in a series I am writing on pointing out the programming skills that are practiced when dealing with games. The first one can be found here: Part One. As I stated in that previous post this is not solely about video games but games in general, to be able to keep up skills necessary for programming but also have a fun time. In this installment I am going to take a close look at Magic the Gathering and the skills you get to practice when playing it.

Getting Started

If you've already read the previous entry then you should know what I'm about to say. The first step is learning the game. I already go into how learning a new game is beneficial so I won't go over it again here, but I will leave a link for actually learning the game for those who don't know how to play it here. The next step to actually playing it involves a bit of a cost barrier since you need to buy cards so my advice is to buy pre-made decks or find some friends who have lots of decks to play with. If at this point I've convinced you to try it out, go forth and enjoy this deep and mystical game, but you might want to stick around to see it's connections to your cough cough primary interest of programming.

Method to the Madness

If at some point you end up playing one of Magic's multiplayer formats like Commander, you'll notice that the board state ends up getting very, well chaotic. As the game progresses and each player furthers their strategy to win the game there can be a lot to keep track of on each player's turn. Just like when developing an app or webpage over multiple files and directories this is difficult to keep track of, especially when you are working on a team. The first step to tackling this issue is to stay organized. This is incredibly crucial, both for keeping your plan of attack clear and for keeping your sanity. Nothing is worse than trying to find your direct query statement in a file of 500+ lines of code.

Thus it is important to stay organized. In Magic there are separate zones for different types of cards, although a lot of the time it doesn't end up being enough, so usually players have their own added level of organization that isn't a part of the rules. Similarly in programming there is a loosely built in level of organization by the means of language syntax and through the use of linters (tools that analyze source code for possible programming errors and stylistic errors) but a lot of the time it isn't really enough. In this case the added level of organization we have is through the use of software design patterns. These are widespread patterns established for the express purpose of staying organized when writing and separating code. Notice I say patterns with an 's' because there isn't just a one size fits all pattern for you, rather well over a dozen and it's important when choosing a pattern for your current project that you think critically about why you want to choose one pattern over another.

Are You Paying Attention?

Now that I've talked about the physical / virtual organization of your board / code, the next skill that is practiced is with your mental organization. Depending on the kind of deck you are playing in MTG, you can end up with a lot of different triggers to keep track of. You attack with your creature that gives you life back, which triggers your enchantment that lets you draw a card when you gain life, which triggers another player's enchantment where they get a treasure whenever an opponent draws a card, and so on and so on. This in turn is similar to lets say refactoring your database of messages to no longer save a direct reference to a user, so you need to go change where you are inputting that information into the database, and if that relies on a user input you might need to change the layout of your html page, and so on and so on. You get the idea. A lot of this can feel like following a treasure map to the X, but to be able to do that you have to have a clear idea of what the map looks like, and what better way to practice making that mental map than by playing a fun game of Magic.

Now for my End Step I Will...

I believe with this post I have now talked an adequate amount on
the subject of Attention to Detail and a tad on Memory from my list of skills in Part One. Now, in this post I have only really talked about the skills practiced when playing on a basic level, so in my next entry in this series I will talk about some of the skills practiced when you are trying to take your game to the next level.

Games. Unconventionally sharpening your programming skills

BunnyDunker — Mon, 07 Oct 2019 13:46:21 +0000

Preface

To start off this I want to acknowledge that at our core programmers are all nerds and a lot of us like to play games. Now when I say games, I mean all kinds of games. Board games, tabletop games, card games, video games, and my list will grow as I delve more into this topic. In writing this I intend to explore the different ways that games can help a programmer sharpen skills that are crucial to our craft. On that list of skills I currently have:

Constantly learning
Attention to detail
Memory
Research

And to kick things off lets explore constantly learning.

The ever evolving profession

One of the first things most people are taught when getting in to programming is the importance of learning and constantly learning. This can easily be attributed to the fact that everything moves so fast in the tech world. We have access to new languages, updates to languages, new frameworks and libraries all the time, and depending on how many you decide to subscribe yourself too that's a lot to keep up with. Fortunately as you might have guessed by the title of this post, I have a solution to help out.

Lets have some fun

Alright to just cut the cake right away, my point is to just learn a new game. Doing this will practice that whole constantly learning skill I talked about. In doing so you are taking in new information and the mechanics of the game in a similar way that you want to when learning new programming oriented skills. As the main advantage to this, you are practicing this skill while keeping the whole experienced focused on having fun. Doing this can help to avoid burnout when trying to learn a new tech specific skill on a time crunch. To draw the comparison even closer, when learning a new game you start out by just learning the rules and as you play more you start to learn the intricacies and strategies involved (unique to games with depth). This kind of thinking involves a lot of creativity which is just what you want as you get more adept with a new programming language or framework.

Practice practice profit?

So now you've learned yourself a new game and you've played it a bit, what now? Well the next step is to practice. Play it more, this will cement the knowledge you've gained and maybe even practice some other skills to help with programming (hint hint future topics to come). Ultimately this is exactly what you want to do with the more programming specific skills that you tackle. Doing this practice step with those skills will make you a much more valuable piece on a team and individually. Practicing this step with a fun goal in mind can most definitely help to ease the process when you need to learn new programming tools and apply them with a short timeframe.

End Note

As you might have noticed I have not covered nearly all the topics I mentioned in my preface. Well I intend to get to them and in great detail with some possible examples involving actual games and how they can help more specifically. Stay tuned for those upcoming posts and as I release them I will update each one with a link to the following one. Sneak peak - this was heavily inspired by my recent obsession with MTG and will feature examples from that and more!

B-Trees, what are they and why do I care?

BunnyDunker — Mon, 30 Sep 2019 05:18:08 +0000

What are they?

Well in the simplest terms they are a tree data structure, they have nodes and children like all other trees, but they are a very special kind of tree. One's first thought might be "Oh, B-Tree, yeah a binary tree right?" well, that's true and not so let's dive in to why.

As many kids as you want

To be exact, B-Trees are a generalization of a Binary Search Tree (BST) that is also self balancing. To start unpacking that internet definition, B-Trees have two distinct features that differentiate them from other trees. First their nodes can store more than one data point in them, and second they can have more than two children. That's basically what is meant by generalization of a BST in that when creating a B-Tree one can specify how many data points and children each node can have. What's interesting about this property is that each child node contains values that are in between two of the parent node's values. Since a picture is worth a thousand words, here's one to go along with this definition.

In the displayed example the values stored in the left most child node are all less than the seven in the parent node. So far this is similar to a binary tree, a part from the number of values in the child node. Now the middle child node contains all the values in between the seven and sixteen stored in the parent node and the right child contains the values greater than sixteen. This added level of separation and organization is the key feature of B-Trees and what differentiates them from other trees.

Now looking at that example, one might think "hmm it seems like that left child is completely full, so if I add a value less than seven I would add another child to that child right?" one would be completely correct in that observation if it weren't for the next coolest feature of B-Trees.

Self Balancing

Although not unique to B-Trees, self balancing is an integral part to making B-Trees work and not just be a special kind of of tree with multiple data points per node. Remember that thought one had last paragraph? Well the self balancing aspect of the B-Tree would resolve it so that the tree would not end up with a new child node of a child node unless absolutely necessary. If one were to add a value less than seven in our handy dandy example, the value would be passed down to the left child node, which at that point would realize that it's holding too many values. The midpoint of that child would then be promoted up to the parent node and the child would be divided into two around it. Lets add let's say zero and see how our tree gets updated.

Our two got promoted! Wonderful, that two has been working really hard and deserved it. Notice how the zero and one were placed in as the two's left child and the five and six as it's right child. This is how the self balancing in B-Trees differs slightly from other methods. This self balancing is what allows B-Trees to stay organized and be as efficient as possible.

Ok, now why should I care?

To spice up our B-Tree information lets add some technical jargon. The most important probably is that a B-Tree has a time complexity that is always O(log(n)). In it's search, insert and deletion, it will always be O(log(n)). Have I stressed that enough? O(log(n)). That's pretty good if you ask me. To give an example of this, if we set up our B-Tree to have 1000 children per node (big data) when we go down into a child node we are effectively narrowing down our search to ignore 999 thousandths of our data. Let me tell you that adds up. This makes the B-Tree perfect for dealing with data that is too large to fit on our main memory and for large storage systems, and as such it is commonly used in databases.

Final little tidbit

To end our little adventure with B-Trees I will show you this little toy to play with if you like watching things fall neatly into place, enjoy :) https://www.cs.usfca.edu/~galles/visualization/BTree.html