The Reflow team has been busy adding new features to the tool lately. Today they packed all these additions into a new preview available for download from the Adobe Creative Cloud. I also want to highlight the feedback we got from some of you -people who want to make Reflow as good as it gets. The Reflow forums weren’t a quiet place even during the holiday season :).
Somehow I missed this interview when it was published awhile ago. This is strange as I do work for Adobe and try not to miss Vincent Hardy’s posts :D. So what am I talking about? Vincent interviewed Jon Ferraiolo about the history of SVG.
Today many people have lots to say about SVG. What makes Jon special is that he was right in the middle of the things when the SVG standard was created. Actually, many think that Jon is the spiritual father of SVG.
It is interesting to note that although the SVG 1.0 standard was published on 2001, it took the browser manufacturers a while to actually implement/support SVG – props to Opera and Mozilla who were the first to implement SVG.
So, if you are curious about SVG history or if you want to understand why some features look the way they look and how the different parties involved in the standard creation negotiated the different bits and pieces make sure you read this.
On November 1st the Brackets team released a new update that brings a number of cool features.
Short detour: It is hard to imagine that the project was only launched just last year. At least for me :). I’ve been using Brackets/Edge Code as my primary HTML/CSS/JS code editor for a while and I’d be hard pressed to find something bad to say about it. Yeah it is that “stable” and feature “rich”.
What do Edge Reflow CC, Edge Code CC, CSS Regions, and Mobile Safari have in common? As of today the CSS Regions feature is supported by Edge Reflow and Edge Code joining Mobile Safari which added support for CSS Regions with its latest update from last week (iOS 7 release).
Note: If you don’t know what CSS Regions is all about, then imagine a simple and elegant syntax that allows you, among others, to tell the browser to flow content through a chain of containers. And the browser will figure out how much content fits in each container.
The latest Brackets update is awesome! Just A.W.E.S.O.M.E! Why, you might ask? Well, in short the open source code editor for web, also known as Brackets, just got a new feature called Live HTML Development.
Basically, it allows you to see the HTML page you’re working on updated as you type in valid HTML code in Brackets. So just one more time in case you miss it: you type HTML code in Brackets and without any refresh (not even a Save action need it) the HTML page gets update in Chrome to let you see instantly what it looks like. This feature coupled with the existing Live CSS Development feature makes web developers/designers life so much more easier and funnier.
There are other new features like improved Search and support for CSS code intelligence for SASS (writing .SCSS files).
Get Brackets, talk back
If you already have Brackets installed then just open it and you should get a notification about the update and a link to download the latest. If not, then just go here and download the installer.
Try it and talk back. If you love what you see tell us. If you have ideas for improvements or other feedback let us know. You can also follow the Brackets team on Twitter.
I am happy to spread the news about the first update of Dreamweaver CC. There are lots of new and cool things for you (as a side note, the update is coming very shortly after the release of Dreamweaver CC; these much, much faster update cycles are part of the Creative Cloud value proposition). So let’s check this out :).
This is great news for the Brackets team and its amazing external contributor community: Brackets (the Adobe driven open source code editor for the web) has been nominated for two awards: Best New Open-Source Project (category 15) and Best IDE (category 56).
If you like Brackets and the direction is heading to, then please go to this page and cast your vote for it (categories 15 and 56). Thank you!
Kuler just got better this week. If you don’t know about Kuler then let me tell you that it is a very useful utility app for designers (web or graphic). Basically, it allows you to find the perfect theme color for your project. Each theme has only five colors.
It comes as a web app and an iOS app and it allows you to synch the themes you created with the color settings from Illustrator or Photoshop (both the web and the iOS app). Both apps allows you to create a new theme out of an image.
While it might seam a useless app, actually it is quite useful. Personally I’ve used it for a number of web projects and it was really helpful as it allowed me to keep the number of colors used in the design in control while making sure that each color works well with the others.
Some of the latest changes include enabling you to change the order of the colors in a theme, providing a more precise workflow to edit a theme, and creating themes based on an image.
Importing the Kuler themes into Illustrator and Photoshop
It is important to be signed in in the Kuler app. This way when you create a theme or you favorite one, it is persisted with your account.
Now, suppose you favorite a number of themes maybe using the web app – you can browse the existing themes by clicking on the Explore menu item. Next, if you go to Illustrator and click on Window -> Kuler it will open the Kuler panel. If you hit the Refresh icon in that panel you will get your themes (see the picture below).
For Photoshop the workflow is slightly different. You can download the theme you want. This will create an “.ase” file. Right-click on the file and choose to open with Photoshop. This action will add the theme colors at the end of your current Swatches.
Edge Animate CC 2.0 is part of the Adobe Creative Cloud update on June 17th. While the amount of new features is not as big as in the rest of the Edge Tools (quite normal considering that Edge Animate CC is the most mature tool) there are still some great additions. Here are some of the most important ones.
First of all, now you can use motion paths to animate your content around the stage. So instead of being limited to linear paths now you can define curves and use these paths to move the content. There is also an option to auto-orient the object you animate with the path direction.
Now you can use left and right swiping gestures for any element in your animation.
You can choose to serve the runtime files from our servers (we are using Akamai servers).
You can create and reuse templates. This way you can easily load a composition for common patterns.
Adobe Edge Code CC is part of the Creative Cloud June 17th update and gets one step closer to the 1.0 release. The team has been working hard to add more features and I am pretty sure that you’ll like this code editor. Just give it a try!
What is Adobe Edge Code CC?
Because of the technology behind Brackets and its unique vision on how a code editor for the web should work we have a good number of contributors from outside of Adobe. Here is a screenshot with the current contributors (I am proud to report that I am one of them :) ):
Finally, what would any software be without an extensibility API? Brackets was built to support extensions almost from day one. This means that it is quite easy to create an extension that adds new features and distribute/install it. Here you can find a list of Brackets extensions.
If Brackets is the open-source project what is Adobe Edge Code CC? As we were working on Brackets adding new features and thinking about what else we could add we realized that some of these features are actually tied to other Adobe technologies. So maybe these features don’t belong in an open-source project such as Brackets. This is the reason we decided to build a commercial distribution of Brackets called Edge Code CC. So Edge Code CC is Brackets plus features that use Adobe services/products (Edge Inspect CC, Edge Fonts, PhoneGap Build). Finally, although Edge Code CC is a commercial distribution of Brackets, we are not selling this – you can use it for free. We don’t have plans to change this.
Edge Code features
Let’s see some of the coolest features of Edge Code CC in no particular order.
When you couple the inline editors with Live Preview feature you get something really powerful. Live Preview allows you to edit your code side by side with a Chrome browser that displays the HTML page you are editing in Edge Code CC. As you change the CSS properties, the changes are pushed to Chrome without having to actually save the files and reload the page in Chrome. If you change your HTML code, then the Chrome browser will automatically reload the page. You also get visual clues on what you are editing.
Preview on mobile devices with Edge Inspect CC
On the left edge of the tool, beneath the Live Preview icon you’ll find the Preview on Devices using Edge Inspect CC button. As the name suggests by using Edge Inspect CC you can actually test your code on iOS, Android, and Kindle Fire devices without having to worry about URLs and local servers.
Edge Web Fonts support
This feature makes it easier to add web fonts served by the Edge Web Fonts free service. You have more than 500 fonts to choose from.
Obviously there is more work ahead to reach the “1.0” milestone. As we move forward new previews will be released so we have a chance to get your feedback and make the best light code editor for the web. Feel free to give us feedback; we have a forum for people willing to contribute here. If you want to become a contributor to the open source project Brackets then go here. There are many ways you can get involved: help for supporting new languages, fixing bugs, adding new features. Keep an eye on @edge_code, @ryanstewart (Edge Code product manager), @brackets, and @adrocknaphobia (Adam Lehman, Brackets product manager).