A Git Workflow Walkthrough - Reviewing Pull Requests LocallyThis entry was posted by Jim Vallandingham (@vlandham) on August 03, 2015 in Git, Software Development Process, Deployment and Feature.

In many cases, a visual check of the changes via the PR page on GitHub is enough to give a +1 to changes. That’s how we did things in our previous walkthrough post.

But sometimes, you want to try things out locally downloaded to your own machine to get a feel for what is really going on and try out the changes for yourself. Some changes are not particularly visual or are complex enough that just looking at the code doesn’t provide enough context. In these cases, why not just try out the new code on your own machine to ensure it’s working as expected? Here’s how to do it.

Dealing with Existing Changes

Before you get started, you need to get your local environment in a state ready to pull down the new code. This means dealing with changes you have made locally.

Optimally, you will be at a good stopping point in your own work, so that you are mentally prepared to review someone else’s changes. You are done with the feature or fix you have been working on for the last few hours and are ready for a break.

But sometimes this isn’t the case. There’s a PR that’s urgent and needs to get looked at Now! There is a lull in your creative process, and you want to perform some other tasks before trying to tackle your problem again. Someone just asks you to take a look—and you want to get back to them before they go to bed. There are countless reasons why you might have unfinished business in your local repo.

Option 1: Use Your Feature Branch

You can use your feature branch to check in your current changes simply into your local feature branch before pulling down someone else’s. This is another great benefit to feature branches, and why you should be using one for each set of changes you are working on. They are for your changes only and are meant to be used for small commits as you work on a particular feature or problem.

A git status will tell you if you might have forgotten to create a feature branch before you started working on a problem. If you did, referring to above, and assuming you are already on ‘master’, you can just git checkout -b feature_name, and then just check in your changes there.

Option 2: Use git stash

If you really don’t want to check in your changes for some reason, git also provides a handy nook to hide things in with git stash. Git Stash is provided—as the headline says—for when “things are in a messy state and you want to switch branches for a bit to work on something else.”

Using git stash in its basic form is straightforward:

git stash save “Description of my changes”

This will stash your local, uncommitted changes, thereby making your repo clean and free of changes again, which allows you to move on to the PR viewing. Note how only changes to files that have been previously added to your project will be stashed. New files or folders will stay where they are, so you should take care not to overwrite them!

Note that you can combine the use of feature branches and git stash. Even if you are on a feature branch, but don’t feel like your changes are “commit worthy”, you can push your uncommitted changes onto the stash from that branch in the same way.

Pull Down PR

Okay, any changes you have been working on are taken care of, your local environment is in a pristine state, and you are now ready to grab the pull request. It turns out there are a few ways to do this too!

Option 1: GUI Client

As GitHub’s documentation suggests, you can use the GUI GitHub client to pull down remote branches visually.

Option 2: Pull Down Branch

A quick way to grab the PR from the command line is to pull down the remote branch that the PR is based on. The commands would look something like this:

git checkout -b BRANCHNAME origin/BRANCHNAME

So, for the branch for this PR, I would do:

git checkout -b module_experiment origin/module_experiment

Option 3: Pull Down PR Branch

The pull request itself can also be fetched. This provides a read-only copy of the branch, which can be useful as a reviewer.

git fetch origin pull/ID/head:BRANCHNAME

Here, ID is the numerical ID assigned to the PR, which you can see in its url or at the top of the PR page, and BRANCHNAME is the local branch name you want to give it.

For example, if we had a repository important_project with a pull request with an ID of 37

I’ll grab this PR using the following command:

git fetch origin pull/37/head:readability

Which gives me a new read only reference to the PR.

Now, I can switch to this branch in my local repo:

git checkout readability

In all cases, the PR gets into your local repo for experimentation. With options #1 and #2 other teammates can also push changes back into the branch, so fixing issues on a pull request could be a collaborative effort if the issue demands it.

Finally, if keeping these commands in your head is getting a bit difficult, try using a few git aliases to help! Corey Frang has made a few great pull request aliases to get you started. With them installed, you would just need to run something like:

git pr 37

Which would get pull request #37 of your current project for you. Pretty nifty!

Retrieving Local Changes

Once done with the review, it’s time to get back to work.

If you used a feature branch approach and checked in your changes, you can just switch back to your feature branch and go.

git checkout your_feature_branch

If you used stash, you’ll want to pop those stashed changes off the stash, which actually works like a stack and allows you to stash many things. Back in your feature branch, you can run:

git stash pop

And all stashed changes will be back locally and uncommitted, just the way you left them.

For the fourth and final installment of the Git Workflow Walkthrough, we will look at merging this pull request into your master branch. Stay tuned!

https://bocoup.com/weblog/git-workflow-walkthrough-reviewing-pull-requests-local/

Free screencasts about JavaScript, Flexbox, Node.js and more from the experts at Bocoup.

Advertisement

Recent from this Author A Git Workflow Walkthrough - Merging Pull Requests

Posted on Aug 13, 2015

A Git Workflow Walkthrough - Reviewing Pull Requests

Posted on Jul 24, 2015

Related Posts A Git Workflow Walkthrough - Merging Pull Requests

Posted by Jim Vallandingham on Aug 13, 2015

A Git Workflow Walkthrough - Reviewing Pull Requests

Posted by Jim Vallandingham on Jul 24, 2015

Learn by Doing: Creativity Exercises for Inspiration - See more at: http://www.howdesign.com/resources-education/online-design-courses-education/creativity-exercises-stimulate-design-thinking/#sthash.2kb1KcAD.dpuf

Last year’s HOW Design Live featured dynamic discussions on essential design resources and career advice. It will be hard to beat, but this year’s conference promises to be better than ever.

Jim Krause, a relentlessly creative designer and industry expert, gave a stimulating talk last year called “Learn by Doing.” His talk focused on how to find inspiration through creativity exercises. He presented six exercises from his book, D30: Exercises for Designers (which shares a name and theme with Krause’s online course at HOW Design University), and why those creativity exercises nourish design thinking.

This year, we loved his talk “Sustainable Insanity.” This session provided a wide assortment of sustainable practices that are both mentally grounding and creatively elevating (on-the-job and outside-of-work practices that have kept Jim Krause cheerfully engaged in the certifiably bat-guano crazy business of professional design for over three decades).

Watch Krause’s 2014 HOW Design Live presentation, “Learn by Doing.”

Learn by Doing: Creativity Exercises- See more at: http://www.howdesign.com/resources-education/online-design-courses-education/creativity-exercises-stimulate-design-thinking/#sthash.2kb1KcAD.dpuf

HOW Design Univeristy also houses more presentation videos from last year’s HDL.

Here’s a playlist of staff-selected HOW Design Live 2014 favorites.

- See more at: http://www.howdesign.com/resources-education/online-design-courses-education/creativity-exercises-stimulate-design-thinking/#sthash.2kb1KcAD.dpuf

http://www.howdesign.com/resources-education/online-design-courses-education/creativity-exercises-stimulate-design-thinking/

http://www.hayaomiyazaki.es/2013/01/resumen-de-actualidad-sobre-hayao.html

http://www.otroscines.com/nota?idnota=9882

http://www.eldiario.es/cultura/director-Chihiro-princesa-Mononoke-animacion_0_408759450.html

http://animationcreativeprocess.blogspot.com.ar/

Is adaptive better than responsive design?If you have been remotely listening to the Web design conversation in the past five years, one phrase keeps coming up – responsive Web design. By now, you are probably designing every one of your site outlines with a responsive framework.

But some of the talk is shifting to adaptive Web design. The conversation has been out there for a little while, but Google and Apple have really helped bring it back to the forefront. Is adaptive a concept we really need to think about when designing for the modern user?  

What is Adaptive UI?The discussion starts with a primer on adaptive Web design, or AWD. Like responsive design, adaptive is rooted in trying to create a better user experience across a number of different devices.

Photo credit: Lufthansa

While responsive design is often one design that has slight variances from device to device – for an overall universal look and feel – adaptive design is a little different. With adaptive design the “magic” is in that the device and device-specific features are detected and a website is served to the user based on that information. The result is a website custom-made for the user’s device, but it can sometimes result in a less consistent cross-device experience than with responsive design.

An adaptive UI is not always something you can actually see. And as we’ve said in the free e-book Interaction Design Best Practices, the best interfaces are where the users doesn’t feel the hand of the designer.  

Much of the difference between the responsive and adaptive design occurs in how an adaptive website works. That’s not to say it can’t – or won’t – look different, but it does not always have to.

How is Adaptive Different than Responsive?While the ideas behind adaptive and responsive design are similar, they are not the same thing. Much of what’s different is in the HTML and CSS, and how that information is served to users.

Photo credit: Engineers Without Borders

Garrett Goodman of The Huffington Post might have the simplest explanation:

“Responsive design is client-side, meaning the whole page is delivered to the device browser (the client), and the browser then changes how the page appears in relation to the dimensions of the browser window.

“Adaptive design is server-side, meaning before the page is even delivered, the server (where the site is hosted) detects the attributes of the device, and loads a version of the site that is optimized for its dimensions and native features.”

So the difference is who does the heavy-lifting. For adaptive, it’s the server working hard to deliver an optimized page. For responsive, it’s the device who’s beholden to media queries.

Photo credit: unifi

There are other differences between AWD and RWD as well. The amount of information downloaded on the user end is different, making adaptive websites a little quicker to load. In the build itself, adaptive design uses multiple templates for a “single website” whereas responsive design uses a flexible framework with a single template.  Some designers argue that adaptive sites are easier to build because they can be based on an existing site.

The pros and cons for either have a lot to do with the individual design and development team.

But it all boils down to: What’s best for your users?

That’s a question that’s best answered with plenty of research on the front end of the design build.

Weighing the Benefits of AWDUsers of adaptive design cite a handful of distinct benefits for using this type of design outline. (And their arguments make a lot of sense.)

Photo credit: Spire

1. Better performance: Because of the way the website is served, it renders faster and more efficiently for users.

2. Increased flexibility: You can make changes where they are needed in the code without impacting the entire site. So if a button does not work for iOS users, you can make that adjustment without potentially breaking something that does work for an Android user.

3. It makes you think about content strategy: Because your website is actually designed specifically for different devices, you can design functionality in great detail. How do you want something to work? How do you want users to engage with your website? You can make it happen in a way that is unique to the user and device with an almost personalized experience.

Design Thinking With AdaptiveChanging your website design strategy from one where you build responsive websites to adaptive websites requires changes in the way you think about the design process. You really are building multiple versions of a site.

Photo credit: Google Ideas

While the design method is fairly unique to the designer, Google’s Material Design documentation has a good breakdown of how to think about the adaptive process and create a website in that manner.

Photo credit: Google Material Design

From Google:

“This adaptive UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.”

Breakpoints: Layouts should work at the following widths 480, 600, 840, 960, 1,280, 1,440 and 1,600 pixels. Knowing these widths allows you to quickly prototype for various devices, using tools such as UXPin.

Grid: A 12-column framework is preferred with consistent margin and gutter widths that align to a baseline grid. Grids can be full-width or centered.

Surface behaviors: The UI should adapt based on screen size in specific ways – visibility, width and descriptions – and Google offers details for each of these adaptations.

Patterns: User action behaviors and patterns – reveal, transform, divide, reflow and expand – are based on screen size. To see today’s most popular and effective mobile patterns, check out the free e-book Mobile UI Design Patterns.

When it comes down to the actual design, you’ll need a few new sets of rules.

This includes a set of templates for different devices. (At a minimum this includes three templates – desktop, tablet and mobile.) You’ll also need a set of guidelines for how you plan to use breakpoints and grids and what adaptations will occur at what points. Finally, comes the discussion about how much difference between device designs is acceptable. Ask yourself: are you OK with a website having multiple aesthetic outlines?

Should You Use Adaptive Design?So it all comes back down to the big question: Should you use adaptive design?

If you are looking for a universal solution, you are not going to be happy with this answer. The type of design interface you choose really depends on the needs of the project and the users that you serve.

Photo credit: Mission Impossible

There are some instances where a more clear solution can arise. Consider using adaptive design if:

Device-specific experiences are a necessity.

You can actually create different experiences for each of these devices.

You can handle and maintain adaptive templates and resources.

Your user base is accessing your information on a lot of different devices (if analytics show 70 percent of users are on a single device, an adaptive UI might not be worth your time).

It really comes down to one thing in the end. Are you using adaptive UI to create a better experience for users or because you want to try something different? Always create common and desired experiences that users want to be a part of.

For more advice on designing the best web experiences, check out the free e-book Web UI Design Best Practices. Across 109 pages, you’ll find 33 design teardowns of top companies so you can learn from the best examples.

Read Next: Why micro-interactions are the secret to great design

Image credit: Shutterstock

Have you also read? How Facebook should be designed Upgrade your workflow with the Pay-What-You-Want UX to UI Designer Toolbox

http://thenextweb.com/dd/2015/09/01/is-adaptive-better-than-responsive-design/

http://commons.marymount.edu/leetopic/creation-process/