Posts tagged with 'javascript'


Automating the pasting of code in blog posts

So, just before Christmas, I switched to using a client-side library to highlight the code in my blog posts . The library I chose was Prism JS , and it works by marrying up some JavaScript and CSS to specially decorated pre and code elements so that their content (the code itself) is highlighted nicely. Specially decorated? Yep, it looks like this in the HTML: <div class="jmbcodeblock"> <pre><code class="language-foo"> _the code to be shown highlighted_ </code></pre>...

READ MORE

Highlighting code in blog posts

Once upon a time, I wrote a plug-in for Windows Live Writer that took code that had been copied from Visual Studio to the clipboard and converted it to an HTML pre block for my blog posts. The different colors were maintained during this conversion (in essence VS copies the code as RTF) so that the code displayed here in my blog posts would be nicely highlighted. I even published it to GitHub so that it could also be used for Open Live Writer too. That was then, but this is now. Advantages: it’s...

READ MORE

Free open source comes with a cost

In my blog post “ Thoughts on open source ” I ended cryptically with But be aware that just because they’re “free” doesn’t mean that the cost to use them is zero. Let me expand a little on this with especial regard to JavaScript libraries. What exactly is a cost associated with an open source library? When is it not free? I’ll compare this with buying a library from a component vendor, such as DevExpress , the company I work for. For a kick-off, an open source library certainly...

READ MORE

Thoughts on open source

Waaaay back when (yes, it was eight years ago, an eternity in software development), I wrote a post on my old blog about using “ Code from the Internet ”. In those days, for me and my readers that meant finding some C# code from some blog post somewhere out there written by some Joe Blow and using it in your own app. These days however, if you’re doing any kind of web development, you’re going to be pretty well using a whole bunch of code from the internet, and in general from that internet outpost...

READ MORE

Thinking functionally in JavaScript – a fun interlude

I’ve been talking about functional JavaScript for a few posts, but, to be honest, it’s nice to put the theory aside and just practice thinking and writing functionally. With that in mind, let see what we can do about fixing some “copy-n-paste” code. I bought a theme for this site a month or so back – you’re looking at it. As part of the theme, you get some HTML showing what various types of pages look like, the CSS to render it all, and some JavaScript. Usually the HTML/CSS is fine, but then I take...

READ MORE

Thinking functionally in JavaScript (part three)

In continuing this series of posts about functional JavaScript ( one , two ), I whimsically wondered if we could apply the SOLID principles of object-oriented programming . We took a look at S last time (the Single Responsibility Principle), and were fairly successful. The principle I introduced there was not only that the functions we write should do one thing and do it well. If we can embrace global immutability, so much the better (in other words, the function should not have side effects ). Small...

READ MORE

Web development is not as much fun as it’s cracked up to be

Today so far has been a comedy of errors with some web programming I wanted to do. A confederacy of dunce issues, one after the other. URL Shortener It started with some work I’d been doing yesterday with the URL shortener code I use for my jmbk.nl links. The web hosting I have for the domain on GoDaddy is a couple of months from its renewal date, but, to be honest, what I’m paying for it (about $7 a month) is not worth it. I’ll move it to Azure, I thought to myself. Let’s see what amount of work...

READ MORE

Thinking functionally in JavaScript (part two)

Last time I took a quick look at why JavaScript can be used in a functional manner, primarily though the use of higher-order functions. Another way of putting this is that functions are objects in JavaScript, in the sense that they can be passed to and returned from other functions. And once you say “objects” as a programmer, you start thinking about things like composition, state, inheritance, and so on. Enter the well-known SOLID principles for object-oriented programming, but how are they applicable...

READ MORE

New option in JSLint for multiple var declarations

Yesterday evening as I was putting to bed a few changes to this blog’s JavaScript (that would provide fodder for my continuing series on functional JavaScript), I decided to update the version of JSLint I was using in Sublime Text. When I had done so, suddenly my JavaScript file produce a huge slew of warnings that had not been there before. Whaaaat? OK, first things first. If you are using the Sublime-JSLint package in Sublime Text, it’s a good idea to update it on a regular basis. There’s only...

READ MORE

Thinking functionally in JavaScript (part one)

Over the Christmas break, when traditionally things are a little quieter at work, I do a bit of research into topics that interest me and that might have some bearing on our future products. This year was no exception and I decided to investigate React , Facebook’s library (framework?) for building user interfaces for the web. It’s a fascinating library to be sure (and I’ll talk more on it in another post), but there was one paradigm it uses which I haven’t really talked about before: immutability...

READ MORE

Game on: jQuery each() vs. Array.prototype.forEach()

OK, so this afternoon I got bitten by an issue that has bitten a gazillion web developers (and will probably continue to bite more in the future). I’m talking about the syntax for the callback function that’s used for jQuery.each() versus that for JavaScript’s Array.prototype.forEach() . They are, dear reader, not the same . Let’s quickly show the difference. The callback for the jQuery.each() function should have calling syntax that looks like this:  function (index, element) whereas the one...

READ MORE

Revisiting Heap’s Algorithm in JavaScript

Back in March last year I presented an implementation of Heap’s Algorithm – an algorithm devised to generate all permutations of a set of items – in JavaScript. The article was interesting to write because in doing so I had found a bug in the pseudo-code on the Wikipedia page for the algorithm , which led to a discussion with the main editor for the page on how to make it better. Fast forward to yesterday. That morning I listened to a presentation on programming in a functional style in C# . The...

READ MORE

JSLint and recursive functions in JavaScript

The one issue that’s weird about JavaScript that I’ve found is that it has no compiler: the first time you find a bug is when you run your code, not when you compile it. So, since I’m adamant about writing “good” JavaScript code as I write it, I’ve installed a couple of JSLint plug-ins, one for Visual Studio and one for Sublime Text . JSLint is Douglas Crockford’s linter for JavaScript and, although utterly (perhaps barmily?) strict in certain areas, is the one I’ve settled on for checking/validating...

READ MORE

Slide menu

You may have noticed. Or quite possibly, not. I won’t hold it against you; it is a bit nerdy. The thing is, I’ve revamped my blog so that the “ancillary” stuff is now hidden behind a “hamburger menu” over there on the left. Click the icon (it’s known in the trade as a “hamburger”) – or, if you are on a tablet or phone, touch it – and the extra stuff about me, the site, and other information slides in, pushing the normal blog content over to the right. This is my first tentative step to being “ responsive...

READ MORE

Another chapter from the “Don’t be clever” coding style

A short and quick example of some baffling coding today. It so happens this past weekend I was updating some HTML and CSS and JavaScript on this site. One of the JavaScript source files (luckily not written by me) had this: function $$(id) { if (id.substring(1, 0) != "#" ) id = "#" + id; return $(id)[0]; } Start Well Your Day - Whut? So, in other words, it takes an element id, makes sure it starts with a ‘#’, calls jQuery to return the elements with that id (of which there should...

READ MORE

Pre-loading images for a web page

I had occasion the other day to mess around with a particular web page. The page was designed to provide an overview of a particular topic (essentially a list of high-level headers) and that had detail sections that were hidden. The user had to click on a “more” button on a particular header to show its individual detail section. Not only that, but should a detail section be shown, the “more” button was changed to a “less” button, so that the user got a hint that he could close that particular detail...

READ MORE

Adventures with JSONP and jQuery

This whole thing started out as a nice-to-have. I have a blog (you’re reading it). I have a URL shortener (jmbk.nl). They are separate apps on separate domains. When I publish a post here, I diligently create the short URL for it manually in order to publish that short URL on social sites (the URL shortener has some minimalist stats associated with each short URL; so minimal, it’s only a count of the number of times it was used). Yeah, I know, silly, huh: why can’t each post generate its own short...

READ MORE

Inline scripts: sometimes the web is just screwed up

I don’t know about you, but one of my favorite commands in the browser is “View Page Source”, especially on a site that’s modern, visually attractive, or shows off some clever interactions. After all, I’m a developer: I like to find out how things work so I can, if I want to, replicate on my own web sites. Some web pages though are really nasty when you look at their source. And one of the places they excel at nastiness is in their use of inline scripts. Now, don’t...

READ MORE

PCPlus 309: JavaScript uncovered

An article detailing the history of JavaScript, as well as a discussion about its major functionality. I’m going to guess I was late on this deadline, because I probably wrote it in my sleep, the topic was so familiar. Still it’s a pretty good overview of what JavaScript is and where it came from, so if you’re not sure what makes the guts of a “Rich Internet Application” (RIA) work, it’s a quick read. Almost sounds like the intro chapter to a possible JavaScript programming book… This article first...

READ MORE

Awesome use of AND operator

I was reading some JavaScript code the other day, because, you know, reading someone else’s code gives you insights and inspirations to improve your own, when I came across this function to calculate the maximum element in an array: function max(a) { for ( var i = a.length, maxValue = a[0]; i--; ) { a[i] > maxValue && (maxValue = a[i]); } return maxValue; } Taking it slowly, first of all, check out the for loop. For comparison, here’s how I’d write it myself: var maxValue = a[0]; for ...

READ MORE

Making this blog work as an app on the iPhone (the wrap up)

So far in this series ( one , two , three ) we have specialized content, detection of phone orientation, basics of being Web Clip capable, and a back to home page functionality. This post wraps it all up by removing the latter, implementing some simple Back button functionality, a “loading” indicator, and I do a little bit of code housekeeping too. Before we implement a back button, we need to implement a proper URL stack so that we can save where we’ve been in order that the Back button works properly...

READ MORE

Making this blog work as an app on the iPhone (part 3)

The story so far ( one , two ) is that I’ve simplified the content of this blog for viewing on the iPhone, I’ve added code that recognizes when the phone’s orientation is changed from portrait to landscape (and vice versa), and I’ve added the necessary elements to the head element to indicate that this site can be viewed as a Web Clip. With the current state of play though, the moment you touch on a link, Safari fires up to display the page. To change this behavior we’re going to make use of the...

READ MORE

Making this blog work as an app on the iPhone (part 2)

Now that we have a special web site that displays properly either in portrait or landscape mode, let’s make it a web application that we pin to the Home screen. Boiled down to its essence, this is easy: you bring the web page up in Safari, touch the middle button in the bar at the bottom of the screen, and then select the Add to Home Screen option. iOS selects a screenshot for the icon (bleugh!) and allows you to edit the caption for the icon. Once that’s done the web page will appear as a web application...

READ MORE

Making this blog work as an app on the iPhone (part 1)

With the iPhone you easily view a web site in Safari, but you get the annoying bits of chrome at the top (the address bar) and at the bottom (the buttons). What if you wanted your site to occupy the whole of the screen? Well, you can pin the site to the Home screen and, provided that you make a few changes to the HTML, CSS, and JavaScript, you can make your site behave as if it were pretty much a native app. First of all, like it or not, you’ve got to write your HTML and CSS to serve the content...

READ MORE

Programming the Extras tab

A reader asked me how the Extras tab on my blog was made. It’s a bit of CSS and a bit of JavaScript, so let’s describe it all. The first thing to note is that I wanted to clean up the way my blog looks so that – first – it’s simpler, and – second – to make the blog look good on a mobile device. To that end, as I mentioned before , I converted the CSS to LESS so that the whole experience of writing the styling was made easier. With regard to the tab, it’s still hard to get CSS to display text vertically...

READ MORE

The PacMan problem

I came across this mathematical problem the other day: Consider n points on a circle, labeled clockwise from 0 to n -1. Initially PacMan begins at 0 and there is a dot at each of the remaining n -1 points. PacMan takes a random walk around the circle; at each step, it moves with probability 1/2 to one neighbor and with probability 1/2 to the other neighbor. (Note that points 0 and n -1 are neighbors.) The first time PacMan visits any point it eats the dot that is there. Which dot is most likely to...

READ MORE

Adding sharing links to the blog–JavaScript edition

The story so far : in essence I’ve added AddThis and Google +1 support to this blog using their “simple” markup. Unfortunately, the simple way breaks XHTML validation using the W3C validator because of the non-standard attributes ( addthis:url , addthis:title ) and elements ( g:plusone ). As I said previously, time to break out the JavaScript. Let’s do this in reverse order, starting with the +1 button. The reason for doing it this way round is that Google’s documentation was easier to follow, and...

READ MORE

Minor changes to look-and-feel

I’ve been meaning to do a bit of housework on this site to clean up the CSS and to add a bit of interactivity. After all, I write a lot about JavaScript, so I might as well start adding some to my blog. photo © 2007 Dan Brady | more info (via: Wylio ) First things first: if things look a little wacky for you, your browser is probably using the old CSS file. Refresh. That should force the new CSS file to be downloaded and used. Second: the changes to the CSS are two-fold. The main impetus was to allow...

READ MORE

JavaScript for C# developers: some refactoring

I just published a blog post on my DevExpress ctodx blog about taking some non-idiomatic JavaScript code (actually from a DevExpress CodeCentral example program) and refactoring it to follow JavaScript best practices. Topics covered include: Minimizing the global namespace pollution Using triple-equals instead of double-equals for comparisons Function scoping Passing JSLint tests by using declaration-first Take a look ! Now playing: Nightmares On Wax - Morse (from Carboot Soul )...

READ MORE

Chaining fun with window.onload

I set myself a task: write some raw JavaScript for a web page. By raw , I mean no jQuery, no Prototype, no MooTools, just me and the editor. Because I wanted to reduce the effect I had on the global footprint, I declared one global object like so. var FOO = { // stuff initialize : function () { // setup stuff } }; So far so good. I then wanted that initialize() function to run once the page was loaded. The immediate solution was this: window.onload = FOO.initialize; But that causes a problem in that...

READ MORE