React Flux Cheat Sheet

This awesome React & Flux cheat sheet is not of my own creation, but it’s been sat on my desktop now for a while, and I keep referencing it.

Rather than keeping it on my desktop forever (I hate having stuff on my desktop!), I thought I would upload it here and then I can reference it here in the future.

If you have already started learning React JS and are ready to learn Flux, then this should help you understand how it all fits together. It helped me a lot.

flux architecture cheat sheet

Originally from Dan Mazzini / DanMaz74 – thanks!

How I solved “New runner. Has not connected yet” in GitLab CI

gitlab-brown-triangle-of-doomI hit on an issue with GitLab CI whereby newly added GitLab CI Runners would register successfully, but never start a build.

The error message was shown on the Projects > Settings as a brown triangle with the runner’s ID hash next to it.

The runner itself seemed to be active, but it had the message: “New runner. Has not connected yet” next to it.

Frustrated, I re-installed, re-installed again, tried doing a gitlab-ci-multi-runner register AND a sudo gitlab-ci-multi-runner register which only exacerbated the problem.

The Problem

Firstly, note that running a :

gitlab-ci-multi-runner register

does something different to:

sudo gitlab-ci-multi-runner register

Both will create a config.toml file which may not be immediately obvious.

Normally when you run a command without sudo and it doesn’t work, you would expect it to fail and give a helpful error message.

This is a case of GitLab being flexible, but confusing.

gitlab-ci-multi-runner register will create a file in your home directory called config.toml.

sudo gitlab-ci-multi-runner register will create the file: /etc/gitlab-runner/config.toml.

My Solution to “New runner. Has not connected yet”

In my case, the solution was to delete the config.toml in my home directory. That’s the home directory of the user who I was ssh‘d into the GitLab CI Runner instance.

As soon as I did this, the GitLab runner immediately started – no further intervention required.

If your’s doesn’t, my next course of action would be to delete both config.toml files, remove any references to that runner from GitLab CI Runner dashboard, and then re-run the command:

sudo gitlab-ci-multi-runner register

ParseException: The YAML value does not appear to be valid UTF-8

Sometimes Symfony throws up the most peculiar of error messages.

I had a situation where I had two config (.yml) files, one environment overriding the other.

Now, what was particularly confusing about this situation was that I had copied and pasted the config (not very DRY) from the first file to the second.

This wasn’t a new project – both files had been around for a long time, but it was the first time I was using the second file properly.

The idea in this instance was the second config file would inherit all the first config files settings, but over rule the ones I had changed.

As soon as I did this, however, I got the following:

symfony yaml parsing error

code error text for Google’s benefit:

Whoops, looks like something went wrong.

1/1ContextErrorException: Warning: htmlspecialchars(): Invalid multibyte sequence in argument in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 302
in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 302
at ErrorHandler->handle('2', 'htmlspecialchars(): Invalid multibyte sequence in argument', '/mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php', '302', array('args' => array(array('string', '')), 'result' => array(), 'key' => '0', 'item' => array('string', '')))
at htmlspecialchars('', '11', 'UTF-8') in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 302
at ExceptionHandler->formatArgs(array(array('string', ''))) in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 158
at ExceptionHandler->getContent(object(FlattenException)) in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 117
at ExceptionHandler->createResponse(object(ParseException)) in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Debug/ExceptionHandler.php line 74
at ExceptionHandler->handle(object(ParseException))
Exception thrown when handling an exception (Symfony\Component\Debug\Exception\FlattenException: The YAML value does not appear to be valid UTF-8.)

1/1ParseException: The YAML value does not appear to be valid UTF-8.
in /mnt/project/my-project/vendor/symfony/symfony/src/Symfony/Component/Yaml/Parser.php line 59

A classic Symfony blow up.

Now, whilst this may be a Symfony project, it is not a Symfony problem!

The problem is the encoding of the file itself. This sounds like it might be a total pain to fix, but if you are using PHPStorm it’s actually very, very easy.

How to Fix ParseException: The YAML value does not appear to be valid UTF-8

Open the file in PHPStorm.

Take a look in the bottom right corner:

phpstorm-file-encoding-selection

Notice – I am using Windows here, so the default file encoding type is what caught me out.

Click the text ‘windows-1252’ or whatever you have here that is not UTF-8.

Select UTF-8.

You may get a little pop up warning you that your file will be converted to UTF-8.

Take a back up if you aren’t sure, but otherwise, convert it.

Upload the file (or do nothing if using shared mounts in Vagrant), and success, we have captured the enemies intelligence.

StrongLoop Loopback Cheatsheet

Loopback cheatsheetThe following is an (incomplete) cheatsheet / reference from the Loopback Node.js API framework.

In many ways the Loopback framework reminds me of Symfony. It feels very enterprisey and professional. It also has its own terminology and command line syntax which I am constantly forgetting (much like when I learned Symfony!), so this is my work-in-progress reference guide / Loopback cheatsheet.

This cheat sheet is currently for Loopback v2.14.0.

New to Loopback and want to know what it is, and what it does, at a high level, but from a technical perspective? The Core Concepts document was the first document I read that I thought… aha, this is awesome.

Start a new project

slc loopback
cd your-new-project
npm install

Create a new model

slc loopback:model
// or
slc loopback:model ModelName

Define a new data source

slc loopback:datasource
npm install loopback-connector-mysql --save
// and / or
npm install loopback-connector-mongodb --save

Configure the new connection inside

server/datasources.json

Example mysql config:

{
  "db": {
    "name": "db",
    "connector": "memory"
  },
  "mysqlDs": {
    "name": "mysqlDs",
    "connector": "mysql",
    "host": "demo.strongloop.com",
    "port": 3306,
    "database": "demo",
    "username": "demo",
    "password": "L00pBack"
  }
}

Remember to update the server/model-config.json file also, changing the dataSource property for your particular model.

Changing a model’s data source

For example, to move from db (memory) to mysql, firstly ensure you have defined the new data source (see above).

Then, update server/model-config.json, changing the dataSource property to the name of the right data source.

Manually defining db table name

Inside your model json file, e.g. common/models/your-model.json:

  "options": {
    "validateUpsert": true,
    "mysql": {
      "table": "your_table_name_here"
    }
  },

Manually defining model ID

Inside your model json file, e.g. common/models/your-model.json:

  "properties": {
    "id": {
      "type": "number",
      "id": true
    },

Auto-migration

Coming from Sails JS where this just works on a sails lift, I found this quite confusing.

To migrate, so long as your db supports it (which MySQL seems to), first do:

slc arc

This should auto-open your browser.

Then, browse to ‘compose’ section, highlight your model on the left menu, and click the ‘Migrate Model’ button.

Your table should now have been created.

Run your app in dev mode

node .

Run your app in prod mode

I have not yet fully tested this, aside from completing the tutorial where this is described.

slc start

Helpful URLs

In development, your App will run on 127.0.0.1:3000.

API Explorer: 127.0.0.1:3000/explorer

Remote Method Example

module.exports = function(CoffeeShop) {
...
  CoffeeShop.getName = function(shopId, cb) {
    CoffeeShop.findById( shopId, function (err, instance) {
        response = "Name of coffee shop is " + instance.name;
        cb(null, response);
        console.log(response);
    });
  }
...
  CoffeeShop.remoteMethod (
        'getName',
        {
          http: {path: '/getname', verb: 'get'},
          accepts: {arg: 'id', type: 'number', http: { source: 'query' } },
          returns: {arg: 'name', type: 'string'}
        }
    );
}

Model definitions (your-model.json) JSON file

When using the slc loopback:model command, you end up with two files: common/models/your-model.js and common/models/your-model.json

This page describes what you can do with the common/models/your-model.json file.

Access Another Model From Current Model JS

CurrentModel.getApp(function (err, App) {
      if (err) { throw err; }
      App.models.DifferentModel.findOne(

Change findOne to call whatever method you need.

Example routes

  • /api/customers
  • /api/customers?filter[fields][name]=true
  • /api/customers/1
  • /api/customers/youngFolks
  • /api/customers/1/reviews
  • /api/customers/1/orders
  • /api/customers?filter[include]=reviews
  • /api/customers?filter[include][reviews]=author
  • /api/customers?filter[include][reviews]=author&filter[where][age]=21
  • /api/customers?filter[include][reviews]=author&filter[limit]=2
  • /api/customers?filter[include]=reviews&filter[include]=orders

Official Strongloop Loopback API Examples

This is a filtered representation of all the official Strongloop Loopback example / reference implementations.

By filtered I mean a simple Github search of the Strongloop GitHub repo, for anything starting with ‘loopback-example*’.

Link

Loopback Cheatsheet Work In Progress

This guide is a work in progress. If you want to contribute, please leave a comment.

As far as I am aware, development is moving quickly on this project and what appears above may be out of date for your version in the future.