To Remember – Math.floor

August 14, 2014 Leave a comment
Categories: Tip Tags: , ,

Tips – CSS Selectors and HTML Branches

August 14, 2014 Leave a comment

As i mentioned in a previous post, I’m learning HTML/Javascript at the moment via Codecademy and will post stuff I have learnt, so others who follow/Google can learn. These are just snippets, but the site is a great learning tool.

So CSS Selectors – CSS is a very powerful way of styling and positioning your HTML elements. The syntax is simple, you use the HTML element as the selector! Good example is if you want all your list elements to have a red background color:

 

Full code can be found here on JSFiddle.

 

li {
 background-color: red;
}

So the above example will highlight any list (li) element red, What if you want to more selective of what you want as red, say for example just any ordered (ol) list (li) elements red? Easy:

 

Full code can be found here on JSFiddle.

 

ol li {
 background-color: red;
}

So the above example will highlight any list (li) element that is child of a parent ordered list (ol) elements. This small example shows branching works within HTML documents and how CSS selectors traverses the tree using the simple parent/sibling relationships. This is very powerful. And as mentioned in a previous post, you can be more specific by giving a more specific branching.

 

Full code can be found here on JSFiddle.

 

 

ol li {
    background-color: red;
}
div ol li {
    background-color: purple;
}

Images courtesy of Codecademy.

 

 

 

Tips – Javascript Arrays – Refactoring to Filter and Map.

August 4, 2014 Leave a comment

When learning a new language or implementing something new, I tend to “get it working” first which usually doesn’t include elegant code, unless I have written Libraries or extension methods previously to fit the solution. One of these was using Arrays in Javascript. Basically i needed to find the Active User, which was for a client side collection of users for an Admin. So my “get it working” code is the legal (but definitely not regal code), which is a simple function that returns a array of usernames, of people who are Active (i.e. login and use the site):

 

JSFiddle is here.

function getActiveUsers(people) {

    var activeUsers = [];
    var ii = 0;
    for (var i = 0; i < people.length; i++) {

        if (people[i].isActive == true) {
            activeUsers[ii] = people[i].userName;
            ii++;
        }
    }    return activeUsers;
}

Anyway, as I’m learning Javascript presently, I have been reading about prototyping in Javascript and especially about some existing functionality that resides with the Array global object (under Array.prototype). Specially I’m talking about:

Array.prototype.filter()

Array.prototype.map()

 

NB: As those Links note, the Array.prototype property was only introduced within the ECMAScript spec 5.1 (ECMA-262) Edition. This will mean adding some Polyfil code (also provided in the links above) if you wish to use this within old browsers.

Anyway, using these two new methods I was able to go back over my previously “get it working” code above, refactor it and use some of the nicely provided filter and map methods:

JSFiddle is here.

function getUserName(user) {
  return user.userName;
}

function isActive(user) {
  return user.isActive;
}

function notActive(user) {
  return !isActive(user);
}

function getActiveUsers(user){
  return user.filter(isActive).map(getUserName);
}

function getNonActiveUsers(user) {
    return user.filter(notActive).map(getUserName);
}

So now I call into this new getActiveUsers which passes the callback function isActive, which basically only gives me back items from the array where the property user.IsActive is true. The chained map function passes the callback function of getUserName to retrieve the userName only. I have also created the opposite functions as well – i.e. Non-Active users. Both JSFiddles show the code in action, but i goes to show that a little reading, research and thought can help improve code readability and re-usability a great deal.

Categories: Tip Tags: , , , ,

To Remember – CSS Specificity Value

August 2, 2014 1 comment

From Code Academy:

As we mentioned, certain selectors will “override” others if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both <p> tags and happen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists.

Categories: Tip Tags: , ,

8WG – It has been a while

July 25, 2014 Leave a comment

Last year we held another 8weekgame competition, which went down well and there were some surprises and really cool games. Anyway i have been wanting to create a site for 8WG for ages. This year has seen the birth of my son, Chester, so the beginning of the year has been hectic. Now the wife is returning to work, i can return to my evening programming sessions and will take a crack at an MVC site. So over the last few weeks i have been building a functional spec which is nearly finished:

 

Functional Spec

 

Once done i will crack on with some mocks then get started. No time frames on it, but i will break the functional areas into some Trello stories and piece-by-piece, start building.

Categories: 8Weekgame Tags: ,

#8Weekgame – Voting is Open!

February 11, 2013 Leave a comment

Well after 8week’s the contestants have finished their games, play tested, sweated and sworn and cursed to get this far. They have done such an amazing job all of them, and I wish them all the very best of luck.

Voting will open on the 11th February and will finish 11.59pm 25th February. So I know you are itching to play these games, so here they are:

  1. Shaw Young – The Distant Future – This is a browser based game that runs elegantly in Firefox and Chrome.
  2. Peter Lamb – Uprising – This is a PC game and will require you to install the game and various DLL’s if you need them.
  3. Andrew Carmichael – The Beast Hunter - Another browser based game that works best in Firefox.
  4. Charlie Walters – Island of Aeris – Again another browser game that excels in IE10 and Firefox (NOT Chrome though)
  5. Charles Humphrey – Road Rumble -  Like Uprising, this is a PC game that will require an install.

To vote:

  • Play all the games. Give them all a good go as the guys have spent a considerable amount of time and effort into them. A couple of them have a high difficulty curve to begin with, but persevere and you will get hours of enjoyment and find your favourite. Only then move onto the next step……
  • If you haven’t already you will need to ‘Like’ our Facebook page.https://www.facebook.com/8weekgame
  • The Facebook Question will be on the page. Vote for your favourite game.

TIPS:

The Distant Future – You can use create separate teams by dragging the boxes with your player names on them to the rectangle below. This is quite handy in certain scenarios….

Road Rumble – When you first start up hit the “M” key to get the Map up. This is invaluable. You may find you die quite quickly – don’t despair, press the “H” key to request a Helicopter to come to your aid and repair you. Remember also, “G” is for firing your Gun and “R” is for Rockets.

The Beast Hunter – There is a feature whereby you need to hit Start twice at the beginning of the game to have all 14 of your sheep start the game.

Uprising – My only tip is to be patient with this game. It is very clever and sometimes you feel you are in a maze you will never get out of, but that’s the beauty of this game, it keeps giving.

Island of Aeris – Remember to press “ctrl” to grab hold of the vines! I was constantly falling because of this!

A Word from Wordle

January 23, 2013 Leave a comment

Wordle

Unsurprisingly 8Weekgame and the contestants are top! Not long now to the grand unveiling then i hope the names of the games will be top……..

Roll on the 3rd of February.

Enhanced by Zemanta
Categories: 8Weekgame Tags:
Follow

Get every new post delivered to your Inbox.

Join 282 other followers

%d bloggers like this: