Returning to our roots: Edge Code is now Brackets

We created the open source project Brackets because we wanted to build an awesome lightweight code editor for the developer community. From that, Edge Code was born and we put it into preview and added it to Creative Cloud to share with you right away. Since we launched, we’ve had 8 preview releases and received great feedback from you.

What’s Changing?

Adobe previously introduced a preview of Edge Code as a distribution of the Brackets project, delivering the core code editing capabilities available in Brackets together with additional capabilities powered by Creative Cloud.

As we’ve continued to make releases of both Edge Code and Brackets, customers have expressed concern over needing to make a choice between these tools, when at the core the feature set is the same. Adobe is committed to furthering the Brackets project and as such we will be focusing our efforts on contributing to the project as well as offering commercial extensions for Brackets that enable users to make use of Creative Cloud services; we will therefore no longer add features to or update Edge Code.

Moving from Edge Code to Brackets

We encourage you to download Brackets. As Brackets is the foundation for Edge Code, you will receive the same features and functionality that you enjoyed in Edge Code (except for Kuler). You can download both the Edge Inspect and Edge Web Fonts extension from the Brackets Extension Registry. If you have previously downloaded Edge Code, you can continue using that version.

Brackets is proving to be extremely popular with web designers and developers, with over 100,000 downloads per release, and celebrated its 1.0 release last week. Adobe is excited to contribute to the project and looks forward to bringing our Extract workflow, powered by the Creative Cloud, to Brackets users. Edge Code (Preview) will continue to be available from Creative Cloud for the foreseeable future, but will notify customers to get Brackets for future updates.

What next?

Read more about Brackets and download it today. We have some awesome features for you to try out.

Last but not least…

Thank you for being a part of the preview for Edge Code. We truly believe that Brackets will be a great product for your coding needs. Plus, we’re still here — deeply committed to the web and believing more than ever that we’re building a kickass code editor.

See you on the other side!

Posted in Uncategorized | Comments Off

Edge Code Preview 8

Great news — the latest update to Edge Code CC (Preview) is now available for May 2014!  To install (or update an existing install), simply open your Adobe Creative Cloud app and look for the install or update link in the Apps section.  Just click to install, and you’re on your way to much Code editing good-ness.

Based on Brackets Sprint 35 through 38, this latest release of Edge Code contains a number of new features and improvements, including:

  • Available now is the Shapes Editor Extension – create amazing, eye-catching textual designs by visually defining shapes in which your text flows across a page.
  • Multiple cursors / multiple selection text – increase your code editing productivity with the ability to set multiple cursor positions or make multiple selection ranges so that you can more efficiently do bulk edits, like renaming or replacing text.
  • New and improved Find / Replace functionality – a streamlined, cleaner UI provides access to an updated and optimized Find, Find in Files, and Replace functionality, including incremental search and highlighting, case-sensitive and regular expression toggles, and the ability to exclude specific files and folders from search.
  • Preferences for your Projects – an overhauled preferences system allows you to customize preferences per project or file type.  For example, you can set different indentation when editing HTML vs Javascript files.
  • CSS, SCSS and LESS Improvements – LESS files now offer code hints for CSS property names and values and support the Quick Docs feature for gaining instant access to documentation for CSS properties.  For CSS, SCSS and LESS files, there’s also a new step timing function editor which helps you visualize how a transition will proceed.
  • Improved Live Development – on Mac, you no longer have to restart Chrome to use Live Preview. It will now open as a separate window isolated from your normal browser session.  Also, on both Mac and Windows platforms, we’ve also made a number of improvements to make Live Preview more reliable.
  • Improved Startup Performance – We worked on optimizing the startup time of Brackets by minifying most of the JavaScript code and by pre-compiling the LESS stylesheets.  This resulted in faster startup performance and a smaller application footprint.

…and that’s just to name a few.  Be sure to check out our full release notes [insert link here to Preview 8 Release Notes] for more details.

Detailed Build Notes

For more information, check out the release notes for the Brackets releases that are rolled into this Edge Code May 2014 edition:

Posted in Uncategorized | Comments Off

CSS Shapes Editor Extension for Edge Code

The CSS Shapes Editor extension for Edge Code and Brackets allows you to edit CSS Shapes values in Live Preview mode. A visual editor is stacked on top of the focused element so you can drag points and handles to change the element’s shape. This makes it very easy to see the shape changes in context. The extension is compatible with Edge Code Preview 8 and above.



Click to view the Polygon Shapes example

What are CSS Shapes?

CSS Shapes represent a new feature, which allows web designers to wrap content inside and around custom paths. This feature opens up a lot of creative layout options because it lets designers break free from creating within the constraints of the block — the current rectangular shape of almost everything on the web.

Work on CSS Shapes is still in progress, but you can enable the feature today in Google Chrome.

Why edit CSS Shapes in the browser?

CSS Shapes are meant to be used in the browser. It makes little sense to use a classic design authoring tool to create them, then export them to CSS, then import them in a code editor, refresh the page in the browser, inspect, sigh, rinse and repeat. Any tweaks become too painful to do.

Authoring CSS Shapes in an external editor makes the workflow too difficult. It’s not easy to see how the shape interacts with the content on the web page, so there’s a lot of back-and-forth.

Installing the CSS Shapes Editor extension for Edge Code

Open File > Extension Manager and click “Install from URL”, then paste in the extension’s install URL: http://adobe.com/go/edgecode_css_shapes_editor

Turning on support for CSS Shapes in Edge Code

CSS Shapes are still under development in Google Chrome. You need to manually enable the feature before you can use the visual editor for shapes.

First, ensure that you have Google Chrome version 34 or above. Check this in Chrome’s settings menu under “About Google Chrome”. You also need to make sure that support for CSS Shapes is turned on in the Chrome instance that Edge Code uses for the Live Preview mode.

Here’s what you need to do: open any HTML file in Edge Code and launch Live Preview, then follow the instructions to enable CSS Shapes in that browser window. You only need to do this once.

This step is important!

Edge Code uses a Chrome instance separate from the main one on your computer. This means that settings will not be inherited from your main Chrome browser, if that is your day-to-day browser. Even if you have already enabled CSS Shapes in your main browser, you still need to do it again in Edge Code’s Chrome instance for LivePreview.

Using the CSS Shapes Editor

The CSS Shapes Editor in Edge Code turns on automatically when you need it. While editing a CSS shape property, such as `shape-inside` or `shape-outside`, simply focus the cursor on the property value, like `polygon(…)` or `circle(…)`, then turn on the Live Preview mode. A visual editor with draggable points and handles appears on top of the element that is being edited. If no editor appears, make sure that CSS Shapes are enabled in Google Chrome.



Click to view the Circular Shapes example

The in-browser editor is specialized for the shape type. Polygons get an editor where you can drag the points for the polygon vertices to change the shape. Click on the polygon outline to add new points, or double click an existing point to remove it. While editing a polygon, press the T key on your keyboard to toggle controls that scale, move and rotate the polygon shape. Circles, ellipses and rectangles get an overlay of the shape, which can be scaled and moved around.

Any changes to the shape are instantly visible in the context of the page. All actions in the shape editor reflect back to the code editor. When you are done, just turn off the Live Preview mode.

CSS Shapes can be defined with all sorts of CSS units, such as pixels, ems, rems and even percentages for responsive shapes. The CSS Shapes Editor takes care to preserve the unit type for the shape while editing.

What will you build?

Authoring CSS Shapes in the context of the browser is just one way we are making it easier to explore new web platform features. While CSS Shapes are still in development, this editor in Edge Code helps you learn about the feature today, experiment, and get ready to use shapes when they will be switched on by default.

If you need a head start, Sara Soueidan has written a great introduction to working with CSS Shapes where she describes in detail how to use the new properties.

We’re eager to see what ideas you bring to life with CSS Shapes now that there is a practical way to create, edit and tweak the shape of content on the web.

Cheers to a less rectangular web!

Posted in Uncategorized | Comments Off

Getting Started with Edge Code Tutorial Series

If you haven’t already tried Edge Code, with the recent release of the latest Edge Code Preview, it’s worth giving the code editor another look. I recently recorded a series of tutorials for Creative Cloud Learn walking through getting started with Edge Code. Whether you are someone used to developing HTML, CSS and JavaScript in a full IDE like Dreamweaver or someone already using another lightweight code editor, Edge Code has some unique functionality and features to offer.

In the tutorial series, I walk through some of the basics of using the editor as well as some of the more advanced features, all using a provided sample project. The first video covers the core editor features like file handling and code hinting. In the second video, we look at some of the key differentiating features of Edge Code including Live Preview, Quick Edit and Quick Docs. In the final video, we look at Edge Code’s extensibility using HTML, CSS and JavaScript, how to use the included extensions and how to find, install and use community built extensions.

The series of three videos and walkthroughs should take less than 30 minutes to complete which will guide you to attain a good understanding on how to use Edge Code for your daily work.

Posted in Uncategorized | Comments Off

Crush + Lovely: Fully committed to responsive design

Crush + Lovely is a design studio that likes projects with a purpose. Clients benefit from the multi-disciplinary approach the studio applies to everything from upfront creative brainstorming through to design, build, and implementation. Like many web design companies, Crush + Lovely is now fully committed to responsive design principles and it shows in the work the team does for its clients. All Adobe creative applications and services are accessed through Adobe Creative Cloud for teams, which makes it easy to deploy software and stay up to date on new product enhancements.

Recently, the studio created a web- and mobile-friendly site for Thankful Registry, a company that enables couples to create unique wedding gift registries and connect with their guests. The team designed device layouts in Adobe Photoshop CC and Illustrator CC, used Adobe Edge Code CC to quickly code the site, and Adobe Edge Inspect CC to help ensure a consistent experience across devices. Since the launch of the Thankful Registry site, the company has seen a 27% increase in site registrations, with 20% of traffic coming from mobile devices.

The design work was handed off for coding in Adobe Edge Code CC, which greatly accelerated coding because the developer could simultaneously work on multiple layouts and preview changes to CSS, HTML, or JavaScript in real time in the browser without constantly saving and reloading. “The visual capabilities combined with the powerful code completion in Adobe Edge Code CC make it a huge timesaver for our developers,” says Blanchard.

Read the Crush + Lovely story to learn more about how they created Thankful Registry and their use of Edge Code CC.

Posted in Uncategorized | Tagged | Comments Off

Updated Edge Code CC (Preview) with Live Preview of HTML and More

The latest Edge Code preview has been released and the update should be waiting for you in your Creative Cloud app. Just click “Install”, and the update is yours!

What's New in Edge Code

We’ve uplifted everything Brackets has to offer as of Sprint 34, which means that you now get:

  • Live Preview of HTML: Changes to both CSS and HTML now appear in your browser as you type! It’s never been quicker to iterate on a design.
  • Create New Rule in CSS Quick Edit: CSS Quick Edit now lets you add a new rule to one of your CSS files with just a click or two (see below).
  • Preview Images: You no longer have to leave Edge Code to view an image file from your project, or discover its dimensions. You can even find out the pixel coordinates of points within your image.
  • Visual Editor for CSS Bezier Functions: Take the guesswork out of defining timing for your CSS animations and transitions by using the visual quick editor for Bezier timing functions.
  • Create New Rule in CSS Quick Edit

    Create New Rule in CSS Quick Edit

    There have been many other improvements made to the Edge Code user interface (including a shiny, new dark themed shell), find/replace, SCSS support and more. Take a look at the full release notes for the details.

    We hope you enjoy this new release. Let us know what you think by clicking the feedback button in Edge Code.

Posted in Uncategorized | 2 Comments

Edge Code Supports CSS Regions

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.

Continue reading

Posted in Uncategorized | 2 Comments

New Edge Code Preview Released

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.

This preview includes all the goodness from Brackets Sprint 30 which means you’ll get function parameter hints while editing JavaScript, pagination for unlimited filed in file results, replace all, and some enhancements to files and folders.

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.

In-product feedback feature

In-product feedback feature

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.

Posted in Uncategorized | Tagged | 3 Comments

Enabling The Brackets Extension Registry in Edge Code

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


"extension_registry": "https://s3.amazonaws.com/extend.brackets/registry.json",
"extension_url": "https://s3.amazonaws.com/extend.brackets/{0}/{0}-{1}.zip"

So your entire “config” node should look like this:


"config": {
"app_title": "Adobe Edge Code CC (Preview)",
"app_name_about": "Adobe® Edge Code CC",
"about_icon": "styles/images/code_app.svg",
"enable_jslint": false,
"how_to_use_url": "http://www.adobe.com/devnet/edge-code/articles/code-editing-with-edge-code.html",
"forum_url": "http://adobe.com/go/edge_code_forum",
"release_notes_url": "http://adobe.com/go/edgecode_releasenotes",
"report_issue_url": "",
"twitter_url": "https://twitter.com/edge_code",
"troubleshoot_url": "http://forums.adobe.com/docs/DOC-3027",
"twitter_name": "@edge_code",
"contributors_url": "https://api.github.com/repos/adobe/brackets/contributors",
"extension_wiki_url": "https://github.com/adobe/brackets/wiki/Brackets-Extensions",
"extension_registry": "https://s3.amazonaws.com/extend.brackets/registry.json",
"extension_url": "https://s3.amazonaws.com/extend.brackets/{0}/{0}-{1}.zip"
},

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.

lib_phonegap_mode.js_—_Adobe_Edge_Code_CC__Preview_

Posted in Uncategorized | Comments Off

Update to Edge Code CC Available Now

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!

edge-code-feature

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.

Kuler

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.

The Future

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!

=Ryan

Posted in Uncategorized | 2 Comments