DEV Community: Jade Doucet

Getting started with PHP

Jade Doucet — Fri, 14 Feb 2020 23:59:11 +0000

If you're new to PHP, setting up your first project may be a pain. I'll walk you through to make this process as painless as possible. If you're familiar with running basic html pages in VS Code, this will be similar, but without the convenience of "Live Server". What we are setting up, is a small registration form, but starting in this post with outputting "Hello World" onto a web page, along with a way of running it on a web server. The final product can be found on my GitHub.

Setting Up Your Web Server

So, we need to run our page in our browser. The easiest way I've come across is by using XAMPP. Download this for whichever OS you're running. Keep track of where this file is downloading, it's important. You can un-check a few of the download options, you only really need PHP, Apache, and MySQL. Once you're done, open up the XAMPP Control Panel. Pressing start on the Apache server, click on Admin. This will navigate you to localhost/dashboard. This is simply a file path which is being served by the Apache web server, so we just need to add some PHP files to this path as options.

Adding Files

This is a step which seems to be skipped by most tutorials. Open up the folder where you downloaded XAMPP and you'll see a folder called "htdocs". This is where you can add projects and files to serve. I created an empty file called "php-form" and opened it in VS Code. From here, let's create an index.php file and get started.

Creating Our Web Page

Opening our index.php file, we can write plain HTML in here, but it's a little more than that, we can also write our PHP code here. To make sure everything is working properly, let's create our first PHP code.

<?php

echo 'Hello World';

?>

Adding this into our project, we should be able to run our PHP file. Going back to our web server, we should be able to change the file path to localhost/php-form/. If you've saved the code, this should show "Hello World" in the top left of the web page. Let's break down this bit of PHP code though.

The Code

Starting with <?php, this tells our interpreter that the next section of code is going to be PHP. On the next line, we have echo 'Hello World';, which just means to output "Hello World". This will be directly printed onto the web page. In some programs, you may not see the closing ?> tag, in most cases, this can be omitted and it's perfectly fine. The echo keyword is something you should familiarize yourself with, it's used everywhere in PHP when displaying information on a page. This article is super helpful for more information on the echo keyword.

Conclusion

So, we've output 'Hello World', which is just our first step into the world of PHP. Keep an eye out, we'll be going deeper in the future. In the meantime, feel free to read through the PHP documentation.

ASP.NET Core React Development - Intro

Jade Doucet — Fri, 24 Jan 2020 21:17:13 +0000

If you've used React within Node or never touched React or .NET at all, this is a great place for you to start. This will be done using the most recent version of Visual Studio Community (2019).

Setting up

Let's get our base project set up and ready to go. Open Visual Studio, click "File" in the top right corner, then go to "New" > "Project...", search for ASP.NET Core Web Application. If nothing shows, click in the little black box "Install more tools and features". Two options may show up for this, install the one that includes "C#" in the tags on the bottom of the description. After this installs, we can name our project and hop into it.

Before continuing, ensure you have Node downloaded

Verify it works

Once you've installed your new project, let's make sure it's all working. Start your web page with IIS Express, I've underlined it here:

So, if you're like me and new to Visual Studio 2019 and .NET, you're probably wondering, "what is IIS Express?". To save you a google, this is an "Internet Information Server", if you've come from Visual Studio Code, it's similar to Live Server. More on IIS Express can be found here.

Your project should open in a new window, if you're on windows, you may have to give Node some permissions that will pop up before it all runs correctly.

Connecting the dots

Hopefully it's all working, and we can start exploring our new project. Let's start in some familiar territory. If you've come from node development environments, you'll recognize these. Open up the "ClientApp" directory on the solution explorer, and you'll see all of our typical React boiler plate files, along with a few extras.

Diving into the ClientApp directory, let's check out the index.js within the "src" folder. Yours should look similar to this:

In here, we can see a rootElement being defined, which is just grabbing the item from our HTML with an Id of root. This rootElement is being passed into our friendly neighborhood ReactDOM.render function, which, as you may know if you've worked with react, is simply telling React where to render our React Components passed into it. What's really cool here in this boiler plate, is that we actually already have our routing set up using react-router-dom, which can save some headache for new users.

Now that we've found our ReactDOM.render function, let's hop into the "public" folder, which is still in the "ClientApp" directory. Here resides our index.html, favicon, and our manifest.json. Great, so we know that these static files are being served somewhere, and our JavaScript files are also being run, next thing to do is to find out what's bringing these together.

In my next post, we'll go through and find out where and how these connections are made, to develop a deeper understanding of what's under the hood here. Look forward to that in the next week or so!

If you're already working on a project and want to keep going, feel free to familiarize yourself with the ASP.NET Core Documentation. This documentation is very in depth and get's into what I'll be going over in my next post!

HTML5 Canvas Basics

Jade Doucet — Sun, 15 Dec 2019 22:00:37 +0000

You may have heard of HTML5 Canvas, but what exactly is it? Let's figure it out together!

Simply put, <canvas> is used to draw graphics to a web page. This tag is just a container for graphics, but this is good news if you're a JavaScript developer because this is done with the power of JavaScript!

Getting Started

Canvas has many methods for drawing, you can make loads of things like squares, boxes, paths, text, images, and more! Luckily, canvas is also fully supported by most modern browsers, even Microsoft Edge, if that's your thing. To create a canvas, you'd start out with something like this:

<canvas id="gameScreen" width="800" height="600"></canvas>

It's important to note here, that this canvas needs to have an id, this is used for reference within your JavaScript. A border is also probably nice to have, so adding some style can help to visualize this a bit better.

<canvas id="gameScreen" width="800" height="600" style="border:1px solid black;">
</canvas>

That would result in something like this

Drawing

On this canvas, you can venture in many directions. If you wanted to simply draw a line across, you could do this

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
context.moveTo(0, 0);
context.lineTo(800, 600);
context.stroke();

It looks like there's a lot going on here, so I'll break it down line by line.

On the first line, we are grabbing our canvas from our HTML page, so we can have access to it within our JavaScript file.
The next line is invoking the getContext() method on our canvas, which returns an object that provides methods for drawing on our canvas! In this case, I pass in the argument "2d", which is recognized by the method and returns the correct object which allows us to draw in our 2d space. There are other ways of utilizing tools for drawing in 3D spaces as well, check out WebGL for more on that!

These last 3 lines are just invoking methods on our context. Side note: Many developers will shorten context with "ctx", so keep that in mind when googling more about it all.

context.moveTo is taking two parameters here, this is the X and Y position on our canvas to start drawing. Web pages start with (0, 0) as the top-left most corner. This is very important to remember, as most methods need to know your X and Y position.
context.lineTo is again, taking an X and Y position, and it's simply creating our line to follow from our "moveTo" position, and our "lineTo" position. Think of this like drawing with pencil and paper. You move your hand to the top left, then draw down to the corner. Since the size of our canvas is 800 X 600, top left is (0, 0), so bottom right is our (800, 600).
context.stroke is just making the physical line that you see, by following the the moveTo position, to the lineTo position.

Conclusion

This is a very basic example of using canvas, but I plan to dive deeper into this soon. Something that inspired me to start learning to use canvas is actually Cross Code.

This game is entirely 100% written using HTML5 canvas with regular JavaScript! That's very exciting for someone like me with a long history in video games and a background in JavaScript, I can't wait to see what other games come from this. Thanks for reading; if you've created anything really cool with canvas, feel free to leave a comment, I'd love to check it out!

For a really great walk-through of developing a block breaking game, I highly recommend this freeCodeCamp video.

JavaScript to C# web development

Jade Doucet — Sun, 08 Dec 2019 21:09:47 +0000

In this series, I'll go over some of the basics of development with Blazor from the perspective of a JavaScript developer. In order to get into Blazor, we will need to go over a few technologies first. So this post will focus a lot on those technologies. Next week will be primarily focused on Blazor itself and what’s going on in the starter project, as well as a few fun things you can do with Blazor.

So, with JavaScript, we use things like NodeJS, WebPack, JSX, and many other technologies that make web development possible. In that same way, C# requires dependencies of it's own. Especially since C# is typically a server-side language. Let's get into those!

.NET

DotNET(.NET), is an open source developer platform. Similar to NodeJS, this is the place where you'll install languages and libraries to be used within projects. Unlike NodeJS, .NET is actually multi-threaded. Meaning that many actions can be performed at the same time, unlike NodeJS, which is single threaded. There are three .NET implementations, they each have different uses; .NET Core will be the runtime environment used for Blazor.

ASP.NET Razor

ASP.NET is an open source web framework which allows use of .NET for web development. This means that your front end is basic HTML, CSS, JS, and you can have your server code in C#. Razor is a markup syntax based on ASP.NET. This allows you to actually write your UI using C#. No need for JavaScript here! Razor allows for components to be made and used to build your UI, and really opens up the possibilities for web development with this inclusion of C#. If you're with me so far, this is what we're looking at:

Razor builds upon ASP.NET, and allows us to use C# for full-stack development. It's important to note that Razor does not follow MVC for development, and it's very unopinionated. Razor components are capable of having individual state, even if it's the same component being used multiple times.

Web Assembly

Most simply put, Web Assembly is a way of writing code for your browser using Web Standards in a form of bytecode, similar to an assembly language, that your browser is capable of understanding. The role of Web Assembly here, is that it takes our compiled code as bytecode, and can execute this code in this browser "sandbox". Side note, this isn't actually the same bytecode that runs on your computer, it's completely separate and is only understandable by the browser. This is something that really plays a key role in expanding the playing field for languages like C#, C++, Go, and RUST to get their feet wet in web development.

.NET Runtime and Mono

In order to compile down to Web Assembly code, we need something to handle our IL (Intermediate Language code). This is done by Mono. There's nothing too crazy to worry about here, this is available to any of the .NET runtime environments. In the client of a project, you'll see a mono.wasm, this allows us to load .NET assemblies inside of our browser.

This is a load of new information for someone that's never used any of this before, so take feel free to do a bit of more research on these, here's a video tutorial of Blazor if you're more of a visual learner. Most of these technologies are explained here as well. Next week I'll work on an actual Blazor Project, so stick around!

C# for the JavaScript Developer

Jade Doucet — Sun, 01 Dec 2019 19:23:30 +0000

As a new JavaScript developer, if you're still new to the developer scene as a whole, learning a new programming language can be pretty daunting. Lots of job postings are requiring so much experience, and it all feels so overwhelming, but don't worry, you're not alone. We've all felt this way at some point. In this post I'll be going over a few C# basics to prove to you that learning a new programming language is not as scary as you thought!

Basics

So, lets cover a few things that you may or may not be familiar with. When declaring variables in JavaScript, we have so much freedom without realizing it. We can declare a string, reassign it to a number, then to a Boolean. In many other Object Oriented programming languages, you actually need to specify your data type of your variable before using it, and declaring it may actually be how you even declare that variable! If that sounds confusing, this should clear it up:

In Javascript:
var myName = "Bob";

In C#
string myName = "Bob";

This is an example of declarative programming, which is essentially just specifying the data type of a variable before assigning a value to it. C# also provides a var keyword, which is definitely another way to assign variables, but keep in mind, that data type cannot be changed.

In JavaScript:
var myName = "Bob"; myName = true; // myName is now equal to a Boolean, this is fine

In C#:
var myName = "Bob"; myName = true; // This will throw an error

Data Types

Now that we are familiar with data type declaration's lets go over some of the data types available to us.

bool -> Boolean - will only be true or false
char -> character - can hold a single 16 bit unicode character ('A' -> 'z')
int - > integer - maximum number of 2,147,483,647 -> int.MaxValue will provide this number as well
long -> allows for large non-floating point numbers
decimal -> also allows for large numbers
float -> 32 bit number, larger numbers with up to 7 decimals of precision
double -> 32 bit number, even larger numbers with up to 15 decimals of precision

By executing MaxValue on each of these numeric data types can show you their maximum size. This is actually important to keep in mind if you're working with numbers often. It can be easy for some programs to surpass the MaxValue of an int data type.

Some Familiar Territory

So often, we use console.log() to see our errors, values, or whatever. Luckily, C# provides us with Console.WriteLine(), which is essentially the C# equivalent. With this in mind, lets get to some familiar things.

Incrementing:
i++; ++i; i--; --i; i += 5; i-= 5;

And all of those other fun ways of incrementing in JavaScript using multiplication and division.
Something different here, is ++i vs i++. We are accustomed to i++, and it's also commonly used in C#, but they are slightly different. Here, check it out:

int i = 0; // declare our integer
Console.WriteLine(++i); --> Outputs 1 - As Expected.
Console.WriteLine(i++); --> Outputs 1 - What?!
Console.WriteLine(i); --> Outputs 2

Since the items being written into the console are read left to right,
on line 2, i is incremented by one, then the value of i is read.
On line 3, i is read and printed to the console, and then it's incremented by 1. As you can see on line 4, the value of i is actually affected, but it wasn't changed at the time it was being printed to the console. This can be an important factor when working with incrementing in the console.

Hopefully this shows you that going from JavaScript to another programming language isn't so bad, but if you're not convinced, stick around for next week. I'll extend this, or talk about a new framework which allows for WEB DEVELOPMENT with C#! Thanks for reading!

Viro-React, AR made easy

Jade Doucet — Sun, 24 Nov 2019 16:06:04 +0000

As a lover of React, it was revolutionary to find out that I can use React and React Native as a platform for Augmented Reality Development!

To get acquainted with Viro, I will break down some of what's happening in the Viro Quickstart Tutorial. I'll go through some of the key elements at play, as well as introduce you to some terminology used in AR development.

AR Vocabulary

To get started, you'll need to know a few common terms:

Target / Markers: Visual cues which trigger the display of virtual information. These can be pictures or even objects.
Anchor: A real-world position and orientation which can be used for placing objects in an AR scene.
Scene: The space shown through a camera to be interacted with.

There's loads more vocabulary to learn, but this should be all we need for this project.

Z - Axis

Another important concept to understand will be working with the Z-axis. We've all worked with X and Y axis, even if you didn't realize it. Remember these from school?

X axis is simply our horizontal, Y is vertical, but Z is our depth. Working with AR, you'll need a slight understanding of this, but with this analogy, it should be clear. Going back up to the image of x and y axis here, imagine another line coming out of your computer screen, directly towards you. That's z-axis. This is what makes things "3D". X and Y being your two dimensions (2D), and Z added in to make your third dimension (3D). Here's a picture for reference.

Viro AR Project

Moving along, once the project is downloaded, along with it's dependencies, you're able to import anything you'll need from Viro.

The highlighted imports here are the ones I'll be using in the project. There loads of things that can be rendered in, and that can all be found in their documentation.
Let's go over a few basic concepts in this React Component containing our scene.

The entirety of whats rendered is wrapped in this "ViroARScene" tag.
Within this component is a full-featured 3D scene graph engine. This is also the AR equivalent to View tags in React. One or more of these Scene components are contained in a "ViroARSceneNavigator" component. In order to actually get the Scene to render, the ViroARSceneNavigator must know which scene to load up first. More on that can be found here on the Viro Scene Navigator Docs.

On line 56, you can see that I'm rendering "ViroText", which is just like the Text tag from React-Native, but for text in AR! To keep things short and sweet, I modified the original code a bit. As you can see on line 55, there's an onClick passing into the entire Scene, an onPress would also work here, and this actually just changes the text you'll see on the screen from "Hello World", to "I've been clicked", and then vice versa.

Conclusion

This is the first part of my Intro to Viro. As I continue this journey, I'll post more and more on it. From my short example, you can see that getting started and using it just like a normal React application is totally possible. Feel free to leave a comment about any more Viro aspects I should cover!

What is React-Redux and how to improve UX

Jade Doucet — Mon, 18 Nov 2019 02:14:48 +0000

As you may have heard, using Redux can hugely impact the user experience of your web page. If you haven't, well now you have. This is because the entire state of your application is kept in this fancy object that Redux calls, a "store". Redux is a state management library, so it utilizes this "store" object to manage the state of your application.

If you're familiar with React, which I hope you are if you're reading this, you've probably built out stateful components before. Ya know, the things that kind of look like this:

You can see here that our state is being managed on this specific component. Also, as you may know, you can re-render components by changing their state. Sometimes you need to affect the state of one component, based on the state of another. This is where Redux can come in as your hero and save you a ton of time, and hopefully from getting a headache. Let's get into some Redux.

First thing's first, I need to introduce you to a few terms:

Payload
Action

store.dispatch()

Reducer

previous state

action

new state

Middleware
Store

Now that we've got the terminology out of the way, how does this work? Lets make a small counter on our state which can increment and decrement. This means we will need an action or two. One to increment the counter on the state, and one to decrement the counter on the state. This action is an object that has a "type", which is basically a name or a description that the reducer will read. So, lets name them exactly what they are. Increment and Decrement:

These are basic JavaScript functions that return an object. The object has a "type" property, which will be used in the reducer. Don't over-think it, it's just like saying, "Hey, Reducer, do this to the state". You'll see how this is handled. Key take-away; these are simply functions that are returning objects, and when they are used, you actually invoke them so they have the value of that object when they are being passed to our store.

Bringing us to our next point, our reducer. As described above, this reducer is similar to the array method Array.prototype.reduce, which takes the current array, a function, then returns a new array. Here's a redux reducer:

Our "counter" function is taking the current state of the counter, or a default of 0, and an action, which as we learned before, is just an object. The switch statement is checking the "type" property, which just describes what the object is wanting to do, and we have two cases set here. One to handle the "type" that is set to 'INCREMENT', and one that handles 'DECREMENT'. This takes our state(the counter on the state specifically) and increases it by one or decreases it by one depending on the "type" specified in the action object.

This is part one of my Redux segment, next week I should have another post ready to go more in-depth and clarify a few more things. Feel free to leave some comments on things that could use better explanation or things you'd like to hear more about!

If you don't want to wait, here's the Redux "getting started", which can offer more clarification!

https://redux.js.org/introduction/getting-started

Beginner's Guide to Vimium, The Hacker's Browser

Jade Doucet — Fri, 08 Nov 2019 21:40:57 +0000

As a laptop user, dealing with a track pad can be such a drag. Even with a mouse, running the pointer around the screen while simply trying to do a quick google search can also reduce your productivity. If you were to add up all of the seconds that you'll save from using Vimium, once you're comfortable with it, you'd never want to go back to using a mouse when browsing the web.

What is Vimium anyways? Well, it's a chrome browser extension that can make you feel like the ultimate hacker you truly are; or someone that just appreciates efficiency. In programming, many of us use "Vim", which is a CLI (command line interface), and it has a ton of shortcuts to make a coders life more efficient. In that same way, it adds shortcuts to your favorite every-day browser to make surfing the web more fun and efficient.

To play around with some of the commands I'll tell you about about, feel free to download the extension from the google store here.

Basic Navigation

First, open up your chrome browser, typically your cursor will be focused in the address bar, feel free to type and go to your favorite website; I'll just go to YouTube. From here, we have quite a few options. Let's hit the "f" key; you should see lots of letters pop up like this:

This is how most page navigation is done. By typing the corresponding letters to the item you'd like to select, this will bring you to the page you want to visit.

In this image, you you can see that "fa" will select the search bar. There is actually a slightly faster way to select input bars on a page, with "gi". I like to think of it like "Grab Input".

Now we know how to search and select things, but how about scrolling through results? That's easy. We can use "d" for down and "u" for up. We can also use "j" to go down and "k" to go up, these two will scroll line by line. Think of it like, "just down a line" or "keep it slow going up". Whatever helps remember these!

For whatever reason you may want to visit the bottom of a website, you can also hit "G" (shift + g), which will immediately take you there. On the obverse, you can hit "gg" to get back to the top of the page.

Tabs

Going back to selecting items, "f" is cool, but you can also optionally open links in a new tab by using "F" (shift + f) instead. You can see that this will open a tab, but you're not in it. "K" (shift + k) will take you to the next tab in your browser. Alternatively, you can use "J" (shift + j) to go back a tab as well.

When you're done, to close your current tab, just hit "x". If you didn't mean to close your tab and you did, you can use "X" (shift + x) to re-open your tab!

One last important thing, when you want to visit another website, you have a few options. You can open a new tab using "t", or you can press "o" to Google search for a different website or even cycle through your history.

For more info on basic commands, you can hit "?" to open up the Vimium help page which shows the most commonly used commands. You can also view their full documentation on Github. Now go get out there and show your friends how cool you are by using your keyboard to navigate websites!

Improving U/X with Front-End development

Jade Doucet — Sun, 20 Oct 2019 19:13:28 +0000

Many people use the terms UX and UI interchangeably, but what exactly are they? Is there a difference? I'll skim the surface of UX in this post and hopefully provide some insight into the difference between these two acronyms.

UX, short for User Experience, is often used to describe things such as load time of features on a website, readability of words/pictures, and as well as how the page looks as a whole. These all tie into what could make or a break a user experience.

UI, short for User Interface, will definitely cross into the realm of UX, and that is because as I've aforementioned, the layout of the web page will surely impact a user's experience. How the user will interact with the page, the layout of your page, as well as accessibility are key features of your User Interface. It's easy to see here how UX and UI are so easily used interchangeably, but alas, they are still two separate entities.

Building onto my description of UX, I still have yet to talk about a few key ideas. Yes, UX involves technical aspects such as load times and page legibility, however this also ties into human emotions. How a person feels and what sparks in their mind while visiting your website will be a huge part of UX. Keeping this idea in mind when designing your website can make a user become a long term user of your website, or make them feel so out of their comfort zone, or upset, that they will not want to visit again.

With all of this in mind, how do we improve our user experience with Front-End Development?

Colors

here

Performance

here

Images

LAST

Mobile Compatibility

There are many more factors that can play into your user experience, (facebook has a department centered around triggering dopamine receptors in user's brains), but the route you take will solely rely on you! Check out some of the aforementioned links for more tips on making your website something that your target audience will enjoy.

Solving the problem: Find the odd int

Jade Doucet — Sun, 13 Oct 2019 19:39:31 +0000

In this post, I will be going over my solution for the problem "Find the odd int", which could be a potential interview question!

So, given an array of integers, find the integer that appears an odd number of times.

Sounds simple enough, right? Maybe not so much if you're a beginner developer. However, you'll feel pretty confident with this one after this walk through. If you'd like to try this one out before actually seeing my solution to the problem, feel free to open up a fresh repl.it.

First things first, I'll start with some pseudo-code. We have an array of integers that looks something like this.

There is only one integer here that appears an odd number of times. Don't worry about trying to count and figure it out in your head, we can make a function for that!

We know that we need a way of keeping track of each item in the array. Then, we need to keep a count of how many times each item has appeared within an array. We don't want to manually assign variables to each number or some simple shortcut like that, we want our function to work with even the largest of arrays. An easy way to keep track of an item, and how many times it appears may be done in an object. Also keeping in mind that we will need to return the single integer that appears the most, we can make a variable for that too.

So, we have our object to keep track of items from the array, then we have our result. Now our next step will be to loop over the array. We want only one of each value inside of our object, so we have to keep that in mind as well, probably as a condition. In code, we can use a forEach to loop over the array, and then simply create a condition at each item. If the item exists as a key on our counterObject, then we will simply increment the number at that object index by 1. If the item does not exist in our counterObject, we will just create the key and set it at a base number of 1, representing this numbers first occurrence within our array. In code, that will look something like this:

Now, if I throw a console log in this function after the forEach function, we will see an ugly object like this

Cool, so now we can see that our object has a bunch of keys representative of every number that we've encountered in our array. Each item also has a corresponding number for the amount of times that it has appeared within our array. Awesome! Now we have exactly what we wanted.. but not quite. We still have to return that number which appeared an odd amount of times. We can see that the number, 7, has appeared 3 times, and the rest of the integers are even. We are on the right track, but now we need to think of a condition, as well as to loop over our object. We can loop with a simple 'for-in' loop, but we need to check each number to be odd. An easy way to do this, is by using the remainder operator, '%' (also referred to as modulo)! I know that a lot of people that aren't very math savvy are intimidated by this bugger, but don't fret. Our implementation with it is very simple. Since the remainder operator basically returns the number left over after an item has been divided as many times as possible by the number on the right without returning a decimal.

Keeping this all in mind, to find out if these values are even or odd, we can simply get the remainder after each number has been divided by 2 over and over. If a number is even, it's divisible by 2, so the result will be 0. However, we want that outlying odd number, which will return a remainder of 1 instead.Using that condition, we can just assign our result variable that we created earlier to the only number that passes this condition.

Lets implement that in our code!

Sweet! So we are done, right? We returned our result, and it's the odd number.
Wait...

Ughh, even more steps! We are returning a string because our object converted the number to a string! Don't worry. We can just add one more bit of code to fix this.

Boom, number. This is the most legible solution for myself, but there are many implementations of this problem. Feel free to check out other solutions on codewars, but you'll have to complete the problem first. Thanks for reading through!

Your First React Tutorial

Jade Doucet — Sun, 06 Oct 2019 13:47:15 +0000

Move over, AngularJS. There's a new sheriff in town. This sheriff's name is React! You've probably overheard conversations comparing the two, which can be related to comparing Microsoft Edge to Google Chrome. Microsoft Edge being Angular in this context. Sure, Internet Explorer, aka 'Microsoft Edge', has seniority over Chrome, but in the tech world, this means nothing when a new, more efficient, multi-capable, technology gets introduced. For anyone that's actually used AngularJS, this will feel familiar at times, but so much easier at the same time because React is an unopinionated framework.

Since I've peaked your interest enough, let's get to it! I used codesandbox.io to make a few of these snippets, and you can actually follow along there to play around with what you've learned here.

Starting here:

Clicking the "Add Dependency" button will give you an option to search for dependencies. All you need to play around in here should be react and react-dom. The react dependency will give us access to the react library. ReactDOM will allow us to have React's amazing rendering functionality.

Fun fact: These two actually were once together prior to v0.14. This may seem confusing, but ReactDOM is simply what's being used to glue our react code to the DOM. Don't think on it too much; ignore complexity!

Now that we have added react and react-dom to our dependencies, next is to import it! Thanks to ES6, we can do that by simply doing the following:

This short-hand syntax easily imports our newly-added dependencies to our project.

Now to the fun stuff!

Okay cool, now we have React and ReactDOM in our library. Lets put it to use! As you can see, we have this fun function in here called ReactDOM.render(). Don't get too freaked out here, most simply put, ReactDOM.render is a function, just like any other basic function, and it takes in two arguments.The first argument, as seen above, is what you would like to render. In my example, I've just put some h1 tags with some text between it. The second parameter is where you would like to render these things. In this case, our h1 tags will be rendered to the element on the DOM with the Id of "app". This will be added to the "virtual DOM" that React is well-known for, but for explanation purposes, this is what it would look like if the code was injected into your actual HTML code.

As you can see here, the code will be put in between the div tags provided, so for future projects, it's safe to assume that this is where your finished renderings will be placed. Remember that virtial DOM thing I mentioned earlier? This actually allows our web pages to load in much faster thanks to how React handles our code.

Check this out:

In this diagram, you can see that React's virtual DOM essentially "patches" your current code with the changes you've made from using the ReactDOM.render function. Later on you'll see just how powerful this is; you're able to split up your project into multiple pages and easily pass down information from parent nodes to child nodes of your application. This will be done using the react term, "props". This most effectively allows you to refer to another file's properties that you've passed down into the depending child file. Don't get tripped up here, it's much more simple than it sounds.

Feel free to play around with this example code we've created, this is actually the most basic use of ReactDOM and we haven't even utilized the amazing React library yet. Another article is coming soon with more fun-filled things that we can actually throw into that fancy ReactDOM.render function.

Queues? Que?

Jade Doucet — Sun, 29 Sep 2019 02:15:49 +0000

Being an object-oriented language, data-structures aren't an uncommon occurrence in the world of Javascript. All data-structures have fun little quirks that differentiate them, and in queues, one of their quirks is their structure. This is often referred to as FIFO (First In, First Out). This simply means that objects removed from the queue, will be removed on a first-come, first-serve basis. Kind of like waiting at the DMV, or a drive-thru.

Functionality and Structure

So, how does this work? Easy. Think of an array, but this array only has two main methods:

Enqueue
Dequeue

We can compare Enqueue to the Array.push method, which adds an item to the end of an array.

We can compare Dequeue to the Array.shift method, which removes the first element of an array.

There's one more important feature that's also similar to the Array.length method. Queues will also have a size property, which just maintains how many elements are contained within it.

Implementation

As you can see, implementation of a Queue can be pretty easy by using an array, but a another way is using a Linked List. Linked Lists point to the next object in the list, which is really all you need. In the same manner, both Queues and Linked Lists will have a head and a tail.

Here is my most recent implementation:

In this code snippet, I created a a class called Queue. In the constructor function, the queue is given a size to keep track of how many items are being added, and the index is keeping track of the items place in the 'queue'. The queue in this implementation, is being stored in an object with key/value pairs. Here, we have count keeping track of the key that is to be dequeued next, so we are making sure that the first item in that object is the one to be removed. Size is also decremented to reflect an accurate amount of items within the queue.

In your first look over the code, the counter variable may be seemingly confusing. However, keep in mind that in this implementation, I am using an object, which I am then deleting properties from by using the delete keyword. After the deletion, I'm incrementing count to keep track of which item is essentially at the start of the Queue. In this example, I've kept the time complexity at a constant by only deleting a single item each time dequeue is called, and just keeping track of the items in queue with a counter instead of rearranging the entire object, which would then, at the minimum, make the time complexity of this implementation linear.

Something I haven't mentioned in this example is the "index" of the queue, which I am only incrementing when items are Enqueued. The reason why this is being incremented, is because of similar reasons before, to keep the time complexity constant. The index is giving each value their new key, which is their position in the queue. Without the index, the counter being incremented on the dequeue method wouldn't work properly, and vice versa.

Conclusion

All in all, Queues are a simple data structure. They are mostly used for things like some kind of help request ticket system, or even just waiting for food at any fast food chain. Things are added and removed from the queue of orders being placed often. So, the next time you're waiting in line for your french fries, hopefully this post comes to mind.