Island Web Help

Website and Web App Design

Extended portfolio

This page provides an exhaustive list of all the websites and web apps that I've built over the last few years. For everything that doesn't fit into those two camps, I've also created a misc section at the end. Finally, a server configurations section discusses the pros and cons of common server configurations I've used to create and host the websites below.




Web Apps

I built ConnextCMS to overcome several limitations clients have experienced with conventional content management systems (CMS) like WordPress and Shopify, but the user interface (UI) retains the same intuitive layout that users of those platforms have come to expect.

Typically hosted on a cloud server like Digital Ocean, the platform is easy to backup and restore, preventing accidental data loss by hackers or simple user error. Built on top of the open source KeystoneJS CMS engine, everything from the database to the end-user experience is created with a single programming language: JavaScript. Using a single programming language makes it easier for business owners to find, train, and retain developers capable of maintaining and modifying their website.

Pioneer News Advertising Order Form

Pioneer News is the parent company of about a dozen local newspapers in three different states. I was hired by Pioneer to develop a sophisticated order form used to coordinate advertising between their child companies. Data in this form is then passed along to the SiteScout Real Time Bidding (RTB) or Google's DoubleClick for Publishers (DFP) advertising systems.

This web application is based on KeystoneJS and was an early prototype of ConnextCMS. Major features of this application include:

  • Data is saved in real time as the form is filled out.
  • If an error occurs due to browser or OS incompatibility, a log file is emailed to the administrator (me).
  • Image and video uploads are validated against size and dimension constraints prior to upload.
  • Using jQuery animation, a slide-out contextual-help screen automatically scrolls to the help you need based on your location within the form.
  • Various parts of the form are hidden or shown based on decisions made higher up in the form.
  • Old orders have the ability to be cloned and re-ordered with a couple clicks. Unfinished orders can be saved and resumed at a later date.
  • An admin dashboard allows fulfillment staff to monitor and process new orders in real-time.
  • Orders can be updated and changed at any time during the work flow. An integrated auditing system tracks and timestamps every change.

RPiOVN is an acronym for Raspberry Pi Open Value Network. It's a cooperative for programmers of the Raspberry Pi minicomputer who use it to develop new applications and appliances. The RPiOVN dashboard pictured here is used for members of the cooperative to track the amount of time they've contributed toward a project. Hours are accounted and profit is distributed fairly. All time tracked is transparent to all members.

If that sounds complicated, it is. You should probably just create an account and check it out for yourself.

I created RPiOVN.org after working with similar software used by Sensorica and studying the phenomenon of Open Value Networks. It's a sophisticated web application that does on-the-fly accounting and data visualization. Work entries are stored in a database. Records can be viewed and even downloaded in Excel format by members. I've published all code as open source on GitHub. The software is packaged as a plugin for ConnextCMS.

Crumb Share is both a website and a web app. Crumb Share is a service that works in conjunction with the RPi-Tracker, a small tracking appliance I designed. The target customers are travel writers, travel bloggers, and people who adventure in boats and vehicles, who want to easily share a breadcrumb trail of their travels on social media.

Both the Crumb Share service and the RPi-Tracker device are spin-off products of RPiOVN.org. I created the device and started the service with a friend and fellow website designer. ConnextCMS is used to run the site as well as handle the upload of data from devices scattered across the globe.

The devices automatically sync up with the server any time they come within reach of an internet WiFi signal. The users breadcrumb trail is displayed on top of a Google map. Users get a link they can use to share their map on social media, or a simple line of code they can use to embed it on their website.

A privacy feature allows users to draw keep-out circles around sensitive locations where the devices will record tracking data. Control of the device takes place over WiFi and can be done with a smart phone or laptop. Everything is programmed in JavaScript.

Create an account and check it out for yourself!

The 2017 Tulip Festival website was a joint effort between me and another web developer. I wrote all the JavaScript and customizations to the interactive map that displays the locations of the tulip and daffodil fields. It also allows the Tulip Festival organization to display the location of information kiosks and sponsors.

This website uses Expression Engine as the content management system (CMS).

The SPOT Tracker map was a predecessor to Crumb Share. I created this app to share a four-month sailing journey I took up the Inside Passage. A SPOT Tracker is a small satellite tracking device capable of signalling for help and can send three pre-programmed text messages. It's possible to retrieve the last 50 breadcrumb points from their server.

This web app used a Node.js application to retrieved the tracking data from the SPOT server and copy them to a locally hosted CSV file. The code on the webpage then retrieves the CSV file and displays the data on a Google Map. This allowed friends and family to track my progress in real-time.






Websites

WellFuture is a Shopify e-commerce store that sells probiotic supplements for kids. Dr. Clinton, the owner, maintains a blog. When new blog entries are posted, they automatically get emailed to clients who have signed up to receive her newsletter.

Like all sites I build, this store is designed to run smoothly on a cell phone. The overall theme is bright, happy, and kid-friendly.

This website is a graphic-heavy with very little text. The purpose of the site was to function as a virtual gallery for the artist to show off his work. Fading animations and carousel sliders are used to provide interactivity and inspire the viewer to click-through to view the different art pieces featured on the site.

Unfortunately, the artist has let the domain name expire, but a local copy of this site is still available.

Northwest Physical Therapy is a chain of three physical therapy clinics in Washington state. I built this site as part of my job at Skagit Connext. The client wanted their site to have a 'Northwest' feel to it, and had a series of pictures that they wanted to use for the large slider on the home page.

This site is hard-coded as HTML without any Content Management System (CMS). The service and staff pages include modals that pop up to reveal additional information within the same page. The site is integrated with 123 Contact Forms for secure, encrypted communication of online patient data and payment information.

Power Systems Plus is a generator sales, service, and part company based near Portland, Oregon. The site is built on top of WordPress and uses the WooCommerce plugin to handle shopping cart functionality. The site is responsive, making online shopping as easy on a cell phone as it is from a desktop.

Island Floral was the first commercial site I built that used ConnextCMS for the content management system (CMS). The store owner did not own a computer and needed to update her site using only a tablet or smart phone. The software I wrote allowed her to take a picture with her device and immediately replace one of the images on the site with it. That allowed her to easily update the website with fresh images of the bouquet designs she had in stock. That software eventually became ConnextCMS.

The site was recently rebuilt by another website designer, but a backup of the original website I designed is still viewable by clicking on the button below.

Care E Me is a non-emergency medical transport service operating out of the Skagit Valley in Washington state. They operate a small fleet of vans that help people get to and from medical (and other) appointments. They focus on clients who are mobility challenged and may not have anyone else who can help transport them.

This site is served by ConnextCMS, hosted on a Digital Ocean droplet. The site was designed based on the template Light. See the server configurations section for more details.

This is a technical portfolio and blog that I maintain to capture all my technical experience and to blog about any tech inventions that capture my interest. The site uses collapsible panels to show a huge amount of content in a small space. JavaScript is used to load content dynamically so that the page loads quickly. Content is retrieved from the server on an as-needed basis.

This site is served by ConnextCMS, hosted on a Digital Ocean droplet. See the server configurations section for more details.

San Juan Sufficiency is a blog I've maintained since 2011 about my sailing adventures, passion for living in the San Juan Islands, and my deep interest in technologies that allow for improvements in personal self-sufficiency. Over the years that I've been blogging I also wrote two books, largely compiled from old blog posts. I use the site to promote the books as well.

The site currently uses WordPress and is hosted by HostGator. In the future, I plan to convert the site to ConnextCMS, hosted by Digital Ocean. See the server configurations section for more details.

This is a MediaWiki site I created to disseminate knowledge and encourage collaboration on an open source hardware project I started in 2010. The project is a charge controller, which is a piece of hardware that sits between a solar panel and a battery bank and ensure they 'play nice'. I haven't touched this site or participated in the mailing list for it since 2013. The project has taken on a life of its own, spinning off several other successful open source projects. I leave this site up as a technical reference for others to use.

This site uses MediaWiki as the content management system. This is the same software that Wikipedia developed and uses. It's hosted on HostGator. See the server configurations section for more details.

This is a site I created in 2011 with the intension of running SEO tests and to sell advertising through Google Ad Words. I blogged about solar technology and created a series of informational articles around the topic of do-it-yourself solar power. This was prior to some massive algorithm changes that Google made in 2013. I still use the site to run SEO tests like the ones described on my technical site.

The solar power expert blog runs on WordPress and is hosted by HostGator. See the server configurations section for more details.



Misc

I created this animation for the original version of IslandWebHelp.com. Because the animation uses HTML and JavaScript (the same stuff used to build a website), it scales seamlessly from big desktop screens all the way to a smart phone. It will never suffer from outages like a YouTube video, or browser incompatibilities like Adobe Flash.

A promotional animation like this is a great way to call attention to a specific area of your site like a 'Buy Now' button, sign up form, or phone number. I can design and build this kind of animations and deploy them on your existing site.

The amChart library allows easy creation of stock charts and contains other data visualization tools. This is an example I wrote for myself. It downloads the last 30 days of stock data from the Yahoo! Finance server, processes the data, and configures an amChart to display the data. The amChart and Chart.js libraries are great for creating beautiful data visualizations on a web page.


Common Server Configurations

The webpages and web apps above utilize a few different server configurations. Below are a list of the different types of configurations I've used and a brief explanation of the pros and cons of each one.

  • Dedicated or Shared Hosting

    An example of shared hosting is HostGator or BlueHost. Shared hosting is the cheapest way to host a website because the infrastructure costs can be split among many clients. The drawbacks are that performance issues can frequently occur and newer web technologies like Node.js are frequently not supported.

    An example of dedicated hosting would be a Digital Ocean Droplet or AWS EC2. These platforms are a little more expensive but provide reliable performance, no limits on the types of software used, and easy backup of the entire server. This last feature, backing up of the server, is probably their greatest feature. Digital Ocean Droplets are my prefered infrastructure as the entire server is automatically backed up on a weekly basis. In the event of a hack or even loss of data due to simple user error, the entire server can be restored from a week-old snapshot in a few seconds.

  • Hard coded site served by Apache or Nginx

    This is the old-school way of building a website, but often the fastest, cheapest, and most straightforward way of building a website. I start with an HTML template from TemplateMonster or ThemeForest. All content is hard-coded as static files and served by either Apache or Nginx. Any type of web host can be used for this type of site.

  • WordPress

    The most popular Content Management System (CMS) on the web, WordPress is easy to learn and use. It also comes with an exhaustive universe of plugins and eCommerce extensions like WooCommerce. However, due to its popularity, it is also the most hacked CMS on the web. The makers of WordPress have had to adopt a very aggressive update policy in order to stay one step ahead of hackers. There is a common trap that I find business owners often fall into with WordPress:

    • They create a website using WordPress
    • Their website gets auto-updated which breaks a plugin or theme and thus breaks their website.
    • To prevent this they turn off auto-updates.
    • Their website gets hacked because it doesn't get updated.

    This is a 'vicious circle' where updates break sites but no updates open the site up for hacks. Additionally, WordPress is written in PHP, and the trend in modern websites and applications is to use JavaScript. For these two reasons I created ConnextCMS and recommend clients use this CMS instead. However, I am proficient at building WordPress-based websites and eCommerce stores and am happy to use this software if it is what my clients want.

  • Shopify

    Shopify is a popular service for eCommerce stores. Their CMS interface is similar to WordPress but their site templates use unique scripting language called Liquid. Despite claims to being popularly used, it is anything but. That means anyone who works on a Shopify site must have specialized knowledge of this scripting language and as a result, costs go up.

    Shopify provides an excellent service and can boast a large, passionate user base. I have built Liquid templates for Shopify stores. That being said though, I feel better solutions exist. Moltin is a competing and much less expensive eCommerce solution to Shopify. They use JavaScript APIs, which allow developers to give any website the ability to act as an eCommerce store. I've developed a plugin for ConnextCMS to interface with Moltin. Shopify also provides this same service now, meaning that website developers are no longer required to master the Liquid language, though it is still considered outside the 'norm' of Shopify store development.

  • ConnextCMS

    See the ConnextCMS section for details.

Contact

Let's start a conversation! Use the form below to contact me. I generally respond the email faster than voice mail. If you prefer phone, please leave a voice mail if I am not able to pick up the call.



Get in Tuch

email : chris.troutner@gmail.com

phone : 360-218-4643

skype: chris.troutner