Twitter Weekly Updates for 2009-02-01

Sunday, February 1st, 2009 | Personal | No Comments
  • Check this out, some good ajax examples — jQuery tutorials for Designers — http://tinyurl.com/2uhodh #
  • Some little hints I didn’t know about sitemaps – http://tinyurl.com/c88wsw – I wasn’t even signed up for http://webmaster.live.com! #
  • RT @TheDigitalLife: Starbucks lays off 1000, Home Depot -7000, Sprint -8000, and bailout Citicorp just bought a new $50m jet. Yup its Mo … #
  • #ajax Check out my Basic Ajax Tutorial – jQuery toggle and slide http://tinyurl.com/8b869e #
  • RT @designmeme: 10 Must-Read Articles for Photoshop Beginners http://tinyurl.com/b39hjt #
  • RT @whybanksfail: New blog post: Job cuts across the board, 72,500 people in the cold http://tinyurl.com/asgxnb #
  • #obama Has anyone seen the new http://www.whitehouse.gov? Much more informative — and of course the official weekly Youtube address #
  • RT @designmeme 15+ Tips to Speed Up Your Website, and Optimize Your Code http://tr.im/d1o5 #
  • Highlights posted by Wired on last weeks chat with IE8 developers, http://tinyurl.com/auldgu — still waiting for CSS3 #
  • #iphone That dark spot in the middle of my 3G iphone is really bothering me — but I don’t want to risk a worse replacement #
  • #mysql #wordpress Saw a nice post at Shawn’s Place, Optimizing your MySQL database with PhpMyAdmin & WP-Plugin – http://tinyurl.com/b4xubx #
  • The dog is now getting groomed in our driveway, thanks Fur Kidz, http://www.furkidzltd.com. How great is that? #
  • RT @pchere: 10 Steps To Protect The Admin Area In WordPress http://tinyurl.com/cuthr5 #
  • Today I’m going to do some experiments with #flash #flex and #papervision3d — hopefully culminating in something I can use on a project! #
  • #design Some amazing modern lamp designs (no, not linux/apache/mysql/php) you have to see these – http://tinyurl.com/cnfrad #
  • #flash #as3 Long day — got lots of progress with #papervision, figured out how to make animations smoother and look better — night! #
  • Went skiing with my dad at Butternut today, great day! Came home and did some more papervision experimentation — even better. #

Tags: ,

Adobe and Apple working together for Flash on the iPhone

Sunday, February 1st, 2009 | Business | No Comments

I know, can you believe it?  All this drama, and we find out they’re both amicably working towards a solution.  

Saw it on Apple Insider, Adobe, Apple working together on Flash for iPhone.  

Seems like it was announced recently.

Apple Insider mentions that Apple has been trying to tout HTML 5 as a replacement to flash on the iPhone.  I know HTML 5 has some cool toys in it, but not nearly enough to meet why people demand Flash on the iPhone — because everyone is already USING flash on the web.  Saying you provide a desktop like browsing environment and not including Flash is a big deal to me.

This made me happy to read (except the HTML 5 part).  Hope you enjoy the news too!

Tags: , , , , , ,

Maximum Length of an Email Address is…

Tuesday, January 27th, 2009 | Business | 3 Comments

A question posted on About.com, “Is the Length of an Email Adresses Limited? If Yes, What is the Maximum” (yes, I know it’s not proper grammar, but it’s a quote).

The official result, 320 characters.

It is made up by:

  • 64 characters for the email name
  • 255 characters for the domain
  • 1 character for the “@”

How many people now have to change that email field in the database from varchar(255)?

It’s been making the rounds on the internet lately, thought I’d publish it as I didn’t know this either.

UPDATE: 2009.06.24

According to a recent, and informative, article at www.eph.co.uk, Email Address Length FAQ — email addresses are actually limited to 254 characters.

While you can technically have a 254 character email address, this information is mostly only useful to developers implementing email addresses.  It is very likely that your email will not work if it is longer than, say, 50 characters.  Even if officially your email address is supported, think of how annoying it will be to notify everywhere you want to set up your email, that they don’t implement email addresses properly.

This sounds like good news, as 254 characters is perfect for varchar(255) fields.

Here’s a blog that posted a graph of all email addresses in their system: What’s the average length of an email address?

Tags: , , , , , ,

Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin

Monday, January 26th, 2009 | Business, Tutorials | 72 Comments

This tutorial covers:

  • What is a plugin?
  • Installing a plugin
  • The jQuery Marquee plugin
  • Implementing the jQuery Marquee plugin

What is a plugin?
A plugin is an addition to the core jQuery functionality.  Plugins are made to be simply integrated into an existing jQuery web page.

For this tutorial, we will be working with the jQuery Marquee plugin from remy sharp’s b: log.  Take a look, he did a good job putting his post together.





Installing a plugin
Installing plugins is very easy.  This is the easiest part of working with all plugins.

Pretty much:

  1. Download the plugin
  2. Upload the plugin to your server
  3. Include the plugin in your document

First, download the jQuery Marquee plugin here (taken from the original post, The Silky Smooth Marquee).  If it just displays in your browser, right click on the link and select “Save Link As…”.

Now that we have the plugin, we just need to post it on our site.  Upload it to your javascript folder (I normally use “/js” for this).

Finally we need to include the JS library in your document, so we add the following line (into a very basic document):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>

</body>
</html>

It’s uploaded!

The jQuery Marquee plugin
Whenever working with a plugin, normally the plugin page has helpful instructions on it’s use, and examples.  In this case that is true.

Again, I’m going to link back to the original page — The Silky Smooth Marquee.

On that page the author has detailed:

  • Demo
  • Download
  • Usage
  • How it works
  • Events
  • Support

Very helpful.  Additionally, it helps to look and see if there are any useful comments.  Usually commenters point out minor flaws in the code posted (or major!), and supply resolutions.  If you follow the conversation thread on the post, you will see commenters have requested functionality that was implemented back into the plugin.

Implementing the jQuery Marquee plugin
Now the final part.  This is both easy and hard.  The easy part is usually getting the basic implementation working.  The hard part comes in when you try to do exactly what YOU want to do with THEIR plugin example.  Usually it can be done.  Sometimes there are minor modifications that have to be made to the original plugin.

Once you have added the library, all you need to do is include the code.  There is a great example page, jQuery Marquee Demo, that shows the various implementations.

For our purposes we’ll implement a basic marquee on our page:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
     <marquee behavior="scroll" direction="up" scrollamount="1"
          height="75" width="150">
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
     </marquee>
</body>
</html>

The plugin automatically binds to the marquee tag.  Does yours work?  Check out our example of jQuery scrolling text marquee.

That was too easy?

Yes.  If you look at the comments, one common request is to adjust the scroll speed.  You can see that our scrollamount is already set to the minimum, 1.

The author recommended setting the timeout (refresh rate) to a larger number.  By default, it is set to 25ms.  If we wanted to go twice as slow, we just have to change that to 50ms.  This is where modifying the core code of the plugin comes in.  If you want to go ahead and do this:

  1. Open up the jquery.marquee.js file.
  2. Find the line: “setTimeout(animateMarquee, 25);”
  3. Change it to: “setTimeout(animateMarquee, 50);”
  4. Upload the new jquery.marquee.js file

The sky is the limit.

Please give us feedback on this tutorial, also take some time to thank the author of this plugin, Remy he’d probably appreciate a follow on Twitter, or even a comment on his blog.

Tags: , , , , , , ,

Twitter Weekly Updates for 2009-01-25

Sunday, January 25th, 2009 | Personal | No Comments
  • It’s been a good weekend — Snowboarding, Star Wars, AJAX, Flash, jQuery, CSS, Cleaning, Snow — time to kick start the rest of the week! #
  • You can watch the Inauguration LIVE on my blog, http://tinyurl.com/9xvk4o #
  • RT @macworld: Apple results: record $10.17B revenue and $1.6B profit; 2.5M Macs, record 22.7M iPods, 4.3M iPhones. More live in 20 mins. #
  • Trying to figure out how to clear the DNS cache on Google’s Chrome browser, anyone know? #
  • RT @whybanksfail Scariest 2 graphs on The Fed & Bank Borrowing http://tinyurl.com/73b5p5 #
  • Clearing browsing data, all of it, in Google Chrome does NOT clear the DNS cache of the browser. Still looking…. #
  • Seems that after closing all Chrome instances, and restarting the browser — the DNS prefetch is reset. Would love a button for that #
  • RT @whybanksfail New blog post: England on a path with Stagnation http://tinyurl.com/d6oe7o #
  • Isn’t Google hosted email great? #
  • Good morning all! #
  • RT @zaibatsu: Inside Jonathan Ive’s Apple Design Lab http://bit.ly/1MXQeN That’s what I call a lab #
  • RT @SashaKane: Don’t usually recommend blogs, but this one ROCKS! http://tinyurl.com/dhr6st #
  • RT @BILL_ROMANOS: Looking at: Dynamic Visualization of “Worldwide Inauguration via Twitter” ( http://tinyurl.com/cukllg ) #
  • Signing out for the day — enjoy the weekend everyone! #
  • Just finished house chores — now it’s time to get some work (play) done! Flash and flex, here I come #

Tags: ,

Lone Survivor, Dear Leader – The Alarmist

Friday, January 23rd, 2009 | Business | No Comments

Recently I’ve been listening to two things.  One is an audiobook I downloaded from iTunes, the other is an album of a group from Boston that I used to like.

First, the audiobook that I just finished:

Lone SurvivorLone Survivor: The Eyewitness Account of Operation Redwing and the Lost Heroes of SEAL Team 10
by Marcus Luttrell

It’s a great story told by the survivor of a failed Navy SEAL operation in Afghanistan.  Highly recommended.

I downloaded it from iTunes and listened to it while driving back and forth to Boston:

Marcus Luttrell - Lone Survivor: The Eyewitness Account of Operation Redwing and the Lost Heroes of SEAL Team 10 - Lone Survivor: The Eyewitness Account of Operation Redwing and the Lost Heroes of SEAL Team 10

Second, I find myself listening to this album more frequently recently when working:

Dear Leader - The AlarmistDear Leader – The Alarmist

It’s a band from Boston, the lead singer originally was from The Sheila Divine.  Check it out on iTunes first, I love the album:

Dear Leader - The Alarmist

Tags: , , , ,

How to link to iTunes: iTunes Link Maker

Friday, January 23rd, 2009 | Tutorials | 11 Comments

I was just about to write a post about an album I’ve been listening to, and an audiobook I just finished “reading”.

I wanted to know how I could link directly to those items in iTunes.  Here’s how..

iTunes Link Maker

An official tool by Apple, it lets you find items in iTunes and link to them.

First you must enter the item you are searching for (I usually leave it as all media):

Apple iTunes Link Maker

Once you hit search, you see a results screen where all matching items are listed.  Click the arrow to the right of what you want to link to (keep in mind, clicking on the arrow next to an artist, will link to that artists page):

Apple iTunes Link Maker

Finally you get the HTML to copy from the page, and insert into your document!

Apple iTunes Link Maker

UPDATE

Recently I’ve discovered there’s a way to setup these links as an affiliate, to make 5% commission off sales made through your blog links.  Check out my article, iTunes Link Affiliate: How to Make Money Linking to iTunes Music

Tags: , , , , ,

Basic AJAX Tutorial: jQuery toggle and slide

Wednesday, January 21st, 2009 | Business, Tutorials | 20 Comments

In this tutorial we will review:

  • Definition of AJAX
  • Introduction to jQuery
  • Basic document jQuery preparation
  • Binding jQuery actions to an anchor (A) tag
  • Toggling visibility of a div
  • Sliding in and out of that div

It sounds like a lot, but it’s all very easy.

Definition of AJAX
The term AJAX means Asynchronous JavaScript and XML.  That means AJAX technically defines a method for javascript to communicate with XML.  Over the past few years AJAX has been interpreted as a means for implementing all “web 2.0″ functionality in the front end.  That added things like animations to the general term “AJAX”.





Introduction to jQuery
jQuery is one of my favorite libraries with a good toolset for working with AJAX techniques.  You can find out more information on jQuery at their site.

jQuery is a “fast and concise Javascript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development”.  Taken from the website itself.

As a javascript library, we will have to include the jQuery library on a page, and implement some of it’s more basic functions.

Basic jQuery document preparation
The first thing we need to do is incorporate the jQuery library in our page.  So download jQuery (direct link to the Google Code location).

Now that we have our JS library, we need to tell our document where it is (I renamed my js file to jquery.js, and threw it in the js folder):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>

</body>
</html>

We inserted the SCRIPT tag to include the jquery library when the page is loaded.

Binding jQuery actions to an anchor (A) tag
Lets create a basic link in our document:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>
     <a href="#">Click Here</a>
</body>
</html>

We now have a link that does nothing.  We are preparing to bind jQuery to the anchor.

Toggling the visibility of a div
We need to do 2 things to toggle the visibility of a div with jQuery.  First off, we need a DIV to toggle!  Second we need to bind jQuery commands to the anchor link.

We will take advantage of the jQuery toggle effect.

To do this, we change our code below:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               $('#toggleSection').toggle();
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off
     </div>
</body>
</html>

This step we did a lot.

First we added [id="togglebutton"] to the A tag.  That lets us identify it in the jQuery code.

Second we added the “toggleSection” DIV to the document.  The entire div will be toggled on and off.  Again, here we identified the DIV as “toggleSection” to be able to target it with the jQuery code.

Third, we added the jQuery code that actually does the toggling in the HEAD section of the document.  jQuery is a javascript engine, so we have to execute the commands in SCRIPT tags.  The first line of the code, “$(document).ready(function() {” is complicated.  Lets dissect this code.

Finally we put “return false;” in the code, that tells the link NOT to use the HREF value.  This means “#” will not be loaded.  It’s annoying, because that brings the browser to the top of the page in certain browsers.

$(document) — this is the HTML document itself.  It is the same as “document” in normal javascript.

.ready( — this is us looking at the “onLoad” part of jQuery.  When the document is ready, it executes  the “ready” method.  Here we are defining what the ready method is.

function () { — basically, we are creating a new function that will fill in for the document.ready method.  When the document is ready, our code will be executed.  This is smart, as executing code when the page isn’t ready can result in missing elements that aren’t loaded yet.

After that statement, we have “$(‘#toggleButton’).click(function() {“, another complicated statement.  Lets break it down:

$(‘#toggleButton’) — we are looking for the “toggleButton” via jQuery.  This code finds it for us.

.click( — Instead of setting the value of the “ready” method before, we are setting the function of when the “toggleButton” is clicked. So we need to create a function…

function () { — again, creating a function inline.  This will be assigned to the button’s “click” method.

Finally we do the fun stuff, toggling the DIV on and off with “$(‘#toggleSection’).toggle();”.  By now it should be easier to read this line.  We are finding the toggleSection div, and calling the jQuery method of “toggle()” which will toggle the visibility of the DIV.

It is important to note the “return false” part of this.  By returning false, we are telling the HREF that it should NOT execute the HREF value (which is #, and would bring the browser to the top of the screen).  If we don’t return false, the browser will still load the HREF value, and we will have some minor issue cross browser.

We’re done!  We are toggling the visibility, check out the demo — jQuery toggle demo.  Fortunately, we can still have a little more fun..

Sliding in and out of that div
In the previous step, we toggled the visibility of a DIV.  It’s not too exciting, as we could easily do that with javascript before with stylesheets and basic DOM code.  What is great about the jQuery library is all of the additional methods for animation it gives us.  Lets setup that div to not just appear, or hide — but to slide in and slide out.

For that we will take advantage of the slideUp and slideDown methods, they are just 2 of many Effects available in jQuery.

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               if ($('#toggleSection').is(":hidden"))
               {
                    $('#toggleSection').slideDown("slow");
               } else {
                    $('#toggleSection').slideUp("slow");
               }
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off<br>
          More content<br>
          Slides are more fun with more content<br>
          Four lines should be enough
     </div>
</body>
</html>

We have added a little more content to the DIV, so we can more easily see how the slideUp and slideDown work.  There are 2 interesting steps we hav taken.

First, we added an “if” statement to detect if the DIV is hidden or not.

Second, we added code to slideUp or slideDown depending on whether the DIV is actually hidden.

Check out the result on our example — jQuery slideUp and slideDown demo.

Conclusion
I hope this helped some of you out.  Let me know if it did.  Comments are open!

Tags: , , , , , , , , , , , , ,

Slumdog Millionaire (no spoilers)

Wednesday, January 21st, 2009 | Personal | No Comments

Slumdog Millionaire PosterI will make sure, not to spoil any of the plot for any of you.

Just this past weekend we went out to see Slumdog Millionaire.

The reactions were slightly mixed. I loved the movie. It was not the type of movie you are used to seeing, as well as very engaging. The girl liked the movie, but didn’t love it as much.  I forgot the reasons.  

Let me frame the experience. We had never heard any promotions for the movie yet. The first we heard of the movie was when it won at the Golden Globes.

The movie is the type where everyone in the theater stayed when the credits started, and didn’t move until the “final” credits began to roll.  The last movie I remember that did that to me was Requiem for a Dream.

Slumdog Millionaire gives an interesting insight into growing up in third world conditions.  Things that youth around the world take in as normal on a daily basis, are situations we consuder unsuitable for life.  Yet the kids adapt, and grow with it. 

There were “artistic” statements throughout the movie.  Usually I choose to ignore those, identifying, but ignoring.  

At no point did I even look at my watch.  Simply put, just go out and see it.  If you’ve seen the promos, it may seem odd, but it is worth it.    If you can, don’t read any reviews of the movie (after this one) or even read the description of the movie, just see it.

Tags: , , ,

Watch the Inauguration Live Here

Tuesday, January 20th, 2009 | Personal | No Comments

Tags: , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template