A lot of OS X users are familiar with Growl, a customizable notification system with all kinds of uses. New e-mail, iTunes track changes, new instant messages -- Growl handles all of this stuff. Now there's a Growl-like jQuery plugin called jGrowl that lets you apply the same sort of notification in your browser window.
jGrowl supports different animation settings, as well as sticky messages that need to be clicked to close. The styling appears to be done with CSS, so plenty of customization should be available. If you're looking for a way to notify that's not obtrusive and doesn't require a pop-up window that steals attention from your site, give jGrowl a try.
Barack Obama's design team has garnered a lot of praise for their work on his campaign materials, including the official website. Heck, there have been entire articles devoted to praising their choice of typefaces. One of the cooler elements the Obama team has cooked up for their website is a slideshow-like animated list for front page navigation.
If you're a fan of this slideshow, and you want to create a similar effect on your own site, look no further than the aptly-named BarackSlideshow script. DevThought has come up with a bit of CSS and JavaScript that loads images and animation effects almost identical to the originals. Some users in the comment thread are reporting browser or plug-in specific issues with the script, so your mileage may vary.
Web developer Aza Raskin knows we visit Digg, Del.icio.us, Reddit and Facebook without even having to ask.
No, he isn't employing privacy violating hackery, but he is exploiting a "cute" information leak in CSS that traditionally displays visited links differently than those that have yet to be visited. By loading in an iframe a list of social site URLs to see which are purple (visited) and blue (not visited), an assumption can be made on what sites to prompt users for submitting a story or blog entry.
Raskin has wrapped this functionality in a script called SocialHistory.js.
Now that a lot of people are spending as much time looking at their RSS readers as their web browsers or email clients, it's probably a good idea to give your reader an appearance you can live with. If you happen to use NetNewsWire, one of the most popular RSS apps for OS X, you've got plenty of stylesheets to choose from.
NetNewsWire supports CSS styles, so it's not too difficult to code your own if you happen to have some CSS experience. If you're a CSS newbie, though, don't sweat it: there are plenty of looks to choose from. We went beyond the preloaded styles and picked out some options that should please even the pickiest readers. Some of them not only change the look of NetNewsWire, but add some useful functionality as well. Take a look at our top 10 themes.
htmlPlayground is a helpful reference for web developers of any skill level. It provides an easy way to generate, test, and learn about HTML and CSS syntax. Simply select your reference (HTML tags, attributes, or CSS properties), and then select an item like "blockquote."
htmlPlayground will then display a description of the item (to explain what it's used for), an example code snippet that is editable, and a rendered preview of the code snippet. The snippet is color coded: green for tags, red for attributes, and black for regular text.
If you click on a green tag in the snippet, you can edit the tag's attributes easily via another pane. When you're happy with your finalized code, you can of course copy/paste it to an HTML file to use on your website.
Schnippselchen is a source code management app that lets software developers manage multiple types of code that may need to be reused. The program has a sidebar with a "Categories" section (helpful for separating code by language) and a "Snippets" section for the actual titles of your code snippets. So you could have a PHP category with five snippets of PHP code that run your LOLcats social-network site.
Syntax highlighting is supported for many languages and code types including CSS, Perl, Python, XML, Applescript, and SQL. There is also a "Go to Line" feature and the ability to comment on your snippets (so you can remind yourself what those C functions do).
Schnippselchen can run from a thumbdrive (or iDisk) because your snippets are stored in the .app package; keep this in mind if you remove or update the program.
Serving as a webmaster's Swiss Army knife, Test Everything! allows you to run a bunch of different tests on your website and domain name, ranging from Alexa traffic details to CSS validation. To use, simply type in your website's URL, select a category, and check the boxes next to the tests you want to run. When you've selected all of your tests, click the "Test website!" button and wait for your test results to be generated. The Test Everything! site will then return a helpful aggregation of links to each of the specific tests you chose.
While some tests like the "Crapola Web Translator" aren't very useful, Test Everything! lets you run over 100 tests in one fell swoop. Our favorite tests (aside from standard HTML/CSS validation) include "Server Info" which displays info like your webserver's IP address and OS, "Website Speed Test" which shows how fast your specified URLs load, and the "Test your web design in different browsers" test which, well...you know.
It isn't every day that Douglas Crockford (the father of JSON and JSLint) pops up with a new tech talk. In this one he discusses the current state of Ajax development, why mashups are inherently insecure, why the standards process is broken, and how our best hope for a newer better platform may be mobile. Say what?
Basically he proposes the idea that because the replacement rate on mobile phones is so quick (around 2 years) it would be possible to move that industry to a new platform for website interactivity. The traditional PC market moves slowly and requires that you support many many legacy platforms. But with mobile, you can run and gun with your technology and count on people upgrading. A new web platform for mobile could be Flash, it could be Silverlight, it could be a future version of ECMA Script (JavaScript) with a better CSS implementation.
The video also gives a good overview of the history of computing over networks and why the web has lagged behind on everything from rounded corners to security.
There are easy ways to create webpage layouts, and there are hard ways. Spiffy Box is one of the easy ways to add a little spice to your website using CSS.
Spiffy Box was originally created as Spiffy Corners, a web based way to easily create and grab custom CSS and HTML code for rounded corner web content boxes without using images or JavaScript. It eventually moved on to its current user friendly four step process over at Spiffy Box, which uses an image for corners. Users generate the code by simply choosing an image width, height, corner radius, foreground, border and background colors. Steps two and three give you a preview of your new spiffy corner, and the CSS snippet to copy and paste. Step four provides the xhtml to add into our document and, poof; You have a soft, round CSS cornered box.
In the world of web developers there are two standard ways of laying out a web page. The classical way is to use tables and structure your web page like you would an Excel Spreadsheet or a Word document. The second is to use Cascading Style Sheets that let you create elements on the page and position them according to your needs. For a large variety of reasons CSS based layouts are the way to go: they use less code, they are more customizable, they support various effects that aren't possible with tables, and they run faster in modern web browsers. The problem? They are darn hard to code!
Enter the CSS Grid Builder from the good folks at Yahoo!. Yahoo! has spent thousands of hours crafting web pages and testing them across all the possible OS and browser combinations (yes, even Opera). The end result of all this testing was the public release of the Yahoo! User Interface CSS and JavaScript libraries. The CSS Grid Builder is a simple web-based interface for quickly creating any number of layouts that rely solely on YUI's CSS files. This gives you the advantage of easily and visually laying out designs without using tables, and they will work the same way in every popular browser
Whilst there's plenty of tools around for helping with CSS styling, if you want a neat little browser bookmarklet that displays all the properties associated with the selected element and "box model for any element on any web page", then XRAY from WestCiv might be just the thing.
XRAY shows you the sizes and other attributes of element you select, fades the rest of the page out and hovers a panel over the page to show the properties. For those of you wanting a quick and easy way to inspect CSS box models, this might be the very thing, and is entirely cross-platform meaning Internet Explorer, Mozilla derivatives and Safari users can take advantage of this freebie.
It's fairly inarguable that Firefox needs to exist. Going back just a few years ago to when Mozilla introduced what would quickly become their flagship browser, much of the internet was in the equivalent of the digital dark ages. Netscape was struggling along after Internet Explorer had successfully derailed its efforts years ago, but even IE was suffering from a stagnating development process and an industry that was trying to move forward with efforts in standards and compatibility. Sure, Opera was always on the outer fringes, but its market share hasn't really seen much of the leap that its devoted following believes it deserves.
Along comes Firefox in 2004, and everything changes. Netscape drops even farther off the list of many a user, and Internet Explorer begins slowly, but steadily, losing market share to the open source Mozilla alternative that opened up the public's eye to the wonders of extensions and add-ons. It is at this moment in time, however, when Firefox also began to slowly replace Internet Explorer as a dominant and, in some ways, proprietary force on the web.
In 2007, Firefox certainly hasn't destroyed IE's market share, but it sure has made a dent. While that's a positive thing in the name of choice and the triumph of good software, Firefox has quite possibly made a negative impact on the development of web sites and software when viewed in the context of accessibility. Think about it: before Firefox, most websites were not only 'optimized' for IE, you pretty much had to view them in IE if you wanted to see anything more than the equivalent of an unfinished jigsaw puzzle blown apart with a shotgun. Even though it could be argued that web design standards have come quite a ways since then (and they certainly have), the damage done from Firefox's wild popularity among the tech savvy (and even not-so-savvy) primarily lies in this new frontier of web apps and services.
Panic, the fine folks that bring us Transmit, finally revealed the top secret app they've been developing over the past year with the release of the web development application Coda V1.0. This is not a WYSIWYG, drag-and-drop, do-all application. Coda has a specific target audience that consists of people who edit raw code using multiple tools such as a text editor, FTP client, CSS editor and Terminal.
Coda brings all these tools together in one neat interface. You can organize your files using Sites, edit with the text editor, utilize the built in preview functionality, style your pages with the CSS builder and even access Terminal with one click for those times you need to do a little MySQL or other Terminal task. You can make your changes locally then publish to the web, or edit the files directly on the server using the built in Transmit FTP engine. And as an added bonus, for those times you are stuck trying to remember syntax or learning something new, it also includes access to HTML, CSS, Javascript and PHP reference books from within the interface.
After using Coda for a couple weeks it amazes me that this is just a version 1.0 release. Panic has released a 1.0.1 update, but it's hard for me to find anything to complain about. If you are a hand coder, you should definitely check out the 14 day free trial. Coda will retail for $99, but for a limited time it's available for $79. If you are a current owner of Transmit 3, knock another ten bucks off and it can be yours for $69. Sorry Windows users, Coda only runs on Mac OSX 10.4 and higher.
There are many advantages to designing with Cascading Style Sheets. CSS is extremely easy to learn and rework once a basic site framework has been established. Websites, or website components can easily be changed into something totally different just by swapping a single CSS file, or a line within a CSS file.
CSS designers always seem to have a few different elements that they commonly use over and over in all designs, these can include navigation elements and form fields, among other items. Smashing Magazine has compiled a list of 53 CSS Techniques that you couldn't live without, linking out to tutorials on CSS navigation, tabbed navigation, bar graphs, rounded corners, hover effects, image map, submit buttons, custom bullets, and sidenotes. Whether you are new to CSS, or have been in it for a while, these are some great tutorials to have archived as reference materials.
A lot of OS X users are familiar with Growl, a customizable notification system with all kinds of uses. New e-mail, iTunes track changes, new instant messages -- Growl handles all of this stuff. Now there's a Growl-like jQuery plugin called jGrowl that lets you apply the same sort of notification in your browser window.
Web developer 
Schnippselchen
It's fairly inarguable that Firefox needs to exist. Going back just a few years ago to when Mozilla introduced what would quickly become their flagship browser, much of the internet was in the equivalent of the digital dark ages. Netscape was struggling along after Internet Explorer had successfully derailed its efforts years ago, but even IE was suffering from a stagnating development process and an industry that was trying to move forward with efforts in standards and compatibility. Sure, Opera was always on the outer fringes, but its market share hasn't really seen much of the leap that its devoted following believes it deserves.
