Product designer

Front-end developer

Full-stack UX design specialist

For business enquiries or casual chatter—do drop me a line at lp.frtoip@olleh. I ♥︎ emails.

From the notebookIssue 47

UI development

  • Animating List Items a sweet technique of introducing content with some fancy animations. Useful for all sorts of listings. img listanim
  • Grunticon— a Grunt.js task that makes it easy to use SVGs, auto-generates bitmap (PNG) fallback images and loads the right format for compatibility with pretty much any browser. Sounds promising. img grunticon
  • Polylion at CSStricks guides you through creating one awespiring SVG animation. img lion
  • Awesomeplete, a 2KB customizable autocomplete widget with zero dependencies by Lea Verou. img awesomeplete
  • Awesome React, a monster collection of React tools, resources, videos and all that. img awreact
  • A tiny thing to speed up your GIT sync workflow: pull with automatic rebase and here all the whys.
$ git config branch.*branch-name*.rebase true # Force existing branches to use rebase.
$ git config branch.autosetuprebase always # Force all new branches to automatically use rebase.

UI Design

  • Subway, a 300+ set of icons in a variety of formats, including svg and sketch. img sway

  • On the “My content” vs. “Your content” language conventions front, a few resources—one, two—though, in the end, I’m leaning towards this approach as per Microsoft User Experience Interaction Guidelines:

    “Use the second person (you, your) to tell users what to do.” So use second person for error messages, help, window or page labels, on-page documentation, and other places where the app is telling the user about the user’s content. “Use the first person (I, me, my) to let users tell the program what to do.” So use first person for buttons, menu items, and other controls where the user commands the app.


Data visualization


Staying healthy