I've never seen a tutorial that includes refactoring...
and yet this is one of the most important skills to have in TDD-topia!

thinking we could revisit the update function and make the parameters alphabetical.
e.g:

update(action, model, data)

becomes:

update(action, data, model)

Hi all,

Just started this project and I've cloned the repo. Lots of files are already created and written even though the tutorial mentions creating them anew.

e.g. the "test/todo-app.test.js" file already exists with 80 odd tests already written but the tutorial guides one through creating this file and explaining it should be empty.

Am I missing something? Do I need to go to a specific commit?

Thanks,

Joe

I am following this tutorial as I get to the step of creating the files when I go to the terminal they already exist.
How or where should I create the three files?

Not sure if this is the right place... Self advert and the "Yet Another FrontEndFramework" syndrom in action... I made a tiny package as a helper to write super easily (in my opinion) reactive UI with a tiny 1.4kB package. The todoMVC code is displayed and the JS-framework test is as well.

What is the point? I needed something really small to add to a static site and can up with this. It is pretty fast and very lightweight but of course not a revolution.

Source: https://github.com/ndrean/binyJS

binyjs on npm

Terse explanation: https://dev.to/ndrean/yet-another-micro-package-for-reactive-ui-574k

At present the title (H1) and subtitle (intro) are quite technical:

I hypothesise that this is somewhat "off-putting" to complete beginners
Who might be overwhelmed by all the words.
What do people think of the idea of simplifying it to something a bit more concise?

Suggestions very much welcome!

I discovered some errors in the elmish.md walkthrough at the mount step. To be clear, when I run the tests for the final version of elmish.js as given in the repo, everything passes, so these errors are against an intermediate step in the text of elmish.md only.

1. Entering the code as given through the mount implementation section produces the following:

This stems from the test call to elmish.mount. It looks as if the order of the arguments to view are in the wrong order; the instances specifically are: a) the call to view in the mount function within the elmish.md text and b) in the counter.js declaration of view. The arity of the call compared to the declaration also differs.

FWIW, to fix I switched the order of the args in counter.js (the final version of elmish.js seemed to indicate that was the way). This eliminates the TypeError for 'signal not a function', but running the tests leads to another error:

2. The first test for the assert against the state of the counter fails, and the button seems not to be in the (js)DOM:

The view function returns a container, but it doesn't seem to be appended? When I call document.appendChild on each of the two calls to view in mount, the tests pass.

I am on Ubuntu 20.04, node 14.15.1.

Minor point, but the first appearance of JSDOC threw me a bit as it hadn't been referred to before and I just read it as JSDOM

Suggest changing "Testing" heading to "Testing & Documentation" and adding a line saying "We will use JSDOC for documentation" with a link to https://github.com/dwyl/learn-jsdoc

Let me know what you think and I'll do a PR if you think this is a useful clarification

Yesterday when I tried to run this command nothing happened but today running the command showed me a series of errors.
I've been researching what these mistakes would be.

While following this tutorial I noticed that "metadata" is mentioned where the metadata enters ?
I couldn't understand that part because I've never heard of metadata if anyone can help it would be important or maybe it would be better to give an easier explanation to those starting out (I'm not saying it's difficult) but there are some words or technical terms that are hard to understand at first.

I've tried running the first test for the update function, but I keep getting the same error message. TypeError: app.update is not a function.

second front-end-with-tape.md

Hi, I got that error and the tests failed afterwards when I did a clean install. I'm using macOS Catalina 10.15.5.

 ✖ <input autofocus> is "activeElement"
      operator: equal
      expected: |-
        <body>...</body>
      actual: |-
        <input class="new-todo" autofocus="" id="new"></input>
      at: Test.<anonymous> (/Users/miltiadisbouchalakis/projects/todo-mvc/javascript-todo-list-tutorial/test/elmish.test.js:60:5)
      stack: |-

My temp solution was to comment that test but I'm not sure how to fix it since I just started checking this project.

Thanks,
M

Node.js@v12 has dropped off the list of supported releases: https://nodejs.org/en/about/releases/

JSDom v20 Uses features only available in v14+ ...
So this PR: #48 will not pass CI:
https://github.com/dwyl/javascript-todo-list-tutorial/runs/6961650657?check_suite_focus=true#step:4:27

Todo

• Remove 12.x from .github/workflows/ci.yml#L19
  

  javascript-todo-list-tutorial/.github/workflows/ci.yml

  Line 19 in 49c7f1b

  node-version: [12.x, 14.x, 16.x]

• Replace with 18.x and 20.x for future

https://david-dm.org/dwyl/javascript-todo-list-tutorial?type=dev

Todo

• update version of tape ^4.13.0 -> 5.0.0
• re-run tests to confirm everything still works e.g: dwyl/learn-tape#45
  (or just push your branch to GitHub and let Travis-CI do the checking)
• Create PR.

Happy for anyone else to do this. 🌻

Hi,

I tried to run the code given for the test set up purpose using node test/todo-app.test.js
that should return nothing, but I got the following error messages
internal/modules/cjs/loader.js:615
throw err;
^

Error: Cannot find module 'tape'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
at Function.Module._load (internal/modules/cjs/loader.js:539:25)
at Module.require (internal/modules/cjs/loader.js:667:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/Users/babydust/Desktop/todolist_mvc/test/todo-app.test.js:1:76)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)

What might cause this problem to occur?
Thank you in advance for your assistance.

I propose that we update the GitHub repository name
From todo-list-javascript-tutorial to javascript-todo-list-tutorial
such that the programming language comes first.
This will make it more consistent with https://github.com/dwyl/flutter-todo-list-tutorial
and with the up-coming elixir and python versions.

Given that this example is a complete "step-by-step" walkthrough of building a Todo List using the TodoMVC CSS styles and functional specification, I feel that it would be good to add it to TasteJS as a reference.

Todo

• Create Pull Request adding the resource to TasteJS to help complete beginners learn TodoMVC!

  • Open issue on https://github.com/tastejs/todomvc/issues informing community of the tutorial.
  • Issue created: tastejs/todomvc#1950 🤞
  • Initial Positive Feedback:
    

"faux elm" https://www.npmjs.com/package/felm

I'm following the Javascript tutorial but I still have the same error running the npm install command and someone can review this command when they have time.
In the terminal you ask me to add the npm-debug.log file.

The Heroku App has been "broken" for a while ...
https://todomvc-app.herokuapp.com/

Todo

• Setup GitHub Pages to serve this basic Todo List

Todo:

• Add example/use-case for using Tap in learn-tape for reasons described in: dwyl/learn-tape#34

  • Done: dwyl/learn-tape#35

• Transfer the content of https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/todo-list.md to this repository.

  • mkdir lib
  • git mv ./examples/todo-list/* ./lib
  • git rm -rf ./examples/
  • Update title in todo-list.md to reflect new repo.
  • Remove old readme: git rm README.md
  • git mv todo-list.md README.md

• Split out the sections into their own individual .md files
  so that they are more "bitesize" (better for users)
  and we can track page-view/scroll (i.e. "completion") stats for the tutorial.

• Add to: https://github.com/snipcart/learn-vanilla-js

  • Proposed: snipcart/learn-vanilla-js#7
  • Positive Feedback: snipcart/learn-vanilla-js#7 (comment)
    
  • Pull Request created: snipcart/learn-vanilla-js#8

• Share on HackerNews: https://news.ycombinator.com/item?id=18353112 #tumbleweed ...

• Create Pull Request adding the resource to TasteJS to help complete beginners learn TodoMVC! GOTO: #12

  • Open issue on https://github.com/tastejs/todomvc/issues informing community of the tutorial.
  • Issue created: tastejs/todomvc#1950 🤞
  • Initial Positive Feedback:
    

see reasoning in: #1

Having a Virtual DOM will mean that our Todo List App will "perform" well in "benchmarks"...
But is there anything we can learn from it...?

• https://github.com/Matt-Esch/virtual-dom
• https://tonyfreed.blog/what-is-virtual-dom-c0ec6d6a925c
• https://stackoverflow.com/questions/21965738/what-is-virtual-dom
• https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20
• https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
• https://medium.freecodecamp.org/a-quick-guide-to-learn-react-and-how-its-virtual-dom-works-c869d788cd44

@nelsonic First of all, HUGE thank you for all the effort and amazing material you have prepared. I am grateful for the opportunity to learn so many new "things" following your tutorial(s).

With that said, I hope this will not sound like complaining. I am simply confused with the instructions at the very beginning. In the How section, we are guided to clone the repo and to install dependencies. So far so good.

But then you proceed by saying to create 3 new files:

• test/todo-app.test.js
• lib/todo-app.js
• index.html

The thing is - they are already present in the repo with hundreds of lines of code already written in them.

Of course, the easiest thing to do is simply to delete contents of those files and start following (writing from the scratch). Just wanted to check with you if this was intentionally made like this or did I miss something/ did something wrong? Maybe there's some other starter repo? This one looks finished.

If I have missed something really obvious, I am sorry in advance.
Many thanks.

N.

I'm using Windows 10, node v12.16.1 and npm v6.13.4.

I tried running npm install after cloning, and got the following error stack:

froma@DESKTOP-KGVSTID MINGW64 ~/Development/javascript-todo-list-tutorial (master)
$ npm install
npm WARN deprecated [email protected]: This module is no longer maintained, try this instead:
npm WARN deprecated   npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: The package has been renamed to `open`
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated

> [email protected] install C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\pre-commit
> node install.js


> [email protected] postinstall C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\spawn-sync
> node postinstall


> [email protected] postinstall C:\Users\froma\Development\javascript-todo-list-tutorial
> npm test


> [email protected] test C:\Users\froma\Development\javascript-todo-list-tutorial
> istanbul cover tape ./test/*.test.js | tap-spec

No coverage information was collected, exit without writing coverage information
C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\.bin\tape.CMD:1
@ECHO off
^

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.Module._extensions.<computed> [as .js] (C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\istanbul\lib\hook.js:109:37)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at runFn (C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\istanbul\lib\command\common\run-with-cover.js:122:16)
    at C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\istanbul\lib\command\common\run-with-cover.js:251:17
    at C:\Users\froma\Development\javascript-todo-list-tutorial\node_modules\istanbul\lib\util\file-matcher.js:68:16


npm ERR! Test failed.  See above for more details.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `npm test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\froma\AppData\Roaming\npm-cache\_logs\2020-04-27T18_06_17_945Z-debug.log

I am currently in the process of writing a Todo List example in:
dwyl/learn-elm-architecture-in-javascript#45

It's pretty close to being "ready":

But it's dawned on me that a five thousand line Pull Request
which more than doubles the size of the original tutorial:
https://github.com/dwyl/learn-elm-architecture-in-javascript/graphs/contributors

Adding 5k+ lines to a repo that has 2.3k Lines (NET) is more than double.

So I'm thinking of splitting it out into it's own repo,
similar to how: https://github.com/dwyl/phoenix-chat-example
is separate from: https://github.com/dwyl/learn-phoenix-framework
related, but "stand alone".

Thoughts?

http => https

While reading through this superb tutorial (congrats by the way! 😜),
I noticed a couple of broken links in the "How?" section

We will be using Tape and JSDOM for testing 
both our functions and the final application. 
If you are new to either of these tools, please see: 
https://github.com/dwyl/todo-list-javascript-tutorial 
and 
front-end-with-tape.md

https://github.com/dwyl/todo-list-javascript-tutorial/blame/610f6c55f76685375202ed38ba7d084ae322589b/README.md#L203-L205

Both of these links 404 ...

I think the links should be https://github.com/dwyl/learn-tape
and https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md respectively.

At the time of writing this is what I'm seeing:

Todo:

• Replace Travis-CI with GitHub Actions CI
  see: dwyl/learn-travis#67
• Update Build Badge to use GitHub CI badge instead of Travis-CI!

  example: dwyl/repo-badges#45

• Update dependencies badge
• Update hits badge
• Create PR: #35
• Confirm working

How can I add the application files to GitHub ? I've never been able to add a folder, I'd like to know how to do it.