January 16, 2019

Coding Challenge Wrap-Up

1 hour 7 minutes

In this episode we discuss our recently completed coding challenge, making "No BS News for Reddit"

Note: We had some audio issues with the first upload of this episode, if you hear nothing, simply delete your version and re-download to get the updated file. Apologies for the inconvenience.

Segment 1 - Pre-Planning & Design

As apart of this challenge we were allowed to plan, design, and research before the challenge began

To prepare we did some research on PWAs and their functionality

We also researched other news apps, and what subreddits would be the most useful

From a UX perspective, we took a look at which features a Reddit user would need and expect from a Reddit app - minus the social features of course

From this we came up with some wireframes to guide our design throughout the process, which we modified on the spot to accomodate for a “open Reddit post” button alongside alternative share options for PC users

We also had a discussion regarding the addition of custom news sets, where users could select a bunch of subreddits to pull into a single custom feed - this ended up using up a decent amount of time and we didn’t put it into the app in its current state

One other design challenge that we had was making the design pop

Since this sort of app is so text-heavy we were concerned that its monotone nature would end up making it boring, or otherwise, look unfinished and rushed. However, after spending more time on Reddit we realized that this type of app is more utilitarian than it is flashy, so we decided to place it in a dark theme and let the links “do the talking”

Segment 2 - App Development

Development went smoothly for the most part

We were able to complete almost all the features that we originally set out to make, including a few extra ones

We had a few bugs popup that were dealt with quickly, namely some responsivity issues with overlapping and some time stamps that were coming in as negative numbers

Vuejs seemed to almost accelerate development due too it’s built in development server and its short code nature for functions and listeners

Vuejs also created the template for the PWA functionality through the Vue CLI

App functionality implementation went as planned and didn’t pose much difficulty other then a couple of hiccups and glitches that had to be fixed

Showing how much time has elapsed since each post was posted showed to be kind of annoying because of how reddit handles UTC time. I have to multiple the time by 1000 to match with the the current UTC time

Working with the reddit api is awesome and a great way to learn API’s and working with json

The app is pretty much feature complete as in line with our MVP (minimum viable product)

Couple of features we are looking to add would be :

a way to create a custom news group

Light theme to go along with the current dark one

The motto for adding features to this is “Is that bullshit?” if we think it is, then we don’t add it

Segment 3 - App Deployment

So we’ve already had a few episodes where we talk about deployment in a little more detail but it’s valuable to mention how we went about doing this for the 24 hour challenge aspect

This was by far the most frustrating part of the entire day as this would be only my second time deploying with Docker and to digital ocean

It is simpler than the html all the things deployment because there is no server side containers but due to the time constraint and the fact we started deployment only at around 12am it turned into a problem

The initial deployment as a web app went ok until we hit the SSL certification

We used the same method as with HTML all the things, where we are trying to certify a docker container running nginx using certbot on our ubuntu digitalocean droplet

Unfortunately I didn’t have a lot of experience and combined with already being mentally exhausted I went into a try everything approach instead of using logic

Logically looking at it with a fresh head after getting some sleep got a solution in a matter of minutes

Although this was frustrating this is all part of these short time challenges and must be overcome if anyone wants to be able to work in crunch periods

Sometimes it’s important to step away, as I did that at least 2 or 3 times during the challenge to solve random issues

For next time I think we might do a initial pre deployment before the challenge to at least get the ssl and nginx container worked out, so we have more time to focus on actually developing

Web News - Personal Opinions on PWA

Disclaimer: We have minimal experience with PWAs in both the development and consumer side of things, so these are simply our opinions having minimal exposure

Progressive Web Apps fall into a strange segment of the market, because they’re not quite native apps, and not quite websites (at least under the hood)

We’ve entered into a time where the internet is relied upon to power a lot of things and therefore an internet browser of some kind is almost always open on people’s computers, or phones

On the PC, it’s rare that people use traditional “apps” like Facebook, for example, but rather use the website facebook.com which serves virtually the same purpose

PWAs seem to be the bridge between the two, adding accessible offline features to web developers that are creating websites, or web apps, that will eventually need a mobile app of some sort

With that being said, there seems to be a bit of a stigma against non-native software, things like WebViews and other app types are readily available, but the big apps seemt to almost always go the native route - even if that means making two entirely separate apps (iOS and Android), or dealing with porting between the two in some capacity

So where do we feel PWAs fit in?

Will they take off?

Will they displace native apps?

Are they here to stay?

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

...more

View all episodes

By Matt Lawrence and Mike Karan

4.8

4646 ratings