SPECIAL OFFER! Get 1 year of access to everything in OSTraining for only $59! You save $85!
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

Google Maps makes it easy to embed a map in your own website.

However, by default, Google Maps doesn't provide responsive support.

In this short tutorial, I'm going to show you how to make your maps responsive, using just a few lines of CSS. This technique will work on any website platform.

Read more ...

| Coding Tutorials
A Beginners Guide to the React Javascript Library

If you spend any time in the WordPress world, you've probably come across Zac Gordon. Zac is an enthusiastic and charming teacher who focuses on Javascript in WordPress. He borrowed the phrase "Learn Javascript Deeply" from Matt Mullenweg and he made it into his personal slogan.

For the last several years, Zac has produced video classes, online conferences, live talks, and podcasts that focus on teaching you how to use Javascript in WordPress.

I'm delighted to say we're working with Zac on a book, "React Explained". React is the library the WordPress team have chose for the new Gutenberg editor. They are not alone - both Drupal and Magento have also chosen React.

Zac is live-tweeting his writing progress at @zgordon on Twitter. You can also hear Zac talk about React on the OSTraining podcast.

In this extract from the book, Zac gives you a high-level overview of React and some key concepts.

Read more ...

| Coding Tutorials
phpMyAdmin logo

One of our members asked us how to update their phpMyAdmin version. They were running it under Windows/XAMPP.

You may not be aware that you are running an old version of phpMyAdmin.

In this tutorial, you will learn how to make sure your phpMyAdmin version is current, both for Windows and Linux.

Read more ...

| Coding Tutorials
How to Create Font Awesome Icons with CSS

Icons on a website are handy. They provide easy visual information, providing links to email forms, telephone numbers, maps and more.

Traditionally these icons have been graphics created using a graphic design programme such as Illustrator or Photoshop or downloaded from the many free graphics sites.

In this tutorial, you will learn how to create icons using just CSS and fonts. This will allow you to edit all your graphics with just a few lines of code. By using font-based graphics you also make your pages lighter and more responsive.

Read more ...

| Coding Tutorials
error 1045 phpmyadmin

After installing a local WAMP server and trying to access your phpMyAdmin, you may encounter the error:

#1045 Access Denied for user 'root'@'localhost' (using password: YES).

This may happen if your root@localhost database user was not granted the necessary rights to access the database. Or if you provided a wrong password.

In this tutorial, you will learn how to solve this error for the WAMP local server using phpMyAdmin.

Read more ...

| Coding Tutorials
jquery

jQuery is, in my humble opinion, the best Javascript library.

Much of jQuery's popularity is due to the fact that it considerably reduces development time. Their slogan is "write less, do more", which is a great summary of jQuery's benefits.

What make jQuery really great are the plugins. Plugins are reusable portions of code which help you write even less Javascript to achieve specific features on the client side. For example, you can use plugins to create slideshows, galleries, popups and more.

In this tutorial, you will learn how to create your own custom jQuery plugin in 4 easy steps. 

Read more ...

| Coding Tutorials
Using Images as Backgrounds with CSS

As a new web designer, one very skill you'll need to master is using background images.

Depending on the design, you may need to completely fill a CSS container with an image, or sometimes the image will just partially fill the container.

In this post, we’ll show you three examples, using the CSS property background-size.

Read more ...

| Coding Tutorials
5 Reasons Not to Require Composer in Your CMS

Some people love Composer. 

They use it to build their PHP projects and manage all the external libraries and dependencies. They love it so much they say things like this: "Composer should be the only way to build a Drupal code base."

That approach is misguided, and I'm going to give you 5 reasons why.

Composer is a great tool, but it's far more limited than some people realize.

I'm going to mostly write about Drupal in this blog post, because it is further down the Composer path than any other CMS. But, some platforms like Magento and Typo3 are headed that way too. 

Read more ...

| Coding Tutorials
Add Responsive YouTube and Vimeo Videos to Any Website

YouTube, Vimeo and other video hosts make it easy to embed their players in your own website.

However, Youtube, Vimeo and others don't provide responsive videos by default.

In this short tutorial, we'll show you how to make YouTube, Vimeo and other videos responsive in your website, using just a few lines of CSS.

Read more ...

| Coding Tutorials
6 Reasons to Choose the Bootstrap CSS Framework

For those of you, who like me have been developing websites for few years, we tend to use similar chunks of CSS code that we copy paste from project to project.

Those of you who are more organized may have developed your own set of base CSS files to use as foundation for your projects. This method works, but let’s face it, this is not the most efficient way to do things.

Read more ...

| Coding Tutorials
How to Submit Your Sitemap to Search Engines - The Easy Way

This tutorial will show you an easy way to submit your sitemap to multiple search engines.

It's a bit of an obscure method, although it's well documented. We'll edit the robots.txt file to insert one line of code. And that's it. An account isn't needed and it's supported by Google, Bing, Yahoo, and Ask.

Let's get started ...

Read more ...

| Coding Tutorials
Responsive Facebook Videos on Any Website

Facebook allows you to embed videos from their site in your own website.

However, by default Facebook videos are not responsive.

In this short tutorial, I'm going to show you how to make your Facebook video embeds responsive by adding a few lines of CSS. Let's start...

Read more ...

| Coding Tutorials
CSS3 Filters

With just a few lines of CSS, you can apply several visual effects to any image on your website without using Photoshop or JavaScript. CSS filters offer the ability to execute site wide or page specific image modifications; that can save you time and requests for graphic design assistance.

Currently, the filter property offers 10 style variations, but we're going to focus on the three most widely used elements: grayscale, blur, and opacity.

Read more ...

| Coding Tutorials
What is a HAR file and How Is It Generated?

HAR files are great for providing additional information about HTTP requests.

Sometimes, when I'm troubleshooting issues on sites, we ask users to send us a HAR file. These are really useful for debugging difficult issues.

This article will help you creating HAR files and give you a little more information about it.

Read more ...

| Coding Tutorials
A Beginners Guide to PHP Download Scripts

Note: The author does not address handling security threats that are associated with the file download. This code is not intended for real-world use, without further security hardening. Please read the comments below for more details. Also, download this file for additional sanitation and security code.


In this tutorial, I'm going to show you how to write a PHP script that allows downloads.

To allow downloads from a server, you need to write a script that can communicate with it effectively.

PHP is a server-side scripting language and is well-designed for this task, with many versatile tools. I'm going to show you how to power the download using the HTTP header function.

Read more ...

| Coding Tutorials
How to Create a Stopwatch in JavaScript

JavaScript stop watch or rather stop down timer can be implemented using the JavaScript timing methods which are executed in time intervals.

JavaScript timing methods automate a particular task to be done on the fly without you having to click a button or call an event.

Read more ...

| Coding Tutorials
Bootstrap Logo

Back in mid-2013, I wrote a post called, "The Bootstrap Boom is Just Getting Started". Looking at the statistics, it was clear that Bootstrap was on its way to becoming very popular indeed.

Three years later, and its obvious that even those optimistic projections underestimated just how popular Bootstrap would become. Not only has Bootstrap grown since 2013. According to a range of statistics, its usage has actually grown by between 800% to 1,000% 

Read more ...

| Coding Tutorials
Using Google URL Shortener tool

An OSTraining member asked how he could add a long external link to their site.

Generally you want to keep URLs short so you can share them and embed them into your page (long URLs can break on small screens).

I recommended the Google URL shortener tool. It's easy to use and can also provide analytics for you.

Read more ...

| Coding Tutorials
10 Ways to Design Your Site for Accessibility

I'm frustrated with modern web design. And I'm certainly frustrated with most theme and template designers who sell their work without checking for global accessibility.

Many designers actually take good, accessible CMSs and then create designs with big accessibility problems.

I'm a lawyer, website designer and accessibility / diversity consultant in Australia. Having advised the corporate, government and education sectors, I find a lot of sites are not accessible and offer many users a bad experience.

Read more ...

| Coding Tutorials
What are .htaccess files ?
An OSTraining member was recently confused about .htaccess files.
 
The member wondered what .htaccess files are for and why some sites use many .htaccess file.
 
So, here is our beginners guide to .htaccess files and how they're used.

Read more ...

| Coding Tutorials
Use the Wistia API and Plugins to Add a Rewind Button

We use Wistia to host all our videos and provide a great viewing experience for our users.

The Wistia platform offers many useful features out-of-the-box, including the design of the player, video controls, social sharing, timeline actions, and more. If you login to your Wistia account, you'll be able to customize all these features using their friendly admin panel.

However, Wistia also has an API that allows you to add your own customizations. From a developer perspective, I want to show you how to take advantage the Wistia API to adding extra features to their video player.

Read more ...

| Coding Tutorials
Columns with CSS using column-count

In previous tutorials, we've explained that it can be dangerous to used HTML widths for your layout.

Fortunately, CSS is powerful enough to mimic any old-fashioned HTML. For example, you can easily create columns in CSS using the column-count property. This can be very useful for whole site layouts, but also to split long texts into columns.

In this short tutorial, I'll show you how to create columns using column-count.

Read more ...

| Coding Tutorials
CSS Selectors to Customize Your Site's Design

Many OSTraining members want to update elements of their site's design and need to use custom CSS.

The key is the CSS selector, which allows you to target specific elements such as a link, an image or a div.

In this tutorial, I'm going to show you which type of selectors to use, and how to find them with Firebug.

Read more ...

| Coding Tutorials
Easy Flip Effects with jQuery Flip Plugin

Have you seen websites where photos of the staff members flip over? You hover your mouse over the picture of the staff member and the image flips over to reveal the staff member's name.

Sounds difficult? Thanks to the jQuery Flip plugin and a bit of CSS, this effect is easy to achieve.

To create a flip animation with HTML, you need to create two containers: the front (visible) and the back (hidden), then apply a little CSS and Javascript.

Read more ...

| Coding Tutorials
404 Error When Using Htpasswd

One of our Pro support members was having trouble getting into the admin section of his website. He was getting a 404 error. No recent changes had been made to the site and it was working fine a few days ago.

We debugged the issue for him and it ended up being an issue with an Apache update and an incompatible htaccess/htpasswd rule. This tutorial will show you the fix.

Read more ...

| Coding Tutorials
Don't Use Tables with Static Pixel-Width!

Yes, it is still acceptable to use tables in your website. Just remember to use tables for their intended purpose (showing data in rows and columns) rather than for layouts.

However, be careful when designing tables, especially when your width property uses px. Why? It can break the responsive design of your site, especially on mobile devices.

In this post, I'll show you how to fix this issue.

Read more ...

| Coding Tutorials
How to Extract Images from a URL with PHP

There are various ways to scrape information from other websites, including JSON and RSS. However, it's also possible to build a scraper using PHP.

With regular expressions you can extract portions of content such as images, text and metadata.

Why would you do this? In one example, I built a WordPress site that automatically generates new posts every day by crawling the content of my Facebook page. You should be able to do the same on Joomla, Drupal or any other CMS you use.

In this post, I'll share with you the code to extract images from a URL by using the file_get_contents() and preg_match_all() functions.

Read more ...

| Coding Tutorials
Responsive Vines with Square Aspect Ration

Vines are funny, short videos that many people want to share on the site.

To embed a Vine in your site you need the HTML code from the provider, however if the CSS of your website doesn't include responsive support for a square (1:1) aspect ratio, then your Vines will look distorted in mobile devices.

In this tutorial, we'll show you how to insert Vines in your site and include responsive support in the right way, by using a few lines of CSS.

Read more ...

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

Page 1 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!