A Comprehensive Website Planning Guide (Part 2)

In Part 1, I emphasized on the importance of recognizing the purpose of your website, and why planning for the web is just as important as planning for anything else associated with your business. Today, I’d like to go into more detail of evaluating a plan, choosing web professionals, and determining your site structure.
Writing The Plan (Or Proposal) Note: The following section is for designers, but everyone ought to understand this part of the process.
Source: Smashing Magazine

A Gentle Introduction to Higher-Order Components in React

Higher-Order Components (HOCs) are an interesting technique in React used to refactor similar components that share almost the same logic. I know that it sounds abstract and advanced. However, it is an architectural pattern that isn’t specific to React, and hence you can use the approach to do lots of things. 

For instance, you could use it to add a loading indicator to a certain component without tweaking the original component, or you could hide a component’s props to make it less verbose. The applications are many, and I’ve tried to cover most of them in this tutorial.

There are several other tutorials that teach you about HOCs, but most of them are meant for advanced React developers. When I started learning React, I had trouble understanding the concept of higher-order components and how I could incorporate HOCs in my project to write better code. This article will explain everything that you need to know about HOC from scratch to hatch. 

Overview

This tutorial is split into three parts. The first part will serve as an introduction to the concept of higher-order components. Here, we shall talk about the syntax you need to know before looking at higher-order functions and HOCs. The second part is the most exciting part of this series where you will see practical examples of HOCs. We will use HOCs for creating forms, authorization, and many other things. 

In the third part of this tutorial, we will focus more on best practices and things to consider while implementing higher-order components. We will also have a brief look at alternative patterns for code sharing in React, such as Render props.

Before getting started, it might be a good idea to take a look at the tutorial on Stateful vs. Stateless components to understand React’s component architecture better.

ES6 Syntax Cheatsheet

We will get our hands dirty soon. But before we do, here are some things that I think you should know about. I prefer to use the ES6 syntax wherever possible, and it works great with HOCs. As a beginner, HOC made sense, but some of the ES6 syntax did not. So I recommend going through this section once, and you can come back here later for reference. 

Arrow Functions

Arrow functions are regular function expressions, but with shorter syntax. They are best suited for non-method functions, and that’s what we are particularly interested in. Here are some examples to get you started:

Function Without Parameters

Function With a Single Parameter

Function With Multiple Parameters

Currying in Functional Programming

Although the name suggests that it has something to do with an exotic dish from the popular Indian cuisine, it doesn’t. Currying helps you break down a function that takes many arguments into a series of functions that take one argument at a time. Here is an example:

The function accepts just one argument and returns a function that takes in another argument, and this continues until all the arguments are satisfied. 

A closely related term is called partial application. The partial application deals with creating a new function by pre-filling some of the arguments of an existing function. The newly created function will have an arity (which translates to the number of arguments) less than that of the original function.

Spread Syntax

Spread operators spread the contents of an array, string, or object expression. Here is a list of stuff that you can do with spread operators

Spread Syntax in Function Calls

Spread Syntax in Array Literals

Spread Syntax in Object Literals

I personally love the way in which three dots can make it easier for you to pass down existing props to child components or create new props.

Spread Operator in React

Now that we know the basic ES6 syntax for building HOCs, let see what they are.

Higher-Order Functions

What is a higher-order function? Wikipedia has a straightforward definition:

In mathematics and computer science, a higher-order function (also functional, functional form or functor) is a function that either takes one or more functions as arguments or returns a function as its result or both.

You’ve probably used a higher-order function in JavaScript before in one form or another because that’s the way JavaScript works. Passing anonymous functions or callbacks as arguments or a function that returns another function—all this falls under higher-order functions. The code below creates a calculator function which is higher order in nature. 

Let’s have a deeper look at this. The calculator() accepts a function as input and returns another function—this perfectly fits into our definition of a higher-order function. Because we’ve used the rest parameter syntax, the function returned collects all its arguments inside an array. 

Then, the input function is invoked with all the arguments passed down, and the output is logged to the console. So the calculator is a curried, higher-order function, and you can use your calculator like this:

Plug in a function such as add() or multiply() and any number of parameters, and calculator() will take it from there. So a calculator is a container that extends the functionality of add() and multiply(). It gives us the ability to deal with problems at a higher or more abstract level. At a glance, the benefits of this approach include:

  1. The code can be reused across multiple functions.
  2. You can add extra functionality common to all arithmetic operations at the container level. 
  3. It’s more readable, and the intention of the programmer is better expressed.

Now that we have a good idea about higher-order functions, let’s see what higher-order components are capable of.

Higher-Order Components

A higher-order component is a function that accepts a component as an argument and returns an extended version of that component. 

The ExtendedComponent composes the InputComponent. The ExtendedComponent is like a container. It renders the InputComponent, but because we’re returning a new component, it adds an extra layer of abstraction. You can use this layer to add state, behavior, or even style. You can even decide not to render the InputComponent at all if you desire—HOCs are capable of doing that and more.

The image below should clear the air of confusion if any.

Higher Order Components Overview

Enough with the theory—let’s get to the code. Here is an example of a very simple HOC that wraps the input component around a <div> tag. From here on, I will be referring to the InputComponent as WrappedComponent because that’s the convention. However, you can call it anything you want.

The withGreyBg function takes a component as an input and returns a new component. Instead of directly composing the Card components and attaching a style tag to each individual components, we create a HOC that serves this purpose. The higher-order component wraps the original component and adds a <div> tag around it. It should be noted that you have to manually pass down the props here at two levels. We haven’t done anything fancy, but this is what a normal HOC looks like. The image below demonstrates the withGreyBg() example in more detail.

Higher-Order Components example in React

Although this might not appear particularly useful right now, the benefits are not trivial. Consider this scenario. You are using React router, and you need to keep some routes protected—if the user isn’t authenticated, all requests to these routes should be redirected to /login. Instead of duplicating the authentication code, we can use a HOC to effectively manage the protected routes. Curious to know how? We will be covering that and a lot more in the next tutorial.

Note: There a proposed feature in ECMAScript called decorators that makes it easy to use HOCs. However, it is still an experimental feature, so I’ve decided not to use it in this tutorial. If you’re using create-react-app, you will need to eject first to use decorators. If you’re running the latest version of Babel (Babel 7), all you need to do is install babel-preset-stage-0 and then add it to the plugin list in your webpack.config.dev.js as follows. 

Summary

In this tutorial, we learned the basic concepts of HOCs. HOCs are popular techniques for building reusable components. We started with a discussion of basic ES6 syntax so that it would be easier for you to get used to arrow functions and write modern-day JavaScript code.

We then had a look at higher-order functions and how they work. Finally, we touched on higher-order components and created a HOC from scratch. 

Next up, we will cover different HOC techniques with practical examples. Stay tuned until then. Share your thoughts in the comments section. 


Source: Nettuts Web Development

Adobe XD Contest: Create An App Prototype With Your City's Best-Kept Secrets

(This article is kindly sponsored by Adobe.) Every city has its hidden spots: the best place to see the sunset, a cozy coffee shop that makes excellent espresso, or that impressive building you won’t find in any guidebook. As a visitor, you might stumble across little gems like these by chance, but, well, no one knows a city’s secrets as well as the locals, right?
Now’s your opportunity to let fellow creatives see your city through your eyes — and to put your design skills to the test at the same time.
Source: Smashing Magazine

Bootstrap Native: Using Bootstrap Components without jQuery

Do you use Bootstrap’s JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project (Bootstrap Native), which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript.

Why use Bootstrap Native?

The motivations of such a port are mostly related to performance.

One benefit is the potential performance gain that can come from the superior execution speed of plain JavaScript over jQuery, as reported in many benchmarks.

Another performance advantage is the reduced page weight. Let’s make a quick comparison. All the numbers below refer to minified gzipped files and are expressed in KBs. bootstrap.js refers to the original Bootstrap scripts, bsn.js to the Bootstrap Native scripts, and jq to jQuery. Here we’re looking at the bundled files that gather together all the components, but it should be noted that both libraries have a modular structure that allows the loading of only the needed components and their dependencies.

Bootstrap.js:

  • jQuery 3.3.1 + Bootstrap.js = 30.0 + 12.9 = 42.9
  • jQuery 3.1.0 slim + bootstrap.js = 23.6 + 12.9 = 36.5
  • jQuery 2.2.4 + bootstrap.js = 34.3 + 11.2 = 45.5
  • jQuery 1.12.4 + bootstrap.js = 38.8 + 11.2 = 50.0

Bootstrap Native JavaScript:

  • minifill + bsn.js = 2.4 + 7.8 = 10.2
  • polyfill.io(on chrome 54) + bsn.js = 1.1 + 7.8 = 8.9
  • polyfill.io(on IE 8) + bsn.js = 12.1 + 7.8 = 19.9

(The polyfill.io size for IE8 was taken from here. These polyfills are discussed in the next sections.)

So, with the Bootstrap components the size varies over the range 36.5 to 50.0 KB, while with Bootstrap Native the range shrinks to 8.9 to 19.9 KB.

Bootstrap Native Browser Support

Regarding browser support, it’s comparable to the original Bootstrap jQuery-based script. That is, it supports the latest browsers on the major mobile and desktop platforms and IE8+. This is accomplished by means of two polyfill strategies.

The first revolves around the use of the Polyfill.io service. All you have to do is insert the relative script tag in the document to get a set of polyfills tailored to each browser:

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

The service can be configured to customize its response based on the features really used on the site. See the Pollyfill.io documentation for details.

Alternatively, it’s possible to use minifill, a potentially lighter custom polyfill supplied by the project author itself.

Bootstrap Native Usage

The usage is similar to the original Bootstrap scripts, except we’ll remove jQuery, replace the Bootstrap scripts with the ones supplied by the Bootstrap Native project, and, if necessary, include the polyfills.

So, before the end </body> tag we include the script for the Bootstrap Native components:

[code language=”html”]
<script src=”https://cdn.jsdelivr.net/npm/bootstrap.native@2.0.15/dist/bootstrap-native-v4.min.js”></script>
[/code]

Other CDN URLs are available and listed on the Bootstrap Native documentation page. Alternatively, the file can be downloaded and served locally.

If the polyfills are needed, they should be included in the <head> tag:

[code language=”html”]
<script src=”text/javascript” src=”https://cdn.jsdelivr.net/gh/thednp/minifill@0.0.4/dist/minifill.min.js”> </script>
<!–[if IE]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<![endif]–>
[/code]

This snippet employs the minifill polyfill.

See the Bootstrap Native project documentation page for more detailed usage instructions.

A Port?

To be precise, it’s not a literal port that replicates all the features of the original scripts. The Bootstrap Native author deliberately chose to leave out some slight functionality, particularly lesser-used features, mainly for performance reasons and to simplify the development.

Let’s take a look at some of these issues.

The Custom Events

These are the events triggered by many Bootstrap components during their life cycle. For example, a Modal fires two events — one when it’s opened and the other when it’s closed. (Actually, two events are fired in each case, one before ('show') and the other ('shown') after the action.)
Similar events are employed by a Tab to notify its observers when there’s a tab switch: a hide event is dispatched for the current tab and a show event for the tab that has to be shown.

Bootstrap Native, instead, provides these events only for the Carousel and the Button. The original Carousel triggers a couple of custom events when there’s a transition between two slides. The first event, 'slide', is fired just before the transition begins, while the other one, 'slid', is fired after the transition has completed. The event object passed to the handlers has two properties that supply information about the transition, direction, and relatedTarget.

The following jQuery snippet illustrates:

[code language=”js”]
$carousel
.on(‘slide.bs.carousel’, function(e) {
var caption = $(e.relatedTarget).find(‘.carousel-caption’).text();
console.log(‘About to slide to the ‘ + e.direction + ‘ to slide ‘ + caption);
})
.on(‘slid.bs.carousel’, function(e) {
var caption = $(e.relatedTarget).find(‘.carousel-caption’).text();
console.log(‘Slid to the ‘ + e.direction + ‘ to slide ‘ + caption);
});
[/code]

Bootstrap Native supports both events, but the event object doesn’t have the direction and relatedTarget properties. We can translate the previous snippet into vanilla JS in this way:

[code language=”js”]
carousel.addEventListener(‘slide.bs.carousel’, function(e) {
console.log(‘About to slide’);
});

carousel.addEventListener(‘slid.bs.carousel’, function(e) {
console.log(‘Slid’);
});
[/code]

What about if we need the custom events for some other component? It’s not too difficult to implement them ourselves. We can refer to the Bootstrap Native Carousel code and use the CustomEvent API.

First create the event objects:

[code language=”js”]
if ((‘CustomEvent’ in window) && window.dispatchEvent) {
slid = new CustomEvent(“slid.bs.carousel”);
slide = new CustomEvent(“slide.bs.carousel”);
}
[/code]

When a slide transition is about to start, the 'slide' event is fired:

[code language=”js”]
if (slide) {
this.carousel.dispatchEvent(slide);
}
[/code]

And, finally, when the transition has finished, the 'slid' event is triggered:

[code language=”js”]
if (slid) {
self.carousel.dispatchEvent(slid);
}
[/code]

Based on this model, similar code can be easily added to other components.

The CustomEvent API is not readily available on every browser, but the aforementioned polyfills cover it.

Continue reading %Bootstrap Native: Using Bootstrap Components without jQuery%


Source: Sitepoint

Adding Code-Splitting Capabilities To A WordPress Website Through PoP

Speed is among the top priorities for any website nowadays. One way to make a website load faster is by code-splitting: splitting an application into chunks that can be loaded on demand — loading only the required JavaScript that is needed and nothing else. Websites based on JavaScript frameworks can immediately implement code-splitting through Webpack, the popular JavaScript bundler. For WordPress websites, though, it is not so easy. First, Webpack was not intentionally built to work with WordPress, so setting it up will require quite some workaround; secondly, no tools seem to be available that provide native on-demand asset-loading capabilities for WordPress.
Source: Smashing Magazine

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