I am learning to build a web application using a Lynda tutorial. They have provided a sample application, which in their tutorial looks like this when loaded into Safari:
but when I try to open the same html file it shows up like this: (the only browser option is chrome, because it says it is a Chrome HTML
I am very new to web development, and I am not sure what could be causing this problem. I already disabled my AdBlock. I am using Windows 10 but the tutorial is using a Mac.
Thank you!!
Looks like your Stylesheets aren't loading, make sure you have linked the right files in your head's link elements.
Make sure your stylesheets are linked correctly. Learn the difference between relative and absolute links.
Ad Block won't affect anything, and your OS wouldn't have this much of an impact on the site not loading correctly. Posting your code generally helps us out a ton! At the very least, would you mind posting your stylesheet links, so that we could help you get those right?
currently, I'm facing the same problem. here the quick solution, use Microsoft Visual Studio code editor and install a plugin called "Live Server".
what I'm facing is if I open Html file using "live server" it is working, if I directly opening in the browser it is not loading the CSS properly.
Related
If we are using vscode in the browser to edit an html file or project, is there a way to view the page?
I think I know what you mean.
On my chromebook I use vscode.dev in one browser tab, and then just drag and drop the .html file in to an empty browser tab and it can run Vanilla JS, CSS3, and HTML without anything else.
Refresh after each save, or install a live server. You could also have VScode running node, or whatever, in the background and just edit in vscode.dev, but that seems a bit excessive.
(Before I was using Crostini to run VScode on my chromebook and it would sometimes become very slow, buggy, or keep flickering (gpu style), and I'd have to restart/kill crostini to fix it, so finding vscode.dev has really helped when I can't find time to get to my workstation.)
CodeSwing is an extension that works in vscode.dev that does this.
Description: Interactive coding playground for building web applications (aka swings).
Id: codespaces-contrib.codeswing
VS Marketplace Link:
https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing
So I want to start using dc.js package to create a few dashboards, and I've found this tutorial:
https://github.com/austinlyons/dcjs-leaflet-untappd
I've downloaded the entire folder and attempted to open the html to see whether it works, but I only get some parts of the page (no data, no graphs, you can see the expected and gotten image attached). I've had the same problem with some other tutorials that I've found, and can't figure out why. I can open the page in the browser when it is a link like:
https://austinlyons.github.io/dcjs-leaflet-untappd/
Any ideas? I am using Chrome btw, but it doesn't work in IE either.
You need to run python -m SimpleHTTPServer in your terminal.
Try it yourself
If you want to play with the code as we go, I recommend downloading
the source code from this GitHub repository, navigating to the
directory where the files are located, and kicking off Python's
SimpleHTTP server so that you can see your visualization in your own
browser at http://localhost:8000 (If this is new for you, see this
link for a bit more information).
If anyone is interested there is a very nice workaround for those not willing to play around with a server. For some reason Firefox allows the opening of such pages, so one can test D3 and similar code in it without having to run a server.
I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.
The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo
Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...
Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.
Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.
Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.
What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.
Is there some way to get chrome to launch my text editor when I click on a stack trace link pointing to a file:// url?
If you have relatively many files, you could try the Eclipse-based project:
http://code.google.com/p/chromedevtools/
If you manage to set up source lookup, you will have debugger stepping over your working files and live editing.
Together with JSDT or Aptana installed this may be quite usable.
However you will get only JS debugger, DOM tree is not supported.
At the moment the only way to achieve this is to modify DevTools front-end code(it's HTML+JavaScript so it shouldn't be too hard) to customize link clicks handling. There is a WebKit feature request for this functionality: https://bugs.webkit.org/show_bug.cgi?id=51526
I need to debug jasvascript loaded by page. Loaded page are not locally placed.
Loaded js is packed. I want to substitute it with unpacked version.
Is there any tricks or browser options to make it?
It looks like Fiddler's AutoResponder tab will do this for you.
You say you want to replace the JS with the "unpacked" version--if you just want to insert line breaks so you can step through in a debugger, the Venkman debugger has a "Pretty Print" button which does that.
It sounds like you are asking for after the application is already deployed somewhere so this might not be as helpful.
If your application already goes through a regular build script or process for debug or at least for release then you could do it there. You could leave the Javascript files as the un-minified/optimized scripts and when building for debug it just copies them over, but for release it runs them through your minifier/optimizer first before copying them over.
I know that jQuery uses a Google Compiler to package the framework up, but there are other tools that just minify the code. Also it gives you a chance to run any kind of quality checking tools (such as JSLint) on your Javascript when you already have it as part of your build process.
Other then that the AutoResponder idea from above sounds promising.
You could use Charles Web Debugging Proxy to map the requested JS file to a local unpacked JS file (or any other location). It costs money, but you can use the trial for 30 minute periods.
Firebug is a really good Firefox extension that lets you manipulate the DOM and you can see the changes as they happen. This will let you insert <script> tags to the page.
Just Edit the <head> piece of html through Firebug and insert the <script src="http://site.com/unpacked.js"></script> somewhere in the page.