Ultimate guide for Web Development on Chromebook — Part 2: ChromeOS tricks and workflows
In the previous article I recommended using Crouton with no desktop environment and with xiwi instead. The best thing about xiwi is that you can launch your favorite Linux programs while not leaving the Google Chrome inside your ChromeOS. This enables you to use Linux and benefit from the good parts of ChromeOS at the same time. Let me show you which ChromeOS tricks I use the most during web development.
Some of these tricks may not be strictly related to ChromeOS itself but rather to the Chrome browser, but being proficient with Chrome is essential, since you’re using it all the time.
ChromeOS shortcuts
Window and tab management
ALT + [ // Dock window left | 50% width
Alt + ] //Dock window right | 50% width
ALT + [ + [ // Dock window left | 20% width
ALT + ] + ] //Dock window right | 20% widthI could not live without this. I rarely start coding without having two terminals docked on the right of the screen. Server runs in the right top one, and at bottom right I usually have terminator running with multiple tabs and I launch whatever I need with xiwi there as well as necessary git and tooling commands.
There’s also other shortcuts I use on daily basis:
CTRL + SHIFT + I // Open the developer console
SHIFT + ESC // Open task manager. See what websites slow down the Chrome and avoid having them open multiple times
CTRL + Switcher key // Take a screenshot
CTRL + SHIFT + Switcher key // Take a partial screenshot
ALT + SHIFT + M // Open the file browser
[Fullscreen button] // When you are writing that long algorithm and need distraction free mode
CTRL + U // View sourceOn ChromeOS you need to have your tabs organized more than on any other OS. Hold CTLR or SHIFT and click tabs to quickly select only the ones you need, move them to new window, different window, close them, pin them.
Pinning tabs might be useful if you stumble on a resource that you want to deal with later. It is also useful for sites like Facebook, Twitter where the constantly updating title could be distracting.
Keyboard shortcut CTRL + SHIFT + X for pinning tabs is available only with this little extension.
Switching projects
Usually when you need to start working on a project, you need to open a certain couple of links that you need for it. Slack channel, Trello board, development version of the website, production version of the website, one ore more terminals. Opening all these every time can be annoying. I have looked around for some extensions to fasten this process, yet none suited my needs fully.
So in the end, I have found quite a simple workflow to quickly open the URLs I need. Just put them in a bookmark folder and then press CTRL + SHIFT + B, right click the bookmark folder and click open all bookmarks.
Custom search engines
Chrome lets you add custom search engines and that can rapidly fasten the process of finding information online. You don’t have to start loading big sized dashboards first. No, you can start searching right-away, right from your Omnibar.
Setting up custom search engines can be done right in Settings -> Search -> Manage search engines
Github | github | https://github.com/search?q=%sGithub user | gituser | https://github.com/%s
Google free images | freeimg | https://www.google.cz/search?q=%s&tbm=isch&tbs=sur:f
Google images | gimg | https://www.google.com/search?q=%s&tbm=isch
Google fonts gfonts | https://www.google.cz/search?q=site%3Ahttps%3A%2F%2Fwww.google.com%2Ffonts%2Fspecimen%2F%20%20%s
Stack overflow | so | https://www.google.com/search?q=%s%20site%3Astackoverflow.com
NPM | npm | https://www.npmjs.com/search?q=%s
Bower | bower | http://bower.io/search/?q=%s
Ember addons | ember | http://www.emberaddons.com/?query=%s
Sublime packages | subl | https://packagecontrol.io/search/%s
JQuery plugins | jquery | https://plugins.jquery.com/?s=%s
And here’s a couple of search engines that are useful generally:
Wolfram Alpha | wol | http://www.wolframalpha.com/input/?i=%s
Youtube | yt | http://www.youtube.com/results?search_query=%s
Gmail | gm | https://mail.google.com/mail/ca/u/0/#search/%s
Time.is | timeat | http://time.is/?q=%s
SoundCloud | sc | http://soundcloud.com/search?q=%s
Reddit | reddit | http://www.reddit.com/search?q=%s
Google maps | gmaps | https://www.google.cz/maps/search/%sExtensions
Screen capturing
When communicating with clients and colleagues, making quick screenshots is often fundamental to explain an issue quickly and clearly.
Even though the Chrome shortcuts for screenshots are good enough to use most of the time, sometimes you need more. There’s two extensions I have found useful. Save to Google Drive extension allows you to capture entire web pages very quickly and also download images right into the Google Drive. Nimbus screenshot offers much more functionality — precise clipping, annotating as well as resizing.
Measurements
While on other OS you may install additional software to pick colors and measure distances on screen. You could launch something through linux or switch entirely to a linux desktop environment but there’s quite good solutions that let you stay in ChromeOS. Browser extensions are quick to use and do surprisingly good job. Here’s a few I use:
WhatFont? — font identification in the browser. It works only on texts, not images though. Information is being pulled from font-family.
Dimensions — This extension measures distances on screen. Works on images as well. For some other measuring you might want to use Page ruler, becuase Dimension rely on pixel colors.
Page ruler — Sometimes Dimensions are not suitable. Page ruler should be a good replacement in those cases.
ColorPick Eyedropper — Color picker and a handy color palette. With zoom so extracting color out of those 1px borders is easy.
Analysis
WAVE Evaluation Tool — Web Accessibility diagnostics.
Wappalyzer — Identify what technology is being used on the web.
SEOQuake — SEO diagnostics
Miscellaneous
JSONView — Color highlighting of JSON data right in the browser, as well as expanding, reducing objects
1-click timer — Timer with nice UI. Limited to 60 minutes though.
Gistbox clipper — Save code snippets from anywhere to your gists
Apps
Postman — Sending custom requests. Testing APIs.
Gistbox — Organize and manage your Gists
Caret — When you need to edit something quickly and there is no need to enter chroot
— — — — —
I am a Freelancer Developer currently looking for work for upcoming months. I specialise in building single page applications with Ember.js and performance optimisations. Feel free to contact me at malindacz@gmail.com or twitter.com/@martinmalinda.cz
