« first day (3156 days earlier)      last day (2014 days later) » 

13:04
Hi bom dia, having trouble guys. This is supposed to work in IE11 but it is actually breaking.
        if (event.preventDefault) {
            event.preventDefault();
        }
198
Q: event.preventDefault() function not working in IE

sv_inFollowing is my JavaScript (mootools) code: $('orderNowForm').addEvent('submit', function (event) { event.preventDefault(); allFilled = false; $$(".required").each(function (inp) { if (inp.getValue() != '') { allFilled = true; } }); if (!allFilled...

that's from 2009
Is there a new way to test for preventDefault in IE11?
IE9+ supports event.preventDefault()
so the problem is elsewhere
Oh I see. Okay that helps. I will troubleshoot with that, and the fix is somewhere else. Thank you.
Then my fix is just to see why IE11 is still ignoring my rule.
function addBreakElementOnEnterKey(event) {
    if (event.keyCode === 13) {
        // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)
        document.execCommand('insertHTML', false, '<br><br>');
        // prevent the default behaviour of return key pressed
        event.preventDefault();
    }
}
on a contenteditable div
how are you adding the event listener?
13:12
Chrome, Edge, Firefox are good
@rlemon probably wrong lol..
addBreakElementOnEnterKey(event);
yea that's nothing
how are you adding the event listener
The parent function?
block.AddEventHandler('keydown', function (event) {
Does that look correct to you?
no
block.addEventListener('keydown', addBreakElementOnEnterKey);
IE11 won't go to the next line now
document.execCommand('insertHTML', ...)
olalala
13:18
pish posh
I use that
when I have too
function copy( text ) {
	if( navigator.clipboard ) {
		return navigator.clipboard.writeText( text );
	}

	const span = document.createElement( 'span' );
	span.textContent = text;
	span.style.whiteSpace = 'pre';
	document.body.appendChild( span );

	const selection = window.getSelection();
	const range = document.createRange();
	selection.removeAllRanges();
	range.selectNode(span);
	selection.addRange(range);

	try {
		window.document.execCommand( 'copy' );
		return Promise.resolve();
	} catch ( error ) {
yeah for copy
but for insertHTML ?
should have specified that
I only need to support IE11 what is the best approach?
Anyone has experience with manipulating big datasets on the front end , like lets say you have 1k+ products in a certain JSON , and youre creating a table where you manipulate this data ,by sorting/filtering/pagination. But its all on the front end after you do the initial fetch.
Im wondering about browser performance
chunk it up
1k is not that much, if we're talking about text values
13:21
process smaller bits at a time
or process it in a webworker
if you're concerned about blocking
its product data so each product could have a lot of properties, i currently dont know the exact amount that we should process but it could even go up to 5 or 10k
Rlemon I cant . We have a service that offers no filtering of any sort
It can only dump everything they have
you misunderstood
It depends on the processing you are doing, but iterating over all elements with a forEach, map, etc... shouldn't take that long. as other said, you can chunk it up or use a worker
downloading the data is going to take as long as it takes. if you're issue is rendering 1000 rows. don't. render them in chunks.
if your problem is processing 1000 rows.. don't. process them in chunks. or pass it off to a webworker
if your problem is not a problem you're just trying to jump the gun.. go test
Sounds like good advice, thanks!
I dont really have any experience dealing with this sort of thing and neither do my coworkers so I figured Id ask around .
Tyvam
13:25
1000 rows isn't much data for memory to handle (assuming each row isn't like 1000 columns of text)
looping it shouldn't even be that expensive.
it's only 1000 items
rending might be an issue.. but idk. would test myself
but then I'd also have to ask who in the hell is requiring you show all 1000 rows without pagination?
Yeah it wont be 1k rows shown all at once , i reckon we'd offer 20/50/100 rows per page
So Id deal with rendering issues like that
insertHTML is not supported by IE11 is why
I have a friend that told me his boss had him create hardcoded behaviors for enabling filters in their search form if the current search with the filters would output too many rows. (Yes, my friend suggested they use a LIMIT in the request, but "the client did not ask that"). So, no pagination with thousands of rows, sometimes
hi, guys yesterday i implemented a thing with react where i have a generic detail page, so when clicking on a link i pass data with the state in the To of link. The problem with this is accessing directly the link doesnt get all the data suposed to be sent with the link click, is there a way to remedy this?
hmm I used to have a website that (given input in the form of what elements are used and what is static and what is dynamic) it showed the correct way to vertically center a div.
Anyone knows that site by chance?
13:28
@tahtoh don't make it dependant on a passed state.
if a route should always pull X data, don't make the parent pull it and pass it on a route change.
make the route always pull that data
@paul23 dunno what site you're thinking of but I guarantee you the answer can also be found here stackoverflow.com/questions/396145/…
so i shouldnt have a generic info page
you can
instead have multiple component?
but you can figure out a way to make the url reflect it (like a path variable)
or you can use a generic page and have it wrap all of your specific pages
13:30
but you can figure out a way to make the url reflect it (like a path variable) @rlemon didnt understand this
trying to figure out your logic that i dont have
yourapp.com/details?for=rlemon
and how can this make it help me have a generic detail page?
in my case it should be something like thi
yourapp.com/Clients/details
yourapp.com/Orders/Details
but all pages contains a tilte, some text, and a table
what router are you using?
i didnt even dive yet into routers to be honnest
if you have <Link to=''/> where do you import that from?
13:34
now what i did is this
1 message moved to Trash can
@tahtoh Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq.
yes.. where do you import the Link component from ?
react-router?
<Route path='/PageInfo-data' component={PageInfo} />
yes
<Route path='Details' component={DetailsLayout}>
  <Route path='Client' component={DetailsClientBody} />
  <Route path='Orders' component={DetailsOrdersBody} />
</Route>
I'd probably do something like this
this says to get to get to client, i need to have details before? or what
going o check a video explaning nested routes be right back @rl
13:43
Is this a safe test for IE11?
function GetIEVersion() {
    debugger;
    var sAgent = window.navigator.userAgent;
    var Idx = sAgent.indexOf("MSIE");

    // If IE, return version number.
    if (Idx > 0)
        return parseInt(sAgent.substring(Idx + 5, sAgent.indexOf(".", Idx)));

    // If IE 11 then look for Updated user agent string.
    else if (!!navigator.userAgent.match(/Trident\/7\./))
        return 11;

    else
        return 0; //It is not IE
}
It seems to be working, but things change so fast nowadays
ew
UA sniffing
feature detection ftw
@JoJo if you ran it in IE 11 and it worked, it's probably fine
It's all the other versions that you have to watch out for :P
Ok awesome, I know it is not the best course, but nothing else is working. and I only need to sniff IE11
I will reduce the excess code in it.
@rlemon watched this tylermcginnis.com/react-router-nested-routes and he seems to be sending a param to a component am i right?
Also, dont like users who code .js without {}
it's gross
13:52
@tahtoh you mean the ID?
that's the same general concept of passing it with ?whatever=whateverelse but built into part of the path
that works too
yeah the route id, based on that he checks a const he created and retrieves the element concording with it
oh
i now understand the logic of how its done in react
thanks @rlemon
I'm here all week
good thing it's friday
14:14
wait has no one posted a friday link yet
ohh yea, that no longer auto plays
stupid chrome
14:53
I'm trying to split each string in an array by its colon:
function replaceThem (string) {

    string = string.toUpperCase();
    array = string.split(/;/g);

    console.log(array);

    array.forEach((value, index) => {
        console.log(value);
        value.split(" : ");
    })

    return array;
}
console.log(replaceThem("Raphael:Corwill;Alfred:Corwill"));
Anyone know why I'm not able to do so?
nOT sURE
iM nOT a rEAL cODER sUPPOSEDLY
@HappyHands31 split(" : ") will be looking for [space][colon][space]
not sure what you want the outcome to be
because you're not assigning anything
Hmm true...but I tried split(":") and same result...
well yea. it's just splitting it out. it doesn't do it inline the array
15:04
Oh, good point I could push values into a new array
are you trying to get [['Raphael', 'Corwill'], ['Alfred', 'Corwill']] ?
I'll eventually want to get (CORWILL, ALFRED)(CORWILL, RAPHAEL)
Must reverse first and last names
Do you know much about canvas?
Im having trouble binding strokestyle to the color picker on my dat.gui
15:07
!!> "Raphael:Corwill;Alfred:Corwill".split(';').map( entry => (${entry.replace(/;/, ', ')}) ).join('')
@rlemon "(Raphael:Corwill)(Alfred:Corwill)"
er
!!> "Raphael:Corwill;Alfred:Corwill".split(';').map( entry => (${entry.replace(/:/, ', ')}) ).join('')
@rlemon "(Raphael, Corwill)(Alfred, Corwill)"
typo
ohh names are reversed
Why must canvas be such a butt... I swear it seems more complicated than dat.gui at times
Ooof, gtg
15:09
@TaylorSpark it doesn't sound like you enjoy coding at all
!!> "Raphael:Corwill;Alfred:Corwill".split(';').map( entry => { const [ first, last ] = entry.toUpperCase().split(':'); return (${last}, ${first})} ).join('')
@rlemon "(CORWILL, RAPHAEL)(CORWILL, ALFRED)"
@rlemon I'm kindof getting lost with that....it's throwing a syntax error when I try to put it inside of a function (?)
1 message moved to Trash can
@HappyHands31 Please don't post unformatted code - hit Ctrl+K before sending, use up-arrow to edit messages, and see the faq.
"Raphael:Corwill;Alfred:Corwill"
	.split(';')
	.map( entry => {
		const [ first, last ] = entry.toUpperCase().split(':');
		return `(${last}, ${first})`;
	} )
	.join('')
you probably lost the backtics
it's a template string
15:20
o/
function rLemon (string) {

    string = string.split(';');
	string.map( entry => {
		const [ first, last ] = entry.toUpperCase().split(':');
		return `(${last}, ${first})`;
	} )
    return string.join('')
}

console.log(rLemon("Raphael:Corwill;Alfred:Corwill"));
?
Has to be a function...
okay no
look at what those functions all do
map returns a new array
and stop over writing assignment. chain or create new vars
Hmm how do I prevent the browser from opening a file when I drop a file into a div - in react?
function rLemon (string) {

    let newString = string.split(';');
	let newArray = newString.map( entry => {
		const [ first, last ] = entry.toUpperCase().split(':');
		return `(${last}, ${first})`;
	} )
    return newArray.join('')
}

console.log(rLemon("Raphael:Corwill;Alfred:Corwill"));
Seems to work
Thx
15:24
onDrop={(e: Event) => {
    e.preventDefault();
    e.stopPropagation();
    console.log(e);
    debugger;
}
looks correct. you might have to cancel the dragover and dragleave events too
I can't remember. but it is the same for how you'd do it normally
oh prevent dragover makes it suddenly work. This makes little sense though: why would the default dragover enforce opening a file.
because dropping a file on a website opens it in the browser
that's like always been how it works
Yes that would make sense for the dropping default behaviour.
but why do I also need to prevent the dragover, instead of just the drop event?
so your question is "why is drag + drop coupled" ?
15:37
!!magic
(∩ ͡° ͜ʖ ͡°)⊃━☆゚. * ・ 。 ᵀᴴᴱ ᴳᴬᴹᴱ
Well why is the default behaviour coupled. - As in you canceling one doesn't make sense.
> A listener for the dragenter and dragover events are used to indicate valid drop targets, that is, places where dragged items may be dropped.
there is your solution
drop events ONLY work on valid drop targets
and drop containers are decorated as drop by issuing a dragover or enter event
and for your followup "why is that the case?"
ask the spec writers
iM BORED... Anyone got a "fun" javascript project I can make, thats not boring?
@TaylorSpark oO
15:42
@TaylorSpark take some free js courses
they'll help
Ive already done that
yea. do more
Oh so the actual cause is because the event has multiple "meanings": both defining an event. As well as a flag that is 'used' as a drop target.
even like codeacademy are like simple console command
I already know more than those courses could teach me anyways.
@paul23 yea. the drop targets are made drop targets by assigning a drag handler
so without that handler the drop handler is ignored because they are not drop targets
hence the file opening
15:43
I've been teaching myself how-to-javascript for like the last 3 years
@TaylorSpark I doubt it
rlemon they really are quite boring courses
I've seen the questions you ask
Yup
You can tell cant you?
Why are you programming in the first place? - And why javascript on top of that?
15:45
There are things that are simple, yet I dont understand them, yet atm im going straight for rendering engines, physics, datgui, and THREE
I know it doesnt make sense
But if you were me, you would understand why I learn this way
go answer some questions not here
no. and then coming in here and flooding the room with complaints that the technology stacks you choose are too 'hard' is annoying
I know, I am anoyying.
But thats how I learn
When I want to mess with some JS and I don't have any specific idea, I just go to the MDN APIs list. Last time I found the Gamepad API and made a circle controlled by a game controller that can shoot rectangles. It was fun
cool. don't be annoying here.
15:46
btw if you're truly "above" the free course level, I suggest you just start looking at stack overflow
@Seblor the most fun I had when 'bored' was making Canvas demos
look for interesting questions and try to solve them yourself. - Just ignore it if someone else has responded faster/better, make the answers for yourself.
but not forking another demo and editing it
learning some math
The good ol' context2d
0
Q: Can components be created from string

vacuousI'm creating a WYSIWYG editor. First user creates a template of piece of page (let's call it block) and the other one can use this template when he creates a page. I want to use a react components as templates. Templates must be stored somewhere on server (database for example). Can I dynamicly l...

16:00
51 messages moved to Trash
!!afk weekend
OOPS: https://codepen.io/SkylerSpark/pen/PvrMmY

Is this what happens when you accidentally attach a spin animation to over 800 DIvs? BTW dont run it if you have a laptop
facepalm Copy and paste really screwed up my day, but looks kinda funny/cool so Ill keep it
Goddamn the site wont even load 100%... What have I done...
Does anyone know how to do a similar creation to what I made above using canvas? I was trying to make one of those illusion spinners that make your eyes hurt, but It just laggs the page like hell
Well I'm on a laptop so I'm not gonna click it
0-0 rip
Its so dang laggy, I cant even edit it lol
16:22
hi guys
can anyone check this out codesandbox.io/s/createreactapp-7qt3w i have a map on tabs to create links
but doesnt seem to work
line 59 on navmenu.js
where did i fuck up
16:42
Doesn't the .sort() method sort characters based on their Unicode code point value?
function alphabetized(s) {

    s = s.replace(/\s/g, "");
    let newArray = s.split("");
    return newArray.sort().join("");

}

console.log(alphabetized("The Holy Bible"));
logs BHTbeehilloy
Expected BbeehHilloTy
Oh wait - it's sorting some earlier because they're uppercase.
I think the first method is pretty neat, however, the second way, I think, is the nodejs express standard way of doing it. What are you thoughts on it?
# NUMBER 1
 app.get('/:page', (req, res) => {
    	const page = req.params.page;
    	if (page === 'homepage.pug') {
    		res.render('homepage.pug')
    	}
    	if (page === 'about.pug') {
    		res.render('about.pug')
    	}
    });

    # NUMBER 2
    app.get('/homepage.pug', (req, res) => {
    	res.render('homepage.pug')
    });
    app.get('/about.pug', (req, res) => {
    	res.render('about.pug')
    });
16:59
@SebastianNielsen What's "neat" about that first way?
Idk, the fact that I dont have a lot of "app.get('/something' ".

So, I have one app.get that checks all the get pages, and then a app.post, app.del and so on
You know what, the first way sucks.
I am going with the second way
@SebastianNielsen So instead you have a bunch of if (page ===...s
Yeah, I know, that was stupid hah
17:32
event.preventDefault() still breaking IE11 :(
['homepage.pug', 'about.pug'].forEach(str => {
  app.get(`/${str}`, (req, res) => {
    res.render(str);
  }
}
@JoJo no it isn't
@rlemon are you available to check something, so i can know if its a good implementation
Cant even load this fiddle in IE11 jsfiddle.net/3gexwzdh
so frustrating
Gonna have a rough time if you think that fails on ie11
Because that's not the issue
17:34
I know.. something is interfering and I cannot find it... ugh
I trust you
I believe you do have an issue. But that isn't it. Maybe it's not getting called because the entire handler isn't called.
okay, looking
I just don't want you chasing the wrong code for the bug.
if you have time to check how i advanced on this
speaking of chasing code
accept my PR fool
17:39
Working on my pond
17:57
+ angry-react
18:20
my pc is still doin the reboot unexpectedly thing
wowow so silent
youd expect javascript to be the most active room
Eerie Silence
Usually when doing a replace I'd do something like:
  s = s.replace(/\s/, "");
But recently I saw a replace like this:
s = s.replace(/\s+|\W+|\d+|[_]+/g, "");
what is the +
Simply, "whitespace" as well as \W as well as \d , etc?
happy you may have to wait till more people are on
18:27
Also I know that \s = whitespace, what are \W, \d, [_] ?
@forresthopkinsa thanks
np
make sure you set the right flavor on the left side
What are the differences between let NAME = VALUE; and var NAME = VALUE;? they seem to have similar uses but let doesnt have as much functionality
Thanks,
I think its crazy how code can get to 20k+ lines in one file. I'd imagine some refactoring would take place, but I guess sometimes you need most of it in one file?
Im over here thinking my 100 line program is impressive. lol....github.com/SheetJS/js-xlsx/blob/master/xlsx.js
18:51
@faceless That's probably a generated file
@BenjaminGruenbaum danke schön
@forresthopkinsa ö
@copy Easier said than typed
I take it back, it was pretty intuitive to type
19:08
my browser says i was pinged 22 times
maybe it's because i've been pinged 22 times since using this pc?
Youre like the leonardo dicaprio of this room
I don't know what that means
You dont know who the most handsome man in the world is?
You are so humble
Hello
19:14
I need some design (like how to design a program) help. What site is that most relevant on?
like, code organization stuff?
ux?
how to do x?
design patterns?
Not ux. I am not really sure what the word is.
user interface
user8729657
Nothing can be worse than having to design a network i.imgur.com/QSFUk1T.png
user8729657
19:17
for your client
No I mean its not ux/ui.
then you want design patterns?
basically I have my bot thing that I am working on. It works in one room per node instance. Now I want to make it work in multiple rooms with one instance. I know a couple different ways how to do that. But I don't know which one is the most efficient.
I need help to make a plan
@faceless I guess. But specific to this project.
can i link pdf files in here?
sure
19:21
hmmm 1 sec. looks like i cant drag and drop.
You can link, not upload
this could be helpful. Im pretty sure you want a good design pattern to make out your plan
A book I think is gonna be too general.
Its a specific design choice. Relating async.
Maybe look into wikipedia sources and see what applies to you?
In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system. Object-oriented design patterns typically show relationships and interactions between classes or objects, without...
Wrong direction
He's looking for more specific advice
also Dummies books are normally pretty mediocre
19:25
I believe i understand what theyre talking about, but I could not help with the specifics, but it sounds like they want to build a template for how to solve a problem that can be used in different situations?
@faceless It would only be used/relevant in this project.
Well let me just ask some questions and see where to go from there.
He's looking for concurrency patterns
how is your program watching the pages? can you not just initialize multiple listeners?
sobotics maybe?
@KevinB Possibly too specific :) Its more about asyncness I think.
Well let me start with this:
const ws = new WebSocket(url);
        ws.on('message', (data) => {
            this._handleMessage(data);
        });
What if a new message event occurs while the previous functions are running?
19:30
it gets put on the event queue?
the event won't occur till the previous functions are done running
which should be fine, because a single user (aka this bot) can only send n messages per minute
doesn't necessarily need to do things in realtime
if your websocket listeners don't overlap with each other then I feel like you should just use classes and one instance per room
@KevinB The concern is not that. Is it using a currentRoom context per message. I am afraid that while an async function is running the room context may change and the bot sends the reply in the wrong room.
@forresthopkinsa One ws can handle all messages
I'm still leaning towards classes
have your Websocket stream divide the work to the appropriate room instances?
19:33
How do you mean?
well have a class that is able to handle the context and events and everything for just one room
and then instantialize it for each room
instantiate?
I mean, if you only have one incoming event stream then that needs to sit outside your room handler instances
@forresthopkinsa the problem is that I use plugins so each plugin would have to be loaded in to each class
I was under the impression that your goal was to have independent configurability between rooms
I don't think I should. Instead, if I need an independent config then I would use another instance. Each instance has shared memory etc.
Okay
I guess I don't really understand your program design well enough to get the context switching problem
19:38
hmm. you gave me an idea...
excellent
also protip, if you're doing a lot of work with streams of data then you should consider Rx
I think I can do something like msg.roomContext.send("Hello") instead of the current syntax bot.send("Hello").
right
yes very good
that should fix all collision issues
thanks
heck yeah
19:54
🚽
20:06
hard to believe there is no easy way to remove break tags from jquery.html()?
                $(this).html().find('br').remove();
?
if that's not easy i don't know what is
You do realize, .html() returns a string, not a jquery collection, right?
I guess I could try returning the html() value first and then replacing on the sting. so dumb
just remove .html()
   this.roomContext = {
            send: (...args) => bot.client.send(...args,this.getContext()),
        }
or should I actually write out the possible args?
if you always pass all of them, and don't use them individually, why not not
20:12
@KevinB The only possible reason (thats not a very good one) is cause my IDE will say "...args" instead of the actual args it excepts.
@KevinB you are right... argh.. thanks
20:49
Is it normal to spend 8 hours debugging only to realize you misspelled a word in a function?
user8729657
No, take a break
@faceless Yes.
I have done that many, many, many times.
I also spent a while on Date().now instead of Date.now()
omg, thats horrible. This feeling im feeling after figuring it out makes we wanna cry in defeat but rejoice that i finally figured it out. It is weird
yep thats standard. I find the most frustrating issues usually have the most simple answers.
hahaha man. Id def had to agree with you on that. Literally the bug before this one involved a real simple answer too...
I didn't have any data in the excel worksheet to test my functions on and I kept thinking, 'Why is this happening???'
As you can see, I am a very smart man

« first day (3156 days earlier)      last day (2014 days later) »