Web Coding - Fun with Subversion

WINDOWS Subversion usage for casual Web-Coding team environment

Okay. This is going to be a terse walkthrough in how to set up a version-control
work environment for the web design/coding&UI teams.

Setting: Usually nowadays the trend is that there is a design team and a coding team, not to mention a web-dev team.

Normally, the workflow starts from the PM (P stands for what I dunno.. production? project?)s that think of what needs to be developed. Designers get sent the raw material and the design barebone layout and start working their magic to turn something with lines to something with graphics.

The UI/Code team gets this and implements the actual HTML version of the normally graphic
format of PSD files.

A couple revisions at this step, and the coded page is worthy of passing on the developers, where it actually gets implemented into Internet-ready pages.

Problem: Too many versions of the same thing.

Let me explain how our company's workflow is:

1. They give me the design. I code.
2. I put the finished code for review into the networked drive. So, I have to manage 2 copies.
3. Then again, some things are different for the actual deploy version of the code. So I copy again into another folder. 3 copies.
4. If the developers put them on the servers, that also is counted, so 4 copies.

If changes need to be made, I have to change my source code for testing, overwrite the copies on the networked drives for other members to test, AND update it to the server.
Do you know how long this takes? 40 minutes.
Do you know how many points of access where I can stupidly delete stuff? ALOT.

So, I decided to try Subversion. Now, I won't explain what Subversion is because that is
documented so well in their site as well as good portion of Google search results.

What I want to describe is exactly how I used scripts and programs to create a easy-learning, transparent, version-controlled work environment.

Here are what each quality means:

1. Easy learning: virtually the implementation speaks for itself.
2. Transparent: I don't add another layer of access for version control - the codes are what is seen, the version-control parts are really non-visible and non-intrusive.
3. Version-controlled: I'll just say that equals to less than 10 minute maintaining versions and the other free 30 minutes divulging into more fun stuff(er, activities) @ work.

So let's get down to it!

1. First, follow this link and do EXACTLY what it says. You'll be installing Subversion, Apache Server, and TortoiseSVN(a GUI client for Subversion). Come back when you are done!

....
Good! Okay. Now there can be 2 problems that might occur with this configuration. First, TortoiseSVN uses a different Subversion client than the Subversion installed with Apache. Meaning, Subversion 1.5.X and 1.4.X are NOT compatible!! Just keep it mind that

At the Tigris Subversion site, the package for Windows for Apache Server comes with 1.4.6 of Subversion, and TortoiseSVN is packed with Subversion 1.5.X

.. which would cause problem for those that has this occured.

Eventually the Subversion 1.5.X installing would make this problem go away.

Anyways, you've checked in your codes, and you feel good.
But how should you deal with making a copy on the networked drive?
Sure, checkout another copy over there too. But.. don't you feel like you'd what it to
automate the update process of the copy on the networked drives?

So you won't have to do the couple clickings of the mouse just to get the codes updated?
Well, onto the next step:

2. Synchronizing via Scheduling Task Manager

It's really simple.
Map the networked folder to a drive. For this example, it'll be W:
Make a batch file (XXXX.bat).
Inside the batch file, type:

W:
cd Folder1
cd Folder_THAT_HAS_VERSION_CONTROLLING
svn up

That's it! Save and double click. You'll see that the networked folders are updated. Voila~

But don't you think the black command shell box is a bit intrusive? What doesn't need to know, doesn't need to show.

Make a YYYY.vbs file, inside the folder that has the .bat file for simplicity.

Inside, write:

CreateObject("Wscript.Shell").Run """XXXX.bat""", 0, False

Yep. Double click that, and the same batch file would run, but it would run in the background. No black windows!

3. Scheduling.

Start->Programs->Accessories->System Tools has the 'Schedule Tasks' program. Click it.
You know how to manage adding a new schedule right? If you want extra description, ask, I'll do it.
Add a schedule to run, like every 30 minutes. The program to run is the YYYY.vbs file.


4. Done!

I just implemented this workflow with this project I'm working on, and I am totally psyched about it. Now, I don't need to figure out which file to update, which file to leave, which file to copy over, which to just get some code lines from it... NO! I have Subversion and my scripts to do that for me!!

WOOT

How to Code Newsletters with CSS

This method works in following clients:

Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!

At work, I had to code newsletters given by designers.

I wanted every possible way of not touching their artwork,
as it is my goal to code for perfection.

I read these good tutorials:
http://www.sitepoint.com/article/code-html-email-newsletters/2
http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php


My goal in coding this was to provide readability to as much people as possible over
various methods of reading emails.

That meant for those that can, show the newsletter in its original image form, and
for those who block any and all images, show the text-based version, which would be
gracefully replace the images automatically, by them filtering the images.

Let's think about that a moment.
What kind of methods are there to accomplish replacing images with text? Via presentation
filtering images? I will just lay out all the ones that failed first. Let me know if you want to know
how I tried only to fail. For those reasons I won't go into detail.

1. Position:absolute inside a Position:relative block, layering the image on top of text
2. "margin-top:-width" method to cover the text by pulling up the image by its height
3. Variations on these (image tag before div tage, vice versa) to make them work.

I couldn't do it! I mean if I get it working in YahooMail, GoogleMail wouldn't show anything. Outlook/Hotmail always displayed no images, but they showed the text all right. I only focused on those 4 methods of mail-viewing as I assumed they grasped the major market of mail-viewers.

Well, I tried floating the image.

So here are the basic steps I found out after couple tests.
1. Follow the link and read about the basic setup of a newsletter.

2. Follow and make/copy the code so you get rid of all the style tags and make it still work with inline CSS.

3. Basically you'll be using TABLEs to represent content. In a is where you'd show the sliced up newsletter images. Now that has no info whatsoever, and that same place is where you put the text-based content as well.

4. Inside that :

1. Make a DIV tag, which will be wrapper for your content.
   
   
   
2. Inside it, place your image first. Float it, block it.
   you don't need to give it dimension.
   
   
3. After the IMG tag, Make a
   as same height as your image, and put content in.
   **make sure the text based content won't be taller than the image. It's gonna show gaps if so.
   
   
4. THAT'S IT!!!!!!!!!!!

Here's how it looks:



TESTING:
I use this site to send me some test letters: http://www.mailchimp.com

It's a pretty good site, and they are very informative on things.


EVALUATION:

This method works in following clients:
Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!