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 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!
Lately I’ve been building all of my presentations with Reveal.js. It’s great to be able to talk about all the latest HTML5 technologies all the while using HTML5 to drive very compelling presentations. Where possible, I can demonstrate new technology right in the presentation itself. The one thing I hadn’t been able to figure out was how to remotely drive my Reveal.js presentations while I’m standing 10 feet away from my computer.
The problem is, I tend to walk around and flap my arms a lot when giving presentations. I don’t like to hide behind a podium. And sometimes there’s no room on stage for your laptop. There are many remotes out there that have left/right buttons, but for a Reveal.js presentation, you also need left/right and up/down. The Apple Remote has left/right and up/down, but it only works with Apple products, or so the kind folks at Apple store thought.
Enter iRed Lite. iRed Lite lets you easily remap the buttons on an Apple Remote to do your bidding. Here’s how to do it:
1) Download and install iRed Lite from here: http://www.filewell.com/iRedLite/
2) Start the app and you should see the OSD Panel. You can always bring up this panel by pressing and holding the menu button on your Apple remote.
3) Click Edit… to bring up the editor
4) Select Settings->New Layer
5) Change the layer title to whatever you want:
6) Select the key that we want to map to the down arrow, currently set to the - key. This will take you to the Button screen.
7) Repeat the same process for Left, Right and Up. Then click Save.
You’re all setup. Let’s try it out. Open up a Reveal.js presentation:
Press and hold the Menu button on your Apple Remote and the iRed Lite OSD Panel should appear, most likely with iTunes selected by default:
Hit the down arrow on the remote until your layer is selected.
Click the middle button on the remote to select that layer (the yellow highlight should disappear).
Bring your presentation back into view and you should now be able to control your presentation completely using the left/right/up/down buttons on your Apple Remote.
Let the arm flapping commence.
If you have some beautiful interactive SVG that you want to embed into your web page, the best option is generally to inline the SVG into the HTML itself. Then you have access to the SVG DOM and can provide all the interactive behaviors you can dream up. The problem is, if you have a large SVG file, your HTML quickly gets polluted with all of the SVG content. (more…)
In the last post in this series, we built a REST interface to our server data, which consists of Events and Venues. The REST interface provides the functionality to perform all the necessary CRUD (Create, Read, Update and Delete) operations from a client (e.g. a browser or Curl from a command line) and makes use of WordPress roles and capabilities to determine whether the user making the request has the necessary permissions to perform the requested operation.
Our goal in this post is to create a well-structured data-driven Web Application embedded in a WordPress page that makes use of good modern design patterns and leverages the REST interface we built in the previous tutorial. (more…)