Gabi Jack's Blog
  • About

Category Archives: JavaScript

TIL: Working with a D3-based chart library

Posted on December 24, 2016 by Posted in JavaScript, Quick Tip, web development

One of the things I love about my job is that I get to explore different aspects of web development, including all sorts of interesting libraries that otherwise I may have never had the need to use.

This time, I was working with a chart that is generated using C3.js, a D3-based chart library that is super cool, very well documented and really easy to use.

Using this library, you can quickly generate a beautiful chart such as this:

 

Using simple code that would look something like this:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50],
            ['data3', 150, 80, 120, 250, 50, 10]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5
        }
    }
});

Notice how each one of the columns corresponds to a legend for a group in the bar chart above.  The default behavior for these charts is really cool too; if you click on one of the legends, the corresponding group disappears from view.

My assignment was to extract information about what groups remained visible on the chart and then use that information to calculate an average.

As I mentioned before, this library is very well documented, yet it wasn’t really clear what I needed to do in order to obtain the information I needed. After some digging and a bit of trial and error, I realized it was possible to attach a handler to the click event of a legend, provided we make sure to toggle the visibility of the group in the handler. We can add something like this:

 legend: {
      item: {
        onclick: function(id) {
            chart.toggle(id)
            console.log(chart.data.shown())
        }  
      }    
    }

In the code above, chart.data.shown() returns an array of objects representing the elements/groups currently visible in the chart. The id passed to the function corresponds to the first element in each of the columns we passed to the chart as data. Here, I’m simply logging the array of visible elements to the console, but we can do just about anything else we need with this data. We can save it to a variable or, as I did, in the state of the React component that renders this chart. And that’s it! Really simple!

 

Advanced Web Application Development with Express

Posted on December 22, 2013 by Posted in Express.js, JavaScript

A few days ago, I was given a copy of the book Advanced Express Web Application Development   from Packtpub  to review it and I’m pleased because it is a really good book. As I mentioned before, I got interested in Node.js because I learned that it could be used to do testing on the UI, which is one of the most difficult things to do for us at work right now, giving the ever changing nature of our application.

Although not completely unfamiliar, I am a newbie when it comes to Node.js, Express and related technologies. I have read my fair share of beginners tutorials and books, though, so it wasn’t really hard to follow along, plus the book is well structured and the code included with it works without having to debug it or troubleshoot it, which makes life so much easier.

There are several things I really liked about this book. First of all, the fact that it doesn’t just offer a collection of short snippets and mini-tutorials, but sticks with one complete, real-life like application from end to end, while also teaching you best practices and the correct approach towards designing and structuring your applications. It’s really hard to find a book about Express or Node.js that does that. Most of the books and tutorials I’ve found deal with short and simplified examples of how to build your own chat application and such.

Of course, a more realistic example also means that you will find yourself incorporating all sorts of dependencies, libraries and such while working your way through the chapters of this book, because this is what you’re likely to find in a real life application. If you, like me, are unfamiliar with some of these libraries, modules and technologies, I recommend that you spend sometime reading about them so you don’t just copy and execute the commands included in the book without knowing what you’re doing. While the book usually tells you what those libraries and dependencies are, why we need them and how we’ll use them in the application, it’s really beyond its scope to go into much detail about any of them. It can feel a bit overwhelming for a newbie! That’s why I plan on returning to the book and working through all the parts of the example application all over again after I become more comfortable with Grunt, MongoDB and Redis.

I was also greatly impressed by the fact that the example application in this book incorporates TDD, specially because that was one of the reasons that first got me interested in learning about Node.js.

The only problem I had with this book was that I was never able to access the github repository that the book directs the reader to in chapter one to obtain the source code. I had to get the source code from Packtpub, instead.

I would recommend this book to all that want to learn about Node.js and Express beyond the basic tutorials. This is not a tutorial, no, but it is a fine “blueprint” for what a real-life Node.js application looks like.

 

Express Nodejs

What I’m reading this month

Posted on December 12, 2013 by Posted in Express.js, JavaScript

What started as curiosity over better ways to test in the UI has become a great interest in developing web applications using Node.js and Express.js. I’ve already gone through my share of tutorials and examples, and this month I was also lucky enough to be given the opportunity to review a new Express.js book by Packtpub.com. The book is called  Advanced Express Web Development.  It looks good so far. I will  be posting a review here very soon. In the meantime, if you are interested, you   can get it from Packt here: http://www.packtpub.com/advanced-express-web-application-development/book

Expressjs javascript Nodejs Packt

Testing ala Sahi

Posted on September 9, 2013 by Posted in JavaScript, Software Testing

I have recently begun writing tests for the UI of our web application at work. We use a tool for automation of web application testing  known as Sahi, mainly because it’s reliable, fast and easy to use. With a little guidance from an ever so patient co-worker who’s been working with Sahi for a while,  I’m quickly getting the hang of it and using it effectively to produce and run my first tests.  Yay!

Although Sahi allows you to record your interaction with the UI in order to facilitate scripting your tests, I’m learning that the process of crafting an effective test isn’t always that straightforward.  Sometimes, it actually requires quite an amount of creativity. Consider this simple example. I was recently attempting to write a test for a part of the application that generates a form that contains, among other things,  a couple of fieldsets. In each fieldset there’s a group of checkboxes which number is determined dynamically as the form is generated. Also in each fieldset, there’s a couple of links, one to select all checkboxes and one to clear all checkboxes in that fieldset.  The main goal of my test was to verify that each fieldset had its own set of  Select/Clear links that affected only the checkboxes inside that fieldset and not those inside the other fieldset.  The tricky part was to select the right checkboxes to include in the assertions.

If you hover over them while holding the CTRL key,  Sahi will show you the identifier(s) you can use to refer to different DOM elements. One common way to identify elements is by using indexes, ids and visible text. Since I couldn’t guarantee the visible text for the checkboxes in the form would remain the same as it was now,  I decided it was better to use indexes to identify the checkboxes in the form,  as in _checkbox(0), _checkbox(1) and so on. Consider the following:

<div>
<!-- some other code -->
<div>
	<fieldset>
		<input type="checkbox">checkbox 1</input>
		<input type="checkbox">checkbox 2</input>
		<input type="checkbox">checkbox 3</input>
	</fieldset>
</div>
<div>
	<fieldset>
		<input type="checkbox">checkbox 4</input>
		<input type="checkbox">checkbox 5</input>
		<input type="checkbox">checkbox 6</input>
	</fieldset>
</div>
</div>

 

Hovering over the first checkbox in the second fieldset will show the identifier _checkbox(3),  which is good when you know for sure that this particular checkbox will always be in the second fieldset,  but  is not very useful in a dynamically generated form  if you want to assert that only the checkboxes in the second fieldset  are checked or cleared at a given time. What if  something changes and  next time you run the test you have more than three checkboxes in the first fieldset? Then _checkbox(3) will be in the first fieldset and if your test assumes that it is located  in the second fieldset, it will fail for sure.

Fortunately for me, Sahi allows you to use _in when selecting elements. As in:

_checkbox(0, _in(_div(1)));

The code above selects the first checkbox inside the second DIV. I used this to my advantage to create a helper function that would allow me to assert that all checkboxes inside a given DIV element (Sahi couldn’t understand the fieldset tag) were checked or unchecked. I also noticed that, although hovering over the checkboxes gives you the global index of that particular checkbox in the page, if you select checkboxes relative to the element that contains them, their indexing will always start from  zero. This way, I could use an expression such as this one inside a while loop to assert that all checkboxes inside a DIV were checked.

_assertTrue(_checkbox($i, _in(_div($divnumber))).checked);

Where $i will always start from zero and $divnumber is the number of the DIV element that contains the checkboxes. The condition to continue the loop, of course, is that the checkbox exists inside the DIV in the first place.

Since there’s many ways to skin a cat, you may have found a different approach to the same problem. This one worked for me.

javascript Sahi Software Testing

JavaScript All Things

Posted on July 29, 2013 by Posted in JavaScript

Well, no, not really. According to Nicolas Zakas, you shouldn’t. And he’s right, you know? However, I’ve been diving deeper into JavaScript- more particularly MooTools- and I’m feeling so excited about all that I’m learning that I want to “JavaScript the world”.  Javascript-AllTheThings

I already had a rudimentary understanding of JavaScript; nothing spectacular, just the basics for DOMscripting and AJAX calls. But JavaScript and MooTools are used heavily where I  work, and even though I’m usually more in touch with the server side of the application and writing PHPUnit tests,  spending a few hours learning about MooTools was becoming an absolute necessity. And it’s actually been pretty enjoyable.

I started up by reading most of Nicolas Zakas’s book “Professional JavaScript for Web Developers”, and that gave me the bases to understand the book that I picked up next: “Pro JavaScript with MooTools”,  by Mark Obcena. I read this one from cover to cover in a little less than a week and I felt really excited to learn the many ways in which MooTools enhances JavaScript, giving it the feeling of a classical language. That,  I can certainly work with! The best of all is that the code for the application at work has finally stopped looking like strange hieroglyphs from an alien civilization.

Right now I’m reading “MooTools 1.3 Cookbook, by Jay Johnston, and feeling glad that I read the other two books first, because in his book, Johnston doesn’t really dwell into the details of implementation like Zaka and Obcena do.  It is, after all, a cookbook, right?  Even so, the “recipes” look really good. First chapter was a bit of an introduction and a teaser, and I’m already hooked with the Drag class.  The code is really easy to understand and not having to deal with the nuances of browser detection is absolutely priceless. Now I see why so many people love libraries and frameworks, although having a good grasp of what is going on under the hood does help a lot too.

javascript MooTools
February 2019
S M T W T F S
« Dec    
 12
3456789
10111213141516
17181920212223
2425262728  

Recent Posts

  • TIL: Working with a D3-based chart library
  • Diary of a Junior Dev: The Joys of Building
  • In search of a faster query
  • Living la vida Ruby
  • I love peer reviews… I hate peer reviews

Recent Comments

    Categories

    CyberChimps

    CyberChimps

    Marketed By Neil Patel
    © Gabi Jack's Blog