« first day (1587 days earlier)      last day (3349 days later) » 

fge
11:00 AM
Spain... Hmmm... Sun...
 
Right
@Gemtastic so what makes a global variable so dangerous to use?
 
fge
Well, I see two pitfalls
1. a file you "sourced" before yours may have modified it
2. it requires you to source files in a given order; if you source a file using that variable before the file which defines it, boom
 
Yes
But there's one more problem that's unique to JavaScript
(Or rather, any language that has async in it)
$(function() {
    $("#boop").on('click', handleClick);
});

...

$ = null; // Ooops
That second line will not run immediately. It will only be called later
By the time it gets called, $ will be null
Even if the setting was done on a later line
Your two problems are solved by using modules
 
fge
Heh, that is why Java requires that variables used in lambdas be effectively final
Enforced at the language level, unlike in JS...
 
import $ from 'jquery'

// $ is available
 
fge
11:07 AM
I don't know modules, I'm afraid
 
But modules are not yet fully supported, you can make it work but it's not as trivial as this other one
 
fge
So, you put that at the beginning of the source file and that makes it "local" to this file?
 
Assuming jQuery is available at the time of calling, you can do this (and you've done it in your JS file):
(function($) {

    // Your code here!

})(jQuery);
 
Aww I didn't have time to try and answer it XD
 
@Gemtastic You didn't tell me to wait
 
fge
11:08 AM
@SecondRikudo uhwell, as I commented I copy/pasted that from SO, I didn't really understand what it did
 
Nah it's ok. I got a bit distracted by something real life important
 
@fge What that does, it create a function that accepts an argument
And then immediately call it with an argument provided from the outside.
 
Do note that I do not copy-paste
Even if I write a function essentially the same, I write it by hand so I'll learn!
 
So you pass jQuery as the first parameter to the function, so inside that function jQuery will be available under the name $.
jQuery is still global
 
fge
OK, but then it could be called something else than $, right?
 
11:10 AM
There's not much you can do about that without using modules or a library
 
fge
The argument I mean
 
@fge Yes
(function(jesus) {

    jesus("#save").on('submit', saveEveryone);

})(jQuery);
But now, the nice part is, if someone makes changes to the jQuery variable while you're running, it wouldn't affect you.
So in your particular case @Gemtastic, your files should look like this:
(function($) {
    $(function(){
        $("#contactMessage").on('submit', function(e){
            var messageForm = $("#contactMessage");
            e.preventDefault();

            $.ajax({
                "type": "POST",
                "url": "/LillaKammaren/contact/sendmessage",
                "data": messageForm.serialize(),
                "success": messageSent
            });
        });
    });

    function messageSent(data){
        location.reload();
        $("#msgSendingSuccess").append("Ditt meddelande har skickats!");
 
I love the way you explain things @Second. Very n00b friendly but also very in-depth. I get to learn what's happening behind the curtains so that I can understand how to build the show!
 
Glad you enjoy it :)
 
fge
<-- learns things too
 
11:14 AM
I really hate the bullshit they pulled in these last two courses. If the android course doesn't have a decent teacher I think I might try to enter CS university instead
I don't think I'll be accepted, but I'll try :P
 
function addedToCart(data){
    $("#" + tag).empty();
    $("#" + tag).append("Lagt i varukorgen!");
    $("#carttab").empty();
    $("#carttab").append("Varukorg (" + data + ")");
    setTimeout(function(){$("#" + tag).empty();},1500);
}
What's wrong with this? :P
 
@SecondRikudo using dom elements?
 
@ItachiUchiha One
@Gemtastic can you spot the other two? :)
 
@SecondRikudo I still didn't get why was jQuery passed as a parameter to the function? Is jQuery just a random variable?
 
@ItachiUchiha (function($) {})(jQuery); ... jQuery = "Because fuck you, that's why"
 
fge
11:19 AM
@ItachiUchiha it means that it is executed "on the spot" with this argument, and no, jQuery is globally defined
 
The inner function will not be affected.
@ItachiUchiha jQuery is a variable like any other.
 
fge
JS has no final variables, so...
 
It's defined globally.
 
@SecondRikudo Ahh, yeah, got it. Such confusing names
 
@fge ES6 comes with const which is the same as final.
 
11:19 AM
@SecondRikudo Mainly, I'm making several calls to the DOM
 
@Gemtastic That's two
 
fge
@SecondRikudo the "tag" and "setTimeout" resp var and function
 
hey, wait, that answer is just the disadvantage of what I just said :P
 
fge
tag is not an argument to the function
 
I should have made a variable out of tag first and used that
 
11:20 AM
@fge And that's three
tag is magically defined.
 
@ItachiUchiha I didn't read what you guys said because I wanted to try answering unbiased, sorry if I took it from you
 
tag must be a global variable
@Gemtastic I was JK :P
 
@ItachiUchiha It's not global in this case
It's defined in an outer scope
 
I can't see it coming from anywhere(passed as a parameter)
 
@ItachiUchiha line 2 is where it's defined
 
fge
11:21 AM
Scoping in JavaScript is, uh...
 
line 5 is where it's set.
 
tag is my way of trying to make the DOM a bit more dynamic since the string in tag can be different depending on the item you've bought
 
@SecondRikudo Doesn't this makes it globally defined?
 
@ItachiUchiha Nope.
Well, in this particular case, yes.
 
11:22 AM
Is it bad to use the argument as is, is it better practice to make it a variable first?
 
It is globally defined but instantiated inside another function
^^ If that is the way we say in JS terms
@sec how do you propose refactoring this particular piece of code?
 
I reasoned that since data is a mutable thing, putting it into a variable would make the variable mutable and I thought that was bad.
 
fge
@Gemtastic do you mean to say that there are DOM elements in your page which are there for each and every possible item?
That sounds like a problem to me
 
@fge yes, it's being generated by thymeleaf
 
@fge It's not necessarily.
@Gemtastic the main problem I have is that you're using IDs for that, but let's drop this particular subject for a little while
There're a lot of ways of doing it
 
fge
11:25 AM
@SecondRikudo well, probably my Java influence there but I see this as a lack of abstraction somewhere
 
For each item I have generated in the displayed category, it has it's own DOM object for the message that the function is supposed to put in there
@SecondRikudo I was using IDs since they are all unique
 
yawn
 
Welcome Back!
 
function addedToCart(data, element){
    var carttab = $('#carttab');
    element.empty();
    element.append("Lagt i varukorgen!");
    carttab.empty();
    carttab.append("Varukorg (" + data + ")");
    setTimeout(function(){element.empty();},1500);
}
This is already better, but not yet perfect
 
nods
 
11:27 AM
thanks
 
For starters: addedToCart describes when the function is called, not what it does.
 
Passing the element itself to a function <<
 
@SecondRikudo It's bad naming convention to call it by what it does?
 
@ItachiUchiha You can pass any object as an argument. That includes DOM elements, jQuery objects and even functions
 
@SecondRikudo I did not know that
 
11:29 AM
@Gemtastic not really
 
@Gemtastic Well, generally, you care more about what a function does, than when it's called.
 
I know that, but is it a good practice?
 
then there's onclick and ondolisten
 
@ItachiUchiha Sure. Ask yourself what does this function needs?
 
that's javascript convention, I suppose.
 
11:29 AM
@sec ok!
 
Does it need an ID of an element, or does it need an element?
All of the actions in the function are done on the element, so I argue that it needs an element, rather than the ID.
Especially, consider the case now when you'll refactor your DOM to not use IDs anymore.
That function will have to be changed :)
 
But, what difference does it make? Can't we do the same using ID's as well?
 
!!nudge 20
 
@SecondRikudo Nudge #1 registered.
 
fge
@SecondRikudo is that possible at all, other than using lengthy selectors?
 
11:31 AM
@fge Of course
 
fge
How?
 
Instead of #id one can use [data-item=id]
 
fge
Uh?
 
rolling eyes
 
@ItachiUchiha by passing an ID, you couple yourself to the DOM
 
11:32 AM
oh
 
The function is aware of there being an ID on the element
Where it shouldn't care about it.
 
Ahh, I c!
 
@SecondRikudo And that is bad practice because DOM is expensive?
 
and in that notation of which I forgot its name, you can do [@id=...]
 
I need to remember that
 
11:32 AM
Saying "I need an element to change text and empty out later" is better than saying "I need an ID to get the element associated with that ID and change its text and empty out later"
 
fge
@SecondRikudo I fail to see how that data-item = id thing works
 
@Unihedro xpath
 
Ohhh
thanks
 
heya stranger!
 
11:33 AM
@fge <div data-item="something">
You can add arbitrary attributes to any HTML element if they are prepended with data-.
There's a whole data API around it too in JavaScript.
 
fge
Hoo? I didn't know that
 
//*[@data-item=contains("something")]
 
fge
Sort of like X- HTTP/SMTP headers then
 
@fge Yes, pretty much
 
fge
<-- would fail at an HTML 101 test
 
11:35 AM
i try to retrieve video user subscription list using Api exploeror
 
@Gemtastic That, and because it increases the thing the function has to do
 
400 Bad Request

- Show headers -

{
"error": {
"errors": [
{
"domain": "youtube.part",
"reason": "unknownPart",
"message": "subscriberSnippet",
"locationType": "parameter",
"location": "part"
}
],
"code": 400,
"message": "subscriberSnippet"
}
}
 
One function one responsibility
 
Ideally, each function does one thing, and functions higher up the layers call several ones to solve a bigger problem
So
 
fge
<--- about to start the webapp version of the debugger
Still no idea where I'll host it though
 
11:37 AM
<-- Need to learn HTML & JS basics
 
var id = getTheID();
var element = getTheElement(id);
element.doStuff();
is better than
getElementWithThatId().doStuff();
 
but... why?
 
@Unihedro For starters, getTheElement is now reusable.
You can pass any ID, and get any element
You're not bound to that particular ID.
 
fge
@Unihedro better names == code is easier to read == code is more maintainable
 
I see. I just made up a concept that works with the dynamic generation of Thymeleaf. My app is supposed to be agnostic to the content of the shop; you could have 3 wares, you could have 1000.
 
11:38 AM
But, I guess there is more to it
 
fge
And yeah, not linked to an ID too
 
For most use cases where you need to reuse the element you can break it up like that, but you're going to use a bounded function scope anyway, so it's not really reusable
(function(){
  // stuff here
})()
 
It's hard to code when you don't have all the tools in the toolbox :P
 
or add $ if you use jquery
 
@Unihedro You don't have to define functions inside the jQuery functions :)
 
fge
11:40 AM
@SecondRikudo I'm gonna pester you with JS problems until you get sick of me :p
 
Huh?
(function($){

})($)
^ @Sec
 
@Unihedro Ah, but what if I do this?
 
@uni Why are you defining function inside ( ) ??
 
var module = (function($){

    // Do stuff

    return {
        exposedFunction: someInnerFunction;
    }

})(jQuery)
=)
 
... Huh? The entire module?
I usually do this:
 
11:42 AM
@fge Go for it.
 
var func = (function($){

    // Do stuff

    return someInnerFunction;

})($)
 
It'll be nice to be pestered with JS questions rather than PHP questions.
@Unihedro And what if I do this?
 
@ItachiUchiha It's a closure of an anonymous function, then immediately called. This means all variables are function-scoped.
 
var module = (function($){

    // Do stuff

    return {
        exposedFunction: someInnerFunction,
        anotherFunction: someOtherFunction
    };

})(jQuery)
 
Everything you declare is within the function and doesn't last, so you don't end up overriding some SDK method.
 
11:43 AM
How do you return two functions in your state?
 
@SecondRikudo that's the jquery method, isn't it
with a module so bloated with methods :p
 
@Unihedro jQuery didn't invent it though
 
fge
I am pretty much set on my tools; those will be spark (the web framework, not Apache spark), jqWidgets and jQUery
 
@fge Take it as a challenge and don't use jQuery.
It's an unneeded dependency in 2015, unless you plan on supporting IE9-
 
fge
polymer looks very interesting but unfortunately its widgets would require too much CSS to make them look the way I want
 
@Unihedro and you are calling the function, passing ($) as an argument to the function just after the anonymous function ends?
 
fge
@SecondRikudo then what would you recommend?
 
fge
OK, looking
 
@ItachiUchiha Yes, because we define the function to take a parameter $ (jQuery), and then we all it with jQuery $)
 
11:45 AM
@ItachiUchiha See this example:
 
fge
But if "vanilla" means what I surmise, uh, no
 
(function(a, b, c) { console.log(a, b, c); })("one", "two", "three");
 
This makes it clearer that we use jQuery, whereas code that's flat and full of miscellaneous stuff gets lost soon
it also makes the intent of using a constant clearer, etc
@SecondRikudo My site bans IE.
 
@Unihedro Too much work.
I just DGAF.
 
<!--[if IE]>
This website does not support Internet Explorer due to its lack of compatibility with web specifications.<br>Please use a browser.
<![endif]-->
 
11:48 AM
Some cool stuffs. I will catch ya guys later, swimming! Cya!
 
swimming in winter?
 
@fge What do you think about vanilla? :P
 
fge
@SecondRikudo sorry but that will be jquery for me, mate...
 
@fge why?
 
@fge Why?
 
11:50 AM
@SecondRikudo nudge
 
Is it because of that stupid IE support again? :p
 
Alright, I have to go
 
fge
No
 
bye bye
 
Will talk to you by mobile and laptop in a few
@fge Think about this while I'm out
 
fge
11:51 AM
It's because the API is comprehensive and well documented
 
"What problem does jQuery solve for you? Why is it there?"
 
fge
Well, what I said
Just like you use Guava's Range instead of reimplementing Range yourself
It makes no sense
(not to use Guava's Range)
 
But $(parent).append(node); is basically parent.appendChild(node);, except you're creating two bloated handle objects just to perform a simple operation that could had been done in vanilla with the same syntax.
 
fge
I don't care
My app is not about exploiting JS for performance
 
11:53 AM
That has nothing to do with performance.
 
fge
True
It's about convenience primarily
 
That's like using $.each(array, function(i, item){}) instead of array.forEach(function(item, i){}).
 
fge
Performance is of no concern at all
 
It's no convenience, it's even longer.
 
fge
Oh, please
JS will play a minimal role in my case anyway
 
11:56 AM
jQuery makes so much more sense now that I know what $ is
 
fge
And I'll be using jqWidgets which is no lightweight package either
 
jQuery makes no sense, the entire library should just die.
 
fge
Sorry, but it makes perfect sense to me
 
@Unihedro I said it makes more sense, I never said it was sensible
 
@fge It might make sense if you're an ASP.NET programmer and don't realize that $(node).parent() is basically node.parentNode and $(node).children() is basically node.children, I guess.
 
fge
11:58 AM
That's not the question
 
4 mins ago, by fge
It's about convenience primarily
 
fge
Well, yes
 

« first day (1587 days earlier)      last day (3349 days later) »