Best site for online file (XML, JSON, HTML, SQL) formatting

Screen Shot 2014-04-21 at 9.57.15 AM

Do you ever need to format some encrypted, auto-generated XML, HTML, or JSON? Well, I do this a lot to debug compressed JSON, HTML, and XML files and I found this great site that not only does formatting for some basic file types but also does a heck of a lot more. Some great things FreeFormatter.com does:

  • Formats files with different indents
  • Validators
  • Encoders/Decoders
  • Minifiers
  • Converters
  • Cryptography
  • String escapers

Check it out and let me know what you think!

http://www.freeformatter.com/

 

Getting and setting check boxes with jQuery

Getting and setting check boxes in jQuery is a lot easier than setting radio buttons and we can thank the “prop” function for that.

Here is the HTML, notice each check box has its own Id, that is the key so the jQuery selector can get at the “checked” property:

Screen Shot 2013-11-25 at 10.46.49 PM

Getting the value is a single line call and it can be stored in a boolean:

pillar_buy = $('#screen_pillar_buy').prop( "checked");

Setting is just as easy:

$('#screen_pillar_buy').prop( "checked", pillar_buy );

Debug JavaScript and HTML in a UIWebView on an iOS Device

Screen Shot 2013-10-10 at 12.33.29 PMI got my first Mac over the summer and have been playing around writing applications for iPhone and iPad. Being very new to the Mac I am constantly using Google to find tips, tricks, and “how to” articles. And of course when I find something very cool and easy to do I like to share it. This is my first quick tip for developing embedded HTML applications in an iOS device. Without a debugger you are dead in the water!

I am interested to hear if this the best way to debug such applications, any feedback is welcome.

Online and FREE Image map tool for HTML

I was poking around the internet and thanks to Google I found very quickly this Image Map Tool site that lets you create image maps for your graphics. I quickly created a simple graphic, uploaded it to the tool and create maps for different tag categories on my site. I then copied and pasted the HTML into my blog post and viola, works like a charm!

Feel free to check it out and donate if you like it!

Online Image Mapper
Online Image Mapp Tool


Lord of the JavaScript frameworks, one framework to rule them all…

(in a slow deep voice) In a time of web 2.0, css3, and JavaScript, the average programmer is challenged to learn many technologies and patterns. The tide has turned and the world is changing, the inevitable is near. Websites across Middle Earth suffer from cross browser and web 2.0 compatibility. Somewhere, in the dark shadows of the web, a JavaScript framework was born. One framework to rule them all….Dojo. It wants to be found…

Ok, now back to reality.  And yes, I watched the extended version of Lord Of the Rings tonight.

So, I thought it fitting to give a Lotusphere update on the plugin development sessions I mentioned earlier. One of the projects I will be referencing is the Attachment Viewer project on OpenNTF. This is a slightly different kind of plugin, in that the content is embedded HTML, JavaScript, and CSS. The viewer actually uses the embedded web container from Lotus Expeditor – which is included in Lotus Notes 8.0 and above.

I have just finished the “Ultimate Attachment Viewer” implementation for OpenNTF. Since the default browser on Windows in Lotus Notes uses Internet Explorer I had to rely on Dojo in many areas for the different views. I will be posting the updated viewer on OpenNTF within the next week or so, so stay tuned. The primary additions are the new Dojo toolbar and the three view modes: Film Strip, Slide Show and Thumbnails.

Click on picture to see full

Attachment Viewer on Steroids

Ok, maybe not steroids but Dojo and CSS!

Lots of work on the attachment viewer.  Using Dojo, CSS and JavaScript I was able to give the viewer two new view modes with some eye candy in each.  I use CSS to have shadows and a tile mode.  Check out the three screen shots below, I will most likely be posting a video to show how the new views can be used.  Just remember, this is a 100% web based component in the Notes client.  You will notice I have three actions on the attachments – Open, View, and Share – which use the BrowserFunction to provide a custom experience in the rich client – otherwise it just uses the normal web semantics for launching.

I used Dojo for the slide show view.  I use the dijit.layout.StackContainer and then each attachment is placed into a dijit.layout.ContentPane.

For the thumbnail view I use basic CSS to accomplish this.  The two classes, border and thumb, give the experience of them being “thumbnails” and as the mouse moves over the div block it “selects” it with a new background color using the hover tag.

div.border {
    border: 1px solid #A0ACC0;
    height: auto;
    float: left;
    overflow:hidden;
}
div.thumb:hover {
   background-color: #ADD8E6;
   border: 1px solid #FFACC0;
}

Here are some screen shots of the three support view modes:

Film Strip

Slide Show

Thumbnails

All web developers, please use “email”, “number”, and “url” types for input!

I can’t tell you how nice the custom keyboard on the iPhone is for sites that are using type=”number”, type=”email” and type=”url” on their forms.  You can check out this article I found that explains all of the different keyboards the iPhone supports.  I also found another good article that hits on a few more nice to knows in the mobile web space.