​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.

(more…)

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 */
}

Reduced demo.

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
  • #000
  • rgb(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.

(more…)

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.

(more…)

#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 →

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed