6 ms·

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,

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.

Snowworm 4y ago
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.
- Hackbraten 4y ago
  Good point!
junon 4y ago
builtwith.com?
- Hackbraten 4y ago
  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).
  - junon 4y ago
    Not sure what you mean by sales intelligence; builtwith shows frameworks, web server tech, etc.
    - Hackbraten 4y ago
      Ah ok, I stand corrected. Looks like I’ve been misled by their pitch, which focuses heavily on the recon-for-more-leads aspect.
doerig 4y ago
There is https://www.wappalyzer.com/ https://www.wappalyzer.com/ which does most of what you are looking for.
- gitgud 4y ago
  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
  - Hackbraten 4y ago
    Thanks! That’s exactly what I was looking for. It’s even local (data stays in the browser) and free software.
jka 4y ago
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.
azhenley 4y ago
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.
- davchana 4y ago
  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.
high_byte 4y ago
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...
pythonbase 4y ago
I use Builtwith chrome extension for this. Free version is pretty good for most of the use cases. https://builtwith.com/ https://builtwith.com/
RileyJames 4y ago
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 https://openbase.com/js/webpack-bundle-analyzer [2] https://openbase.com/js/shuji https://openbase.com/js/shuji
naltun 4y ago
> 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.

Snowworm 4y ago

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.

Hackbraten 4y ago
Good point!

junon 4y ago

builtwith.com?

Hackbraten 4y ago
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).
- junon 4y ago
  Not sure what you mean by sales intelligence; builtwith shows frameworks, web server tech, etc.
  - Hackbraten 4y ago
    Ah ok, I stand corrected. Looks like I’ve been misled by their pitch, which focuses heavily on the recon-for-more-leads aspect.

doerig 4y ago

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

gitgud 4y ago
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
- Hackbraten 4y ago
  Thanks! That’s exactly what I was looking for. It’s even local (data stays in the browser) and free software.

jka 4y ago

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.

azhenley 4y ago

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.

davchana 4y ago
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.

high_byte 4y ago

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...

pythonbase 4y ago

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

RileyJames 4y ago

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 https://openbase.com/js/webpack-bundle-analyzer [2] https://openbase.com/js/shuji https://openbase.com/js/shuji

naltun 4y ago

> 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.