Customizable personal dashboard and startpage
# Design update Previously, the dashboard looked cluttered and unbalanced: I've adjusted the font sizes, included more colors and added some space. There's also a new web font. I've once been an advocate for the system font stack, i.e., using native instead of web fonts. But after introducing the Nunito font to my blog this year , I've decided to also give the Dashboard more personality. I've…
It has been some time since the last release. Dashboard became my on-off project, as I've been working on some of my other ideas , like evaluatory . One of the best things was to have some new contributors . With their help, Dashboard now includes some new widgets: Country of the Day: Display information about world countries (from the Tip of the Day project. Twitter Stats: Display various Twitter…
# New widget: GitHub Stats There's a new widget for displaying GitHub stats for a user or a repository 🎉. The main work happened on the backend side. Setting up a unit test infrastructure with jest and supertest was more difficult than expected, mainly getting the axios/cachios mocking right. But it was worth it: Test Driven Development saved me twice already 😊. # Fullscreen feature When viewing…
# Server module I've tried to develop the Dashboard as a client-only web application for as long as possible. But now that I've started including 3rd party data dependencies, I was experiencing CORS issues. Jup, you cannot fetch many resources (like calendar feeds) directly, but you can write a server and just pass through the request. I understand the security implications, but from DX (developer…
# Edit mode redesign 8/10 of my testers found the "edit mode" confusing and unnecessary. From user perspective, I agree: why can't I just drag and drop the widgets without entering an "edit mode"? The challenge was to make it work reliably without sacrificing the simple UI. For example, I like the Text widget's full-size behavior, which makes implementing drag'n'drop more difficult, though. One…
# Usability Dinner As mentioned in my previous post , I have been working hard to polish this project for the Usability Testessen . This event also forced me to concentrate more on the marketing part, i.e., creating a pitch and rethinking the target groups / use cases. In 6 testing sessions (12 minutes each), 11 people gave me lots of feedback and ideas. Some issues were obvious, and I already…
The last few days were crazy 🤩 I got accepted at a Usability Testessen ("usability test dinner") event to present this project and let other people test it. This meant: a lot of cleaning up and polishing. 🧹 First, there are two new widgets: QR Code and Counter . I wanted to do some dogfooding with the QR widget, i.e., use a second laptop at the event to display a QR code leading to the Dashboard…
There is a new widget: Website (Iframe). This makes it possible to include websites or web applications without a designated widget. However, many websites do not allow to render their page in an iframe (via CSP or X-Frame-Options ). Personally, I am using this widget to include Todoist and my own Etherpad instance. Previously, changing a widget setting was reflected immediately, without a way to…
There's a new widget for displaying images! The URL is configurable in the widget's settings modal. Nothing fancy, but there's finally some color on the Dashboard 🎨. I've also started working on a more complex widget (spoiler alert: it's about weather). I've done some more refactorings and improvements along the way to make the development easier. This includes extracting some boilerplate code,…
# Support for remote data So far, all widgets were fully local, i.e., they did not require any remote data. This makes the possibilities rather limited. I have finally designed the architecture to support fetching remote data, and I have implemented the first widget as an example: Chemical Element of the Day. This widget displays the data from my Tip of the Day project. Other TotD widgets will…
# Features A new button in the settings modal makes it possible to delete all user data. This is especially useful in the early stage of development, as the main data schema may still change regularly. # Documentation The project documentation is now hosted on my own domain . The GitHub Markdown preview is nice (and can still be used), but a separate site has some advantages: It is easier to view…
To declutter the main view, I have moved all control buttons into a (hamburger) menu and a settings modal. I've also improved the theme selection, so a preview for each theme is displayed. Something similar will be available for the language selection in the future. Until now, the available widgets and their configurability were hard coded. With more widgets and widget properties (like initial…
The personalization concept is fully implemented: every widget can now define a configuration modal. The first (and currently only) widget is the Search widget, where the user is able to define the title and URL pattern. A list of predefined search engines is also available for a quicker access. When the widgets are initially loaded, a loading spinner was being shown before. I have replaced this…
Every widget can now be removed from the Dashboard. The last missing part of personalization is a settings dialog, so the user can select another search engine for example. As I had previously copied the Button component from my other projects, it did not follow the new CSS variable approach to support different themes. The migration was not as trivial, because I could not use the darken and…
The announced widget drawer is now implemented. This means, all available widgets (date/time, notes, web search) can be placed onto the dashboard and moved/resized within the UI. Removing the widgets is not yet possible, though. I've added multi-language support. Currently, English (default) and German are available. I've used i18next to compare it to the more popular react-intl which I'm using at…
The first step for GUI-based dashboard customization is done: the widgets are now draggable/resizeable. The widget selection is still fixed, though, so I should implement a widget drawer soon. I've also added a new Search widget. Right now the DuckDuckGo search engine is hard-coded, but in the future there will be a list of pre-defined providers and the possibility to define a custom website.…
There is a new widget for showing the current date and time. Additionally, the state is now persisted across the sessions. Under the hood I've added redux-observable to manage side effects, and I've played around with the new React Hooks .
I haven't made much functional progress in the last month as I've been mainly working on my other project: Tip of the Day . It is relevant to the dashboard, though, as I wish to connect both projects. The idea is to have a widget that displays a random tip every day (e.g. "country of the day"). I've also made some progress under the hood and made the text widget editable (the content is not stored…
Now there's support for color themes! I've used CSS variables, so it's easy to switch values at runtime (try out the preview button). There's also a new shiny favicon, based on Font Awesome 5 . Finally, I've introduced React's error boundaries so the app doesn't crash if a single widget throws any error.
I've implemented the first, very basic widget: Text Widget. It just displays fixed text, nothing fancy. Maybe it can be extended to support some basic formatting options in the future. Most work happened under the hood. I've cleaned up the code and tried to establish a good framework to build upon.