November 27 ngToronto meetup

Shopify hosted ngToronto

How not to die moving from Angular 1.x to 2 with Nick and Yuri from Rangle.io

  • J2EE, Rails, Python, ActionScript all had unpredictable, large shifts over the years. This is no surprise!

  • Angular may change, but plain js is a good starting place for future browser technologies

  • Soul of angular is DRY, structure, testability, which are portable concepts

  • Angular 2 is a 3 year plan. They early announcement prevents us from being blindsided by change, but it is freaking people out. The alternative to no change is standardize and stick with IE6 like banks did for many years

  • Good news: lots of discussions on design of Angular 2 are online and public, so anyone can catch up on how and why things are changing

  • Look for Nick’s matrix outlining changes in scope, controllers, DI, messaging.

Easy ways to prepare, best practices for today.

  • Nested scope? No Says Yuri! Avoid. Use controller as syntax

  • Always put directives in isolated scope

  • Put as much stuff in services as possible, because services are modules with DI. Then could swap Angular’s DI with something else in the future. See Rangle’s Nebular project

Harder ways to prepare

  • Use more plain js (no dependencies other than a browser environment) and export objects as modules to use inside of Angular 1.x services

  • Yuri is thinking about running components of a large app in an iframe to sandbox, see multi-framework-app on Github. Each iframe can run a different version of Angular, or another framework entirely. iframes can communicate with each other over a simple API so they can all be integrated together

ES6 with Matias Niemelä

http://www.meetup.com/AngularJS-Toronto/events/218616619/

Cobi & Taplytics @ BitMaker Labs Group Meetup

Cobi Druxerman from Taplytics presented his company’s software and answered questions about startups, products, and A/B testing at Bitmaker Labs.

Definitions

  • Retention – how many users stick around, use more than once
  • Engagement – how often users come back
  • Analytics – raw data, graphs charts
  • A/B testing – a framework to make sense of raw data

Analytics & A/B Testing

Mobile apps suck in general. Cobi’s stats are:

  • 2.3% retention rate past 30 days, even after spending $1.80 to acquire a user
  • 74% shopping cart abandonment rate

Some improvements Taplytics has helped apps make:

  • Changing an “Add to wish list” button into an underlined link increases clicks on neighbouring “Add to cart” button, increasing sales by 37%
  • Implementing Google Plus sign-in increased sign-ins by 150% over email, Facebook connect, Twitter sign in
  • Shopping Cart checkout processes – smoother flow with less next buttons and back buttons makes things better

Numbers!

  • How many users needed to run a test? Maybe 1000 conversions per test, hard to say. Depends on many factors
  • Running tests or making data based decisions? Check your data about once a week and make changes. Probably don’t need to wait longer

How to prevent users from being confused by frequent changes to an app while running A/B tests?

  • Once Taplytics software decides a user is going to receive baseline or variation version of an asp, they will see that version until a test is over.

Other stuff

Taplytics in action:

Introduction to Analytics and A/B Testing with Cobi Druxerman of Taplytics

Thursday, Nov 6, 2014, 6:30 PM

Bitmaker Labs
220 King Street West, Suite 200 & 300 Toronto, ON

53 Bitmakers Went

We have all heard the famous Y Combinator phrase “Make something people want” but doing this is far harder than it sounds. If you’ve ever built a product you’ll know how frustrating it is when someone tells you they love your idea, but when push comes to shove they never use it. Interviews, focus groups and surveys are useful, but they’re biased an…

Check out this Meetup →

November Web Performance Group Meetup

Web Performance Toronto

@HenriHelvetica from Forge Media + Design presented “The Biggest Loser: (Web) Images Edition”, thoughts and techniques for shrinking images. Here’s me notes!

Trends

  • Web archive says size of images downloaded is up to 1200kb per page. 57% increase this year. Graphs and trend tools available at http://httparchive.org/trends.php

  • Mobile devices aren’t helping themselves out – we consume more photos than ever before because we shoot more photos than ever before. Sites like Pinterest, tumblr and Instagram encourage us upload pictures without much thought to optimization. Do they do it for us?

  • Special images for Retina Displays and other high DPI screens are 2x to 3x the size, or 4x to 9x the amount of image data. Think of the data plans!

  • There are too many not-animated GIFs out there.

Image Formats to think about

  • Sprite sheets are helpful but sometimes difficult to make and maintain for large sites. Is it worth our time trying get automations for this work?
  • Discipline is a key part of all of this. Make yourself do the right thing and optimize images instead of tossing stuff online
  • Never use GIF when you can use PNG. PNG will almost always be smaller and faster to load

Web-p is Google’s image format

  • Lossy or lossless
  • Supports transparency, animation
  • Sometimes better compression than JPEG
  • Poor browser support
  • CPU intensive to encode and decode

SVG (scalable vector graphics) is a standardized format

Jpeg 2000 never caught on, probably due to patents

Tools

Photoshop’s ‘Save for Web’ tool has barely changed the way it compresses images over time. We have better tools now!

  • Jpegtran is a command line tool for tweaking JPEG files. Can be integrated into popular workflows with grunt-contrib-imagemin and gulp-image
  • Jpegoptim is another command line tool for optimizing JPEGs
  • Optipng is a command line tool for optimizing PNG files. Also included in grunt-contrib-imagemin and gulp-image
  • Pngout is another command line png optimizer. Jeff Atwood wrote about it. There’s a nifty Windows GUI for it called PNGGauntlet
  • Mozjpeg – Mozilla proves more file size can be squeezed out of JPEG. Cloudflare approves
  • ImageOptim – OS X GUI tool integrating some command line tools listed here and many others. Optimizes many images formats
  • Pngmini – OS X GUI tool that optimizes images (a bit lossy) to make them compress better with the usual PNG compression. Not really lossy compression, just a lossy optimization + regular compression
  • Afterwards, I found TinyPNG, a browser-based tool and Photoshop plugin which is similar

Want more content?

Remember FSTO Conf is coming up fast! Get your tickets for November 22 – 23, 2014.

Full Stack Toronto Nov 22-23, 2014

Standardization at Mozilla & The Biggest Loser: (Web) Images Edition

Wednesday, Nov 12, 2014, 6:30 PM

EventMobi
243 College St, 3rd Floor Toronto, ON

45 Members Went

Summer is over, but #towebperf is back!It’s time for another meetup! Are you ready?I’m thrilled to announce that Marcos Caceres and Henri Brisard will be joining us for the November edition.1. Standardization at Mozilla: how Firefox exposes functionality to developers and how developers can shape the standardization process of the platformMarco…

Check out this Meetup →

Interview Cake Problem #8

I signed up for Interview Cake and got my first problem as promised.

I first tried to solve it using some function chaining with lodash‘s sort, filter, and reduce methods to toss out and sum up values. I wrote numerous tests against my max_duffel_bag_value() function with Mocha and used the command

mocha --watch cake-thief.js`

so I could watch my tests pass or fail on every save. I thought I had solved the problem, so I decided to look at the solution.

The sample input values in the solution failed when I added them to my mocha tests. The example solution was not what I expected, but was satisfying to follow and implement.

I used node.js as my programming environment instead of Python. Translating the solution provided by the site from Python to JS was not hard. Things worth noting:

  • JS does not have tuples. I used a nested array like [[7, 160], [3, 90], [2, 15]]; instead. I also could have used object literals like [{weight:1, value:20}, {weight:5, value:200}]
  • JS has an Infinity value which replaces Python’s sys.maxint value
  • JS arrays aren’t fixed length, so that some_array = [0] * a_number + 1 line which creates an array with a_number + 1 elements isn’t needed.
  • Python’s xrange lazily makes a list of numbers. JS does not have a built-in equivalent

I look forward to problem #2!

Scripting languages on my mind

It’s late 2014. Here’s all the scripting languages I’ve tried/thought of trying out this year for backend web development.

PHP

But:

  • Language has some some dumb function names that won’t go away for a long time
  • xdebug needs a heavy IDE with debugging features to be easy to use (like Netbeans)

Javascript + Node.js

  • Skills with Javascript will not go out of demand any time soon
  • node-inspector is great for debugging

But:

  • Does it work well with relational DBs?
  • No leading web application platform – still have to assemble something like Laravel out of many small packages from NPM

Python

  • I like the syntax
  • I hear good things about Django

But:

  • More complex to deploy then PHP or Node

Ruby

  • Because Ruby on Rails was cool in 2007 when I was buried in ActionScript 3.0 and I wonder what I missed out on

But:

  • Lots of overlap with other languages I know. Would I learn anything new other than syntax?

Everything here is OOP. Maybe I should try out something functional in 2015.

New tool: banner-ad-delivery-cleanup

I got tired of manually copying and pasting banner ad .swf files and backup images from my working directories into a deliverable .zip file, so I made a Python script to help me out by grabbing the right files and zipping them up. Take a look on GitHub

Why Python?

I am more familiar with JS and PHP, but this one liner sold me on Python:

for root, dirs, files in os.walk(deliverables_path):

os.walk() made this an easy way to move through the directories and grab the right files.