The Post-MAMP Blues

[ruffy]

Developed myself a neat little program in Javascript, HTML and CSS. Used the free MAMP as my easy development personal server. Knew little of "servers", and now also know little. Some host hosts me on the internet under a dot.com name. Used the free FileZilla.app to transfer my index.html and files and directories.

But now the site looks weird, probably because my included scripts in javascript and css.

But now I seem to have run into a wall of validation issues, or what-not - and here I hate to think I come to a screech-halt.

How do I tell that host server to serve the stuff up like my pal, the free MAMP, has been doing for me until now?

I develop on my Macbook Pro (10.9).

Can a move up to MAMP PRO help me resolve this discrepancy of different environments that cannot recognize my code anymore?

 

[ocabj]

Why not just use Vagrant + VirtualBox? Both free. Create your AMP environment to your specification (or to duplicate your production server specifications). Save the environment configuration as your template. Then you can destroy and recreate your development environments ad nauseam.

https://www.vagrantup.com/

As far as Javascript issues, all of that is going to be client side parsed, so it's not going to be a server issue (generally speaking). Now if it were PHP, Perl, or other CGI code, then that's were you'd need to figure out what the server is running.

 

[theluggage]

But now the site looks weird, probably because my included scripts in javascript and css.

Hard to tell without more details (post some of your HTML code, or a link to your site). At a guess, you might be using the wrong path in your HTML when you refer to things like images, CSS files and scripts.

Guess 1:
One big gotcha is that Mac filenames ignore upper and lower case, whereas servers often use Linux, which is case sensitive.

That is, on a Mac, "picture.jpg" and "Picture.jpg" are the same file. On a Linux server, they're two different files. So if you have a file called "picture.jpg" and try to display it with <img src="Picture.jpg"> it will work on a Mac but not on a Linux server.

Guess 2:
Often, when you develop a site you put it in a sub-directory so that you can have multiple websites on the go. When you move a website to a dedicated domain on the server, it might go in the top-level "www" or "httpdocs" directory - in that case, make sure that you don't include the sub-directory name when you refer to images, css files etc. in your html.

E.g. if the address you were testing with under MAMP is http://localhost:8888/mysite/index.html, the address of your server is "http://myshinynewserver.com/" and your html loads an image "picture.jpg" stored in the same folder as index.html, you should load the image with a 'relative' URL:
<img src="picture.jpg"> ...which will look in the same folder as the html file.

...and not:

<img src="/mysite/picture.jpg"> or <img src="http://localhost:8888/mysite/picture.jpg">

 

[wrldwzrd89]

Developed myself a neat little program in Javascript, HTML and CSS. Used the free MAMP as my easy development personal server. Knew little of "servers", and now also know little. Some host hosts me on the internet under a dot.com name. Used the free FileZilla.app to transfer my index.html and files and directories.

But now the site looks weird, probably because my included scripts in javascript and css.

But now I seem to have run into a wall of validation issues, or what-not - and here I hate to think I come to a screech-halt.

How do I tell that host server to serve the stuff up like my pal, the free MAMP, has been doing for me until now?

I develop on my Macbook Pro (10.9).

Can a move up to MAMP PRO help me resolve this discrepancy of different environments that cannot recognize my code anymore?

Validation issues may not always be caused by your code. If your host is injecting ads into the site, the validator will see those and parse them too. I'm assuming your site is plain HTML, and not using PHP or some other server-side scripting language. If that's the case, the advice by @theluggage will serve you well.

 

[ruffy]

I have only an index.html in my home directory, and therein 4 folders, namely,
db
js
css
pics
The db directory holds a js file, which is an array.
The js directory hold several js files.
The css directory holds one css file.
And my pics directory is not yet used.
My index.html is this:
You can view my source of this file at toraware.com

(theluggage: Only paths I have are like these. Had moved all files from the directories into the home directory (my root at the remote site) and changed the index.html to access these files in same directory,
eg: FROM <link rel="stylesheet" href="/css/tw.css" type="text/css" />
AND <script src="/js/tw.js" type="text/javascript"></script>
TO <link rel="stylesheet" href="tw.css" type="text/css" />
AND <script src="tw.js" type="text/javascript"></script>
but this of course changed nothing.)

The host server simply does not render my scripts functional. (wrldwzrd89: Not using server-side coding at all.)

(Will meanwhile try to follow ocabj's advice and learn vagrant)

Do appreciate your time in helping me out, you all!

 

[wrldwzrd89]

A-HA! Remove that / at the start of your paths and all will be well.

 

[ruffy]

Not really wrldwzrd89. It was only in desperation that I tried / and thereafter this ./ after having nothing in front of that path's directory. It still doesn't work. Both scripts, CSS and JS, are not recognized.

 

[theluggage]

Not really wrldwzrd89. It was only in desperation that I tried / and thereafter this ./ after having nothing in front of that path's directory. It still doesn't work. Both scripts, CSS and JS, are not recognized.

I have looked at the site and discovered the one crucial bit of info you failed to mention: half of it (including the CSS file) is in Hebrew characters. You have a character encoding problem.

First, try adding:
@charset "utf-8";
...at the start of your .css files.

However, UTF-8 is meant to be the default, and the .css file is showing up completely garbled for me, so unless you really are writing a Chinese translation of the Torah for Greek readers you also need to make sure that your CSS and JS files really are saved as Unicode utf-8 format and not some other international character set. Whatever text editor you are using should have an 'encoding' setting - make sure its set to UTF-8, check your files still make sense and re-save them.

Also, I don't know if this is likely, but check that Filezilla is set to transfer in Binary (Transfer -> Transfer Type -> Binary) and not ASCII.

All a bit beyond the scope of this post (and my available goof-off-from-day-job time) so you should probably do some googling about character encoding, UTF-8, CSS and HTML.

Some info here: http://www.w3schools.com/charsets/ref_html_utf8.asp

Edit: One more thing: I see your web hosting provider is running MS Windows with the IIS web server. With hindsight, I think that, if you're developing on a Mac, you'd be better off with a hosting service running Linux & Apache. I'm not Windows bashing (I do have a totally uniformed and irrational hatred of IIS but that's not important right now) - its just that a Linux/Apache system is a far more familiar environment to MAMP users and if you do need to start tweaking server configs you only have one server (Apache) to learn about. Its not essential (and probably really inconvenient) to switch now, but if you get a chance I'd consider it.

 

[ruffy]

Wow theluggage, thanks!
I set the FileZilla file transfer to binary; Resaved all files in UTF-8;
and also changed the Line Breaks format to CRLF (only because you told me the host server is running Windows [How do you know that?] although my logic here may be off).
... and voila - it works!

Thanks for that. I'm really grateful!

 

[theluggage]

(only because you told me the host server is running Windows [How do you know that?]

Because it wasn't working
No, seriously, by looking at the HTTP headers that come from the server. This can be a useful diagnostic tool. There are various ways of doing this (http://stackoverflow.com/questions/809302/tool-to-view-response-headers) - I use a Google Chrome extension called "HTTP Headers" which puts a big friendly 'H' icon on the toolbar. (I find the developer tools in Chrome have the edge on those in Safari)

One problem persists however - One of my js files remains being "Chinese". Might you have a clue as to why?

No - is your local copy still correct? If so, try creating a new, blank file in UTF-8, copy & paste the contents of your js file in and use the resulting file as a replacement.

 

[ruffy]

Somehow that persistent problem evaporated. Thanks again theluggage. I'll give HTTP Headers a try too. Do you have any opinion on vagrant, by the way? Until now I've used MAMP for development.

 

[theluggage]

Do you have any opinion on vagrant, by the way? Until now I've used MAMP for development.

No - never used it, but it sounds worth checking out if you do a lot of web development work. Again, looks like its using Linux-based servers so its not perfect if you're targetting a windows server as you won't be able to tune your development environment to match the target server. As I said, its not an urgency but personally I'd only use a Windows web host if I was obliged to write a site using MS SQL Server or suchlike.

Personally, I used MacPorts to install up-to-date versions of Apache, PHP etc. directly on my Mac and have various links, scripts and virtual hosts set up so that my Mac environment is pretty close to the servers I run. Its a pain to set up when I change Macs so, frankly, MAMP or Vagrant is probably better...

 

[ruffy]

Thank you all. But I may have left a blemish mark on MAMP that would serve them wrongly because, in fact, I'm really grateful for these people whose product excels and never gave me problems. And now that my problem has been solved, thanks to theluggage, it remains a most useful tool indeed. MAMP shines!