Filters, shortcodes and data are the ultimate source of power in 11ty, that’s why together, they are known as the Triforce among 11ty enthusiasts. Sometimes it’s a little confusing what the difference between shortcodes, data and filters really is, and frankly the boundaries can become a little blurred with 11ty. 11ty has the power of multiple template engines. This is a somewhat unique feature…
I went to a JavaScript meet-up in Sydney the other night and asked the question "How many people know what CSS Architecture is?". The room was full of different people with varying backgrounds and experience. I thought at minimum around a quarter might know what I was talking about. I was hoping more would. To my surprise, only a handful of people raised their hand. I then asked, "How many people…
Terminology If you're familiar with basic Git terminology you might want to skip ahead . It took me a long time to get comfortable with Git. Perhaps because some of the terminology is a little strange but also, I think there is an assumption that everyone around you just gets it. They probably don't. The best developers I know still struggle with Git sometimes. I thought I'd take the time to…
One of the biggest advantages of React is that we need to worry less about managing updates to the UI. The presentation is defined once within the render() method of a component and it will update automatically when data changes. The render() method returns elements via JSX that instruct React to update the DOM. This is the strength of React because it can manage updates to the DOM more…
Like many things, the this keyword in JavaScript is something I learned to work with and around, long before I gained any proper understanding of how it works. Recently I was asked to describe it and found despite my experience I still strugled to find simple terms. So I thought I'd write down my best attempt. There is a special keyword in JavaScript called this . It is a reference to an object.…
A friend was trying to set a theme on a container and have it apply a color to the border of a heading, and the body text. Something like this: She wanted to keep it simple with minimal CSS and ideally set the theme by applying just a single class in the HTML. Since we wanted to change the color of more than just paragraphs in the body text, it made sense to start by setting the color property on…
This article was first published on: Smashing Magazine . CSS Custom Properties (sometimes known as ‘CSS variables’) are now supported in all modern browsers, and people are starting to use them in production. This is great, but they’re different from variables in preprocessors, and I’ve already seen many examples of people using them without considering what advantages they offer. Custom…
CSS Variables (also known as Custom Properties) are now supported in all modern browsers and people are starting to use them in production. This is great but they're different from variables in preprocessors and I've already seen some examples of people using them without considering the advantage they offer. They have the potential to change how we write and think about CSS. I thought I'd do a…
A few years ago I wrote about fluid typography techniques that show how you can use calc() and viewport units to create transitions between different font-sizes as the viewport size changes. If you'd like to know more about how this technique works you should read my article Precise control over responsive typography . Recently these ideas have circulated and gained more traction. I've seen more…
If you use CSS in your daily work, your primary goal is probably focused on making things 'look right'. How this is achieved is often far less important than the end result. This means we care less about how CSS works than the correct syntax and visual results. You may not have realised it, but the visual results of CSS are often an indirect consequence of manipulating hidden properties. Some CSS…
Interpolation is the estimation of a new value between two known values. This simple concept is vastly useful and it's commonly seen in animation on the web. With animation you declare the target properties and the end-state, and the browser will workout out the values in-between. Animation happens over time, but this is not the only dimension where interpolation can occur. In fact we interpolate…
When I was at school I had a strong interest in learning to code, but I was terrible at maths. My teachers and parents told me I would need strong mathematical abilities to be a good developer and although they didn't mean it to be, I found this discouraging. I really wasn't good with numbers and I couldn't see this changing. On the one hand I was right, it didn't change and I've only recently…
I think many of us are not using SVG to its full potential. I often see SVG used as an alternative image format or as a simple solution for icons, and whilst it's great for these things, it's also a lot more than that. SVG can solve problems that HTML and CSS alone can't. It has responsive properties that go beyond vector scaling, such as control over aspect ratio, embedded CSS and a unique…
Service workers can do a lot more than make web pages work offline but for most people, myself included, this will be their first experience with them. I recently implemented a simple offline page for my blog and was surprised with how easy it was. Full of confidence, I wanted to do more. I decided to start saving blog posts for offline reading and things escalated quickly. I soon learnt the…
Canvas is a really interesting piece of our web development toolkit, but it is often overlooked or misunderstood. It is, as the name suggests, very much a blank canvas; not providing much in the way of prebaked solutions. It is up to us as developers to ensure what we make with canvas, is accessible and performant. Canvas has no DOM, so when compared to working with HTML and CSS it may be less…
I recently completed my third attempt at implementing a style guide within my organisation. So far this is the first attempt that looks to be maintainable and has some traction outside the development team. I want to share with you how we got there and what I learnt from 2 failed attempts. My first attempt at a style guide used an automated tool called KSS , it automatically generated a style…
jQuery I love you. We've been together for 10 years and that's more than 50 years in JavaScript framework lifetimes. I might see you now less often than I did once, but I need you now no less than when we first met. I’ll never forget our first function together: $ ( document ) . ready ( function ( ) { alert ( ‘page loaded’ ) ; } ) ; Ha! I hope you will forgive me for that alert. That’s how we did…
I want to share a design pattern I've been using for icons. It's a robust technique that works in almost any situation. With this technique you can use icons inline or append & prepend them to existing content. It works with paragraphs, headings, navigation items, buttons …almost any element. Examples View more examples on CodePen. View Examples It's also easy to extend so I can usually drop it…
A few months ago I published a fluid type technique that doesn't require any JavaScript. Even though I consider it experimental the technique works well enough as a progressive enhancement and it generated a lot of interest, comments and suggestions. So I thought I'd put together a bunch of examples and address some comments. Fluid type with pixels This is a simplified version of my original…
When starting a new project with new developers one of the first things I want to do is get on the same page in terms of how we structure and manage CSS. There are so many methodologies and guidelines today that I wonder why you would bother writing your own detailed documentation. It's pretty simple choose a methodology, choose a set of guidelines and choose a build process. Methodologies BEM…
Today I received a DMCA takedown request against my personal website over a trivial GitHub project that involves a periodic table layout and information about HTML5 elements. Update: The legal threats and the DMCA takedown request were withdrawn. In addition to that the person involved has apologised and as such I've removed their name from this post. Normally I like to write about my projects and…
It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range. This text is limited to between 20px and 40px, over a viewport range of 600px to 800px. I don’t know why we don’t see viewport units being used more extensively for creating designs with…
With a "zero element" loading animation, a loading state can be applied to any element with just the addition of a class name. view examples on codepen view examples on codepen First of all, I'm not a huge fan of loading animations and neither are your users but sometimes, for various reasons an action is going to take time and we need to let people know we're working on it. So if we must use a…
I've been messing around with live video capture in the browser and have developed a nifty demo showing different methods for estimating the quality of light in realtime. To view the demo you are going to need a web cam and a modern Chrome, Firefox or Opera browser. If you have what it takes you can view my demo here . Please select allow when asked for permission to use the web cam. These tests…
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. I published an article on the Codrops website: Resizing and Cropping Images with Canvas This tutorial focuses on the interaction and design aspects of this task rather than just the technical details of using Canvas for image resampling. I also recommend…
Instead of covering all properties of Flexbox this article focuses on understanding how Flexbox calculates the width of items. The examples in this article are all in the context of a horizontal layout, but the same logic applies if you use a vertical layout. If you don't know what Flexbox is, it's a layout method best suited for distributing the available space inside a container, amongst child…
Merging deeply nested data in JSON is more difficult than it might seem. In the past I've used a brute force approach when dealing with small and well structured data. This approach proved completely inadequate for large volumes of real world data. Imagine we have a monthly darts competition and at the end of each month record the scores in a JSON file: data_jan = { name : "mike" , score : 47 } ;…
Contrast is a critical factor in web design, it's important to get right because it has a strong influence on the visual aesthetic, but it's especially important for readability and accessibility of text on the page. It's not a revolutionary idea to suggest that we use Less or Sass to help choose an appropriate text color for a particular background. There are plenty of examples of this, but what…
If you've worked with the css transition events in JavaScript you will know that it's a little involved due to the need for multiple browser prefixes. Luckily it's easy, if slightly verbose, to detect which transition event to use: // Dave Walsh says this is from Modernizr, but I can't find it // http://davidwalsh.name/css-animation-callback var whichTransitionEvent = function ( ) { var t ; var el…
Typically when we begin a new web project we start by creating a number of directories for CSS, JavaScript and other resources. This task hasn't changed much and it's a typical step for most developers. In many cases, this structure is a non-optional part of the workflow enforced by scaffolding tools like yeoman , an MVC framework or a boilerplate . Reasons behind it relate to the well-established…