Every year Adobe puts on an event called MAX. At the event Adobe unveils all their latest and greatest software feature upgrades and products. This year they announced that all their past software applications like Adobe Photoshop, Illustrator, etc… will no longer be sold in tangible boxes and downloadable disk. Also you won’t be able to buy the products out right for a one time fee, everything will be subscription based. With this new payment plan came new applications and some really amazing new features. I was most intrigued by Adobe Illustrators new features. Here are the new features Adobe Illustrator CC will offer on its release this June.

Touch Type Tool

The Touch Type Tools allows you to manipulate individual characters within the text area.  You are also able to use the Characters panel as well.  Things like kerning, leading, line-height, etc… can still be controlled.  Also you are still able to edit the text in real time as well.  This tool will definitely speed up your workflow when it comes to type heavy designs.

Images and Brushes

We’re now able to add raster images to our Art, Scatter and Pattern brushes.  Say if you wanted to use an image like this photographed stitch “X” pattern above and repeat it across a path. This all can be done in Adobe Illustrator CC.  This feature also increases workflow as we are able to edit the paths and reshape the raster images applied to the brush.  It almost feels like a little bit of Photoshop is being sprinkled into Illustrator.

Font Search

For an easier font viewing experience Illustrator now has a live type search feature in the Charecters Panel.  Simply start typing in the font you would like and Illustrator will narrow down your selections and preview the font for you.  You can also select “bold” or “italic” from the list as well.

Sync Fonts

One of the biggest upgrades and part of Creative Cloud is the Sync Font feature.  Simply Navigate the font you’re looking for by going to Typekit.com.  Then sync the font to your system and you’re now ready to use the font on your desktop applications.

Multiple-file Placement

Illustrator CC has a new tool which allows you to import multiple files into your document.  I would imagine this is the same type of functionality that Adobe InDesign currently has.  This tool allows you to select the location of the placement as well as the size of the imported file.

CSS Extraction

Imagine being able to export CSS code directly from your web layouts in Illustrator.  This is exactly what the CSS Extraction feature let’s us do.  Not only does it create the CSS code for us but it also let’s us extract code from SVGs as well.  This tool will really save us time when it comes to static design to coded layouts in HTML and CSS.

Sync Colors

Have you ever been in nature or at the store and see a color combination that really catches your eye?  Have you ever wished you had save those colors so you could use them in your future designs?  You can now capture these colors and sync them to your designs nby using the Adobe Kuler app and Illustrator CC.  You’re able to capture the colors with your phone app then sync them to your colors panel in Illustrator CC, pretty impressive.

Area and Point Type Conversion

This type feature lets us switch between the Area Type option to the Point Type option.  Text object conversions are now happens instantly.  This also works with imported type as well, for a much faster workflow.

Auto corners for pattern brushes

When creating pattern brushes in the past we always had to create a special corner pattern to our custom brush as it would get skewed and distorted.  Not now,  Illustrator CC now has an auto corner pattern brush feature which creates an auto-generated stroke that matches and coincides with the rest of the design.

On Art Transform

The on art transform tool allows us to move, scale and rotate our designs using a touchscreen on a device.  This feature also works with the mouse on the Artboard for fast editing.

Faster Type Performance

In the past when rendering out text effects the processing speed used to lag a bit.  In Illustrator CC this all has been sped up for us.  We’re now able to work quickly and efficiently when it comes to test effects.

Sync Settings

Illustrator CC can now work cloud base and has the ability to sync multiple devices. We are now able to work on team projects not only for multiple people but from multiple locations as well.  Sync from your home computer to your work computer.  Pull it up on your device for client meetings. It’s all the same file, just accessed from multiple locations. This also goes from presets, brushes and custom workspaces. Set it up once and sync the rest.

File Packaging

No need to save fonts to an external folder as well as assets or color palettes. Illustrator CC now packages all of that for us. This makes sending files to print or even web layouts that are passed off to other developers easy and painless.  We don’t have to worry about our designs being printed or coded in correctly do to fonts missing or colors being incorrect.

Unembedded images

We can now un-embed images that are imbedded in Illustrator with ease.  Before we had to go to the Links Panel and single select all the assets and embed or un-embed them all.  With Illustrator CC we can execute this task much faster the the unembedded images feature.

Expanded Links panel options

The links panel is now hooked up with an image, text and graphic assets a gps system.  It now has more options allowing us to track down files with ease.  This is a much needed feature when working with large external asset heavy files, such as book layouts.

Conclusion

All in all I’m super excited about Adobe Creative Cloud and all the new features rolled out into Illustrator.  It almost feels like we have a little bit of Photoshop and inDesign sprinkled on top of Illustrator creating a more powerful software.  The new options create a faster workflow and a much happier user experience.

Moving Forward

I feel Adobe needs to consider three things for Adobe Illustrator.

The first thing is something they made a massive improvement when rolling out Illustrator CS5 and that was the 64 bit processing speed.  I feel there is still more room for improvement.  I can still crash Illustrator pretty quickly when working with textures and an excessive amount of paths or effects.

The next thing is adding an Animation Panel to the application like Photoshop.  Being able to create animations like rotoscoping right inside Illustrator would be amazing. Also being able to create animated gifs, Sprite Maps and javascript animations will become more popular with scalable web design when using scalable vector graphics.

Finally the last consideration I think Adobe needs to make is a vector based stand alone web application like an Illustrator lite. If not I feel they will lose out tremendously in the market.  Yeah they are dominating it now with the desktop application but moving forward most illustrators or web designers only use about five to eight tools 90% of the time.  With that said someone or some company will essentially develop an extremely user friendly and minimal version of Illustrator. This will be a vector generating web app for cloud based devices like the Google Chromebook.  There are some out there now but they just aren’t developed correctly yet.  Moving forward though it’s gonna happen,  especially with the popularity of SVGs.  Will Adobe be the ones to capitalize on this type of application?

Resources

All Images were captured from Adobe Illustrator CC product page.

Interested in Learning Adobe Illustrator?

If you’d like to learn Adobe Illustrator as a whole to advance your illustration and graphic design skills check out Treehouse’s new course Illustrator Foundations. The course covers all the tools and panels related to web design and print design. By the end you will understand the complete functionality of Illustrator and how to use it in your future projects.

Get Started Now

The post Learn What’s New With Adobe Illustrator Creative Cloud appeared first on Treehouse Blog.

greeNEWit’s Agents of Change Program recruits high school and college students with an entrepreneurial spirit and a passion for social change to assist with social media, marketing and development needs. Students can get hands on experience as social entrepreneurs by means of two of greeNEWit’s social projects: Cleats for Bare Feet and the OUR Schools program.

Through the program, greeNEWit provides students with important career skills and instills a passion in them for entrepreneurship and sustainable living. The goal is to create a collaborative working environment that fosters the generation and sharing of ideas.

Go to http://www.greenewit.com/home/careers/apply-now-summer-interns to read more about the various opportunities!

The following full-time positions have been posted within the past week to UMBCworks. Login to your account (via the link in the Jobs & Internships topic in myUMBC) and find details and application instructions as well as hundreds of other job postings!

9258226 - Assistant Director - Kumon of Elkridge
9258211 - Fitness Center Instructor I - YMCA of Central Maryland (Parkville)
9258206 - Proposal Coordinator - NewWave Telecom and Technologies
9258191 - Development Fellow (Paid) - Cultural Tourism DC
9258156 - Employment Consultant - EBP - Humanim
9258144 - Lab Engineer - STX LLC

The following part-time positions have been posted within the past week to UMBCworks. Login to your account (via the link in the Jobs & Internships topic in myUMBC) and find details and application instructions as well as hundreds of other job postings!

9258210 - Lifeguard - YMCA of Central Maryland (Randallstown)
9258181 - Upper School Science Teacher - The Park School of Baltimore
9258185 - ABA Therapist - Private Centreville Home
9258178 - Chess Coach or Aide - Silver Knights Chess
9258155 - AutoCAD Drafting Position - Roomtag, LLC

NodeJS gives me the ability to write back-end code in one of my favorite languages: JavaScript. It's the perfect technology for building real time applications. In this tutorial, I'll show you how to build a web chat application, using ExpressJS and Socket.io.

Setup Environment

Of course, the first thing to do is get NodeJS installed on your system. If you are a Windows or Mac user, you can visit nodejs.org and download the installer. If you instead prefer Linux, I'd suggest that you refer to this link. Although I won’t go into further details on this, if you encounter any installation issues, I’m happy to help; just leave a comment below this post.

Once you have NodeJS installed, you’re ready to setup the needed instruments.

1. ExpressJS – this will manage the server and the response to the user
2. Jade – template engine
3. Socket.io – allows for real time communication between the front-end and back-end

Continuing on, within an empty directory, create a package.json file with the following content.

{
        "name": "RealTimeWebChat",
        "version": "0.0.0",
        "description": "Real time web chat",
        "dependencies": {
            "socket.io": "latest",
            "express": "latest",
            "jade": "latest"
        },
        "author": "developer"
    }
    

By using the console (under Windows – command prompt), navigate to your folder and execute:

npm install
    

Within a few seconds, you’ll have all the necessary dependencies downloaded to the node_modules directory.

Developing the Backend

Let’s begin with a simple server, which will deliver the application's HTML page, and then continue with the more interesting bits: the real time communication. Create an index.js file with the following core expressjs code:

var express = require("express");
    var app = express();
    var port = 3700;
    
    app.get("/", function(req, res){
        res.send("It works!");
    });
    
    app.listen(port);
    console.log("Listening on port " + port);
    

Above, we’ve created an application and defined its port. Next, we registered a route, which, in this case, is a simple GET request without any parameters. For now, the route’s handler simply sends some text to the client. Finally, of course, at the bottom, we run the server. To initialize the application, from the console, execute:

node index.js
    

The server is running, so you should be able to open http://127.0.0.1:3700/ and see:

It works!
    

Now, instead of "It works" we should serve HTML. Instead of pure HTML, it can be beneficial to use a template engine. Jade is an excellent choice, which has good integration with ExpressJS. This is what I typically use in my own projects. Create a directory, called tpl, and put the following page.jade file within it:

!!!
    html
        head
            title= "Real time web chat"
        body
            #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
            .controls
                input.field(style='width:350px;')
                input.send(type='button', value='send')
    

The Jade's syntax is not so complex, but, for a full guide, I suggest that you refer to jade-lang.com. In order to use Jade with ExpressJS, we require the following settings.

app.set('views', __dirname + '/tpl');
    app.set('view engine', "jade");
    app.engine('jade', require('jade').__express);
    app.get("/", function(req, res){
        res.render("page");
    });
    

This code informs Express where your template files are, and which template engine to use. It all specifies the function that will process the template's code. Once everything is setup, we can use the .render method of the response object, and simply send our Jade code to the user.

The output isn’t special at this point; nothing more than a div element (the one with id content), which will be used as a holder for the chat messages and two controls (input field and button), which we will use to send the message.

Because we will use an external JavaScript file that will hold the front-end logic, we need to inform ExpressJS where to look for such resources. Create an empty directory, public, and add the following line before the call to the .listen method.

app.use(express.static(__dirname + '/public'));
    

So far so good; we have a server that successfully responds to GET requests. Now, it’s time to add Socket.io integration. Change this line:

app.listen(port);
    

to:

var io = require('socket.io').listen(app.listen(port));
    

Above, we passed the ExpressJS server to Socket.io. In effect, our real time communication will still happen on the same port.

Moving forward, we need to write the code that will receive a message from the client, and send it to all the others. Every Socket.io application begins with a connection handler. We should have one:

io.sockets.on('connection', function (socket) {
        socket.emit('message', { message: 'welcome to the chat' });
        socket.on('send', function (data) {
            io.sockets.emit('message', data);
        });
    });
    

The object, socket, which is passed to your handler, is actually the socket of the client. Think about it as a junction between your server and the user's browser. Upon a successful connection, we send a welcome type of message, and, of course, bind another handler that will be used as a receiver. As a result, the client should emit a message with the name, send, which we will catch. Following that, we simply forward the data sent by the user to all other sockets with io.sockets.emit.

With the code above, our back-end is ready to receive and send messages to the clients. Let's add some front-end code.

Developing the Front-end

Create chat.js, and place it within the public directory of your application. Paste the following code:

window.onload = function() {
    
        var messages = [];
        var socket = io.connect('http://localhost:3700');
        var field = document.getElementById("field");
        var sendButton = document.getElementById("send");
        var content = document.getElementById("content");
    
        socket.on('message', function (data) {
            if(data.message) {
                messages.push(data.message);
                var html = '';
                for(var i=0; i<messages.length; i++) {
                    html += messages[i] + '<br />';
                }
                content.innerHTML = html;
            } else {
                console.log("There is a problem:", data);
            }
        });
    
        sendButton.onclick = function() {
            var text = field.value;
            socket.emit('send', { message: text });
        };
    
    }
    

Our logic is wrapped in a .onload handler just to ensure that all the markup and external JavaScript is fully loaded. In the next few lines, we create an array, which will store all the messages, a socket object, and few shortcuts to our DOM elements. Again, similar to the back-end, we bind a function, which will react to the socket's activity. In our case, this is an event, named message. When such an event occurs, we expect to receive an object, data, with the property, message. Add that message to our storage and update the content div. We’ve also included the logic for sending the message. It’s quite simple, simply emitting a message with the name, send.

If you open http://localhost:3700, you will encounter some errors popup. That's because we need to update page.jade to contain the necessary JavaScript files.

head
        title= "Real time web chat"
        script(src='/chat.js')
        script(src='/socket.io/socket.io.js')
    

Notice that Socket.io manages the delivery of socket.io.js. You don't have to worry about manually downloading this file.

We can again run our server with node index.js in the console and open http://localhost:3700. You should see the welcome message. Of course, if you send something, it should be shown in the content's div. If you want to be sure that it works, open a new tab (or, better, a new browser) and load the application. The great thing about Socket.io is that it works even if you stop the NodeJS server. The front-end will continue to work. Once the server is booted up again, your chat will be fine too.

In its current state, our chat is not perfect, and requires some improvements.

Improvements

The first change that we need to make is to the identity of the messages. Currently, it's not clear which messages is sent by whom. The good thing is that we don't have to update our NodeJS code to achieve this. That's because the server simply forwards the data object. So, we need to add a new property there, and read it later. Before making corrections to chat.js, let’s add a new input field, where the user may add his/her name. Within page.jade, change the controls div:

.controls
        | Name: 
        input#name(style='width:350px;')
        br
        input#field(style='width:350px;')
        input#send(type='button', value='send')
    

Next, in code.js:

window.onload = function() {
    
        var messages = [];
        var socket = io.connect('http://localhost:3700');
        var field = document.getElementById("field");
        var sendButton = document.getElementById("send");
        var content = document.getElementById("content");
        var name = document.getElementById("name");
    
        socket.on('message', function (data) {
            if(data.message) {
                messages.push(data);
                var html = '';
                for(var i=0; i<messages.length; i++) {
                    html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                    html += messages[i].message + '<br />';
                }
                content.innerHTML = html;
            } else {
                console.log("There is a problem:", data);
            }
        });
    
        sendButton.onclick = function() {
            if(name.value == "") {
                alert("Please type your name!");
            } else {
                var text = field.value;
                socket.emit('send', { message: text, username: name.value });
            }
        };
    
    }
    

To summarize the changes, we’ve:

1. Added a new shortcut for the username's input field
2. Updated the presentation of the messages a bit
3. Appended a new username property to the object, which is sent to the server

If the the number of messages becomes too high, the user will need to scroll the div:

content.innerHTML = html;
    content.scrollTop = content.scrollHeight;
    

Keep in mind that the above solution will likely not work in IE7 and below, but that’s okay: it’s time for IE7 to fade away. However, if you want to ensure support, feel free to use jQuery:

$("#content").scrollTop($("#content")[0].scrollHeight);
    

It would also be nice if the input field is cleared after sending the message:

socket.emit('send', { message: text, username: name.value });
    field.value = "";
    

The final boring problem is the clicking of the send button each time. With a touch of jQuery, we can listen for when the user presses the Enter key.

$(document).ready(function() {
        $("#field").keyup(function(e) {
            if(e.keyCode == 13) {
                sendMessage();
            }
        });
    });
    

The function, sendMessage, could be registered, like so:

sendButton.onclick = sendMessage = function() {
        ...
    };
    

Please note that this isn’t a best practice, as it is registered as a global function. But, for our little test here, it’ll be fine.

Conclusion

NodeJS is an extremely useful technology, and provides us with a great deal of power and joy, especially when considering the fact that we can write pure JavaScript. As you can see, with only a few lines of code, we managed to write a fully functional real time chat application. Pretty neat!

Want to learn more about building web apps with ExpressJS? We’ve got you covered!