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

With Vue.js' popularity steadily rising, many of you are probably thinking of migrating from jQuery.
Segment 1 - State of jQuery
https://jquery.com/
jQuery is a javascript library mainly targeted at HTML document traversal and manipulation, event handling, animation* and ajax requests.
Meant to simplify your code and reduce the amount you would have to write doing simple things such as
Assigning event listeners to all elements of the same class
Creating DOM elements such as DIVs
Using the $.ajax shorthand to interact with API’s/server calls
So main theoretical advantages areCode becomes easier to read
You write less code
Familiarity, lots of developers have used jQuery for years and can write it without looking at documentation. Switching from something you are extremely familiar with can be a tough and costly venture
jQuery has now been around for over a decade (since 2006) and as with everything in our field, it has started to be seen as ‘ancient’ technology. I wouldn’t agree with that kind of labeling but having used jQuery for the better part of my web development career it does have some pitfalls
Transitions and animation rendering isn’t well optimized and can lag
Large transversal are often bulky and execution time lags in comparison to native Javascript solutions
Javascript api’s have improved over the past decade to the point where it is easier to implement and has more features then a jquery solution
With the emergence of large javascript frameworks like React and Vue.js jquery has lost some ground as integrating with these frameworks, although possible, is usually viewed as resource costly and redundant
 
Segment 2 - From jQuery to Vue
As with anything new, it will take some time to adapt to a new way of developing when going from your typical jQuery workflow to a more framework based Vue.js workflow
There are key differences with how jQuery handles things vs the way Vue does. Examples of those differences:
Assigning a function to DOM element such as a div or a button
In jQuery assigning a function is done in the script tag by using the $(‘.class or #id) selector and then extending it with a .click/.change(function(){dosomething;})
In Vue a dom/template element is tied to a method that is created in the vue instance. You can assign them to any event weather it be a click event or a change event using the @click, @change syntax on the dom element
Transitions/Animations
jQuery has plenty of . extenders that handle simple transitions like fading in and out (.fadeIn .fadeOut) and most other simple animations. They can be activated within your js scripts on any element using the typical $ selectors. These do not use css animations or transitions and have notably worse performance then them
Vue has a tag that can then be tied to a css animation or transition. The transition can be activated on any state change, such as a simple v-if show hide
Adding and removing classes conditionally/programmatically from DOM elements
jQuery can do this by using the $ selector to get all elements of a particular class, or just a single element with an ID. It can then using the .addClass or .removeClass extension to do either function
In Vue.js you have to bind classes to each element using the : notation. So on each element you need a conditional class, like a active class for a button, you assign the :class with a condition. Like active : isActive which binds the ‘active’ class to the isActive data property/variable. So anytime isActive is set to true, the element will gain the active class
There are many other differences, like Ajax requests, which are handled by the axios library in vuejs and dynamic DOM element creation which is a major feature of Vuejs but is considerably more janky using jQuery.
In the end making the transition from jQuery to Vue was quite hands on and involved a significant amount of adapting and learning new skills. Not to say it was overly difficult, as we’ve been saying many times in this podcast, having a good base knowledge of pure Javascript makes it easier to pick up new technologies and switch between libraries and frameworks.
My advice for developers just starting out would be to still get a good grasp of native javascript and then jump into a framework like Vue.js or React. With native javascript getting most of the features of jQuery, it doesn’t make sense for a developer to invest their time into learning it.
 
Useful Resource - Meta Tags
https://metatags.io/
MetaTags.io can help you investigate existing, modify, or create meta tags for your website, across multiple platforms
You’re able to type in a URL, which will pull in all the detected meta tags such as a photo, the title, and the description
From there you’re able to see exactly what your metadata will look like in Google as well as other popular services such as: Facebook, Twitter, Linkedin, Pinterest, and Slack
If there’s something you need to add or change, you can do that right on the web page. When you’re done, simply click on the “Generate Meta Tags” button and a new snippet of code containing your changes will be generated so you can paste them into your tags
Our use cases:
We’ve been using this a lot with Webflow recently
In Webflow you’re able to set site-wide meta tags, set static ones per page, dynamic ones based on CMS data, and even allow users to edit meta tags specifically via the Webflow CMS with some configuring
Because there are so many options affecting meta tags, checking out the metadata in metatags.io really helps us inspect if the dynamic data is working out, or if the customers are filling things out correctly.
It also lets us specifically test how metadata looks on all the customer’s preferred platforms all in one place (ie facebook, twitter)
 
Web News - Laser Focus in a Scatterbrained Industry
If you work for a big company, or listen to business gurus, “laser focus” is a commonly used phrase that has essentially become a buzzword of sorts
It’s generally used to describe the need for a team to focus on something important, such as a new project that’s coming up, or meeting a very important deadline
Often times it is also used to describe the general direction of a business, especially if a business is new, or is evolving with the times. The administration will generally ask for the staff to remain “laser focused” on their new movement, or business strategy to ensure continued success
This laser focus is also applied to beginner entrepreneurs when discussing the prospect of success. Gurus will often talk up working in their preferred industry, then bring it back down to earth saying things like “this is not a get rich quick thing, you need to stay laser focused on your goal to succeed, there’s no other way around it”
At the end of the day being laser focused on a goal is sound advice, but when it comes to complex projects, that laser focused goal has to be more general and can easily still lead you down the path to distraction and eventual failure
The website industry is all over the place when it comes to almost every single aspect.
Prices are wildly different from agency to agency for the exact same product
Building out projects take several different skill sets, or investments into services that essentially act as outsourced contractors (ie developing the site yourself and getting an SEO specialist involved to optimize for Google search)
Sometimes businesses don’t have any branding ready at all, which results in the need for illustrators and other related artists to make up logos and colour schemes
Don’t forget about the fact that websites are always online, so when they go down, someone needs to support them, pulling your attention away from new projects that you have on the go
When you’re starting out by yourself, or in a small team, you’ll inevitably have to become a jack of all trades in order to keep everything running smoothly, especially when you don’t have the capital to hire individuals to run each aspect of the business individually
Herein like the question, how do you remain laser focused when the industry you’re in is so scatterbrained?
One possible solution might be to make the goal more general, but if the goal is just to make money, there’s way too many solutions to that problem that will hardly result in laser focus of any kind.
We suffer from this issue constantly, we’ll say something like “let’s just focus on money the next few months” and before you know if we have 3 app concepts, some marketing plans for client-work, and nothing actually done. Even No BS News was completed for the purposes of the code challenge, but then not published further than that because another possible money making opportunity came knocking.
How do you remain focused in the web development/design industry?
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Pivoting a project can be a blessing, or a curse. It's important to know when and when not to pivot to avoid derailing your development cycle.
Segment 1 - Our Pivots
When first starting out it’s important to be open to all avenues to you
In our case we chose to try to get into the IT and Web Design/Development business from the get go.
Although we did have a few IT clients we both seemed to prefer the web development side of the business as time went on.
Eventually we landed a larger Web development account and at the same time had an opportunity to take on a medium size IT contract for a medical clinic.
This was when we had to decide to go fully into web development or try to keep up both sides. It seemed like if we tried to keep both sides our preferable side would suffer so we chose to Pivot fully into web development
Recently we decided on another Pivot
Our choices were continuing trying to expand our service industry and get more clients for a steadier income or try to build a audience and get more in touch with the developer community in an attempt to eventually generate a more ‘passive’ income source
Of course if you’re listening to this podcast you know the route we chose, as HTML all the Things is our way of connecting with all of you
This wasn’t an easy decision as the temptation of more stable income was high. I was engaged at the time (married now) and obviously with that was a little worried to dump a bunch of potential income for a chance at building a community
When we didn’t pivot
Situations will constantly arise in your life, especially if you are trying to make your own path, that will tempt you to Pivot what you are doing
Sometimes you will pivot, and sometimes it’s better to stick to your guns and forge ahead
An example a time a we didn’t pivot was when we were coming up with project ideas and after launching our first html5 based game (Click to Riches) we wanted to create more games and almost become a html5 based gaming studio. This sounded really fun and we had a blast making Clicks to Riches but looking at it analytically the competition was extremely high and to generate any sort of consistent profit would have potentially taken years.
 
Segment 2 - Pivoting a Project
Generally when you’re first coming up with a project, you’ll list all the ideas, features, and systems that will be included either at release, or down the road
These features should be categorized into various groups, some of the common ones are:
MVP - all the vital features that are needed to make the project function/solve the problem it’s out to solve
First Updates - Some features that are close-to-vital or easy to implement and will be added to the project soon after release
Wishlist - Features that would be “cool” to have in the project, but aren’t vital to it’s core functionality
Pivoting a project is not a decision to be taken lightly
Whenever you pivot a project’s direction, it almost always adds a bunch more work to the original plan, typically some of those wishlist features are bubbled up to the MVP, or first updates category
Pivoting at any stage of a project can have some terrible results:
At the beginning - You might end up pivoting before or during the first days of development, which throws off the entire plan and can render any work done so far as completely useless
Later on - Pivoting when a bunch of the work is completed can completely disrupt the development procedure and can ultimately derail a development cycle. For example, QA might not be able to test everything they want to because some of the features they were planning to test are now going to be radically changed. In addition, pivoting later into development often can result in added features that will be undercooked in the release, and therefore can produce a less quality product
On the flip side, sometimes pivoting can have some great results:
Better product that is more fitted to the marketplace
More features that were initially thought to be useless, but ended up being vital in some way
Matching, or beating, a competitors offering where the original MVP wasn’t capable of doing so
Ultimately, pivoting is something that will come up on many projects, but you should be resistant to it
Ensure that the reasons for pivoting far outweigh the reasons for keeping the project the way it is
There is great value in sticking to a plan because people get familiar with it, and know what to expect. Changing said plan can result in chaos for the development team
We slightly pivoted No BS News due to Google Play’s new PWA application system that allows for PWAs to more easily be put onto the Google Play store. As a result of this change, we decided it best to have some offline features and to tie up any lose ends.
The benefits of pivoting No BS News in this way are:
Better exposure and marketing on Google Play (discovery engine)
More functionality will be added that will make it function more like a real app that relies on the internet, but caches some of the data it already has (minor offline functionality)
Is going to push us to finish the project
We need to learn service workers for some upcoming client work
 
Segment 3 - Pivotal Paralysis w/ the Jack of all Trades
As we’ve mentioned in brief before, it’s often very difficult to stay focused within the tech industry given that there are so many positions and so much crossover between them
When you’re running a small business, or a startup, often times you need to wear multiple hats within the company in order to keep it afloat
These multiple hats result in experience and exposure to several segments of the tech industry, that provide useful skills, but also provide a bunch of distractions
Whenever you have experience in a given area, it’s hard to focus on the one you’re working on.
For example - if you’re working on making the UI for an app, and you have Photoshop experience, you may get distracted for an entire day on editing some icons that weren’t in the project’s original schedule. Resulting in a late and possibly rushed UI development
Distractions aren’t great for a project’s development, but these distractions can easily evolve into project pivots.
If you’re developing an application that focuses on calculations, but you have experience in graphic design, you might be distracted from the original goal of making a simple UI that allows the user to complete calculations. Instead, you might pivot the project such that it has a theming system and a bunch of cool UI elements that look nice, but introduce a bunch of graphical and UI work that will stall out development and isn’t vital to the project
Being constantly distracted by things you have knowledge of is a constant plague of the tech industry because so many people have a experience in at least a few segments
It’s important to keep to the plan whenever you can to avoid scheduling mishaps, missed deadlines
Personally, I find this jack of all trades w/ pivoting issue normally crops up in the earlier parts of a project because everything is still being flushed out and designed. It’s so easy to just flip a wishlist feature into the MVP that before you know it, you have a bloated app that will arrive late and might not be tested as much as you’d like because it had to be rushed to try and meet the deadline
Stick to the plan whenever possible, but keep in mind that the plan isn’t written in stone, just really close to it. Make the plan hard to change - pivoting is a blessing and curse
Web News - Community Moderation
With the newest ‘Adpocalypse’ happening on YouTube due to all the ‘sexually illicit’ comments appearing on videos with underage kids in them, what does this mean for the future of platforms like YouTube or even the internet
From pretty much the beginning of the internet anytime a community has taken off it inevitably has pockets of illegal behavior in it.
Usually even thought he community does it’s best or at least something to monitor itself it gets blamed for its members doing something like this
In YouTube's case it not only effects YouTube/google but all the creators on it. Most of which have done nothing wrong
Community moderation is pretty much impossible without limiting/censoring the community itself and therefore changing the product you are putting forward
There are some small examples of good community moderation in my opinion, Reddit did a good job removing all of it’s child exploitation subreddits without destroying it’s community
The problem is not all websites or communities are as easily controlled as Reddit’s. And at some point we need to look at the problem as a whole
People will always find ways to post terrible/illegal content online. Who is it on to moderate this?
Once we go down the rabbit hole of severe moderation what will the internet look like?
If we are in the “wild west” of the internet days what civilized days are we approaching?
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode we talk about keeping our projects together with OneDrive and eventually upgrading to git for full version control.
Segment 1 - Starting Without Git
We used to use OneDrive to keep each other on the same page
We had the same OneDrive directory sync to our computers so that our work would carry over
However, this is not proper version control and therefore a bunch of conflicts would happen if we were working on the same projects, luckily most were minor and just required someone save their work again
This solution did work for us, however, and we used it for well over a year with only a few major sync issues - which is pretty good for a program that’s not meant for version control
To this day we still use OneDrive to keep some common files around, like graphical assets, however, our projects are not housed there anymore
Our experience with using OneDrive rather than a proper version control did show us that it is possible to get started working as a team, even without the “industry standard” tools (in this case git)
This is especially true if you work on projects yourself, or don’t touch any of the same files as another developer, so you can still have reliable file access across various computers while you learn how to use git
 
Segment 2 - Transition to Git
Working on your own is still a good time to learn and practice your Git skills. Even though it might seem like it’s slowing you down it really is just preparing you for the eventuality of working in a team environment and is something that is definitely going to come up during interviews and jobs
Learn the basics first
Cloning - initial act of taking the repository from your git source to your local computer
Pulling - taking the changes from the remote (git source) repository is updating your local repository
Committing - This is an action that ties the current changes you’ve made in your local repository to a ‘commit’ object that you are able to label/message with references to the changes you’ve made
Pushing - Taking all your local commits and transferring them (pushing them) to the git source repository
Fetching - Updating your local git file with the current updates that are on the git repository (origin)
Branches - A system where you can create ‘branches’ that are essentially copies of your repository. This allows you to develop code ‘risk-free’ without touching what is referred to as ‘master’ (master-copy). Usually branches are used for feature development, and best practice is to create a branch for each feature and once that feature i complete to close that branch
Merges - This is a system in place to handle taking your current branch and merging it into another one (usually a master copy or a pre-defined integration branch). The trick here is to avoid working on the same portions of code in different branches as the merge will create a conflict that you will have to manually resolve
These base core concepts make up most of the functionality you’ll need to know to at least have a good base and be able to integrate easily into any companies workflow
Sometimes learning specific workflow habits (like we’ll cover in segment 3) can pigeon hole you as almost every company has a different workflow and if you don’t understand the basic concepts it’ll be tougher to go from one workflow to another
Segment 3 - Workflow and Benefits
Recently we’ve begun working in larger teams and that has pushed us to develop a Workflow
This is just going to be a example of the one we developed. Other companies will use different approaches depending on project complexity, team size, technologies available, etc.
Our branch structure is as follow:
No one codes in master, it is the production branch and only once the application is fully tested do we promote to master
The main development branch is called dev-integration
Here is where everyone's feature and design branches will merge into for testing
Every developer gets their own branch, usually just one at a time although there are a few exceptions if multiple large features are being worked on at once.
Once a developer feels like they have a good section of their feature is done and ready for testing they will create a pull request
A pull request is a system within gits infrastructure to signify the attempt to merge branches
Usually it’s easier to use your git service (bit bucket, github, gitlab) as they have a UI designed for this feature
It allows the team to view all the changes that will take place during the merge, and gives them a chance to provide feedback in a thread style format
Once approved, the lead developer can initiate the merge
A developer does not need to initiate a pull request to merge dev-integration into their local branch as there are no consequences of that, they can just a do a git pull origin [branch name]
Pull requests also provide a good history on your project, as long as the team names their requests appropriately you can look back easily to when a feature when merged in
Like I mentioned previously once everything is merged into dev-integration and thoroughly tested, a pull request can be opened into master. This will then be vetted by the senior developers/engineers on the project and merged, after which production deployment and dev ops can begin
This is of course just a snippet of the whole process and there is plenty of nuance that occurs, the more you work with git the more appreciation you have for it usually
 
Useful Resource - API Marketplace
https://rapidapi.com/
A lot of the time app ideas require an external source of information or some sort of off-app computing in order to provide a useful service
For example, a video game collection app isn't going to contain all the video games that have and will come out, otherwise the app would be enormous in size
Instead when you search for a game to add to your collection, the app will call upon an API which will generally search a massive database of video games alongside other goodies like cover art, release dates, etc.
Often times when people come up with an idea for an app, they'll back down from making it because their idea requires a lot of specific information, or needs some sort of machine learning involved.
Luckily there are a ton of APIs out there that can usually help out with these types of needs, allowing developers to finish up their apps without filling in massive databases, and learning very complex things like machine learning
Today's resource is an API marketplace called RapidAPI
I found RapidAPI, or more specifically Mashape, when I stumbled upon a Hearthstone API that linked to it
MaShape was acquired by RapidAPI a few years ago, so that's the correlation between them in case you're familiar with the MaShape brand over the RapidAPI one
RapidAPI contains tons of APIs in their marketplace that range from movie databases, to facial recognition
Each API has their own page that contains a bunch of useful information such as: popularity, average latency over the past 30 days, average success rate over the past 30 days.
Plus more technical things such as how to access the API in a variety of methods like NodeJS, PHP, and more
It also tells you whether the app is free, freemium, paid, etc.
You can even test our the API right on the page
 
Web News - Multi-Device Workflow
Working across different devices is getting easier and easier whether you’re using the Chrome Extension that was just mentioned, using one of the Microsoft Office apps with the Microsoft Launcher (quickly open from “recent activities” in the mobile versions of the Office apps), messaging people in something like WhatsApp across the phone and desktop, etc.
Does this workflow open up new opportunities for progressive web apps that are responsive
You could be working in a PWA on your PC and have your phone automatically sync with whatever you were working on, and open up right where you left off with just a tap
This sort of workflow also points towards a more unified OS future, whether that be with more integrations between OSs (ie Word on Mac), or actually consolidating different versions of operating systems (ChromeOS/Android)
Microsoft added a Chrome extension that allows Chrome to access the Windows timeline
With the use of the Microsoft launcher being able to pick up exactly where you left off on your comp is a major convenience
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode we discuss website builders in general, then do a deep dive into Webflow.
Segment 1 - Site Builders
There are many reasons out there to use a site builder, they can range anywhere from convenience aspects, to pricing.
I think it’s fairly important for a web developer to be at least familiar with these reasons and also the downfalls of site builders so that when it comes time for them to explain to their customer why they need a custom website, they will be coming at if from a place of knowledge and truth
First thing to get out of the way, some customers will actually benefit from a site builder over a custom website.
People that can find a good template on a popular site builder that fits all* their needs right off the bat
People that like to tinker but don’t have the time to learn a whole new skill like web development
Someone just starting off with a bootstrap budget and a ton of time on their hands for their business
If you ever run into these people and they ask for advice on what they should do in terms of hiring a web design firm or doing it themselves, and they meet any of the specific categories above, you should definitely not hesitate to offer advice on using a site builder. Being honest with potential customers is key to earning trust, and maybe now they won’t be paying for your service but they will remember your advice and honesty when it comes time to update their site in the future
Now with that out of the way, with a lot of clients a site builder just won’t cut it.
If a client brings up a site builder and shows you a template they found and like but then immediately says they want to change x, y, and z. That is a red flag that a site builder just won’t work for them. Changing anything on a site builder can be a huge hassle (sometimes possible) but a lot of the time will require some knowledge in web development anyway.
If security is a huge concern some site builders should be avoided. We’ve had many issues with multiple clients getting hit at the same time with WordPress hacks. The disadvantage of using a large platform like some site builders is that if a hacker finds a way into one site, they find a way into all sites.
Shopify seems to be a fairly safe alternative for ecommerce as they treat security as a extremely high priority.
If the client doesn’t have the time to completely manage their entire website
If they need something very specific like integration into their customer database or their item database.
If your customer thinks their business will grow quickly. Site builders are usually not designed to take on a huge influx of visitors and can have serious performance issues when that happens.
This leads us to something that can be seen a happy medium between a traditional site builder that usually a client would manage, and a custom website/cms that a developer manages. Webflow is kind of a site builder for the web developer. It does require knowledge in css and layouts but is also very visual. If you have a client that you think would like to sit down with you while doing some design changes, or A B testing, webflow allows for easy live manipulation of design and can be a good tool for something like that.
 
Segment 2 - Webflow Overview
Webflow Designer
The Webflow designer is the tool that is used to create the website itself.
It has the more advanced tools that allow a developer to “code visually” meaning that the majority of the controls they’re using are actual CSS properties that they would be typing in manually
For example, if you want to use flexbox on a particular section of your website, and have those flex items centered horizontally. You would add a div for the flex container, add divs for your flex items then with the UI actually set the display property to “flex” and then set your alignment. Instead of typing in CSS properties you’d be toggling the identical options in the Webflow UI
You have a lot of other standard CSS controls as well including things like:
Classes & “Combo Classes”
Width, max-width, min-width, height, max-height, min-height
Padding
Float and clear
Overflow
Position
Typography & Fonts: family, font-weight, color, size, text decorations
Borders
Transitions
etc.
Because this is an editor there are a bunch of non-standard CSS elements that you can add to your pages as well such as Containers that keep your content within a centered not full-width container, or social media widgets that have you entering in your username, or profile URL to setup a “like” or “follow” button
Symbols are a piece of a website that you use over and over on a website. Things like a navbar, footer, sidebar, or widget of some kind all make for great symbols
Symbols allow you to just add them to a page with a couple clicks without having to copy+paste, or remake them in any way
Although I’m only now just starting to use this feature, a lot of the Webflow community seem to really enjoy what Webflow calls Interactions, which allows you to chain together events to create some pretty cool affects
For example, detect the user scrolling to make a certain element move around the page
Some triggers include: mouse events (click, move, & hover), scrolling (in various states like when an element is scrolled into view), page load, etc.
Webflow can also be used to just make the UI and then moved to a different platform, or web server via the export code feature.
In addition, Webflow now has an eCommerce beta for those of you looking to make an online store, however, I have yet to use this feature as it’s still in development and quite new to the general population of Webflow
This means you could make your UI with the visual tools, export the code, then use the CMS and hosting solution of your choice
 
Hosting
Webflow offers a range of hosting plans that range from simple sites that don’t need a CMS, through eCommerce, and full teams that run development agencies - check out which plan is right for you before you begin putting together projects to ensure you get all the features you need
In general I find that the Webflow pricing for hosting and CMS are quite expensive, however, it’s more of a “luxury” hosting in my opinion
Since the spring/summer of 2018 we’ve only seen 1 outage that affected anything for our customers and it was immediately reported by Webflow staff and quickly fixed
It’s important to note that Webflow isn’t like a standard host with cpanel, it only deals with the website. It does not take over your nameserver, it doesn’t have webmail and other features that you’ll find on other services.
 
CMS
The Webflow CMS is broken down into Collections which host content of a single type
Within each Collection are the Collection Items
A basic breakdown would be: Blog (Collection) contains posts (Collection Items) each post has a group of editable fields such as title, post body, cover image, etc. These editable fields are selected by the Designer.
There are a bunch of different types of fields that you can add to a Webflow collection including things like: plain text, rich text, image, video link, link, email, phone, numbers, date/time, toggle switch, color, option dropdown, file upload, reference, multi-reference
Specifically the reference CMS fields are used to reference other Collections
For example: You could have a Blog Post with all the standard fields like title, post body etc, and then have a reference field that points to an “Authors” Collection that contains all the authors names and social media links. When editing a blog post you would select the author in a drop-down menu, that drop-down menu would be automatically populated via the other referenced Collection.
Keep in mind that the Webflow CMS does have limitations on how many reference and multi-reference fields you can add to a collection
In general it limits how many fields you can add to a Collection depending on which plan you choose so make sure you look through all the options
 
Editor
The Webflow editor is for the people that are editing the website, but don’t want access to the designer - Webflow refers to these accounts as “Collaborators”
The Editor offers a trimmed down editing interface that allows those with access to use the CMS to add items to collections via a standard editor that you’d see on something like WordPress
The Editor also allows users to edit some elements on the page, such as text and images, by hovering over elements and pressing an edit button - a more simple approach than that of the more advanced Designer
 
Limitations
As there are with all website builders, there are some limitations that get in the way when working with Webflow
Pagination wasn’t possible until recently, so large blogs would be limited in showing off all their posts, or there a workaround would have to be enacted. Note: Pagination is available now to all users.
Sliders are not fully editable. Users within the Editor can edit the individual photos that appear within a slider, but are unable to add or remove slides - that functionality is limited to the Designer - I found a workaround but it is limited
We were going to use Webflow for the HATT website, however, limitations in how Collections work limited our ability to do so. Specifically we were unable to have different post types (podcast, blog, etc.) and still be able to show them all in a mixed list on the front page. We’d be limited to displaying them in individual sections, per collection (blog, guide, podcast)
We had a customer that wanted to put ads in an Ad Collection, each item would contain a banner that would be displayed on the site in a random order on every refresh. However, we are unable to do that with Webflow’s system, their version of random order which is “Keep in mind that because we cache your site pages on a CDN (which is why they load so fast!), your random sorts on published sites will refresh once every 12 hours. The upside is that everyone viewing the site will see the same (random) order.”
 
Pros: These limitations are either very specific to the customer, or they’ve been fixed with updates (with the exception of the slider editor). Webflow does update rather often so there’s a good chance more functionality will be added in the months to come - eCommerce is a new major feature that has been added since we started using Webflow which is a big step forward. You can also add your own scripts which can extend the functionality of your website if you understand Javascript
 
 
Conclusion
The Designer offers a unique “visual coding” experience that anyone familiar to CSS can take full advantage of
The CMS and Hosting are pricey, but sites load fast and are fixed quickly when there’s an issue (from our experience).
The Editor offers a limited easy-to-use interface for staff members that may not be tech-savvy, but still need edit the site’s content
The documentation and active community make it quick and easy to get help
Exporting code allows you to take your design to another compatible platform easily - avoiding the hosting and CMS plan charges
Web News - The Cookie Law
New May 2018 Reform of the EU GDPR law
If a company operates at all in the EU they must abide by these rules which make them state all information they are collection and allow the user to opt out
This is why now when visiting almost any website you get a popup somewhere that asks you “yes or no” to collecting cookies as well as a blurb about what they collect.
On the one hand it’s great to have this transparency but on the other it seems that almost every time I visit a website this happens, even if it’s the same site and I was there a day before. This leads to a annoying user experience
I think a “Accept All Cookies” button for all cookie websites would be a great idea for the informed user. Having it so someone has to find it and click it would be enough consent in my opinion.
How do you feel about required transparency?
Do you think the EU can be overbearing at times with these anti Corporate pro consumer type laws?
I.e. Hitting google with a 5 billion dollar fine over the fact that their android platform being too dominant
Sometimes these hits to large companies can be passed back onto the customer
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode Mike and Matt discuss what it's like to take on your first website contract as a complete beginner web developer, focusing on a small business website refresh.
Segment 1 - Gathering Requirements
We’ve talked about requirements a few times but this whole conversation will be very specific to a typical first site that a developer will have to do for their first project.
So in this scenario a small business call Happy Coffee has approached you with a request for their old site to be updated. The site is from the early 2000 and is very old, not responsive and has outdated information about their business.
They would like you to update their online presence with the new web standards and make their site look more modern.
Your job here is to figure out what the clients preferences are and if they align with your vision for the new site
Ask them to send you some sites of the their competitors they like and to highlight the specific sections that appeal to them
Ask them about specific features that you know are common to these kinds of ‘business card/online presence’ type sites.
Contact forms
Large cover images
Services offered
Map of the location
Hours of operation
Small “Our Story” section
Photo Gallery
It’s also important to gauge if they have content for you or if you will need to generate content yourself, whether that is images or text.
This will give you a great starting point for either creating a static site from scratch or choosing a template to fill in and adjust
Now usually during the more general portion of this process you’ll also be discussing pricing but I’m going to intentionally leave that part out as it’s a whole other can of worms and can be discussed in a separate episode. But usually for a first project, my advice is to be reasonable with your pricing, don’t do it for free but know that this is a stepping stone and the client is taking as much of a risk on you as you are sacrificing price wise for the client.
 
Segment 2 - Design and Iteration
Generally when someone wants a basic website, especially when it’s a small business, they’ll want to keep the budget low, cutting down on hours is probably one of the easiest ways to lower the price for a customer, having a basic design allows you to cut down some hours while maintaining quality
Often times on larger websites clients will want a wireframe, as well as a prototype, or a fully done-up visual design before they’ll approve the look and you can start coding
When it comes to smaller projects we’ll generally skip a lot of the designing procedure and rely solely on wireframes for a visual aid
As a brief aside, even some of our larger customers accept wireframes as the basis of their design in order to keep costs down and get the project up and running as quickly as possible
Typically we’ll make 3-4 different wireframe layouts based on what the customer has requested, often times we’ll get a few reference sites (as Mike mentioned) from them during the gathering requirements stage of our interaction to speed up our wireframe creation
After showing off the various wireframe designs, we’ll get the client to choose their favourite one, get general feedback if they’re not happy with any of them, or get them to mix-and-match pieces of the wireframes together (slider from design 1, footer from design 3, etc.)
This part of the procedure can take anywhere from a few hours, to over a week depending on how involved your client would like to be in the design - sometimes the design will flip-flop between a few options before finally landing on the one that will be put into production, so this step requires patience
One thing of note, all clients are different, but from our experience if you’re struggling with the basics of choosing one of the designs that you made (ie the client doesn’t like any of them) sometimes you need to have a discussion with them to reiterate what their goals are to ensure that you’re on the same page (ie you might be focusing on showing off their photos, while they just want people to see the phone number and call the office)
Luckily with simple designs the selection procedure is often the least painful and you’ll be off to the development stage in no time
 
Segment 3 - Development
Since this is a simple static site development is fairly straight forward
There are a few choices you will be faced with
Go with a template
Create a static site from scratch
If time allows I would recommend creating a site from scratch as you will learn the basics a lot better, and give yourself a better understanding of CSS, HTML and JS
The workflow I do when creating a site is I first create a skeleton file structure with the typical css and js and img folders. Depending on how you were taught you can either do this manually or with webpack and babel. I’ll focus more on just a simple file structure now but don’t be afraid to use the tools you were taught if you are comfortable with them.
When creating the folder structure create all the necessary files you’ll need to start the site
Index.html
Main.css
Main.js
mailer.php
For the html I like to create the structure of the entire site (assuming it’s a one page site like this one)
I try to keep it as basic as possible with the fewest container divs as I can
Hopefully you have all the content you need for the site already but if you don’t make sure to use lorem ipsum or placeholder images so you can just quickly replace the when you have them
For css my recommendation is to start with a flexbox layout, as it’s supported on most browser version and will not require you to create backwards compatibility/fall back css
Remember to make the site responsive, combining flexbox features and media queries makes this relatively simple for a small site such a this
For js all you’ll really have to handle is the contact form ajax call. So organize a ajax object based on your input fields and create a ajax request to your php contact form to start the mailer process
Mailer.php will then handle creating the email and sending it.
Make sure to do some testing on any device you can get your hands on. Especially smaller phones and tablets as those can be weird resolutions you might have missed. If you have a few friends that can test out the site for you that's always suggested as getting a fresh look on something can be hugely beneficial. They will be able to pick out any glaring errors if they exist right away.
It is also a good idea to set yourself up for future revisions, so if the client states that they will be updating the logo every season or year create a simple file structure and file naming scheme without your application that will make it easy for you to update these files in the future
 
Segment 4 - Deployment
Often times when a customer is just refreshing their design, they’ll want to keep the same setup that they have - same host, domain name, etc. which makes your setup rather easy
Assuming they want their setup the same, you can typically ask for FTP access and then upload your new site design, this is of course assuming you want to go live right away
One important thing of note, is that if you’re replacing an existing website, it’s a good idea to take a backup of it. All setups are different, but in general, creating a new folder called “OLD” and putting the old site files in there is a good way to ensure you don’t delete something vital, or have the site go down for long in the event that something goes wrong with your new design
If something does go wrong with the new design, you can always revert your changes to the old design by copying those “OLD” files back to where they were to lessen the amount of downtime a user might see
In addition, a site owner may want to keep the old site around for people to use for a few weeks before migrating over to the new one, or they may want to get customer feedback on the new design before fully committing and taking the OLD site offline
Every situation is different when it comes to deployment - always remember to never delete something that you can’t get back easily - back it up, even if the changes you’re inputting seem trivial
 
Web News - Android Desktop & Chrome OS
Software ecosystems are meant to bridge the gap between different pieces of hardware - computer (desktop/laptop), tablet, phone, smartwatch
These ecosystems bring the notifications and other features that we all enjoy, cross-platform so that we can continue to enjoy them at our desk or on the go
In general, a lot of these ecosystems are bridging a literal OS gap where people use multiple operating systems in a single device setup such as Windows, Android, Wear OS
Recently the Pixel Slate was released bringing a “laptop-like” tablet that can run Android apps on top of Chrome OS, this type of device is basically a hardware bridge of sorts that is trying to bring you the portability of a tablet, the versatility of using familiar Android apps from your phone, while still having the ability to be used as a traditional laptop - assuming you buy a type-cover for it
This begs the question, where does Chrome OS fit into the equation, when it leverages the use of Android apps?
Should we just have an Android version that is “computer friendly” or goes into a “computer mode” of sorts (ie Samsung Dex)?
Is this rather strange hardware/software bridge pointing towards a future of one OS on multiple devices?
 
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

In this episode we discuss the difficult conversations we all face when dealing with customers including pricing, misunderstandings, and more.
Segment 1 - Saying No
Sometimes customers relations aren’t just selling them on your latest theme, service, or skill - there comes a time where you have to deal with intricacies that have a negative connotation attached to them
Specifically these are often: pricing, value (of work and of the product to the customer), bad content (low quality images, bad copy, etc.) - essentially you’re saving them from themselves, their web presence should start out on the right foot when you’re done with it
 
Pricing
Pricing is almost always a major point of contention between you and your customer
People always want a lower price, and they’ll try anything to get it
The issue with you constantly lowering your price is that even if you don’t intentionally do this, you will have a lesser quality product because your motivation to complete it will drop.
Scope creep (customers adding features onto the original scope of the project) is especially bad when you’re doing a project and being underpaid - and the outcome will be of lesser quality
You should go into a pricing meeting with a price range in your head, or one solid price if you aren’t willing to negotiate, and stick to the plan. If the customer is unwilling to pay a price that you’re okay with, then you just have to back out politely (this isn’t gonna work, thanks for your time)
When it comes to older businesses, or specifically ones that don’t run off the internet, they have issues paying for online services like web development because their business doesn’t generally value the web too much
 
Value
Value and pricing go hand-in-hand, everyone wants what they paid for and preferably a low price on a high value
Sell customers on the value of your work can be difficult depending on how much they rely on their website
For example, if a company if almost completely reliant on their eCommerce site then upgrading it - even for a high price - may be something they’re willing to do to ensure the revenue keeps flowing
On the flip side, if you are working with a customer that simply has an online presence, like a basic website with a phone number - they’ll generally generate their customer via other means (newspapers, word of mouth, billboards, etc.) and therefore will value their online presence less.
When you have a customer that doesn’t value your services much, often times the project will be less complex, however, they won’t offer you a fair dollar for it because it doesn’t generate them enough business to pay for itself over the short term.
Sometimes a customer is looking to become more active online, which is why you were contacted, but they still don’t know the value of a good online presence, what it takes to generate traffic, how to manage social media, etc. In this case it can be very difficult to get a customer on-board with a price that you’re good with, versus the amount of work he wants done to become relevant online because they don’t understand the value of the work you’ll be doing for them
 
Bad Content
We’ve all been there, you’ve been hired to look at an old website that was designed for old SD monitors, you come up with a plan to revitalize it which results in a list of photos and other content that you require the customer send to you (ie staff photos, office photos, staff bios, etc.) and they just say to use the old ones because they look good
This is one of the hardest things to convince people to change, they’re attached to the old photos and text that they wrote years ago, but those small SD photos just aren’t equipped to handle the HD screens of today and will look awful
It’s your job, as unfortunate as it is, to politely push back on customers explaining to them that if they’re refreshing their site, they can’t have old assets on there or else it will look awful. You need to try and convince them to update everything to modern standards and to ensure that any copy is up-to-date
In order to do this try and tell them that their customers will take notice that their site looks messy, or slapped together for cheap which will leave them with a bad first impression.
You can also offer to make some of the content for them, if you’re willing and able to, for a price of course.
Ultimately it's your job to ensure that their web presence gets off on the right foot when you’re done with the project, ensure that things are as high of quality as you can.
 
Segment 2 - Aggressive Interactions
Handling a client that is angry can be a challenge
There are a few strategies that we use to to handle these situations when they arise
Let the client say their piece fully without interrupting them because if they are angry it’s important to figure out why before you can diffuse the situation
Once they seem to be done try to show empathy and don’t deflect their problem back at them. Even if it’s fully their fault take some time to think of it from their side and try to explain to them why the situation happened and what you will do to fix it
Don’t fire back at the customer, it will make them angrier, usually if you treat them with respect through this process they will realize they are overreacting.
Usually the reasons for these aggressive behaviours can be:
Miscommunications
Pricing conflicts
Design misunderstandings
Encountering bugs
Remember you’re the professional in this situation so you have to act like it. Prove to the customer that they should trust you with your decisions.
When you make a mistake own it and give the customer your immediate solution and the steps you will take for them to not happened again
Mistakes happened, most people will be very reasonable when they do as long as you’re clear with them. Aggression can occur when you try to hide something from the customer, especially if it’s a hidden cost or a detrimental experience.
 
Segment 3 - Waiting
A lot of negative customer relations can come from having to wait for a client
Waiting for them to answer an email, respond to your phone call, give you content, or any other situation where you are being held up by the clients lack of communication
Situations can arise where you have a tight deadline set by your client but are being forced to wait on them for content which will cause you to miss the deadline.
To mitigate these situations you have to give your clients deadlines as well. Clearly explain that if they do not meet them then you cannot finish by the deadline they need their product by. These clear and deliberate communications will set a precedent with your clients.
Some good advice that I heard listening to the latest Syntax podcast [The Freelance Client Lifecycle] was to treat your clients as more of a partnership with them. Where you are trying to get something done together, rather than a them vs us mentality.
As we are learning some clients don’t like to read emails in their entirety so it might be beneficial to give them a call a day or so after a lengthy email and ask if they have any questions or concerns
 
False Urgency
A major pet peeve that comes into projects in a variety of ways
Entails calling something an emergency without there actually being an emergency
Often times causes things to be rushed and of lower quality than they would be normally
Sometimes this can cause additional charges on clients who are unsuspecting
Common false urgency dispatchers:
Marking emails are urgent
Saying something is an emergency within an email
Calling a frequently or out of normal work hours (late at night, early in the morning)
These dispatchers are exactly how people actually contact you for a real emergency, however, they’ll try and add urgency to something that isn’t actually urgent just to get it done faster
Often times we’ll quickly do whatever they ask if we’re available only to have those edits go unchecked, or unused, for several weeks
Constant false urgency calls only result in slower response times, and may result in actual emergencies being missed because of the “boy who called wolf” scenario
Web News - The Facebook Messaging Toss-Up
“Facebook is working to allow cross-messaging between Facebook Messenger, Instagram, and WhatsApp, according to a report in The New York Times this morning. Each service will continue to operate as a standalone app, but according to the Times, Facebook is rebuilding the underlying infrastructure so that people who might use only one of Facebook’s properties could communicate with others within the company’s ecosystem. All of the apps will support end-to-end encryption as well. Facebook has yet to provide a timeline for when this will happen.” - The Verge (https://www.theverge.com/2019/1/25/18197228/facebook-instagram-whatsapp-merge-messaging-services-mark-zuckerberg)
 
Facebook Spokesperson Statement
“We want to build the best messaging experiences we can; and people want messaging to be fast, simple, reliable and private. We’re working on making more of our messaging products end-to-end encrypted and considering ways to make it easier to reach friends and family across networks. As you would expect, there is a lot of discussion and debate as we begin the long process of figuring out all the details of how this will work.” - The Verge (https://www.theverge.com/2019/1/25/18197228/facebook-instagram-whatsapp-merge-messaging-services-mark-zuckerberg)
 
What of Instagram Direct?
It’s integrated into Instagram itself, does that mean we’ll have duplicate notifications?
There is a separate Instagram messaging app available in limited countries (not in Canada) called “Direct from Instagram” maybe the messages will be removed from the main Instagram app?
Facebook messaging was removed from Facebook’s app and put into “Messenger”
WhatsApp was acquired by Facebook in 2014
General UX Questions
Will there be a main app that people should use?
Will you lose native features of an app that you don’t have installed (ie WhatsApp profile pic)
Is there going to be a totally new combined app for phones?
Will this work on PC? (if I boot up Messenger either within facebook.com or on the separate web app, will I be able to message WhatsApp folks?)
Do I need to sign-up for all of them?
Assuming you just need one app, which one are you going to use?
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this episode we share some of our tips and tricks that we've picked up along our many web development and design adventures.
Segment 1 - Matt’s Tips & Tricks
Server/Hosting Management
Common things like this include: WordPress updates (plugin updates), migrating to a different server/host, testing a new major feature, adding something a client has requested - but you think won’t work out which will result in a rollback
Always backup files and databases that you won’t be able to get back in their existing state
Be wary of new commands if you have command line access, especially if they’re aimed at deleting files, or folders
Have a recovery plan before you begin so that you can quickly and easily rollback your changes if something goes terribly wrong - planning this out properly may require you to take full backups, prepare a re-upload solution, research re-installation information on some of the software you’re using
Have a testing environment setup that mimics your production environment preferably
CSS
Don’t be afraid of simply setting up a skeleton before moving onto a different part of the site - having a skeleton of the top bar while branding is being figured out is a good way to get started on the site, and frees you up to spend more time on other elements that are more definitive (ie slider, contact form, etc.)
Make your class names easily identifiable, whether you use a naming convention or not, at the very least use something that you’ll be able to identify later and that other developers would be able to pickup on if they interact with your project in the future (example classnames: navbar, nav-item, footer, topbar)
Comments (and this goes for other languages to) should be done to clarify things for yourself in the future, or for other developers down the road, however, sometimes you understand something using references in your own head - do not hesitate to make comments specific to you if you’re actively working on the project, using references that only you understand - making the comments more generic for others when production hits
Test responsivity with true window widths, not just responsive tools, sometimes these tools don’t reflect exactly how different browser window widths will actually react which can result in some overflow left-to-right or some broken elements altogether
 
Segment 2 - Mikes Tips and Tricks (JS Tips)
Use a scope variable
If you’re using just straight javascript for a single page or multipage website create a scope global variable. Make sure that this is your only global variable for the whole project but if you need to pass state or variables between files or pages then use only scope to keep some form of structure and minimize conflicts
Use libraries when necessary
Make sure it has been updated in the past year at least
Make sure the documentation is fairly easy to understand
Check the Open issues tab in github and make sure that there are plenty of closed issues and check those closed issues to make sure you are fine with the answers given as if you have an issue you will have a similar experience
When working on a large project there will be times when you’ve gotta complete features under a time limit. This is where libraries can really save you a huge amount of time and headache. I recently had to create a searchable list for an application with the ability to auto filter the visible list as you type. Even though this is definitely something I could have created from scratch I didn’t want to waste my clients time if that is unnecessary. Doing a quick google search yielded plenty of well maintained, small and feature rich libraries. One called list.js really exceeded my expectations. Here are some tips for checking if a library is worth using:
Do your best to write self documenting code with comments being used only when necessary
I am very deliberate in my function and variable names to make it easy to go back to my code and understand what is going on
If a function is calculating the taxes on the order then call that function calculateTax()
Try to avoid using ternary operators (condition ? true expression : false expression)  in code that will need to be maintained by multiple people over long periods of time. As ‘professional’ as they make you look they are not easier to understand then a simple if statement. Nor do they impact performance in any way
Refactor and clean up code often
With larger projects code can get out of hand really fast. If you’re programming at speed and do a lot of testing where you comment out sections and write new ones to see differences those commented out sections can add up and can contribute to confusion and maintainability in the future
Sometimes you can preemptively create variables and functions and then never use them going forward. These are just taking up space in memory and adding even more complexity to your code for no reason. These are prime candidates for removal in a refactor
Chrome Dev tools are your friend
These are a huge help to me on a daily basis. Being able to put  a breakpoint in my code and view what all my variables read at that time makes testing and writing code so much easier
Web News - Software as a service
With most software companies move to a monthly or yearly subscription model has the standalone application now become a unicorn in our industry?
paying only 5-20 dollars a month for a premium application seems like a easier sell to people then asking them for 100+ upfront. But these 5-20 dollars a month add up and could very well be a much bigger hit on your wallet in the future
Knowing you never own the actual product is also a weird feeling
For the company having consistent recurring income is a huge bonus and allows them to plan much further ahead with features and support. Also very few yearly version upgrades happen, instead choosing to maintain and add features to the same version. This makes for less need to upgrade or migrate to different versions
In my experience a company that gets a monthly subscription is less likely to abandon their product
I.e android app Weather Timeline was a paid application but with it being only a one time fee it wasn’t able to maintain it’s costs and had to take the application down from the store and later on sell it to a different publisher
What do you prefer, a one time bulk fee (approx $100) or a $5-$20 subscription?
You can find us on...
Facebook | Twitter | Instagram  
RSS | Spotify | Reddit
Medium | YouTube | GitHub
Patreon

In this episode we discuss our recently completed coding challenge, making "No BS News for Reddit"
Note: We had some audio issues with the first upload of this episode, if you hear nothing, simply delete your version and re-download to get the updated file. Apologies for the inconvenience.
Segment 1 - Pre-Planning & Design
As apart of this challenge we were allowed to plan, design, and research before the challenge began
To prepare we did some research on PWAs and their functionality
We also researched other news apps, and what subreddits would be the most useful
From a UX perspective, we took a look at which features a Reddit user would need and expect from a Reddit app - minus the social features of course
From this we came up with some wireframes to guide our design throughout the process, which we modified on the spot to accomodate for a “open Reddit post” button alongside alternative share options for PC users
We also had a discussion regarding the addition of custom news sets, where users could select a bunch of subreddits to pull into a single custom feed - this ended up using up a decent amount of time and we didn’t put it into the app in its current state
One other design challenge that we had was making the design pop
Since this sort of app is so text-heavy we were concerned that its monotone nature would end up making it boring, or otherwise, look unfinished and rushed. However, after spending more time on Reddit we realized that this type of app is more utilitarian than it is flashy, so we decided to place it in a dark theme and let the links “do the talking”
 
Segment 2 - App Development
Development went smoothly for the most part
We were able to complete almost all the features that we originally set out to make, including a few extra ones
We had a few bugs popup that were dealt with quickly, namely some responsivity issues with overlapping and some time stamps that were coming in as negative numbers
Vuejs seemed to almost accelerate development due too it’s built in development server and its short code nature for functions and listeners
Vuejs also created the template for the PWA functionality through the Vue CLI
App functionality implementation went as planned and didn’t pose much difficulty other then a couple of hiccups and glitches that had to be fixed
Showing how much time has elapsed since each post was posted showed to be kind of annoying because of how reddit handles UTC time. I have to multiple the time by 1000 to match with the the current UTC time
Working with the reddit api is awesome and a great way to learn API’s and working with json
The app is pretty much feature complete as in line with our MVP (minimum viable product)
Couple of features we are looking to add would be :
a way to create a custom news group
Light theme to go along with the current dark one
The motto for adding features to this is “Is that bullshit?” if we think it is, then we don’t add it
 
Segment 3 - App Deployment
So we’ve already had a few episodes where we talk about deployment in a little more detail but it’s valuable to mention how we went about doing this for the 24 hour challenge aspect
This was by far the most frustrating part of the entire day as this would be only my second time deploying with Docker and to digital ocean
It is simpler than the html all the things deployment because there is no server side containers but due to the time constraint and the fact we started deployment only at around 12am it turned into a problem
The initial deployment as a web app went ok until we hit the SSL certification
We used the same method as with HTML all the things, where we are trying to certify a docker container running nginx using certbot on our ubuntu digitalocean droplet
Unfortunately I didn’t have a lot of experience and combined with already being mentally exhausted I went into a try everything approach instead of using logic
Logically looking at it with a fresh head after getting some sleep got a solution in a matter of minutes
Although this was frustrating this is all part of these short time challenges and must be overcome if anyone wants to be able to work in crunch periods
Sometimes it’s important to step away, as I did that at least 2 or 3 times during the challenge to solve random issues
For next time I think we might do a initial pre deployment before the challenge to at least get the ssl and nginx container worked out, so we have more time to focus on actually developing
 
Web News - Personal Opinions on PWA
Disclaimer: We have minimal experience with PWAs in both the development and consumer side of things, so these are simply our opinions having minimal exposure
Progressive Web Apps fall into a strange segment of the market, because they’re not quite native apps, and not quite websites (at least under the hood)
We’ve entered into a time where the internet is relied upon to power a lot of things and therefore an internet browser of some kind is almost always open on people’s computers, or phones
On the PC, it’s rare that people use traditional “apps” like Facebook, for example, but rather use the website facebook.com which serves virtually the same purpose
PWAs seem to be the bridge between the two, adding accessible offline features to web developers that are creating websites, or web apps, that will eventually need a mobile app of some sort
With that being said, there seems to be a bit of a stigma against non-native software, things like WebViews and other app types are readily available, but the big apps seemt to almost always go the native route - even if that means making two entirely separate apps (iOS and Android), or dealing with porting between the two in some capacity
So where do we feel PWAs fit in?
Will they take off?
Will they displace native apps?
Are they here to stay?
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

In this tidbit episode we discuss our code challenge, announcing official dates, and other considerations that we've thought up over the past few weeks. 
We'll be calling our PWA (Progressive Web App) "No BS News for Reddit" and will be using: flexbox, Vue.js, and service workers to accomplish our task. The challenge will comprise of us trying to complete this app within a 24-hour period. As a PWA, we will be running it on Digital Ocean for hosting, which will also be our finish line. More specifically our goal will be to develop the app to completion, and have a functioning product live on our hosting package. We plan on releasing this app on an app store, or two, however, this will not be apart of the challenge. In addition, any time-based approvals (ie if Adsense needs to approve to run ads on the site) will not be apart of the challenge. We will work around them the best we can to provide an app that people can use before the 24-hour window closes. Before the challenge begins we're allowing ourselves research and design, but no development on the app itself - that will be all saved for the code challenge window.
 
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit

Happy New Year! 2019 has just kicked off, and so has another year of podcasts. In this episode we discuss maintaining your skills after long periods away from your desk. This is the perfect compliment to the recently completed holiday season as many of us are just now getting back to work.
Segment 1 - Keeping Things in Practice
Keep using the technology you deem valuable
The main way I stay on top of my skills is seemingly an obvious answer. By using them
This can be a little difficult though with so many technologies out there and as we’ve mentioned many times it’s easy to get overwhelmed with all the choice
What I try to do is choose projects that will incorporate the technology I value
Sometimes this requires convincing your employer and contractor to adopt something they are not familiar with. So it’s important to be knowledgeable of the positives and be very clear with the downsides right from the get go.
Recently I’ve been proposing using Vue.js for some contract projects
Keep up to date with updates
As technology evolves it usually get a wider feature set and perspective of when to use it can change
I try to stay on top of technologies such as node, Vue.js, react and read their change logs. If a new feature gets announced I try to figure out where I can use it and how to implement it (usually using the documentation). Even if I don’t implement it just by going through the exercise of figuring out how it works I retain a little bit of that knowledge and will more likely know to come back to it when a new project pops up.
Segment 2 - Combating the Loss of Knowledge
When you’re away from your desk for a long time, you’ll become rusty at your everyday tasks and may completely forget new things that you learned just before leaving
Furthermore, there are often times that certain snippets of code are used a single time per project and therefore don’t stay fresh in our minds because we rarely see them
It’s easy to stress over losing knowledge like this because we invested time in learning new skills and in a few short weeks they could be completely gone from our memory
There are a variety of ways to combat this, but it’s not something to stress over as it’s just a natural procedure that our brains do that is out of our control
 
Recording Snippets
 
Programmers of all kinds, whether it be web developers, game devs, or even hobbyists all have some sort of snippets manager
Often times these take the form of a snippets managing software, but it can be as simple as keeping old projects and files laying around in a folder somewhere
One key component to generating snippets is that your code is modularized rather than proprietary for each application, meaning you want to code up functions that can be used over and over again - If you have an application that uses AJAX for example, there should be an AJAX function that you can pass arguments into, rather than AJAX being done somewhere inside of another multipurpose function
Snippet managers are great when you code up something that you know you will use repeatedly, but rarely need to interact with directly
Example 1: You make functions that access and interact with an API once, then you focus on making the application using the data that comes from that API
Example 2: You make a collection of CSS buttons that you use on a variety of projects
Personally, I use a bunch of old projects and files inside of a folder because I always think of the project I did something in, in the past, rather than the name of a generic function. However, I’d like to build up a snippet library in a formal piece of software
There are a bunch of snippet managing software out there, I haven’t used any personally, but some of the ones that came up in a quick search include: Boostnote (https://boostnote.io/), Cacher (https://www.cacher.io/), and Bracket Snippets for Brackets (https://github.com/jrowny/brackets-snippets)
 
Letting Selective Knowledge Go
 
One of our programming teachers in college said that he would selectively let knowledge leave his brain once he had learned and implemented it
Specifically he was referring to a driver that he had written for a microcontroller that we were using in his lab class. He said that he only needed to learn the information for certain parts of the driver once, implement the driver they way he wanted based on his new knowledge, then he forgot about that specific piece of information he learned because he had already gotten from it what he needed
This might be a hard pill to swallow, especially since things take forever to learn when we’re new to them, but it’s a valid statement
If you think about it, if you were working at a company as a Ruby on Rails developer and suddenly got changed to a different team that exclusively uses jQuery for their projects, you’re going to forget Ruby on Rails pretty quickly if you don’t keep your practice up on your own time
I like to think of it as, I learned something to gain value in some way, expended that value to its fullest for my given situation, then moved on.
 
Web News - 2018 in Review, Road Ahead to 2019
2018 Podcast Download Numbers
July - 72 downloads
August - 378 downloads
September - 973 downloads
October - 1234 downloads
November - 1683 downloads
December - 1569 downloads
2018 total: 5909 downloads
2018 Spotify Stream Numbers
July - 0 streams
August - 84 streams
September - 333 streams
October - 618 streams
November - 718 streams
December - 686 streams
2018 total: 2439 streams
As of January 7, 2019
Instagram Followers - 448
Twitter Followers - 60
Facebook Page Likes - 57
2018 in Review
Higher numbers than expected across the board
Podcast was supposed to be a side thing in comparison to templates, snippets, etc, but has become a staple of HATT
Learned a bunch of social media tips and tricks, with a focus on Instagram, secondary focus on Twitter
Goals for 2019
Over 2k Instagram followers
Monetization of HATT through multiple means
Create a developer community through HATT where people can meet other developers going through similar paths to them, finding people to work with
Mikes Goals
Go all in on vue.js
Get a youtube tutorial series up
Become comfortable with webpack and code splitting
Matt’s Goals
Master CSS Grid
Start something on YouTube (Webflow guide? Something else?)
Further my knowledge of social media
Amass to: Get a steady passive income stream setup and running
You can find us on...
Facebook | Twitter | Instagram
RSS | Patreon | Spotify
Medium | YouTube | GitHub 
Reddit