There are native widgets available in mac but I don't like them.
I like my own widgets on desktop. Such as Weather, Currency, Timezones, or even system information such as CPU load, Memory status, Disk or network status. I want full control what these widgets are doing and most importantly I want to hone my existing skill sets - JavaScript, React, JSX and learn new thing CoffeeScript.
Its possible using third party app called - ubersicht.
Its a mac app which will allow any JavaScript, React, JSX code to run on your mac desktop and display information.
According to Übersicht:
Übersicht lets you run system commands and display their output on your desktop in little containers, called widgets.
First you need to download and install Übersicht and you can put it into applications folder or anywhere and run it.
Location of all its widgets are:
..../Library/Application Support/Übersicht/widgets
Inside this widgets folder we can create our own widgets.
The widgets folder may look like this:
Folder syntax:
{foldername}.widget
hello-world.widget
.widget is important, without this .widget Übersicht won't recognize.
You can also write your code without creating any folder. Just put your index.js or index.jsx or index.coffee within this location (..../Library/Application Support/Übersicht/widgets) and it will run if there is no error.
How to Debug
Its quite similar the way we inspect element in browser.
click show debug console.
A minimal widget looks like this:
Sample Code:
A sample of complex code to see current month as calendar in CoffeeScript.
Sample Code:
so you got an idea now!
Your widget can have following stuffs at a minimal level:
README.md
screenshot.png
widget.json
index.coffee
or
README.md
screenshot.png
widget.json
index.js
or
README.md
screenshot.png
widget.json
index.jsx
To learn more how to write your code see this link
If you prefer writing in coffeescript then this link.
If you download first existing widgets to try and see how they look then its available in Übersicht official site.
After writing your own widget, you can submit your widget to Übersicht.
Small Warning:
- All widgets are built by third party developers in Übersicht and most of them are nonreponsive to answer your any queries or question (well, it happened to me but you might be lucky). you can create issue in their github and wait for their response. Good luck.
- Don't mess around with system command.
My Currency convertor.
Example:
Currency Conversion
Top comments (0)