Cloning an AWS CloudFront Distribution Easily

I’m often creating a new site that’s similar to others and has CloudFront in front of them (yes, think WordPress). Many of these distributions have a bunch of behaviors, and I hate to waste time trying to recreate them (copying and pasting, making sure I didn’t miss a step). Anyway, finally taking a little bit of time, I’ve found it’s straightforward to do it using the AWS CLI:

Steps to export, modify, and import a new CF config file with AWS cli:

  1. Install the CLI if you haven’t already. It’s relatively quick and straightforward, provided you have your access and secret keys. I’ve been using Version 2 of the CLI with great success. I’m primarily on Windows, so the below steps are respective of that.
  2. Using the CLI, export the CloudFront config of a distribution you want to copy. In my below example, you’ll need to swap out the distribution ID with one of your real distribution IDs (something like E3xxxxxxxxxx). Also, the c:\aws folder is whatever you want.

    aws2 cloudfront get-distribution-config --id YourDistID --output json > c:\aws\sourceCFconfig.json
  3. Take this json file, sourceCFconfig.json, copy it to a new file, newCFconfig.json.
  4. Open the new file, edit out the first parent element (be sure to remove the last curly bracket at the end of the file as well).
  5. Edit the Aliases to reflect your new site info (or remove if you’re not doing HTTPS).
  6. If you’re using a different origin for this distribution, change that as well, including in the behaviors (make use of find and replace)!
  7. Near the end of the doc, change the comment to something new:
  8. Change the ViewerCertificate to a valid certificate ARN (or remove if you’re not using HTTPS).
  9. Save this file you’ve been editing.
  10. Import this config and create a new distribution using the below command:

    aws2 cloudfront create-distribution --distribution-config file://c:\aws\newCFconfig.json

If no errors are shown, you should see a new distribution in CloudFront.

Cloning an AWS CloudFront Distribution Easily

How to Truncate / Trim Text By Sentence in JavaScript (not word or character)

Many times for showing a preview of longer text, I prefer not just to show a certain amount of characters (although it looks better visually) but to break it via sentence. Below is a small JavaScript function (I use it in NodeJs a bunch) that I’ve used to do this. No, it’s not the most complicated thing ever, but I wanted to share in case it helps anyone.

String.prototype.truncateBySent = function(sentCount = 3, moreText = "") {
  //match ".","!","?" - english ending sentence punctuation
  var sentences = this.match(/[^\.!\?]+[\.!\?]+/g);
  if (sentences) {
    console.log(sentences.length);
    if (sentences.length >= sentCount && sentences.length > sentCount) {
      //has enough sentences
      return sentences.slice(0, sentCount).join(" ") + moreText;
    }
  }
  //return full text if nothing else
  return this;
};

Easy to use, just do something like this:

someText.truncateBySent(2);

Sometimes you also want to include something at the end to indicate there is more text, like a link or ellipsis. You can do this:

someText.truncateBySent(2,' <a href="#">View More</a>');

It will take a line of text like this:

Sample sentence one? Another sentence two. Another three. Is there four? What about five? And six! Finally seven.

And return this:

Sample sentence one? Another sentence two. View More

See a working sample here: https://codepen.io/chrisbitting/pen/oNvzKNz

Or grab it on GitHub: https://github.com/cbitting/jsTruncateBySentence

How to Truncate / Trim Text By Sentence in JavaScript (not word or character)

Getting Fortnite XBox One & PC Crossplay to Work

Alright, so if you’re reading this, you’ve probably read some popular articles by some others (maybe major news sources) and didn’t get far. Getting Fortnite crossplay between PC & Xbox wasn’t that straightforward (at least for me), but in the end, works great. I’m trying not to do what the other articles did, and provide long, unhelpful paragraphs, so let’s get right to it. Below is what worked for me:

  1. I’m assuming you’re already playing Fortnite on the Xbox. You need to link your Xbox account to an Epic Games account. Do this by opening the browser (Edge) on the Xbox. Visit https://www.epicgames.com/fortnite. In the top-right, click the person icon, click Xbox.
  2. After clicking the Xbox button on the people menu, create a new account w/ an email address & password. (I couldn’t find an easy way to link an existing Epic account, so I just created a new one). Now you have an Epic games account linked to an Xbox live account.
  3. On a PC (or Mac) download the Epic Games Launcher. You can use the same PC that has a different account playing Fortnite already.
  4. On the PC in Epic games login to the account used to play on PC and send a friend request to the username of the Xbox user.
  5. Again on the PC, login into Epic games (you’ll need to logout of the PC user) and login as the Xbox account you created in step 2.
  6. Since you’re logged into the Xbox account (on PC) you can accept the friend request that was sent in step 4.
  7. You can now logout on the PC and login to a PC playing account (if you have one).
  8. On the Xbox, start a new party, on PC, your friends (that you accepted in step 6) can choose to play with you.
  9. And now win.
  10. Note: the first time you play w/ someone on PC via Xbox, you’ll be asked to confirm that crossplay is okay. Make sure you accept this.

Hope this helps someone out there.

Crossplay is pretty seamless, voice chat works – and now you’ve got more folks to help you win!

 

 

 

Getting Fortnite XBox One & PC Crossplay to Work

Convert MP4 Video to WEBM & OGV (OGG) using FFMPEG

If you use the html5 video element, you probably want to also include webm & ogv videos to help make your video more accessible on browsers. (I won’t get into using the element, but it’s fairly simple.) What I do want to share is an easy way to take our source video (maybe .mp4 or .mov) and convert it to .webm and .ogv. This solution uses the freely available FFMPEG – it’s been around forever, and many of the pay software “utilities” you could buy just use it in the background. Let’s get to it. Continue reading “Convert MP4 Video to WEBM & OGV (OGG) using FFMPEG”

Convert MP4 Video to WEBM & OGV (OGG) using FFMPEG

Spider / Download Website with Wget on Windows

Wget has been around forever it seems, but is still get great tool for spidering or downloading content (all content) from a website to your local machine. Below are some simple steps to install Wget and to run it.

To install Wget:

  1. Visit http://gnuwin32.sourceforge.net/packages/wget.htm and download the setup file, labeled “Complete package, except sources”.
  2. Run the setup .exe and leave everything as defaults.
  3. In a command prompt (cmd.exe) change to the C:\Program Files (x86)\GnuWin32\bin> directory (or C:\Program Files\GnuWin32\bin if your on a 32 bit OS)
  4. To test, if you just run wget.exe it should return wget: missing URL

 

To download a website:

  1. In a command prompt (cmd.exe) change to the C:\Program Files (x86)\GnuWin32\bin> directory (or C:\Program Files\GnuWin32\bin if your on a 32 bit OS)
  2. Now run:
    wget -e robots=off --no-check-certificate --recursive --level=0 -P "c:\\somefolder" http://chrisbitting.com

    (obviously replace my website with your own)

In that folder, you should soon files from the site Wget copied.

I’ve only had issues with a site that I had forced to use SSL. Wget didn’t like that.

Spider / Download Website with Wget on Windows

Creating a Chrome Plugin to Scrape A Page (using jQuery)

If you’ve played w/ Chrome extensions at all, you know they are super powerful. I recently wanted to visit a bunch of pages, and extract some info from each page. I could easily run some jQuery script in the console of each page to do this, but I wanted a quick and easy way to do this. Creating a Chrome extension, that includes jQuery, to run locally is pretty simple. Below are the different files (5 of them) you’ll need (put these all in a single folder).

After creating these and adding your code, add to Chrome by going to Extensions > Load unpacked extension and choose your folder.

1: manifest.json

{
 "name": "Your Extension Name",
 "description": "This was easy",
 "version": "1.1",
 "background": {
 "scripts": [ "jquery-3.1.1.min.js","background.js","content.js"]
 },
 "permissions": [
 "tabs", "http://*/*", "https://*/*"
 ],
 "browser_action": {
 "default_title": "My Extension Title",
 "default_icon": "a-cool-logo.png"
 },
 "manifest_version": 1
}

2: jquery-3.1.1.min.js (get a copy from jquery.com)

 

3: a-cool-logo.png (16px x 16px)

 

4: background.js

chrome.browserAction.onClicked.addListener(function(tab) {
 chrome.extension.getBackgroundPage().console.log('your plugin gonna do something');
//maybe see if your plugin should be allowed to run
 if (tab.url.indexOf("/maybeCheckAurl/") !== -1) {
 
chrome.tabs.executeScript(null, { file: "jquery-3.1.1.min.js" }, function() {
 chrome.tabs.executeScript(null, { file: "content.js" });
});
 
 }
 
});

5: content.js (the magic happen here)

//i check to make sure jQuery is loaded
if (jQuery) { 
 
 jQuery(".someclass a").each( function() { 
 
//log the results 
 console.log($(this).attr("href"));

//maybe do something with them
 $.get( "http://yourapi"), function( data ) {});
 
 });
 
} else {
 alert('no jq');
}
Creating a Chrome Plugin to Scrape A Page (using jQuery)

Accessing the Cloudflare API in C#

shutterstock_328592903Cloudflare provides security, CDN and more for your websites. If you’re using the Cloudflare caching to speed up your sites (it really is fast) you may want to purge their cache from your application (instead of waiting X days). Cloudflare provides an API that seems to offer everything you’d possible need. I wanted to do this from c#, but did’t find any great libraries or code that was using their newest API (v4).

Below is some quick simple code that I’ve found to work great so far for me. It’s pretty basic, and doesn’t require many external libraries (just JSON.net). Let me know your thoughts and if it helps you.

//define somethings we'll need for the api
string apiEndpoint = "https://api.cloudflare.com/client/v4";

//user info here
string userEmail = "youremail@something.com";

//this is your Global api key found in "my account"
string userAPIkey = "xxxxxxxxxxxxxxxxxxxxxxxxx";

//domain your working with:
string domain = "http://www.yourdomain.com";

//let's get our zone ID (we'll need this for other requests
HttpWebRequest request = WebRequest.CreateHttp(apiEndpoint + "/zones?name=" + domain + "/&status=active&page=1&per_page=20&order=status&direction=desc&match=all");
request.Method = "Get";
request.ContentType = "application/json";
request.Headers.Add("X-Auth-Email", userEmail);
request.Headers.Add("X-Auth-Key", userAPIkey);

string srZoneResult = "";
using (WebResponse response = request.GetResponse())
using (var streamReader = new StreamReader(response.GetResponseStream()))

	srZoneResult = (streamReader.ReadToEnd());

dynamic zoneResult = JsonConvert.DeserializeObject(srZoneResult);

if (zoneResult.result != null)
{
	//get our zoneID
	string zoneId = zoneResult.result[0].id;

	//some pages to purge the cache on:
	byte[] data = Encoding.ASCII.GetBytes(@"{""files"":[""http://www.yourdomain.com/about/""]}");

	request = WebRequest.CreateHttp(apiEndpoint + "/zones/" + zoneId + "/purge_cache");
	request.Method = "DELETE";
	request.ContentType = "application/json";
	request.ContentLength = data.Length;

	request.Headers.Add("X-Auth-Email", userEmail);
	request.Headers.Add("X-Auth-Key", userAPIkey);

	using (Stream outStream = request.GetRequestStream())
	{
		outStream.Write(data, 0, data.Length);
		outStream.Flush();
	}

	string srPurgeResult = "";
	using (WebResponse response = request.GetResponse())
	using (var streamReader = new StreamReader(response.GetResponseStream()))

		srPurgeResult = (streamReader.ReadToEnd());

	dynamic purgeResult = JsonConvert.DeserializeObject(srPurgeResult);

	//was it a success (hopefully it = true)
	textBox1.Text = purgeResult.success;
}
Accessing the Cloudflare API in C#