Home
- Site-map – you're there already
- Accessibility
- Privacy policy
- Terms and conditions
- Copyright
Articles
- Safari: fixing
text-overflow:ellipsis - Responsive fonts - auto-scaling the root font-size — (demo)
- Removing SVG keyboard focus in IE
- Embedding SVG cross-browser techniques
- Peek-a-boo v7.0 – animated show & hide — (demo)
- Accessible modal dialog popup iframe — (demo)
- Accessible tab navigation v5
- Grid-surge header — (demo)
- Late-loaded, blurred image replacement — (demo)
- Detect browser supports transform3d
- Parallax header — (demo)
- Stylophone – Web Audio API — (demo)
- Raindrops keep falling
- Displaying code in a web page — (demo)
- Animated SVG hamburger menu
- Expanding HTML code blocks
- Web Audio API example — (demo)
- Sticky header navigation — (demo)
- Snowflakes animation in pure CSS — (demo)
- Peek-a-boo – animated show & hide — (demo)
- Shiny buttons
- Idle-load – Lazy loading content — (demo)
- Redirect scripts
- HTML symbols & character codes
Tools
- Escaping HTML
- Circle of Fifths - interactive chord wheel
- Fluid-responsive font-size calculator
- Fluid-responsive property calculator
- Lazy-load blurred background-image generator
- SVG to CSS background-image converter
- WCAG colour contrast checker
- Font size conversion: pixel-point-em-rem-percent
- Image to data-URI converter
- UK postcode to longitude latitude converter
Pens
- Prefetch internal link on mouse hover for faster page loads
- Generate a random unique id
- Late-load your Codepen embed
- Space toggle hack - CSS logical conditionals
- Give users advanced warning when opening a new window
- Bookmarklet to highlight landmarks and headings
- Generate colours to WCAG AA (small text)
- Bookmarklet to help meet WCAG Text Spacing
- CDN hosted video
- Late-load Youtube videos on demand
- Code highlighting (light & dark mode) with Prism.js
- Light & dark mode switching
- Prevent numeric input invalidity
- Date dependant, page background falling-image animations
- Snowflakes: JS generated, CSS animated
- CSS only snowflakes
- Andy Warhol looks a scream…
- Launch any object into full-screen mode
- Circle of Fifths: Interactive SVG chord wheel
- Accessible "Skip to content" for desktop and mobile
- Hide unsupported mobile download button
- CSS Grid: Match individual element heights along a grid row
- Audio player with tempo adjustment
- CSS Grid wallboard
- Vignette & brightness hover effect
- HTML 5.2 dialog element
- The spinning hexagonal click-spot
- Christmas cracker animation
- Oooh – it’s Halloween!
- Gooey-drips for Halloween @ 60fps
- Pumpkin flickering eyes animation @ 60fps
- Test browser supports ES6
- Performant lazy-load technique for 2017
- Make America grate again!
- Accordian toggling methods
- YouTube full-width video loop as a header background
- Scaling font-size in proportion to an image
- Dirty ’orrible ’acky Safari resize fix
- Centering vertically and horizontally in CSS
- White Noise Generator
- Web Audio API - Fetch, store and play audio samples
- Performant sticky header (hides on scroll)
- Modal popup - ink transition effect
- Liquid ripple click effect
- Crop copy then restore via sliding drop-down
- Responsively crop copy then restore onclick
- Matching element heights
- Late-loaded animated gif with pause button
- Embedding video via a button
- Wobbly background on link hover
- FAQ using ARIA attributes
- CSS filters experiment
- ARIA hamburger menu
- Social SVG icons pt3 - Gooey
- Social SVG icons pt2
- Social SVG icons pt1
- SVG to CSS background-image converter
- Sinclair ZX Spectrum 404 page
- Accessible tab navigation using ARIA
- Popular Codepens
- Newest Codepens
Gits
- Crop copy then restore via sliding drop-down
- Responsively crop copy then restore onclick
- Matching element heights
- Late-loaded animated gif with pause button
- Embedding video via a button
- FAQ using ARIA attributes
- Pop-up modal window using ARIA
- Accessible tab navigation using ARIA
Portfolio
- Mike Foskett - Resumé / CV
- RNIB accessibility award
- Simplified WCAG 2.1 guidelines
- October 2022 - 36th Swanage Blues Festival
- March 2023 Interactive Schedule - Swanage Blues Festival
- Bat the Dog - page performance
- Food Love Stories 2018
- Tesco competitions 2018
- Halloween 2017
- Food Love Stories 2017
- Christmas 2016
- Toy Testers 2016
- Finest ‘pop-up’ wine bar 2016
- Easter 2016
- Mother’s Day 2016
- Star Wars Weekend 2015
Email / Contact – via an email client
Also via the Codepen, Linked In and Twitter links below.
LinkedIn – resumé & portfolio
Clear cache – local storage & folder lists - Hard refresh afterwards
Archived (pre-HTML5, pre-ARIA)
- Simple FAQ
- Modal Pop-ups using CSS3 — (demo)
- Styled & accessible tool-tips
- Embedding Flash video accessibly
- Useful JavaScript functions and snippets
- Gzip content
- Embedding Flash accessibly
- Accessible form help
- Accessible Ajax glossary
- Cross-fading disjointed image rollover — (demo)
- Accessible forms: Guidelines, examples & tricks
- JavaScript Syntax Highlighter Tool
- Accessible quiz
- Semantic image rollover menu
- Useful CSS Snippets
- Accessibility workshop
Social links and email client: