HTTP/2 from scratch

What is HTTP/2?

HTTP/2 is a replacement for how HTTP is expressed ‚Äúon the wire.‚ÄĚ It is¬†not¬†a ground-up rewrite of the protocol; HTTP methods, status codes and semantics are the same, and it should be possible to use the same APIs as HTTP/1.x (possibly with some small additions) to represent the protocol.

The focus of the protocol is on performance; specifically, end-user perceived latency, network and server resource usage. One major goal is to allow the use of a single connection from browsers to a Web site.

It also transfer in binaries format instead of text.

The basis of the work was SPDY, but HTTP/2 has evolved to take the community’s input into account, incorporating several improvements in the process.

Please check my github project to understand in clear.

What are the key differences to HTTP/1.x?

At a high level, HTTP/2:

  • is binary, instead of textual
  • is fully multiplexed, instead of ordered and blocking
  • can therefore use one connection for parallelism
  • uses header compression to reduce overhead
  • allows servers to ‚Äúpush‚ÄĚ responses proactively into client caches

Specifications

HTTP/2 is comprised of two specifications:

  • Hypertext Transfer Protocol version 2 –¬†RFC7540
  • HPACK – Header Compression for HTTP/2 –¬†RFC7541

For more details: https://http2.github.io/faq/

Performance and optimization?

Have you ever noticed that when you surf the web some sites load much quicker than others. How fast any particular web page loads in your browser. A site that loads quickly has good performance. A site that makes you stare at a white screen for a long time has bad performance. The performance of a website relies on several factors like

screen-shot-2016-10-26-at-10-43-43-am

Studies have shown that visitors will abandon a site in as little as three seconds if it does not load properly which impacts very badly on business.

As of July 2016, the average size of a web page is 2.4 megabytes.That means every time you visit a link you are likely downloading 2.4 megabytes of content of which only a small fraction actually matters.

screen-shot-2016-10-26-at-10-43-29-am¬†Every bit of data costs money, and thus serving up¬†a bloated website is wasting company’s¬†money.¬†If the average size of your web pages is 2.4 megabytes¬†and you get a thousand visitors,¬†you just pushed 2.4 gigabytes of data through the web.¬†And if each of those visitors loads a couple of pages,¬†that number is multiplied.¬†

screen-shot-2016-10-26-at-10-58-37-am

Most web hosts operate with bandwidth levels, and once you exceed them, you pay a premium. Hence your site has to be easily search & findable which can be achieved by indexing.

screen-shot-2016-10-26-at-10-59-02-am

Through indexing, your site will be ranked in google search which increase your company revenue. So all together, if you want your site to be found on search engines, making sure they are optimized for performance is an important step. 

So, what is performance?¬†¬†how fast and effective¬†your site loads in the visitor’s browser.¬†And to build a website with great performance,¬†we need to optimize everything within it,¬†from the images, to the code and other elements,¬†to how they are handled on the server,¬†delivered through the network, and processed by the browser.

screen-shot-2016-10-26-at-11-00-04-am

Where can we optimize?

Minifying/compressing css and js files are no longer required/supported by HTTP/2. Images need to be processed well and reduce in size along with responsiveness. Server push will take care of caching etc.

Before you startup and getting into project..

Gothru Postcss and NPM package manager

Lets see how DOM gets loaded sequentially when we have assets like HTML,CSS,Images and Javascript files. It starts with HTML and then it loads CSS,if you have multiple CSS then one after the other all CSS files get loaded and goes on the same with images , javascript files. Here DOM loads only when browser requested web server to load page with web assets using HTTP 1.1 protocol. Following image explains clearly how HTTP1.1 allows DOM to load all its assets.

screen-shot-2016-10-26-at-12-38-55-pm

This uses almost 6 TCP connections to load one after other like shown below

screen-shot-2016-10-26-at-12-48-48-pm

Now lets see how HTTP/2 handles the same..

Prior to that lets see what are requirements to convert to HTTP/2 protocol

screen-shot-2016-10-26-at-12-51-01-pm

By any chance, if any of above requirements fails, browser will use HTTP1.1 protocol by default with out any breaking. HTTP/2 encrypts the web traffic and also uses only HTTPS(you can use openSSL for free) and not HTTP. SPDY(google protocol) been introduced here in HTTP/2 for a better performance.

Lets see how HTTP/2 handles requests..

screen-shot-2016-10-26-at-12-59-11-pm

Using HTTP/2 browser can request and receive many different files¬†at the same time¬†and¬†doesn’t have to wait for one file to finish¬†before starting the download of the next one.

How to measure performance??

We only know checking performance in devtools in network like shown below.

screen-shot-2016-10-26-at-2-16-30-pm

HTTP1.1                                                                             HTTP/2

Also you can see the performance of your website in following links

https://developers.google.com/speed/pagespeed/insights/

https://testmysite.thinkwithgoogle.com

https://www.webpagetest.org/

https://tools.pingdom.com/

Optimizing Images:

Images will take down the performance of a site as images loading consumes average of 70% downloading DOM assets.

Stable image formats

GIF – Small in size and never can be used

JPEG – Universal support, progressive loading, lossy compression and relatively low in size

PNG – lossless data compression, support transparency, complex png is greater in file size than JPEG.

When to use?? Computer generated graphics and image transparency

SVG –

code based, rendered in the browser

style and manipulate using css and javascript

scales to any size or resolution

not universally supported. required PNG fallback

screen-shot-2016-10-26-at-3-50-37-pm

Do manual optimization using photoshop and make blur of unnecessary areas.

screen-shot-2016-10-26-at-3-55-33-pm

Lets date with code now..

You can check my project at this link and just clone it.

Once after you clone it, do npm install and then gulp –verbose to run our project.

Have you ever known that you can optimize your images using gulp? Seriously, i just heard now ;).

Try using gulp-image or gulp-imagemin modules to automate optimization of image.

I opened my project in cmd/terminal and installing gulp-image now.

npm install gulp-image –save-dev

Now go to gulp file and write the following code..

screen-shot-2016-10-26-at-4-59-59-pm

and now run the task “gulp imageoptim” in cmd to see all images and its folders in production folder with compressed format.

Code Optimization for HTTP2..

screen-shot-2016-11-03-at-7-36-32-pm

Automated Minification of HTML,JS and CSS:

We will use gulp-htmlmin – minify html

npm install gup-htmlmin –save-dev

include this in gulp file like

htmlmin = require(‘gulp-htmlmin’)

screen-shot-2016-11-04-at-4-26-13-pm

write the above code in gulpfile for task html and run “gulp html” in command prompt and verify index.html in production folder to see 1 line html code.

gulp-minify – minify javascript

do the same thing like we did earlier with

.pipe(minify()) and run “gulp javascript” which creates new minified files like flexslider-min.js etc. Now map these files in index.html to load faster.

cssnano – minify css

cssnano = require(‘cssnano’)

go to gulp css task and write the code like shown below and finally run gulp to run all tasks(html,javascript,css) and see how faster your site loads in browser.

screen-shot-2016-11-04-at-4-43-19-pm

Modularize CSS for HTTP/2

Instead of loading a gigantic css file, we will split into modules and load the module that is necessary for the page and also load the module that got recently updated.

Merged few css files and called up in index.html individually. Don’t get panic of multi css loads, we will necessary css files using http/2. For more info, just goto my github project and check my “modularize css” commit.

Deferring NonCritical CSS

what is defer? what is async?

Check here

To defer or async js files we have a process to achieve it. But for css files we do not have a simple process like how we do for js files. Hence we do like below.

In our scenario we delete stories and footer.css in index.html and place it in bottom of index.html before end of </body>tag with custom script that loads deferred styles. For more check my github commit

Can we load <link> stylesheets in body for better performance?? Yes by using HTTP/2 support. Generally DOM renders stops when it finds css files, to finish loading of all css files. This behavior will change in HTTP/2. For more see here.

Javascript loading using defer and async

First of all, HTTP/2 makes JavaScript concatenation¬†pretty much unnecessary.¬†You’ll remember, when a page loads in HTTP/1,¬†any time the browser encounters a JavaScript,¬†it stops rendering the page,¬†then downloads the JavaScript file,¬†then re-renders the page.

Lets see how javascript loads regular..

screen-shot-2016-11-05-at-6-59-16-pm

When the browser parses the page,¬†it starts with the HTML and starts parsing it¬†until it encounters the call for the JavaScript.¬†Then it stops parsing the HTML while it downloads¬†and then executes the JavaScript.¬†Only after both the download and execution are complete¬†does it continue parsing the HTML.¬†And here you see why we usually place¬†our JavaScripts at the bottom of the page,¬†so we’re not blocking the HTML parsing¬†until the JavaScript kicks in.

screen-shot-2016-11-05-at-7-04-21-pm

If we append the async attribute to our script call, the way the browser parses the content changes. Now the browser will continue to parse the HTML while the JavaScript is downloading, and the only time the parsing stops is when the JavaScript is executed.

So this improves the performance¬†of the page quite dramatically.¬†The problem with async is you don’t really have control¬†over when the JavaScript will be executed.¬†So that means, if you have¬†a bunch of different scripts called in,¬†and they’re all being called in asynchronously,¬†they will just start executing¬†once they’re finished downloaded,¬†and if you have dependencies,¬†you may end up having a file execute¬†before its dependency has been loaded in the page,¬†and that will cause problems.

screen-shot-2016-11-05-at-7-16-41-pm

The defer attribute kinda solves some of this, and it does it by completely deferring the execution of a JavaScript until everything else has happened.

So, we parse all the HTML,¬†the JavaScript is downloaded whenever it’s encountered,¬†and the execution only happens¬†once the entire HTML is fully parsed.¬†The other thing to know about defer is,¬†when you use defer, the execution of the JavaScript¬†will happen in the order the deferred elements¬†are listed on the page.¬†That means, if you list a bunch¬†of different elements with defer,¬†they will execute from the top down.

screen-shot-2016-11-05-at-7-19-48-pm

In above image, we used async for 4 scripts(which can load parallel while DOM renders) and defer for 1 script(which need to be load at last after DOM renders) and no async/defer for jQuery script.

screen-shot-2016-11-05-at-7-41-04-pm

Compress data using ZGIP

This depends on your hosting server. You may use apache/ngnx etc. You need configure things in .htaccess file in servers like explain below.

https://github.com/h5bp/server-configs-apache

https://github.com/h5bp/server-configs – check this for multiple servers and its configurations

Cache files in browser

You can cache files like (css,js, any image type extensions) and set for a limit to expiration.

screen-shot-2016-11-05-at-8-45-01-pm

In Above image we can see that we cached static assets like css, js for 1 year and images for 1 month. Now it may strike in your mind, how my updated site will get load if i cache for 1 year? Yes, you may updated your site with images, new look by css, or new modules etc. So we have a way to reload specific files using  Cache-Busting.

Cache-Busting

screen-shot-2016-11-05-at-8-55-05-pm

We literally force the browser to download new files and we can do this in a really smart way by simply renaming the files any time we change them.

Now on the face of it that sounds really complicated¬†because we don’t want to rename style.cssto style version one and style version two and so on,¬†but we can use something called a file hash to do this.¬†A file hash is a unique number¬†that’s generated from the contents of a file.¬†And that means anytime you change a file¬†the file hash will change as well and¬†gets a new name¬†and will be brought into the browsers. There are simple tools to achieve this functionality.

screen-shot-2016-11-05-at-9-00-24-pm

As you got to know file-hash, we will name each file with some hashtag and will be cached in browser. If you make changes in style-123456.css, it gets rename and when browser hits server it feels like a new file been added and will be cached immediately for 1 year like shown in below.

screen-shot-2016-11-05-at-9-00-47-pm

We have tools to achieve this functionality and those are

gulp-rev –¬†This tool automatically appends¬†hashes to the end of file names.

gulp-rev-replace –¬†which goes into index.html and any other HTML files,¬†or other files, finds references to the files¬†that were just hashed and changes them¬†so that we don’t have to manually change these files.

¬†rev-del – to go through the manifest¬†and figure out which files¬†are the currently updated versions¬†and delete all the ones that are not¬†so we don’t end up with a ton of different¬†hashed versions of our files in our storage.

Lets see how we will use it in gulp file..

Lets install and include all these 3 modules in gulp file. Now, i am creating a folder named ‘limbo’ as a temp folder to move all changes in files(html,css,js) to this temp before it renames files¬†and from that we will move to production after renaming files(revision and deletions of old files using gulp-rev-replace and rev-del)

Now run gulp to see changes like below..limbo folder and hashtag added to files.

screen-shot-2016-11-05-at-9-44-22-pm

check rev-manifest.json to find the hashtag mappings for the file changes…

screen-shot-2016-11-05-at-9-47-37-pm

Now lets test it, just go to development folder->CSS->header.css and change color value in .masthead and don’t save it immediately. Goto production folder->CSS-> and verify the folder name carefully. It should be replaced from header-123456.css to header-321342.css after saving of header.css file.

By this we can do cache-busting to replace updated file in browser.

To understand more..check my github commit.

Server Push

screen-shot-2016-11-05-at-10-25-09-pm

For server push, you have to configure the files you have to load in advance in .htaccess file of your hosting server. Set link in response header to push all the files you specified in link.

screen-shot-2016-11-05-at-10-33-07-pm

Even you can do the same server push by changing your index.html to index.php and appending the following code in it.

<?php

function push_to_browser($as, $uri) {
header(‘Link: ‘ . $uri . ‘; rel=preload; as=’ . $as, false);
}

$assets = array(
‘<//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i>’ => ‘style’,
‘</style-main.css>’ => ‘style’,
‘/CSS/header.css’ => ‘style’,
‘<//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js>’ => ‘script’,
‘</JS/libs/jquery.flexslider-min.js>’ => ‘script’,
‘</images/mainpromo/welcome01-1600.jpg>’=> ‘image’
);

array_walk( $assets, ‘push_to_browser’)

?>

Note: Please do install php in your machine along with npm module (php2html) in gulp file. Also use it in html task. For more details, please check my github commit.

Leverage CDN’s for performance

screen-shot-2016-11-05-at-11-24-31-pm

You can also check this

Now lets try adding SSL certificates to it and enable https..

screen-shot-2016-11-07-at-11-25-46-am

screen-shot-2016-11-07-at-3-17-57-pm

Now, enable https in gulp webserver like shown below..

screen-shot-2016-11-07-at-3-19-33-pm

Lets run gulp now to see the following

screen-shot-2016-11-07-at-3-22-57-pm

Click proceed and see your project runs with https. For more check my github commit.

Implementation of http2/SPDY protocol referrence took from https://webapplog.com/http2-node/

 

 

 

How to change where Mac screenshots get stored

How to change where Mac screenshots get stored

  1. Launch the Terminal app on your Mac. The easiest way to get to it is to just search for it.
  2. Next you‚Äôll need to type the following command: defaults write com.apple.screencapture location ~/Desktop/Screenshots ‚ÄĒ obviously you should replace my path with your own.
  3. Hit Enter on your keyboard.
  4. Now type killall SystemUIServer.
  5. Hit Enter on your keyboard.

How to install brew?

Before you install make sure you agree Xcode license.. for that just goto terminal and run the following command

sudo xcodebuild -license accept

Now open terminal and run the following code to install brew.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

what is brew?
http://brew.sh
Homebrew installs the stuff you need that Apple didn’t. You can install robomongo app using brew..you can even install mongodb using brew like that

Install Robomongo in mac

Install Robomongo on Mac OSX

About the App

  • App name: Robomongo
  • App description: robomongo (App: Robomongo.app)
  • App website:¬†http://robomongo.org

Install the App

  1. Press Command+Space and type Terminal and press enter/return key.
  2. Run in Terminal app:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null ; brew install caskroom/cask/brew-cask 2> /dev/null
    and press enter/return key. Wait for the command to finish.
  3. Run:
    brew cask install robomongo

Done! You can now use Robomongo.

Source: Mac App Store

MAC Keyboard shortcuts

Cut, copy, paste, and other common shortcuts

          Shortcut Description
Command-X Cut: Remove the selected item and copy it to the Clipboard.
Command-C Copy the selected item to the Clipboard. This also works for files in the Finder.
Command-V Paste the contents of the Clipboard into the current document or app. This also works for files in the Finder.
Command-Z Undo the previous command. You can then press Command-Shift-Z to Redo, reversing the undo command. In some apps, you can undo and redo multiple commands.
Command-A Select All items.
Command-F Find: Open a Find window, or find items in a document.
Command-G Find Again: Find the next occurrence of the item previously found. To find the previous occurrence, press Command-Shift-G.
Command-H Hide the windows of the front app. To view the front app but hide all other apps, press Command-Option-H.
Command-M Minimize the front window to the Dock. To minimize all windows of the front app, press Command-Option-M.
Command-N New: Open an new document or window.
Command-O Open the selected item, or open a dialog to select a file to open.
Command-P Print the current document.
Command-S Save the current document.
Command-W Close the front window. To close all windows of the app, press Command-Option-W.
Command-Q Quit the app.
Option-Command-Esc Force Quit: Choose an app to force quit. Or press Command-Shift-Option-Esc and hold for 3 seconds to force just the front app to quit.
Command‚ÄďSpace¬†bar Spotlight:¬†Show or hide the¬†Spotlight¬†search field. To perform a Spotlight search from a Finder window, press Command‚ÄďOption‚ÄďSpace bar. If you¬†use multiple input sources¬†to type in different languages, these shortcuts¬†change input sources instead of showing Spotlight.
Space bar Quick Look: Use Quick Look to preview the selected item.
Command-Tab Switch apps: Switch to the next most recently used app among your open apps.
Shift-Command-Tilde (~) Switch windows: Switch to the next most recently used window of the front app.
Shift-Command-3 Screenshot: Take a screenshot of the entire screen. Learn more screenshot shortcuts.
Command-Comma (,) Preferences: Open preferences for the front app.

Sleep, log out, and shut down shortcuts

               Shortcut Description
Power button Tap to turn on your Mac or wake your Mac from sleep.
Hold for 1.5 seconds while your Mac is awake to display a dialog asking if you want to restart, sleep, or shut down. If you don’t want to wait 1.5 seconds, press Control‚ÄďPower button or Control‚ÄďMedia Eject¬†¬†.
Hold for 5 seconds to force your Mac to turn off.
Control‚ÄďCommand‚ÄďPower¬†button Force your Mac to restart.
Control‚ÄďShift‚Äď(Power button¬†or¬†Media Eject¬†) Put your displays to sleep.
Control‚ÄďCommand‚ÄďMedia Eject¬† Quit all apps, then restart your Mac. If any open documents have unsaved changes, you’ll be asked whether you want to save them.
Control‚ÄďOption‚ÄďCommand‚Äď(Power¬†button¬†or¬†Media Eject¬†) Quit all apps, then shut down your Mac. If any open documents have unsaved changes, you’ll be asked whether you want to save them.
Shift-Command-Q Log out of your macOS user account. You’ll be asked to confirm.
Option-Shift-Command-Q Log out of your macOS user account immediately, without being asked to confirm.

Document shortcuts

               Shortcut Description
Command-B Boldface the selected text, or turn boldfacing on or off.
Command-I Italicize the selected text, or turn italics on or off.
Command-U Underline the selected text, or turn underlining on or off.
Command-T Show or hide the Fonts window.
Command-D Select the Desktop folder from within an Open dialog or Save dialog.
Control-Command-D Show or hide the definition of the selected word.
Shift-Command-Colon (:) Display the Spelling and Grammar window.
Command-Semicolon (;) Find misspelled words in the document.
Option-Delete Delete the word to the left of the insertion point.
Control-H Delete the character to the left of the insertion point. Or use Delete.
Control-D Delete the character to the right of the insertion point. Or use Fn-Delete.
Fn-Delete Forward delete on keyboards that don’t have a Forward Delete¬† ¬†key. Or use Control-D.
Control-K Delete the text between the insertion point and the end of the line or paragraph.
Command-Delete Select Delete or Don’t Save in a dialog that contains a Delete or Don’t Save button.
Fn‚ÄďUp Arrow Page Up: Scroll up one page.
Fn‚ÄďDown Arrow Page Down: Scroll down one page.
Fn‚ÄďLeft Arrow Home: Scroll to the beginning of a document.
Fn‚ÄďRight Arrow End: Scroll to the end of a document.
Command‚ÄďUp Arrow Move the insertion point to the beginning of the document.
Command‚ÄďDown Arrow Move the insertion point to the end of the document.
Command‚ÄďLeft Arrow Move the insertion point to the beginning of the current line.
Command‚ÄďRight¬†Arrow Move the insertion point to the end of the current line.
Option‚ÄďLeft Arrow Move the insertion point to the beginning of the previous word.
Option‚ÄďRight Arrow Move the insertion point to the end of the next word.
Shift‚ÄďCommand‚ÄďUp¬†Arrow Select the text between the insertion point and the beginning of the document.
Shift‚ÄďCommand‚ÄďDown¬†Arrow Select the text between the insertion point and the end of the document.
Shift‚ÄďCommand‚ÄďLeft¬†Arrow Select the text between the insertion point and the beginning of the current line.
Shift‚ÄďCommand‚ÄďRight¬†Arrow Select the text between the insertion point and the end of the current line.
Shift‚ÄďUp Arrow Extend text selection to the nearest character at the same horizontal location on the line above.
Shift‚ÄďDown Arrow Extend text selection to the nearest character at the same horizontal location on the line below.
Shift‚ÄďLeft Arrow Extend text selection one character to the left.
Shift‚ÄďRight Arrow Extend text selection one character to the right.
Option‚ÄďShift‚ÄďUp¬†Arrow Extend text selection to the beginning of the current paragraph, then to the beginning of the following paragraph if pressed again.
Option‚ÄďShift‚ÄďDown¬†Arrow Extend text selection to the end of the current paragraph, then to the end of the following paragraph if pressed again.
Option‚ÄďShift‚ÄďLeft¬†Arrow Extend text selection to the beginning of the current word, then to the beginning of the following word if pressed again.
Option‚ÄďShift‚ÄďRight¬†Arrow Extend text selection to the end of the current word, then to the end of the following word if pressed again.
Control-A Move to the beginning of the line or paragraph.
Control-E Move to the end of a line or paragraph.
Control-F Move one character forward.
Control-B Move one character backward.
Control-L Center the cursor or selection in the visible area.
Control-P Move up one line.
Control-N Move down one line.
Control-O Insert a new line after the insertion point.
Control-T Swap the character behind the insertion point with the character in front of the insertion point.
Command‚ÄďLeft¬†Curly¬†Bracket¬†({) Left align.
Command‚ÄďRight¬†Curly¬†Bracket¬†(}) Right align.
Shift‚ÄďCommand‚ÄďVertical¬†bar¬†(|) Center align.
Option-Command-F Go to the search field.
Option-Command-T Show or hide a toolbar in the app.
Option-Command-C Copy Style: Copy the formatting settings of the selected item to the Clipboard.
Option-Command-V Paste Style: Apply the copied style to the selected item.
Option-Shift-Command-V Paste and Match Style: Apply the style of the surrounding content to the item pasted within that content.
Option-Command-I Show or hide the inspector window.
Shift-Command-P Page setup: Display a window for selecting document settings.
Shift-Command-S Display the Save As dialog, or duplicate the current document.
Shift‚ÄďCommand‚Äď
Minus sign (-)
Decrease the size of the selected item.
Shift‚ÄďCommand‚Äď
Plus sign (+)
Increase the size of the selected item. Command‚ÄďEqual sign (=) performs the same function.
Shift‚ÄďCommand‚Äď
Question mark (?)
Open the Help menu.

Finder shortcuts

          Shortcut Description
Command-D Duplicate the selected files.
Command-E Eject the selected disk or volume.
Command-F Start a Spotlight search in the Finder window.
Command-I Show the Get Info window for a selected file.
Shift-Command-C Open the Computer window.
Shift-Command-D Open the desktop folder.
Shift-Command-F Open the All My Files window.
Shift-Command-G Open a Go to Folder window.
Shift-Command-H Open the Home folder of the current macOS user account.
Shift-Command-I Open iCloud Drive.
Shift-Command-K Open the Network window.
Option-Command-L Open the Downloads folder.
Shift-Command-O Open the Documents folder.
Shift-Command-R Open the AirDrop window.
Shift-Command-T Add selected Finder item to the Dock (OS X Mountain Lion or earlier)
Control-Shift-Command-T Add selected Finder item to the Dock (OS X Mavericks or later)
Shift-Command-U Open the Utilities folder.
Option-Command-D Show or hide the¬†Dock. This often works even when you’re not in the Finder.
Control-Command-T Add the selected item to the sidebar (OS X Mavericks or later).
Option-Command-P Hide or show the path bar in Finder windows.
Option-Command-S Hide or show the Sidebar in Finder windows.
Command‚ÄďSlash¬†(/) Hide or show the status bar in Finder windows.
Command-J Show View Options.
Command-K Open the Connect to Server window.
Command-L Make an alias of the selected item.
Command-N Open a new Finder window.
Shift-Command-N Create a new folder.
Option-Command-N Create a new Smart Folder.
Command-R Show the original file for the selected alias.
Command-T Show or hide the tab bar when a single tab is open in the current Finder window.
Shift-Command-T Show or hide a Finder tab.
Option-Command-T Show or hide the toolbar when a single tab is open in the current Finder window.
Option-Command-V Move: Move the files in the Clipboard from their original location to the current location.
Option-Command-Y View a Quick Look slideshow of the selected files.
Command-Y Use Quick Look to preview the selected files.
Command-1 View the items in the Finder window as icons.
Command-2 View the items in a Finder window as a list.
Command-3 View the items in a Finder window in columns.
Command-4 View the items in a Finder window with Cover Flow.
Command‚ÄďLeft¬†Bracket¬†([) Go to the previous folder.
Command‚ÄďRight¬†Bracket¬†(]) Go to the next folder.
Command‚ÄďUp Arrow Open the folder that contains the current folder.
Command‚ÄďControl‚ÄďUp¬†Arrow Open the folder that contains the current folder in a new window.
Command‚ÄďDown Arrow Open the selected item.
Command‚ÄďMission¬†Control Show the desktop. This works even when you’re not in the Finder.
Command‚ÄďBrightness¬†Up Turn¬†Target Display Mode¬†on or off.
Command‚ÄďBrightness¬†Down Turn display mirroring on or off when your Mac is connected to more than one display.
Right Arrow Open the selected folder. This works only when in list view.
Left Arrow Close the selected folder. This works only when in list view.
Option‚Äďdouble-click Open a folder in a separate window and close the current window.
Command‚Äďdouble-click Open a folder in a separate tab or window.
Command-Delete Move the selected item to the Trash.
Shift-Command-Delete Empty the Trash.
Option-Shift-Command-Delete Empty the Trash without confirmation dialog.
Command-Y Use Quick Look to preview the files.
Option‚ÄďBrightness¬†Up Open Displays preferences. This works with either Brightness key.
Option‚ÄďMission Control Open Mission Control preferences.
Option‚ÄďVolume Up Open Sound preferences. This works with any of the volume keys.
Command key while dragging Move the dragged item to another volume or location. The pointer changes while you drag the item.
Option key while dragging Copy the dragged item. The pointer changes while you drag the item.
Option-Command while dragging Make an alias of the dragged item. The pointer changes while you drag the item.
Option-click a disclosure triangle Open all folders within the selected folder. This works only when in list view.
Command-click a window title See the folders that contain the current folder.