When starting out with a new platform, such as Shopify, there’s a lot to learn. Whilst Liquid, the template language used in Shopify themes, is very readable and easy to get started with, one area of Shopify development which can often cause confusion for new theme developers is images. I believe the main reason for… Continue reading How to Work With Images in Shopify
Tag: src
A Beginner’s Guide to AJAX with jQuery
In the first article of this series, we covered the fundamentals of AJAX. In the second, we looked at a working example using vanilla JavaScript. In this tutorial, we’ll walk through a few of jQuery’s AJAX-related functions and methods. More specifically, we’ll take a closer look at the shorthand load method and the generic ajax… Continue reading A Beginner’s Guide to AJAX with jQuery
An Example of AJAX with Vanilla Javascript
Following on from our introduction to AJAX, here’s an example which uses the XMLHttpRequest API to initialize an AJAX request. AJAX Example Have a look at the following basic structure: <div> <img src=”http://webdesign.tutsplus.com/Einstein.jpg” alt=”Einstein”> <button id=”request”>Learn more about Einstein</button> <div id=”bio”></div> </div> Also, consider the related visualization: Here’s what we want to happen: when we… Continue reading An Example of AJAX with Vanilla Javascript
Quick Tip: Don’t Forget the “noscript” Element
JavaScript is a powerful language which brings websites to life with interactivity, until that dreaded moment when JavaScript is disabled in the browser, out of the blue. In this quick tip we’ll look at providing fallbacks with the <noscript> element. No JavaScript Users might disable JavaScript for a number of reasons. They might be doing so to… Continue reading Quick Tip: Don’t Forget the “noscript” Element
Quick Tip: Add a Progress Bar to Your Site
Since the advent of mobile, web sites are turning more and more into “apps”. Concepts that make sense for a locally running application are transferred to the web. One of these is the recent addition of “progress bars” to some of Google’s websites that show the loading state of the page. In this quick tip,… Continue reading Quick Tip: Add a Progress Bar to Your Site
Build a Freshly Squeezed Responsive Grid System
I’d like to talk to you about Lemonade. Not the refreshing citrus drink, but a grid system I created. Lemonade is a grid system that was built in order to give designers and developers the confidence to make fully responsive websites, eliminating the frustration of flicking between browsers looking for bugs and errors. Let’s look… Continue reading Build a Freshly Squeezed Responsive Grid System
Beginners Guide to Working with jQuery Animation
In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design. The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the… Continue reading Beginners Guide to Working with jQuery Animation
Build Bootstrap in Minutes Using Emmet
Bootstrap (currently at version 3) is all about rapidly building websites, whether they be prototypes or finished products. In today’s videos we’re going to build ourselves a Bootstrap layout, in record time, usingEmmet‘s powerful time-saving markup syntax. Using Emmet Before we dive into Bootstrap, it’s worth taking a minute to become familiar with what Emmet is… Continue reading Build Bootstrap in Minutes Using Emmet
CSS 3D Image Flip Gallery With Dynamic Shadows
My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows
Icon mouse hover effect using CSS3
This tutorial will show how simple it is to achieve simple animation mouse hover using CSS3. We use transitions and animations css properties to achieve some of the interactive animation. 1. Simple image popup effect using pure CSS3 *{margin:0;padding:0;} body{margin-top:80px;font-size:12px;font-family:arial,sans-serif;color:#9C9C91;background:#fff;} a {color:#333;text-decoration: none;} a:hover {color:#f00;} .wrap {width:720px;background:#f2f2f2;margin:0 auto;} ul.works {list-style:none;margin:0;padding:0;} ul.works li {float:left;display: inline;margin:0 20px… Continue reading Icon mouse hover effect using CSS3
App Showcase with Grid Overlay
Today we will be creating a little app showcase with a neat effect. The idea is to show a mobile device with a screenshot of an app and when clicking on the device, a grid appears, showing some more screenshots. The effect is very subtle: the device moves back and the grid fades in and… Continue reading App Showcase with Grid Overlay
Streamline your Process with Volo
Front-end developers face a variety of challenges when creating sites that have repetitive solutions. All sites use a similar DOM skeleton, as well as many common features and attributes. Volo aims to remove some of the effort out of the process, allowing developers to focus on the new aspects of a project, as apposed to… Continue reading Streamline your Process with Volo
Make a Web App with Instagram-like Filters
In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it. For this purpose we are going to use a number of JavaScript libraries and plugins: Caman.js – this is a powerful canvas manipulation… Continue reading Make a Web App with Instagram-like Filters