« first day (3406 days earlier)      last day (1767 days later) » 

05:41
Hi All
05:57
0
Q: How can I insert external files.js into a react component?

Alejandro Cabrera MenaI want to load a text editor called texture (https://github.com/substance/texture) when you startit npm start create a dist folder with an index.js. I have understood that the .js found there create the editor that sees the final user Now, how can I use them in my react application I tried copy...

I don't even know where to begin with that question
 
2 hours later…
08:19
@paul23 someone wants to add jQuery to a react page :)
hi i am trying to install library directly from master branch --- but i keep getting this error
````
Module parse failed: Unexpected token (127:33)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * @returns {Object} - Focus and zoom animation properties.
| */
> _generateFocusAnimationProps = () => {
| const { focusedNodeId } = this.state;````
@Gopherine has _generateFocusAnimationProps been defined previously?
if not, then it's creating a global variable, which if you're using strict mode, isn't allowed
don't be strict or don't import the library :)
08:37
XD well i have to import library and its being used inside the library i am trying to improt it directly via jsx file
I think that's the issue anyway
you could try creating a copy and adding a "let" before it and see if that imports fine
or at the least, it complains on a line beyond line 127
ok just additional note i am trying to import this in react
that it starts with a _ is usually an indication that it's a "private" function
I don't think it is meant to use it externally
but I don't know the lib myself
github.com/danielcaldas/react-d3-graph/issues/276 this is related to this i tried the way how it was suggested there but i am not able to do this
09:04
Hi everybody!
Is there a a way to automatically hash static assets with webpack? Like with copyplugin or something?
09:19
stackoverflow.com/questions/60184789/… just created a question :) anyways thanks for the help
yes i did but i still got the same error @KarelG
best to include your webpack config as well
(in your question)
hmm i kinda removed it since the file is too long but i will add back what i had again and include it
09:44
@KarelG yeah but at the extent of being unable to parse it?
I'd think a warning or a better error message would be shown instead
10:01
vague errors are pretty common when doing webpacks
10:32
@Neil it appears to be a private lib
10:46
Is there a technique to test what polyfills one needs?
@paul23 yes
you generally don't have to worry about a function changing behavior, so it's usually enough to test whether or not it exists
if you support IE8, do an intersection between the set of all functions not supported in IE8 and all functions you call
Hi All
then you perform a test on each and, if necessary, you define a polyfill for each
im facing one issue with the models directory in my node application
my model directory was inside one of the sub directory, and moved it to the root of the solution from Windows explorer i copied and pasted it on the root.
before this copy paste action things were working fine, but once i did this my model objects are not returning with a response.
Rather im getting below exception
{"errno":-4058,"code":"ENOENT","syscall":"stat","path":"myPath\\countries\\getById"}"
\\countries\\getbyId is my endpoint though.
im using visual studio code!
the endpoint is an abstract concept, but you still have to understand how that maps under the hood
if it looks in a specific folder and you moved that folder, this is probably the error message you'd get
10:59
ok, if i even place the folder back to its old structure, it still gives the same issue.
clean the project
then retry
it isn't possible you broke something by moving a folder and then it remains broke after you put it back
@Neil That is when you know a function is not supported (and you know you use it in your code somehwere).
yes already did,
I'm wonderinging when I have a decent sized codebase (right now: 30 kloc), and need to check "hmm which polyfills would I need to add for ie 11).
You can only know if you'll need the polyfill when the page gets loaded
therefore you must test for every function you need to call that in some browser version you support, may not exist
11:04
Well can't webpack/babel do such an analysis?
the analysis that it can do is "you may be missing these x functions, so we will add a 'test and define if necessary' code for each"
all you do is add the polyfills necessary to be able to support a specific browser and version
11:19
@paul23 why caring about it?
I am curious about your use case
@KarelG To support ie 11 users?
if you use bundlers, then they do the job for you.
polyfills are automagically included.
uh I don't think cra does that?
Since it's better to not include polyfills with the source, but instead dynamically get them from a cdn, at least I think?
So that users may cache them between multiple websites.
the polyfills have to be present if there's the possibility that your browser may not support it
you obviously don't want to add in polyfills you don't need because it's just weight to download by the user
but even if you don't use the polyfills, you still must include them if the potential is there that you may need them
think of polyfills as an upgrade script for browsers that makes them work the same
if you don't need to run the upgrade because you're using a modern browser, that doesn't mean everyone is
I know that..... I just don't really like going through each and every potential component to look for hidden functions. And stackoverflow.com/questions/43756211/… is kind of negative that cra will do this for me.
11:31
ah just use the polyfill service then
11 mins ago, by KarelG
if you use bundlers, then they do the job for you.
it gives a whole package
either you add the whole bundle and get polyfills you don't need or you find out which ones you need and painstakingly add them one at a time
honestly not worth doing the second just to reduce the amount of polyfills
So finally i did it with npm link :) though i needed something remotely possible this still works
@Gopherine you had to import the lib right?
11:41
yes
(normally you should be able to use it as npm dependency)
ah well, it's solved
don't forget to include it as answer to your question you just made
(or mark as answer if someone replied with that)
@KarelG but it does not show up in my node modules so more so if i move to other system i will have to repeat the linking process. I was hoping if someone could possibly give me a solution like one time solution where i dont need to repeat the whole process of linking
can you link the repo ?
could be that it's not published as npm package
var scripts = ['/static/js/utilConfig.js?v='+versionUpdate+'',
                '/static/js/main.js?v='+versionUpdate+'',
               '/static/js/main-analyst.js?v='+versionUpdate+'',
               '/static/js/CustomeJS.js?v='+versionUpdate+'',
			   '/static/js/ManageContractTest.js?v='+versionUpdate+'',
			   '/static/js/main-analyst-test.js?v='+versionUpdate+''
			   ];
var _sIndex = 0;

function load_script() {
    if (_sIndex < scripts.length) {
        $.getScript(scripts[_sIndex], function () {
the release that i want is not published as npm package that is the reason i am trying to get it via master and the thing is its been over 2 months its not published so :D
11:45
What does the above script means...?
@Gopherine ooo that might explain it.
make an issue there?
I absolutely do not have any idea in understanding this...
and in your package config
@CommonMan add scripts on page load
"dependencies": {
  "project": "user/project#branch",
}
11:47
not very conventional though
@CommonMan that just looks over the lenth of the array script and runs in loop over and over till the condition breaks read recursion and your code is possibly not complete.
oh it is sorry yes read recursion
@CommonMan for each line in array, a new <script src=LINE></script> is added to the DOM
I have been hating that $.getScript for ages
but you can use import now right?
does import do the equivalent?
import is for modules
those files seems a common js file for me
not that it exports something :)
otherwise the path management is bad as well
yeah but I recall the other day, apparently it was possible something similar using import
11:50
should be static/js/modules or something
@Neil when using import on a regular file, it just behaves as before: loading it in
if it is really exporting something, then it gets added as an entity
@Neil dont know but it works how it should normally work like if i install it via npm just that i dont do npm install i just do npm link libraryname. so it has a local image of that library. good for development but not good solution for production
you can add a github repo as dependency
but that's an exceptional case. Usually you should rely on released npm packages
really need a well maintained library for sigma - sigma does everything way better then what this library does but it has extremely poor react-wrapper .... umm i tried that but thats again installing the whole repo
however that was working when i was working with node js like directly adding githubrepo
uhm ... you need to only add a branch as a dependency
that only checks in the source code at stage X
sure, you have other files as well, but better than nothing
@KarelG but that was giving me again the whole src and npm modules i did try that and ended up with same error. let me know if it works for you i might be doing something wrong then
12:07
I don't know the lib.
I already asked ya to share the link
🙃
github.com/danielcaldas/react-d3-graph @KarelG sorry i thought i already did earlier issues were from the same lib
doesn't npm allow libraries to upload snapshot versions?
it seems like that would be preferable to github in any circumstance
12:43
Has anyone used express-validator? Thoughts?
13:13
@KarelG - please guide good path management
1 hour ago, by KarelG
should be static/js/modules or something
@CommonMan ^
ok, these or on a page... and not linked directly to that page... but the scripts containing in it are being executed into that page... how is the possible to display the values on the page....
sorry for bad english
how it is connected is being a puzzle for me...
just because it loads it can execute it and display the values
when a <script> element is added to the DOM, a separate procedure is initiated to read and parse its content
this is done by the js engine
 
1 hour later…
14:43
Lemme get your guyses opinions
is stuff like THIS alright?
const getById = document.getElementById.bind(document);
const getClassNames = document.getElementsByClassName.bind(document);
const getByNames = document.getElementsByName(document);
const query = document.querySelector.bind(document);
const queryAll = document.querySelectorAll.bind(document);
like shortcut functions? or does that kill readability
		$.ajax({
			url:  sumproxy,
			type: 'get',
			dataType: 'json',
			contentType: "application/json; charset=utf-8",
			headers:({'EnName':enName(), 'z':Z()}),
what does EnName: enName(), 'z':Z() in the headers parameter measn?
No idea
Search it on the ajax docs
Could probably find something about it in headers
@CommonMan I searched a few things, it looks like a selector for the "English" language for sending data
Cant find any official data for it
probably incorrect syntax then
I too searched @TaylorS
or maybe custom syntax?
I am thinking...
14:58
I see... Functions... enName() and Z()
probably custom syntax
whered the code come from
if it came from somewhere else, it probably contained other data
like the functions in that array
what do you mean where the code come from... its written in an application
i didn't find it anywhere in internet
15:12
So you wrote it then?
What is Mean is, if it came from somewhere else (whether than be an application OR the internet)
IE: were you the one who made the code or not
if its false, check where you found it, and look for the specified functions, see what they do
decide if they are needed
i SEARCHED IT and couldn't find... i will have to deep dive to check it
(BTW, thanks for clarifying that it's no where from internet)
15:28
@CommonMan it just adds extra headers to the request +
@KarelG - have to check whats written inside
just search for that function?
Sure @KarelG
(not in google, but locally ...)
yes i agree
15:31
you can do it in console tho
enName().toString()
@TaylorS what's wrong with just using those API functions at all?
@TaylorS I only use the last two and just suck it up and write them out.
I wish you could setup shortcuts in your IDE tho. So I type $ and document.querySelector is suggested.
fyi the standard allocates variable names to id's of a HTML element to refer to it
yet I still advise to use getElementById
@JBis macro's?
I have plenty of these :P
@KarelG - Good idea @KarelG
I will do it
15:50
I have this giant constant macro thing with like tons of shortcuts I use...
Idek why lol
Mostly for the sake of shortening some of my bigger projects
I copy and paste em into ones with specific needs for example
just to skim off those extra couple bytes
and make it look clean
@KarelG mind blown
Thanks
16:08
can javascript session store objects?
Yes..
I dont'think so... is it
its the same thing as Localstorage..
how can I make floating borders in html/css?
oh! wow... i store it
16:08
It just clears after the window is closed
borders that do not eat space
ok @TaylorS
or just... an overlay element... perhaps
"floating" borders?
I think i have a solution, but I may be interpreting it wrong
Like these macros common man,
const localSet = localStorage.setItem.bind(localStorage);
const localGet = localStorage.getItem.bind(localStorage);
const tempSet = sessionStorage.setItem.bind(sessionStorage);
const tempGet = sessionStorage.getItem.bind(sessionStorage);
Its all the same, local storage is saved forever though, atleast until its cleared
16:23
You guys ever make something that you're really proud of, that you think is beautiful and elegant, only to have the bosses decide that it's not needed so it gets pulled?
^
Well yes
Ive known others irl
and they call my work trash, cause Im a newbie
I feel like its awesome work
then I just wound up deleting it after Ive been told its worthless
Page I was making was sort of a cross between a table and a treeview. Basically a treeview with field columns. Collapsible and expandable branches like a regular treeview.
Anyway, I came up with a great idea of how to show branch connection lines with an inline svg background image generated on the fly as the framework was generating the table. Each row had its own image and they lined up with each other so they looked like continuous lines. The company is working with an outside design agency and they apparently decided that the lines weren't needed. :/
17:24
That time where you emulate css measurements in JS because your so damn bored and out of ideas you start imagining merging two languages together FOR FUN lol codepen.io/SkylerSpark/pen/GRJpxbR
17:35
I got two es6 objects, I pass the same emitter to both object can they talk
Hey, how do I create micro functions like this without malformed arrow expression errors?
const _ = document.querySelector.bind(document);
const __ = document.querySelectorAll.bind(document);

// Write it like CSS

_(".block") => {

}
I wanna have a CSS like effect in my js
Is that possible... or no.
@TaylorS you mean this? material-ui.com/styles/basics
And for react, this more specifically: material-ui.com/components/use-media-query
17:58
@paul23 I mean like, I want to have that css "look" but be able to call JS inside the block
so like, I could call
_(".block") => {
 this.innerHTML = "";
}
is something that looks like that possible? or is that out of the range of the JS Syntax
18:16
Yes two object can talk, Something else is wrong
19:09
@CommonMan Yes and no. Session (and local) storage are always stored as a string however you can use JSON.stringify and JSON.parse to store objects.
@TaylorS sure why not
except you couldn't use an arrow function
 
3 hours later…
22:39
22:51
lolz
23:13
Hey guys, I have some paranormal node.js process going on. I restarted my server to install letsencrypt, however, before fully completing the setup, I launched my express and nuxt app. So now I want to kill my process. On a Debian node image from digital ocean. pkill -f node cleared out the apps from my ps aux list.
However, the website still persists. I honestly have no clue how it's still running and I have ran the application as root. (Yes I know, shouldn't run things as root) While I could just restart the server, my let'sencrypt cronjob I still need to setup will need to restart my server when it updates the ssl cert. So now I'm boggled. Anyone ran into a phantom node.js apps running even though you whacked/killed the process...
what does netstat -lp return
do you see your port listening in the list
that's a really weird scenario
no i don't see port 80 or 1337
it suggests that the node app you started (and have since killed) isn't the one that was being viewd on your browser the whole time
There are two hard things in computer science
I have a feeling that your problem falls under the category of the first
23:16
stupid question, you sure it ain't browser cache?
I can't imagine what else it would be
http://cff.inventx.io

loads on my pc and phone, doesn't matter how many times i clear the cache
aint loading for me
does that load anything?
nope
oh thanks
23:17
lol
it's been driving me nuts, i guess chrome isn't clearing cache
sigh
lolz
thanks
what i find really weird though
oh i think i know
nuxt has that pwa feature
omg
i been looking at one of those pwa apps
23:20
that's why you test in incognito
works incognito too
so now i gotta figure out how to clear that
close all incognito windows and open a new one
i already restarted my pc as well
still alive
$ rm -rf / that'll surley clear the cache
(don't do that)
undoubtedly
23:21
lol that would wipe everything haha
@jemiloii If you restarted your computer, and then opened a new incognito window and the app is still there, then this isn't a service worker problem
Fun Fact: When I was young (just started using terminal), I came across a post saying to always lookup commands you find on the internet instead of just typing them in and hoping they work. Next day, I encountered that command not realizing. I typed it into terminal, entered my password, and at the last second decided to search it up. Got really lucky I checked cause I didn't have a recent backup.
i think ima try a different browser
Firefox has entered the chat
man, what's with my system. what is caching this thing. I wonder if it's the isp
if that's so, then that's creepy
23:25
@JBis excellent story
are you using https?
well not yet, that's the point of shutting it down
so i can use https
ISP? doubtfl
oh yeah, oops
maybe the cache got stuck, lookup where chrome stores its cache and manually delete it
i never used safari on this mac, first time using it and it can pull up the website...
23:30
ok lets check for sure
tried using a proxy site and well, a proxy site can't find it
curl it
wait, lemme take my phone off the wifi
i think it's something to do with the network i'm connected to
cause it doesn't work on my phone anymore
if i connect to the network
Its not your isp
it shows again
23:32
its running on localhost, you can't acccess it out of your network tho
it isn't running on localhost
the ip points to you public ip addresss and the router probably reroutes it internally
its on a digital ocean server
not my pc
oh, well thats odd
yeeeah
23:32
do you have telnet install?
not on this machine
Are you able to curl the site?
let me try
i wish i thought of that, but no i can't curl/wget it
which is expected
do you get connection refused?
yeah
23:37
so its def a caching issue however it doesn't make sense that chrome and safari are sharing cache
or when my phone is on the network, it loads the page as well
no CDN between you and digital ocean?
could my company just have a fancy router?
So both of your browsers can load it but you can't curl it from the same machine?
That's very bizarre
Are you sure you're curling the exact same destination that the browsers are loading? protocol, port, etc
Do you have wireshark installed?
If not, install it. We can then see where the requests are going and coming from.
23:43
wireshark nope, but i can get it
if you are lazy you can just run sudo tcpdump -nnS port 80
then load the site and see where its going
i got it installed now
sudo /Applications/Wireshark.app/Contents/MacOS/Wireshark
then select WiFi (or whatever interface besides Loopback (lo0) has traffic)
in the top filter bar put tcp.port == 80 and hit enter
alright
load the page and send what you see
23:53
man am i confused, says i made a request to the server, and then says i got a response from the server as a 200 with the content
are you sure that the source ip of the response packet is the correct one?
yeah
Does your server have ip filtering by anychance?
not that I know of
just a basic digital ocean node.js image install
ok now curl it and compare the two packets
whats different
23:56
doesn't even send a package o.o
packet*
so nothing
Are you sure you have tcp.port == 80 in the filter bar and NOT http?
oh i have http
:p
the packet should be red or something
so i reran the site
mostly the space ips, but I see one new one and it only appears a few times out of the million
(btw technically the packet isn't http until the protocol is estbalished which can't happen if its refused which is why you need anything on port 80)

« first day (3406 days earlier)      last day (1767 days later) »