Using AngularJS with Bootstrap

You may want to utilize some of Angular’s functions within a Bootstrap layout. Here is an example of a full page layout done in Angular

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel-heading">
      <h4 class="panel-title" style="color:#fa39c3">
        <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
          <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
            {{heading}}
          </span>
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse" uib-collapse="!isOpen">
      <div class="panel-body" style="text-align: right" ng-transclude></div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </div>
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
      Hello
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
      <uib-accordion-heading>
        Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
      </uib-accordion-heading>
      World
    </div>
    <div uib-accordion-group class="panel-danger" heading="Delete account">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </div>
  </uib-accordion>
</div>

Bootstrap Page with Navigation Example

If you’re looking to throw up a quick mobile responsive, yet static, web page. This is the basic code for a bootstrap framework with example navigation. As you can see, line 7 contains the bootstrap.css file

If you want to get the latest css file to play around with go to www.getbootstrap.com

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Coding Bootcamp!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <!-- Container Div -->
  <div class="container">
    <!-- Section 1: Navbar-->
    <nav class="navbar navbar-default">
      <!-- Place Fluid Container in Navbar -->
      <div class="container-fluid">
        <!-- Designate a navbar heading -->
        <div class="navbar-header">
          <!-- Collapsible button -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <!-- navbar button elements-->
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span> <!-- first line -->
              <span class="icon-bar"></span> <!-- second line -->
              <span class="icon-bar"></span> <!-- third line -->
            </button>
          <!-- Our brand / logo -->
          <a class="navbar-brand" href="#">The Coding Bootcamp</a>
        </div>
        <!-- The links of our navbar -->
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <!-- a Dropdown menu -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <!-- More links -->
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
      <!--/.container-fluid -->
    </nav>
    <!-- Jumbotron element -->
    <div class="jumbotron">
      <!-- centered text -->
      <h1 class="text-center"><strong>Awesome Header</strong></h1>
      <h2 class="text-center">Smaller Awesome Header</h2>
      <h3 class="text-center">Even Smaller Header</h3>
      <!-- button with predefined style rules -->
      <p class="text-center">
        <a class="btn btn-primary btn-lg" href="#" role="button">
          <span class="glyphicon glyphicon-envelope"></span> Learn more</a>
      </p>
    </div>
    <!-- a Bootstrap row with columns -->
    <div class="row">
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <!-- centered image with thumbnail rules -->
        <img class="img thumbnail center-block" src="http://legacy.nerdywithchildren.com/wp-content/uploads/2013/06/ComfyChildKeyboard.jpg" alt="KidComputer" width="50%">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, molestiae modi accusantium animi magnam veniam, impedit asperiores sint consequuntur debitis fugit quibusdam dolor, iusto sed porro ab minus voluptatibus amet.</p>
      </div>
      <!-- At large+ screens takes up half width (6/12) -->
      <div class="col-lg-6">
        <img class="img thumbnail center-block" src="https://download.unsplash.com/photo-1429051883746-afd9d56fbdaf" alt="LittleCoder" width="50%">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, maiores, quos. At, animi, facilis. Alias itaque ab minima rerum, eaque animi nesciunt harum nemo est cumque voluptas, qui reprehenderit atque.</p>
      </div>
    </div>
  </div>
  <!-- jQuery, javascript file for the Bootstrap's javascript file to function -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <!-- Bootstrap's javascript file that allows the dropdown menu to work  -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

CSS Styling Examples

I wanted to show a couple examples in this CSS example:

1. How to use Google Fonts
2. How to use Font Awesome icons
3. How to style Active, Hover, Focus links and input boxes.

First, in order to use Google Fonts and Font Awesome you need to embed the fonts and the Font Awesome CSS file. (See line 7 and 9 highlighted below)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Lorem Ipsum Styling</title>

	<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

	<link rel="stylesheet" href="fa/css/font-awesome.min.css">

<style>

.container{
	text-align: center;
	padding:4%;
	width: 92%;
}
.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}
.top-para {
	font-size: 58px;
	font-family: 'Prata', serif;
	font-weight: 100;
	line-height: 125%;
	letter-spacing: 2px;
	color: #a08131;
}


p.top-para::first-letter {
    color: #424219;
    font-size:200%;
}  


.mid-para {
font-size: 28px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 900;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para {
	font-size: 18px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #969185;
}
.bot-para2 {
	font-size: 30px;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 1px;
	color: #a08131;
}
.foot-para {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	line-height: 150%;
	letter-spacing: -1px;
	color: #3f3c35;
}
.fa-address-card {
	font-size: 80px;
	color: #a08131;
}
.fa-rocket {
	font-size: 45px;
	color: #3f3c35;
}
.fa-plus {
	font-size: 25px;
	color: #898768;
	margin-right: 15px;
	margin-top: -15px;
	position: relative;
	top: -10px;
}
.fa-male {
	font-size: 45px;
	color: #3f3c35;
	position: relative;
	top: -3px;
	margin-right: 15px;
}
.fa-sitemap, .fa-beer{
	font-size: 45px;
	color: #3f3c35;
	margin-right: 15px;
}

a {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	color:#545441;
}

a:hover {
	background-color: #a08131;
	font-size: 25px;
}

a:focus {
	background-color: #6d6a34;
	font-size: 40px;
}

a:active {
	background-color: #777775;
	font-size: 80px;
}




.boxy {
	padding:8px;
	font-size: 20px;
	font-family: Raleway;
	background-color: #d3d1b3;
	margin:15px;
	border:1px solid #c1c1b0;
}

.boxy:hover {
	background-color: #a08131;
	font-size: 26px;
}

.boxy:focus {
	background-color: #6d6a34;
	font-size: 30px;
}

.boxy:active {
	background-color: #777775;
	font-size: 30px;
}



</style>	
</head>
<body>
	
<div class="container">
		<i class="fa fa-address-card" aria-hidden="true"></i>
	<p class="top-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>


		<input class="boxy" placeholder="Name">
		<input class="boxy" placeholder="Email">
	<br>
		<input class="boxy" placeholder="Address">
		<input class="boxy" placeholder="City, State">

	<p>
		<i class="fa fa-beer" aria-hidden="true"></i><i class="fa fa-plus" aria-hidden="true"></i><i class="fa fa-male" aria-hidden="true"></i>
	</p>

	<p class="mid-para">Nunc rhoncus mollis nisi id mollis. Nulla facilisi. Aenean dapibus quis urna ut ullamcorper. Nam pellentesque neque congue iaculis sodales. Etiam et augue id lorem pulvinar fermentum eget consequat metus.</p>

	<i class="fa fa-rocket" aria-hidden="true"></i>

	<p>
		<a href="#">Click here to blastoff!!</a>
	</p>

	<p class="bot-para">Fusce vel erat justo. Sed volutpat justo quis arcu vehicula convallis eu ut lectus. Etiam ac odio nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget mi viverra, vulputate nisi vitae, sodales purus. Sed bibendum leo sed cursus lobortis. Nulla faucibus venenatis malesuada. Fusce ac est non massa pharetra blandit ut ut ipsum. Sed at tellus eu lectus volutpat gravida. Sed ut nisi a nisl mollis laoreet non in magna. Nullam aliquam neque sit amet commodo suscipit. Vestibulum interdum ornare ante nec tempor. Sed lobortis finibus dui ac consequat. Fusce tincidunt quam imperdiet arcu pulvinar mollis. Fusce eget nibh in diam varius tincidunt. Vivamus bibendum enim in ullamcorper viverra.</p>

		<i class="fa fa-sitemap" aria-hidden="true"></i>

	<p class="bot-para2">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>

	<div style="footer">
	<p class="foot-para">Curabitur non mollis turpis. Integer elementum neque at massa blandit, ornare euismod urna pellentesque.</p>
	</div>
</div>

</body>
</html>

If you see here I embedded some Google fonts then I just used .font-sel to show how to use the different font in your CSS styling of a class.


<head>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Prata|Quicksand|Raleway" rel="stylesheet">

</head>

<style>

.font-sel {
	font-family: 'Quicksand', sans-serif;
	font-family: 'Prata', serif;
	font-family: 'Playfair Display', serif;
	font-family: 'Raleway', sans-serif;
}

Set a Google Timer Countdown

You know how whenever you need a 1 minute timer it takes at least 2 minutes to set a timer on your phone or watch?

Google has something for that.

Say you need to leave for work in 13 minutes? Just go to Google and enter “13 minute timer” and Google will set a timer. Click here for 13 minute Google timer

You can have it make a sound when it finishes or just keep things quiet. You can also send the timer over to any Android device or watch.

Times up…

google timer

DIV Positioning : Fixed, Absolute, and Relative




<!doctype html>
<html lang="en-us">


<!-- HEAD TAG NEEDS TO HAVE LINK TO CSS FILE-->
<head>
  <meta charset="UTF-8">
  <title>Positioning</title>
  <link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
 
 
  <!-- EXAMPLE OF FIXED DIVISION -->
  <div id="fixed">
    <div><br> position: fixed
  </div>

  <div class="wrapper">
  
    <section id="content">
   
      <h1>Heading</h1>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a hendrerit ex, at blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque finibus felis sem, non pulvinar odio fermentum vel. Nunc varius tempus scelerisque.
        Curabitur congue magna vitae velit dictum, eu finibus neque bibendum. In hac habitasse platea dictumst. Aliquam fermentum lobortis felis, in feugiat diam congue ac. </p>
        
      <!-- RELATIVE POSITION DIV -->
      <div id="relative">
        <br> position: relative
        
        <!-- ABSOLUTE POSITION DIV-->
        <div id="absolute">
          <br> position: absolute
        </div>
      </div>
     
      <p>Nulla tempor ornare diam, vitae volutpat erat bibendum eget. Nunc sagittis placerat velit sit amet interdum. Nam in iaculis purus, quis tristique velit. Cras ut nisl vitae orci malesuada placerat non sed magna. Nulla ultrices, dolor at aliquam volutpat,
        lorem magna pharetra arcu, eget feugiat nisi libero at nunc. Phasellus finibus elit at sapien vehicula varius. Maecenas in dapibus leo. Aliquam molestie vulputate metus. Morbi sed posuere quam, et sodales felis. Proin augue nulla, pellentesque
        at venenatis vel, sagittis eget nibh. Maecenas libero velit, luctus eu velit vitae, eleifend convallis felis.</p>
      <p>Nullam imperdiet vehicula dolor eu consectetur. Vestibulum pulvinar lobortis accumsan. Phasellus lobortis pulvinar augue, eu ultrices dui. Donec ut est erat. In facilisis tellus nibh, eu consequat diam commodo a. Nam egestas sapien nunc, ullamcorper
        semper odio feugiat non. Duis et nisl leo. Aliquam consectetur vestibulum turpis. Vivamus non elit ut lorem mattis iaculis. Suspendisse ullamcorper ante orci, et condimentum nisi pharetra id. Praesent ut erat in eros mollis interdum quis ut nisi.
        Etiam ac risus in erat imperdiet sagittis eu sed metus. Etiam molestie ipsum sed vehicula efficitur. Cras eu metus in ex vehicula sodales.</p>
      <p>Maecenas feugiat, ex quis hendrerit interdum, felis ante laoreet sem, vitae tincidunt diam lectus fringilla dolor. Nunc vitae dui sed ligula pharetra sagittis in nec ante. Sed consequat congue vehicula. Donec vel risus at sapien rhoncus consequat
        a lobortis lorem. Mauris ut sem massa. Curabitur ac consequat eros. Nulla non nibh eros. Donec porta condimentum nisi a iaculis. Sed sit amet risus at lacus suscipit accumsan sed ullamcorper lorem. Proin sed egestas risus. Sed egestas ex ac finibus
        ornare.</p>
    </section>
  </div>
  
  
  
</body>
</html>

CSS Class and ID Styling

CSS id syntax:
Id’s are totally unique and can only have a single instance
EXAMPLE
<div id=""top""></div>

The css would be:

#top { color: #232323; }

Multiple changes would go in a class
Any div with the class of “top” will be styled
<div class=""top""></div>

The css would be:

.top { color: #232323; }

Github Basic Commands, Setup a New Repository

GIT HUB

Clone a GitHub project onto my local drive:

git clone git@github.com:sethmh82/uci_class.git

Show the status of Git project and what files are not synced
git status

Add a file to the project
git add first.html

Commit the file to the repository on GitHub
git commit -m "This is my first file"

Push from local to Github
git push origin master

Pull from Github to local
git pull master origin

Saitek X52 Pro Flight System Controller Review

Over the past few years there has been a re-emergence in space flight and flight simulator games. To capitalize on this market a few companies began manufacturing quality, realistic-looking, flight control sticks. Saitek has brought to the market three controllers all with affordable price points. Their mid-level flight stick the X52 Pro comes in at just over $150 and is unbelievably worth the money – I picked mine up on Amazon and it arrived within just a few days.

Upon unpackaging the controllers I was amazed at how much bigger they are in person than what they appeared to be in photos. They are extremely well-built and look like they were pulled right out of a jet fighter. It’s recommended you install the driver before plugging in the controller via USB. Although the driver comes on the CD I just downloaded the latest version from the Saitek website – because who has a CD-ROM drive anymore? The two controllers have wires that join together into one USB plug so you’re only using up one port, it’s little considerations like this that truly make a great manufacturer.

Once plugged in I opened up Elite Dangerous, the spaceflight game I’ve been playing for the last six months. I’ve tremendously enjoyed playing Elite but honestly become a little bored with it and I’m hoping the new controller reinvigorates my love for the game …and that’s exactly what it did.

Elite automatically recognized the X52 Pro and adjusted the default settings for use with the controller. Most of the default settings were perfect but I still had to go into the game settings and tweak a few key mappings for personal preference.

The very first time I flipped the glowing toggle switch to pull up the landing gear and then blast off with my ship I almost shed a tear. I honestly felt like I was flying my ship for the first time, sitting right smack in the cockpit, gripping the throttle control in one hand and the flight stick in the other. The feel and movement is absolutely magnificent. Most of the controller material is plastic but it feels completely sturdy and it gave me that next level of space flight enjoyment I was hoping to get with this purchase. Within minutes I adapted from the old keyboard and mouse control to flying around and making quick maneuvers with the X52 Pro. Probably the best feature is the red guard that protects the firing button underneath. When you flip up the cover your guns deploy and the red button glows red just begging for you to start lighting up some bad guys.

Now with the ability to Control your speed with one hand, Direction with the other hand, and thrusters with your thumb, you can make landings 2 to 3 times faster than ever before. The ability to twist the controller on it’s y-axis and point your nose left and right is a much more intuitive way of controlling your ship. When fully mapped you can pretty much toss your mouse and keyboard to the side and solely use the two controllers.

There is only one complaint I have with the controllers. Often times when I’m in combat and frantically jerking the stick around the base will slide forward or lift off from my desk. The base comes with four suction cups which unfortunately don’t stick well to my wooden desk surface. If you don’t mind making the controller is semi permanent fixtures on your desk surface I suppose you could use Velcro or some kind of clamp to lock them in place. I have also seen some metal controller platforms that wheel underneath your desk and allow you to affix the controllers and adjust the height of the stand but at the price of another $150.

All in all I really freaking love this controller! It has made a six-month Old game feel brand-new and given it a realistic flight simulation experience. Saitek didn’t just try and capitalize on a niche market, they attempted to make a great flight controller and they have done just that with very little compromise. If you are currently playing a flying game or planning on purchasing one you will absolutely want to experience playing it with a flight stick controller.

Simple jQuery Submission Form

Here’s a simple yet robust jQuery submission form. If you analyze the code for just a minute you can easily see how you can add more fields.




<form id="form" action="json/request.json">
  <div class="form-group">
     <label for="inputName">Name
     <input type="text" class="form-control" id="inputName" name="name">
  </div>
  <div class="form-group">
     <label for="inputEmail">Email
     <input type="email" class="form-control" id="inputEmail" name="email">
  </div>
  <div class="form-group">
     <label for="inputComment">Comment
     <textarea class="form-control" id="inputComment" name="comment" rows="6">
  </div>
    <button type="submit" class="btn btn-primary">Submit
</form>

Here’s the JavaScript needed to submit the form:

$(function () {
  var $body = $(document.body),
      $form = $('#form'),
      $name = $form.find('#inputName');

  $form.submitter({
    dataType: 'json',
    start: function (e) {
      if (!$name.val()) {
        e.preventDefault(); // Prevent submit
        $name.focus();

        // Tooltip: http:programming.sethharden.com
        $body.tooltip('Please enter a name', 'warning');
      }
    },
    done: function (e, data) {
      if ($.isPlainObject(data) && data.success) {
        $body.tooltip(data.result, 'success');
      }
    },
    fail: function (e, textStatus) {
      $body.tooltip(textStatus, 'danger');
    }
  });
});

Find Largest Files on Server

Sometimes its necessary to delete large log files or other data files taking up substantial room on your server. You can scan your directories and display files over 10MB using the following command:

find / -mount -noleaf -type f -size +10000k -print0 | xargs -0 ls -lhSr | perl -ne '/(\S+\s+){4}(\S+)\s+(\S+\s+){3}(.*)/ and printf("%*s %s\n",7,$2.":",$4);'

If you want to adjust the minimum file size just up the value +10000k to +50000k which would then only display files above 50MB