Recently I worked on an app completely based out of Node.js. This was new for me, as I have generally only had experience with Node as a back-end. For the app I am building I followed the MVC format. While you can use basic HTML to render your front-end views, I quickly found that templating engines made my life much easier.
Templating engines are essentially extra frameworks that you can use to help you create the HTML for your web page. …
Node.js has quickly become one of the most popular tools for developers. While mostly utilized to work on the backend of applications, you can actually use node.js to write an entire app. Here, I want to quickly show you how to write a basic node.js server, with no additional frameworks such as express.
For our basic server, we will set up with 2 end points on localhost3000. In our code editor, here is the following code.
On lines 1 and 2, we are importing libraries that we will need from node.
HTTP allows us many functions relating to the browser…
Next up in my coverage for algorithms, is the left rotation problem from Hackerrank.com.
For this problem, you are given a number (d) and an array (arr), you should rotate the digits in the array to the left according to the value of d.
arr = [1,2,3,4,5] and d=2 should result in an output of [3,4,5,1,2].
if arr = [1,2,3,4,5] and d=4, the output should be [5,1,2,3,4].
While there may be a more elegant one line approach, for my solution i decided to utilize a simple for loop.
To define our loop, we set i = 0. While…
Creating clean, re-usable front end code is very important for a developer. Two of my favorite options are flexbox and CSS grid. The two can be used together, but this blog is going to cover some of the deciding factors you can look at when deciding which of the two to use.
The biggest differentiation between flexbox and CSS grid is that flexbox is one-dimensional, where as CSS grid is two-dimensional. This means that with flexbox, you pick to either align items along the X or Y axis, but with CSS grid, you can align based on both the X…
One common component to find in many react projects is a search bar. This can be implemented a number of ways, whether it be as a standard search that renders information when submitted, or more of a filter style, where the items on the page re-render as the filter is typed and applied. In this blog I want to walk you through set up of a basic searching function, using react hooks.
In our example, we are fetching our data that is a list of student names. …
I recently deployed a personal portfolio site to the internet to show off my work and establish my brand. When it comes to hosting a site and quiring a domain, there are many suitable (and free!) options. I have worked with both GitHub Pages as well as Netlify, for this article we are going to cover signing up and deploying with Netlify.
3. On the free version, you will have the option to import your…
“Regular expressions“, sometimes referred to as “rational expressions” or “regex”, are can be a powerful tool when used properly. Generally, regex is a sequence of characters that defines a search pattern across a string. This can be handy in many cases, such as validating a credit card, or social security number, making sure an email address is in the proper format, or even for tools such as profanity filters.
Below, are some great helper sheets to refer to when creating or reading regex expressions.
g, i, & m are placed at the end of your regex to modify your searches.
Given a time in -hour AM/PM format, convert it to military (24-hour) time.
Note: — 12:00:00AM on a 12-hour clock is 00:00:00 on a 24-hour clock.
- 12:00:00PM on a 12-hour clock is 12:00:00 on a 24-hour clock.
Complete the timeConversion function in the editor below. It should return a new string representing the input time in 24 hour format.
timeConversion has the following parameter(s):
A single string that represents a time in -hour clock format (i.e…
On my recent journey to learn React native, one of the biggest changes is the options for navigation within your application. I was used to using react-router, however with react native applications we can take advantage of a much more mobile-friends style of navigation. This blog will not dig too deep into implementation, but more into best-case uses and the key differences in styling.
The most basic and common of the react-navigation-stack options is the switch navigator. This will allow you to “switch” back and forth between screens while utilizing a back button on the header bar. …
For our example, we will look at creating a Social Security Number validator in React Native. For this, the following must be met:
1. 3 digits, followed by 2 digits, followed by 4 digits, separated by dashes.
2. only numbers
The code block…