7 Ways to Make WordPress Simpler for Users

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

WordPress is one of the simpler Content Management Systems. Despite its clean user interface, WordPress can be daunting for those who use it infrequently or have basic IT skills. It also offers considerable power; it's easy to install a malicious plugin or wipe a database if you're not careful.

Fortunately, WordPress can be configured and customized to save users from themselves! That includes the person in every organization who vastly over-estimates their technical prowess…

Continue reading %7 Ways to Make WordPress Simpler for Users%

by Craig Buckler via SitePoint

Tame Unruly Style Sheets With These Three CSS Methodologies

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article, I'm going to discuss three successful approaches to CSS architecture, their principles, goals and advantages.

Why Can CSS Code Spiral Out of Control?

Keeping CSS code lean, re-usable and maintainable is notoriously hard. If you neglect to enforce any coding and organizational rules in a consistent way, this can be the case both for small and medium to big projects, where more than one developer is at work.

Where the codebase is large, goes through a number of changes over time, and organization is lacking, it often happens that teams prefer to add new style rules at the end of the style sheet document rather than remove chunks of it or modify what's already there. The main reason is often that the effects of editing or removing CSS declarations can be unpredictable and risk breaking the design somewhere in the project. This is a losing strategy, which can lead to code duplication, specificity issues where overriding style rules turns into a battle, and overall bloat.

Most often than not, choosing the methodology that most suits your needs is an iterative process, which starts with getting familiar with what's already out there.

Here are three methodological approaches to help you fight the challenges of a messy style sheet.

BEM

BEM stands for Block-Element-Modifier. It is a methodology for architecting CSS created by Yandex.

The goal of the BEM methodology is

to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components.

BEM website

The key concepts here are easy project maintenance over time, and components reusability.

The core BEM strategy consists in organizing CSS code into reusable modules with the help of a smart naming convention. Let's have a closer look.

What Is a Block?

Identifying blocks is a crucial step of applying the BEM methodology. A block is a

functionally independent page component that can be reused. In HTML, blocks are represented by the class attribute.

BEM docs.

When deciding what to consider a block, ask yourself if you can easily remove that portion of code and use it somewhere else. For instance, you can consider a website header or footer to be a block.

You can safely nest blocks, for instance, you can place a menu block inside a header block.

[code language="html"]
<header>
<ul class="menu">
<!-- menu items here -->
</ul>
</header>
[/code]

Because in principle you should be able to reuse blocks anywhere in your page, your CSS for the block should not set any margins or positioning rules.

Finally, when choosing a name, make sure the name describes what the block is for, what its purpose is, never what its appearance or state is. In other words, its name should answer the question: What is it? (e.g., a header, a menu, etc.), not What does it look like? (e.g., fixed header, small menu, etc.).

What Is an Element?

According to the BEM methodology, an Element is

A part of a block that has no standalone meaning and is semantically tied to its block.

Get BEM

Here are a few principles applying to elements:

• Elements only live inside a block
• Elements cannot belong to other elements, they can only be part of a block
• You can build nested elements
• Element names describe their purpose, not their appearance
• When naming elements, you need to follow this conventions: block__element

What Is a Modifier?

A Modifier is

An entity that defines the appearance, state, or behavior of a block or element.

BEM docs

For instance, a header block can be fixed to the top of the page, an accordion block can be open or closed, a button block can be disabled, etc.

The BEM naming convention for modifiers looks like this: block__element_modifier.

This is the core of the BEM methodology. In addition, BEM offers principles of file structure organization, a suite of tools, and a lively community for support.

Pros of Using BEM

These are some advantages of using BEM in your projects

• New developers can quickly understand the relationship between a component in markup and CSS rules
• It facilitates productivity in teams. The benefit is especially noticeable when working on larger projects
• The naming convention reduces the risks of class name collisions and style leaks
• CSS is not closely tied to the markup in a specific location inside the page
• CSS is highly reusable

SMACSS

Scalable and Modular Architecture for CSS, or SMACSS, is a web development methodology for organizing and writing CSS code. Its creator, Jonathan Snook, describes it as follows:

SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.

SMACSS Website

At its core is a way of categorizing CSS rules. Categorization brings forth patterns, i.e., things you see repeated more than once in the design, around which you can work out guidelines for coding maintainable and reusable CSS.

Continue reading %Tame Unruly Style Sheets With These Three CSS Methodologies%

by Maria Antonietta Perna via SitePoint

Editorial: Mobile Developers and the 2017 Developer Survey Results

Stack Overflow has recently published the results of its 2017 Developer Survey. It consisted of about 100 questions covering all important aspects of a developer’s professional life: from attitudes towards programming language to salaries, including important yet overlooked topics such as what would developers choose for performance metrics. Now in its seventh year, the Developer […]

Continue reading %Editorial: Mobile Developers and the 2017 Developer Survey Results%

by Ariel Elkin via SitePoint

Java’s Binary Search API in Five Minutes

Table of Contents Searching with Binary Search Searching an Array Searching a Range Searching with a Comparator Searching a List Binary Search for Insertion Wrapping Up Comments Binary search is a very efficient search algorithm that finds an item in a sorted array by repeatedly cutting down the search range by half. As a result, […]

Continue reading %Java’s Binary Search API in Five Minutes%

by Jackie Ng via SitePoint

Automated Accessibility Checking with aXe

Accessibility concerns are often ignored due to the efforts required to check them and implement solutions. Not only do developers have to get acquainted with the underlying standards but also constantly check that they are met. Can we make developing accessible websites easier by performing standard checks automatically? In this article, I’m going to show […]

Continue reading %Automated Accessibility Checking with aXe%

by Pavels Jelisejevs via SitePoint

5 WordPress Plugins for Backups and Migrations

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

Backing up your website data just isn't as complicated as it used to be. All websites need a backup plan in place, and there's really no excuse not to have one — it's really easy to handle with the tools available today, especially when running a WordPress site. Large or small, highly trafficked or those without many visitors - all websites have work put into them that you don't want to have to redo if that site is lost or damaged in some way.

In WordPress, there are many plugins and services that can be used to fill that need for backing up data. The reason that migration tools for WordPress often go hand-in-hand is because often, similar tools can be used for both purposes, as a migration can, in some cases, be similar to backing up the site and then restoring it (albeit in another location).

Without further ado, here are five of the better WordPress backup and migration tools out there:

1. All in One WP Migration

All in One WP Migration is an excellent migration tool for WordPress sites. This plugin is my personal favorite for migrating WordPress websites, as thus far it's worked every time without a hitch for me. I tend to use migration tools when moving a site from a development environment to production for the first time, or from a private to a public development environment, regardless of whether the long term solution requires more complicated deployment procedures.

All in One WP Migration works flawlessly with a variety of kinds of WordPress sites — the hosting platforms, plugins, and themes don't seem to matter at all. Uploads to new platforms are done using chunks of data, so as to bypass the upload limits in place on some servers.

The process is incredibly easy. Once the plugin is installed and activated, you just choose All-inOne WP Migration from the sidebar, and "Export". Then choose an "Export To" - export to file (download a file), or export via one of the following services that can be connected:

• FTP
• Dropbox
• Google Drive
• Amazon S3
• OneDrive
• Box

In addition, you can specify find-replace fields. This is useful when transferring a site from one domain to another (transferring a WordPress site from dev.example.com to www.example.com, perhaps). This will allow the plugin to replace the old text with the new text as it exports, preparing the data for seamless import into the new environment.

Importing is a similar process. In the new environment, install WordPress, add and activate the same plugin, and choose Import. Follow the prompts to import your exported data from the old environment, and in no time you'll be looking at a migrated mirror copy of the site!

2. UpdraftPlus

UpdraftPlus WordPress Backup is an easy-to-use backup solution for WordPress websites. UpdraftPlus can be used to manually back up your site, or it can be set on a specific schedule to allow for automatic backups. In addition to the ability to back up onto the hosting platform that the WordPress site already resides on, the plugin supports the following services as backup destinations:

• Amazon S3
• Dropbox
• Google Drive
• Rackspace
• FTP + SFTP
• ... and more

In addition, the paid version of UpdraftPlus includes even more choices. UpdraftPlus is one of the highest rated and most used WordPress backip solutions out there, and it's hard to go wrong with it.

Backups of site files, plugins, themes, and the WordPress database are supported, at varied schedules or all together. Additionally, UpdraftPlus can also be used as a migration tool, although some of the more dedicated migration tools might be a bit simpler or smoother if migration is the requirement, rather than backup.

Restoring from backups just requires one to set the plugin up and import a backup dataset. Testing backups is always good, so it's worth it to occasionally spin up a test WordPress site and import one of your backups, to make sure all is working — and with Updraft Plus, it should be!

3. Duplicator

Duplicator advertises itself as a bit of a player in both the migration and backup arenas. Duplicator backs up WordPress sites into a single zip file, including plugins, themes, and the database. This can be done manually, in the free version.

As a migration tool, or when restoring from a backup, Duplicator is somewhat unique from some of the other plugins, as it does not require an existing WordPress installation. Instead, you upload the backup files to the server in question, run the installer file, and the site files are created for you.

Another interesting feature of Duplicator is the ability to use Duplicator packages as pre-configured sites. If you often build new WordPress sites for clients, and typically start with the same sets of plugins, settings, and themes, you could set up the development version of a client project, without specific information for that project, then save the backup package.

Now, when you go to start a new project, you simply have to fire up the installer and install that new project template, alter a few items such as the website URL, and off you go, a quick start. When you have another new project - you can repeat that process again, saving tons of time in the process.

Continue reading %5 WordPress Plugins for Backups and Migrations%

by Jeff Smith via SitePoint

Develop WordPress Themes Faster with Gulp

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

WordPress’ simple theme development is partly responsible for its success. A developer with front-end and PHP knowledge can consult the excellent Codex and get started on their next masterpiece.

Theme development is possible with just a text editor and graphics package, but modern toolsets can revolutionize your workflow. In this tutorial we’ll use Gulp to run tasks including:

• copying newer PHP theme files
• optimizing images
• compiling Sass SCSS files into a single, minified CSS file
• merging ordered JavaScript files, remove debugging statements and minifying
• automatically refreshing the browser when files are updated.

What is Gulp?

Gulp is a JavaScript-based build system which takes your source files and transforms them into optimized versions. If you’re new to Gulp, please refer to An Introduction to Gulp.js for full installation and usage instructions. A summary of the initial steps:

Continue reading %Develop WordPress Themes Faster with Gulp%

by Craig Buckler via SitePoint