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.

 

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.

 

The “Make-It-Fun Community Web-Dev Thinkubator”

Temple_Grandin_at_TEDTEDTalks. What a great execution of a fabulous concept: give brilliant minds a forum to speak to the world. Recently I watched a talk by Temple Grandin (The world needs all kinds of minds), legendary livestock facility designer, about how to engage the minds and interests of kids on the autism spectrum.  Not only did it make me question where on the spectrum my brain lies (pattern thinker with highly social learned behaviour?), it also inspired me to use my skills in web development, project management, community organizing and idea generation into something to help engage youth into the awesome power gained through knowing how to create a web site.

Elevator Pitch:
The Make-It-Fun Community Web-Dev Thinkubator is a free short-term Summer workshop for marginalized youth with limited access to computer resources to learn how to think about and execute a web project that will benefit their community.

This will be an entry level work shop to teach the skills of brainstorming, forming project goals & requirements, planning, and  non-programming (WordPress) web site creation. The applicant will be required to submit their idea for a website that will benefit their community, of which concepts may or may not be adopted by the workshop as part of the end product.

My goal for this project is to show kids how fun web development is and to have work together to develop a project that will be used in the real world to help their community.

The expectation is that the kids will get to experience and find their strengths within the follow roles:
– Product development
– Social media marketer
– Technical analyst
– Web Developer
– Graphic Design

The next step is to find a home for this project. Following that will be the challenge of finding mentors who will volunteer to share their skills as developers.

 

Google Map API V3 – Lat and Long values change

I was struggling with this for a while and have now learned 2 valuable things.

1. I solved my problem where Google Maps API was changing the internal variable names of it’s Latitude Longitude object, which was intermittently causing me errors.

2. How to turn an object’s keys into an array, and then use the arrays to call the object with variables.

The two step process looks like this:

  1. Loop through the object and push into a new array:
    var newArray = [];
    
    for (var key in latLng) {
    
       newArray.push(key);
    
    }
  2. Call your object with variable values with the square bracket syntax, dot notation breaks:
    var lat = latLng[newArray[0]];
    
    var lng = latLng[newArray[1]];

Find my answer on StackOverflow here: http://stackoverflow.com/a/14967355/994397

 

Map comment location with geocode on Google Map

In this post you will see how I cobbled together information from other genius people to create a plotting of a commenter’s supplied geographic location. To do this I extended the comment field to accept location, built a new feed template formatted for GeoRSS and used the Google Maps V3 plug-in to create a short code.

I’m not going to tell you this is the BEST way to do it, or that there aren’t other ways to do it. But I will tell you that it gets the job done. Any suggestions on how to improve this process are much appreciated.

Here are the elements I used to achieve this. Let’s talk about them:

1. Comprehensive Google Map Plugin

Install and activate this plug-in. It touts itself as a simple and intuitive, yet elegant and fully documented Google map plugin that installs as a widget and a short code. No limited plugin editions or limited functionality! This is the full version of this free and premium plugin.

Get it: http://wordpress.org/extend/plugins/comprehensive-google-map-plugin/

2. Creating a geoRSS feed from WordPress

Take a look at this back-to-basics tutorial for generating a geoRSS feed from WordPress, correctly formatted for use in Google Maps KML layers.

View it here: http://www.strangerpixel.com/2011/03/creating-a-georss-feed-from-wordpress/

3. Search MySQL

If you aren’t so handy with the database search query syntax of WordPress, here’s something to look at. I didn’t use code from this directly, but it gave me an idea of how to write the query properly.

View it here: http://stackoverflow.com/questions/4443280/php-mysql-search-query

4. The Google Geocoding API for php

Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map. The Google Geocoding API provides a direct way to access a geocoder via an HTTP request. Additionally, the service allows you to perform the converse operation (turning coordinates into addresses); this process is known as “reverse geocoding.”

Find the quick API url for doing the job, plus MUCH more here: https://developers.google.com/maps/documentation/geocoding/

5. Putting it all together:


$id = '91'; //hacky way to pass the post id, as a GET will not work via the GeoRSS ingestion:

echo ‘‘; ?>

 

 



get_results($wpdb->prepare(”
SELECT $wpdb->posts.*
FROM $wpdb->posts
WHERE ID = ‘”.$id.”‘
“));
?>

post_title; ?> – Jamaica Plain, MA


42.3068523 -71.1121722
42.3068523
-71.1121722

get_results($wpdb->prepare(”
SELECT $wpdb->comments.comment_ID, $wpdb->comments.comment_content
FROM $wpdb->comments
WHERE comment_post_ID = ‘”.$id.”‘
“));
$count = count($comments) – 1;

for($i = 0; $i get_results($wpdb->prepare(”
SELECT meta_key, meta_value
FROM $wpdb->commentmeta
WHERE meta_key = ‘_iti_ccf_post_location’
AND comment_id = ‘”.$comments[$i]->comment_ID.”‘
“));

$countj = count($commentmeta) – 1;
for($j = 0; $j meta_value;
$address = explode(‘ ‘,$address);
$address = implode(‘%20′,$address);

$geocode=file_get_contents(‘http://maps.googleapis.com/maps/api/geocode/json?address=’.$address.’&sensor=true’); $output= json_decode($geocode);
$geoLat = $output->results[0]->geometry->location->lat;
$geoLon = $output->results[0]->geometry->location->lng;
$coords = $geoLat.’ ‘.$geoLon;
?>

post_title; ?> – meta_value) ?>


comment_content?>