Skip to main content

Expired To Be: Now Available Most Anywhere

As a gift to the month of April, Expired To Be is now accessible from any browser! :)

What is...
'Expired To Be' is an app where you can set reminders for 'things that expire'. Initially only available from the Chrome web store as a Chrome browser extension, it can now be accessed from any browser.
The new SPA version of the app is hosted on GitHub Pages (and built via Travis CI).

Both apps share the same source code, which is all open source on GitHub.

A Special Treat
The one and only; SPA Integration Diagram: This diagram details the layout and integration between my custom React 'Alarms API' and the Chrome extension core files.

SPA Alarm Notifications
The Expired To Be 'SPA version' provides a few options for 'expiration notifications' (although unfortunately some platforms still don't support web-based notifications; in which case it'll fall back to using the default, which is `alert()`). Modals are the other option, but are more passive.

Important Notes




  1. The SPA and Chrome extension do not share alarms. The extension uses Chrome's own internal storage and alarm system, which is not accessible from a normal web page.
  2. The SPA web page (tab) must stay open to allow the alarms to run. The Chrome extension runs in the browser's background.
Alarms API
For my React-based Alarms API, I borrowed the `TimerBox` component from my previous 'Done (for now)' SPA. (Done (for now) is a multi-timer; it was my 3rd React app, and my 1st TypeScript project.)

Data Storage
Because the 'Expired To Be' and 'Done (for now)' web apps both share the same `localStorage` (one for alarms, the other for timers), I made the Done (for now) timers viewable from within the 'Expired To Be' web app. I then went back and made the 'Expired To Be' alarms viewable from inside the 'Done (for now)' web app as well. Neither app can modify each other's alarms or timers, but there's room for some cross-app adaptability.

Always open to feedback. PRs welcome. ::tiphat::

Keith D Commiskey

Comments

Popular posts from this blog

Memory Recall: An Interview Thought

At least a few hundred JavaScript algorithm challenges after taking Harvard's CS50 course, I realized that I use (my brain uses) a "trie" type of knowledge retrieval approach, as compared to someone who can do more of a "dictionary" type of memory lookup. That is, my recall works better when I'm creating and analyzing code (e.g., surrounded by context).

For instance, if I come across a need for the "spread operator", I may need to look up a quick example for syntax reference, but I know I can use it and I will put it to use. Or I may devise another method that may work out better long term, considering the potential future expansion of that particular code. Or I may just prefer another approach (e.g., I prefer `slice()` and `concat()` for copying arrays (but would always go with whatever coding guide I'm working with, if any)).

Anecdotal disclaimer: Using unfamiliar functionality can take me a half dozen trial and error attempts, but I always …

TypeError: Undefined: Redux 4

Redux 4 > createStore > compose The ErrorTypeError: Cannot read property 'apply' of undefined [node_modules/redux/es/redux.js:523] The Problem and Solution If you've gone through a tutorial in which they suggest adding the Redux Dev Tools in your store.js like this:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() But they're using it inside of a compose(), you could receive a Type Error for an undefined when the extension is not enabled (or present). The correct way to implement the Redux Dev Tools within a compose is as follows:

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose I learned this the hard way, and was eventually brought rescue from GitHub user [zalmoxisus]. zalmoxisus also references the docs for this: [1.2 Advanced store setup (middleware and enhancers)] Code Extract from [store.js] compose( applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ &…