New Edge Reflow preview available

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

Continue reading

A concise interview about the history of SVG

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.

Brackets Sprint 33 is out

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

Continue reading

Edge Reflow, Edge Code, CSS Regions, and iOS 7 Mobile Safari

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.

Continue reading

New Brackets Update

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.

Brackets is nominated for Linux Journal Readers’ Choice Award

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

brackets

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!

Check out the latest Kuler features

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.

kuler-1

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

kuler-2

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.

kuler-3

Feedback

You can read more about what’s new in Kuler here and if you want to read what others have to say or share your feedback check Kuler’s forum.

Edge Animate CC 2.0

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.

Motion Paths

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.

animate-1

Swipe Gestures

Now you can use left and right swiping gestures for any element in your animation.

CDN Hosting

You can choose to serve the runtime files from our servers (we are using Akamai servers).

Templates

You can create and reuse templates. This way you can easily load a composition for common patterns.

Keep an eye on @EdgeAnimate and @sarahwhatsup (Sarah Hunt is the Edge Animate product manager) to stay up to date.

Edge Code CC Preview 4

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! code-1

What is Adobe Edge Code CC?

If you already know what Edge Code and Brackets are feel free to skip this section. In May 2012 we released an open source project called Brackets. The project tagline is quite self-explanatory: “open-source code editor built with the web for the web”. brackets Brackets is built on top of CEF (Chromium Embedded Framework). This means that what you look at is a web application running inside of a chromeless browser. Kind of cool isn’t it? Think about it: a code editor for the web built with web technologies. It means that you, as a web developer/designer have the knowledge to actually change the editor – from changing the look and feel (it is just CSS isn’t it?) to fixing bugs or adding new features (it is all about writing JavaScript and HTML code). I will touch on the rest of the unique features of Brackets in the next section.

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 :) ): contributors

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.

Inline editors for CSS and JavaScript

The inline editor is an amazing feature that enables you to stay in the zone while editing CSS and/or JavaScript. Here is an example of how it works: suppose you want to change the CSS for the H1 element. All you have to do is to place the cursor on the H1 element in your HTML page and then press Command + E (Control + E on Windows). An inline editor will be opened and it will display all the CSS selectors that affect the current element (it supports classes, pseudo-selectors, IDs). You can open multiple inline editors at the same time.

code-2

In a similar way you can streamline your JavaScript editing. Suppose you are in a function and you need to make a call to another one and you are not sure of the return type or arguments. You press Command + E (Control + E) and the function definition will be displayed inline.

Live Preview

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.

code-3

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.

JSLint support

Shortly after the first sprints were history, the Brackets team started to use Brackets to develop well … Brackets. From this experience come features like JSLint support. JSLint can help you write better JavaScript code by avoiding common pitfalls. You have complete control over this, being able to enable/disable JSLint as you need.

What’s next

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