The adventures of Matt Lawrence and Mike Karan through the world of web development, web design, and small business management. As web development agency owners for the better part of a decade, they’ve worked with all sorts of technologies, through the rise of responsive web design, the revolution of serverless computing, and the popularity gain of many no-code tools for small business owners. They commonly discuss foundational web development technologies like HTML, CSS, and JavaScript - including popular frameworks and tools such as Tailwind CSS, Svelte, WordPress, Vue, and more.
Episodes
Wednesday Oct 10, 2018
Wednesday Oct 10, 2018
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
New! - Reddit
Wednesday Oct 03, 2018
Wednesday Oct 03, 2018
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?
- What do you think about class training vs the self-taught mentality?
You can find David via...
You can find us on...
Facebook | Twitter | Instagram
New! - Reddit
Wednesday Sep 26, 2018
Wednesday Sep 26, 2018
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
- Matt believes the box model is easiest to learn - especially when learning how web pages flow
- 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...
Wednesday Sep 19, 2018
Wednesday Sep 19, 2018
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
New! - Reddit
Wednesday Sep 12, 2018
Wednesday Sep 12, 2018
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
- Custom PC
- 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
- Custom PC
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
- Pros:
- 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
- Pros:
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:
- Audio (headphones, speakers, microphones):
- Computer Components
- Keyboards
- Tablets
- Smartphones
- Smartwatch
- Miscellaneous
You can find us on...
Friday Sep 07, 2018
Friday Sep 07, 2018
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...
Wednesday Sep 05, 2018
Wednesday Sep 05, 2018
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...
Wednesday Aug 29, 2018
Wednesday Aug 29, 2018
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
- JS Breakpoints to check on parts of programs
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