Best Practus

accounting_for_browsers

2008-07-13T19:09:51-07:00

A problem that seems to be a reoccurring theme that people just don't account for - browser upgrades. We can generally see that in browsers like Safari, Fire Fox, Opera, et al. they get better by adding canvas support, CSS3 selectors and other aspects that help make web development more powerful, allowing for better user experiences online.

actionscript

2009-03-18T19:23:48-07:00

* Traverseing the displayList

add_or_remove_dynamically_added_elements

2008-07-10T11:22:19-07:00

This came up because of a wholesale order form I'm working on (using PHP and mootools) that I'm wanting to do without requiring refreshes. The beauty of this beast, is “no javascript” isn't an option, so I don't have to worry about that - initially.

ajax_updates_to_table_elements

2009-03-18T19:23:50-07:00

IRC My needs were simple. I wanted to use AJAX to pop up an embedded dialog (just some fancy CSS styling to get a DIV hovering over an overlay, really), update some values, and have that info populate back to the table where said information was presently displayed. I also wanted to be able to add new records and delete existing rows through AJAX calls rather than refreshing the whole page.

alphapng

2009-03-18T19:23:50-07:00

AlphaPNG for 1.2 Created for Internet Explorer 6 so that you can use PNGs for img tags, inline/external css background images.

ant

2009-03-18T19:23:51-07:00

* ant "clean" target

ant_clean_target

2009-03-18T19:23:52-07:00

This is how the default dev/stage push actions should work. A clean build is one with temp, test, log, property, source and so on files removed from the build. While the other standard build is just grab everything. The “just grab everything” shouldn't be an option in the ant tasks at all. So just point your build task to use an excludesfile which includes everything that you don't want to be included in the build. Here's a good starting point:

atg

2009-08-01T01:51:04-07:00

* Creating Pagination for Repository Search Results NDJSDSKJDLKSAJFLKsa Code Snippets * Generate Valid XHTML * SQL Logging * Test if Empty References and other Resources * BeTweenGo * ATG Solutions Strategy

bicubic_image_resampling

2008-06-26T20:40:05-07:00

* Allows IE to render images like Safari/Fire Fox3, allowing you to scale images in a better fashion. * Let's assume you want IE to scale and sample your images like other browsers, then you'd include this css code: Related Wiki Entries * how_to_resize_images_and_maintain_original_sharpness

bind_function

2009-03-18T19:23:53-07:00

The bind function is prototyped to the function element and so is called directly upon a function. When calling bind you pass it an element to which the 'this' of the function then corresponds to. The above code would attach the focus event to ‘element’, on focus the browser would alert the id of that element.

bugs_and_workarounds

2009-03-18T19:23:54-07:00

Double Margin

code

2008-06-25T13:01:30-07:00

General Code * CSS * HTML * Javascript Javascript Frameworks * jQuery * Mootools RIA * Flash * Flex * Actionscript

conditional_comments

2008-07-13T18:23:52-07:00

The general bad boy of commenting is CSS styling for the various flavors of Internet Explorer. What this allows you to do is create valid CSS code for your sites (and a warm fuzzy feeling knowing you're a better web developer) - but still managing to account for internet explorer quirks.

creating_pagination_for_repository_search_results

2009-03-18T19:23:56-07:00

Hai hello iam fine.

css

2008-07-13T06:51:44-07:00

This is meant to be a collection of CSS best practices and reference to code and sites that teach best practices, or do their best to make it easier for beginners to have a jumping point. CSS Coding * Formatting CSS * Accounting for browsers * Conditional Comments

double_margin

2008-06-26T20:47:25-07:00

Code: The offending code: The corrected code: Documentation on other sites: * Bug Fix: IE Double Margin Float Bug - CSS Newbie * The IE Doubled Float-Margin Bug - Position Is Everything Sites using this method: * None listed at the moment.

flash

2009-03-18T19:23:58-07:00

I'll be the first to admit I don't know Flash Best Practices, so this'll be a holding place for tutorials. Eventually, I'd like to get the source code/examples put up here as well (as I hate nothing more than checking a link and finding out it's no longer in existence).

form_validation

2009-03-18T19:23:59-07:00

submit_button_as_image The _x- and _y-coordinates can be used to improve the security of a form. * Useful to see if the form has been filled by a human. * A spam-bot won't submit any coordinates but a human has to click on the button and so there will always be coordinates (you'll have to deactive submitting with the ENTER-button).

formatting_css

2009-03-18T19:23:59-07:00

* Comment, comment, comment! You can never use too many comments to explain your code. * You never know who may need to use your code after you, and comments help cut down on “teaching” what you've done to other developers. * Alphabetize! Organize your CSS alphabetically, as it makes it easier to scan and eliminates guess-work on properties if you work quickly (I've seen people do three * Use CSS Shorthand! Why do this:

generate_valid_xhtml

2009-03-18T19:24:00-07:00

how_do_i_find_what_distribution_of_linux_i_am_on

2009-03-18T19:24:01-07:00

Code: ls /etc | grep release You should then see a file called _release (or something similar). Then: Code: cat /etc/_release Code: uname -a Get name and information about the running kernel Sources and References

how_to_resize_images_and_maintain_original_sharpness

2009-03-18T19:24:01-07:00

Requirements * Adobe Photoshop (CS or greater) * Large, high-quality image. Best Practus When you want to reduce an image go to the Image> Image Size menu. Click on Resample Image and choose Bicubic Sharper from the drop-down menu. This is the best setting for making sure that an image doesn't blur. The example photo of the flower started at 2,000 pixels across. I stepped it down to 250, and then again to 125 with almost no loss of sharpness. For enlarging an image select Bicubic Smo…

html

2008-06-26T19:47:20-07:00

* HTML * CSS * JavaScript

internet_explorer

2008-06-26T20:33:15-07:00

IEIEconditional comments * Bicubic Image Resampling * Bugs and Workarounds

javascript

2008-06-26T14:50:29-07:00

Javascript Links Minification * Online JavaScript Minification Tool * UnMinification

javascript_frameworks

2008-08-02T04:37:57-07:00

This isn't about who is the best - it's about the best way to use the libraries. I don't know if it's even possible to really get the definitive answer on which framework could do what better (or best). * The Dojo Toolkit * jQuery * Mochikit * mooTools * prototype * qooxdoo * Script.aculo.us extension for Prototype * SmartClient * Yahoo! User Interface

javascript_links

2009-03-18T19:24:05-07:00

Using JavaScript for links: unobtrusive JavaScript GOOD Examples snippet: This is the most standard way to link to another URL. snippet: This is the proper way to trigger a JavaScript action by clicking on an element. snippet: This is the proper way to trigger a JavaScript action by clicking on an element while simultaneosly providing an alternate URL for non-javascript users via the href attribute. By returning false all JavaScript enabled browsers will ignore the href value. Pro…

linux

2009-03-18T19:24:05-07:00

How do I find what distribution of linux I am on?

mootools

2008-07-21T10:53:10-07:00

mooTools Site * mooTools Plugins * bind function * stop page load * AJAX Updates to Table Elements * Selectors 1.2 * Add or Remove Dynamically Added Elements * mootools 1.2 Detect when a user stops resizing the browser window * mootools 1.11 Slide Show with JSON interjection * mootools 1.2 Class Template

mootools_1.11_slide_show_with_json_interjection

2009-03-18T19:24:07-07:00

Basically, the mootools script grabs an ID and runs with it. Stills needs some tweaking, probably rewrite it as a class, and I don't like the transitions. The HTML Code The JSON Data File The Javascript File Where the magic happens

mootools_1.2_class_template

2008-07-21T14:38:04-07:00

The following code is an easy reference point to starting your mootools class. Class Code Example Class Usage Example Include this in your HTML code (preferably in the footer) References and Sources * MooTools 1.2 Class Template - Dave Walsh's Blog

mootools_1.2_detect_when_a_user_stops_resizing_the_browser_window

2009-03-18T19:24:08-07:00

Well this is a IE only problem, because in the other browser the onResize event is fired only once, when the user finishes resizing. But it IE it's actually problematic if your resize function is something complex that involves animations. here is one example:

mootools_plugins

2008-07-04T23:02:13-07:00

This is meant to be a collection of mooTools code and plugins. AlphaPNG * Allows the use of transparent PNG files on IE6. This includes IMG tags, Inline CSS and CSS Files. Poof * Duplicates the “poof” when you delete an element. Parallax

parallax

2008-07-04T23:12:47-07:00

Based off of How to recreate silverbacks parallax and shown here: SilverbackApp.com

php

2008-07-04T23:29:57-07:00

Code Samples Submit Button As Image Form Validation

poof

2008-07-12T03:34:27-07:00

Poof Effect for MooTools 1.2 Mac OS X users will be familiar with the poof animation that occurs when application icons are removed from the dock. The animation looks nice, is unobtrusive, and provides a clear indication of the function being performed.

prototype

2008-07-05T08:35:25-07:00

Prototype JS * prototype stop page load

prototype_stop_page_load

2009-03-18T19:24:13-07:00

This code basically helps kill a page when you are dynamically pulling in content. Useful for AJAX calls that you need to abruptly cut. It works with Firefox, Safari, and the troublemaker…Internet Explorer.

selectors_1.2

2008-07-06T23:31:35-07:00

Mootools 1.11 The $ (dollar) function Most people think this is just a shortcut for document.getElementById(), but actually it’s not. The $() takes one argument. This argument is called mixed in php terms, because it can be a string, or a dom element. Whenever the argument is a string s, it returns the element with id s with all Element methods applied. When the argument is a dom element, it just applies all Element methods to the element, and returns it. Here’s how it works:

sql

2009-03-18T19:24:15-07:00

MySQL, MSSQL, etc. Code Examples * SQL update in one table based on values in another

sql_logging

2009-03-18T19:24:16-07:00

To log SQL turn on logging debug for your Repository component. For example, set /betweengo/repository/Repository.loggingDebug to true. Note that a lot of SQL statements are outputted. If you want to selectively turn it on and off you can put this in your JSP where you want to start logging SQL.

sql_update_in_one_table_based_on_values_in_another

2009-03-18T19:24:16-07:00

The UPDATE statement allows you to update a single record or multiple records in a table. The syntax for the UPDATE statement is: Code Examples Example #1 - Simple example Let's take a look at a very simple example. This statement would update all supplier names in the suppliers table from IBM to HP.

start

2009-01-06T12:42:40-07:00

Best Pract.us started as an idea of what would happen if you collect all the information online in one place. Not necessarily factual - but the opinions of what's best. How to build a website. How to format your code. The best way to code javascript. Syntax. Font-size. File-size. SEO. Targeting and filtering. It's not about arguing, but presenting, discussing, editing. You write it, let the world judge it.

stop_page_load

2009-03-18T19:24:18-07:00

submit_button_as_image

2008-07-04T23:29:31-07:00

“” As you probably know, you can recognize a form submission from a “submit” input type by placing the following code in the “processing” PHP script: Did you know, however, that when using an “image” input type to submit the form, the above wont work? You need to add a “_x” to the field name in PHP:

target_filter_out_gecko

2008-07-14T20:22:09-07:00

Safari 3.1.1 and up may apply the old versions of these rules.. just throw an extra [xmlns^=””] to filter out Safari. This hack hinges on a difference in interpretation, namely, what would the selector [x*=””] mean? Should it match any x, or never (regardless of what x is)? It turns out that almost all CSS3-capable browsers believe it should match, but Gecko does not. This means that if we reverse the clause using a :not we can target only Gecko, or we can filter it without the :not.

target_filter_out_internet_explorer_7_8

2009-03-18T19:24:19-07:00

The IE8 beta fixes a bunch of comment-parsing bugs IE7 suffered from so it’s pretty trivial to target IE8 only by adding one of those comments to an IE7-only hack. Phil Schalm’s className trick combines with this to provide ways to target IE7 and IE8, or neither. Targetting IE7 alone is more tricky, and the best I could come up with is a non-validating hack. This reduces it’s usefulness, but since I place IE-specific hacks into conditional comments I don’t mind. Note that IE8 actually suffers fr…

target_modern_opera_versions

2008-07-14T20:12:52-07:00

Target with CSS hacks Target Opera 7.2 up, 9 up, or 9.5 up Target Opera 9-9.2x Why not :lang pseudo-class? They are a bad solution on internationalized sites. These hacks are considered “valid” although the W3C Validator doesn't parse vendor-extensions properly - they are a part of the Valid CSS specs.

target_only_konqueror_3.4.3_up

2009-03-18T19:24:21-07:00

This hack is not likely to last long, but Konqueror is currently the only browser that currently supports :nth-child and similar CSS 3 properties. In the unlikely event that you have to target only Konqueror, you can use something like html:not(:nth-child(1)).

target_safari_webkit_shiira_and_omniweb_5

2008-07-13T18:40:27-07:00

The xmlns version of this hack is applied by Opera 9.5, so it’s gone unless you want to target both browsers. The other Safari 2 hack still works fine. We can target Safari 2-era engines using last-child in conjuction with a double-root negation of :not(:root:root). To target only recent WebKits we can use an @media filter with the negation, as pointed out by Chris Griego. Gecko does not understand double-not clauses like this, so it’s pretty safe.

test_if_empty

2009-03-18T19:24:22-07:00

This article, InformIT: The JSTL Expression Language > Expression Language Overview, informed me on how to test if something is empty or not. Code Examples Empty? Not empty? Source * Test If Empty - betweenGo

tick_marks

2009-03-18T19:24:23-07:00

Tick Marks are generally used in code to assist in identifying variables.

traverseing_the_displaylist

2009-03-18T19:24:23-07:00

I believe the scroll pane component is actually a series of nested movieclips- the controlling object and the load container. parent.parent.gotoAndStop might work, or you can traverse the displayList by iterating up the parents to see how far you're nested as follows:

unminification

2009-03-18T19:24:24-07:00

* Install Greasemonkey * Install this javascript beautifier Greasemonkey script * Cut-and-paste the minified javascript from the site you want to work with * Visit nopaste.voric.com and cut-and-paste the code from the site * Click the Javascript option * Change “Save until” to 1 day * Cut and paste the code from the site * Click “Save”

variable_names

2009-03-18T19:24:24-07:00

* Make your variable names long and descriptive. * Using long names prevents the ambiguity of short or cryptic names. * Put units in your variable names * If you are writing an engineering application you are going to be using variables with units. Embed the unit name in the variable, for example, distanceInMM.

web_images

2008-06-26T20:36:04-07:00

Tips, tricks, etc. for creating the best images possible. How To Resize Images And Maintain Original Sharpness