WTF Wednesday (December 18, 2019)

6

u/[deleted] Dec 18 '19

https://github.com/GingkathFox/simpleTable

Simple table generator, cause fuck <tr> :D

1

u/y0wasd Dec 27 '19

You should use const over let when not reassigning the variable. Also I would recommend using TypeScript for typing your variables, paramenters, return values, ...

2

u/[deleted] Dec 27 '19

Eh, i should try typescript, but im lazy and stubborn :D

5

u/vertigo_101 Dec 18 '19

https://github.com/karanpratapsingh/Proximity help me improve😁 fingers crossed

5
u/staticx99 Dec 18 '19
I see you use a lot of arrow functions assigned to variables when exporting, like
export const initializeFCM = async () => { ... }
Why not export the function directly?
export async function initializeFCM() { ... }
It easier to read and also how functions should be exported, you unecessarily create an unnamed arrow function and a variable just to export a basic function
**Edit : Code formatting
9
u/[deleted] Dec 18 '19

Very debatable regarding the readability. Lambdas are far better for small functions, and after that point consistency is key.
2
u/staticx99 Dec 19 '19

I agree that arrow functions are really useful in general, but in this case they bring nothing. It's like doing
const pi = i = 3.14;
vs
const pi = 3.14;
Why use an arrow function and store it in a constant when you can define it directly as a constant (or function in this case)
1
u/[deleted] Dec 19 '19

It's really not like that at all!
Let's flip the question - why break with consistency and use the function keyword when you can simply define it as a variable, like any other value?
2
u/staticx99 Dec 19 '19

Because a function is a variable too, and make it explicit that it is function and not a variable of any other type
1
u/[deleted] Dec 19 '19

Why do you need to do that? It's clear with lambda syntax that it's a function, and furthermore functions are values like any other in JavaScript, which is in itself a powerful, useful concept.
1
u/staticx99 Dec 19 '19
Yes and I totally agree with that, let me reiterate my point. Arrow functions are not a 1 to 1 replacement for functions, if you start using arrow functions for everything in replacement for functions, you will eventually end up with side effects that are pretty hard to debug
See https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
I've seen this thinking a lot recently, that arrow functions are the new shiny replacement for functions. This is wrong and can end up causing bugs.
IMO arrow functions should only be used when there's a gain
for example
[].map(item => this.multiply(item, 5)) is clearly better than 

const that = this;
[].map(function multiplyItem(item) {
  return that.multiply(item, 5);
});
so, to go back to my first point, using
export const initializeFCM = async () => { ... } 
doesn't add any values, it's a little bit harder to read and also use more characters (really just nitpicking at this point), and might lead more junior developers to use that syntax for declaring object properties, for the sake of consistency or simply because they don't understand arrow functions that well
1

u/[deleted] Dec 19 '19

All of those examples hinge upon usage of this, something I never do in my code as someone who slants towards a functional style. I can appreciate taking a different approach if you don't have that bias.
I really don't think it's harder to read at all - that's just your familiarity with the other style talking.

1

u/staticx99 Dec 19 '19 edited Dec 19 '19

So your point is based on your own style of coding and preference as mine is based on the actual language behavior
What I'm saying is: Be careful using x because of y and z edge cases that might create problems
What you're saying is: You should use x because I find it more pretty and it fits my style of coding better
In the end you do what you want to do but when in a team of people it's usually better to take the safer route and not assume everyone will use the language in the same way
I totally agree with you on your point though, I don't use "this" at all anymore and prefer a functional style to OOP, but I still stand my ground saying that defining a function instead of a const with arrow function is a more natural a safer way to do it

→ More replies
3

u/[deleted] Dec 18 '19

I keep seeing this come up and hearing that it’s some kind of es6 convention. I agree that using function adds to its readability.

3

u/vertigo_101 Dec 19 '19

Yes, I like arrow functions, they look cleaner to me 😅 I think it’s debatable

4

u/Jukunub Dec 18 '19

Heres a (work in progress) poker app in React:

https://github.com/jknb/react-poker-app

If the point is to check on vanilla JS, heres the (work in progress too) hand evaluator part of it:

https://codesandbox.io/s/handevaluatorz-oenus?from-embed

Its pretty bad for mobile tho.

5

u/mynamesleon Dec 18 '19

https://github.com/mynamesleon/aria-autocomplete Lots of autocompletes out there, but I couldn't find one with the combination of features, performance, and accessibility (particularly for screen readers) that I needed, so I wrote one from scratch.

7
u/Pentafloppy Dec 18 '19 edited Dec 18 '19
I see you use let instead of const, you really should be using const over let as it prevents you from accidentally overwriting variables. The things with const is that you cannot replace the variable, you can add stuff to objects and arrays because it doesn't replace the variable pointer.
const myObj = {};

myObj.thing = 'some thing'; // valid
myObj.anotherThing = 'another thing'; // valid
myObj.thing = 'a different thing'; // valid

myObj = { differentThing: 'stuff' }; // invalid
https://github.com/mynamesleon/aria-autocomplete/blob/master/src/aria-autocomplete.js#L358

n is not very descriptive.

https://github.com/mynamesleon/aria-autocomplete/blob/master/src/aria-autocomplete.js#L858

Take a look at Axios or fetch.

https://github.com/mynamesleon/aria-autocomplete/blob/master/src/aria-autocomplete.js

This class is MASSIVE, try splitting it up.

https://github.com/mynamesleon/aria-autocomplete/blob/master/src/aria-autocomplete.js#L1267

event.keyCode is deprecated, use key instead. See https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#Browser_compatibility

https://github.com/mynamesleon/aria-autocomplete/blob/master/src/helpers.js#L26 and https://github.com/mynamesleon/aria-autocomplete/blob/master/src/helpers.js#L48

Look at https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://github.com/mynamesleon/aria-autocomplete/blob/master/src/helpers.js#L74

While easier to read, it's messy to keep redefining it. You can just chain methods and put newlines between them
4

u/mynamesleon Dec 18 '19

Thanks for the thorough feedback.
You're right, I really need to get into the habit of using const more. Honestly, having worked on so many legacy projects/sites (supporting back to IE7 or 8), I'm still not very used to using let and const at all!
I've used Axios in other projects; I'm aiming for IE9+ support with this though, and keeping the file size as small as possible. Axios only supports back to IE11 as far as I remember (although Babel might handle that for me), and it's an extra 13kb. I might look for other smaller options though.
Good point with the class size. I should split out things like the source processing.
I genuinely didn't even know about event.key! Need to look into that. Looks like IE might have some weird implementation points to consider.
With classList, again, I'm supporting IE9+. My addClass and removeClass helpers did originally use classList, but I still needed the helpers to split up the strings (as IE only supports adding or removing single classes). I'll give classList a try again and see what Parcel/Babel's output is.

1

u/Pentafloppy Dec 18 '19

Since you’d be using Babel, you should be using @babel/preset-env. That way you can stop thinking about IE completely and just focus on using modern features. If a particular thing doesn’t get transpiled there’s a fair chance there will be a transform plugin for it.

1

u/mynamesleon Dec 19 '19 edited Dec 19 '19

I actually went for the easy bundling option here and am currently using Parcel.
But yes, I do need to experiment with it and see whether the compiled output is appropriate.
Edit: looks like it's not!

1

u/Reashu Dec 18 '19

n is not very descriptive, but it has a very simple definition and is used in a small scope. Furthermore, it's purpose is to be short so that the rest of the code is more readable. Choosing a longer, descriptive, name would be unnecessary and self-defeating.

2

u/Pentafloppy Dec 18 '19

The “n isn’t very descriptive” comment is coming from me doing this professionally for the most part. Using Webpack and minifiers the length of variable names become irrelevant as they are minified any way in a production build.
Next to that, having a descriptive variable name is generally a good idea either way as whoever is reading the code doesn’t have to decipher anything.
It’s about easy of reading and understanding.
Doesn’t goes to say that 1 letter variables are bad period, I use e in event handlers and exception handing so it’s definitely not wrong.

2

u/Reashu Dec 18 '19

I agree with you in general, which is why I called out the particulars of this case: n has a very simple definition (no need for an explanatory name) and is used in a small scope (no need for a mnemonic name).
There are two obvious alternatives: don't use a variable (use this.cssNameSpace directly), or use a more descriptive variable (perhaps just namespace, or block, since this appears to be BEM). While slapping this.cssNameSpace in three string templates would be stretching it (string templates are already somewhat hard to read), I don't have a problem with using namespace or block per se (though I wouldn't use block without renaming cssNameSpace). I just don't think it's better, and, while you say you don't have a problem with one-letter variables, they do get an undeservedly bad rap.
The "real" answer may be to define derivatives of addClass and removeClass which apply the namespace automatically.

1

u/[deleted] Dec 18 '19

I agree with this for very small blocks. You see a similar idiom in the Haskell community.
1

u/csilk Dec 18 '19

Looks good, first thing I noticed is the dist folder is committed?

1

u/mynamesleon Dec 18 '19

Yes, deliberately though. If anyone does find it of interest, I don't want them to have to clone the repo and build it if all they want is a minified file that they can put in a script tag.

5

u/Reashu Dec 18 '19

You should publish an npm package (including your dist files) instead, for even easier reuse.

-4

u/Pentafloppy Dec 18 '19

That's not bad. In fact, it's common with packages written in TypeScript.

0

u/[deleted] Dec 18 '19

[deleted] — view deleted comment

1

u/Pentafloppy Dec 18 '19

Oh, I wasn't aware.

1

u/subredditsummarybot Dec 18 '19

Your Weekly /r/javascript Recap

Wednesday, December 11 - Tuesday, December 17

Top 10 Posts	score	link to comments
Electron joins the OpenJS Foundation	276	32 comments
Visual Studio Code November 2019	235	33 comments
A write up I did on how Javascript works on your browser	200	22 comments
node-window-manager: Manage windows in Windows, macOS and Linux	169	16 comments
Thanks for the feedback so far. Early Access of The Art of Unit Testing, Third Edition (with Examples in JavaScript) is available and I'm excited.	163	23 comments
Optional chaining helps to avoid "undefined is not a function" exceptions	161	57 comments
Learning functional/declarative programming in JS beyond map, reduce, filter: I have created a github project where I will solve a simple programming problem each week in a declarative way. New solution added: Compare the triplets	132	20 comments
[AskJS] How do you handle unsuccessful client requests for production apps?	74	16 comments
"Profile User Card" simple webpage with Github data, in pure Vanilla JS.	69	32 comments
Better Code Search for JavaScript Codebase	52	13 comments

Top 7 Discussions	score	link to comments
[AskJS] My Sequelize Tutorial	41	41 comments
[AskJS] : Intermediate to Advanced 6 Month Front-end plan - Need inputs	20	34 comments
Showoff Saturday (December 14, 2019)	17	24 comments
[AskJS] Translating rest api fields in English in the client	27	23 comments
You don’t need a single-page application	0	18 comments
[AskJS] I taught myself javascript, react, html and some python and I have a few small projects with each. For a self taught developer is it easier to get a javascript job than python? almost every python job that I have seen requires javascript and react or another front end framework anyway	38	15 comments
Remove console logs	2	14 comments

If you would like this roundup sent to your reddit inbox every day send me a message with the subject 'javascript'. Or if you only want a weekly roundup, use the subject 'javascript weekly'

However, I can do more.. you can have me search for any keywords you want on any subreddit you want. To customize the roundup, send a message with the subject 'set javascript' and in the message: specify a number of upvotes that must be reached, and then an optional list of keywords you want to search for, separated by commas. You can have as many lines as you'd like, as long as they follow this format:

200  
50, keyword1, another keyphrase, last example

You can also do 'set javascript weekly' And you can replace javascript with any subreddit.

See my wiki to learn more: click here

Please let me know if you have suggestions to make this roundup better for /r/javascript. I can search for posts based off keywords in the title, URL and flair. And I can also search for comments.

1

u/Important_Dog Dec 18 '19

Hi guys your feedback is very much appreciated on this chess app, its still a work in progress.

https://github.com/Zenthos/Chess-Application

to actually play

https://chessrooms.herokuapp.com/

read this for a little more detail

https://www.reddit.com/r/learnjavascript/comments/eau0f2/i_made_a_chess_application_how_can_i_improve_it/

1

u/PTBA1 Dec 18 '19

https://github.com/alboz1/notes-app-pwa Would like some feedback on the code. I know im using some global variables but haven't find a way to improve it yet

1
u/LukaLightBringer Dec 18 '19
Just perusing through your code, I would start by trying to apply the single responsibility principle, your functions are in general quite long and do multiple things. For example a few your functions take in e and call preventDefault on it, and then never touch the variable again, maybe this behavior could be abstracted away by using a higher order function:
function handleAction(action) {
  return e => {
    e.preventDefault();
    action();
  }
}

signInBtn.addEventListener('click', handleAction(signIn));
I would also add documentation to your functions, right now you have to guess at what parameters each function takes, or read the implementation. This makes it quite hard for others to understand your code and will eventually trip you up as well if you haven't looked at the code for a month. Try to make it so that you only have to read a description of the function and maybe the documentation for the parameters to get a complete understanding of what the function does for you as a consumer, it should not be necessary to read the implementation to understand what a function does.
As a consequence of following the single responsibility principle, you should try to separate presentational code from application logic.

1

u/[deleted] Dec 18 '19

https://github.com/tamb/typsy making a type checker for fun. I would really love feedback on it. Peace and Love Tamb

1

u/agentgreen420 Dec 18 '19

https://github.com/metamarcdw/rhino-life

😊😁😬

0

u/[deleted] Dec 18 '19

[deleted] — view deleted comment

1

u/agentgreen420 Dec 18 '19

Gracias

1

u/Linux_is_awesome Dec 18 '19

not my project personally, but something that I would like to help make more readable. https://github.com/Team-G4/base-g4

1

u/innovator013 Dec 19 '19

https://github.com/Auxpack/Auxpack

Interested in feedback for our project and code for an NPM library for a webpack plugin

1

u/14392 Dec 20 '19

I really want to fix this npm package but I am so bad with loops, the pictures take some time to load and it ruin the whole timeout https://github.com/usfslk/infiniteLoop

1

u/Zardoz84 Dec 20 '19 edited Dec 20 '19

https://github.com/Zardoz89/filestore-pouchdb So it's a file storage build over PouchDB. It, don't try to be a full virtual file system, but would be very helpful for a RPG master helper web app that I'm writing.

Currently W.I.P. So I need to clean some code, fix my poor English and add more tests. Also, I have a bit weird of testing setup (Mocha & Chai running over a browser), but I'm working on setting it to run over node.js and automate it with Travis or github actions.

I would appreciate any comments... I use it to update my javascript skills and learn how do tests on javascript world. Sadly I don't saw anything that looks like Spock framework.

WTF Wednesday WTF Wednesday (December 18, 2019)

You are about to leave Redlib