• Stars
    star
    187
  • Rank 206,464 (Top 5 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

βœ… Learn how to use Tape for JavaScript/Node.js Test Driven Development (TDD) - Ten-Minute Testing Tutorial

Learn Tape ~ Testing in JavaScript

Build Status codecov.io Code Climate devDependencies Status devDependencies Status contributions welcome HitCount

A Beginner's Guide to Test Driven Development (TDD) using Tape and Tap including front-end testing with JSDOM.

Car Designers follow a Testing Mindset


Note: this guide is specific to testing with Tape and Tap. If you are new to Test Driven Development (TDD) in general, consider reading our beginner's introduction: github.com/dwyl/learn-tdd
The "vending machine" example/tutorial is designed to be simple for complete beginners.
If you prefer a more extended "real world" example app, see: github.com/dwyl/todo-list-javascript-tutorial
We highly recommend learning the fundamentals here first before diving into the bigger example.
Once you are comfortable with the Tape/Tap syntax, there is a clear "next step". πŸ“βœ…

Why?

Testing your code is essential to ensuring reliability.

There are many testing frameworks so it can be difficult to choose. Most testing frameworks/systems try to do too much, have too many features ("bells and whistles" ...) or inject global variables into your run-time or have complicated syntax.

The shortcut to choosing our tools is to apply Antoine's principal:

perfection-achieved

We use Tape because its minimalist feature-set lets us craft simple maintainable tests that run fast.

Why Tape (not XYZ Test Runner/Framework...)?

  • No configuration required (works out of the box, but can be configured if needed).
  • No "Magic" / Global Variables injected into your run-time (e.g: describe, it, before, after, etc.).
  • No Shared State between tests (tape does not encourage you to write messy / "leaky" tests!).
  • Bare-minimum only require or import into your test file.
  • Tests are Just JavaScript so you can run tests as a node script e.g: node test/my-test.js.
  • No globally installed "CLI" required to run your tests.
  • Appearance of test output (what you see in your terminal/browser) is fully customisable.

For more elaborate reasoning for using Tape, read:
https://medium.com/javascript-scene/why-i-use-tape-instead-of-Tape-so-should-you-6aa105d8eaf4

What?

Tape is a JavaScript testing framework that works in both Node.js and Browsers.
It lets you write simple tests that are easy to read and maintain. The output of Tape tests is a "TAP Stream" which can be read by other programs/packages e.g. to display statistics of your tests.

Background Reading

Who?

People who write tests for their Node.js or Frontend JavaScript code. (i.e. everyone that writes JavaScript!)

How?

Initialise

In your existing (test-lacking) project or a new learning directory,
ensure that you have a package.json file by running the npm init command:

npm init -y

That will create a basic package.json file with the following:

{
  "name": "learn-tape",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

That's enough to continue with the learning quest. We will update the "scripts" section later on.
If you are curious and want to understand the package.json file in more detail, see: https://docs.npmjs.com/files/package.json

If you are pushing your learning code to GitHub/GitLab, consider adding a .gitignore file too.

Install

Install tape using the following command:

npm init -y && npm install tape --save-dev

You should see some output confirming it installed:

learn-tape-install-save-dev

First Tape Test

Create Test Directory

In your project create a new /test directory to hold your tests:

mkdir test

Create Test File

Now create a new file ./test/learn-tape.test.js in your text editor.

and write (or copy-paste) the following code:

const test = require('tape'); // assign the tape library to the variable "test"

test('should return -1 when the value is not present in Array', function (t) {
  t.equal(-1, [1,2,3].indexOf(4)); // 4 is not present in this array so passes
  t.end();
});

Run The Test

You run a Tape test by executing the file in your terminal e.g:

node test/learn-tape.test.js

your-first-tape-test-passing

Note: we use this naming convention /test/{test-name}.test.js for test files in our projects so that we can keep other "helper" files in the /test directory and still be able to run all the test files in the /test directory using a pattern: node_modules/.bin/tape ./test/*.test.js

Make it Pass

Copy the following code into a new file called test/make-it-pass.test.js:

const test = require('tape'); // assign the tape library to the variable "test"

function sum (a, b) {
  // your code to make the test pass goes here ...
}

test('sum should return the addition of two numbers', function (t) {
  t.equal(3, sum(1, 2)); // make this test pass by completing the add function!
  t.end();
});

Run the file (script) in your terminal: node test/make-it-pass.test.js

You should see something like this:

learn-tape-not-passing

Try writing the code required in the sum function to make the test pass!

learn-tape-make-it-pass

Great Succes! Let's try something with a bit more code.

Mini TDD Project: Change Calculator

We are going to build a basic cash register change calculator following TDD using tape.

Note: this should be familiar to you if you followed the general https://github.com/dwyl/learn-tdd tutorial.

Basic Requirements

Given a Total Payable and Cash From Customer Return: Change To Customer (notes and coins).

Essentially we are building a simple calculator that only does subtraction (Total - Cash = Change), but also splits the result into the various notes & coins.

In the UK we have the following Notes & Coins:

GBP Notes GBP Coins

see: https://en.wikipedia.org/wiki/Banknotes_of_the_pound_sterling (technically there are also Β£100 and even Β£100,000,000 notes, but these aren't common so we can leave them out. ;-)

If we use the penny as the unit (i.e. 100 pennies in a pound) the notes and coins can be represented as:

  • 5000 (Β£50)
  • 2000 (Β£20)
  • 1000 (Β£10)
  • 500 (Β£5)
  • 200 (Β£2)
  • 100 (Β£1)
  • 50 (50p)
  • 20 (20p)
  • 10 (10p)
  • 5 (5p)
  • 2 (2p)
  • 1 (1p)

this can be represented as an Array:

const coins = [5000, 2000, 1000, 500, 200, 100, 50, 20, 10, 5, 2, 1]

Note: the same can be done for any other cash system ($ Β₯ €) simply use the cent, sen or rin as the unit and scale up notes.

Create Test File

Create a file called change-calculator.test.js in your /test directory and add the following lines:

const test = require('tape'); // assign the tape library to the variable "test"
const calculateChange = require('../lib/change-calculator.js');  // require (not-yet-written) module

Watch it Fail

Back in your terminal window, the test by executing the command (and watch it fail):

node test/change-calculator.test.js

Tape TFD Fail

This error (Cannot find module '../lib/change-calculator.js') is pretty self explanatory.
We haven't created the file yet so the test is requiring a non-existent file!

Q: Why deliberately write a test we know is going to fail...?
A: To get used to the idea of only writing the code required to pass the current (failing) test, and never write code you think you might need; see: YAGNI

Create the Module File

In Test First Development (TFD) we write a test first and then write the code that makes the test pass.

Create a new file for our change calculator change-calculator.js in the ./lib directory.

Note: We are not going to add any code to it yet. This is intentional.

Re-run the test file in your terminal, you should expect to see no output (it will "pass silently" because there are no tests!)

Tape Pass 0 Tests

Add a Test

Going back to the requirements, we need our calculateChange method to accept two arguments/parameters (totalPayable and cashPaid) and return an array containing the coins equal to the difference:

e.g:

totalPayable = 210         // Β£2.10
cashPaid     = 300         // Β£3.00
difference   =  90         // 90p
change       = [50,20,20]  // 50p, 20p, 20p

Lets add a test to test/change-calculator.test.js and watch it fail:

const test = require('tape'); // assign the tape library to the variable "test"
const calculateChange = require('../lib/change-calculator.js');  // require the calculator module

test('calculateChange(215, 300) should return [50, 20, 10, 5]', function(t) {
  const result = calculateChange(215, 300); // expect an array containing [50,20,10,5]
  const expected = [50, 20, 10, 5];
  t.deepEqual(result, expected);
  t.end();
});

Re-run the test file: node test/change-calculator.test.js

Tape 1 Test Failing

Export the calculateChange Function

Right now our change-calculator.js file does not contain anything,
so when it's require'd in the test we get a error: TypeError: calculateChange is not a function

We can "fix" this by exporting a function. add a single line to change-calculator.js:

module.exports = function calculateChange() {};

Now when we run the test, we see more useful error message:

learn-tape-first-test-failing

Write Just Enough Code to Make the Test Pass

We can "fake" passing the test by by simply returning an Array in change-calculator.js:

module.exports = function calculateChange(totalPayable, cashPaid) {
  return [50, 20, 10, 5]; // return the expected Array to pass the test
};

Re-run the test file node test/change-calculator.test.js (now it "passes"):

Tape 1 Test Passes

Note: we aren't really passing the test, we are faking it for illustration.

Add More Test Cases

Add a couple more tests to test/change-calculator.test.js:

test('calculateChange(486, 600) should equal [100, 10, 2, 2]', function(t) {
  const result = calculateChange(486, 600);
  const expected = [100, 10, 2, 2];
  t.deepEqual(result, expected);
  t.end();
});

test('calculateChange(12, 400) should return [200, 100, 50, 20, 10, 5, 2, 1]', function(t) {
  const result = calculateChange(12, 400);
  const expected = [200, 100, 50, 20, 10, 5, 2, 1];
  t.deepEqual(result, expected);
  t.end();
});

Re-run the test file: node test/change-calculator.test.js (expect to see both tests failing)

learn-tape-two-failing-tests

Keep Cheating or Solve the Problem?

We could keep cheating by writing a series of if statements:

module.exports = function calculateChange(totalPayable, cashPaid) {
    if(totalPayable == 486 && cashPaid == 1000)
        return [500, 10, 2, 2];
    else if(totalPayable == 210 && cashPaid == 300)
        return [50, 20, 20];
};

But its arguably more work than simply solving the problem. Let's do that instead.

Note: this is the readable version of the solution! Feel free to suggest a more compact function.

Update the calculateChange function in change-calculator.js:

module.exports = function calculateChange(totalPayable, cashPaid) {

  const coins = [5000, 2000, 1000, 500, 200, 100, 50, 20, 10, 5, 2, 1];
  let change = [];
  const length = coins.length;
  let remaining = cashPaid - totalPayable;  // we reduce this below

  for (let i = 0; i < length; i++) { // loop through array of notes & coins:
    let coin = coins[i];

    if(remaining/coin >= 1) { // check coin fits into the remaining amount
      let times = Math.floor(remaining/coin);        // no partial coins

      for(let j = 0; j < times; j++) {     // add coin to change x times
        change.push(coin);
        remaining = remaining - coin;  // subtract coin from remaining
      }
    }
  }
  return change;
};

Note: we prefer the "functional programming" approach when solving the calculateChange function.
We have used an "imperative" style here simply because it is more familiar to most people ...
If you are curious about the the functional solution, and you should be,
see
: https://github.com/dwyl/learn-tdd#functional

Add More Tests!

Add one more test to ensure we are fully exercising our method:

totalPayable = 1487                                 // Β£14.87  (fourteen pounds and eighty-seven pence)
cashPaid     = 10000                                // Β£100.00 (one hundred pounds)
difference    = 8513                                 // Β£85.13
change       = [5000, 2000, 1000, 500, 10, 2, 1 ]   // Β£50, Β£20, Β£10, Β£5, 10p, 2p, 1p
test('calculateChange(1487,10000) should equal [5000, 2000, 1000, 500, 10, 2, 1 ]', function(t) {
  const result = calculateChange(1487,10000);
  const expected = [5000, 2000, 1000, 500, 10, 2, 1 ];
  t.deepEqual(result, expected);
  t.end();
});

Tape 4 Passing

Note: adding more test examples is good way of achieving confidence in your code. We often have 3x more example/test code than we do "library" code in order to test all the "edge cases". If you get the point where feel you are "working too hard" writing tests, consider using "property based testing" to automate testing thousands of cases.


Bonus Level

Code Coverage

Code coverage lets you know exactly which lines of code you have written are "covered" by your tests (i.e. helps you check if there is "dead", "un-used" or just "un-tested" code) We use istanbul for code coverage. If you are new to istanbul check out tutorial: https://github.com/dwyl/learn-istanbul

Install istanbul from NPM:

npm install istanbul -D

Run the following command (in your terminal) to get a coverage report:

node_modules/.bin/istanbul cover node_modules/.bin/tape ./test/*.test.js

You should expect to see something like this:

learn-tape-coverage

or if you prefer the lcov-report:

Istanbul Coverage Report

100% Coverage for Statements, Branches, Functions and Lines.

If you need a shortcut to running this command, add the following to the scripts section in your package.json;

istanbul cover tape ./test/*.test.js

Run your Tape tests in the browser

Follow these steps to run Tape tests in the browser:

  1. You'll have to bundle up your test files so that the browser can read them.
    We have chosen to use browserify to do this. (other module bundlers are available).
    You'll need to install it globally to access the commands that come with it.
    Enter the following command into the command line: npm install browserify -D

  2. Next you have to bundle your test files. Run the following browserify command: node_modules/.bin/browserify test/*.js > lib/bundle.js

  3. Create a test.html file that can hold your bundle: touch lib/test.html

  4. Add your test script to your newly created test.html: echo '<script src="bundle.js"></script>' > lib/test.html

  5. Copy the full path of your test.html file and then paste it into your browser.
    Open up the developer console and you should see something that looks like this:

browser

Headless Browser

You can print our your test results to the command line instead of the browser by using a headless browser:

  1. Install testling: npm install testling -D

  2. Run the following command to print your test results in your terminal: node_modules/.bin/browserify test/*.js | node_modules/.bin/testling

  3. You should see something that looks like this: testling

Continuous Integration?

If you are new to Travis CI check out our tutorial: https://github.com/dwyl/learn-travis

Setting up Travis-CI (or any other CI service) for your Tape tests is quite straightforward.
First define the test script in your package.json:

tape ./test/*.test.js

We usually let Travis send Code Coverage data to Codecov.io so we run our tape tests using Istanbul (see the coverage section above):

istanbul cover tape ./test/*.test.js

Next add a basic .travis.yml file to your project:

language: node_js
node_js:
 - "node"

And enable the project on Traivs-CI.
Done. Build Status


Frequently Asked Questions

Can We Use Tape for Frontend Tests?

Now that you've learned how to use Tape to test your back end code check out our guide on frontend testing with tape.

What about Tap?

We use Tape for most of our JavaScript testing needs @dwyl but occasionally we find that having a few specific extra functions simplifies our tests and reduces the repetitive "boilerplate".

If you find yourself needing a before or after function to do "setup", "teardown" or resetting state in tests, or you need to run tests in parallel (because you have lots of tests), then consider using Tap: tap-advanced-testing.md

t.plan(2) vs. t.end()

If you have multiple asynchronous assertions in the same test, you may want to use t.plan(2) at the start of your test. For more detail, see: #12

##Β Tap Spec?

One of the major advantages of Tap/Tape is outputting the results of your tests as text according to the "Test Anything Protocol".
For example:

1..3
ok 1 - Input file opened
not ok 2 - First line of the input valid
ok 3 - Read the rest of the file
# tests 3
# pass  3
# fail  0

This basic text output from our tests can then be re-formatted in a more attractive format using a "reporter".

There are several "reporters" available, see: https://github.com/substack/tape#pretty-reporters

Our favourite of these reporters is tap-spec: https://github.com/scottcorgan/tap-spec

It's super easy to use, simply install:

npm install tap-spec --save-dev

And then pipe the output of your test(s) through tap-spec:

tape ./test/*.test.js | tap-spec

That's it.

If you want to see the difference in output, simply run the test in this repository. When you run the command:

npm run fast

You should see the "Normal" TAP output:

TAP version 13
# calculateChange(215, 300) should return [50, 20, 10, 5]
ok 1 should be equivalent
# calculateChange(486, 600) should equal [100, 10, 2, 2]
ok 2 should be equivalent
# calculateChange(12, 400) should return [200, 100, 50, 20, 10, 5, 2, 1]
ok 3 should be equivalent
# calculateChange(1487,10000) should equal [5000, 2000, 1000, 500, 10, 2, 1 ]
ok 4 should be equivalent
# should return -1 when the value is not present in Array
ok 5 should be equal
# sum should return the addition of two numbers
ok 6 should be equal

1..6
# tests 6
# pass  6

# ok

If you run the command:

npm run spec

You should see the "spec" formatted output:

calculateChange(215, 300) should return [50, 20, 10, 5]

    βœ” should be equivalent

  calculateChange(486, 600) should equal [100, 10, 2, 2]

    βœ” should be equivalent

  calculateChange(12, 400) should return [200, 100, 50, 20, 10, 5, 2, 1]

    βœ” should be equivalent

  calculateChange(1487,10000) should equal [5000, 2000, 1000, 500, 10, 2, 1 ]

    βœ” should be equivalent

  should return -1 when the value is not present in Array

    βœ” should be equal

  sum should return the addition of two numbers

    βœ” should be equal

  time=53.935ms



  total:     17
  passing:   17
  duration:  101ms

Not only do we get more information but it's more spaced out.
Play around with the different formatters/reporters and find one you like. We're fans of tap-spec.

More Repositories

1

english-words

πŸ“ A text file containing 479k English words for all your dictionary/word-based projects e.g: auto-completion / autosuggestion
Python
9,337
star
2

learn-json-web-tokens

πŸ” Learn how to use JSON Web Token (JWT) to secure your next Web App! (Tutorial/Example with Tests!!)
JavaScript
4,178
star
3

learn-to-send-email-via-google-script-html-no-server

πŸ“§ An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
HTML
3,140
star
4

repo-badges

⭐ Use repo badges (build passing, coverage, etc) in your readme/markdown file to signal code quality in a project.
HTML
2,831
star
5

learn-tdd

βœ… A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)
JavaScript
2,698
star
6

start-here

πŸ’‘ A Quick-start Guide for People who want to dwyl ❀️ βœ…
1,734
star
7

learn-elixir

πŸ’§ Learn the Elixir programming language to build functional, fast, scalable and maintainable web applications!
Elixir
1,611
star
8

learn-travis

😎 A quick Travis CI (Continuous Integration) Tutorial for Node.js developers
JavaScript
1,251
star
9

Javascript-the-Good-Parts-notes

πŸ“– Notes on the seminal "JavaScript the Good Parts: by Douglas Crockford
1,193
star
10

aws-sdk-mock

🌈 AWSomocks for Javascript/Node.js aws-sdk tested, documented & maintained. Contributions welcome!
TypeScript
1,113
star
11

learn-aws-lambda

✨ Learn how to use AWS Lambda to easily create infinitely scalable web services
JavaScript
1,035
star
12

book

πŸ“— Our Book on Full-Stack Web Application Development covering User Experience (UX) Design, Mobile/Offline/Security First, Progressive Enhancement, Continuous Integration/Deployment, Testing (UX/TDD/BDD), Performance-Driven-Development and much more!
Rust
818
star
13

hapi-auth-jwt2

πŸ”’ Secure Hapi.js authentication plugin using JSON Web Tokens (JWT) in Headers, URL or Cookies
JavaScript
795
star
14

learn-hapi

β˜€οΈ Learn to use Hapi.js (Node.js) web framework to build scalable apps in less time
HTML
794
star
15

phoenix-chat-example

πŸ’¬ The Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.7 [Latest] πŸš€
Elixir
760
star
16

learn-tachyons

😍 Learn how to use Tachyons to craft beautiful, responsive and fast UI with functional CSS!
HTML
673
star
17

learn-phoenix-framework

πŸ”₯ Phoenix is the web framework without compromise on speed, reliability or maintainability! Don't settle for less. πŸš€
Elixir
650
star
18

javascript-todo-list-tutorial

βœ… A step-by-step complete beginner example/tutorial for building a Todo List App (TodoMVC) from scratch in JavaScript following Test Driven Development (TDD) best practice. 🌱
JavaScript
623
star
19

learn-nightwatch

🌜 Learn how to use Nightwatch.js to easily & automatically test your web apps in *real* web browsers.
JavaScript
585
star
20

learn-elm

🌈 discover the beautiful programming language that makes front-end web apps a joy to build and maintain!
HTML
483
star
21

learn-redux

πŸ’₯ Comprehensive Notes for Learning (how to use) Redux to manage state in your Web/Mobile (React.js) Apps.
HTML
446
star
22

hits

πŸ“ˆ General purpose hits (page views) counter
Elixir
432
star
23

learn-devops

🚧 Learn the craft of "DevOps" (Developer Operations) to Deploy your App and Monitor it so it stays "Up"!
Shell
413
star
24

phoenix-liveview-counter-tutorial

🀯 beginners tutorial building a real time counter in Phoenix 1.7.14 + LiveView 1.0 ⚑️ Learn the fundamentals from first principals so you can make something amazing! πŸš€
Elixir
374
star
25

hapi-socketio-redis-chat-example

πŸ’¬ Real-time Chat using Hapi.js + Socket.io + Redis Pub/Sub (example with tests!!)
Elm
366
star
26

hapi-typescript-example

⚑ Hapi.Js + Typescript = Awesomeness
TypeScript
351
star
27

learn-istanbul

🏁 Learn how to use the Istanbul JavaScript Code Coverage Tool
JavaScript
339
star
28

learn-redis

πŸ“• Need to store/access your data as fast as possible? Learn Redis! Beginners Tutorial using Node.js πŸš€
JavaScript
291
star
29

technology-stack

πŸš€ Detailed description + diagram of the Open Source Technology Stack we use for dwyl projects.
JavaScript
288
star
30

phoenix-ecto-encryption-example

πŸ” A detailed example for how to encrypt data in an Elixir (Phoenix v1.7) App before inserting into a database using Ecto Types
Elixir
274
star
31

learn-elasticsearch

πŸ” Learn how to use ElasticSearch to power a great search experience for your project/product/website.
Elixir
265
star
32

elixir-auth-google

πŸ‘€Minimalist Google OAuth Authentication for Elixir Apps. Tested, Documented & Maintained. Setup in 5 mins. πŸš€
Elixir
263
star
33

home

🏑 πŸ‘©β€πŸ’» πŸ’‘ home is where you can [learn to] build the future surrounded by like-minded creative, friendly and [intrinsically] motivated people focussed on health, fitness and making things people and the world need!
246
star
34

learn-docker

🚒 Learn how to use docker.io containers to consistently deploy your apps on any infrastructure.
Dockerfile
220
star
35

learn-elm-architecture-in-javascript

πŸ¦„ Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
JavaScript
211
star
36

learn-environment-variables

πŸ“Learn how to use Environment Variables to keep your passwords and API keys secret. πŸ”
JavaScript
201
star
37

learn-postgresql

🐘 Learn how to use PostgreSQL and Structured Query Language (SQL) to store and query your relational data. πŸ”
JavaScript
195
star
38

sendemail

πŸ’Œ Simplifies reliably sending emails from your node.js apps using AWS Simple Email Service (SES)
JavaScript
181
star
39

phoenix-todo-list-tutorial

βœ… Complete beginners tutorial building a todo list from scratch in Phoenix 1.7 (latest)
Elixir
171
star
40

quotes

πŸ’¬ a curated list of quotes that inspire action + code that returns quotes by tag/author/etc. πŸ’‘
Elixir
163
star
41

learn-heroku

🏁 Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!
Python
153
star
42

decache

:shipit: Delete Cached node_modules useful when you need to "un-require" during testing for a fresh state.
JavaScript
151
star
43

learn-chrome-extensions

🌐 Discover how to build and deploy a Google Chrome Extension for your Project!
139
star
44

labels

🏷 Sync GitHub Labels from any Source to Target Repositories for Consistency across all your projects!
Elixir
138
star
45

learn-ab-and-multivariate-testing

πŸ†Ž Tutorial on A/B and multivariate testing βœ”οΈ
137
star
46

ISO-27001-2013-information-technology-security

πŸ” Probably the most boring-but-necessary repo on GitHub. If you care about the security/privacy of your data...! βœ…
136
star
47

auth

πŸšͺ πŸ” UX-focussed Turnkey Authentication Solution for Web Apps/APIs (Documented, Tested & Maintained)
Elixir
135
star
48

web-form-to-google-sheet

A simple example of sending data from an ordinary web form straight to a Google Spreadsheet without a server.
HTML
133
star
49

app

Clear your mind. Organise your life. Ignore distractions. Focus on what matters.
Dart
133
star
50

phoenix-liveview-chat-example

πŸ’¬ Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS
Elixir
130
star
51

learn-circleci

βœ… A quick intro to Circle CI (Continuous Integration) for JavaScript developers.
121
star
52

learn-regex

⁉️ A simple REGular EXpression tutorial in JavaScript
120
star
53

learn-react

"The possibilities are numerous once we decide to act and not react." ~ George Bernard Shaw
HTML
108
star
54

learn-aws-iot

πŸ’‘ Learn how to use Amazon Web Services Internet of Things (IoT) service to build connected applications.
JavaScript
101
star
55

env2

πŸ’» Simple environment variable (from config file) loader for your node.js app
JavaScript
100
star
56

how-to-choose-a-database

How to choose the right dabase
97
star
57

flutter-todo-list-tutorial

βœ… A detailed example/tutorial building a cross-platform Todo List App using Flutter πŸ¦‹
Dart
91
star
58

imgup

πŸŒ… Effortless image uploads to AWS S3 with automatic resizing including REST API.
Elixir
88
star
59

mvp

πŸ“² simplest version of the @dwyl app
Elixir
87
star
60

contributing

πŸ“‹ Guidelines & Workflow for people contributing to our project(s) on GitHub. Please ⭐ to confirm you've read & understood! βœ…
86
star
61

learn-flutter

πŸ¦‹ Learn how to use Flutter to Build Cross-platform Native Mobile Apps
JavaScript
86
star
62

javascript-best-practice

A collection of JavaScript Best Practices
83
star
63

learn-amazon-web-services

⭐ Amazing Guide to using Amazon Web Services (AWS)! ☁️
83
star
64

range-touch

πŸ“± Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!
JavaScript
83
star
65

learn-pre-commit

βœ… Pre-commit hooks let you run checks before allowing a commit (e.g. JSLint or check Test Coverage).
JavaScript
80
star
66

product-owner-guide

πŸš€ A rough guide for people working with dwyl as Product Owners
78
star
67

phoenix-ecto-append-only-log-example

πŸ“ A step-by-step example/tutorial showing how to build a Phoenix (Elixir) App where all data is immutable (append only). Precursor to Blockchain, IPFS or Solid!
Elixir
78
star
68

fields

🌻 fields is a collection of useful field definitions (Custom Ecto Types) that helps you easily define an Ecto Schema with validation, encryption and hashing functions so that you can ship your Elixir/Phoenix App much faster!
Elixir
77
star
69

goodparts

πŸ™ˆ An ESLint Style that only allows JavaScript the Good Parts (and "Better Parts") in your code.
JavaScript
77
star
70

hapi-error

β˜” Intercept errors in your Hapi Web App/API and send a *useful* message to the client OR redirect to the desired endpoint.
JavaScript
76
star
71

process-handbook

πŸ“— Contains our processes, questions and journey to creating a team
HTML
76
star
72

terminate

♻️ Terminate a Node.js Process (and all Child Processes) based on the Process ID
JavaScript
76
star
73

aws-lambda-deploy

☁️ πŸš€ Effortlessly deploy Amazon Web Services Lambda function(s) with a single command. Less to configure. Latest AWS SDK and Node.js v20!
JavaScript
74
star
74

dev-setup

✈️ A quick-start guide for new engineers on how to set up their Dev environment
73
star
75

hapi-login-example-postgres

🐰 A simple registration + login form example using hapi-register, hapi-login & hapi-auth-jwt2 with a PostgreSQL DB
JavaScript
69
star
76

flutter-bloc-tutorial

A step-by-step example/tutorial explaining the benefits of the BLoC architecture and bloc library including tests!
Dart
67
star
77

phoenix-liveview-todo-list-tutorial

βœ… Beginners tutorial building a Realtime Todo List in Phoenix 1.6.10 + LiveView 0.17.10 ⚑️ Feedback very welcome!
Elixir
65
star
78

learn-security

πŸ” For most technology projects Security is an "after thought", it does not have to be that way; let's be proactive!
64
star
79

learn-javascript

A Series of Simple Steps in JavaScript :-)
HTML
63
star
80

chat

πŸ’¬ Probably the fastest, most reliable/scalable chat system on the internet.
Elixir
62
star
81

learn-jsdoc

πŸ“˜ Use JSDoc and a few carefully crafted comments to document your JavaScript code!
CSS
60
star
82

ampl

πŸ“± ⚑ Ampl transforms Markdown into AMP-compliant html so it loads super-fast!
JavaScript
58
star
83

aguid

❄️ A Globally Unique IDentifier (GUID) generator in JS. (deterministic or random - you chose!)
JavaScript
57
star
84

tudo

βœ… Want to see where you could help on an open dwyl issue?
Elixir
57
star
85

learn-apple-watch-development

πŸ“— Learn how to build Native Apple Watch (+iPhone) apps from scratch!
Swift
55
star
86

learn-qunit

βœ… A quick introduction to JavaScript unit testing with QUnit
JavaScript
51
star
87

learn-ngrok

☁️ Learn how to use ngrok to share access to a Web App/Site running on your "localhost" with the world!
HTML
50
star
88

learn-jshint

πŸ’© Learn how to use the ~~jshint~~ code quality/consistency tool.
JavaScript
49
star
89

hapi-auth-jwt2-example

πŸ”’ A functional example Hapi.js app using hapi-auth-jwt2 & Redis (hosted on Heroku) with tests!
JavaScript
49
star
90

tachyons-bootstrap

πŸ‘’Bootstrap recreated using tachyons functional css
HTML
48
star
91

learn-tailwind

🌬️ Learn Tailwind CSS to craft pixel-perfect web apps/sites in less time! 😍
Elixir
48
star
92

esta

πŸ” Simple + Fast ElasticSearch Node.js client. Beginner-friendly defaults & Heroku support βœ… πŸš€
JavaScript
48
star
93

learn-node-js-by-example

☁️ Practical node.js examples.
HTML
47
star
94

elixir-pre-commit

βœ… Pre-commit hooks for Elixir projects
Elixir
46
star
95

product-roadmap

🌐 Because why wouldn't you make your company's product roadmap Public on GitHub?
46
star
96

redis-connection

⚑ Single Redis Connection that can be used anywhere in your node.js app and closed once (e.g in tests)
JavaScript
45
star
97

learn-graphQL

❓Learn to use GraphQL - A query language that allows client applications to specify their data fetching requirements
JavaScript
45
star
98

aws-lambda-test-utils

Mock event and context objects without fluff.
JavaScript
44
star
99

hapi-login

πŸšͺ The Simplest Possible (Email + Password) Login for Hapi.js Apps βœ…
JavaScript
43
star
100

learn-riot

🐎 Riot.js lets you build apps that are simpler and load/run faster than any other JS framework/library.
HTML
43
star