Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Remote Firebug-like web content debugging for your mobile device

at 8:03 PM

Debugging browser quirks on your mobile device is a pain in the ass. There's no such Firebug or developer console or anything nice like their desktop counterparts.

The ability to quickly modify CSS on the fly easily saves hours of work. If only we had something like that for mobile web dev...

f8Uf8FH
One could go mad debugging mobile CSS quirks...

One option is to use Firebug Lite, but to be honest, screen space is valuable and I personally would not be stuffed typing in names of CSS style properties on an on-screen keyboard.

In comes weinre to the rescue. This unfortunately named tool stands for WEb INspector REmote and is supposed to be pronounced "winery", but I always end up calling it "weener".

This gives you remote access to the content in the browser, via a another browser. It's as close as we'll get to a remote web Firebug for now.

Installation

I'm sorry to say but we'll need NodeJS for this. At time of writing I installed v0.10.18.

  • Download and install NodeJS.
  • Now open up the normal Windows Command Prompt (not the NodeJS one)
  • Type in:

npm -g install weinre

  • This installs weinre (v2.0.0-pre-HH0SN197 at time of writing)

Setup and debugging

  • Once it's all done, type:

weinre --bound -all-

  • Ensure that there are no firewall rules blocking this service (node.exe, allow inbound on port 8080 - such as uTorrent)
  • Edit your HTML and add this script into the <head> tag

<script src="http://YourWeinreIP:8080/target/target-script-min.js"></script>

  • Open up a desktop browser page to http://YourWeinreIP:8080/client
  • Load your test page on the mobile device and it should appear in the client list under "Targets"

image

  • Click on the link for the target so it turns green
  • Click "Elements" in the top menu
  • You should now see a familiar Chrome/Firebug style element tree and a CSS panel on the right.
  • The rest (resources, network, timeline, console) should be fairly straight forward.
  • Enjoy =)

Sources

Tags: , , ,

Python & HTML Tidy: Checking and displaying HTML errors

at 8:52 AM

The system I was building allowed for entry of HTML entities, but was used by many non-HTML familiar users.

To prevent broken HTML from entering the database and potentially breaking the site layout upon display, I needed a way of indicating that the markup was broken whilst informative enough to point to where the error is.

Luckily, the HTML Tidy library for Python does just that! Depending on your operating system, you can get it via pip or easy_install with "pytidylib".

Once you're set up, doing the actual check is easy.

from tidylib import tidy_fragment
import re

# Check for missing close tags (bold, italics, links, etc)
document, errors = tidy_fragment(data)
reobj = re.compile(r"(line \d+ column \d+ - Warning: missing </\w+>)")

missing_tags = []

for match in reobj.finditer(errors):
missing_tags.append(match.group())

print missing_tags

Done and dusted!

bCcrQ
Time for a long awaited feel-good "cat pushing another cat off a shelf GIF"!

Sources

Tags: ,

HTML: How to prefill mailto subject and content

at 3:36 PM

Using "mailto" might be a bit of a no-no for some people, especially with all those spammers making millions from crawling the net for email addresses.

moneybath

However, if you still want to use this feature, you may want to prefill some data in the email client. To do that, format your "href" with some optional arguments:

<a href="mailto:address@domain.com?subject=title&amp;body=something">Mail Me</a>

It would be a good idea to urlencode() the subject and body fields.

You can also prefill CC and BCC fields. See source for more information.

[ Source ]

Tags:
Subscribe to: Comments (Atom)
 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog