Monthly Archives: May 2014

Chase down rogue console.log(); statements

Find console.log(); statements line-by-line by loading this JavaScript snippet to the top of your code (the higher the better):


['log', 'warn'].forEach(function(method) {
  var old = console[method];
  console[method] = function() {
    var stack = (new Error()).stack.split(/\n/);
    // Chrome includes a single "Error" line, FF doesn't.
    if (stack[0].indexOf('Error') === 0) {
      stack = stack.slice(1);
    }
    var args = [].slice.apply(arguments).concat([stack[1].trim()]);
    return old.apply(console, args);
  };
});

Be sure to remove this before entering production!

Thanks to, Remy Sharp.

CSS Font Subsetting

In short, depending on what foundry/font provider you choose to use (ie. Google Fonts, Font Squirrel, etc.) you can be selective in terms of what glyphs you want to leverage versus calling the entire set of glyphs in one large request.
By being selective, you can craft a much lighter request by using additional parameters in your src.

The trade-offs are evident. This has to be applied to a set of glyphs that are more predictable to manage and which don’t change that often (ie logos).

It’s a very nickel-and-dimed approach in my opinion, but it’s definitely useful.

Thanks to, demosthenes.

What’s an Object in JavaScript?

Almost everything is an object.

  • Primitives: numbers, booleans, strings, null, undefined
  • Objects: Math, Date, JSON, window, document, objects you create, array, function, numbers, booleans, strings

Functions are “first class” values.

  • Assign a function to a variable.
  • Store a function as a value in an array or object.
  • Pass a function to a function.
  • Return a function from a function.

Primitives don’t look like objects.


var phoneNumber = "555-1212";	//phoneNumber is a primitive.
console.log(phoneNumber.length);//Now we need phoneNumber to be an object.
/*********************
*	BEHIND THE SCENES
*
*	phoneNumber is converted to a string object.
*	.length property is then accessed
*	
**********************/	
console.log(phoneNumber);		//phoneNumber is a primitive again.

Apply a Rewrite Directive to a Solr Instance

After exposing the Solr endpoint with a reverse proxy, it’s important to note that it also exposes the Solr admin panel to the end-user. This is not desired.

Flowchart of a RewriteRule directive that rests on website.com’s httpd.conf file.

Flowchart of a RewriteRule directive that rests on website.com’s httpd.conf file.

Problem:

  • Solr’s admin panel becomes exposed from the reverse proxy.

Solutions:


RewriteRule ^/solr/$ / [R=301,L,DPI]

Reverse Proxy a Solr Instance

It’s encouraged that you secure your Solr instance by placing the application on a different file server and behind a firewall. That’s an issue if you are trying to consume data from the Solr instance leveraging AJAX techniques.

reverse_proxy

Flowchart of a reverse proxy directive that rests on website.com’s httpd.conf file.

Problems:

  • www.website.com and Apache Solr live on separate boxes.
  • A firewall protecting Apache Solr plus the cross-domain issue does not expose the necessary end-point to consume via AJAX.
  • Depending on your sys admin setups, Solr may not live on a fully qualified domain (ie. http://12.34.56.789:8983/solr/#/)
  • An AJAX call to consume the Solr instance’s JSON/XML won’t work cross-domain.

Solution:

  • Reverse Proxy directive, mod_proxy – Apache HTTP Server
  • This allows for an endpoint that is visible to the browser and we can consume the JSON/XML that rests within the Solr instance.

ProxyPass /solr http://12.34.56.789:8983/solr/#/
ProxyPassReverse /solr http://12.34.56.789:8983/solr/#/

Don’t forget to apply a RewriteRule Directive to protect the Solr admin panel, once you’ve exposed it to the browser!

Dos and Don’ts in JavaScript

Best Practices:

  • Choose short but readable variable names.
  • Avoid global variables.
  • Use only one global object to encapsulate any global variables you really need.
  • Always use var to declare your variables.
  • Indent your code so it’s readable.
  • Use curly braces to define blocks of code.
  • Comment your code.
  • Always use semi-colons.
  • Be aware of where automatic semi-colon insertion happens.
  • Declare variables outside loops.
  • Reduce DOM operations.