Introducing: tiny nags.
on Fri, Sep 22, 2017 at 11:03am via Blog by John Caruso

Part of my self-re-education these last few months has been learning different web frameworks that I've been interested in but haven't had the time to dive into. As you may have seen from my last post, one of those is ReactJS, and I'm proud to finally be able to make public the small project I put together while learning it... tinynags.com

tiny nags. is a web-based reminders app that uses HTML5 browser notifications to 'nag' you to do things that you need reminding. I created a few cute little robot characters to give the site a bit of character and not look as boring as it sounds. It supports all modern desktop web browsers (although some with limited support due to html5 notifications not being implemented the same across different browsers and operating systems) and Chrome on Android which was a nice little freebie I got for supporting HTML5 service workers. Safari on iOS doesn't have support for HTML5 notifications so it has been left out in the cold. I may turn this into a mobile app at some point if I have the desire to, or if there is enough demand.

I'm currently trying to promote the site by contacting various productivity blogs and have posted it up on reddit here so if you have a Reddit account, please upvote it for me!
reactjsservice workersnotificationsjavascript
Piggy Backing on ReactJS's ServiceWorker for Notification Event Listeners
on Thu, Aug 31, 2017 at 03:20pm via Blog by John Caruso

About a week ago I decided to start learning ReactJS because why not? just to get some exposure to yet another javascript framework that seems to be pretty popular right now. I had been in the middle of putting together a notification/reminder web app (more on that in a later post) and wasn't particularly happy with the code I ended up putting together to populate the UI. Fast forward to yesterday, I gained some rudimentary knowledge on how to use React, converted my existing jquery based web app to React (along with my ServiceWorker code that was detecting when a notification was clicked or closed) and I was now ready to do a production build of the app. Upon doing the build and testing the resulting site, I found out that my service worker code was no longer firing.

After doing some digging I found out that React uses its own service worker to enable itself to run when your browser or device is offline. I was thrilled that I got that for free out of the box, but it also meant that my service worker was no longer running since you can only have 1 service worker running at a time for a single URL scope.

My solution for this was to merge my service worker code in with React's service worker. Just a warning: This may not be recommended by React, and it might only work for my particular case because I just need to add some event listeners to the service worker. Your mileage may vary.

Since I was no longer able to run any code during the register phase of the service worker (since React is doing the registration), I needed to do the following in order to get a reference to the registration object whenever I want to call showNotification()


navigator.serviceWorker.ready.then(registration => {
registration.showNotification("Notification Text",
{
data: {
id: "recordid"
}
});
});


On the service worker side, I just need to paste in my event listeners into the service-worker.js file in the /build directory after building the React project. Keep in mind, you will need to do this every time you re-build your React project since that file will get replaced.


self.addEventListener("notificationclick", handleClickClose)
self.addEventListener("notificationclose", handleClickClose)

function handleClickClose(event) {

const n = event.notification;

sendMessage(n.data.id)

n.close();
}


And thats all there is to it! You might notice that I'm calling a method sendMessage() in my event handler. I'm using this to let my application know which notification is being acted on. It isn't required for the event handler to work, but it is part of the functionality for the web app I'm working on. sendMessage() is implemented as follows:


function sendMessage(pstrMessage)
{
clients.matchAll({includeUncontrolled: true, type: 'window'}).then(clients => {

clients.forEach(client => {

client.postMessage(pstrMessage)

})
})
}


And I have an event listener that is registered during componentDidMount() in my React app's root class that listens for messages from the service worker:


navigator.serviceWorker.addEventListener('message', function(event){
// do some work here
console.log("click notification for " + event.data)

});



Just one final note, I wrapped the registration of my original service worker in an if statement that checks if I'm in dev mode or not. This way it will still register during development (since the React service worker isn't registered) and it is prevented from registering in production.


if (window.location.port === "3000")
{
navigator.serviceWorker.register('/sw.js').then(...)
}


I imagine if I was better versed in React and building npm packages that there might be some way to bundle this up into a cleaner package that would make it more reusable and tie into the React build process in order to skip the manual step of copy/pasting the event listeners into the service-worker.js file. If anyone stumbles on this article and has knowledge of how to do that please let me know!
reactjsserviceworker apijavascriptnotification api
New iOS App In The Works
on Thu, Aug 10, 2017 at 04:03pm via Blog by John Caruso

My first foray into native (non Cordova) iOS apps has been in the works for the last couple of weeks. I read through Matt Neuburg's iOS 10 Programming Fundamentals with Swift and Programming iOS 10 (although I cherry picked the parts I thought I'd need in this one) and then got started writing my first app, tentatively titled WallpaperCapture; A camera app that lets you take a photo for your iPhone lock screen and home screen with all of the labels and objects you'd normally see superimposed on the screen so you can frame the scene perfectly.

The goal with this app right now isn't to get rich (I'm going to release it for free, possibly ad supported) but rather to practice what I've been learning, and experiment with interface objects and frameworks that I'll likely need in the future on a much larger project. I've got a preliminary build that I'm testing right now that provides the time, date and other lock screen labels of an iPhone, along with the Perspective Zoom so that the photo that you take will look exactly as it does when you set it as a lock screen photo. The photos are currently stored into an app specific album in the Photos app, but I'm planning on having an in-app library to see all of the photos that have been taken. Eventually I will provide a way to upload the best images 'to the cloud' so that the photos can be shared with other users looking for interesting and unique wallpapers.

I'm in the process of implementing Fabric.io's Crashlytics for app statistics prior to releasing the app to some users via TestFlight (email me if you are interested in being part of the beta test group). Once that is done and I'm ready to implement the ads and photo upload, I think I'm going to integrate with Firebase since it is an all in one SDK for ads, cloud storage and countless other features that I may need in the future.
iOSfabricfirebase
Experiment in SEO: CarKeyBatteryDepot.com
on Mon, Aug 07, 2017 at 05:14pm via Blog by John Caruso

Over the last couple of weeks I have been getting up to speed with a few web development frameworks that I've been wanting to work on: NodeJS and bootstrap. I had experimented with both of them a little over the last few years, but I never had the chance to actually work on a project, until now.

I had the idea to put together a little website to search for car key replacement batteries when my Mazda 3's car key was starting to get a little weak. Doing a google search returned some results but nothing definitive, other than a few youtube videos on how to replace the battery. Nothing outright stated that a 2014 Mazda 3 uses a CR2025 type coin battery, so it didn't give me the confidence that I was actually getting the right battery without confirming it with the car manual. And further more, those youtube videos didn't give me an option to buy an actual replacement battery.

So I set out to build a new site that would both definitively tell you what kind of battery your car key needs, and give you some cheap options to purchase a replacement battery and I called it CarKeyBatteryDepot.com. The website lets you specify your car's year, make and model and key fob type (if there is more than one for your car) and it displays the type of replacement battery you need and provides you a list of vendors to purchase the battery from for cheap. The battery database was built by going through hundreds of car manuals (so far only Mazda and Toyota from 1999-2019 is supported) using a Python program I wrote to read the PDFs and extract the battery data. The purchasing options are pulled from Amazon's Product Advertising API.

The site was built using NodeJS and NGINX with a LokiJS backend for fast searching and Bootstrap to provide a responsive UI. I followed Mozilla's Beginner's Guide to SEO to get the basics of SEO to give the site the best chance of being the top Google search result. Specifically, I'm using the following techniques:

I've been waiting to see how well this works, but Google hasn't indexed the site as of yet. This blog post is meant to both give me a way to introduce the site to anyone who is following my website, and to give Google another link to the site in the hopes that they consider this as me vouching for the site which should help its site rank. I'm hoping this little experiment works and that I can generate a few bucks off of Amazon referrals, as well as use it as an example when attempting SEO for other people. I'll post a follow up once I have some definitive results.
nodejsbootstraplokijsseoamazon
Programming Language Potpourri
on Fri, May 06, 2016 at 11:22am via Blog by John Caruso

At one point this morning I was thinking about what subject to tackle next and I started thinking about all of the different programming languages that I'm currently, actively, writing in at the moment between all of my contract and personal projects. It was getting a little scary when I realized there were about 6 different languages that I write in on an almost daily basis at my contract job, and another 2 that I kind of hack around with at home.

Contract #1

HTML5 Apps
- Javascript using the Sencha Touch and EXTJS framework
- Java for custom native Cordova plugins on Android
- Objective-C and Swift for custom native Cordova plugins on iOS

Main Web app and Webservices
- C# for latest main application and mobile REST services
- VB for previous main application still supported by the client
- Java for a custom web service for solving routing problems using jsprit
- TSQL for database stored procedures

Contract #2

50BookPledge.ca
- PHP for dynamic web pages
- Javacript for the usual cool site interaction stuff

84 North Studios Projects

SilverBeak.com
- Python using bottlepy for the site

And a bunch of other things using a combination of all of the languages already mentioned


That list ended up being bigger than I thought it was going to be when I first started writing this post. I had to go back and update the language count in the first paragraph a couple of times.

Listing all those out has started to worry me a bit about how well I actually know those languages. The doubt started creeping in yesterday when I stumbled on Standard JS Style and read through a couple of links. Mainly the part about not using semicolons to terminate a line. I knew they weren't required, but I didn't know why or in what situations you'd need to either make exceptions or handle the fact that the js interpreter might get confused (like starting a line with [ ( and some other chars). I've since done the requisite reading and now have the knowledge, but that just leads me to think what else don't I know that I DON'T KNOW? I think I need to start trying to just buckle down and specialize in one or two of these areas that I use a lot and just learn all there is to know. I'm leaning towards javascript, and maybe even dumping PHP in favour of nodejs since I've been wanting to use it for a project lately but don't know for what yet.
phppythonjavac#vbtsqljavascriptobjective-cswiftprogramming languagenodejsbottlepysencha

Get Hosting With Linode.com