Wednesday, April 15, 2015

Namecheap cpanel php hosting not. working.

So, I recently bought a domain and hosting at namecheap.com, to use for my small php site mentioned in an earlier post. All ready to go, I just hooked up filezilla and uploaded my site I had already made (the second part of the tutorial should come sometime) to public_html/ and hoped for it to work! Unfortunately I got the oh so pretty 500 Internal Server Error.

Internal Server Error  The server encountered an internal error or misconfiguration and was unable to complete your request.  Please contact the server administrator, webmaster@dmdcb.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.  More information about this error may be available in the server error log.  Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
ERROR 500. Btw, who doesn't love the brush in paint?

Man! What's going on? I went straight to searching online, and searched and searched, "setting up php with cpanel", "php namecheap cpanel hosting", adding the "not working" and "500 server error", you get the point.. anyway, tried a bunch of things, with nothing working!
I tried a simple index.html file which worked right off the bat, I of course removed all the fancy stuff and tried a single index.php file with only this line
<?php echo "sup"; ?>
What can go wrong? Well.. that's a silly question! Everything can go wrong. Anyway, after a while I started browsing over the docs at namecheap because at this point I didn't want to bother a live representative for something so silly! Found nothing, so I gave up and talked to a (presumably) person.

After phrasing my question (short but sweet due to character maximums), the first things out of the representative's mouth are:

You have to change the permission of the file to 644.

Bam! I'm like, what now? Windows whuut. Anyway, so after some fiddling, turns out you can do that straight from filezilla by right-clicking your .php files (on the domain side) and going to
file permissions...
and then changing it to 644.

After this it worked for me!


Big thanks to the tech guy at namecheap! (his name was r-something. Riley? maybe)

click file permissions...
step 1

change file permissions to 644
step 2

Tuesday, April 14, 2015

no javascript, no service

js no java no script no service
i was amazed i couldn't find this picture online, so i had to make it, like wat

Me being a complete gimp noob, I think I'll briefly describe my steps in making this glorious (not really) picture.

Okay, so I had this image of the red "nogo" sign in my head from the get go. So I decided to google it to try to find a picture. Now, instead of just googling "not allowed sign png", it's a lot better to go to advanced search, and choosing only files of type png. Just putting the keyword in seems to give you many non-png's.. another thing to look for is to have it transparent! anyway, a nice addition, is that google allows you to filter by license, so going to
search tools -> usage rights -> labeled for reuse with modification
gave me that big red circle free to use! It perhaps goes without saying, but my picture is of course free to use as well!

Next I tried googling the javascript logo, but that didn't give many satisfactory results, so I just typed it in gimp. Gimp handily adds a special layer for each new text you make, so that is exactly as we want it. Only had to move the layer behind the "nogo" sign (top layer in the top position). Played a bit with centering it with the alignment tool.

A pretty basic think is to go to
image -> canvas size
and enlarge it to make room for the bottom text.

Now the picture had a bit too pixelated edges for my taste, so, I tried to lessen that. After some trial and error, this is the final process.
  • I started by following this guide, except using a 2px border edge and gaussian blur with radius 3px instead of the repeated blur.
  • Then using
    filters -> enhance -> unsharp mask
    to sharpen the now blurred borders.

All done? Almost. I had sort of thought about the picture with a white background which this website (currently) doesn't have, so the transparency makes it dark grey. Now I want to change the transparency to white. How can we do that? After a surprisingly long online search, I figured out, it was not more complicated than to simply right click the layer and
remove alpha channel
all done.


js no java no script no service transparent
here's the picture with transparent background

js no javascript no service transparent
and another variation for those java haters


The "nogo" sign: http://pixabay.com/en/prohibited-forbidden-not-allowed-98614/
Aligning text in gimp: http://gimptips.com/articles/aligning-text-gimp
Remove pixelated edges: http://www.battlefieldheroes.com/en/forum/showthread.php?tid=304490
Remove blur: http://www.ehow.com/how_8704991_remove-blur-gimp-refocus.html
This gave me the idea to remove the alpha channel in gimp: http://stackoverflow.com/questions/2322750/replace-transparency-in-png-images-with-white-background

Saturday, April 4, 2015

A small website with two languages using jade, stylus and php ~ part 1 ~

Right. So, I wanted to create my own personal website, where I could have links to other stuff I've done and some minor info about me. Not too intense, small scale. I also like to do things from scratch, I don't know why. Maybe I like the control it gives you. But in no way is this a win-win, it takes more coding, more time, and is probably less secure than for example using a wordpress template or something. Anyway.

This part only includes the legwork, setting everything up, so it's ready to start some html/css/js coding! Here's what the site looks like after this work

the website with an icelandic title
the site with icelandic language,
spectacular I know!

the website with an english title, through the ?lang=en parameter
english, notice the lang parameter
which changes the site title

So I got to know jade in a web programming course, and instantly preferred it over always closing the html blocks, and the layout capabilities (the extends). Similar story about stylus, css without the curly brackets and semi colons, plus of course, for loops for media queries? hell yes. The stylus tutorial I used back then, also had nib, which comes with the handy darken()/lighten() functions (along with some cross browser stuff like adding vendor prefixes).
Now, because of the small scale, I also wanted it to be easy for me to set the site up, so I wanted to be able to use php if I needed any database interaction (or as it turns out, using data from GET calls).

I started with the directory structure.
homepage\
  site\
    static\
      css\
      js\
    templates\
    views\
  styles\

site includes the index.html file, static files (css, javascript, and anything else I need that is public). Templates includes all .jade files and views include all rendered .html files except the index. Styles includes most importantly the style.styl file (which renders to style.css) and additionally nib sourcecode.
I used npm global install for jade and stylus (installed from an earlier project). Then I used the installed nib files and simply copied them to styles/ (here's the link to the nodejs tutorial I used for that project)

First thing's first, I copied some old .jade files I had from an earlier project and deleted everything that included variables and stuff I won't be able/need to use now :P did the same with the style.styl file and placed it in homepage/styles

layout.jade code
layout.jade
contact.jade code
contact.jade
about.jade code
about.jade

index.jade

Notice, that I am linking to a soon to exist style.css included in the static/css folder. Also, I'm just going to mention, the 
meta(name="viewport",content="width=device-width, initial-scale=1") 
line, is something I don't understand why every website doesn't have. It makes it so mobile users don't have to drag and zoom to look at websites, the content kind of adjusts to the phone width (like most websites do).
I'm not using those variable color values, but I probably will, how nice is it to have variables in css? 

Now, as you may have guessed, the .jade and .styl files cannot be displayed directly, and have to be rendered into .html and .css files. When you have a setup like nodejs or django, I'm sure you can do that automatically, but for something like this, I just have to manually compile files when I change them. Here are the basic commands (from cmd) I use to compile the files.
jade site/templates -o "site/views/" -P
stylus styles -o "site/static/css/"
Stationed in the root homepage/ folder, the first command renders all .jade files from site/templates into .html files in site/views. The second command similarly renders all .styl files from styles/ into site/static/css.

Now, I also wanted the index.html to be stationed in site/ and the rest in views/ except I simply wanted not to render layout.jade (it's never displayed on it's own). So, naturally, I turned to the trusty old batch script! It's fairly simple, so I think I'll just show it here and not explain in detail.

compile.bat code (part 1) compiles our .jade and .stylus files into .html and .css
compile.bat
yes you should be sceptical about running .bat files from the internet, but this one's pretty safe

Wasn't there some mention of php? Exactly. I wasn't going to use php until I needed to, and now I did (well, probably not, but it was an option anyway). I searched for how to nicely include two languages on a website (so the user had a "switch to english" option). Found a site that had an idea I liked. Of course you want to avoid hardcoding stuff as much as possible, so the idea to have different translations in two .php files with all same variable names and then include the relevant file depending on the lang parameter (through the ?lang=en) was cool (a database would also have worked).

So now I have a new directory, views/php, which includes en.php and is.php containing the translations. And of course, have to add these includes in layout.jade.

layout.jade code with php language includes
layout.jade
man that's some ugly syntax!

en.php
<?php
  $greeting = utf8_encode("HEY hYE");
  $title = utf8_encode("a website");
?>

is.php
<?php
  $greeting = utf8_encode("Hæ, hvað segirðu?");
  $title = utf8_encode("besta síðan");
?>

Yes, that php within the jade is not pretty at all. I did look up some options for jade and php, and there appear to be some software for that, but it all seemed to complex or not for me, and this worked, so I'll just go with it. It's a small site :P
That syntax does give me a render warning about some spaces, but I hope that isn't severe.
Notice the utf8_decode, this I had to do, along with the utf8_encode in the language.php files. This is so the browser correctly displays the icelandic (unicode) letters, without it, I got question marks and weird symbols.

I'll just quickly mention, I used wamp to run the now .php (instead of .html) site on localhost. I also use dropbox to backup my files, so I wanted to change the root wamp directory to my working folder, and did so successfully. Thank you yfastud! (remember to change it in two locations in the httpd.conf file)

We're almost at the finish line! Has anyone noticed the problem with this setup? Well, not only do I have to manually change the .html extensions on all files to .php, each time I render again, I have to delete the old php files and change the extensions again.. now that won't do!

So the solution?

Yes!

Batch script!!

compile.bat code (part 2) deletes old .php files and renames rendered .html ones
compile.bat

This code is just appended to our old compile.bat so now, we only need one compile command to do all we need on a change. Now, this script took a while to make, I had to search online for a lot of stuff. Basically, what it does is this:

  • deletes all .php files not in the ignore list (without that, it deleted is.php and en.php, but they're not rendered, so bad thing)
  • the for loop on line 30 goes recursively through all folders and each file named something.php. The inner for loop simply loops over our ignores list and sets a flag if we are looking at a file in that list. Then files not flagged are deleted.
  • the last for loop simply renames all .html files to .php

Note, in line 38, 
if !inIgnores! equ 0
and
if !inIgnores! == 0
didn't work, but
if !inIgnores! lss 1
did for some reason.

Here is a sample output after a single compile command
C:\Users\mypath\homepage>compile
executing command: jade site/templates/index.jade -o "site" -P

Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
  rendered site\index.html

executing command: jade site/templates -o "site/views/" -P

Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site\templates\layout.jade"
Warning: missing space before text for line 15 of jade file "site/templates/layout.jade"
  rendered site\views\about.html
  rendered site\views\index.html
  rendered site\views\layout.html
  rendered site\views\contact.html

executing command: stylus styles -o "site/static/css/"
  compiled site\static\css\style.css

deleting old .php files..
files to ignore:
is.php
en.php

C:\Users\mypath\homepage\site\index.php
C:\Users\mypath\homepage\site\views\about.php
C:\Users\mypath\homepage\site\views\contact.php
ignoring file C:\Users\mypath\homepage\site\views\php\en.php
ignoring file C:\Users\mypath\homepage\site\views\php\is.php
files deleted

renaming .html to .php
C:\Users\mypath\homepage\site\index.html
C:\Users\mypath\homepage\site\views\about.html
C:\Users\mypath\homepage\site\views\contact.html
files renamed

C:\Users\mypath\homepage>
All done? Almost. Let's not forget our favicon! (the pikachu icon in the left corner of the tab). That was not more complicated than using a favicon generator and then adding this line to the head of our layout.jade
link(rel="shortcut icon" href="static/img/favicon.ico")
and of course putting our favicon.ico in site/static/img.

So! There you have it, some simple foundations for building a simple site with two spoken (written?) languages using jade, stylus and php. For the next part, there will be some actual content added, but that's just regular html/css/js coding, so maybe I won't even make a post about that.

Fair warning: I actually haven't completed the site, so any problems I run into down the line if any, are not known to me at this point.

Here's a link to a .zip with all the files I used ready to go! (except you have to get nib yourself, or comment out the import nib and global-reset() line from style.styl). The final directory structure
homepage\
  site\
    static\
      css\
      img\
      js\
    templates\
    views\
      php\
  styles\

[EDIT 12. may 2015] the site is up! dmdcb.com! check it out. Hopefully I'll do a post about the making of someday.

The stylus nodejs tutorial: http://www.clock.co.uk/blog/a-simple-website-in-nodejs-with-express-jade-and-stylus
This site gave me the idea for the correct syntax to include the <?php ?> in layout.jadehttp://stackoverflow.com/questions/16404582/writing-pure-html-in-jade
The two language setup: http://www.nairaland.com/430728/how-make-website-two-different
utf8 with php: http://www.sitepoint.com/bringing-unicode-to-php-with-portable-utf8/
Changing root dir in wamp: http://forum.wampserver.com/read.php?2,30847,30860
Loop through and rename file extensions using batch: http://superuser.com/questions/309818/how-to-loop-through-folders-and-rename-extensions-in-a-batch-file
Print newline in script: http://stackoverflow.com/questions/132799/how-can-you-echo-a-newline-in-batch-files
Extract name/extension from variable in .bat: http://stackoverflow.com/questions/15567809/batch-extract-path-and-filename-from-a-variable
Comparison in script: http://www.robvanderwoude.com/ntif.php
Make the favicon!: http://www.favicon.co.uk/

Sunday, March 29, 2015

some minor windows .bat scripting

I think it's really cool that you can make some simple scripts to ease your life. It's just a matter of knowing how to search for it online, maybe code, and thinking of it!

Alright, so I had this friend who didn't have a java compiler, and the internet was shaky, so she didn't want to go for the install. So she asks me if I can simply compile for her, and tell her the error messages. Simple enough! (obviously a bit tedious for her debugging, but hey)

I started by manually typing
>>javac Yosi.java
and just reading out the first error message. Not very efficient.

Next step, I manually typed
>>javac Yosi.java > log.txt
but that just output nothing to log.txt and everything to the console.

So, search engine, and
>>javac Yosi.java > log.txt 2>&1
works like a charm. I don't know exactly what the 2>&1 does, But according to this, it has at least something to do with having two output streams? Anyway.

Then each time I did this, I had to delete the Yosi.java file before I downloaded it again (from my friend), to avoid the Yosi (1).java filenaming.. so I thought, why not put this in a batch script, that would do the compiling and then deleting the file? Simple enough. So my first file just looked like this
#runyosi.bat 
javac Yosi.java > log.txt 2>&1
rm Yosi.java
and worked like a charm. Soon enough, I got some error messages relating to the Yosi.java not existing (when running the script without the file present), so naturally, I updated the script to account for this
#runyosi.bat 
if exist Yosi.java ( 
  javac Yosi.java > log.txt 2>&1
  rm Yosi.java 
)
Great! Indeed. Then soon enough, I got a file with a new name, Rugl.java, so instead of just changing the Yosi.java in my .bat file, I decided to add another if clause. (had to rename the log file, to account for being able to compile them both at the same time)
#runyosi.bat 
if exist Yosi.java (
  javac Yosi.java > log.txt 2>&1
) 

if exist Rugl.java (
  javac Rugl.java > log2.txt 2>&1
  rm Rugl.java 
)
Now, quickly I realized, this could be generalized! And of course (all of this takes a lot longer than simply doing everything manually, but that's just because I have to search for every other thing) that's what I set out to do.

I don't remember my steps exactly, but I had to search for many many things, here is the final file, I'll explain it a bit then.
#runyosi.bat
@echo off
setlocal enabledelayedexpansion

echo starting .java compilation check..
set list=Yosi.java Rugl.java View.java
echo going to test file list: %list%
for %%x in (%list%) do (
  echo checking file %%x ..
  if exist %%x (
    echo compiling file %%x ..
    set name=%%~nx
    javac %%x > log!name!.txt 2>&1
    echo removing file %%x ..
    rm %%x
    echo file %%x removed
  )
)
The @echo off command doesn't turn off the stuff I put in echo commands as you might think, but the automatic echoing of commands, that is, for example, without the @echo off, this code would run like this
#test.bat 
mkdir yeah
rm Foo.java 

>>test
>>mkdir yeah
>>rm Foo.java
that is, I run the test.bat by typing test, and then it echoes what it's doing, similar to if I had typed it myself.

I'll get into the setlocal... later. I added a bunch of simple print status commands like echo starting .java compilation check.. which just print exactly what you'd think. 
set list=Yosi.java Rugl.java View.java
Here, I make a list of all the files I'm going to check for. Notice how there are no spaces between the equal sign and "set list". This is very important, without this, it would not work. The non-space after the equal sign I don't think is needed, but I kept it anyway.
for %%x in (%list%) do ( 
  code
)
I loop over each element in the list variable and execute the code each time on the element x.
set name=%%~nx
javac %%x > log!name!.txt 2>&1
Now things are getting more interesting, alright. So I wanted to be able to output something like "logYosi.txt" and "logRugl.txt" depending on the file name. I started by doing only
javac %%x > log%%x.txt 2>&1
but as you can see, this gives us e.g. logYosi.java.txt. Not quite what we want. Then I set out to find how to eliminate the .java. I figured something like a substring should work, leading me to do something like
javac %%x > log%%x:~0,-5.txt 2>&1
which has the -5 to omit the last 5 letters (the .java). However, I wasn't sure that would work, since the syntax examples had the notation like this
%var:~start,end%. And yes, it indeed did not work. So then I thought of making a variable like thus
set name=%%x
javac %%x > log%name:~0,-5%.txt 2>&1
all done? Not quite. In fact, I thought this worked for some time, because it did output the correct filename when checking the FIRST file in the list. It was not until I tried the second file, realizing then it still named the log file "logYosi.txt". This is because using the set name as is, simply sets it once and then doesn't change it. So google away! And of course, a solution was found! That's where the
setlocal enabledelayedexpansion
line comes from. Apparently you have to enable delayed expansion, whatever that means, to use variables like this, and you have to use !var! instead of %var%. And in searching for that solution, I quite conveniently found that if you do
set name=%%~nx
it sets name as e.g. Yosi. So it takes away the extension. I assume the ~n stands for name, that is getting only the filename, not extension.

Then nothing left but rm %%x where rm stands for remove. I think you can also use del, but I remembered rm worked (rm like in linux).

So there you have it! A simple batch script that compiles a predefined set of java files and outputs compile errors to a log and subsequently deletes the .java files.


Batch .bat windows script shell if syntax: http://www.robvanderwoude.com/ntif.php
Comments in batch scripts: http://www.robvanderwoude.com/comments.php (none of those are in the script right now, but I used them in development of the script, even successfully within the for block)