I heard it's called "frontend". As opposed to "backend", everything that happens on the server side. But feel free to discuss both.
>null == undefined
true
>null === undefined
false
Apparently javascript is case sensitive. Don't go calling "Alert" when you need "alert".
>>3
I think it would be difficult to find a language that is case insensitive for function names, SQL perhaps.
>>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.
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
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.
>>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.
Nevermind, I did some reading and it looks like Greasemonkey compatability is pretty dead.
>>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
>>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.
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.
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
>>12
Looks good now, I look forward to your updates.
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.
>>15
Second image is https://4-ch.net/img/src/1655815572851.jpg , sorry
>>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
If you're not using TypeScript, you're Wrong
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)")
Typescript looks nice. Doesn't look like violentmonkey editor supports typescript, so I'll stay vanilla for now.
How is typescript compared to coffeescript?
>>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)
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.
Mr. 4-ch Refresher Userscript
It took almost 3 months, but it finally happened
>//this will break only if there are two threads added at once, and you merge them from an other tab. Quite unlikely
>alert("two or more threads at once, oh no")
Of course solved it myself by clearing values.
var cleaner_threads = document.createElement("style");
cleaner_threads.setAttribute("id", "cleaner_threads");
cleaner_threads.innerHTML = " \n \
#threadlist { \n \
overflow-y: hidden; \n \
max-height: 194px; \n \
} \n \
#threadlist span { \n \
display:block; \n \
}";
document.head.appendChild(cleaner_threads);Quick and dirty styling, probably ES5 compatible.
Maybe some adjustment needed for different computers, just shows top 10 threads threadlist on top of board in a more readable format line by line, if need more threads can click all threads instead. Easy to add more style of course if wanted without using a styling extension.
Yeah, 4-ch Refresher breaks whenever a thread gets moved to a different board or something like that. I plan to rewrite the entire thing, one day I'll get down to it, meanwhile I'll post the latest version I have.
https://files.catbox.moe/knocey.txt
Changes:
TODO:
Uncaught ReferenceError: boards is not defined -- 689 fetch.textContent = "[fetching(" + fetching + "/" + boards.length + ")]"Problem after upgrade with fetching. Looking at rest of code I assume meant to be boards_list and not boards. Testing if sync works with this post.
>Disable captcha. Disable the god damn captcha. That's not something I can do though.
It's doable with tensorflow and a trained model in tampermonkey, but I think it's a bad idea to make publicly available.
oh, thank you, it was bugging me for a while. Need to find time to rewrite the entire thing one day.
Autosage is very nice.
I like the autoexpand feature, but it is a bit odd that it expands per character input and also expands when you're doing backspaces. I think adding a counter to see if it got bigger or smaller on each input so it can shrink when removing characters too.
Of course it's your userscript so it's up to you how it ends up and I prefer to see your vision on the features and design, but I am also trying things and sharing thoughts.
What I tried was a bit different, doing a check for newlines. Maybe need to adjust number 15 for different computers and styles, but I wrote this for me to try out.
You might have tried this too and discovered it doesn't work very well for paragraphs when the textarea is not so wide, there are many newlines that aren't in the input value... It works okay for ascii art, but it brings many annoyances. If you try to expand the textarea and start typing the box will reset size... Annoying!
Continuing what you did I decided to add a check on if the size got bigger or smaller. I let it continue to grow like you made it, it has the least annoyances out of the different methods I tried, but I also made it so it doesn't expand when you remove characters like spamming backspace. I also tried making it shrink on removed characters, but it was easily very annoying.
Here is my end result, your previous code and also my failed attempts are left commented:
I really wanted to post directly in thread, but got caught by spamfilter unfortunately. Some mirrors.
https://pst.moe/paste/xognrr?format=raw
https://controlc.com/4bc74d41
https://files.catbox.moe/3tk5mp.txt
https://rentry.co/cmfi4
https://zerobin.net/?3eee43459b9b23f7#mNqUBc+QcFrW8zTPvNThJQ8KUTplK7SvwwstKB7aut4=
Doesn't add more height when you remove characters. It also removes a very tiny amount when backspacing, but not as much as is added. When removing a lot of text it also checks how many was removed and does the difference. If you clear the field to zero characters the size resets. Still not perfect, works different if you make the textarea wider or slimmer. Maybe the ideal function would also check how wide the textfield is to find a formula based on the width of the textarea for the shrink value I used to add/remove when typing, but I am happy it does not expand when I backspace so everything else I tried may just be bloat.
Wouldn't think such a simple feature would be so complicated!
Maybe like this, also adding a linecounter so adding or removing newlines makes it add or remove more than if it's only a normal character.
I don't understand what that code does, but I'll try to merge it in, when I'll have time.
Originally I wanted to make it so that I can resize the textarea by dragging the upper right corner, but then gave up for some reason.
Tried moving my userscript from javascript and violentmonkey to typescript and tampermonkey,
but apparently I need to move from firefox to chrome/ungoogled chromium as well.
Because firefox version of tampermonkey doesn't allow you to reference local files.
https://stackoverflow.com/questions/41212558/develop-tampermonkey-scripts-in-a-real-ide-with-automatic-deployment-to-openuser
https://www.tampermonkey.net/documentation.php#_require
https://github.com/Tampermonkey/tampermonkey/issues/347
Man, firefox sure is a hollow shell of what it once was. Once I figure out how to make chrome tabs behave the way firefox tabs do, I'll probably switch. I can't live without having million tabs open, and chrome/chromium makes it very very annoying to do by making shrinking every tab to a size of an ant.
Typing tsc myFile.ts every time I edit some typescript file quickly gets tiresome.
This page
https://code.visualstudio.com/docs/typescript/typescript-compiling
recommends doing Execute Run Build Task (Ctrl+Shift+B) from the global Terminal menu, and then selecting tsc: watch.
https://www.youtube.com/watch?v=PDhQQCI4PJE
TypeScript: Auto-Compile in Visual Studio Code
enji.systems
recommends pretty much same thing, but with more customization
visual studio code run command on save
https://betterprogramming.pub/automatically-execute-bash-commands-on-save-in-vs-code-7a3100449f63
he recommended using "Run on Save" extension
Last one seems a bit slower than the rest, but I'll use this for now, until I understand what the hell I'm doing.
https://community.chocolatey.org/packages/typescript
This is a decent way to install typescript if you have internet access. It will install node.js (about 100 MB) and typescript itself (i don't know how much exactly, it doesn't s how).
https://github.com/VSCodium/vscodium
VSCodium is VSCode with telemetry at least partially removed, read docs to learn how to remove more of it. VSCode (Visual Studio Code) is a text editor that tries to be an ide, a text editor that is a webbrowser under the hood, it seems to be based on Atom editor but isn't as laggy as that thing was. Still slightly less annoying to deal with than modern Visual Studio, which nowadays requires you to have a microsoft account for free versions and is a 30 GB download or so.
https://www.netlify.com/pricing/
Forms
100 per site /month
I don't think being able to make only 100 posts a month would make a very good communication tool. Modern world is cucked hard.
>>35
They charge you $19 extra if you exceed it, but I think there's probably no limit. Pay what you use, except they make you pay for basic features that should be included for less than a dollar on the total cost.
There's nothing more comfy than selfhosting/cheap$5vps with PHP or equivalent and vanilla javascript. If your css or javascript requires compiling you've gone too far. Naturally anything heavy requiring speed (database/media manipulation) will not use a scripting language and rely on C either self-written or premade). Anything more than that is ridiculous bloat unless you're a corporation. Lots of companies do just fine on a cheap VPS anyways.
Updated 4-ch.net Refresher
https://files.catbox.moe/i6559b.txt
I changed my browser, and saw in action the issue >>28 was having. Fixed that, now text field wouldn't get bigger on every character input.
Maybe I need to get myself git already. It's so much clicking around whenever I want to upload a text file, it's pretty annoying.
Tried to move from Violentmonkey to Tampermonkey, but Violentmonkey just works better for me for some reason, and has built in code editor. I think Tampermonkey injects script a bit too fast for my code to handle, I need to add extra checks and do "run this a bit later if this element still wasn't loaded yet".
Tried to move from javascript to typescript, but firefox doesn't support loading scripts from hard drive, only chrome does. Is there a way to make chrome tabs behave the way firefox tabs do, that is, not shrink into nearly nothingness once there are too many of them?
Tried to get this script to run on mobile devices, but the only browser on android that supports userscripts is that weird kiwi browser, and I think that one shows ads, not worth it.
This script breaks whenever threads get moved from board to board, you need to delete all associated data when that happens. I will maybe fix this one day.
https://caniuse.com/insertadjacenthtml
Cool site to check the availability of some javascript / css feature in different browsers.