I'm using "HTML Validator" for google chrome, but sometimes it doesn't work, I want to know what is the best choice as a plugin to validate my local development site, the website is not available on the internet, and thus I need to validate the local html rendered by the browser...
UPDATE:
I've tried Kingsquare HTML validator as suggested by #vacation9 but I'm getting:
UTF-8 decoding error of 1 bytes : 0xb4 = U+0180lx
line 113 column 297 - Warning: replacing invalid UTF-8 bytes (char. code U+00B4)
seems to be not working ok with my version of chrome(25.0.1364.97) running in ubuntu
Thanks.
Kingsquare HTML validator is probably your best bet. Install it, reload Chrome, and then inspect element and go to HTML validator. This works offline and doesn't need W3C servers. It's a bit finicky however.
HTML Validator works for local pages too... just use Cmd+Shift+A (on Mac).
Here are the shortcuts from the plugin homepage:
Windows/Linux:
Press Ctrl + Shift + V to validate a page
Press Ctrl + Shift + A to validate a local page
Mac:
Press Cmd + Shift + V to validate a page
Press Cmd + Shift + A to validate a local page
Related
We are working on migrating an older ASP.Net application to the cloud and for that we did several things also updated the application to use a newer .net framework.
Now we face a strange problem, in the application a link is created from data in the database. The html:
<asp:HyperLink ID="linkProjectFolder" CssClass="imageLink" runat="server" ToolTip="Open de folder in de Windows Explorer">
<asp:Image ID="Image1" runat="server" ImageUrl="~/pages/img/openHS.png" />
</asp:HyperLink>
The code behind:
string url = string.Concat(((TextBox)viewINFO.FindControl("txtProjectmapBasePath")).Text, ((TextBox)viewINFO.FindControl("txtProjectmapPath")).Text);
HyperLink hl = (HyperLink)viewINFO.FindControl("linkProjectFolder");
if (hl != null)
{
hl.NavigateUrl = Uri.EscapeUriString(#"file:///" + url);
}
Nothing special and this code has not changed between the old version and the new version. I know that this code does not work in firefox and chrome, but the old version does work in IE11.
Now from the enduser the old version in IE just works, if you click the link a windows explorer window is opened to the file path. For the same end user, from the same workstation with the same browser the new version does not work. When you click the link nothing happens.
Now the strange part, on my development machine, I simulate a network drive by mapping a folder to a drive letter (susbst N: c:\temp\Ndrive) when I try the link I see the same behavior as the end user, just nothing happens. Now if I unmap the drive, start the application and click the link, the link opens in the browser and I get a "page cannot be displayed". If I remap the drive at that moment, go back in the browser and retry the link it works.....
There are of course differences, the .net framework, IIS vs IISExpress vs IIS on azure, but as it is just a simple href I would say it must be client side. Also that the code sometimes works suggests that the urlencoding at least is correct (it does exactly the same as in the old version for the tested url's)
In the database the links are a path to a mapped drive so something like "N:\folder\folder 2\folder & folder\", that is correctly urlencoded and that only works half the time as described above. If I use a link to my C drive "C:\Temp" it never works, if I use "127.0.0.1/C$/Temp/" as link it always works but changing all the links in the database to use an IP address is not really the way we want to go.
After eliminating all the things above I have no clue on what could cause this behavior. Can anybody point me in the right direction ?
Consider revising the asp:HyperLink tag with a nested asp:Image tag with one of these two (2) options:
1) Use an asp:HyperLink tag with ImageUrl property and remove the nested image tag. See this Microsoft Hyperlink.ImageUrl Property page for more information.
2) Use an asp:ImageButton tag with the ImageUrl property. See this SO question titled: how to link imagebutton to url visual developer for more information.
If none of these options resolves your problem, then you may have a file resource access issue rather than an ASP.NET syntax issue.
I have a basic Angular webapp running on ec2 ubuntu 16.04, using routing($routeProvider). When I open the application home page say example.com, instead of opening http://example.com/#/ it opens http://example.com/#!/ there is an extra ! which is messing up the whole url/routing structure. Not sure what I am doing wrong, Please advice.
Angular version 1.6 adds a "!" to $location.. check the angular page below...
https://docs.angularjs.org/guide/migration#commit-aa077e8
$location:
Due to aa077e8, the default hash-prefix used for $location hash-bang
URLs has changed from the empty string ('') to the bang ('!'). If your
application does not use HTML5 mode or is being run on browsers that
do not support HTML5 mode, and you have not specified your own
hash-prefix then client side URLs will now contain a ! prefix. For
example, rather than mydomain.com/#/a/b/c the URL will become
mydomain.com/#!/a/b/c.
If you actually want to have no hash-prefix, then you can restore the
previous behavior by adding a configuration block to you application:
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
I'm using the medium blogging system and I need to insert some code (cli commands, scripts in JS, ...)
I'm using the Keyboard shortcuts but when I press Ctr + Alt + 6 the selected code dissapears.
Is there any other way to insert any code (single or multiline) or some code snippets in our medium publishing process?
For embedding scripts/snippets in JS in my Medium blog, I use gist. After you create the gist, select “clone via HTTPS” and get the .git link (e.g https://gist.github.com/ab056e7d7d521b5e90b6747bbfd8bac4.git).
Then in Medium blog page, just paste that .git URL from Gist and press Enter. Wait a second or so and the code will appear, perfectly formatted.
As mentioned by #Rohan Paul you can use gist for adding code snippets and the Steps for Adding Gist is as follows:
Step 1:Click on the + button on the left side and select Add Embed
Step 2:Simply copy the link of the gist from the browser
Step 3:Paste the link inside the Add Embed
Cheers its done
Both answers are given above direct us to embed gist but the question itself said he needs to add some CLI commands. So there is no point of using gist for just for simple CLI command. I also came across this issue with my Windows PC ctrl + alt + 6 short key is not worked as expected. This might happen because of some cashing problem in the browser. but refresh the page also doesn't work. So just open a new incognito window and try the same short key ctrl + alt + 6 and it worked for me.
Note:
Short key for windows: ctrl + alt + 6
Short key for Mac: command + option + 6
Is it possible to have a print option that bypasses the print dialog?
I am working on a closed system and would like to be able to pre-define the print dialog settings; and process the print as soon as I click the button.
From what I am reading, the way to do this varies for each browser. For example, IE would use ActiveX. Chrome / Firefox would require extensions. Based on this, it appears I'll have to write an application in C++ that can handle parameters passed by the browser to auto print with proper formatting (for labels). Then i'll have to rewrite it as an extension for Chrome / Firefox. End result being that users on our closed system will have to download / install these features depending on which browser they use.
I'm hoping there is another way to go about this, but this task most likely violates browser security issues.
I ended up implementing a custom application that works very similar to the Nexus Mod Manager. I wrote a C# application that registers a custom Application URI Scheme. Here's how it works:
User clicks "Print" on the website.
Website links user to "CustomURL://Print/{ID}
Application is launched by windows via the custom uri scheme.
Application communicates with the pre-configured server to confirm the print request and in my case get the actual print command.
The application then uses the C# RawPrinterHelper class to send commands directly to the printer.
This approach required an initial download from the user, and a single security prompt from windows when launching the application the first time. I also implemented some Javascript magic to make it detect whether the print job was handled or not. If it wasn't it asks them to download the application.
I know this is a late reply, but here's a solution I'm using. I have only used this with IE, and have not tested it with any other browser.
This Sub Print blow effectively replaces the default print function.
<script language='VBScript'>
Sub Print()
OLECMDID_PRINT = 6
OLECMDEXECOPT_DONTPROMPTUSER = 2
OLECMDEXECOPT_PROMPTUSER = 1
call WB.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER,1)
End Sub
document.write "<object ID='WB' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>"
</script>
Then use Javascript's window.print(); ties to a hyperlink or a button to execute the print command.
If you want to automatically print when the page loads, then put the code below near tag.
<script type="text/javascript">
window.onload=function(){self.print();}
</script>
I am writing this answer for firefox browser.
Open File > Page Setup
Make all the headers and footers blank
Set the margins to 0 (zero)
In the address bar of Firefox, type about:config
Search for print.always_print_silent and double click it
Change it from false to true
This lets you skip the Print pop up box that comes up, as well as skipping the step where you have to click OK, automatically printing the right sized slip.
If print.always_print_silent does not come up
Right click on a blank area of the preference window
Select new > Boolean
Enter "print.always_print_silent" as the name (without quotes)
Click OK
Select true for the value
You may also want to check what is listed for print.print_printer
You may have to choose Generic/Text Only (or whatever your receipt printer might be named)
The general answer is: NO you cannot do this in the general case but there some cases where you might do it.
Check
http://justtalkaboutweb.com/2008/05/09/javascript-print-bypass-printer-dialog-in-ie-and-firefox/
If you where allowed to do such a thing anyway, it would be a security issue since a malware script could silently sent printing jobs to visitor's printer.
I found a awesome plugin by Firefox which solve this issue. try seamless printing plugin of firefox which will print something from a web application without showing a print dialog.
Open Firefox
Search addon name seamless printing and install it
After successful installation the printing window will get bypassed when user wants to print anything.
I was able to solve the problem with this library: html2pdf.js (https://github.com/eKoopmans/html2pdf.js)
Considering that you have access to it, you could do something like that (taken from the github repository):
var element = document.getElementById('element-to-print');
html2pdf(element);
Does anyone know of an extension for Firefox, or a script or some other mechanism, that can monitor one or more local files. Firefox would auto-refresh or otherwise update its canvas when it detected a change (of timestamp) in the files(s).
For editing CSS, it would be ideal if just the CSS could be reloaded, rather than a full HTML re-render.
Effectively it would enable similar behaviour to Firebug with its dynamic HTML/CSS editing, only through external files.
Live.js
From the website:
How?
Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page. Try it!
Where?
Live.js works in Firefox, Chrome, Safari, Opera and IE6+ until proven otherwise. Live.js is independent of the development framework or language you use, whether it be Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla or what-have-you.
It has the huge benefit of working with IETester, dynamically refreshing each open IE tab.
Try it out by adding the following to your <head>
<script type="text/javascript" src="http://livejs.com/live.js"></script>
Have a look at FileWatcher extension:
https://addons.mozilla.org/en-US/firefox/addon/filewatcher/
it's a WebExtension, so it works with the latest Firefox
it has a native app (to be installed locally) that monitors watched files for changes using native OS calls (no polling!) and notifies the WebExtension to let it reload the web page
reload is driven by rules: a rule contains the page URL (with regular expression support) and its included/excluded local source files
open source: https://github.com/coolsoft-ita/filewatcher
DISCLAIMER: I'm the author of the extension ;)
I would recommend livejs
But it has following Advantages and Disadvantages
Advantages:
1. Easy setup
2. Works seamlessly on different browsers (Live.js works in Firefox, Chrome, Safari, Opera and IE6+)
3. Don't add irritating interval for refreshing browser specially when you want to debug along with designing
4. Only refreshing when you save change ctrl + S
5. Directly saves CSS etc from firebug I have not used that feature but read on their site http://livejs.com/ that they support it too!!!
Disadvantages:
1. It will not work on file protocol file:///C:/Users/Admin/Desktop/livejs/live.html
2. You need to have server to run it like http://localhost
3. You have to remove it while deploying on staging/production
4. Doesn't serves CDN I have tried cheating & applying direct link http://livejs.com/live.js but it will not work you have to download and keep on local to work.
Xrefresh with firebug.
Firefox has an extension called mozRepl.
Emacs can plug into this, with moz-reload-on-save-mode.
when it's set up, saving the file forces a refresh of the browser window.
There are some IDE's that contain this ability (They'll have a pane within them or some other means to auto-refresh a page on save).
If you want to do this yourself a quick hack is to set the meta refresh on the page to a low value - one or two seconds.
# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />
You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.
jQuery Example:
var modTime = 0;
setInterval(function(){
$.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
if (rst.time != modTime) {
modTime = rst.time;
// reload style tag
$("head link[rel='stylesheet']:eq(0)").remove();
$("head").prepend($(document.createElement("link")).attr({
"rel":"stylesheet",
"href":"http://sstatic.net/mso/all.css?v=4372"
})
);
}
});
}, 5000);
Browsersync can do this from the server side / outside of the browser.
This can achieve more repeatable results / things that don't require so much clicking.
This will serve a page and refresh on change
cd static_content
browser-sync start --server --files .
It also allows a scripting mode.
This is certainly hacky, but if you want to work locally without making any external request (to live.js, for example), or run any local server, I think this might be useful. This is not specific to web development, you can adopt similar strategy to any other workflow.
You will need two tiny tools (which are present in almost all distribution repos): inotify-tools and xdotool.
First get the ID of your Firefox and your editor window using xdotool.
$ xdotool search --name "Mozilla Firefox"
60817411
60817836
$ xdotool search --name "Pluma" # Pluma is my editor
94371842
Depending on the number of processes running, you will get one or more window ID. Use xdotool windowactivate <ID> to know which one you want (the focus changes to the respective window).
Use inotifywait -e close_write to monitor changes to your local file and when you save the file using your editor, change focus to your browser, reload xdotool key CTRL+R and focus back to your editor. This is so instantaneous you will not notice nothing.
Also, inotifywait exits on change, so you might have to do it in a loop. Here is a minimum working example (in Bash in your working directory).
while /usr/bin/true
do
inotifywait -e close_write index.html;
xdotool windowactivate 60917411; # Switch to Firefox
xdotool key CTRL+R; # Reload Firefox
xdotool windowactivate 94371842 # Switch back to Pluma
done
You can use inotifywait to watch for the entire directory or some selected files in your directory.
You can write a script that can automate is easily.
This works on Linux (I've tested this on Void Linux.)
You can use live.js with a tampermonkey script to avoid having to include https://livejs.com/live.js in your HTML file.
// ==UserScript==
// #name Auto reload
// #author weirane
// #version 0.1
// #match http://127.0.0.1/*
// #grant none
// ==/UserScript==
(function() {
'use strict';
if (Number(window.location.port) === 8000) {
const script = document.createElement('script');
script.src = 'https://livejs.com/live.js';
document.body.appendChild(script);
}
})();
With this tampermonkey script, the live.js script will be automatically inserted to pages whose address matches http://127.0.0.1:8000/*. You can change the port according to your need.
I think that you can solve it by using some ajax requests after a determinate interval. You can do a request to CSS files and then if you don't get the "not modified" header you delete your css and load it again. For dynamic files you do a request and store the response and then every time you make a request to that file you compare the response to the latest.