Cool Site for Web Designers and FEDs (and BEDs?)

Posted in Backend Development, Frontend Development, Design, Javascript, CSS Wizardry, AJAX/DHTML Wizardry by Andrea Zehnder on the November 10th, 2008

webdesignerwall.jpg

280Slides and Cappuccino - PowerPoint for the web

Posted in Javascript, AJAX/DHTML Wizardry by Jeffrey Schrab on the September 5th, 2008

280 North is a company that has developed a web application that rivals MS Powerpoint and looks an awful lot like Apple Keynote.  It’s called 280 Slides and it’s amazing.  From from the screenshot alone you have to say, “That’s a web application!?”
280Slides Screenshot

Furthermore, it’s developed in a new open source framework called Cappuccino.  Cappuccino, unlike Mootools, JQuery and their kin, is built for building web applications versus web sites.  HTML, DOM and CSS are all abstracted away.  From what it looks like, it’s more like writing a MacOSX Cocoa application - but in Javascript; it runs without a plugin or server side services.  Furthermore, to embrace the Cocoa development “feel”, the underlying language Objective-J (a take off of MacOSX’s “Objective-C”, which Cocoa uses) that extends traditional Javascript to allow dynamic imports of includes and Objective-C’s object model.

There’s a lot of new stuff here…

Javascript canvas use - Rotozooming fractal carpet

Posted in Frontend Development, Javascript, AJAX/DHTML Wizardry by Jeffrey Schrab on the June 18th, 2008

As part of a coding challenge, Mathieu ‘p01′ Henri wrote a never ending animation of a Sierpiński carpet using canvas techniques (for browsers that support the tag) and Javascript.  This is not Flash.

20lines_hypno_trip_down_the_fractal_rug.png

Caching of files

Posted in Frontend Development, Javascript by Aaron Konkol on the April 2nd, 2008

If you have issues with Javascript or Flash files caching, you can use this handy-dandy trick. In the example below, the Javascript file will be reloaded if the cached file has a different timestamp than the most recent file.

It uses PHP to get the file’s last updated time.

<script language="javascript" type="text/javascript" src="/_includes/js/common.js?ts=<?= filemtime($_SERVER['DOCUMENT_ROOT'].'/_includes/js/common.js') ?>"></script>

This code is in use on http://mercuryracing.com

Firefox Disappearing Cursor

Posted in Frontend Development, Troubleshooting, Javascript, CSS Wizardry, AJAX/DHTML Wizardry by Aaron Konkol on the March 26th, 2008

Front-End Developers:

It took me a while to get this going, so I figured I would share it in case anybody else comes across the same issue. On http://mercuryracing.com/techcorners/ when you click on “Join our email list”, in the div overlay that comes up, the blinking cursor bar failed to appear in input text fields in Firefox.

The Firefox bug report is here: https://bugzilla.mozilla.org/show_bug.cgi?id=167801

It is fixed with the code below, thanks to comments #50 and #51 on bug report page:
#emailListPopupContainer {
position: fixed;
position:expression(”absolute”);
overflow-x: visible;
overflow-y: visible;

}

Cool JavaScript/CSS Menu Ideas

Posted in Javascript, CSS Wizardry by Steven Schrab on the February 22nd, 2008

Thirteen different menu examples. Kinda out there ideas, but you never know when you might want something like this. Fun to play with the demos.

13 Awesome Javascript CSS Menus

No Script

Posted in Backend Development, Frontend Development, Best Practices, Javascript by Steven Schrab on the November 8th, 2007

There is a Firefox extension called No Script which allows you to police the activity of certain sites. The idea being, greater security when using JavaScript. Ajaxian had an article on it:

http://ajaxian.com/archives/making-javascript-safe-with-no-script

I found one user comment had something interesting things to share:

“NoScript seems to be one of the most popular extensions from the Firefox repository. So my assumption is this: a lot of people use it and do not grant access to JS on less known sites. So, it is becoming a necessity to use progressive enhancement. Libraries like Ext seem to totally ignore this approach. Try any of their demos and you’ll end up watching the loading indicator forever or read a heartwarming “JS … will make your life much easier” at the script.aculo.us site. This is not to blame these particular libraries specifically, as all of the JS frameworks are actually made for Javascript libraries. But it seems a lot of us forget about building something that takes accessibility seriously. Both http://www.w3schools.com/browsers/browsers_stats.asp and http://www.upsdell.com/BrowserNews/stat_trends.htm indicate that currently, 6% of web users don’t have JS. That’s more than the total market share of Safari and Opera together!
Shouldn’t we forget about our favorite scripting languages and focus on what degradability every once in a while?”

Javascript - Variable Scope and you

Posted in Javascript by Jeffrey Schrab on the July 18th, 2007

AlternateIdea has posted a nice article on variable scope in JavaScript. This probably applies to ActionScript in Flash as well. This is for the FED’s mostly, though there are some more advanced concepts with JavaScript objects (in Prototype) for the rest of the developers.

UC Berkeley Dept of Spanish and Portuguese

http://spanish-portuguese.berkeley.edu/

Ok, here’s another interesting site that displays content in new and unique ways… I’m not saying it’s great design mind you (but it IS good)…just interesting when you look at the overall thoughtful blend of technology and design. The designer/programmer manages to break webconventions without losing the intuitiveness of rummaging thru the site and finding necessary information (like the logo is kind of buried in the middle of the ‘visually-cluttered’ header). And it’s chuck full of cool stuff w/o looking or acting too geeky.

There are several things to discover here and I’ll list just a few:

1. many interesting custom illustrations that load randomly as a page refreshes

2. a blog between professors and students based on a customized version of word press

3. simple navigation

4. the layout changes depending on browser window size; small screens automatically view ALL the content in 2 columns, larger screens in 3 or 4.

5. javascript animates the interface (there’s a nice fade in and out of content) and rearranges content whenever “read more” links are activated

6. from what I’ve read, it’s written in XHTML, CSS and Javascript, according to web standards and usabillity guidelines…or as steven says, “it’s clean under the hood”.

7. it’s designed and developed by Miguel Ripoll who, interestingly enough, has studied the History of Art / Musicology and Comp Lit! Check out his site here: http://miguelripoll.com/

Ok, have at it!

New Mootools demos

Posted in Backend Development, Frontend Development, Javascript, AJAX/DHTML Wizardry, Tools by Aaron Konkol on the May 10th, 2007

http://demos.mootools.net/

Next Page »