Backdrop-filter, the New Way to Create Blur Background

Lovebird's top navigation
Lovebird’s top navigation

The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element’s transparency/opacity.

Have you seen Lovebird‘s top navigation? You will see blur effect to the area behind it. It’s cool right? The blur effect is introduced by iOS 7 and OS X Yosemite. Even Sketch also put it into its style panel.

Sketch – background blur

Then we can create that effect by using just 3-4 lines CSS, or even 1 line CSS (if we use mixins). Webkit introduced backdrop-filter in 2nd semester of 2015. Unfortunately until now, browser that support backdrop-filter are Safari 9+ and iOS 9.2+ (See the table). We have to wait until CSS Working Group finish working on it. Or you can do it with Javascript hack. You choose :)

Anyway, backdrop-filer has some options to manipulate the area behind the element. It’s not only blur option but also you can use brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related backdrop-filter on Codepen.

Originaly posted in Lieur’s Journal

What I Love from Peach

Have you heard about Peach? Peach is new social app created by Vine Co-founder Dom Hofmann.

The app is a sort of a mix between Twitter and Slack. After you create an account and a handle and add some friends, you view a stream of updates from the people you’re connected with. From the home screen updates look a bit like tweets or status updates, though tapping into a friend’s post reveals much more.


Chris Messina – Developer Experience Lead at Uber said, “Magic Words are the interesting differentiator here“. I think Magic Words  is new cool UX, we don’t need use more icons to add something in your status. Peach just use 2 icons (actually one – camera icon, the other one is button “Post”) in your profile page. But you can add 20 actions with Magic Words, pretty cool, huh?

Peach App
Peach App

Ok, let me make a list What I Love from Peach;

  1. Yes, Magic Words.
  2. Un-timeline view. Peach home is doesn’t like the other social media like Twitter or Facebook with timeline view. It just shows list of my friend with their piece (not full) of their last update. It’s less distraction, we don’t be forced to read everything that everyone did with their Peach.
  3. Peach is new social app. I love it because I can start over to choose anyone who will be my friend on Peach :peace

Image credit from official Peach Website

The Hamburger Problem

As we know, many UX designers suggest to not use hamburger menu anymore. The main problem is it lacks of information. So I try to use another solutions, make the menu clearer. How? I use the word “Menu” or/and add arrow icon beside it. More clearer, huh? Not really, people tend to not click it because they don’t see a reason to click it.

Some people argue that “we just have to wait for users to learn the new navigation convention,” but hopefully you can see how the principle of information scent invalidates that argument. Good design doesn’t require years of waiting for the general public to understand and start using a interface convention.


Go check the article above you can find the right solutions to replace hamburger menu. Anyway, even a company that specializes in hamburgers is not use hamburger menu. :P

The State of Front-End Dev


Marco: Uh yeah, so, final thoughts. I guess for me, it’s kind of acknowledging that the space of front-end development is kind of exploding right now, it’s a really exciting time to kind of be in this space. And I think people should kind of embrace how dynamic it is and how in demand it is, and just really kind of find where you fit, right? There’s really no rules for this—if there’s nothing else you got out of this, there’s no rules for this. Like, the thing that you like to do in the front-end is valuable. Learn it and then go find the people who are going to pay you money to do that, because this is the time.

My confusion about my job title just answered after listening that talk. Like Marco said front-end development is exploding right now. HTML and CSS are absolutely part of it, but Javascript, Ruby, even SEO can be part of it or maybe not.

Front-end developer can be a team which consist of people who good at HTML and CSS, Javascript, Visual Designer etc.

Even though you are not good at Javascript, but HTML and CSS, you are still called front-end developer. I prefer to call them as front-end designer, part of front-end development though. Like me :)