In JavaScript, to get today’s date and time, all we need to do is use a call to Date() For example: let today = new Date(); This gives us today’s date and the current time, in the form of a Date object that looks like this: ‘Date’ is the key (left), and the value is … Continue reading JavaScript: How to create a formatted date time string
jQuery: How to use jQuery in a project and confirm it is working
The fastest way to make jQuery available for a project is to use a CDN in the HEAD portion of the HTML. For example, here is a CDN for jQuery 3.3.1: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> With this in place, you can confirm that jQuery is available and working by adding this block of JavaScript code to the … Continue reading jQuery: How to use jQuery in a project and confirm it is working
HTML & CSS: How to expand text on hover
In this article, I will show how to display short text on a web page that can expand to longer text on hover. The trick is to use two spans inside of a div. The first span contains the shorter text and the second span contains the longer text. For example: <div class=”expanded-text”> <p class=”text”> … Continue reading HTML & CSS: How to expand text on hover
HTML & CSS: How to stack Font Awesome icons
In order to stack Font Awesome ions, someone wrote a custom CSS solution that features a class called “icons-stack”, which looks like: .icon-stack { position: relative; display: inline-block; width: 150px; height: 150px; line-height: 80px; vertical-align: middle; } .icon-stack-1x, .icon-stack-2x, .icon-stack-3x { position: absolute; left: 0; width: 100%; text-align: center; } .icon-stack-1x { line-height: inherit; } … Continue reading HTML & CSS: How to stack Font Awesome icons
Atom: How to run MySQL queries in Atom using a package called Data Atom
In this article, I will demonstrate how to run queries from within Atom using a package called ‘Data Atom’. Step 1: Install Data Atom package Warning: Before attempting to install any packages in Atom, make sure you disable any real-time virus or malware protection programs you have running, such as Malwarebytes. In the Atom Settings … Continue reading Atom: How to run MySQL queries in Atom using a package called Data Atom
Spacebars: How to handle an empty data container when iterating with #each
In a Meteor project, when using Blaze (Spacebars) to set up iteration through a data container in an HTML template, the normal pattern is to use an ‘each’ block. For example: {{ #each dataContainer }} … HTML tags here … … HTML tags here … {{ /each }} An each block starts with #each and … Continue reading Spacebars: How to handle an empty data container when iterating with #each
HTML & CSS: How to create a progress bar with stacked divs
In web design, there are lots of cases where you will need to stack <div> elements on top of each other in order to achieve certain effects or layouts. One example of this is a progress bar, where you have a background color, a foreground color (to mark the progress), and maybe a label. The … Continue reading HTML & CSS: How to create a progress bar with stacked divs
Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
To install node.js, start at the nodejs.org website: https://nodejs.org/en/ Then click the green box to download the .msi. This will download the “node-v9.8.0-x64.msi” to your downloads folder. Then click the .msi to install node. I chose to change the path to C:\nodejs . Then once the installation is complete, restart your computer. Once the computer … Continue reading Node.js: How to install Node + npm and confirm the installation in less than 5 minutes
Meteor: How to use an image background in your CSS
To use images in Meteor, we must first create a top level ‘public’ folder and place our images folder inside of it. This is because Meteor is a full stack framework that takes care of both the client side and the server side. On the server side, images would normally be placed in a public/images … Continue reading Meteor: How to use an image background in your CSS
JavaScript: How to use the array.map( ) method
The JavaScript map()method creates a new array with the results of calling a provided function on every element in this array. For example, lets say you have a small array of numbers called “numbers”: var numbers = [1, 4, 9]; We can use .map on this array to find the square root of each of … Continue reading JavaScript: How to use the array.map( ) method