Creating a website with Symfony 4: Part 1

Today we’ll start building a lightweight Question/Answer app in Symfony 4. Kind of like a simplified version of Stack Overflow. In this series we’ll cover Symfony 4 authentication, forms, Twig, Doctrine and much more! This tutorial is mainly meant for people who are either looking to switch to Symfony 4 from another framework or someone whose been learning PHP and is ready to take the next step to using a framework. I’m aiming to make this more a crash course than something extremely in depth, which should hopefully show you how to get up and running with Symfony without dragging

Continue reading

How to fix merge conflicts

When starting out with git, fixing merge conflicts can be a daunting task. Especially if you’re still getting used to working with git. As with programming (and most things), you can read all you want about it, but actually doing it is where you learn the most. So, I’ve made a git repo that you can use to practice fixing a merge conflict. That way you don’t need to practice on your actual working repo. You can practice on my dummy one. We’ll go through fixing the merge conflict in the next few sections. Prerequisites I’m using a Vue.js app

Continue reading

How to hide the keyboard for a SearchBar in NativeScript + Vue.js

Having trouble getting the keyboard to disappear for a search bar when working with NativeScript + Vue.js? Specifically with the SearchBar component, there isn’t an out of the box way of closing the keyboard without typing something and pressing the Search button. Closing the Keyboard Without searching you probably wouldn’t be able to figure this out, but the method that closes the keyboard is dismissSoftInput. To use it in combination with Vue.js you’ll need to first add a ref attribute to your component. Here’s an example: <SearchBar hint="Search…" ref="searchBar" /> Then in your method you would access the component like

Continue reading

How to detect Chrome Autofill with Vue.js

Are you having issues with Chrome autofill on your Vue.js forms? The form inputs aren’t saving the values. Or you need to know when someone is using autofill. There’s some things you can do to solve these issues. Fixing the issue of autofill not saving At work last week I was running into issues where Chrome autofill was not saving the values that were being autofilled in the input field. The value would show, but it wasn’t actually there. When you clicked inside the input, your cursor would be placed at the beginning of the input. The value from the

Continue reading

3 things I wish I knew before starting my first big Vue.js project

Last week I finished my first big Vue.js project. Before then I had went through a bunch of tutorials and made some small/medium sized projects in preparation to building this first big one. Here’s 3 things I learned from building this project that aren’t really mentioned in beginner tutorials. 1. Setting up folder aliases This is more of a configuration thing, and it’s understandable that it’s not really mentioned in a lot of beginner tutorials, but you can set up aliases to other folders. You don’t have to have imports that look like this: import '../../../components/SomeComponent.vue' You can set up

Continue reading

How to use Braintree & PayPal with Vue.js

If you’re not sure how to use the Braintree Javascript SDK with Vue.js, then you’ve come to the right place! Today we’ll be creating a payment form using Vue.js to accept payments from Braintree and PayPal. If you didn’t know, Braintree is a payment gateway owned by PayPal that allows you to accept payments online. They offer a bunch of different ways for you to accept money. The main ones being credit card and PayPal. If you want to see what else they offer, click here. Braintree actually does have pretty good documentation on how to use their library to

Continue reading

How to make ajax calls with Vue.js and Axios

Generally, when you’re working on medium to large scale Vue applications, you’re going to be making ajax calls to a backend api service to pull data for your frontend app. To do that, you’ll need to make ajax calls. In this tutorial, we’ll go through a quick example of how to get started with axios, a javascript library that helps to make ajax calls. Prerequisites Basic understanding of Vue.js vue-cli installed What will we be making? We’ll be using the dog.ceo api to grab a random picture of a dog to display in our app. It’s simple, but hopefully it

Continue reading

Let’s Learn Vue.js – Create a Hangman Game!

Vue.js is a javascript framework similar to Angular and React. It provides the tools for you to build dynamic single page applications as well as one off javascript widgets. In this tutorial you will learn the basics of Vue.js and will hopefully get to a point where you are comfortable enough to move to more advanced topics. Prerequisites & Installing Vue.js Before you can start creating a Vue.js app, you’ll need to have node installed. If you don’t, go to https://nodejs.org and follow the instructions there. If you’re on Windows, there is an installer that will handle setting everything up

Continue reading

Setting up CORS

Depending on your server, there’s different stuff you need to do to setup CORS. I’ll show you how to set it up on nginx and Apache in this tutorial since those are the most common. Why do you need CORS set up? Before going into how to set it up, let’s discuss a little why you’d need CORS. The main reason why you need to set up CORS is because generally when building a web app with a separate backend and frontend, your backend will be on one url (ex. api.yoursite.com) and your frontend will be on another url (yoursite.com).

Continue reading

Creating a Web App with Symfony 4: Setting up Routes

This is a continuation from the previous post on Entity Services. If you haven’t read it yet, click here! We’re in the final stretch of our backend API! We have our entities and services created, now let’s work on creating the controllers for our app. Step 1: Creating an Address Endpoint As we did with the BaseEntityService, we can make a base controller that can work with most of our entities. We’ll create a base controller that has methods to do the basic CRUD (create, read, update, delete) operations. Then extend that base controller for each entity controller. Before we

Continue reading