Category Archives: Web

HTML5 Part 5: Forms

In the years since I started web development, my use of Forms has evolved from writing a simple email form to making a complicated Resume/CV form driven by JavaScript, AJAX and PHP. When making forms, the one thing we always have to remember is that we developers are the ones pointing the users in the right direction. Forms give us the tools to create a good user experience while making sure that the user stays on the right track.

Unfortunately, when validating forms, we had to rely on using JavaScript and/or a server-side script. However, HTML5 Forms have built-in validation tools which do not require scripting. But, don’t get too excited, you will still have to write some scripts to validate some things. Continue reading

Sony’s Welcome Back Program

Sony dropped word detailing what those of us who are PSN members are receiving as our “Welcome Back” package. You can read the Playstation EU blog for more details.

While a free 30-day membership in  the Playstation Plus program is nice, Sony is offering 2 free games available for download via the Playstation Store. In Europe (where the Playstation Store is available), The five games you can choose from are:

  • inFamous
  • Little Big Planet
  • Ratchet and Clank: Quest For Booty
  • Dead Nation
  • Wipeout HD/Fury
There free games for PSP users, additional free time for existing Playstation Plus and Music Unlimited subscribers. For North American users, you are being offered Super Stardust HD instead of Ratchet and Clank: Quest For Booty.
I think I’ll be download inFamous and I’m torn between Dead nation and Ratchet and Clank…

Playstation Network Troubles

Over the last week, Sony Playstation Network has been down. According to Sony, PSN was the victim of a security breach which compromised user accounts on PSN and Qriocity. Yesterday, it was announced that personal information including credit card information (for those who have shopped on PSN) might have also been compromised. Taking PR black eyes for a perceived lack of updates and notifications, Sony today issued a statement on the Playstation blog, saying that it had only learned of the scope of the breach on the 26th of April – a week after the intrusion. Sony brought in outside help to sift through the data which took a few days. Continue reading

CSS 3: Transitions and Transformations

The three people who follow along this blog will remember that, I wrote a post sometime ago about CSS 3. I went through my CSS 3 Fun Box on my HTML5/CSS 3 Test page and I explained what each new CSS 3 property did. I also had a small Transition demo of a box using the scale property. Truth be told, that wasn’t enough. Now that Firefox 4 is out, I wanted to do something  just a little bigger and in conjunction with Transformations. Here is the end result (there is also a link to it on my test page). I’m going to leave alone my original thoughts about CSS 3 Transitions. Just keep in mind that the code is based on an example that is no longer there.

With that said, I’m going to let my demo do the talking. Remember that you can view the source, the Javascript and CSS styles are there for you to see.

Where does this work

It runs smoothly on Firefox 4, Google Chrome 10 and Apple Safari 5.0.4. It runs well on Opera 11 with some stuttering/lag. It runs smoothly on Mobile Safari (iOS4) but stutters heavily on Mobile Firefox 4 (Nokia n900 hardware issue?). It does not run at all on the Maemo web browser.

While the demo does not work in Internet Explorer 9 (no support for Transitions at this time), there is a single example of a box with a transform style applied to it. Just click “Start demo” to see it.

Firefox 4 Released

As the title says above. The long-awaited new version of Firefox has arrived. With a new UI (which kinda resembles Opera’s UI… just sayin’), support for CSS 3 Transitions and a little support for HTML5 Forms, Firefox 4 also boasts a massively upgraded JavaScript engine and better web page loading time. Hopefully, they also did away with the CPU hogginess that has plagued older versions in the past.

Also, like Google’s Chrome, Mozilla has planned for a 16-week development cycle. So, we can expect to see a new version of Firefox in about 4 months. Which is about the same time when we can expect a new version of Internet Explorer.

Oh wait, never mind…

Visit ArsTechnica for a review.

Internet Explorer 9 And Google Chrome 10 Released

Microsoft released Internet Explorer 9 a couple of days ago. There are various sites such as Ars Technica where you can go read reviews and benchmarks. I have tested it in my HTML5/CSS 3 test page and no changes have been made. It shouldn’t be surprising since the last version I tested was the Release Candidate. I’m sorry to say but Microsoft still has not addressed how they are going to go about updating the browser. Of course they will release patches if any security holes come about, but I’m more interested in holding Microsoft at it’s word that they are going to follow web standards. Microsoft has said that they will not add support for unstandardized web specifications. What happens when they become standardized?

Also, Google released Chrome 10 and are well on the way to releasing v. 100,000 sometime in 2014. Just like IE9, Chrome has no change to my test page. However, Chrome now natively supports CSS 3 box-shadow! No more -webkit prefix for Chrome. The same cannot be said about Safari though so, for now, -webkit-box-shadow remains.

IE6 Countdown [Till Death] Site Launched

As I read via Computerworld, Microsoft has launched it’s IE6 watch site. It’s purpose is to monitor IE6 usage drop via NET Applications. While it’s great that Microsoft is truly bent on seeing the demise of IE6, I can’t help but point out that they slowed the progression of the Internet by continued support of the almost 11-year old browser. But, hey, at least you get half a cookie for finally trying.

Now, how about addressing how you are going to update and upgrade Internet Explorer 9 after it comes out?

HTML5 Part 4: Geolocation

HTML5, or whatever it’s going to be called, brings on a whole bunch of new things to use. So far, I have gone over the Canvas tag, the ContentEditable attribute and Drag and Drop. The more I learn about HTML5, the more I understand that it’s not just about new tags and depreciating old tags anymore, it’s also about standardizing APIs. While I mentioned in the Canvas article how we have gone from just learning how and where to place HTML markup, we now have to learn the APIs that really bring out the Web 2.0+ experience. In order to do that, you really really need to learn a scripting language such as JavaScript. With that said, let’s dive into a simple lesson of Geolocation. Continue reading

Internet Explorer 9 Release Candidate Is Out

…and my HTML5/CSS3 test page has been updated. While IE9 RC has improved in a couple of areas on the page (all CSS), it fell back in the @Font-Face feature.

Of all the new things Microsoft is touting, they still have not addressed how and if they are going to update IE9 with new web features as they become stable/standardized.

RGBA Border Bug in Webkit Browsers

UPDATED October 30, 2011: This bug has been fixed in Chrome 15.0.874.106.

UPDATED August 16, 2011: This bug has been fixed in Safari 5.1 but not in Chrome.

Using Google Chrome or Apple Safari? I am using Chrome myself and recently, while I was working on a project, I attempted to use CSS3’s rgba feature on a 10px wide border. While this worked in Opera 11, Firefox 3.6.13, IE 8 & 9 – it did not work in Chrome 9 and Safari 5.

When viewed in Chrome or Safari, the borders appear to overlap in the corners. In the other browsers, the border is one solid line. After doing some searching I found out that I definitely was not the only person to notice this bug. Fortunately, people have submitted bug reports to Webkit about this issue. Hopefully, they will eventually fix the problem.

I have created a sample test page which shows a box with two divs. The main div has the rgba border while a second div holds the content. I have constructed the box like this because the background color of a box affects how the border is displayed when using rgba. I added text with large font at the top and used rgba in it’s color property to show that rgba works just fine.

When the bug is fixed, I will remove the page.