Do you run OS X (soon to be macOS)? Are there graphs or charts that you check daily or weekly? If you answered yes, you might want to try a powerful, yet completely hidden feature of OS X: web clips.
Web clips let you take a clip of a web page and save it as a widget that appears in the OS X Dashboard. The image below shows three web clips on my Dashboard.
What you’re seeing is a slice of three different URLs that I periodically visit to see how NativeScript is doing.
The big advantage of these clips is they let you see all of this information on one screen without actually visiting the web page. If you’re interested in setting up a screen like this yourself, read on!
The first thing you need to know about web clips is that they live on an OS X Dashboard, which is an OS X feature that displays a series of widgets — not just web clips. Here’s what a dashboard might look like.
The Dashboard is off by default as of OS X Yosemite, and to enable it you’ll need to go to System Preferences → Mission Control, and then change the “Dashboard” dropdown to either “As Space” or “Overlay”.
If you choose “As Space” the Dashboard will appear as an OS X Space, meaning you can navigate to and from the Dashboard using
→; if you choose “Overlay”, you can show and hide the dashboard using the
F12 key on your keyboard.
Regardless of your personal preference, once you have dashboards enabled you’re ready to add clips.
Next, open Safari and go to the URL you’d like to take a clip from. For this example I’ll be using http://stackoverflow.com/tags/nativescript/topusers if you’d like to follow along. Here’s what that page looks like in Safari.
NOTE: One limitation you should know is clips don’t have the ability to share authentication tokens and cookies with Safari; therefore, any content that lives behind a login screen won’t be accessible to a web clip.
With Safari open, head to the OS X menu bar, open the “File” menu, and then select the “Open in Dashboard...” option. OS X will place a little white box on the screen, which you can use to select the portion of page you’d like to be the clip. When you’re done hit the “Add” button in the top-right corner of the screen.
After that head to your Dashboard to see what the clip looks like. If the display is a little off click the little info icon in the bottom-right corner.
Here you’ll be able to select different frames for your clip, and if you click the “Edit” button you’ll be able to move your content around to fit in the frame.
And with that you’re done! Here’s what the final clip looks like for me.
Go ahead and experiment with other content you’d like to have persisted on the Dashboard, and let us know if you find clips handy in the comments.
TJ VanToll is a frontend developer, author, and a former principal developer advocate for Progress.
Subscribe to be the first to get our expert-written articles and tutorials for developers!