In Praise of the Marquee Tag

I’ve created a few internal tools for various tasks over the years. I tend to pop a web front end on them. I also like to pop on a marquee tag somewhere nice and visible so I can marvel at its scrolling majesty. I do it just to amuse myself then I sit back and wait for someone to notice then shout at me to not be so ridiculous and take off the ludicrous, retro, badly supported tag.

Oddly that doesn’t happen. I’ve checked back on the tools after several years of use and the text is still there, loyally scrolling away. I think the tag has a surprising number of supporters and actually there is a deep human need for easy to implement scrolling text. I imagine that other people in the company enjoy gazing hypnotically at the jerky scroll, just as I do.

I reckon I’m going for the blink tag next. An even more popular choice.

70-480 Programming in HTML5 with JavaScript and CSS3 – Study Notes

I recently took MS exam 70-480 (and passed and was surprisingly delighted). So before the good feelings dissolve away I thought I would publish a few notes and useful links. I’m not going to be comprehensive but I’m just going to highlight areas that came up for me that I needed deeper reading on.

Generally

The exam does feel old hat especially the JavaScript section. It is frustrating to have to remember Microsoft specific syntax (AddEventHandler!!!). But I’ve seen worse and there is stuff that is still interesting and relevant in there. The good thing is that there are techniques and syntax that crops up over and over and can really help you winnow the answers down on the exam.

Basic stuff to know

The book

I’m old school and still prefer to start with the written word on bits of paper. The standard book is this …

People are really negative about exam ref books generally and this one gets the obligatory poor reviews (and some goods ones in fairness). But do you know what – it’s fine. It’s not that readable, it’s got a lot of gaps and some of it is out of date now (and maybe was never correct in the first place). But it highlights all the syllabus areas for you then it is up to you to go on and read more. I think people get upset because the book alone isn’t enough to pass the exam. So long as you appreciate that then it’s fine.

Syllabus

https://www.microsoft.com/en-us/learning/exam-70-480.aspx

The key thing is to go through it all with a fine tooth comb (or hair care implement of choice). So biting our lips and going through each section ….

Section 1: Implement and Manipulate Document Structures and Objects

JavaScript

Important bits here is understanding the JavaScript this keyword (notoriously confusion) and a tight tight grasp of JavaScript scope. Other things are

HTML5

  • Semantic elements. If I’m honest, some of the questions have a ‘guess what I’m thinking’ quality to them. Get to grips with the Microsoft party line on when these should be used. Just suck it up.
  • Geolocation API
  • App Cache
  • Canvas appears a lot but there is a lot of stuff out there for instance here and here among lots of other places.
  • SVG. It’s good to know when to use SVG and when to use the canvas elements. For instance SVG scales inherently.

Section 2: Implement Program Flow

JavaScript Arrays

Good grasp of javascript control structures is vital so
array iteration (more detail here) also associative arrays and understand why they iterate differently.

Web sockets

Very high level only. How to call and pass events backwards I forwards. I read this and as interesting as it was it is way too much. Spend less time than I did on this.

Ajax

Conversely Ajax comes up a lot in detail

Web Workers

Web workers also comes up. Specific points I found were

Section 3: Access and Secure data

Reg Ex

Regular Expressions crops up here and and how to call from JavaScript Which methods belong to the regex pattern and which methods belong to the string class are useful to know here.

JQuery Forms

JQuery forms API. Pay attention to differences between serialise and serialiseArray methods and be secure in your knowledge of how to submit forms through JQuery.

JavaScript Encoding

JavaScript encoding and decoding of Uris and query string . Comes up bizzarely often so one to really know. Know which method gives which output and which one to use to ensure that the query string is encoded.

Html5 input types

Html 5 input types. Really useful to memorise them all and know all the possible attributes i.e.

  • step
  • min
  • max
  • title
  • pattern etc…

particular know the attributes that can be used to limit the data input format e.g. type=”number”.

Section 4: Use CSS3 in Applications

I wanted to do this exam primarily to improve my CSS which is my weakest web dev side so I spent a bit of time of this. I’m sure you will need less.

Basics

The cascade

Layout

Layout comes up a lot so

Text

Fancy stuff

Generally with the animation /transitions side of things I found it most useful to look at worked examples of some standard (though clever to me) forms of animations. Card flips and loading spinners are typical stuff.

Never saw

I never saw anything on the drag and drop api.  It had a decent sized section in the Microsoft exam ref book but I didn’t see this on the exam or the revision questions. Don’t blame me if you get 7 questions about it though.

Good luck

And of course best of luck for the exam. As painful as it can be, it does feel good to pass a Microsoft exam. Take it from someone who has passed onto the other side.

Better Numeric Range Input with ASP.NET MVC, HTML5 and JQuery

The Sin

I recently wrote this horrible code to generate a drop down box to select any number from 1 to 12.

Html.DropDownList("ddlClockHours", new List<SelectListItem>
 {
 new SelectListItem {Text = 1.ToString(), Value = 1.ToString()},
 new SelectListItem {Text = 2.ToString(), Value = 2.ToString()},
 new SelectListItem {Text = 3.ToString(), Value = 3.ToString()},
 new SelectListItem {Text = 4.ToString(), Value = 4.ToString()},
 new SelectListItem {Text = 5.ToString(), Value = 5.ToString()},
 @* And so on till 12 – I’m too embarrassed to continue *@
 })

Ouch! It was only a test harness but after an hour I still got sick of looking at it. It’s a sin that needs to be atoned for.

The Penance

For my penance I’ve said 5 Hail Marys and identified three better ways to generate numeric range dropdowns.

Using Enumerable.Range

If I want to stick with MVC and C# then there is a static method on Enumerable that will generate sequences of numbers i.e.

 Enumerable.Range(1, 12)

Will output 1 through to 12 as a list of ints. Leveraging this, my grotesque piece of Razor becomes

@Html.DropDownList("ddlClockHours", Enumerable.Range(1, 12)
.Select(x => new SelectListItem { Text = x.ToString(), 
Value = x.ToString() }));

Which renders out as a normal dropdown as before

Enumerable.Range

Much better.

Using HTML5

Of course we don’t even need to get into C#. If we’ve got the luxury of a modern browser we can just use HTML5 to give us a slider control.

<input id="clockHours" type="range" min="1" max="12"/>

Which renders as

HTML5

Better again.

Using JQuery

If you don’t have the luxury of a modern browser then you can fall back to JQuery UI which has a larger range of supported browsers. The code isn’t that much more but of course you need to reference JQuery and JQuery UI libraries. It’s another slider type control and the implementation is

<script>
 $(function() {
   $("#clockHoursJQuery").slider({
     min: 1,
     max: 12
   });
  });
 </script>

<h2>JQuery Numeric Range</h2>
<div id="clockHoursJQuery"></div>

Which looks like

JQuery UI

So much nicer.

The Atonement

To atone for my sin I swapped out the horrible code for the Enumerable.Range implementation. I think that’s my preference really. I don’t really want to include a whole bunch of scripts and css to get a decent control (JQuery) and I don’t want to limit myself to the latest and greatest browsers (HTML5). Beside I think Enumerable.Range is little known but pretty smart and let’s face it – who doesn’t want to be little known but pretty smart.

Useful links

https://www.dotnetperls.com/enumerable-range
Nice article on Enumerable.Range

http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-handling-numeric-inputs-using-the-number-and-range-input-types.html
More on the HTML slider control

https://jqueryui.com/slider/
Official documentation for the JQueryUI slider control

https://github.com/timbrownls20/Demo/blob/master/ASP.NET%20Core/Demo/Demo/Views/Demo/NumericDropdown.cshtml
As always there are code sample of all implementations on my git hub site.