May 10 2017

Tutorial: Create a Tic-Tac-Toe Game in JavaScript

Posted by

This exercise was created as a tech writing sample, but hey, it also made a playable Tic-Tac-Toe game, so I figured I’d put it up here for you to enjoy!

Tic-Tac-Toe has been around since at least the days of the pharaohs and has been played with sticks, pebbles, pencils and paper, but with these instructions you and your friends can play Tic-Tac-Toe on any web browser. A sample version of the game is here: My Tic-Tac-Toe Game.

The Basic Game

Tic-Tac-Toe is played on a 3-square by 3-square grid, as shown below. Players take turns placing their mark (an X or an O) until one player wins by putting three marks in a row, or until all squares are full. If all the squares are filled without getting three in a row, the game is a draw.
Tic-Tac-Toe sample games illustration
(click to enlarge)

How the Script Works

The pre-game stage draws a table with three columns and three rows and a label indicating whose turn it is. Each data cell within the table can have one of three values: “X,” “O,” or “blank.” At the beginning of a new game, which player goes first is chosen randomly and all cells are blank.

When a player clicks on a blank cell, the page assigns the selected cell to the player by filling in their mark, and redraws the grid.

If there is no winner and there are still blank cells, play continues, returning to step 2. If there is a winner, or there are no more blank cells, the game ends with either a message indicating the winner or that the game is a draw, and generates a “Start New Game” button. Read more »

Share
Filed under : Tech Writing | Comments Off on Tutorial: Create a Tic-Tac-Toe Game in JavaScript
Jan 10 2017

Creating a Dreamwidth-to-Twitter Crossposter

Posted by

With the recent decisions and actions taken by LiveJournal’s owners, many people are migrating their personal blogs to Dreamwidth, a “LiveJournal-like” blog that uses a very similar interface and can import existing LJ posts, comments, and settings to make the transition easier.

Unfortunately, Dreamwidth lacks some features of LiveJournal, including direct Twitter integration. But if you would like to have a script that will automatically post a tweet to your followers, there’s an easy workaround, thanks to a handy website called IFTTT (or, “If This, Then That”). IFTTT requires creating a free login, but is more than useful enough to be worth it.

The following steps assume you already have Dreamwidth, Twitter, and IFTTT accounts up and running.

Step One: Find Your Dreamwidth RSS Feed

Find your Dreamwidth RSS feed.A website’s RSS feed (short for “RDF Site Summary” or “Really Simple Syndication”) is a tagged XML file of posts made to that website, designed to make it easy for other services to “consume” the page.

Every time you post to your Dreamwidth account, your RSS feed updates, and that will be the trigger for IFTTT to send a post to Twitter. Most Dreamwidth styles have a button labeled “RSS” somewhere on your blog posts page. You can either click through the button, or right-click (contextual click) to find and copy the feed URL. If you can’t find it, try simply appending “/data/rss” to the end of your Dreamwidth account’s URL.

 

Step Two: Create a New IFTTT Applet

On IFTTT, go to the user menu on the upper right and select the “New Applet” option. That will take you to the “Applet Maker” screen.
Start a new applet on IFTTT.

 

Step Three: Choose the RSS Feed Source

Click on the blue “+this” link to choose a source, and from there click on “Feed” to select the RSS feed option.
The IFTTT Applet Maker page.

Select the RSS feed option.

New feed item trigger selectionThat will take you to the “Choose Trigger” page. Select “New feed item” to have the service scan for new post entries, and when prompted, copy and paste the RSS feed link from your Dreamwidth account (found in Step One) into the Feed URL field.

 

Step Four: Choose the Twitter Posting Result

Submitting the feed URL should take you to the next step of the IFTTT applet builder, giving you a prompt that looks like this:
 
"If (feed) then +" button
 
Click on the blue “+that” link to select your output destination, and then select “Twitter” as your action service.
 
Choose the Twitter output destination.

"Post a Tweet" selection and options.
 
This will send you to a screen asking what action you want to perform on Twitter. Select “Post a Tweet,” which will take you to a screen showing your various posting options.

A simple entry of “{{EntryTitle}} {{EntryUrl}}” will tweet the title of your Dreamwidth post followed by a link to that post, but you have several other options as well, including a timestamp (“{{EntryPublished}}”) or free text of your choice.

For my own Dreamwidth account, I entered “Dreamwidth: {{EntryTitle}} {{EntryUrl}}”, which produces a result like this:
My auto-posted tweet!

 

Step Five: Finish!

Finish your applet!
Once you have your tweet format set up the way you want it, click on “Create action” and you’re done! You’ll be given the chance to review your applet and make any final edits you might want. Once you approve the applet, it will go into the “My Applets” library. Then all you have to do is add a new post to your Dreamwidth journal, and your Twitter followers will be notified.

This same method can be used to create a wide variety of “cross-posters,” which is handy for anyone who runs more than one blog or other content creation service. The results may vary from service to service— different blogs have different methods of consuming and posting RSS feeds— but it is very flexible tool.

-The Gneech

Share
Filed under : Tech Writing | Comments Off on Creating a Dreamwidth-to-Twitter Crossposter
Mar 16 2016

Writing Sample: HTML Training 2010

Posted by

Text: HTML_Training_101

Workbook: HTML_Training_Exercises

This was the curriculum for an in-house training in HTML I gave at Circle Solutions in 2010. I wrote it in a deliberately “breezy” style in order to keep the course engaging and entertaining.

-The Gneech

Share
Filed under : Tech Writing | Comments Off on Writing Sample: HTML Training 2010
Jul 15 2012

Photoshop Lesson: Isolating Inks From the Background

Posted by

Okay, this is something that I’ve known for years had to be in there, and had to be easy, but couldn’t find any lessons on anywhere and eventually just gave up looking. But last night I found it, buried in a sidebar in Manga: The Ultimate Guide to Mastering Digital Painting Techniques (ImagineFX), and it works beautifully! It sure as heck works better than the “select color range and delete white” method I’ve been using until now!

Anyway, I’m posting this here for my own easy reference, but I figure other folks might be looking for it too. I’m working in CS3; I’m sure these techniques exist in other versions as well, although the interface might be different.

This is an image-heavy post, so I’m going to put it behind a cut. But it’s a nifty, nifty technique! Read more »

Share