Creating a multilingual Single Page Application with Vue

Having a multilingual website provides a competitive advantage to businesses and organizations, while allowing them to expand their client base to international markets and potentially increase sales volumes.

This tutorial will show the basics on how to create a single page application with internationalization support, using Vue and the Vue-I18n internationalization plugin. We will also show you how you could optimize the structure of your HTML templates, based on the structure of your language files, and the use of "variables" inside your localized language strings.

Continue Reading →

29. July 2019 by
Categories: code, i18n, Internationalization, javascript, localization, multilingual, plugins, snippets, SPA, tools, Vue | Leave a comment

Build a simple Instagram API – Case Study

Revision : July 25, 2016

Instagram has become one of the preferred and most used applications for users and organizations to instantly share media content with the world. Many Instagram users also want to take a step forward and share their Instagram content into their websites, web applications or blogs. In some other cases, Digital Agencies may also need to feature Instagram content from authors other than themselves.

In this case-study, we are going to learn how to build our own API (Application Programming Interface) to get embedded data from Instagram pages, and return it to a requesting (web) application in JSON format. Also, we will discuss the motivations and advantages of creating this self-hosted API versus Instagram's own API.

Continue Reading →

05. January 2015 by
Categories: API, code, instagram, javascript, jquery, php, tools | 13 comments

Play (mp4) videos with mediaelement.js in fancyBox

One of the questions I have seen often is : how to stream (self-hosted) videos in a web page using fancyBox?

A more elaborated question is : how to stream videos consistently through most modern web browsers and devices in a modal box like fancybBox?
Continue Reading →

17. June 2014 by
Categories: code, fancybox 2, html5, jquery, mediaelement.js, plugins, video | 37 comments

Create a filtered image gallery with jQuery and Fancybox – Part 2 : automatically create image thumbnails with php

In Part 1 we learned how to build a filtered image gallery with jQuery and Fancybox.

Now we are going to learn how to generate our image gallery from images stored in different folders or sub-directories and also create their corresponding thumbnails automatically using php.

With this method, adding images to our existing gallery would be as easy as just placing them in their corresponding category folder.

Continue Reading →

25. July 2013 by
Categories: code, fancybox 2, html5, jquery, php, plugins | 34 comments

Create a filtered image gallery with jQuery and Fancybox

We are going to create a Fancybox image gallery that can be filtered by different categories using jQuery and Fancybox. If you have seen the
Isotope jQuery plugin, then you get the idea of what we will be talking about.

This the first part of a series of two tutorials.

Continue Reading →

06. June 2013 by
Categories: code, fancybox 2, html5, jquery, plugins | 41 comments