Learning Actionscript 3 over the past year or so, I must admit I've been of the mindset: Why the @$%* should I bother with strict data typing? It's so restrictive. And it's messy! And all cluttery. So much extra typing...seems like a waste! However, working with some AS code written by a proper flash developer, I can't help but notice that EVERYTHING is typed. Functions are marked as :void when they don't return. And so on. So I forced myself to do some reading on why I should bother. A very nice post I found here has me considering perhaps following the existing convention in this code.
http://www.stevenhargrove.com/strict-data-typing/
I suppose I'll stick to it for now, give it a try. Do you have thoughts on the matter? Please feel free to cuss me out in the comments!
Regular Expressions: A Primer
Well, this morning I finally came across a problem where I couldn't avoid regular expressions anymore. Sure, I've used them in form validation, but I've pretty much always just copied existing code for validating email addresses etc, without much attention to the gibberish of characters that magically format or validate my string.
I busted out google and did a bit of searching; this is the page I found to be the most informative in the briefest amount of wordage:
http://www.webcheatsheet.com/php/regular_expressions.php
This page has a nice example chart at the bottom which for me really helped with my understanding of how it all works. I recommend anyone who hasn't bitten the bullet in this department to do a quick read over of this page, as regular expressions are pretty much a staple of any sort of semi-advanced programming.
And yes, you can now mock me for not bothering to learn this prior to now. Yay for self taught programmers!
I busted out google and did a bit of searching; this is the page I found to be the most informative in the briefest amount of wordage:
http://www.webcheatsheet.com/php/regular_expressions.php
This page has a nice example chart at the bottom which for me really helped with my understanding of how it all works. I recommend anyone who hasn't bitten the bullet in this department to do a quick read over of this page, as regular expressions are pretty much a staple of any sort of semi-advanced programming.
And yes, you can now mock me for not bothering to learn this prior to now. Yay for self taught programmers!
Simple CSS 100% Height and Width!
My only question is: HOW THE HELL DID I NOT KNOW ABOUT THIS?
Here's what happened. My earlier blog post about the 100% width absolute background element turns out was totally wrong. IE7< was glitching on this, causing a width of closer to 130%. Digging around the internet for an explanation for this bug(?), I came across this helpful post on A List Apart: http://www.alistapart.com/articles/conflictingabsolutepositions/
Basically, it mentions that some browsers don't play nicely when you mix percentage widths and fixed widths together on the same page. But that's not the important part - what is, is the solution it provided.
Take a div. Position it absolutely. Now give it left:0 and right:0 positioning. What is your first instinct will be the result? Mine was that it would default to the position which is declared lower in the style declaration. But the reality is much much sweeter. What you are in fact indicating is that the left most corner of the div should be at left:0, and the right most corner of the div should be at right:0. The result? 100% width. Now you may be thinking, can the same thing possibly apply to height? Guess what.....IT DOES.
The catch - it doesn't work in IE5 or IE6, and there is a teeny glitch in Opera. However, the List Apart article provides some work arounds for the IE issues. And if you or your development company has gone the way we have, as well as many other large internet presences, you can forget IE5 and 6 altogether these days, instead recommending your user to upgrade.
*waiting for the flaming from that comment. Oh wait, no one reads this blog. Phew.*
Here's my sample if you want to see it in action:
http://www.sugarandsalts.com/100percentbaby
Here's what happened. My earlier blog post about the 100% width absolute background element turns out was totally wrong. IE7< was glitching on this, causing a width of closer to 130%. Digging around the internet for an explanation for this bug(?), I came across this helpful post on A List Apart: http://www.alistapart.com/articles/conflictingabsolutepositions/
Basically, it mentions that some browsers don't play nicely when you mix percentage widths and fixed widths together on the same page. But that's not the important part - what is, is the solution it provided.
Take a div. Position it absolutely. Now give it left:0 and right:0 positioning. What is your first instinct will be the result? Mine was that it would default to the position which is declared lower in the style declaration. But the reality is much much sweeter. What you are in fact indicating is that the left most corner of the div should be at left:0, and the right most corner of the div should be at right:0. The result? 100% width. Now you may be thinking, can the same thing possibly apply to height? Guess what.....IT DOES.
The catch - it doesn't work in IE5 or IE6, and there is a teeny glitch in Opera. However, the List Apart article provides some work arounds for the IE issues. And if you or your development company has gone the way we have, as well as many other large internet presences, you can forget IE5 and 6 altogether these days, instead recommending your user to upgrade.
*waiting for the flaming from that comment. Oh wait, no one reads this blog. Phew.*
Here's my sample if you want to see it in action:
http://www.sugarandsalts.com/100percentbaby
Initializing an Associative Array in Javascript
Ian presented the following question to me: How do you initialize an associative array with default values in javascript? There is plenty of posts out there on the internet in regards to creating arrays, most look something like:
var myArray = new Array();
myArray["something"] = "some value";
and so on. But what he was looking for was something more like the php method:
$myArray = ( "something"=> "some value", "something else" => "another value");
after a small amount of scouring remembering something about colons, I finally found a scathing post by someone with the revelation: Javascript doesn't actually have associative arrays. In fact javascript doesn't have arrays at all. It has objects. So how do you initialize an associative array in javascript? You don't. You initialize an object:
var arrayTest = {"something":"1st Result","second":"2nd Result"};
alert(arrayTest["second"]);
Hopefully that helps someone out there in Google land.
var myArray = new Array();
myArray["something"] = "some value";
and so on. But what he was looking for was something more like the php method:
$myArray = ( "something"=> "some value", "something else" => "another value");
after a small amount of scouring remembering something about colons, I finally found a scathing post by someone with the revelation: Javascript doesn't actually have associative arrays. In fact javascript doesn't have arrays at all. It has objects. So how do you initialize an associative array in javascript? You don't. You initialize an object:
var arrayTest = {"something":"1st Result","second":"2nd Result"};
alert(arrayTest["second"]);
Hopefully that helps someone out there in Google land.
Javascript Variable Variables
Looking for a way to dynamically generate and assign variable names to objects in javascript, I found this post on creating a sort of variable variable in Javascript. Reading the post itself, I found the answer to my immediate question. However upon reading the comments, I feel like I had a moment of clarity in my understanding of the truly awesome power of javascript, dot notation, and prototype. Why is javascript so underestimated? I see this changing in the very near future...
http://www.i-marco.nl/weblog/archive/2007/06/14/variable_variables_in_javascri
http://www.i-marco.nl/weblog/archive/2007/06/14/variable_variables_in_javascri
PHP getimagesize()
Wondering how to find out the size of your image? getimagesize() returns a lovely array containing the height and width of the image, along with a few other bits of data. In fact, one of the array values is even a nice little string containing height="yyy" width="xxx" that can be used directly in an IMG tag.
See the php manual entry for more info on this, as well as a number of other nifty image data gathering functions.
See the php manual entry for more info on this, as well as a number of other nifty image data gathering functions.
PHP ini_get
A somewhat useful function in PHP - ini_get(string $varname). Useful for troubleshooting, would have come in handy for me once or twice in the past when trying to prove to a server admin that globals were on or off. IE:
echo 'register_globals = ' . ini_get('register_globals') . "\n";
Returns something like:register_globals = 0Read the PHP Manual entry for more details.
Prototype vs OOP
Wikipedia tells me many things. Most importantly at the moment, it tells me how to move my fresh new conceptual understanding of object oriented programming over to Javascript, which is not Technically object oriented, by prototype based.
Yep, the same prototype I discovered and mentioned earlier.
Are you following along children? This rabbit hole keeps going deeper...
http://en.wikipedia.org/wiki/Prototype-based_programming
UPDATE:
This article is an excellent stepping stone for understanding prototyping in javascript. Excellent even for those with shaky knowledge of OOP.
http://www.packtpub.com/article/using-prototype-property-in-javascript
Yep, the same prototype I discovered and mentioned earlier.
Are you following along children? This rabbit hole keeps going deeper...
http://en.wikipedia.org/wiki/Prototype-based_programming
UPDATE:
This article is an excellent stepping stone for understanding prototyping in javascript. Excellent even for those with shaky knowledge of OOP.
http://www.packtpub.com/article/using-prototype-property-in-javascript
Sarah Takes the Plunge into OOP. Finally.
Hello non existent blog readers.
*thanking Firefox for spell checking so I don't always spell existent wrong*
This is it. It's time to face the facts. I don't really know anything about Object Oriented Programming - beyond the abstract concepts. And I must. So here goes.
I'm going to be working on it from a PHP angle, as that's the OO language I'm the most comfortable with. I'm going to be starting from here:
http://www.codewalkers.com/c/a/Programming-Basics/Beginning-Object-Oriented-Programming-in-PHP/
Updates to follow of course. Wish me luck.
*thanking Firefox for spell checking so I don't always spell existent wrong*
This is it. It's time to face the facts. I don't really know anything about Object Oriented Programming - beyond the abstract concepts. And I must. So here goes.
I'm going to be working on it from a PHP angle, as that's the OO language I'm the most comfortable with. I'm going to be starting from here:
http://www.codewalkers.com/c/a/Programming-Basics/Beginning-Object-Oriented-Programming-in-PHP/
Updates to follow of course. Wish me luck.
CallFunction() ... What are you?
Continuing working through SWFUpload code, I've come across
returnString = movieElement.CallFunction('' + __flash__argumentsToXML(argumentArray, 0) + ' ');
Now, I think I get the gist of what is happening here - CallFunction is an Active-X method which seems to take an XML style argument in order to call a function in the Actionscript code. However, googling around I seem to be completely unable to find an API or any definition of this method. Can anyone help me out with this?
returnString = movieElement.CallFunction('
Now, I think I get the gist of what is happening here - CallFunction is an Active-X method which seems to take an XML style argument in order to call a function in the Actionscript code. However, googling around I seem to be completely unable to find an API or any definition of this method. Can anyone help me out with this?
Flash Satay - Flash stuff I should Have Known
Another learning step in my dissection of swfUpload - Flash Satay. A lovely way to include flash in your (x)html while still using standards based code. An interesting read even if you don't plan on implementing it (which we probably won't be. Because we are all non-standardsy. Shh.)
http://www.alistapart.com/articles/flashsatay
http://www.alistapart.com/articles/flashsatay
Javascript IS object oriented...sorta.
http://robertnyman.com/2008/10/14/javascript-how-to-get-private-privileged-public-and-static-members-properties-and-methods/
Helps if you understand object oriented programming - of course, this article is so straightforward it can almost help you understand it!
The extremely long url says it all.
Helps if you understand object oriented programming - of course, this article is so straightforward it can almost help you understand it!
The extremely long url says it all.
Terms: Static Members
Static Members are used with object oriented programming. A static member is a variable shared between all instances of an object. For example, if you had an object myObject with the static member objectCount, then myObject.objectCount++ would increase this value by 1 across all instances of myObject.
As javascript is not a typical object oriented language, the way object are created is slightly different. It seems typically they are assigned to a function - ie:
myObject = function(){ createObject(); }
and then
myObject.objectCount = 0;
Yes. This does mean you are assigning values to functions. I know! I'm still trying to wrap my head around it as well. I'm not even sure I'm using the right terminology to define this. So HA!
Let's just worry about understanding the definition of static member for now, shall we?
As javascript is not a typical object oriented language, the way object are created is slightly different. It seems typically they are assigned to a function - ie:
myObject = function(){ createObject(); }
and then
myObject.objectCount = 0;
Yes. This does mean you are assigning values to functions. I know! I'm still trying to wrap my head around it as well. I'm not even sure I'm using the right terminology to define this. So HA!
Let's just worry about understanding the definition of static member for now, shall we?
Tems: Prototype
Hello again children. Today we are going to learn about a nifty little property in Javascript - PROTOTYPE.
First off, have you ever worked with objects in Javascript? Tell me about it in the comments if you have. There is some debate over whether Javascript is truly an object oriented programming language or not (see here: http://javascript.crockford.com/javascript.html to learn why we tend to underestimate this language.) Either way, the prototype property is meant for working with javascript objects. Since I don't really know much about Object Oriented programming myself (which I plan to soon change!), I can't honestly give you a full run down on what it means/does. I'm just going to tell you the gist and give you the link so you can read for yourself.
Basically the idea is by using someObject.prototype.someMethodOrValue = something, you are in fact assigning that method or value to all instances of this object.
I have a hunch that this little feature may be at the heart of what makes JS object oriented. But I think I'll have to get back to you on that once I actually KNOW something about it. In the meantime, read about it for yourself.
Ta ta for now!
First off, have you ever worked with objects in Javascript? Tell me about it in the comments if you have. There is some debate over whether Javascript is truly an object oriented programming language or not (see here: http://javascript.crockford.com/javascript.html to learn why we tend to underestimate this language.) Either way, the prototype property is meant for working with javascript objects. Since I don't really know much about Object Oriented programming myself (which I plan to soon change!), I can't honestly give you a full run down on what it means/does. I'm just going to tell you the gist and give you the link so you can read for yourself.
Basically the idea is by using someObject.prototype.someMethodOrValue = something, you are in fact assigning that method or value to all instances of this object.
I have a hunch that this little feature may be at the heart of what makes JS object oriented. But I think I'll have to get back to you on that once I actually KNOW something about it. In the meantime, read about it for yourself.
Ta ta for now!
Sarah Learns a New Term - Namespaces
Working on implementing SWFUpload or a similar type uploader. On reading the documentation, I see:
Think about this: You are writing the next big Facebook - your php code is getting to around 10,000 lines, and you are using multiple third party plugins. Suddenly you come across a predicament - that nifty third party User Widget has conflicting class names with that other nifty third party thing-a-majig. Namespacing avoids this by allowing you to 'classify' your code (how punny). Assigning a namespace to a php file (you can even assign more than one per file) ensures that the widget USER class does not get overwritten by the thing-a-majig USER class.
For an explanation that actually makes sense, see here:
http://www.sitepoint.com/blogs/2009/07/13/php-53-namespaces-basics/
The main features that SWFUpload provides are:
- The ability to select multiple files in the file browser dialog.
- AJAX-style uploading without a page refresh.
- Upload progress events.
- Namespaced classes compatible with other JavaScript libraries (i.e., jQuery, Prototype, etc.).
- Flash 9 and Flash 10 support. (Flash 8 support dropped in version 2.2.0)
Think about this: You are writing the next big Facebook - your php code is getting to around 10,000 lines, and you are using multiple third party plugins. Suddenly you come across a predicament - that nifty third party User Widget has conflicting class names with that other nifty third party thing-a-majig. Namespacing avoids this by allowing you to 'classify' your code (how punny). Assigning a namespace to a php file (you can even assign more than one per file) ensures that the widget USER class does not get overwritten by the thing-a-majig USER class.
For an explanation that actually makes sense, see here:
http://www.sitepoint.com/blogs/2009/07/13/php-53-namespaces-basics/
Walking the plank, er, DOM
A very handy reference for DOM objects and methods:
http://www.howtocreate.co.uk/tutorials/javascript/domstructure
http://www.howtocreate.co.uk/tutorials/javascript/domstructure
Learning Ajax, Json, with php and database manipulation.
I've been struggling today and last week to find some good tutorials or a well recommended book for getting the ball rolling in my quest to learn Ajax. I figure I might as well try to start off working with Json instead of wasting time with parsing string data. So far here are the links I've found useful:
Quick run down on JSON:
Understanding JSON: the 3 minute lesson
JSON on Wikipedia
Excellent Starter tutorial using Ajax (and ASP, but can be easily modified to a php date() function)
W3schools Ajax Example
More Advanced and In Depth Series on Ajax covering numerous topics, which I breezed through the first 3. A much longer read, but contains some really useful details:
Mastering Ajax: 11 Part Series from IBM developerWorks
After you do the W3 Schools Tutorial, I suggest moving on to this one, which uses Ajax, Json, Php, and Database manipulation. Heads up - I had to remove the $$link variable variables from the database functions in order for it to work.
Json Ajax Webchat Tutorial
Good luck, and if you know of some additional resources I would appreciate the links.
Quick run down on JSON:
Understanding JSON: the 3 minute lesson
JSON on Wikipedia
Excellent Starter tutorial using Ajax (and ASP, but can be easily modified to a php date() function)
W3schools Ajax Example
More Advanced and In Depth Series on Ajax covering numerous topics, which I breezed through the first 3. A much longer read, but contains some really useful details:
Mastering Ajax: 11 Part Series from IBM developerWorks
After you do the W3 Schools Tutorial, I suggest moving on to this one, which uses Ajax, Json, Php, and Database manipulation. Heads up - I had to remove the $$link variable variables from the database functions in order for it to work.
Json Ajax Webchat Tutorial
Good luck, and if you know of some additional resources I would appreciate the links.
Double top-padding in IE7
Ran into a situation today where top-padding was being doubled in IE7. After banging my head on the desk a few times trying to fix it, I turned to google and found this little trick:
http://cafefrenzy.com/css-double-padding-ie7-fix/
Basically you add display: inline-block; to the element. Worked like a charm!
http://cafefrenzy.com/css-double-padding-ie7-fix/
Basically you add display: inline-block; to the element. Worked like a charm!
Complex backgrounds with 100% width and Absolute Positioning
Lately one of our designers has been sending down a lot of psd layouts with complicated background elements, involving the need to tile-x a repeating background, but still have a "static" type background at least 1500px wide, without creating horizontal scroll bars for smaller viewports.
After doing some digging around, the best way I've come up with for dealing with this particular issue is to set the x-repeated background as the body background, then absolutely position a layer behind the rest of the page, set to width: 100% and background: no-repeat.
Annoying? Yes.
After doing some digging around, the best way I've come up with for dealing with this particular issue is to set the x-repeated background as the body background, then absolutely position a layer behind the rest of the page, set to width: 100% and background: no-repeat.
Annoying? Yes.
Do you know the TFoot tag, the tfoot tag, the tfoot tag...
Interestingly enough, I actually learned something about HTML today. Yep, good ole HTML, just when I think I know you, you go and throw me a curveball. Well okay, perhaps it's not quite so dramatic, but it's an interesting little tidbit of information none the less.
Basically, we all know tables have rows and cells, which appear as:
<table>
<tr>
<td>
</td>
</tr>
</table>
However, did you know that there are some other mysterious table tags, thead/th, tfoot, and tbody? Perhaps you've seen tbody floating around here and there, probably even th/thead. However, the part that I actually find interesting is the tfoot tag. In your HTML structure it would be laid out like this:
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Now here's where the interesting part comes in - the tfoot section is actually rendered BEFORE the tbody section, but below it in the page. This is possibly an interesting reference to the early days of the web when text actually took time to load over our 14.4 k modems, and table based layout was the norm. Who knows... (certainly not me).
Of course the real lesson to be learned here is that we should all love CSS, because tables are CRAZY.
Basically, we all know tables have rows and cells, which appear as:
<table>
<tr>
<td>
</td>
</tr>
</table>
However, did you know that there are some other mysterious table tags, thead/th, tfoot, and tbody? Perhaps you've seen tbody floating around here and there, probably even th/thead. However, the part that I actually find interesting is the tfoot tag. In your HTML structure it would be laid out like this:
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Now here's where the interesting part comes in - the tfoot section is actually rendered BEFORE the tbody section, but below it in the page. This is possibly an interesting reference to the early days of the web when text actually took time to load over our 14.4 k modems, and table based layout was the norm. Who knows... (certainly not me).
Of course the real lesson to be learned here is that we should all love CSS, because tables are CRAZY.
Background Image Not Showing Up in IE
Just wanted to share a little IE/CSS particularity that has caught me a few times now in regards to background styling. It seems if you don't leave a space after the url brackets, ie:
background: url(http://www.someurl.com/image_assets/slices/contentTop.jpg)no-repeat top;
it can not parse the style. I suppose this is pretty straightforward and any reasonably intelligent person could recognize this glitch, but it's caught me at least twice now, so I thought I'd throw it out there on the web.
If I was really motivated I would go look up the CSS Specifications for this and see if this is IE's mess up or everyone elses, but hey, I'm just not.
background: url(http://www.someurl.com/image_assets/slices/contentTop.jpg)no-repeat top;
it can not parse the style. I suppose this is pretty straightforward and any reasonably intelligent person could recognize this glitch, but it's caught me at least twice now, so I thought I'd throw it out there on the web.
If I was really motivated I would go look up the CSS Specifications for this and see if this is IE's mess up or everyone elses, but hey, I'm just not.
PHP in JS?
Seems some clever people are porting php functions into a javascript library. At the very least the md5 function should come in handy. Not sure what the security implications of that are however. Check it out for yourself:
http://phpjs.org/functions/index
http://phpjs.org/functions/index
Google Apps Email Pop Issues
I have a client account set up which will not connect to the incoming gmail server. I have tried deleting the account and setting it up again, as well as changing the password.
It basically keeps asking for the password over and over again when Testing the Account settings/checking mail, as if the password were incorrect, despite accepting that password just fine for outgoing/smtp as well as for the webmail interface.
I saw a post about resetting CAPTCHA here:http://groups.google.com/group/Gmail-Help-POP-and-IMAP-en/browse_thread/thread/81c1bc268ef7660a?fwc=1 and tried that as well, which also did not solve the problem.
Currently looking for the answer still - in the meantime I ended up creating a new mail account, forwarding the mail through Gmail's webmail interface, and simply receiving the email from this new account.
It basically keeps asking for the password over and over again when Testing the Account settings/checking mail, as if the password were incorrect, despite accepting that password just fine for outgoing/smtp as well as for the webmail interface.
I saw a post about resetting CAPTCHA here:http://groups.google.com/group/Gmail-Help-POP-and-IMAP-en/browse_thread/thread/81c1bc268ef7660a?fwc=1 and tried that as well, which also did not solve the problem.
Currently looking for the answer still - in the meantime I ended up creating a new mail account, forwarding the mail through Gmail's webmail interface, and simply receiving the email from this new account.
There once was a girl...
Well, I set this blog up to test some settings for a client. And then I though, what the hell, I'm learning things every day at work, and I know how frustrating it can be sometimes trying to find answers on the internet. So why not share those answers with the world? And so I will.
Right now I am testing what happens when you edit a post in Blogger. We are trying to decide what to do in our own CMS blog in regards to post ordering.
Right now I am testing what happens when you edit a post in Blogger. We are trying to decide what to do in our own CMS blog in regards to post ordering.