Google Chrome

CakePHP with NightwatchJS on Travis CI

My colleague Andrey Vystavkin has been setting up a testing environment for our CakePHP projects recently. We had one before, of course, using PHPUnit. But this time we wanted to add Google Chrome headless browser with some form of JavaScript test suite, so that we could cover functional tests and a bit of front-end. Andrey described the configuration of NightwatchJS on TravisCI in this blog post. If you are more of a “show me the code on GitHub” person, have a look at this Pull Request (still work in progress) on our project-template-cakephp project.

Once we are happy with the TravisCI configuration, we’ll be bringing this setup to our BitBucket Pipelines environment as well.

The setup is also based around CakePHP framework, but it’s easy enough to adopt it to any other framework, PHP or not.

Browser screenshots with PHP and Google Chrome 59+

The release of Google Chrome 59 brought some really cool features. One of them in particular was all over the technology news – headless mode. Being able to run the browser engine without the graphical interface, and having control from the command line and API has many benefits.

One of the benefits is being able to take web page screenshots. “Easily convert webpages to images using PHP” is one of the many blogs and articles that explain how to do it, using your preferred programming language (or mine in this case). Browsershot is a very simple PHP library, which you can install with Composer and start using straight away.

I’ve tried it out and it works pretty well. The screenshot above has been taken by the following script:

<?php 
require_once 'vendor/autoload.php';
use Spatie\Browsershot\Browsershot;

Browsershot::url('https://mamchenkov.net')
  ->windowSize(1600,900)
  ->save('screenshot.png');

Spellbook of Modern Web Dev

Spellbook of Modern Web Dev is a collection of 2,000+ carefully selected links to resources on anything web development related. It covers subjects from Internet history and basics of HTML, CSS, and Javascript, all the way to tools, libraries and advanced usage of web technologies, and more; from network protocols and browser compatibility to development environments, containers, and ChatOps.

This document originated from a bunch of most commonly used links and learning resources I sent to every new web developer on our full-stack web development team.

For each problem domain and each technology, I try my best to pick only one or a few links that are most important, typical, common or popular and not outdated, base on the clear trends, public data and empirical observation.

Prefer fine-grained classifications and deep hierarchies over featureless descriptions and distractive comments.

Ideally, each line is a unique category. The ” / “ symbol between the links means they are replaceable. The “, “symbol between the links means they are complementary.

I wish this document could be closer to a kind of knowledge graph or skill tree than a list or a collection.

It currently contains 2000+ links (projects, tools, plugins, services, articles, books, sites, etc.)

On one hand, this is one of the best single resources on the topic of web development that I’ve seen in a very long time. On the other hand, it re-confirms my belief in “there is no such thing as a full-stack web developer”. There’s just too many levels, and there’s too much depth to each level for a single individual to be an expert at. But you get bonus points for trying.

Chrome Extension : var_masterpiece – turn PHP var_dump() into a thing of beauty

var_masterpiece

Var Masterpiece is a Google Chrome add-on, which formats PHP var_dump() output into something much more beautiful and useful. You can customize the type colors and a few other things in the extension options, once installed.

Ask Slashdot: Best Browser Extensions — 2016 Edition

Slashdot is running a discussion thread on what are the best browser extensions these days. The comments cover a variety of browsers and all kinds of extensions. The most popular are, of course, well know. But there are a few gems here and there.

For me personally, I’ve picked the Tab Snooze extension. I’ve tried quite a few tab management solutions, and neither one of them fits my needs even though most tried (I want to run a single browser window, with dozens or hundreds of tabs open, but I want them to be organized into groups and hidden until later, when I need them). Tab Snooze approaches the problem from a slightly different angle. It sets the reminder for when to reopen the tab, and once that’s done, it closes the tab. You can find all snoozed tabs and open them before the due date, of course.

This works surprisingly well for me. If only I could control the opening of the tabs with something like “17 tabs were woken up and are about to be open. Continue?”. Currently, I get the notification and the tabs are open automatically, which is often not at the best time. Waking up a lot of tabs can slow the system down a bit and get in the way of things on which I’m working at the time.