Mohd Huzairy's Codex



Introduction Back to top

What you see here is a single page HTML file generated by Codex + Jekyll, hosted on GitHub, which I refer as my online codex. The beauty of single page document: fast, can be viewed offline, and you can search anything in real-time using the built-in browser’s search function.

Feel free to use or download this codex. If I may, I would recommend all web designer/developer to have their own codex so that we can learn from each other through knowledge sharing, which is really cool in my opinion.

Best regards, Mohd Huzairy

Git Guide Back to top

The Git commands that I regularly use.

Generating SSH Keys:

$ cd ~/.ssh #1
$ ls #2
$ ssh-keygen -t rsa -C "email@example.com" #3
# Generating public/private rsa key pair.
# Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]
$ ssh-add id_rsa #4
# Enter passphrase (empty for no passphrase): [Type a passphrase]
# Enter same passphrase again: [Type passphrase again]
# Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/id_rsa.pub.
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db email@example.com

$ pbcopy < ~/.ssh/id_rsa.pub #5

$ ssh -T git@github.com #6
  1. Go to .ssh folder.
  2. Lists the files in the .ssh directory.
  3. Creates a new ssh key, use the email used for GitHub or BitBucket.
  4. Adding the id_rsa file. Type in the passphrase.
  5. Copies the contents of the id_rsa.pub file to clipboard.
  6. Paste it into SSH keys area in GitHub/BitBucket account settings.
  7. Test the SSH keys by logging into GitHub. Use git@bitbucket.org if you don’t use GitHub.

Create and push new repository commands list:

$ mkdir <folder_name> #1
$ cd <extracted_folder> #2
$ git init #3
$ git add . #4
$ git commit -am "Commit message" #5
$ git tag <version_name> #6
$ git push origin master #7
  1. Create the project’s folder.
  2. Go inside the folder.
  3. Make this folder as a local repository; .git created.
  4. Add everything under the current directory.
  5. Commit everything with meaningful commit message.
  6. Make a lightweight, unannotated tag.
  7. Push the changes in local repositories to the master branch of the remote repositories.

Creating the new branch and working on it commands list:

$ git checkout -b <branch_name> #1
//Working on code
$ git checkout -- <filename_that_need_to_be_reverted> #2
$ git add <filename_that_has_been_reverted> #3
//Working on code
$ git diff HEAD #4
$ git commit -a -s #5
//Working on code
$ git reset --soft HEAD^ #6
//Working on code
$ git diff ORIG_HEAD #7
$ git commit -a -c ORIG_HEAD #8
$ git checkout master #9
$ git merge <branch_name> #10
$ git log --since='3 days ago' #11
$ git log <version_name>.. <folder_name> #12
  1. Create a new branch.
  2. Revert your botched changes in the reverted file.
  3. You need to tell git if you added a new file; removal and modification will be caught if you do git commit -a later.
  4. To see what changes you are committing.
  5. Commit everything as you have tested, with your sign-off.
  6. Take the last commit back, keeping what is in the working tree.
  7. Look at the changes since the premature commit we took back.
  8. Redo the commit undone in the previous step, using the message you originally wrote.
  9. Switch to the master branch.
  10. Merge a topic branch into your master branch.`
  11. Review commit logs. Can be combined and include --max-count=10 (show 10 commits), --until=2005-12-10, etc.
  12. View only the changes that touch what’s in curses/ directory, since tag.

Participating in people’s repositories commands list:

$ git clone <git_repo_url>
$ cd <folder_name>
$ //Working on code
$ git commit -a -s #1
$ git format-patch origin #2
$ git pull #3
$ git log -p ORIG_HEAD.. <folder_name> #4
$ git pull <other_git_repo_url> ALL #5
$ git reset --hard ORIG_HEAD #6
$ git gc #7
$ git fetch --tags #8
  1. Repeat as needed.
  2. Extract patches from your branch.
  3. Git pull fetches from origin by default and merges into the current branch.
  4. Immediately after pulling, look at the changes done upstream since last time we checked, only in the area we are interested in.
  5. Fetch from a specific branch from a specific repository and merge.
  6. Revert the pull.
  7. Garbage collect leftover objects from reverted pull.
  8. From time to time, obtain official tags from the origin and store them under .git/refs/tags/.

Git resources:

Terminal Back to top

Terminal commands for UNIX platform.

Encrypt / decrypt single file using OpenSSL

$ openssl aes-256-cbc -salt -in <file_name> -out <file_name>.aes # Encrypt
$ openssl aes-256-cbc -d -salt -in <file_name>.aes -out <file_name> # Decrypt

Tar and encrypt / decrypt a whole directory

$ tar -cf - <directory_name> | openssl aes-256-cbc -salt -out <directory_name>.tar.aes # Encrypt
$ openssl aes-256-cbc -d -salt -in <directory_name>.tar.aes | tar -x -f - # Decrypt

Tar zip and encrypt / decrypt a whole directory

$ tar -zcf - <directory_name> | openssl aes-256-cbc -salt -out <directory_name>.tar.gz.aes # Encrypt
$ openssl aes-256-cbc -d -salt -in <directory_name>.tar.gz.aes | tar -xz -f - # Decrypt

Vi Editor commands

# The Basics
# Press [ESC] button to access command mode.

# Insert
$ a # Append new text after the cursor
$ i # Insert new text before the cursor
$ o # Insert a new line below the line you're currently on and start entering text
$ O # Insert a new line above the line you're currently on and start entering text

# Quit
$ :w new_file_name # Save the file to new_file_name
$ :wq or :x # Save and quit
$ :q! # Quit without saving

# Search and Move
$ /string # Search forward for string
$ ?string # Search back for string
$ n # Search for next instance of string
$ N # Search for previous instance of string
$ { # Move a paragraph back
$ } # Move a paragraph forward
$ 1G # Move to the first line of the file
$ nG # Move to the n th line of the file
$ G # Move to the last line of the file
$ :%s/OLD/NEW/g # Search and replace every occurrence

# Delete text
$ dd # Delete current line
$ D # Delete to the end of the line
$ dw # Delete word
$ x # Delete character

# Editing
$ yy # Copy the line the cursor is on
$ p # Paste the copied line after the line the cursor is currently on
$ u # Undo last
$ U # Undo all changes to current line

Check file hashes with OpenSSL

$ openssl md5 file.tar.gz # Generate an md5 checksum from file
$ openssl sha1 file.tar.gz # Generate an sha1 checksum from file
$ openssl rmd160 file.tar.gz # Generate a RIPEMD-160 checksum from file

Miscellaneous commands

$ which command # Show full path name of command
$ time command # See how long a command takes to execute
$ time cat # Use time as stopwatch. Ctrl-c to stop
$ set | grep $USER # List the current environment
$ cal -3 # Display a three month calendar
$ date 10022155 # Set date and time
$ whatis grep # Display a short info on the command or word
$ whereis java # Search path and standard directories for word
$ setenv varname value # Set env. variable varname to value (csh/tcsh)
$ export varname="value" # set env. variable varname to value (sh/ksh/bash)
$ pwd # Print working directory
$ mkdir -p /path/to/dir # no error if existing, make parent dirs as needed
$ rmdir /path/to/dir # Remove directory
$ rm -rf /path/to/dir # Remove directory and its content (force)
$ cp -la /dir1 /dir2 # Archive and hard link files instead of copy
$ cp -lpR /dir1 /dir2 # Same for FreeBSD
$ cp unixtoolbox.xhtml{,.bak} # Short way to copy the file with a new extension
$ mv /dir1 /dir2 # Rename a directory
$ ls -1 # list one file per line
$ history | tail -50 # Display the last 50 used commands
$ alias pi="ssh 192.168.1.5 -l pi" # Use alias to quickly execute frequent task/command
$ sudo -i # To run as root

Terminal resources:

HTML Back to top

HTML stands for Hypertext Markup Language. These were heavily used HTML structures and best practices.

Basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>Page Title</title>
  <link rel="author" href="humans.txt"/>
  <link rel="stylesheet" href="style.css?v1.0"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="tags, tags, tags">
</head>

<body>

  <!-- Content goes here -->

  <script type="text/javascript" src="script.js"></script>

</body>

</html>
  • Regarding humans.txt, you can read more about it on humans.txt website.
  • Links to Javascript file should sits at the end of body content. Performance issues.
  • Use CSS cache busting technique for CSS and Js.

Semantic Elements in HTML 5:

Header — Defines the header of a page or section. It often contains a logo, the title of the Web site, and a navigational table of content. Example:

<header>
  <h1><a href="/">infomalaya</a></h1>
  <p class="description">Curated News 1.0</p>
</header>

Section — Defines a section in a document. Example:

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

Nav — Defines a section that contains only navigation links. Example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Article — Defines self-contained content that could exist independently of the rest of the content. Example:

<article>
  <h4>A really awesome article</h4>
  <p>Lots of awesome text.</p>
</article>

Aside — Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense. Example:

<article>
  <p>The Disney movie <em>The Little Mermaid</em> was first released to theatres in 1989.</p>
  <aside>The movie earned $87 million during its initial release.</aside>
  <p>More info about the movie...</p>
</article>

Footer — Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback. Example:

<footer>
  <p>Some copyright info or perhaps some author info for an article?</p>
</footer>

HTML5 semantic elements in action, example:

<main><!-- Begin main document -->

  <header><!-- Begin header -->
    <h1></h1>
  </header><!-- End header -->

  <section class="content"><!-- Begin content section -->

    <article><!-- Begin article area -->
      <hgroup>
        <h2></h2>
      </hgroup>

      <p></p>
    </article><!-- End article area -->

    <nav class="pagination"><!-- Begin page navigation -->
      <p class="left"><a href="#">&laquo; Older</a></p> 
      <p class="right"><a href="#">Newer &#187;</a></p>
    </nav><!-- End page navigation -->

  </section><!-- End content section -->

  <section class="sidebar"><!-- Begin sidebar section -->

    <aside class="widget">
      <h3></h3>
    </aside>

  </section><!-- End sidebar section -->

  <footer><!-- Begin footer -->
    <p></p>
  </footer><!-- End footer -->

</main><!-- End main document -->

HTML best practices:

  • Always comment the code block. Example:
<footer><!-- Begin footer -->
  <p>Hosted on <a href="#">GitHub Pages</a></p>
</footer><!-- End footer -->
  • Use classes, not ID’s, unless it’s for DOM or hashlinks.
  • Use semantic markup and class name. Refer Schema.org for more info.
  • Use all available HTML tags and elements to avoid divitis Syndrome.
  • Use progressive enhancement whenever possible.

HTML resources:

CSS Back to top

CSS stands for Cascading Style Sheets. These were frequently used CSS snippets and best practices.

Frequently used CSS Snippets:

CSS content documentation, to make it easier to maintain. Example:

/*
Project's name: MentariCSS
Version: 3.0 beta
Author: @mohdhuzairy
Last date modified: 11/02/2014
*/

/*
------------------------------------
Table of Contents:
------------------------------------
1. Reset Styles
2. MentariCSS Core Styles
3. User's Styles
4. Media Queries Styles
------------------------------------
*/

/* =1. Reset Styles */

/* =2. MentariCSS Core Styles */

/* =3. User's Styles */

/* =4. Media Queries Styles */

/* EOF */

Body tag, example:

body
{
  font:1em/150% arial, sans-serif;
  color:#333;
  background:#fff;
}

Media queries, taken from Andrew Clarke’s 320 and Up. Example:

@media only screen and (min-width: 480px)
{
  /* Styles */
}

@media only screen and (min-width: 600px)
{
  /* Styles */
}

@media only screen and (min-width: 768px)
{
  /* Styles */
}

@media only screen and (min-width: 992px)
{
  /* Styles */
}

@media only screen and (min-width: 1382px)
{
  /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
{
  /* Styles */
}

CSS Pseudo Elements. Example:

/* Selects the first letter of the element */
p:first-letter
{
  font-size:3em;
  float:left;
}

/* Selects the first line of the element */
p:first-line
{
  font-style:italic;
  color:#333;
}

/* Selects the element that is the first child of its parent */
p:first-child
{
  background:#eee;
}

/* Selects the element that is the last child of its parent */
p:last-child
{
  background:#eee;
}

/* Specify the background color for element that is the second child of its parent, counting from the last */
p:nth-last-child(2)
{
  background:#eee;
}

/* Specify the background color for every even elements of its parent */
tr:nth-child(even) td
{
  background:#f6f6f6;
}

/* Specify the background color for every odd elements of its parent */
tr:nth-child(odd) td
{
  background:#eee;
}

/* Insert content before the element */
p:before
{
  content:"Read this: ";
}

/* Insert content after the element */
p:after
{
  content:"- Remember this";
}

CSS Frameworks?

The best CSS framework is no CSS framework at all. However, not all people have the time to write all the styles by themselves. I recommend these CSS frameworks, for their functionality, wide coverage of styles, and well written documentation:

CSS Best Practices:

  • Use all available CSS selectors.
  • Make CSS code readable by you, and by anyone else who concerns. No CSS compressing.
  • Comment the CSS code to make it easier to maintain in future.
  • Use CSS cache busting technique.
  • Audit your CSS code using CSS Lint.
  • Don’t repeat yourself when it comes to writing CSS. Make use of classes combination features.
  • Avoid CSS hacks. We don’t need any hacks if we write CSS properly.
  • It would be great if we can learn to use CSS pre-processor such as SASS to speed up development timeframe.

CSS resources:

JavaScript Back to top

JavaScript is one of the three things web designer/developer should know after HTML and CSS. Unlike HTML and CSS, JavaScript is a programming language. Mainly used to control the behavior of the website.

If you want to learn the basic of JavaScript, please enroll in Codecademy free JavaScript course. Highly recommended.

JavaScript frameworks, libraries & plugins I regularly hardly use:

  • Node.Js : In a nutshell, Node.js is a JavaScript runtime library installed on your computer, or server.
  • Grunt.Js : The JavaScript task runner. Require Node Package Manager to install.
  • CoffeeScript : A little language that compiles into JavaScript.
  • Angular.Js : Just another JavaScript framework to build web application.
  • Ember.Js : Same as above.
  • Handlebars.Js : A templating engine, an alternatives to Mustache.Js, and Liquid.
  • Modernizr : JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  • jQuery : A very popular JavaScript library for web designer/developer.
  • Masonry : Awesome and easy to use JavaScript grid layout library.
  • Google Prettify : Syntax highlighting on HTML.
  • Highlight.Js : Same as above.

Note: I’m using cdnjs to load JavaScript library/plugin that I need.

Link Lists Back to top

A lists of interesting links on the planet.