Web development today

Web development today isn’t just HTML editing or basic php scripts. Web development and programming today is usually achieved with a wide set of tools — any popular website around today uses a wide set of tools. For example,

• reddit.com — reddit uses Python and PostgreSQL, which spit out html (of xhtml syntax), javascript and CSS.
• slashdot.com — slashdot.com uses Perl and MySQL, sitting on top of Apache.
• microsoft.com — microsoft.com uses a combination of ASP.NET, running on top of IIS. The output is html (xhtml syntax), css and javascript.

The tools

Web Developer / Firefox Extension

Firefox Web Developer Extension is a useful tool for being able to disable various features on a page, manage cookies, view specific css information using a picker tool for any specific elements and being able to manager userstyles. You can also manage images and various other tools including the ability to view generated source.

You can download it at Mozilla Add-ons

ColorZilla / Firefox Extension

ColorZilla is an extension to firefox that adds a color picker tool to the browser UI. It is then possible to return information for a given pixel on a website.

You can download it at the Mozilla Add-ons site.

MeasureIT / Firefox Extension

The measureIT Firefox extension adds a measuring tool that appears as an overlay on any webpage you need to use it on.

You can download measureIT at the Mozilla Add-ons site

DOM Inspector / Firefox Extension

The Document Object Model Inspector is a tool to inspect the DOM of any webpage. It often comes with the default install of firefox as an option.

You can download DOM Inspector at https://developer.mozilla.org/en/dom_inspector

Firebug / Firefox Extension

Firebug is an extension which is useful for editing css, html or javascript elements within a webpage.

You can download Firebug at the Mozilla Add-ons site.

Google page speed / Firebug Extension

Google page speed is a Firebug extension that is able to give you a wealth of information on the download speeds and execution time of your website. It can also give you tips on how to reduce overheads and improve code.

You can download the Google page speed Firebug extension at the google page speed site.

Notepad++

Notepad++ is a tool I often use when working on smaller projects where I do not need a full IDE.

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.
Based on a powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size.

You can download it over at the notepad++ sourceforge project site.

Netbeans with PHP Development plugin

Netbeans is a Java IDE developed by Sun. It supports various plugins — one being PHP development extensions. When working on large projects, Netbeans proves useful.

You can download it at the Netbeans site.

Visual SVN

VisualSVN is a SVN server for Windows. It is quick and easy to use and requires little previous knowledge of server administration or svn experience, but it can also be quite powerful.

You can download it at the VisualSVN Server site. It is free for both personal and commercial use.

Tortoise SVN

TortoiseSVN is an SVN client that interfaces with Windows Explorer to interface with SVN.

You can download it at the TortoiseSVN site.

XAMPP

XAMPP is a quick and easy way to get an apache server, MySQL daemon and PHP all running on Windows for a development environment. It also supports an FTP server and a few other things.

You can download it at the XAMPP site.

Forums
You can come and discuss web development, get website reviews and also SEO information at the Transcendental Labs forum.

*\bin* *\obj* *.suo *.user *.bak **.ReSharper** **\_ReSharper.** StyleCop.Cache

Es lo que tiene compartir información con la gente; ayer mismo andaba trabajando con un compañero en las pruebas finales de un proyecto en su portátil cuando nos dimos cuenta de que, posiblemente, hubiera versiones actualizadas en nuestro servidor SVN, por lo que se dispuso a actualizar. Me quedé sorprendido cuando abrió el Nautilus en su Ubuntu 9.04 y busco la carpeta de trabajo del SVN y con el menú contextual pinchó en “Actualizar”.

- ¿Y eso?, se parece al TortoiseSVN de Windows.

- Sí, es el RabbitVCS, y funciona bastante bien.

Así que ya sabéis, si os resulta harto cómodo el cliente SVN de Windows ahora podéis usar algo muy similar en vuestro Linux.

Más info.

TortoiseSVN does not have the SVN admin tools implemented inside it, nor does it ship with these command-line tools. If you need these admin tools on Windows, install the Windows binaries provided by Tigris.org. CollabNet also provides Windows binaries, but it requires a signup which I hate!

Improving your source code structure with SVN Externals

Svn “externals” is an SVN property of folders, which you can use to set external links. By doing this, you avoid having to copy the same folder in multiple locations, and you get to make changes only once and in only one place.

There are two ways to set an SVN property, through the command line or (if your svn client supports it) through the UI. In this case I will show you how to set the properties through the UI of the TortoiseSVN (my favorite SVN client).

First of all, you have to decide the folder of reference. Inside this reference folder you will have the external links. The syntax is as follows:

pathRelativeToYourFolder http://svnpathtoexternallink

So, first you put the path relative to the folder you right-clicked, and then the SVN url to the “external link” folder. As simple as that you can add external links to all your project folders.

Now let’s try to improve our source code structure using externals. If you followed my previous post about code structure, or if you have a similar structure you should have something like this:

SVN basic structure

Many of your projects will most  likely going to have a lot of the “lib” folder in common (for more information about the lib folder see this), such as nunit, nant, enterprise library, asp .net ajax toolkit, etc. So it makes sense to take the lib folder to a totally different path, outside of every project, and add it as external links to each project that may need it.

So all you need to do is create a lib folder outside the scope of your project, put all the lib stuff inside, and then go to the trunk folder, right click, go to TortoiseSVN -> Properties, and finally add an svn:externals property with the following text:

lib http://yoursvn/path-to-the-lib-folder

From now on you can keep your lib folder always up-to-date in all of your projects at the same time! Notice however, that changes to the lib folder have to be done in the http://yoursvn/path-to-the-lib-folder repository and not inside your trunk’s lib folder. Another thing to take into account is that if the lib folder grows too big, you can always do a checkout excluding the “externals”.

In this post we have improved the structure of our repository by moving the lib folder to a common place for all our projects, adding an external link using the svn:externals property.

So before I dive into my world changing ASP.NET MVC app, I figured I’d take some time to explain very simply how to set up some SVN integration in VS2008. Ready? Don’t blink ’cause you might miss it:

1. Beanstalk – http://beanstalkapp.com/

Follow the cues to set up your free subversion repository, you won’t need help navigating their site, it’s super simple.

2. TortoiseSVN – http://tortoisesvn.net/downloads

This isn’t really necessary, but I like it just in case I’m in a windows explorer window and happen to want to commit something. Download the version for your appropriate cpu (32/64). Double click and hit next until it asks you to reboot. At that point you should reboot. Now you’re almost there, I mean you can hit up your beanstalk repo straight from the windows file system by right clicking the whitespace on a windows explorer window and clicking “SVN Checkout…”: but we want to never have to leave the IDE so on to step 3 we go.

Tortoise SVN Checkout...

3. AnkhSVN – http://ankhsvn.open.collab.net/

On the right you’ll notice the download link for version >= 2.1. Once it’s downloaded, close visual studio, double click the installer, next, next, next. Once it’s done installing open up visual studio and you’ll notice a new tab at the bottom of the window “Pending Changes”. If you don’t, that’s fine just click on “View” then click on “Pending Changes”:

AnkhSVN Pending Changes Pane

4. Time for the secret sauce.

Now, let’s put these awesome tools into action. Right click on your solution in the solution explorer and click “Add solution to subversion”:

Adding your solution to subversion

A pop up window will come up, just enter in your repository URL:

AnkhSVN asking you for your repo URL

(which can be found on your dashboard at beanstalk on the right under “Repository URL”) and once you connect, just hit OK and you’re good to go.

After this intial upload, your solution explorer will reflect which state your files are in:

• Blue check mark: you’re synced up with the repository
• Red rectangle: you’ve made changes that haven’t been committed yet

Ankh-ified Solution Explorer

Once you edit a file and you want to upload changes to the repo or download someone else’s changes, just go down the “Pending Changes” tab on the bottom of VS and hit “Commit/Update” respectively.

Quick pointer to a particular TortoiseSVN feature I wasn’t familiar with for some reason. This enables reverting to a previous revision easily.

The easiest way to revert the changes from a single revision, or from a range of revisions, is to use the revision log dialog. This is also the method to use of you want to discard recent changes and make an earlier revision the new HEAD.

via Roll back (Undo) revisions in the repository.

I’m reading The Pragmatic Programmer at the moment, and one thing they recommend is to always use source control, even for small prototypes and personal projects.  Now I’ve been using source control at work ever since I started coding, but I’ve never given serious thought to using it at home – I only have a single machine for a start.

But that’s not really an issue these days, as there are a number of Internet hosts that can act as your source control server – and this gives the additional advantage of being able to access your code wherever you can get on the ‘net.  And as well as being a good way of backing things up,  you also get a full revision history, which can be handy when things go pear-shaped!

Now, I don’t want to spend any actual money on this, but that’s not a problem as there are many open source options available – I didn’t look too hard here as I’ve already used Subversion (SVN) at a previous job and it has a big following, and is supported by most of the online hosts.  Same with the client, which is the part I had to install on my machine – TortoiseSVN integrates with Windows Explorer, is free, easy to use, and has all the functionality you’d expect.

TortoiseSVN in action

So the main thing to do was chose a host.  Again, there are many free options – this site has an excellent comparison of the available options, including several free ones.  One of the main things you need to decide is whether you want your code to be open source or not, as several of them only host open source projects.  I’m happy enough with that, so after a little research online I went for Google Code, which has a lot of space, unlimited users, and some useful features.  Two minutes to create a Google account, then you can crate a new project by entering a few basic details, and you’re ready to rock & roll!

Creating a new project in Google Code

Once you’ve got TortoiseSVN installed and your Google Code project set up, you just need to upload your project – this blog has some useful tips that will get you up and running in a couple of minutes.  And that’s it!  In less than 10 minutes you can be up and running with a full source control solution, including online administration:

Google Code administration page

And if you want to get someone fixing your defects for you, all they need is an SVN client and you’ve got yourself a development team.  If I’d known it was that easy, I’d have done it years ago..

Subversion is a very popular version control system. As a result, subversion has a wide array of client tools which makes life difficult for us, the users. So we wanted to know what our readers actually use and here is the summary of their opinions. Read more from SolitaryGeek.

Why don’t testers version control their tests?

I am still surprised at how many organizations don’t version control their automated test scripts. I put it down to the following reasons:

• Developers may use expensive version control tools, but sometimes there aren’t enough licenses for testers;
• People don’t realize there are free version control tools available;
• Setting up version control might be considered too difficult for the test team;
• Some people believe you need to own a version control server to version your test scripts; or
• Any combination of the above.

In reality:

• If the software developers’ version control system is available for testers great, but if not, test scripts can be versioned separately;
• There are many different free version control tools available. TortoiseSVN, which uses the Subversion (SVN) protocol, is very popular and very easy to use;
• Setting up a new SVN repository using TortoiseSVN only takes a few minutes; and
• You can set up a SVN repository on a shared network drive, so you don’t need a server (but a server is cool).

How to quickly set up a new SVN respository on a shared network drive (using Windows)

If you haven’t version controlled your test scripts yet, here’s how to do so.

1. Download and install TortoiseSVN from http://tortoisesvn.tigris.org/ (it’s about 19MB, and requires a reboot: bummer )
2. Find a location on a shared network drive where you can store your SVN repository. For example, it could be Q:\SVN  Repositories , create a new directory for your repository (eg. Q:\SVN  Repositories\WatirMelon\ and right click within this new directory in Windows Explorer, and choose TortoiseSVN, and then ‘create repository here’. The path to your new directory will be your SVN repository path.
3. The repository should be created in a matter of seconds, and filled with some directories and files. These files/directories should never be touched, under any circumstances.
4. Now you need to create a local repository and check out the new repository (which will be blank initially). Create a directory on your local drive for your repository, for example C:\watirmelon, and right click within this directory and choose ‘SVN Checkout’.
5. You will need to specify the location of your repository you created in Step 2, but importantly you will need to add file:/// to the front, and change the backslashes into forward slashes.
6. Once you click OK you have a repository (albeit blank) checked out. You would then simply add all your automated test scripts, then do an ‘SVN Add’, and ‘SVN commit’. If you want to use your automated tests on another machine, you simply checkout the repository following steps 4 & 5 above.

Conclusion

So there it is. Now there’s really no excuse not to version control your automated tests, considering it’s free, quick, easy and doesn’t require a server. So go and do it now (if you haven’t already).

Instructions including screenshots for setting the svn:externals property using TortoiseSVN. This allows multiple repositories to be open and used in a single Visual Studio instance using VisualSVN. Slick stuff, so far this is working really well for us.

Just a tip I spent some time on figuring out: Found information today on how to use TortoiseSVN to manage svn:externals. I’m working on a big project where we need many different branches and parts to use the same css and images libraries throughout all subprojects.

via justaddwater.dk | Setting Up Subversion Externals With TortoiseSVN.

Scroll down to the TortoiseSVN section and follow the instructions.

The AppSource Dealer Management System (DMS) provides a solution to the needs of the different components of running a dealership with automotive dealers. The components handled by the system are parts, services, vehicle sales, finance, customer relationship, and information. The AppSource DMS aims to replace the current DMS, provided by Mitsubishi Motors Philippines Corporation, used by Freeway Motors.

.NET Framework 3.5 is the foundation of the AppSource DMS. It also requires that the server has, at the very least, a Windows Server with SQL Server Express installed. As for the workstation that would be connecting to the server, Windows XP or Vista is sufficient. As it may now be obvious, the AppSource DMS is a Windows-based application that makes use of SQL for its database.

Aside from aiming to run on much newer technologies, it is also the goal of the AppSource DMS to be user-friendly. The capability to support different export output formats (such as *.xls, *.doc, *.docx, *.pdf, and *.txt), as well as generate reports and logs in user-defined date ranges are some of the things being implemented in order to achieve it.

As in the other AppSource project (BLSS), we will be using the SCRUM Agile method as our software development methodology. However, unlike in the common implementation wherein each sprint lasts for about three weeks, our sprints are on a day-to-day basis. The basic idea behind the sprint is that clear and specific tasks are listed at the start and the team members identify the ones they can accomplish and those that they cannot. A report at the end is done, indicating the progress and the reasons for any tasks left undone.

Sherry and I are part of the team and we will be receiving our set of tasks for the first sprint tomorrow. If I’m not mistaken, we’ll be working mainly on validation. And so, we prepared ourselves earlier by updating our test matrices based on the latest version of the source code.

I was also introduced earlier to TortoiseSVN, which is the version control software used by AppSource. Having its commands directly available from the windows explorer really makes it easy to use.

TortoiseSVN on Windows Explorer

Close-up on the Features

For the Zambales Project, we have updated the demo unit, and it now has Ubuntu 9.04 Jaunty Jackalope.

-Anna

We finally migrated to an online subversion repository to help us update each others’ code easier. Since we were doing pair programming, having an online subversion repository made us work faster. Honestly, this is my first time to use an online subversion repository. Although we were taught how to use one in our cs192 lab class, we never had the chance to implement it in our cs192 project. Everything became so simple and hassle-free; instead of sending the code through email, downloading, finding the new code snippets and adding it to my copy, the online subversion repository finds the differences and easily updates my copy if Joot committed a change. Also, with the help of Tortoise SVN, everything was as easy as a right click.

Before we moved to an online subversion repository, Joot introduced me to one of the wonders of network softwares: TeamViewer . Teamviewer enabled us to check each others’ code real-time by sharing each others’ screen. It was cool since we were able to do everything in the other person’s screen. It made bug-finding faster and easier. Teamviewer also supports file sharing and even chat. But sadly, Teamviewer is no repository, so we had to update our copies manually. 

Aside from the subversions, I was able to integrate the add window to our main window. I also finished creating the delete function that Joot could use to implement the delete option. There are still a lot of things we need to do, hope we finish them soon!

Liv Dag

Subversion is an important tool which needs to be configured to use proxy in case of user is behind proxy server. To add proxy support in svn edit the file ~/.subversion/servers (On Windows it is in “%APPDATA%Subversionservers”) and add the required proxy settings in the [global] group. You can also set the proxyusername and proxy password in the [global] group in case your proxy needs authentication.

After editing your servers file will look as.

[global]

http-proxy-host = proxyip

http-proxy-port = proxyport

http-proxy-username = username

http-proxy-password = proxypassword

If you are experiencing the error as:

svn: path to server file:line Section header expected

You have put the proxy configuration in wrong place, i.e. not under [global] group. Try commenting the line number mentioned and put the proxy information in [global] group to rectify the problem.

For more information see FAQ (subversion)

If you use tortiosesvn as your svn client in windows, adding proxy is one minute job (may be less). Follow these steps:Get the proxy settings from your Network Administrator or ISP

1. Right-click on the desktop or in any folder to get the context menu, select the ‘settings’ option under the TortoiseSVN menu item
2. Select the ‘Network’ section in the left pane of the window
3. Check the ‘Enable Proxy Server’ checkbox
4. Enter in the proxy server settings, and you are done.