A Wild JavaScript Appears: Understanding the Many Ways JS is Used in WordPress

Paid Memberships Pro, Work Comments Off

Today’s WordPress developers need to understand a variety of JavaScript methods and frameworks. This article covers the most common methods you’ll see in the wild in both older and more forward-looking WordPress code. Some examples include AJAX with jQuery, ES6, the Heartbeat API, REACT, and Gutenberg blocks.

My goal is to help you feel more comfortable opening up any JS file you come across in the WordPress world.

Matt Mullenweg - Learn JavaScript Deeply

Jason Coleman - Which JavaScript should you learn?

A few years ago, Matt Mullenweg asked us to learn JavaScript deeply.

I think Matt meant for PHP developers to learn JavaScript and for us to learn vanilla JavaScript in particular so we could program with it regardless of framework. Learning JavaScript deeply was important, because over the next few years, framework development continued quickly. Every year a different library, framework, or flavor of JS would become popular.

Vanilla JavaScript developed quickly as well with the base language itself gaining new features. Different browsers adopted the new features at different rates, requiring polyfill solutions, requiring compilers and package managers. I honestly don’t know how new developers pick this stuff up. The JavaScript landscape seems very confusing right now. Maybe it’s more confusing for folks like me who have been using JavaScript since the 1995.

The following sections go through 10 or so examples of JavaScript you will see in the wild with the intent of helping you to detect what kind of JavaScript, libraries, frameworks, and tools are being used.

Commonly Found Examples of JavaScript in WordPress

  1. Vanilla JavaScript Example

    Vanilla JavaScript

  2. Minimized JavaScript Example

    Minimized

  3. Minimized JavaScript Example with Malware

    Minimized (Malware)

    • Photo Credit: https://www.pokemon.com/us/pokedex/Tangela
    • Code Example: Actual Malware.
    • Used For: Breaking into your admin dashboard. Inserting spam links into your posts.
    • Identifying Features: Code that is inserted inline into PHP and HTML files are usually not minimized. If you see an eval() like this in a .php file, especially if it is out of place or the same code in multiple files, it is usually malware. Use scanners.
    • Learn More: https://sucuri.net/
  4. jQuery JavaScript Example

    jQuery

  5. AJAX JavaScript Example

    AJAX

    • Photo Credit: https://www.pokemon.com/us/pokedex/Claydol
    • Code Example: https://github.com/bwawwp/bwawwp/blob/master/chapter-09/example-08.js
    • Used For: Asynchronous JavaScript and XML. Asynchronous = making many calls back and forth with the web server once a page is loaded. Usually sending small amounts of data rather than the full page. Originally used XML as the primary data format. Now use JSON a lot.
    • Identifying Features: ajaxurl, data, error, success, complete jQuery really made it easier to do AJAX requests. Before that you would use the XMLHttpRequest and use a bit more complicated code to manage the state of the requests. Modern JavaScript has the fetch command, which is more similar to how jQuery and other libraries use AJAX without requiring a library. (I’m looking for a good fetch example to add if you have one in some real WordPress code.)
    • Learn More: https://codex.wordpress.org/AJAX_in_Plugins
  6. JSON JavaScript Example

    JSON

  7. Inline vs JS File JavaScript Example

    Inline vs JS files

    • Photo Credit: https://www.pokemon.com/us/pokedex/Rotom
    • Code is From: https://github.com/strangerstudios/paid-memberships-pro/blob/master/includes/profile.php (Same example as the jQuery slide.)
    • Used For: If you have a single use script meant to be used exactly on one page/template/etc, I still think it’s okay to put JavaScript into a <script> tag in your PHP code. In general tholugh, you should put JavaScript in a .js file and get data into your scripts through wp_localize_script and AJAX.
    • Identifying Features: script tags. found in .php files. If one piece of inline JavaScript breaks, it will halt the execution of all inline JavaScript. One of the many reasons putting JS in its own file is better.
    • Learn More: https://codex.wordpress.org/Using_Javascript
  8. NPM JavaScript Example

    NPM

  9. ES5 / ES6 / ESNext JavaScript Example

    ES5 vs ES6 vs ESNext

  10. Babel JavaScript Example

    Babel

  11. Webpack JavaScript Example

    Webpack

  12. REACT JavaScript Example

    REACT

  13. Gutenberg Block JavaScript Example

    Gutenberg Block

Watch the talk here

Bitcoin hits $1000. Where is it going?

InvestorGeeks Comments Off

I’m bullish on Bitcoins, from a price perspective and also from a technology perspective.
Like many out there, I’m kicking myself for not jumping on the bandwagon sooner. I remember when they were $5 and I was first reading about them. I remember when they were less than $1 per coin, and my office computer could mine about 1 per week, thinking it wasn’t worth the electricity cost. I remember wanting to buy 200 of them at $10 each as a speculation play with our InvestorGeeks ad money, and then wanting …

Looks like a buying opportunity in BBBY

InvestorGeeks Comments Off

My Mom asked me about Bed Bath and Beyond recently. She used to be a store manager there. She sold her stock a while ago (missed that big up swing) but thinks there may be a buying opportunity now. I also owned some way back and sold after a small gain, missing most of the big 2-3 year rally here.
Anyway, here is my analysis and response to her. (The spreadsheet I refer to is one based on Phil Town’s Payback Time book you should be able to find on his …

Would I Buy Netflix in the $50s?

InvestorGeeks Comments Off

Netflix lowered their subscriber numbers for the year last night, leading to a big 14% drop in the stock price today (so far). Fellow InvestorGeek Chris texted me asking if I’d be buying Netflix in the 50s.
I personally won’t be buying any $NFLX stock today, but only because I already own a lot of Netflix stock int he $60s. I have too much tied up in $NFLX already to add to my position. Though I may buy in more later this year, early next, as I fund my account and if …

Mistake #2: Playing Designer

Stranger Studios, Work Comments Off

Unless your business is website design or something else in the arts, you don’t need a beautiful website. A nice looking website is a bonus, but make sure you’re working towards a functioning website instead of something that will look great printed out and framed on your wall.

Oftentimes when going over design mockups or newly updated websites, you’ll find yourself leaning back in your chair and staring at your homepage for a minute or two taking it all in.

Stop it! No one browses the web this way.

If you think of your website as a work of art, you surely will find little things here and there that might be smaller or larger or a little bit to the right. Resist the urge to do this.

If you know the primary goal of your website (see post #1), make sure the design focuses on that goal. Focus your design feedback on how well the design enables sales, mailing list sign ups, contact requests, etc.

As for website design, hire an experienced web designer at a decent rate and trust their instincts for what looks good.

If you hassle your designer with a lot of feedback on what “looks good”, they are going to shut down and move into “code monkey” mode where they just code up whatever requests you have. Unless you are paying bottom dollar (in which case you get what you pay for) you are wasting money by paying designer rates for code monkey work.

More importantly, micro managing a code monkey will not get you as good of a website as one where you control the vision via a strong primary goal, and an experienced designer controls the particulars of the site’s look and feel.

View all posts in this series here.

Mistake #1: Lack of Goals

Stranger Studios, Work Comments Off

One of the biggest mistakes made by website owners is to have a website that is totally detached from any business activity.

Maybe your website is beautiful. Maybe it has tons of information about your business. But what is the goal of your website?

What do you want people who visit your website to do?

If you haven’t thought about this question yet, do it. Some good answers are:

  • Buy my product.
  • Sign up for my mailing list.
  • Call me for an appointment.
  • Follow me on social media.
  • Fill out a contact form.
Mistake #1 has a corollary: Too Many Goals.
When asked what the goal of your website is, you might have answered 2-5 things. Great! Throw away items 2 through 5. What was your first answer? Do that. On your homepage.

WordCamp Philly 2012 Scholarship

Stranger Studios, Work Comments Off

I’ll be speaking at WordCamp Philly coming up October 20th and 21st this year. Would you like to join me? Do you want to mingle with the smartest folks working on WordPress in the Philly area and beyond? Are you a little strapped for cash and balking at the $20-$25 tickets?

Well have no fear. We’ve raised enough money via CharityGoal (runs on WordPress, show it some love) to provide scholarships for 4 attendees to this year’s WordCamp Philly. Big thanks to Scott Kingsley Clark who donated on behalf of the Pods Framework.

What?

  • One Saturday or Full Weekend Pass (your choice) to WordCamp Philly, October 20th and 21st 2012.

How?

  • Make sure you are available to attend. Did I mention the conference is October 20th and 21st, 2012?
  • Write in the comments here or by email (a) how you would benefit from going to WordCamp Philly, and (b) why we should pick you over the others trying.
  • Optionally, send out a tweet thanking @Jason_Coleman and @ScottClark for the opportunity.

I will pick four lucky winners by October 1st and announce them here.

WineLog Signups Disabled. When Are They Coming Back?

WineLog Comments Off

Hello all. Recently the spam accounts have been getting out of hand. I tried to add some extra protection to our signup form, but that was quickly worked around by the spammers.

For the time being, I have disabled all new signups on the site. If someone really wants to signup for a new account, please email me and I’ll set you up right away.

Current users will not be affected at all. (You should actually see some performance improvements as we move the site to a beefier server and the spammers stop trying to use the site.)

A newer version of WineLog has been in the works for a while, which included a new signup and authentication system. We will likely be waiting until that is ready (sometime in the Fall) before activating new signups again.

Thanks

SPY: Trend Has Changed

InvestorGeeks Comments Off

The closing price for SPY has rissen above its 200-day moving average, indicating a long-term upward trend.
The closing price for SPY has rissen above its 50-day moving average, indicating an intermediate-term upward trend.
Trend for SPY as of Monday July 16th, 2012
Long-term: Up
Intermediate: Up
Short-Term: Down
Chart for SPY

This post was generated by our Market Trends tool. The trends are simply based on the 10, 50, and 200-day moving averages. View the current market trends or analyze your own stocks.