Design Portfolio


Posts tagged github
This Week I Learned | Git Basics II, Github, Front End Optimization

Git Basics Part II


  • The first step is cloning a repository to your computer
    • remote repository - a repo on another computer with access to it over a network
    • Remote can simply mean somewhere else

git clone ~/[name] [name_of_new_clone]

  • Cloning creates a copy of the repo without changing it in any way
  • Set up remotes to talk to each other by using:

git remote add our_clone ~/our_clone_project/

Pushing and Pulling

git pull origin new_feature

  • origin is the remote to pull from
  • new_feature is what branch we want to get the history from

git push our_clone

  • By default, Git asssumes pushing and pulling from the origin remote
    • Just use git push for default behavior
  • Since we are not pushing to the default, we must specify our clone


  • pull request - what you do when you have code you want someone to pull into their project

Front End Optimization

  • Modification of HTML, CSS, JS, and sometimes server configuration for the purpose of improving page load times
  • performance budget - quantifiable target for how fast a website loads
    * Can be in the form of total HTTP requests, page weight, total response time, or any combination of these
    • page weight - total file size of all a site's assets

HTTP Requests

  • Pay attention to total number of HTTP requests on a web page
  • Even when no data is sent, like a 404 error, an HTTP request will still take up time
  • Each HTTP request is generally fast, but lots of little assets, including small ones like icons, can add up
  • sprite map - take small images like icons and put them together into one big image, then split it apart using HTML and CSS
    • Since a sprite map combines many small images into one big image, the result is one HTTP request instead of many
  • 404 errors indicate the server could not find the requested asset and are often caused by typos or file manipulations (files moved or deleted)

Optimize Images

  • Images use the most bandwidth
  • Use SVGs first - they are small in file size by covering large areas of the screen using just a few vector points rather than thousands or millions of individual pixels like JPEG or PNG
  • Resize/compress images
  • Using hosted services for assets like fonts is better for speed and reliability, additional parallel HTTP connections, and better caching
  • If possible, put JS on the bottom of the HTML page to make the page appear to load faster even though it might actually load in the same amount of time

Minify Assets

  • CSS and JS are often filled with spaces, line breaks, comments, and long variable names. A web browser does not need these to parse properly but they are still downloaded when a site visitor loads the page.
  • Minifying assets removes these extra bits and reduces overall page weight
Setting Up a Custom Subdomain with GitHub User Pages and Namecheap

I finally found a succinct guide to setting up a custom Namecheap subdomain with GitHub pages.

My objective was to redirect my GitHub user page ellatronic.github.io to my custom subdomain projects.ellatronic.com. This process was actually alot easier than the hours it took me to figure it out, mostly due to the new format of the Namecheap dashboard and the old format shown in other guides I referenced.

Log in to Namecheap, go to Dashboard > Domain List. Then click Manage on the domain you want. Click Advanced DNS, then under Host Records click Add New Record. Enter the following:

Type: CNAME Record
Host: the subdomain name, for me this is projects
Value: the GitHub pages URL, for me this is ellatronic.github.io. Namecheap will automatically add the last “.” if you forget it.
TTL: Automatic

Press the green checkmark to save the record.

Next, go to the GitHub user page repo (username.github.io), for me it is ellatronic.github.io. Add a CNAME file containing subdomain.domain.com, so mine is projects.ellatronic.com. Make sure CNAME is in all capitals. Do not put http:// before the subdomain.

Here's what the GitHub file looks like

Here's what the GitHub file looks like