Web Development Notes

• Google Analytics gotchas - Google Analytics is powerful but complex. This page documents a few concepts that can trip up a novice. Tracking a domain By default Google Analytics will only track a domain e.g. example.com and it will ignore subdomains e.g. www.example.com. If yo...
• Browser extension / bookmarklet development links - Bookmarklets are possible for all browsers. Javascript executes as document script. Firefox Extension development possible. Extensions: http://developer.mozilla.org/en/docs/Extensions Building an extension: http://developer.mozilla.org/en/docs/Buil...
• Consistent margins with CSS - Adjacent margins will collapse. CSS tutorial - Margin Collapsing Collapsing Margins In order to have consistent gaps around the edges of a content area you need to ensure the content area has a margin so that it collapses with any contained con...
• Changing style with CSS according to markup position - You can use the + symbol in css to alter the way markup is styled according to it's position in the document. This page demonstrates how the boldness of text can be increased the lower in the document the text appears. View the source code. See 5.7 A...
• CSS menu with images - I've written 2 pages illustrating how to create a nice looking menu by displaying images instead of the anchor text, using a stylesheet. There are no tables to structure the layout of the menu, instead the menu items are in an unordered list wh...
• Drop-down menu being hidden - If you get a drop-down menu that’s being hidden behind some content, make sure that all elements surrounding the menu have overflow:visible set and that the menu’s z-index is larger than the elements it need to appear over. E.g. I once worked on a sit...
• Drupal 7 - Check sidebars from the node templateDrupal 7 loggingComparing and filtering dates in Drupal 7 ViewsDrupal 7 how toDrupal 7 themeingUndefined index render elementDrupal 7 gotchas / bugsDrupal 7 Anti SpamDrupal 7 modules for key/value pair fieldsDrupal ...
• fcgi / fastcgi tests - Here are some test fcgi / fastcgi perl scripts. The Apache modules mod_fcgi and mod_fastcgi are similar, but mod_fcgi is the free license variant of mod_fastcgi (as in free code not free money) and there are technical differences between them. See Wha...
• MODx deployment with Capistrano - Notes on how to deploy MODx content management system with Capistrano, as a rough overview followed by example deploy.rb config. Version info Capistrano 2.3.0. Useful info To see a list of tasks: cap -T To see the description of a particular ta...
• Extract images from an EPS file with Inkscape - Files with an .eps extension are Encapsulated PostScript files, which are basically self-contained PostScript files for graphics. They can contain many images in a single file. You could find this if you download an icon set from the web or receive gr...
• Capistrano - Notes about Capistrano, a website deployment tool. Multi stage core http://www.capify.org/index.php/Multiple_Stages_Without_Multistage # Default is to deploy development environment to staging directory. set :rails_env, 'development' set :deploy_to...
• CSS Rounded Borders - Here is one method of creating boxes with rounded corners / borders using CSS, without using the border-radius capabilities of CSS 5 (so it will work on older browsers). Features Fluid / liquid i.e. allows unlimited expansion horizontally and vert...
• CKEditor with Drupal - Notes related to using CKEditor with Drupal. Using theme CSS in the editor To use CKEditor with your theme’s CSS, content.css in this example, edit your WYSIWYG profile and set the following: Editor CSS: Define CSS CSS Path: %b%t/css/content.cs...
• nanoc notes - Nanoc is a static HTML generator. I use is to generate the content for this site. Index Referencing configuration Prevent nanoc assuming a file is binary Filtering layouts / partials Multiple filters on partials Hidden files Controlling p...
• Kramdown notes - Syntax | kramdown and Quick Reference | kramdown do a pretty good job of explaining what’s possible with Kramdown. This page documents a few extra things I’ve either found obscure or impossible (so that I don’t research them again!). Delete / Strik...
• - body { background: #7c7c7c; } .rounded .top, .rounded .bottom { position: relative; /* Relative positioning allows child divs to be absolutely positioned relative to parent. */ height: 7px; /* Necessary for IE6 to trigger hasLayout and prevent cont...
• Heroku notes - Some notes I made about Heroku hosting for Rails applications. Asset storage is done via Amazon S3, so would have to connect whatever handles uploads (e.g. Paperclip directly with S3. See Using AWS S3 to Store Static Assets and File Uploads. A...
• DNS Entries - Domain Name Servers (DNS) map from domain name to the IP address of the server hosting the website / email. Basic site example.com (hosted at IP 192.0.2.1) and www.example.com: Entry Type TTL Target ...
• Bugs - Good reference site: Position Is Everything Get margin when no border Problem: A div seems to have a margin when it doesn’t have a border. Giving it a 1px border and the margin disappears.
• Underscores in CSS identifiers - Do not use underscores in CSS identifiers. The W3C CSS 2.1 Specification states that identifiers are allowed to contain underscores. However, the CSS 1 spec and the first draft of the CSS 2 spec made no mention of them, so some older br...
• node.js notes - node.js is the lastest and hyped-as-greatest web development platform. Tools Supervisor for auto-restarting the web server when source changes are made. npm npm is node’s package manager (bizarrely it’s not an acronym for Node Package Manager, it...
• Compass notes - Notes about Compass, the CSS generator. Compass will keep an eye on your SASS files (actually more recently your SCSS files - SCSS is the latest syntax, while SASS is older) and compile them in to CSS files on the fly, or when you ask it to. Compile ...
• Strange comodoca text files in your hosting account - I recently found that a number of strange text files had turned up in various shared hosting accounts that I manage. [me@host public_html]$ ls | egrep '.{32}.txt' 029951C23F605A18X3368D97F94D62E6.txt 0CCBBCS862CA8845E7F14BE19299AAC0.txt 1D5C272AC2BF50...
• How to set up nanoc with ImageMagick / RMagick on Windows - I recently created a nanoc site for a photographer. The site needed to generate image galleries and run on Windows, hence the requirements for ImageMagick via RMagick on Windows 7. XAMPP Install xampp or your webserver or choice. xampp was used to p...
• Security restriction with page refresh in a frame - Due to security restrictions certain browsers will not allow you to refresh a page from an external site that is framed in your site. To get around this, load a local page into the frame. Use the Javascript onload event to redirect the page to the ex...
• Text shadow - Just a note to say that text shadow is easily achieved in CSS withe the text-shadow property: text-shadow: 1px 1px 1px #EEEEEE; This creates the following: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium massa vitae orc...
• Review of Ruby static CMS / site generators - Requirements Ruby framework. Pages maintained in git. Generated paths_that_are_built/from_the_directory_and/file_names.html. Or similar. Web page should either not have an extension or should be same as online format used, e.g. html. Support ...
• Documenting domains and IPs - The following domains are available for documentation purposes: example.com example.net example.org example.edu The following IPs are available for documentation purposes: 192.0.2.0 - 192.0.2.255 198.51.100.0 - 198.51.100.255 203.0....
• Ext JS - I’ve been unfortunate enough to have to use Ext JS. I came away from the experience with the impression that it’s slow, bloated and over complicated. Never again. Menu Ext.onReady(function() { var menu = new Ext.menu.Menu({ items: [ ...
• Capistrano with Subversion - Rough notes on how to set up Capistrano to deploy with Subversion. Note: Must get capistrano to use svn export instead of checkout, or use rsync. rsync: http://fiatdev.com/2006/07/15/capistrano-deployment-using-rsync Or, note last comment on nobugs ...
• Cross-browser Compatibility - This page list of some issues faced when writing HTML, CSS or JavaScript for different browsers. It will not cover the difference between their object models, only relatively unexpected differences. It is far from complete. Each issue was...
• XHTML Popup Link - function targetBlank (url) { blankWin = window.open(url,'_blank','menubar=yes,toolbar=yes,location=yes,directories=yes,fullscreen=no,titlebar=yes,hotkeys=yes,status=yes,scrollbars=yes,resizable=yes'); } If you're writing XTHML 1.0 then...
• Font sizing for accessibility and usability - You need to use a scalable font size rather than pixels (Internet Explorer doesn't scale pixels). The em unit is best. The default font size in most browsers is 16px. So 1em is equivalent of 16px. For easy use of ems, set the font size on the body elem...
• HTML doctypes - Just a reminder… XHTML 1.0 Strict for English <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> X...
• Why use web standards (e.g. CSS instead of tables)? - This page links to a number of articles that clearly explain the considerable benefits of adopting web standards (and using css instead of tables for design). Why tables for layout is stupid – A good introductory presentation about why you sho...
• CKEditor - Notes about CKEditor, a WYSIWYG editor. Index Removing complex tabs and validating image alt text Setting default table width and height to empty and removing them from the table dialog Removing complex tabs and validating image alt text Teste...
• Typekit notes - Typekit is a web service that provides fonts for web sites. To use, register on the site and create a “kit”. See Adding fonts to your site. You get some Javascript that will load the fonts (where xxxxxxx will be a code unique to your account): <s...
• Prevent floated content extending beyond main content. - A common design for web pages is to have main content and a sidebar. Often, CSS is used to float the sidebar or the main content (or both) so that they can sit next to one another. Because floats are outside of normal page flow, this can lead to a prob...
• Doxygen - Doxygen is a source file documentor, compatible with PHP documentation in phpdoc format. Unlike phpdoc (aka PhpDocumentor) it doesn’t require a ridiculous amount memory on a large code base). Generate documentation from source code Getting starte...
• Accesskey standards - The following was lifted from an article called Accesskey standards | clagnut/blog written by Richard Rutter. Note that I haven't actually adopted them for mindspill.net yet, but I will soon. --- Begin article --- One of my goals for Cla...
• Accessible hiding content with CSS - Using display:none can also hide content from screen readers. If you do this, best use visibility:hidden as well, to ensure consistent behaviour in all readers. .hide{ display:none; visibility:hidden; } To hide from visual display but not scree...
• Amazon S3 - Notes about Amazon S3. Data is transferred to S3 via SSL. See Q: How secure is my data?. For linking to assets via https, their S3 URL must be used. On Rails this can be done via the config.action_controller.asset_host variable. Rail...
• Browsers' reserved keys (i.e. characters not to use for accesskeys) - Alt is normally the access key modifier, e.g Alt-c will trigger the link associated with the c character. mindspill.net that'll lead to the computing page.--> When assigning access keys you must avoid using characters that are also used by the browser...
• Facebook notes - Notes about some things I’ve come across with Facebook that are relevant for web developers. Link preview / News Feed story When you add a link to Facebook it detects various details of your page for its link preview. For example it will automaticall...
• How to determine version of CKEditor - The version of CKEditor is specified in various files bundled with its source. ckeditor.asp: Private Sub Class_Initialize() version = "3.5.1" ... ckeditor_php4.php: class CKEditor { /** * The version of %CKEditor. * \private */ var $ver...
• Anchor target in embedded object - If you use the object tag to embed one web page within another, you may need to open links from the embedded page in the top-level window. There are a number of ways to do this, as shown by the example below where the first 5 links will open in the...
• Drupal 6 - Drupal 6 themingMiscellaneous Drupal 6 notesDrupal 6 how toDrupal 6 gotchas / bugsDrupal 6 modulesDrupal 6 custom content typeDrupal 6 UbercartOrdering Drupal 6 events by date when you have empty / null dates I also have Drupal 7 notes.
• Drush notes - Notes about Drush version 7. Index Installation Commands Multisite Running scripts Features how tos Export to a non standard destination Export all roles and their permissions Export a role and its permissions ...
• Drush installation - Notes about installing Drush. See Installing Drush 6 and 7 on Shared Hosting Accounts With Composer for installation instructions on a shared host. Quick install with Composer This assumes that PHP is at /usr/bin/php, ~/bin is in your PATH, ~/.bash_p...
• Accessible Javascript - WAI-ARIA Overview ARIA will allow accessibility information to be added to XHTML markup in order to inform user agents as to the nature of dynamic content. The goal is to make ARIA features standard from HTML 5. Accessible Web 2.0 Applications with W...
• XHTML validation with JavaScript - The W3C XHTML validator will complain if you’ve got JavaScript embedded in your XHTML markup and you haven’t taken steps to make it XHTML friendly. Either move the JavaScript into a file (in this example called script.js): <script src="script.js" ...
• PHP - Joining arrays in PHPPHP GotchasSuppress PHP errors warningsRead file without php error messagesPHP modulo operator (%) returns negative numbers

Last modified: 20/12/2011 Tags: (none)