Adobe Brackets

adobe-brackets

I’m in love with Adobe Brackets for web coding! The fact that you can have your HTML and CSS up side-by-side makes me smile! I’m still working on a way to get more than two columns. I admit, I like that Sublime Text allows you to have up to 4 different windows open at the same time.

Below you’ll find a list of some of my favorite Adobe Brackets Add-Ons! I’d love to hear what your favorite add-ons or themes would be by replying to this post!

Waka Time
WakaTime.com
Automatic time tracking and analytics about your programming.
More info…
Brackets Css Color Preview
Neil.M.Chen
preview the colors within css file
More info…
Brackets Trello
NeoBrackets Working Group
Sync tasks with Trello
Translated into 3 languages, including yours
colorHints
Konstantin Kobs
Show colors you used in your CSS file before as code hints.
More info…
Directory Search
Louie Almeda
Search files within your project directory in an intuitive and simple way.
More info…
Emmet
Sergey Chikuyonok
High-speed HTML and CSS workflow
More info…
ExportPDF
Jean Spiteri
Export a file or a selection to PDF.
More info…
Extract for Brackets (Preview)
Adobe
Preview of Extract functionality inside Brackets. Extract design information and assets from a design comp via contextual code hints for CSS.
More info…
HTML Skeleton
Triangle717
Easily insert a variety of HTML elements into your document.
More info…
HTML Wrapper
rcaferati
Format <ul>, <ol>, <nav>, <select> and <tr> children tags with a single command. NOW with live demo.
More info…
Indent Guides
Lance Campbell
Show indent guides in the code editor.
More info…
Insert Copyright
Joe Ireland
A Brackets extension to insert a copyright notice at the top of your documents (Hotkey: Alt+C)
More info…
Lorem Ipsum
Lance Campbell
Generates Lorem Ipsum text automatically in any Brackets document.
More info…
Lorem Pixel
Alex Bardanov
Generate placeholder Images for every case
More info…
Minimap
Senko Anton
The minimap shows a smaller version of your code at the right of the screen. It can be used to quickly scroll to a certain part of your file. This is a fork of brackets-wdminimap by Brian Adams
More info…
New Html5 Document
Yasin Kuyu
Brackets New Html5 document
More info…
Quick multi-cursor selection
Louie Almeda
Sublime’s quick text selection of next matching text (ctrl + D) implemented in brackets
More info…
Replace In Selection
Rhuno
This extension allows you to do a find and replace all within selected text. Shortcut is Ctrl-R
Simple To-Do
Oleg Koshelnikov
Simple to-do list for Brackets. Tasks can be stored in text files or Trello.
More info…
spell-check
Jochen Hagentröm
Spell checking the Adobe Brackets Web Editor.
More info…
Todo
Mikael Jorhult
Display all TODO comments in current document or project.
More info…
W3CValidation
Raymond Camden
Adds W3C validation support to Brackets.
More info…
Zoom wheel
Denis Gorin
Increase / Decrease Font Size with the Mouse Wheel
More info…

My Favorite Web Design / Development extensions / sites

Below you’ll find some of my favorite websites and extensions that I’ve used for web design / development but I’ve love to hear what are some of your favorite websites, software, extensions, and add-ons that you use for Web Design / Development? Reply to this post with your favorites!

Websites:
X-Rite

Chrome Web Extensions:

  • Rescue Time
    • Tracks the time you spend in the active tab or window of Chrome, or your ChromeOS device. This gives you a clear picture of what you were actually doing all day, to better manage your digital life.
    • Click Here
  • CSS Viewer
  • Blue Button
    • Get an index of building blocks from any webpage, instantly. See title tags & meta description, scripts, stylesheets, images & fonts
    • Click Here
  • ColorZilla
    • Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies
    • Click Here
  • Page Ruler
    • Draw a ruler to get pixel dimensions and positioning, and measure elements on any web page
    • Click Here
  • Web Developer
    • Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox
    • Click Here
  • Window Resizer
    • Resize browser window to emulate various screen resolutions
    • Click Here
  • Evernote Web Clipper
    • Use the Evernote extension to save things you see on the web into your Evernote account.
    • Click Here
  • LastPass
    • password manager, saves your passwords and gives you secure access from every computer and mobile device.
    • Click Here
  • Evernote Clearly
    • makes blog posts, articles and webpages clean and easy to read. Save them to Evernote to read anywhere.
    • Click Here
  • Disconnect
    • lets you visualize and block the otherwise invisible websites that track your search and browsing history.
    • Click Here

FireFox Web Extensions:

Software:

  • Adobe Brackets
  • Sublime Text
    • Sophisticated text editor for code, markup and prose.
      You’ll love the slick user interface, extraordinary features and amazing performance.
    • http://www.sublimetext.com/

#AdobeGenPro – App Development

Adobe Gen Pro - App

Adobe offers wonderful professional development opportunities via their Adobe Education Exchange! I’ve had to ability to take a number of amazing courses! Last year I started the App Development course but was unable to finish due to scheduling. Luckily, Adobe is now offering the course again!

We are learning how to create apps by writing HTML / CSS / JavaScript coding using a program called Brackets. (Brackets is a FREE coding program by Adobe. If you get a chance you should really take time and check it out. Download it here.) After we write our “app” using code we when send it to PhoneGap. (PhoneGap is another FREE program by Adobe! You can download it here.)

Watch a quick overview of Adobe Brackets

Watch a quick preview of Adobe PhoneGap

If you are interested in creating apps, I would take time and explore the possibilities of Brackets and PhoneGap. You might exactly what you need!

How do I clean up my workspace in my Adobe Software?

What happened to my workspace in Adobe?! I CAN’T find anything!!!!

Screen Shot 2014-10-14 at 6.27.22 PM

Over the years I’ve had people contact me because their workspace in their Adobe software has been moved around, deleted, modified, etc. As you can guess, the question is always the same, “how do I change everything back to the way that it used to be”. Of course, Adobe makes this a very simple task. In the upper right corner, next to the help/search area, you’ll notice a drop down with your title of your current workspace.

workspaceYou’ll notice in my visual example that my current workspace I am in is called “Kimberly’s Workspace”. I personally like to make my own custom workspace. I arrange my panels and tools in a way that speeds up my workflow on different types of tasks. Currently you might be using the “Essentials” workshops, which is typically set as your default. If you have not explored the different workspaces available in the software you might wan to take a moment and see what they have to offer or you can always create your own if you like. The task is simple, arrange your panels and tools the way that you like them and the click on the workspace drop down and then click “New Workspace”. Simple right?! Back to the task at hand, how do you fix your workspace back to the way that you like it? Again, the answer is simple, click on the workspace drop down and then click “Reset *(name of your workspace you want to set it back to)*” and that is it.  Enjoy your nice and clean workspace!

reset workspace

 

* Please note that the visuals I’m using are for Adobe Illustrator CC 2014 but it should look similar in your version / software.

SkillsUSA 2014

SkillsUSA

SkillsUSA State Winner 2014, Tatiana Jorge, – Advertising Design

March of 2014 we took a number of students to Atlanta, GA to compete in their area of expertise. I’m pleased to say that I had a number of students participate, place, and win! I know might sound odd but I’m excited when I see students doing well. So well in fact that I when they win they almost throw up! Their sickness makes me smile! Not to worry, I’ve never had any actually vomit but they are just so excited to have won that their stomachs get a little sour for a minute but then they are fine. This past year at state I had Graphic Design students complete in a lot of different areas such as:

  • Advertising Design – Tatiana Jorge
  • T-Shirt Design – Amethyst Ortega as well as Lauren Wilds
  • Pin Design – Lauren Wilds as well as Amethyst Ortega
  • Promotional Bulletin Board – Sarah Lowe & Sunny Ramos
  • Computer Maintenance – James Prill
  • Photography – Trevor Martin
  • and Cole Pickard assisted with the Logistics group for Career Pathway Showcase

I’m excited to say that we had several 1st, 2nd, and 3rd place winners!!!

  • Tatiana Jorge, 1st place in Advertising Design
  • Amethyst Ortega, 3rd place in SkillsUSA T-Shirt Design
  • Lauren Wilds, 2nd place in SkillsUSA Pin Design

Tatiana will now move on to the SkillsUSA National Competition in a couple of weeks! She will be competing in Advertising Design. Please comment on this post if you have any words of encouragement and/or advice for this young talent!

Adobe Illustrator CS5 – 10 Up Business Cards using the Transform Tool

Video

Take symbols and combine them with the transform effect in Adobe Illustrator and you can increase the speed and accuracy of your workflow. As a graphic designer this technique is worth it’s weight in gold! Take a look and let me know what you think.