Github Two-Factor Authentication Failed For HTTPS

About two months ago I first switched to GitHub’s two-factor authentication. Later that day, when I went to push for the first, I had an authentication error and my push failed. I didn’t want to mess with the configuration that day, so I decided to turn off two-factor authentication on GitHub.

Another Go at Two-Factor Authentication on GitHub

After a new career move forced that I lock down my computer and my online identities like Fort Knox, I had no choice but to figure out how to get GitHub two-factor authentication working. Yet again, after I configured two-factor authentication on GitHub I had issues pulling from private repositories and pushing/pulling to any repository. So, after digging into the GitHub two-factor authentication blog post on GitHub, I came across this:

If you are using SSH for Git authentication, rest easy: you don’t need to do anything. If you are using HTTPS Git, instead of entering your password, enter a personal access token. These can be created by going to your application settings page.

The Solution is Simple

Read more

Regular Expression Example: Wrapping the Second through Last Words in a Span Element

For the past week, I have been working on a website for an emergency medical services association. To fit the client’s wishes, the design called for the first word in titles to be blue followed by all other words being red.

I do not know a way to do this with just HTML, so I decided that I would wrap the second through the last words in a span  element. Then I could add some LESS like this to achieve the color effect I wanted.

h1,
h2,
h3,
h4,
h5,
h6 {
color: blue;

span {
color: red;
}
}

But, how do I get the span element in the titles?

Using Regular Expressions to Add the Span

Regular expressions are a very powerful feature of many languages. They allow us to create very complex rules to match phrases in code, words, etc. We can also “capture” parts of these rules, which will prove useful in this example!

Here is a PHP function with a regular expression example that takes a title and wraps the second through last words in a span  element.

function span_the_title( $title ) {
    return preg_replace( '#(S+)s(.+)#', '$1 <span>$2</span>', $title );
}

Let’s break this down. Notice that I am passing $title in to the function. This is the title that we will actually be filtering in the regular expression. Now take a look at the preg_replace() function. This function takes the following arguments:

  1. A regular expression that is the pattern to search for.
  2. A string to replace matched expressions with. Notice how I used $1 and $2 in the second argument above. This is because I am referencing part of the matched regular expression from the first argument. More on this later.
  3. The third argument is the title, in this case, or really any string.

Let’s Break It Down

Read more

Remove .sass-cache and node_modules from Sublime Text

I’ve recently been playing with Foundation, Sass, and Grunt. And while each of these are powerful tools in their own right, they are quick to clutter up a project. Grunt creates a node_modules directory while Sass creates a .sass-cache directory. But don’t worry, because lucky users of Sublime Text have a simple fix. Add .sass-cache … Read more

Rsync Backup on Ubuntu Server

I work on some servers at my University. Recently our RAID server went out, which means that we could potentially lose all student and professor data across several of our servers. I was tasked with getting some sort of backup going from our main servers to a local backup server. After thinking about how to … Read more

Youtube UIWebView with Storyboards

While working on the iMustangs project, we decided that it would be a good idea to include the school fight song. I’m sure we could have found a way to play a .mp3 file, but we decided that it would be best to create a video so that we could display our university logo. What follows is the result of our work in using UIWebView on iOS.

First Attempt

Our first attempt was very light on code and pretty simple. I’d like to show this to you by running through a test project. In Xcode, go ahead and start a new single-view application.

Navigate to the Storyboard in your project. Once you are here, add a web view on top of the current view. Go ahead and stretch the web view to fill the view below. Now, let’s go ahead and connect the web view.

I like to use the assistant editor when I connect UIWebViews and other objects to outlets and actions. Click the assistant editor button near the top right of Xcode (I am currently using 4.3.1). The assistant editor will show the storyboard beside your class, so that you can easily connect an object to a specific line of code in your .h file.

Once you’re in assistant editor mode, click the UIWebView and drag it to just below @interface. Let go.

At this point another dialog should’ve popped that is asking you to name your UIWebView. Go ahead and name it webView (be sure to use correct case).

uiWebViewScreenShot

Now, navigate to your ViewController.m file and paste the following code within the viewDidLoad function. You may replace the url with one of your own.

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"<a href="http://www.youtube.com/embed/XeIKnBDN4To">http://www.youtube.com/embed/XeIKnBDN4To</a>"]]];

At this point, you should be able to run this project in a simulator and see an MSU youtube video, or whatever URL you substituted. This worked fine for us, until we put it on an actual iPhone…

Read more

Adding Custom Overlays to iOS MapKit Framework

mapViewControllerScreen

Series

This is part 2 of a 2-part series on how to create custom overlays for the MapKit framework on iOS. View part 1 of this series here.

Creating Custom Overlay in iOS

Everything we have done up to this point has been to create the tiles we will use in our project. Now that we have created those tiles, we need to add them to our project.

For this, we will use a sample project from Apple called Tile Map. I have a working iOS project that uses custom overlay at Github. We are going to copy a few classes from this project, so go ahead and grab the zip-ball and open it in Xcode.

You will need to copy the following files into your own project:

  • TileOverlay.h
  • TileOverlay.m
  • TileOverlayView.h
  • TileOVerlayView.m

Be sure to select the box to “Copy items into destination group’s folder.” At this point I am going to assume that you have already created a View Controller for your map. If not, go ahead and create one. In the .m (implementation) file of your map View Controller, we are going to import the TileOverlay.h and TileOverlayView.h files. Your map View Controller should now look something like this:

Read more

Creating Custom Overlays for iOS MapKit Framework

I am part of a team developing an iPhone app for Midwestern State University. I am particularly responsible for developing the map that we are going to use for the app. Because I had a lot of detail I wanted to show on our map – Faculty/Commuter/Resident Parking Lots,  labels for different buildings, key points of interest on campus – I began to look into using custom overlays, a large image laid of top of the Google map tiles.

One of the issues I ran into was a lack of good information on how to integrate custom overlays into an existing iOS project. What follows is the process used to create and integrate custom overlays into an existing iOS app.

Create Overlay Image

I knew from the beginning that I would need some graphic of Midwestern State University to serve as a foundation for me to build my overlay image. To get the background image, I:

  • Went go Google Maps
  • Grabbed the embed code for the location I wanted
  • Created a quick HTML document with the embed code in it
  • I changed the size of the iframe to about 4,000 px by 4,000 px
  • I used a plugin for Google Chrome browser that took a screenshot of the entire page

This gave me a background image that I could put into Photoshop and then build upon. I used 300 PPI and set my image size to about 3,000 px by 4,000 px. With a smaller image size or lower resolution I noticed that I had very jagged edges. You can tweak these image settings to your project.

Start building your overlay on top of this background image. When you have an overlay image that you are happy with, hide the background, and export your image. I exported my image as a PNG-24 since I had large amounts of blank area on the image.

Find the Corner Coordinates

The best way I found to match the corner pixels of the image to coordinates is to:

Read more