#palette {
img.color-combo-image {
max-width: 50%;
margin-bottom: @lv6;
}
}
Let’s chat about this snippet. If we’re trying to make a round color swatch, it totally works. But we can make it better without introducing leaky styles.
It’s good to keep in mind that our CSS (like most websites) is global. This means changing one style could have unpredictable impact across different pages. It’s easy to assume that we’d WANT to use specificity to safeguard/protect our styles. What I’ve learned in practice though is that the exact opposite is true.
The flatter our CSS specificity tree is, the easier it is to maintain.
The Cascade is CSS’s biggest strength and weakness. Unchecked and at-scale it can create a mess of context-specific spaghetti code. As we’re writing new CSS, we should also consider how easy it would be to delete. Because of the global nature, safely removing CSS is tough. Knowing every consumer of the CSS is in a 10+ y/o app is fairly difficult. For very specific class name, it’s easy to grep
. For HTML elements, IDs, and other non-specific blocks of text, find-ability goes down fast.
CSS preprocessors make it easy to accidentally introduce specificity. Taking a look at this snippet, this will end up compiling down to the following CSS declaration:
#palette img.color-combo-image {
max-width: 50%;
margin-bottom: 36px;
}
That creates a specificity score of 111 which is pretty high. https://specificity.keegan.st/ is a handy resource for measuring specificity. Ideally we’d aim for scores of 001 or 010.
It’s usually safe to assume that someone will need to use or reuse your style. As it’s written, they wouldn’t be able to use this style unless it’s an <img>
tag beneath an HTML element with the id of palette
and the node(s) has a class of color-combo-image
Folks may also need to override some aspect of style rule. Overriding this downstream we would have to create a specificity score of at least 121 or 112.
To make a more specific rule, we’ll have to jump on a specificity treadmill. It’s a treadmill that’s tough to get off.
Marked in ascending order of specificity
/* 112 */
#palette div img.color-combo-image {
}
/*/* 121 — Very specific */
#palette .something img.color-combo-image {
}
/* 121 — Note the appending of another class doesn't change
underlying specificity as compared to prefixed nesting. */
#palette img.color-combo-image.anotherClass {
}
/* 211 — Highlyyyy specific */
#newContext #palette img.color-combo-image {
}
/* Nuclear option — Super undesirable.
Same declaration with `!important`*/
#palette img.color-combo-image {
// Might as well join the dark side
max-width: 50% !important;
margin-bottom: 36px !important;
}
As you’re writing CSS, try to consider some of the following:
What if this was written this way?
/* 010 specificity score. */
.c-colorComboPreview {
max-width: 50%;
margin-bottom: (@base-unit * 6);
}
Writing it this way achieves the following:
--modifierName
grep
-ablec-
indicates that it is a “component” — a thing that operates independently of other styles.When you start with a high specificity, the only path towards overriding is more specificity. Start low and only add when explicitly necessary.
]]>Thoughts? Share them with me at @alexjlehner.
]]>git rebase
. That’s crazy! Like many commands, it has a use case and is actually pretty awesome. Rebase allows you to modify your git history and move or update commits. Just some of the ways to use git rebase
:
Merge commits can make your history look a little janky. A very simple rebase can keep pesky merge commits out of your PRs and history. The occasional one isn’t awful, but if a branch is worked on by multiple people over several months, the number of merge commits can become unruly.
Let’s say you’re working on a branch based off of master and want to pull in some changes. Usually that’s done via git pull origin master
. Instead, git rebase origin/master
gets the updated version of master and applies your changes one-by-one at the end. High-five! Now you’re up to date. :raised_hands:
Never fear overwriting anything. Merge conflicts can be resolved as part of the rebase process.
Sometimes you’ll need to move commits between branches without a merge. For a single commit, cherry-pick
is the way to go, but moving a bunch of commits is better handled through rebasing. The git book has a great example of rebasing onto other branches.
And, if you’re interested in grabbing a particular range of commits, there’s a way to do that too.
You should be committing early and often, which means you may end up with nonsensical commit messages like: “Did a thing,” “Made it work,” and “Whoops.”
That’s fine! Rebasing allows you to change these commit messages to something actually useful. You can even squash them into fewer, more logical commits. :tada:
PRs with fewer commits are easier to review and keep your history clean. That said, don’t go squash-happy and make every project a single commit.
Rebasing is awesome, but tread carefully. Avoid rebasing on branches that represent production (like release branches), or ones that other people work on. Changing the history can cause serious grief if not communicated well.
You’ll almost never rebase the master branch (or whatever your source of truth is). Hopefully you aren’t working too often on the master branch anyway.
As you’re getting more comfortable with the tool, test your rebases out on separate branches. Worst case scenario: You can delete the branch.
Questions? Ping me at @alexjlehner.
]]>Even with regular cleanup via git branch -d branchName
or the harsher git branch -D branchName
, references to other remote branches linger. If your coworkers are good about clearing out their remote branches, it’s easy make your local copy shiny again.
git remote prune origin
will clear out local references if the remote branches no longer exists. Appending it with --dry-run
will let you see what it’ll do.
If you want to do this for all of your remotes at once git fetch -p
will do the trick.
Other resources:
]]>I’ve grown up on the Internet. It has been my career, my source of entertainment, and now I have learned… it is my community.
Though I know he has had an impact on the technologies I use daily, I don’t know Eric Meyer. I do not know his wife, Kat. I certainly never had the pleasure of meeting their daughter Rebecca.
Signing into Twitter on Thursday, June 12th, my feed was inundated with messages of support and condolences with #663399Becca trending and links to a wonderful article named, “The Color Purple”. Jeffrey Zeldman’s article introduced me to one of the most moving shows of support I have seen on the Internet.
At only six years, eleven and a half hours old and after a long battle with cancer, the daughter of Eric and Kat, Rebecca Alison Meyer, was finally pain free and at peace. Following her father’s tweets surrounding her passing created a lump in my throat that has yet to be squelched.
In his article, Zeldman shared Matt Robin’s idea to the community at large: Get #663399Becca trending on Twitter. A simple concept that has had a lasting impression on me.
The Internet is made of, for, and by people. These people: The creators, maintainers, and tinkerers all showed tremendous support for one of our own. Within the day, efforts were made with all major browsers to recognize the hex code #663399 as a standard CSS color under the name “RebeccaPurple”. After verifying with the Meyer family, Google, Microsoft, Apple, and Mozilla all committed to recognizing the new spec in future browser updates.
As if adding “RebeccaPurple” as the 141st CSS color wasn’t enough, much of the community also showed immediate visual support by changing their Twitter avatars to purple. The more creative variants of these weaved the color #663399 within their existing avatars or brands.
Few things are worse than the thought of losing a loved one. This experience showed me the strength of community that has developed around our profession. Few careers are as open to change and as welcoming to new individuals as web development and design. Open source efforts, Stack Overflow, and more are testaments to the community we have built. Let’s continue building.
What others have said:
]]>Fortunately there are no shortage of free device mock ups around the Internet. Below are some of my favorites.
These are just at taste of all of the PSDs out there. Checkout PremiumPixels.com, Pixeden.com, and GraphicBurger.com for many more.
Note: Most of the PSDs below require Photoshop CS3 or higher and are able to be used for at least private use.
Even though the Apple Watch has not been released to the public, many awesome mockups have already been released. I found my favorite on Dribble not too long ago. I’ve already started to put it to good use. I hope you’ll do the same.
Download Apple Watch Mockup by Francesco Scalambrino
This iPhone 6 PSD vector is an awesome start to any project you may have. This PSD comes with all three iPhone 6 colors and is entirely FREE.
Download iPhone 6 Mockup from Pixel Buddha
This iPhone 5s PSD vector mockup is a fully-scalable vector shape iPhone 5s PSD. Ideal to showcase your app designs with a choice of three iPhone 5s colors including black, white and gold. Use smart layers to drag and drop your creations.
Download iPhone 5s Mockup from Pixeden
Awesome iPhone 5c mockup from the folks at Pixeden. It includes both portrait and landscape versions. I used this exact version in my article about mobile navigation patterns.
Download iPhone 5c Mockup from Pixeden
This freebie is an Apple 27in LED Cinema Display. It is a brilliant contribution from UI designer Koy Carraway. The fully layered PSD could make a sweet surrounding for showing off some work.
Download Apple 27in LED Cinema Display from Premium Pixels
Picjumbo.com released this awesome 13in Retina Macbook Pro shot for Graphic Burger. I’ve already used it in a couple of small projects. Check it out.
Download 13in MacBook Pro PSD Mockup from Graphic Burger
This MacBook Pro Retina PSD Template is a perfect replica of the new MacBook Pro with Retina display in vector shape and 300dpi fully-scalable. Use the smart layer to easily apply your design.
Download 15in Retina MacBook Pro PSD Mockup from Pixeden
Showcase your responsive designs with an awesome grouping of Apple devices. The pack includes the iPhone 5s, iPhone 5c, MacBook Air, iMac, and iPad Air.
Download Apple Responsive Screen Mockups from Graphic Burger
I hope you found this collection useful! If you can think of anymore I should include, shoot me a tweet (@alexjlehner).
Cheers,
–Alex Lehner
]]>I kept running into an issue with needing a different site.url
configuration for my local environment and my production (in this case GitHub) environment. Fortunately Jekyll makes this easy to overcome by allowing you to have multiple config files. Here’s how:
Start by making and saving a new file called _config-dev.yml
. This file will be used to trump any declarations we need to for our local environment. It also could be named zaphodBeeblebrox.yml for all it really mattered. For now just include the following:
url: http://localhost:4000
Traditionally your command to start Jekyll looks something like this:
jekyll serve -w
This by default looks for the _config.yml
in your site folder and rebuilds your site as you make changes to the files. Instead, launch Jekyll with the following:
jekyll serve -w --config _config.yml,_config-dev.yml
Jekyll does a good job of telling you if your syntax is messed up somewhere. If you don’t get any errors on launch, you should be able to see your site at http://localhost:4000/.
The _config-dev.yml
file isn’t going to hurt anything by having it in your Github repo. By default Github Pages won’t even notice it. I would recommend you add it to your .gitignore file anyway. One less file in your git repo to keep track of and confuse potential forkers. Need help?
I hope this quick tip helps someone out. If you have any questions, ping me on twitter (@alexjlehner) or email me.
]]>In reality, much of this first iteration should be approached as a planning process. I can’t think of any site designs I did perfectly the first time. By spending excessive amounts of time building mock ups in Photoshop or within the browser, you are less likely to scrap your first design choices. If you simply jumped in and built the site with the latest framework, are you sure that design is what your users really need?
Iteration is the key to successful design. I suggest next time you need to develop a new design: sketch first. You don’t need to be an artist, or even be able to draw a straight line. All you need is a trusty pencil and some paper. I believe you’ll find that sketching forces you to think about every stroke you are making. The goal isn’t a pixel-perfect rendering. The goal is for you to think about what is best for your users instead of just what works.
One of my favorite new tools comes from the fine folks over at uistencils.com. They specialize in creating tools to make the process of sketching wireframes a fun and smooth activity. They offer a wide array of stencils, utensils, and pre-printed sketchpads. Have a look at someone using the iPhone Stencil with the iPhone sketchpad. (Courtesy of UI Stencils.)
iPhone Stencil from UI Stencils on Vimeo.
Neat huh? I have had my stencils for several months now and really enjoy them. They have helped me think abstractly, focus on the user experience, and allowed me to quickly demonstrate my thoughts to others. Here’s what I bought*:
Some of these were bought as a package to save $$$
I was pleasantly surprised by the durability of the stencils. They are made of metal and are sturdy enough to handle what you need. Interestingly, I was expecting the stencils to be a realistic size of an iPhone. After using them for a few minutes, I completely understand why they made them larger. The extra room is vital to adequately demonstrating your ideas.
The sketchbooks are like any paper notebook but include a layout and dot-grid already printed. When I have needed to tear off sheets, the clean removal is phenomenal. The notes, dates, and project fields are a welcomed features. In the future I hope they release a version that functions more like a Moleskin notebook. Very rarely do I want to take the designs off of the sketchpad and the current configuration is not conducive to keeping sketches attached to each other.
Though the case was not necessary, it is one of my favorite purchases. It protects the stencils (I carry them around everyday) as well as looks very professional. I have found the iPhone stencil and sketchpad the most useful so far.
At the time of writing, I couldn’t recommend UI Stencils more. If you are just getting going, I suggest you start with 1 stencil and a sketchpad. I have not used the Browser sketchpad and the Website stencil nearly as much as I expected. That said, I have no regrets.
I thought I would include some extra sketching and wire framing resources for your reading pleasure:
]]>Each time I wanted to update and test the code, I had to do it in several locations. Git, makes most of this simple, but shouldn’t there be a better way?
Symbolic Links are a method to simulate the duplication of a folder in another directory. This means, any changes to the files will be reflected in all of the linked folders. This is perfect for local development environments as I want consistent themes and plugins accessible between all of my local sites. Here’s how it’s done:
You can use any name you want, but keep it short. You can choose to have this be a simple directory with folders named “themes” and “plugins,” or have it be a full WordPress installation. Up to you! I chose to keep it simple.
This is where you will be hosting your primary repositories from now on. Make sure that you include any parent themes if you are building a child theme.
Go through your local WordPress installations and remove the “themes” and “plugins” directories. If you have several local sites, I recommend doing this with a single installation of WordPress first. Note: You are most likely going to need to reconfigure your theme and plugins after this process.
Here’s the basic syntax of the command
ln -s /Path/to/original/folder New-folder-name
Since the source files are within ~/git/master/ for my environment, here’s the best syntax for the task.
ln -s ~/git/master/themes ~/git/FOLDERNAME/wp-content/themes
ln -s ~/git/master/plugins ~/git/FOLDERNAME/wp-content/plugins
Note: Replace “FOLDERNAME” with the appropriate directory structure for your folder configuration.
Either through Terminal or Finder, you should be able to see the themes and plugins you installed in the master directory. The same plugins and themes should be available in the WordPress admin interface.
If all is working, repeat steps 3 - 5 with the rest of your WordPress installations.
Cheers!
Alex
]]>In my quest to make a responsive design, I came across several approaches to mobile navigation. I’ve discussed 4 approaches below. There are many others out there for designers to consider. The primary thing you should take away from this post is that there is no one-size-fits-all solution. You should decide which solution fits best with your project.
One of the simplest forms of mobile navigation I have found is the drop down (aka select
element). You are probably used to filling these out on forms and they are a testament to the ingenuity of the web design community. This is another example of designers and developers using a tool not quite as it was intended (::cough:: tables ::cough::).
Though they are a creative workaround here’s my thoughts:
Pros
Cons
I have lovingly labeled this next one “The Cram N’ Cry.” This is because it should be used very carefully and I have seen it abused on multiple occasions. The navigation should automatically adjust to the screen size and create new rows if necessary. When used properly it can be a very attractive navigation solution. It is ideally used on sites that have a simple navigation with no more than 1 level. Regrettably this nav is often used to display too many links with excessively long titles.
Pros
Cons
This is one of the most often seen mobile navigation patterns. It is a very flexible way to display the navigation in a pseudo-visor method. This allows the mobile navigation to operate independently of the desktop navigation and can be customized to suit the site’s needs.
Pros
Cons
The off-canvas approach is a new-comer to the area of navigation patterns. It has been popularized by several native mobile applications and a few large web applications such as Facebook. This navigation method allows the developer to use the full vertical height of the device while not obscuring content. I expect we will start to see this method used more frequently as it is standardized and tested.
Pros
Cons
These are just a sample of the various types of mobile navigation patterns. I encourage you to test each of them out and see what fits your project. If you can think of any others I should mention, I’d love to hear your thoughts on twitter @alexjlehner.
Some cool resources to keep you going:
iPhone mockups credit: Pixeden.com.
]]>