Tag: javascript

Categories
Product Technology UI UX Websites

Bookmarklet: Add Keyword Search to the Listings on IIMJobs.com

Job hunters from the IIMs and other such colleges often go to this cool site called IIMJobs.com, started by an alumnus of my alma mater. It’s quite a live board, but there is one thing that I sorely miss there – filtering the job listings by keyword. You can select your experience range, your preferred location, and search. You get to see all jobs in your preferred city for your preferred vintage, but you may not be interested in them. And you have to sift through the listings page to find jobs suitable for you.

This got me thinking – what if there was a filter box, where I could type in my preferred phrase and it would filter the listings on the page, keeping only those that you want to see?

So, I spent a Monday morning putting together some code, and here it is – a bookmarklet which, if you save it on your browser’s toolbar and click on it when you are on the IIMJobs listing page, you will get a cool keyword search input box. This will let you filter the listings on the page by keyword – basically it will hide all the listings which do not match your search phrase.

All you have to do is drag the button below to your browser’s toolbar.

<a style="padding: 18px 32px; font-size: 16px; margin-bottom: 40px; background-color: #444; color: #fff;" title="Drag me to your bookmarks/favourites" href='javascript:(function(){$("#searchform").find(".greybtn").closest("div").before("

“),$(“ד).appendTo(“.keywordParent”),$(“.keywordSearch”).keyup(function(e){var%20o=$(“.keywordSearch”).val().toLowerCase();$(“.jobRow”).each(function(e){-1Add Filter @IIMJobs

Do let me know in the comments below if you like it, or if you have any feedback on how to make it better.

Categories
Product Technology

A new UI Kit for React-Native

I love Javascript.

And I have come to love ReactJS a lot more than I had loved any other Javascript library, sorry jQuery.

In the last few weeks, I have been learning React Native, while putting together an iOS app for a project of ours. While working with React Native, I realised that there isn’t a default styling/component kit available for creating native mobile applications. The ones that are there are not open source, each coming with a decent enough price tag.

And then I realised that even though React Native uses some form of stylesheets, I cannot simply drop the stylesheets from Twitter Bootstrap and expect it to work.

So I got down to creating usable UI components, with the style borrowed from Bootstrap.

It’s far from finished, but at the time of writing this you can use it to create a text input field with a label, and the six types of buttons provided by Bootstrap. I’ll keep adding more components to the kit as time permits.

Go ahead and use it, share it, give me feedback, and contribute to it if you would like to.

https://github.com/hypnosh/ui-kit-for-react-native

Categories
Work

jQuery tip: all ready?

I came across this post about a common jQuery mistake by Michael Tran, and found it interesting. Yes, you need to load your jQuery library before you load your jQuery-specific-scripts or they would not work.

But here’s a mistake I commit often, of treating the event binding declarations as function declarations. Often I write code like this:

<script>
  $("#button").click( function() {
    alert("clicked!");
  });
</script>

And then wonder why nothing happens when I click on <input type="button" id="button" value="Click me!">. Well, that is because the $("#button").click(…); code never gets executed!

Executed? Exactly. As I said it’s not a function. The function is already defined as function() {…}, right? We need to execute the jQuery event binding. When? As soon as the document is ready. How? Nine ways to skin the cat, three (as far as I know) to tackle this problem.

  1. In the body tag
    Simply put,

     <script>
  function loadingRoutine() {
    $("#button").click( function() {
      alert("clicked!");
    });
  }
</script>
<body onLoad="loadingRoutine();">

    But this means contaminating your markup with behavioral code. I, never!

  2. Using a jQuery event
    The onLoad event has a different name in jQuery: $(document).ready();. You use it thus:

     <script>
  $(document).ready( function() {
    $("#button").click( function() {
      alert("clicked!");
    });
  });
</script>

    This way you don’t have to put any javascript in your body tag.

    You can also use jQuery(document).ready(…); instead, but $(… is shorter and faster, innit?

    What really happens here is that the moment the HTML document is ready the $(document).ready(); event is triggered, much like the body’s onLoad event, and it binds all your jQuery behaviours to the events as you wanted.

  3. jQuery shortcut
    It’s the same $(document).ready(); event, but this time it’s way shorter, cuter and faster. It is $(…);. The usage:

     <script>
  $( function() {
    $("#button").click( function() {
      alert("clicked!");
    });
  });
</script>

There’s another way to call the $(document).ready(…); event: $().ready();, but the jQuery documentation advises against it. And who needs $().ready(); when you have $();?