Uncategorized – Peter Dillon

Canon USA: Melville NY

September 16, 2020September 16, 2020 Peter Dillon

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

39DollarGlass.com

September 16, 2020September 16, 2020 Peter Dillon

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.

Evolution Medical Communications

May 16, 2017May 17, 2017 Peter Dillon

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

March 19, 2017May 17, 2017 Peter Dillon

For most of 2016 I was employed by Adecco 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

September 29, 2016November 24, 2017 Peter Dillon

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

July 13, 2016July 17, 2016 Peter Dillon

In the CSS:


.no-cssgradients .header {
  background: url("images/gradient.png");
}
.cssgradients .header {
  background-image: linear-gradient(blue, purple);
}

.no-cssgradients .header {

background: url("images/gradient.png");

}

.cssgradients .header {

background-image: linear-gradient(blue, purple);

}

As a JavaScript object:


if (Modernizr.csstransforms) {
    newBrowsersDoThis();
  } else {
    oldBrowsersDoThis();
  }

if (Modernizr.csstransforms) {

newBrowsersDoThis();

} else {

oldBrowsersDoThis();

}

Check for HTML element class:


<html class="lt-ie9"> 
// Modernizr adds the feature detected classes to the html element
function animateThing() {
  if ($("html").hasClass("lt-ie9")) {
     // Do IE8 jQuery animation 
  }
   else  {  
     $(".progressivelyEnhancedAnimation").addClass("translateTransformClass");
     // Do modern browser translate-ed animation
  }
}

// Modernizr adds the feature detected classes to the html element

function animateThing() {

if ($("html").hasClass("lt-ie9")) {

// Do IE8 jQuery animation

}

else {

$(".progressivelyEnhancedAnimation").addClass("translateTransformClass");

// Do modern browser translate-ed animation

}

Chrome’s Refresh Tools

April 1, 2016April 1, 2016 Peter Dillon

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.