Lazy Loading Images in VueJs

Lazy Loading Images in VueJS is important to save bandwidth, rank your page better, improve performance considerably and provide a better User Experience, especially if your website has several images. In this tutorial of Lazy loading images with Vue.js, we will be using an extremely swift and lightweight package called Lozad.js that does the major heavy-lifting behind the scenes. But Why Lozad, you ask? Lightweight – < 1kb(978 bytes) minified …read more

Using Twitter Typeahead with Vuejs

Learn how to integrate twitter typeahead search powered by Bloodhound directly into your Vuejs app. Using Twitter typeahead with Vuejs may seem tricky at first, but its far from the truth. Moreover, it is very well suited for traditional web apps as well as SPAs. If you are new to twitter Typeahead/Bloodhound, here’s a tutorial –  Smart Search with Twitter Typeahead that I recommend before going ahead. Requirements: – VueJS (v2.5 and …read more

Create Custom Twig Filter in under 2 min

A custom twig filter is required when the available twig filters cannot do the job for you. Base64 encoding and decoding for example, cannot be done using the built-in filters even though these functions exist in pure PHP. So how do you create a custom twig filter in Symfony? Requirements: Symfony 3.4 and above Create Custom Twig Filter For the sake of an example, we will be creating 2 filters …read more

Vuejs Vuex State Management for Beginners

As your VueJS App grows, the number of components keeps growing, giving rise to the need for state management to communicate between components. Vuex is the recommended tool for State Management built specifically for Vuejs apps. Before proceeding, lets refresh a few concepts… What is State? State is like a container/Object that stores some value/values. What is State management? The way in which a state is modified is referred to …read more

Routing with Symfony and Vuejs Router

One of the initial problems you might come across while integrating Symfony and VueJs is probably Routes. How do you handle this Symfony Vuejs routing? How to let Symfony forward the request to Vue Router? Lets quickly get to answering these questions. Forwarding Requests from Symfony to the Vue Router To allow the Vue Router to take control, we need to forward incoming requests from Symfony to the Vue Router. …read more

Support ES2017, ES2018 features in Webpack encore

Want to start using async generator function, spread operator and all the latest features of ES2017, ES2018 in your projects? Well, wait no further to checkout how easily you could achieve this! There are 2 ways of supporting these features – Update .babelrc file Update Webpack Encore config A little background explaining What is Babel? And what are Babel presets? Latest features of Javascript (like spread operators) may not supported by …read more

Symfony Vue JS Integration in under 10 mins

Integrating a good front end library like Vue js has become a de facto standard these days. This tutorial aims at integrating Vue js with Symfony backend. Symfony Vue Js integration is one of the best combinations for a trendy App, whether it be a SPA or a traditional Web App. Requirements Symfony 3.4 and above Vue JS  2.5 and above FOSRestBundle (optional, but useful when you want to develop …read more

Generate Sitemap in Symfony in 2 simple steps

What is a Sitemap? A Sitemap is a XML file that contains a list of URLs on your website that help the Search Engines discover and crawl your website more effectively. Generating a Sitemap in Symfony is one of the trivial tasks one might encounter. There are a few bundles that might help you, although the process & configuration could be tricky, especially for beginners. This tutorial aims at generating …read more

Create Global gitconfig and Setup git alias

Developers using GIT as their Source Version Control know the troubles in setting it up for new projects. Getting more productive needs setting up of user credentials, alias’ and other git configurations for every new project. But what if you could have a global git configuration to avoid redundant tasks? That’s where global gitconfig comes in. Git does not automatically create the global .gitconfig file during installation. This file is …read more

Smart search using Twitter Typeahead and Bloodhound

One of the basic things users would want to do, is search the content on a website. Having a crisp, fast and smart search that displays suggestions as one types, is something that everyone would love to have on their website! The twitter typeahead library does just that! And when typeahead is used in conjunction with Bloodhound, it makes the the search experience even better! But…. What exactly is Bloodhound? …read more