Saturday 29 June 2013

Making a web page 05: Preparing your orchard

I've been busy of late so I've neglected you, so sorry!

This lesson I'd like us to set up how an environment in which you can carry on learning whenever you want and wherever you are. I code for a living and have to get to grips with lots of different environments. I code PHP and some C# on the server-side and lots and lots of JavaScript on the client-side. Over the years people have come to understand that while you can code using something as simple as Notepad it's sometimes nice to have something that'll give you more help - coding can be hard you know!

This thing that makes coding a little easier is called an IDE and there are many out there to choose from. Sometimes a simple editor like Notepad can offer IDE-like features (One of my favourite editors is called Boxer and I used to use that only as it is really good at accessing files over the internet using FTP, which is a way of transferring files between machines on the internet. Lately I've also been using Sublime Text 2 which is cool in it's own way. I've bought both editors as I think that coders should be rewarded for the hard work that they do and because I value how each makes aspects of my coding life a little easier). But these types of editors only go so far! I appreciate both for the tools they offer me but sometimes I need a little more, this is when an IDE can come in useful.

Anyway, my environments for coding are pretty split, when doing PHP for fun stuff at home - and sometimes at work - I like to use PHPStorm. When at work I'm mostly using Visual Studio. PHPStorm costs money but I think it's worth it, Visual Studio has a free version which is cool as I still don't know all the ins and outs of either program and I use them nearly ever day! That can be a problem with IDEs - sometimes the work associated with learning their peculiarities means that you become more efficient in what you're doing, sometimes it's simply a waste of time - I guess that that's a decision you'll have to make as you progress along the path.

But this discussion about how I do things is all well and good, I've linked to 4 different editors or IDEs that I, or my employer, have paid for but I want you to do things for free (yes, I know that you can download a version of Visual Studio for free but that limits you to working on one PC - what about if you want to create a little webpage anywhere? You could end up spending the time you could be creating installing Visual Studio on another machine!).

If you've been reading this blog for a while you'll know that I've gotten really quite excited about being able to share content using Google's Drive. This is, in my own opinion, quite possibly one of the best things since sliced bread (and I really like sliced bread - especially toasted and with Marmite on!). In order to take advantage of this all you need is a Google account... what with Google+ becoming more and more popular and as good as - if not better than - Facebook you've probably already got one. If not then go ahead and set one up now. Go on, I'll be waiting when you get back.

...

Back? All done? Cool!

So now you're back? And reading this in one tab of Chrome (You are using Chrome aren't you? If not go and install it now - I'll wait.) with Gmail open in another tab? If not set that up - it's dead easy to have multiple tabs open in a browser. In Gmail, click Drive along the top black bar and create a folder and... actually I've found a really cool page with instructions so just go there and follow the instructions and then come back.

We'll start putting stuff on your site soon but look at what you've just done! You've spent 5 minutes setting up hosting for a webpage and it hasn't cost you a penny! Google are offering it to you for free! You've no idea how big a thing this is but not so very long ago you'd have to spend quite some time setting up a domain name and hosting but now it's almost a throwaway thing. I've done this myself a number of times and it just gets quicker, easier and cheaper each time. Ain't progress grand?

This post hasn't had any code or markup but it has had a lot of preparation for getting a lot more stuff done later on down the line. As I note above that preparation hasn't been all that hard but it has allowed you to host your future work for everyone to see so it's not at all bad really is it? We've looked at some tools that you might want to invest in in the future but hold fire until next time and I promise I'll show you a free semi-IDE.

Friday 28 June 2013

UK Housing price changes

I love data visualisations and I've been playing lots of charts for #2 son's grades and scores in homework and exams (Bloody well done that lad) so I really, really liked this article on Flowing Data. It did get me wondering though about the state of play in the UK so after a wee bit of research I found a lovely spreadsheet with the data on it. I imported bit's into a Google Spreadsheet and started charting:

Wednesday 26 June 2013

websafe color names and values

I'm going to be needing this soon, so I thought I'd put it here for others if they want it:

[
    {
        "name": "AliceBlue",
        "value": "#F0F8FF"
    },
    {
        "name": "AntiqueWhite",
        "value": "#FAEBD7"
    },
    {
        "name": "Aqua",
        "value": "#00FFFF"
    },
    {
        "name": "Aquamarine",
        "value": "#7FFFD4"
    },
    {
        "name": "Azure",
        "value": "#F0FFFF"
    },
    {
        "name": "Beige",
        "value": "#F5F5DC"
    },
    {
        "name": "Bisque",
        "value": "#FFE4C4"
    },
    {
        "name": "Black",
        "value": "#000000"
    },
    {
        "name": "BlanchedAlmond",
        "value": "#FFEBCD"
    },
    {
        "name": "Blue",
        "value": "#0000FF"
    },
    {
        "name": "BlueViolet",
        "value": "#8A2BE2"
    },
    {
        "name": "Brown",
        "value": "#A52A2A"
    },
    {
        "name": "BurlyWood",
        "value": "#DEB887"
    },
    {
        "name": "CadetBlue",
        "value": "#5F9EA0"
    },
    {
        "name": "Chartreuse",
        "value": "#7FFF00"
    },
    {
        "name": "Chocolate",
        "value": "#D2691E"
    },
    {
        "name": "Coral",
        "value": "#FF7F50"
    },
    {
        "name": "CornflowerBlue",
        "value": "#6495ED"
    },
    {
        "name": "Cornsilk",
        "value": "#FFF8DC"
    },
    {
        "name": "Crimson",
        "value": "#DC143C"
    },
    {
        "name": "Cyan",
        "value": "#00FFFF"
    },
    {
        "name": "DarkBlue",
        "value": "#00008B"
    },
    {
        "name": "DarkCyan",
        "value": "#008B8B"
    },
    {
        "name": "DarkGoldenRod",
        "value": "#B8860B"
    },
    {
        "name": "DarkGray",
        "value": "#A9A9A9"
    },
    {
        "name": "DarkGreen",
        "value": "#006400"
    },
    {
        "name": "DarkKhaki",
        "value": "#BDB76B"
    },
    {
        "name": "DarkMagenta",
        "value": "#8B008B"
    },
    {
        "name": "DarkOliveGreen",
        "value": "#556B2F"
    },
    {
        "name": "DarkOrange",
        "value": "#FF8C00"
    },
    {
        "name": "DarkOrchid",
        "value": "#9932CC"
    },
    {
        "name": "DarkRed",
        "value": "#8B0000"
    },
    {
        "name": "DarkSalmon",
        "value": "#E9967A"
    },
    {
        "name": "DarkSeaGreen",
        "value": "#8FBC8F"
    },
    {
        "name": "DarkSlateBlue",
        "value": "#483D8B"
    },
    {
        "name": "DarkSlateGray",
        "value": "#2F4F4F"
    },
    {
        "name": "DarkTurquoise",
        "value": "#00CED1"
    },
    {
        "name": "DarkViolet",
        "value": "#9400D3"
    },
    {
        "name": "DeepPink",
        "value": "#FF1493"
    },
    {
        "name": "DeepSkyBlue",
        "value": "#00BFFF"
    },
    {
        "name": "DimGray",
        "value": "#696969"
    },
    {
        "name": "DodgerBlue",
        "value": "#1E90FF"
    },
    {
        "name": "FireBrick",
        "value": "#B22222"
    },
    {
        "name": "FloralWhite",
        "value": "#FFFAF0"
    },
    {
        "name": "ForestGreen",
        "value": "#228B22"
    },
    {
        "name": "Fuchsia",
        "value": "#FF00FF"
    },
    {
        "name": "Gainsboro",
        "value": "#DCDCDC"
    },
    {
        "name": "GhostWhite",
        "value": "#F8F8FF"
    },
    {
        "name": "Gold",
        "value": "#FFD700"
    },
    {
        "name": "GoldenRod",
        "value": "#DAA520"
    },
    {
        "name": "Gray",
        "value": "#808080"
    },
    {
        "name": "Green",
        "value": "#008000"
    },
    {
        "name": "GreenYellow",
        "value": "#ADFF2F"
    },
    {
        "name": "HoneyDew",
        "value": "#F0FFF0"
    },
    {
        "name": "HotPink",
        "value": "#FF69B4"
    },
    {
        "name": "IndianRed",
        "value": "#CD5C5C"
    },
    {
        "name": "Indigo",
        "value": "#4B0082"
    },
    {
        "name": "Ivory",
        "value": "#FFFFF0"
    },
    {
        "name": "Khaki",
        "value": "#F0E68C"
    },
    {
        "name": "Lavender",
        "value": "#E6E6FA"
    },
    {
        "name": "LavenderBlush",
        "value": "#FFF0F5"
    },
    {
        "name": "LawnGreen",
        "value": "#7CFC00"
    },
    {
        "name": "LemonChiffon",
        "value": "#FFFACD"
    },
    {
        "name": "LightBlue",
        "value": "#ADD8E6"
    },
    {
        "name": "LightCoral",
        "value": "#F08080"
    },
    {
        "name": "LightCyan",
        "value": "#E0FFFF"
    },
    {
        "name": "LightGoldenRodYellow",
        "value": "#FAFAD2"
    },
    {
        "name": "LightGray",
        "value": "#D3D3D3"
    },
    {
        "name": "LightGreen",
        "value": "#90EE90"
    },
    {
        "name": "LightPink",
        "value": "#FFB6C1"
    },
    {
        "name": "LightSalmon",
        "value": "#FFA07A"
    },
    {
        "name": "LightSeaGreen",
        "value": "#20B2AA"
    },
    {
        "name": "LightSkyBlue",
        "value": "#87CEFA"
    },
    {
        "name": "LightSlateGray",
        "value": "#778899"
    },
    {
        "name": "LightSteelBlue",
        "value": "#B0C4DE"
    },
    {
        "name": "LightYellow",
        "value": "#FFFFE0"
    },
    {
        "name": "Lime",
        "value": "#00FF00"
    },
    {
        "name": "LimeGreen",
        "value": "#32CD32"
    },
    {
        "name": "Linen",
        "value": "#FAF0E6"
    },
    {
        "name": "Magenta",
        "value": "#FF00FF"
    },
    {
        "name": "Maroon",
        "value": "#800000"
    },
    {
        "name": "MediumAquaMarine",
        "value": "#66CDAA"
    },
    {
        "name": "MediumBlue",
        "value": "#0000CD"
    },
    {
        "name": "MediumOrchid",
        "value": "#BA55D3"
    },
    {
        "name": "MediumPurple",
        "value": "#9370DB"
    },
    {
        "name": "MediumSeaGreen",
        "value": "#3CB371"
    },
    {
        "name": "MediumSlateBlue",
        "value": "#7B68EE"
    },
    {
        "name": "MediumSpringGreen",
        "value": "#00FA9A"
    },
    {
        "name": "MediumTurquoise",
        "value": "#48D1CC"
    },
    {
        "name": "MediumVioletRed",
        "value": "#C71585"
    },
    {
        "name": "MidnightBlue",
        "value": "#191970"
    },
    {
        "name": "MintCream",
        "value": "#F5FFFA"
    },
    {
        "name": "MistyRose",
        "value": "#FFE4E1"
    },
    {
        "name": "Moccasin",
        "value": "#FFE4B5"
    },
    {
        "name": "NavajoWhite",
        "value": "#FFDEAD"
    },
    {
        "name": "Navy",
        "value": "#000080"
    },
    {
        "name": "OldLace",
        "value": "#FDF5E6"
    },
    {
        "name": "Olive",
        "value": "#808000"
    },
    {
        "name": "OliveDrab",
        "value": "#6B8E23"
    },
    {
        "name": "Orange",
        "value": "#FFA500"
    },
    {
        "name": "OrangeRed",
        "value": "#FF4500"
    },
    {
        "name": "Orchid",
        "value": "#DA70D6"
    },
    {
        "name": "PaleGoldenRod",
        "value": "#EEE8AA"
    },
    {
        "name": "PaleGreen",
        "value": "#98FB98"
    },
    {
        "name": "PaleTurquoise",
        "value": "#AFEEEE"
    },
    {
        "name": "PaleVioletRed",
        "value": "#DB7093"
    },
    {
        "name": "PapayaWhip",
        "value": "#FFEFD5"
    },
    {
        "name": "PeachPuff",
        "value": "#FFDAB9"
    },
    {
        "name": "Peru",
        "value": "#CD853F"
    },
    {
        "name": "Pink",
        "value": "#FFC0CB"
    },
    {
        "name": "Plum",
        "value": "#DDA0DD"
    },
    {
        "name": "PowderBlue",
        "value": "#B0E0E6"
    },
    {
        "name": "Purple",
        "value": "#800080"
    },
    {
        "name": "Red",
        "value": "#FF0000"
    },
    {
        "name": "RosyBrown",
        "value": "#BC8F8F"
    },
    {
        "name": "RoyalBlue",
        "value": "#4169E1"
    },
    {
        "name": "SaddleBrown",
        "value": "#8B4513"
    },
    {
        "name": "Salmon",
        "value": "#FA8072"
    },
    {
        "name": "SandyBrown",
        "value": "#F4A460"
    },
    {
        "name": "SeaGreen",
        "value": "#2E8B57"
    },
    {
        "name": "SeaShell",
        "value": "#FFF5EE"
    },
    {
        "name": "Sienna",
        "value": "#A0522D"
    },
    {
        "name": "Silver",
        "value": "#C0C0C0"
    },
    {
        "name": "SkyBlue",
        "value": "#87CEEB"
    },
    {
        "name": "SlateBlue",
        "value": "#6A5ACD"
    },
    {
        "name": "SlateGray",
        "value": "#708090"
    },
    {
        "name": "Snow",
        "value": "#FFFAFA"
    },
    {
        "name": "SpringGreen",
        "value": "#00FF7F"
    },
    {
        "name": "SteelBlue",
        "value": "#4682B4"
    },
    {
        "name": "Tan",
        "value": "#D2B48C"
    },
    {
        "name": "Teal",
        "value": "#008080"
    },
    {
        "name": "Thistle",
        "value": "#D8BFD8"
    },
    {
        "name": "Tomato",
        "value": "#FF6347"
    },
    {
        "name": "Turquoise",
        "value": "#40E0D0"
    },
    {
        "name": "Violet",
        "value": "#EE82EE"
    },
    {
        "name": "Wheat",
        "value": "#F5DEB3"
    },
    {
        "name": "White",
        "value": "#FFFFFF"
    },
    {
        "name": "WhiteSmoke",
        "value": "#F5F5F5"
    },
    {
        "name": "Yellow",
        "value": "#FFFF00"
    },
    {
        "name": "YellowGreen",
        "value": "#9ACD32"
    }
]

Taken from w3schools.com.