I want to design, or code, or something OR a Toronto guide to getting started as a web professional

Everyone who’s written any flavour of code for long enough (ComSci degree be damned) will say they are self-taught. My start was at Fanshawe College in a program that I just Googled and found no results. It provided me with what I call the ‘General Arts and Sciences of Multimedia': HTML4, CSS2, the Adobe Suite, video & audio recording, and 3D Studio Max. To make use of these skills, I sought tutelage from a programmer friend (to whom I owe much of my career trajectory to) for the basics of how to use PHP to create, read, update, and delete fields in a MySQL database. The rest is history.

At that time, people would glaze over with disinterest at my work, or they believed that I am a magic wizard. Since then, it’s come to be that most people have looked at HTML code and some kinda get it. Furthermore, people have realized that design and development extends beyond just punching code. And, that it can be a creative and lucrative skill, resulting in a job where there is always beer in the fridge, and a dog greeting you at the door. People want in. But, where to start?

No jokes, coding is another language and you have to immerse yourself in it. If you aren’t one to write code, then you’re going to STILL have to immerse yourself in the tools. And, learn some basic code skills. All the drag and drop “UX prototyping” tools in the world won’t help you understand how things are built. And if your fancy yourself a designer, you better learn Zurb Foundation fast and start ‘designing mobile first’ right away.

Here are the resources I would recommend to anyone in Toronto who is looking to get started. And my advice is to throw yourself at it. This isn’t a dabbler’s sport anymore. There is too much to learn. And relearn. And tweak. And rewrite, redraw, reinvent. First, before you go to any school – get an account with an online training platform and get a start. Then, get into a community. Make a project. Read documentation. Attend meet-ups. Join newsletters. And then, maybe, you’ll want to get some formal training. Maybe.

Here is a Toronto centric list of things to get you started:

Online resources:

Community:

Some reading:

Tools:

Schools:

 

Swipe handling to retrofit existing slider with jQuery Mobile UI

Going Mobile

While retro-fitting a client’s website as mobile-friendly and responsive, an existing slider was requested to be outfit with swipe action on mobile devices. This made sense as the experience on mobile was lacking. You just *wanted* to swipe to the next slide.

As the site was already using jQuery and a custom built slider using WordPress’s queries, implementing jQuery Mobile UI API, I was able to quickly detect left and right swipes, and extend the logic to include mobile slider navigation.

Include the jQuery code in your page, and check out the docs:

swipeleft
swiperight

Handle the Swipe:

$(function() {
	// Bind the swipeHandler callback function to the swipe event on the slider div
	$( "#slider_frames" ).on( "swipeleft", swipeHandler );
	$( "#slider_frames" ).on( "swiperight", swipeHandler);

	// Callback function references the event target and finds swipe'#' id
	function swipeHandler( event ) {
		if(event.target.id) {
		var id = event.target.id.split('swipe'),
			id = parseInt(id[1], 10);
			slideCount = $('#slider_frames li').length;
			switch(event.type) {
				case "swipeleft":
					id = (id === 1 ? slideCount : id - 1);
					buttonaction(id);
				break;
				case "swiperight":
					id = (id === slideCount ? 1 : id + 1);
					buttonaction(id);
				break;
			}
		}
	}
}); 
 

Angular 1.2.4 – Sample Directive

/**
 * Sample Directive
 */

define(['sampleLink', 'sampleCtrl'], function (link, controller) {
function sampleDir () {
    return {
        /**
         * require is used by the link option
         * can be a single controller, or an array. '^myController', or ['^controller2', '^controller1']
         * controllers to be used in the link section. link (scope, element, attrs, requires)
         *
         * '^myController' - use ^ to search up the parents for the controller, otherwise it only looks at it's own element and will throw an error
         * */
        require : '',

        /* restrict what type of elements this directive is rendered on E=element <directive> or A=attribute <element data-directive> */
        restrict : 'EA',

        /* *
         * transclude in or outer scope. true = use the outer scope that this directive belongs to. false = create a scope inside the directive
         *      only use true when you want to create a directive that wraps arbitrary content
         *      when you use false and create a scope, you will want to pass in scope, or data through attributes on the element
         * */
        transclude : false,

        /* *
         * scope = create an isolate scope for the directive pass data into the directive through attributes
         *      This allows us to isolate the scope and reuse these directives throughout an app.
         *      =attr means to bind data to that attribute
         *      &attr means with transclude turned on this attribute will trigger evaluation of an expression in the context of the original scope
         *          any expression is allowed, including a function, this is ideal for binding callback functions to directive behaviors
         *          use this when we want the directive to expose an API for binding behaviors
         * */
        scope : {
            inputObject : '=inputObject',
            /*'close' : '&onClose'*/
        },

        /* templateUrl = Point to the template this directive should render */
        templateUrl : '/a/tpl/modules/util/input/inputs.html',

        /**
         * link : use link when you want to manipulate the dom with the directive
         * takes a function, inline or it can be dependency injected through requireJS
         * use the following signature function lin k(scope, element, attrs) { ... }
         *
         * scope is an angular scope object
         * element is the jqLite wrapped element that this directive matches
         * attrs is a hash object with key-value pairs of normalized attribute names and their values
         * */
        link : link,

        /**
         * Specify a controller, and use controllerAs to alias the scope, if you want to reference the scope or it's functions in the template.
         * You must define scope in the directive for this to be used.
         *
         * Q: What's the difference between controller and link? - A: Controllers can expose an API, and link can interact with controllers using require
         *
         * Best Practice: Only use controller when you want to expose the directive controller to another directive. Otherwise use Link
         *
         * This is great for building complicated directives that are made up of other directives and need to communicate with one another.
         * */
        controller : controller
        /*controllerAs : 'input'*/

    }
}

return sampleDir;
});

/**
 * Sample Link - an example of an external link function to be used with a directive
*/

define([], function () {
 /**
 * an example of an external link function to be used with a directive
 */
 function inputLink (scope, element, attrs) {
 scope.input = scope.inputObject;

 scope.typeUrl = '/a/tpl/modules/util/input/' + scope.input.type + '.html';
 }

 return inputLink;
});

 

Tighten Up – Simple rules for User Interface design

Part of my job (arguably, part of any coder’s job) is to do reviews of the mark up and user experience of the code created by my peers. I have a low tolerance for ugly: lint all the code you can (legacy apps can be tricky), and, if you can only follow one rule for layout design of a user interface, please line up your elements.

Exhibit A:

massDelete-uglyUI

This little dandy came by virtue of someone asking someone to do something. What we have here is a form element, placed haphazardly after a pile of sentences, all so jarringly captained by a red, capitalized ‘WARNING’ message. What’s happening here? Warning: leave this page before you screw something up.

Yet taking this aesthetically neglected interface into Photoshop and giving it a warm bath, we come out looking not too shabby.

Screen Shot 2014-03-14 at 5.29.02 PM

The red alert has been toned down from a screaming siren into a friendly yellow light: slow down. I took a rule line up the left side and pulled all the elements over, and then added equal spacing around buttons and between sentences. I’m not going to lie to you and say this is a marvel of interface design, it is a blue collar page working a blue collar job, but we can at least appreciate that following the simple rule of lining elements up visually does improve the general pleasantness of using this interface.

by Meaghan Bent

 

CoderDojo Toronto

CoderDojo is a global movement about providing free and open learning to youth, with an emphasis on computer programming. The Toronto chapter was founded to bring this movement to the GTA, inspire other chapters, and partner with other organizations to better introduce kids to coding.

coder-dojo

A previous post on this blog (The “Make-It-Fun Community Web-Dev Thinkubator”) outlines my goals for giving back to the code community. After doing some research I found CoderDojo, and through them a link to the year old and abandoned Twitter account @coderdojoto. After contacting my soon to be co-founder, we assembled a small team, and like it was no big deal we had our first session 6 months later.

As of 2014 we have secured a venue sponsorship with Bitmaker Labs, and a title sponsorship with FinanceIt, allowing us to focus on providing great coding programs to kids of all backgrounds and abilities. As one of 2 directors, this labour of love has proven to be a great experience for so many reasons.

 

Mobile App Notification Center – Front-End

The Notification Center of MediaFactory is a page that compliments the iOS and Andriod mobile applications. The function of the page is for producers to create their push notification

Technologies used: Core JavaScript, jQuery, Google Maps 3 API, jQuery Map UI, Filemobile API

How it all works: Working with RESTful API services that serve device location, this map populates with thumbnails that represent a device. Using the Google Map radius method which can be manipulated via form data or drag & drop, a producer can draw a circle around a group of devices, configure what they would like the push notification to say and where to swipe to, and schedule the notification to send now or in the future.

Who’s using it: Bell Media – CTV News, Network 10 Australia, USA Today, Filemobile

Notification Center

 

Google Map v3 w/ Clustering

This map is associated with UGC media geolocation metadata. It uses marker clusters to denote groups of media located close together.

Technologies used: Core JavaScript, jQuery, Google Maps 3 API, MarkerClusterer API, MediaFactory, custom made JSON

How it all works: To keep the JSON calls consolidated to a single server call, I created a custom JSON script with the proprietary Filemobile template engine (which is essentially a php abstraction layer) that gathers all the content into one script. From there, we initiate the Google Map 3 API and run it through the complimentary MarkerClusterer script that groups media with close geographic co-ordinates. For this iteration of the map, reliance on Google Maps jQuery plug-in was removed to reduce additional resource calls.

Who’s using it: Bell Media – CTV News, Hearst Communications, CBC Sports Day

CTV MyNews Map Cluster

 

Personal Website Redux

meaghanbent.com homepageI intend this to be a series of posts that roughly represent my progress through this spreadsheet’s priorities. As a web developer, it is a common feeling to know that your own profile site is out of date. In my case, it was not only out of date but it was purposefully lacking feeling. A few years back I realized that I had a vast and unrefined online footprint, exposing the growth of my career. A website from 2002 is certainly a lot different than that of 2013 and no developer wants to show off their first sites. But, what DO we want to show off? Projects we are proud of, our art, our process, what makes us unique, how we use the Internet, what drives us, where we’ve been and where we are going. All in one tight, sweet design that implies the richness of who we are in a package that is easily digested, not too stuffed with ego, and good looking enough to keep someone engaged.

Yesterday I wrote down the meat of what I intend to do. I realized that it was ego centric, an advertisement. I don’t want to advertise! Lord knows I don’t need anymore work. What I want to do is show off to my peers and motivate myself to learn. The focus of this website is to continue to expand my skills. Concepts, languages, rules, best practices, plug-ins, frameworks, libraries and fonts are all chugging along and if you wait 2 years to get to your own learning you will find that you’ve been slacking.

I’d been slacking.

Today I have a new site, which is basically just a prototype for a site but in the true spirit of Agility and iteration it is just the first step to be a playground to discover and build, a sweet pad to have pals over to, a curated collection of my work to vainly please myself and intrigue, woo and sometimes disappoint others. No worries, what’s for me is for you is for me!

See where I am today (www.meaghanbent.com) vs the document to get an understanding of how building a web project is a beautiful flower with room for unexpected growth.