New York Tech Journal
Tech news from the Big Apple

JS Debugging, Living with MediaQueries and Speed Up Thy Style  

Posted on July 17th, 2014

HTML5NYC

7/16/2014 @ Condé Nast 4 Times Square, New York, NY

Three technical talks were presented on tools and methods to create better web pages more efficiently.

20140716_191658[1]

1.Speed up thy style by Shefali Pandey. Shefali talked about efficient ways to display graphics and speed up the CSS formatting of pages.  She discussed five methods:

1.Use SVG instead of PNG images – SVG can be manipulated using JavaScript, they are smaller than PNG files, they load faster.

2.Inline CSS images – Instead of linking to a file containing an image, the image can coded as a string of characters within HTML. If the code is cached, this further increases the loading speed. This may not work in older browsers and the additional processing needed will more quickly drain a phone battery.

3.Progressive JPG – gives the illusion of faster loading, since one immediately sees a rough image. However, progressive JPG files may take up more space and the additional processing limits their use in mobile computing..

4.Optimizing CSS selectors – see Paul Irish blog – better to remove unused CSS instead.

5.CSS properties – CSS painting methods such as gradients, box-shadow … slows down rendering, but are still faster than retrieving image files.

Shefali also emphasized that browsers are evolving quickly and what works in 2014 may not be a best practice in the future.

 20140716_193835[1] 20140716_192927[1]

2.Living with MediaQueries by Alex Lee. Media Queries are one of the key building blocks in responsive web design. However, when web pages have many components and require very different types of behavior for different devices, their use in a static CSS style sheet becomes ponderous and hard to maintain. Alex addressed this issue showing how Behance bundles media declarations and views into libraries that allow simple library calls to manage a wide variety of views and actions for each device.

He recommended Nbd.js as an open source toolkit when creating these structures.

 20140716_200806[1] 20140716_200952[1]

3.JS Debugging by Amjad Masad. Amjad presented methods that he has found useful in debugging JavaScript code. He argued classes may be easier to debug than code using functions. He then gave general debugging advice and advice specific to JS code. Finally he talked about some of the tools he uses and the tools he has created.

Amjad argues that the closure of functions is good coding practice, but he finds it useful to look inside the class while debugging. He especially likes to use the console command line to test code prior to inserting it into his program. He then listed some debugging tips and tricks which include

  1. Have the program in a runnable state
  2. Split big changes into smaller steps
  3. Breadth first before depth
  4. To find out what happens when events or problematic actions happen, replace code with calls to the debugger. This is especially useful since it allows you to trace the call stack.
  5. And many more…

He closed by talking about the utility of the Debug(fn) and monitor(fn) console commands and the tool he has developed to write and execute code conveniently: facebook.github.com/fb-flo.

posted in:  Html5 NYC, Programming    / leave comments:   No comments yet