I came across this on twitter from Darcy Clarke’s dev-site and really had to look into it. Its refreshing to take a step back and look at where you’re skills are at and where you need to dig a little deeper.
You’ll read on Darcy’s blog that the list of questions included contributions from some of the industry hotshots who interview quite frequently – - so you can imagine that it’ll be quite comprehensive. The format follows a flow that first determines your preferred ‘work environment’ – - and your ‘technical skills’ , then into a sort of ‘prac-app’ section testing your knowledge of web essentials and non-essential, then finishes with some personality gauges.
If you are looking to prepare yourself for an upcoming interview , or you just want to see where you are at and fine tune: I would skim it and really try to answer them . . . . . You’ll find it enlightening at the very least.
General Questions:
Are you on Twitter?
If so, who do you follow on Twitter?
Are you on Github?
If so, what are some examples of repos you follow
What blogs do you follow?
What version control systems have you used?
What is your preferred development enviroment? (OS, Editor, Browsers, Tools etc.)
Can you describe your workflow when you create a web page?
Can you describe the difference between progressive enhancement and graceful degredation?
Bonus points for the answer “no one can”
Extra bonus points for describing feature detection
Explain what “Semantic HTML” means.
What does “minification” do?
Why is it better to serve site assets from multiple domains?
How many resources will a browser download from a given domain at a time?
If you have 8 different stylesheets for a given design, how would you integrate them into the site?
Looking for file concatenation.
Points off for @import, unless it works in conjunction with a build system.
If you jumped on a project and they used tabs and you used spaces, what would you do?
issue :retab! command
Write a simple slideshow page
Bonus points if it does not use JS.
What tools do you use to test your code’s performance?
If you could master one technology this year, what would it be?
Name 3 ways to decrease page load. (perceived or actual load time)
Explain the importance of standards.
HTML-Specific Questions:
What’s a doctype do, and how many can you name?
What’s the difference between standards mode and quirks mode?
What are the limitations when serving XHTML pages?
Are there any problems with serving pages as application/xhtml+xml?
How do you serve a page with content in multiple languages?
Can you use XHTML syntax in HTML5? How do you use XML in HTML5?
What are data- attributes good for?
What are the content models in HTML4 and are they different in HTML5?
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
Describe the difference between cookies, sessionStorage and localStorage.
JS-Specific Questions
Which JavaScript libraries have you used?
How is JavaScript different from Java?
What are undefined and undeclared variables?
What is a closure, and how/why would you use one?
Your favorite pattern used to create them? argyle (Only applicable to IIFEs)
What’s a typical use case for anonymous functions?
Explain the “JavaScript module pattern” and when you’d use it.
Bonus points for mentioning clean namespacing.
What if your modules are namespace-less?
how do you organize your code? (module pattern, classical inheritance?)
What’s the difference between host objects and native objects?
Difference between:
function Person(){} var person = Person() var person = new Person()
What’s the difference between .call and .apply?
explain Function.prototype.bind?
When do you optimize your code?
Can you explain how inheritance works in JavaScript?
Bonus points for the funny answer: “no one can”
Extra bonus points if they take a stab at explaining it
When would you use document.write()?
Correct answer: 1999 – time to weed out the junior devs
What’s the difference between feature detection, feature inference, and using the UA string
Explain AJAX in as much detail as possible
Explain how JSONP works (and how it’s not really AJAX)
Have you ever used JavaScript templating, and if so, what/how?
Explain “hoisting”.
What is FOUC? How do you avoid FOUC?
Describe event bubbling.
What’s the difference between an “attribute” and a “property”?
Why is extending built in JavaScript objects not a good idea?
Why is extending built ins a good idea?
Difference between document load event and document ready event?
What is the difference between == and ===?
Explain how you would get a query string parameter from the browser window’s URL.
Explain the same-origin policy with regards to JavaScript.
Explain event delegation.
Describe inheritance patterns in JavaScript.
Make this work:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
Describe a strategy for memoization (avoiding calculation repetition) in JavaScript.
Why is it called a Ternary statement, what does the word “Ternary” indicate?
What is the arity of a function?
JS-Code Examples:
Question: What value is returned from the above statement? Answer: 3
"i'm a lasagna hog".split("").reverse().join("");
Question: What value is returned from the above statement? Answer: “goh angasal a m’i”
(window.foo||(window.foo="bar"));
Question: What is the value of window.foo? Answer: “bar”
if intially window.foo was false, undefined or zero else it will retain its value.
The learning curve for building in WordPress is a steep one – let me tell you. But if you can hang in there . . . it will come. I just want to take the time to share some of my findings for those out there who want to embark on the same journey.
1. PHP and Databases and Queries . . . too much for me.
dont worry . . . it’s not that bad. At first, I really thought coding in WordPress would require a hierarchy of learning to occur prior to diving in – - – this is not the case. There are a plethora of resources out there to guide you ‘along the way’ long as you have the time . . . . and patience to pilfer through all the bad gouge.
realistically, you just have to understand the core fundamentals of the WordPress file structure and Jquery implementation. I would advise everyone not ready to start digging into the abyss of documentation on the WordPress Codex, to simply look at the file structure of a fresh download of WordPress. By looking at the files, you’ll come to realize that the system is built to work ‘modularly’ if you will.
There are but a few, actual requirements to building a theme:
index.php [dont worry about the .php - its simply a declaration of what file type it is]
style.css [ the core of your website styling ]
* That’s it! Everything else is dependent on how much you want to customize.
2. Starting Off
I’ve learned that it’s best to start with static HTML and then integrate WordPress. Using the standard form for site development [ wireframe --> psd mockup --> slicing --> code frame HTML --> style with CSS ] , you’ll find is a great method for getting your foot in the door. Focus should be on the home page of your site and any secondary pages that you may need. Note that the secondary pages include how your posts-page will look, the individual-post-page, the search-page, etc. Don’t worry too much about functioning links and actual content yet . . . that will come, we just need the ‘templates’ for the data that will be coming from the database.
Now that you have the meat and potatoes of how the site will be structured and what it will look like, it’s time to setup your development environment, which will need to have PHP functioning.
3. Local Development
This part is really up to you. When I first started working in WordPress, I did all my editing, styling, and testing on the live server – ‘commando’ . . . which really wasn’t efficient. I decided that working locally and then transferring to the live server was better. Here’s a quickie on local setup:
Download MAMP [ free software for managing all the stuff we need - apache/mysql/php ]
Install MAMP and ensure that you get the green lights that let you need everything is up. You may need to check your system preferences to ensure web sharing is turned off. Here’s some good help on MAMP setup.
Now its time to grab a fresh copy of WordPress and place this in the MAMP application folder called htdocs. This folder acts as the ‘public_html’ of a live server, so this is where your site root should live for testing, and where the contents of the fresh WordPress download should go.
You will have to configure you new WordPress installation to talk to a database. Where you create this database does not matter whether its from you server side or local, but you will need the proper information to connect your WordPress installation to it. I use Sequel Pro because it has an organized and slick interface, and its totally free. Be sure that you connect via socket utilizing the MAMP default values – local/root/root. After creating a database, user, and password – - its time to tell WordPress that this is the database that we want to use.
Open up the wp-config-sample.php in a text editor. In here, you must change the values that we used when we created the database: database name / user / password. Save this file now without the ‘sample’ portion in the root folder of WordPress.
Now, when you open up the MAMP start page, which should go to http://localhost/, you will be brought to the WordPress login page. WordPress is now installed and working locally!
4. Creating The Theme
Instead of trying to waddle through all the extensive includes that WordPress comes with, its a good idea to use a ‘scratch‘ download to wipe your local installation so that we can have a fresh canvas for our site. There are many sources for good ‘scratch‘ downloads, I use Chris Coyier’sblank theme because there just enough commented sections to organize things but not be distracting or cumbersome.
You will want to rename this folder to your theme title and place it in wp-content/themes/
It should now appear in the appearance panel of your WordPress dashboard. Here you can activate it and see that it is completely un-styled.
5. Get To Work!
From here on out – - its a matter of integrating your static site into WordPress by piecing the appropriate sections into the right php files. The header section –> header.php / sidebar –>sidebar.php / etc. . .
That’s it. Detailed integration will have to be in another article, but you should be knee deep already in developing your very own WordPress theme. If you need more help – - – > send me some mail!
Tricky work when transferring a local development to a live site. If you develop on a local server such as MAMP or XAMP, there are several things that you must do.
Here’s a quick-list of the majors:
Back up – Export your finished dev-site as an SQL file and save it in a safe place where your cats cant get to it.
Access your Database – you have to change the database site url and home values to your live url. ex: http://gabrielgrover.com/
Export your Database – put it on your desktop so you can upload it to your live site.
Transfer Entire Site Root – utilizing whatever FTP method, upload root files unto the clean url’spublic_html
Create new Database + User – on your live server you have to create a place for your exported SQL to live in.
Find and Replace – This one is dependent: I used DW to find and replace all instances of localhost: 80 to the live url. (be sure to save that SQL file)
Upload SQL – import the saved SQL on your desktop.
Refresh permalinks – if your using a custom permalink structure, you have to access your dashboard and update your permalink settings so the hta.access file gets updated.
That’s it! Be sure to test all your plug-ins and pages to see if you cleared out all the localhost paths. You may end up having to comb around a little for trailing redirects.
Ive added a bunch of things to the shell version 1
Bells & Whistles
- Changed the style and layout of the some details on the Company-Page
- The Services-Page has some Photoshop eye candy for some visual impact
- The Connections-Page has a whole new look, with more camera motifs – utilizing depth, cutaways, and . . more pinks!
Functionality and UI
- The product pages now have a fixed navigation on it to give the user a page location reference.
- The fixed nav has smooth scroll attached to to, a “top” and “bottom” scroll feature, as well as a “find out more” option.
- The individual products have an “animate” function that offers a link to read reviews about the product
- The Connections-Page has div’s with an “animate” function that cues a modal for both google maps and an email form.
That’s pretty much a wrap. I intended to add more – lazyload or the tool tips for specific areas to make the site a little smoother, but Im at a good stopping point for now.
Finally got around to printing myself some business cards. Im told that business cards are on their way out as far as usability goes, but I always seem to need one on hand and not have any. Unless you’re iphone “bumping” your way to connectivity – or actually enjoy the process of creating new contacts in your phone . . . I say print something visually memorable – that’s my take on it. Here’s the oddly sized business card design that I made for PandaKat Designs. I might experiment with some interesting slicing or maybe a transparency layer just for the hell of it.
Here’s camerashop site so far. Not Done, but this should elude to the direction that its going.
I was really hoping to get the site up at least structurally working by today, but got heavy distracted by other areas of the css. The next step is getting the subsequent pages set up, adding function to the visuals and information, and developing a form of engagement with user – something that ties him/her into the content of the scrolling page. I’m thinking a fixed navigation with some poppin color . . . possibly some remote roll-overs. We’ll see.
I’ve really been trying to keep this near the front of my “to-do” list, but other things keep bumping it down. -_- . I like my current theme (only because of the orange and the gray – my fav color combination), but Im working on a new theme:
Anti-Gravity
I hope to dev this up before the end of this module. . . but we’ll see what happens. This still needs a lot of work – - – however, this BG image eludes to the overall style that I’m going for. Ill keep ya’ll posted.
woot! – - – Homepage finally comp’d out. Now to kick it into overdrive and get this coded. Definitely some interesting slicing going on here. For the homepage, there was definitely some concerns whether or not it conveyed the immediate response of “camera shop”, but I think that the artistic audience will enjoy some of the allusions in the design. Enough with the Amazon feel people – - – seriously.
homepage for the 'neighborhood camera shop'
The full site will be ready in a week or so . . . . . . so Ill keep you posted.
Im quickly learning that Wire Framing pre-project is essential to successful design. It helps to visualize content spacing, functionality, and UI obstacles that can come into play later in the process. Here’s the Wireframe that I ended creating for Our Neighbor Camera Shop project. I utilized some helpful kits from VectorTuts and Yahoo Designstencils, which you tear apart some psds and construct your own layout.
Here’s the IA document draft for The Neighborhood Camera Shop Project. There’s 2 different versions – one utilizing In Design and one utilizing Mind Node.
