When you distractedly agree to do something that you then realize you don’t actually know how to do, what do you do? Briefly panic, and get down to work. Patrick Clancey comes up with a little arsenal of tools to help him deal with mods, ranges, and ranges within mods, allowing him to break away from standard-implementation fixed length or fixed-layout lists.
Topic: Code
A Redesign with CSS Shapes
At least one set of crude hacks has left the building. With progressive and responsive enhancement—and using new CSS features—we can define how text should flow past a floated element. Eric Meyer explains what An Event Apart recently learned about floating shapes and feature queries.
Practical SVG
“Sizing svg is more complicated than sizing an img,” writes Chris Coyier in this excerpt from his new A Book Apart title Practical SVG. But, he continues, it’s complicated in a good way—it gives us more control and opens up some interesting new possibilities. Read on.
Adapting to Input
The rise of mobile devices made us confront the reality that we can’t control the size of the viewport, and we adapted. Now it’s time to face up to another reality: web input modes are proliferating and we have no control over which ones a user has and prefers. Seasoned developer Jason Grigsby has some advice on adapting to the way the web is now.
Making your JavaScript Pure
JavaScript code can easily grow into a thicket of dependencies that harbors wily and persistent bugs. Keeping the rows neat with functions that don’t reach outside their scope makes your codebase more reliable and easier to document. Jack Franklin suggests looking for opportunities to use pure functions—it could make maintaining the code a stroll in the park for your future self.
Commit to Contribute
Even a very basic contribution to an open-source codebase will turn into more than a one-line change when all is said and done. New developers can be put off by seemingly arbitrary roadblocks when they’ve just worked up the courage to contribute. Remy Sharp has a rundown of some tools that can smooth the way and make novices feel more welcome.
Meaningful CSS: Style Like You Mean It
Our markup too often remains a snarl of divs, our CSS a chaos of classes. Tim Baxter urges us to move beyond that. We can use real objects now instead of abstract representations. We can write CSS to support our markup instead of the other way around, and both can be more semantic and meaningful. The browser support is there; the standards are in place. Only habit is stopping us.
Prototypal Object-Oriented Programming using JavaScript
Disguised as a mild-mannered scripting language, JavaScript is more dynamic than you might think. Mehdi Maujood has seen beyond the class-based masquerade and found that JavaScript can be used more effectively once you understand its true nature as a prototype-based object-oriented programming language.
Web Animation Past, Present, and Future
Despite the rise and fall of Flash on the web, designing with animation has fiercely stirred us for decades. And yet nothing compares to its latest surge of evolution. Rachel Nabors lays out the array of tools and techniques that are fundamentally reframing our ideas about animation, and looks ahead to see where this path is taking us.
Finessing `feColorMatrix`
CSS filters lack the ability to do per-channel manipulation—a huge drawback. They may be convenient, but CSS filters are merely shortcuts derived from SVG; as such, they provide no control over RGBA channels. SVG (particularly the feColorMatrix map) gives us much more power and lets us take CSS filters to the next level. Una Kravets guides us through feColorMatrix and shows us how we can harness its power to create detailed filters.
