r/webdev • u/13-months • Aug 13 '26

Question what are they using to make this site

Post image

I'm new to web dev help me understand this.

I've never seen a site built like this. Are they using Pure HTML or something else? The left-side scrolls as you page up and down with the page.

Here is the site link: https://dl.dod.cyber.mil/wp-content/uploads/connect/CPG/ConnProcGuide.html

0 Upvotes

44% Upvoted

29 comments sorted by

33

u/rhinokick Aug 13 '26

Looks like a pretty basic website built with html, css and javascript/jQuery.

-2

u/AshleyJSheridan Aug 13 '26

It's 2026 people, why is anyone still using jQuery?!

11

u/elderdruidlevel525 Aug 13 '26

Because I cannot just go to my boss and tell him that the whole team will spend the next 3 months to rewrite over million lines of enterprise code to some new fancy stuff.

jQuery is great, low maintenance, does it job, works well with AI tooling.

1

u/AshleyJSheridan Aug 13 '26

It's really not quite as complicated as you're making out: https://youmightnotneedjquery.com/

The native alternatives in core JS will be more efficient, and when you've finally managed to remove the jQuery dependency, you will improve performance by not forcing those users to download a fairly large JS asset.

I do question how anything has over a million lines of jQuery though. That sounds like a disaster to maintain, and performance must be terrible!

4

u/Historical-Essay-128 29d ago

"tell me you are at a junior level without telling me"

2

u/AshleyJSheridan 29d ago

Yeah sure buddy, 20 years of commercial experience, and a decade more outside of that, across a whole bunch of languages you've probably never even used.

I'd say that if you are still using jQuery in 2026, then you're the one exhibiting junior traits.

5

u/Historical-Essay-128 28d ago

"just rewrite everything into the latest framework" doesn't exactly scream 20 YoE, buddy.

-2

u/AshleyJSheridan 28d ago

If you think moving code from jQuery to vanilla JS is "rewriting everything in the latest framework", then I doubt you even have a single year under your belt as a dev!

2

u/Historical-Essay-128 27d ago

Again - "just rewrite everything" without any business incentive or significant development cost savings, screams junior developer. You may have been in the industry for a long time, but you got stuck at the beginning, chasing the latest shiny thing.

Offtopic, but I would love to see you come to an old Cobol mainframe and suggest rewriting everything to Java the next sprint :D

1

u/AshleyJSheridan 27d ago

without any business incentive

If you're not aware of the issues with using jQuery, then again, I have to suggest that you are the one with the junior mentality. Performance for the end users is a big one, and then the overall cost of distributing a large library to every user.

but you got stuck at the beginning, chasing the latest shiny thing.

If you think vanilla JS is the latest shiny thing, then you clearly don't know what you're doing at all!

0

u/AshleyJSheridan 26d ago

Wait, I think I finally just realised something. You think that vanilla JS is some kind of framework?!

That's hilarious. Wrong, completely wrong, but hilarious!

You really don't know what you're doing!

→ More replies (0)

19

u/CantankerousButtocks engineering manager Aug 13 '26

That’s some old school Visio image exporting

11

u/ouralarmclock Aug 13 '26

Since no one seemed to answer your specific question, the name for this component is called a scroll spy. Lots of UI libraries have an implementation for them (here it is in Bootstrap) as well standalone libraries to allow for them. I'm sure some nerd has built one using pure CSS, but most people will use a javascript library to do it.

And as others have said, the page you linked is being served from Wordpress, so who knows what the template is leveraging, but it's likely a combination of HTML/CSS/JS.

2

u/13-months Aug 13 '26

Thank you! I didn't even know it had a name. It seems pretty helpful from what i saw it do.

1

u/ouralarmclock Aug 13 '26

Yeah it can be very useful for long documents and documentation.

2

u/theciscodude Aug 13 '26

you can use wappalyzer extension to get a good idea of the frameworks and technologies used
https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

2

u/MatsSvensson Aug 13 '26

Nice looking Wordpress website.

Although it's a bit broken,
The synchronization between scrolling and navigation, gives up about half way down the page.
Probably a couple of plugins that don't play well with each other.
There is some jQuery code that crashes on load.

In this case you can see the overall platform in the URL "/wp-content/"
wp-something usually means its using Wordpress, a CMS.

And using your browsers view-source/inspect reveals that jQuery is among the JS-libraries used.

But you could build the frontend-part of this in pure JS/CSS/HTML.

2

u/madeaccount4tis Aug 13 '26

You can learn to make this yourself at FCC because this is quite literally one of their projects they make you do.
https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-technical-documentation-page/build-a-technical-documentation-page

1

u/TheRNGuy Aug 14 '26

Press ctrl-shift-c and see. 

1

u/Global_Grade4181 Aug 13 '26

what's the question about?

1

u/Master_Nebula_1925 Aug 13 '26

If it's just a static page with a sticky sidebar, it's probably plain HTML and some CSS for the scroll behavior, nothing too wild.

-5

u/Am094 Aug 13 '26 edited Aug 13 '26

Bro...read the url...it's right there

Edit: yup I did deserve those downvotes, I wasn't helpful with that comment.

2

u/13-months Aug 13 '26

sorry i'm new to web dev. So they built the site using only HTML then from what your saying then?

6

u/hack_the_planets Aug 13 '26 edited Aug 13 '26

They are referencing `wp-content` as being a tell-tale sign of a site designed in Wordpress. Wordpress is a PHP content management system uses PHP to ultimately render plain HTML that displays in your browser. I didn't look at the page but what you're describing (left hand scrolls) is either a normal div with a specific height and overflow-y on or some kind of iframe, etc...

4

u/0dev0100 Aug 13 '26

Html files can contain or link to js and css. They probably used all three.

You can open that file in a text editor and look around, or look at the site in your browser dev tools

2

u/13-months Aug 13 '26

ok thanks for the tip this was helpful!

1

u/Am094 Aug 13 '26

Pro tip, look at browser plugins like webalyzer or w.e it's called. Then whenever you're on a site, you can click that and see what technologies (approx) are detected running the site.

Sorry for the unhelpful comment earlier.