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…
Advertisements

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!

Why you need to change your password!

Image

question mark

Why you should change your password

Last month I attended a workshop about cyber safety. The presenter, Dave L. Rutz, is actually a Computer Forensic Analyst. As he enlightened us about how computer passwords are crack it really started to make me think. There are three main ways that a hacker will try to figure out your passwords. The first method is known as the Dictionary Attack. The computer will go through the dictionary one word at a time until it figures out your password. This is the easiest password to hack. You may think that you have an awesome password by using something complex like “underfunded”, if you look in the dictionary there are 113 words in the English dictionary that contain the word “fun” verses “fund” there are 56 words verses 8 words that start with “funde”… you can see how quickly the “Dictionary Attack” can work. The second, and more difficult to hack, is known as the “Brute Force Attack”. This method works by trying to figure out one letter at a time. This can take some. The final method that we talked about is a combination of both Dictionary Attack and Brute Force Attack. Again while you think that you have a strong and powerful password like “juglandaceous” there are actually 3 words in the English dictionary that start with “junl” and 41 words that start with “jug”.

Now that we know how easy it will be to hack your current passwords how can we make a strong password you might ask. First you might want to renew your current passwords if you  either haven’t changed them in a while and/or you think you current password has been compromised. Next make your password complex by having it at least 8 characters, use upper and lower case letters as well as numbers and symbols. To avoid being hacked using the dictionary attack you will want to change your password to a “passphrase”. These are more difficult to crack. A passphrase might look like this “Tp4tci2s4U2g!” = “The password for this computer is too strong for you to guess!“. Notice the uniqueness of the password/passphrase, the caps / lower case, numbers, and symbols. Finally, make your passwords/passphrases unique. DO NOT use the same password for every account and DO NOT have your passwords relate to anything personal about you, such as your children’s names, address, zip codes, birthdays, car, favorite color. Thing about it, you post that kind of personal information about yourself on your social media pages all the time. If you have a hard time coming up with a password you can use this site to help you: http://www.onlinepasswordgenerator.com.

Of course while you are taking the time to come up with strong passwords you do not want to write them down on a sticky or shared media. If you put them in a file make sure your document is password protected or use a reputable password management software. When asked NEVER use the “Save Password” option on your computer. If you want to check and see how secure your password is you might want to check out: http://howsecureismypassword.net.

Happy computing!!!

** UPDATE **

Here’s a great article about “The Big Password Mistakes That Hackers Are Hoping That You’ll Make

Another great password checker: http://blog.kaspersky.com/password-check/

Color Blindness

Am I color blind? If so, what does that mean?

Color Blindness Test ResultsAfter my post about the X-Rite Color Deficiency test was so popular I thought I’d do a little more research into the matter. What I found was interesting to say the least. For example, if you are color deficient there are a few job that you cannot have such as a police officer or pilot. Did you know that in some European countries you can not have a driver’s licenses if you are color deficient due to the color coding of lights and signs. I’ve never thought about it but I could see why someone who is color deficient would not be able to be an electrician as well! Another job that came up in my research was Baggage Handler as there are some tagging systems that use color coding. (for more info) A few others that came up in my research were the Army, if you have red/green colour blindness; Custom & Excise Officer;  Civil Aviation: pilots (although this may change), engineers, technical and maintenance staff, air traffic controllers; Railways: drivers, engineers and maintenance staff; Hospital laboratory technicians and pharmacists; Paint, paper, textile manufacture, photography and fine art reproduction. One source cited the difficulties of being a chef if you are color deficient as you may not know if you are cooking the product correctly or if the product is good to begin with. That being said I know other people who are color deficient but lead successful careers in designers, illustrators, apparel designers, etc. There are tons of resources out there and I found out that there might be a cure in the near future!

Example of the Ishihara Color Blindness Test

Here’s an example of the Ishihara Color Test for Color Blindness. You should see the “12” in the top image and an “8” in the bottom image.

So, the question that people have is, Am I color Blind? The fact of the matter is that it is extremely rare that someone would be completely “color blind”, meaning that they only see in black/white. The truth is that people who are labeled as “color blind” are merely “color deficient” to a degree. According to the ColorVisionTesting.com website about 5%-8% of males are born with some sort of color deficiency as apposed to only 0.5% of woman are born with some sort of color deficiency.

Do you think you are color deficient? Here are a few places to go to test yourself. (computer nerd alert: of course the results might vary depending on the calibration of your monitor)

As a designer and a teacher of designers, I know that most people do not take into consideration the color deficient of the world. While working on a design if you want to double check your work to see how someone who is color deficient might see your designs/photos you can check our the Coblis — Color Blindness Simulator. Simply upload your image and take a look!

You also might want to take a look at Adobe’s Color Website! This is not only a wonderful resource for the color deficient but for the person who is not so great at matching or coming up with color schemes!

Adobe Kuler / Color

Adobe Kuler / Color

A couple of great resources that I found are ColorBlindnessAwareness.org and  ColourBlindness.com websites!

If you decide to take any of the tests and/or if you know you are color deficient, I would love to hear thoughts by commenting below!