Posts tagged: “writing”
Understanding Filters, Shortcodes and Data in 11ty
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.
CSS Architecture for Modern JavaScript Applications
My attempt to modernise some learnings from CSS architecture and apply them in the context of modern JavaScript applications.
Git from Beginner to Advanced
Getting comfortable with Git took me a long time. I thought I'd write a quick guide that assumes no prior knowledge, along with some of my favourite tips and tricks.
Getting the heck out of React
React has limitations when it comes to working with persistent stateful media objects. In this article I discuss techniques for working with media elements like canvas, video and third-party libraries in React.
What is this in JavaScript?
My attempt at a very basic explanation of the 'this' keyword in JavaScript.
The Difference Between currentColor & Custom Properties
There are some interesting differences between how currentColor and custom properties work. Both are examples of dynamic properties in CSS but how they are resolved differs in some very important ways. I recently came across an example of this that had me scratching my head for a while.
A Strategy Guide To CSS Custom Properties
Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. To get the most out of them, we might need a strategy for how to write and structure CSS with custom properties.
Using CSS Variables Correctly
Custom Properties have the potential to change how we write and think about CSS.
Non-linear Interpolation in CSS
A solution for transitioning lengths values in CSS through more than one 'bending point'.
The invisible parts of CSS
Explains the box model, cascade, formatting contexts, positioning, stacking and a lot more about how CSS works. A right of passage, I had to write my version.
Interpolation in CSS without animation
Ideas for a more general purpose interpolation function in CSS.
On maths and coding
A more personal article on being a developer and having an average mathematical ability.
SVG has more potential
A bunch of interesting techniques for using SVG to make unique responsive components.
Offline content with service workers
My experience implementing service workers to cache and serve content offline.
Image manipulation techniques with 2d canvas
A short tutorial on different techniques for manipulating pixel data with the canvas element.
Style Guides: 50 shades of corporate blue
Sharing some experiences trying to get a design system\living style guide working in a corporate environment.
A love letter to jQuery
A very tongue-in-cheek article about why jQuery is good for the web.
Pattern: Robust icons
A little pattern I wanted to share for creating bulletproof icons.
Fluid typography examples
Some practical examples of using calc and viewport units for fluid typography and more.
How do I CSS?
Details of my CSS workflow and frontend development processes in 2015.
HTML5 periodic table DMCA takedown request
A personal story about dealing with a copy-right troll over a trivial GitHub project.
Precise control over responsive typography
Creating fluid responsive typography with calc and viewport units.
Zero element loading animations
A technique for loading animations that can be applied to existing elements.
Determine the quality of light in live video streams
Some early experiments with WebRTC.
Resizing and Cropping Images with Canvas
A tutorial for Codrops on using HTML5 canvas to crop and resize images on the client side.
Understanding flexbox
A detailed exploration of how the space and size of items are determined when using flexbox.
Merging JSON data sets
Learning about merging deep JSON objects. (Really old)
Accessible contrast with Less and Sass
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 is the best way?
Detecting transition start
Experiements detecting transition start "events" in CSS.
Thoughts on design patters in CSS
Me thinking about component-based architecture for CSS in 2014, before I knew what to call it.