Tuesday, October 23, 2007

Error: malformed URI sequence

When use decodeURI to get the ajax feedback, it will return the error of malformed URI sequence if the feedback include some character like: %. The soltion is to make sure the feedback is a encodeURI or escape string, then don't use decode. More choice is use % as the replace.

Wednesday, September 12, 2007

Yahoo! UI Library: Rich Text Editor

YUI Editor is a powerful editor. I've try it on some projects, The conclusion is it's definitely good enough to customize and control to display and use on my projects. This is my favorite menu:

toolbar: {
titlebar: 'Editor', collapse:true,
buttons: [
{ group: 'textstyle',
buttons: [
{ type: 'push', label: 'Bold', value: 'bold' },
{ type: 'push', label: 'Italic', value: 'italic' },
{ type: 'push', label: 'Underline', value: 'underline' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true },
{ type: "push", label: 'Align Left', value: 'justifyleft' },
{ type: "push", label: 'Align Center', value: 'justifycenter' },
{ type: "push", label: 'Align Right', value: 'justifyright' },
{ type: 'push', label: 'Justify', value: 'justifyfull' },
{ type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true },
{ type: 'push', label: 'Indent', value: 'indent', disabled: true },
{ type: 'push', label: 'Outdent', value: 'outdent', disabled: true },
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
{ type: 'push', label: 'Insert Image', value: 'insertimage' },


And I found a little problem when use this HTML editor: the sign of collapse menu is always minus when click to collapse the menu. This is my solution:

add two setStyle to change the CSS background style of collapse in editor-beta-min.js on 24 line:

//alert(Dom.getStyle(collapse,'background'));
if(Dom.getStyle(this.get('cont'),'display')=='none'){
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -400px;');
Dom.setStyle(this.get('cont'),'display','block');
Dom.removeClass(collapse,'collapsed');
this.fireEvent('toolbarExpanded',{type:'toolbarExpanded',target:this});
}else{
Dom.setStyle(collapse,'background','url(/editor/assets/skins/sam/sprite.png) no-repeat 0 -350px;');
Dom.setStyle(this.get('cont'),'display','none');
Dom.addClass(collapse,'collapsed');
this.fireEvent('toolbarCollapsed',{type:'toolbarCollapsed',target:this});}},this,true);
}

Friday, April 13, 2007

6 steps to Successful Site

1. Mastering the basics - figure out where you are today and measure over time to know impact. Keep a list of domains and sub domains you own and what they're doing. If you have other domains that are dupes, your SEO needs to know this. Monitor your log files. Not just analytics. Log files show what is making the request. You want to know what pages the SE's are requesting. You need to know if something is blocking you website from se's.

2. Track your rankings for business critical keywords at major SE's. Collect data from different sources, like Yahoo! Google, MSN. Use tools like Omniture, Wordtracker, etc. Webposition shows rankings. Keep monthly reports for your websites to spot problems earlier.

3.Internal cross linking - most sites have a global top nav and go down to other levels. Breadcrumbs are how you link back up. Go top down and bottom up. Side to side too. Make sure you have all these links. URL structure. Make them text links. Why? Its easy for se's to read URLS of text links. SE's don't execute JavaScript. Some JavaScript has the url in it and the SE may be able to see it. Don't trust it. If a section of your site is not being indexed, it could be the URL structure. Alt attributes don't get much weight for SE's. They are used behind images. SE's can't fill out forms. Forms are great for users, provide another path for SE's.

4. Footer links - recommends using them. Link to the most important pages on your site. Not all partner sites or links pages. Keep it short and simple. Less links equals more weight for each one on the page. Short URLs are less complex and easier to follow. Many levels down is interpreted as not being important on your site. The higher up the link, the most "important" you feel the page is.

5. Http request/response cycle - referring url user agent name, ip address, cookies for domain, more. http response is 3 digit status code (200, 301, 302, 404), html code, location of redirect, cookies or more. Every request is met with a response. Some URLS have moved, for example. There are cookie communications to and from.

200 ok code - all is well and here is your html. Don't put a custom error page with 200 ok code.
301 - permanent moving of page; redirect to appropriate page
302 - temp move
404 - custom error page

6. The circle of death - do not block entire site using robots.txt file. Don't permit a "Disallow://". Don't require anyone to require a cookie to access the site. SE's don't accept cookies. Don't force cookies to see a particular country. Can cause huge problems. Every URL should have unique content.

Thursday, April 12, 2007

Suggestion to webmaster from SES New York

Use tags
your blog software will have a page for that tag and rank in search engines for that tag. You should try to have a cool title, but an SEO-perfect title tag. There’s an “SEO Title Tag” plugin for WordPress that lets you customize those, which is great (must install!), you can assign any unique URL a unique title tag.

Create tag conjunction pages
combining multiple tags for great SEO. Says you should do what ProBlogger does, putting featured posts in blocks at the top of the page. Don’t use “permalink” to link to your post, use the title (unless you want to rank well for permalink, dope). Try sticky posts, which always appear at the top of your category page to introduce it (WordPress plugin: Adhesive).

Tuesday, March 13, 2007

Why tables for layout is stupid

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text.
Read more >>

Lightbox JS v2.0

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.
Read more >>

Monday, March 12, 2007

The BBC's Fifteen Web Principles

From a BBC2.0 project developer, Such as:

Do not attempt to do everything yourselves
Treat the entire web as a creative canvas
Remember your granny won't ever use “Second Life”
Consistent design and navigation needn't mean one-size-fits-all

Read more >>

An Example of State Diagram

The example below is the state transition diagram for the initial state of my parser. The links don't lead anywhere, so don't bother clicking on them. Do change the text size in your browser, though, and look at the example with styles turned off if your browser lets you.
Read more >>

Is invalid code created through JavaScript ok?

When developing web sites with heavy interactivity, your scripting skills are really put to the test. And, sooner or later, you will be put in a situation where it’s a fine line between following web standards and what’s best from a performance and structure perspective. One question that follows that is: is it ok to apply invalid attributes via script to elements? Read more >>

Best CSS Rounded Corners Solutions

This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.
Read more>>

The website 3-click rule

Is it important that users be able to get to any content in a website within 3 clicks?

We hear at least weekly of companies enforcing the “rule” that users must be able to get to any page in the site within 3 clicks. There are several problems with this rule. More detail

53 Hot CSS Tips

smashing magazine contributed 53 accessible and usable css-based designs, base on the simple and easy principal, I think the following CSS styles are worth to learn:

CSS Bar Graphs (CSS For Bar Graphs)

Define Image Opacity with CSS

Drop Cap - Capital Letters with CSS

How to Create a Block Hover Effect for a List of Links

CSS Tricks for Custom Bullets

Creating a Star Rater using CSS

Displaying Percentages with CSS

Dynamic Piechart with CSS