Edge Code CC (Preview) Release Now Available

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.
  • Advanced JavaScript Code Intelligence – Get code intelligence on your custom JavaScript functions which includes type inference and parameter hints.
  • 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!

=Ryan
Sr. Product Manager – Edge Code
ryan@adobe.com

Posted in Uncategorized | 3 Comments

From Design to 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.

=Ryan
ryan@adobe.com

Posted in Uncategorized | Tagged , , , | 4 Comments

Edge Code and MAX 2013

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.

max-screenshot

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!

Posted in Uncategorized | Comments Off

Edge Code Extensions

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.

Posted in Uncategorized | Tagged , , | Comments Off

Getting Started with Edge Code

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.

Posted in Uncategorized | Tagged | Comments Off