Interview Questions for a Front-end Web Developer

Our app consists of: JavaScript, CSS3, HTML5 (using Twig templating), YAML config files, PHP for migrations.

PHP

  • what is your PHP (or similar) background?
  • explain how you use templating systems like Django’s DTL/mustache/Twig/Smarty/StringTemplate or similar. Or YAML?
  • explain your experience with ORMs (like ActiveRecord (Rails), Hibernate (Java), Doctrine (PHP), Django (Python)).
  • what do you hate about PHP? what makes PHP better than using another language?
  • what are some of the benefits of using a Framework over basic PHP?
  • what is $this used for?

MIGRATION

  • how would you migrate content from MySQL to a CMS?

WORKFLOW & PROCESS

  • knowledge or experience with git or svn? explain how you use it. Use GitHub?
  • how have you worked remotely and share code? FTP? SVN? SSH? VPN? Have you done any merging yourself?
  • what is your documentation process?
  • explain the Agile development process.
  • given a photoshop file and business requirements document, what is the process for developing the template in html?
  • how do you give time estimates for front-end work?
  • give an example of some shortcuts you may have taken to get work completed to deadline?

HTML/CSS

  • what HTML5 and CSS3 features have you used?
  • how would you like to organize a fully static html site? folder names, etc.
  • how do you support older browsers?
  • what is the difference between position: absolute and position: fixed?
  • what are some considerations when creating mobile-capable websites?

FRONTEND

  • what is your standard list for improving front-end performance or optimizing load speed?
  • debugging example: if the drop down navigation is broken, how do you go about finding the problem?

LEADERSHIP

  • what’s your experience in working within a team?
  • would you be comfortable with handing over and managing tasks with other engineers?

JAVASCRIPT

  • what jQuery plugins have you used? what is your experience with using them?
  • do you test your JavaScript code? how? (selenium? firebug?)
  • code tests
    • setTimeout and setInterval differences?
    • what is the concept of closures in javascript?
    • what’s the difference between null and undefined?
    • what’s the difference between == and ===?
    • how do you add a node to the body w/o using a library like jQuery?

Allow Drupal paths starting with a period

This one took me a while because I kept looking in Apache conf files. Here’s the offending directive in Drupal’s .htaccess file:

# Protect files and directories from prying eyes.
<FilesMatch "\.(engine|inc|info|install|make|module|profile|test|po|sh| ~
.*sql|theme|tpl(\.php)?|xtmpl)$|^(\..*|Entries.*|Repository|Root|Tag|Template)$">
  Order allow,deny

The problem is the \..*| part of the regex that disallows all urls starting with a period. Just remove that part and you’re good to go:

# Protect files and directories from prying eyes.
<FilesMatch "\.(engine|inc|info|install|make|module|profile|test|po|sh| ~
.*sql|theme|tpl(\.php)?|xtmpl)$|^(Entries.*|Repository|Root|Tag|Template)$">
   Order allow,deny

Symfony Performance

Turning a string into a question in PHP

In our Dogster Answers product, we reformat all of the question strings to look more like questions. The titles come in looking sometimes ridiculous so this helps give them consistent formatting in a list of other questions. This solution gives some leeway in input but should remove most types of trailing punctuation and replace it with a question mark.

Quake3′s Fast InvSqrt()

via beyond3d

textorize-server — Easy textorize images via HTML image tags in PHP

textorize-server allows you to build textorize images via simple HTML image tags. textorize creates crisp subpixel rendered text images via RubyCocoa in the command-line. textorize is an awesome bit of software but it can be a pain to generate all the images you need. textorize-server makes it super easy.

Here’s how to use it

<img src="/textorize-server/img.php?m=just_a_test&f=arial&s=20&c=000000&g=ffffff"
alt="just_a_test">

Just add a simple IMG tag in your HTML and textorize-server will give you this beautifully subpixel-rendered bit of text:

textorize-server test image

Installation
To run textorize-server, you’ll need to install textorize on your Mac like so:

$ gem sources -a http://gems.github.com
$ sudo gem install madrobby-textorize

Then clone textorize-server into your project’s docroot like so:

$ cd <your project's web root>
$ git clone git://github.com/thrashr888/textorize-server.git textorize-server
$ chmod 777 textorize/cache

textorize-server is hosted at GitHub (http://github.com/thrashr888/textorize-server). There you’ll find more thorough documentation about textorize-server.

Anatomy — An HTML Framework

Anatomy is an HTML glue framework that gives you basic HTML, JavaScript and CSS to get a new website going. Anatomy is built for designers that may not yet know the best way to build an HTML layout, as well as developers that are constantly starting new projects. Anatomy includes the most popular JS and CSS frameworks so can just pick one and get started.

Getting started is easy

  1. download the files
  2. remove the unused frameworks
  3. start adding your content.

Anatomy features include

  • XHTML 1.0 Transitional or HTML5 (experimental)
  • Smart defaults including jQuery, 960 and Google Ajax API
  • Layout basics: header with nav bar, content and footer DIVs as well as 2 and 3 column layouts
  • CSS Frameworks (960, Blueprint, YUI, meyerweb reset, Dropdown Menu)
  • JS Frameworks (jQuery, Prototype + Scriptaculous, MooTools, Dojo, YUI, Ext)
  • Google Analytics tags
  • Text to be replaced is marked by “REPLACE”

Installation

To use Anatomy, you can download Anatomy at GitHub or clone the repo like so:

$> git clone git://github.com/thrashr888/Anatomy.git

Anatomy HTML Framework is hosted at GitHub (http://github.com/thrashr888/Anatomy). There you’ll find more thorough documentation about Anatomy.

Asset Compression with YUI Compressor, Minify and OptiPNG

One of the best ways to speed up rendering of your website is to compress all your assets: JavaScript, CSS and images. Yahoo! has all but perfected this. The best way of compressing these files is using Yahoo!’s YUI Compressor. Here’s how.

Get the YUI Compressor

YUI Compressor can be found at Yahoo! here:

Once downloaded, you can run the compressor via command-line. Java is required.

$ java -jar yuicompressor-x.y.z.jar
$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

The YUI Compressor Ruby Gem

You can also use a ruby gem to install and run the compressor. Compressing files is a little more difficult, check the documentation to learn how.

http://github.com/sstephenson/ruby-yui-compressor/tree/master

$ sudo gem install -r yui-compressor
$ irb -rubygems
>> require "yui/compressor"
compressor = YUI::JavaScriptCompressor.new
compressor.compress('var JS = "goes here";')

There are a few options for compressing and serving assets on the fly. Gzip compression via Apache is common and usually turned on by default on your server. In addition to that, I use Minify. It takes some time to setup but it’s worth it.

Minify PHP

The documentation is pretty clear, so I won’t copy it here. Either way, you’ve got smaller files. Running the command manually gives you a lot more control over how it works and where the files end up. But setting up a Minify “server” lets you compress all your files without worrying about missing anything. They both work great.

Image Compression with OptiPNG

Recently we’ve started compressing our images as well. Images are probably the most common asset format found on your webpage so it’s important to get them downloaded smoothly. I haven’t found a great tool for this yet but once again, Yahoo! provides. These tools provide lossless compression, which means you won’t see any visual difference in the file, only in the final file size. Most of the tools I’ve found work best on png files, which is a great format to work with since it provides 24 bit alpha channels (better transparency) unlike gif or jpgs.

  • Yahoo! Smush-It: http://developer.yahoo.com/yslow/smushit/
    Smush it does not yet have a public tool or API, but they’re working on it. It does a great job on png files. To compress the files, you have to place them on the internet and give the tool the urls. A better workaround is to use the tool via YSlow in Firebug.
  • OptiPNG: http://optipng.sourceforge.net/
    OptiPNG has great compression, a command-line tool and a GUI wrapper for OS X. The only downside is that it only works on png files. The GUI wrapper gives you a drag and drop tool for compressing your files.

How have you been compressing your files?

Injecting error messages into Symfony 1.1 Forms

Symfony 1.1 does a great job handling forms and form validation but say you have a few external forces checking the validity of the user submitted data, such as Paypal. Paypal would love to return it’s own error messages (thank you very much!) and tie it to a particular form field (say, the credit_card field).

Place this method into symfony_project/lib/form/BaseFormPropel.class.php

And use it like so:

You can find more of my Symfony snippets on GitHub.

My Portfolio on Flickr

My Portfolio Pieces on Flickr