JavaScript Tip: Rendering Engines

A rendering engine in a browser creates what you see on a screen. There are different ones for each browser.

Firefox Gecko Gecko
Internet Explorer Trident
Chrome Webkit
Safari Webkit
Opera Webkit

When you talk about code working differently in different browsers (modern browsers), you are generally referring to the rendering engine. That’s why you have very few differences in support between Chrome and Safari; they are both built on the same open source rendering engine, Webkit.

Some rendering engines are faster than others, but this also extends to the JavaScript engine in each browser. Just as some rendering engines are better than others, the same can be said about JavaScript engines that are built into the browser. The speeds of these JavaScript engines vary greatly, and this is generally why JavaScript is so slow to execute when compared to other technologies, like CSS.

What is MVC?

MVC stands for Model-View-Controller, a design pattern that’s very popular in the web development space.

There are three pieces to the MVC pattern:

Controller

The Controller processes and responds to user events and actions and invoke changes to the Model and the View based upon those.

Model

The Model comprise functions that interact with the database or perform complex operations (business logic objects).

View

The View provides different ways to present the data received from the model. They may are normally templates that are displayed to the user (presentation – user interface). Continue reading

JavaScript Tip: null

You can use null to explicitly indicate that an object property does not contain a value. Typically, if a property is set up to contain a value, but the value is not available for some reason, the value null should be used to indicate that the reference property has an empty value.

For a variable that has a value of null, the typeof operator returns ‘object’. If you need to verify a null value, the ideal solution would be to see if the value you are after is equal to null. Below, we use the === operator to specifically verify that we are dealing with a null value.

When verifying a null value, always use === because == does not distinguish between null and undefined.

JavaScript Tip: Nested Arrays

Sometimes, you’ll need to store an array within an array. Sometimes, you’ll require even more nesting.

Note: although it’s possible to nest a number of arrays, I’d advise against it, as working with many array indices can be confusing to work with.

Let’s start with two simple arrays, which we’ll call them x and y. We’ll fill x with some values:

Continue reading

Progressive Enhancement

To learn more about JavaScript techniques, you can take the JavaScript class

Progressive enhancement is the fundamental base for all front-end development. At its most basic level, it is creating a functional separation between HTML, CSS, and JavaScript.

Progressive enhancement is a layered approach to Web design, where focus is put on content, the user, and accessibility. The first step is keeping your HTML, CSS, and JavaScript separated, but we don’t refer to them as HTML, CSS, and JavaScript. We refer to these three “layers” as structure, presentation, and behavior, probably so the methodology can be accurately applied to other areas beyond the current state of Web design.

Regardless, it is a bottom-up or inside-out building model for a website or application.

You first focus on the content and mark it up with semantic and meaningful HTML. This is the first layer, “structure.” After the content is properly marked up, we can move onto layer two, “presentation.” On the presentation layer, we deal with CSS. The third layer of progressive enhancement, “behavior,” we deal with last.

3_layers
Continue reading

CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions. Continue reading

CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.


Continue reading