The following is a guest post by Aleks Hudochenkov. Aleks does a great job here of showcasing what PostCSS is good at and the role it has grown into in the front end stack. That is: doing little useful jobs within CSS. You're about to see a variety of PostCSS plugins at work that are all related to working with images. By the end, I bet you'll be able to imagine how PostCSS can be useful for other niches within working with CSS.
- Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
- Can be editable.
Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance).
I attempt to make the case that creating content in Markdown is a good plan for you and your team, now and especially in the future.
Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.
I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out we can.
Runner is a plugin for the design tool Sketch. It lets you use your keyboard to run commands and order about other plugins. For example, by typing “vertical” into Runner then you can vertically align text much faster than moving your mouse to the button and clicking it.
I’ve seen some folks describe Runner as if it’s Sketch’s version of Spotlight or Alfred, as effectively their goals are one and the same: to speed up and organize your workflow. In the video below I briefly go over how Runner might speed up the design process:
Once you've downloaded it, you can start Runner inside Sketch by hitting
' and then tab to move through each section, like Export or Run.
If you’re interested in finding more plugins to tie into Runner, there’s an official list of all the Sketch plugins available.
Lingo is an app from the Noun Project team that groups images, icons, SVGs, and illustrations into a single place. It lets you browse them quickly, and then you can drop them into another application without any hassle.
I work a ton with SVGs and icons, so I'm always trying to find ways to reduce friction between different software and editing processes. One might think that the answer to this couldn't be more software, but I'm really enjoying Lingo. In fact, there was a funny quote from someone a few years ago on Twitter, (my memory is too spotty to remember who said it) "Fun Fact! The average designer spends 10% of their life looking for the right icon."
Speaking of tricky things to get right: tooltips!
Tooltips need to be particularly self-aware, so they don't stick out someplace where they can't be read. Then continue to be smart as the page state changes, like is resized or scrolled. Popper.js looks like it handles all this stuff nicely.
The project page doesn't say this, but creator Federico Zivolo showed me how it's also friendly with React, because you can render the tooltip element itself within the component and it just stays where it is. This is unlike most tooltip implementations that move the tooltip element around the DOM (probably making it a direct descendant of the
<body>, to make positioning easier), which could easily be problematic in a React environment.
Modaal is a WCAG 2.0 Level AA accessible modal window plugin.
Modals seem so hard to get right from an accessibility perspective, I'm not proud to say I've never tried. Something like moving focus to the modal when it opens and moving focus back to where it was when the modal closes seems like a particularly tricky thing to get right.
In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some "real world" style functionality: a comment form.
This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master "App" that deals with the
state (our big "state" thing is the comments themselves) …