Neatly Polished Update, with Sample Lesson

Neatly Polished is clear, friendly, in-depth online front-end web development classes

It has been a long time coming (my goodness, those lessons took a lot longer to write than I expected), but I’m happy to say that all 26+ lessons in my Neatly Polished course on WordPress Theme Development are finally live.

In case you aren’t familiar with this project, Neatly Polished is a subscription-model site I created for more in-depth tutorials and lessons than are really reasonable to provide for free via this blog. There are the lessons, plus a support forum where I answer questions and discuss the lessons (and other stuff, sometimes) with participants.

The first full “course” is on WordPress Theme Development, and basically walks through all the files you’d use in a WordPress theme, along with the various theme components and some workflow tips throughout. You can check out the entire course outline, along with a single full sample lesson, on page templates.

Subscriptions run $29 for a monthly membership and $79 for a quarterly membership, and include all current and future content for the life of the membership.

Future plans for the site include a similar course on Shopify theme development, as well as mini-courses on things like PHP basics, HTML/ CSS layout modules, and other TBD topics. You can keep up to date with what’s going on over there (since I don’t post here about everything) via Twitter and/or by signing up for the Neatly Polished email list.

I’m pretty excited about this project, in part because of the fabulous feedback I’ve gotten that has both helped me keep improving the lessons over time, and also has just made me feel even more sure that sharing what I know like this is the right thing to be doing.

I’ll leave you with some of the awesome things members have said about the lessons and program:

“Awesome lesson! I have used many fabulous tutorials (free and paid) on WordPress theme development, but find that even though the information is valuable , it is not “streamlined” as well as yours.”

Very specific. The checklist was clutch. I was missing 3 things (due to my horrible skimming skills and my antsy pants that are so excited to be learning this stuff). With the checklist, I was able to make sure that I didn’t miss a beat!”

“Great! Can’t believe I picked this up so quickly. Really appreciate your simple and easy to follow instructions.”

If you’d like to register, you can do so here.

Q&A: Just Starting Out & Prioritizing Beyond the Coding Skills

I got an email from someone just breaking into web development the other day asking for some advice about getting started. I get a fair amount of similar emails, and I’ve talked about this before on the How to Hold a Pencil podcast and on my Learn Web development resource page, but I thought these particular questions were kind of interesting because they seemed to be getting at priorities in addition to/ other than learning the actual coding and site building skills.

The Questions

What do you think my main priority should be this next year as I have extra time being a student? Should it be building a portfolio and seeking out freelance projects locally? Is there a specific place online I should build presence for potential future employers to view?

My Answers

I’ve broken down my thoughts into four main pieces of advice:

four priorities for new developers

1. Build websites!

The ShopTalk podcast mantra, which is to “just build websites” is one of my favorite answers to questions about how to get started or build skill.

Building “Muscle Memory”

I wholeheartedly believe that a large part of web development is akin to muscle memory – you’ve got to be able to write website code quickly and accurately to be really profitable, and the way to get there is to practice. While practice exercises won’t hurt, the best practice is to build actual websites.

Building a Portfolio

In addition to the practice, building websites (lots of them) will help you build a targeted portfolio of sites that represent (visually and/or in terms of niche, functionality, CMS, etc.) the type of work you want to do ongoing.

These don’t all have to be “client” sites if you’re not quite experienced enough to pull those projects in, they can be your own projects, things you’ve done as a volunteer, and just plain fun sites. That said, it wouldn’t hurt to have at least one or two sites where you’ve worked from a brief and been subject to feedback/ constraints, to show that you can work that way (or where you’ve subcontracted or freelanced with an agency, if you can get those jobs).

2. Learn the Business Side

I’ve written about how important soft skills are for web developers, but beyond that there’s a whole set of things that are useful to know about as a freelancer or small business owner.

Accounting & Bookkeeping

One thing I always wish I was better at is accounting/ bookkeeping. I’ve read some books on the topic but I’ve also thought about taking a more formal class on small business accounting, even if it’s something I plan to eventually outsource. If you’ve got the time and access to a local college or organization that offers business classes, I would advise checking those out.

Local Laws

Similarly, there are sometimes small business organizations that provide workshops on local laws and regulations, which are good things to find out about early so that you can plan accordingly.

Workflows, Tools & Apps

It’s also a great time to check out various tools, apps, and workflows to start to get an idea of what’s out there for when you get to a place where you start to need those things.

3. Show Your Work

The question about building a presence is a great one, and I think there are two aspects to that. First is showing your work, meaning presenting what you can do and how you approach the type of work you want to be doing in a strictly professional way.

LinkedIn & Github

The main networks and avenues for this vary a bit depending on your focus (design vs. development, working in-house vs. freelancing), but it’s likely a good idea to have a presence on LinkedIn and GitHub, at minimum.

For Designers

If you’re also a designer, you may want to check out Dribbble. I know nothing about Behance other than that it exists, but it may be another avenue to look into.

Your Own Blog

Beyond networks like those mentioned, it may also be a good idea to start a blog where you record your thinking and the way you approach problems. Blogging is definitely not for everyone, but it could be that it gives a potential employer a window into you and your work in a compelling way, so it’s worth considering.

Stack Overflow/ WordPress forums

Finally, answering questions on sites like Stack Overflow or the WordPress support forums can be a great way to show that you’re a team player and a good communicator. There are all kinds of questions in both places, from basic to advanced, so if you keep your eye out there’s sure to be something you can answer even when you’re just starting out.

4. Build a Network

While the suggestions in #3 are about building a strictly professional presence, there’s also a pretty big networking aspect to web work outside those more targeted “professional” avenues.

Twitter

Twitter is pretty big among web developers (and designers), so it’s worth checking out even if you mostly just follow along with what others are posting to start out.

That’s not to say you shouldn’t be very careful about remaining professional across your online presence (you absolutely should), but that via Twitter you can build more casual connections with others in the field.

Local Groups

You may also want to check out local groups for learning and networking, such as Girl Develop It or groups organized via MeetUp.com.

I’m not that into the idea of setting out to “network” but I can absolutely say that the connections and relationships I’ve built through local groups and via Twitter have made a big difference in my business.

Troubleshooting CSS3 Transitions for Safari

Awhile back, Zoe and I were working on coding the redesign of Typo Boutique. It’s a great design – elegant and clean, with strong margins and borders.

Typo Boutique homepage

To complement the feel of the design, Zoe and I wanted to give the site some nice, subtle link hover transitions.

Typo Boutique links come in one of two flavors, standard and button-style:

Typo Boutique Button Style Link

Button-style link

Typo Boutique Standard Style Link

Standard link style

As you can tell, there’s a bit of a difference between these two styles, but the desired hover effect was universal – all links were to neatly change their font color to a darker green.

To achieve the delicate color change on hover, we used a Sass mixin from Compass.

[Side note: we've since moved to using Autoprefixer for browser prefixing, the main reason we were using Compass before - more about this and other tools here.]

a {
  @include transition(all 350ms linear);
  &:hover, &:focus, &:active {
    color: #067b47;
  }
  &.button {
    background: #fff;
    padding: 15px 10px;
    /*.. other fancy button styles here ..*/
  }
}

Which looks like this when it’s compiled:

a {
  -webkit-transition: all 350ms linear;
  -moz-transition: all 350ms linear;
  -o-transition: all 350ms linear;
  transition: all 350ms linear;
}
a:focus,
a:active,
a:hover {
  color: #067b47;
}
a.button {
  background: #fff;
  padding: 15px 10px;
}

Once completed, the links looked great!

The Problem

However (as is fairly standard when coding-related things seem too good to be true), browser testing revealed a curious issue with our button-styled links in Safari (I’ll just call these buttons from here on out).

On page load, the buttons seemed to grow in place before resizing back to their intended styling. This was certainly odd  – not exactly the “nice, subtle” transitions we’d been going for. Fortunately, the solution was surprisingly easy, and it involved taking a deeper look into the transition CSS property.

The CSS3 Transition Property, In Theory

In short, there are four defined CSS properties for specifying an animated state change, and luckily – much like margin and padding – there’s a shorthand property transition that combines these into one. transition accepts transition-property as its first parameter, so here we specify the CSS property/properties that we want to animate on change.

The CSS3 Transition Property, In Practice

I generally use all to allow whatever properties I alter on hover to be properly animated, so with this code, I specified transition: all 350ms linear, intending to transition only the color property on hover.

What I didn’t know before was that transition-property: all is handled very differently across browsers, and this, as it turned out, was the issue.

Instead of only transitioning the button font color on hover as we’d wanted, Safari was animating all CSS properties not on hover, but when these elements were repainted with the extra styling that their parent elements didn’t receive (basically, everything that made them look button-y).

The Final Solution

The solution was therefore simple: if we only want to transition the color property, let’s help the browser out and get more specific in our code:

a {
  @include transition(color 350ms linear);
  /*.. other styles ..*/
}

This change effectively solved our issue across all browsers!

Big CSS lesson learned: be wary of blanket property values like “all,” and be specific where it makes sense.

ABOUT THE AUTHOR

This post was written by . Kim was formerly an associate developer at Zoe Rooney Web Development, but we've since (sadly) lost her to a full time development role at Amazon. You can find her on Twitter.

Q&A: Full Site Screenshots

Awhile back, someone asked me the following question via Twitter:

How do you take screenshots of full sites (sites long enough to scroll)?

The problem here is that normal screenshot methods only capture what’s visible on the screen, but with longer websites it can be nice to capture everything on the page in one swoop. Those full-site images are great for portfolios and for blog posts, but can be hard to get your hands on without the right tools.

The Quick Answer

The short answer is: I use a free Mac app called Paparazzi.

Paparazzi info

Don’t be fooled by the old-school website, it’s a great tool.

The Long Answer

To get into more detail (and explore some other methods I use on a regular basis):

Single Pages

For a single page, you can just enter the site URL into Paparazzi and choose the minimum page size and crop size, as well as any delay before the screenshot is captured (I like to use 1 second). It’ll grab the full site content and present it in the window for you to preview:

Paparazzi app in action

From there, you can use the pointer icon in the bottom bar to interact with the page (if you want to click a link, for example), or you can save the image to your computer to use later.

Batch Capture

I only recently learned about the Batch Capture feature of Paparazzi and it’s actually what prompted me to finally write up a full answer to this question in blog post format, since it’s pretty much the greatest thing ever. You just create a .txt file with a list of URLs you want to capture (one URL per line) and then drag that file onto the batch capture window. Hit the play button and Paparazzi goes through one by one and grabs all your images for you, saving them wherever you’ve specified in your settings.

Paparazzi app bulk capture

It’s downright magical when you’ve got a lot of images to take!

Other Methods

I don’t always fire up Paparazzi – in fact, I really only use it when I’m doing a portfolio update as that’s pretty much the only time I need those super-long screenshots. For other purposes, there are two main ways I get my screenshots:

Short Pages

For screenshots that fit in my monitor (close ups, smaller segments of a screen, and shots where I want to get the browser window in the image), I use a Mac dashboard widget called Screenshot Plus. It’s pretty straightforward and easy to use, although I would suggest changing the settings a little bit if you use it regularly so that it saves your images in the right file format for your use case, and someplace easy to get to (I save mine to my desktop, use them right away, then delete them). This is hands down the method I use most for screenshots.

Images with Pointers

Neither Paparazzi nor Screenshot Plus will work if you need to get a hover action into the screenshot. For those instances, I use the regular Apple screenshot shortcut (Command + Shift + 3) and then I crop the image in Preview. The cursor pointer itself doesn’t get included in those screenshots, so if you want that to show you’ll have to grab a PNG version, then copy and paste it over top of the screenshot. There may be an easier way, but that works for me in the rare cases where I really want a hover effect with visible pointer.

Top Hidden Costs of Website Projects

7 Common (But Easily Overlooked) Website Costs

Over a couple of years of client projects, one thing I’ve learned is that there are a lot of costs for website that site owners often don’t know to anticipate or plan for. It is not fun being the bearer of unexpected news about additional costs, so I try to be pretty up front about these potential “extra” costs at the contract and invoicing stage of the project.

There are seven main costs that many clients may not know about (especially if it’s their first big web project):

1. Hosting (Especially Quality Hosting)

While most clients know that they’ll have to pay for hosting of some sort, many don’t realize that quality business-level hosting can be pricey. While inexpensive shared hosting may be okay for some sites, there are definite downsides to cut-rate hosting (everything from reliability to security issues to variable customer service quality).

Once you move beyond inexpensive shared hosting, the cost for hosting can vary wildly and tends to increase pretty rapidly in price. This can be a real surprise for clients, and is something worth discussing early in the process. It helps to be able to discuss the benefits of more premium hosting services.

Typical Cost: $3-6/ month for inexpensive shared hosting, $15/ month and up for premium hosting

2. Domain Registration

If you’ve been working with websites for awhile, it’s easy to forget that the concepts of domain registration versus hosting are not actually that obvious to the general internet user. It’s a good idea to check in early with clients to make sure they’ve got a domain registered, and you’ll also want to help them understand the cost for registration.

Some things clients may not know about domain registration include:

  • It’s a recurring (usually yearly) cost
  • Some (but not all) hosting providers include a year or more of free domain registration with a new plan
  • There are add-on services needed along with the domain for things like privacy or added security
  • The domain can be registered separately from the hosting, if desired

I’ve found that clients also appreciate tips on registering similar domains, such as the .org version of the primary domain or a common misspelling.

Typical Cost: starts at about $10/ year per domain registration alone (more for high-value domains and certain TLDs)

3. Email Accounts

Some hosting providers include email of some sort (forwarding accounts, or even email inboxes) with hosting plans, others do not. Since many people are used to free personal email accounts, it may not occur to them that business-class email often comes at a cost and that the cost may be per-email-address.

I typically recommend Google Apps for Work as a great business-class email option, and that service runs $5/ inbox/ month, or $50/ inbox/ year.

Typical Cost: $50 per inbox per year

4. Licenses

It’s not uncommon for clients to believe that any and all functionalities and design elements within a website are part of the overall project cost, but I tend to separate out license fees from my rates unless I already have an unlimited developer license for a particular purpose.

One of the reasons I do it this way is that I prefer to have licenses for each project in the client’s name. This is especially true for things with recurring costs like subscription font services, but is also true for one-off licenses that require a new license for each site.

Font Licenses

I’ve written at length on web fonts and licensing, but those are not topics that the average site owner is going to know a lot about.

Ideally, font licensing comes up in the design phase of a project but I like to cover myself by also bringing it up in my invoices and contracts. That way I don’t have to be the one telling the client late in the project that the fonts they’ve fallen in love with are going to cost them a lot of money.

Typical Cost: varies widely from free to hundreds of dollars per year depending on font(s) chosen, traffic levels, etc.

Software Licenses

Beyond font licensing, some jQuery plugins, WordPress plugins, and Shopify apps come at added cost. For example, MagicZoom is a very popular jQuery plugin for e-commerce product zoom functionality, and it has a per-site cost unless you’ve got a developer license you’re using for all your clients.

This is another place where it’s a good idea to talk early about special functionality requirements and for the designer and developer to be on the same page about functionality that is “free” (or built into a regular scope of work) versus functionality that may have associated extra licensing costs.

Typical Cost: varies – jQuery plugins tend to run $30-100 for a one-time license, premium WordPress plugins and Shopify apps often have yearly or monthly recurring costs

5. Security Provisions

Depending on the type of site and the setup, there may be added security needs.

SSL and Dedicated IPs

If you’re running any kind of secure content through your site, you’ll likely need an SSL certificate, which is an added yearly cost for most hosting accounts. SSL also requires a dedicated IP address, another added cost in some cases (especially on shared hosting).

Typical Cost: on one shared host, a dedicated IP address is just over $3 per month on top of a regular hosting plan; SSL certificates tend to run $20-50 per year up to $200+ for wildcard coverage

Monitoring Services

Even if you’re not storing or using sensitive information, it can be helpful to have security monitoring on your site. For WordPress, this typically looks like third-party services that keep an eye out for hacked sites or for necessary updates/ upgrades. Some clients may also want ongoing help with their site updates, which is a long-term cost that will need to be negotiated.

Typical Cost: leading provider Sucuri has an antivirus plan runs $89.99/ year for a single site

6. Backup/ Restore

This is another feature that depends on the site and hosting provider, but that sometimes incurs extra costs. Regular automated backups and a one-click restore are one of the reasons I really like WP Engine hosting [affiliate link], but other hosting providers may not include those things standard, or may only allow access to parts of the backups.

Sometimes you can add better backup systems through a hosting provider for an additional cost, or there are third-party tools and services such as VaultPress and BackupBuddy.

Typical Cost: VaultPress runs $55/ year for their “Lite” backup/ restore plan

7. SPAM Filtering (WordPress)

For WordPress blogs, in particular, there’s typically a need for additional SPAM filtering. While there are some free options out there, I prefer using Akismet as it’s a tried-and-true provider that does a good job filtering out SPAM with few false positives. You can use it for free for a personal blog, but it does have a fee for commercial sites.

Typical Cost: Akismet is $5/ month


Total Cost

Looking at a “typical” WordPress business site that includes a blog a reasonable cost breakdown might be something like:

Shared Hosting:

Since it’s a lower price point, shared hosting is often a good place for a new business to start. The downsides are usually reliability and service/ support, and as traffic grows or as storage needs increase, shared hosting may become less of a viable option.

Service Yearly Cost
Domain Registration $10
Whois Privacy $3
Hosting $60
Email (provided by hosting) $0
Sucuri Monitoring $90
VaultPress Backup Bundle (includes Akismet) $99
Total: $262 (plus any one-time licensing fees)

Premium Hosting:

While clearly more expensive, premium hosting can be worth the price for ease of use, uptime and site speed, and quality of customer service. Premium hosting providers also often optimize for things like traffic spikes and dedicated WordPress hosting providers have WordPress-specific features that can save site owners time.

Service Yearly Cost
Domain Registration $10
Whois Privacy $3
WP Engine (“Personal” Plan*) $348
Email $50
Akismet $60
Total: $471 (plus any one-time licensing fees)

* The personal plan is the lowest plan offered by WP Engine and is based on the number of visits per month, despite the name it can be used for business sites.


There you have it – an overview of some of the most common website project costs along with some very approximate numbers for rough budgeting purposes. I’m sure I’m missing something(s), so if you’ve got something that pops up a lot in your projects that I haven’t mentioned, post it in a comment.