Macaw looks very impressive. As the narrator mentions in this twenty minute video demo, you can get into dangerous territory when a web design tool tries to also be a full WYSIWYG code generator at the same time (maybe I’m just picky, but as cool as Sketch is as a program, it’s HTML/CSS export options are not as great as I’d like.) Macaw seems to take a really balanced approach: fundamentally a design tool, but with most of its settings and tools rooted in HTML/CSS fundamentals.
Perhaps most importantly, while the app is native, it apparently renders all of its content in actual HTML. No more gradients, font styles and other “Photoshop only” actions that look very different once they actually get rendered in browser code.
I have not gotten the chance to use Phantom CSS out yet, but it’s promise and buzz among fellow web developers is promising when it comes to visual regression testing. To put it in the words of its creator, developer James Cryer:
PhantomCSS takes screenshots captured by PhantomJS and compares them to baseline images using Resemble.js to test for rgb pixel differences with HTML5 canvas. PhantomCSS then generates image diffs to help you find the cause so you don’t need to manually compare the new and old images.
Think about it: an open source delivery system to generate images for differences in a web site. That’s extremely powerful stuff as it can catch errors eyeballing code often misses, especially on a large web site base where visual spot checks on every page are out of question.
Some great ideas from CSS Wizardry on organizing and writing CSS. Pay close attention to the recommendations on a table of contents and section titles; while I slightly differ from the section and content style listed here, both devices are a huge help once your CSS grows in size.
I admittedly was a bit skeptical when I first heard about The Dissolve. Between SlashFilm and The A.V. Club, did we really need another big film web site? And it’s from the team behind Pitchfork?
But then I dove in after its debut late last week and I’m very glad I did. The content itself is excellent, written by a lot of writers I have respect for: Keith Phipps, Scott Tobias, Matt Singer and many more. There’s something also of a happy medium ground The Dissolve is getting at in terms of its content posting frequency. There’s less constant updates a la A.V. or SlashFilm, but they make those posts count.
There’s something to be said for the site’s visual design as well. In contrast to the all white ultra modern and minimalist trend, The Dissolve is a bit mellow and old school that’s heavy on serifs and warm, off white colors. I’ve already added their features and reviews RSS feeds to my feed reader.
Google product designer Jean-Marc Denis makes a pretty compelling argument why you should seriously think about integrating Sketch into your production workflow. It’s one of the best “why Sketch over Photoshop” posts I’ve read.
While my time is still heavily in development, when I do drop into design, I find that I’m heading into Sketch more and more often. Photoshop still gets the majority of my bulk export work however.
Drag and drop SVGs on this nifty little web tool by the Filament Group to auto generate fallback pngs and a quick demo web page. In short, if you’ve gun-shy about using SVGs on your web design given legacy browser compatibility, this should make your production work much easier and more reliable cross browser.
I’ve written enough responsive navigations in the last few months to be skeptical when I see a simple Javascript-based plugin solution. But probing further, the developer is Viljami Salminen, and the guy’s talented. It’s also library agnostic – no awkward jQuery dependency required. Worth taking a look at for your next responsive project.
Web developer and speaker Kenneth Auchenberg makes a strong argument about how our web tool integration has a long way to go from where we are today. If you’re pressed for time, just skip right to his first flow chart, it’s sobering to read. Makes you step back and realize at times how ridiculous the disconnect is between our browser and code editor of choice.
Really smart intro by web developer Dudley Storey on the tech basics on how to properly integrate HTML5 full screen functionality. It’s something I’ve toyed with once or twice on some little side projects but never had the chance to go in further depth.
Seeing Hoefler and Frere-Jones jump into the web font game with their own custom delivery solution is super exciting. Can’t wait to see web sites jump on board this; I’d bet money the quality will be uniformly excellent.