Progressive Web Apps

The first week of my new job has been interesting. This is a smart group of people who are engineering some very high end eCommerce websites for big clients like Coopers Beer & Haighs Chocolate.

One of the things I’ve been working on recently is the idea of creating enhanced front ends for exiting systems like WordPress or Magento. I’m thinking about Single Page App using React or something similar to connect to a RESTful API provided by the system being enhanced. The idea is to leave the older display layers in place for the search engines to index but then adding an uber-display layer on top for users whom it suits.

What I’ve learned here at Aligent is that this is already an idea which is quickly taking shape in the ever speedy world of web development. There are a few concepts I hadn’t thought of, but essentially what I had in mind was a Progressive Web App. I’m on it.

This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.

A Progressive Web App is:

  • Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
  • Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feels like an app to the user with app-style interactions and navigation because it’s built on the app shell model.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
  • Discoverable – Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable – Makes re-engagement easy through features like push notifications.
  • Installable – Allows users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL, does not require complex installation.

Starting a new job

I’m starting a new job today. I have much and varied experience of starting new jobs. I’ll not lie, I’m 42 years old and I’ve never had a single job that I’ve been in for 12 months.

Don’t judge me. I know it’s not a good look on your CV and all that, but that’s who I am. I’m a kid whose first taste of work was freelancing a website for the local photo printing shop who had noticed me come in with my PhotoShop creations when I was at Newcastle University studying psychology in 1995 (ish). I’ve been a freelancing cut & paste script kiddie ever since. Going with the most interesting and highest paying jobs and standing on the shoulders of giants, a career in front end web development isn’t like the olden days.

Likesay I’ve started many new jobs both good and bad in that time. I hope for a good one this time around. They’re a great company who specialise in ecommerce sites using magento have taken the time to properly recruit a front end developer they feel will be a good fit in their company culture and I’m ready to engage with that. Hi ho.

Magento: eCommerce platforms and solutions for selling online

The meta refresh

This is a trick from waaaaay back in the olden days. You wouldn’t want to use it for much, but there ARE times when it’ll come in handy. It works in every browser ever made and simply forwards a user to a chosen page. Possible uses of the humble meta-refresh might be;

  • On an index.html file you want to redirect to a working version of your software.
  • As a final fallback in case none of your fancy stuff has worked.

    <meta http-equiv="refresh" content="5; url=http://example.com/">

Use Terminal to create symbolic links to your themes on your local drive

The Question?

Let’s say you have 2 WordPress sites running different databases and you want to see how your new theme looks on both of those websites at the same time, how would you do that?

An Answer

You want to be able to edit one theme and see that theme update on two different WordPress instances on your local mac so one way to do that is to create a symbolic link to the working theme in /wp-content/themes/<your-theme->name>

This means that when the apache (or whichever server you are using) looks for the theme, it finds it.

This assumes

  • You’re on mac
  • You can open the terminal and do basic cut & paste.

The Method

  1. Open Terminal.
    type terminal into spotlight
  2. Open TextEdit
    type textedit into spotlight
  3. Cut and paste the following into a blank TextEdit document
  4. The basic format for the linux operation we’re going to perform is this
    ln -s /path/to/original/ /path/to/link

    or a more real example might be this. Let’s say you have a working directory called node

    ln -s ~/node/{path-to-your-dev-theme}/wp-content/themes/listingslab/ ~/node/{path-to-your-second-site}/wp-content/themes/listingslab/
    The ln command is a standard Unix command utility used to create a hard link or a symbolic link (symlink) to an existing file. The use of a hard link allows multiple filenames to be associated with the same file since a hard link points to the inode of a given file, the data of which is stored on disk. On the other hand, symbolic links are special files that refer to other files by name.
  5. Copy & paste the above command snippet into your TextEdit window, replacing the paths {path-to-…} with more sensible ones of your own. Do this in text edit because you want to make sure it’s perfect before you Cut & paste the command into Terminal. You can find the path to a folder easily by dropping it into a terminal window.
  6. Once you’re happy that the command should do what you want it to, cut and paste it into the Terminal window to create the symlink.
  7. Look in finder to see if your symlink has been created.
  8. Test your second website administering the theme and checking the dev theme shows up.