I completed a tutorial on how to make a Tetris game in-browser using JS and HTML/CSS, but I'm having trouble understanding if the author's coding practices for the JS portion are good, and if not, how they can be improved. For clarity, the code in question can be found here: https://github.com/kubowania/Tetris-Basic/blob/master/app.js
What I understand from reading this is that the author creates an arrow function that is run when all DOM content is loaded and all of the functionality for the game exists there. What I don't understand is why they just throw all of the variables, functions, and event listeners into that one function seemingly haphazardly. I think it's hard to follow and would like to learn how to improve it - what would be the best practice for something like this? Is there a way to declare the functions and variables elsewhere in the file or other JS files? Or am I incorrect and this is acceptable for JS?
I assume you're talking about how the file starts with this:
document.addEventListener('DOMContentLoaded', () => {
It works fine, but is probably one of those things that grew over time. (At least, often times I write this exact line of code with 2 or 3 lines in the event handler, and then a couple days later there's 100 things in it and its time to clean up a bit.)
Or am I incorrect and this is totally acceptable for JS?
The language doesn't care. Whether or not it's acceptable is up to you and the folks working on the same code.
what would be the best-practice for something like this?
Breaking things up into modules is commonly done. It seems to me that this code example is just that... an example. Working with bundlers to handle modules is probably out of scope for a simple tutorial. It's probably easier for folks taking this Udemy class to have this all in one place.
Related
I have a question was told to "not to mix up languages HTML and JavaScript together".
Mainly I heard this statement in JS tutorials using addEventListener instead of function called directly from html (for example onfocusout or onclick). In my opinion - modest newbie - calling functions from HTML (like onclick etc.) is more comfortable.
But, w3schools says that “addEventListener() method is not supported in Internet Explorer 8 and earlier versions.”, but I know that IE8 is practically extinct and unused by anyone.
Which is "good practics" and what will be better for my code?
Using addEventListener or calling functions from HTML?
Greetings and thank you for the answer.
The best practice is probably to do something like that from a script file or a script tag, otherwise you'll need to go hunting through your markup to figure out where these things are triggered by
If you have a site and know that ALL of the javascript parts that need to be maintained for a functionality are in one specific part of a file, or better yet, in one single file, it makes maintenance easier
The general idea is that even if it may be slightly less convenient when writing it at first, it's better in the long term for maintenance
You always want to try and make things easier for the next guy to work on it, because chances are, it's going to be you
I have a couple of basic, silly questions.
I have started programing on p5 just recently, and I'm very happy with it.
I'm building a very simple page that I want to have a very simple bubble animation, just like this one.
https://editor.p5js.org/caminofarol/sketches/S_YwpAWdk
now, I figured that using even the p5.min library is way to much for this, so I thought I could perhaps try to find another lighter javascript library and I found two.js.
here are the silly questions.
from what I understand both p5 and two.js are just libraries so even though they have their own objects, both should be able to use plain javascript syntax?
so, stuff like declaring variables, using conditionals, operators or making your own functions should work with both libraries right?
so, each library loads the same basic javascript operating instructions?
anyways, at the moment I manage to load the two.js library and make a simple circle to appear in the canvas, but now when I tried to go about moving the little thing (I guess by using something call translate) I failed terribly, and I asked myself; why two libraries seem like two different worlds?
This is really vague question but I am in the process of inheriting a rough-on-the-edges piece of jQuery for handling requests / responses to an API over JSON. Basically, each 'page' has a separate set of ajax calls and there is tremendous duplication.
I'm looking for a good blog post or maybe a jQuery plugin that separates out different dependancies for doing these requests. I'd like to keep it in jQuery. Like bundle up arguments, post, wait for response, and then delegate to a view. Something like Sammy looks interesting but might be too much.
thx
One way to tackle this is to use Selenium to write a series of tests (essentially documenting how the code currently functions) such that all the tests pass. Then, start refactoring it, and cleaning it up so it's easier to read, but the tests still pass. This way you still know that the code words the same way, but it's much easier to read.
Rewriting it from scratch might work if it's truly a mess, but it's likely that if you take that approach (rather that working to put a test suite around it incrementally, as you're refactoring it) that you'll wind up re-introducing bugs into the code that have already been fixed.
This doesn't sound like it's on the scale of the Netscape mistake, but it's a good story nonetheless.
I am new to CoffeeScript and am trying to get a feel for the best way of managing and building a complex application that will run in the browser. So, I am trying to determine what is the best way to structure my code and build it; with consideration for scope, testing, extensibility, clarity and performance issues.
One simple solution suggested here (https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools) seems to be maintain all your files/classes separately - and the use a Cakefile to concatenate all your files into a single coffee file and compile that. Seeems like this would work, in terms of making sure everything ends up in the same scope. It also seems like it makes deployment simple. And, it can be automated, which is nice. But it doesn't feel like the most elegant or extensible solutions.
Another approach seems to be this functional approach to generating namespaces (https://github.com/jashkenas/coffee-script/wiki/Easy-modules-with-CoffeeScript). This seems like a clever solution. I tested it and it works, but I wonder if there are performance or other drawbacks. It also seems like it could be combined with the above approach.
Another option seems to be assigning/exporting classes and functions to the window object. It sounds like that is a fairly standard approach, but I'm curious if this is really the best approach.
I tried using Spine, as it seems like it can address these issues, but was running into issues getting it up and running (couldn't install spine.app or hem), and I suspect it uses one or more of the above techniques anyways. I would be interested if javascriptMVC or backbone solves these issues - I would consider them as well.
Thanks for your thoughts.
Another option seems to be assigning/exporting classes and functions to the window object. It sounds like that is a fairly standard approach, but I'm curious if this is really the best approach.
I'd say it is. Looking at that wiki page's history, the guy advocating the concatenation of .coffee files before compilation was Stan Angeloff, way back in August 2010, before tools like Sprockets 2 (part of Rails 3.1) became available. It's definitely not the standard approach.
You don't want multiple .coffee files to share the same scope. That goes against the design of the language, which wraps each file in a scope wrapper for a reason. Having to attach globals to window to make them global saves you from making one of the most common mistakes JavaScripters run into.
Yes, helper duplication duplication can cause some inefficiency, and there's an open discussion on an option to disable helper output during compilation. But the impact is minor, because helpers are unlikely to account for more than a small fraction of your code.
I would be interested if javascriptMVC or backbone solves these issues
JavaScript MVC and BackBone don't do anything with respect to scoping issues, except insofar as they cause you to store data in global objects rather than as local variables. I'm not sure what you mean when you say that Spine "seems like it can address these issues"; I'd appreciate it if you'd post another, more specific question.
In case you would prefer the node.js module system, this gives you the same in the browser: https://github.com/substack/node-browserify
File foo.coffee:
module.exports = class Foo
...
File bar.coffee:
Foo = require './foo'
# do stuff
I was wondering how I can detect code plagiarism with Javascript. I want to test assignment submissions for homework I'm going to hand out.
I've looked at using MOSS, but—from what I've heard—it's pretty poor for anything other than C. Unfortunately, I can't test it yet because I don't have submissions.
How can I go about detecting code plagiarism with JavaScript?
They claim that MOSS works on Javascript. Why don't you just try it. Write a Javascript file, then modify it, like a cheater would modify somebody elses code and feed it to MOSS to see what it says?
I build Clone detection tools, that find similar blocks of code across files.
See CloneDR overview
and example reports. CloneDR works for a wide variety of languages, and uses
the langauge structure to makethe clone detection efficient and effective.
As per yar's comment pasting chunks of javascript into Google will work pretty well - but is stopping them cheating realistic?
Could you split the task into two parts, the first part allowing them to 'cheat' if they want to but tell them that there will be a second part of the task in class. Then have the class do exactly the same task in supervised class time.
If everyone has 'cheated' first time that's one thing. But if anyone is unable to redo their homework in class then they a) cheated (which is bad enough) and b) learnt nothing (which is worse).
Using the internet to 'research' is always going to happen - but its the ones who forget their 'research' that are cheating both you and themselves.
I wouldn't go out of my way to try and run through a plagiarism checker.
Code is code and bad code is bad code. People who can't code (those who are more likely to copy/paste code**) generally don't have good code. Difficulties (and questionable approaches around them) will be easily detectable if you even take a few seconds to check the source. Something just won't match up and it should smack you in the face.
**I would argue that adapted code isn't plagiarized unless it violates the authors distribution intent (e.g. violates copyright or license) and would encourage the students to simply document which existing resources, if any, they used as a base and/or incorporated as well as to encourage them to understand and adapt the code to fit their needs (and to make it better, so much code out there is soup). I do this all the time for "real programming work". Of course, it's not my curriculum :-)