Canon USA: Melville NY

Signing on for a second year as the Senior Product Designer and Developer on the team to build a brand new internal product named Canon Pricing Strategy System (view gallery.) 

This software enables the salespeople to create, submit, and manage Canon’s high-unit printer sales contracts. The product is critical to streamlining efficiency of $600 million in Canon’s overall yearly profits and will immediately save $50 million this year by automating a previously manual process. It has received the attention and approval of the highest level stakeholders and managers.

Designed to match business needs perfectly, this product not only provides maximum efficiency for the internal Pricing Team, but also moved the contract negotiation process away from Excel spreadsheets to a beautiful and fast web application.

We used Angular 7, Angular Material Design and AG-Grid. I designed and implemented all of the unique proprietary UI customizations including modifying core Material Design elements.

In my prior time at Canon, I have been on a few different teams building internal administration applications as well as contributing to their highly visible external e-commerce solution. See examples below:

Canon Project Prototypes

Canon Strategic Pricing System: Angular, Angular Material, AG-Grid
Internal Canon CarePak® Management Dashboard: DataTables, jQuery
Automatic Ink Replenishment Service: Angular 6
Printer Driver Download Application: jQuery

I have completed an extended project to create and implement the desktop and responsive versions of this awesome e-commerce website. Based on a set of starting point PSD’s provided by third party design teams, I completed the desktop designs, as well as fully design the responsive mobile versions of the entire site. I lead the functional demonstrations with top level stakeholders, ensuring the project proceeds quickly and all parties are satisfied with the progress.

Update: Site has been released – view now!

For the prototyping phase of this project I used Sketch, the Adobe Suite, Invision-App, HTML and CSS/SASS.

During this time, the dev team transformed and is now lead by the incredibly talented Daniel Chavez. Daniel has upgraded the development process to be streamlined, modernized and really fun place to work!

The system is built with a mixture of Laravel and React. We use Git with BitBucket for version control and JIRA for issue tracking.

Front-End Web Development Questions – David Shariff

Original List

  • Execution context references the ‘environment’ a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.
  • Lexical scope is the concept that every inner level can access its outer levels
  • Hoisting: The way in which the JavaScript interpreter declares variables at the top of the function it is contained in (the current scope.) And to clarify – declared not initialed (assigned) a value. This results in some variables being accessible even though they are not yet physically declared in the code. Common practice in JS is to always declare your vars at the top of your scope to avoid confusion. Here’s a list of different hoisting scenarios.Hoisting function variables:

    Hoisting regular variables:
  • Function expressions is declaring and assigning the function to a var at the same time:
  • .call, .bind and .apply:
  • Prototype and Constructors:
  • Event Delegation: You place the event listener on the parent to capture the bubbled event – imagine a table of 1000 rows. The callback function lets you handle it in any way.

    See the Pen Event Capturing with .on, .delegate by Peter (@peterdillon) on CodePen.dark

  • typeof
  • Object.prototype.toString()
  • Traversal up, down, left and right: View Pen
  • Manipulation – add, remove, copy, and create nodes in the DOM tree.
  • Change the text content of a node and toggle, remove or add a CSS classname. View Pen
  • Explain: role=”button” Can make any element (span, div etc.) behave as a button control to a screen reader, role=”presentation” Removes any semantic meaning so screen readers don’t react to it semantically.
  • HTTP requests – GET and POST along with associated headers such as Cache-Control, ETag, Status Codes, and Transfer-Encoding.
  • Security – JSONP, CORs, and iFrame policies View Pen
  • REST vs RPC:
    The fundamental problem with RPC is coupling. RPC clients become tightly coupled to service implementation in several ways and it becomes very hard to change service implementation without breaking clients:
  • Clients are required to know procedure names;
  • Procedure parameters order, types and count matters. It’s not that easy to change procedure signatures(number of arguments, order of arguments, argument types etc…) on server side without breaking client implementations;
  • RPC style doesn’t expose anything but procedure endpoints + procedure arguments. It’s impossible for client to determine what can be done next.
  • On the other hand in REST style it’s very easy to guide clients by including control information in representations (HTTP headers + representation). For example:
  • It’s possible (and actually mandatory) to embed links annotated with link relation types which convey meanings of these URIs;
  • Client implementations do not need to depend on particular procedure names and arguments. Instead, clients depend on message formats. This creates possibility to use already implemented libraries for particular media formats. It’s possible to easily change URIs without breaking clients as far as they only depend on registered (or domain specific) link relations;
  • It’s possible to embed form-like structures in representations, giving clients the possibility to expose these descriptions as UI capabilities if the end user is human;
  • Support for caching is additional advantage;
  • Standardised status codes;

Evolution Medical Communications

Hybrid App Designer: Five Month Contract Consulting with Precision Global Staffing
I just wrapped up consulting on a project (view gallery) that was built with Angular 2 and Ionic 2. I used Balsamiq for the low fidelity prototype, and Sketch to replace Photoshop as my design tool and Invision with it’s Craft plugins for the interactive prototype to help garner immediate feedback during functional demonstrations with stakeholders.

Due to the excitement generated by the first product, my contract was extended to build a second hybrid product (view gallery) with Ionic and Angular that uses ForceJS to access a Salesforce backend.

These value added mobile products are targeted to bring tens of thousands of dollars in sales to Evolution’s account executives.

I also created a few responsive post conference surveys for attendees using jQuery Validate to ensure data integrity.

My Time at Adecco

For most of 2016 I was employed by bbbAdecco Group NA where we used Bootstrap, Grunt, Gulp, Sass, Knockout, SiteCore, and C#. The team uses an Agile development process with VersionOne software to track sprint progress, Team Foundation Server, and HP Application Lifecycle Management to track bugs. It was exciting to be engaged in a thorough agile process, and I have written an article on the process.

I also created a Virtual Assistant prototype with Ionic and Angular 1.

Header Scroll Transition and the Will-Change Property

Recently I needed to make an animated header that slides up when you scroll down the page, and slides down when you scroll up- the idea is to give the user the navigation when you ‘assume’ they are reaching back up the page with that intention. With this opportunity, my intention was to use best practice and dynamically add and remove the will-change property when transition starts and ends. I was confused that will-change was not being added on transitionstart until I realized there was none – only transitionend. A quick search for a solution gave me this pen that uses CustomEvent. Read about CustomEvent on MDN.

Furthermore, I was unsure if dynamic will-change was even necessary, because when we use tranistion: translate() the element is already being moved onto the GPU so is there a need for this?

Anyway, here is a simple but useful version of dynamic will-change for both animation and transition. For will-change on transition I added with the onClick event and let transitionend trigger the removal.

See the Pen Add-Remove will-change on Animation and Transition: Plain JavaScript by Peter (@peterdillon) on CodePen.0


And the finished dynamic scroll-detected header transition:

See the Pen Sliding Header with Transform and jQuery with IE9 Support by Peter (@peterdillon) on CodePen.

Three ways to use Modernizr

In the CSS:

As a JavaScript object:

Check for HTML element class:


I am currently on a team that uses the agile process. We use VersionOne for sprint tracking, and TFS and HP-ALM for bugs. Here is my experience.

User Stories – Pre-sprint

The Functional and UX team writes “stories” that contain “user acceptance criteria” which explain in detail what is needed from a certain process. They tend to write things out like this:

1. The content manager needs to be able to add and control the order of ‘featured posts’
2. When choosing featured posts, the content manager needs to choose the order in which to display the posts
3. The choices the content manager will have are: date, alpha-numeric and most popular

…and so on.

The Sprint

Sprint Planning

The developers and scrum master meet in a room to read the user stories aloud, discuss complexity and issues, and try to answer any questions they may have.


Developers and specialists then proclaim a point to estimate the complexity that it may take to complete their tasks. The agile point system uses the concept of “relative sizing.” Where most estimates will be at the lower end of the Fibonacci series: 1, 2, 3, 5, 8, 13, 21 and so on. The goal is to group things of similar overall difficulty rather than a precise estimate.

  • Complexity is the “stuff we have to figure out.” We know we can solve the problem, and we probably have a decent feel for how we’ll approach it, but we still have to figure it out.
  • Effort is the amount of stuff that needs done.
  • Doubt is about the stuff we don’t actually know if it can be done. Something that would cause you to spin your wheels for a while before you figure out if you can actually do the work.


Here developers and testers offer to do and test the work.


Developers then go to VersionOne and create tasks. Testers write testing parameters and process. This is where I will read the story over again, and really focus, imagine and write down every part of what I have to do. Here is where you make an hourly estimate.


The collection of all stories and tasks for the entire sprint.


A short 15 minute meeting where the entire team reports to the scrum master and discusses day-to-day issues and ‘blockers’ if there are any. The conversation goes like this:

  1. What have they achieved since the last meeting? (yesterday)
  2. What will they achieve before the next meeting? (tomorrow)
  3. Is anything holding up their progress? (impediments)


The measure of the amount of work a team can tackle during a single sprint and is the key metric in scrum. Velocity is calculated at the end of the sprint by totaling the Points for all fully completed user story.


When someone (e.g. John’s code is not deployed) or something (e.g. the ui is unreadable or program crashes) is stopping you from progressing further.

Burn Down

As you work, you can ‘burn down’ hours on your tasks. It is similar to a timecard process.


Once a week (or more) our department manager requests demos on stories so he can see the progress. It often contains positive feedback as well as constructive criticism. It also helps in getting a grooming session escalated since he holds more power than the developers. (This is not part of the agile process.)


Along the way, you may find the task is completely off track, more difficult than expected or impossible to complete as expected and needs to be looked at again by the functional UX team. The scrum master needs to address the stakeholders as quickly as possible and if they agree that their initial requirements were incorrect, they can start a grooming process that allows them to change the requirements.


At the end of the sprint, the entire team once again gathers to discuss how this sprint went and present ideas on how we can improve for the next one.

Hardening and Refactoring

A time between sprints allotted to going back and looking over the work you’ve done and making it better. We all know that when that sprint deadline is looming you may take some short cuts, or not spend as much time on optimization as you would have liked – this is the time to do it.

Chrome’s Refresh Tools

Normal reload
This will use the cache but revalidate everything during page load, looking for “304 Not Modified” responses. If the browser can avoid re-downloading cached JavaScript files, images, text files, etc. then it will.

Hard reload
Don’t use anything in the cache when making the request. Force the browser do re-download every JavaScript file, image, text file, etc.

Empty Cache and Hard Reload
This does hard reload – but also looks for items downloaded and cached after the page has loaded, such as adding a new script tag to your DOM, or by using RequireJS etc. Any AMD-based library (such as RequireJS) basically loads its scripts lazily. In that case, you have to empty the cache to make sure that really everything gets a hard reload.

Keyboard command to open devtools: Cmd + Opt + I — or J if you want to focus the console when opening.

Interview Challenges

I am in the process of interviewing and wanted to document all the code challenges I am confronted with.

For every repeating letter in a string, add a “*” between them.

See the Pen String Manipulation JS Challenge by Peter (@peterdillon) on CodePen.dark

Check if a given number is a power of 2:

See the Pen Check Power of 2 by Peter (@peterdillon) on CodePen.0

Presented with a photoshop design I was asked to code this in 20 minutes, making sure the bottom 3 elements were coded in flex-box:

See the Pen Interview Code Challenge by Peter (@peterdillon) on CodePen.0

What does jQuery .delegate do? How is it the same or different than .on? What does .off do? What is bubbling?

See the Pen Event Capturing with .on, .delegate and plain js by Peter (@peterdillon) on CodePen.0

How does css animation and transition work?

See the Pen CSS Transform, Transition and Animation by Peter (@peterdillon) on CodePen.0

Photoshop Challenge:
I was asked to grab a layer with a drop shadow effect on it from within a full page layout design document and export it as a png with transparency and effect included.

  1. Right click on desired layer and choose “Duplicate Layer”
  2. In dialog “Destination” choose ‘New”
  3. This gives you a new document the same height and width as the original with your new layer in it’s respective place
  4. Choose menu “Image > Trim” (There are many options when trimming but for this purpose the default meets the requirement)
  5. To save as, you have two choices, the classic “Ctrl+Alt+Shift+S” to open the “Save For Web” dialog or you can Right click layer and choose “Quick Export As PNG”
  6. Compression varies – on small simple graphic QE was more compressed – on large colorful file – SFW was smaller.