PixelSnap

Forever I’ve used the macOS Command-Shift-4 screenshot utility to measure things. Pressing it gets you a little crosshairs cursor which you can click-and-drag to take a screenshot but, crucially, has little numbers that tell you the width/height of the selection in pixels. It’s crude, but ever so useful.

See those teeny-tiny numbers in the bottom-right? So useful, even if they are tough to read.

PixelSnap is one of those apps that, once you see it, you’re like OMG that’s the best idea ever. It’s the same kind of interaction (key command, then mouse around), but it’s drawing lines between obvious measurement points in any window at all. Plus it has this drag around and area and snap to edges thing that’s just as brilliant. Instant purchase for me.

The Product Hunt newsletter said:

Two teenage makers launched PixelSnap, a powerful design tool to measure every pixel on your screen. Hit #1 on Product Hunt, and over $5,000 in sales within 24 hours of their launch. 📝✨

Hey, even cooler!

Direct Link to Article — Permalink


PixelSnap is a post from CSS-Tricks

Wufoo Forms Integrate With Everything

(This is a sponsored post.)

Wufoo helps you build forms you can put on any website. There’s a million reasons you might need to do that, from the humble contact form, to a sales lead generation form, to a sales or registration form.

That’s powerful and useful all by itself. But Wufoo is even more powerful when you consider that it integrates with over 1,000 other web services.

  • Wufoo integrates with over a dozen CRM solutions, including Salesforce, Nutshell, Highrise, Nimble, and more.
  • Wufoo integrates with the most popular email marketing services like MailChimp, Campaign Monitor, Sendloop, and more.
  • Wufoo integrates with payment processors like Stripe, PayPal, Chargify, and more.
  • You can put Wufoo forms on any website, including WordPress sites, Wix sites, Squarespace sites.

Direct Link to Article — Permalink


Wufoo Forms Integrate With Everything is a post from CSS-Tricks

Web-Powered Augmented Reality: a Hands-On Tutorial

Uri Shaked has written about his journey in AR on the web from the very early days of Google’s Project Tango to the recent A-Frame experiments from Mozilla. Front-end devs might be interested in A-Frame because of how you work with it – it’s a declarative language like HTML! I particularly like this section where Uri describes how it felt to first play around with AR:

The ability to place virtual objects in the real space, and have them stick in place even when you move around, seemed to me like we were diving down the uncanny valley, where the boundaries between the physical world and the game were beginning to blur. This was the first time I experienced AR without the need for markers or special props — it just worked out of the box, everywhere.

Direct Link to Article — Permalink


Web-Powered Augmented Reality: a Hands-On Tutorial is a post from CSS-Tricks

Variable Fonts with Jason Pamental

We’ve already hit you with a one-two punch of variable fonts today. Robin shared Richard Rutter’s post on real-world usage of them. Ollie Williams introduced us to the in’s-and-out’s of using them on the web.

I figured we’d make it a trifecta and link up our discussion about variable fonts with Jason Pamental. Dave and I talk with Jason for an entire hour digging into the real story, possibilities, and future of all this variable fonts business. Don’t miss his or Mandy Michael’s demo Collections either.

Direct Link to Article — Permalink


Variable Fonts with Jason Pamental is a post from CSS-Tricks

How to use variable fonts in the real world

Yesterday Richard Rutter posted a great piece that explores how the team at Clearleft built the new Ampersand conference website using variable fonts (that’s the technology that allows us to bundle multiple widths and weights into a single font file). Here’s the really exciting part though:

Two months ago browser support for variable fonts was only 7%, but as of this morning, support was at over 60%. This means font variations is a usable technology right now.

And the nifty thing is that there’s a relatively large number of variable fonts to experiment with, not only in browsers but also in desktop design apps, too:

Variable font capable software is already more pervasive than you might think. For example, the latest versions of Photoshop and Illustrator support them, and if you’re using macOS 10.13+ or iOS 11+ the system font San Francisco uses font variations extensively. That said, the availability of variable fonts for use is extremely limited. At the time of writing there are not really any commercial variable webfonts available, but there is a growing number of free and experimental variable webfonts, as showcased in the Axis Praxis playground.

Adobe also made a bunch of variable fonts available a while back, if you’re looking for more typefaces.

Direct Link to Article — Permalink


How to use variable fonts in the real world is a post from CSS-Tricks

Bend any Website’s CSS to Your Will With Stylish or Stylebot

As a self-professed CSS nerd, I take it upon myself to inject my own CSS onto websites when I need to to fix bugs or just fiddle them up to my liking.

This is a post that details how I do that using the Stylish and Stylebot browser extensions.

Direct Link to Article — Permalink


Bend any Website’s CSS to Your Will With Stylish or Stylebot is a post from CSS-Tricks

New Features Coming Soon in Safari

Here’s a great thread by Ricky Mondello that outlines all of the nifty new features in the latest Safari across macOS and iOS. Some of my favorites include the ability to replace gifs with mp4s, the Payment Request API and support for the Web App Manifest.

Direct Link to Article — Permalink


New Features Coming Soon in Safari is a post from CSS-Tricks

Secure Contexts Everywhere

Anne van Kesteren for Mozilla says:

Effective immediately, all new features that are web-exposed are to be restricted to secure contexts. Web-exposed means that the feature is observable from a web page or server, whether through JavaScript, CSS, HTTP, media formats, etc. A feature can be anything from an extension of an existing IDL-defined object, a new CSS property, a new HTTP response header, to bigger features such as WebVR. In contrast, a new CSS color keyword would likely not be restricted to secure contexts.

In other words, if your site isn’t HTTPS, you won’t get new web tech features. Holy jeepers. The reasoning is the web should be using HTTPS, so this is our way of beating you with a stick if you try to use fancy features without going HTTPS first.

It’ll be fascinating to watch the first major feature drop and if they stick to their word here. The web dev forums of the internet will overflow with WHY DOESN’T grid-gap WORK WITH MY FLEXBOX? (or some likely coming-soon feature) questions and the answer will be: talk to your server team. What if they drop container queries behind this? That would be a hilarious devastating tornado of developer fury.

Direct Link to Article — Permalink


Secure Contexts Everywhere is a post from CSS-Tricks

The Ultimate Guide to Headless CMS

(This is a sponsored post.)

The World Has Changed—So Must the CMS

Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices—the age of headless technology is coming.

Headless CMS is the next generation in content management for brands that want to stay ahead of the curve by engaging customers through the growing number of channels.

Download The Ultimate Guide to Headless CMS ebook for a deep look into what headless CMS is, and why it should be at the top of your list when choosing a new CMS.

Download the ebook now!

Direct Link to Article — Permalink


The Ultimate Guide to Headless CMS is a post from CSS-Tricks

Meet the New Dialog Element

Keith Grant discusses how HTML 5.2 has introduced a peculiar new element: <dialog>. This is an absolutely positioned and horizontally centered modal that appears on top of other content on a page. Keith looks at how to style this new element, the basic opening/closing functionality in JavaScript and, of course, the polyfills that we’ll need to get cross-browser support right.

Also, I had never heard of the ::backdrop pseudo element before. Thankfully the MDN documentation for this pseudo element digs into it a little bit more.

Direct Link to Article — Permalink


Meet the New Dialog Element is a post from CSS-Tricks