Editors+Validators+Comments

Validators are software programs & web sites that evaluate your files for SYNTAX errors, incompletes, or missing code. It’s guaranteed! Your company will lose customers—and money—if its mobile apps are too slow, or even your web site.

Validators in and of themselves are important

but .........

When code is written correctly ....

It RUNS FASTER

Validators are a tool - to make your web site run efficiently, and correctly, each company that you work for will have to balance many objectives - this may be something they require.

Validators will validate code according to the DocType

IF you are using ...

HTML5 <!DOCTYPE html> <html lang="en"> ... </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

...

</html>

HTML <html> ... </html> bare bones html from the 1990's

Editors - an editor can edit may languages - most have plugins for languages that color code, debug or assist

Windows-Aptana
Windows-Notepad++
Microsoft's DreamSpark - https://www.dreamspark.com/Student/Software-Catalog.aspx
Mac-TextWrangler, free from BareBones.com
Mac-BBEdit, $50
Adobe DreamWeaver ($200)
Sublime Text
Atom
Komodo Edit

Notepad++ for Windows Computers

Compare - Download the Plugin, have two similar files open in Notepad++, Click Plugin-Compare-Compare

Change Backgrounds - typing code after a while on a bright screen can make it hurt your eyes a bit and having a dark or different color background makes a difference. But you can do it with Notepad++. The way to change the theme is by selecting settings on the menu bar, then select style configurator. Then a pop-up window appears and at the top it says select theme with a drop down menu. Also you can customize it to what you like rather than a pre-configured theme.

Sublime Text 3 for Mac Computers add these configuration options:

Download and install SublimeText 3

http://www.sublimetext.com/3

Download and install for your operating system.

Download and install Package Control

https://sublime.wbond.net/installation

This is a ST extension that will allow you to install more extensions.

There are installation instructions on the website.

Once Package Control is installed, you can use this to install the below packages as follows:

- 1. Go to SublimeText – Preferences – Package Control (MAC) or Preferences – Package Control (PC)
  2. Choose “Install Package” from the list of options
  3. Find the name of the package you wish to install and select it

Install Emmet via Package Control

http://docs.emmet.io/ (Links to an external site.)

This is a code completion extension for ST. Once this is installed, start any HTML page quickly by doing the following:

- 1. Open a new document and save as HTML
  2. Once saved (not before!) type ! and hit tab
  3. This will generate a starting HTML document for you!

Emmet will also construct HTML for you very quickly, once you know your CSS selectors ;-)

For more help with Emmet, check out Ray Villalobos's course at lynda.com: http://www.lynda.com/sdk/Emmet-tutorials/Coding-Faster-Emmet/133353-2.html

The Emmet Cheat Sheet may also be really helpful: http://docs.emmet.io/cheat-sheet/

Install Bracket Highlighter via Package Control

When clicking on one HTML tag, this tracks down the closing (or opening) tag. Very helpful for tracking down extra tags in those pesky layers of nested divs!

Install Color Highlighter via Package Control

This will display the color you’re working with when you click on it. Example: call for #FF0000 in your code, and when you click on the color, it will preview red for you.

Install W3C Validators via Package Control

This will install validators for HTML and SVG only. There is no CSS validator.

Aptana - What I enjoy about using Aptana Editor vs using Notepad ++ is that the background is a dark shade and when typing out code it can get too bright on your eyes after a while, using Aptana eliminates that problem by giving you a new color theme while still giving you the added color references to html tags, Aptana will give you color references to many other scripts as well.

I tried to include in the screen shot how you can right click anywhere in your project and basically insert a script or other things, there is so much to Aptana I am still learning how to use it by just poking around but I already enjoy the easy of inserting Doc types and there is a handy little feature called the Outline that allows you to see how your page is set up by stemming the structure of the page in a tree topography fashion with the + & - drop down menus for you to open and close sections of the page and I find this very helpful when working with a large amount of information.

You can double click a position in the Outline and it will locate your starting point to that spot on your project which is handy if you do not want to skim through the entire page to find a specific spot you want to edit. I think overall the best feature would be all of the extra scripts that come loaded in Aptana for you to insert I just need to learn how to use them.

As browsers advance, each browsers development tools gets more robust, plus there are lots of IDE - Integrated Development Environments that have very powerful tools. The tools grow everyday - so it is important from time to time to Google, YouTube and Visit help pages and forums to see what the new features are. When you are watching tutorials - be sure they are up to date - or be aware that changes happen quickly.

Chrome's Debugger https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

FireFox's FireBug: Download http://getfirebug.com/ Tutorials: http://getfirebug.com/javascript

InternetExplorer F12 Developer ToolBar http://msdn.microsoft.com/en-us/library/ie/hh968260(v=vs.85).aspx

IDE - Integrated Development Environment , More than an Editor, More than a Debugger

NetBeans vs. Eclipse
- Speed, native testing support, FindBugs, and the clear user interface of NetBeans IDE are some of the reasons why Gualtiero Testa, from JUG Milano, prefers NetBeans over Eclipse. Read the article to find out the details!
NetBeans Users: Our Favorite NetBeans Features
- Learn about the NetBeans Action Items window, code templates, Android integration, and keyboard shortcuts from NetBeans users Moses Khazalwa and Jesus Garcia Quinones. What are your favorite NetBeans features? Blog about them or send them to netbeans dot webmaster at gmail dot com.

Validators

HTML - http://validator.w3.org

HTML5 - http://validator.w3.org/nu/ <------------- Validates HTML5

CSS - http://jigsaw.w3.org/css-validator <-- Validates Whole Site!! in Beta

CSS3 - http://www.css-validator.org

Put enough Text in your page to test it - Use Lorem Ipsum Generator to have text on your page to test wrapping http://designerstoolbox.com/designresources/greek/?lorem=pa

· Google

o Google Code http://code.google.com/

o Google Web Tool Kit (GWT) - http://code.google.com/intl/en/webtoolkit/overview.html

o Google Web Toolkit – Designer http://code.google.com/intl/en/webtoolkit/tools/gwtdesigner/index.html

SPEED test:

Website http://tools.pingdom.com
Your Connection http://www.speedtest.net or speedof.me
Chrome only Speed Tracer https://developers.google.com/web-toolkit/speedtracer/get-started#downloading

HOW WILL MY CODE LOOK on different Computers, Tablets, Phones, etc.

http://responsinator.com "The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices. "

http://tinyfinch.com/19-responsive-web-design-tools-designer

JavaScript -

JS Lint http://jslint.com

Yaldex.com has a free version and a $49.95 version: http://www.yaldex.com/JSFactory_Pro.htm

Comments

HTML .......... 

JavaScript

CSS .......... //

PHP .......... // or # and /* */

How does your site look on different: OS, Browsers, Phones & Tablets

Microsoft in the fall 2014 made these available for FREE:

- Web tools for building the Modern Web: https://www.modern.ie/en-us
- Seeing your site on different Browsers/Appliances https://www.modern.ie/en-us/screenshots

Speed Trackers

SPEED TRACKER

Install Speed Tracer into your Google Chrome browser

example scenarios for some tips on what to look for

Google Speed Tracer Article by Geek.com http://www.geek.com/news/make-your-web-apps-run-faster-with-google-speed-tracker-1012541

PAGE SPEED

ChrisPederick.com - Web Developer an extension for Chrome & Firefox http://chrispederick.com/work/web-developer/

IMAGE Size

Is the size of your image slowing down your web page?

Resize images to load FAST

We also have to be careful of the IMAGES we use. We may think they are free .... but are they really??

TinEye Reverse Image Search

www.tineye.com/?

TinEye is a reverse image search engine built by Idée currently in beta. Give it an image and it will tell you where the image appears on the web.

Plugins - Idée Labs - TinEye Services - Updates

Search by Image – Inside Search – Google

www.google.com/insidesearch/features/images/searchbyimage.html?

Search by Image. Now you can explore the web in an entirely new way by beginning your Google search with an image. Learn more about images on the web ...

Vladimir Ivanov +1'd this

Google Advanced Image Search

www.google.com/advanced_image_search?

Web History. Advanced Image Search. Find images with... To do this in the search box. all these words: Type the important words: winter hoarfrost. this exact ...

SEO Size

- http://www.seoquake.com - shows keyword density, linkbacks & see your competitor. SEOquake helps to obtain an information about any site for a wide range of parameters such as page rank, Google index, Alexa and many others. Keyword Density tool serves to demonstrate a number of times a keyword or phrase appears on a web page.
- http://www.screamingfrog.co.uk/seo-spider It fetches key onsite elements for SEO, presents them in tabs by type and allows you to filter for common SEO issues, or slice and dice the data how you see fit by exporting into Excel. You can view, analyse and filter the crawl data as it’s gathered and updated continuously in the program’s user interface.

SEO Frog http://www.screamingfrog.co.uk/seo-spider free limited version for Windows, OS & Ubuntu

SECURITY

Article - Build Security into Apps - JilMac liked that they discussed 3rd party apps, not advocating that you code everything yourself. http://digital.gcn.com/?i=AUGUST%202014&acct=31517014&email=jilmac@mac-rand.com#folio=16

TEXT GENERATOR

- Lorem Ipsum Generator - Dummy content written in a latin type language - http://designerstoolbox.com/designresources/greek/?lorem=pa

BUG Tracking Software

BUG HERD http://BugHerd.com Point & Click BugLog for Web Development

WRITING

OWL - OnLine Writting Lab https://owl.english.purdue.edu/owl/resource/747/01/

plagiarism-detection service such as http://Turnitin.com

SPEED TRACKER in your Chrome Browser https://developers.google.com/web-toolkit/speedtracer/get-started#downloading <---- TEST THIS JilMac got error

Page updated

Google Sites

Report abuse