I got an email from a good friend Suzanne the other day, asking if I could chat with a Computer Science (CS) student about a career in technology, and I happily agreed – I can talk about technology for hours and hours! And I’d love to be able to help someone who is just starting out.

Kate, who is pursuing her CS degree, got in touch with me and sent me a list of questions she had before our chat, which helped me understand where she wanted to focus our conversation. We had a 30-minute phone call, and covered everything in her email, and I got to know her a bit better and hear her concerns. With Kate’s permission, I wanted to share the recap, in hopes that other people starting out in the technology field will find it useful.

Thank you, Kate, for asking great questions, and can’t wait for you to join the exciting tech community soon!

Q: What drew you to this field and how did you decide it was right for you?

A: I’ve always loved it! Must be partly engineering genes from my mom and dad who both have technical degrees. When I was three I could name all of my dad’s radio electronic parts, then was constantly reading puzzle books, then later begged my parents to get us a computer in exchange for good grades. I originally learned how to operate computers in MS-DOS command line, and skipped computer classes in school because I thought I was smarter than the teacher (shameful, but true).

Getting a CS degree was one of the best decisions that I made (thanks mom for telling me PR was bullshit – confirmed by experience later). I enjoyed my college years immensely, and let me tell you, the school was hard, very hard at times. But it was well worth it, and now it just feels like second nature to me to code and lead technical projects.

If you’re good at solving tech problems (and yes, love math) – definitely go for a CS degree/career in technology.

Q: Do you have any suggestions for someone like me who isn’t that confident when it comes to programming – maybe ways to improve at programming or tech careers that don’t focus as heavily on it?

A: Man, C++ is hard for anyone! Honestly, it was pretty tough to learn C++ and assemblers in school for me too. Good thing is that there are so many other languages and platforms out there (node.js, python, mongodb) that bring fun into coding. And aside from programming, there is a huge need for smart people who grasp technology: information architects and UX designers, community evangelists, talent managers, quality engineers… You can specialize without being a coder.

Q: What skills (technical or non-technical) and personal characteristics would you say are most important to have for a person working in your field?

A: Creativity, curiosity to always learn – as technology constantly evolves, and ability to communicate is crucial, especially when it comes to translating a technical concept to a broader audience. Well, plus being a kind and fun person always helps in any field :)

I am still trying to improve on all of the above, every single day.

Q: Do you have any other advice? Is there anything I didn’t ask about that you think is important for a computer science student to know?

A: This is a great closing question – I think I will borrow it for any informational interviews, because it’s perfect for asking anyone who has more exprertise in any field.

Some of the tips that I had:

• write more, keep a journal or a blog and document your thoughts, challenges and victories. It helps improve writing communication skills, lets you see your progress over time, and may be very useful to like-minded folks and future employers. Best developers are also great communicators (Paul Graham, Jeff Atwood, Marco Arment, Jeff Escalante, Lea Verou)
• embrace tech community – NYC is amazing when it comes to tech events, meetups, classes and hackathons. You can always learn something new and meet with smart people. I especially like the NY tech meetup – very fun and inspiring monthly meeting in quick demo format, all made in NYC!
• doing things is the best way to learn. Try out new technologies (JavaScript alone can keep you entertained for months), work on something you would use and release it online. Sometimes things seem harder than they are, until you actually start doing it, step by step. Then suddenly your app is working – and you feel like the world is at your fingertips :)

Once you have all your page templates coded, you are ready to set it up in WordPress.

At the bare minimum, you should have the following templates created:

• header.php – includes html declaration, styles, include files, opening body tags
• footer.php – closing body tags, analytics codes
• page.php – the main template that will call header, sidebar and footer files
• index.php – template for displaying your posts
• sidebar.php – self explanatory, sidebar content
• comments.php – template for rendering comments
• 404.php – good to have

I’m missing one more important one, for search, but I’ll add it later.

So your folder will look somewhat like this:

Then upload your theme folder to your server, into /wp-content/themes directory

Login to WordPress, and go to Appearance tab.

You should then see your theme show up as an option:

Click on “activate” and your theme should be up! (or do live preview first if you’re not sure)

Check your site and see if there are things to be tweaked, fix them and – voila! You’re up and running with your brand new theme! Congrats :)

Remember, that your site will have a few distinct templates, such as:

• Home page (in my case it’s the main blog page, with X latest posts)
• Category page
• Archive page (could use the same layout as category)
• Search results page
• Individual post page
• About page and potentially other static pages
  And potentially many others, depending on how complex the site is.

In the template for the home page. You’ll need to make sure you also have templates for the rest of your page types.

Here’s a great article explaining the anatomy of a WordPress theme

And a comprehensive resource from WordPress on building a theme

So in this step, I won’t be explaining a lot, as it mostly requires coding. Now let’s open up our text editor and get to it…

This step is very straightforward, you take your PSD mockup and code it into HTML.

A few things to note:

• for me it’s easier to add some creative elements like styling of links, borders, size adjustments directly in HTML (instead of designing it pixel-perfect in PSD)
• drop shadows are now easy! yes!

   .shadow {
   -moz-box-shadow: 2px 2px 5px 2px #ccc;
   -webkit-box-shadow: 2px 2px 5px 2px #ccc;
   box-shadow: 2px 2px 5px 2px #ccc;
   }
  

• to make your container elements stretch the full height of the page, use this (I always need to re-google it):

   min-height:100%; overflow:hidden
  

• I initially code all styles inside the HTML page and then once they are done, move them into CSS file(s)
• there’s a neat “lorem ipsum” text generator for Mac, called Little Ipsum
• I hand code everything in Coda

Now it’s starting to look good!

Here’s a link to the simple coded HTML, zipped (not 100% perfect).

Next step: moving your code into WordPress templates and creating your theme

WordPress is amazing – you can customize it to run pretty much ANY site, from simple blogs to full-featured websites with e-commerce (I’ve done quite a few sites of different complexity, including large e-commerce ones). So congrats if you chose WordPress as your platform – it really is a great, mature, flexible piece of software.

As with any project, step number one is to figure out what the goal of your site is, what kind of content you will have, and what is the order of importance. The fancy word for it is “information architecture” and/or “user experience design”.

In my case, the goal of the site is mostly to support professional growth, and be a place for improving my writing.

Once you know your goals, it’s fairly easy to lay out your site navigation and structure.

So, the architecture is pretty simple:

• show my blog, including standard topics/categories and archives sidebar
• include an “about” page – usually a good idea, so visitors can get to know who you are
• showcase certain work I’ve done
• link out to GitHub, Twitter and LinkedIn profiles
• give visitors a way to contact me easily

Then, I usually sketch a quick wireframe of the site, just to get a quick visual picture before designing it.

In my case, it’s a simple two-column layout, with a header (and possibly a footer).

After this comes the fun part: being creative! I usually take some time to browse around and find inspiration on Pinterest, some awesome web folk whose work you admire, or even actual places and things.

I wrote down a few things that I wanted to include:

• simple color palette, mostly shades of grey (haha not intentionally and not 50)
• subtle background pattern, thank goodness there’s a site for that!
• pink and navy colors for headlines (kind of inspired by nautical themes from this Tumblr blog)
• PT Sans, Georgia and Merriweather serif fonts – just really liking them recently (and annoyed by overusage of the Lobster font)

Once you are inspired enough, open up Photoshop and mockup your design, paying attention to how each component will look like. You might come up with something like this:

It’s very simple but is exactly what I need.

When you are happy with your design, continue to step 2: coding your HTML/CSS template

I really wanted to update my site for quite a while now, and make it much cleaner and simpler.

The current version of the site runs a theme called “Me Gusta” that I put up about 6 months ago for the sake of saving time. It was good enough, I didn’t need to design and code it, and looked presentable.

However, it had some issues:

• it’s overloaded with features and feels too heavy for me
• meta information is all out of whack (for example, when someone posts a link to my site, the description is some garbage about using the keyboard shortcuts that come with the theme)
• each post requires an image for a nicer preview
• default styles for elements Pokies Pokies like list items are reset to something really strange – all lists items are displayed inline

Now, it’s very possible to fix all the above issues, but that means going into someone else’s code and trying to figure out how to make it work. And that requires investment of time and patience. I figured that the preferred way for me is to design a clean look and code it with just bare minimum of what I need.

And since I’m doing it, I wanted to document the process – hope some folks find it helpful!

Step 1: Structure and design
Step 2: Coding HTML/CSS
Step 3: Creating a WordPress theme
Step 4: Setting it up in WordPress

Super easy – already supported if you use express/connect.

Example (using express):

var express = require('express');
 
function giada de laurentiis pokies Pokies authorize(username, password) {
    return 'username' === username & 'password' === password;
}
 
var app = express.createServer(
    express.basicAuth(authorize)
);

Example using connect

I can’t wait to redo my site with a new simple theme. The one that I currently have looks nice but doesn’t quite provide the simplicity I want.

Background: I got sick of the old pink design that I had, and for the sake of time, got this theme on some template website (theme’s name is Me Gusta), and while it looks great and has the bells and whistles – hey, different background for day and night! – now I need it much much simpler and user friendly.

Hope to be documenting the process as I do it, so stay tuned for the tutorial, and thanks, dear readers, for being patient with less-than-ideal excerpts right now.

Just tried three of them, first two did not quite work, and this one seemed to do the trick just right.