Improve Your Website in 2018 with These Top WordPress Plugins

This article was created in partnership with BAWMedia. Thank you for supporting the partners who make SitePoint possible.

It can be a little embarrassing when you can’t meet a client’s website requirements. It can be even worse if you can’t meet requirements at all.

Perhaps the problem was an inability to build a table given a large amount of complex data. Or, you’ve been unable to tie a website into social media networks in a manageable way. Maybe, you’ve had to deal with grid system constraints that made it difficult to create the right layout on a page.

Take a look at this selection of WordPress plugins. They address some of the problems that web designers often face. These plugins can even serve to make good sites even better.

Dive right in and see if there’s a plugin or two that can make your work a little easier.

1. wpDataTables

wpDataTables

With the wpDataTables plugin you’ll find it much easier to complete your chart and table-building tasks. You’ll save countless hours and avoid bouts of pure frustration by not having to take on what can be an extremely difficult task; creating a chart or table from large amounts of complex data, ensuring the results are correct and readable, the chart or table is responsive, and the finished product is editable, even after the website is published.

wpDataTables does all of that for you, and often in minutes if not seconds. The results are not only flawless, but data rows, columns, and cells, or lines in a chart can be highlighted or color coded.
It’s worth mentioning that all of this can be accomplished without the need of a single line of code. It’s also worth mentioning that this plugin is so easy to use, so powerful, and so popular that web designers have left other platforms behind and signed up for WordPress just to be able to use wpDataTables.

2. LayerSlider

LayerSlider

LayerSlider is not your typical WordPress slider plugin. You’ll be able to create a wide variety of uniquely designed sliders for many different uses, but there’s more to this plugin than that.

LayerSlider is a premium multi-purpose animation platform from which you can create image galleries, landing pages, slideshows, pop ups, and even a complete website.

An ever-growing selection of professionally-crafted slider templates is one of the most popular and useful LayerSlider features. These templates cover most themes and niches and provide an excellent starting point for most web design projects. There are also several simpler templates to help beginners get their projects off to a great start.

Other notable features include versatile layout options and a drag and drop visual editor that makes coding unnecessary. LayerSlider is responsive, so anything you build will adapt to any screen size.

3. NextGEN Gallery & NextGEN Pro

NextGEN Gallery

NextGen Gallery is a free open-source WordPress plugin that is the most powerful software solution of its type. It has been looked upon as an industry standard for more than a decade, and it can currently boast of 1.3 million active users and over 20 million downloads.

NextGEN Gallery is free. Although it is intended for experienced designers and newbies alike, the latter especially like it as it offers an easy way to create small to mid-size galleries.

NextGen Gallery’s companion, NextGEN Pro, features a much more varied and extensive gallery and eCommerce extensions.

NextGEN’s front-end features include slideshow and thumbnail gallery styles, album styles, and a host of design styles. The back-end features include the gallery management system, a data import and upload capability, image grouping and thumbnail editing.

4. Blog2Social

Blog2Social

Blog2Social’s media post automation feature is a genuine time saver when you need to customize, manage, and post social media information to a network of social media sites. With Blog2Social, you can easily vary the format, content, and images of individual posts within the network to give every post a personal touch.

The Social Media Calendar allows you to schedule, color code, and track posts, and use drag and drop to rearrange a schedule – another extremely popular and useful feature.

5. REXPANSIVE – Page Builder for WordPress

REXPANSIVE Page Builder for WordPress

The Rexpansive Builder offers a simple, time-saving way to create layouts without any need for coding. It is not just another page-building plugin however. Rexpansive’s method of automatically expanding content is unique and is what sets this plugin apart. To alter the size of an image or a block of content, designers typically specify the desired dimensions first, and then fit the content to those dimensions. With Rexpansive, you automatically resize by zooming in or out until you achieve the desired result.

Continue reading %Improve Your Website in 2018 with These Top WordPress Plugins%


Source: Sitepoint

An Introduction to Grid Systems in Web Design

In web design, a grid system is an invisible structure that collects all the elements within a web page together. In this article, I’ll provide an introduction to grid systems, explaining what they are, their purpose, and some of the theory behind them.

Wikipedia explains a grid system as —

a structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

The Nature of Grid Systems

Grid systems are never properly visible, but traces of a grid’s “discipline” can be seen by the placement of elements within a web page. Grid systems also dictate the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid’s main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design.

Unity in Grid Systems

Alex White’s Elements of Graphic Design explains the use of unity through a grid system:

Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly … So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.

However, the benefits of a grid system on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann’s Grid System is Graphic Design. He writes:

A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

Grid Systems Beyond Web Design

Grids aren’t just restricted to web and graphic design. Almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.

Continue reading %An Introduction to Grid Systems in Web Design%


Source: Sitepoint

Styling Empty Cells With Generated Content And CSS Grid Layout

A common Grid Layout gotcha is when a newcomer to the layout method wonders how to style a grid cell which doesn’t contain any content. In the current Level 1 specification, this isn’t possible since there is no way to target an empty Grid Cell or Grid Area and apply styling. This means that to apply styling, you need to insert an element.
In this article, I am going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense.
Source: Smashing Magazine

Understanding Recursion With JavaScript

Introduction

Some problems are more naturally solved using recursion. For example, a sequence like the Fibonacci sequence has a recursive definition. Each number in the sequence is the sum of the previous two numbers in the sequence. Problems that require you to build or traverse a tree-like data structure can also be solved with recursion. Training yourself to think recursively will give you a powerful skill to attack such problems. 

In this tutorial, I will go through several recursive functions step by step to see how they work and show you techniques you can use to systematically define recursive functions.

Contents:

  • What Is Recursion?
  • Recursion With Numbers
  • Recursion With Lists
  • Building Lists
  • Review

What Is Recursion?

A recursively defined function is a function that is defined in terms of a simpler version of itself. This is a simplified example:

To understand how recursion works conceptually, we will look at an example that has nothing to do with code. Imagine you are responsible for answering phone calls at work. Since this is a busy company, your phone has multiple phone lines so you can juggle multiple calls at the same time. Each phone line is a button on the receiver, and when there is an incoming call, the button will blink. Today, when you arrive to work and turn the phone on, there are four lines blinking at once. So you get to work answering all of the calls.

You pick up line one and tell them ‘please hold’. Then you pick up line two and put them on hold. Next, you pick up line three and put them on hold. Finally, the fourth line you answer and speak with the caller. When you are finished with the fourth caller, you hang up and pick up the third call. When you finish with the third call, you hang up and pick up the second call. When you finish with the second call, you hang up and pick up the first call. When you finish that call, you can finally put the phone down.

Each of the phone calls in this example is like a recursive call in a function. When you get a call, it is put on the call stack (in code speak). If you cannot complete a call right away, you put the call on hold. If you have a function call that can’t be evaluated immediately, it stays on the call stack. When you are able to answer a call, it is picked up. When your code is able to evaluate a function call, it is popped off the stack. Keep this analogy in mind as you look over the following code examples.

Recursion With Numbers

All recursive functions need a base case so they will terminate. However, just adding a base case to our function does not prevent it from running infinitely. The function has to have a step to bring us closer to the base case. Last is the recursive step. In the recursive step, the problem is reduced to a smaller version of the problem.

Suppose you have a function that will sum the numbers from 1 to n. For example, if n = 4, it will sum 1 + 2 + 3 + 4. 

First, we determine the base case. Finding the base case can also be thought of as finding the case where the problem can be solved without recursion. In this case, it is when n equals zero. Zero has no parts, so our recursion can stop when we reach 0. 

At each step, you will subtract one from the current number. What is the recursive case? The recursive case is the function sum called with the reduced number.

This is what is happening at each step:

  • Go to sum(4).
  • Is 4 equal to 0? No. Put sum(4) on hold and go to sum(3).
  • Is 3 equal to 0? No. Put sum(3) on hold and go to sum(2).
  • Is 2 equal to 0? No. Put sum(2) on hold and go to sum(1).
  • Is 1 equal to 0? No. Put sum(1) on hold and go to sum(0).
  • Is 0 equal to 0? Yes. Evaluate sum(0).
  • Pick up sum(1).
  • Pick up sum(2).
  • Pick up sum(3).
  • Pick up sum(4).

This is another way to view how the function is processing each call:

The argument should change in the recursive case and bring you closer to the base case. This argument should be tested in the base case. In the previous example, because we are subtracting one in the recursive case, we test if the argument equals zero in our base case.

Task

  1. Implement the sum function using a loop instead of recursion.
  2. Create a function that multiplies two numbers recursively. For example, multiply(2,4) will return 8. Write what happens at each step for multiply(2,4).

Recursion With Lists

Recurring on a list is similar to recurring on a number, except that instead of reducing the number at each step, we are reducing the list at each step until we get to an empty list. 

Consider the sum function that takes a list as input and returns the sum of all of the elements in the list. This is an implementation for the function sum:

The empty function returns true if the list has no elements. The car function returns the first element in the list. For example, car([1,2,3,4]) returns 1. The cdr function returns the list without the first element. For example, cdr([1,2,3,4]) returns [2,3,4]. What happens when we execute sum([1,2,3,4])?

When recurring on a list, check if it is empty. Otherwise, do the recursive step on a reduced version of the list.

Task

  1. Rewrite this sum function so that it uses a loop to sum each item in the list instead of recursion.
  2. Define a function named length that takes a list as input and returns the number of elements in that list. You should not use JavaScript’s built-in length function. For example, length(['a', 'b', 'c', 'd']) should return 4. Write what happens at each step.

Building Lists

In the last example, we were returning a number. But suppose we wanted to return a list. That would mean that instead of adding a number to our recursive step, we would need to add a list. Consider the function remove, which takes an item and list as input and returns the list with the item removed. Only the first found item will be removed.

Here, the eq function returns true if both inputs are the same. The cons function takes an element and a list as inputs and returns a new list with the element added to the beginning of it. 

We will be checking if the first item in the list is equal to the item we want to remove. If it is, remove the first element from the list and return the new list. If the first item is not equal to the item we want to remove, we take the first element in the list and add it to the recursive step. The recursive step will contain the list with the first element removed. 

We will keep removing elements until we reach our base case, which is an empty list. An empty list means we have traversed all the items in our list. What does remove('c', ['a', 'b', 'c', 'd']) do?

In a situation when we need to build a list, we take the first element and add it to the recursive part of our list.

Task

  1. Rewrite the remove function so that it uses loops instead of recursion to remove an element from a list.
  2. Alter the remove function so that it removes all occurrences of an item from a list. For example, remove(‘c’, [‘a’, ‘b’, ‘c’, ‘d’, ‘c’] returns [‘a’, ‘b’, ‘d’]. Write what happens step by step.

Review

There are three parts to a recursive function. The first is the base case, which is the terminating condition. The second is the step to get us closer to our base case. The third is the recursive step, where the function calls itself with the reduced input. 

Recursion is like iteration. Any function that you can define recursively can also be defined using loops. Other things to consider when using recursion are recurring on nested lists and optimizing your recursive calls. 

A great resource to continue learning about recursion is the book The Little Schemer. It teaches you how to think recursively using a question and answer format.


Source: Nettuts Web Development

Bootstrap Sass Installation and Customization

Bootstrap is a popular, open-source framework. Complete with pre-built components, it allows web designers of all skill levels to quickly build a site. The latest version of Bootstrap uses Sass as the preprocessor of choice. In this article, I’ll show you how to configure and customize a Bootstrap Sass-based project.

Bootstrap Installation

There are multiple ways to obtain and install the Bootstrap source files. Just remember that whatever method and package manager you choose, make sure you have a Sass compiler and Autoprefixer up and running. Bootstrap needs both in order to work.

Download Bootstrap files

We can download the Bootstrap files from the Bootstrap download page. Once downloaded, we can extract the contents of the file into our project’s folder.

Node

With Node.js installed, we can quickly install the npm package for Bootstrap by typing in the command line:

[code language=”bash”]
npm install bootstrap
[/code]

Ruby Gems

We can include Bootstrap in a Ruby app using Bundler and Ruby Gems with this command in the Gemfile:

[code language=”bash”]
gem ‘bootstrap’, ‘~> 4.0.0’
[/code]

Bootstrap Sass Setup

Once we have Bootstrap installed we need to set up our project. The first thing we want to do is create a sass folder to hold our SCSS files and a stylesheets folder to store the compiled CSS. After that, we create a file named app.scss inside the sass folder.

The app.scss file is used to import Bootstrap components.

The next thing we want to do is find the _variables.scss file inside the Bootstrap Sass package and copy it into our sass folder. Next, we rename the file as _customVariables.scss and add an import statement for _customVariables.scss to app.scss. It’s important to import _customVariables.scss first for reasons I’ll explain shortly.

The last import is an optional _custom.scss file. Many people will include custom CSS rules directly after their import statements or in their app.scss file, but we’re going to separate any custom rules into their own partial.

Notice, we import our _customVariables.scss file first. The reason is that Bootstrap’s variables are set to default! values, so we need to override these values by importing our variables first.

Continue reading %Bootstrap Sass Installation and Customization%


Source: Sitepoint

Bringing Together React, D3, And Their Ecosystem

Since its creation in 2011, D3.js has become the de facto standard for building complex data visualizations on the web. React is also quickly maturing as the library of choice for creating component-based user interfaces.
Both React and D3 are two excellent tools designed with goals that sometimes collide. Both take control of user interface elements, and they do so in different ways. How can we make them work together while optimizing for their distinct advantages according to your current project?
Source: Smashing Magazine

A Comprehensive Guide To UI Design

(This is a sponsored article.) With the big picture established — mapping user journeys and defining your design’s look and feel — my fifth article in this series of ten articles dives into the details of designing user interface components.
UX, IA, UI: All of these abbreviations can be confusing. In reality, as designers, we’ll often be working across these different specialisms: designing the overall user experience (UX), organizing information logically as we consider information architecture (IA), and considering the granular design of the user interface (UI).
Source: Smashing Magazine

Get 2TB of Cloud Storage for Life for Just $50

There’s nothing quite as frustrating as losing your valuable data in a computer crash, especially if you haven’t backed up your data. External hard drives are not always easy to lug around with you, and are susceptible to loss, theft, and physical damage, so it makes sense to store your data in the cloud. Zoolz is a cloud backup solution that offers both instant and cold storage options, and while they normally charge an annual fee for their service, you can get lifetime access to 2TB of storage today for only $49.99.

Whatever your data storage needs, Zoolz has you covered. This deal gets you 1TB of instant storage for frequently used files that you’ll need on-demand, and 1TB of cold storage for larger files you don’t always need access to, like movies or photos. You can also rest assured knowing Zoolz uses 256-AES encryption to keep your personal data safe and secure. 

Zoolz typically charges around $500 annually for this offer, but right now, you can get a lifetime account for just $49.99. Don’t wait until it’s too late – get peace of mind with Zoolz cloud backup solutions today. 

Continue reading %Get 2TB of Cloud Storage for Life for Just $50%


Source: Sitepoint

How to Build a Responsive Bootstrap Website

In this article, we’re going to build a responsive Bootstrap website from scratch. By the end of this article, you’ll be familiar enough with the latest version of this popular CSS framework to be able to build your own variations of it according to your project’s needs.

Building responsive websites is a must nowadays. People access websites from all kinds of devices, and Google has made a point of stressing the importance of responsive web design when it comes to assigning ranking in web page results.

Designing responsive websites from scratch can be taxing for beginners, although the latest Flexbox and CSS Grid specifications make achieving great results in this field much easier than it used to be.

However, for those who aren’t ready to tackle cutting-edge layout techniques yet, the Bootstrap grid still offers an excellent alternative.

What “Responsive Bootstrap Website” Means

The first thing that comes to mind when we use the word “Responsive Design” is that websites should be compatible with all kinds of devices and screen sizes. There’s a constant demand in the industry to make every website responsive for better readability of the online contents in different environments.

With the help of CSS3 and definitely HTML5, this is now a consolidated trend. But what if you’re a developer and not a designer? BONK!

Well, you don’t have to worry any more. Since Bootstrap is a superhero in the field of CSS frameworks, you’ll be able to tackle responsive web design with its help in no time.

Setting Up

Ensuring you get a responsive Bootstrap website is as simple as placing the correct meta tag inside the head of your web pages:

[code language=”html”]
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
[/code]

The above meta tag is quite self-explanatory in nature. We’re setting the width of the page to the width of the device and initially scaling it to 1 — its default size.

Apart from this, you’re good to go: Bootstrap is responsive by default.

[code language=”html”]
<link rel=”stylesheet” href=”css/bootstrap.css”>
<link rel=”stylesheet” href=”css/bootstrap-responsive.css”>
[/code]

Here’s a demo of the page we’re going to build:

See the Pen Building Responsive Websites Using Bootstrap by SitePoint (@SitePoint) on CodePen.

Let’s Begin Building Our Responsive Bootstrap Website

I’ve divided the above responsive web page into different categories, and we’ll see how to build each one of them in detail:

  1. the responsive navigation
  2. the marketing area
  3. the contents section
  4. the right sidebar
  5. the footer

The Responsive Navigation

Let’s build the navigation bar of the website. It will contain the website’s title and some right-aligned menu link items. This is going to be fixed to the top of the website, as you’ve seen in the demo page. So here’s the markup for this:

[code language=”html”]
<nav class=”navbar fixed-top navbar-expand-md navbar-light bg-light”>
[/code]

The navbar class is for showing the navigation section. An additional fixed-top class makes it stick to the top of the page. The navbar-light and bg-light classes control the text color and background color of the navigation bar respectively. Pretty clear!

Let’s move ahead and insert some more code into it:

[code language=”html”]
<nav class=”navbar fixed-top navbar-expand-md navbar-light bg-light”>
<div class=”container”>

<!– more navigation code here –>

</div>
</nav>
[/code]

The container is used to contain everything inside the navigation bar as a wrapper.

Till now, whatever we’ve added is just the basic structure of our navigation bar. Let’s see the real magical stuff that makes the navigation responsive.

[code language=”html”]
<nav class=”navbar fixed-top navbar-expand-md navbar-light bg-light”>
<div class=”container”>
<a class=”navbar-brand” href=”#”>Responsive Website</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarCollapse” aria-controls=”navbarCollapse” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarCollapse”>
<!– left navigation links –>
<ul class=”navbar-nav mr-auto”>

<!– active navigation link –>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home
<span class=”sr-only”>(current)</span>
</a>
</li>

<!– regular navigation link –>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>About</a>
</li>

<!– more navigation links –>

</ul>

<!– right navigation link –>
<ul class=”nav navbar-nav ml-auto”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Login</a>
</li>
</ul>
</div>
</div>
</nav>
[/code]

The branding and menu items are self-explanatory. It should be clear that adding the class navbar-brand gives the title a clean look and is used for the website’s name. The nav items are wrapped inside an additional div with the classes collapse navbar-collapse, which are used to make the menu appear like a stack when viewing in smaller browsers.

Just below the branding, you might be seeing an additional link with the navbar-toggler class that wraps a span navbar-toggler-icon. This link is visible only on the smaller screens with a list icon. Also see we’ve used data-toggle=collapse that Bootstrap uses to hide/show the menu items in smaller windows. data-target is used to identify which menus to hide/show.

The Marketing Area

The marketing area will be created using a div with the jumbotron class. Inside it, add h1 with a class of display-2, a paragraph, and a link with the btn btn-primary btn-lg classes. The display-2 class makes a common heading stand out. The same goes for the lead class on the <p> tag. The code should look like below:

[code language=”html”]
<div class=”jumbotron”>
<h1 class=”display-2″>Learn Geometry</h1>
<p class=”lead”>Marketing message here.</p>
<a class=”btn btn-lg btn-primary” href=”#” role=”button”>Call to Action »</a>
</div>
[/code]

Continue reading %How to Build a Responsive Bootstrap Website%


Source: Sitepoint

A Comprehensive Website Planning Guide (Part 1)

As a veteran designer, developer and project manager on more sites than I can count, I’ve identified a common problem with many web projects: failure to plan. As the same issues come up repeatedly in my work, I’ve written this guide in order to help our clients, other designers, businesses and organizations plan and realize successful websites.
Who This Guide Is For Written in relatively non-technical language, this guide provides a broad overview of the process of developing a website, from the initial needs assessment through site launch, maintenance and follow up.
Source: Smashing Magazine