Timesheet.js | Hacker News Reader

Timesheet.js

sbstjn.github.io

299 pointsmparramon54 comments

The code is potentially vulnerable to XSS injections[1].

[1] https://github.com/sbstjn/timesheet.js/blob/master/source/ja...

edit: Thanks for the downvotes, lesson learned! Never talk about vulnerabilities of a code which is #1 on HN and people will blindly put in production.

edit 2: So here is my new comment: "Awesome library! The fact that users can easily enhance its behaviour by using <script> tags in labels is a great feature!"

You're going to be happier and your comments more persuasive if you just ignore downvotes. Like, completely. Your comment was inevitably going to be bolted to the top of the thread regardless of the randos who downvoted you.

I upvoted you because good catch, but winced when I did it because of the downvote whining. :)

Thanks for the advice, I was just a bit disappointed when I saw the downvotes. I promise I won't whine anymore. ;)

> You're going to be happier and your comments more persuasive if you just ignore downvotes.

This is super awesome advice, and I'm thinking of having a one-off t-shirt made with some sort variation of it.

> You're going to be happier and your comments more persuasive if you just ignore downvotes.

Generally yes. That said some people seem to either belong on another forum or have somehow managed to collect enough karma to downvote before learning how to behave on HN.

tptacek speaks the truth--don't worry about how many HN funbucks you have.

I do like their second edit though...I enjoy having users extend my scripts. 8)

You're absolutely right, for what it's worth. Direct <script> tag injection didn't work when I tested it, but the following sure does!

    new Timesheet('timesheet-default', 2002, 2013, [
        ['09/2008', '06/2010', 
         '<img src="666" onerror="alert(\'injection!!\')">',
         'ipsum']
    ]);

Putting HTML elements in the label property itself certainly looks like it's unintended design-wise, and IMO escaping input should definitely be the responsibility of this library (or, as gildas suggested, it should at the very least be documented).

Well, it's a client side library. By that reasoning, jQuery can be said to be vulnerable to XSS if you call .html() with untrusted user input. It seems reasonable to me that the label of each bubble can contain HTML code, it's up to the user to ensure any user input is escaped.

Then, I think it should be documented.

Agreed. In fact, to build on 'Erwin's example, jquery makes note of the potential for XSS when calling .html(), .append(), .after(), etc.[1]

> Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

[1] http://api.jquery.com/html/

Why doesn't jquery have taint-checking/tagging, at least for data brought in through jquery's methods that read from URLs, etc.

Yeah, I'm having a hard time seeing this as having an XSS vulnerability in and of itself. If you're not escaping user input onto the page, it doesn't matter if some library is taking that data and wrapping it in a span. You're done far before you add a third-party javascript library.

When I call that library, I shouldn't have to worry about the fact that it uses HTML. It is a leaky abstraction since a field that is, intuitively, supposed to be text for the label, is actually just treated as HTML for plain insertion into the page.

It might be a good idea to have separate label and labelHTML properties so users of the library don't have to think about this in the common case of text labels, but they can still use HTML labels if they want.

Quite pretty but I can't figure out why anyone would invent their own non-ISO date format and then have to write a parser for it. Is it really so hard to start with the year?

Exactly my thought. I would just go with real date objects instead of a string representation at all.

After we were acquired, I designed an extensive timeline of our company history, people and apps released. It sometimes looks bad on mobile, but in general works pretty well, loading data from JSON.

http://lemonlabs.co/timeline.html

This looks great, have you ever thought about open sourcing it?

CSS and JS layout is a mess full of hacks, but I thought about cleaning up and open-sourcing for more general uses. One day (:

Please, don't go that route. Rather, make this reusable for others right now (by making it Free Software), and accept help from outside for the cleanup.

To put this in Eric S. Raymond's words:

Release early, release often!

I hereby declare all original code on http://lemonlabs.co/timeline.html as licenced under MIT, (c) Jonas Lekevicius.

...it's just that code there is compiled from CoffeeScript, concatenated, uglified and so on. Others will have very hard time exploring it.

Thanks Jonas. Unfortunately I think vog is right. It was be awesome if you FOSSed the original source.

I doubt this is of any help for anyone, without having access to the actual source code (and having that licensed as FOSS).

Nevertheless, thanks for trying.

You are completely right. But doing more requires more time, and that I only can promise One Day™.

1: I made this: http://imgur.com/pPMYqAB

Angularjs + SVG.

2: And this: http://imgur.com/JfNBd2o

Also Angularjs + SVG.

My first solution is a Gantt style graph where I input tasks I need to do and estimate how long they take. Then I click start on a task, and track the time I spend on it. My job needs me to track in high detail what I work on, so I made this system after getting bored of pen and paper.

The second solution I made was a real Gantt diagram, I used the same knowledge I had from the pervious solution, angularjs and svg, but this time I implemented dependencies between the activities. For the first solution I implemented a very simple scheduler based on the fact that I can't possibly be working on two things at the same time (unless I work during a meeting), but for this second solution I didn't make a scheduler so instead I just specify a start and duration for a task.

Is the source available?

I found a similar solution few weeks back which is beautiful and scrolls horizontally.

Believe it is vanilla JS.

http://cheeaun.github.io/life/

Timesheet.js is indirectly inspired by my work. I tweeted it last year https://twitter.com/cheeaun/status/502308306732343298

Attribution was added https://github.com/sbstjn/timesheet.js/commit/47871522dc9477... and later removed https://github.com/sbstjn/timesheet.js/commit/40a964d32ec04d...

Bottom of the page now has "Timesheet.js is licensed under MIT License Cheers to Cheeaun and Ilya"

It's funny, but I wrote something similar back around 1999, built for the dhtml v4 browser days... I am so glad to be doing web development today vs the bad old days.. abstracting box drawing between Ie4 and NN4 browsers for stack diagrams and gantt charts was no fun at all... neither was masking while drawing because of NN4.x's bad flicker, or dealing with the various overflows, or bugginess all around... IE's broken 5.0 release (included with Office 2000), fixed in 5.0.1, and various other quirky behavior at the time.

(end of rant)

Since you seem to care about good Javascript practices given you're linting your code, I'm going to point out that all your modules are exposed in the global scope, which isn't the best practice. I'll suggest using something like browserify (as opposed to require.js due to the smaller overhead) to "require" smaller modules within closures to expose one final Timesheet constructor.

You should put the .css and .js on the frontpage (some people don't know how to use github). Also some basics explanation on how to use it would be nice as well. I'm using right now and I just see the background no event get displayed.

Also Haml is cool but it makes your project hard to understand if you do not use haml (like me).

edit:fixed halm->haml, thx :)

In case anyone else is confused, like I was (and I imagine spellcheck is to blame): I'm pretty sure the parent means "Haml", not "Halm".

According to haml.info:

"Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content."

It's really cool, but why are there hover over effect, and curser change when it is not clickable anywhere?

Pretty cool - there's a similar library at http://timeline.knightlab.com/ that approaches the problem in a slightly different way. Rather than having an axis per event they try to present multiple events on the same axis.

I once made a declarative, pure XML XSL-T system like this, no Javascript at all: http://nicolas.kruchten.com/content/2010/09/context/

I think XSLT is great for templating, I don't see it often in HN. Sadly so many bashing it. But perhaps some day someone makes it cool again. :)

I've been doing a lazy search (i.e., passively watching) for a library like this with per-second resolution vs the per-month resolution in both timesheet.js and Chee Aun's Life.

Anyone have a recommendation?

https://square.github.io/cubism/

Thanks for the reply. I put cubism in the bucket of time series data, where the x-axis is time and the y-axis a single continuous scalar with definable magnitude. What makes these timeline views unique is multiple y-axis values, each with no magnitude, just metadata. (Or perhaps the metadata is more important than the magnitude)

Cubism is hawt for time series data, but there are lots of good options. It's a popular ask.

Looks pretty cool man. Thanks for sharing!

Just curious. What are some examples of the most interesting uses you've seen from users? Are they mostly using it for tracking work hours during the week etc.?

Please use standard date formats. This is needlessly confusing: 2002-09/2002

Neat! I did something pretty much "identical" some time ago but I lost interest. It had different zoom levels.

Prints http://imgur.com/a/eOI39

http://www.simile-widgets.org/timeline/ (Web Widget by MIT for Visualizing Temporal Data)

The example has text overflowing to the right, but there's no scroll mechanism. Seems like a problem..

This is the reason I came back to comment.

I was recently looking for JS gannt style project diagrams. This would have been useful at the time.

Did you find anything that hasn't mention on this thread?

i quite like the interactive timeline component [1] at vis.js. it's zoomable, scrollable, highly customizable and even editable.

[1] http://visjs.org/timeline_examples.html

This indeed is very useful. Won't the name Gantt chart or similar be more suitable?

I would say no unless you have all the basic Gantt features

Reply on news.ycombinator.com