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

github pagesAll developers know Github as service that enables code sharing and also helps you improve your code by using version control.

However, did you know that Github also offers Github Pages, a completely free hosting service?

In this tutorial, I'll show you how to host a simple HTML website for free using Github.

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

ssl htaccessHopefully you saw that we redesigned our site at the end of June.

With the new design, we also decided to move the site to run entirely over SSL.

It had become a real pain to run some of the site over https and some over http. Running the whole site over SSL makes our life much easier and has security benefits for you, our users.

Here's the code we used in our .htaccess to push (nearly all of the site) to https.

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

| Coding Tutorials

server-stackNic Rosental is a developer based in Atlanta and he recently gave a great presentation on how to build a really fast server stack.

Nic defines a stack as, "The components that make up your application. From the web server to the code."

Nic starts with a LAMP stack (Linux, Apache, MySQL, PHP). He explains that the normal LAMP stack isn't optimized for speed and then he goes to look at a wide variety of server setups and tools.

During the presentation he compares PHP 5.3 to PHP 5.5 for speed. If you use PHP at all, you really should watch and see how much faster 5.5 is.

Read more ...

| Coding Tutorials

cms-source-codeWordPress, Joomla, and Drupal are primarily powered by PHP.

However, as a user on a website, we don't actually see what's going on behind the scenes in the server. We only get the final output from the server, which is in the form of HTML, CSS, and Javascript. That's the code that creates the webpage that we see.

Read more ...

| Coding Tutorials

flexboxCreating columns can be a tricky task in webdesign.

For many year webdesigners used tables to show content in columns. More recently, designers have been using CSS floats.

Flexbox is a CSS property that makes it possible display content in columns without the need of using floats or tables.

In this tutorial, we'll show you how to get started with this useful CSS feature.

Read more ...

| Coding Tutorials

AngularJS logo

One of our predictions for 2014 was that traditional CMS's will become much more reliant on Javascript.

That prediction is coming true, and AngularJS is at the forefront of this change.

AngularJS in a Javascript framework created by Google. The goal of the Google team was to add model–view–controller (MVC) capabilities to web applications so that both development and testing could be made easier.

In this video, Douglas walks you through the fundamentals of Angular so that you'll have a good idea of how Angular works and a clear understanding of how to get started.

Read more ...

| Coding Tutorials

browser iconsIs your website running slowly? Does your site have a lot of repeat visitors? Browser caching is one tool to help your site load much more quickly.

Every time someone looks at a page or an image the browser keeps a copy of it. Then if you request that page again within a certain amount of time, rather than run out to the internet to grab a new copy, it just gives you the locally saved version. This make the internet feel much faster.

Read more ...

| Coding Tutorials

SecurityOver the last few years, our websites have been subject to regular attacks. One of the most common attacks was sending bots to repeatedly attempt to login to our admin area. Some of the attacks were severe enough to slow or crash our website.

We've stopped those attacks from happening by creating an additional layer of security for our admin areas.

We keep hackers out of your admin area is to create an additional username and password via a file called htpasswd. That extra password screen prevents the bots from reaching our admin login and has eliminated problems with repeated login attempts.

This tutorial will show you how to do that in three easy steps. Let's get started.

Read more ...

| Coding Tutorials

fullscreenMany years ago, when flash websites were popular and no-one cared about SEO, websites often went fullscreen.

A fullscreen website would hide all the browser elements such as address bar and bookmarks menu.

Thanks to the jQuery.fullscreen plugin, you can add this feature to your non-Flash websites. 

Here's how to use the jQuery.fullscreen plugin:

Read more ...

| Coding Tutorials

phpmyadminOne common question we hear from our members is this:

"My hosting company tells me my database is too large. But, I'm not sure what's causing it."

Here is an easy way to find out why your database has grown so large:

Read more ...

| Coding Tutorials

youtube embed codeThis tutorial will show you how to embed YouTube videos directly into your site without a plugin.

There's a mantra in CMS communities, that goes something along the lines of "There's a plugin for that." However, adding many plugins can make it more difficult to manage the site in the long term, as well as cause conflicts at times. One of the most common examples of this is YouTube plugins. While many of them can be very useful, they are sometimes not flexible enough or cause unintended issues.

The solution is simple, but I've found that many site admins don't know about it and instead opt to link to the video, rather embedding it into their website.

EmbedPress - WordPress Embed YouTube Videos If you're using WordPress, we highly recommend you check out the EmbedPress plugin. You can create advanced, responsive YouTube embeds, using just the URL.

Download EmbedPress

Let's get started.

Read more ...

| Coding Tutorials

Speech RecognitionIt's increasingly common to control your devices using speech.

Google has speech recognition built into the Chrome browser. Apple and other Android manufacturers have voice control built into their cell phones.

Now, thanks to annyang!, you can add voice control to your website. annyang! is a tiny javascript library that's really easy to add to your site.

In this tutorial, you will learn how to use this library doing a quick example.

Read more ...

| Coding Tutorials

Using Bootstrap the Right / Semantic WayBack in the year 2000, when I first started learning web development, tables were my best friend.

The web was filled with <tr> and <td> and semantics were non-existent. Images were broken down and placed in bits & pieces inside different table cells.

Things changed in mid-2003 when I came across a site csszengarden.com. This site showcased the new and the right way of doing things, which was to separate content & presentation. After all, that is the reason CSS was created in the first place.

Read more ...

| Coding Tutorials

firefox-osOpen web apps are here thanks to Firefox OS, which makes it possible to build apps with only HTML, Javascript and CSS.

This is a great advantage for web developers who don't want to code for iOS or Android devices.

In this tutorial, we'll show you how to convert your existing responsive website into an app that can run on Firefox OS devices.

Read more ...

| Coding Tutorials

font-squirrelIn the early days of the web, the number of fonts in websites was limited. This was due to the font files that were installed in the visitor's computer.

The most famous fonts are Arial, Helvetica and Calibri because Windows and Macs often included only those fonts by default.

Read more ...

| Coding Tutorials

logofilezillaFileZilla is one of the most popular FTP clients.

The main purpose of Filezilla is to make it easy for you to upload and download files from your web hosting server.

You can also edit the files and save changes without the need of manually downloading and uploading.

FileZilla supports Mac, Windows and Linux. 

This is an intoductory tutorial for people who are new to using FTP software.

Read more ...

| Coding Tutorials

BootstrapBootstrap is an enormously popular CSS framework.

UPDATE: Firebug is not supported anymore. Please try Dev Tools in Firefox, or Developer Tools in Chrome instead.

Last week, we outlined 6 reasons why so many people love using it.

This week, we have a quick tip from our forthcoming Joomla 3 and Bootstrap class.

VIcki Watson shows us how to use the Firebug plugin for Firefox to diagnose and fix problems with Bootstrap sites:

Read more ...

| Coding Tutorials

accessibilityAccessible websites allow users with disabilities to navigate the web and access information. A disabled user may be blind, have a motor disability, dyslexia, or a range of other disabilities that make web navigation difficult. Most users with disabilities will access the web using adaptive equipment, such as a screen reader or refreshable Braille display. Many will not use a mouse.

And these disabled users make up around 10-20% of Internet users in most countries, so creating websites with them in mind will have a positive effect on your bottom line.

Read more ...

| Coding Tutorials

lessCSS is a simple language. It allows us to style properties of HTML elements using selectors. This makes it easy for beginners to get started with CSS.

However, as the size of your web projects grow, you end up repeating much of your CSS code. If you face this issue, then it's time to use a CSS preprocessor.

In this tutorial, we're going to explain what a CSS preprocessor is. We'll also introduce you to one of the most popular CSS preprocessors: LESS.

Read more ...

| Coding Tutorials
tutuploadsphp.gif

A critical file you often need to manage is the php.ini file. It controls many import aspects of what you can and can not do with your site, including the size of files that you can upload.

Different hosts use different schemes for storing and accessing files and so you'll need to research where your php.ini file.

This tutorial will show you how to find the location of the file on any server.

Read more ...

| Coding Tutorials

UPDATE: Firebug is not supported anymore. Please try Dev Tools in Firefox, or Developer Tools in Chrome instead.

As templates and themes become more complicated, it can also become more difficult to find and replace images. The most likely image you'll want to replace is the logo.

We're going to show you a technique to find and replace logos. Though the technique requires a few steps, it should help you track down almost any image you need to find.

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!