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?

Creating a Custom Text Expansion Snippet in Sublime Text

Packages may be the biggest bang for your buck as far as customizing Sublime Text goes, but sometimes there are things in your individual workflow that just aren’t covered by the existing packages but that are annoying enough to merit a change. One way to do that is with custom snippets.

An example that came up for me recently was the CSS declaration -webkit-font-smoothing: antialiased;.

You can read what this declaration does and why it’s not always a good idea, but the tldr; is that I use it in some situations make web fonts appear sharper. I’d say it comes up most often for buttons (light text, dark background) and the occasional script font.

Despite how often I use it, I have an extraordinarily hard time typing all those hyphens and that dang ialia section that it was worth fixing in my workflow.

It turns out, it’s fairly easy to create custom snippets and tie them to a cue, meaning that I was able to set it up so that I can just type in wfs and hit the tab key to expand the entire declaration.

Sublime Snippet expansion in action

Side note: I could theoretically do this in Sass as well, using a mixin, and sometimes I do, but I still have to type it to create the mixin, and sometimes I only need it once or twice so a mixin seems silly.

There’s a lot more detail on creating snippets in the documentation but here’s the quick and dirty:

1. Create a new snippet file

In Sublime, head to Tools > New Snippet…

That will create a new file with this template:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

Save this file with the name of your choice in your Packages > User folder for now (easy to get to later on).

2. Customize Your Snippet & Trigger

Here’s my modified version for the snippet discussed above:

<snippet>
    <content><![CDATA[-webkit-font-smoothing: antialiased;]]></content>
    <tabTrigger>wfs</tabTrigger>
</snippet>

You can see that the first line has the fully expanded snippet in it, and the second is the trigger I’ve decided to use. The trigger should be something you find memorable and can easily associate with the snippet.

You can get fancier, but for quick text expansion this is all you need.

Bonus: Editing the File

If you find yourself wanting to access your snippet file in the future, the quickest way I’ve found is to go to the main Sublime Text menu (on a Mac, not entirely sure where this is on a PC) and head to Preferences > Browse Packages. From there you can access your User folder and edit your file.

Sublime Text Packages & Settings

I’ve seen a few posts recently about Sublime Text and how other developers customize it for their workflow (for example, on CSS Tricks and Mark Jaquith’s blog, so I thought I’d jump on that bandwagon and share my Sublime Text setup.

Sublime Text screenshot

Sublime Text is a fairly recent addition to my toolkit. I was a dedicated Espresso user for a long time. However, it seemed like Espresso stopped evolving and as my workflow changed I needed features it just didn’t offer. I took an informal poll on Twitter and Sublime came back as the crowd favorite, plus I already had it installed since I use it when teaching classes (it’s free and cross-platform so everybody can be in the same program) so I gave it a try and I haven’t looked back.

I’m using Sublime Text 3 currently (although I still use 2 when teaching), and here’s my setup:

Theme

The screenshot above shows my setup with the Predawn theme mixed up with the Deep Blue See color scheme. Predawn gives it the overall dark color scheme including customized sidebar, tabs, and console area.

Packages

These are the other (non-theme) packages I currently have installed, all of which are handled via the Package Control system:

  • Alignment: I honestly don’t use this much but it’s for aligning blocks of code (e.g. a list of variables) that may otherwise not align quite right with tabs Sublime Color Highlighting
  • Color Highlighter: Underlines hex codes with the color they represent (underline is just one of the options)
  • CSS Completions: CSS completion beyond what already exists
  • CSS Extended Completions: Even more completions, including SCSS stuff
  • List Stylesheet Variables: Autocompletes variables you’ve used in your files so you don’t have to remember them yourself
  • SideBarFolders: Lets me quickly switch between project folders without getting into the Sublime folder system (which I find confusing)
  • Siteleaf Liquid Syntax: Highlighting for Liquid, which is used in Shopify themes
  • SublimeGit: The only paid package I have (and well worth the roughly $12), lets you handle all your Git commands right within Sublime
  • Syntax Highlighting for Sass: Like the name says, syntax highlighting for Sass including SCSS syntax
  • WordPress: Autocomplete and snippets for WordPress functions and template tags

I’ve toyed around with some other packages but these are what I actually use (or in the case of Alignment, think I should be using) on a day to day basis and so have made it through my regular purging frenzies.

Preferences

Finally, for those of you who are really into this kind of thing, here are my user preferences:

{
    "auto_complete_commit_on_tab": true,
    "bold_folder_labels": false,
    "color_scheme": "Packages/Deep Blue See/Deep Blue See.tmTheme",
    "folder_exclude_patterns":
    [
        "node_modules",
        ".sass-cache",
        ".git",
        "shopify_theme-0.0.17"
    ],
    "font_size": 13,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "SHS-Bourbon-Neat",
        "SHS-Bourbon",
        "SHS-Compass-Variables",
        "Vintage",
        "SHS-Compass-Mixins"
    ],
    "scroll_past_end": true,
    "shorter_labels": true,
    "tab_size": 4,
    "tabs_medium": true,
    "theme": "predawn-DEV.sublime-theme",
    "translate_tabs_to_spaces": false,
    "word_wrap": true
}

Truthfully, I can’t remember why everything in this is there, but there it is.


Your turn! If you’ve posted your setup, link to it in the comments (and if you haven’t, consider doing so for the rest of us nosy folks).

Free Photoshop Templates That Aren’t Terrible

I’ve said before that I think building websites (real ones for clients, or self-initiated side projects, or even just made up sites for practice) is the best way to learn. I recently received the following question via Twitter:

This is an excellent question, especially if you want to challenge your layout skills and/or you aren’t really a designer yourself. Awhile back I did some searching for PSD files to work with while planning some workshops for Girl Develop It and it was really hard to find nice-looking, modern designs and organized files.

Here are a handful of good ones that I found while looking around to get you started:

1

Jewelry by Vlad Musienko via Designs Crazed (This template is much longer than shown below.)

free e-commerce design PSD

2

Free Corporate Template by Skokov (This one has separate PSDs for a bunch of different site pages and the organization is solid if not outstanding)

home page for free PSD template

3

Halcyon Days by Peter Finlan as seen on Codrops (There’s more to this page than shown here)

Halycon website template

4

DSGN by Michele Cialone (more on Michele’s site (The Uncreative Lab)[http://theuncreativelab.com/])

DSGN free photoshop website template

5

Bhagaskara by Andreansyah Setiawan via Designs Crazed (This one’s longer than shown below.)

long scrolling single page website free PSD template

6

Crafty from Pixel Hint (there are others on their website)

Crafty PSD website template


If you’ve got other resources for this sort of thing, share them in the comments! One great place to start is Dribbble – I did a search for “free psd website template” and that led me to a couple of the results in this list.