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

By Matt Lawrence and Mike KaranNews Technology Education How To Tech News

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

October 24, 2018Developer to CTO w/ Azhar Zuberi
We sit down with Azhar Zuberi to discuss his unique professional journey from developer to CTO of a startup.
Segment 1 - Introduce Yourself
Segment 2 - A little backstory
What would you say was the most important topic or lesson you learned in your schooling when it comes to being a developer?
How important was your first job as a developer in defining your coding style/knowledge base?
When first starting out what were the ‘popular’ technologies that you learned (i.e. angular, bootstrap, wordpress etc)
Segment 3 - Our connection
What was the reason you decided to choose us (Digital Dynasty Design) when we first started working together?
What is your workflow/process for working with and hiring off site/outsourced developers?
What are the benefits of having a small development team versus increasing funding and hiring a full staff?
What are some of the biggest challenges when have a off site/outsourced development team?
Our current development process has us using a very base Jquery, Bootstrap, JS, HTML and CSS stack. What were some of the reasons behind this vs using a more robust framework i.e. angular or react?
Segment 4 - Running a company
What are some additional responsibilities that you were not expecting when transitioning to being a CTO
What do you miss most about being just a contract developer
As CTO how important was it to have all those technical skills and years of work in a company and as a contractor
How did you learn the business side of your role as CTO and what is the most challenging part for you?
Web News - Incomplete Ecosystems
What is an ecosystem?
A collection of software - typically from the same manufacturer - that all compliment each other
A primary example would be iCloud storing all your contacts and other data from your iPhone for use on your Mac, or on a new iPhone if you need to sync them up
Ecosystems have been a key part of people’s workflow for the past few years
They’re often a key feature that people look for when they purchasing a device
Apple’s ecosystem stands out in this particular example
There are a lot of ecosystems out there including: productivity, smarthome, etc.
Examples of incomplete ecosystems (rough notes/points of reference):
Samsung has software primarily on the phone, such as Notes, Bixby, Email, etc. but has no clients for PC use, other than things that mirror or use the phone (ie SideSync)
Microsoft’s is more focused on productivity (email, contacts, calendar, Cortana), but has no focus on smart home functionality (ie hardware). Windows Phone hardware is basically dead and therefore there is no mobile experience for Windows, with the exception of Android apps (which is a decent solution - but not as integrated as first party)
Android has no full desktop experience (A Pixelbook doesn’t have all the pro software that Windows has, Google Assistant is on Google hardware, but not on Windows 10)
You can find Azhar via...
Contentlinq Website - www.contentlinq.com
Contact Email - [email protected]
LinkedIn - Profile Page
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
Reddit
1 hr 53 min
October 24, 2018 Developer to CTO w/ Azhar Zuberi
We sit down with Azhar Zuberi to discuss his unique professional journey from developer to CTO of a startup.
Segment 1 - Introduce Yourself
Segment 2 - A little backstory
What would you say was the most important topic or lesson you learned in your schooling when it comes to being a developer?
How important was your first job as a developer in defining your coding style/knowledge base?
When first starting out what were the ‘popular’ technologies that you learned (i.e. angular, bootstrap, wordpress etc)
Segment 3 - Our connection
What was the reason you decided to choose us (Digital Dynasty Design) when we first started working together?
What is your workflow/process for working with and hiring off site/outsourced developers?
What are the benefits of having a small development team versus increasing funding and hiring a full staff?
What are some of the biggest challenges when have a off site/outsourced development team?
Our current development process has us using a very base Jquery, Bootstrap, JS, HTML and CSS stack. What were some of the reasons behind this vs using a more robust framework i.e. angular or react?
Segment 4 - Running a company
What are some additional responsibilities that you were not expecting when transitioning to being a CTO
What do you miss most about being just a contract developer
As CTO how important was it to have all those technical skills and years of work in a company and as a contractor
How did you learn the business side of your role as CTO and what is the most challenging part for you?
Web News - Incomplete Ecosystems
What is an ecosystem?A collection of software - typically from the same manufacturer - that all compliment each other
A primary example would be iCloud storing all your contacts and other data from your iPhone for use on your Mac, or on a new iPhone if you need to sync them up
Ecosystems have been a key part of people’s workflow for the past few years
They’re often a key feature that people look for when they purchasing a device
Apple’s ecosystem stands out in this particular example
There are a lot of ecosystems out there including: productivity, smarthome, etc.
Examples of incomplete ecosystems (rough notes/points of reference):
Samsung has software primarily on the phone, such as Notes, Bixby, Email, etc. but has no clients for PC use, other than things that mirror or use the phone (ie SideSync)
Microsoft’s is more focused on productivity (email, contacts, calendar, Cortana), but has no focus on smart home functionality (ie hardware). Windows Phone hardware is basically dead and therefore there is no mobile experience for Windows, with the exception of Android apps (which is a decent solution - but not as integrated as first party)
Android has no full desktop experience (A Pixelbook doesn’t have all the pro software that Windows has, Google Assistant is on Google hardware, but not on Windows 10)
You can find Azhar via...
Contentlinq Website - www.contentlinq.com
Contact Email - [email protected]
LinkedIn - Profile Page
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
Reddit
1 hr 53 min
October 17, 2018Communicating with Customers
Communicating with your customers is a difficult, yet necessary part of doing business. In this episode we discuss best practices when dealing with various types of customers.
Segment 1 - Establishing Channels
Establishing which channels you're willing to talk on is critical
Steer new customers to the proper channels that you check regularly (ie email, Twitter DM, phone call, etc.) so that you don't miss out on potential business
Make sure that you check your unused channels on occasion (maybe weekly) in order to ensure nobody has reached out to you on those channels mistakenly and steer them towards the channels that you do use
Steering customers to the correct channels is as easy as stating which communication method you prefer in meetings, in your social media bio/profile, or starting the conversation on your method of choice (if you're starting the conversation)
Segment 2 - Different Types of Communicators
As you work with clients you will start to understand how they work, but more importantly how they communicate and what they generally expect
Some clients are entirely hands-off, while others want to be updated whenever something small is done
There’s no clear cut way to determine which type of communicator your client is, other than working with them and slowly learning their expectations, just as you would with a friend, we all contact different friends in different ways depending on how we’ve communicated with them in the past
Some people are more face-to-face oriented and want in-person meeting more than emails or messaging, while others just want quick messages, emails
It’s important that you don’t necessarily go way out of the way for people (ie doing in-person meetings for something that a single email would deal with)
Segment 3 - Dos and Don'ts
Dos
Establish a timeframe for a customer to contact you. Can be different between customers. Also take into account time zones and try to use them to your benefit to split up your day between customers.
Use that timeframe to do callbacks as well if you miss a call
Being prompt and consistent in your communications
Be professional and don’t use needless slang, but keep in mind that as your relationship with the customer builds you can be more friendly and approachable
Take responsibility for missed communication
If you forget to answer an email and your customer reminds you make sure to apologize and try not to make excuses
Don’ts
Don’t neglect answering just because you feel the customer won’t like what you have to say. Be upfront and honest
Don’t answer customers emails right when they come in everytime, pick a time or a few set times a day when you answer emails. Obviously use discretion as some situations can be urgent
Don’t put yourself in situations where you will be overwhelmed with communications and all your accounts will suffer
Web News - Social Overload
Social media is the vehicle that drives traffic to most online projects, with so many social media networks out there it can easily become a project just to keep up with posting new material, let alone making said material
Phones manufacturers and other apps are now tracking usage on various apps, letting people know when they’re using their phone a lot - watching too much YouTube for example
Social media, and especially our mobile devices have in a way made us “addicts” to social media and other apps since we can now access them everywhere
Work on the parts of social media that you want to work out, make sure you put work into your craft, but you can’t excel at everything
IGTV content idea
Making content out of a single piece of content (ie get an article, photo for instagram, and an opinion tweet out of a single design idea)
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
Reddit
1 hr 12 min
October 17, 2018 Communicating with Customers
Communicating with your customers is a difficult, yet necessary part of doing business. In this episode we discuss best practices when dealing with various types of customers.
Segment 1 - Establishing Channels
Establishing which channels you're willing to talk on is critical
Steer new customers to the proper channels that you check regularly (ie email, Twitter DM, phone call, etc.) so that you don't miss out on potential business
Make sure that you check your unused channels on occasion (maybe weekly) in order to ensure nobody has reached out to you on those channels mistakenly and steer them towards the channels that you do use
Steering customers to the correct channels is as easy as stating which communication method you prefer in meetings, in your social media bio/profile, or starting the conversation on your method of choice (if you're starting the conversation)
Segment 2 - Different Types of Communicators
As you work with clients you will start to understand how they work, but more importantly how they communicate and what they generally expect
Some clients are entirely hands-off, while others want to be updated whenever something small is done
There’s no clear cut way to determine which type of communicator your client is, other than working with them and slowly learning their expectations, just as you would with a friend, we all contact different friends in different ways depending on how we’ve communicated with them in the past
Some people are more face-to-face oriented and want in-person meeting more than emails or messaging, while others just want quick messages, emails
It’s important that you don’t necessarily go way out of the way for people (ie doing in-person meetings for something that a single email would deal with)
Segment 3 - Dos and Don'ts
Dos
Establish a timeframe for a customer to contact you. Can be different between customers. Also take into account time zones and try to use them to your benefit to split up your day between customers.
Use that timeframe to do callbacks as well if you miss a call
Being prompt and consistent in your communications
Be professional and don’t use needless slang, but keep in mind that as your relationship with the customer builds you can be more friendly and approachable
Take responsibility for missed communication
If you forget to answer an email and your customer reminds you make sure to apologize and try not to make excuses
Don’ts
Don’t neglect answering just because you feel the customer won’t like what you have to say. Be upfront and honest
Don’t answer customers emails right when they come in everytime, pick a time or a few set times a day when you answer emails. Obviously use discretion as some situations can be urgent
Don’t put yourself in situations where you will be overwhelmed with communications and all your accounts will suffer
Web News - Social Overload
Social media is the vehicle that drives traffic to most online projects, with so many social media networks out there it can easily become a project just to keep up with posting new material, let alone making said material
Phones manufacturers and other apps are now tracking usage on various apps, letting people know when they’re using their phone a lot - watching too much YouTube for example
Social media, and especially our mobile devices have in a way made us “addicts” to social media and other apps since we can now access them everywhere
Work on the parts of social media that you want to work out, make sure you put work into your craft, but you can’t excel at everything
IGTV content idea
Making content out of a single piece of content (ie get an article, photo for instagram, and an opinion tweet out of a single design idea)
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
Reddit
1 hr 12 min
October 10, 2018UX Considerations
We dive into the world of UX in this episode, analyzing some basic tactics you can use to ensure that your users have a great experience on your site or app!
UX Rules
Source: https://theblog.adobe.com/15-rules-every-ux-designer-know/
UX is not (only) UI
User Interface is a part of User Experience
Are glitches part of UX?
Know your audience
User research is a natural first step in the design process
Designing a site for a specific industry will very much influence your decisions.
You are not the user
Testing with real users is an essential part of the design process
Many examples where we thought something was simple but a small test group immediately got confused
Adapt design for short attention spans
Don’t overwhelm users with too much information
Short blocks of text because people don’t read
Keep interactions quick, don’t make people fill out massive forms
The UX process isn’t set in stone
Adapt your design process for the product you design
Designing a small one page site for a small business is drastically different than a ecommerce website
Prototype before you build a real product
The design phase for digital products should include a prototyping stage
We always make at least a wireframe to show the interactions and pages to clients so they know at a high level what the experience will be
For larger clients a full clickthrough mockup can be made before any development begins to iron out all misunderstandings and conflicts
Use real content when designing
Avoid Lorem Ipsum and dummy placeholders
Our customers have been confused before asking what is this “gibberish” in reference to lorem ipsum
Also confused as to why the pictures are different then what he had in mind when we use generic stock photos
Keep things simple and consistent
The hallmark of a great user interface is simplicity and consistency
For example I find it confusing when a one page scroll website has a navigation that then opens up a different page. Don’t combine the two.
Recognition over recall
Showing users elements they can recognize improves usability versus needing to recall items from scratch
People know what buttons look like and usually know to click them, same with links and form inputs. Don’t try to reinvent the wheel
Make design usable and accessible
Design for a diverse set of users that will interact with your products
Keep in mind that some users are color blind or even blind so make sure to follow the accessibility guidelines
Don’t try to solve a problem yourself
Design is team sport — don’t work in isolation
Don’t try to solve everything at once
Design is an iterative process
Preventing errors is better than fixing them
Whenever possible, design products to keep potential errors to a minimum
Offer informative feedback
An app or website should always keep users informed about what is going on
Transitions are a great way to show what is happening without holding the users hand
Avoid dramatic redesigns
Remember Weber’s Law of Just Noticeable Differences
Example digg redesign killed the site
Web News - Microsoft
Latest windows update has a chance to delete your user files without a chance at recovery
Randomly corrupted hard drives
Unskippable updates
Windows store
Troubleshooting steps are ridiculous
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
New! - Reddit
1 hr 52 min
October 10, 2018 UX Considerations
We dive into the world of UX in this episode, analyzing some basic tactics you can use to ensure that your users have a great experience on your site or app!
UX Rules
Source: https://theblog.adobe.com/15-rules-every-ux-designer-know/
UX is not (only) UI
User Interface is a part of User Experience
Are glitches part of UX?
Know your audience
User research is a natural first step in the design process
Designing a site for a specific industry will very much influence your decisions.
You are not the user
Testing with real users is an essential part of the design process
Many examples where we thought something was simple but a small test group immediately got confused
Adapt design for short attention spans
Don’t overwhelm users with too much information
Short blocks of text because people don’t read
Keep interactions quick, don’t make people fill out massive forms
The UX process isn’t set in stone
Adapt your design process for the product you design
Designing a small one page site for a small business is drastically different than a ecommerce website
Prototype before you build a real product
The design phase for digital products should include a prototyping stage
We always make at least a wireframe to show the interactions and pages to clients so they know at a high level what the experience will be
For larger clients a full clickthrough mockup can be made before any development begins to iron out all misunderstandings and conflicts
Use real content when designing
Avoid Lorem Ipsum and dummy placeholders
Our customers have been confused before asking what is this “gibberish” in reference to lorem ipsum
Also confused as to why the pictures are different then what he had in mind when we use generic stock photos
Keep things simple and consistent
The hallmark of a great user interface is simplicity and consistency
For example I find it confusing when a one page scroll website has a navigation that then opens up a different page. Don’t combine the two.
Recognition over recall
Showing users elements they can recognize improves usability versus needing to recall items from scratch
People know what buttons look like and usually know to click them, same with links and form inputs. Don’t try to reinvent the wheel
Make design usable and accessible
Design for a diverse set of users that will interact with your products
Keep in mind that some users are color blind or even blind so make sure to follow the accessibility guidelines
Don’t try to solve a problem yourself
Design is team sport — don’t work in isolation
Don’t try to solve everything at once
Design is an iterative process
Preventing errors is better than fixing them
Whenever possible, design products to keep potential errors to a minimum
Offer informative feedback
An app or website should always keep users informed about what is going on
Transitions are a great way to show what is happening without holding the users hand
Avoid dramatic redesigns
Remember Weber’s Law of Just Noticeable Differences
Example digg redesign killed the site
Web News - Microsoft
Latest windows update has a chance to delete your user files without a chance at recovery
Randomly corrupted hard drives
Unskippable updates
Windows store
Troubleshooting steps are ridiculous
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
New! - Reddit
1 hr 52 min
October 03, 2018Bootcamp to Web Developer w/ David Lindahl
In this episode we sit down with David Lindahl, a friend and colleague that recently pivoted his career from a the financial sector to web development.
Segment 1 - Introduce Yourself
Introductions and pathway to today
Segment 2 - Bootcamp
You mentioned that Code Fellows, which is where you took your classes, prefers to call it more of a coding school, or coding academy. What differences are there between traditional boot camps and a course at Code Fellows?
In general how was the experience?
Would you recommend the coding academy route for developers starting in the industry in 2018?
Would you say the connections you made during your time at Code Fellows has helped you finding work or been beneficial in any way so far?
What are some of the frameworks you learned?
What were some of the example projects you made?
Segment 3 - First month on the job
How many interviews did you end up getting, and how many positions did you apply for?
How did the interview process play out?
What did you end up doing in your first week?
Are you applying the skills you learned in your schooling to your daily work, if yes then how?
How challenging has it been adapting to your new job, this being your first web development one?
Segment 4 - Comparisons of Class Training vs Self-Taught
We worked together on the very first steps of The Appex, where you were fresh out of the code academy, whereas I more or less self-taught frontend development to myself.
What do you think about class training vs the self-taught mentality?
Pros and Cons?
How much have you had to self-teach yourself after working on projects outside of your schooling?
I think you mentioned learning flexbox as an example?
You can find David via...
Twitter & Instagram
Rainier Watch
Made with Spark
The Appex
Lindahl Studios

You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
New! - Reddit
1 hr 37 min
October 03, 2018 Bootcamp to Web Developer w/ David Lindahl
In this episode we sit down with David Lindahl, a friend and colleague that recently pivoted his career from a the financial sector to web development.
Segment 1 - Introduce Yourself
Introductions and pathway to today
Segment 2 - Bootcamp
You mentioned that Code Fellows, which is where you took your classes, prefers to call it more of a coding school, or coding academy. What differences are there between traditional boot camps and a course at Code Fellows?
In general how was the experience?
Would you recommend the coding academy route for developers starting in the industry in 2018?
Would you say the connections you made during your time at Code Fellows has helped you finding work or been beneficial in any way so far?
What are some of the frameworks you learned?
What were some of the example projects you made?
Segment 3 - First month on the job
How many interviews did you end up getting, and how many positions did you apply for?
How did the interview process play out?
What did you end up doing in your first week?
Are you applying the skills you learned in your schooling to your daily work, if yes then how?
How challenging has it been adapting to your new job, this being your first web development one?
Segment 4 - Comparisons of Class Training vs Self-Taught
We worked together on the very first steps of The Appex, where you were fresh out of the code academy, whereas I more or less self-taught frontend development to myself.
What do you think about class training vs the self-taught mentality?Pros and Cons?
How much have you had to self-teach yourself after working on projects outside of your schooling?I think you mentioned learning flexbox as an example?

You can find David via...
Twitter & Instagram
Rainier Watch
Made with Spark
The Appex
Lindahl Studios

You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub
New! - Reddit
1 hr 37 min
September 26, 2018Box, Flexbox, and Grid
We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.
Segment 1 - Layout Models
StackChief reference article
Box Model
Elements comprise of: content, padding, border, margin
Dimensions like height and width
Floats and clearfix
CSS Box Model - W3Schools article
Flexbox
Evolution of the box model
Comprises of a container element called the flex container, which "control" their child elements called flex items
Flexbox is fantastic for responsive layouts
1 dimensional layouts
CSS Grid
New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
2 dimensional layouts
Can customize every property of the grid
# of rows and columns
size of row in various metrics (px, %, vh, vw, auto)
spacing between rows and columns
Very clean code - no need for row and column containers
Segment 2 - Box vs Flexbox vs Grid
Responsivity
Box, flexbox, and grid can all be used to make responsive layouts
Many of our production websites are still in box layout, they still work without issue on modern browsers and devices
Layouts
Basic sites can use any of the layout models
Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
Full site structures are easier to make with CSS grid due to two dimensional column and row functionality
Easy of Use
Matt believes the box model is easiest to learn - especially when learning how web pages flow
Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging
Links
Box Model - https://caniuse.com/#feat=inline-block
Flexbox - https://caniuse.com/#search=flex
Web News - 'Unobtrusive Ads'
Ad strategies - which are you ok with?
Sponsored posts
Banner ads (Google Ads, etc.)
Full page timed ads
Sidebar ads
Chumbox (From around the web, recommended for you)
What are some ad strategies that annoy you?
Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)
Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)
Support Us
TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)
Become a Patreon Supporter
You can find us on...
Facebook | Twitter | Instagram |
RSS | Spotify | Reddit
Medium | YouTube | GitHub
1 hr 31 min
September 26, 2018 Box, Flexbox, and Grid
We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.
Segment 1 - Layout Models
StackChief reference article
Box Model
Elements comprise of: content, padding, border, margin
Dimensions like height and width
Floats and clearfix
CSS Box Model - W3Schools article
Flexbox
Evolution of the box model
Comprises of a container element called the flex container, which "control" their child elements called flex items
Flexbox is fantastic for responsive layouts
1 dimensional layouts
CSS Grid
New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
2 dimensional layouts
Can customize every property of the grid
# of rows and columns
size of row in various metrics (px, %, vh, vw, auto)
spacing between rows and columns
Very clean code - no need for row and column containers
Segment 2 - Box vs Flexbox vs Grid
Responsivity
Box, flexbox, and grid can all be used to make responsive layouts
Many of our production websites are still in box layout, they still work without issue on modern browsers and devices
Layouts
Basic sites can use any of the layout models
Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
Full site structures are easier to make with CSS grid due to two dimensional column and row functionality
Easy of Use
Matt believes the box model is easiest to learn - especially when learning how web pages flow
Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging
Links
Box Model - https://caniuse.com/#feat=inline-block
Flexbox - https://caniuse.com/#search=flex
Web News - 'Unobtrusive Ads'
Ad strategies - which are you ok with?
Sponsored posts
Banner ads (Google Ads, etc.)
Full page timed ads
Sidebar ads
Chumbox (From around the web, recommended for you)
What are some ad strategies that annoy you?
Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)
Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)
Support Us
TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)
Become a Patreon Supporter
You can find us on...
Facebook | Twitter | Instagram |
RSS | Spotify | Reddit
Medium | YouTube | GitHub
1 hr 31 min