javascript Posts

Speeding up your Platform.sh deploys with Yarn

Problemspace

You have a decent sized project and your deployments are taking a while. Platform.sh rebuilds your entire application from scratch with each git push so in some cases the process of downloading all those 3rd party packages can take quite a while. We can and do manage local caches of some composer packages due to our PHP heritage, which helps to make composer install a pretty snappy affair, but it's simply not possible to effectively do this with Nodejs.

Compounding this...

Omniture - not the best 3rd party javascript

Hoping to land a slot in the SERPs with that title, I'm here to demonstrate today the difference between good 3rd party javascript, and bad 3rd party javascript.

First - the good, as demonstrated by Google Analytics. GA's setup and tracking code, as stepped through here.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new...

Throttling window.onscroll

Simple trick for making sure that anything that you want to listen to window.onscroll doesn't eat up too many cycles while it's doing its thing. It's called "throtting".


Throttling basically means, if you're receiving a steady stream of input from something, you don't really want to be firing stuff off based on that steady stream. This is a performance suck. Let's say you have this ---

window.addEventListener('scroll', function() {
  // Stuff that's actually kinda CPU intensive like
 ...

Tracking Pixels 101

So tracking pixels. They sound awful. They sort of are, but we all use them. One just fired off on you a minute ago when you loaded this page. That's how Google Analytics works its magic. But how do they work? The GA tracking code is Javascript and doesn't say anything about an image pixel.

Step inside...


Dat JS

So that javascript does a few things, primarily it creates another javascript tag that pulls down the real "payload", which is a hackerish term for "a bigger ball of...

Getting started with "Headless Drupal"

Hello there! There has been a lot of discussion in the Drupalsphere lately about a concept that has been coined "Headless Drupal", and rightly so. It's basically theming, but throwing out the theme layer. The theme layer in Drupal is very powerful, but has always felt severely over-engineered to me, especially in contrast to pretty much any MVC framework I've played with. With those, you define view-layer variables in a controller class, and you write HTML with a little bit of code to...

Deconstructing the Google Analytics tag

If you're a web developer, I'm sure you've placed this snippet of code more into more than a few projects.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXX-Y',...

Function 'fooController' is undefined

I spent about an hour pulling my hair over this one. I'm deploying an Angular to dev for the first time, it works fine locally, but everything is busted when I grunt build and push it up to a server. I'm using ngMin and using the supposedly safe syntax for defining all my dependencies, but unfortunately any Google search that includes "grunt build" and/or "minify angular" only turns up answer that pertain to that fairly well know problem.

So, I commented out Uglify in the build process...

Building a mobile app with Drupal and Angular (part 1)

The beginning

I'll make the "what is Angular" part as brief as possible.

Angular is a giant JavaScript framework from our friends at Google. It fits into a similar camp with Backbone, a framework that Drupalists will likely have heard of since it's included in D8 core. Angular aims to make it as easy as possible to build a single page CRUD app, and in my limited experience it succeeds.

I've never built anything with Backbone, but have the Peepcode series on it, and have been working...

Building a drop down menu from scratch

Dropdown menus may seem like something that falls under the "solved problem" category, but they can be surprisingly tricky. Tutorials that you find online will usually walk you through a very simple example that assumes markup that you never have. This will not be that. We're going to talk about the theory behind building a drop down so that you can better reason your way through the mess of markup that you're given.

If you're working with Drupal and your requirements are outside the...

Parsing query string parameters out with javascript

  // creates a global variable called urlParams
  // adapt as needed.

  // will forcefully downcase all query string params

  // use --
  // http://www.ignoredbydinosaurs.com?foo=bar&test=2
  // urlParams.foo  // bar
  // urlParams.test // 2

  window.urlParams = (function () {
    var match,
    pl     = /\+/g,  // Regex for replacing addition symbol with a space
    search = /([^&=]+)=?([^&]*)/g,
    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
    query  =...

Hex values, rgb, and me

One of the first discoveries I ever made in web development was that CSS hex values that were all the same number would always give me some shade of grey. #444 was dark, almost black. #ccc was light, perfect for form borders. Not long after I discovered that Photoshop wouldn't accept these values and would make me type in all 6 characters - #444444, #cccccc.

Sometime after that I discovered how to tap into a shade somewhere between #eee and #fff, just a barely perceptible off-white with...

Weaning off of jQuery animations with CSS Transitions

I've recently finished up a project here at the job that gave me a blank check as far as writing the front end code was concerned. It was among the most blissful Drupal projects I've ever worked on, as my boss did all of the Drupal stuff, and I wrote all the code. It was heaven.

So, there were a lot of requests for some cool javascript features, and rather than reaching for the plugin drawer, I decided to write most of them from scratch. The main feature pages are mostly like this. The...

Javascript - named function declaration or assign to a variable?

What's the difference between assigning an anonymous javascript function to a variable or just declaring a named function in the first place? Turns out "hoisting" of the function only works if you declare it as a named function in the first place. Assigning an anonymous function to a variable doesn't perform the hoist.

<html>
  <body>
    <script>

      (function() {
        console.log(f()); // 'hello'
        function f(){
          return 'hello';
        };
      })();

     ...

jQuery Noob - script not working?

It's simple really, but you have to know a few things about how a browser renders a page to get it. jQuery is a wonderful thing because it removes the need to know a LOT about a LOT to do with the DOM and still get amazingly cool things done - slideshows, form validation, etc. However, if you go and learn a bit more about how JavaScript works in a browser you can go beyond copying and pasting code snippets and really start getting creative. Or surgical. Or whatever you want.

So when...

How to test meta tags with CasperJS

Hi, this post is wildly out of date. I tried to follow it to set up some test within the last year and none of this stuff actually worked. The concepts are likely still valid, but don't expect to be able to copy much.

jg - Oct 2015


I went down to Drupaldelphia (the name should be self-explanatory) a couple weeks ago mainly for a session called "Testing your site with CasperJS". CasperJS is what's known as a "headless" Webkit testing framework. That means it's essentially a...