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.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”adwyLw” default_tab=”result” user=”peterdillon”]See the Pen String Manipulation JS Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]


Check if a given number is a power of 2:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”GoEvaa” default_tab=”result” user=”peterdillon”]See the Pen Check Power of 2 by Peter (@peterdillon) on CodePen.[/codepen_embed]


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: [codepen_embed height=”268″ theme_id=”0″ slug_hash=”ZQyzao” default_tab=”result” user=”peterdillon”]See the Pen Interview Code Challenge by Peter (@peterdillon) on CodePen.[/codepen_embed]

What does jQuery .delegate do? How is it the same or different than .on? What does .off do? What is bubbling?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”jWGwKz” default_tab=”result” user=”peterdillon”]See the Pen Event Capturing with .on, .delegate and plain js by Peter (@peterdillon) on CodePen.[/codepen_embed]

How does css animation and transition work?
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dGVWqw” default_tab=”result” user=”peterdillon”]See the Pen CSS Transform, Transition and Animation by Peter (@peterdillon) on CodePen.[/codepen_embed]

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.

Peter Dillon

Development teams seek me out for visual design, reskinning, information hierarchy, usability, iconography, improving task flow, improving the front end build process and more. I specialize in creating engaging solutions to solve real world problems while designing beautiful applications that make the lives of users easier.