Planning an event

mjgiarlo edited this page Sep 21, 2014 · 6 revisions
Clone this wiki locally

Here's the process we've been following to set up Computer meetings in Seattle.


It'll be helpful to have access to the existing sites:

For access to the above, get in touch with @mjgiarlo, @diplomatica, or @whatdog.

N.B. You don't need access to all or any of these, though; you can create them anew if you wish or if you must! No hard feelings. Such is computer.

The process, step by step

GitHub/git setup (for the website)

First, open up a terminal and get comfy with the command line. You'll need this to get started and to finish off.

Make sure you have cloned the computer repo, either from your personal fork or from the ComputerAnonymousSeattle org's fork. If you have write access to the latter, clone it locally:

git clone

Otherwise, create your own fork and clone it at the command line:

git clone

Change into the directory that was just created and checkout the gh-pages branch which holds the markup that powers the website:

cd computer
git checkout gh-pages

Now your local repo is connected to GitHub, but you still need a connection to the main computer repository to pull upstream changes:

git remote add upstream git://

Before continuing, make sure you have the latest changes from the upstream repository so that the changes you make to the website may be cleanly merged, and then push them to your fork so everything's in sync:

git pull upstream gh-pages
git push origin gh-pages

The final step of getting ready is opening up the us_seattle.html file in the text editor of your choice -- any one will do, preferably one that isn't going to format or mangle the HTML code that makes the page render nicely in web browsers. (No Microsoft Word. Use emacs, vim, sublimetext, eclipse, gedit, textmate, notepad, notetab, textpad, etc.) I use emacs, but YMMV (no :fire: :bomb: necessary).

emacs us_seattle.html

You're going to leave this window open for a while.

Edit the website's HTML

Locate the block of events. It looks like this:

  <li><strong>June 2014</strong>
      <li>When: 6pm-9pm Pacific on Tuesday, June 24th, 2014 <a target="_blank" href=""><img border="0" src=""></a></li>
      <li>Where: <a href="">Outlander Brewery &amp; Pub</a> (<strong>Note: venue is 21+!</strong>), <a href="">225 N. 36th St., Seattle, WA 98103</a></li>
      <li>Sign-up: <a href="">via
      or <a href="">via
      or <a href="">via GitHub</a></li>
      <li>How to find us: There will be a sign on the table that says "computer?"</li>
      <li><strong>NOTE: Please read over the <a href="">"The Rules" and "Imposters Welcome"</a></strong></li>
  <li>May 2014
      <li>When: 6pm-9pm Pacific on Thursday, May 22nd, 2014 <a target="_blank" href=""><img border="0" src=""></a></li>
      <li>Where: <a href="">Twilight Exit</a> (<strong>Note: venue is 21+!</strong>), <a href="">2514 E Cherry St, Seattle, WA 98122</a></li>

Copy the list item (<li>) block corresponding to the latest event, and the list item immediately below it (containing <li>&sect;</li>). Paste it immediately following the opening <ul> tag. This uses the last entry as a template for the next one.

Edit the block below the one you just copied with the following changes:

  • Remove the <strong> tags around the month/year list item; we only make the current event bold.
  • Delete the <li> blocks containing (only the current event needs these):
    • Sign-up
    • How to find us
    • The NOTE about reading the computer rules

Now we edit the information in the topmost list item, the one you copied:

  • Change the time (if necessary) and date of the next event

You're ready to start tweaking all those sites we talked about in the Prerequisites section above.

Create a new calendar entry

  • Bring up the calendar in your browser
  • Locate the event from last month, and click it
  • Click the "copy to my calendar»" link to open up a new calendar entry based on the last one
  • Tweak the new event as follows:
    • Click the "Calendar" dropdown and select "ComputerAnonymousSeattle"
    • Change the date (obvs)
    • Add the location of the event to the "Where" box. Google's pretty smart with autocompletion here, but may not give you an address that's precise enough. I typically Google the venue in another tab and copy in the full postal address.
    • Add any co-hosts (or other planners, or other folks you want to see the entry) as guests
    • Under "Privacy," select the "Public" radio button
  • Click the "Save" button. (And, if you entered guests, you'll be asked if you want to send invitations to the guests -- this is entirely up to you.)
  • Find the event on your calendar, click it, and click "Edit Event"
  • Down near the bottom of the calendar entry, click the "Publish event" link and a modal window will pop up with the calendar widget you can share on the webpage. Click in the textarea and select the HTML code (either with your mouse or ctrl-a or equivalent for your operating system). It will look like this:
<a target="_blank" href=""><img border="0" src=""></a>
  • Make sure to copy that HTML code to your clipboard! You're about to use it.
  • Click OK, then click Save again.
  • Paste the HTML code near the end of the "When" list item for the next event in your text editor. Look at the code for past events to see where to place this (after the date/time text but immediately preceding </li>). You're done with the calendar.

Create a map

  • In the "Where" list item, change the URL in <a href="URL"> to match the URL of the venue's website, so folks can find out more about where the event will be held, and change the text inside the <a> element to match the name of the place
  • As a courtesy, I like to include right after the link to the venue a note (in bold) about whether the venue is all-ages, 21-and-over, or some combination (like, all-ages until 8pm, then 21-and-over). N.B. this can be challenging to find out over the web, so you may want to call the venue and ask -- it's a good idea to call the venue anyway to make sure they will have room for a group of n (where the value of n has typically been between 6 and 14). Oftentimes, the venue will reserve a table, or even a room, for us if you call ahead!
  • Copy the address of the venue out of the calendar entry you created earlier and enter it as text within the next <a> tag.
  • This <a> tag contains a shortened link to a map of the past event. Let's update that.
    • Open up Google Maps
    • Enter the address into the GMaps search bar. The venue should now be zoomed and pinned.
    • Click the "gear" icon on the bottom right of the screen and click "Share and embed map"
    • Click the "Short URL" checkbox, and then copy the URL into the <a href="URL"> to link to the map

Create a Facebook event

  • Copy the URL for the most recent Facebook event into your browser and load it up
  • Click the ellipsis () button (assuming you have edit access to the event), then select "Copy Event"
  • Within the copied event, change the Name, Where (autocompletion helps!), From, and To values to reflect the details for the event
    • N.B. Facebook sometimes does this silly thing when you enter the From date, where it decides the To date should be the day after. Take note of this and set it back to the same date, unless the computer event is a sleepover.
  • (Optional) If you want to add any Facebook users to the list of invited users, click the link in the lower-lefthand corner that says something like "13 friends invited"
  • Click the "Create" button
  • Grab the URL of the created event out of your browser's address bar (N.B. it may look like this -- with some query parameters at the end, but you can delete those so you have a clean link, like Copy the URL
  • Paste that URL into the Facebook <a> within the "Sign-up" list item

Create a Google+ event

  • Copy the URL for the most recent Google+ event into your browser and load it up
  • In the "Details" block, click the downward arrow in the upper-righthand corner, then select "Duplicate Event"
  • Within the copied event, change the name, dates, times, and location (autocompletion helps!) to reflect the details for the event
  • (Optional) If you want to add any Google+ users to the list of invited users, add them below
  • Click the "Invite" button
  • Copy the URL of the created event out of your browser's address bar
  • Paste that URL into the Google+ <a> within the "Sign-up" list item

Create a GitHub sign-up

  • Copy the URL for the most recent GitHub sign-up into your browser and load it up
  • Middle-click (or whatever your OS prefers) the "New Issue" button to load it in a new tab
  • Click the "Edit" button
  • Copy the title and body text over from the existing issue into the new one, then tweak the new one to reflect the right date, time, location, and neighborhood
  • Click the "Submit Issue" button
  • Copy the URL of the new issue out of your browser's address bar
  • Paste that URL into the GitHub <a> within the "Sign-up" list item
  • Cancel the edit of the old issue, and then close it via the "Close Issue" button

Save and push your changes

You're all done making changes to the website in your text editor now. Way to go! Save your changes and edit the editor.

Commit and push your changes to your GitHub fork (N.B. change the commit message to match the month/year of the event!):

git add us_seattle.html
git commit -m "[Seattle] July 2014 event posted"
git push origin gh-pages

Create a pull request on GitHub, then click the "Create Pull Request" button.

You've done all you can do! When one of the committers of the main computer GitHub repo merges your pull request, the website will automatically reflect the changes you made. You should receive a GitHub notification about this. When you do…

Announce the event via Twitter

I usually tweet something like The next @WhyComputer #Seattle event will be on Weds, July 23rd at 6pm @Chucks85th (Central District). Sign-up here:

And that's all (s)he wrote.