Dictionary Lookups in JavaScript I’ve been working on a browser-based word game, naturally written in JavaScript, and have been encountering some interesting technical challenges along the way. I’ve written up my thought process here for others to learn from (note that most of this happened over the course of a month, or so). I’ve often found that while a final solution to a problem may be rather elegant and “make perfect sense” when looking at it – it’s only through the result of much trial and error that the solution was arrived upon. To start, in my game, the user is frequently re-arranging letters – causing the game to look up words in a dictionary to see if they are valid, or not. I’ve taken multiple passes at implementing a solution to this problem, ranging all the way from “I don’t care about performance, I just want it to work” all the way up to “thousands of people could be playing simultaneously, how do I scale?” Server-Side Solution The first pass was stupid simple. Thus you would call the PHP script like so:
68 Expert Tips to Create a Website That Builds Your Business | Flyte New Media Need a web design or internet marketing tip? Just reach into the jar. ATTENTION: Join us on 5/30/2013 for a FREE live webinar on Turning Likes Into Sales. Last month at the Social Media FTW conference flyte had a booth promoting our services. At our booth was a tip jar. However, instead of asking attendees to leave loose change behind, we asked them to pull a web design or internet marketing tip out of the jar. Despite the fact that there were over 400 people at the conference, recent population surveys tell us that many more couldn’t make it. So, to share the knowledge, here’s our list of web design and internet marketing tips that appeared in the jar. Web Design Tips: To increase contact form conversion rates keep the number of fields to 5 or less.Good web design is not just about pretty pictures. Web Marketing Tips: Thanks to Ryan Goan for the web design tips, and Joan Crocker and Nicki Hicks for the web marketing tips. Rich BrooksDelegating Photo credit: Tina Burnell
HTML5 sectioning elements, headings, and document outlines A subject I have returned to a couple of times is how to use headings to make good document outlines in HTML documents. See Headings and document structure conclusions for a summary of my reasoning. Recently I’ve been taking a closer look at how HTML5 changes the way document outlines are created. The HTML 4.01 outline To explain what I mean, let’s look at some examples. <body><div id="header">Site title etc. That creates the following document outline (you can use the Web Developer extension to check document outlines): Article title Article sub-heading Article sub-sub-heading Sidebar heading Sidebar sub-heading Footer heading You could argue that the sidebar and footer headings don’t really belong in the outline for the Article title, but let’s leave that aside for now. The HTML5 outline So let’s take the HTML 4.01 structure and change it to make use of the sectioning elements in HTML5. <body><header> Site title etc. Say what? The footer is now the header? First the footer.
Basic Drupal SEO Tutorial: On-site Optimization Summary Enable Clean URLsEnable Path Module and install and enable Pathauto, Global Redirect and Token Modules.Configure the Pathauto ModuleInstall and enable the Meta Tags Module.Install enable the Page Title ModuleDo NOT install the Drupal Sitemap Module.Fix .htaccess to redirect to "www" or remove the "www" subdomain.Fix your theme's HTML headers if they aren't rightRecommended: create a custom front pageModify your robots.txt file. Enable clean URLs Search engines prefer clean URLs. In Drupal 6, clean URLs should be automatically enabled if your server allows it. In Drupal 5 you can enable clean URLs under administer —> settings —> Clean URLs. Install the pathauto module and enable it The pathauto module is highly recommended. Think carefully about how you want your URLs to look. At the very least, enable the path module and install the pathauto module. Caution: The above advice is directed towards new Drupal sites. Here are some pathauto settings to watch out for: Drupal Rewrite Rules
Semantics You are here: Home Dive Into HTML5 Diving In This chapter will take an HTML page that has absolutely nothing wrong with it, and improve it. Parts of it will become shorter. Parts will become longer. Here is the page in question. The Doctype From the top: This is called the “doctype.” Microsoft came up with a novel solution. This idea spread like wildfire, and soon all major browsers had two modes: “quirks mode” and “standards mode.” In his seminal work, Activating Browser Modes with Doctype, Henri Sivonen summarizes the different modes: Quirks Mode In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. (You should read the rest of Henri’s article, because I’m simplifying immensely here. Now then. That happens to be one of the 15 doctypes that trigger “standards mode” in all modern browsers. This is the HTML5 doctype: That’s it. The Root Element The <head> Element <!
Top 10 Joomla Extensions When it comes to website creation, Joomla represents a great option for beginning and advanced webmasters alike. Combining the ease-of-use of WordPress with the functionality of the Drupal CMS, Joomla makes it easy to create and manage professional-looking websites. However, “out of the box” Joomla is missing many of the features deemed essential by today’s business owners. To expand your Joomla site, you’ll need to add extensions. For a few of our favorite options, check out the following popular Joomla add-ons: Extension #1 – K2 Although Joomla has plenty of different advantages, ease of content editing isn’t one of them – at least, not without the K2 extension. Extension #2 – SH404SEF Though its title may look nonsensical, the SH404SEF extension is a powerful solution for turning your Joomla site into an SEO powerhouse. Extension #3 – JCE Editor Not a technically-minded developer? Extension #4 – Mobile Joomla Extension #5 – SwMenu Extension #6 – FrontPage Slideshow Extension #7 – XMAP
HTML5 Canvas Demos and Applications To Make You Say WOW Our today’s post is on HTML5 Canvas Applications and Demos. Being the last day of this calender year, we were bit skeptical on topic to choose. After thinking for quite a while we chose HTML5 Canvas Applications over others as we wanted to portray a different subject. In this post, you will be able to check the power of HTML5. The Most astonishing facet of HTML5 is the HTML5 canvas. The canvas element is a drawable region defined in HTML code with height and width attributes. Advertisement DeviantART muro The tool can be used as a stand-alone web application as well as a lightweight drawing tool for adding pictures to forum comments. More Info on DeviantART muro Super Mario Kart Play JavaScript Super Mario Kart Online. More Info on Super Mario Kart Canvas Cartoon Animation that’s as good as Flash This short animation is as good as Flash, this is surely to amaze you. More Info on Canvas Cartoon Animation that’s as good as Flash Asteroid Belt sample More Info on Asteroid Belt sample Bert’s Breakdown
Build a Neat HTML5 Powered Contact Form In this tutorial, we are going to learn how to create a swanky HTML5 AJAX powered contact form. The form will use some of the new HTML5 input elements and attributes, and will be validated using the browser's built-in form validation. We will use jQuery and Modernizr to help out with the older browsers, and PHP on the server side to validate the input. Step 1: Getting Started To begin, we need to setup our directory and files. For more information on the HTML5 boilerplate check out this guide on Nettuts+. Once downloaded and unpacked, delete everything but index.html and the css and js folders. That's all we need to get started! Step 2: The Form Open index.html, and remove everything within the #container element. This is all the HTML we will need for our form. ul#errors and p#success will be holders for our error and success messages. In HTML5, we do this by adding the 'required' attribute. Enquiry is a standard select element, and message is a typical textarea -- nothing new here.
dygraphs JavaScript Visualization Library The Latest in HTML5 (July 2011) Eric Bidelman ( G+, @ebidel ) Developer Relations Brown Bag ( View this presentation in a nightly build of Chrome, FF, or WebKit. Also, some of this presentation does require Chrome 14+ dev. ) There's a lot this presentation doesn't cover! CSS3 / WebGL / Canvas HTML5 Forms Device Orientation API FileSystem API IndexedDB History API Websockets, Server-Sent Events XHR2 ... OK...then what does it cover? Lesser known gems Smaller APIs for building more powerful web apps One new/sexy API: Web Audio API Things in the pipeline Semantics & Markup <details> / <summary> <details open="open"><summary>Information</summary><p>If your browser supports this element, it should allow you to expand and collapse these details. <form oninput="result.value=a.valueAsNumber + b.valueAsNumber"> 0<input type="range" name="b">100 +<input type="number" name="a"> = <output name="result"></output></form> Semantically highlight parts of your text: Lorem ipsum dolor, adipiscing elit. Speech input
Getting started with HTML5 apps - O'Reilly Radar Building apps in HTML5 and JavaScript may be easier than using other development tools, but there’s still a learning curve. In the following interview, “ Programming HTML5 Applications ” author Zachary Kessin ( @zkessin ) discusses the skills you’ll need — and the mistakes you should avoid — if you want to create solid HTML5 applications. What’s the difference between an HTML5/JavaScript app and a regular website? There isn’t a line you can draw and say that things on this side are “web pages” and on that side they’re “apps.” It’s more of a common-sense definition: Google Docs is an app, Wikipedia is not. That being said, many of the ideas behind apps can be used in web pages to improve the user experience. How much programming experience do you need to take on HTML5 app development? There are two key things you need. What are most common mistakes you see in HTML5/JavaScript apps? Directly using the DOM . Overuse of the global name space, by design or not understanding things.
The ultimate HTML5 resource guide Despite the fact that the HTML5 specification won’t officially be finished until 2022, (though it will be mostly finalized by 2014), a lot of designers are already diving into the parts of HTML5 that currently have support in modern browsers. HTML5 opens up some whole new avenues for web design and web application development, things that were previously only possible with either JavaScript or Flash. Here we’ve rounded up 175 refsources for learning HTML5. Included below are tutorials, frameworks, examples, and a lot more. Feel free to share more high-quality resources in the comments! Basic tutorials HTML5 Tutorial A very basic tutorial from W3sbchools.com. HTML5 for Beginners. 28 HTML5 Features, Tips, and Techniques You Must Know A collection of very useful HTML5 tips from Nettuts+. Introduction to HTML5 A 40-minute video tutorial from Google employee Brad Neuberg. Quick Tip: HTML5 Features You Should be Using Right Now A screencast from Nettuts+. Learning to Love HTML5 HTML5: The Basics (1 of 4)
HTML 5 data- Attributes A new feature being introduced in HTML 5 is the addition of custom data attributes. This is a, seemingly, bizarre addition to the specification – but actually provides a number of useful benefits. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example: <li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b><span>Hello, how are you? The above will be perfectly valid HTML 5. Using HTML, but with a custom DTD.Using XHTML, with a specific namespace. On top of this a simple JavaScript API is presented to access these attribute values (in addition to the normal get/setAttribute): Comments are closed.