UCD Web Developers

Google to open source VP8 HTML5 video!

2010-04-15T21:05:00.002-04:00

Google to open source VP8 HTML5 video! http://newteevee.com/2010/04/12/goog...r-html5-video/ Google purchases VP8 and is planning to open source the technology. So what does this mean for the layman? It means that emerging technology called HTML5, specifically HTML5 video, can be supported by all browsers for free! Furthermore, this means that another nail is put through the heart of Adobe's Flash format, and thus may be sealing the fate of Adobe’s beloved flash video format. Ok so what does this mean to a real layman? Video support will be much more broad, no more third-party plug-in from another company to run video. Also devices such as the iPad will fully support it. Don’t fear you flash developers; Adobe will be around for quite some time, that is if they just adjust their strategy, sell their studio software, but support conversion to VP8 video format, as well as any other format that comes along.

Patrick Simpson has invited you to Dropbox

2010-04-15T09:32:00.001-04:00

We're excited to let you know that Patrick Simpson has invited you to Dropbox!

Patrick Simpson has been using Dropbox to sync and share files online and across computers, and thought you might want it too.

Visit www.dropbox.com to get started.

- The Dropbox Team

To stop receiving invites from Dropbox, click here

Firebug Demos

2010-04-14T09:20:00.001-04:00

Introduction to Firebug

http://vimeo.com/10782588

HTML & CSS Tab - Firebug Demo

http://vimeo.com/10883651

Console & Script Tab - Firebug Demo

http://vimeo.com/10621192

Questions to start a project

2010-01-21T11:05:00.001-05:00

I’ve started a list of questions to establish constraints for project work. These are targeted to web development (since that’s my area), but should be part of a larger series of questions that are asked when taking on a project. The idea is to discover the constraints the project runs under, and to force the issue on decisions that need to be made but have not. I’ll try to update these as they change.

Browsers

Is there a specific set of browsers that must be supported? If not, then the [http://developer.yahoo.com/yui/articles/gbs/](YUI Graded Browser Support) will be used.
If there are specifics, please specify for the following browsers. OSes tested on will be Windows XP and OS X 10.5+. Internet Explorer, Firefox, Safari, Chrome, and Opera.

Window size

What is the smallest window size that must be supported? If not specified, then 800×600 will be used.
What is the largest window size that will should tested against? If not specified, then 1440×900 will be used (size of the laptop I test on).
Is there a preference for a fluid or fixed layout? If not specified, a fluid layout will be used. If a fluid layout is preferred, will mockups/images at multiple screen sizes be provided?

CSS

Is the project already using a library for CSS, such as YUI Grids? If not, then http://developer.yahoo.com/yui/3/ Grids/Base/Reset/Fonts CSS files will be used. This will be accessed via a Content Distribution Network hosted by Yahoo or Google (in other words, the files will be served from an outside network to increase page speed and take advantage of caching).
Is there any restriction against using conditional comments for various versions of Internet Explorer? If not, these will be used to target CSS and javascript fixes to versions of IE as needed.
Is there any issue with progressively enhancing the website for advanced browsers? This means that certain effects such as rounded corners will NOT show on out of date browsers, such as IE6. If not, CSS3 techniques will be used to create effects such as rounded corners.

Javascript

Is the project already using a library for javascript, such as jQuery, YUI, Blueprint, etc? If not, then either YUI or http://jquery.com/ will be used, usually the latest stable version available. Again, this will be accessed via a CDN where possible.

Working in a code base or on my own?

Will I be working in the production code base or creating my own prototype?

Accessibility

Are there any specific accessibility requirements? If not, then [http://www.w3.org/TR/WCAG20/](WCAG 2.0 “The latest a11y guidelines from the W3C”) and http://www.w3.org/WAI/intro/aria will be targeted/implemented in the code.

Agile, waterfall, other?

Is there a specific methodology being used for the project that I will need to participate in, such as daily standups? What are the dates and times for those meetings, and what I am expected to contribute to those?

IDE/environment

Is there a specific IDE or environment that must be used, such as .NET studio, Eclipse, etc? Is there a specific version control system that must be used? If not, I will use a text editor and our own vcs repository.

Server side Languages

Is there a specific server side language that I must use? If not, PHP will be used.

Final deliverables

I will deliver HTML, CSS and javascript, optimized for performance. This means the CSS and javascript will be minified. All of the above will be delivered as URLs on our server, generated from a Server Side Language such as PHP. Is this sufficient, or do I need to provide a zipped/tarred version of the files?
Will I be helping to integrate the delivered items into the production code base?

Debugging

Will I be expected/asked to help debug production code issues once a release has occurred?

JavaScript Plugin of the Month - jQuery mbTooltip

2009-10-27T15:11:00.004-04:00

This one is nice, it has many options you can specify, also they have a nice demo page:

http://pupunzi.com/#mb.components/mb.tooltip/tooltip.html

http://pupunzi.open-lab.com/2009/02/07/mbtooltip/

On doing it right the first time

2009-09-25T16:40:00.002-04:00

Everyone who writes any sort of code has been asked to do a one-off - "just do it quick, it'll never be anything but a prototype". Even serious projects have this (see http://code.google.com/p/virtualagc/source/browse/trunk/Luminary099/LUNAR_LANDING_GUIDANCE_EQUATIONS.s?r=258, the comments for lines 179 and 180). The problem with this is that it's never just a one off. Every line of code we write gets used again and again because it's becomes easier to copy and paste something than to write it from scratch. If we don't do it right the first time, there's never time to go back. So how do we get the time to do it right? Simple. Don't give in on time estimates. When they say it's just a quick example, can't it be done in an hour or two, say no. Explain why you won't cheat the process. The only way we achieve the standards we want is to refuse to accept anything that doesn't meet those standards. Set a minimum bar and don't go below it. In the long run, it makes our work better, and makes us better teammates to those who depend on us. It may not be obvious at first, but the extra time we spend up front comes back to help out down the road.

JavaScript Plugin of the Month - jQuery Datepicker

2009-09-09T10:45:00.008-04:00

Alright, so this one is a little older, but still is very useful. The datepicker plugin works in all browsers supported by jQuery (ie6+, FF2+ etc...). This plugin is fully customizable and flexible, size, color, etc. The website has many examples of its usage, and it is very simple to use.

http://keith-wood.name/datepickBasics.html for a simple demo.

http://keith-wood.name/datepick.html to download this gem.

http://keith-wood.name/datepickRef.html for the documentation.

Browser Font Size Madness!

2009-08-25T16:07:00.005-04:00

Alright so I recently had some discussions and researched a bit about font sizes in browsers. There are some really important findings here, but I will summarize as best as I can. How does the Browser Decide on a Font Size? Firstly, the default browser font size across all modern day browsers is 16 pixels. This is good to know when you are trying to calculate your relative font size. Secondly, another calculation is made in regards to your font sizes, and if and if you are like me, you are using EMs. Take your base font, and multiply by your EM value, so 1.1 em * 16 pixels = 17.6 pixels. All browsers (except IE) will correctly round up to 18 pixels, so your result would be 18 pixels. IE (seemingly) truncates the decimal value, and interprets 17.6 as 17 pixels, thus giving a one pixel difference! Make sure when you specify a relative font size, calculate it, and make sure its going to be the same in IE. The Scaling Issue (Thanks Stephan) http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ Due to an issue with scaling, it's best to at least start your font size (base font size) with a percentage (%). The code below will set the base font to 12 pixels. body{font-size:75%;} Using a percentage first is important because of scaling, and IE's browser font settings. After you set the % based font size, typically on the body, the EMs will work very nicely. Also most other web developers I have talked to suggest starting off with a simple base font, that makes the em calculations simple: font-size: 62.5% Everything after that in EMs (1 em ~= 10 px) (1.1 em ~= 11 px) (1.2 em ~= 12 px) and so on...

Extra JavaScript Plugin of the Month - jQuery Password Strength

2009-08-25T16:03:00.003-04:00

This is an extra plugin for the month. I thought it was useful in a project I just got into. Check it out! This helps you let your users know if their passwords are strong or not. It does a fairly good job too, and there is some configuration to play with as well. http://www.unwrongest.com/projects/password-strength/

JavaScript Plugin of the Month - jQuery tagbox

2009-08-12T12:59:00.003-04:00

I just thought this was a really cool plugin, if anyone has an interest in this sort of thing. It seemingly works in all browsers just fine. Had a little problem in IE6 with some of the rounded corners, but overall it was nice.

The code examples: $('textarea.tag_box, input.tag_box').tag_box({ grouping: '"', separator:/[\s]/ });

http://saynotofastfood.info/tagbox/examples/

JavaScript Plugin of the Month - jQuery Visualize

2009-07-10T09:52:00.015-04:00

Last month (June) we did not have a plugin of the month, yes I know...But since this is a new blog, these types of things are not yet defined. Previously in May, TM demonstrated a jQuery plugin, called DataTables. Which I thought was a really great plugin. There are tons of jQuery plugins out there, so many in fact, perhaps many people might miss out on some good ones. Each month I will make it a goal to highlight a plugin. I will test each plugin to insure I am able to use the plugin and help others to use it. It might not be limited to jQuery though, it could be a new library or some other hidden treasure. I hope everyone likes this idea, if you have a plugin you would like to share, let me know, and I might just post it. This month I am highlighting the plugin called "Visualize" for jQuery. Visualize creates fantastic bar, line, area, pie charts from HTML tables. The only caveat is that this plugin uses the HTML 5 tag "Canvas" which is not yet supported in any version of Internet Explorer. However, there is extra JavaScript which can be used, and especially for this demo, that will allow IE to render the charts just as any other HTML 5 browser would, without the canvas tag. Using this extra JavaScript is acceptable, and I can notice no difference between HTML 5 capable browsers, and IE*. Using IE, you must allow "ActiveX" controls to be run on the page, which can be quite annoying to some IE users, or mistaken as a security risk! All the information on this plugin can be found below: http://www.filamentgroup.com Or you can directly download this plug, and follow the example included: http://www.filamentgroup.com/examples/charting_v2/visualize.filamentgroup.zip For further information on HTML 5 canvas tag: http://en.wikipedia.org/wiki/Canvas_(HTML_element)

Save yourself time with Subversion

2009-06-29T09:07:00.006-04:00

If you use FTP in your day to day workflow, a switch to subversion can put time back on your calendar. Anytime you save yourself a few minutes by removing manual steps from a task, you've freed up time to do the interesting and fun parts of your job. Here's my workflow with subversion: when I've got changes I want to send to the server, I commit my changes with a single line at my command prompt, or a single right-click in Windows Explorer. Then I switch to another window and update the server with the same single command/right click. Done. My changes have arrived and are live. If I don't need the server to update immediately, I can do a scheduled task or cron job that updates itself once a minute/day/hour. Since I test locally, I only commit when I'm ready for it to go live, so the automated update works well for me. Ever worked with someone on the same file? You change it, FTP it up, then they FTP their own changed copy, and then you do another change, etc etc.? Now who's got what copy where? With FTP, the only solution is to manually overwrite the files once you've sorted out what version you need. With subversion, the logs show you who did what, and when they did it. A quick check of the logs (again, with a single right click or command) and you can see what happened. Need to get back to how things were before? Again, a single command can take you to any point in history to see how it worked, and another command gets you the latest version again. So you can fix the problem and have free time to take care of other tasks*. Web 1.0 was built on FTP. Web 2.0 rocks with subversion**. What web are you working with? * Like administering a beating to the co-worker who overwrote your files. ** To be honest, there are lots of great version control systems (VCS). Subversion, git, mercurial, etc etc. I use subversion b/c it works for me. But any VCS is better than FTP.

IE Whitespace Issue

2009-06-24T16:03:00.012-04:00

So I ran into an old IE bug, or I would so much as call it a rendering issue. Whitespace, which should be collapsed by the rendering agent, to form inter-word spaces (except for <PRE>), all other whitespace should be ignored. This issue has been known for quite some time, but I ran into this yet again -- IE8 even. What whitespace? In HTML, spaces, tabs, and return characters are considered to be “whitespace”. One solution is, simply remove all whitespace around your links, and images:

<ul>
 <li>
  <a href="#" >
   <img src="img.gif" alt="Blah" />
  </a>
 </li>
</ul>

As:

<ul><li><a href="#" ><img src="img.gif" alt="Blah" /></a></li></ul>

This method is not very pretty, and makes it difficult to use many auto formatting tools. Another method is to apply inline styles to the parent: li { display: inline; } Also a solution is to apply float left (or right) to the parent container: li { float: left|right; } There are more solutions to this issue, but just keep in mind, IE renders whitespace as whitespace between list elements. I have also seen it rendered when an image or link is simply on its own line. In such cases sometimes applying {display:block;} to your anchor tags might do the trick, but might not be applicable. In such cases the foremost method would be suitable. Good luck. Sources: http://archivist.incutio.com/viewlist/css-discuss/34926 http://www.w3.org/TR/html401/struct/text.html#h-9.1

Let's make the web faster

2009-06-24T15:52:00.006-04:00

Google has released an effort to "Make the web faster". Several tutorials and guides can be found under the "Learn" link. It also has a community driven effort, allowing developers to submit ideas, suggestions and questions via a discussion forum.

Google has maintained for years that the performance of Web sites and applications is extremely important to the company, which developed Chrome in large part because it wasn't satisfied with existing browser technology in this area.

You check it out here: http://code.google.com/speed/ Usability latency: http://code.google.com/speed/articles/usability-latency.html For some extra nice articles on JavaScript optimization: http://code.google.com/speed/articles/optimizing-javascript.html Also some goodies about CSS: http://code.google.com/speed/articles/include-scripts-properly.html Sources: http://www.computerworld.com/action/article.do?command=viewArticleBasic&articleId=9134736

Why is IE6 still around?

2009-06-03T14:18:00.015-04:00

Most web developers that I know have horror stories about the countless hours spent trying to get their web application to work and behave with Internet Explorer (IE) version 6. Fortunately for us developers, those days seem to be few in number, or so we hope. With the recent release of IE8, one would think that IE6 is either dead or seriously near total annihilation; however this sadly and most unfortunately, is just not true. As of May 2009, stats by usage show that IE6 is neck and neck at 20%, with Firefox 3.

While usage within corporations network traffic show that IE6 and IE7 are neck and neck at about (40%) a piece.

So, why is IE6 still around? To me, it's simply because people are just not interested in upgrading, especially since most everything is seemingly working “OK” with IE6. Some people might be restricted from upgrading due to non administrative privileges, or restrictive company policies. IE6 might have a certain level of “comfort” for people. Others might only use it for legacy applications, or testing. “I can only lead the horse to water; it’s up to him to drink.” So as the old saying goes, I can’t make you uninstall IE6 and rid the world of that plague, it is up to you. I don't have a simple answer for those who are restricted from installing it. I suggest to everyone, where possible, to take the time and upgrade IE to at least version 7, if not version 8. Most especially if you are using IE as your default browser, however even if you are not using IE as your default browser, it’s a good idea because some programs automatically fire up IE disregarding your default browser preference. If you do use IE as your default browser, wont your consider trying out Firefox 3?

If you noticed, IE7 useage is up around 40%, while IE6 is down around 20%. I think that's huge! “Using Internet Explorer is So 2006” –Mozilla Corp.

References: http://tech.slashdot.org/story/09/06/02/134224/Internet-Explorer-6-Will-Not-Die http://www.mozilla.com/en-US/firefox/ie.html?from=getfirefox http://www.microsoft.com/windows/Internet-explorer/default.aspx http://www.statowl.com/web_browser_usage_by_version_trend.php?timeframe=last_6&interval=month&chart_id=11&limit[]=ie&limit[]=firefox&limit[]=safari&limit[]=chrome&limit[]=opera&limit[]=netscape&fltr_os=&fltr_se=&fltr_cn=Corporate http://www.statowl.com/web_browser_usage_by_version_trend.php?timeframe=last_6&interval=month&chart_id=11&limit[]=ie&limit[]=firefox&limit[]=safari&limit[]=chrome&limit[]=opera&limit[]=netscape&fltr_os=&fltr_se=&fltr_cn=

Does php have a built-in string function that converts underscores into spaces?

2009-05-29T15:33:00.007-04:00

Does php have a built-in string function that converts underscores into spaces?

Not a function that specially only does that task. However to accomplish that goal is simple. All you need to do is use the function "str_replace", its can be used like this: $newstring = str_replace("_"," ",$oldstring); The function "str_replace" takes three arguments:

First is what you want to search for, and be replaced. It is called the "needle".
Secondly is the replacement, which is used to replace the needle when it is found.
Lastly you supply the "haystack", or the string in which you wish to find the needle(s).

It returns a string with the needles replaced with the replacement. You could even replace them with a blank string, which basically removes the needles from the haystack. You can find more information on this at php.net. http://us3.php.net/manual/en/function.str-replace.php

jQuery - Web Developers Best Friend

2009-05-18T14:18:00.011-04:00

jQuery has been out now for three years. It was released in January 2006, by a fellow named John Resig. He is one year older than me! Anyways... jQuery has recently changed the way I write JavaScript. It has simplified some fairly complicated JavaScript tasks, and even simplified simple tasks. All in all, it is totally work a little investment in downloading, installing, and playing with it a bit. If anyone wants to give it a shot, please let me know, I will be here for you when you get stuck in the mud. Ask me a question about jQuery!

http://jquery.com

There are many good articles, books, and video tutorials about jQuery and its advantages. Here are some of links:

Online Tutorials: http://www.learningjquery.com/

http://www.learningjquery.com/category/levels/beginner

Books:

http://www.amazon.com/Learning-jQuery-Interaction-Development-JavaScript/dp/1847192505

Videos:

http://www.dailymotion.com/video/x7ta6d_introduction-to-jquery_school

http://www.youtube.com/watch?v=Hk5oXFtYLwE

DataTables: a jQuery solution

2009-05-14T15:41:00.002-04:00

Recently I've been using a jQuery plugin from this site: http://datatables.net/index. It's fantastic! Easy to setup and use with *tons* of options. Here's a screenshot of it in action: The data values were hard-coded for simplicity. The column sorting and pagination is all created on-the-fly by the plugin. I also wrote some callbacks to handle deleting and editing the table contents. Sweet!

Sample Question: How do you create a simple mouse rollover?

2009-05-13T13:27:00.000-04:00

Question:

How would you create a mouse rollover, such that I could quickly copy and paste the code into my code?

Answer: This can be done several ways. The quickest way is to do create an inline script; however a more acceptable solution is to create functions which you could reuse elsewhere. Since we want the quickest, or simplest solution, it may not exactly be the most ideal solution, but that is the price we pay for simplicy, and speed. First you will need to secure an image that will act as your base image, and an image that will act as your rollover image. The base image will be what is displayed when the mouse is not hovering over the image. The rollover image would be your image to replace the base image, while the mouse is hovering over the image. You will need to have your images in a directory that is accessible by your script. For example: /root/index.html /root/images/base.gif /root/images/rollover.gif For speed you would simply then use the basic image tag: <img src="images/base.gif" alt="base" title="base" /> You then add the JavaScript code for the two events. One for the mouse over the image, and mouse out (when the mouse is no longer over the image). onmouseover="this.src='images/rollover.gif';" onmouseout="this.src='images/base.gif';" add them together: <img src="images/base.gif" alt="base" title="base" onmouseover="this.src='images/rollover.gif';" onmouseout="this.src='images/base.gif';" /> This is a widely accepted solution. There may be many other ways of answering this question, however to me this is the quickest.

Welcome to the Web Developers Blog!

2009-05-13T13:21:00.001-04:00

Welcome to the UCD Web Developers Question and Answers Blog, Dear visitor, Thank you for visiting the UCD Web Developers attempt at sharing our cache of knowledge, with you. We are taking time to answer questions related to web development in any way, shape, or form. No question is too much or too little. Some questions may require demonstrations, some might require research, but we are willing to answer your questions quickly, and accurately. Regards, Patrick Simpson To give you an idea on some of your questions could be related to, but not limited to the following: CSS CSS 2 CSS 3 JavaScript jQuery YUI MooTools Scriptaculous Prototype PHP Version 4 Version 5 ASP .NET C# Visual Basic HTML XHTML HTML 4 HTML 5 Web Development Tools Dreamweaver FTP SVN