« first day (1490 days earlier)      last day (3452 days later) » 

12:57 AM
allo
 
k
 
@MaxBumaye 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.
 
didnt think anyone was in here
 
yeah first time in here
 
1:00 AM
I have been trying to find the right solution to pushing hundreds of x y coordinates to my web app.
 
from the db?
 
I am using shared hosting at the moment and thought that it would be easier to just push an html file containing data into an iframe. I have been under the assumption that this would be quicker to load, and would also reduce requests to the server - same as using a CSV file, i guess.
 
nono
don't do that
 
why not?
 
because it is a bad idea
look at binary streaming if you think you have a bottleneck
but have you confirmed yet that what you are doing will be slow?
 
1:06 AM
but this is not supported on many browsers
 
then look into websockets
socket.io has polling fallbacks
 
I also have data other than x y coords contained in the html file.
 
well then re-explain the issue
but what you described above sounds like a bad idea to me
 
Basically I'm designing a few highly articulated image maps.
Such as an exploded view of a car, or airplane image. Sometimes over 300 components that need links and images
 
ok, so you'll need a way to load it in without locking down the browser.
 
1:15 AM
I'm on a restricted budget and I thought by just including the data in a file, such as a CSV or HTML file, I could keep my site moving fast and at a low cost if traffic should balloon.
 
not really. the iframe will still take time to load
you wanna look at concepts like lazy loading
 
Yes.
 
and look at websockets, libraries like socket.io have fallbacks for older browsers.
but really consider that what you are making won't run well (or at all) on older stuff anyways, so why bother looking for libraries that support it
 
When i started developing the site I used IE 7 as my benchmark
so as of now the basic functionality runs very smooth from IE 7 forward.
I do have some problems with drag and drop functions
 
I can also recommend going with socket.io - its fallbacks are good. It's protocol has a way smaller overhead. you can set a realistic hartbeat for your purpose and tell it how often to Ping Pong with the client.
try to downsize your packages if you have allot of data and send it in batches
 
1:21 AM
if it is just a large data dump, and you are really passing hundreds of images and coords, you really wanna look at streaming data. using a binary lib makes it much smoother in the long run
 
hola amigos
 
and I really wanna see this run smooth in IE7 if it is really how i'm envisioning it
because that would be impressive
 
render it to the DOM async so the renderqueue has enopugh time inbetween to render your page = no interruptions
 
i have a simple little question: best code practise
 
wtf=
 
1:22 AM
I'm using it in conjunction with Raphael.js. So they are really the ones to thank
 
best code practise is not a question
 
that should get you started
but I expect you have a more specific question (i hope)
 
what is better:
if (check1){if (check2){code}}
or
if (check1 && check2){code}
 
The second one
 
in that specific example i would use the second
 
1:24 AM
ok tyvm!
 
but things like that are not a rule of thumb. that is a VERY basic example
 
yes, its a pretty basic code i am making
 
They're exactly the same, one is less typing
 
it doesnt really matter either way, i was just interested in 'best practice'
 
Ill shoot you a link so that you can check it out. Will take me a couple more days to get a few things ironed out. Will definitely check out socket.io
 
1:25 AM
@Meredith yea, in that example. but if you always try to shove crap into one if condition then you can get really sloppy code really fast
 
well maintenance plays a big role in that question i think :D
the maintanance way would be &&
and since there shouldnt be a big difference in performance I'd go with the maintenance
 
@rlemon Both get really sloppy when you check more and more conditions
 
i think example 1 is easier to read, especially if the check code is long..
 
if( items.length < 42 && elm = items[i] && (++i < 42 || i === 0 ) ) ....
 
but for this case i'll go with #2
thanks for input!
 
1:27 AM
this, I would never do. ^^^
 
if( items.length < 42 && elm = items[i] && (++i < 42 || i === 0 ) )
 
Probably because it's an error
 
sorry didnt mean to repost that, wanted to <br> behind each operator
 
@copy is it?
 
Invalid assignment
 
1:29 AM
elm = items[i]
 
its not invalid
 
That wouldn't be a syntax error, it'd just cause an unexpected result
 
it would asign the value and return true if its not empty..
 
if( true && elm = 1 && (++i < 42 || i === 0 ) { console.log(1) }
Uncaught ReferenceError: Invalid left-hand side in assignment
you are right.
 
Weird
 
1:30 AM
need parens?
 
Why is that illegal?
 
Hello, I don't know how to pass a variable with a qoute. Tried a million things. If you look at my code, I pet you can solve this in 2 seconds. codepen.io/rgfx/pen/GgRmLM
 
elm needs to be defined first
 
@rgfx 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.
 
var elm;
 
1:30 AM
Nah it doesn't need to be defined
 
var elm, i = 0;
if( true && (elm = 1) && (++i < 42 || i === 0 )) { console.log(1) }
 
global scope if not defined
 
there, that isn't invalid
 
^_^ yep it does
 
it needed to be an expression
 
1:31 AM
Does && have precedence over =?
 
i've never been able to make assignement work with*out first declaring the var
 
Yep
So it's doing (true && elm) = 1
 
by the way, im steve
lol
got two accounts. So hows it going? Greensock even works smooth on ie7
 
did you make a second account because of question ban?
 
1:33 AM
Would you guys use Frameworks like JQuery Mobile together with React?
 
nope for a different reason
 
@MaxBumaye I wouldn't use jQM
 
so basically: inline if statement is shorter to write but harder to read, and confusing with operators.. and nested if's are easier to read but take up alot more room on page
 
I am jquery abstinent
 
ty for all your insights :))
 
1:34 AM
always go for readability unless it becomes a problem
 
Inline ifs aren't that hard to read if the arguments are short
 
@rlemon due to it actually not being pure "mobile"?
 
a little more code isn't a problem in most cases
 
I use two PCs. On one im logged in as demorus (fantasy name) and the other as steve.
 
@MaxBumaye I used it a few times, it is sloppy with a lot of overhead and I disliked the code
 
1:35 AM
crazy I know xD
 
I wouldn't use a framework for anything unless it solved a problem that needed solving.
 
max = arr[i] > max ? arr[i] : max is pretty straightforward
 
@mintsauce frameworks solve a lot of problems.
 
slower than an if
 
a lot of libraries don't
 
1:35 AM
wow really?
 
@Meredith that is a ternary
 
Yeah, well that's the 'unless' part :-)
 
I assumed that's what he meant by inline if
 
as far as the js perfs i have seen. Have to check on that one again.
 
@rlemon do you have a framework which could be compared and is lightweight - specd for mobile?
 
1:36 AM
I assumed he meant
 
Was he talking about if(foo){bar}?
 
foo && ( a = b );
 
i meant my example 2 sorry
 
in Greensock how would pass a variable that going in a qoute, backgroundColor:Mycolor var Mycolor = "'" + blue + "'" ? doesnt work
 
@MaxBumaye all you need is a light weight responsive css framework
I use purecss.io
 
1:37 AM
Either way, use the ternary operator when the arguments are short
 
@rlemon I'll give this a try... it really should be easy to design
 
@rgfx you don't need the quotes
var Mycolor = 'blue';
@MaxBumaye look at mobile first design
 
@Meredith sure i do :)
 
@rlemon haha, thank you.
 
1:39 AM
np
 
@rlemon thaks alot ;)
 
np
 
Not to get off subject, but I have noticed when using basic drag and drop function in IE 7 it seems to be very janky untill I completely remove the the doctype.
 
because IE7 is "janky"
 
yes
 
1:41 AM
You might even say 'quirky' ;)
 
but for this issue i cannot find out where the bottleneck is.
 
IE7? You'll probably never find the bottleneck.
 
seems that if i enter strict doctype everything is severely bad. If i use HTML doctype it gets better, and if i completely remove doctype everything is 'blazingly fast'
really shocked me how much things sped up with no doctype
 
I'm surprised too
That's crazy
 
Thats what I said. I have been trying to find some kind of documentation on this, but only one other post about this issue. Unfortunately no answers.
 
1:47 AM
Trying to call a variable using matchMedia. Is there a clear reason why this one fire if (mq.matches) {var test = 'red' }
 
And to be clear when I say fast, I mean drag and drop function is as fast as when using on Version 38.0.2125.111 browser.
chrome Version 38.0.2125.111
 
Here is codepen if anyone has a second. codepen.io/rgfx/pen/GgRmLM
Not sure why its working, sure its a simple fix
 
Sorry to sound like a noob, but what should be happening when i run the code. I am seeing a blue background fading in
never used codepen. took me a second to figure out the ctrl R
 
it should be turning red
and blue when its on a smaller display
 
Looks like your listener callback isn't being called
What library are you using?
 
1:54 AM
jquery and tweenmax
but when it calls the console log?
so it weird the the variable change.
err, but it call the console log, so its weird that the variable doesn't change, sorry. too much tea
 
What library is the matchMedia function from?
 
its javascript
 
Oh it's native
TIL
 
Hi rgfx
you use Greensock huh.
 
Yeah for weeks now.
Havn't made anything but putting pieces together.
 
1:59 AM
ya awesome, i use it since yesterday
are you trying to make your stuff responsive , the tweens?
 
yes, but this is just a test. I actually need to create 2 sets of bezier curves, depending if the devices has retina.
 
function WidthChange(mq) {
    if (mq.matches) {
        test = 'red';
        TweenMax.to("h1", 1, {backgroundColor:test});
    }
}
Duh
Took me too long to figure that out
 
oh. I put my function in a window resize so it updates depending on the viewport
 
Make sure you add an event for when it drops back to below 800px
 
Meredith, do you understand GSAP a bit?
 
2:02 AM
I don't know what GSAP is
 
oh its awesome meredith
 
@Meredith I can't do that, there are huge timelines that need to embedded.
 
faster than css or jquery animations
heck, I even tested it on a old XP and its fast
hey rgfx, why not post your question on their forums too?
 
@Demorus I am aware of the resize, but retina doubles up everything?
so I need two timelines.
 
ya but here is the thing
lets assume you do a fluid layout then its all cool.
 
2:04 AM
I mean two bezier curves
 
GSAP sounds nice. have to check out.
 
Not really cause the b curves, it works on pixels.
 
also check out Velocity.js
 
forexample I have all percentage based, even the text. Everything resizes with the window. Even if we have retina it would look perfectly
 
it is also nice
 
2:05 AM
so you can double, triple, quadruple up. It stays the same
 
Yeah ive been working on percentage based stuff. But the bezier curves is a no go. Its fixed on x and y grid. Take a look at this its responsive, but only on the way down. codepen.io/rgfx/pen/dPbBWZ
 
I been using raphael.js
 
wait, they have percentage versions of X and Y coordinates
 
Really?
 
2:07 AM
yes
i read it on the docs
Xpercent Y percent or something. Seriously
 
@rlemon I worked with velocity, gsap has more options.
Thats not for curves.
 
but Velocity might be an option for the other in the chat
it is pretty well featured for someone moving from jQuery.animate
 
@Demorus Thats not a path.
 
No, but thanks for looking. I worked withe xy percent for weeks.
 
2:11 AM
No problem, my bad :D
 
its awesome, but I animate along a path.
 
Im new to this, otherwise I would have helped
 
Yeah I hear you, do you know js?
 
Still dont get the whole jquery thing. I use vanilla.js
 
Basic JS, im more of a cheater though, or lets say wannabe programmer using jquery
 
2:13 AM
@rgfx I know a little.
 
I understand basic events, how variables work, and so on
 
all i do is cheat, thinking am getting to a point where am wasting more time looking for answer, then learning from the ground up.
 
depends on what your goal is. I love designing sites and making them interactive
 
I think its time for codecademy.com
yeah thats my goal as well.
 
Ya so I dont think it makes sense going to deep into js
 
2:15 AM
I have found that after programming a site in js that I benchmark using IE 7 I have had just about 0 problems getting it to run on any mobile devices.
 
I was happy doing some badass wordpress responsive sites using my own frameworks, ready to make $$, then Gsap came along and I can't stop.
 
HAMMERTIME!
 
I love going really crazy with css3. I probably know every corner of css3 and html but javascript XD
im a novice
 
@rancho, that amazing, i can't even get ie9 to work.
 
lol I have trouble with ie7-8
 
2:17 AM
Just have to watch out for using certain functions like indexOf.
 
thanks for telling me XD because I actually used it in some circumstances
 
ie9 doesnt have transform perspective. So I just don't even care about it anymore.
what the ie7 percent usage .000001
 
I dont think ie9 does any transforms at all or just 3d
 
its not even worth the headache
 
let it die
Ie is kind of the new netscape I think. I hope ie12 gets better, especially image scaling like background-size
 
2:19 AM
I my duty as a web developer to let people know its injustice to themselves not updating there browser.
 
@Demorus How so?
 
@SomeKittens ie image rendering is extremely bad. Background-size: cover or 100%. Try that on an image scaled down. It looks jagged
 
@Demorus How is that a Netscape thing?
 
of all browsers ie is the only one
oh, no I mean netscape browser died because it lost the war. IE deserves the same fate
 
demorus cover is bad idea
its only supported like 50%
 
2:22 AM
no no
 
IE has great debugging tools now
 
I have a polyfill. Works down to ie7
 
what!
 
YES!
 
2:22 AM
that awesome man, hook it up
 
ok
hang on :D
 
like everyday I wish I could use cover.
Ive been using a js solution github.com/srobbin/jquery-backstretch
 
you could do that with basic js couldnt you?
 
I see, amazing. only 5k
 
2:26 AM
it detects if its not supported then uses a really simple solution.
<style> .background , .anotherClass, anotherClass { -ms-behavior: url(include/htc/background-size.htc); behavior: url(background-size.htc) } </style>
put that on the top and add the class that has the background image
:D
 
Thanks a lot for that.
 
No problem
By the way, I think font in Vw units is cool
ever tried that?
I even got a polyfill for that :D
 
Yeah, i have been using vw for full screen for awhile now
I didnt know I need a polyfill
 
ya its awesome, unfortunately support is abit bad so I use polyfills for font sizes.
Ya it doesnt work on some browsers like android 2.2, ie8, chrome for font
 
Yeah never used it for fonts, but could you just font-size:2rem; font-size:1.4vw
 
2:31 AM
I made my own polyfill once with js response was so slow
hang on
 
so it there is no vh, it just using the font above
any support is at 81%
if it over 80, I use it with caring, life is too short.
wihout caring
 
i used that a few projects.
 
used with modernizr its great. I have hardly any mediaqueries, only for small screens. So everything fits even on 8k+ screens
ya fittext is cool
By the way, do you understand GSAP concepts? im abit confused about something that im trying out now
 
rlemon.github.io/typesetting.js cough self-promotion cough
 
2:34 AM
yeah mean too, I only use one media query usually, I you using sass?
 
occasionaly use SASS, mostly normal css
 
I got a badass mixin for @media
 
Nice!
rlemon, nice plugin
 
@Demorus like i said about 3 weeks in with gsap. What the issue?
 
2:39 AM
Like I said, be careful of getting sucked in.
 
check it out. It works with a single tween
 
I have made any money for 3 weeks
 
multiple tween, it fails
 
LOL porn bar
Hey, how long did it take you to create that plugin?
 
2:40 AM
@rlemon added to collection.
 
idk, a few hours.
maybe a bit more
it was a while ago
 
Really smooth animation in that codepen you made.
 
ty
 
You animated css properties? text-shadow
 
yup
 
2:44 AM
Ok just had a look at the code. You made a css keyframe and binded that class name to a div when the user clicks on that button
 
yup
 
but that isnt what that one plugin does, typesetting
 
nope
:P
 
or is it just a css analog
 
2:45 AM
i think that how you should do a hover
or click
 
all the plugin does is makes your HTML more css animation friendly.
imo it is pointless :P
 
XD
I didnt use it yet, but thought that one demo was cool!
@rgfx checking that codepen.
 
@rgfx but again it only tweens one object at a time right? So putting two in sequence wouldnt work
 
now i'm just sharing :P
don't mind me
 
2:49 AM
rlemon, you have a bad design taste there
kindergarden style :D
 
:D
you love it
 
missing some crayons
oh it moves with the mouse!
 
that is what makes it live! :P
 
@Demorus there is way, you can create the timeline, there is also .fromTo()
I gotta jet, wish I could stay.
 
see you
 
2:52 AM
@Demorus do you have a website?
 
o/
 
Ya, although its dead and im buying a new domain. Got a email
 
mine is old as shit www.rgfx.net keep in touch
 
rlemon.ca if anyone is interested
 
demorus@hotmail.de
wrote it all down :D
nice clouds rlemon just abit slow.
 
its abit slow though. Are those images?
 
what about js garbage?
its getting slower and slower
 
(it's my only post :P )
@Demorus once it hits far left, it returns far right
 
couldnt you have done that with canvas?
or even css. Would have speeded up performance
 
2:58 AM
it is canvas
 
oh, didnt see that
ok now looked at your code. What if those were pngs or svgs and animated with css?
 
@Demorus then they wouldn't be procedural
 

« first day (1490 days earlier)      last day (3452 days later) »