Launch HTML code in browser from Python

Lets say you have generated some html content for a web page dynamically and have it in memory variable in python.

In order to view and test this content, you would need a Python program that prints out the HTML code, which then would have to be copied and pasted to a HTML file, then from there, you can test it in a browser.

In Python, there is a way to launch such HTML code in a web browser so that you don’t have to go through the copy and paste method every time

Using webbrowser.open:

Source

Configuring maximum number of simultaneous open WebSockets (for IE)

Given I’ve got this JS application. All client side JS communicating using web sockets. One page may have multiple web sockets open as many as 10-15.

Firefox and Chrome handle this many open web sockets at once just fine. IE11 seemed to have a limitation of 6 open web sockets at once.

Once I open that 7th web socket, regardless of socket call to the third-party server, I got an error thrown by IE, which closes the socket and gives the general error “SecurityError” and expanding the __proto__ section it gives me . The error seems to be pretty generic.

At first it looks as if there may be a trusted zone type issue with IE, but even after adding the client site to trusted zone as well as the server providing the data, the error still persisted.

Solution

This site shows the max connections settings for IE. It’s a registry setting in Windows that controls the amount of web socket connections.

Interestingly enough, By default, windows doesn’t have that registry key, but there is still a limit. Therefore you have to add the Registry in order for this to work.

The MSDN Section mentions:


WebSocket Maximum Server Connections

Internet Explorer 10. When enabled, the FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER feature sets the maximum number of concurrent WebSocket connections allowed to a single host. The minimum number that can be specified is 2 and the maximum value allowed is 128.

The default value for this setting is 6 in Internet Explorer and applications hosting the WebBrowser Control. To modify this feature by using the registry, add the name of your executable file to the following setting.

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      Microsoft
         Internet Explorer
            Main
               FeatureControl
                  FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER
                     contoso.exe = (DWORD) 0x00000006 (6)

This should fix the problem.

Source

MSDN

jSoup: Java HTML Parser

jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods.

jsoup implements the WHATWG HTML5 specification, and parses HTML to the same DOM as modern browsers do.

  • scrape and parse HTML from a URL, file, or string
  • find and extract data, using DOM traversal or CSS selectors
  • manipulate the HTML elements, attributes, and text
  • clean user-submitted content against a safe white-list, to prevent XSS attacks
  • output tidy HTML

jsoup is designed to deal with all varieties of HTML found in the wild; from pristine and validating, to invalid tag-soup; jsoup will create a sensible parse tree.

Example

Fetch the Wikipedia homepage, parse it to a DOM, and select the headlines from theIn the news section into a list of Elements (online sample):

Document doc = Jsoup.connect("http://en.wikipedia.org/").get();
Elements newsHeadlines = doc.select("#mp-itn b a");

Open source

jsoup is an open source project distributed under the liberal MIT license. The source code is available at GitHub.

Getting started

  1. Download the jsoup jar (version 1.8.3)
  2. Read the cookbook introduction
  3. Enjoy!

Resources

What is the difference between target=_new and target=_blank in HTML Code?

According to the HTML5 WIP Spec:

A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.)

A valid browsing context name or keyword is any string that is either a valid browsing context name or that is an ASCII case-insensitive match for one of: _blank, _self, _parent, or _top.” –Source

That means that there is no such keyword as _new in HTML5, and not in HTML4 (and consequently XHTML) either.

That means, that there will be no consistent behavior whatsoever if you use this as a value for the target attribute.

Source

Color Thief

A script for grabbing the color palette from an image.
Uses JavaScript and the canvas tag to make it happen.

How to use

Get the dominant color from an image

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);
getColor(sourceImage[, quality])
returns {r: num, g: num, b: num}

Build a color palette from an image

In this example, we build an 8 color palette.

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])
returns [ [num, num, num], [num, num, num], ... ]

Demo More from Original Author

Make content of a webpage as editable

Just for pranking friends to make them believe that you are some sort of a hacker…

Try this:

 

This is not much, but just enough to have fun…:D

The changes would not be affecting the page itself. When you reload the page, you will again get back the original

How to create multi-level menu’s using HTML and CSS

Create a style.css as follows

body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}

a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
/*background: #7d7d7d repeat-x 0 -110px;*/
background:#7d7d7d;
line-height: 100%;

border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}


/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;

-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #666;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #000 ;
color: #fff;
border-top: normal 0px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 0px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;

-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0078ff repeat-x 0 -100px !important;
color: #fff !important;

-webkit-border-radius: 0;
-moz-border-radius: 0;

text-shadow: 0 0px 0px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
display: block;
}

/* level 2 list */
#nav ul {
display: none;

margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd repeat-x 0 0;
border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}

#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}

* html #nav {
height: 1%;
}

Create body of your HTML as follows

And the output will look like:

body { font: normal .8em/1.5em Arial, Helvetica, sans-serif; background: #ebebeb; width: 900px; margin: 100px auto; color: #666; } a { color: #333; } #nav { margin: 0; padding: 7px 6px 0; /background: #7d7d7d repeat-x 0 -110px;/ background:#7d7d7d; line-height: 100%; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); } #nav li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } /* main level link / #nav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #666; } / main level link hover / #nav .current a, #nav li:hover > a { background: #000 ; color: #fff; border-top: normal 0px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 0px 0 rgba(255,255,255, 1); } / sub levels link hover / #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav ul a:hover { background: #0078ff repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 0px 0px rgba(0,0,0, .1); } / dropdown / #nav li:hover > ul { display: block; } / level 2 list / #nav ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0; background: #ddd repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #nav ul li { float: none; margin: 0; padding: 0; } #nav ul a { font-weight: normal; text-shadow: 0 1px 0 #fff; } / level 3+ list / #nav ul ul { left: 181px; top: -3px; } / rounded corners of first and last link / #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } / clearfix */ #nav:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #nav { display: inline-block; } html[xmlns] #nav { display: block; } * html #nav { height: 1%; }

How to make a dropdown as readonly in html

I encountered a problem where in it was required to make a drop down readonly.

While searching over internet i found THIS
But the solution mentioned there, didn’t appeal me much. As i had to make server side code changes while saving the value using the hidden field.

How do we do this? The common thought is to disable the drop down menu. Well, yes, but there’s a choice

When you use disabled, it prevents the user from using the drop down, or form element. You can see the year, but it is grayed out. Your mouse can’t select or change it, and you can’t tab to it with the keyboard. Disabled is used a lot with checkboxes. Sounds like just what we want, but you unknowingly might have caused yourself a small development problem.

The problem is “disabled” does just that. Disabled means that in your $_POST or $_GET that element will not show up in your controller. If you want to use the year in your controller, you won’t be able to recover it from that form. All you can do it look at the value on the web page.

What if we want to read the year, prevent the user from changing the year, and recover the year in the form data sent back to the controller. The solution for this is

Make a replica of your dropdown with a different name and different id.

Hide your original drop down with
This makes the element available in the form, so it will flow to the server side as well.
At the same time, it will give a look and feel of disabled to the user.

Example :



            
                  
            




            
      

Formatting your HTML Document using Notepad++ !!

Formatting your HTML Document !!

I always wished I had a tool that could format my ugly looking HTML document. The feature is provided by Notepad++

The version of Notepad++ that has this feature

How to format HTML using Notepad++

What’s the difference between display: none and visibility: hidden?

Question: What’s the difference between display: none and visibility: hidden?
The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren’t.

Answer:
These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.

Source: http://webdesign.about.com/od/css/f/blfaqhidden.htm