01. September 2016

100 Days of Code - Day 1

Some people at work, Code Koalas, have decided to start doing the 100DaysOfCode. So I decided to do it too! I created a Trello Board where me and some people from work have posted their ideas on possible projects or things they want to learn. I don't have a ton of time as I'm currently at work staying late on projects and took a hour break to do this. But here's a link to my commit I got pretty far because I've previously created a Canvas template in CodePen which had probably 75% of that code you see.

I'm not 100% sure what I want to do with this project but right now the plan is for an Asteroids type of game. I'm trying to think of some cool multiplayer aspect to the game.

Well thanks for reading have a good night.


02. June 2016

Pocket Chip

I preordered a PocketCHIP and so should you! Seriously buy it now. Think GameBoy Color & Rasperry Pi put together and pre-built for $50 + s&h. The PocketCHIP runs linux, has a touchscreen and keyboard and runs PICO-8 which is a super cool retro fantasy console which you should just buy now and play with today. I also bought PICO-8 so I could play with it today (really last week) and start building a game. All the games are written in Lua (a language I don't know but looks similar to Python and seems to just make sense) and it has sprite builders and music editors built into it. It's a really cool thing and I'll be playing with it when I get it in June.

24. May 2016

Training Friday - Frontend Performance

Last week's training Friday at Code Koalas I spoke on frontend performance. As you probably know websites these days are super bloated and slow. I gave a quick talk based off of Josh Koenig's session at Drupalcon

Like always I made my presentation with reveal.js and put it up on CodePen. You can go through the whole presentation below:


See the Pen Frontend Performance by Josh Fabean (@fabean) on CodePen.



*This blog was written while on narcotics as I crashed my motorcycle a couple days ago and I'm still recovering.

20. May 2016

Training Friday - Headers in HTML

My first teaching on Friday was about Header elements in HTML, you know like h1,h2,h3,h4,h5,h6. All my information for this presentation was off mdn like where I get most of my information.

I made my presentation with reaval.js and put it up on CodePen. You can go through the whole presentation below:


See the Pen What's a Header Tag by Josh Fabean (@fabean) on CodePen.



*This blog was written while on narcotics as I crashed my motorcycle two days ago and I'm still recovering.

20. May 2016

Code Koalas - Training Fridays

At Code Koalas we have brought back company lunch & training Friday's a couple of weeks ago. Everytime I make a presentation I'll post it here.

So why are we training people? That seems like a simple and dumb question but lots of companies don't invest in training. A good quote shared by Robert Manigold on this subject is:

CFO to CEO "What happens if we invest in developing our people and they leave us?" CEO "What happens if we don't, and they stay?"

McDonald's trains their employees how to make hamburgers, why shouldn't we train our people the proper way to program?

We came to a point in our company where we were able to make the decision of whether we start hiring more senior people or if we stick with junior people and teach & train them to be better. We decided that our company culture was one where we hire people who are forever learners. So then the next question was how do we encourage this?

We bought everyone a Kindle Paperwhite and give them a $50 a month (per person) for learning purposes. We said they can buy books, training videos, take people out to lunch who are smart basically just whatever it takes to get better.

We also every Friday have three presentations by team members to raise the general knowledge of everyone in the company. One person speaks about programming fundamentals like HTML, CSS, JavaScript or PHP. Another person speaks on something cool they learned or built this week and shows it off. The finally someone does a walkthrough or QA of a product that's supposed to be ready or almost ready for launch.

So far I think this has been going well and it will help raise everyone's knowledge and willingness to learn & grow.


*This blog was written while on narcotics as I crashed my motorcycle two days ago and I'm still recovering.

11. May 2016

Using Paragraphs to Weave a Beaufitul Content Tapestry

Paragraphs is a pretty great module for making landing pages or reusable components that get thrown in multiple spots on a site. I've been using it for probably 6+ months and we've used it on multiple pages in production. this session made me realize some thing I could do to do it better.

Presented by David Needham & Les Lim. View the slides! also view the session page on Drupalcon.

Why would you use Paragraphs? You want two columns on a page, but you want it to be easy for the author. Don't do HTML in the body field, that's a blog and not nice.

  • Blobs
    • bad for computers
    • bad for non-coders
    • bad for maintenance
  • Alternatices to blobs
    • fields & template files
      • extremly felxible
      • difficult to change
      • difficult for non-coders
    • fiels & display suite
      • UI interface available (to admins)
      • reusable templates
      • doesn't need custom code (but it helps)
    • panels
      • just don't it is the worst (my words, not theirs)
    • Paragraphs!

Paragraphs lets site builders weave together beautiful (good for people) pages using clean, ordered, XML-friendly (good for computers) content.

How Paragraphs work

  • Paragraphs replace the Body field
  • Many paragraph types can be created
  • each paragraph type can have a different set of fields
  • some examples of paragraph types:
    • "Content" Paragraphs
      • Text
      • Pull Quote
      • Image
      • Video
    • "Layout" Paragraphs
      • Aside
      • Accordion
      • Two Column
    • Pony
      • Specialized use cases for your particular client

At this point my mind has been blown on how to make Paragraphs easier for clients. Spliting layout & content into seperate things would be a great idea!

Using in Drupal 8

  • Installed
    • Paragraphs
    • Entity References Revisions

11. May 2016

Real Talk on Front End Performance

Well this session started off with the presenter Josh Koenig singing so you know it's good. See the session page.

Time is holy and every moment previous! We have been trending in the wrong direction with web performance.

All the wonderful things you do on the backend don't matter if your site's front end sucks!

Your server response time does not matter if your user experience is super sucky.

Performance is moving up the stack.

Having websites perform faster means everyone wins and mkaes more money, that is important and stake holders need to know this.

How fast?

All the research says there is a 100ms threshold, 1s theshold & 10s threshold. The 100ms threshold is awesome! It makes people feel like they're directly interacting with the product. The 1s time theshold is pretty good, it doesn't break the train of thought. There is then the 10s theshold, is as far as you can go before people just leave, you lost them!

Delays like this

  • 38% increase in heart-rate
  • compraable to watching a horror movie
  • significantly more stress than waiting in line at a store

If this was easy I wouldn't be here giving this talk to you.

HTTP2 is awesome, but it's not pixie dust!

You cannot just throw varnish on something and call it good.

REAL TALK! You cannot beat the speed of light. A trip from SF to NY = ~4000km, light is 66% speed in fiber, 42ms round trip, ping time 81ms. So you're already at your 100ms tipping point just with how fast the internet could be in best case scenario.

Most people are on mobile on crappy internet, and you're ignoring them!

The average web page is now the size of Doom... What the heck is wrong with people?

30+ images, 15_ scripts, 4+ stylesheets.

Don't just create an average website, Make the internet great again!

The 1% know this matters. The top 10% of websites aren't trending back down in file size because they know it's important.

We are the 99% of websites (most likely) we need to know about this and do the trend too.

Percieved performance is the only performance we should actually care about. If the server is slow, you're screwed, but most likely it's your frontend that's bloated.

The DOM is your dominion, we are responsibilty for what goes down the wire. Don't let Drupal put 1000 divs!

Need to obtimize your images!

Even when developing locally you should run on 3G for a little while just to know how it works.

Queueing on Chrome means you hit your limit of how many things you could download at the same time.

You cannot beat the speed of light, but you can use a CDN!

HTTP2, it doesn't resolve us of all of our sins, but it is great!

  • http2
    • http1 is a bunch of back and forth
    • http2 request pipelining and everything just dumps through that.
    • we can now push at the protocol level

BigPipe! Most sites on Drupal 8 will be able to take advantage of the performance increases without having to do too much.

Previously before BigPipe Drupal had to render out the entire page before the user could see it. With BigPipe we can send out the parts that are cached immediately and then send the slow sutff later.

Drupal 7 & the web in general is a jungle out there, so many decisions to make and so few good instructions. Drupal 8 will give us much more to go on, there will be structure. You can stop wasting your time on a bunch of stupid crap.

None of this is free. (paying for things is good, we're not Bernie supporters here)


  • Set performance goals
  • analyze DOM render waterfall
  • mobile perormance testing
  • inventory and cost page elements
  • target next stable state
  • mesaure change after releases

Get good data & analyze it!

We are all frontend developers!

10. May 2016

The New New PHP

PHP 7, it's new, released last fall and makes life better. PHP 6 never happened it was just PHP 5.3. This talk was by Larry Garfield of Platform.sh

What is new?

One of the most important releases in a decade, biggest change since PHP 5. You can view the slides to this presentation on his website

  1. Return Types
    • As of PHP 7 we have return types.
    • not nullable (good)
      • helps with error handling because Type system will handle weird edge cases
    • Returning false on error is a big 'screw you' to your users
  2. Type Specs
    • full type list with new new type specs
      • int *new
      • float *new
      • string *new
      • bool *new
      • array
      • callable
      • any class name
    • random zip codes need to be strings because some start with 0 and integers cannot start with 0
    • Strict vs Weak mode
      • in Weak by default
        • string -> int may E_NOTICE
      • Strict
        • ```php


  class Address inplements AddressInterface {
    public function _construct(string $street, string $city, string $state) {
      // ...
    public function getZip() :string {
      // ...
  - Int convers to float automatically if needed.
  - When should you use strict types
    - 90% of the time
    - (everywhere except input)
      - on input everything is a string to start
  - Also, Documentation
    - Stict typing makes it so you don't need too much documentation
  1. T_SPACESHIP <=>
    • Does cool stuff
  2. NULL coalesce!
    • $username = $username ?? 'Anyonmous';
      • returns username is it is defined & not null.
      • used to be: $username = isset($username) && !is_null($username) ?: 'Anyonymous';
  3. CSPRNG! (Crypotgraphically Secure Psedudo-...)
    • Cryptography is hard!
    • rand() isn't actually random - DONT USE THIS FOR CRYPTOGRAPHY!
    • mctypt() don't use that either
    • openssl is hard to use
    • $junk = random_bytes(16);
    • $val = random)int(1, 100);
    • Only use random_byes() random_int()
  4. Fakes
    • Mocking is hard
    • Fakes are easy
  5. Type Errors
    • Fatal errors Suck!
    • Recoverable errors... aren't actually recoverable
    • You can actually catch type errors


     try {
       // ...
     catch (\ParseError $e) {
       // ...
    • Exceptions: the user screwed up
    • Errors: the coder screwed up
  6. Expectations
    • Assertions suck
    • it makes assert not suck
  7. Generators
  8. Uniform varialbe syntax
    • Always Left-To-Right

    - ```php $foo()'bar'; [$obj1, $ob2][0]->prop; getStr(){0} $foo['bar']::$baz;


(function() { ... })();

PHP 7 is really really fast! How did it do that? Too nerdy... basically the PHP engine rewrote most of the PHP engine to be faster.

Drupal on PHP 7 is WAYY faster than Wordpress like 3+X faster! You can see 50% improvement in speed just by switching to PHP 7. If you take away nothing else from this switching to PHP 7 is the best performance boost you can do. PHP 7 is the most tested .0 release of PHP ever, it's safe.

PHP 7-ready hosts: 34 listed on phpversions.info/php-7 meaning you can run Drupal 8 on PHP 7 today!

PHP 7 is the correct way to run Drupal 8

10. May 2016

Creating a Lean, Mean Drupal 8 Theme

I figured I should learn the proper way to make a Drupal 8 theme so I can make other people do that! See the thing on the Drupalcon site

Drupal Themes Can be Complicated!

  • Why are Drupal themes complex?
  • Looking at our Drupal 8 theming toolset
  • Manging and limiting the complexity

Where does the complexity come from?

  • Drupal theming is very flexable
    • "of course Drupal can do this!"
    • Need lots of different layouts
    • We can add templates!
    • Need to add display logic
  • configuration interacts with the themes
  • implimenting a design (and designers suck!) ;)
    • Specific Design Specs?
    • We can write tons of CSS & JavaScript

Drupal Configuration is Powerful

We don't want to hard code everything in the theme.

  • Display content on the site in varying ways. View Modes
  • Layout Variations
  • Panels or Display Suite

Designers... yuck

Not all designers take into consideration the need for consitancy... for real!

  • Designers like inconsitent buttons
  • lots of random layouts
  • site have different layouts for the same type of content
  • specific page on the site will impliment the design slightly differently.

Enter Drupal 8

  • Libraries for loading CSS/JS
  • Twig Templating
  • More Templates!
  • Core Base themes: Calssy and Stable
  • Breakpoints
  • No Javascript by default
  • ...

So all our problems are solved!? No... you can still really screw things up if you suck at life.

Using your Frontend toolkit

  • Stable & Classy themes
    • Stable -
  • Libraries
    • `{{ attach_library('mytheme/search-styling') }}
    • Contextual CSS
      • global CSS
      • search css & js
      • store css & js
      • but don't go overboard
      • you already only loading that CSS on a single page or whatever there is no reason to be too specific
  • CSS + Sass
    • don't nest your selectors when you don't have to (like I've been saying you fools)
    • never use IDs you idiot
    • name your variables like a real person
    • review the CSS that gets generated to figure out how you could simplify your Sass
  • Templates
    • More templates than ever before!
      • mo' templates mo' problems. You of all people should understand that Stanley.
    • Don't create so many templates
    • Use Twig Blocks
      • Twig looks nice {{ content.links }} me like
  • Preprocess functions
    • Transform content before it gets rendered in templates
    • link one field to another
    • bad ways
      • formatting fields types
      • overrides that depend on a node ID
      • database calls to style past events and 'on tour' events differently
      • commerce line item calculations for currencies
      • hiding results of a view
    • preprocess
      • adding logic
      • adding new variables
      • when the output dependson the context
    • templates
      • adding classes
      • changing markup
  • View Modes
    • now in core
    • don't use view modes as a switch
      • are you a flipping idiot?
  • Theme settings
  • Regions
    • There are always extra ghost regions that never get used (guilty)
    • turn off regions that aren't being used


  • Be consistent
  • recognize complexity
    • Adding template suggestions to create more templates
    • adding a lot of classes and IDs
    • a libray for every page
  • How had will this be to maintain?
    • how much work will it be to apply this to a new content type?
    • what if the branding changes?
  • Documentation
    • regions that don't get displayed everywhere
    • preprocess functions that are complex
    • templates that are weird
    • comment you libraries to say why you added them
  • Refactor
    • if you come across a theme that's very complex, refactor it before it's too late
    • tools

10. May 2016

Offline-capable, decoupled Drupal 8 with React.js and React Native

Offline capabilities is great, it's awesome to be able to load your site while on internet then be off internet and it still work. Also using React. See full talk on Drupalcon site.

  • Deploy suite
    • Multiversion
    • Replication
    • Workspace
    • Deploy
    • RELAXed
  • ReactJS
    • tries to make life simple
  • Redux
    • unidirectional flow
      • store
      • componsent
      • reducer
        • only place store is editable
      • action
  • Architecture overview
    • server
      • drupal 8
      • RELAXed
    • browser
      • PouchDB
      • React web app
  • Demo
  • What we learned
    • REALXed + PouchDB
      • powerful combination
      • full DB availalbe in the browser
      • up to 50MB on phone
    • No easy features from drupal
      • everything in the webapp is built from scratch so you lose a lot of what Drupal does for you
    • Separate styling setup
      • Reactjs has it's own special way of stlying
      • then React Native has even weirder styling
    • Little reusability between web and native apps
    • Distribution ES2015 libraries is still painful
      • very painful
      • can be done, but it's not easy