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

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

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

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

In this episode we focus on CSS transitions and animations, what they are, why they both exist, and when you should use one or the other. 
Segment 1 - Transitions vs Animations
AdobePress Article - reference link
Transitions
Only have two states (triggered and not triggered)
Always run forward when triggered, and backwards when the trigger is removed
Common triggers are: hover, link, active, visited, focus, checked, disabled
Common use case: hover over a button and have the box shadow get darker as long as the cursor is hovering over it
Animations
More control than transitions
Can start, stop, pause, run forwards, run backwards
Complex animations are possible by manipulating various properties within keyframes
May be more difficult to manipulate with Javascript
Use animations if you need the complexity
Use transitions if you have a simple affect that only needs two states (triggered, not triggered)
Segment 2 - How Transitions and Animations Improve UX
Build your site with animations in mind so they don't look tacked on after the fact
Don't be too flashy - your animations need to have purpose, shouldn't get in the way of the user experience
Don't overwhelm the user with animations - may cause performance issues, can distract the user
Keep animations consistent with the associated action - swipes with sliding animation, taps w/ pebble drop in water animation
Segment 3 - Performance
Too many transitions or complex animations can cause serious performance issues
The browser runs animations better over time (device starts to dedicate resources to the tab, cache builds up) so tests need to be done on a fresh incognito (or equivalent) window to ensure performance is good for first time users
Test on older devices that may have slow hardware, or may have older browsers due to lack of support for newer updates
Performance "hacks" - translate3d, translatez
More modern method "will-change"
Check out José Rosário’s page on Medium article: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 for an in-depth breakdown
Segment 4 - Animation Frameworks
Three.js
Dependant on WebGL
Full 3D render capable
Is complex to start with
has been around now for 8+ years so a little bit bloated yet still supported
Anime.js
Fastest/best performance large scale animation library
Extremely lightweight
Could replace Three.js due to simplicity and modern architecture
ScrollReveal.js
Specific library for animation while scrolling
Using specific libraries for certain tasks maskes code more lightweight
Usually easier to implement then a larger more customizable library
Web News - Inconsistencies and Separation
Mobile versions (app or mobile site) vs Desktop versions (apps or site)
Separation of apps (multiple apps - same service/function)
Inconsistent development features in an ecosystem
 
Patreon Supporters
Grigory Rechkin
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
New! - Reddit

In this episode we discuss the tools that help us get the job done, with a specific focus on the hardware. Things like the PCs we use, the headphones we listen to, and some stories behind our hardware decisions.
Segment 1 - Desktop Setups
Matt's Desktop Setup
Custom PC
FX-8350 (8 core AMD processor)
16GB RAM DDR3
2x XFX 7970 (GPUs)
Windows 10
CM Storm Sentinel Advance 3 Mouse
Logitech G15 Keyboard
Blue Snowball
SteelSeries Flux
Bose Companion 2 Series II Multimedia Speaker System
Mike's Desktop Setup
Custom PC
Ryzen 1800x
16GB RAM DDR4
Samsung 860 512GB SSD
Vega 64 8GB GPU
Windows 10
Corsair Strafe RGB Keyboard
Logitech G502 Proteus Spectrum Mouse
Sennheiser HD 598 SR Open-Back Headphones
Blue Snowball
Server
Old used PC running Windows 7 Ultimate
NAS D-Link DNS-323 with 2x 3tb drives running raid 1
Segment 2 - Mobile Setups
Matt's Mobile Setup
Lenovo Y500 laptop
Samsung Galaxy Tab Pro S w/ pen
Microsoft Sculpt Comfort Mouse
Jaybird X3
Sony MDR-ZX220BT
SteelSeries Vault-Tec Mouse
Samsung Galaxy S8+
BlackBerry KEY2 (silver, 64GB)
ASUS Zenwatch 2
Mike's Mobile Setup
ASUS Zenphone 5Z
ASUS Zenbook 330ua
Microsoft Sculpt Comfort Mouse
Bluedio F2 Noise Cancelling Bluetooth Headphones
Bagsmart Convertible Laptop Backpack
Jakery 10000mAh quick charge battery
Cable clip organizers
Xiaomi 5000mAh
Segment 3 - Other Setups
Matt's Test Devices
iPhone 5
iPad Mini (original)
Mike's Test Devices
Lenovo Tab 10
iPad Air 2
Nexus 6P
Nexus 7 (2013)
Tablet mount holder (attached to desk)
Smart Home
Google Home Mini
Echo Dot (2nd Generation)
TP Link Smart Switch
Web News - Desktop PC vs Laptop w/ Dock
Desktop Computers
Pros:
Always more powerful
Easier to upgrade
Customizable features
Cons: 
Might be too much time investment for building
Can be finicky and tough to troubleshoot
Laptop with Dock
Pros:
Versatile 
Simple buy and use process
Easy warranty handling if you go with a good company
Is upgradeable now through thunderbolt 3 interface
Cons:
Usually more expensive for similar performance (in comparison to desktop)
Some stuff is not upgradable (soldered to board)
Once warranty runs out repairs can be expensive or impossible
Become a Patreon!
Our Patreon Page - click here
Buy Some Gear!
Note: These are Amazon affiliate links, we get a kickback from you using them, they are for amazon.com. Some items may be variants of those mentioned in the episode, ensure you check the product page before purchasing.
Thank you for using the links below!
Mice:
CM Storm Sentinel Advance 3
Logitech G502 Proteus Spectrum
Microsoft Sculpt Comfort Mouse
SteelSeries Vault-Tec Mouse
Audio (headphones, speakers, microphones):
SteelSeries Flux
Bose Companion 2 Series II Multimedia Speaker System
Sennheiser HD 598 Open-Back Headphones
Blue Snowball
Jaybird X3
Sony MDR-ZX220BT
Bluedio F2 Noise Cancelling Bluetooth Headphones
Computer Components
Ryzen 1800x
Samsung 860 512GB SSD
Vega 64 8GB Graphics
Keyboards
Corsair Strafe RGB
Tablets
Samsung Galaxy Tab Pro S
Lenovo Tab 10
iPad Air 2
Smartphones
Samsung Galaxy S8+
BlackBerry KEY2 (silver, 64GB)
ASUS Zenphone 5Z
Smartwatch
Fossil Gen 3 Explorist
Miscellaneous
Bagsmart Convertible Laptop Backpack
Cable Clip Organizers
Tablet Mount Holder (attachable to desk)
Echo Dot (2nd Generation)
TP Link Smart Plug
You can find us on...
Facebook | Twitter | Instagram | RSS
Medium | YouTube | GitHub | Spotify

In this first mini podcast episode, we record one of the first meetings for planning out the HTML All The Things website. The meeting was unscripted, microphones on and that's it (intro and outro are exceptions). This should give you a good idea what a typical meeting is like for us, specifically how we collaborate on projects with our different talents.
You can find us on...
Facebook | Twitter | Instagram | RSS
Medium | YouTube | GitHub | Spotify

Learning new technologies can be a difficult thing to start, let alone master. In this episode we discuss how we started with new technologies and how to expand those introductions into mastery with a given framework, plugin, or other product.
Segment 1 - Getting Started
Identify Objectives
Ensure that your selected technology cover as many of your objectives as possible
Sometimes your objective is just to learn a given technology - with no specific project objective(s)
Do the "My First App" example
Most documentation have users go through a first introductory app to get them started quickly
Use this first app as a way to get your foot in the door - use it as a foundation for your project, or as a learning platform
Documentation Open
Don't shy away from documentation - I always have it open!
As you look up each and every piece of a given technology you're slowly learning its ins and outs
Eventually you won't need the documentation to complete a given task
Easiest Start
 There are typically a lot of different ways to get started with a given technology (ie install via npm, use via CDN, etc.)
Use the easiest starting point - probably the one that compliments your existing development environment - so that you don't get caught in a rut trying to learn how install something
Find the fastest route to learning
Segment 2 - When to Learn New Technologies
Personal vs Client Work Projects
You must find the balance between learning something new, or using something familiar because you're working on your client's time
Let the client know what you're doing or planning, they may want you to work on learning a new technology - maybe they want a new feature
Do extensive research into a given technology to prevent issues down the line, costing you time and your client needless money
Performance
Sometimes performance becomes important when applications get large, make sure you use the technology that best compliments your objective and gives the best performance
For example: NodeJS is good at concurrent connections
Popularity
Popular apps typically have a job market
Learning React or Angular, as of writing this, would put you in a good position for finding a job
You can also participate in an up and coming technology to get into a growing community
Need
Sometimes you have no choice but to learn a new library, framework, language, etc.
Segment 3 - Get Up and Running Quickly
Researching
Google your issues
Check documentation
At this stage ensure that the tech can cover all your needs
Watching/Reaching Tutorials
Before commiting, watch some YouTube tutorials to see if you like any of them
If you continue working with the technology you now have a reference/video series to learn more
Documentation
Great documentation can make learning a lot easier
Bad documentation does the exact opposite, makes it harder
Community
Take a look at the community and try to avoid toxicity
Check various communities (ie Reddit, Discord, Stack Overflow, etc.)
Your own "My First App"
Choose a simple function that might be a single piece of a project
Gives you a good view on learning and implementing
Web News - Cell Phone Longevity & Endurance
Battery life on cell phones is typically not great, after several product generations of fighting for better battery life (specifically more capacity), it seems that consumers have given up to a degree
Android seems have issues managing background tasks
Apps dont' close completely sometimes
Sometimes they close too early from the "recent apps" 
Manufacturers try and combat this by having various battery management software added to their Android versions
More efficient processors like those in the Snapdragon 600 series offer more efficient battery usage, but don't offer flagship speed like those in the 800 series
Flagship phones have the best features and specs, but typically lack in battery life
Android phones seem to drop in battery performance when you're on the go - GPS turns on a lot even when not navigating
You can find us on...
Facebook | Twitter | Instagram | RSS
Medium | YouTube | GitHub | Spotify

In this episode we dive into the world of troubleshooting and debugging exploring different methodologies and tools that should help you take out any pesky bugs you might come across.
Segment 1 - Troubleshooting Methodologies
Process of Elimination
Slowly eliminate parts of your code that might be the culprit
Narrow down the culprit then perform the process of elimination on the section that is causing the issue
Don't be afraid to Google/research
Researching is nothing to be ashamed of, it does not mean you don't know what you're doing
As you look things up you'll be enhancing your researching skills, which is helpful when treading into new technologies
Learn the Source
Don't just bandaid the issue
Find out the who, what, where, when, why, and how
Apply an actual fix to the issue wherever possible and take measure to prevent it from happening again
Segment 2 - Debugging in the Browser
UI/UX Debugging
Using console window on Google Chrome
Inspecting elements to determine proper positioning and check if something is overlapping
Primarily use: Elements View, Styles View, and Console
Using console.log to check how a program is running
Advanced Console Debugging
JS Breakpoints to check on parts of programs
Better than console logs in some more advanced cases
Can check all local variables at a select breakpoint
Postman for DB Debugging
Segment 3 - Application/Storytime
Troubleshooting Cordova Apps on Android
Longevity testing
Wireless adb debugging
Passing console logs through from webview to Android through an interface
Crashing issues
Media playback issues
VPN Gateway Failure (some details changed for security procedure
IT support issue
Establishing a tunnel worked but routing internally didn't work
Ended up being an NDP issue
Most advanced troubleshooting Matt has possibly done (most involved - over 2 weeks of work)
Web News - Experience Doesn't Trump Research
Don't shy away from research 
We typically have the documentation of a given framework or library that we are using, pulled up on a tab at all times
Impossible to commit everything to memory
Getting muscle memory, intuition, and research skills down pat makes you a proper "technician" for software engineering and IT work
You can find us on...
Facebook | Twitter | Instagram | Medium | YouTube | GitHub | Spotify
 

In this episode we dive deep on how to tackle projects, whether they be something for the company, or something for a client. We take a look at the tools we use to organize it all, and how we stay on top of working in a small team.
Segment 1 - Idea Filtering
Brainstorming and how to track it all
Jot down informal notes, even if ideas are obviously bad
Sleep on your ideas - don't develop them too much too quickly or you'll get ahead of yourself
Sometimes you get a "packed idea" that needs attention immediately
Bouncing ideas off of technical and non-technical people
Live prototyping of easy to try ideas
Having meetings to filter the good from the bad
Grilling each others ideas - will the product make it in the market?
Segment 2 - Planning With and Using Tools
Using a variety of tools for communication and organization
Examples: Slack, Twist, Monday.com, Asana, Git (gitlab, github, bitbucket), email/contacts/calendar, trello, etc.
Our procedure on handling projects that we do for ourselves (for Digital Dynasty Design)
Day to day tools including things like: Google Hangouts, Git, OneDrive, Trello, Asana
Segment 3 - Client Work vs Personal Projects
Matt works on small business client work as well as any projects that Digital Dyansty Design has running
Mike focuses on client works and assists with Digital Dynasty Design projects whenver he can
We treat client projecs differently than our own projects
Get client objectives written down crystal clear
Cost analysis
Deadlines
Design suggestions and comparative materials
Daily Meetings
Dealing with client and personal schedule needs
Segment 4 - Completion and Accountability
Accountability is difficult when you're your own boss
Need dicipline and hard deadlines that you need to keep
Sometimes deadlines need to be changed due to project changes or other issues, but don't make a habit of it
Fill out a log book to keep track of the work you do on a daily basis
Web News - Stress When Deploying to Production 
Even senior developers get stress when they are pushing to production
Make backups, make an easy recovery path if possible
Test everything you can to prepare
You can find us on...
Facebook | Twitter | Instagram | Medium | YouTube | GitHub | Spotify

In this episode we discuss our journey from static and CMS driven sites to reactive frameworks, specifically Vue.js.
Segment 1 - Static to Reactive
Started by creating simple static sites - no need for reactive elements
When dynamic/reactive content was needed we would use document.createElement
Segment 2 - CMS to Reactive
We would use Wordpress, CouchCMS, or Webflow for any content management that our users would need
Eventually elements became too varied and a dynamic solution was needed - reactive frameworks
The "Hub" presented a unique issue of not having a standard layout while still being "posts" (the episode clarifies this point)
Segment 3 - How We Plan to Use Vue.js
Quick start guide for people to get up and running
HexDash a collaborative project that people can contribute to
Vue.js components - great for reusability
Vue.js will be used in the making of the HTML All The Things website
Segment 4 - Matt's Experience Getting Quickly Started with Vue.js
Moving over from a typical experience using vanilla HTML/CSS/JS, SASS, Bootstrap, Webflow, or CouchCMS
Prior experience with CLI and NPM
First time using Visual Studio Code
Web News - Trendy & Loud vs Silence
NodeJS vs PHP
Big frameworks vs old ones
WordPress power 31% of the internet (Source: https://wordpress.com)
WordPress vs Webflow
Workflow conflicts
Are freelancers using bleeding edge technology, while the rest of the industry (specifically big enterprise) still using "old" tech?