2017-04-08 08:54:50 +00:00
|
|
|
|
<head>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<meta name="viewport" content="width=device-width">
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<link rel="stylesheet" href="css/main.css" />
|
2017-08-13 04:13:41 +00:00
|
|
|
|
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/700.css" />
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700" rel="stylesheet">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<title>Javascipt Developer - Portfolio</title>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="flex-container">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<header>
|
|
|
|
|
|
<a href="">
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<img class="headshot" alt="Image of John's head." src="images/headshot-round-200.jpg" srcset="" />
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</a>
|
|
|
|
|
|
<h1>John Shaver - Web Developer</h1>
|
|
|
|
|
|
<div class="social-links"></div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<article>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<section class="section about">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h2>About Me</h2>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p class="attention">I am currently looking for a full-time
|
|
|
|
|
|
remote position (frontend or fullstack) working with a team in
|
|
|
|
|
|
a modern framework (preferably with React) to build or improve
|
|
|
|
|
|
an interesting and purposeful project.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>In high school studied Computer Networking Systems and
|
|
|
|
|
|
Computer Programming part time at the nearby Occupation Skills
|
|
|
|
|
|
Center. Since then I have been working with computers and
|
|
|
|
|
|
teaching myself Software Development. I spent 7 years working
|
|
|
|
|
|
in various Technical Support roles where I gained an in-depth
|
|
|
|
|
|
understanding of a variety of internet and server technologies.
|
|
|
|
|
|
So, when I shifted my career to software development, working
|
|
|
|
|
|
on web based software seemed an obvious choice.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>I have spent the last 4 years designing, building, deploying
|
|
|
|
|
|
and maintainging javascript applications. I've worked with
|
|
|
|
|
|
iOS, PHP, NodeJS, and more recently React/Redux. I enjoy
|
|
|
|
|
|
learning new things, solving difficult problems and building
|
|
|
|
|
|
software that assists my clients/users in achieving success. I
|
|
|
|
|
|
live in Hayden Idaho and my hobbies include Devops, listening
|
|
|
|
|
|
to podcasts, playing ukulele and, especially, spending time
|
|
|
|
|
|
with my wife and 3 kids.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</section>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<section class="section projects">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h2>Recent Software Projects</h2>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<h3>NewVistas Website Platform</h3>
|
|
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
|
|
|
|
|
<img class="main-image" src="images/newvistas.jpg"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goals</h4>
|
|
|
|
|
|
<p>Newvistas needed a replacement platform for
|
|
|
|
|
|
public-facing web content, encouraging communication
|
|
|
|
|
|
between users, managing deliverables from business
|
|
|
|
|
|
managers and allowing business owners and authorized
|
|
|
|
|
|
contributors to update content relevant to their role.
|
|
|
|
|
|
The platform needed to be easily deployable on multiple
|
|
|
|
|
|
domains and allow the maintaining developers to easily
|
|
|
|
|
|
customize styling differently between them.</p>
|
|
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I was the only developer on the project. I built
|
|
|
|
|
|
both the REST api and the frontend SPA to that used the
|
|
|
|
|
|
REST api. The REST api was kept separate so that the
|
|
|
|
|
|
project could actually run separate seamlessly
|
2017-08-13 04:14:07 +00:00
|
|
|
|
integrated SPAs for each role it was trying to fill.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>I designed the dev environment to be quickly and
|
|
|
|
|
|
easily rebuilt and deployed since I would be handing it
|
|
|
|
|
|
off to other devs to maintain. The build process is
|
|
|
|
|
|
designed to ensure optimized page loads and help with
|
2017-08-11 05:07:27 +00:00
|
|
|
|
cross-browser compatibility,while allowing for the
|
|
|
|
|
|
latest libraries and language improvements to be used.
|
|
|
|
|
|
Deploying is fast and easy as well as easily
|
|
|
|
|
|
reversible, leveraging AWS Elastic Beanstalk, EC2 and
|
|
|
|
|
|
S3.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
|
|
|
|
|
<p>The backend was a rest API built with Node.js and
|
|
|
|
|
|
Express.js. The front end is an isomorphically
|
|
|
|
|
|
rendered SPA built wth React/Redux. The front end is
|
|
|
|
|
|
compiled from ES2016 to ES5 using babel and webpack.
|
|
|
|
|
|
Isomorphic rendering provides fast load times and
|
|
|
|
|
|
ensures search engines can index the public content.
|
|
|
|
|
|
Users authenticate with their AzureAD user via OpenID
|
2017-08-13 04:14:07 +00:00
|
|
|
|
Connect. </p>
|
|
|
|
|
|
<p>Express was used to build out the REST endpoints for
|
|
|
|
|
|
the API mySQL is used via Sequelize.js ORM. Secured
|
|
|
|
|
|
endpoint authorize users based on their user roles and
|
|
|
|
|
|
ownership/roles assigned to different pages/groupings
|
|
|
|
|
|
taking into account assigned roles of parent groupings.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>The development environment is run in vagrant with
|
|
|
|
|
|
virtual box and babel and weback were used to compile
|
|
|
|
|
|
and bundle the front end code. The app runs on
|
|
|
|
|
|
ephemeral ec2 instances and deployed to AWS Elastic
|
|
|
|
|
|
Beanstalk to allow for scalability.</p>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<h3>Payzoom Econosystem Platform</h3>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
|
|
|
|
|
<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/>
|
|
|
|
|
|
<img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="project-info">
|
|
|
|
|
|
<h4>Project Goal</h4>
|
|
|
|
|
|
<p>Payzoom is a SaaS that allows a community of small
|
|
|
|
|
|
businesses and funding entities to work together to
|
|
|
|
|
|
work for each other and balance all the payments at the
|
|
|
|
|
|
end of the week including paying employees,
|
|
|
|
|
|
contractors, services fees, and expenses. Participants
|
|
|
|
|
|
need to be able to do work for any company on any
|
|
|
|
|
|
project and bill them accordingly as easily as if they
|
|
|
|
|
|
were working for their own company.</p>
|
|
|
|
|
|
<h4>My Contributions</h4>
|
|
|
|
|
|
<p>I wrote the initial payroll integration with
|
|
|
|
|
|
ZenPayroll to gather weekly totals and pass the
|
|
|
|
|
|
information to ZenPayroll as well as the code to send
|
|
|
|
|
|
and reconcile expense data and documentation to
|
|
|
|
|
|
QuickBooksOnline. Implemented some of the user
|
|
|
|
|
|
interface views including allocating overtime and
|
|
|
|
|
|
attaching files to reports/allocations and the
|
2017-08-13 04:14:07 +00:00
|
|
|
|
associated backend.</p>
|
|
|
|
|
|
<p>While working on the project I also improved the dev
|
|
|
|
|
|
environment from one that required 2 days for a
|
|
|
|
|
|
developer to build a permanent virtualbox image to an
|
|
|
|
|
|
ephemeral environment in Vagrant that could be thrown
|
|
|
|
|
|
away and recreated in less than 20 minutes.</p>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<h4>Technologies Used</h4>
|
|
|
|
|
|
<p>Vagrant Payzoom was built with NodeJS and MySQL on
|
|
|
|
|
|
the backend and a custom built javascript frontend.
|
|
|
|
|
|
Communication between server and web was done via
|
|
|
|
|
|
websockets and a JSON command/sub/pub api that routed
|
|
|
|
|
|
particular requests/subscriptions to differnt modules
|
|
|
|
|
|
running on the backend. Payroll was processed via Gusto
|
|
|
|
|
|
and invoicing informaiton/documentation was passed to
|
|
|
|
|
|
QuickBooksOnline for paying invoices and tracking
|
|
|
|
|
|
expenses.</p>
|
|
|
|
|
|
</div>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<h3>Novatek Native Wrapper App</h3>
|
|
|
|
|
|
<div class="project">
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<div class="project-image">
|
|
|
|
|
|
<img class="main-image" alt="Workaids App Icon" src="images/icon_work_aids.png" />
|
|
|
|
|
|
<img alt="Workaids Login Screen" src="images/workaids_login2.png" />
|
|
|
|
|
|
</div>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<div class="project-info">
|
2017-04-08 08:54:50 +00:00
|
|
|
|
<h4>Project Goals</h4>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>The Client had an SPA optimized for mobile, but
|
|
|
|
|
|
wanted it to operate more like an app and have access
|
|
|
|
|
|
to the phone’s camera, bluetooth, geofencing, etc.
|
|
|
|
|
|
Since phonegapp was still immature, they wanted an app
|
|
|
|
|
|
built to wrap the current web interface and allow
|
|
|
|
|
|
reusing the existing web based code as much as
|
|
|
|
|
|
possible.</p>
|
2017-04-14 07:53:18 +00:00
|
|
|
|
<h4>My Contrinbutions</h4>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
<p>Initially I helped write many of the api calls for
|
|
|
|
|
|
the js library the web app used to communicate through
|
|
|
|
|
|
the webFrame to the native code. Later I helped out
|
|
|
|
|
|
with ad-hoc deploying the app and did some basic
|
|
|
|
|
|
maintenance and improvements on the native Objective-C
|
|
|
|
|
|
codebase. This included the PHP backend and Objective-C
|
|
|
|
|
|
code necessary to facilitate iOS push
|
|
|
|
|
|
notifications.</p>
|
|
|
|
|
|
<h4>Technologies Used</h4>
|
2017-08-13 04:14:07 +00:00
|
|
|
|
<p>This was before phonegapp/cordova was very far along, so
|
2017-08-11 05:07:27 +00:00
|
|
|
|
they decided to build a custom wrapper app that wrapped
|
|
|
|
|
|
the webview and exposed the phone APIs to the website
|
|
|
|
|
|
via messages sent betwewn javascript and the Objective
|
|
|
|
|
|
C code. A javascript library was built that provided
|
|
|
|
|
|
an event based API to easier access the phone
|
|
|
|
|
|
functions. Grunt was used bundle the javascript
|
|
|
|
|
|
library. Some work was done in PHP to provide support
|
|
|
|
|
|
for the App to authenticate and to send off push
|
|
|
|
|
|
notifications.</p>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</section>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</article>
|
2017-08-11 05:07:27 +00:00
|
|
|
|
</div>
|
2017-04-08 08:54:50 +00:00
|
|
|
|
</body>
|
