#ScreenshotSaturday: 2/28##
The Tech
MaterializeCSS is a slick framework modeled off the epic UX research done by Google. It’s the natural progression to the current flat-design trend you’ve probably noticed (check out this great question from the Get Started forum on “Following Trends”). The idea is to apply shadows and other visual cues you see in the real world to help create a seamless, fluid workflows.
Tips & Tricks
I used jQuery-UI’s powerful .switch() method to create the column-split animation when typing something into Stemlet’s Omnibar. .switch()'ing works like .toggleClass(), only it also handles the animations. It also helps separate the CSS/JS.
If you notice towards the end of the clip, changes I make in the right input box show up on the left. This is easily done by binding to the ‘keydown’ event, something like this:
$('body').on('keyup change', '[data-sync-value]', function(){
// "cache" the element, else jQuery scans the DOM everytime!
var $this = $(this)
// If you don't use `.not(this)`, the cursor will always
// move to the end, even when using the arrow keys
var $targets = $($this.data('sync-value')).not(this)
// Sync the values yo
$targets.val($this.val())
})
What’s happening here is that I give an attribute [data-sync-value] with the value set to a common class. Something like:
<input class="group-a" type="text" data-sync-value="group-a">
<input class="group-a" type="text" data-sync-value="group-a">
<input class="group-b" type="text" data-sync-value="group-b">
<input class="group-b" type="text" data-sync-value="group-b">
Changing one automatically changes the other. It’s a simple data-binding technique I learned from experimenting with a few different JavaScript MVC frameworks.
Future
As far as the project goes, the next step is to show search results for Stemlet in the left column and stuff from around the web (Twitter, YouTube, discussions, even Wikicommons) on the right. You’ll be able to grab those widgets and drop them into the green box to help build up media-rich articles fast!
PS: Anyone know why I can’t edit the first post? Is that specific to the Showcase forum?