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

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

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

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

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

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.

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... Facebook | Twitter | Instagram RSS | Patreon | Spotify Medium | YouTube | GitHub Reddit

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) 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 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 websi

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

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

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?

In this episode we explore our failures and shortcomings on a variety of our projects ranging from a stock photo resource to a fully-fledged Chrome App game. Show Layout Segment 1 - Starting Up Originally going to be an IT company Opportunity caused us to pivot before the opportunity fell through Decided to continue working in the web development and design field Segment 2 - Lists by Design Product Page: Link First Chrome extension Was mean't to be a bookmarks replacer Added a lot of functionality that bookmarks don't have Segment 3 - Clicks to Riches Product Page: Link Clicker/Idle game in the form of a Chrome App Was supposed to be a smaller version of a larger project Designed to generate revenue whilst working on the larger project Segment 4 - Free Photos Hamilton Website: Link Free stock photo resouce Designed to offer free photos, focussing on the local area of Hamilton, Ontario Segment 5 - Dealing and Mitigating Failure How to deal with failure and get ready for it before it even happens Always learn new things even if a project has failed totally Web News - Windows vs MacOS The age old argument, who will win? Social Links Facebook | Twitter | Instagram | Medium

In this episode we discuss our different workflows individually and collaboratively as a company. Segment 1 - Infrastructure Started out using OneDrive Later started using BitBucket and GitHub Version control was needed more as projects grew in productivity Segment 2 - Mike's Workflow Primary IDE is VS Code Xcode and Android Studio whenever a project calls for it Asana and Todoist Xampp Daily routine Segment 3 - Matt's Workflow Notepad++ CMD Chrome Testing browsers Balsamiq Cloud Workflow for small business basic site Workflow for projects Segment 4 - Working Together/Collaborative Workflow Working together on OneDrive Dividing up parts of projects Code reviews/peer reviews Project management software Whiteboard project management Web News - App Overload Discussion on how to manage app overload There are so many solutions to every problem and many of them have apps, this can cause app overload if you work on several projects.

In this episode we explore how to get started in web development and web design. We discuss some of the methods we used to get up and running and share some stories on our initial experiences in the field. Topics covered in this episode include: Segment 1 - Mike's Beginnings Original exposure to code & first projects Segment 2 - Matt's Beginnings Original exposure to code & first projects Segment 3 - Libraries & Frameworks SASS - Official Site Bootstrap - Official Site Tailwind CSS - Official Site jQuery - Official Site Lightbox - Official Site NodeJS - Official Site Vue - Official Site Flutter - Official Site Segment 4 - When to Choose a Premade Solution Website builders Service providers Snippets & Plugins Examples include: Webflow - Official Site Podbean - Official Site Carrd - Official Site CouchCMS - Official Site Segment 5 - Web News Flutter You can find us on... Facebook | Twitter | Instagram RSS | Patreon | Spotify Medium | YouTube | GitHub Reddit

In this episode Matt Lawrence and Mike Karan discuss their professional experiences that led them to today. These experiences form a foundation for future podcasts and act as a reference moving forward. Topics covered in this episode include: Personal Introductions Segment 1 - Synopsis of Today Digital Dynasty Design Web design and development business Passive income projects Segment 2 - Education College and University educations and experiences Mohawk College McMaster University Segment 3 - Work Experience IT and administration Electrical drafting Co-ops Segment 4 - HATT What is HTML All The Things? You can find us on... Facebook | Twitter | Instagram RSS | Patreon | Spotify Medium | YouTube | GitHub Reddit