Web Design - Coolest Recent CSS3 Tricks

We haven't been showing enough love to CSS3 lately. There is a fundamental shift in web design happening right now, between the end of the Flash era, beginning of the HTML5 era, and the advent of (at last!) working CSS3. Here's a roundup list of pretty and/or cool tricks in CSS3 that just make you go "Awsome!"

• CSS3 Scrolling Rainbow Dividers - tacky in 1996, cooly retro now


• Using Prime Numbers To Generate Random Image Chaos


• CSS3 Ribbon Effect, sans images


• Header Animations in Pure CSS3 - must see to believe!


• CSS3 Gradients Making Patterns


• A Pretty Bubble-Button Navigation Effect - hover over the forward/back buttons to see it.


• Animated Figure Walk Cycle - no Flash!

Peter Brittain

Web Design - A Good Tutorial on XSS Attacks - They're Easier Than You Think!

Just in case there's a few designers out there who still haven't gotten the word, here's a great, simple explanation of how web page code injection works. It's astonishingly simple. Read through this example, then try it on your own website if you have a PHP page that takes variables as part of its URL (who doesn't these days?). In a nutshell, code injection works when your URL ends with something like "?search=something" and then your script does not check for valid input in the variable "search" before using it.

XSS vulnerabilities are also easy to discover. For instance, imagine a cURL script that runs through your bookmark file and looks for the characters '?' or '=' in a link. It then tries to fetch a page for each of those links with something like '

' and then checks the returned page for the text 'EXPLOIT ME' somewhere in the body. If it finds that, it adds the link to its list of pages with exploit potential.

You could just Google random dictionary words and find dozens of sites per day with a system like that! So don't assume that a potential vulnerability will never be found - they get discovered and used every day.

Web Designers Perth

Maybe Web Designers Are Just Hard For Everybody To Understand?

We were amused by Why Adobe Doesn’t Understand Web Designers, a post ruminating on the failings of Adobe to woo the web design crowd, provoked by its latest controversial 'Muse' product.

You'll notice that the latest "easy enough for a caveman!" web design product always draws the same discussion online: First somebody moans how this is really a toy, no good for professionals. Then somebody always counters (in a snide tone) "Well this isn't for you elitist professionals, this is so mom and dad can design web pages for their cookie business!" Yeah... but we've been hearing this since 1998 with Microsoft's FrontPage Express. You know how it goes: The easiest-to-learn tool (which always has the least features) soon becomes an industry standard, at which point its user base demands more features. Then it isn't easy to use anymore, and somebody makes another alternative... the cycle repeats.

The money quote from the article: "WYSIWYG’s shouldn’t be a way to avoid learning code, they should be a way to teach it." Yeah, but that only makes sense on non-Earth planets. If it were as simple as "learn to code", we wouldn't have invented any of these tools. Humans and code appear to be mostly incompatible.

Make A Magnetic Design Portfolio

If you're like most web designers, you let your portfolio get stagnant after awhile. Are you feeling a pang of guilt while reading this? Sure, we know how it goes. At first, you pour all of your creative energy into your portfolio, taking a whole week or two getting it just right. Then, when the work pours in, you get so busy with clients that you forget the portfolio exists. Then one day you take a look at it, and it's outdated.

Rule of thumb: Anything you design in the tech world will always appear, in retrospect, to have the shelf life of a banana.

Mashable offers 10 Ways to Make Your Design Portfolio More Appealing to Employers. While the advice seems pretty basic ("Choose the Right Hosting" - What were we doing before, spray-painting it on the wall?), it's a good refresher course in connecting with potential clients - and of course, Mashable picks examples of cutting-edge designs.

A bonus buck while we're on Mashable: 17 Web Resources for Improving Your Design Skills.

Are You Driving Users Away? Also, What's Up With Pop-Ups?

We loved these "8 user experience gaffs that annoy your prospective customers" - it reminds us of the old days of Vincent Flanders. But this post is just a few days old, and yet not much has changed in what not to do in the world of web marketing.

Some things that bear analysis are asking why users can't stand a certain element. For instance, why do users hate pop-ups? Well, it's because you were trying to read this web page, and all of a sudden a new box appears in front of it. What it's doing is, it's interrupting your mind, like shouting over the top of someone who's talking. Can you imagine if you sit down to watch television, and just then someone comes running in with a painting and sticks it between your eyes and the TV screen right when the news gets back from commercial?

Things like that - they seem to be hard to explain to some web owners. Even if that element makes some sales, you have to look at how many people are getting frustrated and going away.

Peter Brittain

Which Hack Will Break Your Website? The One You Didn't Think Of!

You might have heard that, amid the recent rash of cyber-attacks on high-profile institutions, that Citicorp got hacked. Details of some 200,000 bank accounts got compromised. But the news gets weirder when you consider how it was done, in the most blazingly obvious way.

Briefly, credit card customers noticed that their credit card account number showed up in the URL of any given page when they were on the Citigroup website. Well, what happens when we substitute another credit card number? Oops, that shows you the page for that card! Great, let's write a script to have wget or lynx or something run through all the 16-digit combinations and save whatever pages it finds for later phishing.

Yeah, it was that simple.

The lesson we can all take away: Think of everything! While it may seem blindingly obvious now that not hashing the account number in the user's visible URL was a bad idea, would you have thought of a similar hole that large on your own site? One expert is quoted in that article that he: "...wondered how the hackers could have known to breach security by focusing on the vulnerability in the browser."

It just goes to show, anybody can be caught off-guard.

Web Design - Amazing Things in SVG

It's good to keep your thumb on the pulse of some web design aspects, even if you don't use it directly yet. The World Wide Web is far away from an SVG standard... but maybe some day it will come true. When it does, we're thinking of the possibilities...

First off, here's an SVG editor at googlecode.com. Right out of the blue, if you couldn't edit SVG before, you can now, for free. Speaking of free, for desktop SVG editors you can't beat Inkscape, one of the best SVG editors out there, for any price.

Here's a jigsaw puzzle done with SVG and JQuery. Check the code, it's remarkably simple to implement. Ajaxian finds many more SVG demos in the SVG category.

An amazing charts demo, done without canvas! It's live (try editing the code in options), has dozens of different features and modes, and we find it to be snappy-responsive, even on a battered old laptop.

A bit old, but if you haven't seen it yet, SVG Tetris.

SVGWow has many SVG demos, including this colorful bokeh effect.

Finally, here's a paper on SVG vs. Canvas on Trivial Drawing Application. Along the way, it sets up demos and links to them, going concept by concept, and explains the code to do so. A must-see for tutorial purposes.

Web Design Case Study: Laneway Music Festival Website

Melbourne, Australia hosts the annual Laneway Music Festival, and they've got a website that's been attracting attention in web-design circles. For those not in the know, Laneway is the premiere event for the Indie music scene, hosting such headline acts as The Hold Steady, Echo & The Bunnymen, Midnight Juggernauts, and too many more famous acts to list here.

The site attracts attention for its unusually clean design. One really odd quirk that we don't like, though, is that it has to build a different page for each major city, forcing you to a landing page that makes you select a city - why? The content looks identical regardless which city you selected. You can also change the city from the dropdown menu after you get to the main page anyway, so that's pointless all over again! Here, the festivals' in Melbourne, we gave you the Melbourne link.

After that, the site's a treat. A hip graphic header, easy navigation, splashy photos, and piped-in multimedia content from Twitter, Flickr, and forums make for a site that gets you where you want to go and tells you what you want to know with efficiency and taste.

It just bears pointing out because... hey, have you seen most music-related websites? And by the way...if you are looking to buy domain names, these guys can help

Internet Explorer's Test Drive Site

Wow! For all the derision and loathing we pour on Microsoft and its village-idiot web browser, every now and then you see some engineer project from a back room on the Redmond campus that makes you think that somewhere in the steamrolling bureaucracy, somehow, there are fun, creative minds just trying to claw their way out.

Witness the IE Test Drive Site. It's a place to test out demos relating to HTML5 and other web technologies, which Microsoft is trying to keep on track for preview editions of Internet Explorer. But there's lots of fun, fun stuff here, including a pinball game, a Sudoku generator, an asteroid field simulator, and tons more stuff. Just be advised that it's meant to be cutting-edge, so if you're not updated to full-modern standards, you won't be able to run this stuff.

We have just one question: Why aren't the people behind this demo site running the whole dang company? It's this thrilling attitude towards playing with technology and making it do gee-whiz stuff that Microsoft had in spades in its early days and so grimly lacks now.

Can Web Software Be Successful Without Being Open Source?

We were reminded of this factor when we saw Tech Drive-In's list of 11 Biggest Open Source Success Stories That Are Changing The World As We Know It. And all of them are tied to web and Internet business in one way or another.

We have Linux in general and Red Hat Enterprise Linux in particular (Linux is dominating the web server market and Red Hat is one of the chief vendors), Ubuntu (the most successful user-level Linux distro, distributed mostly over the web), Wordpress and Drupal (there's your whole CMS management system for websites), MySQL and Apache (the web server that ties it all together), Firefox and Google Chrome (two of the most popular web browsers), and of course Android (bringing mobile phones into the market). That leaves Open Office as the only desktop-related, non-web technology... although it's a standard fixture on Linux.

Where's the competition? Microsoft is still pushing against the web browsers with Internet Explorer, now at version 9, so they're still alive there. Granted, MS web servers do make a dent in the market. Oracle competes with MySQL... But really, when you look at the whole ecommerce world, it seems like open source software has completely skunked the competition. We can think of no widely-adopted proprietary blog software or CMS.

It kind of tells you that the open web and open source software go hand in hand.