Comment by Hackbraten | Hacker News Reader

Comment by Hackbraten | Hacker News Reader

Parent Full thread

Remember the early web, when people used to look at existing websites to learn how it was done?

“View Source” used to be a career-starter for a lot of people, but has become largely useless today due to transpilation, frameworks, and other abstraction layers.

I’d love to see a browser extension provide an “Explain Source” context menu item, which sends you to a pane in Developer Tools that shows:

- an estimation which frameworks the page is likely using (a little like the bar chart that GitHub shows for languages);

- a list of dependencies that the website is likely pulling in, with links to their respective homepage and GitHub page;

- their version number(s), if detectable;

- language(s) in which the website was likely written; and

- a small internal API so people can contribute recognition rules for more frameworks and libraries via pull request.

The target demographic would be students of all ages (starting at elementary school), and other people who’d love to learn about web development but don’t quite know where to start.

And who knows, bringing back that explorative, hands-on philosophy may well help a single person get into web development – maybe on the other side of the planet? – and I believe that’d already be worth the effort.

There is https://www.wappalyzer.com/ which does most of what you are looking for.

I use the wappalyzer chrome extension almost everyday when I'm browsing the web, pretty useful at getting a highlevel view of the tech used

Thanks! That’s exactly what I was looking for. It’s even local (data stays in the browser) and free software.

I use Builtwith chrome extension for this. Free version is pretty good for most of the use cases. https://builtwith.com/

also to add stackshare.io

and I'd love to see this for git repos. like "what-is" command that explains what is in a repo based on files structure and content, what modules and glues are involved. it's impossible to keep up with dependencies these days, especially for someone like me who doesn't code in the freshest stacks on the regular...

This would be brilliant!

One (lengthy) nitpick based on a word you used:

> estimation

From that, my guess is that you're implying that because of the spaghetti-pile of bundled JavaScript, CSS and HTML that we have nowadays that it's not possible to use predictable, well-defined standards to make this information available to users.

And you're probably right, it's a mess!

But I would suggest that we try hard to figure out better ways to make the technology simple again, and move towards those, rather than building a complex guess-the-technologies layer on top.

Ideas towards that:

- Move (standardized) package metadata into JavaScript modules themselves so that the data can be inspected and surfaced at runtime (status: I'm not aware of this being standardized, but it may be)

- Improve the ability and mechanisms available to import JavaScript modules (status: this is happening gradually)

- Remove the requirement for applications to perform any bundling at all (status: there's recognized frustration and maintenance burden regarding bundling, but I haven't yet seen no-bundling solutions arising)

- Reduce the need for minimization of content served over-the-wire on the web (status: debatable -- it's probably still required for now, because particularly JavaScript, even after compression, can be fairly large and may still be served in low-bandwidth environments)

A key benefit of this "re-simplify the web" approach would be that as well as enabling the explorative, hands-on approach you suggest, it should also make the learning curve easier for the resulting newcomers.

That would be great. You could also recommend extensions to be installed if a website uses a certain framework. For example, the react Dev tools extension can be used to view the source of react apps in a more intuitive way compared to the rendered html file.

Good point!

Another couple of tools that are useful for analysing apps/products that heavily utilise js.

- webpack bundle analyser

Use it to determine what’s in the bundle. Can give you insight into tools, APIs and other dependencies.

- shuji

Used to decompile minified js. Effectively you can read the bundle, see the directory structure. Perfect tool for learning.

[1] https://openbase.com/js/webpack-bundle-analyzer

[2] https://openbase.com/js/shuji

Not only explain the source, but also format and present it in a nicer way.

Many websites’ code now are minified so I have to copy and paste it around then manually clean it up before I can start reading it.

My experience is; view-source gives the downloaded html (&css &js). It will show a js function which adds some html elements to dom. So for example view-source migjt never show a specific div with text. I usually go by inspect element, because that shows that shows whats rendered, what we actually see on dom.

> when people used to look at existing websites to learn how it was done?

I actually forgot we used to do this. I miss the early web.

builtwith.com?

A bit like that. But for web dev, not sales intelligence.

And, most importantly: fully offline (so you can be sure nobody learns about the sites you visit).

Not sure what you mean by sales intelligence; builtwith shows frameworks, web server tech, etc.

Ah ok, I stand corrected. Looks like I’ve been misled by their pitch, which focuses heavily on the recon-for-more-leads aspect.

Reply on news.ycombinator.com