Tag: code

  • Measure, then act

    Dan, a co-worker from Automattic wrote this in a p2 post today:

    Measure, then act. Almost every major decision we made was in response to real-world data. Often we would be surprised and have our expectations challenged, both in terms of what was NOT possible, but also what WAS possible.

    It reminds me of the old saying, “Measure twice, cut once”, and in software development, the more we measure, the more we discover.

  • Design and Discovery

    Design and Discovery

    [Discover is] the evolution of the design. The uncovering of new states and new ideas throughout the process itself.

    A nice long read from a colleague about his process of rebuilding VideoPress.

  • Best of #wcme15 Tweets

    Best of #wcme15 Tweets

    WordCamp Maine blasted off today, and it has been quite fun. MECA has been a wonderful host and has provided a backdrop of weird and wonderful art. Otto provided some yummy pizza. And Mendal taught me about the Periscope app. Before I head off to the after party, here is a list of some of my favorite tweets:

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    //platform.twitter.com/widgets.js

    https://twitter.com/wonderboymusic/status/599647116148011008

  • ClickVentures are better than videogames

    ClickVentures are better than videogames

    I don’t care what console you play, you will love the drama, the comedy, the sheer inventiveness of the ClickVenture. It’s like Zork, but with honest-to-goodness spit takes. It’s fucking funny, ok?

    Here’s all of ’em: http://www.clickhole.com/features/clickventure/

    The latest is a spy adventure, and it is both hilarious and infuriating. Let me know if you can “win” it. Please. Comment or email me if you figure that shit out. Other exciting escapades include surviving the first day of high school, and a harrowing sleepover at Brynna’s house.

    ClickVentures are better than videogames

  • Test-Driven Development

    Test-Driven Development

    On my recent trip to San Diego, my co-workers and I participated in something called a Code Retreat. It reminded me of my days in art school, when my professor would instruct me to hold my pencil in odd ways while drawing, which broke my reliance on muscle memory, and forced me to focus more on the process of mark making and see my task in a new light.

    A Code Retreat is kind of like that. You pair up with a buddy, and write some basic software as a team. Every 45 minutes you have to delete all of your code and start over. There are other limitations too, such as you cannot speak to each other for one cycle, or every function you write can be no more than 3 lines, or you can’t use `if` statements or any type of loop. These limitations force you out of stale habits and can profoundly change your perspective on tasks that have become too rote and rigid.

    On our retreat, we were tasked with making Conway’s Game of Life. Try Googling “Conway’s Game of Life” and you’ll see an easter egg of the game in action.

    My biggest take-away from the retreat, which was expertly run by the legendary Michael Douglas Adams, was a newly minted respect for test-driven development. One of the limitations of our game, was that it needed to be written in Node.js, and we had to follow the standard patterns of test-driven development. From Wikipedia:

    Test-driven development (TDD) is a software development process that relies on the repetition of a very short development cycle: first the developer writes an (initially failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.

    In my opinion, the short, quick iterations of TDD make for a cleaner and more logical end product where other developers can easily follow your process. My hopes are to inject these lessons in my day-to-day work.

    Fellow developers: if you ever get the opportunity to do a Code Retreat, jump on that train fast! You’ll be surprised what you learn when you hold that pencil differently.

  • Ferris Bueller, a hacker ahead of his time

    Ferris Bueller, a hacker ahead of his time

    Today, I’m taking  a break from battling software bugs so that my immune system can battle a fierce flu bug. I haven’t eaten anything all day because food makes my stomach burn. I’m overly hot one moment, and overly cold the next. Every muscle aches. I’m hoping a good night sleep cures it.

    In my weakened condition, I started thinking about 80’s movie chararcter Ferris Bueller, and how he got his fabled day off by hacking into his highschool’s database from a home computer. The movie was released in 1986, and I wasn’t really using computers at the time. I was just six years old.

    I don’t know about you, but I call bullshit! There’s no way Bueller’s highschool was storing records in a database that was accessible via the internet. Gopher servers first made their appearance in schools in 1992. I’d appreciate it if someone with a strong knowledge of computer history could weigh in.

    Ferris Bueller, a hacker ahead of his time
    Today I’m Cameron. Not faking it. “Let my Cameron go!”
    Drawing by samdrawsalot
  • Playing PacMan on the streets of Ferry Village

    Playing PacMan on the streets of Ferry Village

    The Google Maps Pac-man prank is one of my favorite April Fool’s gags of all time. Not only do you get to play Pac-man, but it is super fun to search through familiar places to find the perfect level.

    Check out this level from Ferry Village in South Portland, Maine.

    http://bit.ly/1BRAzBd

    It is a fairly challenging and fun level. Have fun!

    If you find any difficult levels, please reply.

  • Start your week off right

    Start your week off right

    So I’m finding that it is good to start my week by watching a presentation on computer programming. It really sets the tone for the days to come. Today, I have my co-worker Enej to thank for sharing the following presentation by javascript developer Angelina Fabbro:

    There are a lot of nice things to say about this presentation. It taught me what “grok” means, and it is a fine word. You can use it even if you are not a programmer. Look it up. The nicest thing I can say, though, is that is a helpful piece of advice for any intermediate programmer who is looking to get to the next level. Some key bullet points:

    • Ask “Why?” obsessively
    • Teach others, and speak a lot about the work you do
    • It is okay to be reckless when experimenting
    • Have opinions & principles
    • Think like a programmer when AFK

    I’m thankful that this video fell into my laptop at this precise time. It is very inspirational and just what I needed. Let me know if you watch it.

  • Span tag paintings

    Span tag paintings

    My pal Chris is artist always experimenting with new mediums. He was excited to find that if instead of a traditional canvas, you were to use a web browser, and instead of paints and paintbrushes, you were to use HTML span tags, you’d get an interactive image resembling 8-bit artwork. What the heck is that? Here’s the Mono Lisa, for example:

    Span tag paintings

    Note how the appearance changes dramatically if you resize the browser. Span tag paintings are responsive.

    In trying to create a photorealistic span painting of President Barrack Obama, Chris found that it was a rather tedious process. Thanks, Obama! I told Chris that using PHP I could teach a computer to make these paintings faster than he could. He was thrilled when my script produced the following image before he could finish his painting.

    Span tag paintings

    I then extended my script into this neat Backbone.js app, allowing Chris to upload any image which would automatically be changed into an HTML painting. I even built a color picker so you could limit the colors in your painting to a pallet of your choosing. Here is an image of acclaimed painter Bob Ross which was produced by script. Span tag paintings

    I’m glad that Chris made these paintings.  You can see some of his favorites here. I like how you can make different patterns by resizing the window, and then BOOM! the image jumps out at you as soon as you find the right size. We also discovered that image will repeat itself at regular intervals.

    Span tag paintings

    Pretty good. Pretty neat. Please reply with your own painting.

  • Maine WordPress Meetup summary March 2015

    Maine WordPress Meetup summary March 2015

    At this month’s meetup, we tried something different. Our intention was too lead a Node School style gathering, where we work on a project and learn to use the WP REST API.  Host Gary Thayer called it ‘Hands-on with JSON’.  Though I got some good feedback after the meetup, the workshop didn’t go quite as planned.

    I hoped we’d have a social coding session, where we’d each write our own javascript app. I made a fairly simple spec doc for the app, called Game-a-tron, and gave the option to write your own from scratch, or follow a step-by-step guide that I deployed t0 Github. There was a bit of reluctance to participate, and I instead used the overhead projector to walk us through my guide.

    What I learned

    If you are going to lead a coding workshop, you have to set the mood. Instead of participants sitting with their laptops on their laps, next time I’d like to provide tables. There should be open refreshments, and music. I think if I had put more effort into creating an informal hangout, people would have been less shy. We’ll get ’em next time!

    Personally, I found the endeavor worthwhile. I gained a deeper understanding of Git, and how it can be used as a teaching tool. Seriously folks, checkout nodeschool.io. They are doing some amazing things with educational Git robots, and interactive CLI lessons. I also became acquainted with Backbone.js, and how it is an ideal tool for communicating with APIs. Not too shabby.

    I’m thankful, as always for Hall Internet Marketing for hosting the event. Be sure to join us next month!

  • Flight of Phrase

    Flight of Phrase

    Children excel at silliness, often ad nauseam. Children are better than adults at learning new things. Can we learn more by being silly? I’d like to think so.

    In my first full-time gig as a web developer, my boss would sometimes sit next next to me as I built a website and micro-manage every color, every pixel, every word on the page. It could be frustrating to say the least, but at least I was getting paid to do what I love. And in spite of my complaining, I was learning a lo.

    One day this gentleman had a strange request. “When someone clicks on that button, I want a bunch of words to fly across the screen and then disappear,” he requested. “Why?” I asked. “Because I think it’d be cool,” he retorted. Touché mutha fuckah!

    Now what I should have said was, “That’s silly! And pointless besides. Let’s not waste a lick of time on it.”  Instead, I built the feature. It took me a few days. I was really into ActionScript at the time, and because I’m a winner  I built it with Adobe Flash. And that was it. I moved on to the next thing. The feature was barely used other than on that one website, and in the months going forward, ActionScript became less and less relevant. 3 days wasted. No big deal.

    F0ur years later, while looking through some old sites I had built, I clicked on a button, and whoa! Some words went flying across the screen. I thought,  “Heh. I remember that.” I proceeded to convert the ActionScript into a jQuery plugin. In the process I learned about 2 concepts that I still use quite a bit in my work today.

    1. Object oriented javascript
    2. Github

    Today  I can thank my old boss for teaching me that it is good to be silly sometimes. Check out FlightofPhrase in the jQuery directory. The plugin still works. It still makes words fly across the screen. It can’t be much worse than this.

  • That time I gave a talk about Chris, and was nervous

    Chris Sullivan is a pal of mine, a real stand-up dude, and a heck of a good artist. This one time, I gave a 4 minute talk about one of his art projects. You can watch it on the internet.

  • Using back-ticks with Slack mobile

    Using back-ticks with Slack mobile

    There are plenty of articles on hidden tricks in Apple’s operating system. Apple even has an app for that. Still, it is always a happy moment when I discover something new on my own.

    Today I learned how to add back-ticks while entering text. Why would you need back-ticks? Because that’s how you style your text as computer code. Just hold down the apostrophe key, and you’ll get an option to enter a back-tick. It is very handy for sharing code on the go via the Slack app.

    Using back-ticks with Slack mobile

  • Fun with WooCommerce

    Fun with WooCommerce

    One of my first big achievements as a software engineer was creating an e-commerce platform from scratch. It was only ever used on my clients’ sites, but it was pretty handy, helping small budding businesses process thousands of orders. It is still in use on a few sites today.

    I recently helped a friend switch their site over to WordPress. Their old site was running my aging e-commerce system, so I assisted them in upgrading to WooCommerce. I found the experience to be quick and painless. Woo was everything I could ask for in an e-commerce platform: it’s free version has everything a small shop could ask for, and paid extensions are available if you need get more complex.  My friend was able to get by with just the free version.

    As a developer, I found Woo very flexible. In just 2 hours, I was able to write a script that ported the past orders archived on my system into Woo. Here is a basic abstraction of how to programmatically add orders to Woo. Hope it helps if you ever need to do something similar.

    set_orders();
    
          // This assumes that all of your archived orders were processed with paypal,
          // and that you've already entered your paypal settings in the WordPress admin area.
          $this->gateway = new WC_Gateway_Paypal();
    
          foreach ( $this->orders as $order ) {
    
             // This will generate a new WC_Order object which is a custom post type of shop_order.
             // Sets the status to completed, because I assume if you are importing orders into Woo
             // the orders have already been processed.
             $args      = array(
                'status' => 'completed',
             );
             $woo_order = wc_create_order( $args );
    
             // A new WC_Order's date defaults to the current time.
             // Let's adjust it to the purchase date of your archived order.
             $this->set_date( $order->payment_date, $woo_order );
             // Adds billing / shipping address to the order
             $this->add_customer( $order, $woo_order );
             $this->add_items( $order, $woo_order );
             $num ++;
          }
          echo '
    ';
          echo "$num orders created";
          echo "n";
          print_r( $this->new_orders );
          echo '

    ‘;
    exit;
    }

    public function set_orders() {
    /**
    * Populate $this->orders with orders from your old system.
    * Ideally, $this->orders should be an array of objects where
    * each object contains all possible info about a past order.
    */
    }

    /**
    * Sets the date of the new woo order to the old order’s purchase date
    *
    * @param $orginal_date – the original date of purchase in some human readable format
    * @param $woo_order – the WC_Order object
    */
    public function set_date( $orginal_date, $woo_order ) {
    $args = array(
    ‘ID’ => $woo_order->id,
    ‘post_date’ => date( ‘Y-m-d H:i:s’, strtotime( $orginal_date ) ),
    ‘post_date_gmt’ => gmdate( ‘Y-m-d H:i:s’, strtotime( $orginal_date ) ),
    );
    wp_update_post( $args );
    }

    /**
    * Adds billing and shipping information from the old order to the woo order.
    *
    * @param $old_order
    * @param $woo_order
    */
    public function add_customer( $old_order, $woo_order ) {
    $woo_order->set_payment_method( $this->gateway );
    // The keys in this array are how woo formats an address.
    // The values can be formed to your old systems specs.
    // All keys are required. Leave value blank if not using.
    $address = array(
    ‘country’ => $old_order->address_country,
    ‘first_name’ => $old_order->first_name,
    ‘last_name’ => $old_order->last_name,
    ‘company’ => $old_order->address_company,
    ‘address_1’ => $old_order->address_1,
    ‘address_2’ => $old_order->address_2,
    ‘city’ => $old_order->address_city,
    ‘state’ => $old_order->address_state,
    ‘postcode’ => $old_order->address_zip,
    ’email’ => $old_order->payer_email,
    ‘phone’ => $old_order->payer_phone,
    );
    // Assumes that the billing and shipping addresses were identical
    $woo_order->set_address( $address ); // defaults to billing
    $woo_order->set_address( $address, ‘shipping’ );
    }

    public function add_items( $old_order, $woo_order ) {
    // loop through every item in the old order and add them to the new woo order.
    foreach ( $old_order->items as $item ) {
    // This assumes you’ve already imported or added products to Woo.
    // This also assumes your old products use some sort of variation logic ( like ‘size’ or ‘color’ ).
    // You could also use a different object such as WC_Product_Simple
    // What ever type of product you use, you’ll need to write some logic that maps your old product to a woo product
    $woo_variation_id = $this->map_product( $item );
    $product = new WC_Product_Variation( $woo_variation_id );
    $quantity = $item->quantity;

    $args = array(
    ‘totals’ => array(
    ‘subtotal’ => $item->price,
    ‘total’ => $item->price * $quantity,
    ),
    // assumes you’ve already configured your product attributes / variations
    // in this example we have size and color, like a t-shirt
    ‘variation’ => array(
    ‘pa_color’ => $item->color,
    ‘pa_size’ => $item->size,
    ),
    );

    $woo_order->add_product( $product, $quantity, $args );
    }

    // Adds a flat rate shipping line item to the order.
    // Assumes you’ve already configured your woo shipping settings.
    // You could get more complex if you need to.
    $shipping_rate_id = ‘wc_shipping_flat_rate’;
    $shipping_rate_label = ‘Flat Rate’;
    $shipping_rate_cost = $old_order->shipping;
    $shipping_rate_tax = 0;
    $shipping_rate_method_id = false;
    $shipping_rate = new WC_Shipping_Rate( $shipping_rate_id, $shipping_rate_label, $shipping_rate_cost, $shipping_rate_tax, $shipping_rate_method_id );
    $woo_order->add_shipping( $shipping_rate );

    // All of these totals are required, set them to ‘0’ if you don’t plan to use them
    $woo_order->set_total( $old_order->tax, ‘tax’ );
    $woo_order->set_total( $old_order->payment_total );
    $woo_order->set_total( $old_order->shipping, ‘shipping’ );
    $woo_order->set_total( ‘0’, ‘shipping_tax’ );
    // This will allow the imported sales to show up in reports
    $woo_order->record_product_sales();

    }

    /**
    * @param $product – information about a product from your old system
    *
    * @return int – should return a woo product id or a woo variation id
    */
    public function map_product( $product ) {
    // run logic to map your old product to a woo product
    return 1;
    }
    }

  • New development patterns

    I spent about 2 years developing plugins in the WordPress wilderness. In that time I became proficient in plugin architecture, in how to structure and organize your plugin so that it is optimized for scaling and maintenance. As I enter my sixth month working for Automattic, my fascination with coding architecture and patterns becomes deeper.

     One thing is clear: to thrive as a software engineer, it is of course essential to be fluent in many coding languages, but one must also be a connoisseur of application architecture. On a daily basis we work behind the scenes to create non-tangible architecture. And to me, it is most satisfying to see visualizations and hear descriptions of our work that gives our digital citadels a semblance of tactility.

    This week, at the behest of some co-workers, I watched a few great presentations on react.js, a newly-released javascript framework from the folks at Facebook. I want to re-share those videos here as a reminder of how much has changed since I was strictly a plugin developer. Change is good. It is never good to get too comfortable as a developer. We are always looking for better ways to write code-poetry and build Fallingwater web apps.