{"id":20388502,"url":"https://github.com/pierrecholhot/hank","last_synced_at":"2026-04-13T14:31:57.213Z","repository":{"id":68951566,"uuid":"69795487","full_name":"pierrecholhot/hank","owner":"pierrecholhot","description":"Live OS monitoring UI built on top of HighCharts.js","archived":false,"fork":false,"pushed_at":"2016-10-03T19:02:32.000Z","size":1538,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T04:48:02.268Z","etag":null,"topics":["babel","es6","express-js","highcharts","node-js","os-monitor","postcss","socket-io","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierrecholhot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-10-02T12:15:38.000Z","updated_at":"2023-03-10T10:47:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"cd8ecaa7-062e-4217-a89c-461177b65bd7","html_url":"https://github.com/pierrecholhot/hank","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pierrecholhot/hank","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierrecholhot%2Fhank","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierrecholhot%2Fhank/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierrecholhot%2Fhank/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierrecholhot%2Fhank/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierrecholhot","download_url":"https://codeload.github.com/pierrecholhot/hank/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierrecholhot%2Fhank/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31757477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T13:27:56.013Z","status":"ssl_error","status_checked_at":"2026-04-13T13:21:23.512Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","es6","express-js","highcharts","node-js","os-monitor","postcss","socket-io","webpack"],"created_at":"2024-11-15T03:10:44.906Z","updated_at":"2026-04-13T14:31:57.202Z","avatar_url":"https://github.com/pierrecholhot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hank\n\nLive OS monitoring UI built on top of HighCharts.js\n\n\u003e Hank will alert you when your CPU starts cooking.\n\n## Preview\n\n![Screenshot](https://raw.githubusercontent.com/pierrecholhot/hank/master/public/screenshot.png)\n\n## Run\n\n    git clone git@github.com:pierrecholhot/hank.git\n    cd hank\n    npm install\n    npm start\n\nThen navigate to http://localhost:3000/\n\n## Develop\n\n    npm run dev\n\n## Lint\n\n    npm run lint\n\n## Test\n\n    npm test\n\n## Developer Background\nSenior FE web developer in a major web agency in Paris for the past 5 years. Fast learner but not a \"graph expert\".\n\n## Current tech stack being used\n- node.js\n- express.js\n- os-monitor\n- socket.io\n- highcharts.js\n- webpack\n- ES6 / babel\n- postCss\n- cssNext\n\n## My technical choices !== My technical skills\nOne of the things that distinguish experienced Front-End developers from others, is their ability to correctly assert certain needs for projects.\nThat being said, I won't use X or Z just because I know how to use them.\n\n### react.js\nReact is fun, I will probably find a good use for it in most of my future projects.\nBut we are smart people, right? Do we really need React? How will React help us on this specific task?\nIMHO, React is mainly for -out of the box- good performance, re-usable components and for \"easier\" maintenance.\n\nI couldn't see a fit for React here. I saw it [on this other project](https://github.com/pierrecholhot/auchan) =)\n\n### highcharts VS d3\nSimplicity VS Robustness.  \nSince this project has a really \"tiny\" scope, I also felt that D3 would be an overkill here.\nAFAIK, D3 would be a nice base for building \"complex\" dashboards with lots of graphs.\nFor this specific task, I decided that I would use Highcharts.js for the sake of -again- simplicity.\nI never worked on live graphs before ; D3 learning curve worried me at a first glance. I would have gave it another shot if I could have allocated more time for this task.\nAnd hey, Highcharts update method is quite easy-to-use compared to D3 update patterns =)\n\n### node.js\nNode is a non-negotiable dependency when developing a project. We know javascript and we should leverage this.  \nI personally can't stand the idea of people who still use MAMP.  \nAnd yes, sometimes, python's `simpleHTTPserver` can do the job when working on static pages.\n\n### os-monitor\nI am a big fan of \"using what's already available out there\".\nI could have `exec('uptime')` in a `setInterval`, but well, someone already did that for us.\n\n### Stress test.\nI needed to find a way to \"stress test\" the OS in order to test my alerting system.\nI couldn't find any NPM packages that would help me accomplish this. Maybe I wasn't using the right keywords.\nI then stackoverflow'd it and ended up with a one-liner shell cmd (`cat /dev/zero \u003e /dev/null`). I have no idea what side effects it has and would never do that in a production env.\n\n## How can this be improved\n- Add some more robust test cases. IE use spies to make sure the correct functions were invoked.\n- Store Alerts history and recentEvents in a Database rather than in the memory\n- Recent events over the past 2 minutes are duplicated in our 10 minutes history array. Should find those 2 minutes within our 10 minutes data.\n- Add `postCSS import` plugin and externalize css variables in another file. `import normalize.css` in `index.css` rather than in `index.js`\n- Stick to the functional programming paradigm used here. Make sure all functions stay \"pure\".\n\n## Coding Challenge\nI couldn't help noticing that there were a bunch of os monitoring scripts on github. Mainly made by developers for this specific interview question.\n\nIt was interesting seeing these different approaches.\n\nhttps://github.com/mattgrannary/wd-monitor  \nhttps://github.com/kennethdavidbuck/snoopdog  \nhttps://github.com/tyleraadams/load_monitoring  \nhttps://github.com/atneik/Load-Monitor  \nhttps://github.com/brettimus/goat-monitoring-app  \nhttps://github.com/roadhomegames/load_monitor  \n\nand much more..\n\n### Load monitoring web application\n\nCreate a simple web application that monitors load average on your machine:\n\n- Collect the machine load (using “uptime” for example)\n- Display in the application the key statistics as well as a history of load over the past 10 minutes in 10s intervals. We’d suggest a graphical representation using D3.js, but feel free to use another tool or representation if you prefer. Make it easy for the end-user to picture the situation!\n- Make sure a user can keep the web page open and monitor the load on their machine.\n- Whenever the load for the past 2 minutes exceeds 1 on average, add a message saying that “High load generated an alert - load = {value}, triggered at {time}”\n- Whenever the load average drops again below 1 on average for the past 2 minutes, Add another message explaining when the alert recovered.\n- Make sure all messages showing when alerting thresholds are crossed remain visible on the page for historical reasons.\n- Write a test for the alerting logic\n- Explain how you’d improve on this application design\n\n## made by\npierre.cx\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierrecholhot%2Fhank","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierrecholhot%2Fhank","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierrecholhot%2Fhank/lists"}