Katrina Moody

A geek in love with Coffee, Coding, WordPress and Life

You are here: Home / Blog

Blog

JavaScript for WordPress – Focused Learning in One Tremendous Course

Learning JavaScript for WordPress via Zac Gordon's JavaScript for WP course has been quite adventure for me.

Like many geeks, I learned most my development skills in bits and pieces. Google was (and always will be) my friend along the way; Googling different functions and examples as I needed them served me well before.

But I never learned the foundational, or core, bits and pieces. I could wrangle some JavaScript as needed, but I wasn't able to write my own code from scratch. As a self-professed geek, this just wasn't acceptable!

This course stood out from others as one that would help me fill in the foundation to my JavaScript learning.

Learning JavaScript for WordPress, Deeply

I was looking for something that would help me learn this JavaScript thing deeply, and there's a reason for that. I have a pretty busy life, and trying to dedicate time to learning new things is wasted effort if I don't put my all into it.

Life is full of distractions. And I know those distractions can take time away from the concentration I need to learn anything deeply. Like JavaScript. Since I can only devote an hour or two most days to this, I did what I could to make that time as constructive as possible.

I used my own knowledge of my own learning style along with some deep work concepts I've been learning about to chisel out time just for learning deeply. This meant immersing myself in learning the course material by spending time every day going through the course, practicing, or reviewing notes.

Know the Kind of Course you're Getting

Before I decided on Zac's course, I dabbled in several online courses to see if they offered what I needed in a JavaScript course. I realized I had to put some sort of list together if I didn't want to just throw money away on courses that didn't work for me.

So I put a list of practical things I needed to learn JavaScript (or development in general, really). It was a bit harder to find than I anticipated:

  • I wanted to learn from someone I was at least familiar with. Someone trusted.
  • I had to cover not only my best learning style, but a variety of them, because when I immerse myself in a subject I like having lots of different ways to learn something!
  • It needed to be paced in mostly shorter, well-documented steps, with examples and easy-to-understand audio
  • It needed to start from the beginning and fill in that foundational knowledge
  • While JavaScript is an awesome programming language all its own, I really wanted to learn it the WordPress way

The WordPress Way – Learn it I Will

I work mostly with WordPress-based projects, and WordPress standards are slightly different in some ways from JavaScript and PHP-based standards. Usually these are little differences, like spacing and using Yoda as a guide (really freakin' awesome!), but sometimes there are bigger issues as you go deeper into the code of a big project.

So I wanted to learn deeply, but also with a bit of an emphasis on WordPress standards and resources as well.

JavaScript for WordPress Course Review – Where I'm at Now

I’ve spent a couple months working through the first part of Zac’s JavaScript for WordPress course in my early morning hours. The steady, daily, learning is helping me learn it more effectively, even if it's going a little more slowly than I would have liked. (I'm a geek, I live to learn!)

I spend time taking notes, reviewing videos and looking at further resources, and sometimes re-writing my notes (I can't help it; I have a problem with perfection).

Zac spends time at the end of most sections explaining how you can more deeply learn the material by practicing in the browser and by playing with code yourself. And he usually gives examples of specific things you should try to emulate before continuing on to the next lesson.

The Course Modules:

Screenshot showing the 4 modules of the JavaScript for WordPress Course

Each of the four parts of the course include a depth of videos, notes, links to further documentation, and a lot more. As an example, I just finished the first part of the course, except for the full hands-on project.

I've spent over 20 hours (closer to 30-40) going through all the modules within this course, reading additional documentation, and hitting up some of my fellow humans for help explaining some topics.

If you click below, you can see a list of all the modules and submodules available in the first section so far (yeah, it's a lot! I know!):

[bs_collapse id=”collapse_186b-c1bb”] [bs_citem title=”Click to See all the Modules Available:” id=”citem_d465-981a” parent=”collapse_186b-c1bb”]

1.1 – An Introduction to JavaScript [0:08:02]

  • 1.1.01 – How We Use JavaScript Today [2:26]
  • 1.1.02 – A JavaScript History Lesson [5:36]

1.2 – JavaScript Language Basics [2:01:35]

  • 1.2.01 Part 1 – Writing JavaScript in the Browser [3:36]
  • 1.2.01 Part 2 – Writing JavaScript in a Code Editor [5:05]
  • 1.2.02 – Statements, Expressions and Keywords [3:58]
  • 1.2.03 – Data Types and Variables in JavaScript [3:27]
  • 1.2.04 – Data Types – Boolean [1:18]
  • 1.2.05 – Data Types – Strings [4:52]
  • 1.2.06 – Data Types – Numbers & NaN [7:22]
  • 1.2.07 – Data Types – Objects [2:52]
  • 1.2.08 – Data Types – Symbols [2:59]
  • 1.2.09 – Arrays in JavaScript [14:46]
  • 1.2.10 – Strong versus Weak Typing and typeof [2:14]
  • 1.2.11 – Operators in JavaScript [11:02]
  • 1.2.12 – If Statements in JavaScript [6:20]
  • 1.2.13 – If Else and Else If Statements in JavaScript [3:22]
  • 1.2.14 – Switch Statements in JavaScript [4:33]
  • 1.2.15 – Loops in JavaScript [7:11]
  • 1.2.16 – Do While and While Loops [5:34]
  • 1.2.17 – When to Use For, Do While and While Loops [1:12]
  • 1.2.18 – Break and Continue Statements in JavaScript [2:32]
  • 1.2.19 – For In and For Of Loops [3:36]
  • 1.2.20 – Introduction to Functions [6:07]
  • 1.2.21 – Function Parameters [5:28]
  • 1.2.22 – Returning Values from Functions [5:19]
  • 1.2.23 – Object Methods in JavaScript [5:50]

The DOM [4:55:28]

  • 1.3.01 – Introduction to the DOM [5:57]
  • 1.3.02 – Exploring the DOM in the browser [6:30]
  • 1.3.03 – Selecting Nodes in the DOM [9:47]
  • 1.3.04 – Traversing the DOM [12:28 – 2 Videos]
  • 1.3.05 – Getting and Setting DOM Node Values [15:13 – 2 Videos]
  • 1.3.06 – Getting and Setting Attribute Node Values [15:00 – 2 Videos]
  • 1.3.07 – Getting and Setting Form Values – Part 1 [42:43 – 5 Videos]
  • 1.3.07 – Getting and Setting Form Values – Part 2 [38:29 – 4 Videos]
  • 1.3.08 – Styling Nodes in the DOM [32:21 – 4 Videos]
  • 1.3.09 – Creating Nodes [13:55 – 2 Videos]
  • 1.3.10 – Adding Nodes to the DOM [13:12 – 2 Videos]
  • 1.3.11 – Cloning Nodes [21:09 – 3 Videos]
  • 1.3.12 – Removing Nodes from the DOM [8:44]

1.4 – Events in JavaScript [2:11:58]

  • 1.4.1 – Introduction to DOM Events [41:28]
  • 1.4.2 – Inline Events [12:41]
  • 1.4.3 – Global Event Handlers [16:31]
  • 1.4.4 – Event Listeners [8:28]
  • 1.4.5 – Removing Event Listeners [15:14]
  • 1.4.6 – Event Propagation – Capturing and Bubbling [20:26]
  • 1.4.7 – The Event Object [10:13]
  • 1.4.8 – A Look at More Events [5:57]

1.5 – JSON & Local Storage [0:51:02]

  • 1.5.1 – An Introduction to JSON [11:42]
  • 1.5.2 – JSON and JavaScript [25:03]
  • 1.5.3 – Introduction to Local Storage [14:17]

1.6 – PROJECT – VanillaPress V1 [2:57:02]

1.7 – JavaScript Development Tools [6:18:44]

1.8 Advanced JavaScript Topics

1.9 – PROJECT – VanillaPress V2

[/bs_citem] [/bs_collapse]

A Whole LOT of JavaScript Learning!

Behind each Module is a full complement of Learning. Gordon is releasing content and updating more content as he continues releasing the other parts of this master course.

To me, this illustrates how this course is one of the most all-inclusive options available to learn JavaScript for WordPress. While there are lots of JavaScript-specific courses out there, I didn’t see the full complement of different ways to learn available anywhere else.

If I sound like a cheerleader at this point, it’s because I’ve been impressed by the completeness of Gordon’s course. It includes a huge number of targeted videos, additional resources, and hands-on learning WHILE you’re learning and via a huge project after you have gone through the full module content.

But I wanted to show a bit more to help illustrate how in-depth the different sections are.

Sections Within Modules Drill Down to Specifics

Zac has a good number of posts freely available through the blog on his JavaScriptforWP.com course, and I suggest going through several of the ones that present part of the course content.

For example, learning about Loops in JavaScript is a common struggle for anyone new to development.

You can see from the list of modules I included above that Zac broke it apart into multiple sections: learning about loops in general, then learning about the most common loop types.

Here’s the first video from that section in the course, available for free on his site!

A little unsure if you’re understanding? Zac includes code examples with each section that you can download as well (early in the course, he links to JSBin). Here’s a link to a JSBin example for his Loops section: https://jsbin.com/jemezu/edit?js,console

And here’s the link to the rest of that post on his blog, where you can look at the other videos in the series. There’s actually over 20 minutes of content in this section within in the course, as well as over a dozen links to additional resources. But his post is a great, FREE, introduction:

https://javascriptforwp.com/loops-in-javascript/

Kat’s Review To-date for the JavaScript for WordPress Course by Zac Gordon

So it’s no real surprise I’d recommend this course to anyone serious about filling in the gaps in their foundational knowledge. I know it might seem expensive, but definitely take a look at everything you get. It’s not really just one course, but four ongoing courses.

The investment is definitely worthwhile, but I definitely recommend you try to invest the time to work on the course daily as well. That daily work will help you learn at a deeper level and serve you well as you move into the projects and further parts of the master course.

Were I to give a rating I would give 5 out of 5 stars, as the course is just that full of information. The only drawback I’ve found is that this is a video-heavy course. If you find learning via videos difficult, it might be harder to justify the cost right now.

I know that Gordon is working on getting transcripts of the videos, and filling in more written material, including additional resources. It’s very likely it will be available when folks find this post later 😉

I didn’t find the lack of written materials to be a problem, but I think it’s important to note in case others need that available.

I’m excited to move forward into the project at the end of the first part, and I’ll be sure to update again as I move through other parts of the course.

Your Turn!

Have you taken any online courses? What did you think? Were you happy with what you learned or feel let down? Have any questions about this course? I’ll be happy to answer what I can!

Disclaimer: Not-so-Big Little Note

I had a chance to talk with Zac at the Day of Rest conference in Boston earlier this year. So I was able to ask him specifically about how he broke apart the content. I went on to look at his site again and decided to take the course.

Another disclaimer, because this is just that kinda thing, the company I work with, Human Made, is one of Zac’s partners for his course – so I didn’t just stumble on his course. I don’t remember a specific conversation, but I’m sure I probably heard some of my fellow humans chatting it up at some point or another.

How NOT to integrate Social Media into your WordPress Site

Know what rocks when you’re rocking that blogging thing and publishing new posts?

Seeing your awesome-sauce blogging posts shared on Twitter and Facebook, Pinterest … any of those sites! Am I right? Out comes the big grins and back-slapping …

Until … you realize you’re the only one seeing that share.

Know what kinda sucks about blogging?

When no one clicks on your link … no one cares about your blood, sweat and te … oh, wait. You don’t know WHY no one’s clicking?

Number one reason I have to help re-integrate social media into my client’s WordPress sites? Because they never realized it had to be done in the first place!

So now you’re here and you’re trying to figure out if I’m talking about you too, aren’t you? If so, consider this a primer on how NOT to integrate social media into your website (especially WordPress, but any site, really) … and hopefully you’ll learn some great tips on HOW to do it right along the way!

1. Do NOT forget your Social Sharing Plugin

You know what’s really hard? Trying to share a blog post and finding NO sharing options. Unless you’re a big name blogger and can count on people to work to share your content – make it easy!

If you’re a business and trying to add blogging to your website, do NOT frustrate users by leaving the sharing options out of the equation. Get it? Got it? Good!

Decide what you want – use data if you have it (you can drill down in Google Analytics to see which social networks are already working best for your brand) – and then carefully choose from one of the dozens of social sharing plugins that come up in a search. OR make it easy on yourself and pick from this list of my top three favorites, all tested and used on sites I put together for clients!

  1. Flare, Filament.io – this one actually is a web app, but it started as a plugin for WordPress. That means it rocks for just about ANY site (yay!). It’s configurable and awesome, and flexible enough to use JUST where you want it on your site. This is not the post on my reasons, but I will say this is my NUMBER ONE choice. I use the Pro version and offer it for use to my own clients because I love it, even though it’s not perfect. Difference between Pro and regular version? You get a few more options, you can hide the branding, AND you get some custom mobile display options (that just totally rock).
  2. Genesis Simple Share, on WordPress.org – if you use the Genesis framework for your blog this one is an awesome option, developed by none other than Brian Gardner himself and definitely not full of lots of bloat. This is a simple one to use – no complicated options to deal with at all 😉
  3. Jetpack Sharing Module – about as simple as they come and an easy choice if you already use Jetpack on your site. There are other caveats to using Jetpack, but I like this one and still use it on some websites from time to time. This link will take you to the how-to page where you can install Jetpack at the bottom of the page. Another nice thing about Jetpack – you can change the CSS and have a lot of fun playing with how it looks 😀 (always fun for a dedicated Geek!)

 2. Do NOT Forget Your Social SEO Power

There are SEO plugins for WordPress that define these awesome things called meta tags – and amazingly enough they work for more than basic SEO – in fact, they are pretty darn important for optimizing your posts for social media. So important, in fact, that there are separate plugins to handle JUST the different tags for social media sites.

The biggest reason to do this? So that when you share your posts on social media it pulls the best information about your page or post – the best picture, the best description, the best everything.

I have a heirarchy of plugins I use on my own and my client’s sites, depending on how much they want to integrate with social media. I start with a basic SEO plugin, then add more control over social tags, images, and then schema markup and other data for Google.

  1. Yoast’s WordPress SEO – I start with what is considered by most to be THE best SEO plugin for WordPress. With Yoast, you can set up all your basic site tags, default images for social sharing, and post/page specific meta tags. You can also connect it to Facebook’s Open Graph by setting up a very basic developer’s app (or have your resident geek do it for you!) and Facebook’s author tags. It even allows you to set up default Twitter Cards – which is made of awesome!
  2. WP Social SEO (I use the Pro version) – The free version is sufficient for most site’s needs, though I do use the Pro since I have a developer’s license. This plugin works alongside your SEO plugin – so in some cases you fill out information within this plugin settings, and in some cases you’ll let it use the WordPress SEO default settings (they notify of some of those). The reason I love this as a second plugin is that it allows you to specify different images for each social network. Want an image optimized to appear perfectly on Twitter? On Facebook? And they’re different sizes? Oh No! With this one, you can specify different images, different Twitter cards, different everything for every network. It has additional benefits for SEO so is definitely worth considering if you are at all interested in further optimization.

 

One-Minute Geek Note: New Site Setup – The Domain

There are first steps and then there are FIRST STEPS when it comes to setting up your new WordPress site. You can’t get more basic than deciding on your domain!

No matter how knowledgeable you are (or aren’t) about setting up a new site, there’s a few steps that come before you ever touch the site. And one of the biggies is setting up and understanding the mysterious domain.

One-Minute Geek Note – All about ‘The Domain’

Sad but true, I’ve had folks email asking me to help them set up a new site who didn’t have a CLUE what I meant when I asked them what their domain name was. Hopefully you have a leg up there, and you know what a domain is. Just in case, though, here’s a quick and geek-free definition:

A domain for your site is literally your FIRST impression every site visitor will have – whether they view the domain URL on your business card or find you in a search on Google.

It’s the address to your house on the web. Actually, it’s like the nickname to your address on the web. In the same way you provide a street address to someone coming to your home, you give a domain name and/or URL to someone you want to find you online.

I live at Kat’s Media online, and my address is https://katrinamoody.com … also known as http://www.katsmedia.com.

You can learn more factoids if you’re interested, including how the domain names are literally broken down and what all the techie terms mean, if you check out Net for Beginners over at About.com – but I’m going to guess most of you just want to know the basics.

The Geeky Basics – you Have to Buy a Domain Name!

You really do! Because domain names are part of a full URL and everyone wants their address online to be easy-to-remember, there’s actually a lot of competition involved in getting some domain names. Which means that you have to decide who you are going to purchase a name from, and then you have to search to see if the one you want is still available.

You purchase your domain name as part of the process of purchasing your address online. I use NameCheap.com for my domain name purchases online – they’re cheap and reliable. But you can choose whatever company you want to handle your domain name purchase for you.

IMPORTANT: Your domain name and purchasing that domain name does NOT mean you now have a site online – it’s kind of like the paperwork part of setting up shop online. You have to have the domain name to launch your new site, BUT simply having the domain name isn’t enough to launch your site. Make sense?

What do you need to think about before purchasing your new Domain Name?

There are LOTS of pieces of the domain name puzzle, including inherent SEO value and even going into DNS (ack – a geeky term! Hover over it for a quick and dirty definition).

But for a business owner or blogger who is new to it all, keep in mind the basics and you’ll be set:

  1. Short and sweet is always a great start – sometimes you just can’t go for a short domain name – but the shorter the better: it’s easier to remember, harder to misspell, and easier to translate into all your branding materials. Really.
  2. Extra is okay – consider purchasing misspellings as well as common .com, .net variations if they are available so you own the market on that domain. You can always forward them to your primary domain.
  3. Brand yourself? Consider whether you want to brand yourself or an actual brand – there are different reasons to choose one over the other! Read more from branding and social media expert Kim Garst on why you might want to choose personal branding)

So, in this quick and dirty intro to domain names we’ve learned what they are, how you get one, why you need one, and whether you need more than one. Your action plan is to choose your domain registrar (the actual company you’ll purchase those domains through), choose your domain name, and click to buy if you haven’t already.

One last note – I recommend AGAINST having your hosting and your domain with the same company – there are lots of reasons but the biggest is generally companies who handle hosting aren’t the best at domains, and those who rock at domains aren’t the best at hosting. Learn more about the basics of hosting in the next Geek Notes installment. 

Have any other questions about domain names? Ask them below and I’ll consider addressing them in a One-Minute Geek Note soon!

WP News: WordPress 4.2.2 Security and Maintenance Release

Version 4.2.2 addresses two security issues: The Genericons icon font package, which is used in a number of popular themes and plugins, contained an HTML file vulnerable to a cross-site scripting attack. All affected themes and plugins hosted on WordPress.org (including the Twenty Fifteen default theme) have been updated today by the WordPress security team to address this issue by removing this nonessential file. To help protect other Genericons usage, WordPress 4.2.2 proactively scans the wp-conten

Source: WordPress › WordPress 4.2.2 Security and Maintenance Release

Infographics that Rock: 11 Essential Ingredients Every Blog Post Needs

Blog Posts that Rock are Key to Your Brand’s Awesomeness

Blog posts, well, they’re THE essential content creation behind everything important to your brand. But your blog posts aren’t just some dynamo of SEO goodness.

They build on one another, and on other rocking content, to create a picture of who you are to potential clients.

  • Do you write well? That tells your clients you care about looking professional and about how your business’ voice.
  • Is your content well-organized? You care about being searched (not by search engines – by REAL people).
  • Are your posts easy-to-read? Beyond grammatically-correct writing, posts that are scan-able, which can be digested easily, will encourage your readers to stick around.

Most business owners find that blogging is a time-consuming and thankless task. They write and write and no one ever appreciates their wisdom. They write about how awesome their employees are and how amaze-balls their brand is … only to hear crickets when they lovingly share the link on all their social media channels.

What the best writers and bloggers and brands have come to realize, though, is that there’s a method to the inherent madness of creating a blog post. It’s not about PR pitches and funny catch phrases.

No. There’s almost … a formula … to making blog posts totally rock.

Well, not almost, there definitely is not just one formula, but multiple formulas which can be mixed and matched to make truly rocking content stand out, be read, be shared, and totally show how amaze-balls your awesome brand is.

But before I tell you about the pure joy that comes from playing with your words (I admit to being a geek *grin*) you gotta know that blog posts ALL need some essential goodness if they’re going to rock. And by rock I mean show off just how much awesomeness you’ve packed in your brand.

The Awesome Sauce – Essential Things EVERY Blog Post Needs

The last thing you need is to wonder whether your article has everything it needs to satisfy your readers.

– Demian Farnworth, Copyblogger Media’s Chief Content Writer

Copyblogger called them ingredients. And they even put together an infographic (see below) and PDF download to help track how well you blend those ingredients together.

Have you ever tasted a dry cake? One with a little too much flour? Stale? In the same way you don’t like eating food that doesn’t have all the right ingredients (or maybe has too much or too little of them) …you might still eat it, but you won’t enjoy it. You won’t be a raving fan. You won’t want to share it with your friends.

In the same way, readers just don’t prefer to read blog posts that don’t have a great blend of these key ingredients:

Copyblogger’s List:

  1. Craft a magnetic headline.
  2. Open with a bang.
  3. Use persuasive words.
  4. Write damn good sentences.
  5. Insert killer bullet points.
  6. Create exquisite subheads.
  7. Tell a seductive story.
  8. Keep attention with internal cliffhangers.
  9. Choose an arresting image.
  10. Close with style.
  11. Be authentic.

Your blog posts should have these 11 Essential Ingredients to meet your reader’s expectations, highlight your brand’s awesomeness, and generally rock.