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

Motivation

In this episode Mike and Matt discuss motivation in it's many forms, and how it affects working on variety of projects.
Segment 1 - Types of Motivation
Different types of motivation range from the tinkerer all the way to the passionate
Being in any of these camps generally dictates how much effort, and time, that you’ll put into a field that you’re checking out
In terms of web development & design, having a different level of motivation will no doubt determine where you fall within the field - maybe you’ll make a single website for fun, or maybe pursue a career
One thing of note, these classifications of motivation are from our own experiences and ideas, they aren’t some sort of “official” classification of any kind
 
Passionate
When you’re passionate about something you’ll typically take it more seriously and do in-depth research to learn new things
This type of motivation may steer your career decisions, or help you set up a side hustle of some kind
For the web field, this generally means you won’t be using your “local” website builder like Squarespace, but rather diving in head first to the code, determining what tools you’d like to use and how to use them efficiently
 
“Forced”
Sometimes you’re figuratively “forced” into a doing something due to outside pressures, such as financial situation, or availability of work
When this happens you may take your work seriously, however, you’ll be taking it more seriously and efficiently than someone who wants to be there, because generally you’ll want to get in there and just get the work done
Often times people get trapped into these types of situations due to the outside pressures never alleviating, or more that suddenly pile on, leaving you trying to find methods to get out of the field
Bringing this into the web industry, sometimes people will be “forced” to do professional web work, either full time, or by being in an associated tech field that suddenly requires web work. Generally this type of work will be rushed in some way, having tasks done in the quickest way possible - often leaving a lesser quality product
 
Hobbyist
Hobbyists are people that like to do a variety of things, and get into them all the way, stopping just before getting professional.
There are of course varying degrees of hobbyists, but generally, they could technically operate in the professional realm given a small amount of training
Bringing this again to the web industry, hobbyists will generally not focus on one tool, language, or segment of the industry, but rather fan out and use a bunch of different tools ranging from site builders like Squarespace, then dabble in some code - getting a full range of experience to build some sites that they’re interested in, sometimes these lead to a side hustle if they’re successful
 
Tinkerer
Tinkerers are one step below hobbyists, and are generally just interested in a field in some remote way
They’ll do a variety of “light duties” within their interest, things such as reading some material, or maybe dabbling slightly within the field itself, stopping well short of investing any sort of money, or serious time, into learning a given field
When it comes to the web industry, these people often need a single website for something they’re working on, they’ll read up on different site builders online and then just use a template so they can get to work - this of this as more of a blogger that doesn’t want to deal with their website, but instead their work is their writing itself, so they familiarize themselves with the path of least resistance to get a website up and running and that’s it
 
Segment 2 - What Motivates Us
Pure Enjoyment for coding
Creating something from scratch
Looking at examples of other people's work and striving to achieve something similar
Looking through sites and trying to find motivation for your work
Having someone or a group request something that you could make
Small amount of adrenalin from fixing difficult issues
Being part of the coding community
Having people reach out to you for help or opinion
Keeping up/learning new technology
 
Segment 3 - Motivation Blockers
To many projects on the go making it difficult to focus on one
Prioritize and use task management applications like Asana
Running into a problem that takes several days to solve
Take a step back from the problem and maybe try to complete a smaller easier task
Difficult clients
This is a tough one but try to understand where your client is coming from and if you can relate to their issues
Programmers envy
There will always be people that are better than you but also people that are still trying to catch up to your level. It is important to learn how to focus just on yourself
Procrastination
Just start something, start with smaller more accomplishable tasks and build up to the harder and longer ones.
Links
Dan Mace's Video: https://www.youtube.com/watch?v=dMTJRYmQkbc
Joe Rogan's show with Derren Brown: https://www.youtube.com/watch?v=n_tpWrv76Q8
 
Web News - Scams
Scams are becoming more frequent and more complex
There isn’t a day that goes by that some sort of scam hits our email inboxes, often times being screened out by the spam filter, however, with complexity growing these scams often get through that level of defense, leaving the user to further filter out their inbox
In addition to email scams, there’s phone scams, and even in-person ones that people have to avoid
One thing that we’ve found is that email scams are getting harder and harder to notice - the one tell-all used to be an incorrect “from” address but even that is now being spoofed to look legitimate
The other day I received a properly branded Cyber Monday email from what looked like the real amazon email, but it only lead to a website that was trying to get me to sign up
The worst most recent one is someone impersonating us in an email - basically one of our clients will receive an email that says it’s from us when it’s not, and asks to download an attachment - meanwhile we’ll receive the same thing, an email that looks like it’s from our client also trying to get us to download an attachment
We’ve even had a brand new business credit card compromised whilst it was still in a safe at home
What are you thoughts on scams? Have you fallen for any? What can be done about this?
 
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

Design, Develop, Deploy

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 persistence and resource sharing
CSS Grid for layout
Deploy
Deploy on Nginx through docker on Digitalocean
 
Web News - Edge going Chromium?
Microsoft announced it will be moving away form EdgeHTML to Chromium for a future version of the Edge Browser
A Project Manager moderately confirmed that most chrome extensions will work
New Edge will be on Xbox One, MacOS as well as Android and iOS
Mozilla is not happy that Microsoft is giving Google a monopoly and has reaffirmed their efforts to provide users a choice
Developers will now not have to support EdgeHTML
Electron played a key role in the decision to switch to Chromium instead of Firefox
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

The Hustle

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 optimizations made but great stability
Having new features and optimizations every month or so but have the chance to lose stability
An example of fairly stable consistent operating systems with minimal updates would be iOS and partially android.
They usually receive one large update a year with only minor security updates in between almost like a hybrid system
Windows on the other hand will receive updates almost weekly that seem to be fairly untested and large updates also come multiple times a year and have the potential to introduce massive issues like with the last large scale fall update deleting a users documents folder
Updates to platforms can also cause problems such as Webflow or Wordpress releasing updates which makes features and plugins behave differently.
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Cross-Platform Web Development

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 Cordovahttps://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, however, we would receive a limited set of components - sometimes with spares, sometimes we’d only have one of each
You could purchase more if they were in stock, but that’s expensive for a student
These components are generally cheap electronic components - yet we were expected not to break them, or have a bunch of DOA components
This discouraged messing around with circuits and caused a lot of checking over and over to ensure your circuit was correct before hooking it up to power
When we learn new web technologies we typically end up setting it up incorrectly a few times, and have plethora of errors throughout the process as we figure out how things should be working.
This type of learning I find personally the best for understanding what you’re doing and what you can/can’t do with a piece of technology, however, this could get you docked valuable marks in school
The counter argument is that you should make all your mistakes before the test, however, in college especially, those “in-between” marks can add up to 10% or more of your overall grade depending on the class.
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Front-End Developer Roadmap

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

Developing with Vue.js, Node.js, and MongoDB

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.

Gathering Project Scope & Requirements

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 - matt_lawrence@digitaldynasty.ca
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Responsive Design

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

Developer to CTO w/ Azhar Zuberi

We sit down with Azhar Zuberi to discuss his unique professional journey from developer to CTO of a startup.
Segment 1 - Introduce Yourself
Segment 2 - A little backstory
What would you say was the most important topic or lesson you learned in your schooling when it comes to being a developer?
How important was your first job as a developer in defining your coding style/knowledge base?
When first starting out what were the ‘popular’ technologies that you learned (i.e. angular, bootstrap, wordpress etc)
Segment 3 - Our connection
What was the reason you decided to choose us (Digital Dynasty Design) when we first started working together?
What is your workflow/process for working with and hiring off site/outsourced developers?
What are the benefits of having a small development team versus increasing funding and hiring a full staff?
What are some of the biggest challenges when have a off site/outsourced development team?
Our current development process has us using a very base Jquery, Bootstrap, JS, HTML and CSS stack. What were some of the reasons behind this vs using a more robust framework i.e. angular or react?
Segment 4 - Running a company
What are some additional responsibilities that you were not expecting when transitioning to being a CTO
What do you miss most about being just a contract developer
As CTO how important was it to have all those technical skills and years of work in a company and as a contractor
How did you learn the business side of your role as CTO and what is the most challenging part for you?
Web News - Incomplete Ecosystems
What is an ecosystem?A collection of software - typically from the same manufacturer - that all compliment each other
A primary example would be iCloud storing all your contacts and other data from your iPhone for use on your Mac, or on a new iPhone if you need to sync them up
Ecosystems have been a key part of people’s workflow for the past few years
They’re often a key feature that people look for when they purchasing a device
Apple’s ecosystem stands out in this particular example
There are a lot of ecosystems out there including: productivity, smarthome, etc.
Examples of incomplete ecosystems (rough notes/points of reference):
Samsung has software primarily on the phone, such as Notes, Bixby, Email, etc. but has no clients for PC use, other than things that mirror or use the phone (ie SideSync)
Microsoft’s is more focused on productivity (email, contacts, calendar, Cortana), but has no focus on smart home functionality (ie hardware). Windows Phone hardware is basically dead and therefore there is no mobile experience for Windows, with the exception of Android apps (which is a decent solution - but not as integrated as first party)
Android has no full desktop experience (A Pixelbook doesn’t have all the pro software that Windows has, Google Assistant is on Google hardware, but not on Windows 10)
You can find Azhar via...
Contentlinq Website - www.contentlinq.com
Contact Email - success@contentlinq.com
LinkedIn - Profile Page
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Communicating with Customers

Communicating with your customers is a difficult, yet necessary part of doing business. In this episode we discuss best practices when dealing with various types of customers.
Segment 1 - Establishing Channels
Establishing which channels you're willing to talk on is critical
Steer new customers to the proper channels that you check regularly (ie email, Twitter DM, phone call, etc.) so that you don't miss out on potential business
Make sure that you check your unused channels on occasion (maybe weekly) in order to ensure nobody has reached out to you on those channels mistakenly and steer them towards the channels that you do use
Steering customers to the correct channels is as easy as stating which communication method you prefer in meetings, in your social media bio/profile, or starting the conversation on your method of choice (if you're starting the conversation)
Segment 2 - Different Types of Communicators
As you work with clients you will start to understand how they work, but more importantly how they communicate and what they generally expect
Some clients are entirely hands-off, while others want to be updated whenever something small is done
There’s no clear cut way to determine which type of communicator your client is, other than working with them and slowly learning their expectations, just as you would with a friend, we all contact different friends in different ways depending on how we’ve communicated with them in the past
Some people are more face-to-face oriented and want in-person meeting more than emails or messaging, while others just want quick messages, emails
It’s important that you don’t necessarily go way out of the way for people (ie doing in-person meetings for something that a single email would deal with)
Segment 3 - Dos and Don'ts
Dos
Establish a timeframe for a customer to contact you. Can be different between customers. Also take into account time zones and try to use them to your benefit to split up your day between customers.
Use that timeframe to do callbacks as well if you miss a call
Being prompt and consistent in your communications
Be professional and don’t use needless slang, but keep in mind that as your relationship with the customer builds you can be more friendly and approachable
Take responsibility for missed communication
If you forget to answer an email and your customer reminds you make sure to apologize and try not to make excuses
Don’ts
Don’t neglect answering just because you feel the customer won’t like what you have to say. Be upfront and honest
Don’t answer customers emails right when they come in everytime, pick a time or a few set times a day when you answer emails. Obviously use discretion as some situations can be urgent
Don’t put yourself in situations where you will be overwhelmed with communications and all your accounts will suffer
 Web News - Social Overload
Social media is the vehicle that drives traffic to most online projects, with so many social media networks out there it can easily become a project just to keep up with posting new material, let alone making said material
Phones manufacturers and other apps are now tracking usage on various apps, letting people know when they’re using their phone a lot - watching too much YouTube for example
Social media, and especially our mobile devices have in a way made us “addicts” to social media and other apps since we can now access them everywhere
Work on the parts of social media that you want to work out, make sure you put work into your craft, but you can’t excel at everything
IGTV content idea
Making content out of a single piece of content (ie get an article, photo for instagram, and an opinion tweet out of a single design idea)
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit