Learning React

Since my last update about my #photo-album-project I’ve been busy gathering up learning resources and have started in on some learning.

A lot of the resources I’ve found are online. I’ve been scanning and bookmarking articles on MongoDB, Node.js, creating APIs and other things. A site I hadn’t come across before this is FreeCodeCamp. They seem to have a great mix of articles about all kinds of different topics. I have a number from here bookmarked to come back to.

Besides online, I also ordered a book for further down the learning road called iOS Apprentice from raywenderlich.com. It was recommended by my esteemed colleague Aaron Douglas.

For my first task I’ve decided to learn is React. I found a great course on udemy.com called Modern React with Redux. I’m about a third of the way through the course, it has over 40 hours of video lecture and activities. I’m to a point now where I could likely get started building the React part of my project, but I want to finish the course. Currently I’m at the point where I’m learning about Redux. It is just early on, but it is a bit of a struggle to wrap my mind around it so far. I could build my app without it pretty easy, but it is a common way to build complex React applications so I want to get a good sense of how it works and will likely end up using it even though it may be overkill.

The structure of this course really works for me. The instructor, Stephen Grider, does a really good job explaining what is happening and for me the right level of how things are working and why to use it, mixed with examples and activities to build little applications.

So fat things have felt pretty straight forward and I’ve been able to go through the lectures and activities with the playback speed at 1.5x, but moving into Redux, I’ve had to slow down and go back and re-watch some sections. I feel like it is starting to come together, and I think I as I go on in the course it will be even better.

Even though I’ve mostly been typing out exactly the code I’m shown in the course, it has been fun to code a bit and see the results show up on my screen. I’m excited to keep going.

Starting a new project

In the spirit of never stop learning I want to start a new project. It has been a long time since I learned anything new related to programming and I’ve been wanting to dust of the rust and build something for a while.

Background

It seems like every time I go to learn a new programming language I use our families private online photo album as my thing to redo. Over the years it has gone through a number of iterations. Each version in a new language went through a few versions before scrapping the old and re-writing it in a new language.

It started out as a Classic ASP script that was pretty easy to use. You would create a folder and dump images into it and it would render a simple gallery to look through them.

From there it went to a Flash version where it used XML files to store information about the images and then display them in a flash format. This is really where the organization started coming in. We created collections of albums which were usually simply a month, but not always, so something like “September 2019”. Inside that collection there could be a number of Albums. Examples of these would be “Noahs Birthday”, or “Back to School”. Then each album would contain images which had a couple fields of information like a title and note you could add to each one. This structure has carried over.

The next version was to move to PHP with a MySql database to store information about everything. This one stuck around for quite a while but re-written a few times and had new features added to it. So lots of iterations. This was one of the tricker ones to get sorted out because I had to write an importer to parse the XML files and insert them into the database.

One mistake I made here as well was to store all the images into one directory. I really liked the idea of the first one where things were organized by folders so that if I just wanted to browser through them the folders had meaning and I could go through them just on the file system. So if I backed everything up and didn’t have a web server to view things on I could still see and have some understanding of when and what the images were from. So in one of the PHP versions I corrected this and wrote a script to go through and create folders based on the Collection and Album names and move all the images into them.

The last iteration which has somehow hung around and kept working for more years than I intended was written in Node.js. It is pretty rough and I kept the MySql database to store everything in. The code for this is not ideal but it is working.

Besides learning some about Node.js I also added some new features which have been useful. I set things up so that when uploading they were automatically stored in shared Dropbox folder so things are automatically backed up there and in the folder structure I mentioned before so they can easily be viewed with out the app. The other fun addition was the automatic creation of different image sizes in a separate folder and sort of a cache. When an album is viewed it checks each image to see if there is a thumbnail version in the cache folder to show and if not it generates one and saves it. It does the same for a more medium size view of the image while keeping the high resolution original to have access to. The last thing was a rudimentary search function where it can search the title and comment fields and show all images that have the term you searched for in an exact word search.

Project outline

For this project it kind of exploded in scope really quickly when I started thinking about it. The first thought was that I wanted to learn to create an iOS app and figured the photo album would be a great way to do it. I figure the best way to do that would be to have an API for the photo album that the app could talk back and forth to.

The current version doesn’t have an API and needs a refresh anyway so I decided I’d start there and re-write it still in Node.js but with a bit better understanding of how it works now and have it be API driven as well. I’ve never created anything API driven before and so it introduces some challenges. One of them being how to secure things properly.

Another thing that has been on my list for a while is to learn React, so why not use it in the re-write. I’ve been using MySql for a long time and I have a good understanding of it, but I was never happy with the database code in the current photo album and so I’ve decided to look at a NoSql database like MongoDB. With that it led me to find Mongoose as well. I’ll have to create a migration script as well to move things from MySql to MongoDB.

This is going to be a pretty big undertaking and I have no illusions about how long it will likely take. Right now I’m still in the information gathering stage and gathering learning resources. I’m going to start with creating the API and then build the web version to interact with it. I’ll start with a blank database and then migrate over the existing data. Once that is all working well I’ll move on to creating the iOS app. Likely in parallel I’ll spend some time learning about iOS development and going through some tutorials.

I’m not going to set a deadline for myself as life is really busy but it will be a slow road. I plan to blog about the progress and start a GitHub Repo to store things in as I go. If you want to follow along I’ll be using the tag #project-photo-album

Meds Reminder

With my last post I talked about having to take eye drops every hour when I’m awake and then an ointment for while I’m asleep. I thought it would be hard remember to put them in and keep track if I had done it for this hour yet or not so I wanted to set reminders for myself.

On my phone I have almost all notifications turned off but on my Fitbit I do get notified of phone calls or text messages. Very rarely do I get either of those so typically when I do it is something important. Instead of setting an alarm for every hour of the day I thought I could finally try out the Twilio trial I had signed up for some time ago and send myself a text message every hour from 6am to 10pm. It was surprisingly easy to setup.

I’m most familiar with php and I’ve been really limiting my screen time so I can rest my eyes. I haven’t worn my glasses in days so it’s a strain to read without them and keeping them closed is when they feel the best.

Here’s the very simple setup I did, most all of it came directly from the Twilio documentation and all of it was done from the terminal.

  1. Signup for a Twilio account.
  2. Create a new site on an existing hosting account I have.
  3. Downloaded the Twilio PHP SDK using Composer.
    I’m not really familiar with Composer but these are the commands I used:

    • Download Composer
      php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
      php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
      php composer-setup.php
      php -r "unlink('composer-setup.php');"
      
    • Download the SDK
      php composer.phar require twilio/sdk
  4. Create a new php file with the following code
    <?php
    require_once 'vendor/autoload.php';
    $sid = "ACxxxxxx"; // Your Account SID from www.twilio.com/console
    $token = "xxxxxx"; // Your Auth Token from www.twilio.com/console
    
    $client = new Twilio\Rest\Client($sid, $token);
    $message = $client->messages->create(
      '+15555555555', // Send text from this number
      array(
        'from' => '+15555555555', // From a valid Twilio number
        'body' => 'Take your drops'
      )
    );
    
    print $message->sid;
    
  5. Create a cronjob to run the hours you want and visit the webpage
    0 6-22 * * * wget -q --read-timeout=0.0 --waitretry=5 --tries=5 --background http://{url for file created above}

Now I get a text ever hour on the hour from 6am to 10pm and my FitBit notifies me that it’s time to put in the drops.

Dial-up Internet

Dial-up Internet

Sometimes I miss the beautiful singing of dial-up modems communicating with each other and negotiating the terms of their courtship.

A brief thread in Slack at work had us joking about old technology, even though some of it isn’t all that old, but it had me try to be poetic about the days of dial-up internet. The sound really does hold some nostalgia for me. I remember the first time I heard a modem dial-up and connect with another computer on the other end. At that point, I didn’t understand what was going on and how it was working, but listening and then seeing information slowly appear on the screen from out on the Internet was special.

My career in support and technology started by providing support over the phone for an Internet Service Provider. People would call us up when they were having problems dialing up and connecting. Init strings, disabling call waiting, removing those splitters and dollar store phone cord, and uninstall and reinstall dial-up networking, were all familiar things we’d do so people could hear that sound.

The Internet has changed so much since then but people are still using it to connect, and I’m still earning my living by helping them to do it. It’s just a little less noisy.

Hour of Code

This morning I was able to spend a bit of time with Noah in his class. They were participating in the Hour of Code. It was really neat seeing all the kids with Chromebooks working away.

Noah and I started out playing with Scratch. He wanted to build a basketball game but we didn’t have that much time and I haven’t spent a lot of time with Scratch so I’m not really familiar. We did make a character dribble a basketball across the screen.

From there we moved onto Code.org where we went through the steps to make a flappy bird game. It had ten steps where it gets you to setup the concepts of the game and change them around to immediately see the effect they have on the game. At the end he received a certificate he could print out.

He grasps the different concepts pretty quickly and seemed to really enjoy things. Im going to have to brush up on Scratch and maybe we can work at building that basketball game he wanted.

New .blog Site Address

New .blog Site Address

For many of my tech following readers may know Automattic, my employer, is behind the new domain extension .blog. The .blog domains were just recently released to be generally available to anyone who would like to register one. If you would like to, you can over at https://get.blog

Yesterday the activation was finished and I setup my new address for my blog here. Automattic allowed each employee to reserve a domain name and I thought long and hard about it. I came close to asking for sandy.blog because it’s nice and short. But I already have a pretty nice short domain name of sandym.ca which also redirects people here. So instead I opted for a more useful domain and received mcfadden.blog

This allows me to also create sub domains so that others in my family, if they wanted to start their own blog, could have a fantastic domain name too. Because I have access to mcfadden.blog I can now setup sub domains like https://sandy.mcfadden.blog/ which is the main address I’m using for this site now. Maybe my kids want to start blogging some day, I can then set them up with theirname.mcfadden.blog if they wish. Last night we switched my wife’s address for her site over so that it is now https://jen.mcfadden.blog/

I’m pumped to have this new domain for my blog, thank you Automattic!

Technology Woes

Most of the time technology and I get along really well. Much of my time is spent working with technology and helping others use it. That’s the way I like it, me being the one to figure something out and help someone else use it. When it goes the other way and technology doesn’t work the way I expect it to, right or wrong, and I can’t figure out how to make it work I get frustrated.

Today I took a break from work to go for a run. My running companions are my iPhone with the Runkeeper app and my Pebble watch. Obviously I can and should run without these things, and just go for the enjoyment. However I love tracking and working to improve my running. Whether it’s to go faster or to go further or both. Being able to do better than I did before is a big motivator for me. Runkeeper does the hard work of tracking everything and while I’m running it displays how long I’ve been running, my average pace, and my distance.

Usually this whole process works perfect, today however and a few times in the past, the information doesn’t show up on my watch. Usually I don’t notice because I start my run and put my phone in my pocket and start out. It’s usually a little bit later when I look at my wrist to see and get my pace where I want it. Today my goal was to try and keep a pace of 5:00 min/km for as long as I could. I felt like I was running blind when I couldn’t easily see and keep track.

After my first km I stopped and tried to get it figured out. There is no reason I can figure out that causes this to not work when it does. Everything is still connected I was receiving email notifications right before I started. A big part of it is likely because I don’t fully understand how the connection works and how things need to be setup. It just usually works and I don’t worry about it. I tried restarting both the watch and the phone, disconnecting bluetooth and setting it back up again.

Finally after trying these things a few times I got it to work and started to go again. This time the problem seemed to be with Runkeeper though. The run it tracked showed further than I really went and as a result my pace was crazy fast. For a while it was showing 2:15 min/km which obviously wasn’t right. I ran another km anyway and then stopped and gave up on the run for today.

If anything though this helps me relate to the people I talk with each day. When one of them is displaying frustration trying to use something I’m glad that I’m able to help them figure things out and get things working for them.

Going Through Tech Withdrawal

Going Through Tech Withdrawal

Before we left for this vacation I knew one part was going to be rough for me in particular. It’s a very rare occasion where I’m not able to pull out my phone and be connected to everyone and everything.

Traveling to the US with a Canadian cell phone makes that very cost prohibitive. Luckily my wife has an unlocked phone so when we arrived in of the first things we did was to sign up for a prepaid account for her phone.

But that’s her phone, and besides where we are staying the signal is not great so it’s in and out. I find myself going through a bit of a withdraw. Even though I’m obviously still able to post blog updates and check email and social networks now and again, it’s sad how not having that constant connection is so noticeable and unpleasant.

During the day isn’t even so bad. But once the kids are in bed, or when we are trying to plan something for the day, it becomes annoying.

I’m hoping after a week of this I’ll be better, but that will be just in time to go home and be back to my connected world.

For now I’ll just enjoy my family and try to relax and enjoy this time away.

20140727_064818