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 Nov 14, 2018
Wednesday Nov 14, 2018
We've been hard at work, learning a new development stack on which the HTML All The Things website is built.
Note: Matt is on vacation for 1.5 weeks, this episode has been pre-recorded before his departure, some things that were discussed may have a different status (hopefully complete) upon the release of the episode.
Segment 1 - VueJS Frontend Development
- Due to the nature of VueJS, we spun up an entirely new development environment
- Switching from Notepad++ to Visual Studio Code w/ the Vetur plugin
- Some of the most valuable/used parts of VueJS that we used include:
- Components - are like small pieces that makeup the website, placed in separate files and used over and over again, can be imported into each other (component inside a component)
- Scoped Stylesheets - limit the styles you're applying to the file you're writing them in, we limited many styles to specific components, allows you to use the same classnames and ids with completely different properties
- Dynamic data was the most challenging part of using VueJS, not from a technical perspective, but more so from a procedural standpoint - not used to having them as apart of my workflow
- Vuex, Vue Router, Axios
- Vuex is a state management solution in vue that allows all components to share data between each other
- We use it for storing our loggedIn status for our editing content
- Vue router is used for handling any routes so that we can navigate around our site
Segment 2 - Nodejs and MongoDB Backend Development
- Nodejs
- Used as our server to serve webpage content from the Mongo Database and store content in the mongo database
- The server has be handle many calls to it that request things like:
- Get all content
- Get content of a specific type
- Add content of a specific type
- Delete content
- Authentication
- These are standard server requests but still took some time to setup as we’ve never hooked in vue.js into Node, usually use the built in templating engines
- MongoDB
- A alternative to sql that stores objects in json blocks
- Has great hookins into Nodejs using the Mongoose package
- Used to store our content block data and admin user account for editing the site
- Had to implement mongo admin and database users so that even if our site is hacked they can’t delete or modify the entire mongo database
Segment 3 - Digital Ocean and Docker Deployment
- Digital Ocean provides a vps with an already installed Docker instance.
- Docker is a way to create small virualizable containers for each technology in your stack
- In our case we used docker to create 3 containers:
- Nginx - serve static files and proxy routes to Nodejs server
- Nodejs - run our server infrastructure
- MongoDB - runs our mondodb server that communicates with Nodejs
- Had to learn how to create a docker compose file which is a configuration file for building your containers together and letting them know how to communicate
- Everything is launched and built through a SSH into your digital ocean server. You have to be familiar with using a Command Line Interface (CLI)
Web News - Wrapping it Up
In this Web News we had a discussion regarding our current status (at the time of recording) in the development of the HTML All The Things website, as well as what to complete for deployment.
Wednesday Nov 07, 2018
Wednesday Nov 07, 2018
Getting details from your customers can be a challenging experience, but it is vital so that you can deliver a complete produce on time.
Segment 1 - The Contact
- There are a lot of way that customers can contact you
- Some clients want to be hands-on, some want to hand over everything to you - the professional, and others get right to the point
- Despite how many details these customers give you, every project has a unique spin on it, even if it seems run of the mill, this makes it vital that your communication is on point
- Sometimes you need to resist customers requests/demands in order to deliver a complete and quality product (ie refusing to move forward on a project that hasn't had enough details communicated to begin accurately)
Segment 2 - Gather Project Requirements
- Before sending the first quote we need to know what the client needs us to do
- Ensure that you ask the right questions to get all the information you need, clients generally don't know how many details you need
When we work on a small business site some of the sample questions we might ask include:
- How do your current clients find you?
- If you have a site currently, what are some things you like about it, what are the things you really don't like
- What is the intention with the new site, generate leads? Just a digital business card/a way to for people to find your phone number?
- Who are your biggest competitors? And which of their sites do you like the most?
- Do you have a database of products you want displayed on the site?
- Do you want to be able to edit the main components of the site yourself?
- How important is the google rank to you?
- Do you see your website expanding in some way? Becoming a web app? Or growing a lot? Having a team of editors?
- Generally you should gather details over a personal meeting or screen share
- After gathering the details you can start creating the basis of the project including details on time to completion and what will be required
- This is a major component in your quote for a client
Segment 3 - Changing Project Requirements
- Changes can suddenly happen, even in the middle of a project
- They can be brought on by customer preferences, market conditions, or company-wide strategy changes of some sort
- When a project requirement changes, especially when it drastically changes from the original vision, it often falls to you as the creator to make the appropriate changes
- It’s important to have a layout of what you’re willing to do with a client before you begin any work and to have a similar layout for what you're willing to do about changes that arise
Web News - What do yo want from a phone/Android launcher?
- We all have different needs and wants from our mobile devices, they’re an extension of us and the main way the people communicate with one another these days
- With that being said, they’re still mobile computers and can be used for a wide variety of tasks from working on the go, taking photos, chatting with friends, and much more.
- With different use cases comes a variety of user preferences in terms of hardware and software
- Are you a fan of Android fragmentation, or is there too much variation?
Apply to become our SubReddit Manager/Mod - [email protected]
You can find us on...
Wednesday Oct 31, 2018
Wednesday Oct 31, 2018
Responsive design has revolutionized how websites are developed, but static layouts still have their place. We explore these two different layout methods in this episode of the podcast.
Reference from Treehouse: https://blog.teamtreehouse.com/which-page-layout
Segment 1 - What is Responsive Design?
- Responsive design responds to its environment, in the case of web design it’s specifically referring to how a website’s user interface responds to different window sizes and technologies available.
- This gives us the ability to have a single design that changes and adapts to various devices from ultrawide PC displays, down to older smartphones.
- It also allows users to make the most of the screen real estate they have
- Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace
- Having two browsers snapped to each side of a 1080p display for more information, rather than always having a webpage open at full resolution
- Responsive design makes the use of a variety of tactics that are generally found in CSS including: media queries, relative positioning, relative length units, whitespace
Segment 2 - How to Implement Responsive Design
- CSS Responsive Tactics:
- Media Queries
- Offer breakpoints to a design, allowing developers to apply design changes at a specific breakpoint, such as a certain max-width (probably most popular breakpoint)
- Relative Positioning
- Position: relative;
- Positioning absolute elements within a relative container and then controlling that relative container to automatically move the elements within the container
- Relative Length Units
- Units that allow your elements to be responsive. These units are dynamic and change based on their environment
- Unlike exact, or absolute length units which are (cm, mm, px, etc.)
- 3 examples:
- rem - relative to the font-size of the root element
- % - relative to the parent element
- Vw - relative to 1% of the width of the viewport
- Reference link: https://www.w3schools.com/cssref/css_units.asp
- Whitespace
- The space between elements (ie the space between columns)
- It’s basically blank space on the web page
- Responsive design uses this as a buffer zone to move elements around various elements
- Filling a site up too much (minimal whitespace) requires space for elements to be displaced and the site will become too crowded on smaller screens (infinite scrolling, or a lot of pagination)
- Media Queries
- Main high-level CSS responsive tactics include: Flexbox, CSS Grid
- Mobile or Large screen first design?
- It seems currently it’s more popular to design for mobile first and then create media queries for larger displays
- This is useful if you are also designing for older browsers and want to use newer technologies like Grid of even Flexbox
- Older browsers will see a mobile design (one column) while any larger screen or new browser can utilize the newer technology for a more advanced/easier to set up layout
- Traditionally we design for larger screen and adapted for mobile/smaller
- This is still viable depending again on your audience, an older audience for example still prefers larger screens
- It seems currently it’s more popular to design for mobile first and then create media queries for larger displays
Segment 3 - When to use Static instead of Responsive Design
- Static layouts/static design is when the page is laid out in a fixed way
- The elements on the page do not adjust to the screen resolution, or window changing size, generally, overflow is used in order to scroll all around the page
- Older sites, especially those that appear left aligned and not fullscreen are done in a static layout, as they’re typically 640px or 800px wide and remain left aligned, if the screen shrinks below this point, as with a phone screen, the user must scroll around the design
- Elements are generally not optimized for all platforms, which results in very small buttons, and text on high definition and mobile phone screens
- Modern Static Design or Static Layouts
- We’ve experiences situations in which a single device, or a single type of monitor will be used, adding responsivity in any way would add additional development and testing time and obviously cost more money
- With a single screen in mind you can use the space at your disposal more effectively, have content blocks that perfects fill any available whitespace (within reason) and take advantage of any unique characteristics (ie notch)
- Industrial equipment is often like this, when they use a technology called PLCs to control them, generally an HMI (Human Machine Interface) is required to control it via a touch screen, with the web steadily expanding it’s not outrageous to assume that one day a browser version of an HMI may be used on these touch screens, which are all one specific size and don’t update like consumer products (remain the same for years, even decades)
- When we first got into business we set out with the idea that we’d never make a static layout, all our websites were going to be mobile-friendly and responsive
- Even a few years ago when we opened, there was a lot of production websites that had either a static layout, or had a separate mobile site
- Today responsivity is the way to go and is generally cheaper and less clunky than an entire mobile website
- We wouldn’t recommend making something with a static layout unless it has a very specific fixed set of parameters that need to be met, or if it will exclusively be used on a specific display for years to come
Web News - Early Access Software/Games
- Potential Issues:
- Developers don’t want the pressure of saying that it is version 1.0 because of the assumed amount of polish
- The developer getting paid and receiving free bug testing while in early access/beta doesn’t seem fair to the user/customer that is buying it
- The potential that you could pay for something but it never gets fully released
- Even if something is free but in beta like flutter.io a cross platform framework for android and iOS. It could be abandoned, and your efforts can be for nothing in learning it and helping with its feature development/bug fixing
- Potential Benefits:
- The user can feel part of the development and evolving process of the software and when/if it is released will be more attached to the product
- Strapped for cash but talented developers have a chance to maybe release a MVP and work on it while receiving feedback and funding from the people using it
- A longer update cycle for applications/games because of constant funding
- User feedback can lead to new features and improvements as the system is not yet complete and it is easier to add/change something in this state
You can find us on...
Wednesday Oct 24, 2018
Wednesday Oct 24, 2018
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...
Wednesday Oct 17, 2018
Wednesday Oct 17, 2018
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
- 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.
- 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...
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...