Web development related test stuff

Happy reading, learning, copying, thinking, filtering, clicking, wondering, looking, laughing, guessing, testing et cetera…

If you have any questions, comments or suggestions; you can contact me. Feel free to do so! Also if you're (not) about to make money with anything found here. I like to know who I helped out.

Krijn Hoetmer ~ Freelance web developer

• Some tools

  • Making a color gradient in some text

• Extensible HyperText Markup Language (XHTML)

  • What happens when you use <input type="checkbox" checked="unchecked">?
  • &Custom; &entities; can be handy to deal with spambots
  • Extending the DOCTYPE definition inside the DOCTYPE declaration
  • C'mon Google, do your magic thing on these XHTML files!

• Scalable Vector Graphics (SVG)

  • The cat from O'Reilly's book, SVG essentials
  • Some simple circles (gotta love them!)
  • Is this the way to use CSS in SVG?
  • Different DTDs
  • Does Google index SVG images?
  • Does hell break loose when you forget a MIME type or namespace?
  • How to embed SVG images into your (HTML) documents?

• HyperText Markup Language (HTML)

  • Does a search engine index abbr and/or acronym?
  • <abbr> for Internet Explorer
  • A select box doesn't have an accesskey
  • Internet Explorer has a stupid bug when using <button> as submit buttons
  • Some typographic characters
  • <!-- Some comments are weird science in Gecko -->
  • <!--[if lt IE 6]>Conditional comments to target IE<![endif]-->
  • <!--[if !IE]><!-->Conditional comments to target anything but IE<!--<![endif]-->
  • Data URI
  • Does Google index images sent as data URIs?
  • Why use entity references when you use utf-8?
  • Does the <STRONG>case</strong> of tags change the <em>filesize</EM>?
  • Sometimes one just has nothing to do
  • If you want to print a page in IE, using id="tags" is considered harmful!
  • <input type="image"> is pretty useless sometimes
  • Hmm, who deprecated <isindex>?
  • You don't need <a name="foo"> to jump to a section, but id's
  • What's the maximum length of the alt attribute?
  • How is <meta name="description"> indexed?
  • Using both http-equiv and a real HTTP header
  • How is <meta name="keywords"> indexed?
  • Let's use <object> to display an image and provide alternative marked up content
  • Linking to a #fragment #identifier in Opera, when using Apache MultiViews
  • A paragraph is an ordered list of words, right?
  • Using <select multiple[="multiple"]> or a list with <input type="checkbox">s?
  • Do browsers support ­ and how do search engines index it?
  • Simultaneously uploading some files using iframe elements
  • Why use   again?
  • <b> & <i> aren't deprecated, <u> is
  • Using the target attribute in a strict DOCTYPE
  • Some way to mark up tag clouds
  • How are <thead> and <tfoot> rendered when printed?
  • Valid HTML can be made with little code

• Google Maps

  • My first playing around with Google Maps
  • Postal codes in The Netherlands

• PHP: Hypertext Preprocessor (PHP)

  • Converting numeric character references to unicode
  • Using the DOM in PHP5
  • Markdown for simple forms
  • Fetching HTTP headers with get_headers()
  • How to send both text/plain and text/html mails, using multipart/alternative
  • A table converter (from Excel to HTML for example)
  • A quick htmlspecialchars() thingy
  • A more semantically correct way of highlighting PHP
  • PHP likes to strip out new
    lines for you
  • Some issues with utf-8
  • A safe word highlighter
  • Sorting some words in a string

• Portable Document Markup Language (PDML)

  • Some tests

• Apache, HTTP & .htaccess

  • Custom error documents using the ErrorDocument directive
  • The HTTP headers your browser carries along

• Visual Basic programs (old and mostly Dutch stuff aka crap!)

  • HTML Tool
  • Overhoorprogramma
  • Games
    • Dutch Mountains
    • Vier op een rij

• 3D Studio Max (3ds max)

  • A bar stool with a teapot; how amazing!
  • Some LEGO blocks

• Favelets

  • Add a stylesheet to a document
  • Convert <input type="password"> into normal textboxes
  • Convert <input type="hidden"> into normal textboxes

• Cascading Style Sheets (CSS), level 1, 2.1 & some of 3

  • Internet Explorer only knows about a[href]:hover
  • On what can :active be used?
  • The @page rule
  • background-attachment and scrolling speed
  • Background images for lists
  • Background colors with alpha transparency, using rgba() and a hack for IE
  • Percentages in background-position have a funny way of calculating
  • Block, inline and empty elements using :before & :after
  • An input with only a border on the bottom could be handy for printable forms
  • One border can have four different border-colors
  • Some box effects
  • Some nice way to render semantic breadcrumbs
  • clear behavior in Gecko
  • Pseudo-element bug in Internet Explorer
  • A pure CSS calendar (and a table version for comparison)
  • The child > selector in Internet Explorer
  • Spaces around the child selector are silly in Internet Explorer 5
  • Internet Explorer and Mozilla (and Opera 8) don't agree on clearing
  • Kinda like clear: both;
  • Mathematics with collapsing margins
  • Combining classes (.or.multi-class.selectors)
  • Containing floats
  • Curvelicious!
  • How about using a different box model?
  • A different color for list bullets
  • Using direction and unicode-bidi to swap words
  • Disabling default browsing styling, or whatever
  • display: inline-block; doesn't work too great cross browser
  • Dotted borders in Internet Explorer
  • A button which secretly isn't a button (don't tell anyone!)
  • With CSS you can easily make frames
  • A new way to make layouts; Faux Absolute Positioning
  • :first-letter & inline|block
  • :first-letter & the selector subject
  • Floating elements left & right
  • Using floats together with the order of content in your HTML
  • Fluid centering a box
  • All font properties
  • Applying both text-transform: lowercase; and font-variant: small-caps; is buggy in IE
  • Using a gradient as a color, sort of :)
  • Some form layouts
  • Generated content
  • :hover:after { content: '\A bar'; } seems to crash Safari 1.3 and 2
  • Generic fonts
  • How to unhide hidden rows in a table?
  • Some ways to hide CSS rules in certain browsers
  • Centering a block horizontally using minimal markup
  • Centering a block both horizontally and vertically
  • Using :hover in Internet Explorer
  • a:hover * { visibility: visible; } has a bug in Internet Explorer 6
  • There are times when Internet Explorer forgets some cached images
  • Internet Explorer sometimes forgets an !important rule
  • An image matrix for navigation
  • Inline and block anchors
  • Displaying a definition list inline
  • Displaying <li>'s inline, without extra space
  • A line-height thingy
  • What happens when you give your links to stylesheets a title?
  • Linking to style sheets with HTTP headers
  • Lists, margins, paddings, markers and indentation
  • Some sample menu lists
  • min-height in Internet Explorer
  • Multiple background images on an element
  • Links can't be nested in HTML, but they can be in CSS
  • <span>Semantics</span>, <span>why</span>?
  • On a laptop? Need an external numeric keypad? Here it is :]
  • Pushing boxes visually out of their container
  • The outline property, looks like border
  • A fading PNG file together with overflow: auto;
  • A possible layout for a pasteboard
  • Percentage bars using 2 images
  • Some ways to display poll results using only CSS
  • Absolute and relative positioning
  • Preloading images without JavaScript
  • An easy fix to enable position: fixed; in Internet Explorer
  • You can put the scrollbar on the other side in IE, but please don't!
  • The ::selection selector and some applicable properties
  • Some selectors
  • Using constants in CSS, with CSS SSC, by Shaun Inman
  • And variables with CSS SSV, also by Shaun Inman
  • Sidenotes using minimal markup and some CSS
  • Changing the size of a list bullet
  • Slants are easy to create
  • Styling the legend element
  • Styling the meter element
  • Using system colors to make a Notepad thing
  • Is a table caption easy to style?
  • The empty-cells property and some JavaScript for Internet Explorer
  • The table-layout property, using fixed and width
  • Opera forgets the default text-decoration: underline; for some anchors
  • Internet Explorer invented text-overflow to create nice effects…
  • Some of the text properties
  • Using text-shadow and an alternative method
  • A simple three column layout
  • The three pixel gap bug in Internet Explorer, and some fixes
  • Transparent borders that work in Internet Explorer
  • .highlight:after { content: url('javascript:window.focus();'); } for Opera Chat?
  • text-decoration and color together
  • vertical-align & line-height to vertically center a piece of text
  • The box model according to the W3C specification
  • Too much space inside buttons in Explorer?
  • A thing about word-wrap: break-word;
  • A simple z-index example
  • A not so simple z-index example, which provides problems with the stacking context

• Extensible Stylesheet Language Transformations (XSLT)

  • My first test, using client side XSLT

• ECMAScript

  • The arguments object
  • ECMAScript for XML (E4X)
    • Mozilla's example
  • A list with punctuators
  • for (word in reserved_words) return word
  • Single escape characters

• Regular Expressions

  • A cheat sheet for regular expressions

• JavaScript & JScript, DOM, AJAX & DHTML

  • The difference between element.getAttribute('attr') and element.attr
  • BlurHash using the CSS Paint API/Paint Worklets
  • A board, written in a matrix
  • Bytes, Kilobytes, Megabytes & Gigabytes, and converting them
  • Object detection, the difference between if (object) and if (object())
  • Checking the state of a checkbox in onchange or onclick?
  • Some comment preview mechanism using .innerHTML
  • What exactly does defer do?
  • Using document.compatMode to get the page rendering mode
  • Creating slugs on the fly
  • Keep e-mail address harvesters away
  • Silly example of how to focus an anchor
  • Automatically generating a list with footnotes
  • The IE-only onselectionchange event and the clipboardData object
  • Making the PHP include() construct/function work in JavaScript
  • Attaching a popup to an input and use window.opener to fill the control
  • How to let your stylesheet know JavaScript is enabled?
  • Make your own tree of objects, properties and methods
  • JSON in JavaScript, d'oh!
  • When will JSONRequest() become available?
  • iOS doesn't like you clicking on labels
  • Let a different div scroll simultaneously
  • A treeview menu using an unordered list and some unobtrusive scripting
  • The maximum number of cookies a server may use
  • An easy way to let JS know about media queries, without using matchMedia
  • <script type="text/foobarscript">JavaScript and its MIME type(s)</script>
  • number_format() in JavaScript
  • A simple JavaScript 'editor' using eval()
  • The onload event isn't triggered if the page loading is canceled
  • Sometimes Opera doesn't fire the onmouseover event
  • Zoom in or out on the entire page in IE6
  • Background images with PNG transparency in Internet Explorer
  • When previousSibling meets whitespace
  • A scroller, with a bug in Opera 7.54
  • Holy crap, why did nobody tell me about scrollIntoView()?!
  • A select box with some fluffy options
  • Do something with the onchange event of a select box
  • Very simple event bubbling
  • Let your internal links scroll smoothly
  • Something you should know about the style object
  • Submitting a form in an accessible way
  • Character alignment with align="char"
  • Highlighting alternate table rows without any extra markup
  • Simple tabs
  • Using the defaultValue property of an input with onfocus and onblur
  • text-shadow in CSS doesn't work too well, this doesn't either :)
  • A very simple text editor
  • Form validation, with some classes
  • Using XMLHttpRequest to check links on page load
  • A menu which uses XMLHttpRequest to fetch next and previous items (known to some as AJAX)

• HTML 5 (Web Applications 1.0, Web Forms 2.0)

  • Block level anchors
  • A crappy <canvas> test
  • Combo boxes in HTML, using <datalist>
  • HTML 5 DOCTYPE (<!DOCTYPE HTML>) and the rendering mode it triggers
  • Changing the type attribute for input elements
  • Nesting lists in paragraphs isn't really possible
  • Testing out the new block level elements
  • A first test with WHATWG's Web Forms 2.0