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 36


UI development

  • The publication date for this Mobile Web App Checklist could not be better. This is my fav resource of the month. If you’re building for mobile, you better go through it carefully. img luster

  • Been there for a while, but got around to use CSS masks just recently, this CSS Masks — How to Use Masking in CSS now is what I used for reference. Worked wonders. img masking

  • Mind blown by the idea of being able to place inline imagery into CSS. I swear I didn’t know. Well, I did see fonts being embedded in CSS already but didn’t dare asking what that was. Now we all know. And here’s a handy tool to generate base64 codes for ya: Duri.me. img durime

  • -webkit-transform: translateZ(0) is one handy trick for when you’re altering opacity of elements on hover with CSS transition. It would usually cause animation to glitch in Webkit, if not for that extra translate. Via.

  • Debugging JavaScript—a handful of useful Chrome Developer Tools tips that helped me work on JavaScript more efficiently. Favorite take-away? Turning pretty-print on a minified script by clicking brackets icon: img jsdebugging

  • In her talk at CSSconf EU, Sara Soueidan tackles some common SVG usage issues. My fav take-away is that we can use media queries within SVG style declarations, though they will respond to SVG’s canvas and not viewport’s size. img sarasvg

  • From Sara’s talk mentioned above, SVG editor and optimizer by Peter Collingridge. img svgeditor

  • Understanding Delegated JavaScript Events is a throrough analysis of even delegation with a golden recipe in the end, by James Holmes. img delegated

    # helper
    delegate = (criteria, listener) ->
      (e) ->
        el = e.target
        loop
          continue  unless criteria(el)
          e.delegateTarget = el
          listener.apply this, arguments
          return
          break unless (el = el.parentNode)
    
    # sauce
    toolbar = document.querySelectorAll(".toolbar")
    buttonsFilter = (elem) ->
      elem.classList and elem.classList.contains("btn")
    buttonHandler = (e) ->
      button = e.delegateTarget
      if button.classList.contains("active")
        button.classList.add "active"
      else
        button.classList.remove "active"
    toolbar.addEventListener "click", delegate(buttonsFilter, buttonHandler)
    

UI design

  • Much interesting read about fragmentation of our apps and how we should focus on designing systems, and not screens: The End of Apps as We Know Them by Paul Adams. img endofapps