09. May 2016

Ask Not What Open Source Can Do For You...

This talk was really good but I totally failed at taking notes for it.

You can watch this on the Drupalcon site! Talked about why being involved in open source is important.

Innersource use the lessons you've learned and then write about that and open source your lessons. So you're not giving away code but you're giving away lessons.

09. May 2016

DrupalCon New Orleans Driesnote

These are my notes while listening to Dries talk to open up Drupalcon New Orleans 2016. It is probably full of typos and weird things, I'll be cleaning this up later (hopefully).

Drupal 8

  • We actually realeased Drupal 8!
  • tripled contributors compared to Drupal 7
  • Also released Drupal 8.1 on time
  • Drupal 8 had 60,000 sites in 3 months, much faster than the 7 months it took for Drupal 7.
  • Port more modules!

Market Perspective

  • Richness
    • How many capabilities it has
  • Reach
    • How many people use it

Things like Angualar have a lot of reach, but not a ton of richness because it's new and doesn't have the thousands of APIs that Drupal has. Then there are things like enterprise solutions which are full of features but don't have much reach because they're so expensive. Drupal hopefully is moving towards somewhere in the middle, lots of reach and lots of richness.

Thousands of Drupal sites small & large:

  • Cisco built a customer service portal in Drupal and is saving tons of money from this solution.

Survey Says

2,900 people answered Dries survey from a very broad range of backgrounds. (should pull his blog to put here).

  • Who should we favor when making product decisions?
    • Mostly needed to improve for the non technical positions (content authors, site builders)

Proposed Initiatives

We will look at the survey data and look at our vision which is, build the leading platform to assemle the world's best digital experiences. Also need to look at the market, and have a discussion because collaboration is the essence of Drupal.

Lets propose some initiatives!

  • Media Initiative
    • Authors and editors need simple drag & drop media interfaces
  • Workflow Initiative
    • Give autohors and editors easy to use tools to share, review and approve, stage and collaborate on content before it's live.
    • This already has a team working on it. (link to blog about details)
  • Blocks and layout Initiative
    • Give sitebuilders an easier way to manage blocks & layouts. (totally missed what he said here, it was so fast).
  • Data Modeling tools Initiative
    • Add create content types & relationships super easy.
  • API-First Initiative
    • Integration with o... bleh
    • consolidate our rest api modules into one module to make things simpler.
    • Tesla powers their app using Drupal 8
  • Theme Componenet Library Initiative
    • wow he's really flying through these
    • Atomic design
  • Cross Channel
  • Orchestration

Showed some cool video about using Alexa to tie into a Drupal 8 site.

Need to think about editing content beyond pages.

Key Takeaways

  • Doing better than Drupal 7
  • We can reinvent ourselves and leapfrog over the competition.
  • We're playing the long game, but we will win.
  • We measure sucess not by a module making it to core, but wy it being easy for people to use.

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.

Takeaway

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.

:wq

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.

Rewards

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

Risks

  • 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.

Rewards

  • 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

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

considerations

  • 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

Solution

  • 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

Goals

  • 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.

:wq

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;

  drawCircle(particles[i]);
}

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

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!

:wq

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!

:wq

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() {
  i++;
  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.beginPath();
  ctx.arc(arc.x, arc.y, arc.r, Math.PI * 0, Math.PI * 2);

  if (arc.fill) {
    ctx.fillStyle = arc.color;
    ctx.fill();
  } else {
    ctx.strokeStyle = arc.color;
    ctx.lineWidth = arc.stroke;
    ctx.stroke();
  }
  if (i < 2000) {
    setTimeout(function(){
      drawCircle();
    }, 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.

:wq

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.

:wq

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:

<?php

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) {
  db_delete('commerce_order')
    ->condition('uid', $uid)
    ->condition('status', 'checkout_%', 'LIKE')
    ->execute();
  db_delete('commerce_order')
    ->condition('uid', $uid)
    ->condition('status', 'cart')
    ->execute();
  $redirect_url = variable_get('commerce-delete-cart-redirect', $defaults['commerce-delete-cart-redirect']);
  drupal_goto($redirect_url);
}

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.

:wq