DEV Community: Kenton Vizdos

How to deploy a static site for free

Kenton Vizdos — Fri, 10 Jul 2020 16:55:00 +0000

Every so often, I need to launch a quick landing page. Nothing too fancy, it's usually just a static site connected to a Google Forms (learn how to add responses to a Google Forms from HTML), but I never want to spend too much time setting up SSL certs or DNS stuff.

Way #1- GitHub Pages

GitHub Pages is a great way to publish your static website! It allows you to rapidly setup a page @ .github.io/. You can even set your portfolio page under .github.io if you create a repo called <username>.github.io.

How to setup GitHub Pages

First, you'll want to go to your repositories settings. Once you are there, scroll to the bottom until you see the "GitHub Pages" section. Now, it's as simple as selecting whether or not you want to use the entire master branch, or if you just want to use the /docs directory.

When to use master: I use the entire master branch only when the repo is just the website. If I have any dynamic content (or a mix of things in one repo), I opt to use the /docs directory

When to use /docs: Mainly, /docs is nice because it separates the dev code from production code. Also, if you are using something like JSDocs to automatically generate HTML doc pages (learn how to do that here), having the /docs directory open is the only one you need!

Also, if you don't want to use a github.io URL, you can specify a custom domain!

Way #2- PRAUXY

If you host a PRAUXY instance, launching a static site is as easy as filling out the GitHub repo URL! The nice part about using PRAUXY is that you can have certain sites that require authentication to view.

Once you fill out the form, it'll automatically start up a secure static server. Like GitHub Pages, you can also provide a custom URL to listen on. Unlike GitHub, you can specify a path to serve instead of just / or /docs.

Learn how to setup a PRAUXY instance:

[

kvizdos/PRAUXY

PRAUXY is an open source web proxy with authentication baked in. Built with SendGrid, Termius, and GitHub Pro (provided by GitHub Education Pack!) - kvizdos/PRAUXY

kvizdosGitHub

](https://github.com/kvizdos/PRAUXY)

Conclusion

I use both of these methods. Personally, I prefer PRAUXY because I can add authentication and do a few more things than GitHub, but that may be a little bias, so choose whichever seems right for you! In the end, all either method is doing is providing a place to host a website.

I hope I helped you learn a little bit about serving your websites to the world!

Up your JavaScript autocomplete game using JSDocs

Kenton Vizdos — Mon, 06 Jul 2020 16:55:00 +0000

Note: I realize now that ${!isInSchool && "not"} will return "false" in some cases and not "" like I expected (I've been writing a lot of React Native code lately).. I swear I tested it and it didn't show false, but I just reran it and it did. O well, too many screenshots to fix it.

JavaScript is a great language, but it definitely has it's downfalls. One of the biggest complaints is that there is no strict-type checking, and that really starts to be noticed when autocomplete in systems like Intellisense have no idea what to suggest to you (especially in terms of writing functions with parameters).

Let's take a look at some code to understand the problem.

THE PROBLEM.

In this code above, let's see what happens when we type in the function name.

Notice how the Intellisense is saying the type for all of these parameters are "any"? While it's not a huge deal while typing in params, let's see what happens when we try to use a string function on the name param.

Thaaat.... doesn't help at all. Notice how there are no default string functions showing (things like toUpperCase, toLowerCase, etc). This is where JSDocs come in handy.

What are JSDocs?

JSDocs uses comments to annotate JavaScript. You can also add in extra descriptions and parameters (with types) to have Intellisense (or really any IDE) autocomplete.

JSDocs support is built into most IDEs such as VSCode, but if they aren't inherently supported there are 3rd party plugins to make it work.

How do I use JSDocs?

Writing JSDocs is as easy as pie! First, start the JSDocs syntax with /** and end it with */

The basic syntax goes as such:

/**
 * Description of function
 *
 * <tags>
 */

Make sure that the bullets after the first starting /** have a space before them! Now that we know how to write the basic form of them, let's explore tag types.

In the most basic form, JSDocs tags are:

@author - Developer's name
@constructor - Marks a function as a constructor
@deprecated - Marks a method as deprecated
@exception - Synonym for @throws
@module - Identifies a member that is exported by the module
@param - Documents a method parameter; a datatype indicator can be added between curly braces
@private - Signifies that a member is private
@returns - Documents a return value
@return - Synonym for @returns
@see - Documents an association to another object
@todo - Documents something that is missing/open
@this - Specifies the type of the object to which the keyword this refers within a function.
@throws - Documents an exception thrown by a method
@version - Provides the version number of a library

Source

That's a ton of information. In the end, the most useful ones will be @param , @return(s), and sometimes @module.

By adding an @param tag, we are telling the IDE which type the variable should be (however do note: this is not doing actual strong type checking. It is just used for auto complete and docs). It can come in handy quite a bit, however, since it lets you choose from type methods.

With basic params setup, let's check out what name. will show now:

Ahh, so much better! Instead of just random things, the IDE shows useful methods for the parameter type. Rather nice.

When you start writing the function, the IDE will also show you the types (wahoo!) and the description of the function.

For documentation purposes, having @returns void is good to know so you don't try and return it.

It's almost like TypeScript.. but in normal JS 😲

You may have noticed there is an @author tag. In my opinion, with how good git blames are, it's not totally necessary, but I totally see why a big team would use them for quick on-the-fly knowledge of who wrote what. For me, they don't add enough value to enforce.

Fun Fact: if you need to use an array as a param, you can use [] after the param name and it'll recommend array methods instead.

@param {string[]} stringList

Auto generating docs

You're probably thinking, "well, it seems pretty helpful, but what else can it do?" Well, if you install the npm package for jsdoc using npm install -g jsdoc, you can auto generate interactive HTML docs for your code!

Once you've installed the jsdoc npm package, you can run the command jsdoc test.js (or jsdoc -r . to create all files) and get a beautiful output in the out/ directory.

Auto generated output

If you go to the index.html page, you should see something that looks like the above, and if you click onto the "printInfo" section under "Global," you'll see something even cooler.

Wow! It shows the function, it's description, the parameters, types (along with description, if you put them @param {type} name - description), source, and expected return.

However, with this, there is a downside. If you are writing these for NodeJS and are using module.exports to export a function, it will still appear under "Global" even though it isn't. To fix this problem, let's add /** @module helpers */ to your file and rerun the command.

With that one module line, it now properly specifies where the functions belong. This is nice to know when you have multiple functions like in the example below:

A note on node_modules (or other directories you'd like to ignore)

If you had the pleasure of running jsdoc -r ., you'd quickly realize it was trying to build all of the docs for node_modules as well. We don't want that (usually). There is an easy fix: creating a jsdocs config file.

First, create a .jsdoc.js file and fill it with:

'use strict';

module.exports = {
    "source": {
        "exclude": ["node_modules"],
        "includePattern": ".+\\.js(doc|x)?$"
    }
}

Now, rerun the jsdoc command except as: jsdoc -r . -c .jsdoc.js. There we go, no more node modules :)

Conclusion

I just recently learned about JSDocs, but they'll definitely be in my back pocket from now on. In my opinion, the auto complete and extra detail you can provide is very useful as the readability is much better (also, being able to know which type a variable is meant to be is rather nice). If you want to become a JSDocs super user, you can also add ESLinting requirements to make sure they are written for everything. I have yet to make an ESLint config for it, but I probably will for some of my open source projects!

How to make your website look amazing when posted on social media

Kenton Vizdos — Thu, 02 Jul 2020 06:23:33 +0000

Ever wonder how websites get rich content working automatically when posted to social media?

Want to #supercharge your #JavaScript debugging game? Check out my latest blog post to up your console.log() game to 💯#100DaysOfCode https://t.co/FcjkSORmLF

— Kenton (@kvizdos ) June 29, 2020

Thanks to some fun meta tags, we can do this level of integration seamlessly. Also, some platforms (like Ghost, my blog platform of choice) have the ability to show different images based on the social media platform it is posted on (different for Twitter, Facebook, etc). Let's learn how to get these setup!

The Basics: how does it work?

Rich social media integration is based on Facebook's "Open Graph" meta tags. Normally, the tags are placed between the <head> tag with any other meta tags.

Why use og tags?

Mainly, og tags help increase your click through rate when posted online. Let's use an example: which one of these would you rather click?

I've been doing some research into #SEO to improve my #webdev. Over the course of my research, I've been writing a blog post.

If u want to learn the basics of SEO, my blog post covers most of the higher level stuff for getting into it! https://t.co/JcXPk3aGEz #100DaysOfCode

— Kenton (@kvizdos ) July 1, 2020

Want to #supercharge your #JavaScript debugging game? Check out my latest blog post to up your console.log() game to 💯#100DaysOfCode https://t.co/FcjkSORmLF

— Kenton (@kvizdos ) June 29, 2020

Using this data, we can pretty well estimate that almost everyone would select the second choice as it is more eye catching. Also, in my opinion, it helps show what the website is actually trying to show you. You can even make your cards brand associated like Netlify:

Have you heard about our Build Plugins? Here's a great intro or re-introduction if you're familiar: https://t.co/L9pdDsrV9s pic.twitter.com/UDBCxMw3A3

— Netlify (@Netlify) July 1, 2020

Think your large, e-commerce site won't work on the Jamstack? Well think again, and check out this post on how @bhavana1110 breaks down the process: https://t.co/fIHQYKOkhV pic.twitter.com/aQyciYji9p

— Netlify (@Netlify) July 1, 2020

See how both of these follow strict branding with the left and an eye catching illustration on the right? Someone definitely got paid the big bucks to figure that one out.

How do I use these?

In the most basic form, you can use these meta tags:

og:title - This allows you to change the title to something different than the real page title. This is helpful if your website's proper title is something like "Kenton Vizdos Blog - how to make your website look amazing when posted on social media," but for simplicities sake you only want it to show the stuff after "Kenton Vizdos Blog -"
og:site_name - This changes the displayed URL below the title
og:description - Create a brief snippet of text to show when applicable. Instead of having the browser automatically try and parse it, you can make something truly custom to each site.
og:image - Notice how in the tweet I posted above, the image had an orange background while the actual post had a white background? That would be thanks to og image tags.

Once you choose the types of tags you want to use, you simply put them into a meta tag:

<html>
    <head>
        <title>Hello</title>
        <meta property="og:title" content="My personal blog!" />
        <meta property="og:description" content="How cool is this??" />
    </head>
    <body>
        <p>My awesome website</p>
    </body>
</html>

Congrats! You now know the absolute basics of og tags, now it's time to go make your websites even better when posted online. But wait! There's more...

How to create platform specific og tags

Most of the time, og tags will work on any platform that supports them, but if you want to create different images to match color schemes better, you can do so.

Overall, Twitter has the best custom tags, so lets take a look. Remember, however, that if you use twitter specific tags, it won't appear anywhere else. Having an extra "catch all" og tag may be good.

Twitter was nice when they created these tags. Most of the tags listed above will work perfectly if you replace "og" with "twitter," however there are some good new ones you should know about. Mainly, twitter:image:alt will let you specify an alt text for the card image. Having good acccessibility is always good!

How do I validate these?

Before posting on social media, it's important to double check your work. The good news is that platforms understand the need, so they provide platform specific tools to test them. Here's a list of the top 3:

Twitter Card validator
Facebook validator - Note: you must be logged in to use this for some reason
Linkedin validator

Conclusion

Overall, I hope next time you are making a website you will remember that a little bit more effort can make a website look 10x better when posted on social media.

I hope I helped you learn something in this article, if you did, please share it along to your friends or click the "clap" button below.

What is SEO?

Kenton Vizdos — Wed, 01 Jul 2020 17:36:00 +0000

Search Engine Optimization, more commonly known as SEO, is the act of gaining more users through organic and paid traffic.

What is the difference between paid and organic traffic?

Organic traffic is experienced through natural occurrences such as non-ad based Google Searches and other Search Engine Result Pages (SERPs).
Paid traffic is traffic gained through paid ads or endorsements (Google AdSense, Twitter Ads, Facebook Ads, etc)

Both have pros and cons to growing a website however paid traffic can get expensive fast, though it usually creates good conversion rates as it is much more targeted traffic, but you do lose out on initial click-through rates.

Why should you care about SEO?

While you can pay for ads to display your page on more SERPs, they have quite a few downsides such as being expensive and they have a very low click-through rate being at only 2.8%. On the other end of paid traffic, organic traffic, it is much harder to grow on the rankings, but it is possible with good SEO techniques. Luckily, nowadays modern solutions such as the Alexa Page Rankings exist to show how you can market your site better. Meanwhile, there are two sides to SEO marketing, white and black hating.

White hat SEO uses techniques and best practices to gain search engine rankings to provide more traffic
Black hat SEO attempts to fool SERPs to provide your page instead of others, even though other sources may be more credible.

How do search engines work?

While crawlers (spiders) provide valuable traffic, they also provide information on how easy the site is to navigate. Mainly, they use three main sources for their results:

Crawling- this is the act of going to websites and automatically finding links to visit which get added to queues to be later crawled again (it is a recursive function). Finally, once a page gets added to the queue, the spider will view a pages robots.txt which provides information on which pages the site owner would like to be in SERPs (though the spider does not need to follow the directions, but most do)
Index- crawling provides a source of index, and there are tons of factors to how your site gets indexed, such as back-links, average viewership, bounce rate, session duration, and more.
Rank- this is based on the index and is the final determination of where your page lands in the SERPs

How to tell spiders where to crawl

Robots.txt
Meta tags in HTML (index/noindex, follow/nofollow, noarchive, etc)
HTTP Headers

What do SERPs want to see in a page?

There is no magic way of getting a high index, but they do like promoting sites with content that is easy to find and easily "cardable" (aka when Google shows information from a site without the user actually needing to visit the site). Also, there are recommended page lengths per page. Finally, you can repeat words that you want to be promoted more. This is known as keyword stuffing and can sometimes add value to your index, but Google and other SERPs are taking action against this gray-area of SEO so tread with caution if you choose route.

How do I get feedback on my site?

Visit the Alexa rankings, the worlds most popular ranking and competition scouting site @ https://alexa.com/. For a more direct way, Google Analytics provide highly valuable information that gives very good information about your website and where traffic originates from. Also, the Alexa site is used to find search terms to market for and it'll also find what your competitors keywords are so you can launch targeted ads in their space to grow your business even faster. Google Trends is also a nice site to see what is trending around the world, giving a site publisher valuable access in whats hot and trendy, so if you are a viral company, knowing that information is very important to understand what will go viral next.

Optimizations you can make to your page

Header tags- this allows a crawler to know what your site is about. It is very important to have hierarchical header tags, so keep h1s down and keep h2s for subcontent.
Image optimization- load speeds are very important for who stays and who goes on your site, so if you have huge images on your site, people will leave as the page will not load in time.
Alt text- the more alt text there is, the more SERPs see your page as being which helps you get a higher rank.
Upload a custom sitemap just for your page directly to SERPs- this will make sure all the pages you want to be added are added!
Font size & other accessibility settings
Clear URL name schemes and organization
Use HTTPS when possible (and always.)

Test your site with Lightsail and Google Search Console

Google Search Engine is a valuable resource to test the integrity, availability, and mobile usability of sites. Below is a test I did on my blog website and it gives you an automatic screenshot for different sized devices. The next image is a screenshot of the availability checklist

Mobile screenshot from Google Search Console

Availability screenshot

After you run Google Search Console, you can run a Lightsail audit to test performance, best practices, accessibility, SEO, and more. On my blog, I scored quite a good score being above 90% for everything (except accessibility which I plan to fix)

Lightsail Performance Results

The last step: Link Authority

Link Authority is a major step in being well-suited for SEO success. Link authority means that you are a "trusted" source which means that many sites have linked back to you and/ or that you've gotten a lot of social media traffic.

What did I learn from this experience?

I learned that SEO is a difficult thing to master, however once you do, you will be much more suited to succeed, so it is worth it to take the time to properly learn the values of SEO.

Supercharging your JavaScript debugging with console methods

Kenton Vizdos — Mon, 29 Jun 2020 17:35:00 +0000

As we all know, the only way to debug JavaScript code is with console.log(), but do you know how you can supercharge your debug game with other console methods? Let’s take a look at all of the console logging methods!

General console.log()

In the most basic form, console.log() will simply output a string of text to the JavaScript debug console which is present in most browsers.

Warn and error logging

To add extra zest to your logging, you can use console.warn() and console.error() to change the output color of your message (it works in most browsers to show a red or yellow background!)

Timing functions!

Ever wanted to see how fast or slow a function evaluates in? Well, you could use some hacky things where you create some date variables at the beginning and end of a function, but there are NEW ways of doing things.

Introducing..... console.time() and console.timeEnd()! Using these two functions, you can evaluate and output the duration of a method automatically.

Also, if you want to add extra/multiple time functions inside of one method, you can use console.time(label) and console.timeEnd(label) which will let you nest timings as long as the labels are unique.

Asserting with console.assert()

console.assert(<expected true value>, <error message here>)

Asserting with the console is one of the coolest things you can do. If you normally write outputs of variables to see if they evaluate to something, “console.log(x == 1)”, you can refactor that into a really nice output using assertions. With assertions, instead of printing when the value is true, it’ll only return if it is false, and you can even return a fancy output!

console.assert(true == false, “True does not equal false!”) will output “True does not equal false!” but if you change it to console.assert(true == true, “True does not equal true!”) will return nothing as the statement is true.

Console grouping

Grouping can be useful in some situations. If you want to keep track of a ton of different functions, you can use console groupings instead of function pretends (e.g. you don’t need to say “functionName: ”). You can even collapse certain groups to clean up your output :)

console.group(name) creates a group, and console.groupEnd(name) finalizes and outputs the group. Pretty neat stuff!

Supercharging console.log() is a crucial step in creating beautiful outputs of logs, so I hope you learned something helpful in this article. If you learned something, please let me know by tweeting me, @kvizdos !

TIL 2: How to add a transparent video to a web page

Kenton Vizdos — Tue, 16 Jun 2020 01:27:20 +0000

Today, I released the PRAUXY GO launch page. For history's sake, here is a screenshot:

PRAUXY GO Launch Page

This time, I decided to try something new. While making the launch video, I was creating a word cloud and thought: how could I put this word cloud in the header of the launch page? In my opinion, it'd make the page pop a little bit more than usual. For those of you who haven't seen the PRAUXY GO launch video, here it is:

Interested in #coding on your iPad?

Today, I'm opening the waiting list for #PRAUXYGO, a revolutionary iPad IDE for #developers.

This #IDE currently supports #NodeJS and most things #webdev, but the language support is growing 🔥#code on an #ipad https://t.co/3GRTrDHTyj pic.twitter.com/wxirJB7QqY

— Kenton (@kvizdos ) June 15, 2020

My first thought to creating a video in the header was to use an animated GIF, however I quickly learned that they do not support transparent backgrounds :(

Feeling a little stumped, I took a break and came back after a little while. After remembering creating some transparent videos before for some OBS overlays, I took to Google and learned about transparent webm's using VP8 and VP9 encoding. There we go!

After I learned about that, I downloaded a questionable extension for Adobe After Effects and exported a new transparent webm file. Wahooo! While looking over the docs, I did notice that the browser compatibility was a little lacking, but not horrible. Overall, it didn't have support for IE and Safari, but using the HTML video tag's poster attribute, I managed to create some workarounds.

Webm browser compatibility as of 6/15/2020

So, once I exported my video and moved it into an assets directory, I started writing some video tags.

<video autoplay muted>
    <source src="assets/cloud.webm" type='video/webm'>
</video>

Aaaaannnd when I checked the website... it didn't work. Nothing showed. I was rather confused. Turns out, you to add a few things to the type attribute as of now because of compatibility. Without adding the codecs piece to the type attribute, it will not work.

<video autoplay muted>
    <source src="assets/cloud.webm" type='video/webm;codecs="vp8, vorbis"'>
</video>

Nowwwwww, it still didn't work, but at least it displayed an initial frame. It would play if I added controls to the video and manually played it, but as many of you know, Chrome is heavily restricting the amount of autoplay content out there.

Now I was very stumped, so I did the only right thing to do: searched Google. I came across this answer on StackOverflow https://stackoverflow.com/a/56972239/6457558.

After changing up my code to reflect it, I got this:

<video onloadedmetadata="this.muted = true" playsinline autoplay muted>
    <source src="assets/cloud.webm" type='video/webm;codecs="vp8, vorbis"'>
</video>

It turns out, Chrome (and most browsers) do not play video until a page is interacted with (and more specifically, the exact element). The work around? Muted video. But, just adding muted gets most browsers, but not all of them, so you need to manually set some object variables on the metadata load.

If you do some testing now, you'll realize it works really well on most browsers, but Safari and IE are still lacking behind. To fix this, I remembered that you can supply a poster attribute to a video tag. This allows the browser to fall back to a different image if the video fails to load and it'll also show before content plays as it loads the video (especially if you enable manual starting w/ controls).

Oh, and as some of you are probably wondering: doesn't this add a ton of weight to a website? Well, not exactly. My video was simply 1.5 seconds at 24 fps @ 1280x720 (I chose 1280x720 because I knew it would never be displayed full screen. I'm sure I could reduce the size more if I needed to) with a grayscale coloring. In my use, the file ended up being 298 KB! Comparing that to a still frame I used as the poster which was 226 KB, I'd say it's not too horrible. You can always lazy load these or simply not display them on slow connections if you see fit. Als0, I feel like there is a very small use case for when to actually use videos, and when you do I really don't think it should be a long one, especially on a web page (unless your site is made for content delivery, most things can be done with CSS animations now adays. I was just lazy).

Word cloud image for reference (226 KB)

Pretty simple TIL today, but it's one of those things that I'm sure one day, for a very oddly specific need, I will need to come back to. And hopefully, I helped one of you!

Any feedback is greatly appreciated, tweeting me, @kvizdos , is the best way to do so!

Thanks for reading & a share never hurts :)

TIL 1: How to POST to a Google Form using HTML

Kenton Vizdos — Mon, 15 Jun 2020 01:57:33 +0000

So today, I was creating an input section on a new website and I really wanted to automatically submit the responses to a Google Form. In the end, I wanted to do a basic HTML form with an action to Google, and luckily after a little testing I figured it out.

And yes. I do know this probably isn't the safest way to do things, but it was the most efficient and easiest for a simple POC I am making.

From the start, I tried to directly post to a Google Form with fields I assumed would work.



POST /forms/d/e/<formID>? HTTP/1.1
Host: docs.google.com
Content-Type: application/json
{"name": "Kenton", "email": "test@test.com"}

However, I was quickly met with a 404 :( Nothing too scary though, lets see if adding view form would work.



POST /forms/d/e/<formID>/viewform HTTP/1.1
Host: docs.google.com
Content-Type: application/json

{"name": "Kenton", "email": "test@test.com"}

Presumably, this fails. It sends a 405 HTTP code, meaning that the method wasn't allowed. This was caused by sending a POST request to a GET endpoint.

Stumped, I decided to go to Google. But, instead of just Googling things, lets learn how to get the correct endpoint when you aren't exactly sure.

As an example, here is a test form that I setup. It simply captures a name and email.

Test Form example

Now that we have our form, let's open up the preview. After we have the preview open, open the Chrome Developer Tools and go to the network panel. Make sure you toggle "Preserve Log" from the top bar. This will let us see network traffic even after we've been redirected.

Great! Now, lets type in some fake input (make sure you remember what you typed in, it will become useful later) and submit it. Once you do so, you will see your network panel blow up with requests. It should look similar to below:

While it may seem daunting at first, fear not. The only thing you need to look at is at the very top of the list where it says "formResponse"

Once you click in there, scroll to the very bottom of the Headers section until you find the Form Data section. Now, you will notice some odd things. Mainly, the field names aren't exactly what one would first assume considering what I named "Name" is now entry.3403608 (expect that number to be different than yours). This is why submitting recognizable information in the previous section was important. This allows us to easily recognize which field goes where.

Now, to double check that Google isn't playing tricks, we should do the submission process again, however I've discovered it doesn't change in between requests. Phew.

Cool. Now, we discovered the correct endpoint, https://docs.google.com/forms/d/e/<formID>/formResponse. Simple enough. Now, we just need to adjust our HTML input names to reflect the correct Form Data fields. To do this, simply add a name=<ID> into your code. An example is below.

Boom! You now have a fully working form that submits directly to Google Forms.

And again. The way this is setup has minimal security and spam protection, but it has about the same as a normal form due to the rate limiting and smartness of Google. If you would like to add a bit more security, you can enable "Collect email addresses" and/or "Limit to 1 response" however it will require the user to submit the form on Google Forms after they submit on your site.

As an example, I setup Limit to 1 Response and got this warning once I clicked "Submit" on my locally hosted form:

So, if you don't mind losing a little spam protection to create a basic form for your users, this will work. And, if you do want a little bit more spam protection, you can enable Limit to 1 Response or have it collect email addresses automatically (though an "email" input will not auto fill a required email field, just fyi). For my needs, a non-limited and non-capturing form was plenty, and if I notice spam starts to happen I can seamlessly turn on single submissions.

Soon, PRAUXY.app will include a Secure Google Forms middleman that will allow you to limit to one response without a secondary submission, but for now, that does not exist :)

Let me know if you use this and I'd love to hear feedback if you have any!

How to add a clap button to your blog

Kenton Vizdos — Fri, 08 May 2020 18:21:00 +0000

Let's get the first question out of the way: why should you add a clap button to your site?

In my opinion, it provides good analytics on which posts do well and which could use some work. Also, you can use Google Tag Manager to track the clicks overall in more depth, let me know if you would like a tutorial on how to do this, but as of now, it goes a little bit out scope.

Also, ever since Medium integrated them, they are pretty much common place on blogs. Luckily, the great people at https://applause-button.com/ have done most of the heavy lifting for us!

Lets get started.

First, pull up your post code. In my case, I'm using Ghost with a custom theme, so I will open my post.hbs file.

...
            <article class="postauthor">
                <article class="about">
                    <img src="{{primary_author.profile_image}}">
                    <article class="info">
                        <article>
                            <p class="name">{{primary_author.name}}</p>
                            <p class="bio">{{primary_author.bio}}</p>
                        </article>
                        <a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" class="twitter"><i class="fab fa-twitter"></i> {{primary_author.twitter}}</a>
                    </article>
                </article>
                <article class="support">
                    <a href="https://paypal.me/kentonv" target="_blank" alt="Support"><i class="fas fa-donate"></i></a>
                </article>
            </article>
        </article>

</section>
{{/post}}

Here, you can see the very bottom of the file. We simply need to make one small modification of adding the following code into the page:

<section id="clapper">
    <applause-button style="width: 58px; height: 58px" color="#3f9dff"></applause-button>
    <article>
        <h2>Enjoy the article?</h2>
        <p>a clap is much appreciated if you enjoyed. No sign up or cost associated :)</p>
    </article>
</section>

Overall, the bottom of my file now looks as such:

            <section id="clapper">
                <applause-button style="width: 58px; height: 58px" color="#3f9dff"></applause-button>
                <article>
                    <h2>Enjoy the article?</h2>
                    <p>a clap is much appreciated if you enjoyed. No sign up or cost associated :)</p>
                </article>
            </section>
            <article class="postauthor">
                <article class="about">
                    <img src="{{primary_author.profile_image}}">
                    <article class="info">
                        <article>
                            <p class="name">{{primary_author.name}}</p>
                            <p class="bio">{{primary_author.bio}}</p>
                        </article>
                        <a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" class="twitter"><i class="fab fa-twitter"></i> {{primary_author.twitter}}</a>
                    </article>
                </article>
                <article class="support">
                    <a href="https://paypal.me/kentonv" target="_blank" alt="Support"><i class="fas fa-donate"></i></a>
                </article>
            </article>
        </article>

</section>
{{/post}}

Wahoo! We're almost there. Now, we simply need to add the Applause Button CDN into our header. Most blogging platforms have header injection options, so lets go look at our Ghost admin dashboard.

Ghost Dashboard

On the side, you can see "Code Injections." Let's check there first.

Site Header Injection

Perfect! A place we can simply place our CDN code. Let's give it a shot!

Place the following in that textfield:

<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>
<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css">

Ghost Injections

Yay! Now, if you go back to your ghost site, after restarting it, you should see the following at the bottom of your header:

Cool, now, let's give it a shot by trying to hit the clap at the bottom of this page! You can also test it on your own site :)

Make sure to make sure it still works by clicking on the clap below. Hopefully, I helped you learn something!

let vs const vs var: when to use which

Kenton Vizdos — Fri, 08 May 2020 00:21:19 +0000

Variable used to be the norm in JavaScript, but now there are better players on the playing field: let and const. The main difference? Scope.

See, scope is important in programming. In most cases, always using global variables isn't a great idea, but there are still some good uses for it if you look hard enough.

First, lets go over the similarities and differences between let and const. Mainly, both are locally scoped so:

const letsTest = () => {
    let x = 5;
}

letsTest();

console.log(x) // this fails.

But also, it is very useful in for loop scenarios:

var a = [];
(function () {
   'use strict';
   for (let i = 0; i < 5; i++) { // ***`let` works as expected***
     a.push( function() {return i;} );
   }
} ());
console.log(a.map( function(f) {return f();} ));

As expected, a now equals [0,1,2,3,4], however if you make a small change by changing let to var, you'll notice things start getting gross as it would return [5,5,5,5,5]

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Block_scope_with_let

As for a difference, const is a constant variable (woah), so it cannot be changed after initialization

const x = 5;
x = 1; // Fails.

Other than that, let and const are pretty much the same. Better than var. As of ES6, var hardly ever should be used.

While this is a short article, it is good to know the very small differences between the three. Best of luck with your variables!

The basics of fetch()

Kenton Vizdos — Sat, 02 May 2020 03:36:15 +0000

Are you sick and tired of writing huge XMLHTTPRequests in your JavaScript code?

Oh, you already stopped using those ages ago.. right..

Well, somehow, fetch() never caught my attention until just recently so I've slowly started switching over to using it over alternatives as I think it is a beautiful built-in function baked directly into JavaScript!

Compatibility

And sure, fetch() may not be the best option for fetching API endpoints (cough cough THANKS INTERNET EXPLORER cough cough) and it is still unclear whether or not interviewers will care if you use it, but it sure is debated

I’m conflicted. When I interview front-end candidates, most React devs pull in Axios for fetching JSON (instead of fetch), moment.js instead of Date objects, and want to use Bootstrap or a CSS framework instead of flexbox or grid. https://t.co/Q3ITv7A0V5

— Marc Grabanski ✌️ (@1marc ) April 19, 2020

Buuuut it is still fun to use. But first, we do need to clarify the Internet Explorer compatibility...

Internet Explorer has no compatibility

Yeahh, so it's not perfect, but considering Edge has support, maybe you could just.. let IE slide and hope nobody uses a program that looks about a million years old..

Internet Explorer in 2020

While Internet Explorer IS ugly and not commonly used, it is still used by a couple of people, so if you are looking to support them, you should look into third party libraries such as Axios, or keep up with XMLHTTPRequests.

The Good Stuff: how to use it to send a GET request

So, you've made it this far. You've decided to leave Internet Explorer users in the dust. Let's get to some syntax.

fetch('https://www.reddit.com/.json?limit=1');

Simply put, this will return you a Promise statement, so lets learn how to use that:

fetch('https://www.reddit.com/.json?limit=1')
    .then(response => response.json());

Now, you've managed to parse your request into usable JSON, so lets go one step further:

fetch('https://www.reddit.com/.json?limit=1')
    .then(response => response.json())
    .then(data => console.log(data));

XMLHTTPRequest generated by Postman

Kachow! You've successfully pulled the first result from the front page of Reddit and printed the result! Now, lets look at the XMLHTTPRequest for

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    this.responseText = JSON.parse(this.responseText);
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://www.reddit.com/.json?limit=1");

xhr.send();

XMLHTTPRequest generated by Postman

Ew. Why right 13 lines when you could simply write 3 (ssshhh about compatibility..)???

It gets even better when you start doing other things, like POSTing

Sending a POST request using fetch()

Do note: when using fetch(), you will not receive cross-site cookies and you won't send cookies unless you set the credentials option, which we will get to below.

fetch('https://myawesomeapi.example/new', {
    method: 'POST', // or GET, PUT, DELETE, etc
    headers: {
        'Content-Type': 'application/json'
    },
    redirect: 'follow',
    body: JSON.stringify({
        name: "this post is 10/10"
    })
}).then(response => response.json()).then(data => console.log(data));

Simple POST request complete! While it still isn't the prettiest, it's definitely better than whatever this is:

var data = JSON.stringify({"name":"this post is 10/10"});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://myawesomeapi.example/new");
xhr.setRequestHeader("Content-Type", "application/json");

xhr.send(data);

Going back to sending with credentials (cookies), make sure you allow credentials on the API side in CORS. After that, you can simply add "credentials: 'include'" into the options above body (it doesn't really matter where, it just needs to be somewhere in the same object). Or, if you don't want to send credentials, you can use "credentials: 'omit'"

Wrap Up

This was a very brief overview of the fetch() api. There is a lot more you can do with it, like uploading files, but that goes out of the basic scope of this article. If you are interested, send me a tweet @kvizdos and I'll write a more in depth post "All about fetch()" instead of "the basics." Overall, should you use fetch() over Axios or XMLHTTPRequests: it depends. Do you want to support IE? Then you need to use Axios or XMLHTTPRequest or one of the gazillion other options. If not, fetch() is a nice library built into JavaScript that requires 0 dependencies, so it can keep your code base a little bit smaller and a little bit cleaner if you care.

I hope you learned something from this post!

What is PRAUXY?

Kenton Vizdos — Sun, 19 Apr 2020 15:00:08 +0000

Hello everyone!

I thought I'd finally share my pet project that I've been working on for a while now called "Prauxy." The main purpose of this app is to let me proxy my web applications easily while still having the ability to have SSL, authentication, custom domains, and static site hosting in one place.

For those who don't know me already, I am a high school junior and have been developing websites for the greater portion of 4-5 years. It's been really fun and this is definitely one of my larger projects.

If you are interested, I'd love it if you checked out the "launch" page for it at https://prauxy.app.

Launch page sneak peek (I encourage you to look at it in the actual website though!)

I'd love any feedback (either by tweeting me, @kvizdos, or emailing me)! If you are interested in looking at the code, it is all open-sourced at https://github.com/kvizdos/PRAUXY

WHY

In short, I got annoyed at needing to create new nginx vhosts for every single application I created. I do a lot of remote development through a VSCode web interface and it got really annoying to need to setup a vhost if I were to access it from outside of my network. With this, I can create a secure development environment that I could give stakeholders access to on a need-to-access basis (stakeholders in my case being teachers, friends, etc who want to view a test site/homework assignment).

Also, my school is a "specialty center" for IT/PM stuff and I've been talking with my CS teacher who wants to set up an in-house system that the App Development course students can use to host their websites on (mainly because we don't have the budget for anything else, but do have some servers that have been donated to us).

Main features include:

Advanced authentication system
This also includes multi-factor support (more details below the screenshot)

This allows you to add authentication to apps that do not support it directly out of the box. I also like to use it for things that "have" authentication out of the box but require new credentials for it. This allows me to have one login for all sorts of applications.

Multi-user support

For storing passwords, I decided to use bcrypt. Also, there is a basic permission scheme setup to allow certain users access to certain sites while not allowing others.

Proxy applications

Instead of creating a vhost or whatever in Nginx/Apache, this will automatically route incoming requests properly.

Static site hosting

I do a lot of testing / static coding for fun so I wanted a way to easily demo the items. With Proxy, I can link a GitHub repo to it and have it automatically pull new updates on any new push.

Full mobile support (PWA)
SSL support

While SSL support isn't where I want it (full SSL), it still works very well for my needs, however, you still need to manually create a certificate for non-wildcard domains (e.g. custom domains).

Plans:

Next year, for my high school senior capstone class, I plan on integrating a full mobile IDE that is made for tablets as there is a huge empty space in the tablet development environments. Also, I do plan on adding a dark mode because.. I don't like being blind.

If you want to view the larger road map, I encourage you to look at the Trello board located at https://trello.com/b/UPlQNXcH/prauxy

Stack:

Right now, it's using NodeJS in the backend w/ MongoDB for the database and Redis for caching. For the front end, I am just using normal HTML/CSS/JS but I eventually want to switch over to Vue. I started this project in HTML/CSS/JS because I thought I wasn't going to go far with it, but now I'm deep into it so it'll take a bit for me to convert it.

As for project management methodology, I used Scrum. I used Scrum because I have my CSM and CSPO and have really enjoyed using it in the past to get things done quickly and efficiently.

On a side note, the GitHub Student Pack helped immensely in the creation of PRAUXY!

If you are a student and have yet to see the GitHub Student pack, you've got to check it out! It is packed with a ton of amazing premium subscription based services, but for free!

From the pack, I've mainly been using a premium SendGrid account to handle all of the email services that Prauxy requires (mainly for user registration). Without SendGrid, however, it would've been a much sadder process, but I still could've gotten through with their free plan.

Next, my school laptop, the one I do most of my programming on during school hours (through a VSCode web interface), has 0 access to a terminal and while I can access a Guacamole session while Prauxy is running, if I just so happened to crash Prauxy, I'd be locked out. This happened a ton while in the very early stages, especially before I started using PM2. But, either way, I now use Termius on my phone which lets me SSH into my server through an SSH key. It has a great interface and really saved my butt some days!

Also, while it's not as important now, the Pack also comes with GitHub Pro which allowed for private repos pre-freeifying them.

Here are some screenshots to show the flow:

PRAUXY login screen

PRAUXY MFA screen

I really like my login system here as it supports both TFA tokens through Google Authenticator / etc, or you can simply confirm the login ID through another previously logged-in device ("Confirm on different device"). This feature is similar to Google's confirmation on a different device.

This is what users on a previously logged-in account would see (as long as they are logged in with the same username)

Also, if you click on the wrong number it will reset the codes on both the previously-logged in user and the user trying to log in. While it's not necessary, it adds a little bit of marginal security if someone where to access the system from the outside (which shouldn't be possible through the way it is currently set up, but there are probably ways.)

PRAUXY home page

On the home page, you can see all of your proxied "apps." In my case, I have a few different development environments and also a proxy into VSCode (using Coder). I really like having the authentication through my proxy system as it allows me to set permissions for who can see what. It is also handy to add strong authentication to systems that do not currently have it (e.g. vscode).

PRAUXY "Add an App" modal

PRAUXY Static Sites

Here is the UI for the static sites. I'm not a huge fan of the emptiness, but I'm still learning the UI stuff and it has come a long way since the start. As for adding the sites, it's quite simple as you just fill out the form (below), set up the GitHub webhook with the appropriate secret key, and boom, you're done!

PRAUXY Add Static Site modal

PRAUXY Users

There is also full support for multiple users. The only downside is that the permissions aren't great (e.g. each user is sort of an "admin" where they can do anything on the site, but..). Mainly, the current permission level lets you set a level for access which you can set for each app. This allows you to give all Level 1s and higher access to X environment but they cant see Level 2 apps. I had to make this feature quickly for a school assignment where I needed to give my friends access to a VSCode environment that was separate from my main one, but also not let them access anything else.

PRAUXY Add User

Super simple add user form. Sends the user an email with a temporary password using SendGrid.

PRAUXY User Settings

Here, you can change your password and email (and soon username, etc). It is basic, but also usable. You access this page by clicking on your username in the top right next to the log out button.

Thanks for reading, hope you enjoyed! If you have any feedback, questions, or concerns, I'd love to hear it!

How to automatically backup Ghost blogs

Kenton Vizdos — Thu, 19 Mar 2020 05:44:03 +0000

Here's the issue. I'm always messing up my server, but now I'm running more production services on this server than my other server, so I need to figure out how to not lose all of this blog data if something catastrophic were to happen.

Lets get started.

Step 1: Figure out what you need to back up.

In my case, I would like to back up both the text posts and other generally backed up things (through Ghosts interface) as well as photos and videos that I may upload in the future. This guide will be for backing up both to Google Drive.

Take 1 (DONT (just) do this): Backing up root Ghost directory

Boom! Easy solution, just gotta copy one directory, zip it up, and send it to Google! Boom boom boom done.

No. Don't just do this. This will not copy any blog data when running in production mode as they are saved in a SQL database. Let's figure out how to fix it.

Take 2: Save the SQL database AND Ghost content directory

"Two steps" here, just saving the SQL database and just copying the ./content/ folder in Ghost.

Step 1: Create a backup MySQL user

This is good practice just so you can backtrack things if needed. It is also good to just give a user permissions that they require, no more, no less.

mysql> CREATE USER 'backup'@'localhost' IDENTIFIED BY '###';
mysql> GRANT ALL ON ghost_prod.* TO 'backup'@'localhost';
mysql> FLUSH PRIVILEGES;

Step 2: Create ~/.my.cnf file

Modify the file ~/.my.cnf to include the following, and then make sure it requires chmod 600.

[client]
user=backup
password="###"

# chmod 600 ~/.my.cnf

Step 3: Create backup scripts

To back up the MySQL database, we will be using MySQLDump to save the file as a gzip with the date.

Lets figure out this command

mysqldump ghost_prod > ghost_prod.sql

The above command would technically work, however it won't be compressed, so if a blog is large, the file will most likely be large. Let's figure out how to date and compress the file.

mysqldump ghost_prod | gzip > ghost_prod-$(date +%Y%m%d).sql.gz

This is a good example on how to zip it up and save the file with a date. Now that we have the database saving setup, let's test it (or, at least I will to double check my work).

Step 2.5 (optional): Test backup commands

Run the above command
Make a Ghost backup through the UI
Drop the ghost_prod table "DROP DATABASE ghost_prod;"
Exit MySQL
Recreate the table using mysql -e "create database ghost_prod";
Decompress the backup gunzip ghost_prod-(date).sql.gz
Restore database mysql --one-database ghost_prod < ghost_prod-(date).sql
Success (hopefully)

Step 3: Compress content

tar -zcvf ./content-$(date +%Y%m%d).tar.gz /var/www/ghost/content/

Step 4: Putting it all together in a script

Notice in the script I changed from having the date in the file name to having it in Backups/ghost/(date)/<files>

#!/bin/bash
now=$(date +'%Y-%m-%d_%H-%M')
echo "Making backup folder for $now"
mkdir "/home/kenton/Backups/ghost/$now"

echo "Saving ghost_prod Database Backup $now"
mysqldump ghost_prod | gzip > "/home/kenton/Backups/ghost/$now/ghost_prod.sql.gz"

echo "Compressing content folder"
tar -zcvf "/home/kenton/Backups/ghost/$now/content.tar.gz" --absolute-names /var/www/ghost/content/ > /dev/null

Step 5: Keep backup in Google Drive

Install rclone sudo apt-get install rclone
Setup rclone rclone config (I set the name to google-drive)
Change to script to include rclone code (make sure to change (USER) to your user)

echo "Sending to Drive"
/usr/bin/rclone copy --update --verbose --transfers 30 --checkers 8 --contimeout 60s --timeout 300s --retries 3 --low-level-retries 10 --stats 1s "/home/(USER)/Backups/ghost/$now/" "google-drive:ServerBackups/ghost/$now/"

Step 6: Cronjob

Add a crontab -e item
For this example, we will back up the data every day at midnight: 0 0 * * * /home/(USER)/Backups/backup.sh

Step 7: Congrats! You're now fully backed up!

While I have no liability for any lost data, I'm nearly sure you won't lose any as long as it is backed up. This solution makes sure to keep multiple copies of data across Google Drive and local devices, so you should be good if you ever need to reset.