➝Web Development
Since the birth of the web the technologies that drive it have relentlessly progressed. Remember the days when JavaScript was all about mouse-over images and form validation? Here are some of my little projects, experiments and investigations in web development.
Caching single page applications
Single page applications offer some interesting caching problems.
With URLs representing state in the application rather than the content being served, and each separate URL serving the same application framework, how can we efficiently cache this framework?
Here I look at how this may be behaving in a typical app, and how we can improve the situation by using service workers.
How to remember the flexbox alignment properties
If you've ever used flexbox you may have struggled to remember the correct alignment properties.
I certainly have.
The confusion seems to stem from the terms "justify" and "align".
In the flexbox world these terms don't mean what you might think they mean.
Source maps for private code
Source maps provide a way of debugging generated code using the original sources.
If your code is not open source you still want to maintain the ability to use source maps for debugging, but without distributing them and your source code to the wider world.
Here I cover an approach for dealing with this problem, and suggest a solution that I would like to see implemented in browser dev tools.
Property descriptors and the prototype chain
Since ECMAScript 5 we've had the ability to define more fine grained behaviour on object properties such as non-writable properties
or those with getter/setter functions. How this interacts with inheritance is not immediately obvious, and so I've tried to make
things clear with a visual analogy. You just need some sheets of glass and a few stickers!
Preserving the aspect ratio of general HTML elements
HTML elements may be constrained to resize with the size of their containing element. Here we discuss how it is possible
to use just HTML and CSS to preserve the aspect ratio of the element during this resize. The solution is developed in
stages, from the relatively simple case of images to the much more involved case of arbitrary elements.
Beyond CSS Media Queries - A Conditional Pseudo Class
Using media queries to build a responsive design is great, but it leads to a coupling between your page components and your page.
What we really need is a kind of media query at the level of the elements rather than the window. To achieve this I envisage a
pseudo class :where() which would allow us to match selectors conditionally based on some computed style
values for the element.
HTML and CSS Barcodes
If you need to create barcodes using just HTML and CSS, then here's my method for doing so. The HTML is relatively simple
with just one element per digit and a few wrapping elements. CSS linear gradients are used for drawing the bars themselves.
Pure CSS lifted corners shadow effect
A popular effect these days is the so-called "lifted corners" effect, where a nice curved drop shadow makes it
look like the corners of the box are curled up from the surface below. Here I'll show you how you can achieve this
effect with just a few simple lines of css, and no images.
FeedGenerator
This is a little tool that builds an RSS feed for your website by crawling the pages looking for content which has been
marked for inclusion. Just add a few special attributes to the html you want to include in your feed, visit the page to
regenerate your feed, and that's it! It's how I create the feed for this site.
Javascript Paint
Data URIs allow you to fully define the data of an image (or other resource) entirely on the client machine, no need to
load something off the server. This immediately makes you think about editing images entirely on
the client by using JavaScript to edit the value of the Data URI. A fully client side JavaScript implementation
of paint is what follows. You might guess that processing bitmap data and converting to a Data URI is quite
processor intensive, and you'd be right. So, to avoid any jerky lines as you draw, I use my Web Worker
implementation so that if your browser supports it this intense processing happens on a separate thread to the interface, resulting
in a smooth user experience.
Fork me on GitHub
I've got more stuff over on GitHub, why not have a browse through my repositories.
Other sites...
As well as this one, I've also developed a couple of other sites you may be interested in...
Are you looking for free printable greeting cards and e-cards? Bouncing Bug Greeting Cards is the place to be.
It's the new, improved and renamed Cosmo's Cards, remember that? No, well not to worry, just go there anyway.
If you happen to live in the area of Lichfield, Staffs, UK and are looking for a barn dance, then.. wow, what an amazing coincidence! So why not check out my Dad's band the Reel Hot Ceilidh Peppers.
Archives
- removeChild in IE8 doesn't set parentNode to null - Here's a little gotcha if you're using IE8 and want to check if an element has been removed from it's parent node.
- Mouseover events from moving DOM elements - If you move the mouse over an element a mouseover event is fired on that element. But what happens when you leave the mouse still and have the element move underneath the mouse? Well, here the browsers don't agree. IE and Chrome take a very literal interpretation of the spec, Firefox does something I consider to be much more sensible. It's relativity for the DOM everyone!
- Web Workers - HTML 5 has some cool things in store for us. One of them is Web Workers which are designed to allow the browser to spawn a background task which runs JavaScript in parallel with the main page. You can use these already in Firefox, but to be able to make use of them in the real world they need to be handled across all browsers. To this end I've created a cross browser implementation of web workers. Obviously we can't recreate the multithreaded nature when they're not natively supported, but apart from that they're treated exactly same so you're application will naturally take advantage of Web Workers when they are supported.
- JSTeX - Use JavaScript to parse LaTeX inside an HTML document, resulting in nicely formatted equations.
- JavaScript Compressor - Obfuscate and minify your JavaScript using a tool written in JavaScript!
- multiSearch - A search mashup using Yahoo's search APIs.
