Bootstrap: it’s all here

Yes, here… and here.

Advertisements

Bootstrap… 4!

Bootstrap 4 is available in Alpha, so I just updated the CDN references from my previous example accordingly…

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" crossorigin="anonymous"></script>

Bootstrap: simple example

useful online CSS formatter here.

Here for the code:

main.css:

.section-content {
 margin: 10px;
 padding: 1px;
 background-color: maroon;
}
.section-title {
 font-weight: bold;
 padding: 10px;
 background-color: blue;
 color: antiquewhite
}
.section-text {
 padding: 10px;
 background-color: hotpink;
}
.center {
 text-align: center
}
#footer {
 text-align: center;
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: xx-small;
 color: crimson
}

index.html:

<!doctype html>
<html>

<head>
    <title>Simple example with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    		<link rel="stylesheet" href="css\main.css">
</head>

<body>
<div class="container">
<h1>The stream to Oakley</h1>
<div class="row">
<div id="banner" class="span12">
<div class="center">
                    <img src="images/WalkToOakley.jpg" height="200" border="5" /></div>
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<ul>
	<li>Took about 3 hours</li>
	<li>From a photo I took during a walk</li>
	<li>I invented the stream and therefore its vanishing point</li>
</ul>
<hr/>
<div class="span4">
<div class="section-title">The text belonging to section-title - parent</div>
<div class="section-text">Acrylic is one medium</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">Oil is another</div>
</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">And you might use pencil, but it wouldn't have the impact</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12"> &copy; Lucius Verenus</div>
</div>
</div>
</body>

</html>

The editor I used is Visual Studio Code, as usual for me and HTML.

The art is from my painting on my Flickr site here.

Gulp and Karma: simple example

Summary: The “editor” (VSC) runs Gulp as a task manager. On a watched file change, Gulp calls Karma (the test runner). Karma calls Jasmine (the test framework).

My first steps getting to grips with Gulp. Gulp is a task runner, and as I edit code in Visual Studio Code (VSC), I want Gulp to watch for file changes, and to get Karma (which is a test runner) to re-execute the test (in Jasmine), if there is any change to the Code Under Test. This is an abuse of VSC, as it is intended to be a lightweight editor, with Visual Studio Full Fat being more appropriate to this kind of heavy lifting. Whatever.

There are useful examples on GitHub of a GulpFile.js, and some Motivation here.

For getting started, I’m just testing for equality 2 literals, “Black” and “White”… because failure you can control is more instructive than success first time.

VSC has a folder-based project. In that project are js files. For this POC, those js files are a single spec.js file with a simple “black equals white” test, and no dependency on other code, that is, this is a self-contained test in a single spec.js file.

From within VSC, you configure the task runner by pressing F1, looking e.g. for the string ‘Task’ and then selecting ‘Configure Task Runner.’ This creates (or loads an existing) tasks.json file. My current one looks like this (based on the GitHub example above):

My karma.conf.js (I have set the logLevel to the more verbose LOG_DEBUG from the default LOG_INFO; the xSpec.js is just to ensure that I only get a single file):

TasksJson02

My gulp.js:

TasksJson03

and my single file under test, which this for a success:

TasksJson04.PNG

and this for a failure (yes, I know I’m not doing what is in the It clause):

TasksJson05.PNG

As I change the toEqual value, then Gulp is watching, and kicks off the test again, giving respectively ref the above tests (see the Watcher kick in):

and

 

Jasmine: short example

I downloaded the standalone version of Jasmine (referenced a year back). When you run SpecRunner.html, the html just magically executes the steps.

AngularCatPhone: more gotchas in Karma config

Which are in fairness covered in the instructions, but the consequences are not spelt out. Hopefully I’ve annotated the page sufficiently for it to make sense:

And this is what you can expect to see if all is working:

Seeing a test fail

Change the xyz to e.g. xyza.. and a test will fail:

 

Getting Karma working

I know I’ve talked about this before, but just some screenshots to get to the starting point for the AngularphoneCat application.