Skip to main content

Articles @ webSemantics

Code base nears completion, porting across older resources. Comin' on strong.

First articles will cover site build. From the ground up, no templates, boilerplates, or dinner plates. No grids, no libraries, no Wordpress, just keyboard press—old school.

While there are excellent development methodologies which incredibly boost workflow, they were all purposefully ignored. They will follow…

Mike Foskett —

Removing SVG keyboard focus in IE

17th August 2016   (update: 17-08-2016)

In Internet Explorer SVGs receive keyboard focus while tabbing through HTML content. This proves somewhat disorientating to both screen-reader and keyboard-only users.

Embedding SVG cross-browser techniques

22nd June 2016   (update: 17-08-2016)

Implementing cross-browser SVG as either CSS background-images or defined symbols in HTML. Production ready implementation techniques.

Accessible modal dialog popup iframe

5th April 2016   (update: 25-09-2016)

WCAG 2 level AA with ARIA support modal dialog used for a popup iframe. Google map, web page, YouTube video, and an image used as an examples.

Accessible tab navigation v5

18th March 2016   (update: 11-07-2016)

WCAG ARIA content navigation tabs which doesn't rely on libraries or frameworks.

Grid-surge header

12th March 2016   (update: 10-07-2016)

Grid-surge canvas effect applied to the header.

Late-loaded, blurred image replacement

6th March 2016   (update: 10-07-2016)

Improve perceived page load times by displaying a blurry low resolution image(s) immediately, without any extra HTTP requests. Once page has fully loaded, fetch the high resolution image(s), then cross-fade onto the display.

Parallax header

18th February 2016   (update: 10-07-2016)

Demonstrating a parallax effect applied to the background image.

Stylophone – Web Audio API

8th February 2016   (update: 10-07-2016)

Stylophone emulation. Sounds created in-browser via the new Web Audio API.

Raindrops keep falling

2nd February 2016   (update: 06-02-2016)

Well I don't want to rain on anyone's parade but thought it wouldn't matter if a few raindrops fell against the window.

Displaying code in a web page

25th January 2016   (update: 10-07-2016)

Easily add example code to your web page. Beautifully handles JavaScript, CSS, HTML, and PHP. Minimum fuss—Maximum effect.

Animated SVG hamburger menu

11th January 2016   (update: 10-07-2016)

Breakdown and build of a typical hamburger menu complete with animations using CSS.

Expanding HTML code blocks

9th January 2016   (update: 10-07-2016)

Adds an expand button to the code examples found in <pre><code> blocks, allowing more content to display horizontally.
Deprecated in favour of CSS resize:horizontal property

Web Audio API example

29th November 2015   (update: 10-07-2016)

AJAX loaded sounds which play via the new Web Audio API.
Far more efficient than the HTML5 audio element.

Sticky header navigation

21st November 2015   (update: 10-07-2016)

A sticky(ish) navigation header which is animated off-screen while scrolling down, reappearing on scrolling up, maximising the vertical display space on smaller screens.

Snowflakes in pure CSS

15th November 2015   (update: 10-07-2016)

The drifting snow fall animation as used on the Tesco homepage for Christmas 2015.

Shiny buttons

28th May 2015   (update: 10-07-2016)

Affordance is when the appearance of an object describes it's purpose. Buttons are a great example, they should look like they're press-able.

Idle-load – Lazy loading content

17th May 2015   (update: 10-07-2016)

Need to improve page load performance?
Make the Kessel run in less than 12 parsecs?
This new lightweight method may be the one you're looking for.

Font size conversion

7th April 2010   (update: 10-07-2016)

A chart of font sizes stated in points, pixels, ems, percent and keywords.

Redirect scripts

19th May 2009   (update: 10-07-2016)

Web page 301 redirect scripts in HTML, JavaScript, PHP, ASP and

HTML symbols & character entities

10th June 2002   (update: 22-06-2016)

Those symbols never remembered, ⅝ for example. Stated in both numeric and symbolic references, with click to copy feature.