#blocking javascript

[ophexis]

Posting my exo today bc I miss playing this but. I was out of disk space.....

[quietmarie]

What is Async Anyway?

Explaining async/await and general concurrency concepts in programming languages.

A lot of modern languages have async/await syntax built directly into them, and the construct can be extremely useful. Examples of languages that include these concepts are JavaScript, C#, Python, and Swift, and even modern relatively low-level languages like Rust have this syntax. Even though it's usually thought of as a more advanced feature, I think it is really not that hard to use once you get the hang of it, and it is super useful and rewarding when you really understand it.

This is going to be a bit of a long and pretty technical post, but I hope it can give you some confidence to know what async/await really does when you use it, and maybe it can help you use it more effectively. Keep in mind that I will not be able to go over everything in super deep detail, and that I am going to simplify stuff, but it should give you an idea how these systems work.

I am a little curious about eventually following this up with a post looking at how these systems compare under the hood in different programming languages, so let me know if you'd be interested in that.

Big post under the cut.

Parallelism and Concurrency

Computers today can do many things at the same time. And I mean that literally: in one instant, a modern CPU can be working on multiple instructions. That's because a single CPU has multiple cores that can all execute code (mostly) independent from each other. This is called parallelism, and the way we as programmers interact with that is through threads. Most programming languages, especially "lower level" ones, have a way for programmers to create a thread that will run some part of your code. Creating a thread is telling the computer that it can, and should, run the code in your threads in parallel (although various systems such as the OS still have discretion over when and if that actually happens).

Parallelism is not quite concurrency tho. Where parallelism is about your computer literally doing multiple things at once, concurrency is about your computer doing multiple things, but not at once. With concurrency, you kind of pretend you're doing a parallelism. But in reality, stuff doesn't happen at the same time. Instead, your system (runtime) does some work on task A a bit, then on task B, then maybe again on task A, etc., but doesn't work on the two at the same time. So, in a concurrent system it might look like task A and B are progressing simultaneously from the outside, but work actually only happens in sequence.

Let's Talk About I/O

I/O stands for input/output and describes data in your program that comes from elsewhere, or that gets sent elsewhere. So for example, user input is I/O. And similarly, a web request can be I/O, whether you send it or receive it. So let's use that as an example: you send a web request to some API to fetch you the cutest bunny images and facts:

But the service is taking its sweet time to respond.

Fact: Loading bunny fact…

With how we did it here, we halt execution of the entire thread until the response comes in (at least in most languages, more on that later). In this case, we call get a blocking method because it, well, blocks the thread without actively doing useful work.

What if we could instead use the thread for other tasks instead of just sitting there, twiddling our thumbs and waiting on the server? This smells of concurrency…

Callbacks

Callbacks are a way for programmers to avoid that period of thumb twiddling. The new getWithCallback function now returns immediately, but it doesn't return a value. Instead, we have to register the code we want to run once the server responds with the function:

The function we pass to getWithCallback is called the callback, and it gets called by the client* only once the response arrives. Oh look, here it is:

Fact: A rabbit's life span is about 8 years, though sterilized rabbits (those who are spayed/neutered) can live as long as 10-12 years.

*"The client calls it" is a big simplification, there might be a lot more stuff happening here. But the important bit is that the client magically does not need to block to wait for the response.

Promises and Futures

What JavaScript calls Promises and what a lot of the other languages call Futures is essentially sugar sprinkled on callbacks - it makes our callback code a little nicer. Callbacks can commonly create a concept called "callback hell", where you have to call a function that takes a callback inside the function that takes a callback inside the function that takes a callback…

(Code modified from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)

To avoid this, functions now can return a Promise instead of taking a callback. Promises represent the promise that, while a concrete value might not exist right now, it will in the future. Once the value exists, we say the Promise resolves. The code above with Promises would then look like this:

It still doesn't look perfect, and there are things you can do to make it look a little nicer, but it's so much less nested. The callback in the then function will be called once the value is ready, and the callback itself can also return a Promise. The then function then returns a Promise which will get resolved once the future from the callback is resolved. Many other languages have a concept similar to JavaScript's Promise, and it's often called something like Future or Task (because it would be too easy to have consistent naming across languages).

Now keep in mind neither of those solutions above are really "concurrency" in the definition we used above. This is because the thread we call, for example, getWithCallback on still completely belongs to us. We could keep using it, and we would not get interrupted to execute the callback. Depending on the language and runtime, the callback might get executed on a different thread, or the runtime might have to wait until we are completely done with what we were doing to then use our thread to call it. The same thing goes for the callbacks in the then method of promises.

Async/Await

And async/await is just some sugar and magic fairy dust on top of Promises (or Futures or whatever). It makes our code look like it should be blocking, but in reality it isn't. Here's what our bunny image code looks like with async/await:

So here, a couple things happen. First, the Promise is created and the web request is initiated. Then, the Promise is awaited. For that, (if the Promise is not resolved at this point already,) the task first yields, meaning it tells the runtime that it is not doing any useful work at the moment, and that the thread it ran on can be used for other tasks. The runtime then makes a note of where to continue execution when that Promise resolves, and looks around for other tasks that currently need executing to put them on that thread. After a while passes, the Promise resolves, and once the runtime has some resources available for us (maybe because another task just yielded), execution on our original task is continued with the API response.

Fact: A rabbit's teeth never stop growing! Many people believe they need to chew to keep their teeth short. While they do enjoy chewing, it's the normal wear from where their top and bottom teeth meet that keeps a rabbit's teeth short.

This is more in line with the concurrency we sought out above. We can interleave other computations while our task is still running, but during times where it is not doing any useful work. (Still, because you may have multiple threads your tasks can run on and move between, it might not always be 100% technically accurate to call this system concurrent.) This is also why it is important to not block for long in async contexts: if you're hogging the thread for too long, you're stopping other tasks from progressing and throwing a lot of the benefits you gained from doing it concurrently in the bin. Most async runtimes will give you some option to run expensive or blocking code elsewhere, so that you can keep the benefits you gain from async.

So that's the explanation what async/await does, and the broad strokes of how it works. If you have any more questions regarding the topic, feel free to ask! I think it'll be fun to occasionally write a longer post on interesting things I've learned, so if you have topic suggestions, don't be afraid to tell me!

Further links and sources

Don't Block The Event Loop! - Why you should avoid blocking in Node.js, and what pitfalls to look out for.

I got the bnuuy images and facts from the animality API. The licenses on the images are not super clear, but I'll assume it's okay for me to use them here with credit because it's an open API.

I lifted the definitions and some of the explanation for parallelism and concurrency from Steve Klabnik's talk on Rust's Journey to Async/Await. The talk is more technical and very focused on Rust, but it's a great talk.

I referenced the mdn web docs at various points, they're a great resource.

I created the code screenshots using the carbon app.

[infoanalysishub]

Total Blocking Time (TBT)

Learn everything about Total Blocking Time (TBT) – a critical web performance metric. Understand how it’s measured, why it matters, how to improve it, and its impact on user experience and SEO. Total Blocking Time (TBT) | Improve Website Interactivity & Performance Understanding Total Blocking Time (TBT): A Comprehensive Guide 1. Introduction to Web Performance The web has evolved rapidly,…

[robomad]

Understanding Event Loop in Node.js

Understanding the Event Loop in Node.js: A Beginner's Guide

Introduction Node.js is a powerful runtime environment built on Chrome’s V8 JavaScript engine. It is designed for building scalable network applications. One of the core concepts that make Node.js efficient is its event-driven, non-blocking I/O model, which is managed by the event loop. Understanding the event loop is crucial for writing performant and efficient Node.js…

[anxiously-scared]

what the fuck do you mean i can just look at [tumblr]s code hello

[kaiserin-belladonna]

Reblog and share and boycott.

Boycott ExpressVPN

[xuethms]

☁ beryl (collection page).

Links: preview | install

Beryl is a grid-based page that neatly displays your collection — of fics, books, movies, muses, portfolio works, or anything you'd like to show the world. Sticky section titles and graphics remain in view so you never lose track of your progress.

Features: no javascript, neat sections, sticky section titles, sticky navigation, header, item quote blocks, item ratings with custom symbols

Credits: preview header image by yamasa-n (unsplash)

[pirateskinned]

page theme 17 / preview - get the code on github

about page with an icon (80 x 80), header, icon links, statistics, progress bars, text block and timeline.

there are instructions in the code but basic html knowledge is recommended when using this page.

this page is javascript free.

read my terms of use. please like or reblog if you plan on using!

[codemerything]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[uncleasad]

Since AO3 is (apparently) still blocking tumblr from creating link previews of AO3 pages (fics, chapters, users, etc), tonight I embarked on a fool’s errand 😂

Forgetting the fact that I’ve forgotten most of the Javascript I’ve ever learned, I spent, uh, too many hours creating a quick-and-dirty simple bookmarklet to halfway automate the manual creation of the link preview. (Quick-and-dirty because I’m certain there are edge cases I haven’t accounted for and which will break things.)

Add this bookmarklet to your browser.

Go to the AO3 page (fic/chapter/user/etc) you want a link preview for.

Run the bookmarklet, copy the resulting text from the popup window.

In the tumblr editor, switch to HTML mode.

Paste the copied text.

If there are no edge cases, you now have a link preview!

There are more detailed instructions on the page in Step 1.

This semi-technical, so not for everyone; hopefully AO3 will unblock tumblr soon 🤞

No warranty!

Edit 15 May 2025: Also, I keep forgetting that if you’ve locked your works to be visible only to logged-in AO3 accounts, then even when the tumblr link preview fetch is working, it will return an incorrect and useless result, so this bookmarklet will be useful in that case, too.

[catboy-autism]

Mannequins, Ball-Jointed Dolls, and Computer Program ID Pack

[PT: Mannequins/Ball-Jointed Dolls and Computer Program ID Pack /PT End]

[ID 1: A picture of a computer being programmed. ID End]

[ID 2: A divider made up of white bows, hair clips, and beads in alternating order. ID End]

Names: Ajax, Al, Alexis, Babe, Belle, Blaire, Cadenza, Cassie, Charlotte, Cody, Delphina, Fey, Flo, Gabby, Gabi, Gwen, Hal, Iris, Jack, Jenny, Kiki, Lacey, Lainey, Lyka, Mac, Malachi, Mari, Marion, Nana, Nano, Pixel, Poppy, Quinn, Ruby

[PT: Names /PT End]

Pronouns: 404/404s, ball/joints, block/chain, bot/bots, bow/bows, bug/bugs, cloud/clouds, cute/cutie, doll/dolls, dress/up, fae/faes, flirt/flirts, frail/frails, frill/frills, git/github, HTML/HTMLs, java/javascript, lace/laces, loop/loops, pix/pixels, pose/pose, py/thons, ruby/rails, sprint/sprints, stiff/stiff, thon/thons, toy/toys, uni/corn, URL/URLs, w3b/w3bs,API/APIs 🦄/🦄's, 🐍/🐍's, 🕸️/🕸️'s, 💻/💻's, 🖥️/🖥️s, 🔌/🔌's, ☘️/☘️'s, 🪆/🪆's

[PT: Pronouns /PT End]

Titles: [Prn] Who Dresses Pretty, [Prn] Who Is Posed, Digital Doll, Doll That Is Digital, The Doll With The Errors, The Dress-Up Doll, The Painted Doll, The Programmed Doll, The Ball Jointed One

[PT: Titles /PT End]

Labels: AI Flag, Alderpollint, Balldollgirlinwayven, Balljointdollfuckoff, Balljointlovia, BJD Presentic, BJD System, BJDgender, BJDollgoth, Bunballdollic, Digiminalwebic, Doll Copinglink/Otherlink, Doll4Robot/Robot4Doll, DollDigital, Dollisque, Gendercodex/Codegender, Genderprogram, Gendersoftware, Idollgender, Machinedollkin, Mannedroidous, Mannequinic, Porcelicce, Robodollgender, Robotthing, Sentient AI, Tearjointic, HTMLgender

[PT: Labels /PT End]

Requested by @virtualcrosier !! :3

[ID 3: A divider made up of white bows, hair clips, and beads in alternating order. ID End]

divider credit(link)

[idioticbat]

i'm curious about something with your conlang and setting during the computing era in Ebhorata, is Swädir's writing system used in computers (and did it have to be simplified any for early computers)? is there a standard code table like how we have ascii (and, later, unicode)? did this affect early computers word sizes? or the size of the standard information quanta used in most data systems? ("byte" irl, though some systems quantize it more coarsely (512B block sizes were common))

also, what's Zesiyr like? is it akin to fortran or c or cobol, or similar to smalltalk, or more like prolog, forth, or perhaps lisp? (or is it a modern language in setting so should be compared to things like rust or python or javascript et al?) also also have you considered making it an esolang? (in the "unique" sense, not necessarily the "difficult to program in" sense)

nemmyltok :3

also small pun that only works if it's tɔk or tɑk, not toʊk: "now we're nemmyltalking"

so...i haven't worked much on my worldbuilding lately, and since i changed a lot of stuff with the languages and world itself, the writing systems i have are kinda outdated. I worked a lot more on the ancestor of swædir, ntsuqatir, and i haven't worked much on its daughter languages, which need some serious redesign.

Anyway. Computers are about 100 years old, give or take, on the timeline where my cat and fox live. Here, computers were born out of the need for long-distance communication and desire for international cooperation in a sparsely populated world, where the largest cities don't have much more than 10,000 inhabitants, are set quite far apart from each other with some small villages and nomadic and semi-nomadic peoples inbetween them. Computers were born out of telegraph and radio technology, with the goal of transmitting and receiving text in a faster, error-free way, which could be automatically stored and read later, so receiving stations didn't need 24/7 operators. So, unlike our math/war/business machines, multi-language text support was built in from the start, while math was a later addition.

At the time of the earliest computers, there was a swædir alphabet which descended from the earlier ntsuqatir featural alphabet:

the phonology here is pretty outdated, but the letters are the same, and it'd be easy to encode this. Meanwhile, the up-to-date version of the ntsuqatir featural alphabet looks like this:

it works like korean, and composing characters that combine the multiple components is so straightforward i made a program in shell script to typeset text in this system so i could write longer text without drawing or copying and pasting every character. At the time computers were invented, this was used mostly for ceremonial purposes, though, so i'm not sure if they saw any use in adding it to computers early on.

The most common writing system was from the draconian language, which is a cursive abjad with initial, medial, final and isolated letter shapes, like arabic:

Since dragons are a way older species and they really like record-keeping, some sort of phonetic writing system should exist based on their language, which already has a lot of phonemes, to record unwritten languages and describe languages of other peoples.

There are also languages on the north that use closely related alphabets:

...and then other languages which use/used logographic and pictographic writing systems.

So, since computers are not a colonial invention, and instead were created in a cooperative way by various nations, they must take all of the diversity of the world's languages into account. I haven't thought about it that much, but something like unicode should have been there from the start. Maybe the text starts with some kind of heading which informs the computer which language is encoded, and from there the appropriate writing system is chosen for that block of text. This would also make it easy to encode multi-lingual text. I also haven't thought about anything like word size, but since these systems are based on serial communication like telegraph, i guess word sizes should be flexible, and the CPU-RAM bus width doesn't matter much...? I'm not even sure if information is represented in binary numbers or something else, like the balanced ternary of the Setun computer

As you can see, i have been way more interested in the anthropology and linguistics bits of it than the technological aspects. At least i can tell that printing is probably done with pen plotters and matrix printers to be able to handle the multiple writing systems with various types of characters and writing directions. I'm not sure how input is done, but i guess some kind of keyboard works mostly fine. More complex writing systems could use something like stroke composition or phonetic transliteration, and then the text would be displayed in a screen before being recorded/sent.

Also the idea of ndzəntsi(a)r/zesiyr is based on C. At the time, the phonology i was using for ntsuqatir didn't have a /s/ phoneme, and so i picked one of the closest phonemes, /ⁿdz/, which evolves to /z/ in swædir, which gave the [ⁿdzə] or [ze] programming language its name. Coming up with a word for fox, based on the character's similarity was an afterthought. It was mostly created as a prop i could use in art to make the world feel like having an identity of its own, than a serious attempt at having a programming language. Making an esolang out of it would be going way out of the way since i found im not that interested in the technical aspects for their own sake, and having computers was a purely aesthetics thing that i repurposed into a more serious cultural artifact like mail, something that would make sense in storytelling and worldbuilding.

Now that it exists as a concept, though, i imagine it being used in academic and industrial setting, mostly confined to the nation where it was created. Also i don't think they have the needs or computing power for things like the more recent programming languages - in-world computers haven't changed much since their inception, and aren't likely to. No species or culture there has a very competitive or expansionist mindset, there isn't a scarcity of resources since the world is large and sparsely populated, and there isn't some driving force like capitalism creating an artificial demand such as moore's law. They are very creative, however, and computers and telecommunications were the ways they found to overcome the large distances between main cities, so they can better help each other in times of need.

[in-parkour-civilization]

JavaScript is the divine language/language of magic in Parkour Civilization because of the command blocks.

[weepingwitch]

i think an easy important step to Knowing More about websites and shit is to start using the element inspector / source code viewer / js console in the browser. like fake screenshots are so easy to make by editing the page, and you'll get used to removing/disabling those "subscribe to continue reading" popups and shit. you'll be a more proficient user of your existing adblock tools if you understand what kind of elements to block, or how to identify the specific class/id names. you can start to look at what cookies/cached data a website is storing. like bc of how javascript is executed and CSS rendered client side, you have a lot more control/insight over how websites appear and function. u can make hard-to-read text into a better color or font, or give things solid backgrounds. inspect those elements!

[blackoutsys]

☽ ✦ Welcome ✦ ☾

Helloo. We're the Blackout System.

☉ You may call us Astra

☉ Collectively we use They/Them pronouns.

☉ Bodily 20

☉ Black, AuDHD

☉ Generally we identify with Alterhumanity, though some of us may not.

☉ We're fine with interacting with others, and accept DMs and Asks about things. However, if you are under 16-17, we will likely block you if you attempt to befriend us, interacting with anyone below that makes us very uncomfortable. Otherwise we don't care if you interact with our posts, and it's a 50/50 on if we block you from following.

BYF...

✦ We don't participate in syscourse. We're not here to get into arguments, and would rather just share our own experiences.

✦ We don't follow back/like posts. This blog is a sideblog to our main, which we'd like to keep mostly private. We'll occasionally reblog posts here, however.

✦ We liberally use our block button. Most of the time it's not because someone did something "problematic", and is generally just us not vibing with their energy or thinking someone is generally unpleasant. Though we do block people who are genuinely problematic, we're just not gonna say shit about it here lmao.

✦ We may use terms we've coined ourselves to describe our own system online.

✦ We will not share our headmates if they're not the one posting. Do not ask, you won't receive a headcount nor names. All names are replaced with an emoji and a letter, at most, if they feel like signing off.

✦ Do not ask for our Simply Plural/Octocon, or any other social medias.

✦ We are pre-diagnosis, if that is an issue for you. While we're not seeking to get it on our medical records, we are also in the beginning stages of working with a trauma specialist to hopefully get a second opinion. This also might not be possible for many years as we live in an incredibly conservative state with few mental health opportunities.

INTERESTS AND HOBBIES...

☄ HOBBIES ☄

Digital Art, Animation, Webdev [HTML/CSS/Javascript], Gamedev [Godot], Embroidery/Sewing, Music Transcription, Tarot

☄ GAMES ☄

Secret Histories [Cultist Simulator/Book Of Hours/The Lady Afterwards], Who's Lila, Warframe, FFXIV, Fields of Mistria, Risk of Rain 2, Splatoon 3, Hollow Knight, Rain World, VTM: Bloodhunt, Valheim, Terraria, Minecraft, Don't Starve Together, Dr. Robotnik's Ring Racers

☄ DIGITAL MEDIA ☄

Chainmail Chasers, Vita Carnis, Midwest Angelica, Interloper ARG, Emesis Blue

☄ MOVIES/SHOWS ☄

Arcane [Only seen 1st season], The Owl House, Spiderverse, Delicious In Dungeon, Frieren, The Apothecary Diaries

☄ BOOKS ☄

Blood Debts/Blood Justice, The Poisons We Drink

[saturnine-saturneight]

Holoatypical: Dev Log 1

Number one in what's hopefully going to be a pretty long series of updates!

So, first things first: Godot rocks. I've been using it for two weeks now, having switched from GameMaker (and before that, Twine, and before that, Java and JavaScript), and Godot does so much of the heavy lifting for you. It genuinely feels like an engine that's designed for making games. Unlike GameMaker, which was like wading through molasses every step of the way, while some sort of molasses shark is biting at your ankles. And I've coded in JavaScript.

Second, let me show you what I've been up to!

As you can see, I'm working on a prototype to try out the merging mechanic. It's got some (ha) bugs, and dragging things could be smoother, but the critters do actually snap into the grid and merge now, and I'm very pleased with that.

This chamber you see here is going to be the lab. As it's planned right now, the player will have infinite initial building blocks (eggs, spores, seeds...), which merge into different critters depending on environmental variables (artificially set in the lab) and on which other specimens are currently in the chamber. The challenge is to figure out the right parameters. I have no idea how big the chamber needs to be for that, but that's not really an issue, because...

This isn't so much a prototype as I'm just straight up building the foundations for a game, which is why it's taking me so long. The grid you see here is controlled with a few variables, and everything is flexible enough that I can simply change the grid size during playtesting and it still works.

The tile grid is an array of arrays, filled with slot nodes that I instantiate at runtime. Is this the best way to learn a new program and language? Haha. Who knows.

Specimens have a sprite sheet with all their stages on it, and when a critter levels up, the part that's visible to the player just needs to be shifted 64 pixels to the right.

That's x starting point, which is the specimen stage/level times 64, then y starting point, width, and height. Fun! So easy!!

As to the sprite sheet, I'm going against common advice and making these big. The 1bit style is super fast to do, and in my opinion, a certain level of detail is important to make the sprites look like anything. I'm moreso playing with the look than really wanting to make a retro game.

This sheet only took me an evening! I'm enjoying it because it really forces you to abstract the shape and focus on what's most important about the critter. (This is a style test - I haven't decided yet how weird I want to go with these vs making them look more natural.)

Next up will be ironing out the kinks, making an egg dispenser and a specimen incinerator so the field can be filled up and emptied, coming up with a few more specimen, and then going into play testing.

But in the next dev log, you're probably going to hear way more about the story and the characters. I am eyeing a visual novel extension for Godot (dialogic), which, if it does what I think it does, is going to take a lot of work off my hands and only leaves me with writing the actual dialogue, which I've already started on.

@tragedycoded @badscientist @curiouscalembour @writingrosesonneptune @gioiaalbanoart @monstrify @cowboybrunch @tsunamiscale @marlowethelibrarian

Was this format interesting? Less code? More code? Anything you specifically want me to talk about in this process? Let me know!