Flexboxes were the first thing CSS created once it became sentient. Where CSS used to lay out boxes robotically following directions, now it can dynamically respond to changes to the size of a browser window, re-laying them out in relation to one another. This means you no longer have to engage in the standard design process of first trying to “float” elements to the left or right until you give up and just use a static table which you should have done in the first place anyway.

To get started with flexboxes, do what every non-professional Web muck-abouter does and pin this page to your browser.

But suppose you want those boxes to do something when a mouse comes into them? Since I keep on having to re-solve this problem because I can’t remember how or where I did it last time, I decided to post one way that works but is guaranteed not to be the way that actual Web developers do it. Also, it is not specific to flexboxes, so you may wonder flexboxes are in the title. Good point!

So, download jQuery and let us begin…

In this example (and on this actual page) we’re going to change the color of a border and increase its width when a mouse enters, and restore the color and width when the mouse leaves. You stick this code somewhere where it will be run before your user starts moving her mouse over your lovely flexboxes.

In this example, we have a set of flexboxes that have the class “flexbox”. Here goes:

// -- When mouse enters
 $( ".flexbox" ).mouseenter(function(){
     $(this).css({"borderColor" : "#AC3B61"})
     $( this ).animate({
         borderWidth: "10px"
}, 500, function() {
    // do something after the animation finishes
   });
  });

// -- When mouse leaves
$( ".flexbox" ).mouseleave(function(){
      $(this).css({"borderColor" : "white"})
      $( this ).animate({
          borderWidth: "1px"
}, 500, function() {
   // do something after the animation finishes
   });
  });

As you may have observed, these two blocks are essentially the same: one thickens the element’s border when a mouse cursor enters, and the other restores it when the cursor exits.

If it’s not clear what’s going on here, the first line runs a new function whenever a mouse enters an element that has been given the class “flexbox”. Of course you can make up any class name you want.

Then there’s a line of jQuery magic that is going to affect which element the mouse entered (so long as that element has the “flexbox” class); the “this” designates the actual flexbox the mouse entered. That line changes the color of the border.

The next line, with the word “animate”, tells the page that what follows should be an animation — a transition over time — and that time is specified as half a second (500 milliseconds) . What’s it going to do? Change the border width.

Then there’s an empty function that executes after the animation. I left it there in case you need it.

The “mouseleave” functions undo those changes.

So, that’s it. I’m sure it’s suboptimal and probably wrong, but it’s working so far. And now maybe I’ll remember where I put the code.

Comments Off on Animating flexboxes when a mouse enters

I’ve been a hobbyist programmer since I got my first computer in 1984 or so. I greatly enjoy it and I’m terrible at it.

I mainly use JS to create utilities for myself that take me 1,000 hours to write and save me a lifetime of 45 seconds. I like Javascript for tawdry reasons: It’s straightforward, there’s a huge collection of libraries, any question I might ever have has already been asked and answered at StackOverflow, and I get to see the results immediately on screen. It’s of course also useful for the various bush league Web sites I occasionally have to put up (e.g., Everyday Chaos). Also, jQuery makes dumb HTML (DOM) work easy.

But here’s the but…

But, ECMA is taking JS in a terrible direction: it’s turning it professional, what with the arrow functions and the promises, etc. If you’re a hobbyist who enjoys programming for the logic of it, the new stuff in JS hides that logic on behalf of things I happen not to care about like elegance, consistency, and concision.

Now, I know that I don’t have to use the new stuff. But in fact I do, because the community I rely on to answer my questions — basically StackOverflow — increasingly is answering with the new stuff.

There’s a reason JS became the most used language on the planet: not only can you do webby stuff with it, it has a pretty linear learning curve. Now I literally feel like I’m in danger of losing “View Source” from my browser … literally because while I can view the source, increasingly I can’t understand it.

I’m going to lose this argument. I already have lost it. I should lose it. My position is wrong. I know that. Nevertheless, I stand firmly on the wrong side of history as I declare in my lonely, quavering voice: Keep. JavaScript. Dumb.

9 Comments »

Let’s say you have the weird desire to see if a particular online news site is producing news articles that support the Schema.org standard. I just posted a tiny little site — even uglier than usual — that lets you search for a particular news media site. It will return the items on that site that have been classified by that site as newsArticles in the Schema.org standard.

Thanks to a suggestion from Dan Brickley, it’s using a custom search engine from Google. One of the parameters permitted by custom search engines is to only return items that are one of Schema.org’s types. (I’m sure I’m messing up the standards lingo.) All I’ve done is specify newsArticle as the type, and prepended “site:” to whatever search you’re doing, saving you five keystrokes. You’re welcome!

If you get back a bunch of articles, then presumably the site is supporting Schema.org. I think.

2 Comments »

Time for another in my series of occasional posts over-explaining simple programming tasks that took me longer to figure out than they should have.

Let’s say you’re writing a bit of JavaScript and want to fade the text of a component out, change the text, and fade it in. Assume you’re using jQuery to handle the fades. Assume that the component has an ID of “fader” and you want its initial text of “First” to be replaced by the text “Second.” Ok?

Here’s the simple HTML:

<div id="fader">First</div>


With jQuery, you fade an element out by first selecting the particular element. which you can do by putting its ID in quotes and prefixing it with a #: $("#fader"). Then you tell that element what method you want to execute, which in this case is the jQuery “fadeOut” command, with a duration expressed in microsecondsmilliseconds. Put ’em together and you get the simple-but-powerful jQuery statement: $("#fader").fadeOut(500);. Likewise for the fadeIn command.

If you’re me, the first thing you’ll try will be:

Click here to give it a try on the following sample text:

That’s not right. At least in my browser (Chrome). Instead of fading out “First” and fading in “Second,” the word “Second” fades out and then in. Presumably that’s because Javascript isn’t waiting for jQuery to complete the fadeout before moving to the instruction to substitute “Second” for “First” as the element’s text.

So here’s a way that works. (Note that I’m not saying it’s the best or right way. If it’s worse than that, if it’s actually the wrong way, please leave a comment and I’ll link to it at the top of his post. Thanks!)

Click here to to try it on the text below:

The difference is that the second way adds a function to the jQuery’s fadeOut command that is invoked only after the fadeOut is completed. That function changes the text of the element and fades it in.

(Click here to reset both examples.)

(PS: I created the tables for the code by pasting it in here.)

Comments Off on fadeOut, fadeIn jQuery-style

During this seemingly-endless interregnum when we have e-books that suck at letting us take notes, I buy paper books when I’m doing research. I have a complex little application I’ve endlessly developed over the years that lets me type notes into a plain text editor or OPML-based outliner using a minimal markup. The app turns the notes into a database that I can then slice ‘n’ dice. Someday I’ll get it stable and done enough to publish. And that day is never.

A couple of years ago I wrote a Chrome extension (“Kindle Highlights Exporter”) that scrapes all of the passages you’ve highlighted with your Kindle, exporting them as a csv, xml, or json file. The only problem is that I seem to be the only person it works for. More precisely, it crashed for the only person I ever showed it to, my supersmart developer nephew. It still works for me, though. If you want (yet another) chance to laugh at me, feel free to download it and install it. Suckers.

So, how about if someone were to write some software that lets me import photographs of the pages of a book that I’ve highlighted in, say, yellow. The app finds the highlighted portions of each page, looks for the page number, does the requisite OCR, and returns a well-marked-up set of those annotations. (These days, outputting in the Open Annotation standard, as well as the usual suspects, would be extra cool.) That way, when I’m done with a book, I could snap images of all the pages with highlights and get a list at the end, instead of doing what I do now: type them in as I read.

I’d give it a try, but processing images is waaay beyond my hobbyist-programmer capabilities. As for the possible copyright violation: OH FOR HEAVENS SAKE WHAT THE HELL IS WRONG WITH US? (Note: The previous sentence should not be construed as legal advice.)

In any case, as the digital/networked world continues to develop its superpowers, the mud wall that confines the physical becomes more and more aggravating.

4 Comments »

I was writing a long-ish tutorial about how to use LibraryCloud that refers to bunches of Javascript. I wanted a way to refer to that code in the HTML document. So I wrote a converter that turns Javascript code (and maybe others) into HTML tables you can just plunk into your document.

Here’s an example of some code:

function init(){
// get textarea to accept tab key
// thank you http://stackoverflow.com/questions/6140632/how-to-handle-tab-in-textarea
	$("#rawjs").keydown(function(e) {
		if(e.keyCode === 9) { // tab was pressed
			// get caret position/selection
			var start = this.selectionStart;
			var end = this.selectionEnd;

			var $this = $(this);
			var value = $this.val();

			// set textarea value to: text before caret + tab + text after caret
			$this.val(value.substring(0, start)
						+ "\t"
						+ value.substring(end));

			// put caret at right position again (add one for the tab)
			this.selectionStart = this.selectionEnd = start + 1;

			// prevent the focus lose
			e.preventDefault();
		}
	});
}

And here’s what it looks like once converted into an HTML table:

There’s definitely some clunkiness to this. For example, if you click on the “toggle line numbers” button it hides or shows the line numbers for every such table in your document. (I’ll fix this eventually.) By the way, the “Toggle” button is there so your readers can select the code and not get the lline numbers.

Also, in order to get the formatting totally encapsulated within your document, I clunkily add a “<style>” section before each table. I couldn’t figure out any other way to do it without making your HTML document dependent on my server being up.

The utility is here: http://hyperorg.com/programs/convertJStoTable/convertJStoTable.html. The code itself is up at Github (but not quite up to date at the moment).

Please let me know all the ways it’s broken and sucks, although I don’t promise to do anything about it. It worked for me.

1 Comment »