Skip to main content

Posts

Showing posts from January, 2013

A brief overview of JavaScript Object Notation (JSON): Part 1

JSON is an extremely common and powerful way of exchanging data across the Internet. It benefits from being lightweight and easy to parse. This first post shows you the basic principles of working with JSON and a second (later) post will extend this discussion to show how JSON is likely to be encountered in the real world and how we begin to work with it when we do encounter it in the real world. The littlest JavaScript object  First lets create a JavaScript object in a regular HTML document (saved as always in a regular text editor – not word processor – with a HTML extension). <!DOCTYPE html> <html> <head></head> <body> <script>var object = {};</script> </body> </html> The name object isn't important (it could be anything – e.g. potato), but var is essential and so too are the curly braces {} and semi-colon. Adding properties (keys) and values Now we're going to add a property to the object. Let's for
Post a comment
Read more

Repackaging Android apps for BlackBerry 10 online or with Eclipse

If your Android app works with version 2.3.3 APIs, you might well find it easier than you expected to repackage (or port) your application to BB10. Take a look at these videos and then visit http://developer.blackberry.com  to find out more. Online tools Eclipse plug-in (for Android Developer Tools) Follow @sketchytech
2 comments
Read more

#cooklikeyoucode: vegetarian toad in the hole

Taking the principles of code, e.g. simplicity, adaptation and flexibility, this series looks to share and recommend recipes. It is also an invitation for you to use the #cooklikeyoucode hashtag to tweet your own recipes that can then be recommend on this blog. This recipe is loosely adapted from a non-vegetarian recipe at  Delia Online . It has additional oil because vegetarian sausages have little fat of their own, it relaxes the ingredients, removes the onions from the toad in the hole, and uses a home-grown gravy recipe rather than the one Delia supplies. Ingredients   6 of your favourite vegetarian sausages (chilled or frozen)  1 and 1/2 tablespoons of oil (vegetable, sunflower, etc.)   3 oz (75 g) plain flour  1 egg (medium or large)  3 fl oz (75 ml) semi-skimmed or whole milk  salt and pepper To make gravy (experimental - use at your own risk) Butter or oil for frying 1 onion, sliced or chopped how you like it 1 tablespoon of flour 1/2 teaspoon of cumin
Post a comment
Read more

A brief overview of XML (extensible markup language)

XML is a way to store and exchange data similar to CSV and JSON. It is popular within the publishing industry for its compatibility with programs such as InDesign and Quark, as well as being at the centre of the DocBook format. Let's get started XML shares many structural similarities with HTML , but the difference is that everything from the doctype declaration through to the elements and their attributes are not predefined and so can be labelled in any way you wish with little restriction. The first restriction is that all elements must be contained within a root element. In HTML we have the root element: <html></html> In XML we can call this root element anything we like: <potato></potato> It must simply exist. What's next? The next thing to add is the content, and as with HTML elements can be nested, but they must have opening and closing tags. <potato> <websites_I_dig> <website>Daring Fireball</website&
Post a comment
Read more

A brief overview of jQuery

Writing code can become repetitive, it can also create bugs and insecurities in your system. A library is a ready-made collection of code created by experts that makes it simpler to write excellent code very quickly. jQuery is a popular JavaScript library and is the inspiration if not the source of lots of interactivity that you see on the web, in particular where items are hidden and displayed either at the click of a button or in real-time. One of the main advantages of using jQuery is the easy separation that it allows between code and content. This means there is less risk of confusion and that others can interpret your code more easily. This is because with jQuery we can dispose with "onclick", "onsubmit", "onchange" and the writing, and calling, of functions from inside HTML element tags. First step Our first step is to wire our page up to the jQuery code. For now we'll not download the library itself but assume that you are online when
Post a comment
Read more

A brief overview of JavaScript

JavaScript JavaScript is a web language used for elements on a web page that are subject to change or can be changed manually. Think of the date and time, they are continually changing and if you wanted to include them on a page you wouldn't want to update them every single second. Tell me more Like CSS and HTML , JavaScript has a tag to let the web browser know what we want it to do. The tag is <script></script>. The simplest thing we can do with JavaScript is to write something on a web page. We do this with document.write like this: If you copy and paste this text into your text editor and save your file with a html extension (e.g. index.html) then drag it into your web browser, you'll see that it works. But let's do something with the code that makes use of an element that is "subject to change", the date and time. <!DOCTYPE html> <html> <head></head> <body> <script>document.write(Date());<
Post a comment
Read more

A brief overview of CSS (cascading style sheets)

CSS In the previous " brief overview " post, HTML was discussed. In the HTML document that was created there was a <head> area which I didn't go into detail about. Today we're going to revisit that document and make use of the head area with some of the "invisible" code I mentioned. It's called CSS (Cascading Style Sheets) and it has its own tag <style>. As the name suggests we use the tag to add "style", colour and hopefully some pizzazz. Back to the HTML <!DOCTYPE html> <html> <head></head> <body> <h1>My first HTML document</h1> <p>I'm really proud of this, doesn't it look great! <a href="http://sketchytech.blogspot.co.uk">I learn't how to do it here</a>.</p> </body> </html> Next the CSS CSS is written using curly braces and style instructions. So first of all we're going to change the appearance of our h1 and
Post a comment
Read more

Reading your favourite blogs on iPad

If you're reading this post on a desktop, take your cursor over to the top-right side of the page and hover over the three buttons. Click on the bottom one and you'll see an option to add to Google Reader. (On iPad you should see two buttons, and you need simply to touch the bottom one for the same options.) Note: If you're not already signed up to Google Reader, you might not see the option – you'll need to sign up at http://www.google.com/reader  and you'll also need to be signed into Google to subscribe to a blog . Now you can read sketchyTech from inside Google Reader, but more importantly you can free yourself from the web browser when using an iPad and read all your blogs in one place with apps like  River of News . If you prefer the more casual approach and don't want to sign into a Google Reader account, but want to be able to quickly search for RSS feeds by name then Need for Feeds  might well be for you. Aside from gathering together all the
Post a comment
Read more

A brief overview of HTML (hypertext markup language)

HTML HTML is the language behind the web, the thing that your web browser interprets in order to display text and images. Writing an HTML document doesn't require expensive software, it can be done for free in a regular text editor (e.g. Windows: Notepad, Notepad++; Mac: TextEdit, TextWrangler). Note: If you use an editor like Apple's TextEdit then make sure it is in Plain Text mode – Shft+Cmd+T toggles between rich text and plain text. An HTML document in its simplest form can be written: <html>My first HTML document</html> The angle brackets are important, they contain the "tag" that describes the content. Tags are "paired", i.e. there is an opening tag and a closing one. The closing one is identical except for the forward slash. What do I do now? Create a (plain) text document containing the above HTML and save it with a .html extension (i.e. replace .txt in the filename with .html). Next drag (or open it) in a web browser (e.
4 comments
Read more

A brief overview of CSV (comma-separated values)

As the name suggests, a CSV file is simply a set of values separated by commas or a delimiting element such as a semi-colon or even a tab-space. It enables you to record data in columns and rows, for example in its most basic form: "ID", "Date", "Time", "Message" "1001", "11Feb2012","03:06","How's that CSV post coming along?" "1003", "10Mar2012","11:12","Is it ready yet?" Note: Typically the first row contains the column headers, and be aware that the quotation marks are non-essential and can be mixed and matched - e.g. used only when commas or other special characters might interfere with how the data is parsed. Try copying and pasting the above code into a text editor like TextWrangler and saving the file with a .csv extension. Make sure that there are no white spaces between the commas and the quotation marks, and that the end of every line has
Post a comment
Read more

Procreate (iOS) tips and tricks

Copy, duplicate or delete a layer Open layer menu (top right, one square on top of the other symbol), swipe your finger across the layer you want to copy, duplicate or delete from left to right and then select option you'd like Lock a layer Open layer menu and drag layer you want to lock from right to left until you see the blue alpha symbol and then let go (repeat to release layer) Fill, merge, change opacity of a layer Open layer menu and tap the layer you want to change. Alternatively, merge can be performed on multiple layers by pinching together the layers you wish to merge. Layer blend mode Open layer menu and tap the "N" button of the layer you want to change Resize, rotate or mirror an object With the correct layer select, press the arrow button (top left) Insert a photo, share, use camera and more actions Press  spanner icon Create own brush In brush menu (top right) press plus sign, choose sour
3 comments
Read more

iOS workhorse apps - the ones that do the real work

4-31-5-5 A Pumpjack in southern Alberta fueled by natural gas. A list of iOS workhorse apps in no particular order Textastic (code and text editor with capabilities beyond your wildest dreams, includes regular expression search and replace, zip/unzip) SketchBook Pro (bitmap art with PSD export) Procreate (bitmap art with PSD export) Kodiak PHP (preview PHP without a web connection) Pages (Word docs, Pages docs, RTF) GoodReader (comment and mark up PDFs, zip/unzip files) Adobe Ideas (free form vector art) TouchDraw (flowcharts and vectors) iBooks (EPUB/PDF reader) Kindle (no explanation needed) Keynote (presentation app) Numbers (spreadsheet app) Adobe Photoshop Touch (sophisticated photo editor) Daedalus Touch  (markdown with EPUB export) Dropbox (versatility can't be matched) Follow @sketchytech
Post a comment
Read more

Three steps to viewing hidden files like .htaccess in TextWrangler without using Terminal

What do I do? (1) drag folder containing file from Finder to TextWrangler (in the Dock) (2) click on the magnifying glass beneath the list of files (3) select "Everything" beneath the "Show" heading Are there any other tricks I should know about? When using the Open dialog box (File->Open...) you can reveal hidden files by pressing Shft+Cmd+. and hide them again doing the same. Follow @sketchytech
Post a comment
Read more

Super simple .htaccess rewrite to create user friendly query URLs

So you want to remove extensions from your PHP files and have glamorous and readable urls that contain queries? The first step is to create a .htaccess file, which should contain the following code and be saved in the same folder as you intend to save the index.php file RewriteEngine on RewriteRule ^([a-zA-Z0-9]+|)/?$ index.php?name=$1 # Handle requests for "index.php" What does all this stuff mean? We're turning on the rewrite engine and writing a rewrite rule, then inserting some regex and telling the rewrite engine what to do with the text from the URL string in the index.php?name=$1 part OK, I kind of get it what's next Now create the index.php file and insert the following <?php echo $_GET['name']; ?> Now it's time to test You'll need to be running something like MAMP or have this code on your server. Type the first part of the URL so that you are pointing the web browser at the folder that contains the two files
3 comments
Read more