Matt Prokes

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #18

Eclipse, by some considered the most popular development environment in the world, it is not primarly intended as front end development environment. Rather, eclipse tends to be used for backend server based development environments. Despite this, many organizations still use eclipse for front-end development since it has a nice set of features such as code versioning, unit testing, and refactoring tools.

Eclipse also has many, many nice plugins which turn the platform into a full blown web development environment. Thus making it excellent for beginning front end developers. Other features such as integrated servers, packaging systems, code formatting systems and various code management tools make eclipse the excellent platform that it is today.

I would suggest that all new developers consider taking an integrated development environment for a test drive, see how you like it, and see if it suits you well. There are various video tutorials, and eclipse tutorials out on the net for your convenience. One of the main points of learning various development platforms is to expose you with whats out there, as well as for employability.

Having knowledge in common popular development environments will make you as a developer much more enticing to organizations. As well as providing experience with the best way to get the job done. Even if you never use the environments, an exploration of the possibilities is always a positive step in the right direction.

Tags: web developer 1.3
Posted in Environments, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #20

So Aptana and Eclipse are our first examples of an IDE or (Integrated Development Environment.) The book will not be using the editors in examples, the reason being tools such as aptana and eclipse would only hinder the objectives with environment theologies. It would also strap the reader to a particular development platform when really I just want you to find out what works best for you (as a developer).

IDE’s objectives are to offer a “packaged solution” for developing in a particular technology. Meaning that when using a technology specific IDE, you will most likely have all the tools you will need for deployment of that technology. While this is great for beginners, there are also serious limitations with ide’s.

IDE Limitations:

• Just because a tool is included in a packaged solution, doesn’t mean that tool is “the best solution”. Often individual tools will trump tools included in an ide. It is this authors viewpoint that the operating system which you work on is the best IDE around; because you can use any tool, and not just the tool which works with a development environment.
• IDE’s consume considerable amounts of memory usually do to the amount of tools included with the environment, these development environments are also not usually very fast either since they do large amounts of analysis. This effect is multiplied with each file you have open, and since developers often have several files open at one time (usually in my case about 20), memory and speed can be a big concern. In the case of web development they just get in the way of developing. Although this is not the case for other forms of development (such as java).
• In the case of web development specifically development from an IDE can often take more time, and be more troublesome. Most web development that we will be doing will be in a more realtime manner not particularly suited well for IDE’s.

IDE Advantages:

• If you are just starting to do web development, and you need hand holding IDE’s are the only way to go. This book will substitute IDE hand holding with pure tips and tricks on getting things done. Although I suggest you at least download Aptana, and go through the first few chapters with it if you are a beginner. A programmer can learn a text editor any day of the week, but its a career advantage to be familar with development environments since many companies come from traditional software  (IDE’s are popular with traditional software big time), they often have the belief that they are nessesary for web development.
• IDE’s often come with documentation packages, which will look up things like Javascript API’s automatically as you type in code. This is great if you need to become familiar with a particular library. IDE’s usually come with a good amount of documentation and tutorials in general to get you going.
• IDE’s usually come with all the facilities that you will need to technically get the job done that you are trying to do. If you do not care if the tools aren’t the best out there, and you just want to get going IDE’s are a great way of doing that.

So really when deciding what to use it is going to be all about the best tool for the job. If your job is web development you need to figure out what the best tool for you is. There is no right way to develop software, their are only ways.

This book will not be pushing the concept of IDE’s to much because in the professional web development world many of the best tools are not centralized on a single platform. Although certain tools which exists on IDE’s (such as oXygen) may be the best tool for a particular job (xslt) this book looks at ide’s as a tool, rather then a centralized development platform.

Tags: web developer 1.3
Posted in Environments, Technical, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #19

Aptana is an excellent development environment for programmers just starting out. Thus the environment deserves mentioning, and if you want to I would suggest you give it a shot. Another reason aptana is relevent for mention, is that you may find the environment in various development shops around the country. It also supports many nice tools and wizards for developers just starting out. It also offers an integrated platform for deployment of web applications.

Some really neat aptana features are include compatibility with many of the popular javascript frameworks out there as well as api documentation for those frameworks, a built in debugger, video tutorials to get you started, an integrated webserver, code refactoring tools, and integration with ftp, plus much more!

Aptana also has a large suite of web development related plugins which allow you to leverage the platform even futher! Many wizards, and tools are available in an attempt to make your web development experiences as painless as possible.

The platform supports a large set of web development langauges, but it may take some getting used to. I would sugest that you check out the video tutorials provided if you want to learn more about how to develop in the platform.

Note: The development environment is really just a re-tooling of eclipse. So if it looks somewhat similar don’t be to shocked. In fact if you already have it, aptana also comes as a plugin for eclipse rather then downloading the entire aptana platform.

The aptana eclipse plugin is also the only way to use aptana with code repository tools for versioning technologies such as CVS, Subversion, and Git.

Tags: web developer 1.3
Posted in Environments, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #17

We will be using scite in conjunction with firefox development throughout this book. SciTE, is a wonderful little light weight text editor that I found a few years back. The great thing about it is that it supports about 40->50 programming languages and the total size of the app is under 600k.

You are by no means required to use it, but the book will be making use of it extensivly, similar products are TextPad, VI, and countless other text editors out there. This editor in particular has the lowest level learning curve, and overall I just prefer it.

Some of the features include, code completion (when the proper plugin is installed), refactoring tools which allow you to search code via regex, collapsable code blocks, this feature is very cool because it allows you to more easily keep track of where you are in the code, and also helps to identify the beginning and ending of a code block much more easy.

SciTEs’ tabbed environment, allows you to have multipule light weight tabs open, plus the syntax highlighting is visually easy on the eyes. One of the best parts about the editor is the ability to easily change the editor configuration, and the level of configuration options available. Finally, if you need to save a editor state for later on that can easily be done from the file menu “Save Session”.

To install it, simply go to the site and download the “Windows Executables” or “full download (830k)” which will be delivered in a zip file. Simply unzip the file, and look for a file named “SciTE”

If you are looking for yet an even more easy installation, download the windows installer, or the “An installer that includes extensions” link. The installer may also include features that are not in the zipped version, I have never tried the installable version so I am not for certain if that is the case. Anyway if y ou are looking for more information on using SciTE, the Professional Developer Series, volume reference page has a link to a more detailed SciTE tutorials that will give you a much better in-depth look at the editor.

You will also probably pick up SciTE tips and tricks throughout the book.

Tags: web developer 1.3
Posted in Environments, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #16

The firefox development environment will be the development environment leveraged by this book, so before we dig in, I would like to first show you around firefox first. I am sure that many readers are aware of firefox as an internet browser, but more recently it has also been adapted into a wonderful development environment. So lets fire it up, and take a look at a few of the features.

Neat! It looks the same as always, nothing to see here, its firefox as you remember it. So where is the development environment? Well, its not installed yet. See firefox has this nice little built in feature called add-ons.

The add-ons interface is a system which allows you to type in the type of thing that is needed, and it will contact the firefox website and find the appropriate extension for you! In this case we are trying to find the web developer toolbar. So to be clear, when you first get firefox the development environment doesn’t really come with it. You need to add extensions to firefox which allow it to become a development environment.

Some of the extensions that this book will be using are: Selenium, Web Developer Toolbar, Firebug, FireFTP, ColorZilla, and a few others here and there that will be mentioned throughout. We will have a tutorial on how to install things later on in the book. Anyway, when all these extensions are installed, firefox can look somthing like this if everything is enabled.

So what is all this stuff? Well lets start off with the web developer toolbar, some of the neat features of the tool allow things just as manipulation of page css (highly useful if you are laying things out). It also will also do cool things like capture the curent page source or css, allow you to inspect elements on the page, as well as provide various information on cookies, markup validation, and much more.

Next up is firebug, this tool has a awesome javascript debugger (by far the best in the industry). You may not know what it is now, but just take my word for it when I say its important. Firebug also has an excellent dom inspector, as well as a network inspector so you can see all the connections that firefox has made during the render of the page. It does also have a CSS editor, in someways it is more useful then the web developer toolbar css editor but in MANY ways it is inferior to the way the web developer toolbar css editor. I use firebug css when its appropriate for what I am doing.

Lets move on to selenium, selenium is cool because you can do automatic testing of your webapplications with it! Stuff like regression testing, and just UI testing in general becomes invaluable with selenium. The development environment is not shown in the previous screen (because it would take up the entire screen) but we will discuss it later.

FireFTP allows you to upload your webcontent to a FTP host on a server. Since FTP is the primary way of uploading content to webservers usually, I thought I would throw fireftp in there. It is also invaluable for inspecting FTP folder layout, as well as retaining ftp connections and working great with almost any kind of authentication that you throw at it.

Colorzilla is cool because rather then guessing what a particular color is on a webpage you can just up colorzilla dropper to tell you instead! Pretty neat huh, though I should note that it is not always perfect with images, but it is not the fault of firebug, rather the fact that some raster colors are a combination of other colors, rather then a true color. If you really need to be sure, ask the designer to write down the actual colors that they used in their mockup.

Thats the roundup of firefox browser core extensions (ones we will be using frequently), I will probably ask you to install a few others but I won’t be focusing on them as much as the extensions mentioned above. Anyway we are not done entirely yet. Lets move on to bookmarklets, you can think of these little guys as javascript applications which execute on what ever page you are looking at. Usually in the form of a bookmark, bookmarklets are very easy to install and have lots of promise.

A bookmarklet in particular we will be using frequently is the javasctipt shell. The cool thing about the JS Shell, is that it will let you execute arbitrary commands on what ever page you are looking at. It has javascript based code completion, it allows you to write full multi-line javascript applications, and generally prevents the need of switching back and forth between environments just to do some tests.

Tags: web developer 1.3
Posted in Environments, firefox, web development | 1 Comment »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter TBD
Page: TBD

A bit more about firefox, while in many cases the browser is exclusivly the best way of getting web development done it does have its own set of issues; particularly in utilization of computer memory.

I have seen firefox memory utilization start off at a feeble 20,000k, and grow to well over 1.5gb at times. Now, just so you know not all of this is completely attributed to issues with firefox its’ self. Memory leaks in websites’ applications, and firefox having a multi-tab environment greatly contributes to browser memory utilization overhead.

Extensions, are another HUGE factor when talking about how much memory the browser will use. To give you an idea, lets assume that 3 website tabs are each consuming 15,000k (a total of 45,000k). Next lets open a firebug extension and say it consumed an extra 5,000k per tab. That would spike the total memory useage to 60,000k.

Finally, lets add in 5 other extensions that also consume 5,000k (thats an extra 75,000k), you can see how extensions start to greatly contribute to the memory overhead of firefox. Sadly if you factor in leaks, and other issues. Memory starts to add up rapidly, so what can we do about it?

Option 1: Disable Extensions When Not In Use
One solution would be to only enable the extensions when doing development. Start off by opening the add-ons window again (page 16), but this time click on the extensions button in the window (the thing that looks like a puzzle peice).

Simply click on the “Disable” button to disable the extension when you do not need to use it, firefox will prompt you to restart and after you do the extension will not be available to the browser again until you re-enable it. To re-enable the extension simply go to the same configuration area and click “Enable” for the plugins you wish to use.

While this method works perfectly, part of an annoyance is having to click through and enable/disable several extensions when all you really want is a light-weight version of firefox without those plugins. That is where option 2 comes in.

Option 2: Set Up A “Light Weight” Firefox Profile
The idea of setting up a light-weight firefox profile is nothing spectacular, but it will for-sure take care of extension memory issues all in one shot. So lets get started, first off I have found a neat little firefox extension to make the job more easy called “profile switcher”, https://nic-nac-project.org/~kaosmos/index-en.html#profname lets go out to the website and right-click on the “Download” link choosing “save link as”.

Save it to a location on your computer where ever that may be. Next lets install the extension, in firefox choose [File > Open File], and select the extension that was just saved to your computer.

The browser will popup the familiar extension install window (page 16), install the extension and re-start the browser. Once the browser is re-started, you should see a blue icon on the bottom of the browser saying “default”. This is the profile switcher.

What are profiles in firefox? You can think of profiles almost as a way of defining different versions of the same browser. Its actually intended for situations such as multi-user environments, example: lets say that bill, judy, and jane all are using the same computer. Bill wants to have his own set of bookmarks, judy also wants her own set, and jane doesn’t use bookmarks at all. Profiles would allow bill to create a profile named say “firefox-bill” within the browser which would save all his bookmarks to firefox-bill if he was using it.

We will be using profiles in a little different way, currently the profile is set to “default” and is pretty heavy with all these extensions, so lets simply create a “firefox-lite” profile which contains NO extensions! Lets start off by right clicking on default, and click on “Open Profile Manager”.

You will probably get a pop-up asking you “Close current profile when switching?”, choose “No”. Next the “Firefox Choose User Profile” window will pop-up.  Click on the “Create Profile” button.

A window will pop-up describing what creating a profile does, click next. The next window that you will see will ask you for a profile name type “firefox-lite”, and click the finish button.

You should now see firefox-lite in the profile chooser, double click on it and a new version of firefox should start right up with no extensions installed! This functionality should allow you to create tailored custome firefox environments based on the type of development you are doing. Are you doing SEO? Great, install all the SEO extensions you want, and simply create a firefox-SEO profile, etc.

Tags: web developer 1.3
Posted in firefox, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter TBD
Page: #TBD

Throughout the book we will be covering web development tools which are common and well known by software engineers around the world. Before we are able to get to that, I will need to familiarize you with some of the technology platforms which we will be developing with.

So lets start off with Mozillas’ Firefox. Firefox; a well known internet browser is used every day by many. What people may not be aware of is the powerful web development tools available for the browser, making it one of the most popular web development platforms available today. So lets get you up and running.

If you do not already have it, you will need to go out and download firefox at http://www.firefox.com, next you will need to install it (if you need help installing firefox check out this video (windows users)). So lets install some extensions for the browser that will be the basis for the development environment.

How to install a firefox extension:

1. Start up the browsers and click on [Tools > Add-ons].
   
2. Next firefox should pop-up a window (Add-ons); you should see a text field stating “Search All Add-ons”, click on the text field and type in “web developer toolbar” and press the enter key.
   
3. You will notice that firefox returned back a result of “web developer”, this is one of the tools that you will be needing so click on the “Add To Firefox” button. Firefox will then pop-up a window asking you if you would like to install the plugin, click on the “Install Now” button to install it.
   
4. Next the browser should return you back to the original window, and ask you to restart firefox. DO NOT RESTART IT for now! Lets first get the rest of the plugins installed. Please repeat steps 2 through 4, and install the rest of the required firefox plugins as listed below, feel free to restart firefox afterwards.
   • Firebug
   • ColorZilla
   • FireFTP
   • Selenium

How To Install Bookmarklets:


Bookmarklets are little javascript applications which we are able to execute on any page the browser is currently displaying. Installing bookmarklets is very easy in the case of firefox (a bit harder for internet explorer). Anyway, lets install a bookmarklet which we will be needing in the future (Javascript Shell).

1. Open up firefox and lets go out and visit http://www.squarefree.com/shell/, next lets click on the link “get the Shell bookmarklet (Firefox only)” which will bring you to a page with a list of tools.
2. You will notice the first button in the list says “shell”, this is the software you will be needing. So next right click on the shell button and click on “Bookmark This Link”.
   
3. Firefox will pop-up a window for naming the bookmark you are saving, I am just going to leave the name the same but feel free to change it if you want. When you are ready click on the “Done” button, and thats it!
   
4. Now if you would like to execute the shell to confirm that it is working, simply go to the bookmarks toolbar and click on the newly added bookmark.
   
5. Perfect, you should see a window pop-up similar to the one below.
   

Tags: web developer 1.3
Posted in firefox, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #15

So we have mentioned JSON a little bit here and there, but so far I haven’t made any clear indication of what it is. JSON or JavaScript Object Notation for all intensive purposes is just another alternative way of structuring data for transmission through the network. The core objective of JSON is similar to XML, and is particularly well suited for webapplications. Less bulky data transmission, direct conversion into javascript objects, various transmission techniques, and cross-domain data communication are just some of the advantages of JSON.  Later, this book will show you how to create web/desktop application hybrids, JSON is the only technology that would allow such functionality.

So what is JSON really? Without teaching you the language (that will come later), you can for now just think of it as data wrapped in javascript based constructs. It really is just javascript, nothing to magical. The neat thing is several server libraries (for various langauges) have been written to generate and read javascript code in accordance with a recognized standard. So rather then having your webapplication passing around xml data, it may simply pass around JSON data instead. Finally; JSON does not make xml by any means obsolete, you still need xml for things like the W3C Specs (RSS, SOAP,XSLT, XHTML, SVG, etc) it is also often used as a “reference dataset” in high traffic systems as shown below.

An Advanced Content Distribution System, Using XML As The Reference Dataset

XML is still nessesary for most web development today, so really it is all about the best tool for the job when deciding what to use and why. This book will make that decision clear later on, but for now I am just making you aware whats out there. So where can we find out more about json? Well this book will go over some of the basics related to webapplication development. In the short term, if you are looking to develop backend systems which will deliver JSON data; Douglas Crockford’s JSON Website has libraries for just about every langauge out there. Mr. Crockford, is well known for introducing JSON, as well as being a lead senior architect for Yahoo.

Finally: What we will not go over, is the creation of JSON data by a server. That will most likely be handled by another book in the future.

Tags: web developer 1.3
Posted in JSON, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #12

A server can actually be many things, but the primary purpose of a server is to serve (or transmit) data, or data service(s). The more common definition of a server would be a software package that is available on a computer, which would transmit data through a network. There are several different kinds of servers, and several different ways of using them. So lets go through a few common ones.

• Web Servers: Transmit web content and data via a http GET and POST requests (i’ll explain later). Web Servers usually are only able to transmit static files. Webserver content is most often viewed by clients which understand html, and other web technologies such as web browsers.
• Application Web Servers, can deliver either be dynamic or non-dynamic content by leveraging server based programming languages which are able to deliver dynamic data to a web client.
  • Difference Between: Application Servers, and Web Servers? Not a whole lot! The only real difference is what a server can actually do, for instance the functionality which makes application servers unique is the ability to return dynamic sets of data and content back to a web client. All servers transmit the same type of content to web based clients, regardless if they are an application server or not.
  • Application servers generally have many (but not always all) of these unique properties:
    • A type of deployment environment.
    • Very basic authentication services.
    • Come pre-packaged with frameworks.
    • Contain database management systems.
    • Associated with a language for dynamic processing of data.
    • Application servers focus on serving dynamic data, thus facilities are more focused on satisfying business logic, and data requests. Webservers are more or less “generic” and use agnostic.
    • Application servers contain facilities to package up, and execute business logic.
    • Contain unique webservice facilities, specifically:  binary/bytecode object transmission systems for third party plugins, or platform specific technologies.

    Today, application servers are the only way of delivering dynamic binary data over the internet leveraging (CORBA, RPC, and other non-XML data transmission technologies), though these technologies are not used as much as they once were. What happend was when xml came out, it offered a platform agnostic way of transmitting data through the internet, unlike many of the plarform specific standards. Thus allowing any platform that understood xml to be able to send and recieve data through the internet.

• Database Server: Is simply software which provides access to a database through a network. Database servers are often bundled with the actual database which they service. The primary function of database servers today is to accept SQL based “queries” (requests), and retrieve/store data, images, text. There are several different kinds of databases, but that is a discussion for a different book.

• File/FTP Server: Is a server which delivers files through a network. There are several different kinds of file servers, including P2P, Torrent, etc.. The most popular on the web today (and also the oldest) is a FTP Server or File Transfer Protocol. This protocol is built into almost every web browser available. So if you ever need to distribute a file FTP is the way to go. As a side note, most browsers these days also support HTTP based transfers; meaning if you have a file, you can just put it out on the webserver and as long as it is not a format that the browser knows of it will download it.

• Proxy Server: Is a “proxy” representative of a real one. It is generally the job of a proxy server to forward requests made to it from another computer, and then return the results from that request back to the request(or). Proxys are also sometimes used in filtering, and they are an essential part of routing technology.

Tags: web developer 1.3
Posted in Server, Technical, web development | No Comments »

Alpha Edition!, e-mail spelling/grammer/topic suggestions to mattprokes@gmail.com

The Professional Developer Series
Volume 2, Web Development
Chapter 1.3 Web Development Today
Page: #13

What does it mean to parse something?

The term parse will be used frequently throughout this book. So lets just give a quick run through of parsing, and why it is necessary in web development today. As wikipedia states, parsing is the action of analysis.

We as humans parse things every day, for instance you as a reader are able to parse (or read) the english language. As a result, a reader is able to store data, and learn things from reading. Computers are no different, they are also able to read as well (in this case xml) through their programming, and then take that data that has been processed, and do something useful with it (what ever that may be).

The action of processing and understanding data which a computer receives, and doing something useful with it is the definition of parsing. The XML language is already parsed by many many languages, so the hard part is done. Once xml is parsed though, the computer still does need instructions on what to do with that data.  So even though xml date may have been parsed and is readily available, that doesn’t mean that the computer knows what to do with that data yet.

The action of reading data is part of the parsing process called “processing data”, or “analyzing data”; and since most of today’s applications are driven by data, they do a ton of this. During the processing stage of parsing the computer may build a “representation” of the data in its own language, this is called a “data model”.

The computer may also decide to take action or “execute” on some of the data it finds while processing. All this is determined by the programmer, and many programmers make a good career out of just writing parsers to help computers understand all the different languages out there.

There are several different ways of parsing data; summarizing, there are techniques like pattern matching (Regular Expressions) as well as more recently matching hierarchical features (XPath), and many of the API’s out there designed to parse things like XML. Some are a combination of both (Antlr), regardless parsing will be a fundamental part of your career. You need it for things like validating data, and reading data which you receive; so if you have a bit of time, I suggest learning Regular Expressions or XPath.

Tags: web developer 1.3
Posted in Technical, web development | No Comments »