Learn about web performance from the experts. These videos provide a wealth of knowledge about how to make web pages faster. Everyone knows what happens when a page loads slowly: the visitor leaves. That much is simple. But what is not always so obvious is what to do when you have addressed the “low-hanging fruit.” […]
Video – Back-End vs Front-End Web Programming Languages
The main difference between a back-end and a front-end web programming language is where the code is executed. In this video, I demonstrate how a back-end programming language is executed on the server, whereas a front-end web programming language is executed in the browser. Read the Full Post: What is the difference between a back […]
Super Easy HTML Video Support with LongTail Video’s JW Player and JavaScript
This video player makes it simple to present video in your HTML page, and configure a wide array of options While the new HTML5 video element brings much promise to the concept of full native browser support, it can still be a bit of an effort to provide cross-browser consistency. LongTail Video’s JW Player offers […]
Visibility hidden vs display none – What is the difference in CSS ?
With visibility:hidden, the element still takes up space. With display:none, it is effectively removed from the DOM. Hiding DOM elements with CSS is a common task. Some wonder whether they should use visibility:hidden or display:none. So, let’s think about Visibility hidden vs display none. Before you decide, the question to ask yourself is: “do I […]
CSS Fixed Position
With CSS fixed position, the element is completely removed from the document flow, but positioned absolutely in relation to the view-port. You can then use the “top”, “bottom”, “left” and “right” properties to specify the exact location in which you want it. Sometimes you may need to place an element in an exact position. That […]
jQuery.off()
With the the jQuery off method, you can unbind handlers for one or more events, for each matched element. Most of the time, front-end web developers are concerned with binding event handlers — that is, defining a JavaScript function that will be executed when an event occurs. An event can be a mouse click, a […]
JavaScript Array.prototype.unshift()
The JavaScript unshift method adds the specified value to the beginning of the array and returns the new length of the array. It is the most efficient way to add an element to the beginning of a JavaScript array. While some may be tempted to use the Array.prototype.splice() method to add an element to the […]
JavaScript Array.prototype.shift()
The JavaScript shift method removes the first element from the array and returns that element. While it may be tempting to use the Array.prototype.splice() method to remove an element from the beginning of a JavaScript array, believe me, Array.prototype.shift() is the best way to do it. And just as a side note, I’ve always felt […]
CSS Relative Position
With CSS relative position, the element still affects the document flow, but it can be offset, or “nudged” around from its original location. The element will appear to have been moved visually, but its effect on the DOM remains the same. Changing the visual location of an HTML element is a common front-end web development […]
How do I move DOM elements with jQuery ?
The jQuery.appendTo method makes it easy to move a DOM element. You won’t need to be concerned with creating or destroying elements and event handlers are preserved. Moving DOM elements using vanilla JavaScript can be a bit tedious. It’s certainly possible, and it is a good idea to understand the steps, but it does require […]
jQuery.filter()
jQuery can return one, or multiple HTML elements in the matched set. jQuery.filter() reduces the elements in that matched set, based on a criteria that you provide. Most front-end web developers understand that jQuery literally queries the DOM, and returns a set of elements that match the CSS-like text string that you pass to the […]
Angular Starter Project with Basic Routing & System.js
An Angular starter project with basic routing, System.js as the loader and a local Express.js web server. Starting an Angular project from scratch can be tedious, but the Github repo links at the end of this post provide a starting point that you can easily clone, edit and shape as needed, and should save you […]
What is the difference between general sibling and adjacent sibling combinators in CSS?
When making the differentiation between general sibling and adjacent sibling combinators, ask yourself if you want to target every sibling of the target element, or just the very next one. In CSS, HTML element relationships play an important role in targeting. It’s true that you can use IDs, which means that your CSS selector can […]
What is the difference between inline and block in CSS ?
A block-level HTML element will always create a new line after the closing tag, whereas an inline HTML element will not Inline vs block is one of the most important factors when choosing which HTML element to use in your markup. Semantics matter as well, and this should always be considered. But the display behavior […]
JavaScript Array.prototype.join()
The JavaScript join method converts an array into a string. Converting an array to a string in JavaScript may seem like an unlikely scenario at first, since they are dissimilar types, but this is not as uncommon as one might think. I’ve found that when I want to build a complex string, organizing the various […]
How do I use the Angular ngModel directive?
The ngModel directive creates a two-way data binding between an HTML form element and the component. In the most recent version of Angular, data binding is one-way by default. Notably, this is one of the key improvements over Angular 1.x in that it eliminates unnecessary performance issues that can crop up quickly. But the beauty […]
Creating your First Node Module
By defining your node module in package.json, you do not need to be concerned about its physical location when referencing it in your code. Sometimes your Node.js application depends on functionality that falls outside of Node’s core components. In this case, you’ll need to import that functionality. This can be achieved with a node module. […]
How to test HTTP POST with the Node.js request Module
Testing HTTP POST requests is usually tedious. Bit with a few lines of JavaScript, you can spin-up your own HTTP POST testing tool. In web development, GET and POST requests are quite common. GET requests are the ones more frequently seen, and in fact, when you load most web pages, the majority of the requests […]
Fat Arrow Function Basics – Node Modules
JavaScript Fat Arrow Functions solve the “this” problem by maintaining a reference to the object to which a method belongs. This is the case even with nested functions. One of the most popular aspects of JavaScript is the fact that functions are first-class citizens. So, this aspect of the ECMAScript specification provides a great deal […]
Node.js – What is the Difference Between response.send(), response.end() and response.write() ?
response.send() sends the response and closes the connection, whereas with response.write() you can send multiple responses. In this article, I will explain the difference between response.send(), response.end() and response.write(), and when to use each one. When you’re working with the Express.js framework, you’ll probably most frequently be sending a response to a user. This means […]
