To $(document).ready() or not to $(document).ready() ? that is the question.

TLDR;

If you place your JS/jQuery below the elements, you don’t have to use $(document).ready.

 

Wrapping all your Javascript in a $(document).ready. All the cool kids are doing it, and it is safe to do so. However, this doesn’t come without drawbacks. Also, there multiple considerations when it comes to loading jQuery itself, but that’s a different conversation.

jQuery SHOULD be loaded on the footer of your <html>. At this point, wrapping or not doesn’t really matter. The magic lies in the fact the by the time your JS runs, the elements are already on the page (aka above the script you are running ).

 

But let’s say you are forced to load jQuery in the <head> AND you are also forced (or want) to place your JS on <head> as well … now you HAVE to use $(document).ready( function() {} ); because by the time the JS runs, the elements to be selected haven’t been seen by the browser yet.

 

From https://learn.jquery.com/using-jquery-core/document-ready/

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

Here’s where the issue lies. When you use $(document).ready() you need to wait for the entire page to load! So, if you want to have your JS do some kind of effect, like a sticky sidebar, or transitions, or anything at all, they will not happen instantly. Sometimes, this isn’t an issue, but the more images and external script your page has, the longer it takes for your js to run. This can be unacceptable, as most of the times, this causes your effect to start working at weird times, making the site … well … act weird.

The solution: instead of wrapping in .ready(), place the <script> just below the elements you want it to work on. Again, by the time your script runs, the elements have already been “seen” by the browser, and the effects will kick in even though the page hasn’t completely loaded yet. No need to wait.

 

Foundation 6 + Block Grid + WordPress Gallery

If you are using foundation i’m sure you love block grids, but wordpress galleries do their own HTML. No worries, throw this snippet in your functions.php (or wherever it belongs in your theme’s structure) and the markup will change to a blockgrid instead. This works with Foundation 6 … for Foundation 5 you’ll need to change the output to UL and LIs instead of row/column DIVs.

Easy. You are welcome!

 

Killer steak sauce (pseudo chimichurri)

Every steak can use this killer recipe! which in turn, it is not a true recipe, but more of a combination of flavors that you can adjust to your own taste. It goes especially well with flank steak or skirt steak. Chicken, pork, and fish also love this sauce.

  • Parsley or Cilantro (aka Coriander) or both. Lots of it!
  • Garlic. 2 or 3 cloves.
  • Cumin powder (or seeds). About half a teaspoon.
  • Red Pepper flakes.
  • Olive oil. A lot (think pesto)
  • Salt and Pepper
  • Optional: white vinegar

Warm up your olive oil and put the pepper flakes and cumin. Just warm up, so the oil gets infused with the spiciness and flavor of the ingredients. DO NOT FRY THEM … just warm it up. Once happy with the flavor, just leave it to cool down on the side. ( Experiment: put garlic on the oil as well, until soft. Cooked garlic tastes sweet )

In the meantime, chop the parsley/cilantro and garlic real small. Mash them together. Add salt and pepper to taste. When the oil is cool (you don’t want to cook the parsley/cilantro) mix it all together. Whisk it. Eat it! It is going to be AWESOME! I promise!

 

Static classes on WordPress plugins

If you have a wordpress plugin, more than likely you are using add_action and/or add_filter. No problem, until you get this error:

One of the annoyances of wordpress is that tracking bugs when in actions or filters can be a bit of a hassle, but you don’t know where the error actually originated, but with a bit of grep-ing of searching you can find the issue. With the error above however, what’s going on is not so evident. Consider the following plugin that does nothing:

Nothing seems wrong here, however, it throws the warning above. The right way of doing this is:

The key being __CLASS__ instead of self on the add_action line. When using static classes add_action and add_filter don’t like self however, if your class is not static, therefore, instantiated you can use add_action( $this, 'function' )  no problem. Seems odd, but that’s how it is.

Layers on Canvas

TLDR;

Can’t be done natively, use this instead: github.com/federicojacobi/layeredCanvas

 

HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways:

Multiple canvas elements approach

Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out just wrap on a div with position relative:

What’s crappy about this is if you want to save the image you have to do a screenshot and then cut it, or you can only save one canvas element at a time.

Single canvas element approach

Natively, there is no way of doing this, but with a little bit of abstraction, it isn’t a problem. Think of a layer as a function, now you call the functions in order and you are mostly layered:

This is still a bit crappy … lets make it slight more layer-like. We can make an array of functions and run them in sequence. This is much better because now we can remove (or change the index) an element from the array effectively replicating a layer feel:

DONE! Not too bad … using this principle I created a more elegant approach that allows you a couple more neat little things like show/hide … try it, fork it, use it: github.com/federicojacobi/layeredCanvas

Quick and Dirty JS slider (qndslider)

We do not need more JS sliders, there is plenty of alternatives. But while looking at them, I realized they all force you into learning their small quirks. That is a total annoyance and waste of time, so I set myself to write a super simple, super easy and understandable slider: the qndslider, the Quick and Dirty Slider.

You can download and use at your leisure: https://github.com/federicojacobi/qndslider

The beauty of it, is that I coded the basics of any slider to save you time, but you are in control of the interaction. I.E. you can call mySlider.next() to move to the next slide, but have a callback on what happens after the slider changes. All the basic funcionality is in, next(), previous(), timers, start(), stop().

It is NOT a jQuery plugin, but it does use jQuery to find the elements.

The Basics
You don’t have to use Divs, it could be UL/LI or P/SPAN as long as the slides have the “slide” class and the wrapper the id you call in the JS, in this case “GreatSlider”.

No, it doesnt have NEXT or PREV arrows, that is up to you. How you place them, how you style them, etc. it is ALL up to you. That way, is a bit hard, but you understand exactly what’s going on. Same goes for current slide and stuff like that. See more detailes at Github.

Introducing Square-War

screenshot1

Originally by puzzle master Scott Kim, Square War takes place on an 8×8 board. Two players take turns, once a move has been done, the piece cannot be moved. The object of the game is to make squares. The larger the square, the more points it’s worth, and they can be at any angle. You win when you get over 150 points AND at least a 15 point lead over your opponent.

There are a couple of versions of this game, including an old-school AOL one. This one however has been modernized with a beautiful interface, online play and facebook integration..

This is a small project that Jeff Herrera (www.amproinspections.com) and I put together just for fun.

Check it out at www.square-war.com.