Web Components have really come a long way since they were first introduced, but one aspect of components that could really change how we code websites is HTML Imports. This way of working allows us to import HTML documents into other HTML documents. It was possible with Ajax, but HTML Imports is a cleaner method. Browser support ... HTML Imports are a very new technology and as of the time of writing, are only supported in Chrome 31 and later. Even then, you’re required to activate the feature. To do so...
Using CSS we can create all kinds of animations. Whether we’re working with text or with elements, animations and transitions are a much simpler task with CSS. It’s all possible with vanilla CSS, but there are a number of plugins that make our life simpler, one of which we’re going to look at today: Textillate.js. Getting started ... In order to start using this plugin we need firstly to head over to its website and download the latest version. One thing to keep in mind is that this plugin has 3 dependencies:...
File uploads are something that, as developers, we have had to do for years and getting an ajax file uploader is always a better choice than redirecting the user to an upload page or even just reloading the page; keeping the user on the same page will improve the usability of your application. Today we will be creating a simple ajax file uploader with drag and drop support. The plugin ... In this example I will be using the jQuery Upload File Plugin because it’s a simple to use and robust plugin that will get...
A look we’ve seen utilized on a lot of sites recently is the sticky sidebar. That’s a sidebar that scrolls normally until it reaches the top of the screen, at which point it attaches itself to top of the viewport until you scroll back up the page. It’s an interesting piece of usability because it keeps the user in contact with a particular piece of navigation (often social media buttons). So today, we’re going to have a look at building a sticky sidebar using some simple jQuery and CSS. The HTML ......
Instagram is widely used, with literally millions of people constantly uploading pictures. It makes sense, with such a large user base, to create an API. Today we’ll be looking into how to use it. Authentication ... The first thing you need to do is to register as a developer with Instagram. You’ll need to register your application name, a description, your website and a redirect URL. After you’ve done this you’ll receive your Client ID and Client Secret, but this is where it gets a little tricky;...
In the last couple of months we’ve seen API after API being released, many of which make life easier. Today we’re going to focus on the Speech Synthesis API, which uses system libraries to speak, whatever you want, making the Web considerably more accessible. Browser support ... This API is fairly new, so not widely supported. Currently only Chrome Canary and Safari support it. (Safari supports it on desktop and mobile.) So, we can play with the API, but it’s not production ready unless we have...
With the introduction of CSS3 we’ve seen huge advancements in web technology, and the last few years have felt like golden ones for anyone working on the Web. One great addition that hasn’t been talked up enough is viewport units. They’re anew kind of CSS3 unit that allow you to size elements relative to the viewport. Browser support ... The browser support for viewport units is surprisingly good. There’s full support in all the latest desktop browsers. IE has had full support since IE9 (although...
We’re all used to browser notifications; we get them all the time on sites like Facebook and now, using the Notification API, we can actually push notifications to the desktop. Imagine a site performing a task whilst the user checks her email, she would still receive our completion notification on her desktop. Browser support ... At present, the Notification API is a working draft, so it’s not universally supported. However, it is supported by Chrome, Mozilla and Safari. Even more helpfully,...