It seems like the whole world’s got an idea for an app, the really tricky part is converting that idea into a real app that makes sales on the App Store.

If you’re looking to produce an app that is commercially viable, solidly built and great looking, then you’re in the right place, because our sister-site, MightyDeals.com, has put together a staggering 95% discount on this amazing set of 6 iOS7 App Design Templates.

Each template comes with the original Photoshop sources files, so you can edit the graphics any way you choose giving your application a bespoke look. All source code is written in native Objective-C, giving you the perfect base to build your own functionality on to. What’s more, each of these app templates is ready to go, if you don’t want to customize then get your content in and you’re good to go!

The set includes a newsfeed style app, ideal for displaying frequently updating stories; a location app for locating taxis, restaurants and events; a food app for recipes; a social sharing app; a tap tag app, perfect for socialites who love to shop; and an activity style app, great for anyone building a fitness app.

I have been looking for something like this for a long time. I will definitely be recommending your templates next time i am asked for design help. – Valerie

First i ran a 99 designs contest, but no useable designs came from it. I was actually surprised. But I was recommended your templates. And have to say I’m really satisfied with what you’ve made! – Danielle

These fantastic iOS7 App templates normally retail for $594, but for a limited time you can get all 6 for just $29, an incredible 95% off the regular price. Head over to MightyDeals right now to grab this offer today.

300+ Premium Photoshop Actions – only $9!

In this interview, UMBC Sustainability’s Laura Bartock (‘2013) asks GES Professor Christopher Swan about sustainability and his research.

Dr. Swan is a leading researcher in the Baltimore Ecosystem Study and specializes in Community Ecology, Biodiversity, Urban Ecology, Ecology of Rivers & Streams.

Highlights:

“We know that very diverse ecological communities provide important ecosystem services, such as pollinators, [...] These services are important not only to human well-being, but plants and animals as well.”

“Ask questions that are both intellectually intriguing to you, but at the same time strive to ensure the questions are relevant to society in general.“

“I also believe that most people care more than they know about sustainable practices.”

More from the interview:

Laura Bartock: Why is sustainability important to you (personally/professionally)?

Dr. Swan: The process of accepting the limitations of the environment is an inevitable part of our lives since humans have so successfully been able to extract natural resources for their perceived own well-being.  To me, proceeding without any foresight as to how to best manage the environment is irresponsible. Now, I am not of the mind set at all that the environment can return to its pristine state.  However, I do think that resources can be managed better and more responsibly.  Furthermore, I also believe that most people care more than they know about sustainable practices.

Laura Bartock: How would you explain your research goals to the average person on the street?

CS: My interests in lie in explaining how biodiversity – or the number of different kinds of co-occurring plants and animals – is maintained in space and time.  This is important because we know that very diverse ecological communities provide important ecosystem services, such as pollinators, nutrient recycling, freshwater, improved soil conditions, and how well ecosystems can recover from disturbances, like hurricanes and fire.  These services are important not only to human well-being, but plants and animals as well.

LB: How did you become interested in this project?

CS: A very good question.  Scientists approach their research in an effort to seek generality.  What processes explain the same patterns in different systems?  For example, if we know that nitrogen loading to the Chesapeake Bay can lead to dead zones in the summer, is this process unique to this estuary only, or to all estuaries?  We know, of course, this can occur in all kinds of waterbodies.

I became interested in the field of community ecology, which seeks to understand the mechanisms that shape species coexistence across multiple scales, largely because it was theoretically intriguing.  The notion of generalizing empirical results to apply in many types of ecosystems is powerful, and I wanted to be apart of that.

Another reason is that species are going extinct at an alarming rate.

What are the consequences of this for other ecosystem processes, like nutrient cycling and soil development? Many people in the world rely on the natural environment to provide for them daily.

The link between biodiversity and those needs makes the theory I test relevant.

LB: What advice would you give to someone embarking on their own research journey?

CS: Ask questions that are both intellectually intriguing to you, but at the same time strive to ensure the questions are relevant to society in general. 

Seek to make the work personally rewarding.  Research is hard and iterative, which means perseverance is a must.  Therefore, really having a passion for the science is critical to getting through the tough times.

Read broadly in your field, and often.  Reading good material is essential to being a good writer, and writing will comprise the vast majority of your time.  Some suggest reading two peer-reviewed articles a day, as well as writing 1-2 hours a day.  This is great advice, but often a hard pace to maintain.

Engage with good collaborators.  Personally, I value smaller research teams.  Collaboration is an organic process where intellectual engagement feeds enthusiasm and vice versa.

Take risks and accept failures. One doesn’t grow intellectually without failing, working through the problem, and moving forward. Successes don’t necessarily make you a better scientist, coping with failures does.

Do you know a sustainability champion on campus? Refer them to us to be featured, at sustainability@umbc.edu.

Read the interview in its entirety at Sustainability Matters at UMBC

Another chance to catch the most interesting, and important, articles from the previous week on MIT Technology Review.

Another chance to catch the most interesting, and important, articles from the previous week on MIT Technology Review.

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.

Normal Colored Diagonal Stripes

Diagonal stripes are easy to pull off thanks to repeating-linear-gradient():

background: repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );

Rather than the very last color-stop being 100% (or nothing, which means 100%) it's a fixed value. Beyond that, it just kinda starts over. This is how I think of it (zoomed in):

See the Pen epfEc by Chris Coyier (@chriscoyier) on CodePen.

Gradient Diagonal Stripes

If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. Because of multiple backgrounds (and stacking order), you can do that all together on a single element:

background: 
      /* On "top" */
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        #ccc 10px,
        #ccc 20px
      ),
      /* on "bottom" */
      linear-gradient(
        to bottom,
        #eee,
        #999
      );

See the Pen xhkpD by Chris Coyier (@chriscoyier) on CodePen.

Stripes Over Image

Perhaps a texture? Any image will work. You could reveal part of the image by making some stripes fully transparent and some fully opaque. Or, any combination. Again multiple backgrounds allows this to all happen on the same element.

background: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 10px,
      rgba(0, 0, 0, 0.3) 10px,
      rgba(0, 0, 0, 0.3) 20px
    ),
    url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);

See the Pen gaKyv by Chris Coyier (@chriscoyier) on CodePen.

Any Direction, Any Angle

It doesn't have to be exactly 45degrees. That's part of the beauty of the repeating-linear-gradient(). It's not like this perfect rectangle that has to line up and repeat, it's just a set of drawing instructions that repeats.

background: repeating-linear-gradient(
      -55deg,
      #222,
      #222 10px,
      #333 10px,
      #333 20px
    );

See the Pen qfHmw by Chris Coyier (@chriscoyier) on CodePen.

Straight Stripes (slightly better browser support)

There is a super old syntax for CSS gradients that used -webkit-gradient() (note the no "linear" or "radial"). Basically: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Old stuff. Those browsers don't support repeating gradients. But you could kinda fake it, especially for straight stripes, by making a small rectangle of background via background-size, drawing the stripes in there, and having it repeat naturally like background-image does.

background: linear-gradient(
      to bottom,
      #5d9634,
      #5d9634 50%,
      #538c2b 50%,
      #538c2b
    );
    /* The rectangle in which to repeat. 
       It can be fully wide in this case */
    background-size: 100% 20px;

See the Pen uxJrf by Chris Coyier (@chriscoyier) on CodePen.

If you wanted to get crazy, you could transform: rotate() some element with these straight stripes and cut off the overflow, in which to replicate diagonal stripes with deeper browser support. Sounds like a lot of work.

Vertical Stripes

You could use the same method as above for vertical stripes too. Or, just use repeating-linear-gradient():

background: repeating-linear-gradient(
      to right,
      #f6ba52,
      #f6ba52 10px,
      #ffd180 10px,
      #ffd180 20px
    );

See the Pen oCpEu by Chris Coyier (@chriscoyier) on CodePen.

Just to be clear, with repeating-linear-gradient() you are best off doing a -webkit-repeating-linear-gradient() as well as the unprefixed one, if you're, you know, prefixing buy yourself which you shouldn't.

Radial Stripes

Who says they have to be straight lines eh? Radial gradients can be repeating-linear-gradients():

/* Note the RADIAL */
    background: repeating-radial-gradient(
      circle,
      purple,
      purple 10px,
      #4b026f 10px, 
      #4b026f 20px
    );

See the Pen AEymd by Chris Coyier (@chriscoyier) on CodePen.

Funky Town

Sometimes rounding errors (maybe?) or other kinda rendering funkiness happens.

Whattyagonnado. I suspect it will get better over time.

All together now.

Stripes in CSS is a post from CSS-Tricks

This article is a continuation of Introduction to the MEAN Stack. The previous post covered the installation of the MEAN stack and also presented what we ended up with in terms of its directory structure, after installation. Now it's time for some actual coding!

What We'll Be Building

We will be building an RSS feed reader using the MEAN stack. The application will allow its user to manage their list of feeds by adding a new feed, deleting an existing one, modifying an existing one and, of course, seeing a list of all the feeds in which the user is interested in.

The user has to authenticate in order to have access to the application, so that the feeds of one user are not visible to others and most importantly, to users that are not logged in. As we saw in the previous article, the stack comes with a full authentication mechanism already implemented, so we can use it without further modifications.

The feed's URLs are stored in a Mongo database on the server so that they are available even after logging off, or after closing the browser.

The last feeds are displayed to the user on the main page and they will show the article's title, an excerpt and allow the user to click on the title to read the entire post.

The user will also have the possibility to filter the feeds on various criteria.

In this first part, we will discuss the implementation of the server part of our application (the backend). We will implement a REST API to respond to the user's requests for viewing, creating, deleting and modifying feeds.

Luckily for us, the MEAN stack gives us such an API for handling the articles that can be created. We will modify this API to respond to our need of handling the feed URLs. After all, this is why we are using boilerplate code, to modify and adapt it to the needs of our application. So let's do that!

The Routes

Let's spend a minute and think about what routes our app should to respond to. The picture below shows what we expect to have: 

Now, let's open the file app/routes/articles.js. If we look at its contents, we see that this is what we want to have, but applied to the articles. So, we have to modify it a little to fit our needs. First, change its name from articles.js to feeds.js. Then modify it as shown below:

    // app/routes/feeds.js
        'use strict';
    
        var feeds = require('../controllers/feeds');
        var authorization = require('./middlewares/authorization');
    
        // Feeds authorization helpers
        var hasAuthorization = function(req, res, next) {
            if (req.feed.user.id !== req.user.id) {
                return res.send(401, 'User is not authorized');
            }
            next();
        };
    
        module.exports = function(app) {
            app.get('/feeds', feeds.all);
            app.post('/feeds', authorization.requiresLogin, feeds.create);
            app.get('/feeds/:feedId', feeds.show);
            app.put('/feeds/:feedId', authorization.requiresLogin, hasAuthorization, feeds.update);
            app.del('/feeds/:feedId', authorization.requiresLogin, hasAuthorization, feeds.destroy);
    
            // Finish with setting up the feedId param
            app.param('feedId', feeds.feed);
        };
    

For those familiar with the Express framework, this shouldn't be anything new, but just in case, let's go over it real quickly. We start by requiring the feeds controller (which we'll see in a moment) and the authorization middleware (which the MEAN stack gives us).

Then we have the hasAuthorization() function, which compares the id of the user who wants to manipulate the feed with the id of the logged in user and returns an error if they are not the same. The next() function is a callback which allows the next layer in the middleware stack to be processed.

In the last part, our code exports the routes as described in the table above, implementing the security requirements.

The Models

Creating the application's model using mongoose is a breeze. Rename the app\models\article.js to app\models\feed.js and perform the following modifications:

    'use strict';
    
        /**
         * Module dependencies.
         */
        var mongoose = require('mongoose'),
            Schema = mongoose.Schema;
    
        /**
         * Feeds Schema.
         */
        var FeedsSchema = new Schema ({
            feedUrl: {
                type: String,
                default: '',
                trim: true
            },
    
            user: {
                type: Schema.ObjectId,
                ref: 'User'
            }
        });
    
        /**
         * Statics
         */
        FeedsSchema.statics.load = function(id, cb) {
            this.findOne({
                _id: id
            }).populate('user', 'name username').exec(cb);
        };
    
        mongoose.model('Feeds', FeedsSchema);
    

We define our database structure here as follows: we will have a feeds table containing a feedUrl string type field and a reference to a user which will store the id of the current logged in user. Notice that we don't handle the creation of an id for our documents here, since this is taken care of for us by the MongoDB system.

Finally, we define a load() function that filters the documents in the database based on the id of the current logged in user.

The Controller

The controller is responsible for implementing the functions called by the router, when a specific route is requested. All the necessary functions for the CRUD operations we perform are implemented in the controller. Let's take a look at them one by one and see the implementation details.

You should be noticing a pattern by this point. First, don't forget to rename the app/controllers/articles.js file to app/controllers/feeds.js.

Creating a Feed

In order to create a feed we implement the create() function:

    /**
         * Create a feed
         */
        exports.create = function(req, res) {
            var feed = new Feeds(req.body);
            feed.user = req.user;
    
            feed.save(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    

First, we create a feed variable based on the Feeds model. Then we add to this variable the reference to the current logged in user to be stored. Finally, we call the model's save method to store the document in the database. Upon error, we return to the signup form since most likely the user is not logged in. If the document is created successfully, we return the new document to the caller.

Modifying a Feed

    /**
         * Update a feed
         */
        exports.update = function(req, res) {
            var feed = req.feed;
    
            feed = _.extend(feed, req.body);
    
            feed.save(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    

We call Lodash's extend method in order to modify the feed's properties with the ones that came from the user. Then the save method of the model stores the modified data in to the database.

Deleting a Feed

    /**
         * Delete a feed
         */
        exports.destroy = function(req, res) {
            var feed = req.feed;
    
            feed.remove(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    

Quite simple, isn't it? The model has a remove method which solved our problem quite easily.

Showing Feeds

Showing all feeds will be the task of the client part of our application. The server will only return the necessary data:

    /**
         * List of Feeds
         */
        exports.all = function(req, res) {
            Feeds.find().sort('-created').populate('user', 'feedUrl').exec(function(err, feeds) {
                if (err) {
                    res.render('error', {
                        status: 500
                    });
                } else {
                    res.jsonp(feeds);
                }
            });
        };
    

The code performs a find in the database returning the user and the feedUrl. If find fails, a server error is returned, otherwise all the found feeds will be returned.

A single feed is displayed by using the following:

    /**
         * Show a feed
         */
        exports.show = function(req, res) {
            res.jsonp(req.feed);
        };
    

... which then uses a helper function:

    exports.feed = function (req, res, next, id) {
            Feeds.load(id, function (err, feed) {
                if (err) return next(err);
    
                if (!feed) return next(new Error('Failed to load feed ' + id));
    
                req.feed = feed;
    
                next();
            });
        };
    

... that loads a specific feed based on its id (which will come packaged in the URL).

The complete code should like this:

    // app/controllers/feeds.js
        'use strict';
    
        var mongoose = require('mongoose'),
            Feeds = mongoose.model('Feeds'),
            _ = require('lodash');
    
        exports.feed = function (req, res, next, id) {
            Feeds.load(id, function (err, feed) {
                if (err) return next(err);
    
                if (!feed) return next(new Error('Failed to load feed ' + id));
    
                req.feed = feed;
    
                next();
            });
        };
    
        /**
         * Show a feed
         */
        exports.show = function(req, res) {
            res.jsonp(req.feed);
        };
    
        /**
         * List of Feeds
         */
        exports.all = function(req, res) {
            Feeds.find().sort('-created').populate('user', 'feedUrl').exec(function(err, feeds) {
                if (err) {
                    res.render('error', {
                        status: 500
                    });
                } else {
                    res.jsonp(feeds);
                }
            });
        };
    
        /**
         * Create a feed
         */
        exports.create = function(req, res) {
            var feed = new Feeds(req.body);
            feed.user = req.user;
    
            feed.save(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    
        /**
         * Update a feed
         */
        exports.update = function(req, res) {
            var feed = req.feed;
    
            feed = _.extend(feed, req.body);
    
            feed.save(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    
        /**
         * Delete a feed
         */
        exports.destroy = function(req, res) {
            var feed = req.feed;
    
            feed.remove(function(err) {
                if (err) {
                    return res.send('users/signup', {
                        errors: err.errors,
                        feed: feed
                    });
                } else {
                    res.jsonp(feed);
                }
            });
        };
    

Is the REST API Complete?

Well, almost. At this point we do not have the client part of the application implemented in order to prove that the code is working. I didn't present the unit tests for the code either, since it's not so complicated and I wanted to leave it up to you as an exercise.

We can test the code using the Postman - REST Client application available on Google Chrome.

Creating a Feed

Install Postman if you don't have it already and configure it as follows:

Viewing All Feeds

Viewing a Single Feed

The remaining parts of the code are easy to verify, so please have some fun with Postman and your new application.

Conclusion

Using a framework or boilerplate code can, in some situations, be useful and make you very productive. As you've seen in this article, implementing the REST API needed for our application was reduced to performing minor modifications to the boilerplate code. Of course for more complex applications, it may be necessary to do more than that, but still, having a starting point can be useful.

In the next tutorial, we will take a look at the client part of the application for displaying the data we will request from the server, showing forms for entering new feed URLs, handling events and so on.