sketchyTech

Posts

Showing posts from January, 2012

Writer's Block: Three OS X apps to help you concentrate

Concentrate This is the most expensive of the three apps considered here. It has some nice features, best of which is that you can assign certain apps to a specific task and close all others. There are also preconfigured blocks that can be placed on social networking sites.

The major problem I had was that using this app in OS X Lion (10.7) I wasn't able to block Facebook and although I could block Twitter in the browser I was still able to use the Twitter app. This meant I wasn't completely locked out of these distractions.
Pomodoro This is the most basic of all three apps. It is little more than a timer (with some added stats tracking). Despite this it is my favourite of the three. I found the concept of the pomodoro the most useful way of concentrating on the type of tasks I am engaged in, and while the program doesn't block anything it does provide a simple way to re-learn self-discipline and employ a productive way of working.

As such I found myself converted to the wh…

Javascript and the DOM: innerHTML, createElement and appendChild

Let's suppose first of all that we have a simple list and a button, and when we press the button we want to change the contents of the first list item. Here's the HTML of the list and the button
<html> <button onclick="changeItemOne();">Change List Item 1</button> <ul> <li id="listItemOne">List Item 1</li> <li id="listItemTwo">List Item 2</li></ul> </html> and inside the function is a single line of code.
<script> function changeItemOne() { //change the inner HTML of the element document.getElementById("listItemOne").innerHTML="You changed me"; } </script> The whole thing looks like this:
<html> <script> function changeItemOne() { //create the inner HTML of the element document.getElementById("listItemOne").innerHTML="You changed me"; } </script> <button onclick="changeItemOne();">Change List Item 1<…

Removing a jammed CD/DVD from a Mac SuperDrive

Living with children who like to think SuperDrives should work like jukebox CD players from the 1990s, and stick one CD/DVD in on top of another, I'd like to express my thanks to this video. I used a couple of flyers (essentially lightweight postcards) to pincer out the DVDs from a MacBook, which worked well and I didn't damage the SuperDrive, which is a fantastic bonus. Doesn't mean Apple would recommend it or that it wouldn't void your warranty, but the choice there is yours and yours alone, I don't accept any responsibility for damage caused, and don't encourage you to try this at home, I'm purely reporting my own findings. If you have a stuck DVD then try these things first as reported by CNET.

How to enable the Record Macro option in LibreOffice

If you've tried to record a macro in LibreOffice you might well have come up against a barrier that isn't dealt with in the help guide: greyed out text when trying to select "Record Macro" from the Tools menu.
Don't worry there is a simple solution, which can be found on the forums, it just isn't that obvious. Hence the walk through.Step one: open preferences from the LibreOffice menu.
Step two: within the dialogue box select the second option from the LibreOffice menu ("General"), then tick the very last checkbox ("Enable experimental [unstable] features").
You will now be able to return to the Tools menu and record of macros from within LibreOffice.

How to stop and start CSS animations in Firefox, Chrome and Safari

Following the previous post, I thought it would be good to outline how to get the CSS animations and event listeners responding across all browsers that support them.

I found, however, that Firefox is less consistent in its markup than Safari and Chrome, we therefore need to be careful. First, the CSS for the element that is going to be triggered at the end of the first animation needs the following CSS explicitly added:

-moz-animation-play-state: paused;
We also need to note that the events we are listening for are "animationstart" and "animationend" but to add the CSS style using Javascript to the element we would like to stop and start it is necessary to use MozAnimationPlayState, and this must be capitalized exactly as shown, which is neither written in the same case as webkitAnimationPlayState nor written animationPlayState as one might expect from the listeners.

For further clarification here is the code in full.

<!doctype html>
<html>
<h…

How to stop and start CSS animations

The previous post considered event listeners to record events and relay information about them, but event listeners can also be used in conjunction with CSS to stop and start animations. This removes the need to calculate when successive animations in a sequence should begin. It also enables a single animation to begin, for example, on a mouse click or some other event on the page and to then trigger further animations at completion.

First we need to add the style -webkit-animation-play-state to our CSS and this can be set to 'paused' or 'running', and this is exactly what the following script does.

<script>
function setup() {
var e = document.getElementById("block");
e.addEventListener("webkitAnimationStart", listener, false);

e.addEventListener("webkitAnimationEnd", listener, false);

}
function listener(e) {

switch(e.type) {
case "webkitAnimationStart":
document.getElem…

CSS animations and Javascript event listeners in Firefox, Chrome and Safari

Mozilla has published details on how to utilize event listeners with CSS animations in a concise example on their developer site. However, while the majority of the code demos - not written examples - they use on their page work also in Chrome and Safari, the event listener demo noticeably does not. In order to fill that gap, I've adapted the code to work on Chrome and Safari.
<!doctype html>
<html>
<head>
<title>CSS animations: Animation events</title>
<style type="text/css">
.slidein { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; -moz-animation-iteration-count: 3; -webkit-animation-iteration-count: 3; -moz-animation-direction: alternate; -webkit-animation-direction: alternate; }
@-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-…

Sequential CSS animations in Chrome and Safari

In the last post I outlined how to get CSS animations working sequentially in Firefox. It is also possible to do the same thing in Chrome and Safari. Apple outlines the code for doing so on their developer site. Once again not making the fill-mode property particularly prominent, and a little tricky to find if you don't know what you're looking for.

The good news is that to make the same code work on Chrome and Safari there is only one simple change required and that is to globally change "moz" to "webkit". For example, -moz-animation-duration should be changed to -webkit-animation-duration, -moz-animation-delay to -webkit-animation-delay, and so on (hence a quick find and replace will serve the purpose). The result of which should be:
<html> <head> <style type="text/css"> body { margin: 0; background-color: lightgray; } h1 { /* duration set to required length in seconds */ -webkit-animation-duration: 6s; /* …

Sequential CSS animations in Firefox

A guide to CSS animations in Firefox can be found on the Mozilla Developer Network site. There you will find information on how to set the duration, keyframes and delay of your animation, but the one thing that doesn't quite receive the attention it deserves is the rather oddly named -moz-animation-fill-mode.

It is the setting of the "fill mode" that determines whether the end point or the beginning point of the animation is displayed on the screen when the page first loads. If you wish for example one element to slide up and then another to slide in, then this will be a very useful setting, and in such an instance needs its value set to "backwards" or "both".

In order to demonstrate such a scenario using keyframes, cut and paste the below code into an .html file and load it in your Firefox browser (this will not work in Internet Explorer or Safari, they will ignore all keyframes references, leaving the page in its static end state).

<html> …

Why are there two ways to define a function in Javascript?

Typically there are two ways to define a function in Javascript. The first is to write:
var myFirstFunction = function() { } For example:
<html> <script> var myFirstFunction = function() { return 1; } document.write(myFirstFunction()); </script> </html> and the second is to write:
function mySecondFunction() { }
For example:
<html> <script> function mySecondFunction() { return 2; } document.write(mySecondFunction()); </script> </html>
The question is why bother to learn both? Is there any difference? One of the best places on the Internet to ask coding questions like this is Stack Overflow and it is indeed here where we find an answer thanks to Greg and David Murdoch.

Greg and David explain that "The difference is that [the first type of function] is defined at parse-time for a script block, whereas [the second type of function] is defined at run-time". This means that in the first type the function must be defined before …

Javascript and Regular Expressions: Add hyperlinks to user text

Following the Power of PHP tutorial on adding hyperlinks to text that has been input by a user, I thought it would be fun to do the same in Javascript. I haven't done a walkthrough this time but instead have commented the file. Cut and paste it into a text file saved with the .html extension and have a look.

<html>
<body>
<script>
function addHyperLinksToText() {

//Load the contents of the textarea into a variable when the function is used
var a = document.getElementById('field1').value;

//Define the pattern of the Regular Expression
var patterns = /(http:\/\/|https:\/\/|)([a-zA-Z0-9\-\.]+\.)
(com|co.uk|org.uk|org|net|mil|edu)/gi;

//Make the replacement of all text fitting the pattern
var livetext = a.replace(patterns, "<a href='$1$2$3'>$1$2$3</a>");

//Place this text into the desired place on the page using the ID element
document.getElementById('field2').innerHTML=livetext;
}</script>

Enter your text here:<…

Seven steps to segue from a Label or UIView: Move between View Controllers in Xcode storyboards (iOS 5 onwards)

In simplistic terms a segue is like an app's internal hyperlink system that enables movement between View Controllers, and here's seven simple steps on how you create them from scratch.

(1) First we need to create our SimpleSegue.xcodeproj file, a straightforward single view application will be fine.

(2) Next we need to navigate to the MainStoryboard.storyboard file and drag a label onto our View Controller and format it as required using the inspector (make sure also to check user interaction enabled)

(3) We then need to drag and drop onto this label a Tap Gesture Recognizer (if we had used a Round Rect Button this wouldn't have been necessary, but I wanted to demonstrate that buttons aren't the only way to segue)

(4) The next step is to embed this View Controller in a Navigation Controller using the Editor->Embed In option from the top menu bar

(5) We then need the new View Controller that we are going to move to, so zoom out and drag one of those onto your storyb…

Power of PHP: Return a value

Last time we provided the function within a class with some text provided by the user and then it did something with this. But what if we wanted a function within a class to return a value that we can then present and manipulate?

In order to do this we'll create a class with three elements, the first of which is a public variable and the other two of which are functions.

First of all the public variable needs to be declared within the class like this:

//Create a public variable
public $data;
Next we're going to supply a method by which the public variable can attain a value:

function addData ($newdata) {
//Add a value to the public variable
$this->data=$newdata;
}
Finally the class will do something with this value:

function returnData () {
//Return the value of the public variable + 10
return $this->data+10;
}
The final function adds 10 to whatever data is provided, which isn't anything dramatic but it demonstrates the point.

Our entire class therefore reads…

Power of PHP: Add hyperlinks to user's own text

Last time we included a class to add hyperlinks to our text, but we just added the text as a local variable. This time we're going to let the user input text and we'll add the hyperlinks for them. For this we need to add some HTML. How do we do this? Simple just add regular HTML tags to the beginning and end of the PHP file. (note: we still save the file with the extension .php despite including HTML)

The HTML means we can create a form, and that form is going to look like this:
<html> <form action='UserTextAddHyperLinks.php' method='post'> <textarea name='hypertext' rows=5> </textarea> <input type='submit' value='add hyperlinks' /> </form> </html> The form action points to the same file as we are adding code to. There is no separate file, so we save our file as UserTextAddHyperLinks.php

Next we need to write the PHP code, which looks almost exactly the same as last time but with one differe…

Code Editors, IDEs and Live Previewers for OS X

Aptana Studio 3
A free development IDE (Integrated Development Environment) for the web. If you are interested in cross-platform app development this might be the one for you since it is now developed and owned by Appcelerator. Similar to NetBeans in approach - especially with the extensive on-demand code dictionary - although not as easy on the eye (using default settings) and not as intuitive in all areas.

BBEdit
This is often the editor of choice. It has code completion and a good range of practical tools.

Coda
Nice crisp layout, and it is a little easier and more intuitive to begin with than BBEdit. Whether this warrants its price tag (around twice that of BBEdit) is a question that only personal choice can answer.

CodeRunner
This is a new app for writing and running all kinds of code. It is available on the Mac App Store and is currently very popular.

Dashcode
This is free and comes bundled with Xcode. It is designed to create web apps for Safari and Mobile Safari (as well as Widget…