» Sticky Footer Using Flexbox

October 19, 2018 - 1 minute read

The Power of CSS

I am sure all web developers have run into this problem at some point or another, wanting a footer to ALWAYS be at the bottom of the page. I certainly did while designing this blog. Luckily, I came across Flexbox.

Using Flexbox, footer positioning can be handled by only a few lines of CSS by using the flex and flex-shrink properties.

» Twitter Cards & Open Graph on Jekyll

October 15, 2018 - 6 minute read

Getting Started

In Jekyll, there are two types of variables:

  • {{ site.VARIABLENAME }} for the entire Site located in _config.yml (mine)
  • {{ page.VARIABLENAME }} for a specific Page located in the front matter block (see YAML)

The Jekyll variables we will be using are: {{ site.url }} {{ site.description }} {{ site.photo_embed }} {{ site.twitter_username }} {{ page.url }} {{ page.title }} {{ page.excerpt }}

In your _config.yml make sure to define “url”, “description”, “photo_embed”, and “twitter_username”. For example, this is how mine are defined:

...
url: "https://anthonyvadala.me" # The base hostname & protocol for the site
...
photo_embed: /images/profile_picture.jpg # Sets picture for Twitter Card/Open Graph
description: Hello, I'm Anthony Vadala! I am an aspiring network specialist and hobbyist web designer.
...
twitter_username: Anthony_Vadala
...

» How to Remove Commit History From GitHub

October 08, 2018 - 1 minute read

To begin, open your terminal and cd to your project directory.

Steps

Check out to a temporary branch

git checkout --orphan TEMP_BRANCH

Add all files

git add -A

Commit changes

git commit -am "Your commit message here"

Delete old master branch

git branch -D master

Rename temporary branch to master

git branch -m master

Force update to repository

git push -f origin master

» Hosting Your Website on OneDrive

October 02, 2018 - 1 minute read

What You Need to Begin

Steps

  1. You are going to want to point your Custom Domain’s Name Servers to the ones that Cloudflare provides, this may take several hours for Cloudflare to confirm
  2. In OneDrive create a folder at the top level directory using your Custom Domain name, this can be either www.[CUSTOMDOMAIN].com or [SUBDOMAIN].[CUSTOMDOMAIN].com
  3. Select the folder and give it the “Anyone with this link can view this item” permission, uncheck “Allow editing”, “Set expiration date”, and “Set password”
  4. Place your HTML/CSS/JS files in the newly created folder
  5. Sign into DriveToWeb using your Microsoft Account and accept the required permissions
  6. Under “Your web pages”, you will see your folder’s URL. If you click on the link you will be able to see your webpage
  7. Copy the [STRING] from the DriveToWeb URL (https://[STRING].tw/[CUSTOMDOMAIN].com/), you will need this to create Cloudflare DNS Records
  8. Sign into Cloudflare and click on the DNS section
  9. Create the following DNS Records (Use the records based on if you are using a Primary Domain or a Subdomain)

Primary Domain

CNAME www [STRING].drv.tw

TXT www DRVTW=[STRING].drv.tw

Subdomain

CNAME [SUBDOMAIN] [STRING].drv.tw

TXT [SUBDOMAIN] DRVTW=[STRING].drv.tw

You can confirm the DNS changes using G Suite Toolbox, check the CNAME and TXT records to confirm your changes propagated

» Hello World!

September 05, 2018 - 1 minute read

Hello World!