Category: LouisL

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is … a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in...

Building a 3D Rotating Carousel with CSS and JavaScript

A lot has been said on the use of traditional 2D carousels, for example this piece on Smashing Magazine covers this subject. There’s no simple yes or no answer to the ‘should I use a carousel?’ question; it depends on the particular situation. When I started researching this topic, I didn’t need a 3D carousel, ...

20+ Docs and Guides for Front-end Developers (No. 12)

It’s that time again to get learning! As before, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help you get up to speed in different areas of front-end development. So please enjoy the twelfth installment of our Docs and Guides series and don’t forge...

Introduction to jCanvas: jQuery Meets HTML5 Canvas

HTML5 lets you draw graphics straight into your web page using the <canvas> element and its related JavaScript API. In this post, I’m going to introduce you to jCanvas, a free and open source jQuery-based library for the HTML5 Canvas API. If you develop with jQuery, jCanvas makes it easier and quicker to cod...

20+ Docs and Guides for Front-end Developers (No. 7)

As is often the case in front-end development, it seems we have so much to learn and so little time to do it. I’ve rounded up another 20+ learning resources, interactive playgrounds, and other goodies for front-end learning. So please enjoy the seventh installment of our Docs and Guides series and don’t forget to l...

Front-end Tools: Some of My Favorite Finds of 2015

We’re just about at the end of 2015 and I’m sure you’d all agree it’s been another year jam-packed with new tools for web design and development. While doing my newsletter I’ve come across lots of interesting things, so I thought it would be cool to summarize some of my favorite finds in a year-end post. Befo...

DOM Tips and Techniques: Parent, Child, and Siblings

Complex, markup-heavy web apps are the norm nowadays. A library like jQuery with its ease of use, cross-browser compatibility, and variety of features can help immensely when manipulating HTML on the fly. So it’s no wonder that a lot of developers choose to use such a library rather than native DOM APIs which have be...

Using HTML5’s Native Drag and Drop API

Everyone loves an easy-to-use and interactive user interface and ever since the introduction of smartphones there has been a jump in expectations from users; The expectation is that your website will be intuitive, will use universally understood actions, and overall proving an easy way to engage with your site. Giving ...

20+ Docs and Guides for Front-end Developers (No. 6)

It’s that time again to choose the tool or technology that you want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back. Please enjoy the sixth installment of our Docs and Guides series and don’t forget to let us know of any ot...

A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load. But before digging into those extensions, let’s start by creating a carousel based on the...