Building Concentric Circles with Nice Color Palettes For Fun and Science
By replicating a little design I found, I learned a lot of different things: Jade loops, exploded attributes, nested SVG circles, color libraries and APIs, and more.
A Quick Overview of `object-fit` and `object-position`
object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size.
Sponsored: What salary could you be earning?
If you want to know what you're worth, Hired has the answer: with data from thousands of real interview requests and job offers, we've put together a salary calculator that can tell you what you could be making in your job based on the skills you have.
If you want to find out how much more you could actually earn, join Hired. Just set up your profile, and companies will give you job offers with salary and equity upfront before you interview. Get multiple job offers from top companies with just 1 application. Try Hired today!
Making a Simple Image Resizing/Optimizing Service in Automator
As I was using Photoshop to resize my eleven billionth image, it occurred to me I should probably simplify this process. AppleScript, perhaps? Photoshop scripts? Some already existing little app? A little pontification on Twitter resulted in a number of suggestions to try OS X's Automator. Turns out it's a pretty easy thing to do, at least in a limited way.
Using calc() to fake a media query
A bonafide CSS trick by Rémi Parmentier. It's used in the context of emails here, but it's a clever trick in it's own right.
This is the trick:
/* When parent is 500px wide... */
.block {
min-width: 50%; /* 250px WINNER */
max-width: 100%; /* 500px */
width: calc(480px - 100%) * 480); /* -9600px */
}
/* When parent is 400px wide... */
.block {
min-width: 50%; /* 200px */
max-width: 100%; /* 400px WINNER */
width: calc(480px - 100%) * 480); /* 38400px */
}I Heart CSS
I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:
#000000#000rgb(0, 0, 0)hsla(360, 100%, 0%, 1)black
In the spirit of Valentine's Day, I thought it would be fun to push this concept a little further with the many ways we can make hearts in HTML & CSS.
An Interview with Andy Fitzsimon about logomono
I got an email from Andy Fitzsimon the other day about some projects he's working on. One of which was logomono, something I thought looked pretty interesting and shared the other day. I thought, rather than trying to figure things out and re-explain them myself, I'd just ask Andy himself to answer my questions. Interview style.
Introducing Vector Networks
The team working on the upcoming design tool Figma demonstrate how vector path making will work. Think of the Pen Tool in Adobe software, rethought. This new approach certainly looks more intuitive, especially with how easily curves can be manipulated.
Why npm Scripts?
The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also exactly how to accomplish many of the most important tasks in a front end development build process.
#144: Building a JavaScript/Canvas Game with Kyle Simpson
Kyle Simpson, partly in an effort to rejuvenate his enthusiasm for working with JavaScript at all, started building a game. He's not really a "game developer" (or at least, wasn't at the time!) but tackled this anyway for the fun and the challenge.
In this video I pair with him while he walks me through his game Cloud Sweeper. It was all very interesting to me, as someone with far less experience in this kind of thing. My …
Watch Video →