Industry Tips for Responsible Code

I recently was introduced to a new (I think) site called Code Responsibly via a comment on my post about the importance of soft skills for developers and I think it merits its own post.

Code Responsibly is a simple but powerful project with 10 tips from some really smart people in the industry (but, refreshingly, not all the “rock star” names you see all over the place) with the goal of helping developers avoid “reckless code.”

tips from Code Responsibly

I especially love how the tips focus not on which language is best but on general things we can all always stand to improve on, no matter where we are career-trajectory-wise. The two tips shown above are major areas I want to focus on in 2015 (along with learning and quality which also appear on the list and are baselines for my practice).

CHECK IT OUT

On Naming Media Queries & Abstraction

Yesterday there was some conversation on Twitter about naming media queries using variables, sparked by this tweet from Brad Frost:

At first I read that tweet and thought to myself, “I think I might disagree…” I know that those words are a little tricky because the person using the site at “mobile” width could very well not be on a mobile device, but I’ve used them myself in some cases because they’re still fairly general and easy to remember. Better than “iphone 5, “iphone 6s, “13 inch macbook pro” as another person jokingly suggested.

I skimmed through the replies to that tweet and saw various tweets from people who use name their media query variables after TV show characters or colors and thought to myself, “I ABSOLUTELY DISAGREE!”

Then, I noticed that Brad’s response when Alex Carpenter asked him what he suggests instead:

I calmed back down at that point because, upon pondering a bit further, I think I actually do agree with Brad.

I can absolutely see why it’s probably not a good idea to bring context into media query variables – since the context is really pretty distinct from the width these days it’s a false association. However, I think it’s worse to abstract too far and come up with variables that are memorable to you but will be confusing as heck to other people who may encounter your code down the line (or who don’t appreciate the same pop culture references).

Moving forward, I think I’m going to try to stick to neutral terms like those Brad suggested in his second tweet, maybe using something like t-shirt sizes as suggested by one or two other people: xs, s, m, l, xl. That feels like a good level of abstraction without taking it too far.

I’m curious, though – for those of you who use media query variables, what do you use? What do you think about super abstracted/ personalized variables?

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.

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.

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.