This is an unashamed plug for Remy Sharp’s terminal training course command line for non–techies. Go over there and have a look at what he’s lined up for a very affordable price. In a series of videos he explains all the ins and outs of the terminal and its commands that can make you much more effective in your day-to-day job.
I’ve read the ebook of the same course and have to say that I learned quite a few things but – more importantly – remembered a lot I had forgotten. By using the findings over and over a lot has become muscle memory, but it is tough to explain what I am doing. Remy did a great job making the dark command line magic more understandable and less daunting. Here is what the course covers:
Course material
“Just open the terminal”
Just open the terminal (03:22)
Why use a terminal? (03:23)
Navigating directories (07:71)
Navigation shortcuts (01:06)
Install all the things
Running applications (05:47)
brew install fun (07:46)
gem install (06:32)
npm install—global (09:44)
Which is best? (02:13)
Tools of the Terminal Trade
Connecting programs (08:25)
echo & cat (01:34)
grep “searching” (06:22)
head tail less (10:24)
sort | uniq (07:58)
How (not) to shoot yourself in the foot
Delete all the things (07:42)
Super user does…sudo (07:50)
Permissions: mode & owner (11:16)
Kill kill kill! (12:21)
Health checking (12:54)
Making the shell your own
Owning your terminal (09:19)
Fish ~> (10:18)
Themes (01:51)
zsh (zed shell) (10:11)
zsh plugins: z st… (08:26)
Aliases (05:43)
Alias++ → functions (08:15)
Furthering your command line
Piping workflow (08:14)
Setting environment values (03:04)
Default environment variable values (01:46)
Terminal editors (06:41)
wget and cURL (09:53)
ngrok for tunnelling (06:38)
json command for data massage (07:51)
awk for splitting output into columns (04:11)
xargs (for when pipes won’t do) (02:15)
…fun bonus-bonus video (04:13)
I am not getting anything for this, except for making sure that someone as lovely and dedicated as Remy may reach more people with his materials. So, take a peek.
With my talk decks needing more re-use in the Windows/Microsoft community, I am trying to use Powerpoint more and wean myself off the beauty of Keynote (and its random crashes – yes, all software sucks).
One thing I realised today is that Powerpoint thinks it is sensible to break words anywhere to go to a new line, not by word, or even syllable, but by character:
Words are broken into new lines at any character, which makes alignment a not enjoyable game of “find the breakpoint”
This is the preset! To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in:
Format ? Paragraph ? Line Breaks and Alignment ? uncheck: “Allow Latin text to wrap in the middle of a word”
Here’s a recording to show the difference:
By unsetting the preset you can do what you want – line breaks are now only possible after full words
Why this would be a preset is beyond me. Now I can breathe freely again.
Yesterday I got a link to an image on Flickr in a tweet. Splendid. I love Flickr. It has played a massive role in the mashup web, I love the people who work in there and it used to be a superb place to store and share photos without pestering people to sign up for something. Twitter has also been a best-of-breed when it comes to “hackable” URLs. I could get different sizes of images and different parts of people’s pages simply by modifying the URL in a meaningful way. All in all, a kick-ass product, I loved, adored, contributed to and gave to people as a present.
Until I started using a mobile device.
Well, I tapped on the link and got redirected to Chrome on my Nexus 5. Instead of seeing an image as I expected I got a message that I should please download the epic Flickr app. No thanks, I just want to see this picture, thank you very much. I refused to download the app and went to the “web version” instead.
This one redirected me to the Yahoo login. I entered my user name and password and was asked “for security reasons” to enter animated captcha. I am not kidding, here it is:
I entered this and was asked to verify once more that I am totally me and would love to see this picture that was actually not private or anything so it would warrant logging in to start with.
I got the option to do an email verification or answer one of my security questions. Fine, let’s do the email verification.
An email arrived and it looked like this:
As you can see (and if not, I am telling you now) the text seems cut off and there is no code in the email. Touching the text of the mail allows me to scroll to the right and see the full stop after “account.” I thought at first the code was embedded as an image and google had filtered it out, but there was no message of that sort.
Well, that didn’t help. So I went back in the verification process and answered one of my questions instead. The photo wasn’t worth it.
What happened?
By mere chance I found the solution. You can double-tap the email in GMail for Android and it extends it to the full text. Then you can scroll around. For some reason the longest line gets displayed and the rest collapsed.
The learning from that: do not fix line widths in emails (in this case it seems 550px as a layout table) if you display important information.
I am not sure if that is a bug or annoyance in GMail, but in any case, this is not a good user experience. I reported this to Yahoo and hopefully they’ll fix this in the login verification mail.
Firefox 16, now on the Beta channel, has a fantastic feature that was mentioned briefly in the Aurora 16 blog post and first introduced in a separate post by Joe Walker, the feature’s creator. We’ve devoted a sizable portion of the new Developer Toolbar to the “command line”, which you may sometimes see us call GCLI (short for Graphical Command Line Interface). The command line gives you quick keyboard control over your tools and access to features that don’t have any other user interface.
I have made a video version of this blog post so you can see the command line in action:
To get to the Developer Toolbar and the command line, you can use the shift-F2 keyboard shortcut, or select Developer Toolbar from the Web Developer menu. If you want a quicker keyboard shortcut (this is a keyboard-heavy feature, after all!), you can use the Customize Shortcuts add-on to override a shortcut that you don’t use.
This command line is designed to be quick-to-type and discoverable. It will complete commands and parameters for you, to save you typing. There’s also a lot of help built in for the commands and their options. Here’s a look at the list of commands shipped with the initial command line release:
Control Your Tools
Personally, I hate having to reach for my trackpad. Removing my hands from the keyboard just slows me down. The problem is that it’s not easy to remember all of the keyboard shortcuts and traditional keyboard navigation is sometimes not as quick as reaching for the trackpad. Let’s look at how the new command line helps with this.
Let’s say that I forgot the keyboard shortcut for the Web Console. I could reach for my trackpad and hit the Web Console button that is conveniently located on the new Developer Toolbar. Or, I can just remember the keyboard shortcut for the command line and run the command console open. Voila! The console opens. What I actually type to run that command is “con<tab>o<tab><enter>”, which is quick to type indeed.
Want to see what else you can do with the Web Console? Type help console.I’m not even sure if there’s a keyboard shortcut for the Clear button in the Web Console. It’s easier to just run the console clear command than try to remember a seldom used shortcut.
Here are the current commands that control the developer tools:
console – open, clear and close the Web Console
dbg and break – many controls for the Debugger and breakpoints
edit – open the Style Editor on any of the CSS files loaded in the page
inspect – open the Page Inspector for a part of the page
resize – control the Responsive Design View
tilt – control the 3D page view
Let’s look at a more interesting example. The current design of mozilla.org is a responsive design. I want to see how the headings will show up on a smaller screen. If I’ve been working on the page, I would likely know some of the IDs and structure used in the page, so I could enter a command like:
inspect "#home-news h3"
The “inspect” command takes as a parameter a CSS selector that is used to select a node on the page. An easy way to jump into page inspection on any page is to type inspect body, because every page will have only one. After typing inspect "#home-news h3", I’ll see something like this:
In the style panel, I can see that the font size is set to 28px on this heading. How would it look on a phone-sized screen? Many phones report their size as 320×480. Let’s give that a try by typing the following command:
resize to 320 480
That turns on the Responsive Design View and sets the size at the same time. Here’s what the result looks like:
In the Style panel, we can now see that a media query with a max-width has taken effect and the font-size on the heading has dropped to 24px. We can also scroll down and see that the three columns that were side-by-side are now stacked. You could use the resize off command to turn off the Responsive Design View, or you could just hit <esc> a couple of times to get back to normal browsing mode.
Entirely New Developer Features
We’ve also added a handful of commands giving you some new and useful powers. Let’s take a look at a few of them.
Put your hands in the cookie jar
The “cookie” command highlights why this command line is a “graphical” command line and not your old ’70s-style command line. Running cookie list on mozilla.org, I see:
The output shows me all of the cookies that I have right now for this site. If I want to remove that cookie, all I have to do is type cookie remove WT_FPCor, if I think it’s easier, I can click on the “Remove” action listed next to the cookie and that command will be entered on the command line for me. I can also give myself new cookies using the “cookie set” command.
Screenshots for fun and profit
The “screenshot” command is really handy. At mozilla.org, I ran this command:
screenshot heading.png 0 false h1
This said to make a file called “heading.png”, wait 0 seconds before taking the shot, don’t include anything outside the visible browser window and finally grab just the element selected by the “h1″ CSS selector. The result, saved conveniently in my Downloads directory, looks like this:
The command line provides hints inline for each parameter. Pressing F1 gives me even more help about the current parameter.
Stop the blinking!
The “pagemod” command lets you quickly make some bulk changes to the page. If you’re looking at a page and there’s something flashing at you, you can nuke it using the “pagemod remove element” command. See how everything on the page looks without classes by typing:
pagemod remove attribute class *
Or, take a look at how a different headline looks:
pagemod replace "Out of Date News" "The New Hotness"
Here’s a fun one that’s interesting to try out on popular sites:
pagemod remove element iframe
See if you can spot the bits that go away.
More goodies: grab the HTML, reconfigure Firefox
The “export html” command opens a new tab with an HTML snapshot of the current state of the page.
The “addon” command lets you quickly enable and disable addons. This is useful for isolating an add-on that might be causing you trouble, or for keeping some add-ons that you don’t use often turned off.
The “pref” command lets you easily change one of the many configuration options that Firefox has. For example, if you’d like to do some Firefox add-on development, you may find this command handy:
pref set devtools.chrome.enabled true
After that, use the “restart” command to restart the browser, and you’ll find that tools like Scratchpad have gained some extra powers for hacking on your browser. While many add-ons these days are restartless, you’ll find that there are still some popular ones that require a restart when enabling or disabling them, and the restart command is handy for that as well.
Add Your Own
One of the best features of command lines in general is that they are a very scalable form of user interface. Adding more commands does not add visual clutter in the UI you look at all day. Expect to see more commands in future Firefox releases, plus new commands that appear in add-ons.
In a future command line article, we’ll show you how to create your own commands. It’s easier than you might expect!
I killed my Macbook Air the other day and I am still not convinced about the current ones. The intel video chipset has/had problems with WebGL on Chrome and when I tried to connect to a projector, it did nothing whatsoever which is a deal breaker for me as a presenter. It seems the way to fix that issue is to reboot the machine with a power lead attached and connected to the projector. But this still sounds like a hack to me and I don’t buy macs to reboot them before a talk. So I am waiting for the rumoured MBP 13” upgrade which would be cool.
What this taught me though is things I told people for years – back up all your stuff online as you can get it there as a last resort. Of course this is more frustrating than anything when you are on the road and offline or on a very slow hotel connection, but it is better than being stuck as it means that if your hardware deserts you, you can still use some other machine.
For the moment I switched to the company 15” macbook pro for work but it is incredible how unwieldy and slow this one feels in comparison. It has a traditional hard disk, and coming back to that from SSD is just weird – especially for video and presentation work. For example I recorded a voiceover for slides using the Quicktime recording in Keynote and the audio and video was completely out of sync.
So I thought that this is a great opportunity to make a total switch and give full online working a go. I am writing this on the Chromebook I got at the last Google IO and which subsequently left a shy retired life on my shelf. Upgrading to the latest Chrome OS I found it to be actually quite useful. The machine is not as heavy as the 15” MBP to carry around and the keyboard is good. The trackpad is utterly woeful however, but I am 90% a keyboard user.
For editing I use WordPress, Google Docs, Wikis and Etherpad. For coding I am using Cloud 9 IDE which ties in with Github. Storage is Google Drive (although dropbox might be better, just not sure how to do that with a Chromebook. I miss Skitch and I am still not quite happy with Twitter’s page instead of Tweetdeck/Client. I also would love to use Spotify but alas there is no web version except for setting up my own play buttons.
Things I can not do of course is video editing, but I might give the YouTube editors a go.
All in all it is incredible just how much you can do online already and in a lot of cases our offline storage is more of a Linus blanket than really having things handy as we fill up our hard drives without tagging or naming files properly. I will see how far I can go with this and try out the new features the Google infrastructure promises us.
