Learning about the DOM in JavaScript, jQuery, and More

A recap of my recent experience with an intermediate JavaScript course on Lynda.

Screenshot of Lynda course
Click the image to watch the preview for ‘The DOM in JavaScript, jQuery, AngularJS, and React’ on Lynda.com.

I recently finished an interesting course on the DOM and different versions of JavaScript. I liked that it was just a taste of JavaScript, jQuery, Angular, and React. It’s called The DOM in JavaScript, jQuery, AngularJS, and React. It was released in 2017.

Much of the course was focused on regular JavaScript. I’m glad I’ve spent so much time studying JavaScript, because a lot of basic things didn’t need to be explained for me in this course.

Although I know about the DOM, using HTML, this focus on the DOM using JavaScript was an interesting approach. For instance, traversing the DOM (with classes and IDs) was fun:

document.body.children[4].children[1]

This selects the 5th child of the body, then the 2nd child from that. This is almost like using CSS selectors to select parent and child elements.

One of the things I love about Lynda is that they recommend additional courses to learn more about related topics. A few courses the instructor recommended included:

  • JavaScript Essential Training
  • jQuery for Web Designers
  • Angular 2 Essential Training
  • ReactJS Essential Training

They may have updated it, but I’ve already taken the JavaScript Essentials course before, so I’ll check if the others are already on my list. Angular is past version 2 by now, but maybe it’s easier to get started with that version.

 

Website Update, June 2017

It might not be easily noticeable from this blog, but over the past few weeks I’ve updated my main website. I tend to do this a few times a year, as I gain feedback, or learn what works and what doesn’t work. Hopefully this change will stick around for a while. This post is documentation of what I did and why.

Research

Over the past several months, I have been trying to get a better understanding of what UX managers look for when they view a candidate’s portfolio. There were a few resources I looked at that helped inform my opinions in this regard. After reading a few articles and slideshow presentations, reviewing websites, and gathering feedback, I had a few ideas. Here are a few points and screenshots demonstrating my ideas and how they affected the design.

I. Overall Design and Home page

One way or another, I ended up looking at a few portfolio pages from designers I’d met in-person or came across online. Despite reading several of those “10 UX Portfolios To Admire” articles, what I’ve discovered is that sometimes simple is best. And that translates to a template site, often paid.

Paid subscription services are anything from $6-$8 or more each month. I don’t think someone should have to pay a monthly fee in order to apply for a job. That meant I’d have to create it myself or use a free service. I’ve used Carbonmade, Coroflot, and even Behance (barely), which are all free. But their designs are limited and my research showed that managers will evaluate candidates on the usability of their portfolio, even when it’s hosted by a third-party.

Reviewing both free and paid sites, the ones I liked best were made by the paid services Squarespace or Wix, using remarkably similar templates. Essentially, that template was a site with basic navigation, a grid of projects on the home page, project pages, and a simple About page. Following that template, I came up with a basic grid for my home page. But I jazzed it up a bit with some fancy CSS throughout the site.

II. Presenting an Overview

In previous designs, I assumed that managers would read. But, my research showed that they might spend 30 seconds reviewing a portfolio, for the first time. I also came across numerous resources insisting that candidates outline role, problem or goal, and outcome when presenting their work.

So you can see in the screenshot below how I’ve outlined this information right at the top, next to an image.

Overview of the project and role, along with keywords. This image is actually a screenshot from the company’s website, promoting the product.

II. Fast Scanning

Another consideration was the amount of time a manager spends reviewing a portfolio. My research showed that managers only spend 30 seconds on a portfolio and review 12-50 portfolios for a given position. I used the process/approach section to break up information into digestible, one-sentence long chunks.

An earlier version of this section was a 3-column layout, with longer paragraphs. Breaking it up makes it easier to scan. Fontawesome does this, also, on their homepage. http://fontawesome.io/

III. Tell a Story

The word “storytelling” is thrown around a lot, especially in relation to self-promotion. I think “storytelling” is overused and cliche, and I’ve written about storytelling a few times.  However, for the redesign, I thought about the concept of beginning, middle, and end. Thinking through these part of a story, I ended up with the following sections: overview, a process/approach section, documentation, and outcome. Outcome really helps “sell” it as a story, because it provides a conclusion.

Outcome

Having talked about outcome, what now?

One idea I thought of, as I was writing this, was to shrink the size of the thumbnails on the home page to show more information on the screen. But, I think the “hero” image/section is what takes up most of the space, vs the size of the thumbnails. This is one change though; I have a running list of updates and ideas on Remember the Milk, where I can also track priority.

I plan to ask more friends for feedback and maybe get feedback from a few connections on LinkedIn. It was fun, I learned a lot. I look forward to adding more projects and the site evolving over time. Or until I redesign it again!

Web/Portfolio Update – Part 2: Performance

Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.

This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)

Getting Started
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.

Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.

Optimizing Files
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.

“Gzip Compression”
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.

Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.

screenshot of checklist of full site optimization recommendationsAnnoyances
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.

The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)

Summary
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.


* Yes, prettify is word!

The Blog is Back!

After several years of nothing, my blog is finally working again (fingers-crossed)!!!

I truly am at a loss to explain what happened. It’s been so long, I can’t attribute it to anything specifically that I installed or failed to install, or migrate, or deleted… Who knows. I know this Twitter feed thing isn’t working right. I need to find out what else is broken. I doubt all the pictures show up correctly, but they appear on and off on the backend.

I’d recently decided to move my blog from WordPress to Jekyll, as I’m doing so much with learning to code these days. I thought it would be a nice experiment, and also I’d have more control over the output. It might be a good idea to continue with this anyway, since I am not sure how long this will last. However I’m currently having issues with Ruby and Jekyll, and not all of the plug-ins that are supposed to work seem like they are working.

On the other hand, this might be a good excuse to dive more deeply (or start, really) learning about WordPress customizations, theme development, and WordPress administration customization. More PHP and MySQL stuff, which is where I was headed anyway.

In any case, I feel excited…finally!!


For more information about migrating a WordPress blog to Jekyll, there are a few resources that might be helpful – although if there can be trouble, there probably will be!