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