jQuery & JavaScript Articles For The Community. Francis Hwang: Should your web application be rich-client from day one? For the sake of discussion, I'm going to make a recommendation about the state of web application development today: If you are writing a new web application, you should make it a rich-client application from the start. Your servers should not generate any HTML. You should do all that work in the browser with a Javascript framework such as Backbone.js or Ember.js, and the server should only talk to the browser via a REST API. I'm not saying I believe this idea 100%, mind you.
There's bad news, and there's good news There are plenty of good reasons to avoid jumping on this particular bandwagon: But no matter how rickety the wheels look, there are some good reasons to jump on this bandwagon right now: One day, you'll want all those APIs defined anyway, for iPhone apps, Android apps, mobile-optimized sites, partners, power users, etc. "You Aren't Gonna Need It" vs. A lot of this comes down to cost of change. Nobody ever said "I like it, but I wish it involved more waiting around"
How I built the Hacker News mobile web app - cheeaunblog. Last month, I tweeted about one of my recent projects, the Hacker News mobile web app. It's a simple little app to read Hacker News' stories and comments in Mobile Safari. It started out as an experiment for me to try one of the new CSS extensions introduced in Mobile Safari in iOS5, -webkit-overflow-scrolling: touch which uses native-style scrolling in an overflow: scroll element. Before working on this app, I've also worked on another project called Kanade which is a mobile web app that shows a list of anime series for every season. Despite the functionality, the actual reason I create it is that I want to try creating a web app that not only looks native but feels native. There are two parts; the look and the feel. For brevity sake, I'll use the term 'HNmobile' for 'Hacker New mobile web app'.
The look Every operating system has its own native look. The latter, of course. I start by getting screenshots. The result is surprisingly good if you compare it with the native interface. The feel. Responsive Design: Progressive Enhancement, Part Deux! | Aaron T. Grogg. 10 Best jQuery Plugins Of January 2012. jQuery can be defined as a cross browser Java script that is basically used to design with a purpose of simplifying the scripts on the client side of HTML. It is used on many websites all across the globe and is the most popular java script today. It is free and an open source document and its main purpose are to help navigate software. Another use is that it helps to create plugins of the java script. Along with the famous computer companies like Microsoft many famous mobile phone companies have also started using it. It is also the most advanced lightweight and powerful cross browser. Also JQuery plugins are used by a lot of designers across the globe and the fact that it comes with these plugins makes it more powerful.
A lot of jQuery plugins have been developed lately to create outstanding effects on the website and make it look more impressive. 1) Cloud Zoom Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. 2) jMpress js 8 ) Diapo. Learning JavaScript Design Patterns. Design patterns are reusable solutions to commonly occurring problems in software design. They are both exciting and a fascinating topic to explore in any programming language. One reason for this is that they help us build upon the combined experience of many developers that came before us and ensure we structure our code in an optimized way, meeting the needs of problems we're attempting to solve.
Design patterns also provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others. In this book we will explore applying both classical and modern design patterns to the JavaScript programming language. Target Audience This book is targeted at professional developers wishing to improve their knowledge of design patterns and how they can be applied to the JavaScript programming language.
Acknowledgments Credits Reading We already use patterns everyday. Stop paying your jQuery tax. Reminder, script tags block rendering It is common advice to move all your external JavaScript includes to the footer. Recently, the movement for fancy JavaScript loaders like ControlJS, script.js and so on has also picked up steam. The reason for this advice is sound and pretty simple. Nothing, Nada, Zilch below non asynchronous or deferred script tags gets rendered until the script is downloaded, parsed (perhaps compiled) and executed. With one tiny exception that is Delayed Script Execution in Opera. Often people avoid the async attribute on script tags cause they usually execute in the order they return this means you need to be more fancy about figuring out when the script is ready. Why is that jQuery synchronous script include stuck in the html 'HEAD' section?
jQuery solves the age old problem of figuring out when your document is ready. $(wowThisIsSoEasy); // aka. It allows you to arbitrarily add bits of rich functionality to your page with incredible ease. The jQuery tax. How Browsers Work: Behind the scenes of modern web browsers. Web browsers are the most widely used software. In this primer, I will explain how they work behind the scenes. We will see what happens when you type google.com in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used on desktop today: Chrome, Internet Explorer, Firefox, Safari and Opera. On mobile, the main browsers are Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, the Nokia S40/S60 browsers and Chrome–all of which, except for the Opera browsers, are based on WebKit.
I will give examples from the open source browsers Firefox and Chrome, and Safari (which is partly open source). The browser's main functionality The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. The rendering engine Grammars. Star Ratings With Very Little CSS. Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript. The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆ (Calculator for that kind of thing). You could use as many stars as you like: <div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div> Now we need to flop out that "hollow" star with a "solid" star on hover (Gallery for finding those sorts of characters).
Just by virtue of being it being absolutely positioned, the top: 0; left: 0; are implied (in modern browsers, anyway). But what we have so far only works on individual stars. Through CSS, there is no way to select a preceding child element. That's it! View Demo And here's a Dabblet if you wanna mess with it. Actual Usage Others. A Responsive Experience. – February 15th, 2012 – Since I saw Ethan’s talk in An Event Apart in Seattle 2010, I’ve been thinking a lot about Responsive Design.
Not just the layout techniques Ethan gave name to and wrote the book on: fluid grids, plus media queries and flexible images, but taking a step back from that into the field of responsive architecture and abstracting that into responsive design in general. Responsive Design is everywhere As I discussed in my talk at New Adventures Conference last January, Responsive Design is comprised of three things: Sensors: Things that sense the environment (not the weather, but the stuff around it - whatever it is)Systems: A system that takes the information from the sensors and tells the actuators what to do.Actuators: The things that actually do the moving.
A simple example of this is your central heating. Sensors: This is your thermostat. This is a responsive design system. You see, in the browser world, it’s not so cut and dry. More sensors, please! That’s all OK. XaoS.js.