All posts by topher

SXSW Interactive 2017: It Happened to Me

My new virtual reality SXSW Line Simulator lets you feel like you’re actually standing outside of a SXSW panel you flew hundreds of miles to attend.

We’re all gonna die. Find out which tech startups are getting us there faster!

I’ve just flown back from South By Southwest Interactive in beautiful, cold, and rainy Austin, TX last yesterwednesday and boy are my takes hot! Seven key themes emerged from this year’s conference, which are sure to dominate the conversation for the next 12 months until they are unceremoniously declared “over” at next year’s Southby.

Trend #1: Artificial Intelligence has arrived and it thinks you’re fat.

You may not be ready for a Smart Mirror to be in the dressing room with you, watching, always watching, but it’s coming anyway. Most everyone at SXSW is careful to label themselves “techno-optimists,” but that’s because they’re trying to sell you something.

In a panel on Human Intelligence (HI) + Artificial Intelligence (Steven Spielberg, 2001), metal, mind, and body were represented by Adam Cheyer of Siri and Viv; Bryan Johnson of KerNEL, a human intelligence company; and Reshma Shetty, of Ginko Bioworks, the organism company. All three claim to want to empower people through technology, rather than simply harvesting their organs for power.

“Of course we’ll have class warfare between the neurologically augmented humans and others.”

Trend #2: Bio-hacking will allow HI to keep pace with AI.

There are too many people! Everywhere you look in Austin there are lines keeping you from what the content you wish to engage. Luckily, Biotech will let us bootstrap growthhack our way to neuro-augmented CRISPR-enabled platform class warfare by rewiring our brains to redistribute the universal basic income of the poor straight to the 1% with some fintech bitcoin peer-to-peer SaaS!

“The app economy is dead, so everyone just wants to talk about putting implants in your brain.” –The Vergecast Live at #NatGeoAtSXSW

Jennifer Doudna, professor of molecular and cell biology and chemistry at the UC Berkeley, in her keynote on inventing CRISPR said she, too, was optimistic, and besides, there are lots of other terrifying things to worry about causing the end of humanity than just CRISPR.

Also, what are we doing to help the Mars overpopulation problem?

Trend #3: IBM Watson is not a great bartender.

I got a little impatient with the line for an AI-recommended beer at the IBM activation and wasn’t blown away by the resulting selection. Taste was based on asking about your favorite season for drinking beer (summer), favorite berry (cranberry), and favorite dessert (tiramisu). Maybe I threw it off by picking what it classed as a bitter dessert. Bitterness is not something I look for in my beer. Results were picked from a pool of only six local beers.

Earlier I’d attended Mythbusters: How IBM Watson “Really” Works, presented by IBM CTO and certifiable futurist with long silver hair, Rob High. Watson when explained sounds almost boring, but I think that means it’s working, rather than some futuristic moonshot. Any sufficiently commercialized technology is indistinguishable from a chatbot. Though High wants you to know your chatbots suck and aren’t nearly as cool as Watson. High claimed by the end of 2018 about a billion people will be interacting with Watson applications. He also demoed some cool expressive text to speech engines where computer speech can have more human emotion and emphasis to better let you know form responses really do pretend to care about your insignificant problem.

Trend #4: Chatbots have arrived and they are ready to misinterpret your query that a simple search would’ve answered and offer to start a game of tic tac toe instead.

I was a little surprised by the amount of chatbot panels, but I guess with Grumpy Cat out of the picture this year we had to talk about something. One of the selling points given in Bot Best Practices was not requiring new app installations because they already live inside the apps users are engaging with. People really hate installing apps now.

The panel shared a statistic showing that monthly active users for the top four social networks have been surpassed by users for the top four messaging apps, which is why you should check out Sequel Bot Platform and start building your own disappointing brand experience today.

Trend #5: JavaScript! Am I right?

We’ve made JavaScript great again, but maybe it was already great to begin with? Did you know that JavaScript is even used in space? I wonder how many people have already been killed by bad JS. Is there a JavaScript framework called bad.js yet? I bet you can make some cool chatbots with JavaScript.

“HTML, JavaScript and CSS are the best parts of nobody’s day.” –Alex Russell

Google’s pushing Progressive Web Apps (PWA) with an offline first approach, which is really great for the 60% of mobile traffic that’s stuck on 2G using underpowered devices. Chrome software engineer Alex Russell’s Building Offline-First Progressive Web Apps was probably my favorite and most informative session. Now if only Safari would implement service workers.

Did you know you can even use JS to make your own VR experiences now?

Trend #6: Virtual/Augmented/Mixed Reality has arrived and it’s ready to sell you a brand experience.

“The future is already here — it’s just not very evenly distributed” –William Gibson

Gibson wasn’t at SXSW but VR/AR/MR certainly was. I saw people using Gear VR headsets everywhere, including a Starbucks, which didn’t even feel that weird. Despite V/A/MR’s ubiquity, the only demo I had was a subpar experience with Microsoft’s HoloLens at the National Geographic space.

The two Einstein-themed experiences could’ve been better suited to straight up VR. Nothing was gained by the mixed reality approach. The field of view in the HoloLens really is tiny, and the headset did not play well with my glasses. I struggled to tap a button using the mixed reality interface, which made me feel really old and uncool.

“Virtual experiences are real.” #queervr

NatGeo also had an augmented reality experience where you walked past a series of photographs on a wall while holding a tablet that brought the images to life. Despite being much simpler technology, it inspired more wonder than the HoloLens. Something was actually changing in the real world on the screen, whereas there was a disconnect with the HoloLens.

“Discussing wearables is more interesting than wearables” — Bruce Sterling

Trend #7: Apps, 3D Printing, drones, and Google Glass are dead.

In panel after panel people were talking about how no one wants to install your app. What they want is to hold their s̶u̶n̶g̶l̶a̶s̶s̶e̶s̶ Snap Spectacles™above their head to Snapchat Kesha, which is not to disparage Kesha, because she is fucking awesome. Maybe I missed it, but drones, 3d printing, and even voice assistants liked Alexa seemed underrepresented.

“Honestly, secretly, my goal is to live on
an island full of cats. …everything naked and sagging.”–Kesha

In conclusion…

Britney says everyone has been doing virtual reality & chatbots

There are always going to be new technologies and the next big thing, which will inevitably end up as yesterday’s news. Start simple and keep it stupid. Work towards your MVP (minimum viable product—SXSW fucking loves this acronym) whether it’s starting your first podcast, launching a product, coding your first PWA, or burdening the world with your first chatbot. Beware feature and mission creep and trying to do everything. Stay curious and keep learning.

“I don’t feel curious about anything except why I’m such a fraud.” –PJ Vogt of Reply All on creative block

Also ask if you really want to do it alone. No one’s a better editor than literally anyone besides yourself.

Some bonus parting notes:

  • AI will improve but won’t replace GUI
  • Switch your websites to HTTPS, yesterday
  • Learn React or something
  • Be upset you weren’t the first to think of Freddy vs. JSON
  • Start a podcast, but only if you can commit to six episodes and write a list of 30 episode titles
  • Join the Neo-Luddite movement while there’s still time! Smash some Snap Spectacles! Start that class warfare early.

“The day I turned 30 I was on safari and saw two lions having sex and thought, ‘my thirties are gonna be dope.’” –the one, the only Kesha


Topher McCulloch is a designer/developer () who’s attended SXSW five times and still feels just as dead on the inside as he did the very first time. This article originally appeared on Medium, where you should heart it.

 

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: