Introduction
In the Junior IT Analyst program, accessing numerous web resources can present a significant challenge, due to the constant need to type out URLs and navigate between sites. To address this issue, I’ve developed a dashboard aimed at providing fellow participants with a quick and seamless solution for accessing the necessary websites.
Accessing the site
You can visit the dashboard at jita.tualex.ca
It is designed to work on all modern browsers, it’s also responsively designed to be mobile-friendly.
I recommend bookmarking it to your bookmark bar or setting it up as the default “new tab” page for quick and convenient access.
What’s on the dashboard?
Quicklinks
Starting, there’s a “Quicklinks” section where I’ve put all the frequently used sites that you can click to take you to the page in a new tab.
There’s also a small colored dot in the bottom right of each link. These are ping status indicators that let you know if the site is reachable. Green = Online, Yellow = Loading, Red = Offline.
Message board
I put a message board for flexibility in adding additional information at later dates, any important information relating to the dashboard is planned to be in this area.
Bookmarklets
Bookmarklets are browser bookmarks that instead of taking you to a webpage, execute JavaScript. They are usually small snippets that when clicked, perform a function.
I’ve created a couple of Bookmarklets for Coursera. They can be “installed” by dragging them into your bookmark bar
Combined Coursera Expand/Open May 16th 2024
I've combined the 2 "Expand/Open" bookmarklets and 2 "Compress/Close" bookmarkletsI recommend using the newer 2 in 1 bookmarklet above, for informational purposes I've left the older bookmarklets on the page
Coursera Home page
Coursera Expand Accordion - Alex Tu
Coursera Compress Accordion - Alex Tu
Coursera Lecture/Supplement/Quiz page
Note: You have to open the side menu by clicking “Menu” in the top left
Taking screenshots of Coursera
Taking screenshots of the Coursera page for submission onto Blackboard can be a bit tedious. There are so many different programs to choose from, but this would require installation, consuming space and resources. Then I would have to give instructions based on platforms, installed applications, operating systems, etc.
Instead, we can take advantage of the features built into an already installed program, the browser. This approach has the advantage of:
- No additional programs to install: This means you can do this anywhere, at the library without admin privileges for example
- Cross Operating system compatibility: This method works on Windows, Linux, MacOS
- Highly functional: After a quick configuration, screenshots can be taken in 2-4 actions and come out reliably
The setup
We’re going to be using the developer tools’ screenshot feature with the Responsive Design/Device Mode in Firefox/Chrome. I prefer Firefox as it’s my primary browser and requires fewer actions compared to Chromium browsers.
First, we need to get into Responsive Design/Device Mode, you can follow the hotkeys below if you’re using a Chromium-based browser like Brave, Edge, Opera, etc. Try the Google Chrome hotkeys. They should be the same.
| Browser | Windows/Linux Hotkey | Action |
|---|---|---|
| Firefox | CTRL + SHIFT + M | Opens Responsive Design Mode |
| Google Chrome | CTRL + SHIFT + C, CTRL + SHIFT + M | Toggle Inspect Element Mode, Toggle Device Mode |
Next, we’re going to change the dimensions of our “device”, a size of 1100 by 3300 is what I found best in most cases. Once you nail a width that you like, the only thing you might want to change is the height as modules have varying amounts of content. I prefer to leave my height at 3300 since I don’t mind the extra white spacing at the bottom.
You could also add a preset for the resolution by clicking the dropdown to the left > Edit > Add custom device > Then setting it up.
- Device name I use “Coursera Screenshot”, but it could be anything
- Resolution 1100 x 3300, what I found works best
Taking the screenshot
While in the Responsive Design/Device Mode we can take a screenshot via the menu items.
- Firefox, there’s a camera icon in the top left, click that.
- Chromium, there’s a skewer menu in the top left, click that > Capture full sized screenshot.
Conclusion
Voilà! I hope at least one thing is of use.
- Dashboard for quick and easy access to links
- Bookmarklets for a one-click way to expand/close sections on Coursera
- Screenshot flow for a lightweight, do-anywhere solution for taking long screenshots
This blog post is a work in progress and I’d appreciate suggestions, clarifications, or feedback. Feel free to reach out to me on Zulipchat for suggestions or feedback.