JoomlArt Forums 32,862 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#139667

[Note: This was intended primarily for one of the posters here but I think it should be useful also for others. They are not original, but standard practice that I learned from articles of webdesigners and programmers.]

Quite often, we like to modify files, hopely to improve our site — make them more appealing to visitors — but when we forget to take the necessary precautions, all the modifications may become intractable, so that when something goes awry, we have no choice but to start anew.

I should know, I learned it the hard way. And, truth be told, I still commit the same mistakes, like my own suggestion that I should make a copy of the file “before” and “after” I make specific modifications — as well as the original file.

Like everyone else, more than likely it is caused by the sin called, lazyness. And, sometimes the “optimisim” or perhaps trust that nothing will go awry.

HTML and PHP files

I do not know scripting very well myself, but I have learned a few tricks to answer many (not all) of the questions usually asked in the Forum — based on how to use “Page Source” and understanding basic CSS — one can answer perhaps 70% of layout and CSS related issues.

If you look examine some of the more responses to some questions, care was taken by the responders to detail the process of how one can answer similar questions themselves, once each of us learn the basics of CSS and of course, basic HTML — to understand how the basic layout of a page, as well as the specifications of text and images are defined.

What were not included in the response, are techniques used by many experienced webdesigners — to leave annotations (or comments), like this:

<! — Begin: Modified Logo —>
(script here)
<! — END: Modified Logo —>

or

<! — Date time script removed here —>

the comments bracketed by the “less than” and “greater than” tags, with an “exclamation point” just befrore the “less than” tells the server software not to execute them. They will not appear in your page.

Be careful where you insert anything into a script though because if you accidentally placed any of it that could interfere with a script statement, it may trigger what is called syntax errors.

For example, a statement with a missing period, or comma, or some other simple scripting mark — because they were accidentally deleted, or added — are difficult to detect.

In fact, you will see some of similar annotations in Joomlart template files, because they are meant to guide people, or especially when a complex software or template is developed by a number of people. Even highly integrated files — check for example the Page source of a New York Times page — contain many of these annotations*** .

The same annotations are as critical when editing an existing file. It will you a chance to have landmarks where you made the changes, With sufficient notes, it will be possible at a future date to remove or move, any modification added. During the editing itself, it allows easy removal of the added block of strips, in case the layout gets broken, or an error is triggered by the added script.

Cornelio

N.B.
*** This “in file” modularization, with the addition of “begin: and “end” annotations, allows safe and fast revision of a highly integrated page — by adding or deleting what I call “in file modules”; a technique that is much better than the “modular” approach used in Joomla, as far as page optimization is concerned

3 users say Thank You to cgc0202 for this useful post

1. Phill
2. vietseo
3. joomlapower

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#298595

Thoughtfully written.

Just to add to it here are some tools I find useful when trying to debug mistakes I have made (and I often make quite a few).

Aside from the usual Firebug,

http://getfirebug.com/

Wamp,

http://www.wampserver.com/en/

and the Web Developers Toolkit.

http://chrispederick.com/work/web-developer/

I find it very usefull to be able to compare two copies of a file. This helps when you have made changes as it is very easy to see what you have done. This little tool does all the work for you.

http://www.prestosoft.com/edp_examdiff.asp

1 user says Thank You to Phill for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#298597

As important annotation is needed in php and html files, this is even more important in css files because the very layout of a page as well as the various features of text and images are defined by individual or sets of CSS tags.

Without extensive comments, especially when editing a page, can prove to be very costly, in terms of time and effort:

Header is messed up
http://www.joomlart.com/forums/topic/header-is-messed-up/

it may even force you to start all over again.

Instead of

<! — BEGIN: annotation here —>

<! — END: annotation here —>]

used for PHP and HTML, this is used in CSS files

/* annotation here */

or

//

which tells the server to ignore whatever is within the annotation symbols above.

I have never seen it used in CSS files (unless they remove them for the stable site), I developed my own annotation for CSS files. An example:

#ja-header,
#ja-mainnav,
#ja-subnav,
#ja-container,
#ja-footer {
width: 1000px;
margin: 0 auto;
clear: both;
text-align:left;
} /* orig width: 970px added */

the annotation below, tells me that the original width is 970px

/* orig width: 970px added */

Obviously, an additional “30px” is a huge addition. This means that there must be a change in the other tags to define the columns (in a multicolumn part) that collectively comprise the full width of the page, more specifically, in Teline II, the ones affected would be the “Main Column” and the right column in the Body.

You may develop your own shortcut annotations. You may even include notes on what the specific CSS is intended for. If properly annotated, one can then “Undo” any specific modification, as desired.

Important Note: Because the annotations could become a significant portion of the bulk of the css file. However, to speed up a page, it may be useful, once the site is already stable, that the annotations be stripped (although a copy of the annotated CSS file, must always be kept).

Cornelio

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#298598

most important before editing any file

try to work in a development environment, not on a live server

always make backups of any file you are working in so you can restore your site top the way it was before the edit.

I actually keep every file backup made so I have different restore points

template.php becomes templateORIGINAL.php
template.php becomes template-3-26-09.php

and so on.

This will save you a lot of heartache. When I went to school we were taught to do this, I do not see the newer developers doing this any more. Having multiple backups to restore your files from will save your A#S

1 user says Thank You to mj1256 for this useful post

1. cgc0202

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#298601

<em>@mj1256 120969 wrote:</em><blockquote>most important before editing any file

try to work in a development environment, not on a live server

always make backups of any file you are working in so you can restore your site top the way it was before the edit.

I actually keep every file backup made so I have different restore points

template.php becomes templateORIGINAL.php
template.php becomes template-3-26-09.php

and so on.

This will save you a lot of heartache. When I went to school we were taught to do this, I do not see the newer developers doing this any more. Having multiple backups to restore your files from will save your A#S</blockquote>

Thanks mj1256,

Since I do my modifications gradually, as opposed to full site, I usually just have a separate Sandbox site, identical to and in the same server, as my internded site. I noticed that there are slight differences in the implementation. The tips outlined above applies to the Sandbox or development site.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#298604

<em>@phill luckhurst 120966 wrote:</em><blockquote>Thoughtfully written.

Just to add to it here are some tools I find useful when trying to debug mistakes I have made (and I often make quite a few).

Aside from the usual Firebug,

http://getfirebug.com/

Wamp,

http://www.wampserver.com/en/

and the Web Developers Toolkit.

http://chrispederick.com/work/web-developer/

I find it very usefull to be able to compare two copies of a file. This helps when you have made changes as it is very easy to see what you have done. This little tool does all the work for you.

http://www.prestosoft.com/edp_examdiff.asp</blockquote>

Thanks phill luckhurst,

I wrote this actually, in response to the thread that we both responded to. I planned to link it to the thread, but my comments were ignored, so I changed my mind.

I have been in the guy’s shoes, so I know how difficult it is. At the same time, as MJ wrote to me in private:), there really is a need for us who wanted to create websites to learn some basic skills. If we all do this, we could drastically reduce some of the questions asked.

I appreciate the links provided. In relation to the above, one of my goals, to help beginners would be to create a database of useful links that will help us “learn to learn”, or learn from what more experienced webdesigners and programmers.

It would require collaboration to create such a database, and I invite both of you and whoever reads this, to help develop such a database. I do not consider myself an expert at all, especially when it comes to scripting, so I will be the first beneficiary of such a database.

If both of you have backgrounds in scripting, one project that we are trying to setup also is the “Optimization Project”, right now as it relates to Joomla, and more specifically, to Teline II. I have other ideas in mind, but “Optimization” is the most pressing for me right now. Next, would be security.

Cornelio

[vietseo Friend vietseoJoin date: October 2008Posts: 9Downloads:0Uploads:0 Thanks: 42 Thanked: 1 times in 2 posts]

#298605

I really love the Web developper plugin Firefox (https://addons.mozilla.org/fr/firefox/addon/60) +Firebug

1 user says Thank You to vietseo for this useful post

1. wooohanetworks

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#298610

<em>@vietseo 120977 wrote:</em><blockquote>I really love the Web developper plugin Firefox (https://addons.mozilla.org/fr/firefox/addon/60) +Firebug</blockquote>

Thanks vietseo,

What exactly does it do? or the extent of what it can do.

Bossep stated in earlier posts last year that he used it to compare edited files. I cannot used it though right now because the latest version of Firefox (FF) does not work with my old notebook computer, and the FF version I use is very slow,it practially freezes my computer. Maybe when I buy a new Mac; but I am waiting for the maturation of the Snow Leopard, once it is released later this year.

Cornelio

Edit: Read the text in bold

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#298620

Check it out, takes the same time to ask and goes much faster as waiting for a reply. It is something like Firebug and is also available for IE, so also known as “FireBug for IE”.

[nefar Friend nefarJoin date: December 2007Posts: 434Downloads:0Uploads:2 Thanks: 78 Thanked: 42 times in 1 posts]

#319912

I leave notes in the code like this and sometimes If I have to make a major change I will make a copy of the file to keep a “working” file just in case. So if I edit say an index.php file i’ll make a copy of it and rename it index_original.php and leave it on the server and just upload the one I edited. This has saved me more than once.

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#339054

“I find it very usefull to be able to compare two copies of a file. This helps when you have made changes as it is very easy to see what you have done. This little tool does all the work for you.

http://www.prestosoft.com/edp_examdiff.asp“

Hi,
Is there any Mac compatible tool that will compare two copies of a file.?

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#339057

There are plenty out there. Here is a list, try whichever one works best for you.

http://en.wikipedia.org/wiki/Comparison_of_file_comparison_tools

1 user says Thank You to Phill for this useful post

1. filmlover7

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#339060

<em>@phill luckhurst 173017 wrote:</em><blockquote>There are plenty out there. Here is a list, try whichever one works best for you.

http://en.wikipedia.org/wiki/Comparison_of_file_comparison_tools</blockquote>
Great! Thanks so much.
Have you tested some of the free-ware options? Can you recommend the best and easiest please?

[verecundus Friend verecundusJoin date: April 2010Posts: 1Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#341387

Without a doubt, internal documentation is essential to building a script of any but the most negligible size. I would add that, when making changes to existing scripts, sandboxing is a reliable way to go. Yes, for php and such server-side scripts, this entails putting a server on your own machine, but that can be done in short order with Apache, of course.

1 user says Thank You to verecundus for this useful post

1. filmlover7

[filmlover7 Friend filmlover7Join date: March 2010Posts: 111Downloads:0Uploads:1 Thanks: 41 Thanked: 1 times in 1 posts]

#341389

<em>@verecundus 175856 wrote:</em><blockquote>Without a doubt, internal documentation is essential to building a script of any but the most negligible size. I would add that, when making changes to existing scripts, sandboxing is a reliable way to go. Yes, for php and such server-side scripts, this entails putting a server on your own machine, but that can be done in short order with Apache, of course.</blockquote>
I am ‘sandboxing’ on my local computer, and testing Previews in both Firefox and Safari. Safari is fussier, but people use it and I am trying to identify conflicts. what works in an html site or wordpress, doesn’t always in the Joomla Teline iii template.
But the biggest part of the learning curve with Teline is the mechanics of the Front Page. What controls each area and how does it control it?
Really clear instructions and Videos (preferably with English audio, although I know that could be a challenge), would be so helpful.
It is so important for us to understand what controls each area. It is hard to find these things out, much less master them.
Are JoomlArt folks trying to solve this problem?
Thanks to all of them for their hard work, dedication and creativity.
I am so impressed by the support team… it seems they never sleep. That being said, it would cut down on their work perhaps if there was a “Teline III For Dummies” out there for folks like us.
Cheers,
s. 😉

[Author]

Posts