How to use Gumby components

In our last article about Gumby you saw the fundamentals of this robust framework, but we also have a lot of JavaScript components we can use via the JavaScript UI for Gumby. Today, we’ll take a look at these components. Toggles & switches ... A lot of what Gumby focuses on is minimizing the amount of JavaScript we need to write. Toggles and switches look at the gumby-trigger attribute and the element you enter as the value of this attribute will have the .active class toggled. You can use this to toggle...

How to create a jQuery file uploader

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...

Introducing your new favorite framework: Gumby

As web developers, it’s usual to have a favorite framework that we use for virtually every project. There are certainly plenty to choose from. Today I’d like to try and persuade you to switch to one of mine. Gumby is a flexible framework developed with Sass that comes with a whole bunch of extensions and JavaScript helpers. It’s been growing in popularity for some time and for good reasons. The grid ... The first thing to check out when considering a framework is the grid system being used by the framework....
CSS

How to style file input fields

One area we always have some difficulty when it comes to styling is input fields and in particular the file input. This type of input doesn't usually allow for much customization but with some JavaScript tricks we can create our own file input that matches our website's look and feel.   The HTML ... Using the default HTML element for file input we can't create much so in this article we will create our file input that will be hidden and we will create another button that with some javascript magic will...

Introducing Gulp.js

If you use a task runner in your workflow you’ll know why they are so useful in coding; they improve our workflow and allow us to focus on problem solving rather than repetitive data entry. Gulp is one such application and it has a lot of benefits to it. There’s a really simple syntax, no messy JavaScript files, a simple API and a wide variety of plugins. Installing Gulp ... As you’ll suspect if you’ve used a utility like this before, you need to have NodeJS and npm installed on your system, once you...

How to employ test driven JavaScript using QUnit

Test driven development is now widely accepted as a JavaScript workflow, and it’s something we should all embrace because it saves us a great deal of time when coding. In this article I’ll introduce you to QUnit, a testing framework that will help you spot errors and bugs in your code. Why use test driven development? ... At first, this process may seem complex and tedious. Creating a test for all of your functions does take some time, but it will save you hours of debugging at the end of the project cycle....

How to create a sticky sidebar

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 ......

How to use Handlebars

Nowadays websites rely more and more on JavaScript to create dynamic interfaces, for some sites you may only need something like jQuery that works wonders when it comes to DOM manipulation but other times a template system may be more suitable, especially if your page will be constantly updating its data. Handlebars helps you with that by dynamically generating your HTML. It helps you get into using the View/Controller pattern while keeping your code cleaner and more maintainable. Using Handlebars...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress