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;
});

 

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.

 

Team meeting and SCRUM strategy

Mondays
Email from Lead Project Manager to All Staff with bullets outlining the coming week’s work to be accomplished by each resource. This benefits each employee to know what is expected of them, and lets the product and management team have a viewable checklist of what they can expect to have accomplished. It also emphases the important of not derailing the resources with off the radar tasks, and asks if they can be prioritized for the following sprint (2 weeks) instead.

No *SCRUM are required on Mondays, but the team is encouraged to speak to their peers for needs they in shared projects.

End of day project report required. Time is logged toward sprint bugs. Note for Tuesday stand-up meeting to speak about whether the programming tasks were successful, and if not, what was in your way and how that impacts the sprint.

Tuesday – Friday
15m SCRUM details whether or not you logged 5 hours of programming time toward your milestone and if the time estimate it took to complete was approximately correct.

End of day project report required. Time is logged toward sprint bugs. Note for Tuesday stand-up meeting to speak about whether the programming tasks were successful, and if not, what was in your way and how that impacts the sprint.

Friday
In addition to SCRUM meetings, each team attends a 1 hour general meeting @ 3pm to recap the week and talk about ideas. The teams, in our case Back-End team, Front-End, & Product Team (includes project & product management + QA, covers assessment of the resource calendar and alignment of info on the wall board). We will alternate meeting spaces weekly as to each have an opportunity to use The Lounge™, boardroom and lobby spaces. Following, at 3pm all teams meet together in The Lounge™ for a similar style meeting with each team having a representative to explain what their team achieved and bring to the table ideas, or the progress on ideas. Beer during and foosball after.