Looking for inspiration for a JavaScript project


(Daniel Hollands) #1

As this is my year of learning JavaScript, I figured I’d better get on with doing some actual learning. I’ve got access to various tutorials, but as @skinofstars reminded me earlier, I’m far better off just diving into a project and using that as a vehicle for learning what I need to solve the problems it throws up.

The problem is I can’t think of what I should do.

I’m not too fussed what type of JavaScript it is (be it Node or browser-based) as long as it is JavaScript.

Most of the programming stuff I do is in someway related to the Web, but I’m a little fed up with that, and want to do something different. I don’t mind too much if a browser is the vehicle for showing off what I’ve done (such as a game, or whatever), but that’s as far as I want the webby’ness of it to go.

So, with all of that in mind, can anyone provide some ideas of what I should work on?

Thank you.


(Stuart Langridge) #2

You have more time than you have ideas? Would that I were so lucky :wink:

Anyway, an idea: build a game. Pick a relatively small game - the Ketchapp ones are good, here - and write your own version of it. But (and this is the important point): you are not allowed to use a general-purpose library. No jQuery. And you have to use promises for everything. No callbacks.

Once you’re able to do that, you’ll have a good understanding of how JS works, I think…


(Kevin Carmody) #3

Ok, here’s an idea of something that would include Node, browsers, pubsub and potentially a nosql datastore.

Quiz buzzer system.

Outline:

  • Quiz master creates a game. They share a URL with the players, ideally using some URL shortner.
  • Players visit URL on phone/tablet browser. They enter their name. They are then shown a disabled button.
  • Quiz master has a dashboard. They declare “new question”.
  • All players buttons become active. When a player presses the button, other player’s buttons are disabled until the quiz master, from their dashboard, marks question as right or wrong.
  • If wrong, then “Wrong” is shown to player who pressed their button and their button disabled
  • If right, their score is added to their total. Move on to next question.
  • If a mistake, the quiz master can reset all buttons.
  • Quiz master can declare end of round and all players are shown a scoreboard.

(Daniel Hollands) #4

I can’t help but feel there is a thinly veiled insult in here somewhere :stuck_out_tongue:

I didn’t know what a promise was, so to Google I turned, and found an article on html5rocks about them, which somewhat humoured me when I got to this paragraph:

As a human being, you’re multithreaded. You can type with multiple fingers, you can drive and hold a conversation at the same time. The only blocking function we have to deal with is sneezing, where all current activity must be suspended for the duration of the sneeze. That’s pretty annoying, especially when you’re driving and trying to hold a conversation. You don’t want to write code that’s sneezy.

@skinofstars - thank you for the suggestion. I especially like the full listing of requirements, as it gives me something specific to work towards, and won’t let me cut corners.


(Kevin Carmody) #5

+1 for no jQuery
+1 for using promises


(Stuart Langridge) #6

@LimeBlast no insult, promise. The point is that I have about three good ideas for stuff I want to do every week and I have nothing like the time I need to do them all :smile:

What I’d like you to do is learn actual good modern JavaScript as it should be written, not the baggage of the last 10 years. So learn JS, not jQuery; use promises, not callbacks. This will teach you not only modern JS but also how to find information about modern JS and exclude 90% of the stuff on the web which is talking about JS as it was in 2002.


(Andy Wootton) #7

That’s a useful guide for me too @sil. I’d worked out for myself that 90% of what I was reading is rubbish but I don’t know which 90%. There is always an assumption in every coding text I’ve ever written that I’m starting out from somewhere I’m not. I don’t need WHILE explaining but I’ve never done objects or web. JS seems a bad place for me to start :frowning:


(Daniel Hollands) #8

Can I ask your thoughts on coffeescript? I’m guessing it’s going to have a similar deal to that of sass/less - it’s good to know, but you should learn vanilla css first.


(Stuart Langridge) #9

Coffeescript is the devil.

More importantly, you should learn JavaScript. This is the point @skinofstars and I are making about not learning jQuery - understand the base tool. After that, if you want to start using enhancements to it - libraries, languages such as Coffeescript and Typescript which use it as a target, the next version of it (which is called ES6) - then more power to your elbow. But understand JavaScript first.


(Daniel Hollands) #10

OK, figured as much, thank you :smile:


(Kevin Carmody) #11

Spot on. jQuery is a fantastic library, but it becomes a crutch. You often get devs saying they know jQuery, but they don’t know JavaScript. I’ve even seen new Node devs who are so reliant on jQuery in the frontend that they include it in their Node apps… like, wtf…


(Andy Wootton) #12

I’m a year and a bit behind but I’ve had my first JavaScript lesson now and I’ve met callbacks and Jquery for the first time. Is the advice not to use either intended as a training exercise or a permanent strategy? Are callbacks something that have no place in new code?


(Matt Andrews) #14

As the teacher of said techniques I suppose I should weigh in here…

jQuery’s relevance in 2016 is up for debate, though for “syntactic sugar” and convenience of its APIs I’d argue it’s still valuable. For example, native JS to select a set of DOM elements and attach event handlers to them is still fiddly compared to the jQuery equivalent (eg. you have to write a loop, you can’t natively map over NodeLists, you might end up in closure/scope hell, all of which jQuery simplifies). Remy has a good blogpost about what to do post-jQuery.

As for callbacks – for the stuff we’ve been learning (event binding), callbacks all the way. For things that are a bit more involved (eg. using JavaScript to retrieve data asynchronously) you start getting into “callback hell” (eg. nested callbacks within callbacks) whereas Promises make your code cleaner, better structured and arguably more robust. They’d likely be overkill for simple DOM element event binding, though!

I did debate in my class whether to teach jQuery – the reason I decided to was partly for the reasons above (eg. showing people how to bind events to elements becomes harder when you also have to explain what a for loop is, and a NodeList, and closures, and lexical this, etc) and also because anyone writing client-side code is still going to come across jQuery so it’s important to know what it is and how to work with it. That’s not instead of learning vanilla JS, of course, but hopefully to avoid scaring people away from JavaScript in the first place.


(Michael Brett) #15

Agreed. jQuery is a decent library, and will probably be around a long time. Think of all those WordPress installs!!


(Andy Wootton) #16

I’ve talked to Matt tonight, as I intended to when I posted my question. I just thought it would be interesting to get a range of opinions. I hope my question didn’t appear to anyone else to be criticism of his decision. Matt got people who’d never coded writing JavaScript in 2.5 hours, so I understood his decision to use some short cuts, but as a computer scientist, I think I should do things ‘the right’ way, even if it is harder. I just don’t want to make it harder unnecessarily.

I expected the consensus to be that it was possible to use pure JS and promises, but once you understood how, you didn’t need to any more: ‘Know the rules like a professional so you can break them like an artist’, or whatever Picasso actually said. I’m in a bit of an odd position because I’m not sure I’ll ever write JS for money, so I want to write what is right now, without worrying about old code.

I was very interested in what I read about promises, because of my recent research on functional programming and quantum information (different sources.) There were some surprising similarities which could be pure coincidence. I don’t know yet.


(Stuart Langridge) #17

http://vanilla-js.com/ ftw. :slightly_smiling:


(Andy Wootton) #18

Genuine comment: “The really depressing thing is it appears on job specs.”