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!

CSS Animations give your site and/or brand a unique touch, provide more accessibility, help create affordance (the perception about how an element inside the design is to be used), and can provide the user with a better experience. All this happens when animations are designed and used the right way.

Subtle animations in a web site, point the user to certain tasks to be accomplished, like clicking a call-to-action link or filling out a form. Other animations, like a loading icon inside a button, make the user understand what they need to do, like wait while the next page loads.

This tutorial will explain the concept of animations with a simple example. Let’s start!

Read more ...

| Joomla

Do you edit a particular article on a regular basis?

Do you ever make mistakes and hit Save and Close too quickly?

If you answered "Yes" to either question, then there is a Joomla feature that you really need to use.

Read more ...

| Drupal

Contextual filters in Drupal allow you to add or remove information (content) to the currently displayed view. The filter acts dynamically based on the URL.

If the provided argument value is in the URL, the view will contain certain results, if the value is not in the URL, the view will be filtered with other results.

This whole concept implies certain complexity, so the best way to clarify it is with an example. 

Keep reading if you want to grasp the idea behind contextual filters in Drupal 8!

Read more ...

| Podcasts

In this first episode of season 2, we're happy to welcome Miguel Balparda of Nexcess to talk about Magento 2.

Miguel is a globe trotting ambassador for Magento and for Nexcess. If you've been to a Magento event, there's at least a 50/50 chance that you've run into Miguel. He lives in Argentina, but is on an airplane traveling the world for Magento most of the year.

We kicked off the podcast by asking Miguel about the changes that he's seen in the Magento community since the purchase by Adobe and - spoiler alert: There've been a lot!  And then we talk about some of the work he does working with the Adobe team to keep Magento going and particularly to develop some of the front facing headless JavaScript based features that are increasingly common with more high profile and more difficult website builds.

Read more ...

The ecommerce industry has evolved since Magento was first released over a decade ago. In 2008, shoppers visited stores on desktop machines. They were tolerant of slow-loading pages and complicated checkouts because ecommerce itself was a novelty. Apple released the first iPhone just a few months earlier, and smartphones were nowhere near as sophisticated or ubiquitous as they later became.

Today, over half of all web traffic is mobile. In many stores, most purchases are made from mobile devices. Shoppers search on mobile and expect to be able to buy on mobile too. They demand a fast, pleasant, and uncomplicated user experience. Progressive Web Apps are the latest attempt to bridge the divide between the web and mobile and to improve the experience of mobile shoppers. 

Traditionally, ecommerce stores such as Magento were designed to be monolithic applications that ran entirely on the server. The back-end was on the server, and the interface was generated on the server before being sent to the browser.

In recent years, as mobile browsers have improved, interface functionality has gradually been moved into the browser. Progressive Web Apps (PWAs) are the logical culmination of this process, separating the front-end from the back-end entirely. Magento was an early mover in the PWA space, and today offers one of the most sophisticated and developer-friendly platforms for building and deploying Progressive Web Apps for ecommerce.

Read more ...

| WooCommerce

WooCommerce is the most popular way to build an eCommerce site with WordPress.

If you are careful with your product listings, you will want to use the WordPress revisions feature with WooCommerce. This will allow you to keep track of any changes to your products.

With the help of a plugin called PublishPress Revisions Pro, you can do even more with revisons. You can submit, moderate, approve and schedule revisions to your WooCommerce products.

Read more ...

| WordPress

As a web developer or a site builder, you know that there is always something that could go wrong with your site. As an example, here are some scenarios:

  • the site crashes after a core or a plugin update
  • the site got hacked and all information is lost
  • the server crashed and it is not possible to restore the database of your site

Those are all external circumstances and you do not have influence over them. However, making a periodic backup of the codebase and database of your site and sending it to a cloud storage service like Dropbox can help to minimize the impact of such incidents. 

The UpdraftPlus WP plugin provides this functionality.

Keep reading to learn how to use this plugin!

Read more ...

| Joomla

Sometimes when building a new site or making changes to an existing site, you want to have the site online, yet in an offline mode. When a Joomla website is set to offline, the site is put behind a login and special rights are needed to login from the frontend. Super users can login to the frontend but have extra things visible like editing buttons and unpublished articles. If you want to see the site for you client or yourself as a public user, you can setup a special group to use for this function.

Keep reading to learn how.

Read more ...

| WordPress

Revisionary is a WordPress plugin that has been around for nearly 10 years.

Revisionary allowed you to moderate or schedule changes to published posts.

The plugin was first launched in 2009 and had been starting to show its age in recent year. Fortunately, the plugin just had a major new update and it now looks ready for WordPress in 2019.

Revisionary is now called "PublishPress Revisions" but you can still find it at the same place on WordPress.org.

Read more ...

| WordPress

One OSTraining user asked us this week if it was possible to schedule a revision to go live in the future. This would be very helpful if you need to automatically update a Post on a future date.

This is possible in WordPress thanks to a plugin called "PublishPress Revisions". 

PublishPress Revisions is the plugin for managing WordPress revisions and this is one of its most useful features.

  • Install PublishPress Revisions from WordPress.org.
  • Go to Revisions > Settings.
  • On this screen, make sure that the “Scheduled Revisions” box is checked.

 enable scheduled revisions

Now that's done, you're ready to create a scheduled revision. Please note that you can only do this with content that is marked as “Published” status. 

Read more ...

| WordPress

WordPress has one of the most powerful revision systems available on any blogging platform.

When you start writing in WordPress, your changes will be automatically and safely saved. And, if you want to compare your current version of a post to an old version, WordPress gives you an easy side-by-side comparison. The image below shows a revision comparison in WordPress - the old content is marked in red and the new content is in green.

Read more ...

| Drupal

Drupal is a wonderful Content Management System with tons of features that solve many problems for editors and content managers. A developer can take different approaches to achieve the same result, and the Drupal update process is no exception.

It is possible to update Drupal either with Composer, Drush, or manually within the CPanel interface. The first two methods imply that you have at least mid-level experience with the command line and secure shell access to your public host. The third method is more visual and is suitable for developers beginning with Drupal.

Keep reading, if you want to learn how to update your Drupal site with this method.

Read more ...

| WordPress

All deployments of WordPress require an installation of PHP for running WordPress Core and associated extensions, along with a MySQL database for backing storage of your content and configurations.  While configuration of these services is well documented, it can create confusion for the uninitiated and could impact the time required to stand up your site instance.  With the advent of Docker, many Content Management Systems like WordPress can now be shipped with environmental dependencies and software prerequisites pre-configured, allowing you to create a new site instance rapidly that is completely isolated from the host environment. 

Microsoft Azure offers the ability to deploy Azure Resource Manager (ARM) Templates that leverage Docker-Compose to stand up containerized applications in just a few clicks.  Using Docker allows us to create an isolated user environment that fulfills the PHP + MySQL requirement and is portable across any VM for which the container’s source architecture matches the target.  While Wordpress can run directly on an Azure VM or deployed as a standalone Azure App Service, a Docker container is portable across any host capable of running a Docker compatible OS.  Due to this capability, you could lift and shift your containerized application between various cloud providers provided access to a host environment that is compatible with you containerized app.

If you already have a WordPress deployment and are interested in moving your instance to run in a container, you are in luck!  Migrating an existing WordPress instance to an Azure VM running Docker can be done in five easy steps! 

Here is exactly how I did it for my personal blog.

Read more ...

| Web Design

We've already determined that CSS Flexbox is super cool, so let's look at mixing in another super cool CSS tool. Custom Properties (also known as CSS Variables or Cascading Variables) are entities that allow you to assign a value in one location and then simply call it as a variable everywhere else. So, changing the value in one place changes it everywhere the var() function refers to the property, no more Find and Replace needed!

Basically this is a two part operation:

  • You define the value of the custom CSS property (eg. --color1: #ff00ff;, --width: 25%; or --box-padding: 10px;)
  • You refer to this value within the var() function throughout your CSS (eg. color: var(--color1);, width: var(--width);, padding: var(--box-padding);)

So they are not really variables, but custom properties. For the sake of understanding, this tutorial will use both definitions. 

You can create multiple custom property values, and use them across multiple stylesheets, using the @import rule, for example. Another use case is to apply CSS variables within media queries, to alter the layout and make it responsive. 

This tutorial will explain the use of CSS variables (custom properties) with CSS Flexbox, by creating a grid-like layout. 

Let’s start!

Read more ...

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