FITC Spotlight: Advanced JS Roundup

Yesterday I had the pleasure of attending FITC Spotlight: Advanced JS at the University of Toronto. The talks at this event were a little above my skill level, but still interesting and informative.

The sessions included:

Client Side MVC and The Gosh Darn Back Button

In this presentation  Harry Brundage discussed clients side MVCs and memory leakage. It is easy to leak memory in JavaScript Apps. With jQuery memory use goes up then down and repeats like this chart:

However in JS MVC there is no reset and memory continually goes up as in the chart below:

For this reason it's important to use .remove() but also easy to forget. But if you don't then your memory will continue to leak and the app will become less and less responsive. Harry then discussed how to fight memory leaks and stressed that .remove() should be used in an MVC environment. He also said that frameworks should handle lifecycle focus as .remove() puts on the onus on the developer to remember.

Using frameworks means having to surrender control, however we get less wrong. 

Turbocharging Client-Side Processing: Leveraging asm.js

Vladimir Vukicevic introduced asm.js (prounounced ahzem) as an optimizable subset of JavaScript that is intended as a compilation target. Asm.js uses rigid rules that are not intended to be written by hand, though it is possible (but painful to do so).The compilation target is not just C++ but also IIjs, typescript, emscriptem for C/C++. 

Other items of note:

  • deal with manual memory management & allcoation by making a wrapper and avoid thinking aout it again.
  • user worker threads - asyncronous execution
  • Workers are awesome - APIS coming soon
    • WebRTC
    • WebGL & Canvas2d
    • Web Sockets
    • Web Audio
  • near future compilation will be cached resulting in a near instant load
  • process/resize photos client side
  • text to speech
  • use asm.js to load specialized codecs when device can use them

Virtual Machines 101

This talk, by Tasveer Singh, was well presented, but I was unable to follow much of what was said due to the speed of his presentation and my notes no longer make any sense to me. Sorry Tasveer, you were a good speaker, I just couldn't follow your topic.

Rich Interactivity with CreateJS

This presentation was just after lunch and I was in a post lunch coma just before Grant Skinner started his talk, however I was soon wide awake. Grant was an enthusiatic speaker and gave an introduction to CreateJS that demonstrated how easy it is to create rich media with javascript. CreateJS is actually a suite of JavaScript libraries that include EaselJs, TweenJs, SoundJs & PreloadJs

Essentially much of what was previously done using Flash can now be done with CreateJS. In fact, Flash CC works with create.js natively and can render as HTML5 using CreateJS. Other things that CreateJS has is that there are no dependencies and it plays well with other libraries. This is definitely something I want to spend some time learning.

Continuous Deployment Workflows for Non-Trivial Full-Stack JavaScript Applications

Nick Van Weerdenburg discussed continuous deployment and numerous best practices with GIT. One thing that stood out for me was that with teams of people he suggested that the DevOp Manager change each week. By doing so there would be no single point of failure. Other points include:

  • if you aren't improving, you're getting worse
  • automate everything you can
  • you cannot under invest in GIT (I think he meant it's not possible to over invest)
  • pair programming
  • SOLID GIT training is essential.

Nick also recommended three books Functional Javascript, Testable JavaScript & Maintainable Javascript.

Awesome Ember Tricks

Next Robin Ward introduced four awesome tricks to use with Ember.js. Ember.js is a browser application framework that uses handlebars templating and values convention over configuration. Below are the tricks:

  • Trick #1: computed property macros are smart. Content changes as updated, if not, then no change
  • Trick #2: Async everything. Updates are coalesced so that an event queue combines multiple inputs into one output
  • Trick #3: Custom resolver - extensible
  • Trick #4: View Cloaking. This was explained with regards to infinite scrolling and how you could unload off screen view (cloaking) and reduce ram usage.

Realtime “Eye Candy” with AngularJS

The final presentation of the day, by Matias Niemelä, was also very interesting. Matias introduced Angular.js by informing the audience that it extends browser capabilities to make it feel like dynamic data and that it is very quick to make web apps. In fact he built a simple app during his talk. 

Using pusher.js in combination with angular it's possible to make a "hybrid" web app that combines the best of traditional website and ajax powered web sites. During Matias' presentation I forgot to take a lot of notes as I was too focused on what he was doing and saying. You can, however, view the slides for Matias's presentation here.

Final Thoughts

The after party at Pour Girl was quite good and had good beer. I talked with a few people and even found a couple of people interested in trying out ExpressionEngine, my CMS of choice. This was my second FITC event and I would highly recommend attending if the topic is something you are interested in. Both times the venue was good and easily accessibile, the speakers of high caliber with excellent presentations.

Hope to see you at the next FITC event.

Multilingual Dates in ExpressionEngine

I've built about 15 multilanguage sites and have a good process for building them out using Transcribe, which I really enjoy using. Today I ran into something new for the first time. The site I'm working on needs to display entry dates, however there is no built in way with Transcribe or ExpressionEngine to translate the dates.

A quick search on Devot:ee later and I found Date/Time Language Converter by Carl Crawley. This little plugin is super easy to use. Below is my code to get a French/English site to display the dates in both languages. The key to notice is that the entry date tag that is wrapped by the datetime_convert tags has no formatting parameter.

{if "{transcribe:language_abbreviation}" == "en"}
	{entry_date format="%F %d%S %Y"}
	{exp:datetime_convert language="fr_FR" format="%B %e %Y"}{entry_date}{/exp:datetime_convert}

Be sure to read Jelle Dijkstra's comment below for a better way to do this with sites that have more than two languages.

FITC Spotlight: Freelance Roundup

Yesterday I had the pleasure of attending FITC Spotlight: Freelance here in Toronto. I bought tickets to primarily see the first presentation Legal Basics for Freelance Designers & Developers, but this was canceled late on Friday afternoon due to the presenter being ill. While this was disappointing, and understandable, I still found the remainder of the conference to be worth going and came away with a lot of information. 

The remaining sessions were:

The common theme throughout all presentations was Value Pricing. This comes down to how much value is your client gaining from the work you are doing for them. Use that to determin the price of your service, not the number of hours that it takes to complete the job. Value based pricing is also something I read recently in The Personal MBA (page 122) where it is called Value Based Selling. I like this idea and feel that this is probably best approached by quoting for projects on a project basis rather than an hourly rate.

Networking, Selling & Pitching

In this presentation Kevin airgid gave some good pointers. One that he spent some time on was communication and using active listening and eye contact. He also brought out an audience member to discuss body language and specifically mirroring. I was already familiar with this as I used to teach this in my presentation skills class when I was teaching at a university. By mirroring another person they will subconsciously find you to be more similar to themselves and consequently be more inclined to like you. 

Other useful points:

  • Don't try to impress with Jargon, but  show a genuine intersest in the person you are talking to.
  • Google the clients name and learn about them. Also be honest that you have done that. The client has likely googled you as well.
  • KISS proposal method. Keep your proposal simple and free of marketing speak. Be sure to highlight the clients pain point so that they will know that you have listened to what they need/want
  • Add Value to the client. By adding a value you will be more than a commodity or expense, but part of the team.
  • Become a resoure not a salesperson. Demonstrate to your client that you are a problem solver and they will come to you for solutions.
  • Recommended reading The Little Red Book of Selling (Kevin said $4 but Chapters has it for $16)

Adding Value: Creative Approaches to Pricing and Positioning

David and Ben broke down pricing into three points: Positioning, Qualification & Diagnosis, and Negotiation.

  1. Positioning -  Pricing power increases as you increase both your reputation and your specialization. Instead of saying you are an expert at building websites, focus more on a niche or particular CMS. For example specialize in bed & breakfasts building web sites with ExpressionEngine.
    • Reputation - You can never have enough. Experts write. Write about what you know, even if you are not a "writer" you should still write. Proofread your writing before publishing and engage your audience. 
  2. Qualification & Diagnosis - Qualify the client. Find out if the client is a fit for your business and vice versa. By qualifying a client they will often fight to work with you. This also means being willing (and able) to walk away from a client. Use value pricing
  3. Negotiation - my notes and my memory have failed me here.

Getting Along with Clients

After listening to Kurt's presentation, everything he said felt like common sense. However common sense is not as common as we would like it to be and I definitely came away richer for having been there.

  • How much time do you spend keeping current whether reading blogs, learning new tech or techniques? Now how much time do you think about refining your approach to clients? By spending more time on this you will find you have better relationships with clients and better clients
  • Problems are rooted in clarity
  • Set targets with your client
  • Learn the clients business
    • Values
    • Customers
    • Relationship with customers
    • Ask Why
  • Define goals and barriers
  • Sythesize
  • Value == helping the client to understand
  • Leverage == expertise
  • Be prepared to walk away
  • Under promise, Over Deliver
  • Ask yourself "How can I improve my clients business?" Not how much money can I get?
  • Show your rational for decisions and recommendations, i.e. educate your client on why your are doing things this way

Finance For Freelancers

Mark Macleod, CFO of Freshbooks, spoke about finances and bookkeeping for freelancers.

  • Have unique client offers - differentiate yourself from others in your field
  • Know what you are best at and how your server
  • Get Paid
    • remote clients should prepay
    • ACH - online checks with low fees
  • Incorporate
    • Legal protection
    • split income and pay less taxes
  • If you make less than $30,000 you do not need to pay sales tax.
    • recommends paying so that your clients are used to the HST being added to invoices. Even if you make less than $30,000 now, eventually you will make more
    • Pay sales taxes quarterly - its easier and less stressful.
  • Keep your personal and business bank accounts seperate. Do the same with your credit cards.

Panel: The Ins and Outs of Working with Agencies

I didn't take many notes during the Q & A panel, but the primary take aways were to show what you can do, reputataion, integrity and transparency. Also ask for Endorsements. Endorsements can be in the form of a LinkedIn recommendation or recommendations to other agencies/businesses who can use your service.

How to Use Images Effectively in Websites

While browsing Google+ I came across this article How to Use Images Effectively in Websites which I feel is important for anyone who self manages their website. If the site was built by a developer but the end user (client) is adding content and images they need to be made aware of the information in the article. To summarize:

  • Use Images with Purpose
  • Use Photos of Real People
  • Point Out the Obvious
  • Use Images to Illustrate Concepts
  • Optimize File Size

Read the whole article for all the details.


Your Voice Here
Leave a Comment