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

Negative Customer Relations

In this episode we discuss the difficult conversations we all face when dealing with customers including pricing, misunderstandings, and more.
Segment 1 - Saying No
Sometimes customers relations aren’t just selling them on your latest theme, service, or skill - there comes a time where you have to deal with intricacies that have a negative connotation attached to them
Specifically these are often: pricing, value (of work and of the product to the customer), bad content (low quality images, bad copy, etc.) - essentially you’re saving them from themselves, their web presence should start out on the right foot when you’re done with it
 
Pricing
Pricing is almost always a major point of contention between you and your customer
People always want a lower price, and they’ll try anything to get it
The issue with you constantly lowering your price is that even if you don’t intentionally do this, you will have a lesser quality product because your motivation to complete it will drop.
Scope creep (customers adding features onto the original scope of the project) is especially bad when you’re doing a project and being underpaid - and the outcome will be of lesser quality
You should go into a pricing meeting with a price range in your head, or one solid price if you aren’t willing to negotiate, and stick to the plan. If the customer is unwilling to pay a price that you’re okay with, then you just have to back out politely (this isn’t gonna work, thanks for your time)
When it comes to older businesses, or specifically ones that don’t run off the internet, they have issues paying for online services like web development because their business doesn’t generally value the web too much
 
Value
Value and pricing go hand-in-hand, everyone wants what they paid for and preferably a low price on a high value
Sell customers on the value of your work can be difficult depending on how much they rely on their website
For example, if a company if almost completely reliant on their eCommerce site then upgrading it - even for a high price - may be something they’re willing to do to ensure the revenue keeps flowing
On the flip side, if you are working with a customer that simply has an online presence, like a basic website with a phone number - they’ll generally generate their customer via other means (newspapers, word of mouth, billboards, etc.) and therefore will value their online presence less.
When you have a customer that doesn’t value your services much, often times the project will be less complex, however, they won’t offer you a fair dollar for it because it doesn’t generate them enough business to pay for itself over the short term.
Sometimes a customer is looking to become more active online, which is why you were contacted, but they still don’t know the value of a good online presence, what it takes to generate traffic, how to manage social media, etc. In this case it can be very difficult to get a customer on-board with a price that you’re good with, versus the amount of work he wants done to become relevant online because they don’t understand the value of the work you’ll be doing for them
 
Bad Content
We’ve all been there, you’ve been hired to look at an old website that was designed for old SD monitors, you come up with a plan to revitalize it which results in a list of photos and other content that you require the customer send to you (ie staff photos, office photos, staff bios, etc.) and they just say to use the old ones because they look good
This is one of the hardest things to convince people to change, they’re attached to the old photos and text that they wrote years ago, but those small SD photos just aren’t equipped to handle the HD screens of today and will look awful
It’s your job, as unfortunate as it is, to politely push back on customers explaining to them that if they’re refreshing their site, they can’t have old assets on there or else it will look awful. You need to try and convince them to update everything to modern standards and to ensure that any copy is up-to-date
In order to do this try and tell them that their customers will take notice that their site looks messy, or slapped together for cheap which will leave them with a bad first impression.
You can also offer to make some of the content for them, if you’re willing and able to, for a price of course.
Ultimately it's your job to ensure that their web presence gets off on the right foot when you’re done with the project, ensure that things are as high of quality as you can.
 
Segment 2 - Aggressive Interactions
Handling a client that is angry can be a challenge
There are a few strategies that we use to to handle these situations when they arise
Let the client say their piece fully without interrupting them because if they are angry it’s important to figure out why before you can diffuse the situation
Once they seem to be done try to show empathy and don’t deflect their problem back at them. Even if it’s fully their fault take some time to think of it from their side and try to explain to them why the situation happened and what you will do to fix it
Don’t fire back at the customer, it will make them angrier, usually if you treat them with respect through this process they will realize they are overreacting.
Usually the reasons for these aggressive behaviours can be:
Miscommunications
Pricing conflicts
Design misunderstandings
Encountering bugs
Remember you’re the professional in this situation so you have to act like it. Prove to the customer that they should trust you with your decisions.
When you make a mistake own it and give the customer your immediate solution and the steps you will take for them to not happened again
Mistakes happened, most people will be very reasonable when they do as long as you’re clear with them. Aggression can occur when you try to hide something from the customer, especially if it’s a hidden cost or a detrimental experience.
 
Segment 3 - Waiting
A lot of negative customer relations can come from having to wait for a client
Waiting for them to answer an email, respond to your phone call, give you content, or any other situation where you are being held up by the clients lack of communication
Situations can arise where you have a tight deadline set by your client but are being forced to wait on them for content which will cause you to miss the deadline.
To mitigate these situations you have to give your clients deadlines as well. Clearly explain that if they do not meet them then you cannot finish by the deadline they need their product by. These clear and deliberate communications will set a precedent with your clients.
Some good advice that I heard listening to the latest Syntax podcast [The Freelance Client Lifecycle] was to treat your clients as more of a partnership with them. Where you are trying to get something done together, rather than a them vs us mentality.
As we are learning some clients don’t like to read emails in their entirety so it might be beneficial to give them a call a day or so after a lengthy email and ask if they have any questions or concerns
 
False Urgency
A major pet peeve that comes into projects in a variety of ways
Entails calling something an emergency without there actually being an emergency
Often times causes things to be rushed and of lower quality than they would be normally
Sometimes this can cause additional charges on clients who are unsuspecting
Common false urgency dispatchers:
Marking emails are urgent
Saying something is an emergency within an email
Calling a frequently or out of normal work hours (late at night, early in the morning)
These dispatchers are exactly how people actually contact you for a real emergency, however, they’ll try and add urgency to something that isn’t actually urgent just to get it done faster
Often times we’ll quickly do whatever they ask if we’re available only to have those edits go unchecked, or unused, for several weeks
Constant false urgency calls only result in slower response times, and may result in actual emergencies being missed because of the “boy who called wolf” scenario
Web News - The Facebook Messaging Toss-Up
“Facebook is working to allow cross-messaging between Facebook Messenger, Instagram, and WhatsApp, according to a report in The New York Times this morning. Each service will continue to operate as a standalone app, but according to the Times, Facebook is rebuilding the underlying infrastructure so that people who might use only one of Facebook’s properties could communicate with others within the company’s ecosystem. All of the apps will support end-to-end encryption as well. Facebook has yet to provide a timeline for when this will happen.” - The Verge (https://www.theverge.com/2019/1/25/18197228/facebook-instagram-whatsapp-merge-messaging-services-mark-zuckerberg)
 
Facebook Spokesperson Statement
“We want to build the best messaging experiences we can; and people want messaging to be fast, simple, reliable and private. We’re working on making more of our messaging products end-to-end encrypted and considering ways to make it easier to reach friends and family across networks. As you would expect, there is a lot of discussion and debate as we begin the long process of figuring out all the details of how this will work.” - The Verge (https://www.theverge.com/2019/1/25/18197228/facebook-instagram-whatsapp-merge-messaging-services-mark-zuckerberg)
 
What of Instagram Direct?
It’s integrated into Instagram itself, does that mean we’ll have duplicate notifications?
There is a separate Instagram messaging app available in limited countries (not in Canada) called “Direct from Instagram” maybe the messages will be removed from the main Instagram app?
Facebook messaging was removed from Facebook’s app and put into “Messenger”
WhatsApp was acquired by Facebook in 2014
General UX Questions
Will there be a main app that people should use?
Will you lose native features of an app that you don’t have installed (ie WhatsApp profile pic)
Is there going to be a totally new combined app for phones?
Will this work on PC? (if I boot up Messenger either within facebook.com or on the separate web app, will I be able to message WhatsApp folks?)
Do I need to sign-up for all of them?
Assuming you just need one app, which one are you going to use?
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Tips and Tricks

In this episode we share some of our tips and tricks that we've picked up along our many web development and design adventures.
Segment 1 - Matt’s Tips & Tricks
Server/Hosting Management
Common things like this include: WordPress updates (plugin updates), migrating to a different server/host, testing a new major feature, adding something a client has requested - but you think won’t work out which will result in a rollback
Always backup files and databases that you won’t be able to get back in their existing state
Be wary of new commands if you have command line access, especially if they’re aimed at deleting files, or folders
Have a recovery plan before you begin so that you can quickly and easily rollback your changes if something goes terribly wrong - planning this out properly may require you to take full backups, prepare a re-upload solution, research re-installation information on some of the software you’re using
Have a testing environment setup that mimics your production environment preferably
CSS
Don’t be afraid of simply setting up a skeleton before moving onto a different part of the site - having a skeleton of the top bar while branding is being figured out is a good way to get started on the site, and frees you up to spend more time on other elements that are more definitive (ie slider, contact form, etc.)
Make your class names easily identifiable, whether you use a naming convention or not, at the very least use something that you’ll be able to identify later and that other developers would be able to pickup on if they interact with your project in the future (example classnames: navbar, nav-item, footer, topbar)
Comments (and this goes for other languages to) should be done to clarify things for yourself in the future, or for other developers down the road, however, sometimes you understand something using references in your own head - do not hesitate to make comments specific to you if you’re actively working on the project, using references that only you understand - making the comments more generic for others when production hits
Test responsivity with true window widths, not just responsive tools, sometimes these tools don’t reflect exactly how different browser window widths will actually react which can result in some overflow left-to-right or some broken elements altogether
 
Segment 2 - Mikes Tips and Tricks (JS Tips)
Use a scope variable
If you’re using just straight javascript for a single page or multipage website create a scope global variable. Make sure that this is your only global variable for the whole project but if you need to pass state or variables between files or pages then use only scope to keep some form of structure and minimize conflicts
Use libraries when necessary
Make sure it has been updated in the past year at least
Make sure the documentation is fairly easy to understand
Check the Open issues tab in github and make sure that there are plenty of closed issues and check those closed issues to make sure you are fine with the answers given as if you have an issue you will have a similar experience
When working on a large project there will be times when you’ve gotta complete features under a time limit. This is where libraries can really save you a huge amount of time and headache. I recently had to create a searchable list for an application with the ability to auto filter the visible list as you type. Even though this is definitely something I could have created from scratch I didn’t want to waste my clients time if that is unnecessary. Doing a quick google search yielded plenty of well maintained, small and feature rich libraries. One called list.js really exceeded my expectations. Here are some tips for checking if a library is worth using:
Do your best to write self documenting code with comments being used only when necessary
I am very deliberate in my function and variable names to make it easy to go back to my code and understand what is going on
If a function is calculating the taxes on the order then call that function calculateTax()
Try to avoid using ternary operators (condition ? true expression : false expression)  in code that will need to be maintained by multiple people over long periods of time. As ‘professional’ as they make you look they are not easier to understand then a simple if statement. Nor do they impact performance in any way
Refactor and clean up code often
With larger projects code can get out of hand really fast. If you’re programming at speed and do a lot of testing where you comment out sections and write new ones to see differences those commented out sections can add up and can contribute to confusion and maintainability in the future
Sometimes you can preemptively create variables and functions and then never use them going forward. These are just taking up space in memory and adding even more complexity to your code for no reason. These are prime candidates for removal in a refactor
Chrome Dev tools are your friend
These are a huge help to me on a daily basis. Being able to put  a breakpoint in my code and view what all my variables read at that time makes testing and writing code so much easier
Web News - Software as a service
With most software companies move to a monthly or yearly subscription model has the standalone application now become a unicorn in our industry?
paying only 5-20 dollars a month for a premium application seems like a easier sell to people then asking them for 100+ upfront. But these 5-20 dollars a month add up and could very well be a much bigger hit on your wallet in the future
Knowing you never own the actual product is also a weird feeling
For the company having consistent recurring income is a huge bonus and allows them to plan much further ahead with features and support. Also very few yearly version upgrades happen, instead choosing to maintain and add features to the same version. This makes for less need to upgrade or migrate to different versions
In my experience a company that gets a monthly subscription is less likely to abandon their product
I.e android app Weather Timeline was a paid application but with it being only a one time fee it wasn’t able to maintain it’s costs and had to take the application down from the store and later on sell it to a different publisher
What do you prefer, a one time bulk fee (approx $100) or a $5-$20 subscription?
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

Coding Challenge Wrap-Up

In this episode we discuss our recently completed coding challenge, making "No BS News for Reddit"
Note: We had some audio issues with the first upload of this episode, if you hear nothing, simply delete your version and re-download to get the updated file. Apologies for the inconvenience.
Segment 1 - Pre-Planning & Design
As apart of this challenge we were allowed to plan, design, and research before the challenge began
To prepare we did some research on PWAs and their functionality
We also researched other news apps, and what subreddits would be the most useful
From a UX perspective, we took a look at which features a Reddit user would need and expect from a Reddit app - minus the social features of course
From this we came up with some wireframes to guide our design throughout the process, which we modified on the spot to accomodate for a “open Reddit post” button alongside alternative share options for PC users
We also had a discussion regarding the addition of custom news sets, where users could select a bunch of subreddits to pull into a single custom feed - this ended up using up a decent amount of time and we didn’t put it into the app in its current state
One other design challenge that we had was making the design pop
Since this sort of app is so text-heavy we were concerned that its monotone nature would end up making it boring, or otherwise, look unfinished and rushed. However, after spending more time on Reddit we realized that this type of app is more utilitarian than it is flashy, so we decided to place it in a dark theme and let the links “do the talking”
 
Segment 2 - App Development
Development went smoothly for the most part
We were able to complete almost all the features that we originally set out to make, including a few extra ones
We had a few bugs popup that were dealt with quickly, namely some responsivity issues with overlapping and some time stamps that were coming in as negative numbers
Vuejs seemed to almost accelerate development due too it’s built in development server and its short code nature for functions and listeners
Vuejs also created the template for the PWA functionality through the Vue CLI
App functionality implementation went as planned and didn’t pose much difficulty other then a couple of hiccups and glitches that had to be fixed
Showing how much time has elapsed since each post was posted showed to be kind of annoying because of how reddit handles UTC time. I have to multiple the time by 1000 to match with the the current UTC time
Working with the reddit api is awesome and a great way to learn API’s and working with json
The app is pretty much feature complete as in line with our MVP (minimum viable product)
Couple of features we are looking to add would be :
a way to create a custom news group
Light theme to go along with the current dark one
The motto for adding features to this is “Is that bullshit?” if we think it is, then we don’t add it
 
Segment 3 - App Deployment
So we’ve already had a few episodes where we talk about deployment in a little more detail but it’s valuable to mention how we went about doing this for the 24 hour challenge aspect
This was by far the most frustrating part of the entire day as this would be only my second time deploying with Docker and to digital ocean
It is simpler than the html all the things deployment because there is no server side containers but due to the time constraint and the fact we started deployment only at around 12am it turned into a problem
The initial deployment as a web app went ok until we hit the SSL certification
We used the same method as with HTML all the things, where we are trying to certify a docker container running nginx using certbot on our ubuntu digitalocean droplet
Unfortunately I didn’t have a lot of experience and combined with already being mentally exhausted I went into a try everything approach instead of using logic
Logically looking at it with a fresh head after getting some sleep got a solution in a matter of minutes
Although this was frustrating this is all part of these short time challenges and must be overcome if anyone wants to be able to work in crunch periods
Sometimes it’s important to step away, as I did that at least 2 or 3 times during the challenge to solve random issues
For next time I think we might do a initial pre deployment before the challenge to at least get the ssl and nginx container worked out, so we have more time to focus on actually developing
 
Web News - Personal Opinions on PWA
Disclaimer: We have minimal experience with PWAs in both the development and consumer side of things, so these are simply our opinions having minimal exposure
Progressive Web Apps fall into a strange segment of the market, because they’re not quite native apps, and not quite websites (at least under the hood)
We’ve entered into a time where the internet is relied upon to power a lot of things and therefore an internet browser of some kind is almost always open on people’s computers, or phones
On the PC, it’s rare that people use traditional “apps” like Facebook, for example, but rather use the website facebook.com which serves virtually the same purpose
PWAs seem to be the bridge between the two, adding accessible offline features to web developers that are creating websites, or web apps, that will eventually need a mobile app of some sort
With that being said, there seems to be a bit of a stigma against non-native software, things like WebViews and other app types are readily available, but the big apps seemt to almost always go the native route - even if that means making two entirely separate apps (iOS and Android), or dealing with porting between the two in some capacity
So where do we feel PWAs fit in?
Will they take off?
Will they displace native apps?
Are they here to stay?
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Code Challenge - No BS News for Reddit

In this tidbit episode we discuss our code challenge, announcing official dates, and other considerations that we've thought up over the past few weeks. 
We'll be calling our PWA (Progressive Web App) "No BS News for Reddit" and will be using: flexbox, Vue.js, and service workers to accomplish our task. The challenge will comprise of us trying to complete this app within a 24-hour period. As a PWA, we will be running it on Digital Ocean for hosting, which will also be our finish line. More specifically our goal will be to develop the app to completion, and have a functioning product live on our hosting package. We plan on releasing this app on an app store, or two, however, this will not be apart of the challenge. In addition, any time-based approvals (ie if Adsense needs to approve to run ads on the site) will not be apart of the challenge. We will work around them the best we can to provide an app that people can use before the 24-hour window closes. Before the challenge begins we're allowing ourselves research and design, but no development on the app itself - that will be all saved for the code challenge window.
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Maintaining Your Skills

Happy New Year! 2019 has just kicked off, and so has another year of podcasts. In this episode we discuss maintaining your skills after long periods away from your desk. This is the perfect compliment to the recently completed holiday season as many of us are just now getting back to work.
Segment 1 - Keeping Things in Practice
Keep using the technology you deem valuable
The main way I stay on top of my skills is seemingly an obvious answer. By using them
This can be a little difficult though with so many technologies out there and as we’ve mentioned many times it’s easy to get overwhelmed with all the choice
What I try to do is choose projects that will incorporate the technology I value
Sometimes this requires convincing your employer and contractor to adopt something they are not familiar with. So it’s important to be knowledgeable of the positives and be very clear with the downsides right from the get go.
Recently I’ve been proposing using Vue.js for some contract projects
Keep up to date with updates
As technology evolves it usually get a wider feature set and perspective of when to use it can change
I try to stay on top of technologies such as node, Vue.js, react and read their change logs. If a new feature gets announced I try to figure out where I can use it and how to implement it (usually using the documentation). Even if I don’t implement it just by going through the exercise of figuring out how it works I retain a little bit of that knowledge and will more likely know to come back to it when a new project pops up.
Segment 2 - Combating the Loss of Knowledge
When you’re away from your desk for a long time, you’ll become rusty at your everyday tasks and may completely forget new things that you learned just before leaving
Furthermore, there are often times that certain snippets of code are used a single time per project and therefore don’t stay fresh in our minds because we rarely see them
It’s easy to stress over losing knowledge like this because we invested time in learning new skills and in a few short weeks they could be completely gone from our memory
There are a variety of ways to combat this, but it’s not something to stress over as it’s just a natural procedure that our brains do that is out of our control
 
Recording Snippets
 
Programmers of all kinds, whether it be web developers, game devs, or even hobbyists all have some sort of snippets manager
Often times these take the form of a snippets managing software, but it can be as simple as keeping old projects and files laying around in a folder somewhere
One key component to generating snippets is that your code is modularized rather than proprietary for each application, meaning you want to code up functions that can be used over and over again - If you have an application that uses AJAX for example, there should be an AJAX function that you can pass arguments into, rather than AJAX being done somewhere inside of another multipurpose function
Snippet managers are great when you code up something that you know you will use repeatedly, but rarely need to interact with directly
Example 1: You make functions that access and interact with an API once, then you focus on making the application using the data that comes from that API
Example 2: You make a collection of CSS buttons that you use on a variety of projects
Personally, I use a bunch of old projects and files inside of a folder because I always think of the project I did something in, in the past, rather than the name of a generic function. However, I’d like to build up a snippet library in a formal piece of software
There are a bunch of snippet managing software out there, I haven’t used any personally, but some of the ones that came up in a quick search include: Boostnote (https://boostnote.io/), Cacher (https://www.cacher.io/), and Bracket Snippets for Brackets (https://github.com/jrowny/brackets-snippets)
 
Letting Selective Knowledge Go
 
One of our programming teachers in college said that he would selectively let knowledge leave his brain once he had learned and implemented it
Specifically he was referring to a driver that he had written for a microcontroller that we were using in his lab class. He said that he only needed to learn the information for certain parts of the driver once, implement the driver they way he wanted based on his new knowledge, then he forgot about that specific piece of information he learned because he had already gotten from it what he needed
This might be a hard pill to swallow, especially since things take forever to learn when we’re new to them, but it’s a valid statement
If you think about it, if you were working at a company as a Ruby on Rails developer and suddenly got changed to a different team that exclusively uses jQuery for their projects, you’re going to forget Ruby on Rails pretty quickly if you don’t keep your practice up on your own time
I like to think of it as, I learned something to gain value in some way, expended that value to its fullest for my given situation, then moved on.
 
Web News - 2018 in Review, Road Ahead to 2019
2018 Podcast Download Numbers
July - 72 downloads
August - 378 downloads
September - 973 downloads
October - 1234 downloads
November - 1683 downloads
December - 1569 downloads
2018 total: 5909 downloads
2018 Spotify Stream Numbers
July - 0 streams
August - 84 streams
September - 333 streams
October - 618 streams
November - 718 streams
December - 686 streams
2018 total: 2439 streams
As of January 7, 2019
Instagram Followers - 448
Twitter Followers - 60
Facebook Page Likes - 57
2018 in Review
Higher numbers than expected across the board
Podcast was supposed to be a side thing in comparison to templates, snippets, etc, but has become a staple of HATT
Learned a bunch of social media tips and tricks, with a focus on Instagram, secondary focus on Twitter
Goals for 2019
Over 2k Instagram followers
Monetization of HATT through multiple means
Create a developer community through HATT where people can meet other developers going through similar paths to them, finding people to work with
Mikes Goals
Go all in on vue.js
Get a youtube tutorial series up
Become comfortable with webpack and code splitting
Matt’s Goals
Master CSS Grid
Start something on YouTube (Webflow guide? Something else?)
Further my knowledge of social media
Amass to: Get a steady passive income stream setup and running
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Motivation

In this episode Mike and Matt discuss motivation in it's many forms, and how it affects working on variety of projects.
Segment 1 - Types of Motivation
Different types of motivation range from the tinkerer all the way to the passionate
Being in any of these camps generally dictates how much effort, and time, that you’ll put into a field that you’re checking out
In terms of web development & design, having a different level of motivation will no doubt determine where you fall within the field - maybe you’ll make a single website for fun, or maybe pursue a career
One thing of note, these classifications of motivation are from our own experiences and ideas, they aren’t some sort of “official” classification of any kind
 
Passionate
When you’re passionate about something you’ll typically take it more seriously and do in-depth research to learn new things
This type of motivation may steer your career decisions, or help you set up a side hustle of some kind
For the web field, this generally means you won’t be using your “local” website builder like Squarespace, but rather diving in head first to the code, determining what tools you’d like to use and how to use them efficiently
 
“Forced”
Sometimes you’re figuratively “forced” into a doing something due to outside pressures, such as financial situation, or availability of work
When this happens you may take your work seriously, however, you’ll be taking it more seriously and efficiently than someone who wants to be there, because generally you’ll want to get in there and just get the work done
Often times people get trapped into these types of situations due to the outside pressures never alleviating, or more that suddenly pile on, leaving you trying to find methods to get out of the field
Bringing this into the web industry, sometimes people will be “forced” to do professional web work, either full time, or by being in an associated tech field that suddenly requires web work. Generally this type of work will be rushed in some way, having tasks done in the quickest way possible - often leaving a lesser quality product
 
Hobbyist
Hobbyists are people that like to do a variety of things, and get into them all the way, stopping just before getting professional.
There are of course varying degrees of hobbyists, but generally, they could technically operate in the professional realm given a small amount of training
Bringing this again to the web industry, hobbyists will generally not focus on one tool, language, or segment of the industry, but rather fan out and use a bunch of different tools ranging from site builders like Squarespace, then dabble in some code - getting a full range of experience to build some sites that they’re interested in, sometimes these lead to a side hustle if they’re successful
 
Tinkerer
Tinkerers are one step below hobbyists, and are generally just interested in a field in some remote way
They’ll do a variety of “light duties” within their interest, things such as reading some material, or maybe dabbling slightly within the field itself, stopping well short of investing any sort of money, or serious time, into learning a given field
When it comes to the web industry, these people often need a single website for something they’re working on, they’ll read up on different site builders online and then just use a template so they can get to work - this of this as more of a blogger that doesn’t want to deal with their website, but instead their work is their writing itself, so they familiarize themselves with the path of least resistance to get a website up and running and that’s it
 
Segment 2 - What Motivates Us
Pure Enjoyment for coding
Creating something from scratch
Looking at examples of other people's work and striving to achieve something similar
Looking through sites and trying to find motivation for your work
Having someone or a group request something that you could make
Small amount of adrenalin from fixing difficult issues
Being part of the coding community
Having people reach out to you for help or opinion
Keeping up/learning new technology
 
Segment 3 - Motivation Blockers
To many projects on the go making it difficult to focus on one
Prioritize and use task management applications like Asana
Running into a problem that takes several days to solve
Take a step back from the problem and maybe try to complete a smaller easier task
Difficult clients
This is a tough one but try to understand where your client is coming from and if you can relate to their issues
Programmers envy
There will always be people that are better than you but also people that are still trying to catch up to your level. It is important to learn how to focus just on yourself
Procrastination
Just start something, start with smaller more accomplishable tasks and build up to the harder and longer ones.
Links
Dan Mace's Video: https://www.youtube.com/watch?v=dMTJRYmQkbc
Joe Rogan's show with Derren Brown: https://www.youtube.com/watch?v=n_tpWrv76Q8
 
Web News - Scams
Scams are becoming more frequent and more complex
There isn’t a day that goes by that some sort of scam hits our email inboxes, often times being screened out by the spam filter, however, with complexity growing these scams often get through that level of defense, leaving the user to further filter out their inbox
In addition to email scams, there’s phone scams, and even in-person ones that people have to avoid
One thing that we’ve found is that email scams are getting harder and harder to notice - the one tell-all used to be an incorrect “from” address but even that is now being spoofed to look legitimate
The other day I received a properly branded Cyber Monday email from what looked like the real amazon email, but it only lead to a website that was trying to get me to sign up
The worst most recent one is someone impersonating us in an email - basically one of our clients will receive an email that says it’s from us when it’s not, and asks to download an attachment - meanwhile we’ll receive the same thing, an email that looks like it’s from our client also trying to get us to download an attachment
We’ve even had a brand new business credit card compromised whilst it was still in a safe at home
What are you thoughts on scams? Have you fallen for any? What can be done about this?
 
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

Design, Develop, Deploy

This week we discuss breaking out of our comfort zone to finally develop an app via a coding challenge.
Segment 1 - The Idea
Parameters
Our idea needed to be something that was accessible, yet popular enough to get in front of people and actually get downloaded
In order to get downloads we knew the reach had to be decent, it had to be something that people would find useful, but it had to be simple enough in order to be developed quickly
We decided to analyze our previous experiences in launching apps, specifically our Chrome App and Chrome Extension collection
What we found was that, with very little promotion on our end, making a product that compliments an existing popular product gives you exposure through “osmosis”
Specifically speaking, our most popular app is Multiple Accounts for Outlook.com, which allows people to quickly switch between multiple outlook.com accounts and their associated web apps, like OneDrive
From there we took a look at our recent personal app experiences, as well as the Google Play store - our targeted app store
All of this ultimately boiled down to the next subsection “The Decision”
 
The Decision
We’ve decided to do a minimalist reddit news app that strips away any distraction from actually reading the news
We’ll get more into what I mean by “minimalist” in the next segment, but generally we’ll take away a bunch of the default reddit features that people can get distracted by
We also have experience pulling information from reddit, via Mike’s joke generator that he used on his Introduction to Vue.js Guide (https://medium.com/html-all-the-things/introduction-to-my-vue-js-guide-ee9f4baad61)
This app is far from reinventing the wheel, but it gets us going on finally releasing an app on Google Play, which we’ve been talking about for years, but never done
The app will be monetized by ads, however, we plan on making the ads non-fullscreen and non-intrusive so that users aren’t bogged down by ads that have issues loading - this will be our first encounter with ads in an app as well so we’ll see how this strategy moves forward, maybe it’ll change, maybe it won’t work at all
This app is rather simple in design and scope, but it’s actually accomplishing a great deal of smaller points that we’ve been aiming to get done specifically...
 
Accomplishments & Goals
Trying out a community event: One of our goals with HTML All The Things was to get the people involved to some extent if they wanted to try out new things for us. This coding challenge is the first of its kind for us, and we’ll be the guinea pigs to see if it works out - maybe if it goes well we’ll do a public version of some kind
Social media coverage - Right now we post about our podcast episode releases, share people’s work, etc. However, we’ve been wanting to try and “live post” to an extent. Share work as it’s being completed, so we’re aiming to share a bunch of content during this coding challenge’s time window. Things like posts of our progress as they happen, maybe get some videos in there - we’ll have to see how it pans out.
Releasing an App: We’ve been talking about releasing an app on Google Play for a long time and we’ve always brushed it off, this challenge should give us a push to actually get it done - even if we fail the challenge and don’t release the app on time, we’ll have dived into the app development so much that we’ll essentially have no choice but to release the app for fear of wasting all that time - forcing ourselves to take on the risk
Furthering Our Knowledge: We’re planning on using pwa for this project, however, we’ll be needing some plugins and functionality that we’ve never used with it, so we’ll be learning on the fly
 
Segment 2 - Design, Develop, Deploy
If we assume that our “decision” in Segment 1 is final, and we are actually doing an Reddit News App, let’s dive into how we would take this project on
One of the most important things we need for this challenge is to identify what our MVP (Minimum Viable Product)
Research, Design, Development, Deploy
Research is complete already, app decision has been made
Mission Statement: Simple Reddit new aggregate for people that want to quickly view the news in their area without any distractions.
Parameters of the challenge?
What can we do before/after?
What we need to accomplish during the challenge?
What’s the endgame?
Design
Use a css framework?
Light/Dark theme?
Simplistic no bs design to to make the news a quick scroll away
Naming
Features
Pull posts from multiple subreddits and display as one multi subreddit
Remove all unnecessary attributes like karma count, comments, etc to display a minimalistic news block
Allow user to select their regions news
Ability to share articles through android/iOS share menu
Ability to view articles in webview without leaving the app
Ability to switch between light/dark theme
Ability to switch between Top, new, controversial, hot
Develop
Vue.js
Vuex for state management
No accounts, but local storage and Vuex for data persistence and resource sharing
CSS Grid for layout
Deploy
Deploy on Nginx through docker on Digitalocean
 
Web News - Edge going Chromium?
Microsoft announced it will be moving away form EdgeHTML to Chromium for a future version of the Edge Browser
A Project Manager moderately confirmed that most chrome extensions will work
New Edge will be on Xbox One, MacOS as well as Android and iOS
Mozilla is not happy that Microsoft is giving Google a monopoly and has reaffirmed their efforts to provide users a choice
Developers will now not have to support EdgeHTML
Electron played a key role in the decision to switch to Chromium instead of Firefox
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

The Hustle

In this episode Mike & Matt discuss the entrepreneurial hustle, focusing in on the online freelance game for web developers and designers.
Segment 1 - Freelancing Online
There are a lot of developers, writers, virtual assistants, and more that work freelance online
As a small business, we have experience getting work from freelancing websites and other site resources, however, please note that we work almost exclusively in the web development/design segment of the business so your mileage may vary if you’re freelancing in a different field
There are a lot of different websites and services that are set up for freelancers and their customers, most of them are basically job boards with full service solutions that contain various features such as:
Portfolio Page: Set up a portfolio containing things like pricing per service, project showcase, history on the site (ie took successful jobs, their rating as a service providers, etc.), list of skills, and more
Job Board: A list of jobs typically posted by potential customers, this job board generally has a bunch of topics ranging from app development to content writing. Customers can also post things like their budget, how much they’ve spent on the site with other freelancers - to judge how serious they are, and customers can also have a profile that proves how “legitimate” they are, or show off what other projects they’ve had done so developers have an idea of their expectations
Payment Systems: A lot of these sites have some sort of payment system in-place that helps customers pay freelancers, and in turn, help freelancers get paid on time.
Premium Services: Often times these sites are free to use, but have premium features that are for sale for customers and/or freelancers. Some of these premium features include: bidding for jobs (limited bids for free, freelancers can pay for more), premium job listing (appear at the top of search results)
Services we’ve used include: Guru.com, Freelancer.com, Craigslist, and Kijiji
Segment 2 - Our Experience w/ Freelancer Online Services
Guru.com
We’ve applied to a few jobs on Guru without much success, however, we have had success via our portfolio on the site
Once we listed our skills and experience on there, we generated a few leads from people contacting us right from our portfolio page
Freelancer.com
This was the first freelancing site that we tried, it seemed really popular and active so we went in head first
We tried starting with smaller jobs, $100 or less, and ended up scoring a low-cost small adjustment job which ended up being an entire mess of a situation - mostly because the customer had an issue with his account and because we didn’t take a look at how Freelancer charges for their services
Kijiji & Craigslist
In the very beginning we tried to get some free advertising going in the “classifieds” space
We took a look at what other people were posting on there in the web development space, most were quick $500 or less websites that were all-in
Following in their footsteps we released a few different ads at different pricepoints, listing similar packages on our website
This resulted in one long-term customer relationship from a person that called us from the ad, but wanted general development services - not the package that we had advertised
We also got a call or two from people that wanted extravagant websites for extremely cheap, being offered $100CAD for an entire restaurant website at one point
Craigslist did not result in any leads, only Kijiji in our experience
Segment 3 - Creating Projects
This was a very important step for us as it gave us skills and portfolio work that we could then show potential clients
We created Chrome Apps, Chrome Extensions giving us a niche area of focus
Web templates and snippets have us experience with basic html and css
Not only can projects potentially generate revenue if monetized but they refine and showcase many soft and hard skills such as project management and coding style
A big thing for us is looking at projects as a potential revenue generators but with a worst case outcome of being a portfolio item that presents and refines our skills
For us we always needed to keep the the timelines on these projects very tight otherwise we would get sidetracked and lose focus
For Clicks to Riches we finished it within a week of intensive work
For Html All The Things it was also only a couple weeks
A project like Content Collector which has not been finished and is fully on the backburner suffered from loose timelines
The chrome app projects that we did directly affected getting our biggest client
Another flaw that we have when it comes to this is being hesitant to create a project:
Based on how many similar solutions to something are out there
Not knowing the audience well enough
Web News - Updates vs Stability
What do users prefer when it comes to their applications or operating systems receiving updates.
Having the same version for long periods of time with no features added or optimizations made but great stability
Having new features and optimizations every month or so but have the chance to lose stability
An example of fairly stable consistent operating systems with minimal updates would be iOS and partially android.
They usually receive one large update a year with only minor security updates in between almost like a hybrid system
Windows on the other hand will receive updates almost weekly that seem to be fairly untested and large updates also come multiple times a year and have the potential to introduce massive issues like with the last large scale fall update deleting a users documents folder
Updates to platforms can also cause problems such as Webflow or Wordpress releasing updates which makes features and plugins behave differently.
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Cross-Platform Web Development

Matt's freshly back from vacation to discuss developing for multiple platforms using various tools such as Apache Cordova, React Native, and Ionic. Allowing developers to use what they're familiar with, and still make apps for a variety of platforms.
 
Segment 1 - When to Use/Not Use Cross-Platform Development
Cross Platform Web Development allows you to build apps in Javascript that you can then use as native apps on iOS, Android and even Windows
This allows developers that are already familiar with JavaScript to great native experiences without having to learn new languages
In some cases, like with Apache Cordova a team can use one single code base with some hooks for different platforms to build their application for the web, android and ios
This allows for more agile development and smaller development teams as you don’t have resources tied up in native app development
This issues arise when needing to perform complex multimedia tasks like constantly playing audio and video
As we’ve experienced heavy media tasks can cause crashes in webviews where native code might perform just fine
Just beware when decided to go with cross platform development because you can never simulate the performance of a native application, so if buttery smooth animations and lightening quick load actions are important to you, the native way is prefered
For a small business though, like a bakery or restaurant, if they want an application that resembles their website then using a cross platform framework is ideal because it can save them money and give them the functionality they desire
Segment 2 - Cross-Platform Technologies
Apache Cordovahttps://cordova.apache.org/
Its free and open source
A plugin that allows you to create native applications out of standard website code (HTML, JS, CSS)
Provides developers the opportunity to create only one main code base for all platform
Also the main advantages of cross platform technologies are they give you the ability to create a offline mode and access native api’s such as push notifications, file systems, etc
It is necessary to create hooks that change how the application loads depending on if it’s on the web or if it's packaged as a native application
React Native and Nativescript with Vue.js
https://facebook.github.io/react-native/
https://www.nativescript.org/vue
Both of these frameworks allow for development on both Android and iOS
They use a very similar structure to their corresponding technologies with some minor differences when it comes to views, as xml is used to construct layouts
Both use JS as their scripting language
These frameworks allow developers that a familiar with React or Vue to build Native applications that perform very close to their Obj C or Java counterparts
Ionic
https://ionicframework.com/
Allows you to make web apps into desktop applications for both MacOS and Windows
Segment 3 - Progressive Web Apps
These are websites or web applications that with minor adjustments give the user native functionality straight for the browser
This doesn’t require you to have to build the application and package it for a specific platform (i.e Android, iOS), the newest browsers, safari and chrome both can auto detect if you have a progressive web app in the browser and the prompt the user of the functionality
To create a PWA there are only a few steps required:
Site has to be HTTPS secured
Page need to be responsive for mobile devices
Page needs to use Service Workers to load URLS offline
A service work is a background script that can be created and tied to your webpage but which does not have access to your DOM elements
Through the service worker you can access the native API’s of you desired system like push notifications
They can also be used to process parallel tasks as service workers run on their own threads (cores)
A Web App Manifest file which allows you to put information and image data for adding your application right to the users home screen on their device (like a real application)
The site must be able to load ‘fast’ on a 3G connection
https://www.pwabuilder.com/
Really interesting utility that allows you put in your websites URL and gives you a list of steps plus helps you create the necessary changes to make it a PWA
PWA’s I’ve used
Twitter has a really good PWA, allowing you to not have to worry about installing another application
Telegram message application has a good PWA that work on both PC and Mobile
Web News - Strict Learning
Disclaimer: We are not education experts in any way, we discussed this and wrote the notes below based on our personal experiences.
Schools seem to want you to do it right the first time, or risk losing marks, time, or electronic components in the case of our college labs
Meanwhile actual learning is supposed to be filled with mistakes and experimenting so that you can figure out what works and what doesn’t
Example: In college, we would receive a new set of components for our labs that would be conducted throughout the semester, however, we would receive a limited set of components - sometimes with spares, sometimes we’d only have one of each
You could purchase more if they were in stock, but that’s expensive for a student
These components are generally cheap electronic components - yet we were expected not to break them, or have a bunch of DOA components
This discouraged messing around with circuits and caused a lot of checking over and over to ensure your circuit was correct before hooking it up to power
When we learn new web technologies we typically end up setting it up incorrectly a few times, and have plethora of errors throughout the process as we figure out how things should be working.
This type of learning I find personally the best for understanding what you’re doing and what you can/can’t do with a piece of technology, however, this could get you docked valuable marks in school
The counter argument is that you should make all your mistakes before the test, however, in college especially, those “in-between” marks can add up to 10% or more of your overall grade depending on the class.
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Front-End Developer Roadmap

In this episode we dive into the the Front-End Developer Roadmap by Kamran Ahmed, going through all the technologies you need to learn from the basics, through the mastery phase of your career.
Segment 1 - Roadmap Discussion
We discuss the 18-20 main points of the developer roadmap
Source: https://github.com/kamranahmedse/developer-roadmap
Segment 2 - Update on HTML All The Things
Authentication for admins was added to edit the site
Pagination with infinite scroll was added
Major code refactoring
Created components out of reusable code
Got rid of redundant variable setting
Deployed database and server authentication on our Digital Ocean docker setup
Messed around with nginx configuration files
Web News - Microsoft Office vs Google Docs
Microsoft Office has a premium paid-for desktop experience in the form of the Office Suite (main programs: Word, Excel, PowerPoint) they also have a free Office Online counterpart that work at a basic level for editing, and allow people to view documents online
This plugs into OneDrive (desktop app, web app, and mobile app)
Both versions talk and work with each other
Google Docs has a similar offering, however, it is free.
Google Docs, Sheets, and Slides are the main programs within this suite.
Integrate well with Google Drive and have collaboration features
They have desktop “apps” if you’re using Chrome, as well as Chromebook apps and smartphone apps.
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon