The first commented line is your dabblet’s title. Create a new fiddle. Front End Developer Playground & Code Editor in the Browser. JavaScript Tools of the Trade: JSBin. We've all been there. There are times when you simply want to throw some JavaScript code up and see how it works. Sure, you could go through the hassle of: Setting up a dedicated directoryCreate a file with markupFinding the latest version of your favorite libraries, downloading them and including them in your codeCreating your stylesheetConfiguring your webserver That seems like an awful lot of work just do do some simple code testing. Thankfully there are tools that make this type of work trivial. In this tutorial, I'd like to go over one of my favorite tools for interactive JavaScript testing, JSBin. As I mentioned previously, in many cases you simply need to test a small subset of JavaScript code.
What JSBin offers is a browser-based user interface where you can enter: HTML markupCSSJavaScript ... and get immediate feedback based on your code. Let's look at these tools a little more closely. JSBin was created and is actively maintained by well-respected developer Remy Sharp. It: JS Bin - Collaborative JavaScript Debugging. Authoring HTML & CSS techniques. Choosing a language tag. Background In HTML and XML documents a language tag is used to indicate the language of content. A language tag is composed of one or more subtags separated by hyphens. Language tag syntax is defined by the IETF's BCP 47. This article provides advice on how to choose the components of a language tag. Addison Phillips and Mark Davis, authors of BCP 47, provided guidance during the writing of this article.
Answer Accessing the subtag registry All the subtags you will need to create a language tag are found in one place, the IANA Language Subtag Registry. The notes on this page provide guidance that is sufficient for most people wanting to use language tags. Note, also, that some environments or systems may dictate choices that are different from what you would otherwise expect. The first (and often only) subtag in a language tag always designates a language. To find a primary-language subtag, search the page for the name of that language. Decision 1: The primary language subtag de-DE-u-co-phonebk. Setting language preferences in a browser. Background When your browser pulls a document from the Web, it sends a request to the server where the information is stored. This is known as an HTTP request. With the request, the browser sends information about its language preference settings .
The part of the HTTP request that holds this language preference information is called the Accept-Language request-header. Mainstream browsers allow you to modify the language preferences expressed by your browser in the HTTP request. In many cases, the initial browser setting will meet your needs. Note: Sometimes a server may determine which language to send to you in a way that doesn't rely on the Accept-Language information. Answer Most browsers have preferences or options that allow you to check or change the language preference settings. Most browsers will allow you to specify a list of languages, so that if your first choices are not available you can say what alternative languages to try, and in what order. Changing your preferences. Language tags in HTML and XML. Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), schema developers (DTDs, XML Schema, RelaxNG, etc.), XSLT developers, Web project managers, standards implementers, and anyone who needs an overview of how language tags are constructed using BCP47.
Updated Overview Terminology In this article we refer to the value of a language attribute such as fr-CA as a language tag. The fr and CA parts are referred to as subtags when described as parts of a tag. When described as members of an ISO list of languages or countries, fr and CA are referred to as codes. Language tags are used to indicate the language of text or other items in HTML and XML documents. In both cases, language information is inherited by elements inside the one where the declaration was made, unless one of those elements declares a different language (in the same way). RFCs are what the IETF calls its specifications. Language tag syntax is defined by the IETF's BCP 47. Note! Language on the Web. Content authors need to know how to declare the language of a document or range of text in the Web technology they are dealing with. HTML uses the lang attribute, but there may be other markup. For example, most XML-based formats, such as XHTML, SVG, SSML, etc. make use of the xml:lang attribute defined by the XML specification.
Content authors should consider whether they need to make a difference between declaring the language of a document or range of text so that tools can process it, and declaring the intended audience of a resource (ie. metadata). You may need to apply slightly different approaches for these in HTML, for example. You should also avoid confusing language declarations with script and character encoding declarations. Content authors and webmasters also need to know how to use values for languages in a standard way. Handling character encodings in HTML and CSS. Intended audience: HTML and CSS content authors. This material is applicable whether you create documents in an editor, or via scripting. This tutorial gathers together and organizes pointers to articles that, taken together, help you understand how to handle the essential aspects of authoring HTML and CSS related to characters and character encodings.
In a nutshell This section is for people in a hurry who just want to know the key recommendations from the tutorial. If you don't understand something, or if you want more detail, read the rest of the tutorial. Save your pages as UTF-8. Always declare the encoding of your document. You can use @charset or HTTP headers to declare the encoding of your style sheet, but you only need to do so if your style sheet contains non-ASCII characters and, for some reason, you can't rely on the encoding of the HTML and the associated style sheet to be the same. Avoid using character escapes, except for invisible or ambiguous characters. Internationalization Quick Tips for the Web. Encoding. Use the UTF-8 (Unicode) character encoding for content, databases, etc. Always declare the encoding. The character encoding you choose determines how bytes are mapped to characters in your text. Normally character encodings limit you to a particular script or set of languages.
Unless you appropriately declare which character encoding you are using your users may be unable to read your content. Give me more background Character encodings for beginners explains some of the basic concepts about character encodings, and why you should care. So, how do I do this? HTML & CSS authors • Spec developers • Server setup Escapes. Escapes such as Numeric Character References (NCRs), and entities are ways of representing any Unicode character in markup using only ASCII characters. Such escapes are useful for clearly representing ambiguous or invisible characters, and to prevent problems with syntax characters such as ampersands and angle brackets. Language. Presentation vs. content. Forms. Declaring language in HTML. If you want to create metadata that describes the language of the intended audience of a page, rather than the language of a specific range of text, do so by getting the server to send the information in the HTTP Content-Language header.
If your intended audience speaks more than one language, the HTTP header allows you to use a comma-separated list of languages. Here is an example of an HTTP header that declares the resource to be a mixture of English, Hindi and Punjabi: Content-Language: en, hi, pa Note that this approach is not effective if your page is accessed from a hard drive, disk or other non-server based location. There is currently no widely recognized way of using this kind of metadata inside the page. In the past many people used a meta element with the http-equiv attribute set to Content-Language. For information about Content-Language in HTTP and in meta elements see HTTP and meta for language information. Various things that are irrelevant The same goes for text direction. Normalization in HTML and CSS.
Intended audience: XHTML/HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who is unfamiliar with Unicode normalization and how it can affect the success of HTML and CSS authoring. Question What are normalization forms, and why do I need to know about them when creating HTML and CSS content? Answer Normalization is something you need to be aware of if you are authoring HTML pages with CSS style sheets in UTF-8 (or any other Unicode encoding), particularly if you are dealing with text in a script that uses accents or other diacritics. What are normalization forms? In Unicode it is possible to produce the same text with different sequences of characters. Precomposed U+00E1 LATIN SMALL LETTER A WITH ACUTE (a single character) or as a decomposed sequence of U+0061 LATIN SMALL LETTER A followed by U+0301 COMBINING ACUTE ACCENT (two characters). normalize text before performing searches or comparisons.
There are four. The byte-order mark (BOM) in HTML. Answer What is a byte-order mark? At the beginning of a page that uses a Unicode character encoding you may find some bytes that represent the Unicode code point U+FEFF BYTE ORDER MARK (abbreviated as The name BYTE ORDER MARK is an alias for the original character name ZERO WIDTH NO-BREAK SPACE (ZWNBSP). With the introduction of U+2060 WORD JOINER, there's no longer a need to ever use U+FEFF for its ZWNSP effect, so from that point on, and with the availability of a formal alias, the name ZERO WIDTH NO-BREAK SPACE is no longer helpful, and we will use the alias here. The BOM, when correctly used, is invisible. Before UTF-8 was introduced in early 1993, the expected way for transferring Unicode text was using 16-bit code units using an encoding called UCS-2 which was later extended to UTF-16. 16-bit code units can be expressed as bytes in two ways: the most significant byte first (big-endian) or the least significant byte first (little-endian).
UTF-8 signature Detecting the BOM PHP includes. Declaring character encodings in HTML. Intended audience: HTML authors (using editors or scripting), script developers (PHP, JSP, etc.), Web project managers, and anyone who needs an introduction to how to declare the character encoding of their HTML file. Question How should I declare the encoding of my HTML file? You should always specify the encoding used for an HTML or XML page. If you don't, you risk that characters in your content are incorrectly interpreted. This is not just an issue of human readability, increasingly machines need to understand your data too. A character encoding declaration is also needed to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and so forth. This article describes how to do this for an HTML file. If you need to better understand what characters and character encodings are, see the article Character encodings for beginners.
Quick answer <! <! It doesn't matter which you use, but it's easier to type the first one. Details What about the byte-order mark? <? Choosing & applying a character encoding. Intended audience: HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who is new to character encodings and needs an introduction to how to choose and apply character encodings. Updated Question Which character encoding should I use for my content, and how do I apply it to my content? Content is composed of a sequence of characters. Characters represent letters of the alphabet, punctuation, etc. But content is stored in a computer as a sequence of bytes, which are numeric values.
Sometimes more than one byte is used to represent a single character. This article offers simple advice on which character encoding to use for your content, and how to apply it, ie. how to actually produce a document in that encoding. If you need to better understand what characters and character encodings are, see the article Character encodings for beginners. Answer Choosing an encoding Using an encoding with your content Details Why use UTF-8? Tutorials Overview • WAI Web Accessibility Tutorials.
Easy Checks - A First Review of Web Accessibility. This page helps you assess the accessibility of a web page. With these simple steps, you can get an idea whether or not accessibility is addressed in even the most basic way. These checks cover just a few accessibility issues and are designed to be quick and easy, rather than definitive. A web page could seem to pass these checks, yet still have accessibility barriers. More robust evaluation is needed to evaluate all issues comprehensively. Additional evaluation guidance is available from: This page provides checks for the following specific aspects of a web page.
It also provides guidance on Next Steps. Using these Easy Checks Click headings with [+] buttons to get hidden information Some sections of this page might not apply to your situation, for example, they are for a browser you don't have, or you only need to read them once. The sections below all have hidden information under expandable headings. Tools: FF Toolbar and IE WAT (optional) Practicing with BAD, the Before-After Demo Tips. C cheatsheet. The encoding used for an HTML page that contains a form should support all the characters needed to enter data into that form. This is particularly important if users are likely to enter information in multiple languages. Databases and scripts that receive data from forms on pages in multiple languages must also be able to support the characters for all those languages simultaneously.
The simplest way to enable this is to use Unicode for both pages containing forms and all back-end processing and storage. In such a scenario the user can fill in data in whatever language and script they need to. You should also try to avoid making assumptions that things such as the user's name and address will follow the same formatting rules as your own. Ask yourself how much detail you really need to break out into separate fields for things such as addresses.
So, how do I do this? HTML & CSS authors • HTML & CSS authors • Spec developers.