HTML All The Things - Web Development, Web Design, Small Business

This week we sit down with Chris Dayley a digital marketing entrepreneur that helps businesses succeed online. We discuss a bunch of very interesting topics including things like SEO, conversions, A/B testing, and PPC. This episode is a great resource for any web developer, or online entrepreneur, that needs to brush up on their marketing skills. 
Show Notes: https://www.htmlallthethings.com/Podcast/5cf825c86a070d0011eb655d
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit | Discord

In this week's episode, Matt and Mike discuss why procedures and standard practices are important. Every entrepreneur at some point in their career has tried to turn themselves against the bureaucracy and slow systems that drive large corporate machines only to find themselves needing similar systems to keep themselves afloat. We'll be discussing this sort of realization and how a business can slowly, yet naturally, create unique procedures that compliment their work style. Then we change things up with a length discussion on digital wellbeing again, but this time we talk about the plethora of digital wallets and their associated apps and loyalty cards.
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode Matt and Mike discuss something we've all felt at one time or another - Imposter Syndrome. Whether it's due to lack of experience, or tackling a brand new topic, imposter syndrome can zap your motivation and make you want to quit. While it's hard to overcome, it's important to note that everyone has experienced it at some point in their career and will almost definitely experience it again. We offer our stories alongside some tips to overcome the dread and emerge a better developer and entrepreneur. 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode of the podcast Matt and Mike discuss the future of web development focusing on emerging trends and new technologies that are ready to take the world wide web by storm. Things like Motion UI, Progressive Web Apps (PWA), blockchain, voice search integration, and much more! With so much functionality being put into web developers' hands the future looks bright, but performance is a big concern with sites getting heavier and heavier as the years go by. Full show notes: https://www.htmlallthethings.com/Podcast/5cdc53536a070d0011eb6557
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit
 

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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

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. 

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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit
 

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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub

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
https://www.strv.com/blog/3-limitations-of-progressive-web-apps
https://www.quora.com/Whats-the-difference-between-Progressive-web-apps-and-regular-web-apps
https://stackoverflow.com/questions/35504194/what-features-do-progressive-web-apps-have-vs-native-apps-and-vice-versa-on-an
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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit