{"id":22403345,"url":"https://github.com/springload/workshops","last_synced_at":"2026-04-28T09:36:29.706Z","repository":{"id":35650850,"uuid":"39925652","full_name":"springload/workshops","owner":"springload","description":":fireworks::construction_worker::wrench: Training workshops at Springload","archived":false,"fork":false,"pushed_at":"2016-09-11T20:02:51.000Z","size":34,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-06-28T18:45:13.602Z","etag":null,"topics":["javascript","learning","nodeschool","react","training","workshop"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/springload.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-30T01:51:36.000Z","updated_at":"2018-01-24T13:18:42.000Z","dependencies_parsed_at":"2022-09-18T06:47:39.825Z","dependency_job_id":null,"html_url":"https://github.com/springload/workshops","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/springload/workshops","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fworkshops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fworkshops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fworkshops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fworkshops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/workshops/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Fworkshops/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32375619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T09:24:15.638Z","status":"ssl_error","status_checked_at":"2026-04-28T09:24:15.071Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":["javascript","learning","nodeschool","react","training","workshop"],"created_at":"2024-12-05T09:16:53.796Z","updated_at":"2026-04-28T09:36:29.661Z","avatar_url":"https://github.com/springload.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"workshops\n=========\n\n```\n                             \\`.\n   .--------------.___________) \\\n   |//////////////|___________[ ]\n   `--------------'           ) (\n                              '-'\n  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n ░▓ Training workshops at Springload                                        ▓\n ░▓ https://github.com/springload/workshops                                 ▓\n ░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓\n ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░\n```\n\n[![Built with love](http://forthebadge.com/images/badges/built-with-love.svg)](http://www.springload.co.nz/)\n\n| :construction:                                      | :triumph:                                       | :ok_hand: |\n|-----------------------------------------------------|-------------------------------------------------|-----------|\n| [Functional JavaScript](#functional-javascript)     | JS, functional programming, array extras        | `X`       |\n| [Unit Testing](#unit-testing)                       | JS, unit testing, tape                          | `X`       |\n| [Thinking in React](#thinking-in-react)             | JS, React, ES6                                  | `X`       |\n| [ES6 JavaScript](#es6-javascript)                   | JS, ES6                                         | `X`       |\n| [Writing Good Code™](#writing-good-code)            | Code smells, refactoring, OOP, FP, etc          | `X`       |\n| Child mode React                                    | React, without so much JS                       |           |\n| [Test-Driven Development](#test-driven-development) | JS, unit testing, TDD, refactoring, coverage    |           |\n| Another take on FP JS / iterating                   |                                                 |           |\n| Events!                                             | Event bubbling, capture, custom events          |           |\n| Scope                                               | this, const, let, var                           |           |\n\n# Workshops\n\n## Functional JavaScript\n\n\u003e Learn functional programming in JavaScript with a NodeSchool workshop! https://github.com/timoxley/functional-javascript-workshop.\n\n#### To start the workshop\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\nnpm install -g functional-javascript-workshop\n# Then, to run the workshop:\nfunctional-javascript\n```\n\n#### What did we learn?\n\n- For loops conflate three separate kinds of operations: filtering (`Array#filter`), reduction (`Array#reduce`) and transformation (`Array#map`).\n- [Higher-order functions](https://en.wikipedia.org/wiki/Higher-order_function) (functions that take other functions as parameter) are very common in JavaScript.\n- JavaScript's [Array \"extras\"](https://dev.opera.com/articles/javascript-array-extras-in-detail/) methods (`map`, `reduce`, `filter`, etc) are quite cool!\n\n#### To go further\n\n- [Underscore.js](http://underscorejs.org/), the most used \"functional programming helpers\" library.\n- Good read on the topic of [FP and FP in JavaScript from MDN](https://hacks.mozilla.org/2015/01/from-mapreduce-to-javascript-functional-programming/)\n- What are `.bind`, `.apply` and `.call`? [Partial Application in JavaScript](http://benalman.com/news/2012/09/partial-application-in-javascript/)\n\n## Unit Testing\n\n\u003e Learn to test anything with TAP! https://github.com/finnp/test-anything.\n\n#### To start the workshop\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\nnpm install -g test-anything\n# Then, to run the workshop:\ntest-anything\n```\n\n#### What did we learn?\n\n- Unit testing is a useful practice to increase code quality, and to make maintenance easier.\n- There are APIs built into Node and JavaScript to unit test code, like [`assert`](https://nodejs.org/api/assert.html).\n- They aren't as good as open-source alternatives like [tape](https://www.npmjs.com/package/tape), or [Jasmine / Mocha + Chai](http://jasmine.github.io/).\n\n#### To go further\n\n- A [good article on unit testing](http://blog.codinghorror.com/i-pity-the-fool-who-doesnt-write-unit-tests/) by Jeff Atwood.\n- Our [front-end starter kit](https://github.com/springload/frontend-starter-kit/) contains a simple test setup with Mocha and Chai.\n- Future workshop: [Test-Driven Development](https://github.com/springload/workshops#test-driven-development-workshop)\n\n## Thinking in React\n\n\u003e A workshopper module for learning React, based on [Thinking in React](http://facebook.github.io/react/docs/thinking-in-react.html).\n\n#### To start the workshop\n\nThis workshop is heavily based on http://facebook.github.io/react/docs/thinking-in-react.html. Take a moment before you start to read the first two sections (Start and Step 1) from the comfort of your browser.\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\nnpm install -g thinking-in-react\n# Then, to run the workshop:\nthinking-in-react\n```\n\nAt any moment, you can see your solution in the browser by running: `thinking-in-react server \u003csolution file\u003e`. The [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) will help you a lot.\n\nNote: We will make heavy use of JSX and ES6. Make sure that your editor has syntax highlighting for those.\n\n#### What did we learn?\n\n- React makes you think of your UI in terms of a [component hierarchy](http://facebook.github.io/react/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy).\n- It uses a syntax called [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), and goes very well with [ES6 / ES2015 JavaScript](https://babeljs.io/docs/learn-es2015/).\n- The data flows in one direction from a component to its children, with [`props` and `state`](http://facebook.github.io/react/docs/multiple-components.html#data-flow).\n\n#### To go further\n\n- We can create explicit [inverse data flows](http://facebook.github.io/react/docs/thinking-in-react.html#step-5-add-inverse-data-flow) to propagate new data to parent components.\n- React's architecture pattern of choice is called [Flux](https://facebook.github.io/flux/docs/overview.html).\n- There are [lots](http://react.rocks/) of [components](http://react.parts/web) available [online](http://react-components.com/).\n\n## ES6 JavaScript\n\n\u003e An intro to new features coming up in the next version of JavaScript, ES6 / ES2015. https://github.com/domenic/count-to-6\n\n#### To start the workshop\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\nnpm install -g count-to-6\n# Then, to run the workshop:\ncount-to-6\n```\n\n#### What did we learn?\n\n- [ES6](http://www.es6fiddle.net/) is JavaScript's latest version, introducing new syntax.\n- Since the browser support is not perfect, we compile it to ES5 using [Babel](https://babeljs.io).\n- ES6 has [a lot of new features](https://github.com/lukehoban/es6features#readme).\n\n#### To go further\n\n- Have a look at [\"real world\" examples from our projects](https://github.com/springload/workshops/blob/master/count-to-6/es6-examples.js).\n- Try out ES6 features [in your browser](http://www.es6fiddle.net/).\n- An [ES6 quiz / brain teaser](http://perfectionkills.com/javascript-quiz-es6/).\n\n## Writing Good Code [![Code Climate](https://codeclimate.com/github/springload/workshops/badges/gpa.svg)](https://codeclimate.com/github/springload/workshops/writing-good-code/src/gilded_rose.js)\n\n\u003e An adaptation of a refactoring kata in JavaScript with Mocha and Chai https://github.com/thibaudcolas/gilded-roses.\n\n#### To start the workshop\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\ngit clone git@github.com:springload/workshops.git\ncd workshops/writing-good-code/\nnpm install\nnpm install -g eslint eslint-config-airbnb eslint-plugin-react babel-eslint buddy.js\n# Then, to run the workshop:\nnpm start\n# Run the coverage\nnpm run coverage\nopen coverage/lcov-report/index.html\n# Run the linting\nnpm run lint\n```\n\n#### What did we learn?\n\nSee [`writing-good-code/src/gilded_rose_solution.js`](writing-good-code/src/gilded_rose_solution.js) for the end result.\n\n#### To go further\n\nUseful resources on writing good JavaScript:\n\n- A modern book, [Eloquent JavaScript](http://eloquentjavascript.net/).\n- [Idiomatic.js](https://github.com/rwaldron/idiomatic.js), one of the first JS styleguides.\n- One of the most used JavaScript styleguides, which we use at Springload, [airbnb/javascript](https://github.com/airbnb/javascript)\n\n## Test-Driven Development\n\n\u003e A refactoring kata in JavaScript with Mocha and Chai https://github.com/thibaudcolas/gilded-roses.\n\n#### To start the workshop\n\nYou'll need Node installed. Then, from the command line:\n\n```sh\n# To install the workshop:\ngit clone git@github.com:springload/workshops.git\ncd workshops/tdd-workshop/\nnvm install\nnpm install\nnpm install -g eslint eslint-config-airbnb eslint-plugin-react babel-eslint\n# Then, to run the workshop:\nnpm start\n# Run the coverage\nnpm run coverage\nopen coverage/lcov-report/index.html\n# Run the linting\nnpm run lint\n```\n\n#### What did we learn?\n\nTODO\n\n#### To go further\n\nTODO\n\n# How to run a session\n\nA workshop session involves the following activities:\n\n- Preparing the workshop\n    + Researching content\n    + Testing the content\n    + Booking a time and place\n    + Advertising the workshop session\n- Running the session (introduction, workshop, debrief)\n- Sending follow-up material to attendees\n\nRinse, repeat!\n\nThe preparation / follow-up phases usually take around __two hours for one person__, assuming that the workshop's material is pre-existent. The workshop session itself takes __two hours for each attendee__. It is also better if the participants have a bit of time before the workshop to prepare their environment, and after it to step back and reflect on their learning.\n\n#### Finding workshop material\n\nOur workshop usually take the form of [NodeSchool](http://nodeschool.io) `workshopper` modules.\n\n#### Convincing your boss\n\n\u003e If you [work for Springload](http://www.springload.co.nz/jobs/), your boss will be very keen to see you invest time in your team's skills.\n\nThe goal of a training workshop is to help people get better at their craft, acquire new skills and advance in their career. It is a low-overhead alternative to professional training that encourages self-training.\n\nBullet points:\n\n- Investing in your team's skills improves the quality of their work.\n- Use a vast collection of freely available, open-source workshop content.\n- Empower your team with the responsibility to train themselves.\n\n#### Measuring the success of a workshop\n\n- Attendance (Number of people)\n- Attendees' opinion (ROTI, Return On Time Invested – not the bread)\n- Attendees' self-evaluation of their skills\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Fworkshops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Fworkshops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Fworkshops/lists"}