October 9

Developing Responsive Web Applications with AJAX and jQuery Review

book cover

Book available for puchase at PacktPub.com

You can develop web applications in so many ways and this book teaches you how with the most popular front-end library, jQuery and AJAX. Initially I was excited to find out if it’s possible to build a responsive web application only with jQuery and Ajax, but you still need a back-end. In this case, the author uses Tomcat to run a java server as the back-end. You might be surprised that all the source code files are in the txt extension along with one war file. Then I realized uncompressing the war file will output all the proper files to open the website without some java-based IDE. A non-java developer might not be able to figure that out right away, so the book is definitely targeted for java developers who want to learn the front-end.

Even though it’s possible to open the source code locally into a browser, it won’t be fully functional without running Tomcat. As a front-end developer I have read through all the examples and they are coded well, including comments, to demonstrate getting data from 3rd party APIs such as Twitter, Facebook, Google, YouTube, and Paypal. After having read through the book, it appears that more of the examples demonstrate usage of APIs rather than responsiveness. The early chapters do include details on responsive-making elements such as media queries, layouts, and the opera testing emulator, yet the author just uses Twitter Bootstrap for his app. I liked that the book includes good resources such as Draw.io and a few important CSS properties not seen in other books such as the text-overflow: ellipsis. Continue reading

Category: Code, Design, Review | Comments Off on Developing Responsive Web Applications with AJAX and jQuery Review
July 3

1 Hour Crash Course in AngularJS

Have you thought about learning AngularJS, but find all the examples just too basic?

I did too!  I spent an entire week (full-time) during my vacation to break open AngularJS and see what’s possible.   What I came up with as a demo is a quiz where you can type in questions and answers, then play the questions one at a time to test yourself.  Here’s the curated content to spend 7 days learning AngularJS.

Continue reading

Category: Code, Design | LEAVE A COMMENT
January 10

Responsive Web Design with jQuery Review

responsive-deign-jquery-cover

If you’re looking for a plethora of plugins, scripts, shims to add responsiveness this book is for you, but be prepared to figure out the differences yourself.  The book is written more like a reference book with short examples and brief explanation of many jQuery plugins.

I read the title several times after reading the content and can say that it is not the best fit.  My initial thinking led me to believe this would be more about coding with jQuery, however this is not the case.  The book is geared more for web designers that do not code with jQuery.  Most of the examples include jQuery with little explanation so you can get similar information available in the documentation of the individual plugins.  Possibly the worst part is that the author rarely distinguishes pros and cons of individual plugins doing nearly identical tasks.  There’s a lack of diagrams and screenshots so you have to implement the examples to see how they work.  On the other hand the author also lists many tools available via websites for wire-framing, placeholder creation, pixel conversions, and grid systems.

I would recommend this book for web designers that know html, css, jquery syntax and want to make their static designs responsive, elastic, or fluid with high browser compatibility.  Without knowledge of jQuery basics it’s difficult to customize the plugins made for responsive design.  Near the end of the book there is mention of performance and ideally you want the minimum amount of http GETS to load your scripts.  However with all the plugins available your design will easily accumulate 7+ js files.

You won’t become an expert in “responsive design” nor will you know how the plugins really work behind the scenes, but it’s a good place to start.

Continue reading

July 11

Flare jQuery Plugin

Optical flare plugin

Description

This is a plugin for jQuery I developed, which renders a colored optical flare to slide across elements such as boxes, images, and containers. The flare is white in the center and has a customizable colored glow. The plugin also allows change of speed, glow radius, and event triggering the animation. The animation is performed by sliding across an element’s top-left corner to the top-right corner.  It is the first of it’s kind on the web!

Features

  • Cool movie-style effect also used in games such as Sleeping Dogs.
  • Works in Chrome, Firefox, and Safari, and IE 10 including mobile.
  • Uses modern CSS techniques.
  • Customizable glow color, speed, glow radius, and trigger event.
  • First Optical flare effect without use of images.

Demo

Continue reading

April 13

Make your website cross-browser compatible

cross browser compatibility

Forget about CSS hacks as they should only be temporary solutions and will eventually break upon browser updates.  You want robust CSS with minimal amount of HTTP calls for the best performance.  So here’s the code using conditional comments adding a class to theelement:

[code]<!–[if LTE 7 ]><html class="ie7"><[endif]–>
<!–[if IE 8 ]><html class="ie8"><![endif]–>
<!–[if IE 9 ]><html class="ie9"><![endif]–>
<!–[if gt IE 9 ]><!–><html><!–>![endif]–&gt;[/code]

The first line gives the body a class of “ie7” if the browser is Internet Explorer 7 or less, followed by lines detecting versions 8, 9, and greater than 9.   Now you can change the styles with CSS code as such:

 

[code]
#header { background-color: yellow; //default rule }
.ie7 #header { background-color: orange //rule for IE7 }
.ie8 #header { background-color: red //rule for IE8 }
.ie9 #header { background-color: blue //rule for IE9 }
[/code]

 
I didn’t discover this method so the credit goes to Paul Irish.

Limiting the number of stylesheets you are will improve the performance for a high-traffic website. So keep your media queries for alternative resolutions in the same file.

 

[code]
@media screen and (max-width: 320px) {
.iphones { width: 320px }
}
[/code]

Using a media query inside a link tag will actually load the css file and the images in it, even if the display is set to none,; except for Firefox and Opera.

[code]&lt;link href="iphone.css" rel="stylesheet" media="screen and (max-width: 320px)" />;
[/code]

For browser vendor specific CSS you can speed up your coding time with the web app PREFIXR.  It reads CSS3 styles and automatically applies your rule to work for the main other browsers.

  • -mos- for Mozilla
  • -webkit- for Apple browser Safari
  • -ms- for Microsoft
  • -o- for Opera
March 14

Overlay scrolling issues on iPhone iPad

scrolling-steve-jobs

Fixed position prevents iOS devices from scrolling the overlay div.

You are probably here because you were coding a website with overlaying divs and you discovered there’s a scrolling problem in iOS.

This happens in the css position property of fixed-size or fixed position div.  At first you will try the 2-finger swipe on your device and notice nothing happening.  Then you try to re-size the screen with the pinch gesture and scroll again. Am I right?  

I looked it up and this has been a known issue in Safari caused by Apple not wanting duplicate scroll bars to complicate the simplified user-interface. I don’t remember the credit reference for this, but will post it when I find it.

First consider using HTML5 and the meta tags for mobile.

Continue reading

February 6

Hacking a Website to See Hidden Content

Have you searched online to find answers but when you find a website with the answer it requires you to login or have a membership account?  That’s a clear tactic to convert a visitor to a member of that website.  Even though I agree it is a useful tactic, but it’s usually executed poorly such as during the first visit of that website.  It’s really annoying when you just want to see that one single page and could care less about any other content.  I am going to show you how to how to remove the overlay so you can read the hidden page content.

First I can tell you based on usability design here is an example of a well executed overlay window.  Glassdoor.com provides great content for free but requires registration and participating to see more.  The reason I think Glassdoor makes good use of this and offers a good user-experience is because it does not require registration upon the initial page visit.  But rather on a second or consecutive page visits of specific areas such as the review.  (Screenshot Bel0w)

This appeared on the third page within Glassdoor.com  Now here is an example of a poorly executed mandatory registration overlay window on Quora.com

white overlay blocking

 

Continue reading

Category: Design | LEAVE A COMMENT