background preloader

JSON: What It Is, How It Works, & How to Use It

JSON: What It Is, How It Works, & How to Use It
This week I want to cover a topic that I feel has become an important part of any developer’s toolkit: the ability to load and manipulate JSON feeds from other sites via AJAX. Many sites are sharing data using JSON in addition to RSS feeds nowadays, and with good reason: JSON feeds can be loaded asynchronously much more easily than XML/RSS. This article will cover the following: What is JSON? We’ll also use our newfound skills with JSON at the end of this project to build a quick app that loads photos from Flickr without requiring a page refresh. What Is JSON? JSON is short for JavaScript Object Notation, and is a way to store information in an organized, easy-to-access manner. Storing JSON Data As a simple example, information about me might be written in JSON as follows: This creates an object that we access using the variable jason. Storing JSON Data in Arrays Summary Related:  front-end

JSONLint - The JSON Validator. Uniform - Sexy forms with jQuery A JSON tutorial in JavaScript and jQuery for Beginners | View Source Javascript has grown from a way to add interactivity on your page, to a language that lets you perform tasks that once belonged to servers. JSON provides for an easy way to create and store data structures within JavaScript. It’s super popular and a great alternative to XML. JSON stands for JavaScript Object Notation…it’s called that because storing data with JSON creates a JavaScript object. The JavaScript object can be easily parsed and manipulated with JavaScript. Where XML is arguably easier to read, but notoriously difficult to parse (describe to a computer), JSON makes it a breeze to store data in a format that machines dig. • See the JSON example on JS Fiddle Breaking JSON down First, we create a variable to hold our data, and then we use JSON to define our object. This example will cause your browser to alert you with the variable name. Creating an object placeholder That’s great. • See the JSON example on JS Fiddle • See the JSON example on JS Fiddle Adding Arrays <!

Playing with JQuery Validation library | Elegant Code New job (2 weeks in), new responsibilities, new tools to play with. Amazingly (for me), one of the new tools is the JQuery Validation Library. My diving into this also coincides with ScottGu’s announcement that Microsoft is creating their own CDN for JQuery and JQuery Validation. Bad news is that this means I’m behind. That sucks. I was using JQuery MONTHS before Microsoft officially started supporting it (at least 6 months – but I’m too lazy to look it up). And you can add the JQuery Validation library like this: Note: see those end tags, great annoyance of my life, but you have to have them, you can’t do <script src=” />. Anyway, back to validation. The more I play with this library, the more I like it. Getting Started with JQuery Validation: The JavaScript Way: OK, assuming you have JQuery and the JQuery Validation library included, lets start with a simple customer form: 1: <form id="CustomerForm"> 2: <p> 3: <label for="firstNameEdit">First Name:</label> 5: </p> 6: <p> 9: </p>

JSON The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own. DescriptionEdit JavaScript Object Notation JSON is a syntax for serializing objects, arrays, numbers, strings, booleans, and null. It is based upon JavaScript syntax but is distinct from it: some JavaScript is not JSON, and some JSON is not JavaScript. The full JSON syntax is as follows: JSON = null or true or false or JSONNumber or JSONString or JSONObject or JSONArray JSONNumber = - PositiveNumber or PositiveNumber PositiveNumber = DecimalNumber or DecimalNumber . Insignificant whitespace may be present anywhere except within a (numbers must contain no whitespace) or (where it is interpreted as the corresponding character in the string, or would cause an error). MethodsEdit JSON.parse() JSON.stringify() PolyfillEdit SpecificationsEdit Browser compatibilityEdit

Useful Glossaries For Web Designers and Developers Advertisement In a day in age where there are just as many freelancers as there are university educated designers, developers, and all around web gurus, it is amazing to me how much many of us don’t know or have forgot about our trade. As a self-taught designer, I will admit to you upfront that there is a lot I don’t know when it comes to official jargon or certain aspects of things like typography and graphic design. It is these reasons that I call upon glossaries from time to time. These glossaries are also especially useful for those of you who are just getting started in the online business world. But glossaries aren’t just for brushing up on old terms or for calling upon while you learn new things. Last week we presented Web Design Industry Jargon: Glossary and Resources1, a general guide to industry terms that should get you well on your way to understanding what web designers are talking about. Typography Glossaries Usability, UX and IA Glossaries Marketing Glossaries SEO Glossaries

Build a Sinatra API Using TDD, Heroku, and Continuous Integration with Travis This post was inspired by this brilliant video, where Konstantin Haase, the maintainer of Sinatra builds a fully working app and deploys it on Heroku with tests on Travis (where he works). I decided to do a similar example that walks through each step of building an API service that demonstrates a typical Sinatra development cycle workflow – write your tests, write your code, push the code to GitHub, and check it works when deployed to Heroku with continuous integration on Travis. The post will go from start to finish and cover the following: Writing tests using MiniTestBuilding a Sinatra API that returns information in JSON formatUsing Bundler to manage dependenciesUsing Git to manage version controlHosting Code on GitHubDeploying and host the site on HerokuPerforming Continuous Integration with Travis CI Define the Problem The application I want to build is called Number Cruncher. Testing Before we write any code, we should write some tests that cover the description above. Bundler

jQuery Enlightenment | by Cody Lindley | 1st Edition | based on jQuery 1.3.2 JSON ie7-js - Project Hosting on Google Code IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. Current version: 2.1 beta4. IE7.js Upgrade MSIE5.5-6 to be compatible with MSIE7. IE8.js Upgrade MSIE5.5-7 to be compatible with MSIE8. You do not need to include IE7.js if you are using IE8.js IE9.js Upgrade MSIE5.5-8 to be compatible with modern browsers. You do not need to include IE7/IE8.js if you are using IE9.js The script only fixes images named: *-trans.png If you want the fix to apply to all PNG images then set a global variable as follows: var IE7_PNG_SUFFIX = ".png"; You must set this variable before including the IE7.js script. <script src="IE8.js">IE7_PNG_SUFFIX=".png";</script> The suffix will ignore query string parameters. var IE7_PNG_SUFFIX = ":"; By default, the PNG will be stretched (this simulates tiling). You may link directly to these files if you wish: