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

SitePoint PHP Blog:
How to Write JavaScript-Style Test Watchers in PHP
Jul 20, 2017 @ 13:18:43

On the SitePoint PHP blog there's a new tutorial that talks about creating "watchers" in your PHP code similar to the ones that the Javascript world has used to detect changes in files and automatically perform actions.

In the land of JavaScript, it’s not uncommon to preprocess source code. In the land of JavaScript, developers write in syntax not widely supported, and the code is transformed into syntax that is widely supported, usually using a tool called Babel.

In order to reduce the burden of invoking the transformation scripts, boilerplate projects have started to include scripts to automatically watch for file changes; and thereafter invoke these scripts.

These projects I’ve worked on have used a similar approach to re-run unit tests. When I change the JavaScript files, these files are transformed and the unit tests are re-run. This way, I can immediately see if I’ve broken anything.

The author (Christopher Pitt) then shows how to create the project and make use of pre-processing and some sample scripts to run tests against. He shows how to set up the test configuration and provides an example test. Finally he includes a script that's used by the "watcher" to recompile the scripts before the tests are executed. To to the watching, he uses the yosymfony/resource-watcher package and a long running PHP script ("watch-test").

tagged: watcher javascript tutorial unittest phpunit resourcewatcher

Link: https://www.sitepoint.com/write-javascript-style-test-watchers-php/

SitePoint PHP Blog:
What Is Snapshot Testing, and Is It Viable in PHP?
Jun 21, 2017 @ 12:28:01

On the SitePoint PHP blog they've posted another article from author Christopher Pitt. This time he talks about snapshot testing and if it's a viable way to evaluate code in PHP applications.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it. For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

He starts with a brief introduction to the technology to be used (React in Javascript) and how it could be recreated in PHP. He then covers testing interfaces, evaluating the correct functionality of frontends via various testing tools. He includes some examples of this kind of testing and how it can help a developer mentally break up functionality into components. From there he switches over to the PHP side, introducing the spatie/phpunit-snapshot-assertions package and showing how to use it to check the make up of a snapshot and test several assertions that should exist.

tagged: snapshot testing viable javascript frontend assertion tutorial

Link: https://www.sitepoint.com/snapshot-testing-viable-php/

DotDev.co:
Using Laravel Mix for Your WordPress Theme
May 12, 2017 @ 10:16:05

On the DotDev.co blog there's a recent tutorial posted from Eric Barnes showing you how to combine Laravel Mix and WordPress to make it easier to manage webpack dependencies.

Laravel Mix is a fluent wrapper around the webpack module bundler, and it provides common tools that help you compile CSS and JavaScript. It’s easy to work with, and although it comes baked into the Laravel framework, you can use it anywhere.

This site is using WordPress, and when I created the theme I used Mix to handle the asset compiling; it was simple to setup. Here is a quick overview of how I did it in four steps. Please note, you will need to have a recent version of Node and npm installed on your machine before continuing.

He then walks you through a four step process to set up the integration between the two:

  • Step 1. Create the package.json File
  • Step 2. Webpack Mix
  • Step 3. Create Your style.scss File
  • Step 4. Create an app.js

He ends the post with some helpful commands you can use while you're in the development process including compiling for both dev and production environments. More information about Mix can be found in the Laravel documentation.

tagged: laravel mix wordpress tutorial npm node css javascript install build

Link: https://dotdev.co/laravel-mix-wordpress/

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