« first day (1721 days earlier)      last day (3230 days later) » 

5:01 AM
> FTScroller is a library for adding momentum scrolling to web content on devices with a touch interface
._.
this is not meant to be done via a library. oh god wtf is wrong with people!
this is something the user agent should be able to decide
if they want smooth/momentum/flat/no scrolling or not
@Abhishrek why are you using this in the first place
 
@AwalGarg to remove the dependency on html's scroll
 
Or I hope I googled the wrong thing and it is not this
 
codepen.io/darkyen/pen/QbQKQz?editors=001 @AwalGarg now if i can use their momentum scroller i can completely remove the paddingTop and the minHeight being infinity -_-
oh and its buggy atm i am fixing it.
// its literally doing only like 5 dom operations (including text content) and no addition or removal :D which is a major plus
 
@Abhishrek I am not sure I understood you. the lib adds momentum to the scrolling action. But scrolling action is still browser scroll right?
 
@AwalGarg i want just the math of inertial scrolling
 
5:05 AM
...
ahh
 
...
 
you want that because?
 
@AwalGarg because of the listview
 
anyone notice that you can't save a JSFiddle with just window.location.href = '';? I think they did that so JSFiddle doesn't become like a redirect site or something. But it makes it impossible to debug this question.
 
i cannot use winjs's its too friken pain in the ass and heavy (as its not using react)
 
5:07 AM
@Abhishrek so the ListView scrolls. so far so good. but why inertial scrolling? why not let the user agent decide how the scroll should feel?
scrolling of a no-js html4 webpage on lumia will be the same as that of a scrolling viewport in a native app.
 
5:20 AM
@AwalGarg are mere bhai
the problem is the math of scroll itself
currently it relies on a gigantic multi thousand pixel div
with enourmous padding
and changes padding every time someone scrolls
we already know that css transforms are much much much much more performant than anything else
so i intend to use a transform or +- elementHeight range
for the wrapper
thus there is an even higher boost in performance :D
thats it ... ab samjha ?
 
so you are hijacking native scroll. you damn evil man.
 
@AwalGarg the whole point of re-creating a ui table view is to hijack native scroll
 
can't see why you would want to do this sorcery but ok. so you want the algorithm they use to change the position etc of the content?
 
@AwalGarg well ever faced windows phone or any low memory device not rendering content
because the div size is too high ?
i am already virtualizing the elements why not the container itself ?
@AwalGarg ps the scroll is so damn more performant am gonna prove it soon to u :-)
its hellova performance
 
I see your point. But I don't know if this will really provide any performance boost. But if you say...
 
5:26 AM
@AwalGarg lets face it i have written more crap code in css than you do... can we agree on that ?
 
I don't write CSS so ofcourse.
@Abhishrek I am more interested in how you will benchmark this stuff ^_^
on windows phone
 
0
Q: Diplaying two column responsive news box in attractive way

nlperI am trying to display new box like this http://www.ndtv.com/trends (reading,comments, social icon not required), but in 2 column. Here I tried, I appreciate any suggestion for better item indentation and look. My boxes seems clumsy if text size increases or decrease - http://jsfiddle.net/karim...

 
This is aimed for windows mobile devices right?
 
@AwalGarg its aimed for wherever i need a list view
even a desktop browser
and benchmark on windows phone is easy
if it doesn't crash the browser its good
 
lol
 
5:29 AM
cause 1million elements in windows phone will not only just crash the browser they will give u blue screen of death
 
hmm, this is interesting. ok lets do it. what do I need to do?
 
@AwalGarg UITableView ?
have you never heard of ListView in Android or UITableView in ios or ListView in windows phone (and not the winjs one cause its crappy slow --- its fast usually but the react-winjs is poop slow calling react-render on every element)
The point is if there are 20 elements on your screen you don't have any reason to create 2000 re-use those 20 elements to scroll over 2000 you will use way less memory and the device wont have to do messy hacks
 
brb in 2 minutes
 
chatting room?
 
@ZhengquanBai Welcome to the JavaScript chat! Please review the room pseudo-rules. Please don't ask if you can ask or if anyone's around; just ask your question, and if anyone's free and interested they'll help.
 
5:37 AM
@Abhishrek how does destroying unused elements and creating fresh elements when needed compare here? would definitely take more memory but potentially cleaner and easier to reason about code.
 
@AwalGarg you really haven't handled dom have u ?
creating a whole new dom element vs re-using by changing props gives u insane performance (kinda react's reason of existance)
 
just answer instead of being snarky would "you"? :P
 
ofcourse am gonna benchmark my approach versus vanilla react with a ring
 
@Abhishrek and also complicated code with view and logic mixed up
but if you really need so much performance juice, go for it
 
@AwalGarg @AwalGarg erm you do realize the code of using the this view will be like
<ListView elementRenderer={Component} dataSource={someAwesomeDataSource} />  ??
also @AwalGarg this lets me load the object from disk just before i need to render it ;-)
and burn it out when its far far away
 
5:41 AM
I am talking about the implementation of listview. I have no idea how much complicated that'd be.
 
you can read hte source
its barely sort of a circular doubly linked list. (which i call ring)
 
where is it?
 
on the left !
  computeBoundsAndUpdateRange(scrollWrapperNode){
  }
 
@AwalGarg If you like it then you shoulda put a ring on it
 
that one
@Neil hahaha
 
5:43 AM
I feel sad now. I'm one of few people on this planet that would get that joke
 
oh also @AwalGarg if you don't know the way a clock works it might be helpful to have a clock nearby :D
@Neil why so serious ?
you have a high quality humor.
 
@Neil I don't get it? :P
 
I think my sense of humor has reached "dad" level
 
@Abhishrek I make clocks in free time.
 
@AwalGarg ring aka, doubly linked list and Beyonce reference
 
5:45 AM
@Neil hahahahaha
 
@AwalGarg wow
i am fond of clocks, wrist watches the most
 
@AwalGarg Holy crap that must be difficult
 
what does "my sense of humor has reached 'dad' level' mean?
 
@Neil nah everything's easy in India if you have the right heritage
 
5:47 AM
@AwalGarg morn
 
@argentum47 o/
 
@AwalGarg I'm impressed
I can't even make toast
 
I can't make a good toast either :(
 
@Nei
@Neil
 
I suck at cooking way too much
cooking anything
 
5:48 AM
@Neil Nice. I'm impresse.
 
cooking code
 
I don't even know the proper definition of cooking food.
@argentum47 dammit not that XD
 
Just follow recipes. And use common sense. Like programming.
 
user image
2
 
5:50 AM
hahahahaha pretty much
!!cooking
 
@Abhishrek example of datasource
 
@AwalGarg transaction records of 6 months
loaded from the cloud as you scroll down
or photos of cute cats from internet
or your instagram timeline
 
@Abhishrek raw technical example? like json?
 
could be anything actually
@AwalGarg the datasource cant be pure json :P
i am trying to make the datasource accept a generator
 
5:54 AM
nice
 
but the problem is random access is requirered
so for now its a class which implements .getAtIndex(index) and accepts you to return a promise for return
 
we need method_missing in javascript
 
you can take inspiration from python's range generator
 
@AwalGarg no its not range
think of all the images on your disk as an example
 
for demo I meant
 
5:56 AM
the fs returns you an array, you surely dont wanna kill the fs by putting the entire library of photos in the view and doing pagination custom everytime is a pain so i built this
oh that... sure good idea
 
for method missing to work we need the function to be aware kindof thing .. more like a try block :P
 
okay idk how he would do it
i'd do this as source
derp
but i'd do it like getIndexAt(index){ return index };
there scroll till Number.MAX_SAFE_INT
and further where the browser takes you
 
@Abhishrek your code is horrible compared to what ES6 code should look like but ok.
 
meh my code is always horrible wehn i write it first it would make your eyes bleed
then i re-write it 2-3 times then its readable
 
It would be better if we can do some frame rate comparison between native and virtual via devtools remote debugging protocol
 
6:03 AM
ps feel free to fork it
@AwalGarg turn fps meter on and take it for a spin
though i need to make a test suite
codepen.io/darkyen/pen/QbQKQz?editors=001 @AwalGarg take it for a spin now
actually wait lemme remove the console
 
@Abhishrek ~40fps
 
@AwalGarg how are you scrolling :-/ ?
 
simple trackpad scrolling on an 4th gen i5 chrome 44 2gigs GPU
frame rate reported by chrome's native FPS meter
40fps is max btw. It is mostly at 35 to 38fps
 
you wont probably even hit 60
cause it will stop rendering :-/
there are some bugs at end i need to fix them too
 
alright let me know when you have a better prototype
 
6:14 AM
ps on touch i get 60fps with gpu raster off
@AwalGarg open it on phone ?
 
I don't have access to a phone right now. I'll do it later.
 
What is the difference between setAttribute() and setAttributeNode() ?
 
!!mdn setattributenode
 
nodes are of many types, one of the type is "element"
!!mdn nodetype
 
6:16 AM
@Mr_Green Node.nodeType
 
Just tell me this: "What are Nodes" ?
 
@ZahidSaeed don't use the latter...
 
@ZahidSaeed attribute nodes are not meaning full anymore. they are basically old crap being carry forwarded.
 
user2620028
 
Can anyone tell me, How do i trace javascript code. As we do for C program pressing F7 or using watch window??
 
6:19 AM
@VinodBDhupad Welcome to the JavaScript chat! Please review the room pseudo-rules. Please don't ask if you can ask or if anyone's around; just ask your question, and if anyone's free and interested they'll help.
 
try F12
 
@AwalGarg oh also i just realized am rendering on each scroll event ... i should only render when the range has changed
 
I wonder what is the max user limit of a SO chatroom?
 
!!tell mr_green eval Math.pow(2,31)
 
@mr_green 2147483648
 
6:21 AM
How to not write JavaScript: Synchronously
 
@JanDvorak You mean to say inspect element??
 
or that
then go to the sources tab
 
reads my old code I still don't understand how that code actually works...
 
then caprica will say welcome to a user when that user completes one year or so
 
@AwalGarg How to not write JavaScript: ASynchronously (source)
 
6:24 AM
JavaScript with no callbacks :D
 
wakes up, sweating
 
@JanDvorak This tracing can be done through browser only(after loding the page) or Do i get some offline software which shows the errors as i type, Something like phython interpreter??
 
linters
 
Use the browser if you want a REPL. Not sure if there's a node-based one.
 
@VinodBDhupad An IDE?
 
6:28 AM
Thats great help Guys!. I am new to javascript programming.
 
@JanDvorak IntelliJ Ultimate has a plugin for node. Jetbrains have a web IDE as well (forgot its name) that one supports node innately
 
@JanDvorak node's repl is still a repl (way better than the browser one)
 
es6katas.org to learn es6
 
Maybe that wasn't what was asked >_>
 
started learning with Head First javascript learning book
 
6:29 AM
Your question was in an other castle
 
!!s/^/the answer to/
 
What is wrong with this code ?
this.submit.on("submit", function(){
    return false;
});
 
@AwalGarg the answer toYour question was in an other castle (source)
 
Why it doesn't stop the form from being submitted ?
 
return false to jQuery no longer does that
 
6:31 AM
preventDefault ftw
 
I'm not attaching this event to form
Is that can be the cause ?
this.submit is the submit button :P
 
why not
 
could be
you don't submit a button, you submit a form
 
Yes !
That worked !
Thank you guys :)
 
now kiss jan
 
6:33 AM
@AwalGarg No, I meant it to myself. I had a good answer, but the questing asked wasn't the one the answer belonged to, or so I think :P
 
thinking is bad for gems
 
Thinking is good for me. Not thinking is bad for me.
 
lol
 
then you are not a gem
 
Well, I do double up thinking since I'm a gemini
Apart from now, when I'm not thinking at all
Prepare for trouble~ Make it double!
 
6:39 AM
@Mr_Green sorry but that website is pretty much shameful. there destructuring tests are basically a rip off of mdn
 
gem as in rubygems?
 
knows nothing about the ruby gems, only about gem-gems
 
user2620028
@gem you really seem to be hooked on the pokemon quotes
 
@HatterisMad I only pulled one O.o
 
Argh now codepen is being a painpen
 
user2620028
6:47 AM
@gem oh didn't look back at the earlier conversation but that was someone else with the pokemon quotes lol
 
Ah. I did pull a spoof on mario but only one pokémon one so I was a little bit wtf:ed.
Gemtastic: the makes of words! Watch out Shakespeare!
 
any idea why defaultdate is not showing in textbox here ?
http://jsfiddle.net/8w8v9/248/
$(function(){
    $('#thedate').datepicker({
        defaultDate: +7
    });
});
 
+7?
 
yup, thats what the documentation says :?/
 
not sure why. Maybe it's just for visual consistency?
 
6:57 AM
maybe, but it's not showing my date in text box :S
 
works for me
beautifully, even
 
@AwalGarg hmm I didn't check it
even I can't understand what to do next
 
write real code
 
@JanDvorak Chrome ?
 
@Mathematics yes
 
7:02 AM
for me it shows empty textbox :/
 
do you want the calendar to be shown permanently?
 
I want to show todays date in textbox by default on initialization,
 
oh, right. Sorry
> Set the date to highlight on first opening if the field is blank
it isn't supposed to fill the field for you on init
 
@ssube I give up. I am switching to webpack. (cc @Mosho)
 
@JanDvorak what does defaultDate means then :O
 
7:07 AM
1 min ago, by Jan Dvorak
> Set the date to highlight on first opening if the field is blank
 
morning
 
Check this code:
this.submit.closest("form").submit(function(){
	obj.submit.attr("disabled", "disabled");
	$(this).submit();
});
Why this code isn't submitting the form ?
 
@rlemon FMA or FMA: Brotherhood?
 
If I move the $(this).submit() line above, the form is submitted but the disabled attribute is never set !
What's wrong with this ?
 
@MadaraUchiha Are you hooking him up?
ALL ABOARD THE FEEL TRAIN!
 
7:13 AM
@Gemtastic He hooked himself up
 
@MadaraUchiha Well, I heard one was worse than the other
I never managed to watch either
 
Guys it's urgent
 
@ZahidSaeed I charge $20
 
@ZahidSaeed execution probably halts due to navigation
 
:/
Navigation ?
What do you mean ?
 
7:15 AM
submit causes page navigation
change of location
 
Yes I get it
 
@ZahidSaeed it will probably be best if you can spin up a short fiddle demonstrating the issue. (It is urgent after all :D)
 
But if I disable the button first and then try to submit the form, it doesn't work either
 
.submit() will execute the default action of onsubmit. It does not emit a submit event.
If you want your event handlers to be executed for onsubmit, emit a submit event instead.
 
But how ?
Can you show a little code example ?
You know I'm noob
 
7:18 AM
!!tell zahid mdn dispatchEvent, new Event
 
What I wanted to do is when the user submits the form, I want to prevent him/her for submitting the form again and again by clicking on the submit button constantly
 
right, and for this you need to attach an event listener which fires on form submit. then trigger that listener and prevent the default action.
 
open it put the chrome dev tools open on right
and scroll and watch only the required amount of elements updating :o ? give it a try :?
 
@Abhishrek 45fps. goes down to 11fps when scrolling violently
sometimes goes 55fps
 
7:27 AM
@AwalGarg try doing that with 5k elements in normal browser ?
am gonna optimize it further though
gonna reduce the number of react.createElement calls too
they are the most cpu consuming atm
but i love how i am only using 1 extra element and it works decently
 
@Abhishrek stays at about 38fps on lumia. there is a bug though
select two elements, then scroll down
 
@AwalGarg i know that
 
but this is impressive TBH.
 
you can face the same bug if you place any focusssable thing in dom
i will fix it.
 
@Abhishrek I get a constant 59fps min with native scrolling :D
 
7:31 AM
@AwalGarg wait you :P
anything can scroll a list view properly T_T
well try this, try creating elements on the fly when you are scrolling and loading data :P
 
you are not doing that either (not effectively anyways)
but I like the virtualization
 
@AwalGarg to me you can load data it wont matter
it will simply scroll away because the template will still be the same
but when you create elements on the fly you blow the framerate.
 
7:47 AM
Morning
@Abhishrek I'm stuck at 4988
 
@Neoares the thing is stuck
i havent done a check cause its easy
 
@Abhishrek I do understand your point but somehow I feel we are either micro-optimizing or simply slowing down stuff. I can't say until we do a proper side-by-side benchmarking with multiple rendering engines, enough number of times.
 
@AwalGarg we arent micro optimizing
 
shouldn't the rendering engine itself be smart enough to do this kind of optimization storing data in some external state?
 
@AwalGarg how would u ?
save it to disk and re-read it >?
 
7:56 AM
I don't know :/
@Abhishrek do you have a live example of a large page that some mobile device fails to render?
 
@AwalGarg do you remember i made colorbay.me and pixter.in
and had to make both the websites work on iPad ?
 
I don't know about that. No.
 
look at em they make mobile browsers squirm
ps this is pure js i havent done css hacks yet
also ... the transform will be way more performant
lemme make an extremely pic heavy demo and lets see then
 

« first day (1721 days earlier)      last day (3230 days later) »