vibrancy.js – a jquery plugin for stylish frosted glass effects

The instant I laid eyes on Apple’s new vibrancy effect in OS X 10.10 (Yosemite) I was amazed. It is simple, delightful, and adds context and comfort to the user experience without being distracting in most cases. Since then, I’ve felt inspired to emulate it some limited way as a nod to the originators. About a week ago, I made the time to make something.

vibrancy.js

The result is vibrancy.js, a new jQuery plugin. It simply provides a nice blur filter commonly known as the frosted glass effect. It also boosts the saturation of desaturated colors, just like the real vibrancy effect that inspired it. Someday, I hope to take it up to the next level so that the effect can be applied dynamically to draggable elements, tooltips, modals, and more. However, even in this limited form I believe it raises the bar in several ways.

  1. A higher quality frosted glass effect than any CSS or SVG blur filter can currently provide. Those produce a feathering of the blur effect around the borders of blurred elements. That said, Charles Skoda’s attempt at perfecting them makes very clever use of negative margins, calc(), and obscuring box-shadow drop shadows to achieve a much higher quality effect than these filters usually obtain.
  2. Unlike other blur-related plugins, it only attempts to solve a single use case: application of the effect to one or more child elements positioned within a common parent. This restriction has benefits for compatibility, performance, and ease of configuration.
  3. Brightness, vibrancy (a selective saturation effect), and blur are all configurable as data attributes on the individual child elements.

Experience has taught me that no amount of inspiration is worth entertaining if at the end of a job well done you eventually come to realize that you just unknowingly imitated a superior alternative created by someone else. So, before I began work on this plugin I took a look around to see what has been done by those who came before me. For the sake of documenting the current state of the art in this area, here are the three most similar efforts that Google was willing to reveal.

I discovered a proof-of-concept created by Fabio Sasso. This very talented designer (currently working at Google) was seemingly inspired by iOS 7’s blur effects over a year ago. His work did not include a developer plugin and did not address brightness and saturation. But he did do a very bold and interesting thing; he renders the underlying content using html2canvas.js so that rendered HTML can pass beneath the frosted glass and integrate into the blur. The result has some odd artifacts and doesn’t hold up well to resizing of the browser window but it really is a striking proof of concept.

Another related offering is blur.js by Jacob Kelly. His work provides a jQuery plugin, addresses brightness/darkness via black or white overlays with variable opacity, enables hue tinting via overlays, implements caching in localStorage, and even supports draggable elements. It doesn’t handle browser window resizing well or implement any adjustments to the image saturation; but those are relatively minor issues. The main reason I wasn’t discouraged by the existence of Jacob’s work is that his approach doesn’t attempt to limit usage scenarios. His plugin asks that you invoke it upon an element or set of elements, provide a source element (optional, defaults to the <body> tag) with one of several possible CSS background-position values, and manually configure the X and Y-axis offsets as necessary.

Rodney Leviton published an impressive effort to implement a high-performance dynamic frosted glass effect for a challenging web design project; in Angular! There is no jQuery plugin, and nor is there a Github repo as of this writing. Mr. Leviton has probably gone further than any other person to date in order to reach frosted glass nirvana. His work is compatible with responsive layouts and backgrounds and even handles window resize and scroll events gracefully. Apparently, he was not content to stop there and went on to make use of requestAnimationFrame() and translate3d() to optimize his rendering performance. Running Chrome from Linux I did not see the blur effect updating as the masonry-style layout in his demo rearranged; but there was only minimal stuttering and they did in fact update once they reached their final positions.

In closing, here is a list of the plugin blogs, repositories, and other sites that have managed to discover my plugin so far. I will try to update it once in awhile for science. The only one that I’m really tempted to submit to is unheap.com — so please leave a comment if you know of any other sites of the same caliber!

  • http://www.jqueryscript.net/other/iOS-Style-Frosted-Glass-Effect-with-jQuery-Canvas-vibrancy-js.html
  • http://amazing-jquery-plugins.tumblr.com/post/105068866565/ios-style-frosted-glass-effect-with-jquery-and

Read More

Five posts in five years. Why even have a blog?!

Welcome to the new DeepMojo! Well, really it’s the same old site but refreshed with a modern theme. For my loyal readers, I promise to strive toward an average rate of at least 0.2 posts per month. I know, that seems ambitious, but this time I’m serious. For the record, and answering the titular question, having a blog (however neglected) is an agreed upon best practice within my profession. Also, having the option and the ability to publish globally, instantly, and without censorship is not something I take for granted. Historically, I have not exercised that option frequently. I don’t need to justify what I have built here by concerning myself with traffic or being a prolific producer. It’s enough for me to have a nice platform to publish from as my way of paying due respect to web of information and ideas within this page resides.

When I created Blackheart, my previous WordPress theme, it was important to me to develop a custom theme that demonstrated my abilities as a designer and presented an aesthetic that deeply resonated with my sensibilities.

blackheart

Five years later, everything has changed. Mobile dominance demands responsive layouts, web fonts are practical, flat design is the new black, my skills as a designer have somewhat languished, and my tastes have moderated toward pragmatism, practicality, minimalism, and things that help me get done quickly.

This time, I could have rolled my own CMS, opted for hipness with Jekyll, whipped up something nice in Bolt (because Silex), or a million other options besides stodgy old over-powered WordPress. But I have history with this CMS… over 10 years of it. So I can’t leave now; we’re practically common law married.

For these reasons (after a ten minute search) I have chosen Sparkling by Colorlib as my new theme. Personally, I think it’s beautiful for a free theme.

Read More

Dockerfile syntax highlighter for PHPStorm

I have been working with Dockerfile configurations quite a bit lately. Consequently, I went looking for a syntax highlighter that will work in PHPStorm. There is one available here:

https://github.com/masgari/docker-intellij-idea

However, I disagree with the author’s choice of bundling all the commands in into the first keyword category and using the rest for what looks to be categories based on shell commands, package manager actions, and program options. For me, it suffices to to have colored comments, and then apply the four color categories to the built-in commands based upon meta/setup, actions/triggers, environmental/system, and execution. If you prefer my way here is the XML to save as “Dockerfile.xml” within your “configfiletypes” folder:

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Docker container configuration file" name="Dockerfile">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="#" />
      <option name="COMMENT_START" value="" />
      <option name="COMMENT_END" value="" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
    </options>
    <keywords keywords="FROM;MAINTAINER" ignore_case="false" />
    <keywords2 keywords="ADD;ONBUILD;RUN" />
    <keywords3 keywords="ENV;EXPOSE;USER;VOLUME;WORKDIR" />
    <keywords4 keywords="CMD;ENTRYPOINT" />
  </highlighting>
  <extensionMap>
    <mapping pattern="Dockerfile" />
  </extensionMap>
</filetype>

And here is the XML tag to add within the “extensionmap” tag inside your “configoptionsfiletypes.xml” file:

<mapping pattern="Dockerfile" type="Dockerfile" />

Read More

Linode’s Longview dashboard is simply incredible

After migrating all of my sites over to my Linode VPS last week I thought I might try out their new Longview dashboard offering. I was very impressed by what it has to offer. The web-based process explorer is super handy.

Recently, I started receiving Disk IO alert emails; which is pretty cool. But I hadn’t gotten around to doing anything about it until now because the default threshold is relatively low and I knew the culprit had to be bitcoind instead of something potentially serious. Since my blockchain experiments are temporarily on hold, I decided to stop the bitcoind daemon and give the alert emails a rest.

Afterwards, I tucked into the Longview process explorer and selected the bitcoind process for visual confirmation. The screenshot below shows the process-specific graphs that I saw.

Linode's Lonview dashboard has an excellent process explorer.

Linode's Lonview dashboard has an excellent process explorer.

Clearly, stopping the daemon has freed up some resources. Linode, Longview is fantastic. I’m doubtful that DigitalOcean provides anything comparably as cool with their $5/month VPS offering.

Read More

peerpad: now with 100% more workingness

I finally got around to updating some of the silly bugs that were preventing PeerPad from allowing users to add, edit, and delete their posted items. So far there have only been two brave netizens that have come along to give it a whirl but I’m not daunted; at this point it is only just a vanity project. Anway, now you can use the login and password of the test account posted on the PeerPad homepage to give it a try without handing over your email address.

Oh yeah, by the way… there is now a meta section on the site for me to dump my random musings and pat myself on the back as I build up the site.

Read More

Beta Launch: PeerPad

Late last night I released the first version of PeerPad.com for the world to see. PeerPad is an online notes manager and todo-list creation and sharing tool. At least, that is what it aims to be. Right now, in a lot of ways it is deeply broken. And it lacks polish in many spots; but that’s okay. The old me would have shuddered to even just imagine releasing something unpolished… let alone broken! But since then I’ve learned that it is preferable to accept imperfection when the only likely alternative is to risk facing perpetual obscurity.

deepmojo_post

Plus, I slapped this thing together with lightening speed and it does very little at this point. As usual, I see myriad directions for it to evolve toward, but it is almost to the point of correctly doing exactly what I originally imagined for it; a slick way to log my personal activities. Once the saving issues are fixed and the problems with encoding various characters and so on then I’ll try and find time to add some of the more obvious enhancements.

If you like what you see so far please leave a comment or contact me to offer some encouragement. I doubt that anything could motivate me more than some unsolicited feedback.

Read More

A Click Is Worth A Thousand Double-clicks

Among my list of annoyances recently has been the issue of my fancy $100 mouse occasionally performing undesired double-clicks. This has made managing files with drag-and-drop something of a minefield. The obvious fixes are updating your drivers and adjusting your double-click speed from the Windows Control Panel. But in my case these didn’t set things right because the cause is actually a faulty micro switch in my mouse sending too many click signals. Maybe it has flotsam in it. Maybe I’m on my third pass through the web and the poor thing is exhausted.

Regardless of the cause, thanks to Daniel Jackson there has been a software solution for this hardware issue called MouseFix for about five years now. People like him are the reason I want to start sharing my stuff. Thanks Daniel!

Read More

DeepDual 1.3 Released

Nobody asked for this, but most of the code was written ages ago. So this is really for my people out there who spend massive time with their computers. We’re the ones up at all times of the night working like mad to create stuff but having to squint our tired eyes against the relentless onslaught of white windows. I should’ve just called this app DeepDark. Mmm, sounds like a candy bar.

whats new

  • Now handles disabled/re-enabled monitors gracefully
  • Dimmer effect is better able to keep windows beneath it
  • New dimmer hotkey allows you to instantly activate/deactivate
  • Monitor Power Off now has customizable delay setting
  • Monitor Power Off now shows form with countdown timer and cancel button

DeepDual 1.3

Read More

DeepMojo 2.0 Launch Post

This new design is now finished enough to publish. Along with the new look I’ve decided to go public and start associating this site to my name. So yeah, my name is Dietrich Stein and I’m an artist and a coder. Hopefully, now that I can start hoarding credit I’ll feel inclined to share stuff more often.

Not everything from the old site made the cut for this launch. For instance, my ramblings about the early days of the net, my tirade against Verizon… all got that got the chop. As a nod to the past you’ll find some images from those abandoned posts below.

Read More