#Make code readable client side

46 messages · Page 1 of 1 (latest)

royal falcon
#

Hello, I had a homework to do using a standard html but I did it with nextjs... I know it's a bad idea, but it's so much simpler.

Now, my teacher grade with code, not html result. And obviously... He does not know react. He told me if the code is readable enough in the inspector it will be good as he worked once with react like years ago.

I thought it was good but I checked myself and in the inspector the code seems to be minified or obfuscated, something like that.

I mean, it was dumb from myself to think I would find a .jsx file in the source tab of the inspector, but still, the code looks unreadable. Does next do things under the hood to minify code? Are there ways to turn those settings off ?

small moonBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

indigo pagoda
distant crow
#

nextjs minification and obfuscation cannot be disabled afaik.

just tell your instructor that:

  1. the app is made with nextjs
  2. the javascript they see in the browser is minified and obfuscated for performance, this cannot be turned off
  3. they can still see the html/css in the inspect element tab, these things are not obfuscated
  4. if the instructor wants, just share the source with them, with running instructions (npm run build + npm start) included
royal falcon
#

Hello, thanks for the support! Sadly the html generated by react is not enough as the homework is about data visualization (using d3.js to make graphs) so the html generated is a graph in an SVG. They grade how I make the SVG…

#

And I wanted to use react because use effect and use ref is great to handle SVGs

trim fable
distant crow
trim fable
distant crow
trim fable
distant crow
#

Why I know it works: Sentry error logs are displayed in plain unminified code. It has saved me couple times

#

How to use it tho no idea

#

@royal falcon maybe try the react developer browser extension

#

Iirc called react devtool or something

royal falcon
#

Or maybe I'm mistaken

distant crow
#

Try it, I think it does work

#

Release notes of next 13 and 14 do not include any removals of these options

royal falcon
#

I hope so ^^ i'm still in school, I'll try back at home and keep you guys informed. Have a nice day and thanks again

distant crow
#

yes it works!

image.png
#

but it has a lot of extra stuff as polyfills for older browsers. it's best to still send the teacher the source code too, like a github link

trim fable
#

haha ye he can't show that to his teacher

distant crow
#

fyi the above is the compiled code for this

"use client";

import { useEffect, useState } from "react";

export default function Page() {
  const [now, setNow] = useState("");
  useEffect(() => {
    const interval = setInterval(() => {
      const date = new Date();
      setNow(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return <div>{now}</div>;
}
royal falcon
#

Lol yeah I think he will definitely don't accept that, my case aside, that's pretty interesting to know 🙂

royal falcon
tired zenith
#

your school advanced, mine had.. html css and like tubmlr...

trim fable
#

I tested the production source maps it's wild too. Not really solving your problem

trim fable
tired zenith
#

how advanced is your project, might jsut be better to code it in html css and js really quick

trim fable
#

throw that nextjs code into chatgpt and tell it to rewrite to vanilla js fine

tired zenith
#

ik thats not what this thread is about, but maybe someties its better to try out just hard labor xD

trim fable
#

na com'n the kid is right the teacher is not up to date. Does not accept a repo with react as framework? com'n

distant crow
#

tbf though unless the code involves a lot of react states, it's pretty easy to convert it to raw html since it's mainly a d3.js project

trim fable
#

Even if it's quite easy to rewrite it to raw html/js this is about a principle. Your class should band together and burn the teachers car to send a signal
(i am kidding ofc)

tired zenith
trim fable
royal falcon
# tired zenith how advanced is your project, might jsut be better to code it in html css and js...

It's not that the project is too advanced to rewrite it from scartch in html/css but rather than I use react-use's useInterval hook to actualise some object's positions.

To give a bit of context, the project is a representation of Pokémon types as circles. When you click a pokémon type, other types that are very effective, less effective or uneffective to this type are bound by a line. The other types are vanished.

The issue here is that the whole thing is running in a physical simulation, so when you move a circle others move accordingly. That means that the lines' positions have to be updated accordingly. That's why I use useInterval.

It could be done with setInterval (vanilla javascript) but the hook is better since it works well with the rest of the code who's in a useEffect.

Sure it could be done without react, but the readability of the code would be so much worse

royal falcon
trim fable
royal falcon
#

Lol, my bad sir

ornate zodiac
#

you should get used to work within requirements, because in real world you will sometimes have to work with very outdated tech

grand stratus
#

Yeah that's a good point but also good to try new things and push boundaries. When in doubt just go to professor office hours and you'll get an A

royal falcon
#

hey, I rewrote the whole code for vanilla js and I'll deliver that, but I'll use the react version for the presentation. I'll do a live demo or something 🙂 since I used shadcnui for the whole page layout, I bet i'll get points for that

distant crow
#

Best of luck with the presentation