Web Development Archive
I’ve just updated my online web development CV and made use of a tag-based system to display the various roles I took on for each of the projects. I was after a very specific look, whereby tags are both shaded (filled) and outlined. Screenshot of my online web development CV, demonstrating the use of CSS tags. A quick scan online didn’t produce any immediate solutions, so I decided to roll my own. The usual method of drawing complex shapes using CSS relies on pseudo elements. There’s a great post on CSS Tricks that details the many shapes that can be …
Before I ventured on this mini project, I had no previous experience with animating SVG graphics. This article documents my journey and details my processes (and mistakes made along the way). The final product I created consists of a slideshow whereby four devices – desktop, laptop, tablet, and smartphone (basically iMac, MacBook Pro, iPad, and iPhone-esque form factors) – morph into one another, in order to showcase how the responsive websites I’ve created react to the various screen sizes. The finished article, showing each of the four morphing devices. I love Mary Lou’s work over at tympanus.net and was really …
I’ve been using Flexbox on production sites now for some time, and on the whole it’s made life a lot easier when building product grids, or anything that requires neat, orderly boxes of content sitting in rows and columns. In a typical situation where blocks of content consist of a title, image, price, and a call to action (such as an ‘add to cart’ button), the markup would look something like this: The HTML <div class=”products”> <div class=”product-outer”> <div class=”product-inner”> <a href=”/path/to/product/” class=”featured-image”> <div class=”product-thumbnail”> <img src=”/images/image.jpg” alt=”image description”> </div> </a> <h3 class=”product-title”> <a href=”/path/to/product/”>This Is A Product Title</a> </h3> …
I often use my website as a playground for new technology, so thought I’d try making use of CSS Shapes, after getting suitably inspired by this example. First off, as of August 2014, support for CSS Shapes Module Level 1 is magnificently poor (with only dev channel versions of both Chrome (unprefixed) and Safari (prefixed with -webkit-) harbouring working versions), so I had to implement it in a way that would only progressively enhance the current layout, as opposed to making changes that would destroy the vast majority of users’ experiences. The web has always played second fiddle to print …
When composing this post, I decided that each of the accompanying icons would work well against coloured discs, gradually rotating in hue as they progressed down the page. The result was something a bit like this: I opted for 12 different colours, so each icon’s hue would change by 30 (hue being measured on a scale of 0-360 degrees). After some thought, I decided to create the discs programmatically using CSS. This has the following benefits over including them as part of the icon image: If I ever decide to add, remove, or edit page content, I wouldn’t need to …
I love Flexbox. It really is the perfect solution to all those pesky layout problems of yesteryear. It’s been a welcome member of my web development arsenal for some time now (with appropriate fall-backs in place for those less well-endowed browsers of course), but I’m still frequently amazed by both the power and simplicity at which it goes about its business. Flexbox (or ‘Flexible Box Layout Module’ if you’re a fan of syllables) is a method for laying out content on a web page, whereby items can be grouped or distributed within a container much more easily than previous layout …