It’s Okay to Just Do a Part of the Project

There’s kind of a weird idea floating around in the freelance/ small business world that it’s “better” to land big projects and to own the entirety of each project. That it’s the big brands and big project scopes that “make” you.

While there’s some truth to that (my projects with big names in my niche have certainly helped me out in terms of exposure), I’ve also found that taking on projects where my role is just one piece of the puzzle can be satisfying and can open up a lot of opportunities I might not get if I were trying to do the whole thing every time.

Some of the biggest brands that have approached me have been looking for internal sites, or for “just a blog” to add onto an existing infrastructure.

Minted's blog

Minted’s blog Julep was one of those projects, where I came on board to build just the blog (designed by Bri Emery of designlovefest).

Another is the blog portion of the redesigned and relaunched Makeshift Society website:

Makeshift Society's blog

In both of these cases, the main site is a complex build on a custom or enterprise-level CMS, which is not really my thing. Blogs, however, are something I do quite a lot. That specialty keeps me in the running for a lot of companies that have their own systems for the bulk of their web presence but don’t have the in-house skills or interest for that specialty area.

The Honey Bee blog from Burt’s Bees Baby™ (a project I took on with Aeolidia) is another example where I was only responsible for the blog coding:

Burt's Bees Baby blog

It does take some mental adjustment, though. It can be kind of humbling to not work on a brand’s “main site” and just take on a segment of the project, and even more humbling to work on something that will only ever be seen internally. For me, it’s always been worth it.

This idea that it’s ok to just take on a part of a project isn’t anything groundbreaking, but I still believe it’s worth putting out there in writing.

Whether you’re a designer who is making spot graphics while another team redesigns the whole website, or a developer with a specific area of expertise that relegates you to working only on a subset of features, you should work towards whatever kind of project makes you happy and makes your work rewarding. But I also think that it’s okay if sometimes those projects are the smaller, less flashy pieces of the overall puzzle.

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.