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.
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 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.
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!
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.
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
:where() which would allow us to match selectors conditionally based on some computed style
values for the element.
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.
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.
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.
I've got more stuff over on GitHub, why not have a browse through my repositories. Here's what I've been up to recently...
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.
- 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!
- multiSearch - A search mashup using Yahoo's search APIs.