The Blog

Fixing PHP code coloring in Dreamweaver CC (2017)

When Adobe updated Dreamweaver CC from 2015 to 2017 they completely rewrote the code coloring engine, bringing it into alignment with Brackets. This had the unfortunate side effect of obliterating all the previously available themes and granular color editing that had been available. Worst of all, the default Light and Dark themes have PHP code coloring that’s indistinguishable from regular text.

They have since released an update that allows the creation of user-editable .less files for costuming code coloring. Adobe’s help documentation goes through the process for customizing the code, but it lacks the user-friendliness of the old interface.

Before the update, I was a fan of the RecogNeyes theme:

If you look in the configuration > themes folder in Dreamweaver CC 2017, you’ll see all the old themes are still there, they just aren’t doing anything anymore.

I attempted to manually recreate this theme pulling color values from RecognEyes.xml into a new custom main.less file. Though, after using the new Dark theme for so long, it seems too desaturated with the new dark UI.

Which has lead me to tweak it to this:

If you’re interested, you can go to Dreamweaver > Preferences, choose “Interface” and click the + to create a new custom theme based on Dark. Click the Pencil icon to edit the theme and paste this at the bottom of the file.

/* RecogNeyes Saturated */
@background: #182225;

/* Color Theme Selectors & Color Values */

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #DC78DC;}
.cm-number, .cm-attribute, .cm-plus, .cm-qualifier {color: #fd9794;}

/* PHP Specific Code Colouring */
.PHP {
  .cm-meta { color: #79ABFF; font-weight: bold; }
  .cm-keyword { color: #00E000; } 
  .cm-operator { color: #EFC090; } 
  .cm-variable { color: #FF8080; }
  .cm-variable-2 { color: #2696b2; }
}

Save the file and you’re done! Updated PHP code coloring that’s slightly more WordPress friendly. You may need to go back into preferences to select the theme you created and click “Apply.”

2016 Electoral Map Coloring Page

Election results are coming! Election results are coming! I didn’t like any of the blank electoral coloring pages I found, so I made my own. Download a PDF here.

electoral-map-2016

Introducing the make something awful every day sticker pack for iOS 10

msaed-sticker-pack
msaed-poppers

Do your iMessage conversations lack bad internet art? That no longer needs to be the case with the brand-spanking-new make something awful every day sticker app. Get it in the App Store today!

Celebrate National Coloring Book Day belatedly with this podcast coloring book!

Did you know yesterday was National Coloring Book Day? Neither did I until 7pm last night! It was good motivation to finish a beta version of this podcast coloring book I’ve been idly working on for awhile.

Featuring some your favorites and mine:

Download a black & white PDF for printing and coloring fast, before this whole adult coloring trend finally collapses in on itself.



How to make any photo work as a 360 photosphere on Facebook

Facebook recently rolled out the ability for anyone to upload a 360 panorama or photosphere that can be clicked through on desktop, viewed with certain VR headsets, or viewed by moving your device around  on mobile. Flickr introduced a similar feature last December when it launched Flickr VR. I’ve been using that to upload 360 panoramic screenshots from ActiveWorlds, so was looking forward to doing the same on Facebook.

basement

Unfortunately I quickly discovered Facebook wasn’t automatically recognizing the screenshots from AW. Some googling revealed that Facebook requires images to have this meta tag to work:

<GPano:ProjectionType>equirectangular</GPano:ProjectionType>

I can view that this is missing from the raw metadata in Photoshop, but Photoshop doesn’t let you directly edit the raw meta data. There are some software tools to do this, but I found a simpler method. By extracting the raw metadata from properly formatted panoramas, I was able to create an XMP template I can now import in Photoshop to make Facebook read any photo as a 360 photosphere.

How to add missing equirectangular photosphere metadata in Photoshop (CC 2015)

  1. Download the XMP template with required projection meta tag and unzip it.
  2. Open the photo you wish to make into a panorama in Photoshop. 6000 x 3000 pixel images work well (this is what AW produces)
  3. Go to File > File Info and select the Raw Data tabmeta-rawdata
  4. Click “Template” and choose “Import…”
  5. Navigate to where you saved the XMP file in step 1 and click “Open.” In the dialog that opens, choose “Keep original metadata, but append matching properties from template”
    meta-append
  6. The new metadata with the equirectangular tag should now be added.
    meta-withdata
  7. Click OK. You can now save the photo and upload it to Facebook. If everything worked, your post dialog will say “Say something about this 360 photo…” and a globe icon will appear on the thumbnail.
    Screen Shot 2016-06-19 at 5.56.42 PM
  8. Congrats! You’ve now manually created a 360 photo.

As a sidenote, if you’re interested in capturing 360 photos in the real world, new versions of the Android camera app have the feature built in. If you’re on iOS, you can download Google’s Street View app, which has a 360 capture mode. Street View has supported uploading photospheres for a few years now.

If you’re looking for a simple app for uploading and viewing photospheres using a headset like Google Cardboard, I recommend Round.me.

Update: 08/14/16

If you’re having trouble getting iOS panoramas to upload as photospheres to Facebook, I’ve found Facebook often requires the panorama to be the full width, meaning you can’t stop early. If you have a differently sized image, you can try working from an image template instead.

  1. Download this image.
  2. Copy the image you’re trying to get to work as a panorama into a new layer in this document.
  3. Save the image as a jpg.

Update: 09/21/16

I’ve uploaded a basic template for full 360 photospheres. Add your images on top, keep the document the same size, and save as JPG, making sure to retain metadata.

Facebook’s published some extensive documentation for editing 360 photos and injecting metadata, but I think my solutions’s simpler. They also have some templates of their own which are useful.

Why I make something awful, every day

I just published my first entry on Medium, detailing some of my thoughts behind the last five years of making something awful.

Why I make something awful, every day

Back Trove: The Crystal Caverns on Kickstarter

My brother-in-law Patrick Leder just launched (and already successfully funded) a new tabletop boardgame Kickstarter. Designed by him and David Somerville with art by Kyle Ferrin, Trove: The Crystal Caverns is the ultimate asymmetric cave-crawling adventure where you become the brave Knight, Goblin horde, massive Dragon, or malevolent Cave. I’ve been helping with design and layout and also put together the Kickstarter video, featuring Kyle’s amazing art.

Check it out! And back, if you’re so inclined.

Exploring off canvas nav menus with Bootstrap

I’ve been stuck in the weeds figuring out navigation patterns for a major project at work, so I thought I’d quickly share some examples I’ve been referencing. The site Adventures in Responsive Navigation has been a godsend, along with the navigation patterns in Brad Frost’s This Is Responsive.

Off Canvas Menu Resources

Off Canvas Examples

Mega Menu Resources

Additional Resources

Some link highlights from this year’s SXSW

I saw lots of great (and some not so great) panels once again this year in Austin at SXSW. These are their stories.

Interactive Long Scroll Features
http://alcalde.texasexes.org/mondaymonday/
http://pitchfork.com/features/cover-story/reader/bat-for-lashes/
http://pitchfork.com/features/cover-story/reader/janelle-monae/
http://pitchfork.com/features/cover-story/reader/savages/

Pitchfork mentioned that working on these interactive features has improved the design of their festival sites and made other projects work better

Prototyping Tools
http://macaw.co
http://www.adobe.com/products/muse.html
https://creative.adobe.com/products/animate
http://www.invisionapp.com
http://www.axure.com/
 
Photoshop Extract
http://www.adobe.com/creativecloud/extract.html
https://helpx.adobe.com/creative-cloud/help/extract-css-images-psd-files.html

Hot New Apps
http://meerkatapp.co
http://gawker.com/my-14-hour-search-for-the-end-of-tgi-fridays-endless-ap-1606122925

Style Guides / Style Frameworks
http://trulia.github.io/hologram/
http://styleframework.com
http://styletil.es

Some Session Highlights 
http://amccrim.com/mtglessons/
http://designforpros.com

Weird Internet Art
(It’s recommended you play this with the volume muted while listening to this instead.)

SXSW Keynotes
This year’s aren’t up yet, but they will be eventually and you can watch last year’s here:
http://sxsw.com/interactive/conference/keynotes

Bruce Sterling’s 2013 closing keynote remains a landmark for me:

Recommended permissions setting for WordPress in MAMP PRO

After unsuccessful googling for how to resolve the issue of WordPress asking for FTP credentials on local installations, I finally arrived at a set of working permissions for MAMP Pro in OSX. Screenshots below  are from MAMP Pro v3.0.7.2 on Yosemite OS X 10.10, but the process is still the same in MAMP Pro v4 and in El Capitan 10.11 and macOS Sierra 10.12.

WordPress recommends CHMOD / file permissions of 755 for directories and 644 for files, but what I didn’t know of the top of my head was how that correlates to MAMP’s settings. I figured that out, but WordPress still wasn’t updating correctly. Then, I found this WordPress support thread where people said electronicink’s solution worked for them. Yosemite File Sharing Permissions no longer gives an FTP sharing option. Back to the drawing board! The missing key was who the Owner and Group should be. www! Duh. I’d likely changed it to myself and admin in my failed attempts at manually granting access through Finder’s Get Info feature.

Anyway, here’s the combination that finally worked for me. This dialog is accessed in the Hosts tab of MAMP PRO by clicking the people icon next to the folder icon where you choose “Document root.”

wordpress-mamp-pro-permissions