WYSIHTML5 - A better approach to rich text editing

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

I found that many iPhone and iPad users don’t know that they can add their favorite web sites to the Home Screen and interact with them like standard native applications. This script helps them to discover this great feature and suggests the steps needed to add your web app to the dashboard.

At this point there really isn't much of a debate; using Google's CDN to load jQuery isn't likely to benefit the majority of your first-time visitors. You're almost certainly better off bundling jQuery up with the rest of your site's JavaScript and making sure you're serving long-lived cache-controlling headers with it.

Drupal will NOT load any javascript (including jQuery and drupal.js) if it “thinks” that they are not required. It will only load the scripts if any other module or script requires them. For example, if you add scripts in your .info file or using the drupal_add_js() function in the hook_init(), Drupal will detect it and load its scripts.

Now, let's assume that you developed a module that adds its own scripts in hook_footer() using the drupal_add_js() function. At the time when hook_footer is executed, it is too late for Drupal to add scripts to the header and hence jQuery and drupal.js will not be added. If your javascript depends on them you will see error messages in your console such as:

Drupal is not defined
jQuery is not defined
The solution is to include at least one script earlier – for example in hook_init() so that Drupal loads its scripts.

The mobile landscape today is all but monopolized by WebKit, as a result, most of the tooling and infrastructure to support mobile web development on the frontend is taking place in the WebKit Inspector, so I’ll focus on it, and take a deep dive into its entire feature-set and how and when to use it.

Google and the Chrome team have been pumping a ton of resources into the WebKit Inspector. The changes have enabled a whole new class of complex and ambitious applications that would have otherwise collapsed on their own weight. This is great news, of course, but as I talk to more and more web developers about their process and tooling, it became clear to me that many of them haven’t caught up with the changes or aren’t making effective use of the tooling available. This blog post attempts to remedy that, not only by walking you through the inspector’s feature set, but also highlighting certain techniques for bug hunting and feature development that I’ve found to be indispensable.

Do you want a 3 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah!
Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!

Meteor is a set of new technologies for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.

Pure JavaScript.
Write your entire app in pure JavaScript. All the same APIs are available on the client and the server — including database APIs! — so the same code can easily run in either environment.

JSHint is a tool to detect errors and potential problems in JavaScript code.

Over the last few months, I’ve seen a password strength meter on almost every signup form I’ve encountered. Password strength meters are on fire.



Here’s a question: does a meter actually help people secure their accounts? It’s less important than other areas of web security, a short sample of which include:

Preventing online cracking with throttling or CAPTCHAs.
Preventing offline cracking by selecting a suitably slow hash function with user-unique salts.
Securing said password hashes.
With that disclaimer — yes. I’m convinced these meters have the potential to help. According to Mark Burnett’s 2006 book, Perfect Passwords: Selection, Protection, Authentication, which counted frequencies from a few million passwords over a variety of leaks, one in nine people had a password in this top 500 list. These passwords include some real stumpers: password1, compaq, 7777777, merlin, rosebud. Burnett ran a more recent study last year, looking at 6 million passwords, and found an insane 99.8% occur in the top 10,000 list, with 91% in the top 1,000. The methodology and bias is an important qualifier — for example, since these passwords mostly come from cracked hashes, the list is biased towards crackable passwords to begin with.

These are only the really easy-to-guess passwords. For the rest, I’d wager a large percentage are still predictable enough to be susceptible to a modest online attack. So I do think these meters could help, by encouraging stronger password decisions through direct feedback. But right now, with a few closed-source exceptions, I believe they mostly hurt. Here’s why.

One of the more interesting questions raised by the new iPad and its retina display is whether or not web sites should deliver higher resolution images when there is no way to know the connection speed. AppleInsider found that Apple.com is being prepped to deliver high-res images and documented how you can test it in Safari on your desktop.

As you can imagine given my research on responsive images, I was keenly interested to see what approach Apple took.

What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

The heavy lifting for the image replacement is being done by image_replacer.js. Jim Newberry prettified the code and placed it in a gist for easier reading.

Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.

started as a jQuery port of
impress.jscreated by Bartek Szopka
but with a different goal in mind. Why keep it behind a podium? Let's make websites!

This is much easier than you're making it. The text node will not have the literal string " " in it, it'll have have the corresponding character with code 160.

function replaceNbsps(str) {
  var re = new RegExp(String.fromCharCode(160), "g");
  return str.replace(re, " ");
}

textNode.nodeValue = replaceNbsps(textNode.nodeValue);
UPDATE

Even easier:

textNode.nodeValue = textNode.nodeValue.replace(/u00a0/g, " ");

Thanks for the reply, s removes spaces but it doesn't seem to strip non-breaking spaces (I actually use another function to trim excess space using this command).

I'm not sure if there is a way to do this or a reason it's failing with   but I have a workaround now if anyone else needs this. Using the unicode equivalent of   works, ie str.replace(/u00a0/g,'');

In an ideal world there would always be a clean way of displaying data supplied by a third party on your site. Two examples would be getting the data in JSON or XML format from a Web Service and having an API to code against. But you don’t always have any of those options.

Sometimes the only way of incorporating data from a third party is by loading it in an iframe element. A few examples are financial reports, e-commerce applications, and ticket booking applications. Using an iframe is not ideal for many reasons, one of which is that it can make multiple sets of scrollbars appear on the page. Not only does it look ugly, it also makes the site less user-friendly. But there is a workaround.

Adjust the iframe’s height with JavaScript

By using the following piece of JavaScript you can adjust the height of the iframe element to match the height of its content:

reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with support for CSS 3D transforms to see it in its full glory.

I unashamedly maintain that there is so much more to being successful on the mobile web than dealing with screen size. But I do accept that dealing with screen size is at least a first step.

Thank goodness then, that the matter of screen size is so simple and well understood.

Really?

As web developers, we will often need to know the screen size of the device we are displaying content on. Perhaps on the server, perhaps on the client, perhaps to be used as a clause in a media query.

But how best to measure it? And what are we measuring anyway? On the client-side, for instance, a variety of ways exist to determine screen and page size: things like screen.width, window.outerWidth, document.body.clientWidth, and so on. But these properties are infamously unspecified by any standards: so what do they all mean – and how reliable are they on mobile browsers?

CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that's just the first paragraph.

WAT
A lightning talk by Gary Bernhardt from CodeMash 2012

Why is it that a form with a single input field will reload the form when the user enters a value and presses the Enter key, and it does not if there are 2 or more fields in the form. I wrote a simple page to test this oddity.

If you enter a value in the second form and press Enter, you'll see it reloads the page passing the entered value as if you called GET. why? and how do I avoid it?

Aren't you just bored with all those slides-based presentations?
Don't you think that presentations given in modern browsers shouldn't copy the limits of 'classic' slide decks?
Would you like to impress your audience with stunning visualization of your talk?
then you should try
impress.js*

Earlier this year I gave a talk (slides) outlining the latest and greatest in mobile performance, including a bit of my own unscientific research into carrier latency and bandwidth thanks to boomerang.js.
I realized that interest in mobile performance has exploded recently, especially with Steve Souders announcing his focus on mobile, and I thought it was time for an update, this time in blog form. Also, my old slides have been somewhat embarrassing. For some strange reason, at the time I wanted to give S5 a try – that outdated, ancient, not-performant slideshow framework. The result is a slideshow on performance that loads slowly… doh! (incidentally, I recommend deck.js as an alternative).
In any case, it was time for a roundup of mobile performance best practices, in blog form. I’m not sure if it’s properly called a manifesto, but it is what it is! Onward!

This is a list of best practices for creating websites that do not break when browsers are updated. It's not always possible to follow all of these, but following as many of them as possible will help future-proof your website. This is especially important for intranet applications and other non-public websites where problems are likely to not be noticed during testing by browser vendors.

What is Highstock?
Highstock lets you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning.

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

En sida som saknar innehåll men skiftar i färgtoningar på ett behagligt sätt.

pan.js adds native-like panning functionality any HTML element that is bigger than it’s container. Optimized for iPad and iPhone and desktop browsers.

Try moving the mountains using you finger (iPad/iPhone), mousewheel/trackpad or click/drag.

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website.  It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Uploadify was born out of the need for a multiple file upload utility for a CMS that was being developed.  After evaluating the other available options, RonnieSan decided the best option was to build a new plug-in and make it available to the development community.  In order to make the plug-in easy to implement and highly-customizable, the jQuery format was chosen.  After word got out, the popularity of the plug-in spawned the need for a dedicated site.  Travis Nickels volunteered his help to refine the Uploadify plug-in and make it what it is today.

This is a “Daring Fireball Linked List” plugin for WordPress.

This plugin has two features:

It makes your blog’s RSS feed behave like Daring Fireball, which is great when you post links often. Shawn Blanc, who inspired this plugin, has a detailed writeup on the different behaviours of RSS link posts.
It sets the custom field “linked_list_url” to the first link in the post content. This is handy for using with the ‘Press This’ bookmarklet.

Native scrolling for mobile web apps... or at least the closest thing to it!

Scrollability is a single script, it's small, and it has no external dependencies. Drop it into your page, add a few CSS classes to scrollable elements, and scroll away.

Scrollability is a work-in-progress and is not yet ready to be used. I will publish documentation when it's ready.

throbber.js is a javascript Throbber, made using canvas and fully configurable with a gif fallback option.

No images, no external CSS
No dependencies
Highly configurable
Resolution independent
Works in all major browsers, including IE6
Smaller than an animated GIF (3K minified, 1.7K gzipped)
MIT License

Ethan Marcotte established the idea of responsive web design in his 2010 A List Apart article of the same title.  Succinctly, responsive web design is device-agnostic content presentation. A responsive design looks great on a desktop monitor, a tiny phone screen or a large format display.  This brief paper first details where responsive web design fits in the front end design stack. Then it will describe how a responsive web design is constructed.

Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.

Why use Tempo?
Clear separation of concerns: no HTML in your JavaScript files
It makes AJAX content easier to work with
It's as friendly as a bunny rabbit (which are quite friendly)

Key Features
Works in Safari, Chrome, FireFox, Opera, and Internet Explorer 6+
Itty-bitty footprint, lightning-fast rendering!
No dependencies - Works with or without jQuery
Degrades gracefully if JavaScript is not enabled
Supports nested and conditional templates

yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need.

We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.

We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.

Lifehacker, along with every other Gawker property, experienced a lengthy site-outage on Monday over a misbehaving piece of JavaScript. Gawker sites were reduced to being an empty homepage layout with zero content, functionality, ads, or even legal disclaimer wording. Every visitor coming through via Google bounced right back out, because all the content was missing.

JavaScript dependent URLs

Gawker, like Twitter before it, built their new site to be totally dependent on JavaScript, even down to the page URLs. The JavaScript failed to load, so no content appeared, and every URL on the page was broken. In terms of site brittleness, Gawker’s new implementation got turned up to 11.

Every URL on Lifehacker is now looks like this http://lifehacker.com/#!5753509/hello-world-this-is-the-new-lifehacker. Before Monday the URL was almost the same, but without the #!. So what?

A smarter bookmarklet for Pinboard.in; wraps selected text in

tags, keeps variables out of the global scope, supports filling tags from rel="tag" markup in the page, and titles from hAtom entry titles.

A jQuery plugin for rendering rich, fast-performing photo galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.


Features

Smart image preloading after the page is loaded
Thumbnail navigation (with pagination)
jQuery.history plugin integration to support bookmark-friendly URLs per-image
Slideshow (with optional auto-updating url bookmarks)
Keyboard navigation
Events that allow for adding your own custom transition effects
API for controlling the gallery with custom controls
Support for image captions
Flexible configuration
Graceful degradation when javascript is not available
Support for multiple galleries per page

Simple, it's just a skeleton of a jQuery plugin that you can download, clone, fork, whatever. I'm putting it on Github mainly for myself. It also includes an MIT license at the top of the skeleton.

In this article, I’ll describe some techniques to assist you in the debugging process when you are using jQuery in client-side Web development. Thankfully, we have much better tools and technologies than developers had even five years ago.

It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.


At it’s simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.

You should take time to design your URL structure. If there’s one thing I hope you remember after reading this article it’s to take time to design your URL structure. Don’t leave it up to your framework. Don’t leave it up to chance. Think about it and craft an experience.

URL Design is a complex subject. I can’t say there are any “right” solutions — it’s much like the rest of design. There’s good URL design, there’s bad URL design, and there’s everything in between — it’s subjective.

But that doesn’t mean there aren’t best practices for creating great URLs. I hope to impress upon you some best practices in URL design I’ve learned over the years and explain why I think new HTML5 javascript history APIs are so exciting to work with.

audio.js is a drop-in javascript library that allows HTML5's <audio> tag to be used anywhere.
It uses native <audio> where available and falls back to an invisible flash player to emulate it for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
It plays mp3s. No ogg. Because, lets be honest, in the real world, no one really exports ogg files.

Among the many talents of the DOM is its ability to retrieve and modify attributes inside HTML elements. Using just a small set of methods, you can intuitively get the width of a DIV, change the src of an image, or even remove the background image of the document!

The DOM supplies the following 3 methods to tackle HTML attributes:

-getAttribute()
-setAttribute()
-removeAttribute()

This hack consists of a bookmarklet that inserts a daterange into your Google query (replacing an existing daterange, if necessary) and then submits the query. It prompts for the number of days back (from the current day), defaulting to 30. If the input contains a second number, then the datarange is days back from that number of days before the current day. For instance, the input "30 60" would search on the range from 90 to 60 days before the current day.

There's a substantial amount of buzz and enthusiasm right now about Node.js. So what is it, and why should you care about it (well, other than "I said so")?

ReadWriteWeb chatted with Javascript developer Guillermo Rauch, co-founder and CTO of LearnBoost in order to get some insights.

Very soon we’ll see the next evolution of LESS. The new change will be bigger than any previous implementation or update because LESS has now been re-implemented in JavaScript. What this means is you no longer need Ruby, ASP or PHP to use LESS, you just need a browser.

Less.js is a JavaScript implementation of LESS that’s run by your web browser. As any JavaScript, you include a link to the script in your HTML, and…that’s that. LESS is now going to process LESS code so instead of including a link to a CSS file, you’ll include a link directly to your LESS code. That’s right, no CSS pre-processing, LESS will handle it live.

Have you ever had a DOM element that you wanted lightboxed, but didn't want all the fanciness of all the lightbox-related plug-ins out there? Lightbox_me is for you.

Lightbox_me is an essential tool for the jQuery developer's toolbox. Feed it a DOM element wrapped in a jQuery object and it will lightbox it for you, no muss no fuss.

This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.
IE is supported through use of VML. Standards-compliant browsers are, by default, ignored. If you wish it so, each call to DD_roundies.addRule can take an optional third parameter that will spit out appropriate proprietary code for browsers that are known to support the CSS border-radius property.

A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user's interactions in a dynamic way that standards-based web sites haven't been able to replicate.

Lately that's been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It's high time to revisit the CSS Sprites technique from four years ago, and see if we can't interject a little bit of movement of our own.

The examples below demonstrate inline CSS Sprites2, the technique we'll be covering in this article:

Home About Services Contact
Home About Services Contact
Home About Services Contact
Enter the jQuery
So here's the first caveat: we're going to lean on jQuery to make this happen. jQuery is a maturing JavaScript library that does the same neat stuff as all the other JavaScript libraries, and it has an additional advantage that lends itself particularly well to extending CSS Sprites: jQuery allows us to select elements on a page using a CSS-like syntax that we already know.

This tutorial contains code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

Web applications have evolved from simple HTML pages into rich, interactive applications that provide a great user experience. Today's web apps pose a challenge for developers, however: how do you create and maintain efficient JavaScript code that downloads quickly and works across different browsers?
The Closure tools help developers to build rich web applications with JavaScript that is both powerful and efficient.

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Ett alternativ till Lightbox för att visa stora bilder "inline" på en webbsida.

Lightbox är en inline-popup-bildvisare som är så populär nuförtiden.

Enkelt script för visa/göm ett element.

Ett javascript-bibliotek som gör att man enkelt kan rita upp snygga grafer och diagram. Har även interaktiva finesser som scrollning mm.

Google Code förklarar optimering av laddning av deras sida, optimeringar som delvis är rätt generella och kan göras på många webbsidor.

Varför man inte ska ha "javascript:void(0);" som länk på javascript utan brädgård, men för att slippa hoppa till toppen ska man också ha return false med.

En bra genomgång av Javascript.

En smart och bra färgväljare i javascript för webbsidor.

En enkel snabbgenomgång av javascript som programmeringsspråk.

moo.fx är ett litet enkelt javascriptbibliotek för att storleksförändra objekt och andra javascript-effekter.

Behaviour är ett bibliotek för AJAX-funktioner som verkar rätt populärt och bra.

456 Berea Street om hur man använder javascript för att öppna nya fönster istället för html.

En djupare titt på Firebug, javascript-debuggern för Firefox.

En flash-manual som visar hur man använder Firebug, en javascript-debugger mm för Firefox.

FireBug är ett tillägg till Firefox som ger en debugger för javascript.

Adobes lösning för att hantera problemen med uppdateringen som gjorde att man måste klicka på allt inbäddad innehåll av aktiv karaktär

I februari 2006 gjorde en säkerhetsuppdatering till Windows att allt inbäddat innehåll som filmer, flash, activeX osv krävde ett aktiveringsklick. Detta är Apple sätt att komma runt det för Quicktime.

getComputedStyle fungerar inte i Safari, något jag upptäckte när jag skulle göra min effekt på menyn på 16juli2005.info.

Cabel på Panic har gjort ett rätt fräckt sätt att visa bilder ur ett bildgalleri på en webbsida med hjälp av javascript.

Artikel om hur säkerhetsproblem när man tillåter stil och anpassning i koden.

Ett "framework" för att smidigt använda javascript för Ajax-funktioner.

Ett exempel på cool teknik för att förstora en bild på en webbsida med javascriptteknik.

HTML_AJAX är ett PEAR package för att göra AJAX-operationer för PHP