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.
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.
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.
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.