Javascript and webdev (22)

1 Name: Anonymous Techie : 2021-11-18 16:58 ID:Heaven

I heard it's called "frontend". As opposed to "backend", everything that happens on the server side. But feel free to discuss both.

2 Name: Anonymous Techie : 2021-11-18 17:00 ID:Heaven

>null == undefined

true

>null === undefined

false

3 Name: Anonymous Techie : 2021-11-26 08:34 ID:Heaven

Apparently javascript is case sensitive. Don't go calling "Alert" when you need "alert".

4 Name: Anonymous Techie : 2021-11-30 12:45 ID:F5uejfZc

>>3
I think it would be difficult to find a language that is case insensitive for function names, SQL perhaps.

5 Name: Anonymous Techie : 2021-12-19 00:04 ID:Heaven

>>4
Common Lisp is by default. You can configure the reader to preserve the symbol case (or invert, if you don't want to SHOUT standard function names), but I don't think I've ever seem anyone use that for code. I believe at least R5RS also requires Scheme implementations to be case-insensitive.

6 Name: Anonymous Techie : 2022-03-07 10:13 ID:Heaven

Searched for "javascript performance tips"

https://www.keycdn.com/blog/javascript-performance

Interesting points are

HTTP/2 uses multiplexing, therefore allowing multiple requests and responses to be sent at the same time.

Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files.

This thing:

var Person = Object.create({
init: function(name) {
this.name = name;
},
do: function(callback) {
callback.apply(this);
}
});
var bob = new Person('bob');
bob.do(function() {
alert(this.name); // 'bob' is alerted because 'this' was rewired
});

This thing, though I prefer to keep the necessary javascript right in the html:

// load example.js without interrupting your webpage's rendering
<script src="example.js" async></script>
// load example.js after the page has finished loading
<script src="example.js" defer></script>

Animate with requestAnimationFrame

7 Name: Anonymous Techie : 2022-05-18 18:18 ID:4LpMs8SO

https://files.catbox.moe/ugk532.txt

Uploading latest version of 4-ch.net Refresher Violentmonkey script, it makes refreshing 4-ch slightly less annoying. Basically it allows you to see what boards were updated with a single click.

I posted it into https://4-ch.net/general/kareha.pl/1625420190/l50 programming and technology thread in /general/ previously, but maybe I need to actually use /tech/ somehow.

I need to add a way to make faved threads show up on top, but maybe this script is good the way it is right now. You might notice those [fav][hide] buttons, but they don't actually work yet.

8 Name: Anonymous Techie : 2022-06-15 11:28 ID:Heaven

>>7
Didn't seem to work for me with Greasemonkey.
Do you have a screenshot of what it looks like you can post on /img/?, maybe I am just blind. I looked over the code though, doesn't look malicious or anything.

9 Name: Anonymous Techie : 2022-06-16 12:21 ID:Heaven

Nevermind, I did some reading and it looks like Greasemonkey compatability is pretty dead.

10 Name: Anonymous Techie : 2022-06-16 18:53 ID:Heaven

>>8-9
Yeah, original Greasemonkey seems dead, I use Violentmonkey for firefox instead. If you use chrome, you can try Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo , haven't tried it personally. I might try backporting it to Greasemonkey if anyone cares, probably wouldn't take too long.

Here is a screenshot of >>7 in action: https://4-ch.net/img/src/1646166409855.jpg

11 Name: Anonymous Techie : 2022-06-18 16:00 ID:/bH9s31M

>>10
Since the background color on the post you're peeking at is hardcoded there are some styles that are not 100% useable, like Blue Moon has the same text color and background color.
I think this could be solved by wrapping the post in div#posts div.thread div.allreplies, and then removing the border and margin on .thread with style attribute to make it look like a normal post. This way it would use the background of the selected theme. Adding multiple #posts id isn't really valid html, but afaik nothing on Wakaba's javascript relies on #posts so it's just unfortunate the dev used id instead of a class there, but not really an issue.
The much easier temporary fix would be to just hardcode in the text color as well so none of the styles make it unreadable.
All in all pretty useful script though.

12 Name: Anonymous Techie : 2022-06-18 20:24 ID:Heaven

Updated >>7 script: https://files.catbox.moe/qd9coc.txt
Changes:
*) Now it works with themes other than the default one (thanks >>11, new code is around just_hardcode_peeked_post_background_color variable, now it looks better).
*) Clicking on board now opens thread list for that board. The general and dqn thread list takes too long to get created, need to improve that.
*) Added a few links for personal usage, feel free to delete those, search for img/res/2664.html in the code to find those.

I feel like I need to rewrite a lot in this thing. My number one priority is ability to favorite threads, I need to display favorited threads above all other threads, and I need a lot of switches like [sort by new][sort by bump][sort by length][show faved threads only][show unhidden threads only][show all threads][show hidden threads only][only show threads with new replies+]. I want people to be able to forget about this site for a few months, visit it again, and to read the threads that interest them first.

The other thing is, I use list of lists when I could've used list of objects. I do "change[change_type]" (where changes_type = 0) instead of "change.type", had some brainfart about wanting to use variable length objects, but I now think that it's better to just have some unused fields. Maybe list of objects will have a slightly better performance than list of lists, if I create objects with all elements they'll ever need instead of creating them one by one. Maybe need to use the "new" keyword, ttps://www.positioniseverything.net/javascript-new-object . Caring about performance in javascript, sounds silly already.

13 Name: Anonymous Techie : 2022-06-19 06:48 ID:Heaven

Was curious how to properly create an array of objects in javascript. Apparently using the "new" keyword may have benefits, while initializing array with specific length is useless. Javascript is no C.

https://stackoverflow.com/questions/4852017/how-to-initialize-an-arrays-length-in-javascript
https://javascript.plainenglish.io/exploration-of-javascript-object-for-performance-optimization-70b20246ab9e?gi=db213cb57480

14 Name: Anonymous Techie : 2022-06-19 12:16 ID:Heaven

>>12
Looks good now, I look forward to your updates.

15 Name: Anonymous Techie : 2022-06-21 13:01 ID:Heaven

Guys, I have a puzzle for you. I have a list like this
https://4-ch.net/img/src/1655815547859.jpg
And I want to add a new empty line below some specific link like this
https://4-ch.net/img/src/1655815547859.jpg
What's the best way to do that?

I got that second screenshot by replacing
<a href="/iaa/kareha.pl/1617691298/l50">26:Why are imageboards filled with so many religious fanatics and conservatives these days?(17)</a>
with
<a href="/iaa/kareha.pl/1617691298/l50">26:Why are imageboards filled with so many religious fanatics and <div style="margin-left: 355px;"><a href="#">[show]</a><a href="#">[newtab]</a><a href="#">[peek+]</a></div>conservatives these days?(17)</a>
, but I don't know how to get exact wordwrap position in javascript.

Maybe instead of doing all that I can just add those [show][newtab][peek+] to the right of clicked thread, but that will make all threads after that shift position, it will probably look too chaotic.

Or I could do position:absolute, and just draw text on top of other text. It wouldn't be as easy to see though, I'd rather not do that.

16 Name: Anonymous Techie : 2022-06-21 13:03 ID:Heaven

17 Name: Anonymous Techie : 2022-06-21 19:45 ID:Heaven

>>15
Somewhat solved, I'll do an easier route of just adding one <br> and one <span style="width:358px;float:left">:</span> in between those links. I get the exact width I need by doing let offset = a2.offsetLeft - a2.parentElement.offsetLeft

18 Name: Anonymous Techie : 2022-06-26 13:16 ID:jucmHvpG

If you're not using TypeScript, you're Wrong

19 Name: Anonymous Techie : 2022-06-27 13:58 ID:7njWlj/l

Overall I'm a fan but was rather disappointed to discover that Typescript can't handle recursive nested keys within generics... or maybe I'm too greedy.

type nestedKey<T> = keyof (T[keyof T])

or

type valueOf<T> = T[keyof T]
type nestedKey<T> = keyof valueof<T>

unfortunately are type "never" from the interpreter's point of view
(I think I understand why, but there's no syntax to specify the typing I want, which is "all the keys of (all values of T)")

20 Name: Anonymous Techie : 2022-06-29 12:47 ID:Heaven

Typescript looks nice. Doesn't look like violentmonkey editor supports typescript, so I'll stay vanilla for now.

How is typescript compared to coffeescript?

21 Name: Anonymous Techie : 2022-06-29 13:27 ID:yuhXqMz8

>>20 Typescript is probably closer to traditional JS and is good if you use an IDE like VS Code. I haven't used Coffeescript often however it seems more focused on code formatting, styling and clarity rather than Typescript's focus on safety. If you plan to use it as an intermediate language before moving on to some other project, it's probably not worth learning the intricacies of typescript (but I use it daily, so ymmv)

22 Name: Anonymous Techie : 2022-06-30 18:31 ID:Heaven

Apparently you can't install violentmonkey on android version of firefox. One webpage says you can use kiwi browser instead, but it says something about ads upon installing, I worry about using a browser like that.

Name: Link:
Leave these fields empty (spam trap):
More options...
Verification: