A recent comment inspired me to make this post about efficiency when coding.
I’ve been wanting to redo my site for awhile now with trendier graphics and today I bit the bullet. Many hours, and x Redbulls later, I feel I have accomplished a fair amount tastier eye-candy.. it almost makes me want to lick the new header graphics. Tell me what you think, or if you have any suggestions/improvements you see shoot me a comment.
I edit single lines of code an awful lot – alt+tab to the browser to view it – make desired changes – edit – re-upload – wash rinse repeat. When you’re doing this for hours on end it’s crucial that your setup facilitates the ease, speed and efficiency of a turtle with a jetpack. This is to keep time wasted as low as possible and prevent excessive going back and forth trying to find files, or uploading your old work over your new work (god only knows… if you’ve made that mistake. before.. you’ll never want to make it again).
Here I will try to explain the most efficient way I have found to navigate the workflow of viewing things that need to be fixed, downloading files to edit, editing, uploading, testing, and so on.
First, download Firebug. I can’t recommend this enough… I use this CONSTANTLY.
Next, I recommend you get EditPlus 3. Depending on how you feel about torrents, you can just download it. This step isn’t essential, you could use notepad (or jokepad) after all if you wanted to. EditPlus infinitely better however because it color-highlights different segments of code depending on what language the file is. This helps you easily spot if you forgot a pesky ; mark somewhere and need to find out where the error is.
Once you have that, go into FileZilla (client) and go to Edit > Settings > File Editing.
Make the appropriate changes according to the image below.
If you don’t have EditPlus, change this to c:\windows\notepad.exe
This is where the meat of this post comes in: how to go back and forth from Firebug, to EditPlus 3, to Filezilla so you can find changes, make changes, and upload changes (in that rotation) as quick as possible.
FIND CHANGES
Now you’re all set up and ready to go to start editing. In the process of making this post actually I found a good example to use. I noticed that the image border of images within a post (when I previewed it) come up as a very ugly 3px border for some reason. I want to change that to a nice 1px blue colored border.
There are several ways to do this.. first of all I obviously need to edit style.css (specifically for me, styleBlue.css). If you’re intermediate level, you won’t need firebug to know you simply adjust border:1px solid #46b0e5; in the img property, but for more advanced things it makes a big difference. I’m going to use it anyway in this example.
Go to Firefox and enable Firebug by hitting the little bug in the bottom right hand corner. When the window pops up, hit Inspect. Mouse around and you will see in real-time firebug highlighting all elements on your page. On the left you will see the XHTML associated with that element, and on the right is the CSS style associated with it.
Here you can see exactly what line of code I need to change. When you change any of the XHTML/CSS code in firebug, it updates it on the page in real time as soon as you type it in. This is a fucking fantastic feature, and it’s how I do the majority of my coding to make it look perfect. If you mess up, just hit F5 to refresh and your page will be restored for you to edit again. Once you have the page looking how you like it (in this case, I ‘inspected’ and then found where I need to change the border. See the bottom right where I changed the border code), It’s time to put it back in the actual CSS file so the change is permanent. As a sidenote, firebug works best for fixing margins and padding so you get to visually see how it will look, and there is no trial and error involved.
MAKE CHANGES & UPLOAD CHANGES
Now browse to the correct directory location within your FTP server, right click the file and hit View/Edit. This step is important; see image below.
After you do this, EditPlus (or jokepad) will open up and you will see your CSS code. If you remember from firebug, you will know exactly where to go to edit (click the previous image): you will see on line 780, for p img { }
Make your desired change, and hit CLOSE on EditPlus. When it asks you if you want to save, hit YES. Now, go back to FileZilla and immediately you will see this message:
Once you hit Yes, the file will reupload to the location you viewed it from. Filezilla takes care of the temp files as well as the location you originally opened it from, and knows where to re-upload it. Even if you change the folder you’re viewing in FTP, it will know the location the file is supposed to go into.
That’s it! Go back to firefox and hit F5 to refresh. You should see the changes you just made show up, all while spending only about 15 seconds. Once you get the hang of this, you can do these steps in order very quickly over and over and start to make massive amounts of edits. I generally work in groups. I’ll edit a few things related to images, remember what they are, change them on the FTP server, go back and edit a few more things related to something else.
There are many other ways to do this, including the FTP setting within Dreamweaver, however I like the light weight of EditPlus, as well as the ability to leave multiple files open (like header.php and style.css), edit both back and forth, and have filezilla keep track and upload them as soon as I hit Save.
That’s it, go get em’ tigre.
