There are plenty of form building services, plugins, and frameworks in the wild that make the tedious task of form design and development much easier. We're going to look at some of those in this post.
The question I am asked most frequently: what animation tool do you recommend?
Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.
If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.
Say you're working on a website that uses an icon system. Lots of people who work on the site interact with the icon system. Designers create new icons, they tweak existing ones, they have ideas on what they want the icons to do. Developers building out the pages of the site use the system.
Say you're the front-end developer. You're implementing this system. You're the middle man. You're the creator and consumer of this system.
What do you ask of the designers?
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.
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) …