Edit GitHub Pages

Here’s a quick guide to editing GitHub Pages. Not familiar with GitHub Pages? It’s a totally free service provided by GitHub where you can freely host HTML pages. Read more about it here: https://pages.github.com/

The Details

GitHub uses a separate branch for those pages so you can access the gh-pages branch like so:

In your GitHub repo, click to open the Branches drop-down.

GitHub branch dropdown

Select gh-pages.

GitHub gh-pages branch

You’ll be switched over to the gh-pages branch, where you should see the files served publicly such as the index.html file.

GitHub gh-pages index.html

Click on the index.html file to open it, then click Edit (pencil) icon to make changes.

GitHub gh-pages edit index.html

Once you’re done with editing, scroll to the bottom of the page and you’ll see a Commit changes button. To save the changes, press that button and optionally leave a comment about the changes.

GitHub gh-pages edit commit

That’s it!

You should see the change(s) reflected when viewing the page in your browser, through the page’s github.io url (or via a custom domain if you’ve set configured that).

The command-line method

Of course, if you’re more comfortable editing through your command-line or linux terminal, it’s very simple. If you haven’t already, clone your repo locally. For example, you can clone my Nibble project like so:

git clone https://github.com/Ugotsta/nibble.git

Once that’s cloned, go to the project folder:

cd nibble

Then access the gh-pages branch using the git-checkout command like so:

git checkout gh-pages

You’ll then be able to see and edit the files from the gh-pages branch. You can make your changes to the index.html file, like so (using Vim) for example:

vim index.html

You can make the changes to the file, then add those files as part of a commit using git add:

git add .

Commit those changes with git-commit:

git commit

The commit process will request a comment, to be added to the changelog. On linux systems, usually Nano is used for the comments.

When using Nano:

  1. Type any comments you’d like to add.
  2. Press CTRL-O to save.
  3. To select and overwrite the file you’re viewing, press ENTER.
  4. Then CTRL-X to return to your terminal prompt.

Now you can push those changes back to the repository with git-push:

git push

that’s it for the command-line!

Here’s a quick syntax-colored summary of those commands:

git clone https://github.com/Ugotsta/nibble.git
cd nibble
git checkout gh-pages
vim index.html
git add .
git commit
git push

I hope that helps, feel free to ask if anything’s unclear. 🙂

Advertisements
Edit GitHub Pages

Downloading and using shell scripts

Having posted a bunch of installation and other shell scripts over at my Gist repo, I wanted to be sure I explained how to use them. So here’s a video covering that.

The details

Very simply, to use shell scripts like the one in the video, you just download the script, adjust the permissions so it can be executed, then execute it (run it).

Making this a step easier than in the video, you can right-click the ‘view raw‘ link at the bottom of this gist snippet, then select ‘Copy link address‘:

That will copy a link to the file’s raw content, to your system’s clipboard.

To the terminal

You can then open a terminal on your system (Ctrl Alt T on Ubuntu, Meta T on Elementary OS, see here for Mac OSX).

Once in your terminal, type wget, then paste the link in so it looks something like so:

wget https://gist.github.com/Ugotsta/44dec487cd832f381743/raw/e9af9b76312f408257ea602a7a6afe4aa1b10cb5/install_gedit_color_schemes.sh

If you don’t already have wget installed on your system, no worries. Just enter this:

sudo apt-get install wget

Or on Mac OSX, just use Curl instead:

curl https://gist.github.com/Ugotsta/44dec487cd832f381743/raw/e9af9b76312f408257ea602a7a6afe4aa1b10cb5/install_gedit_color_schemes.sh

Pressing enter will begin the process of downloading the file. It should just take a second to complete and you’ll then have a install_gedit_color_schemes.sh file on your system.

Make it executable

Now, you’ll just need to chmod the downloaded file like so:

chmod +x install_gedit_color_schemes.sh

That will give it the permissions necessary to execute it.

Execute it

Once done, you should then be able to execute the file like so:

./install_gedit_color_schemes.sh

Hope that helps, cheers! 🙂

Downloading and using shell scripts

Create a chrome ball from a photo with Gimp

Gimp has a built-in sphere mapping filter (Filters > Map > Map Object) and that works great for spherizing graphics. But for a chrome ball effect, a little tweaking is helpful.

Here’s a brief tutorial walking through the process of taking a photo and making a chrome ball from it.

The Details

To clarify upfront, you can create a chrome ball from scratch in GIMP by just using the Map Object filter as mentioned above. But using an image adds some nice variation to the ball that tends to look more realistic.

We’ll use this freely available image: https://en.wikipedia.org/wiki/Cabin_(ship)#/media/File:Vasa-great_cabin-2.jpg

Simply download and open the image (or your own image) in Gimp. Once it’s opened up, let’s resize the image so that it has a 1:1 aspect ratio.

Go to Image > Scale Image… and resize it so it has the same Width and Height.Gimp - Chrome ball - Resize

We’ll blur the image a bit for the chrome effect. Go to Filters > Gaussian Blur… and set the blur to a radius of 30 for both Horizontal and Vertical.

Gimp - Chrome ball - Gaussian Blur

We’ll use Gimp’s Map filter for the sphere effect. Go to Filters > Map > Map Object… and you’ll see a panel of options.

Tweaking the settings

The following are some of the settings that I found worked very well for the options in the various tabs.

Options
  • Map to: Sphere
  • Transparent background (ticked)
  • Create new image (ticked so you can easily try variations)

Gimp - Chrome ball > Map object > Options

LIGHT

Light Settings

  • Lightsource type: Point light
  • Lightsource color: white

Position

  • X: 0.0
  • Y: -30.0
  • Z: 10.0

Gimp - Chrome ball > Map object > Light

Material

Intensity Levels

  • Ambient: 0.3
  • Diffuse: 0.75

Reflectivity

  • Diffuse: 0.3
  • Specular: 2.0
  • Highlight: 1.0

Gimp - Chrome ball > Map object > Material

Orientation
  • X: 0.5
  • Y: 0.5
  • Z: .095

Gimp - Chrome ball > Map object > Orientation

With the settings configured the way you like, just press OK to proceed. It’ll take just a moment to process.

And here’s the result with the above settings, a beautiful chrome ball with subtle photo content.

Gimp - Chrome ball

Please feel free to post some results here. I’d love to see them. 🙂

Cheers!

Create a chrome ball from a photo with Gimp

Finding hooks in WordPress plugins with Atom editor

I mentioned in my post, “Safely adding code to WordPress” that you can add code to WordPress plugins, themes and even the core, without altering core functionality. That’s done using action and filter hooks, as explained in that post.

Sometimes it’s not easy to find those hooks. So here’s a guide on how to find them quickly using the free and cross-platform Atom editor.

THE details

To search for hooks in a plugin, download the plugin .zip file that you’d like to search through. I mentioned MarketPress in the walkthrough video, you can use any plugin though.

MarketPress download

Extract the plugin’s .zip file on your hard drive, then go into the extracted folder and open one of the files in Atom.

Then press Ctrl Shift F to open the Find/Replace panel.

Atom find/replace

Enter “do_action” if you’d like to find action hooks, or “apply_filters” if you’d like to find filter hooks. Then press ENTER to commence the search. You’ll see a new panel full of search results.

Atom search results

Simply click any of the items in the search results panel and Atom will open the file and take you to the respective line of code.

Simplifying the search

The Minimap package (I often call them plugins) for Atom makes searches much easier. Just install it through the built-in installer in Atom. Press CTRL , to open the settings panel, then click on Install. Type ‘minimap‘ in the search bar and click the Install button for the respective packages.

Install minimap package in Atom

By installing all the minimap packages, you should be able to select a portion of code and see all occurrences of that selected code highlighted in the minimap.Atom Minimap Highlight

Please feel free to ask if you have any questions about all this.

Cheers!

Finding hooks in WordPress plugins with Atom editor

Arrows and annotations in Inkscape

Decorating screenshots is very easy these days but it’s not quite as easy to find configurable annotation graphics. Most offer very simple arrows with no outlines or shadows, making them a little tougher to see.

So I’ve created a small annotations file in SVG format using Inkscape, along with a walk through for using it. Here’s the video.

The Downloads

You’ll first want to ensure you’ve installed Inkscape, it’s available for Mac, Linux and Windows, as follows. You’ll then just need the SVG file and a free font available at Google Font directory. Here are the relevant links:

Downloading the File from GitHub

To download the SVG file, simply go to the above url and left-click on the “Raw” button, then select “Save link as …

GitHub - Right-click Raw button and select Save link as

 

Getting started

Open the arrows-and-annotations.svg file you saved above and you should see some nice arrows and other graphics.

You’ll likely want to decorate your own screenshots, so select the background image and press Delete.

Select background graphic and press Delete

Assuming you’ve already got a screenshot you’d like to work with, simply open your file manager then click and drag the file into Inkscape (or go to File -> Import, then select the file).

Drag and drop screenshot into Inkscape

You should see that new screenshot added in Inkscape, likely covering the arrows and other graphics though. Simply press the End key to move it below the other graphics.

Press END key to move screenshot below other graphics

You can then manipulate the arrows and other graphics to annotate the screenshot just the way you need it.

To export your annotated screenshot

You might consider saving your edited screenshot in Inkscape. Or you can go right to exporting the edit. Simply go to the File menu and select “Export PNG Image…“.

You’ll see a new panel displayed with options for the export process. Ensure your screenshot is selected, then ensure the “Selection” tab is also selected in the export panel.

Select screenshot and Selection tab

Give your file a name, then press the Export button.

That’s it!

You should have yourself a nicely annotated screenshot, like the above screenshots, or the one below, for example.

Example annotations

 

The same method can be used to annotate images for use in screencasts as well. Or you can export just the arrows, mouse graphic or others for use in video editing.

Cheers!

Arrows and annotations in Inkscape

How to download files from GitHub without the terminal

It’s very easy to get files from GitHub, but when first using it, I wanted to just be able to download files without having to use the terminal. Easy enough, here’s a walk through.

More details

So to download an entire repository, just go to a repo (here for example) and click the “Download ZIP” link.

GitHub download ZIP

And to download a single file within a repository, just go to the url for that file, then click the “Raw” button.

GitHub Raw button

That will show the raw version of that file. Simply right-click and select “Save as…” to download it.

Right-click and select Save as

Or more quickly…

You can also just right-click the Raw button itself, then select “Save link as…“.

GitHub right-click Raw and select Save as

What about GitHub Gists?

GitHub Gists can be downloaded exactly the same way. Just go to a Gist url (here for example) and click “Download Gist” to download a complete Gist package.

Download GitHub Gist

If you just want a single file from a Gist (usually they’re just single files), simply go to that file’s url and right-click “Raw” then select “Save link as…“.

Gist - click Raw button and select save link as

Cheers! 🙂

How to download files from GitHub without the terminal

How to install all Google Fonts

UPDATE: This isn’t really applicable anymore as Google’s setup their own GitHub repo at https://github.com/google/fonts.

Google Fonts are practically indispensable these days for web development but they’re even vastly helpful for typical computer use, since the fonts are all free and served by Google’s powerhouse servers. But it’s a pain to download all the fonts one-by-one or even en masse from Google’s web interface,.

While Google provides a way to download all the files from their repository, it’s a bit of a complicated process. Fortunately, user w0ng over on GitHub has made it uncomplicated. He’s devised a script to pull all the font files from Google and he’s posted them all to GitHub as a quick and substantially smaller download of only roughly 100+ MB.

To make use of this wonderful resource to install all Google Fonts in one fell swoop, you can simply do the following:

  1. Visit https://github.com/w0ng/googlefontdirectory
  2. Download the ZIP file (alternatively, you can use the Clone in Desktop option or “git clone” command-line option if you have Git installed).
  3. Locate the download (or git cloned) folder and unzip the downloaded file (Not needed if git clone option was used).
  4. Navigate to the /fonts/ folder within that extracted folder and select all font files (Ctrl-A will select all files).
  5. Right-click on any of the files and select “Install”.

For Windows XP users

For Windows XP installations, navigate to “c:\Windows\Fonts” on your hard drive and drag and drop the fonts from the extracted /fonts/ folder to that “c:\Windows\Fonts” folder.

That’s it. You’ll be able to use any Google web font within any program on your computer.

Video