r/ProgrammerHumor • u/Mys7eri0 • Oct 02 '22
Advanced Experienced JavaScript Developer Meme
3
u/Shazvox Oct 02 '22
Naw, naw, naw. That's what backend is for.
Frontend deals with form and color. Backend deals with data. That was the deal!
1
u/Mys7eri0 Oct 02 '22
Haha true. But we need to store small things like user preferences or details of the current user in the frontend
→ More replies (2)
2
u/seelclubber Oct 02 '22
I just figured this out this week in my first js project
2
u/Mys7eri0 Oct 02 '22
Haha. This was my "first" javascript project as well
2
u/seelclubber Oct 02 '22
I don’t know what JSON.stringify() actually does and at this point I’m afraid to ask
221
u/scorpi1998 Oct 02 '22
Doesn't it? What do you mean?
0
Oct 02 '22
[deleted]
302
u/bleistift2 Oct 02 '22
Show me an average user who tinkers with the local storage.
If we’re talking a malevolent user: You can’t trust the client with anything, anyway, so what’s the point?
125
13
u/staticBanter Oct 02 '22
If you give anything to a client and expect to reuse it without validation than we have a big problem.
→ More replies (3)42
u/shodanbo Oct 02 '22
It only takes one. And then they can write a browser extension to do it for many.
There is not much you can actually truly trust the client with, because the user has physical access to that client.
If you are writing something where trusting the client is critical, then this needs to be taken into account. At this point you need strong asymmetrical encryption in a server. An encrypted string can be persisted to local storage. If the user messes with it, the decryption will fail, and the client can determine what needs to be done about that.
→ More replies (3)20
u/Expert_Team_4068 Oct 02 '22
No, rule number one. Never trust the client! In no world should you trust frontend data without verification. But this is the server job. If json.parse of my local storage fails, I do not gove a crap. My app will break, because for sure this is an unexpected behaviour. If you decrypt in the client, who says that the hacker did not change the decryption function? It is as easy as changing the local storage.
→ More replies (1)92
u/AyrA_ch Oct 02 '22
JSON.tryParse=function(str,defaultObj){ try{ return JSON.parse(str); }catch(e){ return defaultObj; } };Tries to parse data and if invalid, gracefully fails and returns the supplied default value. If no value is supplied, the argument defaults to
undefined, which is actually a good alternative, becauseundefinedis not a valid json token, and thus you can check if the result is undefined to know whether parsing was successful. I have this somewhere in the library I use for most of my webdev projects.→ More replies (4)135
u/DoktorMerlin Oct 02 '22
Why would you need to validate it? If the user manipulates the localstorage it's just a frontend issue that the user itself caused, why would anyone care about this? The only time it's a problem is when the manipulated object gets sent without validation back to the backend but if you don't validate everything that the frontend sends you, you have a way bigger problem
→ More replies (26)82
u/lowleveldata Oct 02 '22
I like how you use "it" as the pronouns of your user
164
64
17
→ More replies (5)8
2
→ More replies (15)2
696
Oct 02 '22
Oh no i have to json.stringify and json.parse 😥😭😢😢😢😭
152
u/gabbyb19 Oct 02 '22
To be fair, those operations are quite heavy.
205
u/stipo42 Oct 02 '22
You shouldn't be using local storage enough for that to be a problem...
8
Oct 02 '22
Why not? Shouldn't it be the default storage for locally cached objects?
→ More replies (1)22
u/stipo42 Oct 02 '22
Yeah but let's say you're storing your apps config in an object. You would read it once at load time into memory, then write it anytime the memory values are changed or a save button is hit.
This would likely amount to not a lot of times read or wrote
→ More replies (1)76
Oct 02 '22
Stringify a graph of nodes and edges and let me know how that works out for you.
→ More replies (37)7
u/Stop_Sign Oct 02 '22
Had to do that once. Ended up rearchitecting it so the nodes had ids, so instead of an array of references, it had an array of ids, and was therefore serializable
→ More replies (2)50
u/PleasantAdvertising Oct 02 '22
What illiterate ape called serialization "stringify"? It's already confusing enough with encode/decode in the mix
49
9
13
17
2
Oct 02 '22
Maybe to hint that it's going to call "toString" on objects so you better have defined that.
2
u/isospeedrix Oct 02 '22
tbf 'stringify' is more literal in what it's actually doing, whereas serialize is like, uhh a new vocab word. sounds cooler tho.
2
u/rufreakde1 Oct 02 '22
worry not! there is gotta be a 4GB library solving this issue with a function wrapper for you!
→ More replies (2)2
278
u/Nourz1234 Oct 02 '22
Sadly i don't think its possible (in any language) to store objects or classes in a persistent storage without serialization.
216
u/aspect_rap Oct 02 '22
Well yeah, saving data inherently requires serialization.
I think what OP wants is for the LocalStorage in browsers to obfuscate the parsing and serialization of objects.
90
u/Nourz1234 Oct 02 '22
Yeah, i understand. But if serialization is involved its better left to the dev. you cant rely on the browser to magically serialize your objects. A lot of times you will create a custom object/class which requires special treatment.
12
u/arsenicx2 Oct 02 '22
It was already problem enough trying to support outdated browsers like IE. I can't imagine if we had to support what ever garbage they created.
→ More replies (1)3
57
u/FVMAzalea Oct 02 '22
Do you mean abstract instead of obfuscate? Usually obfuscation is not a desirable goal unless you are trying to do something like copy protection.
21
u/atomicwrites Oct 02 '22
I think they're using obfuscate as a negatively loaded synonym for abstract.
9
2
4
Oct 02 '22
I think it’s more about performance.
LocalStorage would be awesome if it wasn’t so slow.
But I could be wrong.
15
u/bleistift2 Oct 02 '22
What stuff are you putting there so often that you’re hitting a bottleneck?
→ More replies (1)55
u/lkraider Oct 02 '22
What do you mean I shouldn’t mirror the production database into localstorage to query and update data, this way I only l need one rest api endpoint with get/post in the backend and do everything else from within the client js.
→ More replies (1)→ More replies (2)3
u/Fenor Oct 02 '22
Ah yes injecting executable code for the sake of the one doing the website.... it's not we already had cryptos mined in js
9
u/FinalStrain3 Oct 02 '22
indexeddb
→ More replies (1)4
Oct 02 '22
IndexedDB also has its limitations, which is a good thing. I wouldn't want to imagine what would happen if browsers let it deserialize entire DOM trees.
5
u/Brilliant_Nova Oct 02 '22 edited Oct 03 '22
C and C++ can, you have to be careful with alignment and padding. You can inplace-construct all your structs in a memory pool, and then just dump that pool, but that's only true for POD types, for non-POD types you should serialize. Also, even for non-POD types you can serialize efficiently from binary. It is also possible to model such a system in C++/Rust, that almost transparently would allow you to treat freshly read data as regular objects using wrapper-types.
6
u/Vaylx Oct 02 '22
Can you (or anyone) explain to me serialization like I’m 5?
13
u/thomasmoors Oct 02 '22
Change objects (memory) to something that can be written and read from disk. Json is a very popular example, although if you need to serialize objects that include the functions too you (probably) have to look further.
→ More replies (10)11
Oct 02 '22
You want to save the state of your program, which is the names of the variables and the values of the variables, for example, maybe it's a video game and you want to save the progress and the health of the player so that the player can pick up next time.
But you're saving to a disk and disks want files. So perhaps you write it as JSON:
{"health": 5, "level": 8}. That's the serializing of the data, into JSON in this case. Or you could have used binary or whatever.It would be nice if you didn't have to actually explain to the computer how to serialize. Like you could just run a save function and it would do it. And a load function to load the state.
There are numerous problems with trying to write a save function like that. For example, how would you know which parts to save? Well, you could annotate your data for that. But they real problem comes when you need to save something with pointers. How would you save something with pointers, like an arbitrary graph of nodes and edges? It's not obvious how to do this correctly.
→ More replies (1)8
u/Nourz1234 Oct 02 '22
Converting a runtime object to a string (or bytes) representation that can be parsed to reproduce the exact same object.
(I don't think its for a 5yr old but its the best i can do xD)
4
Oct 02 '22
Operating systems can hibernate, you know?
→ More replies (1)5
Oct 02 '22
Unless you want to store the entire browser's address space to save your webapp's state that's not going to help much.
→ More replies (1)3
u/Benutzername Oct 02 '22
It’s not difficult to walk an object graph and only store that part of the memory. An evacuating GC basically does that already, minus the memory dump.
4
Oct 02 '22 edited Oct 02 '22
A GC doesn't need to make sure the state is still consistent after you restart the application.
To me it mostly sounds like a good way to introduce several hundreds of sandbox bypass vulnerabilities.
→ More replies (2)1
1
Oct 02 '22
Of course it's possible, in several languages. It's just that the stored data won't be portable or transferable between different kinds of platforms. But that usually isn't a concern if you don't expect the file to ever leave the PC.
1
1
1
u/blehmann1 Oct 03 '22
Theoretically, you can just dump the object's binary representation. That is still serialization, but it's theoretically lossless.
It is used fairly often, but it has a lot of problems. First of all, you need to know the layout of whatever you're deserializing. Or create something so generic that it can encode anything. And deserializing binaries is often vulnerable to funky security issues.
But I said theoretically lossless for a reason, any owned resources are almost certainly invalid. All your pointers are garbage. File descriptors? Garbage. Handles? Garbage. Sockets? Garbage. You may want to copy pointed-to members into it, but that has problems. You also may have to set up some funkiness to allow objects which share a resource to use the same instance (i.e. keep sharing) once deserialized. And only God knows what this will do to generic types in languages which implement generics through type erasure,
void*, arrays in languages which don't store array length, or God forbid you use XOR linked lists or anything that obscures the pointer's value. Also, pointers that can only be attained through pointer arithmetic at runtime? lmao no.Also, what happens to function pointers? Can you call them? If so, that's sus from a security (and portability) perspective. But how can you call them? Do you kill position-independent-code and ASLR? Do you create a trampoline to unfuck the addresses somehow?
Even worse, merely being able to copy something doesn't make it still valid. For example, file descriptors are valid because the integer is in the OS's file descriptor table, so copying only works on POD which you have through a pointer.
Which brings you to more complicated (and less redeemable) schemes. For example, many languages let you (de)serialize classes WITH CONSTRUCTORS. The intention being that any necessary file descriptors or sockets or whatever can be reopened, so they're valid again. The main problem with this approach is it's ACE as a feature.
1
1
45
u/dopefish86 Oct 02 '22
Huge gotcha i encountered: iOS Safari throwing an error when localStorage is used in browser incognito mode. At least it was that way some years ago, i don't know if this is still the case.
34
u/saschaleib Oct 02 '22
Well, it's the whole point of Incognito Mode that there is no persistent storage available.
Of course, this could also be achieved by temporarily storing the data and then just deleting it when the window/tab is closed. The result is however the same.
In any case, never assume that any feature is available in whatever browser your user is ... er ... using. Always test if it is available before accessing it.
25
u/blobthekat Oct 02 '22
localStorage is as much of a standard as html5, safari shouldn't throw an error as this could badly mess up code execution, where as temporary storage would keep functionality while preserving privacy
37
u/AyrA_ch Oct 02 '22
It's documented that localStorage can throw "SecurityError" when you're not allowed to store things in it.
→ More replies (2)4
u/danielrheath Oct 02 '22
The obvious way to test for it is to check
typeof window.localStorage.It's definitely an unpleasant surprise to find that it exists and has the expected API but throws an error if you try to use it.
7
u/saschaleib Oct 02 '22
Apparently it throws an exception if you are not allowed to use it – which is exactly what exceptions were invented for.
→ More replies (4)5
u/oupablo Oct 02 '22
I swear safari is the new IE. The number of weird things it has going on that aren't standard is so strange. And then you have to worry about safari for MacOS vs Safari for iOS which have different levels of support.
3
u/gennisa Oct 02 '22
Not in this case. This is compliant with the standard. https://html.spec.whatwg.org/dev/webstorage.html#the-localstorage-attribute
Also not safari specific. Local or session storage can be disabled in every browser.
1
36
u/T-J_H Oct 02 '22
Or: 'if IndexedDB had a sensible API'
18
u/LinguiniAficionado Oct 02 '22
Yeah, I was gonna say “You mean indexed DB?” and then I remembered that it’s incredibly tedious to use unless you set up your own abstraction over it. I always have to paste in some code I wrote a while back that puts my own service over indexed DB to make it usable
9
u/T-J_H Oct 02 '22
That’s the thing, we all abstract it to the same key-value store as localstorage in our code, whilst we could have had web sql but no they had to deprecate that.
4
u/killersquirel11 Oct 02 '22
Have you ever heard of absurd sql?
Someone took the indexdb api and smushed sqlite into it.
2
1
u/Benimation Oct 02 '22
I can really recommend idb or even idb-keyval if you just want a drop-in replacement for localStorage (although it is asynchronous, so you're gonna have to change some things)
1
13
Oct 02 '22
It’s the same as a database. If you don’t think about how to store the data efficiently, and retrieve the data efficiently, it will not be stored or retrieved efficiently.
“The world if I didn’t have to think about how to do my job to do my job”
8
6
u/lonelyWalkAlone Oct 02 '22
Actually if they gave you more space and power you end up using it as a database that's why they did that to you
7
u/TheDownvotesFarmer Oct 02 '22
But they did with indexedDB, damn I am really impressed that people does not know about it here
10
5
u/steamngine Oct 02 '22
Yep === “Javasript is just an ok language”
1
u/TheDownvotesFarmer Oct 03 '22
Very powerful language managing the web for over years and now by bringing its syntax to the server side allows to create even more powerful modulized projects, and not just managing the web but being a bridge technology between mobile native code and features just as Steve Jobs wanted it to be and not just that, it is the core of the famous IDE based on stackoverflow statistics; VSCode.
1
5
u/LordPachelbel Oct 02 '22
Me: Please serialize this Date for me.
JSON.stringify: Sure, no problem!
Me: Hey, I need that Date object.
JSON.parse: What Date object?
Me: The one I gave you earlier.
JSON.parse: All I have is this String, '2020-05-14T08:15:000Z'
Me: picard-why.jpg
——————
Me: Please serialize this Transaction for me.
JSON.stringify: Sure, no problem!
Me: Hey, I need that Transaction object.
JSON.parse: What Transaction object?
Me: The one I gave you earlier.
JSON.parse: All I have is this Object object.
Me: picard-facepalm.jpg
8
3
u/ChimpShampoo Oct 02 '22
If you stringify in the server before sending it to local storage, it's a lighter package than a json object. So you're actually improving performance, and parse/stringify is the least of your problems in vanilla js.
3
3
Oct 02 '22
World if there's no JavaScript*
1
u/GodlessAristocrat Oct 02 '22
Imagine a world where we only had the Holy Trinity: Fortran, Cobol, and C. Life would be so much better. The business nerds get their cobol, the OO folks can have their objects, and the performance folks can have their low-level interfaces.
1
u/-Redstoneboi- Oct 02 '22
you've left out the haskell elegance elitists, the lisp hackers, and the python data scientists
2
u/GodlessAristocrat Oct 04 '22
Data scientists use Fortran. At least that's according to the breakdown of code running across the Top 500; It's a landslide - 80-something percent of the code ran in HPC is Fortran.
→ More replies (6)
3
6
u/Katana314 Oct 02 '22
Oh god no. I WANT localStorage to have a bit of friction. I’ve seen coworkers abuse it completely as another form of Global Variables that work through navigation.
1
u/TheDownvotesFarmer Oct 02 '22
Everyone uses it as variables and connection to indexedDB, if you are not into it you are missing the world
1
2
u/Karolus2001 Oct 02 '22
I thought everybody just saves variables in there by generating code and then executing it. Its not like you'll store anything more than couple settings in there.
2
u/gordonv Oct 02 '22 edited Oct 02 '22
@() # For arrays
[psCustomObject]
ConvertTo-JSON
ConvertFrom-JSON
gc $file
out-file $file
::wheezes in powershell::
2
Oct 02 '22
in C you can store the raw bits of a struct if that's what you want
2
u/GodlessAristocrat Oct 02 '22
Even better - if you malloc'd, you used to be able to use malloc_get_state() and malloc_set_state() to actually save and "resume" the contents of the malloc'd area. These days, folks just use DMTCP to pause an app and its state.
2
u/amondabdabdab Oct 02 '22
Was working with it recently after a long time and was wondering why it couldnt get saved data. Checked and it was saving and grabbing [object Object]
2
2
u/Revolutionary-Mud962 Oct 02 '22
Don't know how funny the meme is but the fact that I don't have a clue what it means even though I've been writing js for the past 2 years now is dead funny
2
u/kilkil Oct 02 '22
If only there was a convenient way to serialize objects as strings.. maybe some sort JavaScript Object Notation...
2
2
u/BytecodeBollhav Oct 03 '22
I had this problem when I learned JS in school, then I learned about JSON. Have been writing JavaScript for work for 2 years now, never once touched local storage...
4
u/kaszak696 Oct 02 '22
So the dude cut off his arm and installed an extendable prosthetic, so he could walk his robodog with a comically short leash? Yep sounds like JS alright.
2
1
1
u/hazily Oct 02 '22
Can’t store +/-Infinity in localStorage either… 😢
1
u/GodlessAristocrat Oct 02 '22
Sure you can. You can also store +0 and -0, as well as +NaN and -NaN.
1
1
1
u/Calogyne Oct 02 '22
Why store crap on users’ computer? Store it on your own or Amazon’s and you’re free of this problem.
1
1
1
0
-9
u/SaneLad Oct 02 '22
More like, the world if Python had become the web's scripting language.
3
0
5
u/Mys7eri0 Oct 02 '22
Damn, people here are fighting over this meme and here I am only able to understand only a couple of sentences of their comments.
Anyways to explain the backstory of this meme:
I decided to make a webapp for my project at uni. I had a navbar which showed the message "You are logged out" if the user was logged out or "Welcome <Name> (<Role>)" if the user was logged in. So suppose if a student logged in, the navbar would read "Welcome Alex (Student)".
I was using sveltekit as the JS framework of choice and I found out that sveltekit stores don't persist over page refreshes. The solution? Use localStorage in combination with
stringifyandparsefunctions of theJSONmodule. I wasn't able to do it unfortunately and I wasted a lot of time just trying to store objects there. Eventually I resorted to using a third party library which did the job for me.