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.

User Centered Design

The process by which the the end users needs and limitations are the leading factor in design of the software product. This requires usability testing at each iteration of the design process to test the validity of the assumptions made by the original requirements. This lends nicely to an agile methodology in that you may need to modify the original requirements many times.

Consideration for a users mental model is also used to problem solve at each stage of the development process. Mental model means, a persons perspective upon first use of the product, which may include their use of similar products, or if they’ve never used a product to solve the problem.

Competitive analysis – the practice of analyzing your competitors products – can be really helpful in avoiding common pitfalls and finding new innovative ways to address problem solving.

Comparative analysis is forming ideas from use of unrelated products that may have completely different goals. This is especially true for software design being that we have a limited interface with a user (UI, forms, clicks, swipes, screen readers etc.) and it is typically delivered through a browser. I have personally developed ideas for new products based off ideas I’ve developed from dissimilar products.


  • The design is based upon an explicit understanding of users, tasks and environments.
  • Users are involved throughout design and development.
  • The design is driven and refined by user-centered evaluation.
  • The process is iterative.
  • The design addresses the whole user experience.
  • The design team includes multidisciplinary skills and perspectives.

  • Who are the users of the document?
  • What are the users’ tasks and goals?
  • What are the users’ experience levels with the document, and documents like it?
  • What functions do the users need from the document?
  • What information might the users need, and in what form do they need it?
  • How do users think the document should work?
  • What are the extreme environments?
  • Is the user multitasking?
  • Does the interface utilize different inputs modes such as touching, spoken, gestures, or orientation?

  • Visibility
  • Accessibility
  • Legibility
  • Language

This article is my own words, and the lists are from this Wikipedia article.