SPECIAL OFFER: Only $59 for access to everything in OSTraining for 1 year! You save $85!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

| Coding Tutorials
Automatic Popups with the jQuery bPopup Plugin

One of our users asked for a way to open a modal pop-up automatically when a page loads.

In this tutorial, I'm going to show you how to create a pop-up with those requirements by using the jQuery bPopup plugin.

Read more ...

| Coding Tutorials
Firefox error: OCSP Stapling Failing Intermittently

For a couple of weeks, we had wrestled with a sec_error_ocsp_unauthorized_request error on our site in Firefox.

The error only appeared intermittently and for a short time. That made it difficult to replicate and to debug.

To top it all off, we couldn't find any documentation from anyone experiencing the same issue. So, now that we've finally resolved the issue, we figured we should write up the solution, in the hope that it might save someone else hours of debugging.

Read more ...

| Coding Tutorials
OKZoom jQuery Plugin

Would you like to allow your users to use a "magnifying glass" to zoom in and see your site's images in detail?

A magniying glass effect is really popular in ecommerce sites, because it allows customers to see all the close-up details before they buy.

In this tutorial, I'm going show you how to use the OKZoom jQuery plugin, the easiest way to create a circular zoom effect for your images.

Read more ...

| Coding Tutorials
How to Create an Sticky Element with CSS

The CSS position property defines the type of positioning for an HTML element on a website.

If you want to position an HTML element so that it is always in the same place on the page (even as a user scrolls down), you can use fixed positioning.

In this tutorial, I'm going show you how to display fixed elements.

Read more ...

| Coding Tutorials
jQuery Shakker Plugin

Adding a shaking effect to your images is an "interesting" way to get attention.

I'm going to show you how to create a simple shaking effect for your images, using the jQuery Shakker plugin.

Read more ...

| Coding Tutorials
Circled Images with CSS

One of our members wanted to display circled images in his website.

In this tutorial, I'm going to show you how to use CSS to get the desired result.

Read more ...

| Coding Tutorials
htaccess redirections

.htaccess provides an easy way to replace old or broken links with a new url.

In this tutorial we will show you how this process works for Joomla, WordPress and Drupal.

Read more ...

| Coding Tutorials
custom map

One of our members asked how to create a map with custom points to highlight specific areas.

In this tutorial, I'll show you how to create custom maps by using the Image-Maps online tool.

Read more ...

| Coding Tutorials
How to Fix Design Issues in Internet Explorer 10 and 11

One of our members needed to fix an issue for a site in Internet Explorer 11. At the same time, he wanted to avoid changes that might mess up other browsers. The site looks fine in Firefox, Chrome, Safari and Opera.

In this tutorial, I'll show you how to add custom CSS for just Internet Explorer 10 and 11.

Read more ...

| Coding Tutorials
How to Find Your Site htaccess File in cPanel

"Where is my .htaccess file?"

This is a problem that we've helped resolve over and over again at OSTraining.

The .htaccess file is absolutely crucial for the correct operation of many sites, whether they're running WordPress, Drupal, Joomla or similar platforms. The .htaccess file controls the URLs for sites and also adds many important security features.

Today, one more user was having trouble finding their .htaccess file, so we created this tutorial for her.

Read more ...

| Coding Tutorials
android debug

Google's Chrome browser includes DevTools, a built-in feature similar to Firebug.

DevTools is really helpful for debugging CSS problems ... on a desktop computer. However, DevTools is not available for mobile devices.

In this tutorial, I'm going to show you how to use the Chrome Canary browser to debug CSS on your Android phone. Chrome Canary is a version of the normal Chrome browser, but it is modified specifically for developers.

Read more ...

| Coding Tutorials
cropp images

One of the biggest factors to a slow page load is unoptimized image sizes. The bigger the image, the more time it takes the browser to load it.

This tutorial will show you the two free tools that I use to optimize images quickly.

These services will be useful whether you use WordPress, Drupal, Joomla or any other platform.

Read more ...

| Coding Tutorials
google

Many website owners have recently received an email from Google with the title, "Googlebot cannot access CSS and JS files".

It doesn't matter whether you're running WordPress, Drupal, Joomla or another platform entirely. Google has sent these emails to 100,000's of sites.

I'm going explain the issue that Google is complaining and how you can resolve it.

Read more ...

| Coding Tutorials
phpmyadmin

Whether you run your site on Joomla, Drupal, WordPress or anything else that uses PHP, there's a good chance you've come across phpMyAdmin.

phpMyAdmin is an easy way to browse, interact and modify your data. You can even export and import it. That's what Topher shows you how to do in this video.

If you need to move your whole site, or just export small snippets of your data, you'll find this video to be very useful.

Read more ...

| Coding Tutorials
How to Redirect non-WWW to WWW in Joomla

Web development has a lot of nuances that are learned along the way. One of those is that www and non-www URLs are technically different and that it could hurt your SEO if you keep both around.

For example, the domains https://www.ostraining.com and https://ostraining.com (note the "www" in one but not the other) are technically different. However, if you click on either, they'll redirect to the same place, which is a good thing. It helps Google and other search engines to only index one and to not split results.

Read more ...

| Coding Tutorials

Arrays are wonderful ways to organize and use data in PHP.

Quite simply, an array is a list.

Here’s a quick example of an array of types of transportation:

$transportation = array( ‘Planes’, ‘Trains’, ‘Automobiles’ );

For readability you can write it like this as well:

$transportation = array(

    ‘Planes’,

    ‘Trains’,

    ‘Automobiles’

);

Read more ...

| Coding Tutorials

Polymer is a library created by Google that makes it easier to create elements.

Elements are reusable sections of code that makes it much easier to implement consistent, good practices. Sometimes elements are created by web standards bodies such as the W3C, but you can also make your own elements for your own projects.

In this tutorial, I'm going to show you how to use the Polymer library to build your own elements.

polymer

Read more ...

| Coding Tutorials

honeypot We recently released an awesome plugin named OSpam-a-not. This extension protects your forms from a flood of spam. At the moment it's only available for Joomla, but also we have plans to release a WordPress version.

The good news is that you can apply part of the OSpam-a-not code in any situation because it uses a "Honeypot" technique.

Read more ...

| Coding Tutorials

php date functionPHP has a wonderful function called date(). It simply returns a date, in the format you request, and you can either print it or store it in a variable for later. On its face the date() function is quite simple, but it can be incredibly flexible as well. Let’s take a look at some options.

The formatting of the date output is controlled simply by giving it some letters, like this:

<?php echo date( ‘j F, Y’ ); ?>

Read more ...

| Coding Tutorials

sftpDo you use FTP to upload files to your website? If so, Topher, our WordPress teacher, has some advice for you.

In this video, he's going to explain why you should never, ever, ever use FTP for anything ever again.

Take Topher's advice. Keep your site safe.

Read more ...

| Coding Tutorials

css transitionCSS3 makes it possible to easily create animations for hover events.

In a previous post, we explained how the hover.css library works and gave a demo of several options.

In this tutorial, we'll give you some basic examples of the transition property to do fade effects for your links. We'll do this by adding in other CSS properties such as color and border.

Read more ...

| Coding Tutorials

hoverCSS3 allows you to add animation to elements such as links. In a previous post about the OSTraining redesign, we showed how CSS3 enabled us to add a small bounce animation to some buttons on our site.

In this tutorial, we'll introduce you to Hover.css, a library by Ian Lunn that makes it really easy to animate hover elements on your site.

Read more ...

| Coding Tutorials

phingAs we've been releasing more code via Alledia.com, we've found ourselves relying more and more on Phing.

Phing is a build system that allows you to use one command to perform a whole group of actions. For example, with one command you could run code and unit tests, and if the tests pass, automatically upload the new code to your servers and make any neccessary database changes.

Without a tool like Phing, your workflow will be repetitive and time-consuming because you’ll need to go through each step manually.

Read more ...

| Coding Tutorials

MailChimp LogoWe recently re-designed this site, and when we did we also decided to run the site entirely over SSL.

Actually moving our site to SSL was relatively simple, but we've found that many web services still struggle to work correctly with SSL.

For example, we found that MailChimp, Feedburner, Amazon, dlvr.it and other RSS services didn't seem to like any feeds served over SSL. We had to tweak our .htaccess file so that our RSS feed doesn't use SSL.

Read more ...

| Coding Tutorials

sass lessManaging CSS files has been a messy affair until CSS preprocessors.

With pre-processors we don't need to scroll to long CSS files or type same things again and again. Managing the styling of complex sites is now much easier thanks to CSS Preprocessors.

There are several CSS preprocessors, but the two most widely used are Less and Sass.

Read more ...

| Coding Tutorials

php-composer-pimpleMoses Ngone is an Atlanta-based developer who is heavily involved in the local communities around webdesign, PHP, app development and more.

So, it's appropriate that this talk from Moses ranges across an incredibly wide range of tools.

Moses shows how you can build applications by taking the best components from many different frameworks.

Read more ...

Page 2 of 3
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!