Techpriester::blog()
A tale from the land of web development, the lore of PHP and the the myths of JavaScript. A tale told by yours truly ...
Want to know more about some part of the story? Ask me!
Loremify is a one-click tool to copy Lorem Ipsum. It lets you wrap in html, specify the amount of text, and copy it to your clipboard—all in one click. It runs as a Dashboard Widget in Mac OS X, and is a mere 400kb download.
Works like a charm. Awesome UI idea to use the mouse position over the buttons as a measure for the wanted amount of Lorem Ipsum.
The Instant JavaScript Sandbox
I don’t know about you, but I’m really annoyed by the fact, that I always need to create a blank HTML file or copy an existing template, if I just wanted to quickly try something in JavaScript.
Also there’s the annoyance of either mixing HTML and JavaScript which is not only inherently evil but also distracting and messy by nature or to have at least two files (.html and .js) for just one simple stupid test or experiment which is also messy. And when it comes to code, we all know:
Messy extends Evil implements Pain, Fail
{
public function __construct()
{
//you are f***ed from this point ...
{
}
I usually have all my javaScript experiments and tryouts in one directory on my development web server which I call “js_sandbox”. So I wrote a really simple little PHP script and placed it in that directory as “index.php”:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>JavaScript Sandbox</title>
<?php
if (isset($_GET['file'])) {
echo sprintf(
'<script type="text/javascript" src="%s"></script>'.PHP_EOL,
$_GET['file']
);
}
?>
</head>
<?php
if (isset($_GET['file'])) {
die ( '<body></body></html>' );
}
?>
<body>
<ul>
<?php
$path = realpath ( dirname( __FILE__ ) );
$dir = opendir ( $path );
while ( $entry = readdir ( $dir ) ) {
$filePath = $path.'/'.$entry;
if ( is_file ( $filePath ) and is_readable( $filePath ) and substr( $entry, -3 ) == '.js' ) {
echo sprintf (
'<li><a href="?file=%1$s">%1$s</a></li>'.PHP_EOL,
$entry
);
}
}
?>
</ul>
</body>
</html>
This script provides a blank HTML 5 document and loads the specified JavaScript file with a <script> tag.
If I now go to “http://localhost/js_sandbox”, I get a list of all JavaScript files in that directory and I can choose, which one to load via the corresponding link. That way, I don’t have to type the complete URL every time.
When I decide to write a new JS file, I can just drop it into the “js_sandbox” and it’s ready to be tested in the browser of my choice.
Maybe this little tip is useful to you. Have fun, coding JavaScript :)
