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.

Using the Internet can destroy your faith. That’s the conclusion of a study showing that the dramatic drop in religious affiliation in the U.S. since 1990 is closely mirrored by the increase in Internet use.

Mainstream blogging platforms like WordPress, Blogger, Tumblr, etc. aren’t designed for hackers. They’re encumbered by features developers just don’t need or want.

And, out of the box, the popular blogging platforms certainly lack a lot things coders actually would want, such as code syntax highlighting, blog theming capabilities using a standardized templating engine, markup language support besides HTML, and integration with source code repositories, among other things.

If you’re looking for a blogging solution that’s programmer-friendly, you’ve come to the right place. The free and open source blogging platforms I’ll talk about are designed with the needs of developers in mind, and not their moms’ (unless she likes to code too).

Hexo

Hexo is a blogging platform powered by Node.js (it says so right there in the site’s tagline).

Its hacker-friendly features include native support for GitHub Flavored Markdown (GMF) as well as templating and extensibility capabilities using EJS, Swig and Stylus.

Installing Hexo will take you but a few seconds, assuming you already have npm set up and ready to go. Boom:

$ npm install hexo -g

Fun tangential fact: "npm" doesn’t stand for Node packaged modules or Node Package Manager. It’s a recursive acronym like PHP. Or more accurately: "It’s a recursive bacronymic abbreviation because it stands for ‘npm is not an acronym’," as the author explains. [Source]

• License: MIT
• Docs
• Download from GitHub

Jekyll

Jekyll is a static site generator that compiles your markup files into Web-ready HTML documents — that’s what all static site generators do, more or less — the value proposition being better Web performance and the option to ditch your databases and server-side scripts.

Jekyll has a steady-growing ecosystem, as evidenced by the other open source projects being developed for it:

• Octopress – a blogging framework designed for hackers
• JekyllBootstrap – makes it easier for you to use your GitHub Pages to host your blog for free
• Exitwp – helps you move from WordPress to Jekyll

Jekyll can be installed as a Ruby Gem:

gem install jekyll

• License: MIT
• Docs
• Download from GitHub

Anchor CMS

Anchor CMS is a featherweight; the project’s source code .zip archive is just a little over 200 KB.

Off the bat, Anchor supports Markdown syntax, which a lot of coders feel is easier and more natural for blog-writing and formatting. It also supports art-directed blogging, i.e., you can easily make each post look different.

• License: Unknown
• Docs
• Download from GitHub

Wheat

Wheat is truly cool: It pulls articles from your GitHub repo and then publishes it to your website. Imagine the possibilities! Like open source blogging where other hackers can issue pull requests for correcting and improving your blog posts.

Wheat is developed with Node.js and can be installed as a Node packaged module:

npm install wheat

• License: MIT
• Docs
• Download from GitHub

Nikola

Nikola, a static site generator, is strongly blog-oriented but it can also be used for any other type of website. Code wranglers will love the fact that it has a small codebase, which the creator of Nikola deems as an advantage because it means "programmers can understand all of Nikola core in a day."

Nikola supports a whole slew of markup languages: reStructuredText, Markdown, etc. And, of course, HTML will do just fine too if that’s how you roll.

• License: MIT
• Docs
• Download from GitHub

toto

Stolen straight off its repo description: toto is "the 10 second blog-engine for hackers."

toto is a minimalist blogging engine that runs on Git, which means you can version-control your posts just like you would when you’re writing code.

• License: MIT
• Docs
• Download from GitHub

Poet

Poet is another Node.js-powered blogging platform. What makes it unique is the project’s snooty character mascot. Just kidding.

What’s notable about Poet is it gives you the ability to write your blog posts using a markup language you’re comfortable in, whether it’s Markdown, Jade or whatever you want. Also, customizing routes for your blog posts and other pages is simple.

• License: MIT
• Docs
• Download from GitHub

Dropplets

Dropplets is a minimalist Markdown blogging platform. Its purposefully limited feature set helps makes sure you spend more time writing and less time tinkering.

• License: MIT
• Docs
• Download from GitHub

Pelican

Pelican is another static site generator, but it’s written in Python. It supports reStructuredText, Markdown, or AsciiDoc markup. It has code syntax highlighting right out of the box, and an importing feature for data coming from other publishing platforms such WordPress. Theming can be done using Jinja2.

• License: GNU AGPL
• Docs
• Download from GitHub

Wardrobe

Wardrobe is a minimalist blogging platform with a simple UI that will help you focus on writing. Wardrobe is developed with PHP. It’s very similar to Anchor CMS.

• License: MIT
• Docs
• Download from GitHub

Bolt

Bolt is a full-on content management system, so you can use it for other purposes outside of blogging. It uses Twig for templating and comes with its own Symphony debug bar for tracing code issues. And, with absolutely no magic required, you actually get to choose which relational database management system to use for a change: SQLite, MySQL or PostgreSQL. Need more reasons? How about this: Bolt was built with the assumption that you might actually want to run unit tests on your CMS; it supports PHPUnit natively.

• License: MIT
• Docs
• Download from GitHub

Shout out to the awesome Six Revisions readers who pointed me to some excellent open source blogging platforms via the comments of another related post.

Related Content

• Top 10 Free Online Blogging Platforms
• 10 Excellent Online Payment Systems
• 7 Blog Design Tips from a Content Strategist
• Launching a Blog Successfully in 15 Days
• Related categories: Tools and Resources

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 10 Open Source Blogging Platforms for Developers appeared first on Six Revisions.

Having started his career studying under some of the best typographic minds in the world, Khajag Apelian not only is a talented type and graphic designer, unsurprisingly, but also counts Disney as a client, as well as a number of local and not-for-profit organizations throughout the Middle East.

Even more impressive is Khajag’s willingness to take on work that most people would find too challenging. Designing a quality typeface is a daunting task when it’s only in the Latin alphabet. Khajag goes deeper still, having designed a Latin-Armenian dual-script typeface in four weights, named “Arek”, as well as an Arabic adaptation of Typotheque’s Fedra Display.

Given his experience in working between languages, it’s only logical that Khajag’s studio maajoun was chosen by the well-known and beloved Disney to adapt its logos for films such as Planes and Aladdin into Arabic, keeping the visual feel of the originals intact.

Q: Could you please start by telling us more about some of the typefaces you’ve designed?

Khajag: Well, I’ve only designed one retail font, and that is Arek. It started as my final-year project in the Type and Media program at KABK (Royal Academy of Art, the Hague). Arek was my first original typeface, and it was in Armenian, which is why it is very dear to me. I later developed a Latin counterpart in order to make it available through Rosetta, a multi-script type foundry.

Another font I designed is Nuqat, with René Knip and Jeroen van Erp. Nuqat was part of the “Typographic Matchmaking in the City” project, initiated by the Khatt Foundation between 2008 and 2010. In this project, five teams were commissioned to explore bilingual type for usage in public spaces.

Arek is a dual-script Latin-Armenian typeface family in four weights, with matching cursive styles. (Large preview)

I’ve also worked on developing the Arabic companion of Fedra Display by Typotheque. The font is not released yet but will be soon, hopefully in the coming year, so keep an eye on Typotheque if you’re interested.

Q: How did you start designing type?

Khajag: We had a foundational course in type design at Notre Dame University in Lebanon (NDU) during my bachelor’s degree. Actually, it was more like a project within a course, where we were asked to design an “experimental Arabic typeface” — something that was quite basic and that didn’t really involve type design, which I later realized when I entered the Type and Media program. So, that was the first project I worked on that could be considered close to designing type. The outcome is nothing to be proud of, but the process was a lot of fun.

Then, I started to work more and more with letters, although I never knew I could develop this interest, let alone study it later on. I only found out about the program at KABK during my final year at the university, when NDU graduate Pascal Zoghbi came to the school to present his Type and Media thesis project. That did it for me — two years later, I was there!

Q: Tell us about the course at KABK. Did you focus only on designing Latin typefaces, or were you able to develop your skill in designing Arabic faces, too?

Khajag: The year at KABK was one of the best times I’ve had. It was intense, rich, fun and fast. It’s incredible how much you develop when surrounded by teachers who are considered to be the top of the typographic world and classmates who were selected from different places around the world, each bringing their own knowledge and experience to the table.

During the first semester, we tackled the basics of type design in calligraphy classes, practicing and exercising the principles of Latin type. We mostly learned the fundamentals of contrast, letter structure and spacing. This continued over the year through sketching exercises, designing type for different media and screens, and historical revivals.

A couple of type-drawing exercises on TypeCooker. (Image source)

Adapting these principles to the specifics of other scripts, like Arabic and Armenian, had to come from a more personal learning effort. But despite their modest knowledge of these scripts, the instructors are capable of guiding you through your final project. At the time, I decided to go with Armenian for my final project, but others have worked with other scripts, and the results have been strong and impressive.

Q: How do you keep the spirit of a typeface intact when moving from one language to another? Is it easier to maintain this feel when designing the Latin counterpart of an Armenian typeface, as you did with Arek, or when moving from Latin to Arabic, as you’re doing with Fedra Display?

Khajag: I think each project presents its own challenges to translating a certain spirit in different scripts. In the case of Arek, I started designing the Armenian without thinking about designing a Latin counterpart to it. So, my focus was entirely on one script. The process involved a lot of investigation of old Armenian manuscripts, from which my observations and findings were translated into the typeface. This naturally created a very strong spirit that I had to retain when I moved to designing the Latin counterpart.

Armenian and Latin letter proportions and constructions have certain similarities, which helped with the initial drawing of the Latin letters. I later had to reconsider some details, like the x-height, the serifs and the terminals, in order to achieve the ideal visual harmony.

This Arabic adaptation of Fedra Display. (Large preview)

In the case of Fedra Display Arabic, the spirit of the typeface was already there. The challenge was to translate the extreme weights of Fedra Sans Display to the existing Fedra Arabic. The Latin font is designed for headlines and optimized for a compact setting. These were important to retain when designing the Arabic counterpart. I experimented a lot with the weight distribution of the letterforms, something that is an established practice in the Latin script but not in the Arabic.

I had to find the right width and the maximum height of the letterforms in order to achieve similar blackness while maintaining the same optical size. Whereas, for the hairline, it was necessary to keep the compact feature of the Latin without undermining the Arabic script. A set of ligatures was designed to further enhance the narrowness of the font.

Q: Do you design only Arabic typefaces? If so, is there a particular reason for that?

Khajag: Besides Arek and a few other small projects I’ve been involved in, I mostly work with Arabic. The first direct reason is where I live, of course. Most of the time, clients in the region need to communicate in two languages, and that’s usually Arabic and English, or Arabic and French. The other reason is the number of Arabic fonts available compared to Latin fonts. Usually, when looking to communicate in English, I can find a way to do it through existing Latin fonts, but that’s not always the case with Arabic.

Although, I have to admit that a lot of good Arabic type is emerging in the design world nowadays. Still, there aren’t that many Arabic typefaces, and with time the good ones become overused and everyone’s designs start to look similar. This is why I look to differentiate my work through type. I do not always design complete functional typefaces; rather, I often develop “incomplete” fonts that I can use to write a word or a sentence for a poster or a book cover, and different lettering pieces here and there.

The identity poster and catalogue for “Miniatures: A Month for Syria” event, organized by SHAMS. (Large preview)

Q: Do you prefer to design Arabic typefaces that hold true to the calligraphic origins of the script, or is it more interesting to depart from those origins somewhat, as you did with Nuqat?

Khajag: I think Nuqat is quite an extreme case of departing from calligraphy. I consider it an experiment rather than a functional typeface. In any case, I don’t think I have a particular preference for typefaces to design. I am very much intrigued by the process, and in both cases there are some quite interesting challenges to tackle. A big responsibility comes with designing a typeface that must remain true to its calligraphic origins, something that comes with a lot of history and that has reached a level of perfection. And when you depart from that, you go through an abstraction process that can also be a fun exercise.

Nuqat is a display typeface designed by Khajag Apelian and René Knip for the “Typographic Matchmaking in the City” project, initiated by the Khatt Foundation. (Large preview)

Q: Where does your love of typography and graphic design come from?

Khajag: Like most teenagers about to start university, I was confused about my subject of study. At the time, I was part of a dance troupe with a friend who used to be a graphic designer. I liked her quite a bit and thought I could enroll in graphic design to be “cool” like her! I didn’t know what graphic design was about at the time. And so I enrolled. The foundation year was all about color theory, shapes and composition. It wasn’t until the second year or so that I started to realize what design was really about. Luckily, I loved it.

Later on, I took courses with Yara Khoury, and thanks to her I really got to appreciate typography. Yara was heavily influenced by different European schools that put typography on a pedestal, and she managed to transfer that to me and to other students. At NDU, we were exposed to the work of various designers from the Bauhaus and Swiss schools, and we were trained to capture the details and understand the function of type within graphic design. I was particularly fascinated by how one can go all the way from designing something that goes unnoticed by the reader to something that is very present and expressive, all just with type.

Q: Did you enjoy the visual departure from the Arabic culture you were surrounded by and brought up in, into the Modernist European one you were learning about? Did you ever find the aesthetic difference between the two difficult to navigate?

Khajag: Very much, actually. It wasn’t difficult to navigate per se, but rather overwhelming, maybe? Everything in the Netherlands is designed, and many of those things are featured in books as exemplary design. I had always been exposed to this through books and the Internet, but actually being immersed in it was another experience. One funny incident was when I spotted a police car for the first time, knowing it was branded by Studio Dumbar. I was so excited, I almost wanted to take a picture with them.

Q: How did you start off in the design industry? Could you also describe your role at your current company?

Khajag: My first job as a designer was in branding with Landor Associates in Dubai. I worked there for around a year, before going to the Netherlands for my master’s. After graduation, I extended my visa for a year and worked freelance with several Dutch design studios on projects that involved designing with Arabic. My work partner, Lara, was also living and working in the Netherlands at the time, and both of our visas were about to expire. Right before coming back to Beirut, we worked together on a cultural project with Mediamatic. We got comfortable working together and thought, Why not start a studio when we get back to Beirut? And so we did.

Book cover design and guidelines for Hachette Antoine, a regional publishing house that maajoun has been working with for over three years (Large preview)

When we started, we were highly inspired by Dutch business models, such as Mediamatic and O.K. Parking, which often initiate their own cultural or educational projects and events, sometimes funded through their commercial practice. This business model was somewhat new to us at the time. Things have changed since then, and many design agencies nowadays have their own cultural or educational projects, sometimes referred to as “R&D” or “corporate social responsibility”. Far from being a corporate strategy, we like to think of our side projects as a channel to exchange knowledge with other designers in our area.

Our commercial practice, on the other hand, is focused on editorial design, lettering and type design. Our studio is rather small (most of the time, only the two of us), which means we both have to do a bit of everything, even accounting!

Q: What have been your biggest achievements till now?

Khajag: I consider maajoun to be one of my biggest achievements to date. I love what we do. When you work on fun projects in university (whether cultural or experimental), everyone tries to make you feel like you should enjoy it as much as you can because you won’t get to do much of it in the “real world.” That’s not true. At maajoun, we work on interesting projects, we take the time to experiment, and we have fun!

Publishing Arek with Rosetta would be another big achievement. Arek is the first typeface that I seriously developed, and I am really happy it is out there and available to the public.

Maajoun’s submission to GrAphorisms, a project initiated by SHS Publishing (Large preview)

Q: You’ve done some work on Arabic versions of logos for several Disney films. Are you able to share with us what that process has been like?

Khajag: Arabic logo adaptation is becoming more and more common in the Middle East and North Africa, whose markets big international brands are trying to reach. Disney is no exception. We were asked to design the Arabic versions of the logos for several Disney films, including Aladdin, The Lion King and Beauty and the Beast.

We usually start by analyzing the original logo, its visual characteristics and some distinctive shapes; most importantly, we try to extract some cultural references from the lettering technique used in the logo, whether it has a 1960s retro feel or some elegance in a classical serif. We then try to translate these both visually and conceptually to the Arabic. This helps us to create a logo that works well visually with its Latin counterpart, without compromising the essence of the Arabic script.

Maajoun’s adaptation of Disney logos to Arabic script (Large preview)

The Arabic adaptation for Disney’s Tangled (Large preview)

Q: Is there a way for readers to know what conferences you’ll be speaking at or attending, or workshops you’ll be organizing?

Khajag: Kristyan Sarkis, Lara and I decided a few months ago to start a series of Arabic lettering workshops, which we’ll try to carry to different cities every now and then. We started during Beirut’s Design Week in June 2013 and had another session in July. We are having another one around May in Beirut, so those who are interested can stay tuned to our Facebook page.

Also, the Khatt Foundation usually organizes a workshop on Arabic type design at Tashkeel in Dubai. I usually take part in this. It’s an intensive nine-day workshop. The first three days concentrate on Arabic calligraphy and lettering, while the next six days are on Arabic type design. I also usually announce these things through Twitter (@debakir and @maajoun) or through maajoun’s page on Facebook.

Q: What advice would you give to young readers out there who are interested in becoming a type designer?

Khajag: Go for it! But know that type design is not only about drawing letters. It involves research and a lot of technical work.

Related Resources

• “Calligraphy Qalam”
  An introduction to Arabic, Ottoman and Persian Calligraphy.
• “Arabic Typography”
  Online portal for typography, design, trends, inspiration and visual culture in the Arab world.
• “Arabic Typography”
  Pascal Zoghbi’s blog, based on contemporary Arabic typography.
• “Arabic Typography”
  Nadine Chahine’s blog on Arabic type today.
• “Arabic Typography & Type Design”
  Open forum on Typophile.

(il, al)

© Alexander Charchar for Smashing Magazine, 2014.

I’ve always had this crazy infatuation with packaging design. There’s just something about getting a physical product and checking out what it’s presented in and how its presented. Is it in a box? What color is the label? Is there stuffing of any sort in it? What materials are being used? How does it make me feel?

Packaging is important because it’s like the UX, or user experience, of a physical product. It determines how we interact with that product and allows us to make educated assessments of it. If a company doesn’t put time and and effort into their packaging, I may get something I feel is cheap and that may reflect poorly on the product. Thus, I have a poorer experience and I’m not thrilled with the product. It’s all related to the brand experience and our perceptions.

Because of this, designers must pay attention to how they are packaging items. We’ve got to keep in mind who’s purchasing the product, what the product is for and what it’s supposed to represent. Luxury items look and feel that way — they aren’t in cheap packages.

Bow and Arrow (student project)

Bow and Arrow is a store that makes handcrafted jewelry. The packaging of this brand reflects that as you have pieces of wood and and handwritten fonts on their bags and in their jewelry boxes. This is a very simple idea that makes a lot of sense and looks great in the process.

The Brain Cube

The Brain Cube is the Rubik’s Cube on steroids. Instead of trying to match up different colors, you have to make sure the grooves of the brain are perfectly matched. I’ve never solved a Rubik’s, so I can only imagine how tough this one is. But also of importance, how intriguing is this packaging? It comes in a clear jar and tends to remind you of a mad scientist who keeps organs in his basement!

Burn Card T-Shirts

Without the scale, you’d think this was just a fancy deck of cards. But the imagination of these designers is awesome! They’ve decided to keep the ‘card’ going in their packaging to not only make the tag look like a playing card, but also create an apparel box that looks like a card deck.

Callegari Olive Oil

If you saw this in a store next to other olive oils, you’d probably think a worker made an awful mistake by putting wine or pens or even perfume next to bottles of oil. Calligari has decided to be bold in their packaging design for their olive oil. They want you to feel differently about olive oil and use it differently than you would use most. Chefs are able to sign their dishes now while people can spray aromatic oil on their salads. 

Conto Figueira

There’s just something about menswear and wood that is always intriguing to me. It adds a level of luxury and an experience not common to most brands. Plus, the wood is re-usable and just hard to part with so consumers will always remember and see your brand.

Evil Spirits Vodka

This vodka plays off the idea of the notorious board “game” called the Ouija Board. Apparently, you’re supposed to put out this board and let the spirits guide you to the answers to your questions. It’s all in good fun if you believe in spirits and in ghosts. Evil Spirits Vodka takes it to another level by creating a pairing to this type of culture, tapping into the spookiness that comes with the Ouija board.

Halycon

I really like how the packaging design and branding of the Halycon is consistent throughout each piece without being redundant and losing its luster. It’s a really bold direction for a place like the Halycon.

Hither & Yon

Who doesn’t love wine labels? Rather than branding their wine with their full name, they’ve taken the very simple ampersand and have made it extremely beautiful for each different flavor. Each one is extremely creative and great for those wine lovers who also have a taste for the arts.

Lo Virol

Wine labels are popular when it comes to packaging. You always want to know how different you can be next to the traditional idea of wine bottles. What I like about this packaging is the pure graphic content. There’s usually always some sort of hand crafted feel to wine labels, but I love how this label has bright colors and geometric shapes.

Lucky Brand Jeans

How do you keep your brand consistent when your brand decides to jump into a new industry? Clothing brand Lucky Brand Jeans have decided they wanted to make accessories for the tech-world without losing touch with what they’re best out. So, they decided to create packaging with their jeans on it. It’s so simple and perfect!

La Michoacana

La Michoacana is a traditional Mexican Paleteria. In my quick research, I found that is a small latin ice pop made out of different fruits. It leads me to believe La Michoacana not only makes those things, but also expands their brand as well to drinks and other tasty snacks for people. The brand looks delicious, and even with the help of a few colorful stickers, they’ve created something that’s interesting and simple enough to remember.

Milk Talk

Milk Talk creates moisturizing body soaps that smell like banana, strawberry or apples. These scents are reiterated in the coloring and the fun sponges put atop the packaging. Also, the bottles are made from a really smooth material that continues to echo the sentiment of the moisturizing soap. This is a great example of packaging that has a brand message and continues to send it in various ways.

One Percent

By looking at the box, you’d probably have no clue what this product is. However, it’s intriguing enough for you to want to pick it up and scope it out. This shoe box is very intricate and of high quality to help them make a statement to their target audience. It’s hard to rethink packaging such as a shoe box but One Percent really took it to the next level to reflect what they stand for.

Relishing Travel Gold Bullion Pineapple Cake

There’s cake in this box, so it automatically gains my interest. But seriously, think of a cake box and think of how Relishing Travel completely re-imaged the idea to fit their brand. They’ve created packaging that creates a higher interest level of the actual product. I would purchase this just to have a chance to unwrap the packaging and have what’s inside. That’s great design.

Romero and Paul

Above, One Percent showed us how we can completely re-imagine the shoe box. Romer and Paul decide the shoe box is fine, but they show us how to make it a luxurious experience. These wonderful, high quality loafers play a role in creating characters and settings for consumers, making you feel as if Romero and Paul are close friends.

Trafiq

Trafiq is another brand that draws on traditional uses of the word ‘trafik’ to play off. It has a heavy vintage, yet classical feel that seems to make you feel a bit more elegant than eating burgers wrapped in thin paper.

Velocita Coffee

Business is about taking risks and being bold in the decisions you make. How often do you see coffee makers create packaging that makes it look like it just came straight off the plane? Velocita created this packaging intentionally to let consumers know their coffee is so fresh, it’s like they just received it from Rio. I love this because, again, it’s bold and different and is sure to stand out amongst other brands. 

Vitaly (student project)

This brand focuses on serving gluten-free cereal to the gluten-free community. They wanted to create packaging that was intriguing to that sector and also offered one serving of cereal for them. I like the artistic, natural approach to this packaging because it just makes sense.

Vogue limited edition box

It’s not often that you feel luxury when dealing with books or magazines. When magazines put out special and limited edition magazines, you just assume it will be larger in number. Vogue totally blew our minds by creating luxurious and elegant packaging for their limited edition magazine that also came with a bag as a gift for recipients. The handwritten note is also another very lovely touch.

Windows 8

I would’ve never thunk it, but it seems like Windows 8 has been trying to prove something with their branding and designs in this new revival of Windows. Where we’d be lucky to see screen shots and just all around ugly stuff on software packaging, it seems Windows has decided to show their cards in the design department. There are some very interesting and beautiful boxes from Windows.

Kanye West – Yeezus album art

If you’re familiar with the hip hop culture, you’re familiar with Kanye West. Even if you aren’t, you’re probably familiar with Mr. West. At any rate, as always he tends to strike up a lot of conversation when it comes to his album covers. Some get banned and censored, others get praised as amazing and beautiful. With tons of controversy about Kanye’s album, from the title to the cover, this could quite possibly be the very simple CD packaging for his next album. There’s something extremely powerful in all this simplicity.

Conclusion

By now, I hope you see that—whether it’s a pair of shoes or a mobile app—you don’t just have to wrap your product up, put in a bag or a box and slap a sticker on it. Think out the process and really determine how you want the people purchasing the product to feel when they first encounter it. There are little to no rules, the sky’s the limit, so think outside the box and be creative!

Over 600 Secrets, Tips and Tricks for Marketers – only $8!

Emu mines your conversations and smartphone sensors to add helpful details to messages.

Making plans via text message can be a pain. A new messaging app called Emu aims to alleviate some of that pain by bringing a contextually aware assistant into the process.

Abu Hurairah (RA) reports that the Messenger of Allah (SAW) said: "The best day on which the sun rises is Friday. [On Friday] Adam (AS) was created and on that day he entered paradise and on that day he was expelled from paradise. And the Hour will come to pass on Friday." [Muslim]

Friday is the BEST of days. Our Prophet (SAW) referred to it as a day of Eid. It is a day of blessing and of festivity. For all of these reasons and more, we have saved the BEST of Islamic Awareness Week for last!