Free resources for web developers

• CSS

• CSS framework for writers Over 700 lines of CSS covering
  • general appearance, navigation
  • floating and tabular layout
  • common table display formats
  • useful lists idioms including ticks
  • newspaper columns and box-outs.
  The framework is fully documented and easily modified to suit your preferences.

  This page uses the framework. This box is created with a simple <H6 class=fact>

• Compact flowcharts Technical instructions or specifications can be described compactly in flowchart format. Here there are no time-consuming graphics and fiddly annotations to go with them. Everything in simple nested lists.
• Put a blackboard on your web site A whimsical experiment with CSS. There is quite a bit of fiddly stuff going on in the background.
  Example
• Enriched cursors Why not change the cursor when it moves over a link or button? You can use it to show things like download () or 'opens in new window' ()

  MoreSee the CSS framework for more cursors like move mouse here

• Javascript with ES6 and classes

• JSON for proper objects including classes If you JSONify an object all methods are lost. So bloody useless for any serious object-oriented programming. This library does stringify/parse for seamless object (Classes in ES6) store and revival. I use it a lot, for example setting up an intelligent configuration object which knows how to save itself to local storage is easy-peasy.
• Indexing, persistent and in memory, of objects/class instances. Add with auto-id and auto-save in store options. Get, Update, Filter etc. Plus other everyday manipulations used with an indexed collection of objects. This is the number-one data storage structure for class-instances as it's easy to use and easy to extend.
• Storage framework for proper objects including classes This consists of a Cstore class which is a template combiming get and put of localStorage with the hierarchical keys of a filesystem. At the moment a ClocalStore is implemented. This uses CJC so everything is a string.
• Additional methods for Array These methods focus on doing things in-situ depending on value. For example .append() only does a .push() if the value isn't in the array already, .deduplicate() does what it says, and .missingFrom() returns a list of elements in the second not in the subject. Have a look at the list and stick in your toolbox.

• Javascript and jQuery

• Automatically reload page when sources change A must-have for developers. Change any of the dependent sources and the page refreshes! Also it keeps state if you ask it to. Incredibly simple to set-up. Say goodbye to manual page refresh misery!
• Foreign accent editing with ONE KEY Add this simple library to your input page and you have universal accenting with a single key. No key combinations to remember. No fiddle, no fuss. This is a JS implementation of the Windows-only AX program.
• jQuery plugin to stop table headings scrolling When you have a long table it is very annoying when the headings vanish off the top of the screen as you scroll down. This easy-to-use plugin will hold the THEAD element of a table when it gets to the top of the screen until the bottom of the table is reached.
• Javascript picklist class For some reason I wanted a robust js widget for <select>, checkboxes and radio buttons. Naturally I extended my basic need to a more comprehensive class.

  It's simple to use, and the options can be accessed via strings, simple indexes or constants. For example "west" might be indexed by a constant DIR_WEST which for some reason has an integer value of 270.

• jQuery flexible fold button Most people will know about tabs and accordions but these work with an overall structure within which elements are selected. I wanted a more stand-alone solution that might be used randomly to show/hide sections. An example might be a 'terms and conditions' section or a 'view full size image'.

  The button location, hint and text are very simple to tweak. You can attach it to headings or following elements. Buttons can be nested.

  The default operation is very simple to learn but there are enough parameters and alternatives to make a powerful little button for everyone's toolbox.

• Step by step reveal This was something that I knocked-up using jQuery for the days when I was blogging with Wordpress. It is a simple progressive click-to-reveal more of the answer function.
• Javascript cheat sheet I'm always wanting to check details. This listing of what I find useful is a single file download which links into Mozilla Dev. Network.

  (The deprecated and experimental features are hidden but can be enabled with trivial hacks to the file.)

• PHP

• test, trace and dump These closely associated tools for PHP developers are bundled together.

  Check is for structured or unit testing. There are three main functions: check a variable's type/class, check expected result and check appropriate exceptions are raised under specific circumstances. This is wrapped in a practical framework.

  Dump provide a flexible method of displaying (or sending to file) complex objects with the ability to truncate by length or depth. This also emits straightforward trace messages and stack dumps (including complex arguments.)

  Simplicity = easy to learn Both these are easy to learn, properly documented and have cool tweaks to reduce clutter.

• API documenting PHP classes and functions Rather spiffy reference documentation for PHP code libraries, extracted from the source code. (A static example is shown here.)
• Standard control buttons CSS and single PHP function for creating standard interface buttons. CSS contains images in-lined as data-urls
• Generate custom calendar tags
  Tweak the parameters then click Generate and you've got a pretty and informative icon.

• jQuery, AJAX, PHP etc.

• In-line web page editing users This free system allows users to update the content of their pages without being able to wreck the design. Many clubs will have a web page that soon gets out of date when the original writer loses interest. Why should you, the page developer, get involved with routine changes? Knock-up a practical web page for a small business and they can tweak 'offer of the month' or whatever whenever they like in complete safety. This is a lot simpler for a user to grasp than a CMS.
  • Maintain lists of events
  • Maintain snippets of news etc.
  • Show or hide alert messages (eg Christmas service alterations.)
  • Edit basic text
  • Upload photographs

  Separate design from content Do the complicated stuff once then make it so there's no excuse for the user not to keep it up to date.

Programming examples

• NEW Javascript : Better radio schedules A rewrite of the previous improvement this time using XML data and 'HTML5' localStorage to store settings and favourite markers locally. The BBC's awful design is fixed again — this time fairly cross-browserish. There are about 1000 lines of Javascript.
• OBSOLETE Javascript : Better radio schedules A Firefox add-in that scraped the data from the abysmal design of the BBC's radio scedules and did the job properly. It could remember favourite programs for you.

  There is some quite hairy Javascript and Greasemonkey programming in here.

• UI EXAMPLE ONLY Javascript : Better departure boards Why didn't anybody think to design a proper display for the live departure boards system for Britain's railways. Well I did. It worked well for a while until scraping the data became too difficult.

Computing

• PHP, MySQL : Database sanitiser There are all sorts of ways data leaks from databases when it shouldn't. I built a prototype using PHP and MySQL which provides a framework for making sure data doesn't leak and when exporting or cloning is required the necessary authorisation and other security steps are taken.
• D/a/y : Dates as they should be done How do you represent 'June 2013' in your computer? Or 'Not yet'? Or 'Unknown'? Dates don't work as a simple linear measure. 2013 → Jan 2013 → 1st Jan 2013 are all different. As well as recognising periods and abstracts we need to define an algebra to deal with things in a world where "is before", and "is not after" are neither simple for all possible combinations of dates nor necessarily exclusive.
• System design example Overview, main screen basics, hosting and management, system interactions, Interface model, data model.

Spicing up this site for 15 years

Peter Fox is a funny old fellow

• Hello You've probably seen enough already! If not have a quick introduction.
• CV 35 years of all sorts of computing and problem solving.