Lee Willis

October 26, 2016
by Lee
0 comments

Activity logging in Laravel

I’ve been working on a new service for the last month or so that enables people to log, track and share walks in the UK’s hills and mountains. The service is based on Laravel, and one of the things I wanted to include on the site was an “activity feed”.

There are two types of feed I wanted to create. The first was for my own benefit. I wanted to see a simple timeline of activity on the site as usage builds up. Secondly, I wanted to be able to log data so that I can create public timelines in the future.

This is all pretty simple to build from scratch, but it turns out that the team at Spatie have already got this covered with a general package for logging activity on a Laravel application.

Log activity inside your Laravel app
https://github.com/spatie/laravel-activitylog
717 forks.
5,394 stars.
12 open issues.

Recent commits:

Update CHANGELOG, github-actions[bot]
Merge pull request #1351 from ashleyshenton/php-8.4fix: php 8.4 deprecation warnings, GitHub
fix: php 8.4 deprecation warnings, Ashley Shenton
Merge pull request #1345 from tobischulz/patch-1Update using-multiple-logs.md, GitHub
Update using-multiple-logs.mdUpdated the docs useLogName on version 4, GitHub

You can easily log custom activity events wherever you like, it’s as easy as:

activity()->log('My custom message here');

Even better though is that you can get it to log changes to Eloquent models automatically using the handy LogsActivity trait. If you add the trait to your model, then creating, updating or deleting a model will automatically create a log entry. The log entries include the item affected, and the “causer” (normally a user).

Going beyond the basics, you can also define custom messages, choose what data to store along with log events.

The activities are logged as normal Eloquent models, so once you have your data logged it’s easy to pull out the information you need using standard Laravel querying, and views.

This is post 9 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 25, 2016
by Lee
0 comments

Adding Google Maps to your Laravel application

On a recent project, I needed to add some Google Maps functionality to a number of pages. The functionality I was looking for included:

adding KML layers
adding markers onto the maps with custom info windows
layering photo thumbnails onto the maps.

While I’ve used the Google Maps JavaScript API plenty of times before, I was looking to minimise the amount of custom code I used. The project is Laravel-based, so I had a look around for an existing package to handle some of the basic features. I ended up picking the Googlmapper package by Brad Cornford:

An easy way to integrate Google Maps with Laravel
https://github.com/bradcornford/Googlmapper
142 forks.
463 stars.
30 open issues.

Recent commits:

Support for Laravel 9.0, GitHub
Merge pull request #364 from tailonperin/masterSupport for laravel 8.0, GitHub
Fixing issue with marker icon, not using correct keys for object, Bradley Cornford
Update composer.json, GitHub
fix, Tailon Perin

With the library in place, I didn’t have to worry about the basics. Instead, I spent my time on custom elements I wanted to add. I logged an issue early on with a bug that came up with my use case, and Brad was really helpful getting it resolved and into a release. Brad is actively working on the library, and a few features I was planning as custom ended up being covered by updates to the library mid-project.

Each time I moved on to another feature I found something in the library to help me. If you’ve got developers who are comfortable with Laravel and PHP, but not necessarily JavaScript, it’s a really nice library that lets you build your solution in PHP.

This is post 8 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 20, 2016
by Lee
0 comments

Backing up your Laravel app

With a couple of Laravel developments out in the wild, I needed to make sure that they were integrated with my existing backup solution, which includes archived / off-server storage of backups. Pulling down the backups once I had them is pretty straightforward – everything is already set up to do that from the servers I use.

For WordPress sites, I usually use the BackUpWordPress plugin from the team at Human Made:

BackUpWordPress
by XIBO Ltd

BackupWordPress was created by our friends at Human Made but is now under new ownership. We’re committed to opensource and WordPress and will provide free support for the many BackupWordPress fans.
We’ll make occasional updates to the free software – please send us any patches you’d like to see released here: https://github.com/orgs/xibodevelopment/

However, we’ll no longer be selling or supporting the paid add-ons (e.g. for backups to Dropbox and Google Drive). It’s certainly a good idea to backup to cloud storage to protect against server-wide risks.
For this we recommend UpdraftPlus WordPress Backups which can do things for free BackupWordPress Premium could do on a paid basis. Click here for full comparison.

BackUpWordPress will back up your entire site including your database and all your files on a schedule that suits you. Try it now to see how easy it is!

This plugin requires PHP version 5.3.2 or later

Features

Super simple to use, no setup required.
Works in low memory, “shared host” environments.
Manage multiple schedules.
Option to have each backup file emailed to you.
Uses zip and mysqldump for faster backups if they are available.
Works on Linux & Windows Server.
Exclude files and folders from your backups.
Good support should you need help.
Translations for Spanish, German, Chinese, Romanian, Russian, Serbian, Lithuanian, Italian, Czech, Dutch, French, Basque.

Translations

We’d also love help translating the plugin into more languages, if you can help then please visit https://translate.wordpress.org/projects/wp-plugins/backupwordpress/dev/ to start translating.

Stats:

Current version: 3.14
Rating: 94(1370 ratings)
Downloaded 4,850,713 times

For Laravel though, I was starting afresh. I found what looked like a good solution in the form of the Laravel Backup package from the team at Spatie. There were a couple of things I liked about the package:

It’s simple, straightforward, and does one thing (create backups) well.
It’s from a team who have a clear track record of delivering open source packages
From a look through the issue queue, it’s well maintained and open to pull requests from users.

A package to backup your Laravel app
https://github.com/spatie/laravel-backup
763 forks.
5,684 stars.
6 open issues.

Recent commits:

Update overview.md (#1858), GitHub
Test PHP 8.4 (#1852), GitHub
Update CHANGELOG, github-actions[bot]
add isset check, Niels Vanpachtenbeke
dont make discord config required, Niels Vanpachtenbeke

While I’m using it to back up to the local filesystem initially (backups are then transferred offsite separately by an existing system), the package allows you to put your backups onto any supported filesystem, so having it backup to S3, Dropbox, FTP, Rackspace cloud files or similar is just as straightforward.

I love the team’s concept of “Postcardware“, it’s nice as an open source author to know that your work is being appreciated, and used, and I hope they get plenty of postcards!

I have to say though, the real highlight in finding this package was finding Spatie and their broad range of Laravel packages – there’s at least one more that features in this series, and I can easily see myself using more of their packages in the future – thanks Spatie!

This is post 7 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 19, 2016
by Lee
1 Comment

WYSIWYG with Summernote

Yesterday’s post talked about the concept of finding things missing, or needing implementing when moving from CMS-as-a-base to pure development frameworks.

Yesterday it was enforcing password complexity. Today’s post is about the very core of a CMS – WYSIWYG content editing.

There are plenty of different options for WYSIWYG editors. I took the opportunity to scout around to see what was available, and finally settled on Summernote.

It’s simple, easy to configure to choose which elements you want to make available, you can just attach it to your textarea to have the markup submitted by your form, e.g.

<textarea class="summernote" rows="8" name="description" cols="50">
</textarea>

$('.summernote').summernote({
 height: 300,
 toolbar: [
   ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
   ['font', ['strikethrough', 'superscript', 'subscript']],
   ['para', ['ul', 'ol', 'paragraph']],
 ],
 styleTags: ['p', 'blockquote', 'h2','h3'],
});

Next time you need a WYSIWYG editor – give Summernote a try.

This is post 6 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 18, 2016
by Lee
0 comments

Enforce user password strength

I’ve worked with Drupal & WordPress for the majority of my projects for many years. For a lot of projects that are content-centric they can make a good starting point, and minimize the amount of custom work that needs to be done.

Starting with WordPress or Drupal gives you a user framework, permissions, content management, easy content display, and a wealth of prebuilt modules / plugins to get your project off to a quick start.

However, they do have their limitations, and they’re not for every project. More recently I’ve been working with Laravel as a development framework on a number of projects that made sense to build from the ground-up. Established Laravel agencies / developers probably already have a set of add-ons that they regularly use to build out common features, but for someone relatively new to the framework, a lot of my time has been spent finding the building blocks to fill in missing bits of the puzzle.

I’m going to cover a number of these in future articles (backups / WYSIWYG editing / content filtering) in future articles of the series, but today I’m going to talk about user registration.

Laravel has scaffolding built out for user management, including registration, and password management. However – the default setup doesn’t do anything to enforce password rules / guidelines on users. One of my recent projects includes users registering for a service, and I wanted to make sure that they weren’t using too simple passwords. WordPress does this out of the box, and Drupal has plenty of modules to choose from, but for Laravel I had to look for something to plug in.

The library I settled on was zxcvbn-php :

Realistic PHP password strength estimate library based on Zxcvbn JS
https://github.com/bjeavons/zxcvbn-php
113 forks.
833 stars.
27 open issues.

Recent commits:

This is a PHP implementation of the Javascript zxcvbn project from Dropbox and @lowe, and works really nicely. It’s a general purpose library – so can be used with any PHP project. Just give it an entered password, and it will evaluate it for you, allowing you to choose what level of passwords you want to accept. Read the Dropbox link, or this Xkcd cartoon for background on the sort of things it checks for.

Wiring it up to Laravel was a small job (If there’s any interest I can write that up separately), essentially just extending Laravel’s validation framework, and setting the validation control on the RegisterController.

Image credit: https://xkcd.com/936/

This is post 5 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 17, 2016
by Lee
0 comments

WordPress performance tracking with Time-stack

I maintain a number of WordPress plugins, and they get used on all manner of WordPress sites. One of my more popular plugins is the WooCommerce Google Product Feed extension. This queries all products, applies some logic, and user-definable mappings and outputs an XML feed that Google will import into their product ad system.

On small stores, this is pretty straightforward, but on larger stores, the effort to query all products (including all individual variations of products) can be significant.

I’ve recently been doing some work on performance-tuning the plugin. I started out with some really simple performance tracking outputting total time and memory usage at the end of the XML document. There were some quick wins as a result of that, but it didn’t really give me a feel for what was going on, or any big gains.

I’m normally a big fan of the Query Monitor plugin for reviewing what queries are run to generate a page, however in this instance it doesn’t help since there is no HTML output to the page for Query Monitor to add its results to. I needed something that wasn’t tied to logging its output to the generated page. I finally settled on Time-Stack by Joe Hoyle.

WordPress profiling tool
https://github.com/joehoyle/Time-Stack
13 forks.
175 stars.
2 open issues.

Recent commits:

Updated screenshot, Joe Hoyle
V2, Joe Hoyle
Merge pull request #3 from duncanjbrown/masteradd some object cache setup instructions, Joe Hoyle
Update README.mdadd instructions to set up object caching, duncanjbrown
Update README.md, Joe Hoyle

There are actually two things you need to get up and running – the timestack “app” (repo linked above), and the WordPress plugin that logs the data. Once you’ve got the app installed, and the WordPress plugin activated, then every request will be tracked, and visible in the app:

You get to see the total runtime, and memory usage, but more importantly you can drill into sections of the page request to see further information. You can right down to the actual queries being run and see exactly what’s going on. You can even instrument your code to markup useful sections for your profiling.

How did I get on? I’ll let the evidence speak for itself …

https://twitter.com/leewillis77/status/768863921763717120

Probably not for every site, or every occasion, but an awesome tool to have in the locker – thanks Joe!

This is post 4 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 14, 2016
by Lee
0 comments

Autotrack for Google Analytics

If you’re in the web industry, you’re pretty much guaranteed to have heard of Google Analytics. It’s the de-facto standard in analysing user behaviour on websites. On any site you put together – it’s likely that you’ll set it up.

When you set up a site in the Google Analytics web interface you get a copy and paste snippet of code which gets you going in no time. This snippet links your website to the account you’ve set up in Google Analytics, and tracks each page that’s viewed on your site.

For many people this is everything that’s needed.

However, Google Analytics can be used for so much more. You can use it to track anything you want using event tracking (user clicked on call-to-action button, user downloaded PDF etc.), or by providing richer context about page views (this was a logged in user etc.). Here’s some of the things I’ve used Google Analytics to track in past projects:

On a site with a multi-field search (E.g. country, market sector, and keyword) track which of the fields were provided for each search, e.g. “Country Search”, “Country & market search”, “Keyword only search” etc.
Track events according to which adverts users were shown
Track custom events when people follow certain on-page nav elements

Historically I’ve used custom javascript to do this. Google provide good API documentation and the amount of code required isn’t normally significant.

Being familiar with what you can do with Google Analytics, on my new hill-walk blogging service I had a list of things I wanted to track. One of the things I wanted to track was selected external links. This can always be a bit hit and miss as there’s no guarantee that the tracking will fire before the browser navigates on to the clicked page.

So off I went to do a bit of research on the best way to handle the issue.

Tip: Even if you *know* how to solve a problem, have a quick check. Technology moves fast and there might be a better / easier way today than there was yesterday…

In my travels I came across the “autotrack” library by the Google Analytics team.

Automatic and enhanced Google Analytics tracking for common user interactions on the web.
https://github.com/googleanalytics/autotrack
562 forks.
4,924 stars.
51 open issues.

Recent commits:

Update impression-tracker.mdRemove the browser support section, as it's no longer relevant., GitHub
Update README.md, GitHub
Merge pull request #250 from coliff/patch-1update URLS in README to HTTPS, GitHub
update URLS in README to HTTPSPrevents redirects, GitHub
Move idlize from devDependencies to dependencies, Philip Walton

The library describes its capabilities (my emphasis):

Provides default tracking for the interactions most people care about, and it provides several convenience features (e.g. declarative event tracking) to make it easier than ever to understand how people are using your site.

The interesting bit for me was the nod to “declarative event tracking”. This basically means that you can have Google Analytics track events without writing and javascript, just by marking up your HTML. Here’s some example markup:

<a href="#" ga-on="click" ga-event-category="AdClick"
   ga-event-action="Ad category 1" ga-event-label="Seller one">
    <img src="https://placehold.it/100x100">
</a>

With the autotrack library installed, this will automatically take care of tracking a click when the link is clicked. The library takes care of using the best API for the visitors browser to maximise the chances of outbound links getting tracked.

Simples…

The even better news is that everything we’ve talked about here is just one of the features available (via the eventTracker plugin for autotrack). The library also includes a variety of other plugins covering tasks such as cleaning up tracked URLS, visibility tracking, media query tracking, and page visibility tracking plus more.

Next time you need custom analytics – be sure to check out the Autotrack library.

This is post 3 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 13, 2016
by Lee
0 comments

Error tracking with Sentry

One of the projects I’ve worked on recently is a rebuild of workflow system for a large business. The system processes large volumes of data 24 hours a day. It’s important that any errors with the system are flagged, tracked and investigated as soon as possible.

Another of the projects is a personal project I’m launching for Hill Blogging. This service is now in beta release with a handful of beta testers. I’m keen to identify, and squash any bugs without relying on beta testers reporting them.

Both of these projects use the Laravel PHP Framework (although neither Sentry.io, nor this post are Laravel specific!). So, I set about looking for a solution that would automatically track, and alert me to errors with Laravel. Any solution had to give me enough information to identify and start fixing the error.

On both of these projects I settled on Sentry.io. It’s a SaaS product that describes itself as:

Real-time error tracking [that] gives you insight into production deployments and information to reproduce and fix crashes.

This is pretty much everything I was looking for.

Sentry offers a Laravel integration out of the box. Simply install it, attach it to your project, and set up your project key. It’s a really straightforward setup. Once it’s set up, then any exceptions thrown in your code will get logged to Sentry, together with a backtrace. You’ll also be alerted to the new error.

You can take things further if you want by logging additional information with the exceptions if you need to, but the basic setup is sufficient to get you going.

Beyond Laravel, Sentry has libraries for common frameworks, and client libraries for most mainstream libraries, so it should be relatively easy to get going with.

There’s a range of pricing options depending on your likely error volume (zero – right!?) and users. The free tier is a great way to get started and offers support for 5,000 events/day (~150,000/month) at time of writing.

For me, it’s already more than proved its worth, not only in production, but also during development / staging phases of projects, helping me get straight to the broken code without having to rely on vague bug reports from users.

It’s worth noting that there are other similar services. In my investigations, I also looked at Rollbar and Airbrake – they may work better for you depending on your own circumstances.

This is post 2 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

October 13, 2016
by Lee
0 comments

Stuff I’ve used

I was chatting with some fellow tech industry types the other day, when the conversation inevitably turned to cool (“useful”) software components that we’d used on recent projects. It struck me that I’ve worked on a couple of projects (both client projects, and personal projects) that have had me trialling and using a variety of useful little libraries / services and approaches.

It also struck me that beyond the odd pull-request / issue raising on GitHub I’d not had any contact with the authors of said software to say thanks, nor had I really shared the knowledge about what I’d found and how I’d used it. The result was the following “commitment”

https://twitter.com/leewillis77/status/786251908088471556

https://twitter.com/leewillis77/status/786252117539520512

So, now I have to have a blog series covering software components / services that I use on projects.

I’m going to start with a service I’ve found really useful on a couple of projects recently, check out the first post in the series “Error Tracking with Sentry“

This is post 1 of 17 in the series “Stuff I've Used”

A series of short blog post covering software components / services I’ve used on projects to say thanks to the authors, and share them with others who might find them useful.

April 19, 2016
by Lee
0 comments

Looking ahead

I’ve spent the last four and half years working with a great team, on some fascinating, large-scale (predominantly Drupal) website builds. I’ve balanced that with a “spare-time” job building and selling WordPress plugins.

Working on WordPress plugins in my spare-time gave me the flexibility to experiment with things that interested me. I built some fun plugins, some useful plugins, and some boring-but neatly functional plugins. I’ve also learnt a lot along the way.

Selling some of those plugins has given me the flexibility to give up the day-job, and go out on my own full-time. So – as of early April, this my new office:

It comes complete with personalised mug from my ever-supportive wife Claire, greenhouse-style window display, and Bella the code-reviewing cat.

Going forward, my main aims are to:

expand my range of plugins – both free and paid
take care of some housekeeping and feature development on existing plugins
explore some other technical arenas

I’ll also be taking on some contract work (WordPress, Drupal, Symfony or Laravel for starters) to keep things interesting.

So far, I’ve released Cart recovery for WordPress, as well as its pro add-on, added new features to a few free, and paid-for plugins, done some R&D with Laravel and Ionic for future projects, and got a few nice contracts lined up.

Not a bad start – here’s to the future!