Bootstrap 3 – Write Run And Share On The Bootstrap Playground

Here is a great example of Bootstrap Playground! An expandable boot strap 3 table.

Run Here 

 

Jquery

$('.collapse').on('show.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#grandparentIcon').html('v');
  }
});

$('.collapse').on('hide.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#' + groupId + 'Icon').html('>');
  }
});

 

HTML

<div id="grandparent" class="list-group-item">
    <div id="expander" data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse" data-target="#childOne">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse" id="childOne">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>
          
          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          
          
          <tr data-toggle="collapse" data-target="#childTwo">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse" id="childTwo">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

Clash Of Code’s Review

Coding Game 

Today while taking a break, browsing my Facebook feed, I saw a sponsored add. At first, I was reluctant thinking here we go another money grabbing scheme which will ask you to register and require money for continuous play. A game which isn’t challenging or aimed for younger less experienced developers, oh boy was I wrong.

initial

 

Once signed up I played some puzzles and AI tasks which took me about an hour to complete. I had to think about programming coordinates to move a game character to reach a goal.

Just when you think things couldn’t get any better there are achievements, leader boards and community challenges!

Capture

 

The above screen shot was a group game where five other developers joined to see who could complete the task in the fasted time, I failed to beat KnittingDev but I aim to get better and seek my revenge! Participates can also choose there own choice of language to make this as easy or as hard as you like depending on your knowledge of a programming language.

This was an unexpected turn to the day where I found another great excitement in coding. I honestly can’t rate this game any higher in my eyes. I think it’s a wonderful way to seek challenges as as developer. I rate this game 10 out of 10 and I hope other developers will take this up and join the leader boards of developers!

Thanks for reading,

Joshua

Smarter Coffee Machine

Hey Guys!

I’ve decided to bring together a little project for myself. I’ve recently been researching a WiFi Coffee Machine from Amazon.

71Svkhn6esL._SY500_

Smarter Coffee Machine – WiFi Connected Compatible with iOS and Android

The idea here is to send over commands from a artificial intelligence communication bot we call HUBOT, this bot will be listening in a work based chat room for certain terminology.

When the bot picks up a phrase “Hubot please make a brew” it will send the commands to the coffee maker which will start processing the coffee. I intend to complete this project and allow my work colleagues and I to send it commands from either the app or the Hubot chat room.

This will have to be deactivated at certain time intervals to prevent hacking the device which I’ve found to be possible here.

This is going to be an exciting experiment and I’ll keep you posted as I go along!

MSDN 70-480 – Programming in HTML5 with Javascript and CSS3

Hello,

I’ve recently took it upon myself to take part in a Microsoft exam. Throughout this blog I will be constantly updating it with revision material I found useful when revising for the exam.

A brief 45 minutes video well worth watching which explains what to expect when participating the exam, this is well worth a watch and I recommend starting here to get a overall look at the exam. Christopher Harrison also demonstrates some none exam questions to challenge you.

MSDN Website 

 

Jump Start Tutorial Videos 

These videos staring Jeremy Foster and Micheal Palermo are both free to the public and give in great examples in detail on each aspect of possible exam questions. There is a lot of hours of content to get through but depending on your experience you can speed up the videos and skip a lot of what you know

Video link – JumpStart

Part 0    Getting Started

Part 1    Semantic Markup, Forms, Media and SVG

Part 2    Cascading Style Sheets (CSS)

Part 3    Advanced Layouts and Animations

Part 4    JavaScript Core Capabilities

Part 5    Manipulating the DOM

Part 6    Advanced Topics

I’d also like to point out that some people in the comments didn’t pass the exam from watching these videos alone, so to enhance your possibility of passing you should also give yourself practical projects to accompany them.

Other Blogs

Chris Pietchmann’s Blog –  Very short followed by some free video courses and advice

Matt Menezes’s Blog – References to other useful blogs

 

1 Implement and Manipulate Document Structures and Objects

1.1 Create the document structure

1.2 Write code that interacts with UI controls

  • <<Add your resources here>>
  • <<Add your resources here>>

1.3 Apply styling to HTML elements programmatically

  • <<Add your resources here>>
  • <<Add your resources here>>

1.4 Implement HTML5 APIs

  • <<Add your resources here>>
  • <<Add your resources here>>

1.5 Establish the scope of objects and methods

1.6 Create and implement objects and methods

  • <<Add your resources here>>
  • <<Add your resources here>>

2 Implement Program Flow

2.1 Implement program flow

  • <<Add your resources here>>
  • <<Add your resources here>>

2.2 Raise and handle an event

  • <<Add your resources here>>
  • <<Add your resources here>>

2.3 Implement exception handling

  • <<Add your resources here>>
  • <<Add your resources here>>

2.4 Implement a callback

  • <<Add your resources here>>
  • <<Add your resources here>>

2.5 Create a web worker process

  • <<Add your resources here>>
  • <<Add your resources here>>

3 Access and Secure Data

3.1 Validate user input by using HTML5 elements

This objective may include but is not limited to: choose the appropriate controls based on requirements; implement HTML input types (for example, , , ) and content attributes (for example, required) to collect user input

  • Dive into Html5 – forms
  • Html forms guide
  • Input types – Know what these types of input are!
    • Existing
      • Text
      • button
      • checkbox
      • file
      • hidden
      • image
      • password
      • radio
      • submit
    • New in Html 5
      • color
      • date
      • datetime
      • datetime-local
      • email
      • month
      • number
      • range
      • search
      • tel
      • time
      • url
      • week
    • type Attribute
  • Attributes – know what they do!
    • These are important ones
    • accept – used for file input only
    • autocomplete – can turn off
    • autofocus
    • max, min, step
    • pattern
    • placeholder
    • required
    • formnovalidate
    • and more

3.2 Validate user input by using JavaScript

  • <<Add your resources here>>
  • <<Add your resources here>>

3.3 Consume data

  • <<Add your resources here>>
  • <<Add your resources here>>

3.4 Serialize, deserialize, and transmit data

4 Use CSS3 in Applications

4.1 Style HTML text properties

  • <<Add your resources here>>
  • <<Add your resources here>>

4.2 Style HTML box properties

4.3 Create a flexible content layout

  • <<Add your resources here>>
  • <<Add your resources here>>

4.4 Create an animated and adaptive UI

  • <<Add your resources here>>
  • <<Add your resources here>>

4.5 Find elements by using CSS selectors and jQuery

4.6 Structure a CSS file by using CSS selectors

  • http://www.w3.org/TR/css3-cascade/
  • <<Add your resources here>>

Welcome to my site

Thank you for taking the time to view my blog, I’m passionate about coding and while I may only know a drop in the ocean of what is out there I intent to bring together what I do know for people with less experience and want to find study material that I spent time seeking when I first started off.

I’m usually quite an active person, despite sitting at a desk writing blogs and writing code. I enjoy pushing myself to new levels. During 2015, I’ve enjoyed swimming, football, biking and running. I’ve participated and enjoyed signing up to many running events: Mersey tunnel 10K, Bolton 10K and a Race For Life 5K. The primary goal for the future is to sign up to harder events such as iron man, tough mudder, half marathons and eventually full marathon.

Amongst my other leisure activities, I also participate in weekly Thai Boxing classes; I started this activity in May 2014, after attending on average 3 classes a week, I now help out with the children’s classes.

Even though I enjoy keeping fit, my main focus is my hobby of computer science. Initially, I like to keep up to date with applications that could benefit and improve my skills: such as automating tasks, learning new programming languages, reading forums, passing exams and certifications to keep me focused on achieving my goals. Contributing on Stack Exchange when ever I can and giving myself projects which will eventually be open source and available on my website.