JavaScript

A nice feature that appears on some sites is the ability to have realtime search results. You have a search input that as you type the results update dynamically below without the need tho hit return/enter. However, if to achieve this the form's default behaviour to submit is disabled, on mobile and tablet the onscreen keyboard won't close on return. This can be confusing to the end-user.

To get round this we can listen for the return key being pressed and removing the focus on the input field using the blur event.

Nice little runthrough of what void means in JavaScript and TypeScript by Stefan Baumgartner.

How confident are you about deploying to production on a Friday? Should it really be an issue if you have the right tests in place? Chris Coyier’s Make it hard to screw up driven development post is well worth a read if you want to make your code safer to deploy at the end of a working week.

Addy Osmani takes a look at the loading priorities for JavaScript in Chrome.

A look at how modern JavaScript scopes variables and a look at declaring variables using var, let and const.

An article on using Amazon’s AWS service for processing videos I recently put together for Evoluted’s Think Tank website.

I regularly work on medium to large scale websites using both Laravel and CakePHP. A common part of the development process is building in some additional JavaScript functionality to improve the user experience. This can often be functionality that is only relevant to specific pages. For a example, on an ecommerce site the checkout process may consist of several steps each with functionality unique to that page; the basket step may need the ability to update quantities and totals whilst the payment screen may need to toggle fields depending on the card type.

Earlier this week I was helping a colleague write some vanilla JavaScript to prevent a form from being submitted multiple times by an overzealous button clicker. The solution needed to be some framework-free JavaScript code. Thankfully this is pretty simple to do, so I thought I’d share some of the options here.

TinyMCE’s pagebreak plugin is a handy way of providing users a way of marking breaks in content by placing a HTML comment in the source code denoting the break. However, if you are using the editor’s valid_elements attribute to restrict HTML elements used in the content (a good idea if you don’t want all sorts of messy markup getting added) you need to make sure you allow comment tags.