Barry M. Wong

UI Engineer + Designer

Blog

CSS Hex Words!

September 13, 2013 at 10:01 pm | css

Yes!!! Form words in Hexadecimal!

Here are some of my favorites:

item {
  background-color: #BADA55; /* BADASS */
  border: 1px solid #C0FFEE; /* COFFEE */
  color: #ACCE55; /* ACCESS */
}

Here’s the whole list:¬†http://hexwords.info

CSS Performance

September 7, 2013 at 5:02 pm | css

We’re all aware that there are ways to optimize javascript to run faster, but we often overlook that CSS has performance issues as well. With single page apps being the rage these days, this becomes more important. This was emphasized in a couple of my interviews.

Reflow vs. Repaint
Repaint has to do with the rerendering of an element on the page where it doesn’t not effect the layout. So if you change the background color or border. Reflow changes the layout. So if you changes the size of an element, modify class attributes, inline style attributes. This one is more costly because it causes a whole lot of other elements to be rerendered.

Topics to be discovered:

 

I’m on TechCrunch! (0:53)

September 2, 2013 at 11:03 am | fun

Barry teaches Ricky some new tricks

Barry teaches Ricky some new tricks

TechCrunch came to the building and did some interviews at HackReactor a couple of weeks ago. My face got into the video! So stoked about my 2 seconds of fame! lol.

Watch here! (0:53)

Promises in Javascript

August 27, 2013 at 6:11 pm | code

Never make a promise that you cannot commit. Fortunately, Javascript is trustworthy!

Basically, a promise is an async callback inside another async callback and that’s it. (You could keep doing callback inside another callback inside another and so on, but this is really ugly.) The promise is that code will be returned to you at some time. At that time, you can decide what you want to do with it.

Here is an expert from my team project¬†PreLinked. This is using Backbone’s ajax and jQuery’s promises:

...
  fetchUser: function(){

 // assign promise to here
 var deferred = $.Deferred();
 var that = this;
 this.model.fetch()
 .done(function(data){
 // console.log('user attributes: ', that.attributes);
 // console.log('fetchUser success with data: ', data);
 // when the promise is delivered at some time resolve it here
 deferred.resolve(data);
 })
 .fail(function(error){ // if all fails
 console.log('fetchUser failed');
 // reject the promise
 deferred.reject('fetchUser failed');
 });
 // return the promise whenever it is ready
 return deferred.promise();
 },
...

Node.js also has a library for dealing with promises called Q.

SlideParty + Socket.io

August 10, 2013 at 10:54 pm | code

I used Socket.io in my personal project SlideParty.

In case you haven’t heard, Socket.io is a framework for Node.js that deals HTML5 websockets and necessary fallbacks. It’s realtime communication between multiple browser clients.

In SlideParty, one user can give a slide presentation and simultaneously control all the slides across all the audience’s devices. In return, the audience members can hit the Like button that will increment and update on all the devices at the same time.

When the client browser loads, it sends an emit to the server:

SPTY.socket.emit('initLoad', {});

The server listens and for initLoad, does it’s thing, and emits data back to the client:

socket.on('initLoad', function(data) {
  data['slideData'] = Server.getSlideData();
  data['pollData'] = Server.data.pollData;
  data['isAdmin'] = Server.data.isAdmin;
  socket.emit('initSuccess', data);
});

The client listens for initSuccess and accepts the data then triggers the function appInit:

SPTY.socket.on('initSuccess', function(data) {
  SPTY.Events.trigger('appInit', data);
});

This one was easy

July 13, 2013 at 9:18 am | code

/**
 * We have a textbox where we get the info with the following code:
 *
 *   var tb = $(".textbox");
 *
 * We want to get the text of that box, but only 600 ms after the person stops
 * typing in that box. How would you implement it?
 */
 
var timer;
var tb = $(".textbox");

tb.on('keyup', function() {
  var that = this;
  clearTimeout(timer);
  timer = setTimeout(function() {
    $('.textboxContents').html(that.value);
  }, 600);
});