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 site with icelandic language,
spectacular I know!
|
 |
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 |
 |
| contact.jade |
 |
| 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.
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.
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.
en.php
is.php
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!!
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:
Note, in line 38,
Here is a sample output after a single compile command
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.jade: http://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/
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 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 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 |
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 0and
if !inIgnores! == 0didn't work, but
if !inIgnores! lss 1did 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.jade: http://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/
No comments:
Post a Comment