tag:blogger.com,1999:blog-67218672073054808622024-02-02T17:16:35.986+00:00CodeMeASandwich.comThis is a little blog I'm putting together to share my rantings and ravings(of a madman) over snippets of code and if you have it handy, now would be a good time to get a cold beer.hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comBlogger38125tag:blogger.com,1999:blog-6721867207305480862.post-91919446017918045202014-05-25T10:30:00.000+01:002014-05-25T18:27:27.868+01:00Accessing your VirtualBox localy<style>
.cmdTable{
background-color: black;
color: white;
width: 100%;
font-family: Courier New, Courier, monospace;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjks-3heDkvof3MAnaEDUka3Pke8SxXHNJ4Y2H1gzj0JrNmswznUk8h4N471zNIQPnCLwSjEvHsUhBR1tijDvITNpY0_qH8Zuj4XKOnD1hAecmU-FbDmHwN__oF3burX_hNAuqCW2dkhqlq/s1600/VirtualBoxMount.png" height="159" width="576" />
<p>
Hi there, following on from <a href="http://www.codemeasandwich.com/2014/05/getting-virtualbox-wired.html">VirtualBox networking</a>. The next thing we need is to allow for easy sharing of files between the host and guest. Now we could use something like <a href="http://en.wikipedia.org/wiki/Ftp">FTP</a> or <a href="http://en.wikipedia.org/wiki/Samba_(software)">samba</a>. However VirtualBox provides a built in feature to map a Host folder on to the guest file system. I will be honest its a bit tricky to get working, but hopefully this post should help.
</p>
<span class="fullpost">
So there are 4 steps to do this.
<ol>
<li>Select the folder to share</li>
<li>Install packages needed by VirtualBox</li>
<li>Install VirtualBox's guest tools</li>
<li>Mount the shared folder</li>
</ol>
From the main screen.
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidm92kUlSkeJVpyAS1oLjU8BPxzRD-W5WVOiKxscFh56cMfzCqBiGsrlvcfHHxDT8ghNon4cvC-hsqhmKAp2hqGbDeCnGXMSQawt-rSUXA3z3DmJfoI6oMuNOb-FAdR1ALTza1pZKVNlvC/s1600/mainScreen.png" alt="VirtualBox: mainScreen" style="zoom: 0.6" />
<br/>Open the settings
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijitCYv9DQvDAK6L3PBzcJceLT9UGELECGmZQZnLJVa41G8i0vFvsktF-Li-xBG60tY-r99zuDPsTS17lMS7J3agSJ7bH1SAfTvhiBSh0_rN0hqVnhqjSzBkIlnGcoWHJJ19imMt7oAupE/s1600/Untitled-1.png" alt="Settings/SharedFolder" style="zoom: 0.7"/>
<br/>Click the Add icon. To add a pointer to your local folder that you want to share.
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMsmwRh91YgIOwM1WagUFLJFiHt3029AKb5Lk9aXQhehyphenhyphenMBSj-T5yNgkWDSc9Xz_QWrgb698_hI3W-HaZRG0qhUQXGiy74Of3tgfcJX5_D8XB8joT44avQiE9EJCloXwCDMkYK3vbarrJx/s1600/Untitled-2.png" alt="Add Share" style="zoom: 0.7"/>
<br/>Select your folder, check "Auto-mount" & "Make Permanent"
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRkDVDpj7yVDKZTPam4hQ7fhb0pSsJ3Syv72HYm9ZV0xF8Fd9nkCizC2Jxj6hMgqIQCxny2DFS2sH6OJqUZEdM7m9hNj1ZCkhLqmAlZUFb4IDy1nx0dDsupJKY8RoCr9R-N7BPLYrxiRp/s1600/Untitled-3.png" alt="Add Share + info" style="zoom: 0.7"/>
<br/>
<br/>now fire up your VM
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNH6WDRPXaiYNwdOYCHb1wl7tc3uFosBwVS5TCzOZkKXbwv9fg2SSoIu2s5ESqvqlLSWl4hzRY2e05j4J4wokGx-RMVom9S1GbqftGDQrMJ1FTQHkQIeCy8fBOaGdhg2ekzuYl-5vMvG3a/s1600/Untitled-9.png" style="zoom: 0.8"/>
<br/>Now, if we check are share in the bottom of the window
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEaogfMXQc1IYOIHfQa_7ykd9hU0N9ZaNL2QuAx-ysyV-9JqZTbyTkxLdIBxY14QJ6J3M-v1JWoX5t7YYM0HYPKHBtzLZPeSagifBLgz-k_MiEHkFovRNIpNBCeJyfFH6BiOvrNhzrBBXV/s1600/SharedFoldersSettings.png" />
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8Nknmpv6TXkkismxky62r6HkmbSvIa94ADVxSS3sLSlW-Lq2N3LS1nKyljq0A_4xCyQRe4fpsBXJdrXyxk1HQCq_pF_2cvdXcyXNud1AHFzx13cMokaMa5dhD7nEhAS1i5BosSkDtW0E/s1600/warning.png" />
<br/>
<br/>Ok. Before we install the "Guest tools" we need to install some required packages
<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get update
</span></td>
</tr>
</tbody>
</table>
<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get install make
</span></td>
</tr>
</tbody>
</table>
<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get install gcc
</span></td>
</tr>
</tbody>
</table>
<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get install dkms
</span></td>
</tr>
</tbody>
</table>
<br/>
<br/>Now we need to attach the "Guest Tool" installer image. Its very easy
<br/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRhJ6NNkfZBtQGQWapxgm8auIXIdapXyHx9SI_DE6Y2A8QXXdKUJWYYLXGqf9xL9qgqVjRwBhEbPJGTB8SNcqY-WVzGGKN9zwJ3rx1iLi-xPRKtGdGzJ-iw6niCpcqhiQE3mkee8WVxup/s1600/InsertGurstAdditions.png" style="zoom: 0.8"/>
<br/> After you have click it. You won't get a prompt.
<br/>If you may get something like this
<br/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_b4xmT-7p4pg1FqjcFqYJzXprKe5tVvzXQGrLimaEvttPrANToTmm83D3u25iPEKgNY7ea-GdRhsbJpybGirImumdWcIcpe-BnHAEksAyrCvJqYPxR6NdAbZT-eo0zQ3IYAhxP_5sASo/s1600/Untitled-14.png" />
<br/>Just press "Force Unmount"
<br/>
Now mount the "Guest Tool" image<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo mount /dev/cdrom /mnt
</span></td>
</tr>
</tbody>
</table>
<br/>
Next to to run the installer for Linux<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo /mnt/VBoxLinuxAdditions.run
</span></td>
</tr>
</tbody>
</table>
<br/>
Make the folder we want to map into<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo mkdir /remoteShare
</span></td>
</tr>
</tbody>
</table>
<br/>
This will take the shared folder on the host machine mirror it to the guest folder. *remember you refer to host folder by its alias.<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo mount.vboxsf myShare /remoteShare
</span></td>
</tr>
</tbody>
</table>
<br/>
Now you can move in to the folder
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
cd /remoteShare/
</span></td>
</tr>
</tbody>
</table>
<br/>
If you have added some files locally. you can see them with the 'ls' command
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
ls -l
</span></td>
</tr>
</tbody>
</table>
<br/>
<br/>
All done.<br/>
</span>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-53254029313511906592014-05-24T13:01:00.001+01:002014-05-25T18:24:43.222+01:00Getting VirtualBox Wired<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.cmd{
background-color: black; color: #999999; font-family: Courier New, Courier, monospace;
}
.darkOut{
color:#282828
}
#mainScreenIMG:hover{
width: 786px;
height: 588px;
}
#Adapter2:hover{
width: 657px;
height: 416px;
}
#networkTab:hover{
width: 657px;
height: 416px;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1q_Gi2GTs1yMsMDo60tsQHxWVFhFS32VpqicGDv1KgU_lp7XkpsAfYk8rdM3sTPUzkhyphenhyphenMtRMZm5JwTxQIDC7hhOYTF23W7huCKWmTrYGb6v2301Wrb9VlUi6UXxXrTmxCZultKhAUCm4K/s1600/GettingVirtualBoxWired.png" height="159" width="576" />
<p>
Hello boys & girls. One think people my not know about me, is I love using VirtualBox as my test environment. In a nutshell: It allows you to simulate your production environment for testing your code. All without too much hassle.</p><span class="fullpost">
<p>So, in this post I'm going to go over a simple thing you will need, and that is to give your VM access to the Internet + network access to talk to your host.
</p>
<p>
let's dive in. For this example I'm running Windows 7 as the host and Ubuntu 14 as the guest. I'm not going to cover installing Ubuntu in this guide, but I'm sure you can find some help <a href="https://duckduckgo.com/?q=installing+ubuntu+on+VirtualBox">DuckDuckGo: Installing ubuntu on VirtualBox</a> ^_^
</p>
<p>Before starting the VM we will need to make a small change to the VM's settings. Because of VirtualBox internal architecture it requires two network cards in order to connect to the WAN(internet) and also connect to the host. As it will be convenient to be able to do both at the same time.. we have to do the following.</p> Open VirtualBox
<div class="separator" style="clear: both; text-align: center;"><img id="mainScreenIMG" alt="VirtualBox's mainScreen" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidm92kUlSkeJVpyAS1oLjU8BPxzRD-W5WVOiKxscFh56cMfzCqBiGsrlvcfHHxDT8ghNon4cvC-hsqhmKAp2hqGbDeCnGXMSQawt-rSUXA3z3DmJfoI6oMuNOb-FAdR1ALTza1pZKVNlvC/s1600/mainScreen.png" height="239" width="320"/></div>
From the main screen to go "Settings"
<div class="separator" style="clear: both; text-align: center;"><img id="networkTab" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9TyvdDEw58G_4-V_H-HFMhSDKbWLsMg1s4Gw_PG6THPyJr3lG_4AAzRpCNqpl0l5c1XMg8cBesU45cYu1q6L3XMekPbbMFr7Gjx98vM8dGkOtVUK06NBIou3wgO5syNn4dU_x900Y4xT/s1600/networkTab.png" height="202" width="320"/></div>
Now open the 2nd adapter tab. <br/>Check "Enable Network Adapter" and select "Bridged Adapter" as the "Attached to"<br/>
<div class="separator" style="clear: both; text-align: center;"><img border="0" id="Adapter2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUSwDgdBn_UnPU1LsNM-SebVMlMiyCwugaZlQKAmyZc-Bfir-R_zDylOQyLmRNiJIIaobgBJz9codiTcZXI_BVRqza62L7CN8v0DuoNFM9-Mbv40aGj4PIF0GwfYX2rcd5HOC3vbhwsTx/s1600/Adapter2.png" height="202" width="320"/></div>
<br/>
Now we can fire-up your VM.
<!--table border="0" class="cmd" style="width: 100%"><tbody>
<tr>
<td>Ubuntu 14.04 LTS CodeMeASandwich tty1
<br /><br />
CodeMeASandwich login: brian
<br />
Password:
</td></tr>
</tbody></table>
<br />
<table border="0" class="cmd" style="width: 100%px;"><tbody>
<tr>
<td><span class="darkOut">Welcome to Ubuntu 14.04 LTS (GNU/Linux 3.13.0*24*generic x86_64)
<br /><br />
* Documentation: https://help.ubuntu.com/
<br /><br />
System information as of Fri May 23 10 49 34 CEST 2014
<br />
<table border="0">
<tbody>
<tr valign="top">
<td>System load:<br />
Usage of /:<br />
Memory usage:<br />
Swap usage:
</td>
<td>0.0<br />
14.5% of 6.99GB<br />
11%<br />
0%
</td>
<td>Processes:<br />
Users logged in:<br />
IP address for eth0:
</td>
<td>82<br />
0<br />
10.0.2.15
</td>
</tr>
</tbody></table>
<br /><br />
Graph this data and manage this system at:
<br />
https://landscape.canonical.com/
<br /><br />
43 packages can be updated.
<br />
14 updates are security updates.
<br /><br /><br />
The programs included with the Ubuntu system are free software;
<br />
the exact distribution terms for each program are described in the individual files in /usr/share/doc/*/copyright.
<br /><br />
Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by applicable law.
<br /><br /></span>
brian@CodeMeASandwich:~$
</td>
</tr>
</tbody></table-->
<br/>
First, let's take a look at what network interfaces are already set up. <br/>Enter the <b>ifconfig</b> command
<br/>
<br/>
<table border="0" class="cmd" style="width: 100%"><tbody>
<tr>
<td colspan="2">brian@CodeMeASandwich:$ <span style="color:white">ifconfig</span>
<br/></td>
</tr>
<tr>
<td valign="top">eth0</td>
<td>Link encap:Ethernet HWaddr 08:00:27:fa:##:##
<br/>inet addr:10.0.2.15 Bcast:10.0.2.255 Mask 255.255.255.0
<br/>inet6 addr: f680::a00:27ff:fefa:46e8/64 Scope:Link
<br/>UP BROADCAST RUNNING MULTICAST MTU:1500 Metric 1
<br/>RX packets:26 errors:0 dropped:0 0uerruns:0 frame:0
<br/>TX packets:34 errors:0 dropped:0 0uerruns:0 carrier:0
<br/>collisions:0 txqueuelen:1000
<br/>RX bytes:3483 (3.4 KB) TX bytes:3398 (3.3 KB)
<br/>
<br/>
</td>
</tr>
<tr valign="top"><td>lo</td>
<td> Link encap:Local Loopback
<br/>inet addr:127.0.0.1 Mask Z55.0.0.0
<br/>inet6 addr: ::1/128 Scope:Host
<br/>UP LOOPBACK RUNNING MTU 65536 Metric 1
<br/>RX packets 0 errors:0 dropped:0 0uerruns:0 frame:0
<br/>TX packets 0 errors:0 dropped:0 0uerruns:0 carrier:0
<br/>collisions: 0 txqueuelen:0
<br/>RX byte$:0 (0.0 B) TX bytes:0 (0.0 B)</td>
</tr></tbody>
</table>
<br/>
<br/>
Here we see that there are two interfaces. <b>eht0</b> is giving access to the WAN.. and <b>lo</b> is to allow the OS(here Ubuntu) to send messages to itself, because that's just what computers want to do sometimes.
<br/>
<br/>
Now we need to update the network interface file. To let the OS know there a new network available.
<br/>
<br/>
<table border="0" class="cmd" style="width: 100%"><tbody>
<tr><td>
brian@CodeMeASandwich:~$ <span style="color:white">sudo vim /etc/network/interfaces</span>
<br/>[sudo] password for brian:
</td></tr>
</tbody>
</table>
<br/>
Go to the bottom of the file and add the two lines:<br/><b>
auto eth1<br/>
iface eth1 inet dhcp<br/></b>
<br/>
<table border="0" class="cmd" style="width: 100%"><tbody>
<tr>
<td>
<br/><span class="darkOut"># This file describes the network interfaces available on your system
<br/># and how to activate them. For more information, see interfaces(5).
<br/>
<br/># The loopbaek network interfaee</span>
<br/>auto lo
<br/>iface lo inet loopback
<br/>
<br/><span class="darkOut"># The primary network interface</span>
<br/>auto eth0
<br/>iface eth0 inet dhcp
<br/><span style="color:white">
<br/>auto eth1
<br/>iface eth1 inet dhcp
</span>
</td>
</tr>
</tbody>
</table>
<br/>
let's save the file. Press Ctrl-C to switch out of insert mode. then type "<b>wq</b>" *wright & quit
<br/>
<br/>
<table border="0" class="cmd" style="width: 100%"><tbody>
<tr><td>
:<span style="color:white">wq</span>
</td></tr>
</tbody>
</table>
<br/>
Now restart the network service with "<b>sudo ifdown eth1 && sudo ifup eth1</b>"<br/>
<br/>
<table border="0" class="cmd" style="width: 100%"><tbody>
<tr><td>
brian@CodeMeASandwich:~$ <span style="color:white">sudo ifdown eth1 && sudo ifup eth1</span>
<br/>
ifdown: interface ethl not configured
Internet Systems Consortium <span class="darkOut">DHCP Client 4.2.4
Copyright 2004-2012 Internet Systems Consortium.
fill rights reserved.
For info, please visit https://www.isc.org/software/dhcp/</span>
<br/>
<br/>
<table border="0">
<tbody>
<tr valign="top">
<td>Listening on<br />
Sending on<br />
Sending on
</td>
<td>LPF/ethl/08:00:27:98:##:##<br />
LPF/ethl/08:00:27:98:##:##<br />
Socket/fallback
</td>
</tr>
</tbody></table>
DHCPREQUEST of 192.168.2.196 on ethl to 255.255.255.255 port 67 (xid=0x4596####)
DHCPHCK of 192.168.2.196 from 192.168.2.1
bound to 192.168.2.196 -- renewal in 33968 seconds.
</td></tr>
</tbody>
</table>
<br/>
This should be quick. Lets see if our new interface was added.<br/>
<br/>
<table border="0" class="cmd"><tbody>
<tr>
<td colspan="2">brian@CodeMeASandwich:$ <span style="color:white">ifconfig</span>
<br/></td>
</tr>
<tr class="darkOut">
<td valign="top">eth0</td>
<td>Link encap:Ethernet HWaddr 08:00:27:fa:##:##
<br/>inet addr:10.0.2.15 Bcast:10.0.2.255 Mask 255.255.255.0
<br/>inet6 addr: f680::a00:27ff:fefa:46e8/64 Scope:Link
<br/>UP BROADCAST RUNNING MULTICAST MTU:1500 Metric 1
<br/>RX packets:26 errors:0 dropped:0 0uerruns:0 frame:0
<br/>TX packets:34 errors:0 dropped:0 0uerruns:0 carrier:0
<br/>collisions:0 txqueuelen:1000
<br/>RX bytes:3483 (3.4 KB) TX bytes:3398 (3.3 KB)
<br/>
<br/></td>
</tr>
<tr>
<td valign="top">ethl</td>
<td>Link encap:Ethernet HWaddr 08:00:27:fa:##:##
<br/>inet addr:192.168.2.196 Bcast:192.168.2.255 Mask 255.255.255.0
<br/>inet6 addr: fe80::a00:27ff:fe98:c3bc/64 Scope:Link
<br/>UP BROADCAST RUNNING MULTICAST MTU:1500 Metric 1
<br/>RX packets:26 errors:0 dropped:0 0uerruns:0 frame:0
<br/>TX packets:34 errors:0 dropped:0 0uerruns:0 carrier:0
<br/>collisions:0 txqueuelen:1000
<br/>RX bytes:251203 (251.2 KB) TX bytes:1462 (1.4 KB)
<br/>
<br/>
</td>
</tr>
<tr valign="top" class="darkOut">
<td>lo</td>
<td> Link encap:Local Loopback
<br/>inet addr:127.0.0.1 Mask 255.0.0.0
<br/>inet6 addr: ::1/128 Scope:Host
<br/>UP LOOPBACK RUNNING MTU 65536 Metric 1
<br/>RX packets 0 errors:0 dropped:0 0uerruns:0 frame:0
<br/>TX packets 0 errors:0 dropped:0 0uerruns:0 carrier:0
<br/>collisions: 0 txqueuelen:0
<br/>RX byte$:0 (0.0 B) TX bytes:0 (0.0 B)</td>
</tr></tbody>
</table>
<br/>
And that's it! Do. You can now connect to your guest OS locally & it will also have access to the web.<br/>
<br/></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-32107717963342418952013-11-21T20:28:00.000+00:002014-05-25T20:48:30.539+01:00Promises In CoffeeScript<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipx5QYALQHftIg5up3vQycqGO6Ujp9U7BGir4Jjl3LkluXDbIgWHMygEgL-FD0FEYM17Ch9k3XQfz5wLXaBodQI6I5L0szoCvGZbJnrwabA6to7xvVegUzYn7MKXL0XYw8UAgW-Zm6s7HA/s1600/PromisesInCoffeeScript.png" alt="Banner: Promises In CoffeeScript" />
<p>
Previously we discussed the benefits of the <a href="http://www.codemeasandwich.com/2013/09/comb-library-logging-1-of-2.html">‘Comb’ library</a>. We will add to our knowledge here, by discussing ‘Promises’. We are not speaking of promises that are too good to be true! Rather that of a client system willing to fulfill or resolve an operation asynchronously, hence a ‘Promise’. We want to use ‘Promises’, to wrap our code sections, so that we don’t cause blocking in error handling. You will find that your code is also cleaner.</p>
<span class="fullpost"><p>
In these examples we will be using CoffeeScript, so we can get a flavor of that emerging language that compiles into JavaScript as well. You will also need to install <a href="http://requirejs.org/">require.js</a> through the <a href="https://www.npmjs.org/">NPM</a>. One tricky thing to remember about CS (CoffeeScript) is that even a tab or a space can cause the compiler to resolve something differently.
Here ‘Promise’ has three supported methods that we will cover: errback(), callback(), and resolve().<p>
<pre class="brush: coffee">
# initialize the values
fs = require("fs")
comb = require("comb")
# Here we create function to read a file
readFile = (file, encoding) ->
# Let’s wrap it with a ‘Promise’
ret = new comb.Promise()
fs.readFile(file, encoding or "utf8", (err) ->
if (err)
# Here is the fail codepath, something was wrong
ret.errback(err)
else
# Success! Resolve the promise
ret.callback(comb.argsToArray(arguments, 1)))
# Return the promise object.
ret.promise()
# Creates an errorHandler function, that writes to a log.
errorHandler = ->
console.log("Error handler")
</pre>
<p>
How do we use this? The beauty of ‘Promises’, is that you separate the success and fail code paths with a ‘then’ function. See this simple call:
</p>
<pre class="brush: coffee">
readFile("myFile.txt").then ((text) ->
console.log(text)
), errorHandler
</pre><p>Now let’s make this even easier: If we use the ‘resolve’ method, we do not have to handle the success and fail code paths separately. Now the ‘callback’ and ‘errback’ methods, are wrapped in a single ‘resolve’ method.</p>
<pre class="brush: coffee">
fs = require("fs")
comb = require("comb")
readFile = (file, encoding) ->
ret = new comb.Promise()
fs.readFile(file, encoding or "utf8", ret.resolve.bind(ret))
# Return the promise object.
ret.promise()
...
...
</pre><p>
This version of the ‘readFile’ function does the exact same work as the above, but with a lot cleaner code! Now let’s build on this by adding a ‘listener’. Your purpose, is to listen for the resolution/fulfillment of a ‘promise’. We are looking for the task to be completed, or a failure. Using the ‘readFile’ function from above, the following is listening for a successful: You guessed it, a successful file-read.</p>
<pre class="brush: coffee">
readFilePromise = readFile("myFile.txt")
# ‘then’, Remember carries ‘callback’ and ‘errback’, or success and failure.
readFilePromise.then ((file) ->
console.log("file")
), (err) ->
console.log(err)
# Here we are ignoring the errback, it is optional.
readFilePromise.then (file) ->
console.log(file)
</pre><p>
Now let’s perform an action on the file after we listen for it to be read. In this sample, let’s convert the contents to uppercase. We can pass the new ‘Promise’ into the ‘Then’ method.</p>
<pre class="brush: coffee">
readAndConvertToUppercase = (file, encoding) ->
ret = new comb.Promise()
readFile(file).then ((data) ->
ret.callback(data.toUpperCase())
),
# This is the errback, but here we can just pass, ‘ret’
ret
ret.promise()
readAndConvertToUppercase("myFile.txt").then ((file) ->
console.log("file")
), (err) ->
console.log(err)
</pre><p>
Enjoy the full sample:</p>
<pre class="brush: coffee">
# initialize the values
fs = require("fs")
comb = require("comb")
# read a file
readFile = (file, encoding) ->
ret = new comb.Promise()
fs.readFile(file, encoding or "utf8", ret.resolve.bind(ret))
ret.promise()
readAndConvertToUppercase = (file, encoding) ->
ret = new comb.Promise()
readFile(file).then ((data) ->
ret.callback(data.toUpperCase())
),
# This is the errback, but here we can just pass, ‘ret’
ret
ret.promise()
readAndConvertToUppercase("myFile.txt").then ((file) ->
console.log("file")
), (err) ->
console.log(err)
</pre>
</span>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-37828942910511024712013-11-04T10:46:00.000+00:002013-12-18T15:23:45.916+00:00Web Workers<div dir="ltr" style="text-align: left;" trbidi="on">
<img alt="HTML 5: Web Worker Basics" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXwQBMTkGlHP1eyfGo3MrSfWOIbmelFZuzl1Eh0eroxGqCyLIcyM-0IGfLtf_APXnxZnx4I7l4gkNNU2VfXbHo1ZnYYz71MFUUOQifmmwBqNpEPHBWTjw8DF7QGPj-puWnuUnXaOFj1M_/s1600/Bitmap+(CMYK)+SMALL.png" style="margin-left: auto; margin-right: auto;" title="Look at me getting fancy with my banners" />
<br />
<br />
So when working with javascript you may have not realised that it is single threaded.... So Brian, what's the big deal?<br />
<br />
To explain a little; For those new to threads. You can simply think of a thread as the normal flow of execution you have been working with. <u>You start, call a function, do some work and so on</u>. Its all very step by step.<br />
So threads are the same basic idea, only they can talk to each other allowing for more work to be done in parallel.<br />
<br />
<b>The program starts execution as normal and then start sub-tasks in threads that will go off and do there work, then can give back the results of there labor.</b> This is how people leverage the strength of multi-core computers.<br />
However it will take a little shift in how you think of problems. ; )<br />
<br />
In this post Im going to look at 3 areas<br />
<ol style="text-align: left;">
<li>How you setup and use a web worker</li>
<li>Inlineing your web worker into one file</li>
<li>Web workers in older browsers that don't support them</li>
</ol><br/><span class="fullpost">
<h2 style="text-align: left;">
1. How you setup and use a web worker</h2>
Lets get into the meat and bones of an example:<br />
<br />
<b>index.html</b><br />
<pre class="brush: html">
< !DOCTYPE html>
< html>
< head>
<meta charset="utf-8" />
</ head>
<script src="source.js">
</script>
< body>
<div id=" jsOutput"></div>
</ body>
</ html>
</pre>
<br />
<b>source.js</b><br />
<pre class="brush: javascript">
//load the WebWorker file
var worker = new Worker('webworker1.js');
//create the function to handle the response
worker.onmessage = function(response) {
document.getElementById("jsOutput").innerHTML = "Received: " + response.data;
}
// Start the worker.
worker.postMessage(''); // *Note: You must pass a string or Json object
</pre>
<br />
<b>webworker1.js</b><br />
<pre class="brush: javascript">
self.onmessage = function(event) {
self.postMessage('Message from WebWorker');
};
</pre>
<br/><b><i><center>"Received: Message from WebWorker"</center></i></b><br/>
<b>That it. Very easy.</b> Just put the code you what to run into another js file and off you go.
<br/>
<br/>
<br/>
You should be aware that Due to their multi-threaded behavior, web workers only has access to a subset of JavaScript's features:
<ul>
<li>
The
<code>navigator</code>
object
</li>
<li>
The
<code>location</code>
object (read-only)
</li>
<li>
<code>XMLHttpRequest</code>
</li>
<li>
<code>setTimeout()/clearTimeout()</code>
and
<code>setInterval()/clearInterval()</code>
</li>
<li>
The Application Cache
</li>
<li>
Importing external scripts using the
<code>importScripts()</code>
method
</li>
<li>
Spawng other web workers
</li>
</ul>
<p>Workers do NOT have access to:</p>
<ul>
<li>The DOM (it's not thread-safe)</li>
<li>
The
<code>window</code>
object
</li>
<li>
The
<code>document</code>
object
</li>
<li>
The
<code>parent</code>
object
</li>
</ul>
<br />
<hr />
<br/>
<h2 style="text-align: left;">2. Inlineing your web worker into one file</h2>
<br />let's take the above and combin it all into one file
<br />
<br />
<b>index.html</b>
<br />
<br />
The first thing we need is to move <b>webworker1.js</b> inside a script element on our page but we must add an <b>id</b> to the element so we can reference it. I used the same name was I used when it was in a file "<b>webworker1</b>"
<pre class="brush: javascript">
<script id="webworker1" type="javascript/worker">
self.onmessage = function(event) {
self.postMessage('Message from WebWorker');
};
</script></pre>
<br/>Now we want to swap out the include with the contents of the source.js
<br/>
<pre class="brush: javascript">
<script src="source.js"></script>
</pre><b>becomes</b>
<pre class="brush: javascript">
<script>
var blob = new Blob([document.querySelector('#webworker1').textContent]);
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(response) {
document.getElementById("jsOutput").innerHTML = "Received: " + response.data;
}
worker.postMessage(''); // Start the worker.
</script>
</pre>
<br/>
You should note the first two line.<br/>
<br/>
<b><code>var blob = new Blob([document.querySelector('#webworker1').textContent]);</code></b><br/>
This grates a reference to are code block that we want our web worker to work on.<br/>
<br/>
<b><code>var worker = new Worker(window.URL.createObjectURL(blob));</code></b><br/>
and here we create our web worker based on that code block.<br/>
<br/>
<hr />
<h2 style="text-align: left;">3. Web workers in older browsers</h2>
<br />
For this you can using <b><a href="https://github.com/typpo/web-workers-fallback">web-workers-fallback</a></b> This library provides basic compatibility for the html5 web worker api in browsers that don't support it. <br/>To use it, you only need include <a href="https://raw.github.com/typpo/web-workers-fallback/master/Worker.js">Worker.js</a>, and everything should work out of the box. <br/><br/>*As usual you should read the Limitations section and test in a browser that doesn't support web workers ;)
<br />
<br /><hr />
For more information on <b>web workers</b> see the great Mozilla Developer Network resource: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a><br />
</span></div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-79061255184212272512013-10-25T16:58:00.000+01:002014-03-28T11:34:50.544+00:00Welcome to Threejs<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="renderCanvas2">
</div>
<br />
Continuing with my research into <a href="http://get.webgl.org/">WebGL</a> libraries this week I was looking at <a href="http://threejs.org/">ThreeJs</a> and recreating the same sample as in my previous example with <a href="http://www.codemeasandwich.com/2013/10/welcome-to-babylonjs.html">BabylonJs</a>.
<br /><br />
With Threejs there are 2 ways to create your viewport.<br />
<span class="fullpost"><ol>
<li>Is to dynamically create a canvas element, as above. This is how you can add you rendered seen in to a webpage as normal. <br />*the size are there cameras is in pixels in the javascript source</li>
<li>To feel the entire page</li>
</ol>
In this example I will be using the first approach, as the majority of examples you will find online references the fullscreen mode.
To please the viewport on to the page, we first need a <b>div</b> where we want our viewport placed<br />
<br />
<pre class="brush: html"><div id="canvasView">
</div>
</pre>
<br />
Download the compressed version of the library at <a href="http://threejs.org/build/three.min.js">http://threejs.org/build/three.min.js</a> and put it in the same folder as your files.
<br /><br />
<pre class="brush: html">
<script src="three.min.js"></script>
<script src="myCode.js"></script>
</pre>
<br />
To help keep our code clean you will now create a "myCode.js". I hope you noticed that this file is the one referenced in the above section.
<br />
<br />
In side "myCode.js" we will add the following:
<br />
As we are rendering to a element on the page we need to define the width and height. These sizes are used to in the example to match the camera perspective with the rendered viewport.
<br /><br />
<pre class="brush: javascript">var canvasWidth = 578, canvasHeight = 200;
var camera = new THREE.PerspectiveCamera(90, canvasWidth / canvasHeight, 0.1, 1000);
camera.position.z = 3;
</pre>
<!--pre class="brush: javascript">
//var camWidth = canvasWidth/40, camHeight = canvasHeight/40;
//var camera = new THREE.OrthographicCamera( camWidth / - 2, camWidth / 2, camHeight / 2, camHeight / - 2, 1, 1000 );
</pre-->
<br />
Now we create a render and attach it to the viewport.
<br />
<br />
<pre class="brush: javascript">var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(canvasWidth , canvasHeight);
var viewport= document.getElementById( 'renderCanvas' );
viewport.appendChild( renderer.domElement );
</pre>
<br />
Now we create our 2 world objects
<br />
<br />
<pre class="brush: javascript">//THREE.TorusGeometry(radius, tube, segmentsR, segmentsT)
var torus = new THREE.TorusGeometry( 1.5, 0.35, 16, 32 );
// THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight)
var sphere = new THREE.SphereGeometry( 0.3, 16, 16 );
</pre>
<br />
We need to define a material to apply to our objects. <a href="http://en.wikipedia.org/wiki/Phong_shading">Phong shading</a> will give a nice shine.
<br />
<br />
<pre class="brush: javascript">var material = new THREE.MeshPhongMaterial({
// light
specular: '#ffffff',
// intermediate
color: '#ffffff',
// dark
emissive: '#000000',
shininess: 100
});
var torusMesh = new THREE.Mesh(torus, material);
var sphereMesh = new THREE.Mesh(sphere, material);
</pre>
<br />
Create a light sources in order to give the correct light and dark shading on the objects
<br />
<br />
<pre class="brush: javascript">var directionalLight = new THREE.DirectionalLight( 0xffffff, 1);
directionalLight.position.set( 0, 10, 10 );
</pre>
<br />
let's create our scene and add the element to it.
<br />
<br />
<pre class="brush: javascript"> var scene = new THREE.Scene();
scene.add(torusMesh);
scene.add(sphereMesh);
scene.add( directionalLight );
</pre>
<br />
To add a bit of flavour let's animate the torus. This will be in the function that will be run every frame.
<br />
<br />
<pre class="brush: javascript"> var render = function () {
requestAnimationFrame(render);
torusMesh.rotation.x += 0.01;
torusMesh.rotation.y += 0.015;
renderer.render(scene, camera);
};
</pre>
<br />
let's start the animation.
<br />
<br />
<pre class="brush: javascript">render();
</pre>
<br />
There you go done and dusted.<br />If you have any thoughts or feedback, let me know by leaving me a comment.
</span>
<script src="http://threejs.org/build/three.min.js"></script>
<script>
function t(){
var container = document.getElementById( 'renderCanvas2' );
var canvasWidth = 578, canvasHeight = 200
var camWidth = canvasWidth/40, camHeight = canvasHeight/40;
var scene = new THREE.Scene();
// var camera = new THREE.PerspectiveCamera(90, canvasWidth / canvasHeight, 0.1, 100);
var camera = new THREE.OrthographicCamera( camWidth / - 2, camWidth / 2, camHeight / 2, camHeight / - 2, 1, 1000 );
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(canvasWidth , canvasHeight);
container.appendChild( renderer.domElement );
//radius, tube, segmentsR, segmentsT, arc
var torus = new THREE.TorusGeometry( 1.5, 0.35, 16, 32 );
// radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength
var sphere = new THREE.SphereGeometry( 0.3, 16, 16 );
//new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({
color: 0x00ffff
});
material = new THREE.MeshPhongMaterial({
// light
specular: '#ffffff',
// intermediate
color: '#ffffff',
// dark
emissive: '#000000',
shininess: 100
});
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 0, 10, 10 );//
var torusMesh = new THREE.Mesh(torus, material);
var sphereMesh = new THREE.Mesh(sphere, material);
scene.add(torusMesh);
scene.add(sphereMesh);
scene.add( directionalLight );
camera.position.z = 3;
var render = function () {
requestAnimationFrame(render);
torusMesh.rotation.x += 0.01;
torusMesh.rotation.y += 0.015;
renderer.render(scene, camera);
};
render();
};
t();
</script>
</div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-84002131621201187732013-10-13T18:06:00.000+01:002013-12-09T14:33:12.151+00:00Welcome to Babylonjs<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#renderCanvas {
width: 100%;
height: 200px;
}
</style>
<canvas id="renderCanvas"></canvas>
Welcome to the new world of 3D in your browser! <br/>Today I'm going to show you just how easy it can be with a help from <a href="http://www.babylonjs.com/">BabylonJs</a>. BabylonJs is a high level wrapper on top of <a href="http://get.webgl.org/">WebGL</a>. With libraries like this, it is actually very easy to make things like the above scene.<br/>
<br/>
The first thing we will need is some <b>css</b> for where we want the rendered image to be drawn.<br/>
<br/><span class="fullpost">
<pre class="brush: css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#canvasView{
width: 100%;
height: 100%;
}
</pre><br/>
Now lets put the <b>canvas</b> element inside the <b>body</b>. Canvas Is a new element introduced in HTML5, specifically for rendering graphics programmatically. So This is our view port ^_^<br/>
<br/>
<pre class="brush: html">
<canvas id="canvasView"></canvas>
</pre>
<br/>
Download the compressed version of the library at <a href="http://www.babylonjs.com/babylon.js">http://www.babylonjs.com/babylon.js</a> and put it in the same folder as your files.
<br/><br/>
<pre class="brush: html">
<script src="babylon.js"></script>
<script src="myCode.js"></script>
</pre>
<br/>
To help keep our code clean you will now create a "myCode.js". I hope you noticed that this file is the one referenced in the above section.
<br/>
<br/>
In side "myCode.js" we will add the following:
<br/>
<br/>
<pre class="brush: javascript">
function babylon(){
//get a reference to the canvas element on the page
var canvas = document.getElementById("canvasView");
//create an instance of the rendering engine
var engine = new BABYLON.Engine(canvas, true);
//create an instance of a Scene.
//This is used to house our camera, lights and shapes
var scene = new BABYLON.Scene(engine);
</pre><br/>
Now that we have a Scene, we need to specify a camera
<br/>
<br/>
<pre class="brush: javascript">
//a Camera, so the renderer knows what to show us.
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
</pre>
<br/>
Lets add some shapes and maybe a light.
<br/>
<br/>
<pre class="brush: javascript">
//Parameters are: name, number of segments (highly detailed or not), size, scene to attach the mesh. Beware to adapt the number of segments to the size of your mesh ;)
var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10.0, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 20, scene, false);
//a light source to make things look pretty
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
</pre>
<br/>
<br/>
Now here's the trick to getting the shapes to move. We will set a function to be called just before each new frame is drawn to the screen. it's pretty self explanatory ;)
<br/>
<br/>
<pre class="brush: javascript">
var twist = 0;
scene.beforeRender = function() {
torus.rotation.z = twist;
torus.rotation.x = twist;
torus.rotation.y = twist;
twist += 0.01;
};
</pre>
<br/>
Now we will get the ball rolling by creating a render function to be looped over.<br/>
<pre class="brush: javascript">
// Render loop
var renderLoop = function () {
// Start new frame
engine.beginFrame();
// process scene
//NOTE: at this point the "beforeRender" will be called
scene.render();
// draw
engine.endFrame();
// Need this to render the next frame
BABYLON.Tools.QueueNewFrame(renderLoop);
};
//Need this to call the renderLoop for the 1st time
BABYLON.Tools.QueueNewFrame(renderLoop);
</pre>
<br/>
One final this we should do is to check if the browser supports WebGL<br/>
<pre class="brush: javascript">
}// END OF babylon funciton
//Check it there browser is supported
if (BABYLON.Engine.isSupported()) {
babylon();
}
else{
alert("Sorry! WebGL is to cool for your Browser")
}
</pre>
and you are done!
<br/> Have fun :D
</span>
<script src="http://www.babylonjs.com/babylon.js"></script>
<script>
function babylon(){
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, -80), scene);
//Parameters are: name, number of segments (highly detailed or not), size, scene to attach the mesh. Beware to adapt the number of segments to the size of your mesh ;)
var sphere = BABYLON.Mesh.CreateSphere("Sphere", 8, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 30, scene, false);
var twist = 0;
scene.beforeRender = function() {
torus.rotation.z = twist;
torus.rotation.x = twist;
torus.rotation.y = twist;
twist += 0.01;
};
// Render loop
var renderLoop = function () {
// Start new frame
engine.beginFrame();
scene.render();
// Present
engine.endFrame();
// Need this to render the next frame
BABYLON.Tools.QueueNewFrame(renderLoop);
};
//Need this to call the renderLoop for the 1st time
BABYLON.Tools.QueueNewFrame(renderLoop);
}
//Check it there browser is supported
if (BABYLON.Engine.isSupported()) {
babylon();
}
else{
alert("Sorry! WebGL is to cool for your Browser")
}
</script>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-88348744588000309572013-09-28T12:23:00.000+01:002013-12-07T18:47:48.214+00:00"Comb" Library: Logging (2 of 2)<div dir="ltr" style="text-align: left;" trbidi="on">Hi! Before continuing note this is the second part of my "Comb" logging guide. For part one see: <a href="http://www.codemeasandwich.com/2013/09/comb-library-logging-1-of-2.html">"Comb" Library: Logging</a>. Else, on we go. <br /><br />
In this part let's cover the configuration of the logging system by calling the logging configuration function <i><b>comb.logger.configure</b></i> that will state what level should be stored/outputted to where.<br />
<br/>Before this we need to know about <b>Appenders</b>. Appenders are the end points that can be attached to logers.
<br/><span class="fullpost"><br/>
Multiple appenders are already included as part of the Comb Library
<ul>
<li>FileAppender - log it to a file</li>
<li>RollingFileAppender - log it to a file up to a customizable size then create a new one.</li>
<li>JSONAppender - write it out as JSON to a file.</li>
<li>ConsoleAppender- log it to the consol</li>
</ul>
<br /> To declare a appender and its target, it would look something like this.
<pre class="brush: javascript">
var myLogger = comb.logger("my.logger")
.addAppender("ConsoleAppender")
.addAppender("FileAppender", {file:'/var/log/my.log'})
.addAppender("RollingFileAppender", {file:'/var/log/myRolling.log'})
.addAppender("JSONAppender", {file:'/var/log/myJson.log'});
</pre>
<br />
Level class used to describe logging levels. The levels determine what types of events are logged to the appenders for example the if Level.ALL is used then all event will be logged, however if Level.INFO was used then ONLY INFO, WARN, ERROR, and FATAL events will be logged. To turn off logging for a logger use Level.OFF.<br />
<pre class="brush: javascript">
comb.logger.configure();
//the loggers you create now will have a ConsoleAppender
</pre>
<div style="text-align: center;"><b>OR</b></div>
<pre class="brush: javascript">
comb.logger.configure(comb.logger.appender("FileAppender", {file : '/var/log/my.log'}));
//loggers will have a FileAppender
</pre>
<br />
The Cool part(Nerd time ;) Let's create a configuration file.<br />
We configure by passing a block JSON to the "configure" function.
<br/><br/>
Configuration object layout:
<ul>
<li>"name space"(object attribute) -> Object</li>
<ul>
<li>level(object attribute) -> String</li>
<li>appenders(Array) -> object<b>s</b></li>
<ul>
<li>name -> String</li>
<li>level -> String</li>
<li>type -> String</li>
<li>file -> String</li>
<li>pattern -> String</li>
<li>overwrite -> String</li>
</ul>
</ul>
</ul>
<br/>
Example from the comb site:<BR/>
<pre class="brush: javascript">
comb.logger.configure({
"my.logger": {
level: "INFO",
appenders: [{
//default file appender
type: "FileAppender",
file: "/var/log/myApp.log",
}, {
//default JSON appender
type: "JSONAppender",
file: "/var/log/myApp.json",
}, {
type: "FileAppender",
//override default patter
pattern: "{[EEEE, MMMM dd, yyyy h:m a]timeStamp} {[5]level} {[- 5]levelName} {[-20]name} : {message}",
//location of my log file
file: "/var/log/myApp-errors.log",
//override name so it will get added to the log
name: "errorFileAppender",
//overwrite each time
overwrite: true,
//explicity set the appender to only accept errors
level: "ERROR"
}, {
type: "JSONAppender",
file: "/var/log/myApp-error.json",
//explicity set the appender to only accept errors
level: "ERROR"
}]
}
})
</pre>
<br />
You can also log directly to levels with
<pre class="brush: javascript">
var logger = comb.logger("logger");
logger.log("info", "my message");
// or if it is one of the default types
logger.info("my message");
</pre>
<br/>
Here the list of pre-supported functions
<br/>
<ul>
<il>logger.debug("debug message");</il><il>
logger.trace("trace message");</il><il>
logger.info("info message");</il><il>
logger.warn("warn message");</il><il>
logger.error("error message");</il><il>
logger.fatal("fatal message");</il>
</ul>
</span>
</div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-57676063317115118202013-09-27T18:28:00.000+01:002013-12-07T18:46:24.644+00:00"Comb" Library: Logging (1 of 2)<div dir="ltr" style="text-align: left;" trbidi="on">
Continuing with <a href="http://www.codemeasandwich.com/2013/09/comb-library-object-oriented.html">my overview</a> of the <a href="http://c2fo.github.io/comb/index.html">comb library</a> Lets taking a look at the <a href="http://c2fo.github.io/comb/logging.html">logging functions</a> available.<br />
<br />
logging is critical in your applications, not just for errors but in order to get a good understanding of how your application is operating in the wild/production.<br />
<br />
So what am I going to cover in the post.. well let see: <br />
<br />
<ul style="text-align: left;">
<li>Logger inheritance through name spaces</li>
<li>Predefined level level definition along with the ability to define your own.</li>
</ul>
<ul style="text-align: left;">
<li><a href="http://www.codemeasandwich.com/2013/09/comb-library-logging-2-of-2.html">Configurable with files OR programatically</a> *Part 2</li>
</ul>
<b>Logger inheritance through name spaces..</b> sample code anyone?<br />
<br />Lets load the comb library<br />
<pre class="brush: javascript">
var comb = require('comb'); //load the comb lib
</pre>
<br />Lets load a set of different elements for logging in different aspects<br />
<pre class="brush: javascript">
var logger_sys = comb.logger("sys");
var logger_user = comb.logger("user");
var logger_sys_logger = comb.logger("sys.logger");
var logger_user_logger = comb.logger("user.logger");
</pre>
<br /><span class="fullpost">
Note that the "." dot denotes the separation of "name space" levels
<br /><br />
Next here's a simple function just to print out the current level attribute for each of our elements for logging.
<br />
<pre class="brush: javascript">
function print(){
console.log("sys:"+logger_sys.level.name);
console.log("user:"+logger_user.level.name);
console.log("sysL:"+logger_sys_logger.level.name);
console.log("userL:"+logger_user_logger.level.name);
console.log();//lets skip a line for readability
}
</pre>
<br />
let's set a description for each of the logging levels
<br />
<pre class="brush: javascript">
console.log(">> lets set what the defalts level looks like");
print();
console.log(">> lets set sys and its child to 'DEBUG'");
logger_sys.level = 'DEBUG';
print();
console.log(">> lets set user and its child to 'INFO'");
logger_user.level = 'INFO';
print();
console.log(">> Now we will ONLY set sys.logger to 'WARN'");
logger_sys_logger.level = 'WARN';
print();
</pre>
<br/>
examples of inheritance within logging
<br/>
<pre class="brush: javascript">
console.log('>> If will create a sub logger');
console.log('>> It will inherit the level from its parent');
console.log(comb.logger('sys.logger.log').level.name);
</pre>
<br />
So what is the point in this?? <br /><br />Ok, let's take you have "INFO" and "ERROR" levels(for a full list of predefined logging levels see <a href="http://c2fo.github.io/comb/comb_logging_Level.html">comb.logging.Level</a>) So we can call a logging instance something inspired like "mypack.myclass.note" and set the level to INFO and another with "mypack.myclass.problem" to "ERROR".<br />
<br />
<div style="text-align: center;">
<b>Something important to note is that if you used the same "name space" name in the same or a different file, it will return the same global instants regardless.</b></div><br />
<br />
Continue to part 2:
<a href="http://www.codemeasandwich.com/2013/12/comb-library-logging-2-of-2.html">Configurable with files OR programatically</a><br /></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-86924315631884044362013-09-15T12:25:00.000+01:002013-12-05T15:32:57.289+00:00"Comb" Library: Object Oriented<div dir="ltr" style="text-align: left;" trbidi="on">
The <a href="http://c2fo.github.io/comb/index.html">comb library</a> is a very useful set of utilities that will help in your javascript projects and especially with Node applications.<br />
<br />
In this set of quick overviews I am going to give a brief run down of the different areas covered in the library: <br />
<ol style="text-align: left;">
<li><b>Object Oriented</b></li>
<li>Logging</li>
<li>Utilities</li>
<li>Flow control</li>
</ol>
*<i>But before going on, I am not connected to this project. I only found it helpful</i>.. On with the show!<br />
<br />
Object Oriented: As javascript does not support the classical object orientated paradigm. Comb provides a function <i>define </i>that takes an object with an attribute named <b>instance</b> or <b>static. </b>So this attribute is your class definition.
<span class="fullpost"><br />
<br />
let's roll out a short example:<br />
Create our base class<br /><br />
<pre class="brush: javascript">var Mammal = comb.define({
instance: {
_type: "mammal",
_sound: " *** ",
constructor: function (options) {
options = options || {};
this._super(arguments);
var type = options.type,
sound = options.mammal;
type && (this._type = type);
sound && (this._sound = sound);
},
speak: function () {
return "A mammal of type " + this._type;
}
}
});</pre>
<br />
But wait Brian didn't you say there was a static attribute as well.<br />
<pre class="brush: javascript">var Mammal = comb.define({
instance: {
...
},
static: {
DEFAULT_SOUND: " *** ",
soundOff: function () {
return "Im a mammal!!";
}
}
});
</pre>
<br />
let's now create another class to inherit from our base class
<pre class="brush: javascript">var Wolf = Mammal.extend({
instance: {
_type: "wolf",
_sound: "howl",
speak: function () {
return this._super(arguments) + " that " + this._sound + "s";
},
howl: function () {
console.log("Hoooowl!")
}
}
});
</pre>
<br />
let's take a look at this in action
<pre class="brush: javascript">var myWolf = new Wolf();
myWolf.howl() // "Hoooowl!"
myWolf.speak();// "A mammal of type wolf that howls"
</pre>
<br />
<a href="http://c2fo.github.io/comb/define.html">For more reading here's the official documentation</a></span>
</div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-59744014615687541052013-09-01T14:45:00.000+01:002013-09-01T17:36:32.661+01:00Js Arrays: Functions<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 5px 5px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
/*height:100%;*/
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}
/*.CSSTableGenerator tr:hover td{
background-color:#ffffff;
}*/
.CSSTableGenerator td{
vertical-align:middle;
background-color:#ffffff;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:4px;
font-size:18px;
font-family:Courier;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:12px;
font-family:Courier;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
td.undefined{
color:gray;
font-style:italic;
overflow:hidden;
text-align: center
}
td.highlight{
background-color:yellow;
}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"><span imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE3v-1iedLZ8YC5CUPBW9vLFrWPCoAhf6DK4qXg6juD56o5_KmLa931EXCJfYoUNtyTcx3noS8kW2wvFPLWciW8e44IwI4yvDNqjSvE5lLsyxOErrLYZcDGMaOwo8stAz7UxCIQBO5-NI_/s200/array.png" /></span></div>Okay so let's run through some javascript arrays.<br />
I'm going to try and cover some of the more useful functions in array manipulation.<br />
too start out we're going to use this five element array.<br />
<br />
<h2>Our array</h2>
<pre class="brush: javascript">
var v = ["a","b","c", "d","e"];
console.log(v.length); // 5
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
<br />
<br />
<pre class="brush: javascript">
v[9] = "j";
console.log(v[9]); // j
console.log(v[v.length - 1]); // j
console.log(v.length); // 10
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>Index 9</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td class="undefined" colspan="4">undefined</td>
<td class="highlight">j</td>
</tr>
</tbody>
</table>
</div>
<br /><span class="fullpost">
<br />
<h1>PUSH & POP</h1> ~ works with the END of the array<br />
<br />
<h2>PUSH</h2>
<pre class="brush: javascript">
//push() appends one or more items to the end of the array
v.push("f");
console.log(v.length); // 6
console.log(v[5]); // f
</pre>
<br />
And for your info push could also be achieved by<br />
<pre class="brush: javascript">
v[v.length] = "f"
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
<td>Index 5</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td class="highlight">f</td>
</tr>
</tbody>
</table>
</div><br />
To add multiple elements<br />
<pre class="brush: javascript">
v.push("g","h","i");
</pre>
<br />
<h2>POP</h2>
<pre class="brush: javascript">
console.log(v.length); // 6
console.log(v[v.length]); // f
v.pop(); // f
console.log(v.length); // 5
console.log(v[v.length]); // e
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div><br />
<br />
<pre class="brush: javascript">
//pop() on an empty array returns undefined
</pre>
<br />
<h1>UNSHIFT & SHIFT</h1> ~ works with the START of the array<br />
<br />
<br />
<h2>UNSHIFT</h2>
<pre class="brush: javascript">
v.unshift("f"); //prepends one or more items to the start of the array
//v.unshift("f","o","o");
console.log(v.length); // 6
console.log(v[0]); // f
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
<td>Index 5</td>
</tr>
<tr>
<td class="highlight">f</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div><br /><br />
<h2>SHIFT</h2>
<pre class="brush: javascript">
console.log(v.length); // 6
console.log(v[0]); // f
//shift() returns the first item from the array and shrinks it
v.shift(); // f
console.log(v.length); // 5
console.log(v[0]); // a
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>Index 0</td>
<td>Index 1</td>
<td>Index 2</td>
<td>Index 3</td>
<td>Index 4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
<br/>
<br/>
<h1>Merging arrays</h1>
<h2>Concat</h2> is used to join two or more arrays.
<pre class="brush: javascript">
var tail = ["x","y","z"];
var num = ["1","2","3"];
//concat() returns an array of the joined arrays
var v2 = v.concat(tail, num); //["a","b","c", "d","e","x","y","z","1","2","3"]
console.log(v.length); // 5
console.log(v2.length); // 11
</pre>
<br />
<div class="CSSTableGenerator">
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td class="highlight">x</td>
<td class="highlight">y</td>
<td class="highlight">z</td>
<td class="highlight">1</td>
<td class="highlight">2</td>
<td class="highlight">3</td>
</tr>
</tbody>
</table>
</div>
<br/>
Well I think that's me done for a while.<br/>
Till next time kids.<br/>
</span>
</div>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-88137261977076361622013-08-20T17:57:00.001+01:002013-08-26T08:44:53.703+01:00Error: Cannot find module<div dir="ltr" style="text-align: left;" trbidi="on">
I ran into this little node.js problem today.
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"><span style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye5GkZ7auxpeVjAg70MPkaA-_-8lLd8cotj8StMMZ-wHCRlB8ULbaXaU6PqqgtlxFccFJtObjjsO0L40kjtrx2Y4EGLOiQLzRze4NRSO94qaIRRWN5f_2ttHvYD7lwLgWVtDumIzZ7aQm/s200/Untitled-5.png" width="200" /></span>
<span style="color: yellow;">Error: Cannot find module</span> 'autoloader'</span><br />
<div style="padding-left: 30px; padding-up: 30px;">
<span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;">at Function.Module._resolveFilename (module.js:338:15)<br /> at Function.Module._load (module.js:280:25)<br /> at Module.require (module.js:364:17)<br /> at require (module.js:380:17)<br /> at Object.<anonymous> (c:\node\web\auto\test.js:1:63)<br /> at Module._compile (module.js:456:26)<br /> at Object.Module._extensions..js (module.js:474:10)<br /> at Module.load (module.js:356:32)<br /> at Function.Module._load (module.js:312:12)<br /> at Function.Module.runMain (module.js:497:10)</span></div>
<span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;">
</span>
</td>
</tr>
</tbody>
</table>
<br />
Was trying to use a package call <a href="https://github.com/aikar/autoloader">autoloader</a>. It installed fine but when I would try and run my node.js code. <b>Bang</b>, would get the above error.<br />
<br /><span class="fullpost">
This turned out to be a noob mistake on my part.<br />
Fix: you can install a node package from any directory but to have it seen by node.js you need to install it while in the node directory.<br />
<br />
<ol style="text-align: left;">
<li><b>Navigate to wear your node executable is.</b></li>
<li><b>Install your package as normal.. Done!</b></li>
</ol>
<br />
While I'm here I might as well talk a <u>little bit</u> more about installing packages(more commonly known as libraries). There are 3 things to know.<br />
<ul style="text-align: left;">
<li style="text-align: justify;"><b>What</b>: So node.js has a very minimalist belief where anything additionally that you need can just be installed. To this end there is the <a href="https://npmjs.org/">node package manager(npm)</a>. This is the best source to find and install <span style="text-align: left;">packages </span>for pretty much everything you could imagine to do with node.js/javascript. </li>
<li style="text-align: justify;"><b>Where</b>: Now, as with my above problem. If you run something like <span style="background-color: black;"><span style="color: white; font-family: Courier New, Courier, monospace;"> npm install autoloader </span></span> it will create a directory called <span style="font-family: Courier New, Courier, monospace;"><b>node_modules</b></span><span style="font-family: inherit;">(if </span>it does not exist already), download the library <span style="font-family: Courier New, Courier, monospace;"><b>autoloader</b></span> and install it into a subdirectory under <b style="font-family: 'Courier New', Courier, monospace;">node_modules</b><span style="font-family: inherit;"><b>.</b> </span>This is great but remember you need to be in the node.js directory so you ;<b style="font-family: 'Courier New', Courier, monospace;">node_modules</b><span style="font-family: inherit;"> are all in the same place so the node.js execute can find them. <b>(T</b></span><b>his is also referred to as installing locally<span style="font-family: inherit;">)</span></b></li>
<li><b>Global</b>: There is an additional parameter in particular <span style="font-family: Courier New, Courier, monospace;"><b>-g</b></span> that can allow you to use the libraries from anyway where via your terminal. It does this by adding a path to the package in your environmental variables. The above autoloader example would then look like <span style="text-align: justify;"> </span><span style="background-color: black; text-align: justify;"><span style="color: white; font-family: Courier New, Courier, monospace;"> npm install autoloader -g </span></span><span style="text-align: justify;"> </span></li>
</ul>
<div style="text-align: justify;">
<br /></div></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-33428769157325834992013-08-15T16:57:00.001+01:002013-08-26T07:51:15.581+01:00Basic web storage<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="0" bordercolor="" cellpadding="3" cellspacing="3" style="width: 100%;">
<tbody>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zFZiA65tH6cvodQADIaNkjhjPS44OgNHqfK9Ho_I-lCWZvJcuMIWnLklsW8I6dzrO7ZnTE13Jqy9OVWwhu3XqtsazFrd3DmsX_7Lp9uwPbtPewTbdtpGs8QiyFEqHXZHpAIRyHB_fyd7/s1600/js64.png" />
</div>
</td>
<td><br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjqUgUvTSotV5ocXi9eMkPrMTpiknoUWPWyVzGV5Y5mAZg58s4IBJHQhH-PRQOb_Cxp9xMdLBKyHLdgQuC6oeEeOMnIGB6uSYwujh0lIEGvhRyeGUulfsgHxBqiZ0LogBQl-yJRvYUjjJ/s1600/coffeescript_logo.png" />
</div>
</td>
<td><div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2lRej1NsYNVizGaxvXxrnjOgEgvA8pFOKxMT-8P5WIzQQngxLJpzy-gomI3pzMcYQg-zBxCI5YRXsYfBrJBEEx2zp-LcJDunkW4exp7D7vj1q8-AQou2sjU0qG9GG4W7EZO_nEDec7fxy/s1600/mongodb-leaf2.png" />
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;"><h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Node.js + Coffee + mongoDB</span>
</h3>
</td>
</tr>
</tbody>
</table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Good morning boys and girls, today I would like to share with you a little something I've been working on. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So I set out to build a web service that would </div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol style="text-align: left;">
<li>Read in a POST request on a Node.js server and save it to a mongo database </li>
<li>When a GET request comes in, return all the posted data<br />(this is the normal type of message you receive from a browser. i.e. get me this page/image/thing..).</li>
</ol>
and for good measure let's make sure we're using coffeescript's class ability.<br />
<br /><span class="fullpost">
To get started you will need to install the mongoDB server.<br />
<br />
There are very good step-by-step tutorials for all major platforms on the mongoDB site. so once you <a href="http://docs.mongodb.org/manual/installation/"><u>Install MongoDB</u></a>. Fire it up to make sure everything is working fine.<br />
navigate to wear the mongoDB executable is
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> cd /mongodb/bin</span></td>
</tr>
</tbody>
</table>
<br />
Now start you mongoDB server *By default, MongoDB stores data in the /data/db directory.<br />
<table border="0" style="background-color: black; max-width: 578px; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> mongod</span></td>
</tr>
</tbody>
</table>
<br />
Output<br />
<table border="0" style="background-color: black;">
<tbody style="display: block; max-width: 578px; overflow: auto;">
<tr>
<td nowrap=""><span style="color: #888; font-family: Courier New, Courier, monospace;">
Thu Aug 15 13:21:05.023 [initandlisten] MongoDB starting : pid=7444 port=27017 dbpath=\data\db\ 64-bit host=blackbolt<br />
Thu Aug 15 13:21:05.025 [initandlisten] db version v2.4.4<br />
Thu Aug 15 13:21:05.025 [initandlisten] git version: 4ec1fb96702c9d4c57b1e06dd34eb73a16e407d2<br />
Thu Aug 15 13:21:05.026 [initandlisten] build info: windows sys.getwindowsversion(major=6, minor=1, build=7601, platform=2, service_pack='Service Pack 1') BOOST_LIB_VERSION=1_49<br />
Thu Aug 15 13:21:05.027 [initandlisten] allocator: system<br />
Thu Aug 15 13:21:05.028 [initandlisten] options: {}<br />
Thu Aug 15 13:21:05.079 [initandlisten] journal dir=\data\db\journal<br />
Thu Aug 15 13:21:05.081 [initandlisten] recover begin<br />
Thu Aug 15 13:21:05.082 [initandlisten] recover lsn: 15263608<br />
Thu Aug 15 13:21:05.083 [initandlisten] recover \data\db\journal\j._0<br />
Thu Aug 15 13:21:05.085 [initandlisten] recover skipping application of section<br />
seq:0 < lsn:15263608<br />
Thu Aug 15 13:21:05.086 [initandlisten] recover skipping application of section<br />
more...<br />
Thu Aug 15 13:21:05.164 [initandlisten] recover cleaning up<br />
Thu Aug 15 13:21:05.165 [initandlisten] removeJournalFiles<br />
Thu Aug 15 13:21:05.167 [initandlisten] recover done<br />
Thu Aug 15 13:21:05.332 [initandlisten] waiting for connections on port 27017<br />
Thu Aug 15 13:21:05.332 [websvr] admin web console waiting for connections on port 28017<br /><br />
</span>
</td>
</tr>
</tbody>
</table>
<br />
We can now just leave this running.<br />
<br />
Now in a <b><u>new</u></b> terminal window we install the mongoDB driver for Node.js<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> npm install mongodb</span></td>
</tr>
</tbody>
</table>
<br />
So here we are going to have 2 files "server.coffee" and "mongo.coffee"<br />
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold;">File: mongo.coffee</span>
<br />
Here we have our class and the constructor. The constructors doing two things <br/> <ol style="text-align: left;">
<li>The 'response' being passed in is prefixed with '@' so it automatically becomes an attribute of the class.</li><li>Creating our mongoDB connection
</ol><br />
<pre class="brush: coffee">class myMongo
constructor: (@response)->
databaseUrl = "mydb"
collections = ["randomValues"]
@db = require("mongojs").connect(databaseUrl, collections)
</pre><br/>
Here we create the save function that is used for the post messages.<br/>It's split into two functions, so "save" initiates the writing to database and "_saveCallBack" after the values have been stored.<br/>*note: there 'saveCallBack' function starts with an underscore. This is to denote that the function is private
<br/><br/><pre class="brush: coffee">
save: (args) =>
@db.randomValues.save(args, @_saveCallBack)
_saveCallBack: (err, saved) =>
if err?
console.log(err)
@response.write(err)
else
console.log("Saved #{JSON.stringify(saved)}")
@response.write("will be saved")
@response.end()
</pre><br/>
Here is a similar setup to "save" in that it has two functions but of course we are reading out the information that has been stored by the POST messages. You should know that line 13 is where the magic happens as it loops thru the return values outputting each on a new line("\n")<br/>
<br/><pre class="brush: coffee">
find: =>
@db.randomValues.find {}, @_findCallBack
_findCallBack: (err, values) =>
console.log "#{values.length} Requested"
if err?
console.log err
else if values.length is 0
@response.write "No values found"
else
@response.write JSON.stringify(val)+"\n" for val in values
@response.end()
</pre><br/>
Finally we use "export" to allow our mongoDB manager class to be used with other files.
<br/><pre class="brush: coffee">
module.exports = myMongo
</pre>
<br />
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: bold;">File: server.coffee</span>
<br />
Very simple to start off. I'm bringing in the HTTP module and the mongoDB source that will handle the reading and writing of our values.
<br />
<pre class="brush: coffee">http = require "http"
myMongo = require "./mongo"
</pre>
<br />
Here's our request functional that will be run every time there is a connection is made.<br />
<br />
There are four main thing happening here<br />
<ol style="text-align: left;">
<li>Set our HTTP header</li>
<li>Created an instance of our mongoDB manager (mongo.coffee)</li>
<li>Check if it a POST message and pass the values to be saved</li>
<li>Else if it's a GET message and get the mongoDB manager to return all stored values</li>
</ol>
<br />
<pre class="brush: coffee">onRequest = (request, response) ->
response.writeHead 200,
"Content-Type": "text/plain"
#pass in the 'response' object, so the mongoDB manager
#can use it to output the values on a GET
mongoConnet = new myMongo(response)
if(request.method is 'POST')
body = '';
request.on 'data', (data) ->
body += data
request.on 'end', () ->
POST = JSON.parse (body)
mongoConnet.save(POST)
else if(request.method is 'GET')
mongoConnet.find()
</pre>
<br />
Here is where we build our server. you can see we're passing in the "onRequest" function and listening on PORT:8888.<br />
O, and a little message to let us know our server is up and running.
<br />
<pre class="brush: coffee">server = http.createServer()
server.on("request", onRequest)
server.listen(8888)
console.log "Server up and Ready to eat"
</pre><br />
Now here comes two commands and you can run them in any order and see what you get. :D
<br /><br />
This first one is the POST message that will store information into our database.
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> curl -i -X POST -H "Content-Type: application/json" -d '{"name":"brian","code":"sandwich"}' localhost:8888</span></td>
</tr>
</tbody>
</table>
<br />
Next we have the GET message that will retrieve our stored values.
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> curl -i localhost:8888</span></td>
</tr>
</tbody>
</table>
<br />
a copy of both source files is available on:
<b><a href="https://github.com/codemeasandwich/Basic-web-storage">GITHUB</a></b><br /><br /></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-62597104416853668702013-08-06T15:33:00.000+01:002013-08-26T07:52:52.252+01:00a nodes journey into the amazon<!-- JSON-LD markup generated by Google Structured Data Markup Helper. -->
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "SoftwareApplication",
"image" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85pVzf697DBqbDUewuLcw2l3GlOiccBuwlPRBNiLrxhKi84QftkDkcmSQ_Tog141QaTUGDiNPrMp-eGJWiNvpefR87aP9I66yCVau_pJb16Tk0FotejJw4OuueQR_JirqZujwZoWpbVWv/s1600/beanstalk.png"
}
</script>
<style>
.border
{
border:5px solid #a1a1a1;
border-radius:25px;
padding:15px;
}
</style>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;"></div>
<table border="0" bordercolor="" cellpadding="3" cellspacing="3" style="width: 100%;">
<tbody>
<tr>
<td>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zFZiA65tH6cvodQADIaNkjhjPS44OgNHqfK9Ho_I-lCWZvJcuMIWnLklsW8I6dzrO7ZnTE13Jqy9OVWwhu3XqtsazFrd3DmsX_7Lp9uwPbtPewTbdtpGs8QiyFEqHXZHpAIRyHB_fyd7/s1600/js64.png" />
</div>
</td>
<td>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjqUgUvTSotV5ocXi9eMkPrMTpiknoUWPWyVzGV5Y5mAZg58s4IBJHQhH-PRQOb_Cxp9xMdLBKyHLdgQuC6oeEeOMnIGB6uSYwujh0lIEGvhRyeGUulfsgHxBqiZ0LogBQl-yJRvYUjjJ/s1600/coffeescript_logo.png" />
</div>
</td>
<td>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85pVzf697DBqbDUewuLcw2l3GlOiccBuwlPRBNiLrxhKi84QftkDkcmSQ_Tog141QaTUGDiNPrMp-eGJWiNvpefR87aP9I66yCVau_pJb16Tk0FotejJw4OuueQR_JirqZujwZoWpbVWv/s1600/beanstalk.png" />
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Node.js + Coffee + Amazon</span>
</h3>
</td>
</tr>
</tbody>
</table>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here I'm going to run through hosting your Node server on the <a href="http://aws.amazon.com/elasticbeanstalk/" target="_blank">Elastic Beanstalk</a>. </span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span>
</div>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">A super quick intro to Elastic Beanstalk: </span><br />
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Amazon's Elastic Beanstalk is a deployment service that allows you to encapsulate different amazon services to provide a specific server and resource configuration based on your requirements. + There is no extra cost for this service. To find out more read Amazon's <a href="http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/concepts.components.html" target="_blank">AWS Elastic Beanstalk Components</a></span>
</div>
<br />
<div style="text-align: center;">
<b><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">*Note: Beanstalk refers to each service collection as an "Application".</span></b>
</div>
<br />
<div style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">In this "<span style="background-color: white; color: #444444; line-height: 21px;">Application</span>", </span><span style="text-align: left;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">beanstalk will pull in </span></span>
</div>
<div style="text-align: left;"></div>
<ul style="text-align: left;">
<li><a href="http://aws.amazon.com/ec2/" target="_blank"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">EC2: Elastic Compute Cloud</span></a></li>
<li><span style="background-color: white; color: #444444; line-height: 16px;"><a href="http://aws.amazon.com/s3/" target="_blank"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">S3: Simple Storage Service</span></a></span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="http://aws.amazon.com/iam/" target="_blank">IAM: Identity and Access Management</a></span></li>
</ul>
<div style="text-align: right;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Lets get started! ^_^</span>
</div>
<br />
<span class="fullpost">
<br />
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">I am going to uses a directory called "aws" and I will use my <a href="http://www.codemeasandwich.com/2013/08/git-basics.html" target="_blank"><b>Git </b></a></span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><a href="http://www.codemeasandwich.com/2013/08/git-basics.html" target="_blank"><b>basics</b></a> as my server code. <span style="color: #660000;">This is important as we will be using git to upload our code to </span></span><span style="color: #660000;"><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: left;">beanstalk</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: left;">!</span></span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">In your command-line, go to this "</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">aws</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">" </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">directory</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">. but we will also need a "package.json" file to tell our node server about our coffee source.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">File: </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">package.json</span>
</div>
<pre class="brush: javascript">{
"name": "AmazonCoffee",
"version": "0.0.1",
"description": "An example of a nofe.js running CoffeeScript source",
"homepage": "http://www.codemeasandwich.com/2013/08/a-nodes-journey-into-amazon.html",
"scripts": {
"start": "coffee index.coffee"
},
"dependencies": {
"coffee-script": "*"
}
}
</pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Console ~ Lets stage our files. </span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> git add . </span></td>
</tr>
</tbody>
</table>
</blockquote>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next we </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">commit our staged file.</span>
<br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Console</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> git commit -m "added configuration file "package.json" for Node to run index.coffee" </span></td>
</tr>
</tbody>
</table>
</blockquote>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You should get something like the following:</span>
</div>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> [master (root-commit) </span><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;">950b29b</span><span style="color: #999999;"><span style="background-color: black; font-family: Courier New, Courier, monospace;">] </span><span style="font-family: 'Courier New', Courier, monospace;">added configuration file "package.json" for Node to run index.coffee</span></span><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"><br /> 1 file changed, 19 insertions(+)</span></td>
</tr>
</tbody>
</table>
</blockquote>
</div>
<div>
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next comes the real juicy bit! Deploying to AWS Elastic Beanstalk</span>
</h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You will now need to download & install the <a href="http://aws.amazon.com/code/6752709412171743" target="_blank">Elastic Beanstalk Command Line Tool</a> </span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Once you have downloaded the zip file. Extract it to your node </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">directory.</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next you will need to add to your systems environmental variables.</span><br />
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Console - </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b><u>Linux</u></b>: *Remember to match the python folder version with the version of python that you have installed</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> export PATH=$PATH:</span><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;">node/AWS-ElasticBeanstalk-CLI-2.5.1/</span><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">eb/linux/python</span><span style="background-color: black; color: #f1c232; font-family: Courier New, Courier, monospace;"><b>2.7</b></span><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">/ </span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">On <b><u>windows</u> </b>you will need to add "</span><span style="font-family: Courier New, Courier, monospace;">;<span style="color: #999999;">c:\node\AWS-ElasticBeanstalk-CLI-2.5.1\</span>eb\windows\</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">" to your PATH in your Environment Variables. A good step by step can be found at </span><a href="http://www.computerhope.com/issues/ch000549.htm" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;" target="_blank">How to set the path and environment variables in Windows</a><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Back in our server AWS folder lets run.</span><br />
<br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Console</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> eb init </span></td>
</tr>
</tbody>
</table>
</blockquote>
</div>
<div class="border">
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next you will get:</span>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Enter your AWS Access Key ID: </span></td>
</tr>
</tbody>
</table>
</blockquote>
</div>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To get your key you can follow my <a href="http://www.codemeasandwich.com/2013/08/coffee-to-s3.html" target="_blank">Coffee and S3</a> tutorial.</span>
</div>
<div>
<br />
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">With your ID and key in hand, enter your ID.</span>
</div>
<div>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Enter your AWS Secret Access Key: </span></td>
</tr>
</tbody>
</table>
</blockquote>
</div>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now you can pick a region to setup you server</span>
</div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Select an AWS Elastic Beanstalk service region. </span></td>
</tr>
</tbody>
</table>
</blockquote>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For me I picked 4) EU West.. just cos!</span>
</div>
<div>
<br />
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next;</span>
</div>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black;"><span style="color: #999999;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> </span><span style="font-family: Courier New, Courier, monospace;">Enter an AWS Elastic Beanstalk </span></span><span style="font-family: Courier New, Courier, monospace;"><span style="color: #cccccc;">application name</span><span style="color: #999999;"> (auto-generated value is "</span><span style="color: yellow;">aws</span><span style="color: #999999;">"): </span></span></span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
and<br />
</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; font-family: Courier New, Courier, monospace;"><span style="color: #999999;"> Enter an AWS Elastic Beanstalk </span><span style="color: #cccccc;">environment name</span><span style="color: white;"> </span><span style="color: #999999;">(auto-generated value is "</span><span style="color: yellow;">aws-env</span><span style="color: #999999;">"): </span></span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
</span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here you can just hit enter and it will use the defaults based on your working </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">directory</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">(highlighted in yellow). </span>
</div>
<div>
<br />
</div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Select a solution stack. </span><br />
<span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Available solution stacks are: </span>
</td>
</tr>
</tbody>
</table>
</blockquote>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: 'Courier New', Courier, monospace;"> 5) 32bit Amazon Linux running Node.js </span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For this I went with option <b>5</b>. You could pick 6, if you want a 64bit version</span><br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next you will be asked what type of "</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">environment"</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> you want?</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black;"><span style="color: #999999;"><span style="font-family: Courier New, Courier, monospace;"> Select an environment type.<br /> Available environment types are:<br /> 1) LoadBalanced<br /> 2) SingleInstance </span></span></span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You're best off picking <b>2</b>) 'Single Instance' as you will only need to 'Load Balanced' with a live site.</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Create an RDS DB Instance? [y/n]: </span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">We don't need a database right now, so "<b>n</b>"</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next pick a profile.</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Attach an instance profile<br />1) [Create a default instance profile]<br />
2) [Other instance profile]</span>
</td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">or hit enter and lets go with the </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">default. <b>1</b></span><br />
</div>
</div>
<br />
<div style="text-align: center;">
<i><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">* You can change you Beanstalk configuration, by running the</span><span style="font-family: Courier New, Courier, monospace;"> </span><b><span style="font-family: Courier New, Courier, monospace;">init </span></b><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">command again. <br />For each setting you can just hit Enter to use the previous settings.</span></i>
</div>
<div style="text-align: left;">
<i><br /></i>
</div>
<h3 style="text-align: left;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">lets </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">deploy our server ^_^</span>
</h3>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; font-family: Courier New, Courier, monospace;"><span style="color: white;"> eb start </span><br /><span style="color: #999999;"> Starting application "aws".<br /> Would you like to deploy the latest Git commit to your environment? [y/n]: </span></span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Lets go with "<b>y</b>".. This will take a while.. but you should be getting updates while(</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Really!</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">) its deploying.</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">After it's done you'll be given a URL to access your node server. </span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;"> Application is available at " ... </span><span style="background-color: black; color: yellow; font-family: Courier New, Courier, monospace;">.elasticbeanstalk.com</span><span style="background-color: black; color: #999999; font-family: Courier New, Courier, monospace;">". </span></td>
</tr>
</tbody>
</table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">If you have any problems let me know ;)</span><br />
<br />
</div>
</div>
</span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-39392084911728105982013-08-04T15:21:00.000+01:002013-08-26T07:54:11.036+01:00Git basics<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEE03Es-_5u_7DgTN6dshr6iRq0bZJYYOdHkaUJ1wzJJpgDuPJwl9QsxXj635YSZK20xlMSFvTw2O3WPV7jobmOKMV9Jn9ryTZPJDHQ5B-i6m1VjXK1QzIQeKlRvdtX674iLRBnhlwwFk/s400/Untitled-20.png" width="400" /></div>
<div style="text-align: center;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Here I'm going to run through the very basics of getting started with </span><a href="http://git-scm.com/" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;" target="_blank">Git</a>.<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> Simply Git is used to</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> store our server code. It is a LOT more powerful than that, but every needs to start with baby steps.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">First step is to download/install the <a href="http://git-scm.com/downloads" target="_blank"><b>latest version of Git</b></a></span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> on your machine. </span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now I am going</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: justify;"> to build on my </span><a href="http://www.codemeasandwich.com/2013/08/nodejs-coffeescript-in-nutshell.html" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: justify;" target="_blank">node.js/coffee example</a><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: justify;">. </span><br /><span class="fullpost">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Once you have the source running. I want you to point your terminal to your </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: justify;">directory where you have the coffee source saved.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br />Terminal</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> git init </span></td></tr>
</tbody></table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Your path should now have "(Master)" at the end, </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">but we now need to add our server code into the newly created </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">repository.</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Terminal ~ This will stage <u>all the files</u>. </span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> git add . </span></td></tr>
</tbody></table>
</blockquote>
<div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> * You can think of staging like adding to a list of files that you are ready to commit.</span></div>
</div>
</div>
<div>
<br /></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next we </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">commit our staged file.</span></div>
<div>
<br /></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Terminal</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> git commit -m "First commit" </span></td></tr>
</tbody></table>
</blockquote>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You should get something like the following:</span></div>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: #999999; font-family: Courier New, Courier, monospace;"> [master (root-commit) </span><span style="color: #999999; font-family: Courier New, Courier, monospace;">950b29b</span><span style="color: #999999; font-family: Courier New, Courier, monospace;">] First commit<br /> 1 file changed, 19 insertions(+)<br /> create mode 100644 index.coffee </span></td></tr>
</tbody></table>
</blockquote>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Let do a quick test to make sure all is good we our server </span></div>
<div>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><a href="http://localhost:8888/">localhost:8888</a></span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">So far so good! but there is one small thing bugging me.. that console message when the server starts. lets make 2 small tweaks. We are going to print out the port number and make the port selection more dynamic by adding have an optional argument when starting the script to specify the port</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">. Else check if there is a </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">predefined port of servers to start on.</span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
</div>
<div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">First we will read in the port number from the command line. For this we will need <b>process.argv</b> which is an array </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">containing the command line arguments. The first element will be 'coffee', the second element will be the path to our file and the last element will be the port number. The second part is process.env.PORT </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">this will try and pull a port number from the global environment variable.</span></div>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Add at the top of the script</span></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<pre class="brush: javascript">port = process.argv[2]
port ?= process.env.PORT
port ?= 80</pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Replace line 15 & 17 with the below <b>!! don't forget the indentation</b></span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b> !!</b></span><br />
<br />
<pre class="brush: javascript"> http.createServer(onRequest).listen (port)
console.log ("Server on port #{port} has started.")
</pre>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"></span><br />
<div>
<br /></div>
<div>
<div style="text-align: justify;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The changes above will read in a port value, If one can't be found 8888 will be set as a default. The second part sets the port number and will output the number when the server is started.</span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Terminal</span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> coffee index.coffee 8889 </span></td></tr>
</tbody></table>
</blockquote>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">You should get something like the following:</span></div>
<div>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: #999999; font-family: 'Courier New', Courier, monospace;">Serve</span><span style="color: #999999; font-family: 'Courier New', Courier, monospace;">r </span><span style="color: #999999; font-family: Courier New, Courier, monospace;">on port 8889 has started.</span></td></tr>
</tbody></table>
</blockquote>
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now lets</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"> </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">commit our </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">newly modified </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">file with the following <u>two</u> commands</span><br />
<div>
<br /></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Terminal</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> ~ This will stage just the index.coffee file</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">. </span><br />
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> git add index.coffee </span></td></tr>
</tbody></table>
</blockquote>
<blockquote class="tr_bq">
<table border="0" style="background-color: black; width: 572.2222290039063px;"><tbody>
<tr><td><span style="color: white; font-family: Courier New, Courier, monospace;"> git commit -m "<i>the port number can be passed as a command line argument and the port number will be displayed on terminal</i>"</span></td></tr>
</tbody></table>
</blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">And that is for now.</span></div>
</div>
</div></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-57835326249749606312013-08-01T15:58:00.001+01:002014-05-26T16:26:30.627+01:00node.js + coffeescript in a nutshell<style>
.cmdTable{
background-color: black;
color: white;
width: 100%;
font-family: Courier New, Courier, monospace;
}
</style>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<p>Here's is a quick 101 on getting Node.js/CoffeeScript up on <a href="http://www.ubuntu.com/">Ubuntu</a> Server
I'm using Ubuntu 13.10 that contains Node.js in its default repositories. *Note that this will not be the newest one. However it's the simplest way of getting started.</p>
We just have to use the apt package manager. We should refresh our local list packages before installing:<br/>
<br /><span class="fullpost">
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get update
</span></td>
</tr>
</tbody>
</table>
<br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get install nodejs
</span></td>
</tr>
</tbody>
</table>
<br/>
This is all that you need to do to get set up with Node.js. You will also need to install <code>npm</code>(Node.js Package Manager). <br/><br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
sudo apt-get install npm
</span></td>
</tr>
</tbody>
</table>
<p>
This will allow you to easily install modules and packages to use with Node.js.
</p><p>
Because of a conflict with another package, the executable from the Ubuntu repositories is called <code>nodejs</code> instead of <code>node</code>. It's just good to keep this in mind.
</p>
The last step is to install the CoffeeScript interpreter<br/><br/>
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
npm install coffee-script
</span></td>
</tr>
</tbody>
</table>
<br/>
Now that we are setup. Here is a basic node HelloWorld server written in coffee.
File: index.coffee <br />
<pre class="brush: coffee">
http = require "http"
url = require "url"
start = () ->
onRequest = (request, response) ->
pathname = url.parse(request.url).pathname
console.log ("Request for #{pathname}")
response.writeHead (200),
"Content-Type": "text/plain"
response.write "Code Sandwich"
response.end()
http.createServer(onRequest).listen (8888)
console.log ("Server has started.")
start()
</pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Ladies start your servers.</span><br /><br />
<table border="0" class="cmdTable">
<tbody>
<tr>
<td><span>
coffee index.coffee
</span></td>
</tr>
</tbody>
</table>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
now check that this is all ok</span><br />
<br />
<a href="http://localhost:8888/" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;" target="_blank">localhost:8888</a><br /></span></span>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-38490844114536423282013-08-01T08:34:00.000+01:002013-08-26T07:55:45.576+01:00Coffee to S3<!--span class="fullpost">
<div itemprop="breadcrumb">
<a href="/search/label/AWS">AWS</a>
</div>
<span id="breadcrumbs" itemprop="breadcrumb">
<a rel="home" href="http://example.com">
<span>Noob Archive</span>
</a> »
<span>
<a href="http://example.com/topic/html/">
<span>HTML</span>
</a> »
<strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
</span>
</span>
</span-->
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">It's late, I have <a href="http://www.imdb.com/title/tt1104001/" target="_blank">tron</a> on in the background and am thinking of how to make the <a href="http://tron.wikia.com/wiki/Grid" target="_blank">Grid</a> a reality.. may not be something I can come up with tonight :/<br />
<br />
..what else is on my mind...<br />
<br />
<div itemprop='description'>
<img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_fzIT47Pb28Yl2upVAcCWizJ1VuzyCJKbrk0Cc00ELZ0MiJcIKGzg0E91vAKdGzzA7dd4gHrhyP-0cPscxpJhVYlWMuEmCyi3PPmKt-Dpp4aEnWj3SiWPamRSzX8sr7b4UMja88QqvC-1/s200/C3.png" width="64" align="left" style="padding-right: 10px;"/>I'm pushing things to Amazon's Simple Storage Service(S3) but would be good to automate them.</div><br />
<br />
Coffee time! and I'm not just saying that because its late. <i>ok, bad pun</i><br /></span><span class="fullpost">
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Next we need to install the AWS SDK</span>(<a href="http://aws.amazon.com/sdkfornodejs/" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;" target="_blank">more info on AWS SDK for node.js</a>)<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">.</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
console:</span><br />
<br />
<blockquote class="tr_bq">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="font-family: Courier New, Courier, monospace;">
npm install aws-sdk</span></span></blockquote>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Now you will need to get your AWS access info</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
First login to your Amazon account at </span><a href="http://aws.amazon.com/" style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">http://aws.amazon.com</a><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
Once logged in go to the top right, click on your name and then click "Security Credentials"</span><br />
<br /></span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN5o02ELYMfdZLEYkK57GjBHCwitssbmfDUkFJM7EnvcSjjbDvPwvDrVICK-u8XAiKUGCkRL8w7T3zc85XSKdzBuCPOtrlyH1xMDqng30e8LXQu2d8Ln3bL3Vs0ZnN5tsmGnPn3ddRbvQq/s320/Untitled-4.jpg" width="304" /></span></span></div>
<br /><br />
<div class="separator" style="clear: both; text-align: left;"><br /></div>
<br /><br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Next you will need to go to you Access Keys and click "Create New Root Key"</span></span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-35vusozu8_XdzgOAull_8RVQ0TlZ8eJBd4WfnMr5gf_NvjqZ2GFvbIZbZ0rlK0QmbOlNVRfmmdNhFGcFSNWm3KAUiBva6DU_JFvQ9yuRJ4Y8RwTZBUJXy5DXycgy1ThG8DruoF5ASczs/s640/Untitled-2.jpg" width="640" /></span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
Next you will be prompted with the "Create Access Key". <b>[This will invalidate your old key]</b><br />
download the 'Key File' to access your newly generated key.<br />
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiid5xC9pp5NqfZstrqfBYND4rgczwq9MGHU0mKQ4LD7hdZitL2-UejFsCdIHIejW_FWEyBU9W35XhBUSB69SjYWdeABdcVSQ08oZnFKQaJxMS7txZMd3U-T2ux8VauqKBboHoyu4ZW447B/s640/Untitled-3.png" width="640" /></span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
<br />
back to the editor and create two new files config.json and aws.coffee<br />
<br />
file <b>config.json</b><br />
<br /><br />
<pre class="brush: javascript">{ "accessKeyId": " AWSAccessKeyId goes here ", "secretAccessKey": " AWSSecretKey goes here ", "region": "us-west-2" }
</pre>
<br />
file <b>aws.coffee</b><br />
<br /><pre class="brush: javascript">#load the aws sdk
AWS = require('aws-sdk')
#load the keys to access your account
AWS.config.loadFromPath './config.json'
#lets create an object to connect to S3
s3 = new AWS.S3()
#As buckets names are shared across all account in a region
#Let create a random number so multiple people can run this example
ran = Math.random()
#call the createBucket function and add a file
s3.createBucket
Bucket: "codemeasandwich#{ran}"
, ->
params =
Bucket: "codemeasandwich#{ran}"
Key: "aFile"
Body: "HelloWorld"
s3.putObject params, (err, data) ->
if err
console.log err
else
console.log data
console.log "Successfully uploaded data to myBucket/myKey"</pre>
<br /><br />
Now lets fire up the console and run our "aws.coffee"<br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
console:</span><br />
<blockquote class="tr_bq">
<span style="font-family: Courier New, Courier, monospace;">
coffee aws.coffee</span></blockquote>
now check that this is all ok
</span>
</span><br />
</span></div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-28193657136590076852013-07-15T21:09:00.004+01:002013-08-26T07:58:17.791+01:00HTML form on a static site<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">So my mission right now is to see how far I can push my luck with hosting from Amazon's S3(Simple Storage Service</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">). </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For anyone from the ice age. Think of S3 like a HTTP wrapper around and FTP server. If you're wondering why anyone would want to use this over a normal server... then just google S3. Anyway back to business!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">My ingredients for today *lick lips</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">*</span><br />
<ol style="text-align: left;">
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Host a static site (requirement of S3)</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Record input to google docs</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Consistent styling across the site</span></li>
</ol>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now "google doc" supports a document type of <b>Form</b> that allows you to create a set of questions that people can fill out and have all the answers collected in a spreadsheet layout.</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> </span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">When you start to create a Form you will be presented with the following.. <i>Pretty!!</i></span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wRrQtpuODcDcpGHEDC6-1e73FHVATJK4NVz13vGsHN5d-X9VxZtrQ3uffP-v57-loHGlXelArZtuzz4SZ9YccC5lT5aFueou8RlXXZz_-VW3XMUHjEqkBMb4gWCaqI7O8XIyJPf2LBGk/s400/Untitled-1.jpg" width="400" /></span>
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
</span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<span class="fullpost">
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">For this to work you have to leave it on the default theme.</span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMwrFQ2HSJxH4qMc5UdjVvcmgfTOdAhsVso3s6wO2GpmQ5Wj5l2Z-Mf-BTmuyxHN7Brr17eMg2mdz4L47ZkZd3I4R_58ElkC8lzv4D2B6hJ_1H-eK9KXaqZYIgB-8sw_wD2Ran2wxP6DW_/s640/Untitled-2.jpg" width="640" />
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">You will need to make the form public.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTMOHW2jhKEMxGN5WVpXV0_xXnIVEng86sfGP3UmcUSJV3ypgySvHFPDVSkgUUp5vLSljE2ch9TtBhN0hyphenhyphenuI9cPxttHfeBvFQtLgDDNNO4DlkrGH1MOgyzGtZpUY4L4dIy02Gm0iy2DKaU/s640/Untitled-6.jpg" width="640" />
</div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Add some Questions.. if you're into that sort of thing!</span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6WF8gPDxvhAMhEBiEiFQ9NlRz94TWVl3rTZr4M5wgLwJTEtFfjzjBQY3NFTNcB-kuXvhoDiAGZ1AmPnRZM8Hu-nDg3b9h0TdVHKte8uVLCILVUD6I2Yty5XDUGpjnk8r_dAJRoyQ9Sjb/s640/Untitled-7.jpg" width="640" />
</div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: center;"></div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">When Done you'll get the below form</span>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji96_drN40CK-uBIwB5BZ8z6CGAckPqwyJUa6a7rFeAtVgYwUy9fbFcUOPx8C8o0XZ5h6hSvDbuH1hVNAKU0fTEkLe-3O6alPJXhE0-R2VTVqTg_484Mg5KKgebiF5jdc_qx6WwetUbIVe/s400/Untitled-4.jpg" width="400" />
</div>
<div class="separator" style="clear: both; text-align: left;">
<br />
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> but what you're</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> really looking for is the embed URL</span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<br />
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjz2mnsGgo6aBotsru-KGDFHGo1mqnTDyz5FjjC6robYO-Tjpz37mhIux_2SNw8IXKSgxMSyyMnGfWaVQ-NFqcxd13SovhR8zUDQksSVnXAw5NySNvjIjAD9vA8JrIFeObAAPhv-53Iulp/s400/Untitled-5.jpg" width="400" />
</div>
<div class="separator" style="clear: both; text-align: left;">
<br />
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">With the link copyed, back to your site.. *Zoom*</span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">With the <b>iframe </b>tag in our page we get the following:</span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3a-4x3zaERNWFrIbRWXbDbVWJhNVzV7bA-dRQXdCkU5bxaPVB5gUoSnBpE6Vf5PATpRnx2BUz4aUKboi-WJdssh-VHvVYmNkenekeBSwfBY0_1dZg6Xb4Hr1YLZFVJnzGZcP2nt6obzYr/s640/Untitled-19.jpg" width="640" />
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: center;"></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Not very nice :p</span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">let's take a look at the code we have so far:</span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br />
</span>
</div>
<span style="font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><style></span><br />
<span style="font-family: Courier New, Courier, monospace;">body</span><br />
<span style="font-family: Courier New, Courier, monospace;">{</span><br />
<span style="font-family: Courier New, Courier, monospace;">background-image:url('/Wood_tile_wallpaper_by_neko_xexe.png');</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;"></style></span><br />
<span style="font-family: Courier New, Courier, monospace;"></head></span><br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"><iframe frameborder="0" height="500" marginheight="0" marginwidth="0" src="https://docs.google.com/a/codemeasandwich.com/forms/d/1NktonTf4ss3xDagjb-656PV1SBbLanfSbeP2zfRj7ds/viewform?embedded=true" width="760">Loading...</iframe></span><br />
<span style="font-family: Courier New, Courier, monospace;"></body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">To make this look more inline with our site we are going to need a bit more information about how google has put together this form.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihEzal0beOPu6c9P2bOhJHTRqSgFsoi00kcPLDDp1cVFtf0CuBHMWhGb_v5imbSJUTp3slPzSOLSEJYVp9dF8F4WR5gwJgviRMYfsUrOg5l0872wUuG1Ed2LwEFhU9dssDX96_Uo9IBFo3/s320/Untitled-10.jpg" width="320" /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Once the new page has loaded. Right click to view the source</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1qISQSEqkKfC1Ob-Ym1ZgbovFz6-fv48qVHPmO7mysiFj_d_xc6aZRW8rJhteiDg6EpiRSijH1zRcGE9ivIZxNuoW2zyu96gN_5fSJ9XBNKsyfC1W9mzSpVnrFnAn0RwoxCZkhy9BuyC/s640/Untitled-13.png" width="640" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">In the source you need to find the </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>form </b>tag. Now </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">copy the tag and <u>all its content.</u></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<img border="0" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTUJKOmeEpCL7dXGUp2a6yCJLcXU6z1L3MLT-hhemqGJvlPaLd4rhe74l-ll6uLKSaJ-EKFkxlsIDWpV2sR0OLL1q5G2QCwhC84Cr30rstAfw3QrA5qcIIX6BBYewZzmmX2w5AggUv-yV/s640/Untitled-15.jpg" width="640" /><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<br />
<div class="" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">back on our site page, <u>replace</u> the <b>iframe </b>tag with the below</span></div>
<div class="" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="" style="clear: both; text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Now paste the <b>form </b>code under the <b>iframe </b>tag. You will need to change the <b>target </b>tag to "hidden_iframe"</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxYOBLSnzDIUEUMjXhMUbGHPTDnnSFdhTb5dQ7WHWs6S4L-HhYWOyGS31RsAIVPrBzgFUELY6vFezvaSdk-vUjH_imrjIs3VJz2HrO-AK98dI25GIXza-tJRbhhyphenhyphenOaZ5cjUOLfPBVJ_ITy/s640/Untitled-16.jpg" width="640" /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">That definitely looks a bit better and I <u>didn't</u> need any server side :D</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>P.s. I have some Ideas for a follow-up post on how to better style your form +using the new HTML5 input tags and some small javascript tips to really make your form rock.</b></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>So let me know if that's something you guys are interested in.</b></span></div>
</div>
</span>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-27294862241220834642013-07-08T12:51:00.000+01:002013-08-26T08:01:10.615+01:00Code Completion with Magic Methods<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Recently I was told that a code example that used the "<a href="http://www.php.net/manual/en/language.oop5.overloading.php#object.call">__call</a>" didn't work. As he couldn't call the function I had outlined outside of my example code?</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Weird!!</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">This was down to <a href="http://projects.eclipse.org/projects/tools.pdt">eclipse</a>'s auto-completion only listing the functions that are declared in the class source.. and on paper that seems</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> normal. </span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Unfortunately when dealing with a dynamic type language like PHP this won't cut it!</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">So how can we address for our </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><u>auto-completion</u> and </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><u>document generation</u></span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> friends?</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Example time: (the below is straight from the <a href="http://manual.phpdoc.org/HTMLSmartyConverter/PHP/phpDocumentor/tutorial_tags.method.pkg.html">PHPDocs</a>)</span><br />
<br />
<pre class="brush: php">/**
* show off @method
*
* @method int borp() borp(int $int1, int $int2) multiply two integers
*/
class Magician
{
function __call($method, $params)
{
if ($method == 'borp') {
if (count($params) == 2) {
return $params[0] * $params[1];
}
}
}
}</pre>
</div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-49759651104115919802013-06-11T22:35:00.000+01:002013-08-26T08:02:33.789+01:00Coffeescript for PHP developers<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.border
{
border:5px solid #a1a1a1;
border-radius:25px;
padding:15px;
}
</style>
<br /><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<div dir="ltr" style="text-align: left;" trbidi="on">
Well I decided to teach my self Coffeescript and was hoping to find a little tutorial for people coming from a PHP background, but was surprised when the internet came up short.<br />
Well, see a need.. fill a need!<br />
<br />
<div style="text-align: left;">
So heres a few examples from <a href="https://www.youtube.com/watch?v=fvsKkwbhfs8">Charles Wood's CoffeeScript Basics</a> and I have added what would be the equivalent PHP to hopefully give people a reference point.
</div>
<br />
<div class="border">
<b>CoffeeScript</b>: Comment<br />
<pre class="brush: javascript">#this is a comment
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">//this is a comment
</pre>
</div>
<br />
<div class="border">
<b>CoffeeScript</b>: Function<br />
<pre class="brush: javascript">intro = (name)->
"Hi " + name
Console.log intro("Brian")
</pre>
<span style="font-family: Courier New, Courier, monospace;">The last line in a coffeescript function is returned</span><br />
<br />
<b>PHP</b><br />
<pre class="brush: php">function intro($name){
return 'Hi'.$name;
}
echo intro('Brian');
</pre>
</div>
<br />
<span class="fullpost">
<br />
<br />
<div class="border">
<b>CoffeeScript:</b> Default Parameter<br />
<pre class="brush: javascript">intro = (name, gender = "friend")->
"Hi " + name + " my " + gender
Console.log intro("Brian")
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">function intro($name, $gender = 'friend'){
return 'Hi'.$name.' my '.$gender ;}
echo intro('Brian');
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Modify A Argument's Value<br />
<pre class="brush: javascript">intro = (name, gender = "friend")->
gender = gender +"!";
"Hi " + name + " my " + gender
Console.log intro("Brian")
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">function intro($name, $gender = 'friend'){
$gender .= '!';
return 'Hi'.$name.' my '.$gender ;
}
echo intro('Brian');
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: String Interpolation<br />
<pre class="brush: javascript">myScore = 6
console.log "my score was #{myScore}"
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$myScore = 6;
echo "my score was $myScore"
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Chained Comparisons<br />
<pre class="brush: javascript">myScore = 6
pass = 10 > myScore > 5
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$myScore = 6;
$pass = 10 > $myScore ? $myScore > 5 : false;
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Hash Map<br />
<pre class="brush: javascript">items = {a:'z', b:'y', c:'x'}
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$items = ['a'=>'z', 'b'=>'y', 'c'=>'x'];
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Array <br />
<pre class="brush: javascript">items = [
1,0,0
0,1,0
0,0,1
]
</pre>
<span style="font-family: Courier New, Courier, monospace;">CoffeeScript will automatically add a comma at the end of each line in an array is not present</span>
<br />
<br />
<b>PHP</b><br />
<pre class="brush: php">$items = [
1,0,0,
0,1,0,
0,0,1
];
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: If<br />
<pre class="brush: javascript">x = true
y = false
if x and y
console.log true
else
console.log false
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$x = true
$y = false
if( $x and $y)
echo 'true';
else
echo 'false';
</pre>
<span style="font-family: Courier New, Courier, monospace;">Here the example of using <span style="font-weight: bold;">endif</span></span>
<br />
<pre class="brush: php">if( $x and $y):
echo 'true';
else:
echo 'false';
endif
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Ternary Operator<br />
<pre class="brush: javascript">if x or y then console.log true else console.log false
</pre>
<span style="font-family: Courier New, Courier, monospace;">
coffee supports
<span style="font-weight: bold;">
and, or</span>
<br />
<b>PHP</b></span><br />
<pre class="brush: php">echo $x or $y ? 'true' : 'false'
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Not With Assignment<br />
<pre class="brush: javascript">x = null
x or= true
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$x = null;
$x = !$x ? true : $x;
</pre>
<span style="font-family: Courier New, Courier, monospace;">for this, the ternary operator must have an else. So i'm using it's own value to simulat no effect. </span>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Splats(Function Overloading)<br />
<pre class="brush: javascript">party = (first, second, rest...) ->
console.log first
console.log second
console.log rest
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">function party(first, second){
echo $first;
echo $second;
$rest = func_get_args();
array_shift($rest);//remove first
array_shift($rest);//remove second
echo implode(',',$rest);
}
</pre>
<span style="font-family: Courier New, Courier, monospace;">You don't need implode, I'm just using it to print the exter value from this array. </span>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: For In/Each<br />
<pre class="brush: javascript">
hello = {en: "hi", fr:"Boj", it,"bon"}
speak = (lang) ->
console.log hello[lang]
speak language for language in ["en","fr","it"]
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$hello = ['en'=>'hi', 'fr'=>'Boj', 'it'=>'bon'];
function speak($lang){
global $hello;
echo $hello[$lang];
}
foreach(['en','fr','it'] as $language) speak($language);
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Sequence<br />
<pre class="brush: javascript">countdown = (num for num in [10..1])
countdown = (num*2 for num in [10..1])
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$countdown = range(10,1)
$countdown = range(10, 1, 2)
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Parsing An Array<br />
<pre class="brush: javascript">ages = {chuck:31, steven:29, julie:27}
tell = for person, age of ages
person + " is "+age+" years old"
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">$ages = ['chuck' => 31, 'steven' => 29, 'julie' => 27];
foreach($ages as $person=> $age)
$tell[] = $person.' is '.$age.' years old';
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Class<br />
<pre class="brush: javascript">class Vehicle
move: (miles) ->
console.log miles+"miles"
car = new Vehicle
car.move(1000)
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">class Vehicle{
public function move($_miles){
echo $_miles.' miles';
}
}
$car = new Vehicle();
$car->move(1000);
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Attributes<br />
<pre class="brush: javascript">class Vehicle
setMiles: (@miles)
getMiles: -> @miles
car = new Vehicle
car.setMiles(1000)
console.log car.getMiles
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">class Vehicle{
public $miles
public function setMiles($_miles){
$this->miles = $_miles;
}
public function getMiles(){
return $this->miles;
}
}
$car = new Vehicle();
$car->setMiles(1000);
echo $car->getMiles();
</pre>
</div>
<br />
<br />
<div class="border">
<b>CoffeeScript</b>: Inheritance<br />
<pre class="brush: javascript">class Vehicle
constructor: (@name) ->
move: (miles) ->
console.log @name + " drove "+miles+"miles"
class VWBug extends Vehicle
move: ->
console.log "fast"
super 100
class Truck extends Vehicle
move: ->
console.log "slow"
super 20
mater = new Truck "Mater"
her = new VWBug "Herbie"
mater.move()
her.move()
</pre>
<br />
<b>PHP</b><br />
<pre class="brush: php">class Vehicle{
private $name;
public function __constructor($_name){
$this->name = $_name;
}
public function move($_miles){
echo $this->name.' dove '.$_miles.' miles';
}
}
class VWBug extends Vehicle {
public function move($_miles = 100){
echo 'fast';
parent::move($_miles);
}
}
class Truck extends Vehicle{
public function move($_miles = 50){
echo 'slow';
parent::move($_miles);
}
}
$mater = new Truck("Mater");
$her = new VWBug("Herbie");
$mater->move();
$her->move();
</pre>
</div>
</div>
</span></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-90199361220270074352013-05-25T16:09:00.000+01:002013-08-27T19:12:19.352+01:00Cross-Domain Ajax with CoffeeScript <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<a href="http://en.wikipedia.org/wiki/Ajax_(programming)" target="_blank">Ajax</a>! The workhorse technology, that underpins our Web 2.0 world. Normally is something that we take for granted as web developers.<br />
Except when you're trying to develop something in a small group and it just won't behave!!<br />
<br />
Ok, context: I was building the front end to a site and a colleague was working on the back. The big problem came when I was trying to get <a href="http://en.wikipedia.org/wiki/json" target="_blank">json</a> data from his service.. on his machine. You get where this is going :p<br />
<br /><span style="background-color: yellow;">
Error jQueryXXXXXXXX was not called</span>
<br /><br />
Solution?!<br /><span class="fullpost">
<br />
<a href="http://json-p.org/" target="_blank">Jsonp</a>.<i> (WTF!)</i> 'Jsonp' stands for "JSON with padding". But in a nutshell 'Jsonp' is requesting your json data from a dynamically created element on the page.<br />
*I'm still lost!!*<br />
In order to keep your data secure when visiting web sites. The elders of the Internet decided that cross domain scripting would be a bad idea. This means that your browser restricts javascript to only send/receiving data to the domain that the page is coming from.<br />
<br />
The workaround(Hack) is to dynamically create a hidden element on the page that points to the domain that you want to get your information from. The request goes out and the respond as javascript. <b>[Don't worry. If you are using jQuery 1.5</b>(or higher)<b> this is all handled for you by using the the 'jsonp' data type in the jQuery ajax request]</b><br />
<br />
So there are two parts to this.<br />
A <b>Server </b>bit and a <b>Browser </b>bit.<br />
<b>*<u>The Server bit is important!!</u>*</b><br />
<br />
On the Browser we need to send the ajax and have a function to process the response.
<br />
<br />
<pre class="brush: javascript">opets =
type: 'GET'
url: 'http://192.168.1.117/myService/get.json'
dataType: 'jsonp'
async: false
crossDomain: true
jsonpCallback: 'callMe'
error: (jqXHR, textStatus, errorThrown) ->
alert "AJAX Error: #{textStatus}"
$.ajax opets</pre>
<br /><br />
<pre class="brush: javascript">window.callMe = (data) ->
console.log data</pre>
<br />
Server side.
When using JSONP you should set the content-type to javascript(insted on "json").. as the respoince will be wrapped in your callback function
<br /><br />
<pre class="brush: php">if(isset($_GET['callback'])){
header('Content-Type: application/javascript');
</pre>
<pre class="brush: php"> echo $_GET['callback'].'('.$jsonData.')';
}</pre>
</span>
</span>
</div>
hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.comtag:blogger.com,1999:blog-6721867207305480862.post-19162478376325297282013-05-04T16:43:00.000+01:002013-08-27T19:13:47.818+01:00Long polling<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: left;">As some people seem to be having a tough time understanding this reverse ajax I decided to try and explain. so long polling or reverse ajax as its otherwise known. Is when you simulate the server informing you of changes,</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; text-align: left;"> instead of constantly pulling the server for updates. </span></div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">*but Brian why is it a bad thing to constantly poll the server??</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Polling the server is very expensive as a new connection needs to be created & handled on each request. Combine this with a lot of users and short polling time and your server can get quickly overloaded.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here's an example of a normal ajax request to poll for updates.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span><span class="fullpost">
<h3 style="text-align: left;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">normal ajax</span></h3>
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">--------</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> --------</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">| Base |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | Ship |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">--------</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> --------</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> Every thing ok?</span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> ----------------</span><span style="font-family: 'Courier New', Courier, monospace;">>|></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | checking.. yep, all ok</span><br />
<span style="font-family: Courier New, Courier, monospace;"> <|<---------------- </span><span style="font-family: 'Courier New', Courier, monospace;">|<</span><br />
<span style="font-family: Courier New, Courier, monospace;">Lets |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;">wait |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;">a sec |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> >| </span><span style="font-family: 'Courier New', Courier, monospace;">----------------</span><span style="font-family: 'Courier New', Courier, monospace;">>|></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |Let check again</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> <|<---------------- </span><span style="font-family: 'Courier New', Courier, monospace;">|<</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">What we are doing here is allowing the client to send request to see if anything has changed, then what I short while and the client will request again.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<br />
<h3 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>Long polling</b></span></h3>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">This approach is best when you are checking for changes on a somewhat infrequent basis.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here we change the architectural little bit. we take the request from the client.. but if there is nothing to return, we will hold the connection open.</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">--------</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> --------</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">| Base |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | Ship |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">--------</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> --------</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> Everything ok? </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> >|</span><span style="font-family: 'Courier New', Courier, monospace;"> ----------------</span><span style="font-family: 'Courier New', Courier, monospace;">>|></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | checking.. <b>no change</b></span><br />
<span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | (..Wait..)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | </span><span style="font-family: 'Courier New', Courier, monospace;">checking.. </span><b style="font-family: 'Courier New', Courier, monospace;">no change</b><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;">(..Wait..)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | </span><span style="font-family: 'Courier New', Courier, monospace;">checking.. </span><b style="font-family: 'Courier New', Courier, monospace;">no change</b><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> <|<---------------- </span><span style="font-family: 'Courier New', Courier, monospace;">|<</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> Everything ok? </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> >|</span><span style="font-family: 'Courier New', Courier, monospace;"> ----------------</span><span style="font-family: 'Courier New', Courier, monospace;">>|</span><span style="font-family: 'Courier New', Courier, monospace;">></span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | </span><span style="font-family: 'Courier New', Courier, monospace;">checking.. </span><b style="font-family: 'Courier New', Courier, monospace;">no change</b><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;">(..Wait..)</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> | </span><span style="font-family: 'Courier New', Courier, monospace;">checking.. </span><b style="background-color: red; font-family: 'Courier New', Courier, monospace;"><span style="color: white;">There a <u>problem</u>!!</span></b><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"><span style="background-color: yellow;"><b>!!!</b></span> </span><span style="font-family: Courier New, Courier, monospace;"><|<---------------- </span><span style="font-family: 'Courier New', Courier, monospace;">|<</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;"> </span><span style="font-family: Courier New, Courier, monospace;">|</span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> </span><span style="font-family: 'Courier New', Courier, monospace;"> |</span><br />
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">This approach allows us to better manage connections as each client will have one connection that can be used over a longer time. If something happens with connection the good thing is the network layer will inform you and then you can just reconnect.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">I have found good approach is to run a loop on the server 30 times and sleep for 1 second each iteration. <b>but your mileage may vary</b></span></span></div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com1tag:blogger.com,1999:blog-6721867207305480862.post-69694694931897655312013-03-13T14:48:00.000+00:002013-08-27T19:15:17.389+01:00PHP Exceptions: Throwing and why<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
I've found a lot of new developers have a tough time getting their head around exceptions.<br />
<b>The normal flow of execution looks like the below:</b><br />
<img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-vL9Smmybdjb_wSC2lJnjKR76cqF6JOJzePVKE3JfVgFsPgkQFYxBLAVqePUodjXVNphGz5lIw8j8PYl6yY5JooVpCt80juS2_c4huui3p58aPT_CyRVj1VI8fwBqGnTk_EWi9oF3Ukb/s200/1.png" width="200" />
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhxMD3iISqGtQ6dysjgo4j_Bf5batdr06PsolxljPMSr5w2CDJtkzltpn_VRbBzHzrhQQtywg99C2pFmaHu8Ee0YwNxRakqvvh42Erwd-ojqCOn20FZsgkYqtH8PgSx9OrFHPw7aGwuAU/s200/2.png" width="196" /><br />
<br />
let's take that you need to retrieve something from a database. Here you can have two common problems.
</div>
<ol style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<li>A problem reading from the SQL data store</li>
<li>The input your checking against is bad/not valid</li>
</span>
</ol>
Both of these are serious issues that need to be addressed!<br />
<br />
<img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTU0ZRurWWQNXoCyLxUOc-GWO2ouQSY_Iq-HG-WnWSslcnzgpwaz0xgQwibumZYFXOuqlrHIfELHFHhMLbzInju2K9V6-kAO5eQvOFHkYIiGQz9PcuCxcCqOOny1AYQ9_v0xVnbJOaULbb/s400/3.png" width="400" />
<br /><br /><b>This will lead to a world of pain, not only for the running script but for consistency on that data set going forward if this is not addressed.</b><br /><br />
<span class="fullpost">
I believe not throwing & handling exceptions comes from a bad precedence that when a function fails It will just return a boolean <span style="font-family: Courier New, Courier, monospace;">false</span>. I can understand this as a legacy from the older versions of php, but now seriously how many dev actually check to see if the returned value is a <span style="font-family: Courier New, Courier, monospace;">false</span>.<br />
Instead they just continue executing, assuming that because the program hasn't halted everything is fine.<br />
<br />
The simplest way you should think of exception handling is like nested dolls. As you call functions you are getting more specific into the operations of your application and this means the type of exceptions that will happen are specific to what is happening within the function. This is why we create our own sub-types of exceptions.<br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
A lot of times I see code like this:<br />
</span><br />
<pre class="brush: php">function read(){
try{
$con=mysqli_connGct("localhost","user","pass","db");
$result = mysqli_query($con,"SELECT * FROM tableA");
mysqli_close($con);
$aResult = array();
while($row = $result->fetch_object()){
$aResult[] = $row;
}
return $aResult;
}
catch(Exception $_exception){
}
}</pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
With the above example you are just catching everything that could go wrong. this makes it very hard to handle different types of problems as they occur.<br />
<br />
What we need to do is an form the calling function that something has gone wrong. The best way of doing this is by creating a custom exception that best matches our situation.
<br />
<br /></span><br />
<pre class="brush: php">class StorageException extends Exception
{ }</pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
That's it. Simple!<br />
With a "<span style="font-family: Courier New, Courier, monospace;">StorageException</span>" we can catch it in the calling function (or higher in the call stack) that tells of something went wrong. You may notice that I did not use the word SQL, in the name of the exception. This allows me to change the underlying storage system e.g. moving from a SQL server to say MongoDB without without changing the exception name.
<br />
<br /></span><br />
<pre class="brush: php">catch(Exception $_exception){
throw new StorageException("Problem reading from tableA",0,$_exception);
}</pre>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">
<br />
Here I'm 1)Describing the problem 2)passing an error code and 3) passing the original exception<br />
<br />
Next we need to replace <a href="http://php.net/manual/en/language.exceptions.php"><span style="font-family: Courier New, Courier, monospace;">Exception</span></a> with something more specific like <a href="http://php.net/manual/en/class.mysqli-sql-exception.php"><span style="font-family: Courier New, Courier, monospace;">mysqli_sql_exception</span></a>.<br />
Now if there is a more specific type of exception it will need to be caught at higher level. This is important as it means that only specific sql exceptions are caught at this layer.
<br />
<br />
<img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-wYU2LwCSj51nHtUYM71ULqsPsaQ3kcjE-1wANxvPGGQHEdMqKGb5oP4EoYPJaXVEEUNdV7ytpjnJCHljM1PC64gATjHPEwrzXUK5VbJ676Rd_zc_iASRcLNvSneFlXsqTePmXG_vB5U/s400/5.png" width="400" />
<br />
<br /></span><br />
<pre class="brush: php">catch(mysqli_sql_exception $_exception){
throw new StorageException("Problem reading from tableA",0,$_exception);
}</pre>
<br />
Now we encapsulate the entry point of the script in a <span style="font-family: Courier New, Courier, monospace;">try/catch</span> block so that any exceptions not caught specifically will be finally handled. This should be the only place in your code that catches the base type of <span style="font-family: Courier New, Courier, monospace;">exception
</span><br />
<div>
<br />
<pre class="brush: php">try{
$values = read();
foreach (values as $value){
echo $value;
}
}
catch(Exception $_exception){
// Log exception info
}
</pre>
<b>Lastly, here's a list of the functions that you can call on your exception in order to drill down into what happened.</b><br />
<ul style="text-align: left;">
<li> <span style="font-family: Courier New, Courier, monospace;">getMessage()</span></li>
<ul>
<li> gets the exception’s message</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getCode()</span></li>
<ul>
<li>returns a numerical code that represents the exception</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getFile()</span></li>
<ul>
<li>returns the file where the exception was thrown</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getLine()</span></li>
<ul>
<li>returns the line number in the file where the exception was thrown</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getTrace()</span></li>
<ul>
<li>returns the an array of the backtrace() before the exception was thrown</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getPrevious()</span></li>
<ul>
<li>returns the exception thrown before the current one, if any</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">getTraceAsString()</span></li>
<ul>
<li>returns the backtrace() of an exception as a string instead of an array</li>
</ul>
<li> <span style="font-family: Courier New, Courier, monospace;">__toString()</span></li>
<ul>
<li>returns the whole exception as a string. Is overrideable.</li>
</ul>
</ul>
</div>
</span>
</span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-15528538304630827452013-02-09T18:14:00.000+00:002013-08-27T19:16:18.019+01:00.htaccess | mod_rewrite - Request routing in Apache<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">As a web app developer It's great to be able to disconnect your URL convention from your file structure.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">But Brian, why would I want to do that? I'm glad you asked ;) </span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">let say you have a blog site and you want people to be able to find your post by entering something like "<i>www.domain.me/yesterday/beach</i>". Without using a <b>htaccess + mod_rewrite </b>module </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">you would need to use URL </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">parameters. The above would look like "</span><i style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">www.domain.me/index.php?time=yesterday&post=beatch</i><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">"</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> or even worse; create </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">directories and subdirectories to represent your URL space. This would be stupid as your posts are stored in your database... right!?</span><br />
<span class="fullpost">
<br />
<div style="text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i><b>?? htaccess ?? mod_rewrite ??</b></i></span>
</div>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Ok a little bit more background: Your </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Apache</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> web server uses dot </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">htaccess files to allow for more controls on </span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">specific file and </span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">directory</span><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"> with in your site</span><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">. The mod_rewrite is a rewrite engine that allows you to state rules on how urls should be managed as they come in.</span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">So what we are going to do is</span><br />
<ol style="text-align: left;">
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Route incoming requests to one file that will decide what should be displayed.</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Allow access to resource files like Images, Css, Js and the hackers.txt.</span></li>
</ol>
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</h2>
<h2 style="text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">.htaccess</span>
</h2>
<div>
<blockquote class="tr_bq">
<span style="font-family: Courier New, Courier, monospace;">
#This is a comment<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
#enable the mod_rewrite module<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteEngine on<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
#RewriteRule Pattern Substitution [Options]<br />
</span>
<br />
<span style="font-family: Courier New, Courier, monospace;">
#allow access to all files in the
<b>
img
</b>
directory<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteCond %{REQUEST_URI} /img/.$<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
#the <b>[L]</b> flag means that if the rule matches, no further rules will be processed
<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteRule .* - [L]<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
<br />
</b>
</span>
<span style="font-family: 'Courier New', Courier, monospace;">
#allow access to all files in the
<b>
css
</b>
</span>
<span style="font-family: 'Courier New', Courier, monospace;">
directory<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteCond %{REQUEST_URI} /css/.$<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteRule .* - [L]<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
<br />
</b>
</span>
<span style="font-family: 'Courier New', Courier, monospace;">
#allow access to only
</span>
<b style="font-family: 'Courier New', Courier, monospace;">
js and coffee
</b>
<span style="font-family: 'Courier New', Courier, monospace;">
files in the
<b>
js
</b>
</span>
<span style="font-family: 'Courier New', Courier, monospace;">
directory<br />
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteCond %{REQUEST_URI} /js/.+(js|coffee)$<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
RewriteRule .* - [L]<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
#allow access to this particular
<b>
hacker.txt
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<br />
<b>
RewriteCond $1 !^(hacker\.txt)<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
<b>
<br />
</b>
</span>
<span style="font-family: Courier New, Courier, monospace;">
#all other request are to be send to index.php<br />
</span>
<b style="font-family: 'Courier New', Courier, monospace;">
RewriteRule ^(.*)$ /index.php/$1 [L]<br />
</b>
</blockquote>
</div>
<div>
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><b>Let me know if this was of any help.</b></span><br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span>
</div></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-7302695782922368912013-01-26T23:49:00.000+00:002013-08-27T19:16:48.193+01:00Roll your own OpenStreetMap server<div dir="ltr" style="text-align: left;" trbidi="on">
This is an Ubuntu 12.04 machine intended to be used for rendering and serving <a href="http://www.openstreetmap.org/">OpenStreetMap</a> tiles<br />
<br />
<div id="demoMap" style="height: 150px;">
</div>
<br />
<span class="fullpost">
You will need to install some packages first<br />
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> sudo apt-get install python-software-properties<br />
sudo add-apt-repository ppa:kakrueger/openstreetmap<br />
sudo apt-get update<br />
sudo apt-get install libapache2-mod-tile</span></td>
</tr>
</tbody>
</table>
<br />
<b>For this I'm going to mount an additional drive. </b><br />
The OpenStreetMap data will use at least 300GB for the database, ~24GB for the compressed osm data file. However you'll need a more space again to store the rendered tiles. The more the better but I recommend having no less than 500GB for the data drive.<br />
<br />
To mount the data drive use the following:<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> sudo mount /dev/vdb /mnt/maps_data/</span></td>
</tr>
</tbody>
</table>
<br />
let also setup auto-mount at login. Add the following to <b>/etc/fstab</b>
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> /dev/vdb /mnt/maps_data auto defaults 0 0</span></td>
</tr>
</tbody>
</table>
<br /><div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img border="0" height="64" width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikys9s4UbVUAOGYLIokxK2tOLssLfDi0VJwAZlPFUPhZ_BjMzGNXAomef2MiVyFNnOuDEN3sMn-Y724iWTjQaqNUIlIynvujCiHwQQvQgqwMRYXW4w1ueIZJqyv9F3u62qKP-GRF9TSmYw/s200/Clock-icon.png" />
</div>
<b>Downloading the planet data:</b><br/> This will be about 24GB.
<br />
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
wget -c http://planet.openstreetmap.org/planet/planet-latest.osm.bz2</span></td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<b>or</b></div>
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
wget -c http://planet.openstreetmap.org/pbf/planet-latest.osm.pbf</span></td>
</tr>
</tbody>
</table>
<br />
nominatim says .pbf is preferred format but doesn't extrapolate upon this assertion.
<br /><br />
<b>Setting up the Database:</b>The data base storage location needs to change so that the data is stored on the large drive. The Easiest way to do this is to copy the existing data and change the config file. Make sure to retain the file permissions, the following should work.<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">data_directory = '/mnt/maps_data/postgresql/9.1/main'</span></td>
</tr>
</tbody>
</table>
<br />
Change the data_directory in <b>/etc/postgresql/9.1/main/postgresql.conf</b><br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">cp -pR /var/lib/postgresql /mnt/maps_data</span></td>
</tr>
</tbody>
</table>
<br />
We should also make some changes to the config at this point to tune the database. Change the following values
<br />
<br />
<pre class="brush: plain">shared_buffers = 768MB
work_mem = 512MB
maintenance_work_mem = 512MB
autovacuum = off
checkpoint_segments = 20
</pre>
<br />
You need to make some changes to the kernel before these settings can take effect.
Add the append the following to the end of <b>/etc/sysctl.conf</b>
<br />
<br />
<pre class="brush: plain">kernel.shmmax=1073741824
kernel.shmall=262144
</pre>
<br />
At this point you should restart the server for these changes to take effect
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> sudo reboot</span></td>
</tr>
</tbody>
</table>
<br />
<b>Exporting the data:</b> After restarting the server check the postgresql is up and running
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> sudo service postgresql status</span></td>
</tr>
</tbody>
</table>
<br />
<b>If</b> it just says <i>"<b>Running clusters:</b>"</i> then you need to start it:
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;"> sudo service postgresql start</span></td>
</tr>
</tbody>
</table>
<br />
The export process requires a lot of memory so give the server as much ram as is available. <br />This may not be enough so you should temporarily add a large swap space, about 60GB to be safe, we can delete it after the export.
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td nowrap=""><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
sudo dd if=/dev/zero of=/mnt/swapfile.swap bs=1024 count=62914560<br />
sudo chmod 600 /mnt/swapfile.swap<br />
sudo mkswap /mnt/swapfile.swap<br />
sudo swapon swapfile.swap<br />
</span></td>
</tr>
</tbody>
</table>
<br />
Now to export to the database. The --slim parameter specifies that it should store temporary data in the database reducing memory usage. The -c parameter specifies the amount of temporary data it can store in the database.<br />
<br />
This is the command I used to export the data
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
osm2pgsql --slim -C 15000 planet-latest.osm.bz2
</span></td>
</tr>
</tbody>
</table>
<br />
<table border="0" style="background-color: yellow; width: 100%;">
<tbody>
<tr>
<td>
<div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;">
<img border="0" height="64" width="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikys9s4UbVUAOGYLIokxK2tOLssLfDi0VJwAZlPFUPhZ_BjMzGNXAomef2MiVyFNnOuDEN3sMn-Y724iWTjQaqNUIlIynvujCiHwQQvQgqwMRYXW4w1ueIZJqyv9F3u62qKP-GRF9TSmYw/s200/Clock-icon.png" />
</div>
<div style="font-family: Courier New, Courier, monospace;">
<b>Note that the export process can take upwards of 15 days and if interrupted must be started again from scratch.</b>
</div>
</td>
</tr>
</tbody>
</table>
<br />
<b>Rendering tiles:</b>
We need to make sure that the rendered tile are stored on the data drive. <br />
You could do this by changing the config files if you can find out all the places this needs to be done. Alternatively you could create a link to the data drive in place of the normal storage location.
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td nowrap=""><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
sudo ln -s /mnt/maps_data/default /var/lib/mod_tile/default<br />
sudo chown -R www-data:www-data /var/lib/mod_tile/default<br />
sudo mkdir /mnt/maps_data/default<br />
sudo chown -R www-data:www-data /mnt/maps_data/default<br />
</span></td>
</tr>
</tbody>
</table>
<br />
Now we need to render some tiles.
We'll pre-render the first few zoom levels just to test
<br />
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td nowrap=""><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
render_list -a --socket=/var/run/renderd/renderd.sock -z 0 -Z 5 -n 4<br />
</span></td>
</tr>
</tbody>
</table>
<br />
<b>-z</b> is the minimum zoom level rendered<br />
<b>-Z</b> is the maximum zoom level rendered<br />
Note the -n parameter is number of treads to use, adjust accordingly, this makes a big difference.<br />
<br />
<br />
<b>Lets cross our fingers and give it a try:</b> modify the following (which should have been created automatically)
<table border="0" style="background-color: black; width: 100%;">
<tbody>
<tr>
<td><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace;">
vim /var/www/osm/slippymap.html
</span></td>
</tr>
</tbody>
</table>
<br />
Such that the following line reflects the server setup.
<br />
<pre class="brush: plain">
var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "http://myserver.address.com/osm/${z}/${x}/${y}.png", {numZoomLevels: 19});
var zoom=0;
</pre>
<br />
Now visit <a href="#">http://myserver.address.com/osm/slippymap.html</a> in your browser. You should see be able to see a map of the world and be able to zoom in and pan around within the first 6 zoom levels without much issue or lag beyond network lag. Zooming in past zoom five you should see a noticeable to severe delay before tile start showing. This is because the server must query the database to get the data for the region you're looking at and render the tile images on the fly.
<br />
<br />
<b>let me know how you got on.</b>
<br />
</span>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("demoMap");
map.addLayer(new OpenLayers.Layer.OSM());
map.zoomToMaxExtent();
</script>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0tag:blogger.com,1999:blog-6721867207305480862.post-48273556384897634992012-12-01T11:58:00.000+00:002013-08-27T19:17:11.212+01:00sticky footer<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbm6l7eEBnPaN8k8ldej_zQnVeBS8esuk2VbNgFX7QSQR566tRVdKJx_eYabmPeGr6ZhZltgx90O4MtO8uYhpSsBro_1A3APPc_hCInHDuEpydb05hBblNnqorwKHhCjE_GKxzt88IROr/s320/Monty_python_foot.png" width="320" /></div>
<h3 style="text-align: center;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Here I'm going to show you a super simple way of making sure that your footer stays at the bottom of your page without <i>hard-coding your height</i> or <i>setting position as absolute</i></span></h3>
<br /><span class="fullpost">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">There are three main elements</span><br />
<br />
<ul style="text-align: left;">
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">pageContent</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">offSet</span></li>
<li><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">footer</span></li>
</ul>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The CSS</span><br />
<div>
<pre class="brush: css">* {
margin: 0;
}
html, body {
height: 100%;
}
.pageContent {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -25px;
}
.offSet{ /* the offset is used to stop the footer from over laping with the page content */
height: 25px;
}
.footer {
background-color:#000;
color:#fff;
height: 25px;
}
</pre>
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">The HTML</span><br />
<pre class="brush: html"><body>
<div class="pageContent">
<h2>
Boy desirous families prepared gay reserved add ecstatic say</h2>
Comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up he it enjoyment agreeable depending. Timed voice share led his widen noisy young. On weddings believed laughing although material do exercise of. Up attempt offered ye civilly so sitting to. She new course get living within elinor joy. She her rapturous suffering concealed.
Started earnest brother believe an exposed so. Me he believing daughters if forfeited at furniture. Age again and stuff downs spoke. Late hour new nay able fat each sell. Nor themselves age introduced frequently use unsatiable devonshire get. They why quit gay cold rose deal park. One same they four did ask busy. Reserved opinions fat him nay position. Breakfast as zealously incommode do agreeable furniture. One too nay led fanny allow plate.
<div class="offSet">
</div>
</div>
<div class="footer">
Rose past oh shew roof is song neat.
</div>
</body>
</pre>
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Once done you should end up with something like the following:</span></div>
<div style="text-align: center;">
<img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBiSHcBiS7eqKUVwcqZnwFsaCo8fflONEfdfFE_2e2wR3sef_VNtGvfCwrSJg-NA9wEOUi1qqQ2tH22u6_CPOxBtCaFt5-nLf-yVvYgh2ZzsSqxY7WvmDOJ5z8ZwkliU7lPDIy2SPgPcp/s400/Untitled-2.png" width="393" /></div>
<br /></span>
</div>hihttp://www.blogger.com/profile/00634116126535228847noreply@blogger.com0