HTML All The Things - Web Development, AI, and Developer Careers Coding Challenge Wrap-Up
Jan 16, 2019
01:07:45
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...