With Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec. It seems to be moving along nicely and is starting to show up in more and more browsers. (more…)
It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent specs to allow each spec to evolve independently, and hopefully faster.
This is what recently happened with the CSS Exclusions & Shapes Specification. Exclusions and Shapes are in fact two independent features. Different people could and should therefore be working on the two specs independently rather than having everyone make decisions about both features. So now we have CSS Exclusions and CSS Shapes. (more…)
In a previous post, I described how to use the Twitter Bootstrap Typeahead component. The Twitter Bootstrap team recently announced however that they would be switching to Twitter’s typeahead.js for the next major release. That sounds pretty great to me. typeahead.js is much more powerful than the current Twitter Bootstrap typehead component. Fortunately, since typeahead.js is already available, you don’t have to wait for Twitter Bootstrap v3 to start using it. Using typeahead.js with Twitter Bootstrap isn’t very well documented just yet. As well, there is no documentation to be found on how to use Underscore.js templates with typeahead.js, so I thought I’d help you along here. (more…)
Say you have a black & white image and want to display it in many different 2-color schemes.
You have a few options here. You could draw the image in a canvas and then use JavaScript to manipulate each pixel. Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors. That’s probably a pretty decent solution.
Or you could use the new duotone CSS custom filter I’ve built. You can find the source for the new filter on Github here. (more…)
My last post talked about how you can create a Photoshop-like soft blur effect with built-in filters. As I started reading more about how you would actually create that soft blur effect in Photoshop though, I realized that often you don’t want the soft blur to apply to people’s faces. You want to apply a layer mask which essentially punches through the soft blur around the central subject’s face to reveal the crisp underlying photo on the bottom layer. (more…)
CSS Filters can be added to any element on your Web page to create some very nice effects. You can even add multiple filters to a given element to create some interesting combined effects. (more…)
I recently gave a few talks at Adobe MAX 2013 in Los Angeles. Here are
the links to the recordings for those sessions… (more…)
Yesterday, Adobe, in cooperation with Google, announced that the Adobe CFF rasterizer has been contributed FreeType. If you’re a font geek, this is fantastic news. If not, you might be thinking to yourself, “CFF is what again? Why is this important?”.
In a nutshell, modern outline fonts use two formats, TrueType and CFF. A TrueType font has a lot of ‘hinting’ in the font file itself, indicating how best the font should be rendered. CFF font files contain less hinting. They are dependent more on the quality of the rasterizer.
However, because there is less hinting within the file, and due to its efficient file format, CFF fonts are on average about 20-50% smaller than TrueType fonts.
FreeType is an open source library used for font rendering on Android, iOS, Chrome OS, GNU/Linux, and other free Unix operating system derivatives such as FreeBSD and NetBSD. That makes for more than a billion devices running FreeType.
Let’s take a look at how the Adobe CFF rasterizer improves the rendering of CFF fonts. The left column below contains a CFF font rendered with the FreeType hinter. The middle column is rendered with FreeType’s light-auto hinter. And finally, the right column is rendered with the CFF rasterizer that Adobe has contributed to FreeType:
The difference is pretty self-evident.
I don’t think it’s a big leap to understand why it is important to have smaller font files on mobile devices and to have the rendering of those fonts improve dramatically.
More good news for the Web.
I was recently talking to Adam Lehman, product manager for Brackets, about ways I could potentially help contribute to the product, perhaps by writing an extension or two. I wanted to learn how to write a Brackets extension, but I also wanted my efforts to go into something people would find useful, something of real value.
It turned out, the timing of our meeting was perfect.
Web Platform Docs is mature enough to use it as a source for documentation in Brackets. Adam suggested we build an extension to provide dynamic inline access to Web Platform Docs as users are editing code.
Web Platform Docs, in case you’re not aware, is this amazing initiative undertaken by the Web community as a whole to, well, document the Web. If you’re a Web developer, there are several different places to go for the latest set of CSS properties, for example, to understand what they are, what their potential values are, and so on, but there is no comprehensive and authoritative source. The docs.webplatform.org site is a Wiki designed for just that purpose. There you’ll find reference documentation, starter guides, best practices, and a whole lot more. And, since it’s a Wiki, the site is constantly growing and being revised.
But don’t be mistaken. This isn’t some random marketing effort. Web Platform Docs was initiated by the W3C, and is support by the Web Platform Stewards.
I thought this would be a great starter project, something to really sink my teeth into, until of course reality set in. I needed to provide some time estimates so the Brackets team could plan accordingly. I had never coded up a Brackets extension before. How could I even estimate a guess? We scheduled a meeting for a week later to check in, see how things were progressing and then come up with some reasonable time estimates.
By the time we had our first check-in meeting a week later, I had about 90% of the plugin finished. It turned out to be much more straightforward than I anticipated. Since Brackets itself is written in HTML/CSS/JS, and the plugin architecture is so well thought-out and straightforward, if you know these core technologies, the learning curve is pretty minimal. Most of what you’d want to know can be found here, and there are a bunch of sample extensions in the distribution that are great starter points.
You can find what I created up on GitHub. To be honest though, there’s no real reason to use that code other than to see what you can create on your own in very little time. The Brackets team took my extension, cleaned up the code here and there, revised the UI layout, and released Brackets Sprint 24, with an improved version of the extension integrated right into Brackets core!
There are three ways to call up the CSS property documentation:
And this is what you’ll get:
The left pane contains the summary, and the right pane is a scrollable list of potential property values. In addition, you’ll see a button:
Clicking that button will take you to the source Web Platform Docs page in case you want further information.
The information you see above is all gleaned from:
http://docs.webplatform.org/wiki/css/properties/align-content
The naive implementation (and thus my first iteration) has the extension making the appropriate set of requests to webplatform.org for every user request for CSS property documentation.
But, if every Brackets user (and thus Edge Code users with free Creative Cloud memberships) were making these requests every time they wanted a particular property’s documentation, that would be incredibly slow and a completely unnecessary burden on the server.
As well, there are security implications of dynamically importing remote code into an application running on your desktop that need to be considered.
As a result, we decided that for this initial release, the documentation results would be preprocessed and packaged with Brackets and Edge Code. Moving forward, we are working with webplatform.org to develop a suitable API that is fast and secure. In subsequent releases of Brackets we will have updates to the packaged CSS documentation, and ultimately the results will be dynamically updated in a secure and efficient fashion.
In the meantime I think you’ll agree that it smokes. The documentation response time is immediate.
You can find the latest milestone Brackets build here.
I have to admit I was hesitant at first, but more and more I’m finding that Brackets is my HTML editor of choice. And now with Web Platform Docs integration, it’s even more powerful.
Brackets and Web Platform Docs – Two Great Tastes That Taste Great Together!
I’m going to be speaking again at Adobe MAX this year. The conference is being held in Los Angeles from May 4-8. It should be a total hoot. The Black Keys are even playing at the big bash!
And, in case you haven’t heard, all attendees get a free year membership to Creative Cloud.
Tuesday, May 7th:
11AM – 12PM - SVG Reboot
This will be a beginner’s introduction to SVG and will give those of you that know about SVG an insight into how it’s moving forward and where it’s going.
Wednesday, May 8th:
11AM – 12PM - Go Beyond the Canvas Box to Create Your Own Cinematic Effects
This will be a talk on CSS Filters and Shaders.
1:30PM – 3PM – Creating Special Effects for Your Web Content with CSS Filters and Shaders
This one will also be on CSS Filters and Shaders, but in this case you don’t sit back and listen. Instead, bring your own laptop and be prepared to get down and dirty creating your own amazing Web effects as I guide you through it all. I’m pretty psyched to see what people come up with here.
So, if you haven’t already, register for MAX now and come join this amazing conference.
Use the registration code MXSM13 for a $300 discount off the registration price.
Oh, and if you register off my blog, I’ll buy you a beer.
