Looking for more information on how to do PHP the right way? Check out PHP: The Right Way

Matt Stauffer:
Removing all Vue dependencies from Laravel
Mar 15, 2017 @ 10:17:01

In a new tutorial on his site Matt Stauffer shows how to remove the Vue.js dependencies from a standard Laravel installation. There's only a few but they're installed by default and if you're not using Vue.js they can easily be removed.

The recent versions of Laravel have come with some very minor Vue dependencies out of the box. They're easy to remove, but you may have not actually tried that yet, or you might be worried you're going to leave something sitting there. So, here's a quick tip on how to remove all Vue dependencies in a new Laravel install in a few easy steps.

The process is broken down into a few steps:

  • Install Laravel
  • Drop Vue from package.json
  • Drop the bootstrap and the sample component

The changes you'll need to make to the configuration files are included so the removal process is pretty painless.

tagged: laravel remove vuejs tutorial steps javascript

Link: https://mattstauffer.co/blog/removing-all-vue-dependencies-from-laravel

Delicious Brains Blog:
Debugging JavaScript and PHP at the same time with PhpStorm
Feb 16, 2017 @ 11:14:20

The Delicious Brains site has a tutorial posted from author Peter Tasker showing you how to debug Javascript and PHP at the same time directly in your PHPStorm IDE.

Since I started with Delicious Brains last July, I’ve become a big fan of PhpStorm. It really is the bee’s knees. I won’t go over the full list of features, but some of the things I find helpful daily are: Cmd+clicking into method definitions, VCS integration and color highlighting of code changes, code bookmarks, and of course, Xdebug integration

In this post I want to expand on what Iain already covered with PhpStorm and Xdebug and show you how to level up your JavaScript debugging skills with PhpStorm.

The tutorial starts with a section explaining why using the PHPStorm debugger could be more beneficial and provide a more integrated workflow. It then starts in on the setup, showing how to set up the extension for Chrome so that it can talk to the IDE for the Javascript side complete with screenshots (and screencasts). With the two integrated the next step is to add a breakpoint in the code and what the results look like when it's executed and thrown.

The post finishes up covering the integration of the debugger with Xdebug allowing for the complete debugging of your application in one place.

tagged: debug javascript phpstorm integration tutorial xdebug

Link: https://deliciousbrains.com/debugging-php-javascript-phpstorm/

Introducing Laravel Mix (new in Laravel 5.4)
Feb 09, 2017 @ 09:23:40

Matt Stauffer has posted the latest in his "What's new in Laravel 5.4' series with this new post covering Laravel Mix. Mix is a reworking of the Laravel Elixir package in previous framework releases but has changed a few things up in the process.

Laravel Mix. The same and yet entirely different from Laravel Elixir.

If you're not familiar with Laravel Elixir, it's a wrapper around Gulp that makes it really simple to handle common build steps—CSS pre-processing like Sass and Less, JavaScript processing like Browserify and Webpack, and more.

In Laravel 5.4, Elixir has been replaced by a new project called Mix. The tools have the same end goals, but go about it in very different ways.

He starts with a look at what's new about Mix and how it differs from previous version of Elixir. This includes changes in the structure of the configuration file, a different files/folders structure, helpers and quite a few other changes. Matt gets into detail on each item, providing code examples for the changes and a brief summary of how it's different for those that might have used Elixir before. Check out the full post for the full details.

tagged: laravel mix elixir css javascript compile helper v54 framework

Link: https://mattstauffer.co/blog/introducing-laravel-mix-new-in-laravel-5-4

Symfony Finland:
A practical introduction to TypeScript for PHP developers
Feb 06, 2017 @ 10:14:22

The Symfony Finland blog has posted a practical introduction to Typescript for PHP developers. TypeScript is a free and open-source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.

A greenfield project might be a good way to try a technology, if the scope is limited and risk in general is low. For many kicking off a new project or undertaking a major rewrite is not an option, but you can still evolve and apply good ideas and fresh concepts in your work. The value of legacy in web development is understated.

This is an area I've found TypeScript to be very useful for and I think many developers can benefit from taking a closer look at it. TypeScript compiles down to JavaScript & can be adopted gradually, chances are you'll have plenty of code you can use it on.

They then cover five advantages about TypeScript that can help make adoption in your applications easier:

  • Low overhead in getting started
  • Great tooling for your favourite editor
  • Familiar syntax for async programming
  • Type Definition files
  • Stability and adoption

For each section there's a brief summary of the point and, where applicable, a quick code example or screencast animation showing it in action.

tagged: practical introduction typescript javascript tutorial adoption

Link: https://www.symfony.fi/entry/a-practical-introduction-to-typescript-for-php-developers

Symfony Finland:
Sharing state in a Symfony hybrid with Twig, React and other JavaScript apps
Jan 26, 2017 @ 11:14:12

The Symfony Finland site has posted a new tutorial showing you how you can share state in a Symfony application between Twig, React and other Javascript-based applications.

Front end development has certainly grown up in the last few years. UI logic is increasingly being moved to the client side, but the traditional server-rendered views aren't going anywhere soon. And they shouldn't.

The two methods will live alongside each other and you'll have to work with two worlds. Let's explore an idea how to make this pleasant to work with, by sharing state between Twig templates and JavaScript.

The post starts with some background on a case where this kind of sharing was a requirement and, while the initial version was scrapped, a prototype application was born. He details what this prototype showcases (which JS libraries) and links to the Javascript involved over on GitHub. They then get into the code examples showing the creation of an AppState object that handles the serializing of the state information and store the result in the database via a Doctrine connection. This value is then output to the pages that require it, making it available to the frontend application (Vue.js, React or plain Javascript).

tagged: tutorial symfony shared state backend frontend javascript twig react vuejs

Link: https://www.symfony.fi/entry/sharing-state-in-a-symfony-hybrid-app-with-twig-react-etc

MyBuilder Tech Blog:
Managing Newlines and Unicode within JavaScript and PHP
Dec 28, 2016 @ 10:07:46

On the MyBuilder.com Tech blog Edd Mann has a post sharing some advice about dealing with newlines and Unicode characters in both Javascript and PHP functionality.

We were recently sent a tweet in-regard to a text-area client/server-side length validation not correlating. After some detective work we were able to find two issues that could have caused this to occur. In this post I wish to discuss our findings, and how we resolved each issue.

The first issue they found was newline characters that didn't seem to be there by normal ACSII standards in text-area inputs. They were showing as a single character on the client where it was two on the server, later discovered to be a defined standard in the HTML 5 spec. The second Unicode-related issue was with characters outside of the basic multilingual plane and how Javascript measures its length. The post then explains their solutions to each of the two issues, doing some string replacement and using a different function to get the length of a string.

tagged: newline javascript unicode html5 mbstring length

Link: http://tech.mybuilder.com/managing-newlines-and-unicode-within-javascript-and-php/

Matt Stauffer:
Using Vue in Laravel 5.3, with the Vue bootstrap and sample component
Dec 23, 2016 @ 09:18:29

Matt Stauffer has posted the next article in his series of "What's New in Laravel 5.3" series with this article covering the use of Vue.js with Laravel and some of the bootstrapping that makes it easier.

In Laravel 5.3, it's easier than ever to write and use Vue components out of the box. This means 5.3 has a somewhat more opinionated default frontend stack than previous versions do. But never fear—it's easy to strip out the default components.

Let's explore 5.3's JavaScript stack together. Spin up a sample app using the Laravel installer (or, if you're like me, use Lambo) and open up the site in your favorite IDE.

He starts with the sample definitions of the package.json and Gulp files, including some dependencies including Vue.js itself and the Vue Resource packages. He then shows a sample app.js file to define the main part of the application and a matching bootstrap.js with a bit of, well, bootstrapping for the application. Finally he creates the example component, runs yarn/gulp and updates a Blade template to lay out the main application div and include the application Javascript file. Finally he shows what the resulting application should look like with screenshot included.

tagged: laravel vuejs tutorial introduction gulp yarn elixir javascript framework

Link: https://mattstauffer.co/blog/using-vue-in-laravel-5-3-with-the-vue-bootstrap-and-sample-component

Adam Wathan:
Customizing Keys When Mapping Collections
Jul 19, 2016 @ 10:52:29

Adam Wathan has a new post to his site talking about mapping with collections and customizing the keys when injecting new data into your Laravel collections.

People often ask me, “how do I specify keys when I’m mapping a collection?”

It actually ends up being a pretty interesting topic, so I decided to cover it in a short screencast, as well as in written format below.

He shows how to translate a simple set of data into a much more slimmed down version. He points out that the "map" function could be used but it doesn't allow for setting keys. Instead he talks briefly about how the problem could be solved in Javascript (returning an object instead of an array) and how to use the "reduce" method to filter and reset the data as it goes through the array. He finishes out the post talking about learning from other languages, the "toAssoc" macro on Laravel collections and mapping the data back to an array with a custom macro.

tagged: customize key mapping collection laravel object javascript example screencast

Link: https://adamwathan.me/2016/07/14/customizing-keys-when-mapping-collections/

Implementing Smart Search with Laravel and Typeahead.js
Jul 14, 2016 @ 12:12:41

The Scotch.io blog has posted a tutorial combining Laravel and the Typeahead.js library to create a "smart search" in your application. Most of the tutorial centers around the Typeahead.js code though, so with a bit of tweaking it could sit on top of just about any framework out there.

In a big web application, like an online market or a social network, one of the most important parts of the app is the search functionality. Having a great search feature will help your users find the right content(users, products, articles) quickly and easily.

In this tutorial, we are going to learn, how to enhance your default search field in your site with real-time suggestions from the database. We will be using Laravel, jQuery and Typeahead (Bloodhound as the suggestion engine) to implement the smart search and Bootstrap for the styling. So, let's get started.

He starts off by introducing the Typeahead.js library and the Bloodhound suggestion engine. He shows the installation (either via Bower, standalone download or included from a CDN) and a simple template with a search form and other Javascript requirements included. The tutorial covers some of the options you can set, what kinds of datasets it can work with and templates to use for the results. Next up, he brings in a default Laravel project and a "search" endpoint that queries user data and returns a JSON dataset of the results. The two pieces are then finally tied together with a few updates to the Javascript already created.

tagged: smart search tutorial laravel typeaheadjs javascript bloodhound

Link: https://scotch.io/tutorials/implementing-smart-search-with-laravel-and-typeahead-js

Matt Stauffer:
Introducing Laravel Echo: An In-Depth Walk-Through
Jun 17, 2016 @ 12:11:02

Matt Stauffer has a new post to his site where he's put together an in-depth look at Laravel Echo, a feature included in newer versions of the framework that makes it easy to integrate websockets into your Laravel-based application.

A few weeks ago, Taylor Otwell introduced another branded product within the Laravel line: Laravel Echo. So far, the only coverage it's gotten has been his Laracasts video intro, but I recently wrote it up for my book and wanted to share that with you. What follows is an excerpt from Laravel: Up and Running, heavily modified to make sense in a blog format.

He then gets into what Echo is and the different pieces that make it up: updates to the Laravel broadcast system and a new Javascript package. He suggests some places where using Echo makes sense and how to set up a simple broadcast event in your application (non-Echo to start). This makes use of the Pusher service for real-time event broadcasting. With that in place, he helps you install the Echo dependencies and integrating messages from both public and private channels. He also includes a bit of code at the end to exclude the message from broadcasting to the current user if you ever find a need for it.

tagged: laravel echo indepth tutorial setup configure pusher javascript

Link: https://mattstauffer.co/blog/introducing-laravel-echo