stuff they never taught you at website school

35

Upload: myles-eftos

Post on 11-Nov-2014

2.883 views

Category:

Technology


0 download

DESCRIPTION

This presentation, given at the Edge of the Web, 2009 shows some of the 10-percentaers you can do to make good websites, awesome.Very code heavy, but aimed at beginner to mid-range coders.

TRANSCRIPT

Page 1: Stuff They Never Taught You At Website School
Page 2: Stuff They Never Taught You At Website School

Stuff youneed Preamble: Ruby or go home

For RubySinatrahttp://www.sinatrarb.com/Ruby on Railshttp://www.rubyonrails.org

For PHPJuniorhttp://github.com/madpilot/junior

The World’s smallest PHP Framework†

+ Apache (with mod_rewrite)

† Probably...

Page 3: Stuff They Never Taught You At Website School

The Setup

You will need: A web server that supports URL rewrites

PHP 4 (5 is better)

Junior: World’s smallest PHP framework

Page 4: Stuff They Never Taught You At Website School

The Setup

You will need: A web server that supports URL rewrites

PHP 4 (5 is better)

Junior: The guts

Page 5: Stuff They Never Taught You At Website School

Friendly URLS

You will need: A web server that supports URL rewrites

Lesson 1: Make your URLs nicer

Page 6: Stuff They Never Taught You At Website School

Friendly URLS

You will need: A web server that supports URL rewrites

Lesson 1: Make your URLs nicer

Page 7: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 2: Dynamic Redirects

Moving stuff around?

Most would use .htaccess – not happiness

1. Store from URLS and to URS2. Redirect with 301 Permanent3. Bask in Google love

Page 8: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 2: Dynamic Redirects

Page 9: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 2: Dynamic Redirects

Page 10: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 3: Auto generate tags and

descriptions

Google might not care about meta tags anymore, but some sites do. Also useful for internal search...

Page 11: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 3: Auto generate tags

In five easy steps

1. Strip out all the HTML and non-alpha characters

2. Split the all the text into tokens (single words)

3. Strip out common words (stop words)4. Count the frequency of the remaining words5. Return the top 10 (or whatever)

Page 12: Stuff They Never Taught You At Website School

Tags and Abstracts

You will need: A list of stop words

Lesson 3: Auto generate tags

Page 13: Stuff They Never Taught You At Website School

Tags and Abstracts

You will need: A list of stop words

Lesson 3: Auto generate tags

Page 14: Stuff They Never Taught You At Website School

Tags and Abstracts Lesson 4: Auto generate abstract

Most users will just use the first paragraph for descriptions – let’s do it for them

Find as many paragraphs as you can, without going over the word count.

OR

Find as many sentences in the first paragraph as you can, without going over the word count

OR

Find as many works in the first sentence as you can without going over the word count (and add a ellipses)

OR

Truncate the world’s longest word (and add a ellipses)

Page 15: Stuff They Never Taught You At Website School

Tags and Abstracts

You will need: PHP + Tidy Plugin

orRuby + Nokogiri

Lesson 4: Auto generate abstract

Page 16: Stuff They Never Taught You At Website School

Tags and Abstracts

You will need: PHP + Tidy Plugin

orRuby + Nokogiri

Lesson 4: Auto generate abstract

Page 17: Stuff They Never Taught You At Website School

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

Page 18: Stuff They Never Taught You At Website School

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

MySQL has full text search:

CREATE TABLE `searches` ( `id` int(11) unsigned NOT NULL auto_increment, `title` varchar(255) default NULL, `abstract` varchar(255) default NULL, `copy` text, `keywords` varchar(255) default NULL, `permalink` varchar(255) default NULL, `entry_id` int(11) default NULL, `entry_type` varchar(255) default NULL, `created` datetime default NULL, `modified` datetime default NULL, PRIMARY KEY (`id`), FULLTEXT KEY `title` (`title`,`copy`,`keywords`)) ENGINE=MyISAM

Page 19: Stuff They Never Taught You At Website School

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

Page 20: Stuff They Never Taught You At Website School

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

acts_as_indexed :fields => [ :title, :body, :generate_keywords ]

Page 21: Stuff They Never Taught You At Website School

Did you mean?

You will need: PHP + Pspell

orRuby + raspell

Lesson 6: Did you mean?

Correct misspelled search terms

1.Split the term into tokens (on spaces)2.Spell check each token3.If it is wrong, show the correction4.Make the corrected string a link

Page 22: Stuff They Never Taught You At Website School

Did you mean?

You will need: PHP + Pspell

orRuby + raspell

Lesson 6: Did you mean?

Page 23: Stuff They Never Taught You At Website School

Did you mean?

You will need: PHP + Pspell

orRuby + raspell

Lesson 6: Did you mean?

Page 24: Stuff They Never Taught You At Website School

Clean up

You will need: PHP + Tidy/HTMLPurify

orRuby + sanitize

Lesson 7: Cleaning up user HTML

First thing clients do: Write their copy in Word, then paste it in

You tell the client not to cut-and-paste word documents

The second thing the client does: Write their copy in Word, then paste it in...

Also, RTE’s produce bad code, and each produces different bad code.

Page 25: Stuff They Never Taught You At Website School

Clean up

You will need: PHP + Tidy/HTMLPurify

orRuby + sanitize

Lesson 7: Cleaning up user HTML

Page 26: Stuff They Never Taught You At Website School

Clean up

You will need: PHP + Tidy/HTMLPurify

orRuby + sanitize

Lesson 7: Cleaning up user HTML

Page 27: Stuff They Never Taught You At Website School

Shpelling

You will need: TinyMCE + Pspell or raspell

Lesson 8: TinyMCE Spell check

This is a TinyMCE plugin.

Just need to define two JSON endpoints, and use the same library from the “Did you mean” section

Page 28: Stuff They Never Taught You At Website School

Shpelling

You will need: TinyMCE + Pspell or raspell

Lesson 8: TinyMCE Spell check

Page 29: Stuff They Never Taught You At Website School

Shpelling

You will need: TinyMCE + Pspell or raspell

Lesson 8: TinyMCE Spell check

Page 30: Stuff They Never Taught You At Website School

Uploader

You will need: mod_upload_progressSome jquery magic

AND NOT PHP

Lesson 8: File Uploader

Why are they so HARD!? It’s 2009 for god’s sake...

There is an apache module. Not so good for shared servers, but it works.

You can use a jquery plugin, to turn normal uploaders into better uploaders

Oh, if any Adobe people are here: SORT FLASH UPLOADERS OUT.

Also. If there is any W3C people here: LET ME UPLOAD USING AJAX.

Page 31: Stuff They Never Taught You At Website School

Uploader

You will need: APC PECL module

A lot of patience

Caveat: PHP has not happiness

You CAN use the APC. It’s pretty flaky.The shared memory fills up, and it breaks. #balls

Page 32: Stuff They Never Taught You At Website School

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

Page 33: Stuff They Never Taught You At Website School

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

Page 34: Stuff They Never Taught You At Website School

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

Page 35: Stuff They Never Taught You At Website School

LinksSinatra: http://www.sinatrarb.com

Junior: http://www.github.com/madpilot/junior

Apache Uploader: http://github.com/drogus/apache-upload-progress-module

TinyMCE Spellchecker for Rails: http://github.com/madpilot/tinymce_spellcheck

Acts as Indexed: http://github.com/dougal/acts_as_indexed

HTMLPurifier: http://htmlpurifier.org/

Sanitize: http://wonko.com/post/sanitize