09. May 2016

Becoming A TPM

This Drupalcon session is about managing your projects from a technical level. I'm not really a project manager but I'm trying to get better at managing large projects so I can make sure me and my developers make the right choices.

The Dos and Don'ts of Technical Project Mangement

Definition of a Project Manager - hearding cats. Hopefully the audio & slides get posted on the Drupalcon site.

Taming two lions:

  • Clients
    • need proper expectations
    • need educations
    • need big dreams brought to reality
      • firm empathy
  • Developers
    • Don't need distractions
    • Communicate red flags to the client
    • Need to fed words of encouragement

Technical Project Manager

  • competent folks who worked up the technical ranks
  • became project leader through wit and skill
  • able to communicate clearly to the non-technical
  • Time <> Money <> Features
  • Trying to figure the actual solution
  • Daily life
    • write a few status reports
    • compose a dozen emails, take more calls, chat on slack, send more emails
    • help team prioritize the latest set of technical issues
    • assist in identifying the problem at the root of several technical issues
    • employ one or more mitigation strategies for technical risks
    • !!! pull at least one person out of tempting rabbit-hole

Transitioning to a TPM

  • PM -> TPM
    • Understanding Drupal
      • Structure: Learn the Drupal Basics
      • Tools: How Development is done
      • Investigation: How to find the problem
    • Research
      • Dismantle to learn
      • Stack exchange, Stack overflow, drupal.org
      • Learn the fine art of boolean search operators
      • get thee to meetups! (I like this one as an idea for people to learn)
    • Hands-on Learning
      • Dive into techincal support
      • Create documentation
      • Assist during emergencies
      • Take notes, ask questions, take on tasks
  • Dev -> TPM
    • Mental shift of what a workday looks like
    • keep troubleshooting skills sharp
    • develop empathy and interpersonal skills
    • verbal judo (how to verbally de-escalate)
    • Challenges
      • Communicating clearly, non technically
      • document ALL THE THINGS
      • balancing thinking time vs talking time
        • Don't book meetings back to back
        • every half of meeting you have you need at least that much time to do the work
      • people coaching skills
        • Don't bully your developers

How to rock as a TPM

  • Quick tips
    • clear your inbox before EOD
    • understand priorities
    • stay close to the code
    • own your mistakes and your developer mistakes
    • be available, be calm
      • sometimes it's good to help out randomly late at night
    • double your estimate, both time & money
    • know when to ask for help
    • be humble, curious and unexpecting
    • know when to shut it off
  • Trust your gut
    • if you think we're going to be late, talk to them early.
  • Know how to read people
    • Face-to-face meetings are best with clients
  • Understand balance
    • balance clients needs with your developers skills

Getting into the weeds

  • Creating Tasks
    • understanding the problem
    • co-create the solution
    • write testing criteria to define done
    • determine estimate
    • check in on developer early
  • Create a User Story
  • Estimation
    • You're going to mess up a lot!
  • Toolbelt
    • Channels of communication
    • development methodologies
    • project management tools
    • automated reminders
      • set a reminder the second you say you'll do something at a particular time
    • testing, testing, testing
  • firefighters
    • intense client situations
    • budget / timeline / scope changes
    • magic words
    • keep calm

What does success look like?

You never know if you've made it, just like everything else in life.


They said "hey it's just a website" which is what we've been saying which is awesome! Being a TPM is a big thing, curious if this is sort of the role I'll be falling into or not. I did find some good things I'll be sharing with our product owners.


09. May 2016

Next-Level Drupal - Applied progressive decoupling with JavaScript

This is my first Drupal session I attended about decoupling Drupal from the frontend and using a JavaScript framework. This is interesting to me because I sit on the fence as a Acquia Certified Drupal Developer & a JavaScript developer who wants to do everything in JavaScript these days. Once again this is uploaded right after the session so probably has typos.

This talk was presented by:

  • Matt Davis (Mediacurrent)
  • John Kennedy (Acquia)
  • Preston So (Acquia)

This talks page is up on the Drupalcon site where there will probably be more good info.

Risks & Rewards

Decoupled Drupal is the process of employing a difference front end from Drupal's own (most often in a JavaScript or native application framework). This decopuled front end speaks to Drupal via RESTful API.

Using Drupal soley as a data serive is not a new concept; Services modules existed on Drupal 6 & 7. It can be used to do lots of things but we're really just focusing on the frontend today.

With Drupal's page model you have a full page refresh on every page load which is what using a JavaScript framework would solve.

Decoupled Drupal is important because you can use whatever language you want to accomplish your site. Freedom! You can have a single REST API that handles lots of different frontends.


  • Seperation of concerns.
  • Content syndication (write once, publish everywhere)
  • Differentiated deelopement velocities between front and backend


  • Additional point of failure
  • No cross-site scripting or input sanitization
  • no in-place, in-context edition or administration
  • no layout and display management
  • no previewable content workflow
  • no modules affecting the front end
  • no system notifications
  • no BigPipe progressive loading or cache tags
  • no accessible markup or user experience benefits.
    • Drupal 8 has built in accessibility :)

When should you do this?

  • A site powering one of more other sites
  • a site powering one of more other applications
  • a site powering multiple sites or applications
  • you don't need the overhead of a decoupled architecture to power a standalone site or application

Why progessivly decouple Drupal

Don't use the JavaScript framework on it's own, put it in Drupal and let Drupal serve it up a bit too. Most of things are served up by Drupal with parts handled by a framework.


  • no additional point of failutre
  • cross-site scripting protection
  • in-place , in context editing and administration
  • layout and display management
  • previewable content workflow
  • modules affecting the frontend
  • system notifications
  • BigPipe progressive loading and cache tags
  • accessible markup and user experience benefits.


Weather.com has been progressively decoupling Drupal for a couple years.

Before Drupal

  • 144 origin servers in three data centers
  • 50 million page views per day, half going to origin
  • forecasts for over 2.9 million locations
  • hundres of dynamic weather maps


  • performacne and caching
    • split page up into wrapper and panes
    • same wrapper from origin to everyone
      • header & footer is cached and same to everyone
    • edge computations using ESI
    • client-side rendering using Angular
  • frontend developer team in house
    • JavaScript developers want to write JavaScript
    • don't want to learn Drupal APIs
    • want to keep up with JavaScript
  • editional team
    • want intuitive ways to create pages
    • want to work indepndently


  • Presentation framework
    • mechanism for putting components into pages
    • supports Angular, PHP, and static templaces
    • modules served by Drupal or ESI
  • why panels?
    • variants and selection rules
    • reusable and exportable pans
    • context
    • drag & drop interface

Framewordk-agnostic progressive decopuling


  • give JavaScript developers flexibility
  • keep some guard rails in place
  • preserve strong editorial experience

in Drupal 8

  • Decoupled Blocks module in development
    • Built on top of blocks
    • Already supports Angualr 2 and React, more comingi
    • developers can tightly copule component functionality to Drupal's exising system of rendered entities.

Final thoughts

My notes on this were pretty rough, but this semes like what we need to start doing on our sites, wanted to for awhile and it's the mix people now talk about where you get server & client rendering. The module they're working on seems cool because you can make rich dynamic blocks and people can just throw them wherever they want on the page.

21. February 2016

Canvas Helicopter Game

I made another game in canvas! This time I went for the classic flash game where you're a helicopter in a cave trying to not hit the stalagmites & stalactites (think flappy bird but from 2000). Here's the game:


See the Pen Canvas Helicopter Game by Josh Fabean (@fabean) on CodePen.


This continues my quest of trying to get better at making games in JavaScript. As a side note I coded most of this game in a plane on the way back form Mexico. The hard thing I had to figure out here was collision with moving objects. I feel like this is probably the easiest game to calculate that since I'm just drawing rectangles and nothing too crazy yet.

My function to calculate this is pretty simple and is as follows, where path is an array of all the rectangles drawn on the screen (and they're the black part of the game).

let calcCollision = () => {
  // loop through path and see which one I'm current in
  for (let i=0; i<path.length; i++) {
    if (path[i].x < dot.x && path[i].x+PATH_WIDTH > dot.x) {
      // this means this is the path youre currently in

      if (path[i].y > dot.y || path[i].height+path[i].y < dot.y) {
        console.log('you collided');
        startScreen = true;

I learned a decent amount making this game, and I think I'm going to figure out how to put it on a phone as an app which should take a couple hours. You can also see this as a git repo up on github if you wanted to fork it and have it be your own thing.

Hopefully this pen inspires you and make you want to learn fun stuff.


14. January 2016

Random Particles in Canvas

I made some randomly generated particles in canvas, best part is it made it to the front page of CodePen!


See the Pen Randomly Generated Particles by Josh Fabean (@fabean) on CodePen.


The bulk of the work I had to do was pretty simple, just loop and randomly come up with some numbers and use those numbers to display things on the screen.

for (let i=0; i<amountOfParticles; i++) {
  particles[i] = {
    y: Math.floor(Math.random() * canvas.height),
    x: Math.floor(Math.random() * canvas.width),
    speedX: (Math.floor(Math.random() * maxSpeed + 1) * (Math.random() < 0.5 ? -1 : 1)), 
    speedY: (Math.floor(Math.random() * maxSpeed + 1) * (Math.random() < 0.5 ? -1 : 1)),
    color: randomColor(),
    radius: Math.floor(Math.random() * maxSize)

Once I've done that, in my render function I basically loop over it again but this time fill in some circles with the information I have.

for (let i=0; i<amountOfParticles; i++) {
  if (particles[i].x >= c.width || particles[i].x <= 0) {
    particles[i].speedX = -(particles[i].speedX);

  if (particles[i].y < 0 || particles[i].y > c.height) {
    particles[i].speedY = -particles[i].speedY;

  particles[i].x += particles[i].speedX; 
  particles[i].y += particles[i].speedY;


let drawCircle = (circle) => {
  ctx.fillStyle = circle.color;
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, true);

All in all a very simple task, that a month or so would have been super confusing to me. Now that I've made a couple different projects using canvas it's not some weird mythical thing.

You should play with canvas and learn a lot!


02. January 2016

Pong In Canvas

I started playing with Canvas last year, but I finally made a game now!


See the Pen Pong in Canvas by Josh Fabean (@fabean) on CodePen.


I followed along on Chris Delong's tutorial on Udemy. I'd suggest doing that too if you're at all curious on how to do this. Once you get going it's not really too hard, and is a lot of fun.

2016 is going to be a good year of me making game and fun web projects. Look forward to it!


10. November 2015

I Played With Canvas

I started to learn canvas, and one of the first things you learn how to do is make rectangles and circles. I decided to make a random circle generator just to figure out how to do it. Turns out it's actually quite easy, well here it is.


See the Pen Canvas Random Circle Generator by Josh Fabean (@fabean) on CodePen.


The main magic happens on here:

function drawCircle() {
  let weight = Math.pow(Math.random(), 2);
  let seed1 = Math.floor(Math.floor(weight * ((min / 2) - 0 + 1)));
  let seed2 = Math.floor(Math.random() * canvas.height);
  let seed3 = Math.floor(Math.random() * canvas.width);
  let primary = '#'+Math.floor(Math.random()*16777215).toString(16);
  let secondary = '#'+Math.floor(Math.random()*16777215).toString(16);
  let arc = {
    x: seed3 - (seed1 / 2),
    y: seed2 - (seed1 / 2),
    r: seed1,
    shadow: !(Math.random()+0.5|0),
    blur: Math.random() * (10 + 1),
    color: (!(Math.random()+0.5|0)) ? primary : secondary,
    stroke: Math.random() * (15 + 1),
    fill: !(Math.random()+0.5|0)
  ctx.arc(arc.x, arc.y, arc.r, Math.PI * 0, Math.PI * 2);

  if (arc.fill) {
    ctx.fillStyle = arc.color;
  } else {
    ctx.strokeStyle = arc.color;
    ctx.lineWidth = arc.stroke;
  if (i < 2000) {
    }, 10);

I based on the size of the canvas figure out what sizes of circles I can make, quick a random color using '#'+Math.floor(Math.random()*16777215).toString(16); which is a pretty cool way to to do it and I got it from Paul Irish. Then I based on all the values I got print the circle onto the page.


23. October 2015

Microsoft Sculpt Ergonomic Keyboard

I'm normally not a fan of promoting products, but this one has literally changed my life. As is semi common for a developer I started developing RSI about two years ago. I like all smart people pretty much ignored it for the first six months. After that I actually tried everything I could think of to make my wrists feel good, I would ice my wrists, use my mouse with my left hand, and not use my right hand for anything beyond typing. Nothing helped, and I pretty much just gave up and accepted my fate.

Maybe two months ago I finally decided to take the leap and get an ergonomic keyboard, and within one week my wrists were back to maybe 80-90% health. Now I would say my wrists are 95% healthy only slight pain at harsh angles some of the time. I actually got a couple different people at work to make the switch too.

You might be thinking but ergonomic keyboards are lame and I completely agreed with you until I got this keyboard. It was suggested on Shop Talk Show Episode 183, and The Wire Cutter two pretty reliable sources. You've been dealing with wrist pain enough you should just take the leap.


11. October 2015

Drupal Delete Users Cart

I just pushed up my first Drupal module, though it's currently only a sandbox module. It's also up on GitHub in case you don't want to look around awhile to find where Drupal hides it's code for sandboxed modules.

This is a module that I'm sure only one other person in the history of the world has ever needed, but I'm excited nonetheless. The description of the module is as follows:

In rare instances you need to delete everything out of your cart, unfortunately there is no great way to do this out of the box, that's what this module tries to remedy. Once installed you need to create a link for the user that goes to /cart/$user_id/delete this will then redirect them to whatever page you configure.

The instance I ran into where we need this is someone will be on the phone with a customer placing the order for them as a reseller. Then that user is like "oh nevermind", but they've already gotten far enough they don't want to go back a bunch of time and change all the fields so they just push this button. The biggest issue we were running into is we are using Auth.net hosted CIM which uses email and ID to create a new customer, so if you get to the last page of checkout then they change their mind you've already created them in Auth.net which we cannot let happen.

This is the main magic that happens:


function commerce_delete_cart_menu() {
  $items = array();
  $items['cart/%/delete'] = array(
    'title' => 'Delete Commerce Cart',
    'page arguments' => array(1),
    'page callback' => 'commerce_delete_cart_main',
    'access callback' => TRUE,
  return $items;

function commerce_delete_cart_main($uid) {
    ->condition('uid', $uid)
    ->condition('status', 'checkout_%', 'LIKE')
    ->condition('uid', $uid)
    ->condition('status', 'cart')
  $redirect_url = variable_get('commerce-delete-cart-redirect', $defaults['commerce-delete-cart-redirect']);

When you go to /cart/$user_id/delete it runs the function commerce_delete_cart_main which then goes and deletes straight out of the db all entries it could be. I need to combined those two db_delete into one, but the Drupal documentation on that didn't click for me in under 5 seconds so I skipped it.

One of the cooler things I did for this was making it user configurable which is pretty much required when you're looking to pass something off to the community.

I hope someone finds this module and it helps them, as I sure would have liked to find this last week.


10. October 2015

My CodePen Saturday

After Blake's CodePen talk about using CodePen just to have fun I made three pens in one day! It ended up basically being Pixel Art Saturday, All my pens have to do with pixel art as it's my favorite.

The first pen I made was this little Sonic Pixel Art guy. I sort of want to make him run around but this alone took me 1-2 hours to just do this one sprite. To make it run I'm looking at maybe 8 hours or so. I might do it, but not the point of a fun CodePen Saturday.


See the Pen Sonic Pixel Art Pure CSS by Josh Fabean (@fabean) on CodePen.


Then I made a 16x16 pixel random art with a Sass loop to randomize the colors. I was inspired by this picked pen which is a 10x10 random CSS pixel art block, you will see how similar it is.


See the Pen Random Pixel Art Generator by Josh Fabean (@fabean) on CodePen.


After that I did it again, but with JavaScript just to see it both ways. The one thing I learned is with JavaScript you cannot use HLSA colors so I wasn't able to color coordinate it as much as my previous pen. I did however make it change what the colors are all the time for fun.


See the Pen Random Pixel Art with Javascript by Josh Fabean (@fabean) on CodePen.


CodePen is a great place to learn, get inspired, show off your work, but most importantly to me it's a great place to have fun. Go out and do something you've never done before just for fun on CodePen.


06. October 2015

CodePen Meetup KC

CodeKoalas just yesterday hosted their first (Kansas City's second) CodePen Meetup! We had between 20-25 people show up, there was snacks, drinks, video chats with Tim Sabat, random Google Forms, Blake & I gave talks, then we went across the street to Ruins Pub.

You can see Blake's presentation on Mental Fatigue up on GitHub. and I spoke on my Ultimate Tic-Tac-Toe Pen I made with a node.js matchmaking server. You can view and try to play the game right here, it's pretty cool.


See the Pen CodePen Multiplayer Tic-Tac-Toe Game by Josh Fabean (@fabean) on CodePen.


I've written about this game enough so I don't want to go too in depth on it but you can see my presentation up on CodePen.

It was a lot of fun meeting new people in the City who are excited and work with the same things we work with. We also got to see some really cool work that people do. I cannot wait until the next CodePen meetup!