One of the primary goals of Edge Code is to grow with the web. Since the web is constantly evolving that means we get opportunities to add support for new features and expose them in a way that makes them easy to use. One example we’re excited to share today is our support for CSS Regions.
We just dropped a new preview of Edge Code today. In your Creative Cloud app you should see that Edge Code has moved from “Your Apps” to “Find New Apps” if you’ve already installed it. Just click the “Install” button and it will start downloading the latest preview. If you’re using Edge Code you’ll also see a product notification icon telling you there’s a new version to download.
We’ve also enhanced the Kuler feature so now in the inline color selector you have access to your favorited themes alongside your created Kuler themes as well as popular and random themes from the Kuler service.
Edge Code also includes a feedback button in the lower right hand corner. In this box you can provide us anonymous feedback about the product. Feel free to use this for feature requests, issues you encounter, or just general thoughts on the product.
You can see a full list of what’s new in this release here. Thanks for checking out Edge Code! We’re looking forward to getting your feedback.
As of Sprint 28, Brackets has an awesome new feature, the Brackets Extension Registry. It’s an incredibly easy way to install and manage the numerous extensions that are out there for Brackets and Edge Code. Unfortunately, for various reasons, we can’t ship Edge Code with the extension registry enabled. But that doesn’t mean you can’t tweak Edge Code so that you can start using it.
To enable the extension registry in Edge Code you need to add two lines of code to your config.json file in Edge Code. On Windows you can find that file by browsing to C:\Program Files (x86)\Adobe\Adobe Edge Code CC\www. (You may have to right click and modify the permissions on the config.json file so you can make changes). On Mac, right click Adobe Edge Code CC in your Applications folder and select “Show Package Contents”. Then browse into Contents/www and you’ll find the config.json file in that directory. (You’ll need to open this in an editor that lets you type in your administrator password to make changes because it’s also read-only.) You can also copy the config.json file to another location, modify it, then copy it back into the Application directory.
You’ll need to add these two lines to the end of the “config” node of the JSON file (and remember the comma on the line above these two).
So your entire “config” node should look like this:
"app_title": "Adobe Edge Code CC (Preview)",
"app_name_about": "Adobe® Edge Code CC",
Once you’ve added those two lines, restart Edge Code, and click the extension icon. You’ll now see two tabs in the extension manager. Select “Available” and you can browse and install extensions.
The team just pushed out an update for Edge Code CC and if you’ve already got Edge Code installed you should start seeing update notifications over the next 24 hours. If you don’t have it installed, grab it now!
This update includes all of the goodies in Brackets Sprint 27 and 28 as well as integration with Kuler. The past couple of sprints we’ve been hard at work getting core functionality into the editor. This drop includes some file management features like Save As. (finally!) as well as New->Untitled. We’ve also made it possible to drag and drop files and folders directly on to Edge Code to open them.
We’re big fans of Kuler on the Edge Code team, especially the new iPhone app, and we wanted to bring the themes being created in Kuler to our visual tools in Edge Code. The result is that when you create themes in Kuler and are signed into the Creative Cloud, when you open up the inline color selector in Edge Code, you’ll see the normal color panel as well as a list of your created Kuler themes. This makes it easy to bring colors from your created themes directly into your code.
We’re hoping to do another release in about a month as part of our plan to release every other “sprint” (our team works in two and a half week “sprints”, or increments). We’ll be adding more and more core features to the editor over the coming sprints and we’re also going to be doing some work on supporting SASS so you can use all of the cool features of Edge Code with your SASS-based projects.
You can see the full release notes here for a full list of features and potential issues. Thanks a lot for checking out Edge Code CC!
One of the cooler aspects of Edge Code is the ability to add extensions. Anyone can contribute extensions and there is already a growing ecosystem of cool extensions available (see this list for details). Unfortunately, some extensions do not work correctly and may interfere with Edge Code’s startup. If you find that Edge Code is not starting up for you and you know that you’ve recently installed a new extension, it may make sense to remove that extension and try starting the application again.
When Edge Code is running, it is easy enough to get to the extension folder. Just use the Help menu. You’ll see a handy, “Show Extensions Folder” item them. Of course, if you can’t run Edge Code than you can’t do that. Luckily the extension folder is in a pretty standard location.
On OSX, you can find the extensions folder at:
/Users/(your user)/Library/Application Support/Adobe/Edge Code CC/extensions
In Windows, you can find the extensions folder at:
C:\Users\(your user)\AppData\Roaming\Adobe\Edge Code CC\extensions
Notice that this folder contains two subfolders: user and disabled. Instead of just deleting extensions to try to find the right one, consider moving them into the disabled folder. Once you find the extension that was causing the problem, consider filing a bug report with the extension author. With Edge Code evolving, sometimes extensions work fine one day and not with the latest version.
I’m incredibly excited to announce the latest release of Edge Code CC which you can download now as part of the Creative Cloud. This release covers a number of core editor features as well as further integration with other parts of the Creative Cloud. Some of the highlights of this release:
- Edge Inspect CC Integration – Preview what you’re developing directly on your device and see it automatically reload as soon as you save.
- Edge Web Fonts Enhancements – The Edge Web Fonts dialogue is now fully keyboard accessible and you can now browse Edge Web Fonts from your LESS files.
- Improved File Tree – Delete files/folders from the file tree, show the file/folder in the OS file window, and refresh the file tree to show changes.
- NodeJS-powered Live Preview – Live Preview now serves off of a local NodeJS server.
- Quick Docs – Push Cmd/Ctrl+K on any CSS property and you’ll see inline documentation for it powered by WebPlatform.org.
- Quick View – Hover over images or colors and you’ll see a quick view window which shows you what that image or color looks like.
- Numerous Coding Productivity Features – Word wrap, highlight active line, auto close braces, hide line numbers, and many, many more.
We hope you enjoy this release! We’re going to be moving to a once-a-month release cycle going forward so about every month you’ll get a new build of Edge Code. Be sure to look for the blue present icon in the toolbar for more info about each release.
Thanks for using Edge Code!
Sr. Product Manager – Edge Code
The Edge Code and Brackets team(s) at Adobe has been experimenting with some workflows for extracting design assets and turning them into something that would be usable in a code environment. One example of that is something we’re calling “PSD Lens” internally that lets you link to specific items in a PSD file and then get CSS code hints on that item inside your code editor. This would let you pull out gradients, fonts, colors, sizes, and other properties from your design file so that your code matches exactly what’s in the PSD.
Note: This is just something we’ve been experimenting with. It’s not yet available in Edge Code or Brackets.
We know designers and developers have a variety of workflows and this is just one idea we’ve been playing with. On the Edge Code team we fully embrace the web designers who code and the web developers who appreciate design. That’s who we’re building Edge Code for. If you want to design in the browser you can use features like Live Preview to do that. If you’re working from a Photoshop file, something like PSD Lens might be helpful. If you’re coming from Edge Reflow we’re also looking at ways to easily access your Reflow design so you can match exactly what’s in your design in the context of code. In that vein there’s also a lot of thinking going on about some potential responsive design and development workflows in Edge Code and Brackets you should check out.
If you have feedback on this or anything else in Edge Code (or Brackets) definitely feel free to drop me an email directly.
MAX 2013 starts next week and it’s shaping up to be a really fantastic event for creatives of all stripes. There are a ton of great sessions across the tools in the Creative Cloud and we have some world class speakers who are going to be sharing their insight.
There are a number of sessions worth checking out across Edge Tools and Services but I wanted to highlight a few that are going to be specifically talking about Edge Code:
- Introduction to Edge Code – This is a session that I’m giving and will give you an overview of how to use Edge Code, some of the principles behind the project, as well as a look at some features we have planned and how you can jump in and build extensions.
- Playing CSS with Edge Code – This is a “Bring Your Own Device” lab where you’ll be walked through some of the features of Edge Code that make CSS editing easy and learn about some new CSS features.
- Edge Tools & Services: A Complete Workflow – Paul Trani, evangelist extrordinare is going to lead a session on the complete Edge Tools and Services workflow so you’ll get a look at how all the parts fit together.
- Edge Tools & Services: From Design to Mobile App – Another great session that shows the workflow across Edge Tools and Services, this one specifically focuses on mobile development.
I’ll also be at the Meet the Teams session so if you have questions or requests for Edge Code, come and find me.
Finally, there are a lot of great Brackets sessions that cover everything from using the product to contributing in various ways. You should also swing by the Brackets/PhoneGap hackathon which is going to be a great chance to jump into Brackets and make both it and Edge Code better!
Someone mentioned on the forums that searching for Edge Code extensions doesn’t bring up much of a list. Luckily because Edge Code is a distribution of Brackets, you can use nearly all of the Brackets extensions just fine with Edge Code.
So if you’re looking to extend Edge Code beyond it’s built-in functionality you can check out the list of Brackets extensions on the Brackets Github Wiki.
To install one of those extensions into Edge Code, simply download the extension (usually downloading a zip file of the project source is good enough). Then in Edge Code go to Help->Show Extensions Folder, copy the unzipped folder into that directory and reload Edge Code.
Right now not all Brackets extensions will work with Edge Code. Specifically there were some big changes between Sprint 19 and Sprint 20 in Brackets that changed some of the APIs. The next release of Edge Code will include those changes so you’ll be able to grab all of the extensions that only work with Sprint 20.
On Valentine’s Day we released Edge Code Preview 3 which included some great new features like CSS code completion, updates to Edge Web Fonts support, and Native Menus.
If you’re new to Edge Code we put together a video that walks you through some of the basics behind the tool and will get you up and running with some of its core features. We’re looking forward to showing you more down the road.