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

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

In this solo episode, Mike discusses the code refactoring process and then deep dives on work/life balance.
Segment 1 - What is Refactoring
Refactoring definitionChanging your code to improve its organization and structure without directly influencing it’s performance
Explanation of terminologyCode SmellsSomething you notice as your coding that you think will later require a restructure/reorganization
ExtensibilityAbility 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/componentizationTaking 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 listWhen 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 librariesWe 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 basisExample 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...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode we take a look at taking on complex tasks in a field where you're not very experienced, something all programmers must do at one point or another in their career.
Segment 1 - The Newcomer Effect
This segment is going to focus on our experience configuring a vuejs service worker - I went in with no previous hand-on experience, a complete newcomer to service workers and an amateur at vuejs. Therefore this process is no doubt clunky, but as you’ll hear that’s exactly the point
I want to be clear before I dive in here that we’re using the following particular scenario because it was recent, we are not pointing the finger at any of the plugins, apps, or resources that we mention below. The issues we’re discussing are industry-wide, and not on a specific service, platform, or individual.
Recently we went to work with service workers on a Vue.js app (No BS News for Reddit)
As apart of the coding challenge we had already had a basic service worker setup that allowed the local assets to load when the app was offline
This functionality was made using a pwa plugin for vuejs 
We left this plugin mostly, if not completely, in its default configuration
This default configuration registers a service worker and then generates a service worker file which caches those offline assets
Mike got the project to this point during the coding challenge and then I took over
This is where things all fell apart for me:
I had done a couple of days on reading basic service worker configurations and functionality and then finally decided to dive into our project
First thing I did was look around the file structure and I find a file named registerServiceWorker.js
This file contained an import line regarding register-service-worker (which fueled my initial Google searches) as well as the registration and basic responses that you’d expect such as successfully registered, detecting offline, etc.
Searching register-service-worker led me to the page that I linked above, which had some very brief documentation and a code example that looked like our registerServiceWorker.js file (so far so good)
From there I ran some tests in Chrome, checking for service worker install, checking offline mode, etc to get my bearings
At that point I wanted to start adding some code of my own to the service worker, from my readings I knew that the service worker was definitely a separate file and from the registerServiceWorker.js file I could see that it was referring to a file called service-worker.js
Searching the directory for said file revealed that it didn’t exist
I then went and checked in the browser again, taking a look at the sources tab to find out what file was running the service worker, it showed that it was definitely service-worker.js - which indicated that the file was being created dynamically as apart of the build process
This led us down a rabbit hole of finding how to inject my service worker code into this autogenerated file
Overall, we eventually did find a solution for the code injection, however, it was not in the original register-service-worker documentation, nor was it discussed a lot on stack overflow
We did find one Stack Overflow thread that did help, which led us to a useful blog and a couple of interesting links - I also found a separate page on npmjs.com somewhere along the lines which contained the missing code we were looking for
Basically we needed to add some injection configuration into the vue.config.js file and then from there make our service worker script
Now I know that’s long winded, but it points out some very important problems/concerns:
The newcomer effect is alive and well, I wrote an article on Medium about what I call the newcomer effect a long time ago, it basically means that any documents/signs/directions that are available for any given experience rarely take into account the needs of those that are complete beginners - increasing the entry “budget” for newbies
I’m not sure how documentation writers do it - maybe it’s because they’ve been working on their projects for so long - that they completely miss major steps in their documentation. It’s got to be mentioned that we desperately need better documentation for beginners and furthermore, more linking between potentially helpful guides
In this particular case, maybe it’s because many folks won’t write their own service worker, but rather just want the default to cache the local assets and that’s it, but shouldn’t it at least be mentioned that if you want to write your own service worker - please see x
Toxicity and useless comments are alive and well - on various forum posts, comments, and of course Stack Overflow posts there are typically an abundance of comments that dismiss questions due to “user not being experienced enough” or similar reasons. Or questions that are marked as duplicates, when really the question was indeed unique enough to be answered
I want to be reiterate here, that I’m simply mentioning some of the roadblocks that we face when we’re newbies on a given topic, I’m sure a bunch of these affect other people as well. I’m not pointing the finger at this particular PWA plugin, Stack Overflow, npmjs.com, or any other website. I’m simply using this particular recent scenario to point out common problems that could be ironed out for those of us that are inexperienced. These problems can be found across any programming language, and even outside of the programming world in some cases.
In conclusion, once we got the service worker file running, we were off the races. We ended up being able to cache all our Google Fonts thanks to a helpful guide and are well on our way to getting more offline functionality added in the app. Once we had everything put together, the PWA plugin works great. But I stand by my position that finding instructions on how to setup something in Vue (or any other framework, library, or whatever you're using) shouldn't be the challenging part. The challenging part here should be that we need to get offline functionality working via our service worker itself, not figuring out how a service worker is setup in this particular configuration
 
Segment 2 - Strategies
Complicated issues and topics arise all the time during the the development of a project
They can range from concepts you haven't heard of like Binary Tree Searches or design patterns, advanced algorithms or even just complicated libraries/frameworks
Sometimes when taking on a task it might seem that there's just to many unknowns for you and you’re delving into a sea of advanced topics
I’m going to go through a couple ways I go about learning and implementing advanced topics.
I start by breaking them down into as many smaller topics as I can
For instance if the topic would be VueJs id break it down into
Setup dev environment
Create first hello world app
Test reactivity
Figure out navigation
Figure out state sharing
Learn about components
Etc
By breaking apart a complicated topic into smaller manageable topics it takes away the initial feeling of being lost and allows you to focus on one small easy to digest topic at a time
If the topic is something that's hard to breakdown, or you don’t even know where to start breaking it down, it’s a good idea to take a look at the documentation and see what they start with. Usually the documentation starts with the simpler topics and moves on to the advanced ones. Of course if it has poor documentation that's a whole other problem that as Matt previously stated.
Once the topic has been broken down to learn more about each section I would actually start coding almost right away. So as you’re learning about how to get a dev environment setup, actually set it up.
The more I’m actually applying what I’m learning the faster I’ll pick up the concepts and find their downfalls and issues
Speaking of issues advanced topics can also just be hard to debug issues. We’ve had an episode about troubleshooting so I won’t go to far into it but essentially your first key goal is to be able to easily reproduce the issue, after that using the chrome dev tools as your guide, you can put breakpoints everywhere you need to read the state of all the variables as you progress. This method usually
Diagnoses my issues quickly
And gives me a clearer path for a simple solution
If you run into a roadblock and don’t see a solution at all, step away from that issue for some time. Even just getting up going to do a small chore might jog your brain into thinking about it from a different angle
Sometimes you’ll run into issues figuring out seemingly simple features and you might have to use these strategies for them too
Here's something that recently happened to me where I had to use all these strategies to get past a seemingly simple feature addition
Get the best library to work in a basic way to my liking
If it works figure out why it isn’t working in my particular scenario
Reproduce the issue
Troubleshoot the library code to figure out what is stopping it from working
Fix the issue
Had to add a comparison slider to a vuejs application
A few libraries to choose from so thought it should be easy
Tried all of them and they all had varying issues
Issue arose here, had to figure a) should I use one of these libraries or build my own
Broke down the problem
During the process of fixing it, I had to step away a couple times and each time I found different ways
Web News - Thin Client Computing
With the announcement of Google’s new streaming game service Stadia it seems like a good time to have a quick look at the current state and the potential future of thin client computing
When referring to thin clients I mean a small, low power computer that essentially is used to remote connect to a offsite powerful one that provides greater performance then you can get with lightweight portable computers
In reference to Google’s new game streaming service a person can play AAA games using any device that is connected to the internet and runs chrome.
There's obvious advantages to this
Using cheap hardware to still perform complex tasks
Being able to access the same environment from any device without any sort of backups or syncing required
Some not so obvious advantages actually can come for developers
If large thin client powerhouses like google become really popular, a developer is now coding for a single set of hardware, as the actual thin client that the user has doesn’t matter
Imagine gaming developers not having to worry what video card their audience will have because everyone will just be using thin clients to connect to a large datacenter with the same hardware in each machine
The limitations are also pretty big right now. Network connection being the main one. The latency of your actions appearing on screen can be very distracting. If you click your mouse and only a second later something happens it makes working with the system very unpleasant.
But with the knowledge that networks are constantly improving, latency is also getting better and maybe there are ways to make it almost unnoticeable, can you see a future where thin computing explodes?
Links
Plugin Links
https://www.npmjs.com/package/register-service-worker
https://www.npmjs.com/package/@vue/cli-plugin-pwa/v/3.0.0-rc.1
Stack Overflow Thread
https://stackoverflow.com/questions/51214220/vue-cli-3-how-to-use-the-official-pwa-plugin-service-worker
Guide we used
https://levelup.gitconnected.com/vue-pwa-example-298a8ea953c9
The Newcomer Effect: A UX consideration (Medium article)
https://blog.endpointmedia.co/the-newcomer-effect-a-ux-consideration-39889b6db077
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit
 

In this episode we sit down with leadership expert Scott McCarthy, to discuss leadership skills related to small business and independent entrepreneurs.
Segment 1 - Introduce Yourself
Segment 2 - Starting Out
Do you think that leadership is more of a school-learned skill (note-taking, reading, etc.) or more of one that you learn by putting it into practice?
How closely would you relate self-discipline with leadership skills? Should you work on self-discipline before trying to lead others?
When entrepreneurs are first starting out, they’re generally alone, or with a small group of other company founders. This leaves them partially or completely isolated from leading other people, a skill they would need to develop should their company grow and hire employees down the road. What advice would you give to someone looking to up their leadership game, before they hire employees?
A common mentality for new entrepreneurs is to just dive in and figure things out when you get there, which could lead your business into disaster. What’s your opinion on this mentality? Should people prepare more before they dive in?
How tied up should leaders get in the details? Should staff worry about details and leaders focus more on the big picture? (ie setting a sales goal without having the intricate details of how to reach it)
Many people that are thinking of starting a business are looking to stash some money away from their day jobs so that they can slowly lower their hours to work on their business idea. Given that their day job is a different experience from their would-be business, how would these entrepreneurs transfer any leadership skills they’re learning on the daily, to their new business?
Segment 3 - Types of Leader
One of the things that I struggle with a lot, is trying to determine what kind of leader I want to be. I want to maximize my team’s output, but that the same time, I don’t want to be a “force to be reckoned with” when entering the office. I often flip between being a ruthless money-only kind of leader, a laid back “tech culture” leader, or something in between. Does this kind of decision naturally work itself out as you gain more management experience, or is it more dictated by the stage of the company? (ie only the richer companies can afford to be laid back)
How much, if at all, does the job dictate the type of leader needed?
Should leaders have “modes” that they snap into in certain situations?  (ie Be really monetarily aggressive during an economic downturn, and lighten up when the business improves)
Web News - Difficult Situations
When faced with a difficult situation, having a strong leader is critical to guide the team through the storm.
This is easier said than done, however, because there are so many aspects of a business that a leader has to keep in mind
Things like: employees, asset management, capital, revenue, expenses, etc.
In an example scenario, let’s say that there is a struggling app development business that has 1 boss and 5 employees. The business is struggling to find customers and therefore can’t afford to pay their staff’s wages for any more than a couple of months.The company does have some valuable assets in the form of useful apps that could be put up for sale to raise capital. In this situation...
How critical is employee loyalty? Should layoffs be step 1?
Should assets be sold off before layoffs are considered?
If layoffs are inevitable, how do leaders soften the blow? Or do they just move on?
What is the main goal the leader should push for? (ie keeping the people employed, maximizing profit, liquidating to gain capital for themselves, retaining assets, etc.)
Scott's Links
Website w/ Social Links
https://movingforwardleadership.com
 
Facebook Group
https://movingforwardleadership.com/mastermind
 
Free eBook Preview of "The 9 Foundations of Leadership"
https://movingforwardleadership.com/download
Email Scott for a free 15 minute coaching call
scott@movingforwardleadership.com
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit