Jason Vertucio

You know me! ™

Daily Regex: Google Analytics Tracking IDs

This won’t be a daily thing. But I just put together a quick Google Analytics Tracking ID for one of the apps I’m putting together. You know, to make sure you enter the correct one. It’s super easy.


function isGoogleAnalyticsTrackingId(id) {
var pattern = /^UA-\d{2,}-\d{1,2}$/;
return pattern.test(id);
};

Now, I’m sure you, astute readers, will be able to pick apart any errors in this. So, have at it!

Another reason why I hate Android

Screen Shot 2013-09-16 at 14.20.20

I’m sitting here at work wondering why this Mobile Framework that I’m developing works flawlessly on my iOS Simulator and on my iPhones and iPad, but literally doesn’t even have my stylesheets on Android.

Turns out—ready for this?

Turns out that I stash my framework in a folder called _framework. And you’ll never guess which folder of files wasn’t reading!

Seriously. Everyone goes on and on about how Android is better than the mobile Apple OS.

  1. I hate programming for every splintered version out there (over 30% are still running such an obsolete, two versions ago version of Android)
  2. I hate that I literally wasted three hours trying to figure out that when I renamed _framework to framework everything worked fine! IT DIDN’T WORK BECAUSE OF A STUPID UNDERSCORE. AND NOW IT WORKS.
  3. Actually, that’s a lie. Because now I’m getting errors with DOM elements not being found, even though there they are in my Chrome Desktop environment, and also on all the iOS devices!!!!!!!

/rant

iOS, I love you. I love you because you take the time to be as stable as possible. You run on, at most, six different devices.  And people don’t say of you, “Just don’t upgrade the OS.” And I love you because when I program something for you, I don’t have to worry about you not working.

For all interested, once I’ve had a successful deployment of this MOB Framework, I will release it. Maybe you’ll try it out. Maybe you’ll love it.

Mobile Web Apps, making the keyboard disappear

code
So, just for fun, I decided to make a little mobile web app to change from Fahrenheit to Celsius (of vice versa in case you needed that instead). But there were two problems with it.

(a) if I hit BACKSPACE, it wouldn’t update the converted temperature
(b) couldn’t get the keyboard to disappear
(c) oops, also had a problem with disappearing zeroes at the end of the number.

Well, (c) was easy. My RegEx was wrong. (a) was also pretty easy, once I found out about the new html5 input event (keypress was not reading BACKSPACES on my iPhone). But (b). Oh, that nasty (b)!

Stack Overflow had this same question, and a user linked to this blog and the long and short of it is

  1. var hideKeyboard = function(ev) {
  2.   // Don't actually hide the keyboard if we are on the INPUT
  3.   if ( ev.target.tagName === 'INPUT' ) return;
  4.  
  5.   document.activeElement.blur();
  6. }

Now this would be fine and dandy except where do you call the function?! I quickly determined that in my app, which is just a single-page thing, I could safely put the listener on the window itself.

  1. window.addEventListener('touchstart',hideKeyboard);

This code will only remove the keyboard when the active element is an INPUT. For some reason it doesn’t work on textareas. But the solution is to blur all inputs at the same time. I’m not doing it because my amp is simple enough to skip that step.

This bit of code was an immense help to me, and I hope it ends up being an immense help to you, as well!

What’s the best environment for developing websites?

I used to use Dreamweaver. Made it up to CS5.5 thanks to various jobs and stuff. At my current job they have Dreamweaver CS5.5, but lately I’ve been using my Mac for other projects, like at home and stuff.  I use Coda, because it has built-in FTP and it’s easy to use. I wish I could install it on my computer at work, but they seem to not allow installing software.

And, well, that’s for the best.

Anyway, inspired by this post on LinkedIn, I decided to ask you, the readers to this little blog, what your opinion is on the matter. I actually set up a poll on the right to answer. So, I’ll just sit back and await the responses.

If you answer OTHER, please add a comment below or write me on Twitter (@jayv and follow me coz I recently went private). I’ll add the option and let you know so you can change your vote. The plug-in I use (UPM)  doesn’t allow one to add poll answers.

Javascript: Timer Class

Today, I needed a Timer class for the site I’m working on. The project that I’m doing — as usual — has gone through yet another change. One chart needed to animate differently. Since iPad slideshows are apparently my bag, baby, I couldn’t use my normal jQuery magic. So, I’ve been relying on 3D-accelerated -webkit- animation. Ah, Webkit. The only proprietary CSS-prefix I actually am forced to use. Anyway, since I could not control the animation using JavaScript, I was not able to control a counter ticking up one by one. It would just start with the zero, and end at the final number. Thanks to the cool people at dailycoding.com, I was able to easily set up a method to update the counter. No extra brain-power needed.

The way it looks is easy.

The code eventually looked like this. Discerning eyes may note differences between the one at Daily Coding and here. I made the constructor a little more useful, taking in the interval and callback. I also renamed it, because heaven forbid I actually keep the term Timer.

slide.css

  1. #line-graph {
  2.  background:url('img/chart-lines.png') no-repeat left top;
  3.  float:left;
  4.  height:348px;
  5.  width:0;
  6.  margin-top:76px;
  7.  margin-left:52px;
  8.  -webkit-transition:all ease-in-out 0.8s;
  9. }
  10. #line-graph.grow {
  11.   width:320px;
  12. }
timer.js
  1. var dailyCodingTimer = function(interval,callback) {
  2.     // Property: Frequency of elapse event of the timer in millisecond
  3.     if (typeof(interval) == 'undefined') thisObject.interval = 1000;
  4.         else this.interval = interval;
  5.     // Property: Whether the timer is enable or not
  6.     // Event: Timer tick
  7.     if (typeof(callback) == 'undefined') this.tick = null;
  8.   else this.tick = callback;
  9.     this.Tick;
  10.    
  11.     // Member variable: Hold interval id of the timer
  12.     var timerId = null;
  13.     // Member variable: Hold instance of this class
  14.     var thisObject;
  15.    
  16.     // Function: Start the timer
  17.     this.Start = function() {
  18.         this.enabled = true;
  19.  
  20.         thisObject = this;
  21.         if (thisObject.enabled) {
  22.             thisObject.timerId = setInterval(
  23.             function() {
  24.                 thisObject.Tick();
  25.             }, thisObject.Interval);
  26.         }
  27.     };
  28.    
  29.     // Function: Stops the timer
  30.     this.Stop = function()
  31.     {            
  32.         thisObject.enabled = false;
  33.         clearInterval(thisObject.timerId);
  34.     };
  35. };
slide.js
// Remember to include the timer Class from dailycoding
  1. animateChart : function() {
  2.   util.removeClass ( slide.element.lettersGained , 'hidden' );
  3.   setTimeout ( function() {
  4.     util.addClass ( slide.element.graphLine, 'grow');  
  5.     // Create Timer Instance and Set Timer
  6.     slide.timerObj = new DailyCodingTimer(10,slideUpdateNumbers);
  7.     slide.timerObj.Start();
  8.   } , 500 );
  9. },
  10. updateNumbers : function () {
  11.  var linePosition = slide.element.graphLine.clientWidth + 1;
  12.  var importantN = linePosition / ( maxWidth – importantMax );
  13.  var newNumber = importantN.toFixed(1);
  14.  slide.element.numberCode.innerHTML = newNumber;
  15.  
  16.  if ( i >= 320 ) this.Stop();
  17. }

(In the above code, the slide.elements refer to a getElementById item, and util.addClass and util.removeClass functions add and remove classes, and maxWidth and importantMax are defined elsewhere.)

Anyway, what happens in the above is that the line chart is masked off by the CSS. Once the animateChart method is called, the mask’s width grows and grows until the full line chart is revealed. The timer is used to call an update method on whatever numbers will be updated. By pointing object.tick to the function object you want to run, and setting the interval, it will run as often as you like. The version I used (such a fan of setTimeout I am) wasn’t producing the desired results, so thank you, Daily Coding, for the much-needed help.

Peruse Daily Coding for more great Javascript and jQuery tips. A note of warning, though. They call themselves “daily” coding, but it’s more like . . . whenever they remember to update the site.

(It’s not that daily!)

The last few days of the project

So, since I am of course bound by NDA’s, I can’t exactly talk about what I’ve been doing for the past few weeks, nor for whom I am doing it. But, what was supposed to be a one-week project has extended into this, the fifth week. What’s so cool about it is that for the first time I got to use CSS3 -webkit- animations, and really put my JavaScript knowledge to good use, learned prototyping. I also learned that jQuery is not something you want to use when building HTML documents for use on iPads. (hence the CSS3 animation and transition usage).

But I really miss PHP, server-side programming.

So I’m finishing up this project, just running the products through Editorial, making changes, and updating code so that all of these products match visually and interactively. And after that, who knows what’s coming up?

I guess the reason I’m writing this post is to just sort of remind myself to update the resume with Front-end JavaScript Development, and real-world CSS3 application.

Me and bgStretcher.js

Hey. Today I figured out a problem I was having with one site. Just had to hack a JavaScript file to allow more parameters. Once that was done I was golden.

Funny how the easiest thing to do was the last option I explored.

I should go into more detail. But I think I will in the morning. It’s midnight.

Sometimes I wonder how good of a web developer I really am

Here’s the thing: I get things done. You say you need this or that, and nine times out of ten it’s done. Four times out of five it’s in a timely manner.  But when I go back and look at the code that I wrote, I can’t help but scratch my head and wonder what possessed me to write everything so haphazardly. I’m finally getting deeply into Linux, so far as I can set up a website without the use of a control panel like cPanel or Plesk. But I’m sure once more advanced things happen, the scripts and config files will end up looking just as jumbled as everything else I write.

So, at the place where I sit in an office and work, I’m trying to handle mass email things. You wouldn’t believe the amount of people who don’t like being emailed without their explicit consent, right? So I’d been doing this thing, manually supporting a team in this regard.  But there’s just so many people I have to give the boot!

So I finally got the bright idea, instead of staring at all these emails and going through them, to just separate the good from the bad, and then run the bad through a PHP script that gives me their unsubscribe link. And if cannot find one, I am given the entire email so I can use other means to take care of the removal.

I’m more of a jQuery guy than a Javascript guy. Go figure. I find that it’s easier to use as a front-end developer, like a Javascript Lite (tastes great, less filling). I love when I can type less, and jQuery lets me type less. When I need real Javascript I can pull it out, but I’m not as versed in that area.

I actually get excited when I do things I haven’t done before. Like, I have mouse gestures set up to help me scroll to the top or bottom of a page. When I set it to check a box because I click on a link, the convenience I just created astounds me.  And then when it turns out I have to click the box around the checkbox instead of the checkbox itself, I get frustrated to no end.

Ah, the glorious life of a guy who makes websites when they have an unrelated job.