HTML All The Things - Web Development, AI, and Developer Careers

May 8, 2019

Bootstrap, Materialize, Tailwind CSS

May 8, 2019

1hr 21 min

In this episode of the podcast, Matt and Mike discuss CSS frameworks, with a particular focus on Bootstrap, Materialize, and Tailwind CSS. Each of these frameworks comes with their own pros and cons that make them a great fit for particular projects offering UI developers a bunch of options when choosing the tools they need for a given project. Full show notes: https://www.htmlallthethings.com/hub/Podcast/5cd34bab2c5a92001836b76b

You can find us on...

May 1, 2019

Choosing the Right Equipment

May 1, 2019

1hr 19 min

In this episode Mike and Matt discuss selecting, purchasing, and shopping for the equipment you need to get the job done. Whether you're on a budget, or ready to spend a bunch of money on something fancy, this episode covers how to make sure you get the most bang for your buck. We start off discussing the balance between pricing, your use-case, and future proofing, then we lay out ways to ensure you get all the features you need, followed by a discussion on some specific peripherals and equipment that you'll most likely encounter in the web development field. To top it off, we end with our recurring Web News segment, this week covering the various app install methods (PWA, app store, web app, browser) that are available on different devices, and which one is the most "legitimate" or more specifically, which one do you use depending on what the app does. Full show notes can be found here: https://www.htmlallthethings.com/hub/Podcast/5cc9e4282c5a92001836b769

You can find us on...

Apr 25, 2019

MacBook Adventures & Podcast Update

Apr 25, 2019

37 min

This week our episode was cut short and released late due to a bit of a fiasco with our only in-house MacBook. We're also using this opportunity to announce some changes that we're going to be applying to future episodes based on some feedback that we've received. If you're a fan of our Web News segment, this week the episode was dominated by a discussion around exactly what happened to our MacBook and the various attempts we made to fix the issue. A standard full episode is planned for next week.

Apr 17, 2019

Full Time and Side Hustles w/ David Lindahl

Apr 17, 2019

1hr 40 min

In this episode we sit down once again with David Lindahl to discuss his full time job and many side hustles.

Segment 1 - What’s New?

Tell us a little bit about yourself and what’s happened since we last spoke.

Segment 2 - UI Developer

How long did it take you to fully settle into your role?
Before you got a full time position you were working on a variety of side hustles, many of which are still online today. How was the transition from being your own boss to working under a company?
Is there any sort of issue with you running side hustles and working at your day job? Conflict of interest? Do they own a piece of that income as apart of an agreement?
How fast were you expected to “spin-up” when you were hired? For example, were you just thrown a bunch of work and expected to know how to do it on the first day/week?
How are the hours? Are you doing a lot of overtime? If so, is it mandatory?
Which do you prefer? Working a day job, or being your own boss?
How involved are you in the work environment? (ie company sports teams and events) Do you recommend being active within a company in this way?

Segment 3 - Side Hustles

What side hustles do you have going on?
Are you planning on generating a passive income from these projects, or do you have different goals in mind?
Rainier Watch is a big side hustle that seems to be getting bigger all the time, what’s your secret? Any tips and tricks for people that are trying to build a side hustle on Instagram?
How’s your work/life balance work out with your day job and side hustles together?
Are you planning for your side hustles to eventually take over your day job and becoming your full time occupation?

Web News - Organic vs Algorithm on Social Media

Whenever you look up growing on social media, most of the advice is specifically for exploiting the algorithm in some way
With that being said you need to have a good amount of content ready to go so that you actually have something to post, understanding how the algorithm works is great, but if you don’t have anything to post then you can’t get any exposure at all.
In terms of content, higher quality is obviously preferred, but if it doesn’t generate good numbers then it seems like putting in the extra time for quality isn’t worth it
How much time should you spend on your content?
Should you just keep posting quality content and expect results over time - with consistent posting?
Should you be prioritizing algorithm “hacks” to get your content more exposure?
Is there a balance between using the algorithm and organically making quality content?
Should you work on getting a following on multiple networks (ie Instagram, Twitter, Facebook) or should you focus on one?

David's Links

"Made With Spark: https://madewithspark.com (The MVP site David mentioned in the show) - New website coming really soon"
RainierWatch - https://www.rainierwatch.com
Basecamp - https://basecamp.com

You can find us on...

Apr 10, 2019

When to Start

Apr 10, 2019

1hr 26 min

In this episode Matt and Mike discuss when to start your business, a project, or whatever it is you're putting off. It's easy to get bogged down, luckily there are some tips and tricks to prevent it.

Segment 1 - When to Start

One of the things you’ll hear as an entrepreneur, and we’ve mentioned on the show several times is to “just start”
This means that instead of being bogged down by “what ifs” that you should just jump in and get started on whatever it is you’re working on
A prime example: a would-be entrepreneur gets stuck reading into the basics of how to start a business, what pitfalls could happen, what issues may occur, etc.
- While it’s good to be prepared, you could read for years upon years and still have things to flip through. It’s generally better to understand the basics, do your best to cover all the bases that you need to and then just start - avoiding the paranoia of reading all the laws and issues that others have fallen into in the past. Definitely read and understand these things, but there is a point where you’ve read enough and it’s time to take action, there’s no way you can cover every base all the time or else you’ll never get started
- Keep in mind that being cautious isn’t a bad thing either, if you think you need to check a law or regulation out before doing something, then it’s best to check to ensure you’re operating legally. Just don’t get bogged down for years without acting, or your competition will fly by you. If you need to, get a lawyer to explain things to you in everyday terms so you can move forward with peace of mind
Now that, that’s out of the way and you’re ready to get programming your new app, website, or whatever other program you’re working on, you’re bound to hit another wall - the learning curve
Unless you’re experienced in everything your project needs, you’ll end up hitting a lot of walls, maybe you don’t even know where to start and this is another major point of contention that people get stuck in.
Let’s say you want to make a PWA and you’re not experienced at all with service workers - a situation we recently found ourselves in - you could read example after example, look at tons of different solutions, try different plugins and even try different programming languages but at the end of the day you’re just reading up on what you want to be doing, you’re not doing what you want to be doing.
Obviously guides, tutorials, and research do go a long way and are very valuable, but it’s easy to get stuck reading through the plethora of different ways that you can implement a solution for your given app and if it’s a passion project you want to make sure you’re using the best solution so you keep looking through different options and never actually start making that service worker (in our example)
This is another major area where you need to “just start”
The time differs from person to person, and from project to project, but at the end of the day you need/want to make that deliverable and we’re all human so it’s not going to be perfect (especially if you’re a beginner), so read up enough so you can navigate Google searches on that thing you’re working on and then just start making it
If you end up pivoting a few times, who cares, as long as you keep moving towards the goal - you’ll end up learning way more working on the solution rather than just reading about it
As a I said above the “just start” point is different for each person, and furthermore per project - in the next two segments we’ll be discussing our differing approaches to this problem

Segment 2 - Matt’s Process

When we first started our business, we had a hard time trying to figure out exactly what we needed to do
We weren’t sure whether you needed a lawyer, or if you had to declare your business somewhere - there was nothing of the sort covered in our schooling other than the different types of businesses like partnerships, corporations, etc.
We ended up calling a few places that didn’t get back to us, so we ended up having a meeting with a lawyer which gave us some information on opening, what at the time, was an IT business
From that though, we decided that we wanted to go into web development due to an opportunity that popped up and from that pivot we ended up finding a business advisor that took us through the procedure, which ended up being very easy to get started
We’ve mentioned this origin story in a past episode, but it’s an example of how we got bogged down in the beginning, but kept pushing through and then eventually just got started - later than we wanted - but we still finally got the job done
In terms of a web development project, one of the more recent examples that we’ve mentioned on that show was learning about service workers, which resulted in getting bogged down in the research - my procedure for this was:
- Google “service workers” and read up on the very basics, learn how they work and how to implement them at a very high level so I know what tools I’ll need to have at my disposal
- Unfortunately, since service workers are complex and I was completely new to them, I had to read up on some related topics like promises and JS workers which gave me a bit of useful background information - and then I had to figure out how to get service workers to work with VueJS (this entire story is in this episode:)
- Dealing with advanced/complex topics are particularly easy to get bogged down in because there are a lot of variables that you, as a beginner, will not be aware of and will be tempted to read up on, leading to the loop of constant research
- In order to get out of the particular situation, I started narrowing the research from the initial very general searches, down to my particular situation of using service workers with vuejs
- That type of more specific research led me to a few examples that I was able to implement into my testing, which eventually led us to the solution that we’re working on now
One of the telltale signs that I’ve read too much is that I have bookmarks/resources that have a lot of overlapping information. If I find myself bookmarking a variety of resources that essentially “read in circles” or are covering the exact same topics but in slightly different ways, I’ll generally stop researching and start implementing on the spot

Segment 3 - Mike’s Process

Feasibility assessment

Can the chosen technology; plugin, library, framework, etc. Accomplish the set current and future goals of the application
PWA example, simple buying app for a company that needs to work on all platforms

Learning curve

With my current knowledge, how long will it take me to
- Get started with this
- Accomplish my desired functionality
- Optimize for performance and extensibility
PWA is standard html css js with a small jump in complexity in reference to service workers

Get started

Dive right into starting to use it, even if it’s just setting it up and running it’s most basic function
- I.e making a hello world application
Create a PWA of the current products site

More research

Now that you have a basic understanding you can dive deeper into learning
Watch videos, read tutorials, what ever learning style works for you
Always do these with a goal, for instance trying to implement a feature on your roadmap, so that you are
- More motivated
- Not wasting any time
Try to implement what you’re learning in parallel to learning about it
In terms of PWA add offline functionality to app with service workers

Web News - Apple

Our main OS is Windows
Had to buy a macbook to compile iOS apps using cordova and debug safari on an iPad
Initially bought a 2011 13 inch macbook pro
- Did the job but was pretty slow even with a upgraded HDD to SSD
- Not enough screen real estate to use as a main machine if I’m traveling
- Also it does not officially support MacOS Mojave and the new xcode. Which means I wasn’t able to test my iOS apps on my updated iPad air 2
Bought a late 2013 15” macbook pro Retina which solved all those problems, but as I found out, Macbooks don’t have the greatest quality control and always have some weird issues
Issue I had was a system process called kernel_task was taking up over 500% of the CPU processing threads and making my macbook pretty much unusable. This would usually happen when my Mac was at 100% battery and connected to power.
A battery recalibration seemed to fix it but the Macbook still seems a little slow for it’s specs. Makes me think CPU is power throttling (def not temperature issues as they are fine)
Had some moments where I didn’t know what to do, I don’t really want to buy a new Macbook having heard all it’s display and keyboard problems, especially considering it’s well over 3000 Canadian
Really sucks when a manufacturer closes everything down and doesn’t give you any real options, not being able to do an iOS development on a windows or even linux machine locks me into only one option which hasn’t been a very good experience
Considered building a hackintosh but again I need it to be potentially portable
Wish I had the option of buying a windows laptop and running Macos on it, or being able to debug/compile in windows or even linux
Don’t have any huge problems with MacOS as a whole, has its ups and downs like with any OS/ecosystem but the hardware has me really concerned
- Not being able to upgrade pretty much anything in the newer macbooks
- Having higher than industry standard failure rates on ‘premium’ priced machines
- Not having enough hardware options in the different models (especially at reasonable prices)
Apple PWA and Webview support is also a disaster
What should I do?
Do you have hope for the future of Macbooks?

You can find us on...

Apr 3, 2019

Progressive Web Apps

Apr 3, 2019

1hr 22 min

In this episode we'll be discussing the ins and outs of progressive web apps including what they are, some of their functionality, and what challenges/limitations they still face.

Segment 1 - What is a PWA

As mentioned on the show a few times before, PWA stands for Progressive Web App, which is the evolution of the standard web app
If you’re new to all of this, the breakdown is rather simple:
- Website - A website is a more basic presence on the web, it delivers content to a visitor (ie blog posts, news articles) Popular examples would be news websites, tech blogs, marketing websites, and small business sites.
- Web App - Functions similarly to a website, however, acts more like an app that you’d see on your phone that performs a function. For example, there are online image editors where you can upload your photo and edit it right in the browser. This editor is a web app because the user interacts with it and computing happens (via the photo edits), content isn’t being delivered in the same way as a written article, or marketing information to the user. Unlike apps that run on your phone however, web apps are limited by the browsers limitations meaning that natively they can’t be installed, and they generally don’t have access to certain functions that natively installed apps can take advantage of, usually due to permissions/security on a given device.
- Progressive Web App - PWAs are the natural evolution of the standard web app, whose arguably biggest feature is the ability to run offline through the usage of service workers. Basically, they’re a web app that runs in the browser like any other, however, they can be installed and start leveraging more of those features that natively installed Android apps can . They’re still limited by the same restraints you can see from other webview apps and they still run the same codebase as their web app counterparts, not the native Java like other Android apps. In addition, they aren’t in a centralized location like the apps found in the Google Play store, you generally have to grab them from the web app’s website. If you visit the Twitter web app from your Chrome browser on Android you’ll see an “Add to Home Screen” button, if you do that you’re installing the Twitter PWA, but if you look up Twitter in the Google Play Store that’s a different native app
PWAs are getting more and more powerful and a lot of the walled off features are being broken down. Just a few short years ago you couldn’t get push notifications from your browser, now they’re rather commonplace for chat and news sites.
Accessing hardware was also an issue years ago, getting access to things like a webcam or a microphone, but now you can use a chat app like Skype right in the browser via video or voice chat - these limitations are quickly being done away with. Things like NFC access, however, is still a limitation last time I checked.
In terms of accessing PWAs, as mentioned before, there isn’t a centralized location for them all. Unlike on Android where the Google Play Store houses the vast majority of the available native apps, PWAs are generally downloaded from the web app’s website. However, even this limitation is starting to change with new ways to list PWAs in both the Google Play Store and Microsoft Store starting to make their way into the developer toolbelt
With these restrictions breaking down the main limitation is really with the codebase. Since a PWA isn’t written in the native language of a given platform, but rather runs more like a website/web app, Javascript does come with some limitations namely that it is a single-threaded process. However, there are workarounds for this, and Javascript itself is becoming more user friendly and more functional with every release - just like PWAs
From my experience, iOS has “less adopted” PWAs as of right now, however, I can see that limitation being lifted at some point in the near future in my opinion. One example would be that No BS News for Reddit can be installed on Android phones in it’s demo form right now, but that’s not the case on an iPhone. However, the app does still function in the browser which shows off the versatility of a PWA
Another thing to keep in mind is that a lot of corporations will have strict policies on what they support. For example, some places may say that if a certain browser’s usage worldwide is above 2% then that browser must be supported. This creates a problem because oftentimes it’s an older version of a browser like Internet Explorer, and since PWAs are so new, there will be severe limitations on what a developer can do if he needs features to work on such old software
In conclusion, a PWA is the evolution of the standard web app. It runs in the browser like any other website/web app, but has additional features like offline functionality and the ability to be installed. PWAs are quickly approaching the functionality of standard native apps, which is good news for small developer teams that have a web app and no time to develop a completely different native app for smartphones. The real question is whether PWAs will take over native apps, or will they just be another option for developers?
Here are a couple links comparing and contrasting PWA functionality vs native app functionality

Segment 2 - Make your Web App a PWA

Quite a simple process if your application doesn’t make any external api calls
Just need a manifest json file that gives browser information such as app names and icon locations
Web app must be served with HTTPS and have a basic service worker
What that essentially accomplishes is allowing supported browsers/operating systems to detect your app as a PWA and cache it to be served from cache instead of the network.
The power of PWA’s really comes with the service worker implementation.
- With service workers we create cached server calls, so if you hit a external API or your own servers API the service worker can cache them and then serve the responses from the cache instead of the network API calls.
- You can also set up the service worker to detect changes and update the caches with those changes (this has caveats)
With vuejs specifically, the vue cli can be used to create a app with PWA functionality already built in or even add PWA functionality to an existing app
This creates all the files necessary for the browser to detect your website as a PWA
You’ll need to edit the information in your manifest file and add any functionality to your service worker you need other than what it already has built in which is
- Caching all css, js, img and html files that are in the application
Essentially this allows a PWA to run more like a native application in the sense that it doesn’t rely on the speed or presence of a network connection
The PWA landscape is always changing and evolving so features are constantly being worked on and usually added from browser to browser

Segment 3 - State of PWAs

Currently PWA’s are supported on every major browser to some extent. Chrome has the deepest integration and support for PWA’s
Some really cool features that chrome gives you is the ability to add a PWA to your desktop/home screen on all operating systems but iOS. So on Android and windows for instance if the application is a PWA you can go into the 3 dot menu in the top right corner and there will be an option to Install in there. This will add it to your application and for most purposes will behave just like a native application of that operating system.
Great use cases for this can be internal business logic apps, like if a company needs a application for their new employees to take a safety course it can be easily made as a PWA.
The large advantage of PWA’s to development teams is how quickly they can be built, deployed and tested across multiple platforms.
Only needing a small development team to launch a application is a huge advantage for small startups and businesses, as it allows for much quicker and agile development
The greatest benefit to users is the speed of the applications, since the application can be mostly served from cache the user won’t see as much loading going from page to page
There are of course some inconsistencies with PWA’s currently. iOS being the main one
On iOS most crucial features are supported, like service workers but with quite a few caveats
- No background syncing,
- no push notifications,
- no app theming
- No prompt to install from the browser
- and the major one is that service worker events are not supported. So we can’t get information such as new update available messaging
That was a huge challenge recently because one of the applications I’m currently being contracted to work on is a PWA that has to run on iPads. Not having a consistent update experience was a major problem for testing and deploying updates. There was a work around which involved setting a workbox (framework for creating service workers) option called skipwaiting to true, which essentially now checks for new updates on every single load and loads them right away.
- Disadvantage to this is a larger network call is made on every load unless no network is detected
PWA’s also use a slightly different renderer on iOS then safari and therefore has some minor inconsistencies that need to be QA’d and fixed
Thankfully most issues can be worked around and it still provides for a much better experience then the browser version
Resources:
- https://developers.google.com/web/progressive-web-apps/
- https://devchat.tv/views-on-vue/vov-055-progressive-web-apps-with-aaron-gustafson-live-at-microsoft-ignite/

Web News - Flagship Smartphone UX

The trend among smartphones for 2018/2019 are:
- Very tall, with an aspect ratio of something like 2:1
- Very high screen to body ratio - almost no bezels
- Have notches or cutouts in the screen to accommodate for front-facing cameras and sensors
These trends create a major set of UX/UI issues that affect web developers, app developers, and device manufacturers because they need to ensure that content is not being rendered right where a piece of the screen is missing, not to mention create some sort of elegant solution to allow the UI to “avoid” the notch or cutout without annoying the user
In addition, in recent years vertical video, photos, and portrait apps have been on the rise because phones are generally easier to hold in the portrait orientation, but since they’ve been getting taller and taller, it’s difficult for users to reach any UI elements at the top of the screen - especially with one hand
We’ve seen manufacturers try and combat this with various iterations of one-handed modes which generally shrink the screens, or with UI redesigns that makes UI elements favour the bottom of the screen
Gestures are starting to take off, allowing users to access the notification shade at the top of the screen by just swiping down anywhere on the home screen, among other innovative gesture functions
From this information there are a couple of UX issue that stand out to me
- Notches and cutouts are all different on different devices, and they are handled differently by different manufacturers
- The bottom of the screen is getting very crowded with things like the android nav bar, the chrome bar (depending on if you use that UI layout), and then navbars for touch interfaces on websites
- Gestures and UX workarounds for one-handed use are adding to the learning curve of devices that were once rather easy to use

You can find us on...

Mar 28, 2019

Refactoring

Mar 28, 2019

34 min

In this solo episode, Mike discusses the code refactoring process and then deep dives on work/life balance.

Segment 1 - What is Refactoring

Refactoring definition
- Changing your code to improve its organization and structure without directly influencing it’s performance
Explanation of terminology
- Code Smells
  - Something you notice as your coding that you think will later require a restructure/reorganization
- Extensibility
  - Ability to later down the road use your current code to extend the capabilities of your program without having to rewrite large portions of code
- Maintainability
  - Make it easier to fix bugs and find issues in your code down the line when you’re not as familiar with it
- Extraction/componentization
  - Taking functionality from a method and creating its own method so that it becomes reusable to other functions

Segment 2 - Tips

Refactor often
Create a refactor list
- When you notice a code smell but need to focus on functionality, jot it down in a refactor to do list so you don’t forget to go back and correct
Change obscure variable names to proper named variables (Maintainability)
- Also use appropriate variable types. In JS we are limited but we still have the choice between let, const, var
When you notice you’re using the same of similar functionality in multiple functions, externalize that functionality into its own function (extraction/componentization)
- That could be a seperate function, or it can be a seperate file with a it’s own class and extensible functionalities
- In vuejs currently you can used Mixins which allow the use of methods across components (in the future this will be handled with hooks)
Remove old code that you previously commented out
Clean up unused files, folders, functions and images
Change code to be extensible to your needs (Extensibility)
- During sprints with short deadlines sometimes you’ll write code to just get something working while realizing that certain functionality that needs to be implemented in the future won’t work with the current implementation
- Example: Internationalization
Remove unused libraries
- We all add libraries as we code to try to meet deadlines faster, but sometimes they don’t work the way we want and we move on to the next one. It’s important to remove them when we realise they don’t fit
Use tools like prettier and lint to help maintain code structure on a daily basis
- Example making sure everything is in spaces instead of tabs
- Arrow functions instead of expression functions
Add comments to sections of code you think need explanation (maintainability)

Web News - Work/Life Balance

One of the disadvantages of being a contractor/freelancer is not having that 9-5 work structure that you have to follow
Depending on your situation though it might be an advantage, if your wife works from home also, you can sometimes spend the best parts of the day together.
Instead of going shopping at peak times you can go earlier and just work when you get back
Take advantage of off hours for traffic
A structured day is great, but everyone has a different work rhythm and being able to structure your day based on that can greatly increase productivity.
- If you work better in the mornings and early evenings you can make the middle of the day your time off for instance
If your considering freelancing you have to be able to structure your own days, which seems simple but can really be a challenge.

You can find us on...