stuff they never taught you at website school

Post on 11-Nov-2014

2.884 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

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

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

The Setup

You will need: A web server that supports URL rewrites

PHP 4 (5 is better)

Junior: World’s smallest PHP framework

The Setup

You will need: A web server that supports URL rewrites

PHP 4 (5 is better)

Junior: The guts

Friendly URLS

You will need: A web server that supports URL rewrites

Lesson 1: Make your URLs nicer

Friendly URLS

You will need: A web server that supports URL rewrites

Lesson 1: Make your URLs nicer

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

Tags and Abstracts Lesson 2: Dynamic Redirects

Tags and Abstracts Lesson 2: Dynamic Redirects

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

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)

Tags and Abstracts

You will need: A list of stop words

Lesson 3: Auto generate tags

Tags and Abstracts

You will need: A list of stop words

Lesson 3: Auto generate tags

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)

Tags and Abstracts

You will need: PHP + Tidy Plugin

orRuby + Nokogiri

Lesson 4: Auto generate abstract

Tags and Abstracts

You will need: PHP + Tidy Plugin

orRuby + Nokogiri

Lesson 4: Auto generate abstract

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

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

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

Search

You will need: MySQL with MyISAM

oracts_as_index plugin

Lesson 5: Adding Search

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

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

Did you mean?

You will need: PHP + Pspell

orRuby + raspell

Lesson 6: Did you mean?

Did you mean?

You will need: PHP + Pspell

orRuby + raspell

Lesson 6: Did you mean?

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.

Clean up

You will need: PHP + Tidy/HTMLPurify

orRuby + sanitize

Lesson 7: Cleaning up user HTML

Clean up

You will need: PHP + Tidy/HTMLPurify

orRuby + sanitize

Lesson 7: Cleaning up user HTML

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

Shpelling

You will need: TinyMCE + Pspell or raspell

Lesson 8: TinyMCE Spell check

Shpelling

You will need: TinyMCE + Pspell or raspell

Lesson 8: TinyMCE Spell check

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.

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

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

Uploader

You will need: mod_upload_progressSome jquery magic

Lesson 8: File Uploader

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

top related