PaulSpoerry.com

Google announced it will release a brand new open source web browser called Google Chrome. Yesterday a site went up, and has subsequently been taken down at http://gears.google.com/chrome/?hl=en (as of this morning clicking this link take you back to regular old Google).

According to Crunchbase the features include:

• Tabbed browsing where each tab gets its own process, leading to faster and more stable browsing. If one tab crashes, the whole browser doesn’t go down with it
• A distinct user interface that places tabs on top of the browser window instead of right below the address bar
• An “incognito” mode that lets you browse the web in complete privacy because it doesn’t record any of your activity
• A new JavaScript engine built from the ground up for speed
• Malware and phishing lists that automatically update themselves and warn you of bad websites
• A default homepage that displays your most commonly used sites and other personalized information

Read the rest of this entry �

Windows Vista includes a feature, “Receive Window Auto-Tuning,” that you’ve likely never seen mentioned on your desktop, but which can cause noticeable drag and even crashing when browsing certain web sites or using some routers or other network hardware. If you’re noticing browsing glitches that only occur in Vista, the Wise Bread blog has a tip, pulled from PC Magazine’s recent issue, that explains how to turn off auto-tuning and skip the spinning blue circle of death.

To determine you current settings launch a command prompt as an Administrator (type “cmd” into the Start box, right-click on Command Prompt and select “Run as Administrator), then enter the following line:

netsh interface tcp show global

If the line Receive Window Auto-Tuning Level does not say “disabled,” enter this command:

netsh interface tcp set global autotuning=restricted

If that doesn’t help the simplest way to turn off auto-tuning is to enter the following line:

netsh interface tcp set global autotuning=disable

That should do it, and turning it off won’t likely have any adverse consequences. You should notice the difference in browsing speeds immediately. If you find otherwise, turn it back on with:

netsh interface tcp set global autotuning=normal

So I installed the WP Super Cache plugin. Seemed simple enough, I’d been using WP-Cache for a long time and was pretty please with it. WP Super Cache is based on the excellent WP-Cache plugin and therefore brings all the benefits of that plugin to WordPress. On top of that it creates copies of every page that is accessed on a blog in a form that is quickly served by the web server. It’s almost as quick as if the you had saved a page in your browser and uploaded it to replace your homepage.

So that sounds good, except that I followed all the steps, let the plugin to it’s automagic stuff and then I got a 500 error when attempting to hit my site. OUCH! No good.

Turns out the issue was the way my .htaccess file was written (it did this automatically, no clue why it didn’t work out correctly. Anyway, what ended up in my htaccess was:

Options All -Indexes# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8

What it SHOULD be is this:

Options All -Indexes
# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8

Make that simple update to the first line, ensuring that the #BEGIN WPSuperCache is on it’s own line and everything started working as expected.

The most excellent site GoogleSystem has a write up on how to enable you to chat with your site’s visitors using Google Talk.

Google Talk’s gadget was a nice addition, but you couldn’t use it to chat with unknown people or with the visitors of the site, like in Meebo Me. Now you can do that using the new chatback badges. You only need to add some code to your site and anyone could click on the generated badge to chat with you.

“A Google Talk chatback badge allows others to chat with you even if they haven’t signed up for Google Talk or a Google Account. You can put the badge in your blog or website, and people who visit those pages can chat with you. The badge will display your online status (whether you’re available to chat or not) and, optionally, your status message.”

If someone clicks on the badge, a special version of the Google Talk gadget will open and he will be able to chat with you.

The conversations are private and only one-to-one, so other visitors won’t be able to read them. For some strange reason, they’re not even added in Gmail’s chat section. Unfortunately, being constantly interrupted by other people is not very pleasant, so you can disable the link from your badge by setting your status to “busy” or by signing out of Google Talk.

I’ve put this in place on my site to test it out. It was extremely simple to enable, just scroll down to the bottom of the page and look in the About Me section and you’ll see my Google Talk badge!

This article has gotten a lot of traffic from Stumbleupon. If you’re coming here from Stumbleupon, the URL to this article has changed (used to be paulspoerry.com/index.php/…. and now the index.php has been removed. If you could, please hit your “I like it!” button and give me a thumbs up.Thanx!

This is not my list… I snagged the list from tutorialblog.org, I’ve just compiled it all into a single resource. Below are 125 handy HTML, CSS, JavaScript, and AJAX snippets for your site or blog.

Part 1

Bubble Tool Tips - Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

---

Box Over - BoxOver uses javascript / DHTML to show tooltips on a website.

---

Ajax Star rating Bar - This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.

---

CSS Star Rating Redux - Star rating with css tutorial

---

Ajax Contact Form - An unobtrusive AJAX contact form (works even with JavaScript disabled)

---

Wufoo - Build online forms easily with this web app

---

Pretty Accessible Forms - It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem.

---

Adam’s Radio & Checkbox Customisation Method - Customised check boxes using images

---

sIFR 3b1: The Mo’ Betta Beta - sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems.

---

Revised Image Replacement - Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.

---

CSS Rounded Corners - Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

---

CSS Speech Bubbles

---

Even More Rounded Corners - Another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.

---

Vertical Bar Graphs - Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.

---

CSS Vertical Bar Graphs - Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.

---

Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery.

---

Lightbox JS - Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

---

CSS Image Maps - Image map that’s built entirely using CSS and XHTML.

---

CSS Image Pop-up - This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!

---

Sliding Doors CSS Navigation - A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects.

---

Taming Lists - I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.

---

The Art of Navigation - The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list?

---

Navigation Matrix Reloaded - This new experiment is, as the first one, based exclusively on graphics — therefore the same usability and accessiblity cautions apply.

---

Light Weight Low Tech CSS Tabs - An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

---

Accessible Image-Tab Rollovers - I wanted to continue to use a simple unordered list for the navigation in the markup. Much has already been said about using lists for navigation, here and elsewhere. They’re compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.

---

Part 2

---

Tables with style - It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

---

CSS Shadows - So for a couple of years now, folks have been trying to find ways to work around the fact that the box-shadow property from CSS3 seems to perpetually be just a few months away from actually appearing in Web browsers everywhere. Box shadows are a very common design element, and not being able to use them on the Web is a real pain in the ass.

---

Airtight Corners - Here’s a quick number on how to produce a box with rounded corners using only one image, and off-setting that image for each corner.

---

Collapsing Tables With DOM and CSS - Each of the tables below has a class called “footcollapse” which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.

---

3D Box Model Diagram - Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram.

---

Docking Boxes - Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements.

---

CSS Submit Button - For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.

---

PHP Style Switcher - For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.

---

Two Color sIFR - How to implement two color sIFR

---

Styled images with caption - The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.

---

Simple CSS Image Switcher - This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function.

---

Dynamic Pie Chart with CSS - This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries

---

Replicating a Tree Table - The aim is to replicate a graphic table tree using HTML

---

Listamatic - Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.

---

Simple accessible external links - How to identify external links

---

CSS Element Hover Effect - Using css and html only

---

CSS Going to Print - You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

---

Drop Caps with CSS - The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look.

---

CSS: Unordered List Calendar - This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be faily stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.

---

Visited Links - Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they’ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead.

---

Smart Back to top link - Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height

---

Displaying percentages with CSS - In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea

---

Unobtrusive Sidenotes - Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs.

---

CSS Cheatsheet - The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

---

CSS Navigation Techniques - A roundup of 37 different nav bars

---

Part 353 CSS Techniques - Great roundup from our friends at Smashing Magazine

---

Accessible Map Rollovers - Create points on a map with roll-over boxes

---

Styling Horizontal Rules - Even though it’s sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider

---

Cross Browser Multi-Page Photograph Gallery - Hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version

---

CSS Button - Create a button using only css

---

CSS + Javascript Fancy Menu - In this article I’ll go through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends

---

CSS Image Wrap - Image text wrap with sandbag divs

---

CSS Cross Fader - In this particular demo, I am going to show how to build a browser-agnostic crossfading effect using Script.aculo.us, a Javascript effects library

---

CSS Bar Graphs - Create complex Bar graphs using css only

---

Attach icons to anything using CSS - Thanks to CSS selectors it’s possible to attach icons to anything you want just by adding an attribute of your choosing to your HTML

---

HTML Visual Sitemap Tool - If you’ve ever had to produce a sitemap for a client using tools like Visio or OmniGraffle, you know that it can be tedious to visually organize a complex hierarchy of pages. Having experienced this myself, I developed a simple and efficient way to make a sitemap through the benefits of standards-based HTML and CSS

---

Digg comment style sliding divs - How to make sliding DIVs using Javascript and CSS from scratch without having the overhead of Effects libraries such as script.aculo.us

---

Ajax Auto Completion Demo

---

Thumbnail Images - Suppose you have a series of images in thumbnail and you would like the user to easily browse through them. In this script we will create three thumbnail images and a larger copy of the selected image will be displayed on the right of the screen. We will also highlight the currently selected thumbnail. 

---

Sliding Photograph Galleries - This gallery is my simplest yet. It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size

---

Free CSS Menus - Downloadable examples of css-based navigation menus

---

Image Fade - Fade an image in using only CSS

---

Time Sensitive Style Switcher - You Can Change Styles Based on Time of Day

---

Free Web 2.0 Templates - Download free xhtml / CSS templates

---

Turn lists into Trees - In this article, I will present a technique to display a multi-level unordered list in the form of a tree with lines connecting nodes

---

Custom Bullets - Use css to style list items with custom bullet points

---

HTML Text Drop Shadows - The drop shadow may not be a designer’s most important tool, but on occasion the need arises to add some punch to a headline. One example could be for branding text that is positioned on top of an image; Depending on the colors of the image, your text might get lost without a shadow to pop it out

---

CSS Dashboard effect - Ever want to alert your users to a really important message?

---

Create flickr-like Editing Fields Using AJAX & CSS - On one of my web projects I’ve been working on, we needed to allow the user to edit some information on their profile page. I could have written an HTML form page and then written the php database updater, but why use such outdated interfaces?

---

Form field hints with CSS and JavaScript - As you tab through each input field, some helper text appears in box out to the right

---

Part 4

 

---

Simple Accessible ‘More’ Links - “There is this information that we are hiding. But why not show that hidden information when the user is hovering the link?”

 

---

10 Tips for an easier CSS Life - As with most things, a logical and structured approach is the best way to go. Therefore I have put together 10 quick tips (in no special order) to help make your CSS coding as pain-free as possible

 

---

CSS Gallery Layout - Setting up a gallery layout is not exactly one of the jobs I am looking forward to doing. I assume you all are using lists by now to lay out thumbnail galleries, right?

 

---

CSS Alert Box - In various places around the net you may have seen alert boxes which, as far as I can tell, owe their origins to the K2 template for WordPress

 

---

CSS Tab Designer - CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required Mini Slide Navigation - Sliding nav bar using javascript for the slide effect

 

---

Centered Tabs with CSS - What if we need a bit more flexibility? What if we need to place our navigation in the center?

 

---

Multi Column Layout - We all know the problems that arise when we try to build multi-column layouts in which the columns are of equal height

 

---

CSS Shorthand Properties - One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one

 

---

10 CSS tricks you may not know - 10 Handy tips

 

---

Snook’s Resizable Underlines - The aim is to apply underlines to paragraph text that stretch the whole width of the column (without using justified text), regardless of the lengths of the paragraph text itself