Category Archives: javascript

Converting JSX to JS on the command line

Yesterday I was starting a small, very stand-alone project that required a pretty dynamic interface. I decided to put together the components using ReactJS but as it was essentially just one JSX file that I had I didn’t want to have to set up a gulp file, babelrc file, and whatever new-fangled build process the young kids are in to these days.

I thought about not using JSX syntax, but I think it adds a level of readability to the code and will make it easier for myself and others to maintain longer term, and besides which, I had already writing the JSX part and didn’t want to redo the work. Thankfully, though, it’s really easy to use Babel from the command line to do the conversion,.

First, install the required npm modules (I did this globally so that I could use it anywhere on the cli, not just in the specific project):

Continue reading Converting JSX to JS on the command line

Did you like this? Share it:

Same height for elements

A while ago I wrote a jquery plug-in that allows you to easily make selected elements all the same height. Well, it turns out that it could be a little better because it didn’t take in to consideration margins, padding and such. So here’s a slightly more robust version.

Did you like this? Share it:

My CodeMagic fork (a TinyMCE plugin for code editing)

I’ve used TinyMCE for a while – it’s an excellent WYSIWYG editor for web applications. However, the code editor in it is really simplistic. Enter CodeMagic, a plugin that allows you to replace the standard code editor with one that used the excellent CodeMirror library for syntax highlighting. So I started to use CodeMagic but found a number of issues with it. For example, it used CodeMirror 2 and not 3, had issues with using IE and the word wrapping functionality and the window resizing was never great. But with the joy of things being on GitHub and up for a bit of a forking, that’s exactly what I did.

Check out my CodeMagic fork on GitHub and feel free to give me any feedback, or fork it yourself and make it better.

Did you like this? Share it:

Text box ‘hint’ values with jQuery

On creating a rather large form recently, I was in the need to have some kind of hint to the user about what format the content should take on several input boxes. I could have done this with a description under the form element, but a more accepted way to do this, it seems, is to have a ‘hint’ in the element itself. You know the kind of thing I mean; a value, usually quite a light grey colour, that is present until you click in to the form element and then is disappears. I also wanted to do this as a jQuery plug-in because, well, why not? 🙂

Continue reading Text box ‘hint’ values with jQuery

Did you like this? Share it:

Easy table sorting with jQuery

I came across a jQuery plug-in the other day to sort tables, and it works great and is exceptionally simple to implement (and as anyone who’s flicked through this blog knows, I like the simple things in life… Don’t need any more gray hairs popping up, you know!).

The plug-in is called tablesorter (found at tablesorter.com), by Christian Bach.
Continue reading Easy table sorting with jQuery

Did you like this? Share it:

Highlight external links with jQuery

A little while ago I posted a quick jQuery plug-in that allows you to easily indicate an external link. Then I posted an updated version that had a few optimizations. Well, it turns out that I had missed out a rather important portion of the code when I posted it up. D’oh! So here’s the full and working version.

Continue reading Highlight external links with jQuery

Did you like this? Share it:

Simple pleasures with jQuery

Somethings it’s the simple things in life that make you really happy.  For me yesterday, that was thanks to jQuery.  Have you ever wanted to have a check box that, when the user checks it it also checks a lot of other checkboxes?  Yeah, of course you have!  I wanted to do that yesterday.  Now, it’s not the first time I’ve had to do that kind of functionality, but it always came with a bunch of javascript that seemed over the top for what was wanted.  With jQuery it just took a line or two of code!

    $(document).ready(function() {
        $('#selectall').click(function() {
        	$(":checkbox", $('#checkboxlist')).attr('checked', $(this).is(':checked')); 
        });
    });

And with that, on and off go the other checkboxes.

Marvelous!

Did you like this? Share it:

jQuery plug-in – highlight external links

I’m pretty new to the whole jQuery game, having really only started to look at in a number of weeks ago. Until then I have been happily using Prototype and Scriptaculous, and as I knew them I didn’t see a point to move to another library. However, the more examples I saw of jQuery the more elegant I thought it was, and so now am in the process of learning it more, converting some code over and trying my hand at plug-ins. So here’s introducing my first jQuery plug-in!

This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).

That probably doesn’t make much sense, but I’m sure it will when using it…

So here’s the code:

Continue reading jQuery plug-in – highlight external links

Did you like this? Share it:

Easy chained select lists using Zend Framework and Prototype

Building a set of select lists that are dependant of each other can be a daunting task, but for a simple two-level list – in that what you select from one drop-down will changing what’s displayed in one or more other drop-downs – is actually quite easy thanks to Zend Frameworks and Prototype, both of which support Json.

Continue reading Easy chained select lists using Zend Framework and Prototype

Did you like this? Share it: