Shadow – Labs Release 3 Now Available

Adobe Shadow Labs Release 3 now available on Adobe Labs

Shadow has been updated on Labs, the iTunes Store, Google Play market, Chrome Web Store and Android App Store for Android. Important: The entire Shadow system must be updated, as we covered in a previous post. If you need help with updating, please ask on the Shadow Community Forums.

New Features in Shadow Labs Release 3

Screenshots — Screnshots can now be cpatured from any or all Shadow devices, and are returned to the computer. Use the Action menu on Shadow devices to take one screenshot. Use the Chrome Extension to click a single button to grab screenshots from all your connected devices. Screenshots are stored in ../username/Documents/Shadow/ on OSX, and ..usernameDocumentsShadow on Windows.

Cache Management — Use the Pull to Refresh gesture on Shadow devices to clear the cache on one device, and the Refresh All button in the Chrome Extension to clear the cache for all connected Shadow devices.

HTTPS Support — Use unsigned SSL certificates during development. Connected Shadow devices will now provide a dialog prompting you to accept an unsigned certificate.

If you’d like to see the new Labs Release 3 features in action, check out our new AdobeTV video.

Please try Shadow Labs Release 3 and let us know what you think on the Shadow Community Forums. We’re listening, and your feedback is important to us as we build the next versions of Shadow.

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , , , | 1 Comment

Shadow Update to Labs Release 3 Coming

On Friday June 15, in the late afternoon Pacific time, we will begin rolling out an update to the Shadow infrastructure. This update will require everyone using Shadow to update their software, on their computers and their devices.

For those of you who are working on deadline, we apologize if this is bad timing for you. We’re pushing the updates on a Friday afternoon in an attempt to minimize the impact. It is necessary to complete the update process before using Shadow again.

Shadow is deployed to the Chrome Web Store, Google Play market, iTunes Store and Amazon Appstore for Android. These marketplaces are not in our control, so propagation may take some time. Please be patient and try again if the updated mobile apps are not yet available.

This process will start automatically for you. Here’s what you can expect:

  1. Your Chrome Extension will be automatically updated by the Chrome Web Store. Once that happens, the next time you go to use the Shadow Chrome Extension, you will be notified that a major update is required. A link will be provided to take you to the new version of Shadow on our Adobe Labs site. If you would like to jumpstart this process, you can force the extensions to be updated by going to chrome://chrome/extensions/, then clicking the “Update extensions now” button. Once the Shadow Chrome Extension has been updated, Shadow will not work for you until you complete the following steps. If you have Chrome Sync enabled, all of your Chrome browsers will get the updated Shadow extension.
  2. On our Adobe Labs page, you will be able to download the new version of Shadow. Once the download is complete, you’ll need to install the new version. Double-click the .dmg or .exe file to begin, and follow the prompts to complete the installation. It is not necessary to uninstall or remove the currently installed version of Shadow.
  3. Next, you need to update the Shadow software on your devices. You can do this by going to the marketplace for your devices, and starting the update process. You can do this on your computer, or on your device, whichever you prefer or is appropriate.
  4. It will be neessary to pair your devices, as the previous authorization will not be remembered.

Once you have paired your devices, you will be able to begin using Shadow normally again.

The new version of Shadow is more reliable, and has some new features that we think you’re going to like, so this update should be worth your time and effort. We’ll tell you more about the new features in a few days – we don’t want to ruin the surprise!

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , | 2 Comments

Shadow + Typekit + localhost workflow

Using Adobe Shadow with Typekit for local development workflows

If you’re using Typekit in your web projects, this article will show you how to use Adobe Shadow to preview your Typekit webfonts on devices during your development workflows.

Note: This post assumes you already have a Typekit account, and have created a Typekit Kit.

Shadow and localhost

In order to preview http://localhost content on your Shadow devices, Shadow does a translation of the URL when instructing Shadow devices to preview your content. E.g., if your site is at http://localhost/~akishnan/meridien/index.html, before it sends the URL to Shadow devices, it replaces localhost with the IP address of the machine where Shadow is running. This is necessary because localhost is relative. In our example, Shadow would tell devices to go to http://192.168.1.104/~akishnan/meridien/index.html.

One of the side-effects of this translation is that Typekit fonts which are registered under localhost do not work on Shadow devices.

Let’s fix this, so everything works the way you want it to…

Add your IP address to your Font Kit Settings

  1. Login to Typekit
  2. In the top right, choose one of your Kits from the menu, then click Launch Kit Editor
  3. You will see your Type Kit Editor, click on Kit Settings in the upper right
  4. In the Domains field, add your current IP Address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension
  5. Click on Save Settings
  6. Click on Publish (wait 10-15 minutes for propagations across the Typekit servers)
  7. Click on Embed Code in the upper right, then copy and paste your code snippet inside the head tag in your web page(s). E.g.:

  8. try{Typekit.load();}catch(e){}

  9. Apply your Typekit font to html elements on your web page
  10. .fancyH2 {
    font-family: "cabazon";
    padding-top: 1em;
    color: #FFF;
    }

  11. Preview your page in Chrome. Shadow devices will now also display your Typekit fonts!

You can repeat this procedure to change your IP address and republish your Typekit Kit as often as necessary, with no penalties.

We hope you enjoyed this article, and welcome your feedback in the comments.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow

Posted in Workflow enhancements | Tagged , , , , , | 6 Comments

Shadow + Charles Proxy: Virtual Hosts Workflow

Virtual Hosts workflow for Adobe Shadow

We’ve heard many requests to enable Shadow to work in workflows that are using local Virtual Hosts. For many technical reasons, this is difficult accomplish in Shadow without additional machine specific configurations. We recommend a workflow that uses Charles Proxy. Charles is a popular tool mostly known for its ability to simulate bandwidth throttling, but it can also serve to resolve virtual hosts.

This blog post is for people who are already using virtual hosts in their workflows, and describes how you extend those workflows to include Shadow devices.

Setting up a Virtual Hosts Directory

You may skip this section if you have already have local virtual hosts set-up in your environment.

  1. Enable virtual hosting in httpd.conf by uncommenting the below line. See detailed instructions for Mac OSX or MAMP/XAMP and step-by-step guides to defining virtual hosts for your respective environment. You will also need to add the virtual hosts to your /private/etc/hosts file (also covered in these guides).
    Include /private/etc/apache2/extra/httpd-vhosts.conf
  2. Define your Virtual Host directories. In /private/etc/apache2/extra/httpd-vhosts.conf, our example snippet declares two virtual hosts “citrus.demo.com” and “meridien.demo.com” mapped to two different directories:

 

DocumentRoot “/Users/akishnan/Sites/Citrus”
ServerName citrus.demo.com

DocumentRoot “/Users/akishnan/Sites/meridien”
ServerName meridien.demo.com

 

Configure Charles Proxy

  1. If you don’t already have it, download Charles Proxy and launch it
  2. Make a note of your computer’s IP address (the current IP address is displayed at the bottom of the window in the Shadow Chrome Extension). The default port number of Charles Proxy is 8888

Configure the HTTP Proxy on Android devices

  1. On your Android device, go to Settings > Wifi (the exact path varies by device and OS version)
  2. Press and hold on the wireless network to which your Shadow clients are connected
  3. Tap “Modify Network”
  4. Check “Show Advanced Options”, Choose Proxy Settings “Manual”
  5. Enter the IP address* of the machine where Charles Proxy is running (you made a note of this above)
  6. Save your changes

*NOTE: if your machine’s IP address changes, you will need to repeat step 5 for each device.

Configure the HTTP Proxy on iOS devices

  1. On your iOS device, go to Settings > Wifi
  2. Tap on the blue arrow next to the name of your current wireless network
  3. Turn on HTTP Proxy and choose Manual
  4. Enter the IP address* of your computer where Charles Proxy is running
  5. Enter 8888 as the “Port”


*NOTE: if your machine’s IP address changes, you will need to repeat step 4 for each device.

Shadow & Virtual Hosts

  1. Start Shadow on your devices (Android and iOS)
  2. In Chrome, browse to one of your virtual host URLs, e.g., http://citrus.demo.com/ or http://meridien.demo.com/
  3. You will see a permission prompt from Charles to allow the mobile device’s IP to connect using the Charles proxy: Choose “Allow”. You will see this permission prompt once for each connected Shadow device.
  4. Paired Shadow devices are now able to see your virtual host URLs!

Charles Proxy Permission Dialog

Note: If your IP address changes, you will be prompted once again.

In a future blog post, we’ll cover how to use the Charles Proxy Bandwidth Throttling features with Shadow so you can simulate slower connection speeds on Shadow devices.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow

Posted in Workflow enhancements | Tagged , , , , , | 7 Comments

Shadow + LiveReload workflow

A Typical (tedious) Web Design Workflow

If you’re a front end web developer, your daily workflows probably look something like this:

  1. Put your files on a web server (either remotely or on your local computer)
  2. Load the page in a browser
  3. Check, and see that it isn’t quite right
  4. Make a change (e.g., a CSS tweak or an image edit)
  5. Save
  6. Switch back to the browser
  7. Reload the page
  8. Repeat steps 4 – 7 about 100 times

As you add a device to your workflow, the problem gets compounded because you now have to touch the device each time you make a change. Add more than one device, and you are sure to develop some wrist problem due to repetitive stress injuries.

Of course Shadow helps you with its synchronous browsing feature, but what if Shadow devices were also automatically refreshed as soon as you Save after a change? We want to make sure you know about a pretty cool tool that works well with Shadow – it’s called LiveReload, and it can further improve your workflows.

LiveReload

LiveReload, as you’ve probably guessed, reloads the page for you as soon as you Save. When you make a change to a CSS file or an image, the browser is updated instantly without having to switch to the browser to reload the page. It does this by watching your filesystem for changes in your project files.

Using Shadow and LiveReload together

  1. Launch LiveReload
  2. Click the + button at the bottom, and add the site folder you want LiveReload to monitor
  3. Paste this code into the HEAD tag of your html – replace the 192.168.1.104 IP address with your machine’s current IP address (see Things To Be Aware Of section below)
  4. <!-- inject LiveReload script -->
    <script src="http://192.168.1.104:35729/livereload.js?snipver=1"></script>

  5. Browse to the URL of your page in the Chrome browser on your desktop (e.g., http://localhost/meridien/index.html)
  6. Connected Shadow devices will follow along using Shadow’s synchronized browsing feature
  7. Make a small CSS tweak in a .css file in the site folder you asked LiveReload to monitor in step #2, and Save the change
  8. Watch your Shadow devices (iPod, iPhone, iPad), and see the changes appear automagically
  9. If you load that same URL in other browsers, they will also benefit form LiveReload.

Things To Be Aware Of

  • For step 3 only, using ‘localhost’ won’t work – LiveReload requires using your machine’s current IP address. The current IP address is conveniently displayed at the bottom of the window in the Shadow Chrome Extension.
  • Also regarding step 3, it is necessary to use the LiveReload script in your files if you want to see updates on your Shadow devices. LiveReload has optional browser plug-ins, but those can’t be used with devices.
  • LiveReload uses “WebSockets” to propogate changes. As of now, the Android WebView does not support Web Sockets so this currently only works for connected Shadow iOS devices. You can check When Can I Use to verify this.
  • Keep an eye on the roadmap for LiveReload to see what they’re planning next.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow team

Posted in Workflow enhancements | Tagged , , , | 5 Comments

Shadow – Labs Release 2 now available

Adobe Shadow Labs Release 2 is now available on Adobe Labs

We’ve been thrilled and encouraged by the amazing responses we’ve gotten to Shadow! We’ve been busy working on the next version, and believe that Adobe Shadow Labs Release 2 addresses almost all of the issues that you’ve been telling us about:

Localhost URL support

Shadow now works correctly with URLs containing localhost, and 127.0.0.1 on Windows and OSX. In addition, on OSX, it also works with machine.local.

Adobe Edge integration

If you’re using Adobe Edge, the Preview in Browser command now works with Shadow. You’ll see your animations previewing in Chrome, and on all of your Shadow devices. (This requires Chrome to be the default browser)

HTTP Authentication support

You can now browse to URLs that require HTTP authentication, and see the login/password form on Shadow devices. If your URL contains the login id/password, then Shadow devices will authenticate without the form. (e.g., using a URL like: http://login:password@mysite.com)

Support for iPad (3rd Generation)

Shadow now includes high resolution application assets for the Retina Display on the new iPad. We’ve included a couple of other miscellaneous fixes to improve iPad (3rd Generation) compatibility.

Improved workflows for sticky caches

You can now use a Refresh gesture on Shadow devices (tap on the page, hold, and pull down until you see the “Release to refresh…” message). This will reload your page, using the freshest assets.

Amazon Kindle Fire support

Shadow will soon be is now available in the Amazon Appstore for Android, allowing easy installation on Kindle Fire devices.

URL Monitoring

Pages/apps that change URL parameters or navigate to new states using ‘#’ anchors now work correctly. Shadow monitors the Address Bar in Chrome, and sends updates to Shadow devices as they happen. This includes jQuery Mobile single page apps.

Note: Shadow for iOS (v1.0.184) will be is now available on the iTunes Store soon. The changes listed above require this new version.

Be sure to update all of the different Shadow pieces to take advantage of the goodness in Labs Release 2.

What we did not do

One thing that we’ve heard loud and clear, is that Shadow needs to work with virtual host file workflows. We were not able to deliver a solution to this in Labs Release 2, but understand that this is a very important feature for many of you, and are working on a solution. This is tricky, and is going to take some time for us to address properly. Please be patient with us – we’ll get to this as soon as we can.

Please try Shadow Labs Release 2 and let us know what you think on the Shadow Community Forums. We’re listening, and your feedback is important to us as we build the next versions of Shadow.

Enjoy!

Bruce Bowman
Shadow product manager
twitter: @brucebowman, @adobeshadow

Posted in Announcements, Major Feature Release | Tagged , , , , , , , , , , , , | 8 Comments

Shadow Ask-a-Pro event April 13, 2012

Join us tomorrow for the Adobe Shadow #AskaPro online conference where we’ll cover the latest on Shadow Labs Release 2, tips, and what to expect next. Archna Panwar and other Shadow engineers will be on hand to answer your questions.

You can Register here.

Bruce Bowman
Shadow product manager
twitter: @brucebowman

Posted in Online Event | Tagged , | Comments Off

Meet the Shadow team – April/May 2012

 

The Shadow team frequently attends web design and development conferences, and is always looking for opportunities to meet with you. If you’re attending one of these upcoming events and would like to connect with the team, please reach out to us on twitter, @adobeshadow.

Bruce Bowman
Shadow product manager
twitter: @brucebowman

Posted in Meet the Team | Tagged , , | Comments Off

Adobe Shadow for iOS update

Adobe Shadow for iOS, v1.0.146 is now available on the iTunes Store.

What’s New:

  1. Check for network connectivity improvements
  2. Share menu which includes “Open URL in Browser” and “Copy URL to Clipboard”
  3. Bug fixes, UI tweaks and performance improvements

The new Share menu items will be helpful if you’d like to open the currently displayed page in another browser on your device.

Bruce Bowman
Shadow product manager
twitter: @brucebowman

Posted in Minor Feature Release | Tagged | 4 Comments

Shadow at SXSW this week

Some members of the Shadow team are in Austin for SXSW, and we’d like to meet with Shadow users. Follow us on twitter @AdobeShadow, where we will occasionally post a location where we’re hanging out. We’d love to meet you, hear how Shadow is working for you, and talk about mobile web development.

We will be doing our first public demo of Shadow at the Adobe Creative Camp on Monday March 12, at 11:00am, at the Radisson Hotel, 111 East Cesar Chavez Street. http://blogs.adobe.com/events/creative-camp-sxsw-2012/

Hope to see you in Austin!

Bruce Bowman
Shadow product manager
Twitter: @brucebowman

Posted in Meet the Team | Tagged | Comments Off