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!

I build a little demo of the Instagram API

I’m learning how to use the Instagram API. Originally I signed up to use it so I can see if I could just mass-delete all my photos. By the way, I can’t. And now it doesn’t matter so much.

Oh, in case you missed it, they changed their ToS back to the version where they won’t have the right to use your photos with no compensation back to you. So, since they fixed that, I’m staying.

I put together a quick demo of the API. The only demo I have is one that goes through all of your followers and everyone you follow, and puts everyone onto a single screen where you can see if a user follows you or not, and likewise for your relationship with them.

If you want to see it, you can find the demo at jasonvertucio.com/demo/instagram_api. And if you try it out, let me know what you think in the comments below. If you find a problem, post it so I know what I need to work on to get it running.

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.

Foundation Framework

For the past day or so I’ve been staring at Foundation. It’s a Framework that claims to be responsive and has a lot of great little UI and layout things prepared for you. Also has two cool plugins built-in, Orbit and Reveal (an image slider and modal window, respectively).

So far, pretty cool. I want a reason to use this thing, it looks pretty awesome. I’ve been meaning to change up one of my websites for a while now. Maybe I’ll base it off Foundation.

In other news, I wish Kat Dennings would continue writing in her blog. Either that or I missed a memo where she moved?

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!)

SendMail Class (PHP Programming)

In case you’re one of those people who doesn’t care about . . . you know . . . web programming . . . . here’s a fun picture of how we all feel about the new Total Recall film.

For all the rest of you . . . I created a little PHP class that I’d been using for about three years, and updating on and off during that period. It’s simply called SendMail (although for some reason I called the class tofSendMail, which I’ll fix in the next release), and it was developed to easily handle the creation and sending of emails.

For the first public release, I have given you simple features such as the obvious:

  • To, From, Subject
  • CC, BCC
  • HTML and Text versions
  • Sending via PHP’s built-in mail function
And of course:
  • Attaching a file
  • Loading and parsing a text file to send

It’s nothing spectacular, but I decided to release it under the GPL license. I wanted to make it public because I don’t know what else to do with it. I figure you guys can point me in the right direction. It’s currently functional, so you could use it in a live site today. Actually, I may plan to use it on a project I have coming to me this weekend.

If you end up using the PHP class, please let me know. If you want to fork and contribute, definitely let me know. And if you find any bugs or want to see any other features in it, it is compulsory that I know. Also, this is the first time I’m ever using GitHub. If this repo is a rousing success I’ll drop in some other bits of PHP that I had written in the past for everyone to enjoy.

Enjoy!

How to fix Password-protected directories on a WordPress blog

Here’s something I’d been struggling with for the better half of the day. I’ve been trying to get my server to password-protect a directory, since one of the Confidentiality rules I have to follow includes not posting work publicly. And yet, the only way I can do some of the work is by putting it on a public web server. Sorry. You don’t need to know that. You just need to know what happens and how to fix it. Well, here we go.
Continue reading “How to fix Password-protected directories on a WordPress blog” »