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):
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.
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.
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? 🙂
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!).
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…
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.