Web Development

Malachi

13:20

@IsmaelMiguel do you have a fun icon for you fun little script? I am calling it Memer right now. please let me know if you have updated the code, I would love to get the new code! I didn't get a chance to play with it last night

Malachi

13:31

trying to make that meme translator into an extension

Ismael Miguel

@Malachi No, I don't have an icon or anything

Not even a name

Malachi

I called it "Memer"

Ismael Miguel

And I was thinking to overengeneer it

Make it into a browser extension, add more chat rooms with some translations. Making something really big!

Malachi

@IsmaelMiguel I am working on a single extension right now. I think that we should create json files for other rooms, and then have a switch case for the chat room they are in or something like that.

@IsmaelMiguel

Ismael Miguel

Greetings

Alright, Memer is a good name

And yes, I'm rewritting it.

I don't like the idea of having it depending on jQuery

Malachi

13:44

← 8 messages moved from The 2nd Monitor

Ismael Miguel

If I have to depend on jQuery, I'll use zepto instead

Malachi

jQuery? I didn't really see jQuery in there. but I haven't really looked at the code much, other than try to make it work whenever I enter the room

Ismael Miguel

11

A: "The 2nd Monitor" chatroom translator

And here I go: Take advantage of the fact that SE sites use jQuery. This will trim down your DOM manipulation code to a high degree. We usually have a rule in our team that the most you should nest for conditions is 2. If you have 3 or more nested, then it's time you use a function. One problem...

His answer has jQuery

And it makes everything easier

What I do in most of those lines, I did like this in jQuery:

$('#chat .message:not([data-checked="1"])')
	.attr('data-checked', 1)
	.find('>.content')
	.filter(':not(:has(.onebox))')

Malachi

oh I see.

Ismael Miguel

I could have written like this:

$('#chat .message:not([data-checked="1"])')
	.attr('data-checked', 1)
	.find('>.content:not(:has(.onebox))')

But it is slower

Malachi

13:49

I wish I had time last night to look at the code. I would have had a finished extension for the basic code. I am trying to figure out the manifest file and stuff right now. I should be working though.

Ismael Miguel

To add on that, I'm having troubles

Malachi

monking

Malachi

14:07

Version 0.0.1 is now working!

let me look into it more over lunch and add some stuff to the Manifest and such

@IsmaelMiguel do you github?

Mast

@Malachi If it's working, shouldn't it at least be 0.1?

Malachi

@Mast I suppose.....

I wasn't really ready to make it super public yet, so I just wanted to see if I could get it running, but now that I do I will change it to 0.1

Mast

You could make the next version 0.1 ofc

Malachi

github.com/malachi26/Memer

Mast

A JSON manifest, that's something I haven't considered yet for my projects.

Malachi

14:19

it is necessary for Chrome Extensions

I need coffee and to finally eat my poptarts and get real work done though

Ismael Miguel

@Malachi Yes, I have github. You can easily check it on my profile

Sorry, I'm at work and my boss is cranky today

Malachi

@IsmaelMiguel it's all good. I understand

Ismael Miguel

He was around here

So, I couldn't talk

And for the next hour or so will be hard to talk

SirPython

@Malachi Is it okay if I try to help out in this project, too?

Malachi

@SirPython of course. check out the question that started it all as well.

15

Q: "The 2nd Monitor" chatroom translator

For those who go to The 2nd Monitor chatroom, you already know how bad I am at remembering everything. And, sometimes, the new visitors will wonder what something means. For that, I've developed a very simple chat translator. ;(function(window, undefined){ 'use strict'; var memes = { ...

Ismael Miguel

14:33

@SirPython Also, feel free to answer there. I really need an answer to accept

SirPython

@IsmaelMiguel I've started taking a look at it and I've jotted a few points down. However, I am currently writing another answer and I need to finish that first.

Ismael Miguel

Take your time

I'm not paying much attention here for a few moments

Malachi

@IsmaelMiguel I should have let you start the Github Repo on that, I am sorry.

SirPython

15:30

@IsmaelMiguel I have wrote an answer for you.

@Malachi How does the manifest file in the repo work? I've heard of those before, but I've never seen one being used with JavaScript.

Malachi

@SirPython The Manifest file is for Chrome Extensions. I imagine it would work on firefox as well... but I don't have firefox installed on this machine so I don't know how that works

SirPython

Ah, I see. So this is like a user script?

Malachi

yep

Malachi

15:47

BTW.work

btw.work

btw.

monking

I think I broke it

there we go!

I added a couple more memes to Memer-CR

stargreed

TSA

tsa

rsa

RSA

Malachi'd

I will add more memes later

I gotta meeting to go to

Ismael Miguel

16:09

Sorry for not answering

I'm currently planning work with my boss

Malachi

16:21

@IsmaelMiguel no need to apologize, we all understand

Ismael Miguel

Alright

My boss is talking on the phone, so, I took a tiny look at your answer.

Sadly, the comment on your answer is right: it is to increase the performance

I've commented on someone claiming it is bullsh*t with 2 examples:

1- his answer, without caching the length

2- my way, by caching the answer

The result, after 16 executions, was a difference of ~100ms, being mine the fastest

And it was on IE!

Quill

18:30

As for your comment, @Malachi, you may be able to use @match instead

Malachi

I am not completely familiar with userscripts and chrome extensions, so everything I did with the manifest file I did this morning in an hour or so, by doing research and learning all that stuff. I wish I had more time. maybe tonight after work I will be able to work on it

Quill

Sure, no worries

Malachi

@match makes sense though, I saw something similar in the manifest file

we could make a second file as a user script. but I would like to continue with the Chrome Extension, because I think we can implement a a memer that distinguishes between the different sites and their memes

Quill

Yeah, you can always have two

Best to support both than support only one

Ismael Miguel

18:55

@Malachi I'm thinking about building a databse with all the memes from there

Translation: going from site to site and asking them

Malachi

@IsmaelMiguel there is a meta for Stack Overflow similar to ours, the question I mean

Ismael Miguel

@Malachi But there are, at least, 3 different chat rooms for StackOverflow

Quill

I think basically every site with memes has a Meta for it

Ismael Miguel

All those have a way highed index of activity

I don't know

Quill

@IsmaelMiguel You'd be best to let the individual users fill out each site's memes instead in a StackApps post

Malachi

18:58

@IsmaelMiguel there are like 5 chat rooms for CR that people use on the regular

Ismael Miguel

And ask them for the JSON code? That almost makes sense

@Malachi I've seen 2 so far

Malachi

VBA Rubberducking

This chat has moved to Discord: discord.gg/MYX9RECenJ

Ismael Miguel

It would be great if there was a way to know where a certain chatroom belongs

Malachi

Coding Projects and Duga Heaven :)

Minesweeper Flags, Zomis' games, PDB, MTG, Cardshifter, and al...

1

The 2nd Monitor

General discussion about codereview.stackexchange.com - Welcom...

3

Ismael Miguel

Never seen the 2nd one

Quill

18:59

@IsmaelMiguel Each room has a parent site

Ismael Miguel

@Quill Javascript-wise...

Malachi

Duga's Neighborhood

It's a beautiful bot in the neighborhood. Would you be mine, w...

that last one is a bot room though.

but you can tell that they all have a lot of activity in them

Ismael Miguel

@Malachi Yup, where Samon or Salmon or whatever his name is tests Duga

Quill

Simon?

Ismael Miguel

That!

Malachi

19:01

@Duga posts to chat there all sorts of stuff as well

Ismael Miguel

Yup

Debug messages and what not

Quill

@IsmaelMiguel, I think you might be able to parse the site name from the <link rel="shortcut icon"> in the HTML

Ismael Miguel

@Quill That's one idea

Quill

It's a really ugly idea, but, if there's no other way

Ismael Miguel

No no, it's a do-able idea!

brb

Oh yeah!

Got my pizza!

This is the spicyest pizza I've ever eaten

Quill

19:14

Nice

Ismael Miguel

And the guys even gave me an even more spicy sauce!

Malachi

19:32

did you guys fork it from my Github?

Ismael Miguel

No

I ate pizza

And still am eating

Malachi

I am trying to learn how the whole github thing works. so if you would it would help me learn all about that process as well

Ismael Miguel

But I will fork it

Malachi

that's cool. no hurry

don't fork pizza

Ismael Miguel

I won't

But I've seen myself forced to reject a slice

Malachi

19:33

lol

Ismael Miguel

Lets just say that I dumped the spyciest sauce I've ever eaten

In a single slice of pizza

The spicyest pizza I've ever eaten

Result: pure regret

@Malachi Do you want to use jQuery? Or no jQuery?

Malachi

I don't mind jQuery. I use jQuery-UI in some of my projects at work. so it would be cool to use it here as well.

remember that it helps to use the same libraries that chat.stackexchange.com does

Ismael Miguel

jQuery it is then

I have a clunky version :/

Quill

@Malachi forking is like making your own copy

I only starred it

IIRC, @IsmaelMiguel had his own version prior anyway

Malachi

yes. but then when you make changes to it then you can do a pull request and get the code updated. I think.

@Quill I apologized to him earlier I should have let him set up the Repo

Quill

19:44

@Malachi Yeah, basically, but you should use branches, which are like copies of the original, but on the one repo without making your own repo

Malachi

@Quill can you make a branch on my repo?

Ismael Miguel

@Quill Don't worry, he has the old jQuery-less copy. Which is a good thing, since that's one of my few copies.

Malachi

I don't have the whole github thing figured out completely

Quill

I think I have to be an authorised user

Ismael Miguel

q

DAMN

@Quill What's the license that is compatible with SO's license?

Malachi

19:46

@Quill a collaborator?

Quill

CC by SA 3.0

@Malachi That'd be the one

Ismael Miguel

@Malachi I'm setting up a new repository

Quill

creativecommons.org/licenses/by-sa/3.0

Malachi

@IsmaelMiguel sounds good. ping me here please so I can follow it and help out with it.

Quill

@IsmaelMiguel, but, you can use the MIT license also

@Malachi ditto

Malachi

19:48

make sure that you let @SirPython know as well, @IsmaelMiguel

Ismael Miguel

@Malachi @SirPython Memer on my Github: github.com/ismael-miguel/memer

Now, I'll dump the code there.

Malachi

Chat Translater known as "Memer"

3

Ismael Miguel

I HATE OUTLOOK.COM!

Malachi

????

Ismael Miguel

I've sent the code over email, because I didn't had time

And ALL whitespace is gone!

Malachi

19:58

@IsmaelMiguel oh man. let me know when you have the repo all set up

Ismael Miguel

@Malachi What's your username on github?

No need anymore, you were added as a colaborator

Malachi

thank you

Ismael Miguel

I'm writting the README.md, with a nice text.

You can study the javascript file there

Ismael Miguel

20:17

@Malachi README.md done, time for Tera!

Malachi

Tera?

Ismael Miguel

tera.enmasse.com

Malachi

I have to rebuild a project and get some work done

I will come back later when I get home

Ismael Miguel

Take your time, don't worry about it

Malachi

20:31

@Quill can you link me to this comment again, I can't seem to find it

Quill

@Malachi:

in The 2nd Monitor, 2 hours ago, by Quill

@Malachi, I made a comment on your github, about swapping your extension into a userscript

Malachi

oh it was a comment on my commit

@Quill how does the matching work?

Quill

Matches urls, but, the urls that are being used don't differ, so you don't need a wildcard

Malachi

so the @match isn't what I want then?

Quill

Actually, maybe a wildcard for the http/https part

@Malachi Don't you want to match http://chat.stackexchange.com/rooms/8595/the-2nd-monitor

Malachi

20:38

I want to match several different chat rooms

chromium.org/developers/design-documents/user-scripts

greasemonky style uses @include

Quill

You can use either, and you can just set the @match to *chat.stackexchange.com/rooms/*

Malachi

you can also match a specific url, and don't need to use wildcards

Quill

Yeah, but, if you want users to be able to support whatever chatroom then you shouldn't do specific urls

Sorry, my above message was a little confusing

Malachi

well I do want to do specific chat rooms.

because we are going to make it so that there are different memes for different sites.

Quill

Then you can add them as new @match or @include rules

Malachi

20:44

last time I tried to add more than one @include to a user script from stackapps it wouldn't work

monking

it works with the multiple @match

it is working in 3 chat rooms now

I also put it up in the git if you want to grab it

Quill

Hmm, I think with different chatroom memes, they could be stored in a dictionary {room_id: memes}

Ismael Miguel

@Quill Nope

{<sitename>:{ <memes> }}

Quill

memes would be the dictionary: var memes_dict = {}; var dict = {"sitename" : memes_dict};

Ismael Miguel

Why call it the wrong name?

It's clearly an object

Quill

either way, it needs to know which rooms it's matching

Ismael Miguel

20:58

That's what I'm trying to do

Finding how to get the site name

Quill

window.location.href?

Ismael Miguel

No, that doesn't work well

Is it possible to obtain the scropt content using Javascript?

Quill

which content?

Ismael Miguel

The text content

Quill

Well, window.location.href returns "http://chat.stackexchange.com/rooms/25699/javascript-libraries"

if that's what you mean

Ismael Miguel

21:02

No, I don't mean that

But anyway, the only reliable way that I found is by accessing .small-site-logo and parsing the src attribute

Quill

Ah, right, site name, not room name

now I get it

Ismael Miguel

Memes are per-site based

Quill

Yes, there should be a better way, but none show themselves presently

Ismael Miguel

I'm still looking

There is really no way to get the site from there

@Quill document.getElementById('footer-logo').getElementsByTagName('img')[0].src.match‌(/sstatic.net\/([^\/]+)\//)[1];

With jQuery: $('#footer-logo img')[0].src.match(/sstatic.net\/([^\/]+)\//)[1];

Malachi

21:27

I was thinking different JSON files for each site, but not sure how to switch between them for the sites.

there has to be a way to distinguish between which stack site the chat belongs to.

but I need to wait until I get home to play any more

Ismael Miguel

@Malachi Read what I sent to Quill

Quill

@Malachi, we can easily get room number / name, but not the parent site name

Malachi

we can make the script run on chat.stackexchange.com/* and then separate the memes by the icon src

Ismael Miguel

I want to propose a structure

{ 'site' : { 'meta': 'meta. ...', 'memes': { ... } } }

And a common one

Malachi

I am good at data entry....lol

Ismael Miguel

21:32

What do you think then?

Quill

What's the 'meta': 'meta . ...' going to contain

also, with JS you don't need to wrap them in quotes

Ismael Miguel

You must wrap it in double-quotes in JSON

And that would contain the meta address

pastebin.com/Y0GdajUP

What about that?

Ismael Miguel

22:53

Greetings

I'm just testing stuff around

SirPython

@IsmaelMiguel Hello.

Ismael Miguel

We have a repository set up with the Javascript

We went on with jQuery

SirPython

Yup. I'm looking over it now.

I got your ping.

Ismael Miguel

Alright, spend your time studying the logic a little

I'll be shaking stuff up

SirPython

Ah, smart idea using only the post ID in memes/codereview.json; I was going to include that in my review.

Ismael Miguel

22:59

There's no point in adding tons of stuff, right?

SirPython

Right.

Ismael Miguel

I'm also adding some common stuff, like IIRC

I always forget what that means

SirPython

If I remember correctly.

Ismael Miguel

It can also be If I Recall Correctly

SirPython

23:25

@IsmaelMiguel I've been thinking about creating my own UserScript. Is there a specific reference page that you used to help you with creating your memer.js UserScript?

Ismael Miguel

What browser?

SirPython

Chrome.

Ismael Miguel

There is

You can just google "chrome extension"

developer.chrome.com/extensions/getstarted

That link explain the very basic

SirPython

Ah, this is perfect!

Thank you.

Ismael Miguel

You're welcome

Alright, now I'm testing a new version

Crap :/

monking, TSA please

It works!

@SirPython @Malachi Try this: github.com/ismael-miguel/memer/blob/master/memer.next.js

SirPython

23:37

Jamalized

Ismael Miguel

Simply paste in your console

SirPython

Aha! That is very cool!

Ismael Miguel

It goes on my github and fetches the data from there

SirPython

RSA TS Jamalized Malachi'd

Hm. The message for RSA doesn't look too good.

Ismael Miguel

Let me fix it

I have no idea what is going on

This makes no sense

And debugging in IE is harder than debugging in Assembly

urgh!

RSA

new RSA

VBA Rubberducking

Coding Projects and Duga Heaven :)

The 2nd Monitor

Duga's Neighborhood

Transcript for