javascript https://www.ignoredbydinosaurs.com/posts/305-speeding-up-your-platformsh-deploys-with-yarn <h2>Problemspace</h2> <p>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 <code>composer install</code> a pretty snappy affair, but it's simply not possible to effectively do this with Nodejs.</p> <p>Compounding this...</p> Thu, 10 Nov 2016 17:06:13 -0500 https://www.ignoredbydinosaurs.com/posts/245-omniture-sucks <p>Hoping to land a slot in the SERPs with that title, I'm here to demonstrate today the difference between <em>good</em> 3rd party javascript, and <em>bad</em> 3rd party javascript.</p> <p>First - the good, as demonstrated by Google Analytics. GA's setup and tracking code, <a href="http://www.ignoredbydinosaurs.com/2014/09/deconstructing-the-google-analytics-tag">as stepped through here</a>.</p> <pre><code class="language-js">(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...</code></pre> Fri, 24 Oct 2014 14:38:21 -0400 https://www.ignoredbydinosaurs.com/posts/244-throttling-window-onscroll <p>Simple trick for making sure that anything that you want to listen to <code>window.onscroll</code> doesn't eat up too many cycles while it's doing its thing. It's called "throtting".</p> <hr /> <p>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 ---</p> <pre><code class="language-js">window.addEventListener('scroll', function() { // Stuff that's actually kinda CPU intensive like ...</code></pre> Mon, 20 Oct 2014 16:38:13 -0400 https://www.ignoredbydinosaurs.com/posts/242-tracking-pixels-101 <p>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? <a href="http://www.ignoredbydinosaurs.com/2014/09/deconstructing-the-google-analytics-tag">The GA tracking code is Javascript</a> and doesn't say anything about an image pixel.</p> <p>Step inside...</p> <hr /> <h3>Dat JS</h3> <p>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...</p> Sat, 04 Oct 2014 13:11:06 -0400 https://www.ignoredbydinosaurs.com/posts/241-getting-started-with-headless-drupal <p>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...</p> Thu, 02 Oct 2014 20:18:25 -0400 https://www.ignoredbydinosaurs.com/posts/239-deconstructing-the-google-analytics-tag <p>If you're a web developer, I'm sure you've placed this snippet of code more into more than a few projects.</p> <pre><code class="language-html"><!-- 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',...</code></pre> Wed, 03 Sep 2014 19:43:07 -0400 https://www.ignoredbydinosaurs.com/posts/233-function-foocontroller-is-undefined <p>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 <code>grunt build</code> 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.</p> <p>So, I commented out Uglify in the build process...</p> Wed, 30 Apr 2014 15:21:04 -0400 https://www.ignoredbydinosaurs.com/posts/231-building-a-mobile-app-with-drupal-and-angular-part-1 <h3>The beginning</h3> <p>I'll make the "what is Angular" part as brief as possible.</p> <p>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.</p> <p>I've never built anything with Backbone, but have the Peepcode series on it, and have been working...</p> Wed, 12 Mar 2014 15:07:54 -0400 https://www.ignoredbydinosaurs.com/posts/222-building-a-drop-down-menu-from-scratch <p>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.</p> <p>If you're working with Drupal and your requirements are outside the...</p> Thu, 13 Feb 2014 15:25:43 -0500 https://www.ignoredbydinosaurs.com/posts/13-parsing-query-string-parameters-out-with-javascript <pre><code class="language-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 =...</code></pre> Thu, 30 Jan 2014 16:28:17 -0500 https://www.ignoredbydinosaurs.com/posts/171-hex-values-rgb-and-me <p>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.</p> <p>Sometime after that I discovered how to tap into a shade somewhere between #eee and #fff, just a barely perceptible off-white with...</p> Mon, 27 Jan 2014 15:21:55 -0500 https://www.ignoredbydinosaurs.com/posts/52-weaning-jquery-animations-css-transitions <p>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.</p> <p>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 <a href="http://www.advantagemedia.com/brands/electronic-component-news">like this</a>. The...</p> Mon, 09 Dec 2013 21:30:21 -0500 https://www.ignoredbydinosaurs.com/posts/43-javascript-named-function-declaration-or-assign-variable <p>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.</p> <pre><code class="language-js"><html> <body> <script> (function() { console.log(f()); // 'hello' function f(){ return 'hello'; }; })(); ...</code></pre> Sat, 20 Jul 2013 02:04:35 -0400 https://www.ignoredbydinosaurs.com/posts/26-jquery-noob-script-not-working <p>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. </p> <p>So when...</p> Tue, 10 Jul 2012 05:00:00 -0400 https://www.ignoredbydinosaurs.com/posts/24-how-test-meta-tags-casperjs <blockquote> <p>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.</p> </blockquote> <p>jg - Oct 2015</p> <hr /> <p>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". <a href="http://casperjs.org/index.html">CasperJS</a> is what's known as a "headless" Webkit testing framework. That means it's essentially a...</p> Tue, 03 Jul 2012 05:00:00 -0400