PowerShell “fun” with text to speech

Writing code can be rather far from glamorous if not downright boring sometimes. PowerShell has its appeal but it is at the end of the day still an administrative framework for task and configuration automation.  Even saying that can hurt… If you’re looking to spice it up a bit the following may help.

function prompt { $text = ‘You are great!’, ‘Hero!’, ‘What a checker you are.’, ‘Champ, well done!’, ‘Man, you are good!’, ‘Guru stuff I would say.’, ‘You are magic!’    ‘PS> ‘    $host.UI.RawUI.WindowTitle = Get-Location    (New-Object -ComObject Sapi.SpVoice).Speak(($text | Get-Random)) }

prompt

 

CSS Preprocessors: getting started with LESS and Sass

You probably have heard of LESS, Sass, Stylus, and others but may not have had a chance yet to figure them out. Here’s a very brief overview…

Why should you be using one of these?
CSS Preprocessors exist to help make your CSS more dynamic. They use their own languages, albeit all rather similar, to do the same things. They make CSS better 

  • Retain browser compatibility
  • Allow for the creation of variables using reusable CSS properties
  • Allow for better code by making it more scalable and modular
  • Introduce parent references, math, mixins, nesting, and error reporting

Which one should you use?
There is no bad choice. Like with anything else in programming other factors are the drivers here. Do you use Ruby? Then you will probably gravitate towards Sass. Are you a heavy Bootstrap user? Then consider looking at LESS or Stylus… Research and see which works for you.

Useful links to get started

  • LESS
    • LESS extends CSS with dynamic behavior such asvariables, mixins, operations and functionsLESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

  • Sass
    • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
  • Stylus
    • “Expressive, dynamic, robust CSS”
  • SimpLESS
    • “The most powerful thing SimpLESS does: Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”
  • WinLESS
    • “WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the webdeveloper who uses Windows.”
  • nib
    • Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier.

JS Library For Image & Vector-Tiled Maps

Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.

Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of image-based web maps.

“Because Polymaps can load data at a full range of scales, it’s ideal for showing information from country level on down to states, cities, neighborhoods, and individual streets.

Because Polymaps uses SVG (Scalable Vector Graphics) to display information, you can use familiar, comfortable CSS rules to define the design of your data.

And because Polymaps uses the well known spherical mercator tile format for its imagery and its data, publishing information is a snap.”

References
PolyMaps: http://polymaps.org/
QuadTiles: http://wiki.openstreetmap.org/wiki/QuadTiles

Javascript transition effects with Blockster

Highlighting your featured content can be quite the challenge. Getting the aesthetics right by pulling the eye in without stabbing it is a valuable skill. A nice tool that you can use when appropriate is Blockster.

Blockster is a Javascript transition effect designed for ‘featured content’ rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.

The script gives you full control over how the script behaves, giving you scope to create some pretty varying effects. You can set the number of rows and cols in the block grid, whether the blocks should fade in or simply appear, whether they should appear randomly, in order, etc.

Mitya likes jQuery

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah – read more

Mitya likes GD

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah – read more

Lorem Ipsum!

Examples, as always, make more sense than words…so go here for more: http://www.mitya.co.uk/scripts/Blockster-transition-effect-122

Getting started with HTML5: Three steps

Even though it is unfinished standard you can and should get started with HTML5 and it is more easy than you may think…

The new Doctype
Is as easy as it can get. Just replace
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">


 with
< !DOCTYPE html>
< html>
and you’re done. Simple.

Video
The format wars are being fought rather publicly these days and the best  part is that it should have little to no effect on you. The < video> tag is able to hold more than one SRC. So your browser can roll down through the options until it finds what will work. Again, simple. The best place to learn more is here: http://camendesign.com/code/video_for_everybody where they have loads of samples such as:

< !– Video for Everybody, Kroc Camen of Camen Design –>
< video width=”640″ height=”360″ controls preload=”none”>
< source src=”__VIDEO__.MP4″  type=”video/mp4″ />
< source src=”__VIDEO__.OGV”  type=”video/ogg” />
< object width=”640″ height=”384″ type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>
< param name=”movie” value=”__FLASH__.SWF” />
< param name=”flashvars” value=”image=__POSTER__.JPG&file=__VIDEO__.MP4″ />
< img src=”__VIDEO__.JPG” width=”640″ height=”360″ alt=”__TITLE__”
    title=”No video playback capabilities, please download the video below” />
< /object>
< /video>
< p> < strong>Download Video:
Closed Format: < a href=”__VIDEO__.MP4″>”MP4″
Open Format: < a href=”__VIDEO__.OGV”>”OGG”
< /p>

Next up, smarter forms.
Weary of validating if that really is an email address or proper URL in that field? Well now the effort is in the lap of the browser. Again, they are really easy to implement. Examples would be

Email: < input type=”email”>
URL: < input type=”url”>
Number: < input type=”number”>
Phone: < input type=”tel”>
Color picker: < input type=”color”>

Slider: < input type=”range” min=”0″ max=”10″ step=”2″ value=”5″>
etc.

Simple, no? Failure is graceful too as the fall back is to text.

Placeholder text for any of these is just as easy!

< input type=”email” placeholder=”Your email address”>

And again, the browser does the work by responding to the cursor by clearing the field automatically. 

And even better! If you need to make it a required field just add “required.”

< input type=”email” placeholder=”Your email address” required>

What if your requirements are not listed? You can build / define your own. For example if you need a credit card field – which would consist of a string of numbers ranging from 13 to 16. Your field would contain this:

 pattern=”[0-9]{13,16}”>

Needless to say there is an awful lot more such as the canvas tag and all of its potential badness and goodness but this should get you started! If you are interested in the Canvas tag there is a good cheat sheet here: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Data Visualization: The Quest for Patterns

Recently I was trying to present a way for individuals to find patterns in large amounts of data. The end result was considered successful and I thought I would share at a high level what was done.

Firstly, the data looked a tad liked this…

Note 1: this is NOT the actual data.
Note 2: C1 and C2 are where I wish to draw interest to in this example. I.e. the final outcome should be a clean visual of the all data with an intuitive focus where C1 and C2 get and send their data.

Certainly not terribly daunting, interesting, nor unfamiliar for the average office/information worker/victim 🙂
Running this through Excel Services really did not produce anything useful. It hinted at associations between the data points but that was it. See for yourself…

Not the best presentation of data I’m sure you’d agree… (Even forgiving the quality of the image.)
So I ran the data around a different set of axis with a bit of custom code and got a dramatically clearer view of the columns and their content associations. At least I think it is.

Colour coding C1 and C2 made things even more clear.

A successful solution!

Moving large numbers of records with SqlBulkCopy

Sometimes you have to move large amounts of data in, out, or around SQL. There are plenty of ways to do that but few are as fast as using SqlBulkCopy. It is not fast. It is blazingly fast. As with anything else it has its place and limitations but it is well worth understanding at the least.
It is pretty easy to work with as the below example shows…
static void CopyData(DataTable sourceTable, SqlConnection destConnection)
{
// new method: SQLBulkCopy:
using (SqlBulkCopy s = new SqlBulkCopy(destConnection))
{
s.DestinationTableName = “SalesCopy”;
s.NotifyAfter = 10000;
s.SqlRowsCopied += new SqlRowsCopiedEventHandler(s_SqlRowsCopied);
s.WriteToServer(sourceTable);
s.Close();
}
}

When used properly it can make seemingly large data volume transactions trivial.

Euler’s identity: a mental segue

Working with code as a creator, configuror (is this really a word?), or troubleshooter has rewards and costs. One of the rewards is seeing / discovering crisp and novel logical patterns used to translate business processes from physical to digital.
Recently I was discussing with somebody how best to present large amounts of somewhat abstract data related to individuals with a goal of ‘perceiving’ subject matter experts in as fluid a fashion as possible. (Clearly I struggled with this sentence.) Musing for a few days on the topic I started to visualize a way to map each persons data points onto a sphere and what the values of those data points could, and should, do to the sphere and its surroundings. Then I remembered something I had not thought or heard anybody mention in a long long time. Euler’s identity.
Euler’s identity is not something most people think or even know about. Considered by many to be exceptionally remarkable for its mathematical beauty. It is often mentioned as the literal pinnacle of mathematical elegance and beauty. And it looks like this:
e^{i pi} + 1 = 0,!
It comprises of three basic arithmetic operations that occur exactly once each:
  • addition
  • multiplication
  • exponentiation.
The identity also links five fundamental mathematical constants:
  • The number 0.
  • The number 1.
  • The number ”π”, which is ubiquitous in trigonometry, geometry of Euclidean space, and mathematical analysis (π ≈ 3.14159).
  • The number ”e”, the base of natural logarithms, which also occurs widely in mathematical analysis (e ≈ 2.71828).
  • The number ”i”, imaginary unit of the complex numbers, which contain the roots of all nonconstant polynomials and lead to deeper insight into many operators, such as integration.

So what does that mean? Euler’s formula demonstrates, albeit for still not terribly clearly known reasons, that there is an intrinsic connection between complex exponential functions and trigonometric transformations.

So… what does that really mean? Sometimes other people put it best. “The true beauty of Euler’s Identity comes from the fact that, while the true nature of several of these constants continues to remain a mystery to mathematicians (though it is clear that they possess many real-world manifestations), within the confines of this equation they all work together in such a way that they interlock like pieces of a mathematical jigsaw puzzle, the end result of which has the mathematical traveler ending up right back where he began – at the journey’s origin.
Okay…
If it does not ‘make sense’ don’t worry. The mathematician Carl Friedrich Gauss supposedly said that if this formula was not immediately apparent to a student upon being shown it, that student would never become a first-class mathematician. Few people are. I know I’m not. But that still does not help if you cannot “see” it, so here’s a picture. A moving one that hopefully will act to shed some light on what Euler’s identity tells us. (I got the picture and the text below straight from Wikipedia.)

The exponential function ez can be defined as the limit of(1 + z/N)N, as N approaches infinity, and thus e is the limit of (1 + iπ/N)N. In this animation N takes various increasing values from 1 to 100. The computation of (1 + iπ/N)N is displayed as the combined effect of N repeated multiplications in the complex plane, with the final point being the actual value of (1 + iπ/N)N. It can be seen that as N gets larger (1 + iπ/N)N approaches a limit of −1.


If you’re still not sure what it is, Midnight tutor has a good video here: http://www.midnighttutor.com/EulerFormula.html

In case you were wondering. No, it did not help solve the original business need. But it did help to continue to keep alive the awareness that everyday people I work with produce clever, and sometimes stunning, solutions with logical blocks. It’s like working with artists who craft in ether.

SharePoint 2010 Reference: Software Development Kit

The Microsoft SharePoint 2010 Software Development Kit (SDK) includes documentation and code samples for Microsoft SharePoint Foundation 2010 and for Microsoft SharePoint Server 2010, which builds upon the SharePoint Foundation 2010 infrastructure. The documentation includes detailed descriptions of the technologies that SharePoint Server 2010 and SharePoint Foundation 2010 provide for developers, reference documentation for the server and client object models, and step-by-step procedures for using these technologies and object models and programming with them.

This SDK also includes best practices and setup guidance to help you get started with your own custom applications that build and extend upon the SharePoint Foundation 2010 and SharePoint Server 2010 platforms.

UI Dragging : Dragdealer JS

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

The script is pretty flexible with options like:

  • working horizontally or vertically
  • defining the initial positions of the slider (x/y)
  • setting the number of steps for the slider
  • snapping to the steps
  • and much more.

Dragdelaer JS has callbacks on both release and move events which makes any type of interactions possible.