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

Shining the Light on Shadow, Adobe’s New Mobile Web Workflow Tool

New Tool for Web Professionals Makes it Simple to Optimize Web Experiences Across Mobile Browsers

Today we’re excited to introduce a brand new offering – Adobe Shadow Labs Release 1, which enables Web developers and designers to work faster and more efficiently by streamlining preview and customization of websites for mobile devices.

Mobile compatibility is a top demand of Web designers today, but we were hearing from the web community that building sites for mobile devices was a huge pain point in their workflow. The common process we heard was to manually key in the URLs on each device to check the layout and performance of each page of a site design – nothing short of tedious.

Adobe Shadow aims to alleviate the time and stress of working on websites across mobile browsers. Web pros can wirelessly pair multiple smartphones and tablets with their computer and simultaneously view real-time previews of Web content across multiple iOS and Android devices, quickly seeing refreshed website designs with live updates. We heard from the community that emulators and simulators just won’t cut it and it’s absolutely critical that website compatibility is checked on the actual devices. Adobe Shadow’s synchronized browsing nearly eliminates the need to touch the device, but still provides a real, on-device experience.

Adobe Shadow can be used in conjunction with any integrated development environment (IDE) or text editor to fit into every mobile Web development workflow. Shadow provides remote inspection and debugging so developers can inspect the DOM, as rendered on the device, make changes to markup and styles, and see changes instantly on any paired device.

We’re really excited to deliver Shadow and start simplifying the pain points of previewing, inspecting and presenting mobile web content. We encourage Web Pros to download the free Labs Release 1 of Adobe Shadow available now at http://adobe.com/go/shadow and provide the team with feedback.

We’ll be showing off Shadow for the first time at SXSW Interactive this week, details on the sessions are below. Or you can catch a video demo here: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow

Shadow at SXSW

Adobe will also be hosting a Creative Camp session on Shadow entitled, Boost your Mobile Workflow with Adobe’s Newest Product – Monday, March 12 at 11:00 a.m.- Noon in the Radisson Town Lake Ballroom.

Availability & Requirements

Adobe Shadow is available now, in English, worldwide on Adobe Labs. Adobe Shadow is comprised of several components, including Mac and Windows desktop software, a Google Chrome extension for desktop browser synchronization, and mobile apps for iOS and Android tablets and phones. Free Android and iOS applications for Adobe Shadow are currently available in the Android Market and the iTunes Store.

Posted in Announcements, Major Feature Release, Meet the Team | Tagged , , , | 8 Comments