sdras / array-explorer Goto Github PK
View Code? Open in Web Editor NEW⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time
Home Page: https://arrayexplorer.netlify.com/
License: MIT License
⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time
Home Page: https://arrayexplorer.netlify.com/
License: MIT License
As specified by the "Important note", .sort()
does not always behave as expcted when using numbers.
I think that the example should either sort an array of strings or provide a compare function.
e.g.
arr.sort((x, y) => x > y ? 1 : -1)
Hi,
Great work with this project! Would you consider adding immutable examples too? I could try to help
Problem with installation.
While running
npm run dev
internal/modules/cjs/loader.js:651
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Prod building goiing without problems
Test on Mac OS amd Windows PC
Update webpack - no results
I feel like indexOf
's optional second parameter: fromIndex
, is an unsung hero.
It has saved me many times from having to slice
an array before calling indexOf
.
Would you consider a PR with an example using fromIndex
?
Awesome tool btw, thanks! I have been working up the courage to contribute open source and maybe this could be the start of it.
I had to recently clone an array for a work project.
I see that you have a feature to do that in the ObjectExplorer.
Could we look at adding one here too?
The labels in AppMethodPrimary.vue and MethodChoice.vue use I
(first person), whereas shortDesc
in the store uses you
(second person).
Perhaps the store should be changed to I
to match the labels?
A PR (#97) was recently merged where we bumped the webpack-dev-server version from 2.11.3 to 3.1.11
This seems to cause some issues.
When running npm run dev
I get the error
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:538
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/km047841/myProjects/WebDev/array-explorer/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
Even after installing webpack-cli, I still get the error
module.js:538
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/km047841/myProjects/WebDev/array-explorer/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
When I rolled back to webpack-dev-server 2.11.3, the error isn't there anymore. I'm no webpack expert, but I imagine it has to do with some changes needed in the webpack config for the latest webpack-dev-server. Maybe even webpack 4. I'll investigate more. Maybe use this as a way to learn about webpack, but obviously, if someone else/Sarah knows the solution or can figure it out quicker, feel free to fix it :)
Hello,
I'm not sure, but in find items -> one item
:
reduce
returns sum of the array, as I'd expect, while reduceRight
'flatten' arrays. Shouldn't it be also sum?
Hi
Maybe you should allow user to play and experiments with snippet in "usage" and see the result in "output". So new javascript user could easily try these functions.
Sort should have a warning like the MDN docs
The tool contains array methods from ES5 up to ES7. A lot of these methods wouldn't work in IE11 for instance. Either the ECMAScript version or a ES6+ warning could let users know if they use said method they'd have to use a polyfill for pre-evergreen browser support or Node.js 4 or earlier.
In the codepen, for the choice "find items", "one item", "the last index of a particular item" the example is using indexOf
instead of lastIndexOf
.
scale: 0
from this line hides the animation and content.
Removing it with dev tools shows the animation as intended.
OS: Windows 10
Browser: Chrome 65
In slice()
method description of English version of the service, the text states:
The
slice()
method returns a shallow copy of a portion of an array into a new array object. You can specify either just the ending element (where begin will default to zero) or both the beginning and the end, comma-separated. The original array will not be modified.
But in fact, we cannot specify only ending element, but the beginning one. To prove my words I will refer to w3schools.com, admitting that the signature of the method is the following: slice(start, end)
, where both parameters are optional. The start
parameter comes first, so we cannot specify end
parameter leaving the former out.
I find that syntax highlighting makes code easier / faster to mentally parse.
as a coder
Three people on Chrome on a Mac had an issue with the output not showing up. I think it has to do with the timing of the scale in gsap. Need to investigate.
Can you provide reverse operation
For example, I choose Array.unshift()
result is:
I have an array, I would like to ....
I need to ad...
tks..
in store/index.js
const languages = (ctx => {
....
})(require.context("./", true, /[a-z]{2}/));
What are these things?
when I console.log(require.context)
or console.log(require)
it's get error
so Amazing...
this code Related to webpack? or vue?
thanks
Hi, when I choose a dropdown, then I need to click on another dropdown to see the full list, it's quite inconvenient.
I think it's better that when I choose a dropdown, it will display the next list on UI (e.g. with ul li tags) so that I can view and can click to choose the option.
I was hoping to turn this tool into an Alfred extension, and the only way I can see to do that is to possibly deal with query params from the URL. Would you be interested in adding this to the current version?
Something like selecting "I would like to "add…" and "element/s to an array" would result in the URL as follows: https://sdras.github.io/array-explorer/add/?splice
. Thoughts?
In turkish language some sentences was not clear. I will fix that.
The line code numbers are approximate
src/App.vue
line 7: 'Array Explorer' Although this text could be the name of the application. In that case it should not be translated
line 8: 'Find the array method you need without digging through the docs'
line 12: 'Usage'
src/components/AppCode.vue
line 14: 'Output'
src/components:MethodBase.vue
line 5: 'see the docs'
It's not important or urgent. It's just details to leave it 100% translated.
Currently, it doesn't mention JavaScript anywhere, so someone with no context wouldn't know which programming language this tool is using.
The readme mentions the possibility of adding additional programming language support, but for now, since it's only JavaScript, perhaps change the text from Array Explorer
to JavaScript Array Explorer
.
Either way, this is an amazing tool. Thanks so much for building it!
Hi @sdras , I noticed that you're using let
everywhere for default case, even when no reassignment occurs. Is this intentional ? I thought as default we'd use const
.
There's been a lot of interest supporting a bunch of different languages, and the first PR is in, so I need to build out a language switcher for the repo.
hi
please add Persian language
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.