Web Development

Ismael Miguel

14:14

@Malachi I can't test it right now. I'll check at home. What browser, operating system and version are you using?

@Quill Alright, I'll update the repository.

And the <br>s are there to add a new line.

Adding 2 newlines will make a new paragraph, which I don't want.

Malachi

14:52

@IsmaelMiguel there was an update, that was needed. it works now

Ismael Miguel

@Malachi That means that I can update the extention later on?

Malachi

@IsmaelMiguel I meant that my Browser needed to be relauched/rebooted, to finish updates

Ismael Miguel

Oh, that's weird

Is it Chrome?

@Malachi After fixing more ugly bugs, should I post it as a new question?

Malachi

@IsmaelMiguel yes it was Chrome, but there must have been an update waiting, when I went to check the version I saw I needed to reboot it, and that fixed the issue

@IsmaelMiguel Definitely!

Ismael Miguel

But first, we NEED a logo

Malachi

15:05

@IsmaelMiguel YES

I like the popup for when there isn't a meme file!

Ismael Miguel

@Malachi Sadly, it doesn't work on the chrome extention :/

I don't have access to the popUp method :(

@Malachi What do you say about the logo being the StackExchange icon, and then an @ cut in half, being half of it pixelated

That describes what we do

All the fuzzy chat will be made clear

Dan Pantry

15:30

Someone just offered me "up to" €10 in steam games and 15 reputation on a site ifrequent for me to do some work for them. They considered it a 'prize'...

Uh... no

Malachi

@IsmaelMiguel I used the Chrome folder and dropped it into the chrome extensions, and it works. I updated my code this morning from your repo

Ismael Miguel

@DanPantry Depends on the work, that may be ok-ish

Malachi

@IsmaelMiguel do you have a picture of this? I have photoshop at home if we need to create something, but I am not very creative usually

Dan Pantry

@IsmaelMiguel heavy animation work in css/js

Malachi

@DanPantry anything with the word heavy is at least 100 right?

Ismael Miguel

15:36

@Malachi You can get the logo easily from google. There's an EPS version somewhere.

Malachi

how do you make the euro sign?

Ismael Miguel

@DanPantry 10€?

Dan Pantry

@Malachi I copy-pasted it haha

Ismael Miguel

@Malachi AltGR + E

...

Dan Pantry

@Malachi and as far the price, I'd be happy to do it for less than 10 euro.. the only problem is he made it seem like it was a 'prize', it was "up to" 10 euro (i.e, he said, "no more" than 10 euro), and it was in steam games.

Now tell me, how many steam games can you get for a 'max' of 10 euro lol

Malachi

15:38

screw that

@IsmaelMiguel not working for me....

Dan Pantry

I'd rather not do work for someone who seems to think that I am competing for 10 euro :P

2

Malachi

don't give work for free hoping that you will win. they will take your work and run.

Dan Pantry

Oh yeah that was the other thing, they would only pay after receiving code.

NOPE.

Ismael Miguel

@Malachi I don't know the hex code. Try opening the character map

Dan Pantry

You're looking for someone to do the work for you, you pay them in installments or upfront or give them some kind of guarantee. If you don't trust them, don't hire them.

Ismael Miguel

15:41

But who the heck offers only 10€ to someone make a CSS animation?

Malachi

€ ??

Dan Pantry

here is the animation they wanted

Malachi

alt-0128

2

I have a nice printout on my cube wall! :)

I just couldn't find it right away, it looks weird on my print out

Ismael Miguel

@DanPantry Sounds easy.......... NOT!

Malachi

<kbd>ALT</kbd> + 0128 ► €

Dan Pantry

15:43

The animation would have been done in gif or take a few hours to css it out.. and if you ccsed it, it would only work in css3 probably

either way, more than 10 euro worth of work IMO.

Ismael Miguel

10€ wouldn't even be enough to buy 5 pizzas here

Dan Pantry

10 euro won't even buy one pizza. lol

(and as well all know, all skilled programmers measure their wage in number-of-pizzas)

4

Ismael Miguel

I can buy decent pizzas from the supermarket for 2.20€

Dan Pantry

i.imgur.com/KFRUTlw.gifv

ha

Ismael Miguel

I don't get the thing with the guy saying "do it"

Dan Pantry

15:47

Shia LaBeouf delivers the most intense motivational speech of all-time

►

here you go

Ismael Miguel

Can't watch here

Malachi

Jamalize isn't a Meme?

Ismael Miguel

It is, and it is on codereview.json

Malachi

or is the Jamal part getting eaten up by Regex before the Jamalize is hit?

Ismael Miguel

It's getting eaten

Malachi

15:53

it's doing the same thing for you?

Ismael Miguel

It's probably a change that Quill made

I'm not blaming him, but it is what I think that may have happened

Malachi

I will look at it later if I get some time

Ismael Miguel

@Malachi Yup, it was Quill that made an edit

I'll have to make some changes to the Javascript

For version 0.3

I'll add a main file, containing the sources.

Then I'll include each source

I'll do a split.

Quill is adding used information into the codereview.json

Malachi

let him know what is going on, @Quill

Ismael Miguel

I'll create a codereview.users.json, which will be the last one running

Malachi

15:58

so he can make sure not to make the same mistake in code twice....lol

@IsmaelMiguel that sounds good.

Ismael Miguel

The only thing is that he isn't that much Regex-expert

But I'll patch it now

Malachi

I won't update my code until tomorrow morning, or tonight when I get home

Ismael Miguel

Done

You can hit F5

It will fetch the new codereview.json with Jamal fixed

I'll add an option to choose which ones to subscribe to

Just a small pop-up window with options

Malachi

16:21

this is what I was talking about. did you create that?

Jamalize Jamal

Jamalize doesn't work at all now, but I am still using the Chrome Extension folder version

Ismael Miguel

17:00

@Malachi Sorry the delay. No, I didn't. That's just a basic Chrome alert()

I'll check it at home

The bug seems deeper than I though

Malachi

17:42

no big deal, I thought that the popup was pretty detailed.

Ismael Miguel

Chrome alerts are always cool looking

Malachi

19:00

probably not going to be pretty --> stackoverflow.com/q/31462406/1214743

0

Q: Javascript function called by focus lost

I have been trying various SO answers for a day or two now, and I can't seem to get it to work at all. I am trying to call Google Map API to take a zip code and return a city, state combination. Here is my latest attempt: <script> $('<%=txtZip.ClientID%>').blur(function (e) { getAd...

@Mat'sMug you know much about making Javascript work with ASP.NET? --> stackoverflow.com/q/31462406/1214743

Mat's Mug

@Malachi why wouldn't it just work? ASP.NET is server-side, the JS code goes client-side... whatever the server-side framework that's generating the view doesn't matter, could be PHP for all JS cares

Vogel612

@Malachi you should bind the even after dom-ready

Malachi

@Mat'sMug that's just it, I can't get it to just work at all....

@Vogel612 what do you mean bind them after DOM ready??

Vogel612

@Malachi let's grab a separate room, shall we?

Malachi

Everything Web

Vogel612

19:04

basically you're trying to bind the 'blur' before the relevant element exists

Malachi

← 7 messages moved from The 2nd Monitor

Vogel612

$('<%=txtZip.ClientID%>').blur(function (e) {
    getAddressInfoByZip($(this).val());
})

^^ this needs to go into a document.ready:

Ismael Miguel

@Malachi I've commented there

Mat's Mug

@Malachi busy at work atm, sorry

Malachi

@Mat'sMug it's all good looks like @Vogel612 has me on the right track

@IsmaelMiguel I think I tried that too.... let me try it again to double check

Vogel612

19:05

$(document).ready(function() {
    // your code here
});

see also here

Ismael Miguel

@Vogel612 First, you need to make sure the element can get focus. Then you can pick one: Use that code or put the script at the end of the page, inside the body.

There isn't much info, sadly.

Vogel612

usually you'd wrap in document ready, since that allows moving the code wherever the heck you want

Ismael Miguel

Unless you are worried about loading times.

In that case, you move the scripts to the bottom of the page

Malachi

still doesn't work

Ismael Miguel

@Malachi Can you show some HTML there?

Malachi

19:08

does it matter that I am running it inside of script tags on a child page of a master page in asp.net?

Vogel612

@IsmaelMiguel if you have to worry about the loading times, you got bigger problems than making your js wait onReady

@Malachi yes...

document.ready may fire earlier for the subpage if it's considered a separate document

Ismael Miguel

@Vogel612 Scripts block other downloads. While the script is being executed, it won't download CSS or images. So, moving it to the end of the page is the best option.

TTGH

Vogel612

@IsmaelMiguel that's why you load css before js..

some modern browswers actually do that for you...

Malachi

now I am getting an issue with my getJSON

Vogel612

@Malachi that thingie with #....

that's how selectors work. if you select an id you go "#id"

for classes use .

but you know that all, right?

Malachi

19:13

@Vogel612 yeah

maybe I can fix it from here, we will see

Vogel612

hmm...well if you get your issues somewhere else this should mean that the comments got you a fix of the current issue

Ismael Miguel

19:51

@Vogel612 Therefore, scripts go to the end of the page

Vogel612

@IsmaelMiguel no.. they should go behind the other non-html resources

Ismael Miguel

That's the end of the page

Vogel612

no it's not.

it's the end of your head element

Ismael Miguel

Which blocks the rendering of the HTML

Vogel612

that, my dear, is bananas, because javascript is not executed in a synchronous context

Ismael Miguel

20:01

... That's neither true or false ...

Javascript runs in the same thread that is used to render HTML and parse CSS

Everytime a script is found, it is executed

Vogel612

true, but that's not actually a single thread (for one) and js (as well as almost all other IO operations like loading resources) asynchronously handled

Ismael Miguel

@Vogel612 Try this: jsfiddle.net/1hj1jbxq

The whole page stops because of some Javascript

The text won't even be rendered!

So, yes, spit the Javascript at the end of the page to avoid it blocking the rendering of the HTML

Vogel612

this is kinda broken...

Ismael Miguel

How?

Vogel612

but this doesn't demonstrate that loading resources is slowed down by executing javascript..

Ismael Miguel

20:09

Fine... Give me 30 seconds

@Vogel612 jsfiddle.net/1hj1jbxq/3

There, the image won't load until the message goes away

Vogel612

no it won't be rendered..

which is a completely different thing

Ismael Miguel

It's worst

It's not slowed down: it's completely crippled and won't even load.

Vogel612

you mix up load and render here..

did you run this against a network profiler with a nice timeline?

Ismael Miguel

Not rendered -> won't load

Vogel612

no... not rendered doesn't imply not loaded

Ismael Miguel

20:12

...

Give me 30 seconds

jsfiddle.net/1hj1jbxq/4

There

It will blurt that you have 0 images, when clearly there is an <img> tag

Vogel612

check against one wrapping on load: jsfiddle.net/1hj1jbxq/5

Ismael Miguel

...

Vogel612

you can't just traverse an unfinished dom, that's nonsensical

Ismael Miguel

But the script was still executed when found, but since it is an event, the function will only run when said event is triggered

@Vogel612 Oh, not it is unfinished...

Finally you got the point!

The element doesn't exist when you run that Javascript

Vogel612

that's why you wrap js into ready.

Ismael Miguel

20:17

Or throw it at the end of the document

Vogel612

bah

Ismael Miguel

Javascript is a blocking resource

Vogel612

no it's not..

Ismael Miguel

Everything stops so it can be executed

Evidence incoming!

Vogel612

the execution in itself is not blocking.

the whole point is, that while your JS is still running, the DOM can be parsed on...

Ismael Miguel

20:19

jsfiddle.net/1hj1jbxq/6

Vogel612

you do know that proves nothing??

Ismael Miguel

I know it proves, you just don't believe

Javascript blocks the whole browser

Try this: while(1){}

If you can use the webpage, I'll eat my shirt

Vogel612

jsfiddle.net/1hj1jbxq/7

Ismael Miguel

Use the page while the code is running!

Vogel612

@IsmaelMiguel that's because while(1) hogs the main-thread.

Ismael Miguel

20:21

Fine...

Vogel612

v. 7 is evidence contrary to "js is a blocking resource"

the js runs, the html continues to be parsed

and the js still runs

while the html is parsed

running js on the main thread like a moron blocks further parsing of the dom

that's why you shouldn't do it

but it's not an impairment when loading, as long as you don't do it in full-blown idiot mode.

Ismael Miguel

Give me 1 minute

jsfiddle.net/nko5xuas/embedded/html,result

It shouldn't render the text

Vogel612

I figure you just placed an infinite loop into the main thread, which doesn't actually prove your point?

Ismael Miguel

It does

Javascript blocks

If it didn't blocked, you would see the text

Vogel612

if you do it wrong it does

but that's not a valid reason to put it at the end of your HTML

"because of the increased load time"

Ismael Miguel

20:31

The wrong is wrong there

Vogel612

if you write JS blocking, you got bigger problems than load times

Ismael Miguel

It increases the load time because the browser stops rendering and processing other stuffs to take care of that piece of javascript

Vogel612

JS is inherently asynchronous and event-based

Ismael Miguel

...

Vogel612

it increases the render time

which is not the load time

Ismael Miguel

20:32

I give up

I'm trying to teach you something

And you are pushing my patience to it's limits

I GIVE UP

Vogel612

that writing dumb javascript locks up your browser? I knew about that..

Ismael Miguel

No

That writting Javascript blocks the browser

Vogel612

that's an implementation detail ...

Ismael Miguel

No, it is Javascript's design

Vogel612

IF it's something's design it's HTML's.

Ismael Miguel

20:35

That too

So, now you agree that Javascript blocks?

@Vogel612 stackoverflow.com/questions/855077/…

Read that

Vogel612

for some values of "blocks" that we don't agree on.

Ismael Miguel

*that you don't agree

Vogel612

As of 2013, the first point is still somewhat true. However, putting scripts at the bottom is not so relevant anymore. Now with HTML5, if the script need to alter the DOM, you are better off putting it in the head with an html5 "async" or a "defer" attribute, to avoid delaying the overall rendering of the page. For layout purpose, the fastest your scripts are called, the less you are delaying the DOMReady event, and the fastest your page will appear loaded to the user. Only scripts that relate to a user action after window.onload should now be placed at the bottom. — hexalys Jun 1 '13 at 22:48

cough..

Ismael Miguel

I agree that Javascript blocks

Yes, the defer attribute

Which has some side effects, like random execution

Vogel612

@IsmaelMiguel which you completely ignored up to now..

asserting that the script execution will effectively block loading of resources

Ismael Miguel

20:40

Notice that it says "to avoid delaying the overall rendering of the page", and not "to stop the delay in the rendering of the page"

Malachi

I hate JavaScript, I hate JSON... :'(

Ismael Miguel

@Malachi Why?

Vogel612

@Malachi the earlier I understand the latter not

Malachi

 $.getJSON("https://maps.google.com/maps/api/geocode/json?address=" + zip, function (results) {
                        //if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                        //if (results.length > 0) {

                        //for (var ii = 0; ii < results[0].address_components.length; ii++) {
                        $.each(results[0].address_components, function () {
                            var street_number = route = street = city = state = zipcode = country = formatted_address = '';

What am I doing wrong?

Vogel612

first off, start using a named function as callback in that getJSON call please.

Malachi

20:42

keeps telling me that it doesn't recognize Address_components

Vogel612

next off, "use strict"

Malachi

@Vogel612 ??

I kind of know what you mean,

but ....

Ismael Miguel

@Vogel612 Using named functions make them global

Vogel612

something like "Option Explicit" for vba

@IsmaelMiguel not if you scope them into an object.

Ismael Miguel

@Malachi Can you give me a valid value for zip?

Malachi

20:43

@Vogel612 I got that part. put it anywhere?

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "57501",
               "short_name" : "57501",
               "types" : [ "postal_code" ]
            },
            {
               "long_name" : "Pierre",
               "short_name" : "Pierre",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "South Dakota",
               "short_name" : "SD",
               "types" : [ "administrative_area_level_1", "political" ]

Vogel612

@Malachi at the top.

Malachi

that's the JSON response

Ismael Miguel

@Malachi You should use a switch ... case

Vogel612

also you should pass undefined as second argument..

api.jquery.com/jquery.getjson

function(url, data, success) ...

Ismael Miguel

Disregard my message...

Malachi

20:45

@Vogel612 okay what?

I know less Javascript than I think

Vogel612

asserting you have your handler as a named function success...

you should call:

Ismael Miguel

@Malachi ii doesn't exist

Vogel612

$.getJSON("https://maps.google.com/maps/api/geocode/json?address=" + zip, undefined, success);

Malachi

@IsmaelMiguel I don't even get that far

Ismael Miguel

@Malachi What's the error?

Malachi

20:47

@Vogel612 what is the success handler supposed to do?

Vogel612

or: $.getJSON("https://maps.google.com/maps/api/geocode/json", { address : zip }, success);

@Malachi STM, will ya?

Malachi

I have been reading it and most of it makes no sense to me. and the rest doesn't help me understand the rest

Vogel612

we've had it extensively on SO chat today, so you may want to read from here

how callbacks work..

also touches upon method invocations a little

Malachi

project manager just called me into his office

brb

Ismael Miguel

I'm going to play Tera

ping me if needed

Malachi

21:26

> Uncaught ReferenceError: results is not defined

Ismael Miguel

Try console.log(arguments); inside the function

Malachi

> Uncaught TypeError: Cannot read property 'address_components' of undefined

when I try to go through this line

> $.getJSON("https://maps.google.com/maps/api/geocode/json", { address : zip }, function success(results, status){

> $.each(results[0].address_components, function () {

Ismael Miguel

21:43

$.getJSON("https://maps.google.com/maps/api/geocode/json", { address : zip }, function success(){console.log(arguments);});

Malachi

[Object, "success", Object]0: Objectresults: Array[1]0: Objectaddress_components: Array[4]formatted_address: "Pierre, SD 57501, USA"geometry: Objectplace_id: "ChIJd9QpyIIKgIcR1NVqXqO7bW4"types: Array[1]__proto__: Objectlength: 1

that looks pretty doesn't it?

Ismael Miguel

It does

Can you take print-screen?

Malachi

as you can see address_components exists

Ismael Miguel

results[0].address_components doesn't exist, but results.results[0].address_components does

If you see, the first argument has the key results

Which inside it has the other key

Malachi

22:00

now I got the console to give me some good news, tomorrow I get the information into the text boxes! Thank you @Vogel612 and @IsmaelMiguel!

Ismael Miguel

You're welcome

But is it working alright now?

Quill

23:17

@Malachi What's the ping for?

Ismael Miguel

23:29

@Quill We need to talk

The ping was because you did some things wrong

This is not a "YER AN A$$"

Quill

Huh? I did?

Ismael Miguel

This is to point some mistakes you did

Quill

Adding users to the memes?

Ismael Miguel

But

Yes, that was one

It broke the Jamal matching

Quill

Ah, then remove his user

Ismael Miguel

23:30

And I've proposed a solution for that

Quill

His name, should return info about being a user, jamalised should return the meme

Ismael Miguel

But you never make Regexes, which breaks stuff

And so, I've proposed to create a file with user info

That is

Quill

Sure, okay

Ismael Miguel

All the informations about the most influential users will be thrown there

Quill

@Malachi What's this about

Ismael Miguel

23:32

I'm planning on adding an option, to the Chrome extention, to let the persons choose what they want to memerize

Quill

I would suggest levels of memes, n00b level, meh level, and nice level

Ismael Miguel

Also, I've though about adding a file with a list of sources

That way, the extention would be touched very rarelly

And we could do all the changes in JSON files

Quill

var REPO = 'https://github.com/ismael-miguel/memer/';
var ROOT = 'https://raw.githubusercontent.com/ismael-miguel/memer/master/memes/';
var SITES = [
	  'chat.meta.stackexchange.com'
	, 'chat.stackexchange.com'
	, 'chat.stackoverflow.com'
	, 'chat.serverfault.com'
	, 'chat.superuser.com'
	, 'chat.askubuntu.com'
	];
if (SITES.indexOf(location.hostname) !== -1)

I made the REPO, ROOT and SITES constant-like structures

Ismael Miguel

I saw that part

Quill

also, you misspelled stackoverflow.com before, so it wouldn't match

Ismael Miguel

23:36

I'm changing the SITES

Quill

To?

Ismael Miguel

Oops :/

To something that doesn't use indexOf

Quill

The comma structure, or ...?

Ismael Miguel

Probably everything

Quill

Ah, yeah, some browsers don't have better functions

Ismael Miguel

23:37

I'm thinking about using an array, then converting to a regex

Quill

for?

Ismael Miguel

Saving space and making it easier to change and better compatibility

Quill

Converting what to a regex though?

Ismael Miguel

var SITES = [
	'meta.stackexchange',
	'stackexchange',
	'stackoverflow',
	'serverfault',
	'superuser',
	'askubuntu'
];
alert(location.hostname.match(new RegExp('^chat\.(' + SITES.join('|') + ')\.com$')));

Try this

Quill

Why? Regex will take longer to match, and will look much less readable

Ismael Miguel

23:42

.indexOf() in an array isn't well known and looks really weird

I can convert it to an object

Quill

indexOf is for arrays o.O

indexOf(value) >= 0 works fine

Ismael Miguel

It does

But it looks like you mistook it with a string

(Originally, only strings had .indexOf())

Quill

Then use a newer function, but converting a small, limited array into a regex will waste execution time

Ismael Miguel

Or just create an object

Will work 100% of the time, forever

Quill

An array is fine, why would an object, or regex be needed?

Ismael Miguel

23:49

var SITES = {
	'chat.meta.stackexchange.com': true,
	'chat.stackexchange.com': true,
	'chat.stackoverflow.com': true,
	'chat.serverfault.com': true,
	'chat.superuser.com': true,
	'chat.askubuntu.com': true
};
if (SITES[location.hostname])

Now we can easily control which site will be matched

Quill

Alright, can we leave the commas on the beginning of the next line, lets you comment the line out easier

Ismael Miguel

Please, don't

Please

It drives me insane

Literally

And it is harder to read

Quill

Alright, sure

Ismael Miguel

Thank you

For now, I will disable some websites

One more thing

JSON doesn't have comments.

You can create a desc key to add a description

Even if it isn't processed

Quill

Yeah, -_-, I figured that one out the hard way

Ismael Miguel

23:58

Don't worry, it happens

Web Development

Transcript for

Web Development