Browsed by
Author: andy

Using create-react-class in your React apps

Using create-react-class in your React apps

In React 16, Facebook are deprecating the React.createClass() syntax for creating new components, preferring the new ES6 class method. Already from React 15.5.0, they start reminding you about this.

They favour replacing

[code language=”javascript”]var Greeting = React.createClass ();
[/code]

with

[code language=”javascript”]class Greeting extends React.Component {}
[/code]

You should absolutely upgrade to the new ES6 way but that involves some refactoring other parts of the app so if you just want the warnings to go away for now, you need to install the create-react-class npm module and then swap out the parts of your code where it says React.createClass for createReactClass. As they say, it really is a drop-in replacement.
Step 1.

[code language=”bash”]$ yarn add create-react-class[/code]

or

[code language=”bash”]$ npm install create-react-class —save
[/code]

 

Step 2.

Old code

[code language=”javascript”]var MyComponent = React.createClass(….
[/code]

New Code (remember to import the module)

[code language=”javascript”]import createReactClass from ‘create-react-class’;[/code]

[code language=”javascript”]var MyComponent = createReactClass({
[/code]
Very simple but not clearly documented anywhere I could find.

Show the link title/description in Twig template on Drupal 8

Show the link title/description in Twig template on Drupal 8

We wanted to actually display the link’s description tag on the page but couldn’t find a way to do it.

We were using {{ link(item.title, item.url) }} to render a link but we couldn’t get the title tag to show up in a Twig variable. Eventually with the use of {{ kint(item) }} and searching through the stack we found out how to get it:

{{ item.original_link.getDescription() }}

It is defined here: web/core/modules/menu_link_content/src/Entity/MenuLinkContent.php in getPluginDefinition() function

It should be in this file: web/core/lib/Drupal/Core/Menu/MenuLinkTree.php in the buildItems() function alongside the other things you would need in a link:

$element['attributes'] = new Attribute();
$element['title'] = $link->getTitle();
$element['url'] = $link->getUrlObject();
$element['url']->setOption('set_active_class', TRUE);
$element['below'] = $data->subtree ? $this->buildItems($data->subtree, $tree_access_cacheability, $tree_link_cacheability) : array();
if (isset($data->options)) {
$element['url']->setOptions(NestedArray::mergeDeep($element['url']->getOptions(), $data->options));
}
$element['original_link'] = $link;
// Index using the link's unique ID.
$items[$link->getPluginId()] = $element;
}

… but unfortunately the description is not defined. You need to use the accessor method for now.

Migrate Gitorious to GitLab

Migrate Gitorious to GitLab

For the script, find it on GitHub

Our company recently moved over 200 of our Git repositories from our self-hosted Gitorious server to the brand-new GitLab. Moving over to GitLab has completely changed our workflow. Gitorious hadn’t been getting updates and in fact the company has been bought by GitLab. GitLab offers unlimited users and repositories for free and has a really nice interface.

The problem is that we had over 200 repositories sitting on Gitorious so even a very busy day of a developer moving things over wouldn’t have been an efficient use of time.

We could just grab the information from the Gitorious database but the projects weren’t set up on GitLab yet. To do this, we had to automate adding new  that. Fortunately, GitLab has a full featured and well-documented API for doing things exactly like this so we were able to hook into that. It took a while to get everything right but it’s been relatively painless and we haven’t regretted moving.

One big issue was that many of our servers are locked down and require a reverse-tunnel to get out. We had set that up on our old Gitorious server so after the migration, we slowly went around an fixed the reverse-tunnel to go to GitLab.

git remote set-url origin ssh://git@127.0.0.1:8000/gitlab-username/clientName.iPhoneApp.git

There were a few more issues that we slowly stumbled over but I’ll save them for a longer post. The GitLab API actually has an import_url parameter where you can tell it the URL of the Git repository you want to import and you don’t have do clone, push etc but the maximum file size is about 25 MB which wasn’t enough for us.

 

Using Sublime Text on Remote Servers (Mac OSX)

Using Sublime Text on Remote Servers (Mac OSX)

If you need to work on a remote server and aren’t comfortable with tools like Vim or Emacs, this technique will let you use Sublime Text to work with remote files.

This script works by mounting directories of remote servers on our local machine and work with them as if they are local machines. This article will walk you through setting up the scripts and shortcuts on your machine so you can use this fast and convenient method too. Obviously, it is easy to delete and change things so be careful and always use version control.

These directions are for Mac OSX. You might be able to do it via the command line on Linux and Window but you will need to change a few things.

Prerequisites

1. You need to have Sublime Text set up to be able to be opened from the command line. Mac/*nix Instructions Windows Instructions
This usually resembles a symlink in one of the directories linked from your $PATH to the Sublime shortcut so you can use $ subl to open it from within Terminal.

2. Make sure you have sshfs installed. If not, download and install *both* FUSE and SSHFS from here https://osxfuse.github.io/

3. You need to have your local public key ( contents of ~/.ssh/id_rsa.pub) in the ~/.ssh/authorized_keys file on the the remote server so you can log in.

Script

Name this file something like “remote-server-in-sublime.sh” and put it somewhere in your home directory. It will need to have execute permissions by your user. Obviously change the username to your own.

!/bin/bash

if [ ! $1 ]
then
echo -e "Please pass in a directory path"
exit
fi

mkdir -p ~/remote-server$1

sshfs andy@remote.server.com:$1 ~/remote-server$1 -o reconnect

~/subl ~/remote-server$1

Usage:

Put something like this in your aliases file.

alias remote-server-in-sublime=’~/remote-server-in-sublime.sh’

To run it, you just need the full path to the folder as the argument.

$  remote-server-in-sublime /var/www/website

—–
Extra Stuff

Remember to unmount it from your local machine at the end of the day/ when you are done.

$ df   // view all mounted volumes
$ umount  {name of “filesystem”}    // unmount the specified volume

e.g.

$ umount andy@remote.server.com

The default file for aliases is ~/.bash_profile but if you want to keep your bash_profile clean you can do this:

if [ -f ~/.bash_aliases ]; then
             . ~/.bash_aliases
fi

alias aliases=’vim ~/.bash_aliases’

It’s normal that it creates a ‘~/remote-server/var/www/etc etc’ folder on your computer. Don’t worry.

Make a Webform available as a block in Drupal 7

Make a Webform available as a block in Drupal 7

Making Drupal Webforms available on blocks on Drupal 7 is something you’d think would be simple but it’s buried away among all the Drupal options.

When you create a new Webform, you will see a set of tabs up the top.

Next to [View], [Edit] there should be a [Webform] tab.

Click that and go to > [Form Settings] > [Advanced Settings] and select ‘ Available as block‘ option.

This will make the form show up as a block so you can move it around as you like and have it appear on any page in your site.

Making WordPress store its files in a secret folder

Making WordPress store its files in a secret folder

I installed a fresh copy of WordPress but wanted to keep my root directory clean.

The easiest way to do this is just to install it into a directory, change the site address to the root, and then copy the index.php up one level and change the line about requiring the wp-blog/header file to reference the directory you just installed WordPress into.

[code language=”php”]require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
[/code]

becomes

[code language=”php”]require( dirname( __FILE__ ) . ‘/newblog/wp-blog-header.php’ );
[/code]

It’s all here: https://codex.wordpress.org/Giving_WordPress_Its_Own_Directory