Realtime Chat with Node.js
In this tutorial, we are going to build a realtime chat system with Node.js and the socket.io library. The chat permits users to create private chat rooms that they can share with a friend. For avatars, we will use gravatar. You can run the chat locally with node, or push it to heroku or a different cloud service provider.
Code a Single-Page Sliding Website Layout With Fixed Navigation
In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.
Build an HTML5 Form With on-Off Input Sliders Using jQuery
How to Easily Manage Cookies Within jQuery
I want to explain how we can build a very simple authentication system using jQuery Cookies. The code is all handled on the frontend but you will need a live testing server to see any results. Browser cookies are created on the local IP which comes from the web server, and so unfortunately you can’t just run these scripts locally. But definitely check out my live demo to get an idea of what we are creating.
15 Tips for Creating a Great Website Footer
One of the most important locations on your website is the footer. Yes, seriously. It may not be the area of the greatest design or most impressive content but it is a place where users frequently look for information. So it is vitally important that you don’t neglect this area when planning a web design project.
Build a Sliding Client Testimonials Carousel With jQuery
In this tutorial I want to demonstrate two distinct styles of rotating carousels. The first is a testimonial box which includes a small quote talking about the services. Then I’ve constructed a long horizontal carousel that rotates through a list of company logos. These would normally be companies you have done business with – but may also include corporate partners or resources.
Creating Instagram-Style Photo Filters With jQuery
In this tutorial I want to demonstrate how to build a simple Instagram-style filter webapp using jQuery. The library is called CamanJS which is easily extendable to create your own filter plugins. This doesn’t require jQuery but I’ve chosen to use it for a simpler development environment. Take a look at my live sample demo to understand the goal of this tutorial.
List Files and Directories with PHP
In this article I’ll talk about a common task you might have experienced while developing a PHP application: listing files and directories. I’ll discuss several basic and advanced solutions, each having its pros and cons. First I’ll present three approaches that use some very basic PHP functions and then progress to more robust ones which make use of SPL Iterators.
Create inline help tips for your site with a bit of CSS
When creating a web app, you often need to present people with friendly help prompts that explain parts of your interface. One of the ways to do it is to have separate pages with help topics that you link to. However, this causes people to lose context of what they are doing and is not very user friendly.
A better way is to show help text right where it is needed. Here is how to do it only with a few CSS rules and a tiny bit of HTML!
Building HTML5 and CSS3 Anchor Link Tooltips
In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field).
Drop Caps and Paragraph Text Effects Using CSS3
In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.
Understanding and Working With Aspect Ratio
Every image, every canvas, every frame has a shape. And often that shape is a rectangle. Even more common is a rectangle of a particular proportion based on medium.
From cameras to television to movies to computer screens, every medium has an almost distinct shape on to itself. That can be a challenge for designers, especially when you have to crop and convert content and information to fit a variety of mediums. Because of all these different shapes, understanding aspect ratios can help you easily move images and designs from one medium to another.
Positioning Content using CSS
One of the best things about CSS is that it gives us the ability to position content and elements on a page in nearly any imaginable way, bringing structure to our designs and helping make content more digestible.
There are a few different types of positioning within CSS, and each has its own application. In this chapter we’re going to take a look at a few different use cases—creating reusable layouts and uniquely positioning one-off elements—and describe a few ways to go about each.
CSS and HTML Preprocessors
In time writing HTML and CSS may feel a bit taxing, requiring a lot of the same tasks to be completed over and over again. Tasks such as closing tags in HTML or repetitively having to looking up hexadecimal color values in CSS. These different tasks, while commonly small, do add up to quite a bit of inefficiency. Fortunately these, and a handful of other inefficiencies, have been recognized and preprocessor solutions have risen to the challenge.
Complex CSS Selectors
Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.
Up until recently the focus of CSS never really touched on selectors. Occasionally there would be incremental updates within the selectors specification, but never any real ground breaking improvements. Fortunately, more attention has been given to selectors as of late, taking a look at how to select different types of elements and elements in different states of use.
Detailed Positioning : CSS Tutorial
In this lesson, we’ll start by taking a look at how to contain floats. Following that, we’ll cover more detailed positioning techniques, including how to precisely position elements on both the x and y axis as well as the z axis.
100+ unicode symbols that you can use
Ever needed to add an icon to your design, but you didn’t want to include images or an entire icon font like Font Awesome into your page? We’ve got good news for you – there is a vast library of available icons and glyphs already in your browser. It is called Unicode, and it is a standard which assigns a unique identifier for an ever expanding number (currently over 110 000) of characters, symbols and icons.
Creating Your First Node.js Command-line Application
In this tutorial, we will convert our Cute File Browser, which we published last week, from PHP to Node. Our goal is to create a command line utility that users can start on their machine and make any folder available on the local network. This can be used in a home or office setting to quickly share a folder with files to everybody on the same network.
A Complete Guide to Flexbox
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Using CSS flexible boxes
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.