background preloader

Front End Development Guidelines

Front End Development Guidelines
Accessibility What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. You may have relied on the following DOCTYPE in the past, but it's important to know that this is now being superseded by a leaner and meaner snippet. Ideally, the HTML5 DOCTYPE should be used. Write Valid Semantic Markup Writing websites with clean, semantic HTML is something we wish we could always do. Headings should be heirarchically created from <h2>onwards, paragraphs should always be in <p> tags and so on and so forth. Which do you think looks cleaner, this? <span class="sectionHeading">A Heading</span><br /><br /> Lorem ipsum dolor sit amet. ... Or this? <h2>A Heading</h2><p> Lorem ipsum dolor sit amet. ... Fallbacks for Middle Mouse Clicks One of the most frustrating accessibility and usability flaws of the modern web stems from the remapping of hyperlink click functions. A modern example of a popular website that is contributing to this problem is the Twitter web app. Use Microformats

Javascript Mistakes You Must Avoid If you are new to JavaScript and you write raw JavaScript or use any framework (jQuery, Mootools, Dojo, YUI) with it, you must avoid few mistakes. Actually these are my experiences when I was learning JavaScript. Equality Operator You may know that in js, two operators are used for comparing values. Here are more examples. Some of the results are unexpected specially for those who don’t know how JavaScript evaluates == operator. Consider the first example (1 == “1″). In the second example (“true” == true) is false because if the string contain characters other than digits, convertion to number will return NaN which means Not a Number. You can check what value will be returned after conversion to number using the Number constructor. Now you maybe wondering how === operator works. Not Assigning null to Reference Types It’s common mistake that many js developers don’t assign null value to variables of reference types (object or Array) when there use is finished. Don’t Forget Keyword var

Hello Backbone.js Tutorial Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications. The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections. Start the tutorial Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Copyright © Artur Adib [ arturadib.com ]

JS Charts – Free JavaScript charts FreeMarker: Java Template Engine Library HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents. Embedding media in your HTML document is trivial: <video src=" controls> Your browser does not support the <code>video</code> element. This example plays a sample video, with playback controls, from the Theora web site. Here is an example for embedding audio into your HTML document <audio src="/test/audio.ogg"><p>Your browser does not support the <code>audio</code> element. The src attribute can be a URL of the audio file or the path to the file on the local system. <audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the <code>audio</code> element </p></audio> This code example uses attributes of the <audio> element: The preload attribute is used in the audio element for buffering large files. This plays the Ogg video file in browsers supporting the Ogg format. A few examples:

URL Decoder/Encoder URL Decoder/Encoder Input a string of text and encode or decode it as you like.Handy for turning encoded JavaScript URLs from complete gibberish into readable gibberish.If you'd like to have the URL Decoder/Encoder for offline use, just view source and save to your hard drive. The URL Decoder/Encoder is licensed under a Creative Commons Attribution-ShareAlike 2.0 License. This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.

HTML5 Snippets Recommended Search Engines-The Library Google alone is not always sufficient, however. Not everything on the Web is fully searchable in Google. Overlap studies show that more than 80% of the pages in a major search engine's database exist only in that database. For this reason, getting a "second opinion" can be worth your time. For this purpose, we recommend Yahoo! Table of features Some common techniques will work in any search engine. You may also wish to consult "What Makes a Search Engine Good?" How do Search Engines Work? Search engines do not really search the World Wide Web directly. Search engine databases are selected and built by computer robot programs called spiders. If a web page is never linked from any other page, search engine spiders cannot find it. After spiders find pages, they pass them on to another computer program for "indexing." Many web pages are excluded from most search engines by policy.

Web Framework - Objective-J Tutorial Learning Objective-J Objective-J is a new programming language based on Objective-C. It is a superset of JavaScript, which means that any valid JavaScript code is also valid Objective-J code. Anyone familiar with JavaScript and object-oriented programming concepts, classical inheritance in particular, should have no difficulty learning Objective-J. Familiarity with Objective-C will be helpful, but it is not required. Classes Objective-J has two types of objects: native JavaScript objects and Objective-J objects. Creating a class in Objective-J is simple. @implementation Person : CPObject{ CPString name;} @end The beginning of a class is always the keyword @implementation, followed by the class name. After the declaration, a block enclosed with brackets is used to define all your member variables. To end a class declaration, add the keyword @end. Methods Just as with objects, native JavaScript functions work unchanged in Objective-J. Following the dash/plus is a return type, in parentheses.

ECMA-262 » JavaScript. The core. Read this article in: Japanese, German (version 2), Arabic, Russian, French, Chinese. This note is an overview and summary of the “ECMA-262-3 in detail” series. Every section contains references to the appropriate matching chapters so you can read them to get a deeper understanding. Intended audience: experienced programmers, professionals. We start out by considering the concept of an object, which is fundamental to ECMAScript. ECMAScript, being a highly-abstracted object-oriented language, deals with objects. An object is a collection of properties and has a single prototype object. Let’s take a basic example of an object. For the code: we have the structure with two explicit own properties and one implicit __proto__ property, which is the reference to the prototype of foo: Figure 1. What for these prototypes are needed? Prototype objects are also just simple objects and may have their own prototypes. ECMAScript has no concept of a class. Easy enough, isn’t it? Figure 2. Figure 3.

Learn Javascript You don't need prior programming experience to be able to follow this tutorial series. We'll take you step by step through how to write your own JavaScript programs, so that you no longer have to rely on pre-built scripts written by others. Instead, you'll be able to write your own scripts that do exactly what you want them to do. Getting StartedAn introduction to a series of tutorials on programming with JavaScript. Hello WorldJust about all programming courses start off with a simple program called "Hello World." This program outputs the text "Hello World," and it's designed to introduce you to the programming language and show you how to write, compile, and execute programs using that language. VariablesIn this tutorial, we'll build on what we learned with our first script by creating a variable and displaying its value on a web page instead of displaying static text. OperatorsIn the previous tutorial, you learned how to create variables. Javascript Quiz ThreeTest time again.

How To Become A Hacker Copyright © 2001 Eric S. Raymond As editor of the Jargon File and author of a few other well-known documents of similar nature, I often get email requests from enthusiastic network newbies asking (in effect) "how can I learn to be a wizardly hacker?". Back in 1996 I noticed that there didn't seem to be any other FAQs or web documents that addressed this vital question, so I started this one. A lot of hackers now consider it definitive, and I suppose that means it is. If you are reading a snapshot of this document offline, the current version lives at Note: there is a list of Frequently Asked Questions at the end of this document. Numerous translations of this document are available: ArabicBelorussianBulgarianChinese, Czech. The five-dots-in-nine-squares diagram that decorates this document is called a glider. If you find this document valuable, please support me on Patreon or SubscribeStar. If you want to be a hacker, keep reading. 1. 2. 3.

Related: