Katrina Moody

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

WordPress

Geeking out over WordPress is one of my favorite things.

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.

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

Geeky Tools: FontIcons – Custom Font Kits for Your WordPress Site

A brand is nothing without personality.

One of the easiest ways to mix it up and show a little personality on any site, including your business site is by using fonts. You can easily use a Google Font in your site, or embed a custom font, but few things imbue more personality than going just that little bit further and playing with an icon font.

Icon Fonts like Font Awesome allow you to Present a Visual Message Efficiently

Font Awesome rocks! The problem is that Font Awesome has over 300 icons included – awesome to play with, but overkill for most sites! And most people go to the trouble to embed them and only use them for their social media icons – or to head up a services section on their site.

And that’s sad, really. Because until Fonticons, most WordPress folks embedded the whole font library. All those icons sitting unused! Not only that, but what a waste of resources and load times!

Not only that – but you saw how many sites are using Font Awesome? That’s a lot of folks sharing a lot of the same design elements on their site.

With Fonticons though, you can go one step further – you can easily pull in your own custom icons too. That makes this a geeky resource that is very useful and full of awesome sauce!

Fonticons is pure awesomeness for those of us who like geek out over icon fonts …

Dave Gandy, the icon design genius behind Font Awesome and one of the guys behind the scenes at Fonticons, summed up the benefits of using Fonticons with a tongue-in-cheek “… the message is ‘icon fonts are awesome!'”

I was pretty excited to dig into all the offerings, and I have had a lot of fun playing with my first custom kit. But I am a curious Kat – I wondered how the idea for a service like this was started. I was especially curious about the actual process of putting a custom font together. And the geek in me couldn’t resist thinking about the effect this would have on load times (important things!).

Gandy’s background as a designer and his experience with Font Awesome helped him see a need for something beyond the Font Awesome icon font library. Like most web designers, he knew the pain of integrating good icons in a website:

A bit over 3 years ago, I was complaining about how much of a pain it was to put good icons on a website. PNGs, sprite maps, CSS backgrounds, and waaaay too much time in Photoshop. So I made Font Awesome and open sourced it. It’s now on 33 million websites and growing at a considerable rate. But it’s not perfect. What if Font Awesome isn’t the exact look your site needs? What if you want to add your own icons? So we made Fonticons so people can get the perfect icons on their website.

~ Dave Gandy, Creator of Font Awesome and other icon sets, and one of two guys behind the awesome Fonticons

Wow. 33 million sites and growing daily – that’s the kind of impact Gandy’s Font Awesome has had on the web design community. That’s staggering! That totally deserves a tweet:

[bctt tweet=”33 million sites and growing daily – that’s the kind of impact Gandy’s @FontAwesome has had on the #webdesign community.”]

Considering that Font Awesome is one of eleven fonts available within Fonticons, the kind of impact and potential of such a tool is really mind-boggling! Fonticons (pronounced like emoticons with a font for the emot *grin*), is an exciting new tool for sure!

If you weren’t sure of just what the potential this kind of tool could have, let’s break down the benefits.

With Fonticons…

  1. You aren’t limited by one massive library of font icons (I LOVE Font Awesome but it’s a big bite of code!).
  2. You don’t have to worry about dozens of little images, whether they are low-res, blurry and horrible to look at.
  3. You can say goodbye to sprite maps (believe me – I’d celebrate over that one all by itself!).
  4. Use CSS instead of Photoshop for styling – your site load times will thank you!
  5. Speed up your site by integrating JUST the icons your site needs (or wants!)
  6. Use Fonticons’ Global CDN for lightening fast load times and integration into your site!
  7. Dude! You can copy and paste your own icons straight from Illustrator CC! That deserves an

Convinced of the Awesome Creds and Potential Behind Fonticons?

Then how about we dig into how it works so you can see just how easy it is to build a kit to use?

I’ll show how you can add a little bit of personality in an awesome, non-overwhelming kind of way.

the coolest thing since sliced bread …

So, you know how absolutely I think is, right?

Okay, okay … I HAD to play a little! Ready to get serious with me?

A Brief Introduction to Fonts

So you’ve heard of fonts, probably even know what Google fonts or other custom fonts are all about. Maybe you’ve tried your hand at embedding them in your WordPress site? A font for consistent typography throughout your blog – as in all the headers, all the body text, etc – is a little different than the kind of font we’re going to be looking at.

The concept is the same – but if you aren’t familiar with font icons this will seem like a very cool new idea to you. (And if your geeky little heart knows all about it, wait ’til I blow you mind with the specifics of this tool!)

Icon fonts are for highlighting, expanding and illustrating ideas in a visual way. They’re like the cherry on top of your ice cream cone.
[bctt tweet=”#Icon fonts are like the cherry on top of your #typography – they highlight, expand and illustrate ideas in a visual way. “]

Getting Started with Fonticons – Start small and Grow

To get the most benefit out of Fonticons, you need to consider what you want to use an icon for on your site. Social Media icons? Post format icons? Category icons? Extra design elements? Personality?

Think about what icons you need, and then you can use Fonticons to build the kit you need based on what you want for your site.

That’s it for today – while I wanted to go over the actual how-to of using the Fonticons site, that will have to wait for tomorrow. Otherwise this post is likely to turn into a short book!

Watch for the How-To Fonticon post tomorrow, and I already planned to followup with a WordPress How-To on how to integrate Fonticons in your site properly (there’s a little bit of code and geekery there!)

In the meantime, check out some of the things you can do with Fonticons:

Go up to the logo in my header and you can see a three-piece logo for Kat’s Media. I put it together to test out Fonticons and to play with transitions and hover effects in CSS. You like?

My logo is tame compared to the Fonticons one. I did a quick screen recording of the hover effect – see what you think!

While you couldn’t miss the icons sprinkled in this post – check out the home page of my site and see another simple example – the briefcase midway down the page and above my services? Inserted with some fun Fonticons and a tweak to my CSS.

Curious about Fonticons or integrating custom font icons in your site? Let me know any questions you have – I’ll make sure to address them in the next post.