Bernoulli Protips!

[noahblon]

Got a tip that makes your job easier? Share it here!

When communicating about a project, an annotated screenshot can often clarify things immensely.

One tool that I use all the time is a browser extension called Awesome Screenshot: https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en

Quickly take a screenshot of a webpage, make rough annotations, and save locally, to google drive or temporarily on their hosting service. Its the most streamlined tool I've found for doing this common task.

[noahblon]

Sometimes, its even better to share videos instead of screenshots. For example, if you want to run an animated interaction past a client, or describe something complex thats not easily explained in words, a video can be invaluable.

On Mac, you can easily record your screen with Quicktime Player. I like to use Handbrake to convert the .mov to .mp4 when I'm finished to create a small video that can be quickly emailed or hosted somewhere like Dropbox.

Recently, I've been exploring recording my Android device with the Android SDK: http://www.labnol.org/software/record-android-screencast/4929/

Pretty sweet!

Another nice tool (this time mac and windows), is Licecap, which allows you to record animated gifs quickly for sharing: http://www.cockos.com/licecap/

Anyone on PC or Linux have tried and tested techniques for screen recording?

[dpren]

Chrome Console Protips:

---

$0 returns the currently selected HTML element from the "Elements" debugger... $1 returns the second latest... up to $4. Much faster than writing a DOM query.

Right clicking a logged object gives the option to store it as a global temp1 variable.

copy() copies an object's contents to the clipboard.

Fancy pants hash/array logging, so you don't have to go and click all those expand arrows.

var a = [{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}];

console.table(a);

Click the top bars to sort to by column.

Get elapsed time between key values. console.time('hi'); console.timeEnd('hi');

[shannonmoeller]

node-sass

Broken node-sass setup? The underlying cause is a mismatch of the version of node and node-sass on servers and what versions the project is configured to use. Not all local machines have the same version, not all internal, or production, servers have the same version. When a project is installed and run at different locations, the build can break.

https://github.com/sass/node-sass/blob/master/TROUBLESHOOTING.md

[noahblon]

Following up to Shannon's post, the reason this has been coming up lately is because grunt-sass, the module in the boilerplate which compiles Sass, has a dependency on node-sass. The version of node-sass that grunt-sass depends on may be incompatible with the version of node running on your computer - your version of node may be too new or too old. There are a couple of solutions:

1) Upgrade grunt-sass to be compatible with your version of node. If you do this, remember that this is the version of node you'll need everywhere you plan to build the project. This means other developers and environments may need to update their version of node as well.

2) Update or deprecate the version of node used to run your build. This might be your global installation, or the standalone version bundled with the project. Node Version Manager is a great way to manage different versions of node on your computer.

If you have any issues, get in touch with Shannon or myself and we can help you navigate them.