Review: JavaScript & jQuery: Interactive Front-End Web Development

JavaScript & jQuery: Interactive Front-End Web Development by Jon Duckett is from Wiley & Sons (2014). This book earns high praise from me as educationally sound. It reminds me a little of the Head First series of books, except this book isn’t silly. But it does use a number of interesting techniques to help you learn that are based in sound pedagogy.

Color Coding

There’s color coding for everything, which helps some people learn. Diagrams and infographics are on a dark background. Within the page itself, various elements are also color coded.

An example diagram page

Background pages and examples are on a light background.

An example page

An example page

Again, there is color coding within the page itself.

Reference pages are on a gray background with HTML, CSS, and JavaScript codes all shown in different colors. There are also separate color schemes for introductory pages and summary pages in each chapter.

Clear Language

The language is plain, very careful, easy to understand by anyone. Every single detail is explained in clear, simple sentences. It’s a masterpiece of clear writing. For example, here’s the initial description of jQuery:

jQuery is a JavaScript file that you include in your web pages. It lets you find elements using CSS-style selectors and then do something with the elements using jQuery methods.

Scope

Beyond the pedagogy that went into presenting the material in the book in a way that makes it easy to grasp, there is also the scope of the book. It covers more concepts than I’ve seen in a book of this type. It covers all the JavaScript basics, the Document Object Model, jQuery, Ajax & JSON, APIs, error handling and debugging, filtering, form enhancement and more. The book is over 600 pages long.

The examples are real world with downloadable code. The code shown in the book is  annotated (and color coded) with every detail fully explained. The output for every code example is pictured next to it.

Programming books often make my eyes cross and close automatically, but this one kept my interest. I learned many new things about topics that I hadn’t really understood before. I’d recommend it for independent learning. The exercises and examples in the book would also work as a classroom text for a JavaScript class.

Summary: Detailed, careful, guide to JavaScript, jQuery and more.

A review by Virginia DeBolt of JavaScript & jQuery: Interactive Front-End Web Development (rating: 5 stars)

Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy. You can buy the book from Wiley, as well as Amazon. The link to Wiley is not an affiliate link.

Images © http://javascriptbook.com/

What are Implicit ARIA Roles?

For a while now, I’ve been seeing mentions of implicit ARIA roles as something web designers and developers should be aware of and know how to use.

In the case of ARIA roles, the word implicit means that the browser interprets certain HTML elements semantically and treats them as if an ARIA role were assigned to them. In these situations, the web designer does not specifically need to add the role attribute to the element. The addition of the ARIA role is considered redundant in some situations.

If you do add the role information, it does no harm, but, in my opinion, it’s best practice to know when you do need to add it and when you don’t.

For elements that have been around for a while, say the a (anchor) element, the browser implicitly assigns a role="link" attribute.

For the newer HTML5 semantic structural elements, browsers already have some of the roles built in. This improves as browsers add support. A header element that is not a descendant of an article or section element is implicitly assigned role="banner". A footer element that is not a descendant of an article or section element is implicitly assigned role="contentinfo". There are a number of other cases like this as browsers add support for HTML5. They are detailed at the W3C in two tables. This table shows strong native HTML semantics with default ARIA semantics. Just under it, this table lists the default implicit ARIA semantics for many other elements, along with any restrictions that apply.

In addition to the information at the W3C, check out this article by Steve Faulkner: HTML5 Accessibility Chops: When to use an ARIA role.

Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel

The Structure category of DW’s Insert panel

There are some helpful HTML5  choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.

Contrast Ratio: A New Color Contrast Tool

Here’s a very nice new tool for checking color contrast against WCAG 2.0 standards for accessibility. It was created by Lea Verou and is called Contrast Ratio.

The tool allows you to swap text color and background color. It permits the use of transparency in both text color and background color. If your color choices fail to meet the WCAG 2.0 standards, the ratio button in the middle of the page turns red. Hovering over the button tells you how many, if any, of the WCAG 2.0 standards your colors meet.

Hover over the middle button to see how you're doing

Hover over the middle button to see how you’re doing

Bump up the level of opacity a bit on this color scheme and it passes.

A passing color ratio

A passing color ratio

Directions on the page explain some fancy ways to change the values for text and background colors. These are fun and time saving, but the real value in the tool comes from the clear and obvious way it reports on how the colors test out against WCAG 2.0 standards.

Why have a wrapper div?

Students may have a problem grasping is the need for a wrapper div. I frequently find myself explaining it numerous times until the message finally sinks in.

The metaphor I’ll use today will be to compare a wrapper div to a fence.

A wrapper div, or a container div, has no semantic meaning. It’s a generic container. Therefore, <div> is the proper tag. A <section> element should not be used as a container. [See: Sections and Articles are Not Generic Containers]

What does a fence do?

  • It demarks the edges of your property.
  • It contains animals or children within a prescribed area. It keeps them from getting out.
  • It creates a border between one area and another.
  • It can be plain or decorative.

A wrapper div in an HTML document does the same things but to a layout instead of to actual property.

  • The wrapper holds a design within certain boundaries.
  • The various areas of a design cannot escape from the boundaries set by the wrapper.
  • A max-width or min-width or varying width based on an @media query can be set for the wrapper that makes it size a design responsively.
  • The id identifying a wrapper provides a CSS hook which enables more than size constraints. Borders and other decorations can be added.

With a wrapper div in place, a layout can be centered on the page. The width of the design can be controlled for easier reading and line-length.

It’s necessary to create the wrapper with a div and an id:

<div id="wrapper">everything on the page goes in here</div>

One of the principles of HTML5 is to pave the existing cow paths. Hence we have all sorts of new semantic elements like header, main, and footer that were once created using the same div with an id technique.

If wrappers are so great, why isn’t there a new HTML5 element called wrapper? I don’t know the answer for sure, but I’m guessing it’s because a wrapper is not a semantic element. It’s merely a container, a boundary into which you place all your semantic content.

By the same token, there is no ARIA landmark role for wrapper or container divs. The container carries no semantic meaning, it just puts a fence around the content. There’s no need to indicate it as a landmark on the page.

3 Ways to Add Instagram to a WordPress Blog

There are several choices open to you if you want to bring in your photos from Instagram into a WordPress blog: You can add a badge from Instagram, use embedding, or choose from a number of plugins.

How to Add Instagram to Your WordPress Blog

Place an Instagram Badge on Your Site

Sign in to your account on Instagram. There’s a “badges” option in the menu. A badge will put an icon on your site that links to your Instagram URL. It doesn’t bring in any images.

Instagram badges

Select a badge type and copy the code. I selected an icon, copied the code, and pasted it into Text view in a post. What showed up was a nifty little Instagram icon that linked to my feed on Instagram.com.

If I wanted this type of Instagram badge on my blog, I’d paste the code into a text widget in my sidebar, near my other social media badges and buttons. It doesn’t make much sense to put this icon in a post, because it will get buried over time.

Embed a Single Photo

You can put a single Instagram photo into a blog post using the Instagram “embed” option. Find the icon showing three dots next to the comment box and click it to see the embed option.

Embed a single Instagram photo

Instagram gives you the option to embed a single photo. Copy that code and paste it into the Text view of your post, and the photo will show up.

Instagram’s embed feature allows you to embed other people’s photos in your blog as well. The link to the original image on Instagram is included in the embed code, and shows up when you hover over the word “Instagram.”

Having this link included with the image skirts copyright problems by linking directly to the photo on the Instagram feed of the creator of the image.

WordPress Plugins

With a plugin, you get more than just an occasional image to insert into a post. There are plugins to create image sliders, to back up your Instagram photos to your WordPress database, or to place a small gallery of photos in your sidebar; others do even more. Most of the plugins below only require your Instagram username to work. The last one I mention gives you the option to set it up using the Instagram API.

DsgnWrks Instagram Importer, according to its description, “will allow you to import and backup your Instagram photos to your WordPress site. Includes robust options to allow you to control the imported posts formatting including built-in support for WordPress custom post-types, custom taxonomies, post-formats.” This plugin also imports Instagram video. When you first launch DsgnWrks Instagram Importer, you can set up the import to filter by hashtags or by date. There are a number of custom tags you can use to control the title and content of imported images.

Instagram Picture provides a way to add Instagram images to almost any position in your blog. You can use shortcodes, widgets, and PHP to insert images with this plugin. Here’s a screenshot from the developer of one of the widget styles you can choose with Instagram Picture. This plugin also has a feature for adding individual image to posts.

Instagram Picture plugin

Instagram Slider Widget will display a grid of thumbnails like you saw in the image above, but it also has the option to shows up to 20 images in a slider. You can set the number of images to include in the slider and set a time for how often the plugin goes to Instagram to look for new photos. Instagram Slider Widget has an option to insert the images into your WordPress Media Library, which gives you a backup of your Instagram photos.

Alpine PhotoTile for Instagram offers more options than the plugins mentioned above. It retrieves (but does not back up on WordPress) as many as 100 photos. According to the developer, “The photos can be linked to your Instagram page, a specific URL, or to a Lightbox slideshow. Also, the Shortcode Generator makes it easy to insert the widget into posts without learning any of the code. This lightweight but powerful widget takes advantage of WordPress’s built in JQuery scripts.” The lightbox feature on this plugin sets it apart from the others. Alpine PhotoTile for Instagram will insert photos in a page, a sidebar, or a post. Of all the plugins I’ve mentioned, it has the most and best reviews.

The WordPress plugin directory has many, many Instagram plugins; I’ve only scratched the surface with these four. The ones I’ve highlighted all have good reviews. I suggest you look at the number and quality of reviews when you consider any plugin. If you use a plugin yourself, it’s very helpful to the WordPress community (you) if you return to the plugin page and leave a review.

Keep in mind that a widget that doesn’t store your photos in WordPress, but instead reaches out to Instagram to retrieve photos, may experience delays in loading if the Internet is clogged up that day.

Many Instagram plugins allow you to display not only your own photos, but the photos of people you follow or photos with a particular hashtag. If you choose a plugin with that capability, check carefully for the copyright issues involved, and make sure the original creator of the image is linked to the photo. I can definitely see the value of a post with a slideshow based on a particular hashtag, say #blogher14. Enjoy sharing your Instagram photos on your WordPress blog!

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.