Website Development, Native Apps (Drupal, Flex, Sass, React, Git, Ubuntu)

Jquery find the top, bottom, left, right of an element on the page using the offset

This function below allows the developer to function find the top, bottom, left, right of an element on the page using the offset.

var elementPosition = function(idClass) {
  var element = $(idClass);
  var offset = element.offset();

  return {
     'right': offset.left + element.outerWidth(),
     'bottom': + element.outerHeight(),
     left': offset.left,

Read more

How to add a patch to Drupal a module using composer

This is the format to add a patch to Drupal a module in the composer.json file

"patches": {
      "drupal/module_name": {
        "issue_number: A description": "path to the patch"
Read more

Open application from the command line in Ubuntu and detach

To start an application in Ubuntu and detach it from the launched terminal add &! to the command. If it displays warnings you can press `Control Shift C` and it will keep working. The examples below will only work if you have the software installed.

$~ firefox &!
$~ phpstorm <directory_name_and_or_flag> &!
Read more

Linux command line commands we can all use

Find out how much of the hard drive is being used.

~$ df -h
Read more

This is incompatible with sql_mode only_full_group_by not working

Some older PHP MySQL applications were developed on a version of Mysql that allow you to group in a certain way. The latest version of MYSQL and MariaDB don't turn this functionality on by default. To overcome this add the following to your my.cnf on ubuntu 18.04.

$ sudo vim /etc/mysql/mysql.cnf

// add the sql_mode string below [mysqld] 

$ sudo service mysql restart
Read more

Example of using twig functions in Drupal 8

Using twig functions in Drupal can help a frontend developer achieve a very complicated problem in a  clean and simple way. Here are some of my favorite functions.

String replace

{% set image_title_string = image['#attributes'].title %}
{% set image_title_char_search = '//' %}
{% set image_title_char_replacement = '<br/>' %} 
<div class="slider-text-overlay-title">
    {{ image_title_string|replace({ (image_title_char_search): image_title_char_replacement })|raw }}
Read more

Accessing image field attributes twig in Drupal 8

To access image field attributes in Drupal 8 you can call the kint() function that is in the devel module. You can access all sorts of information, one that can be really useful is the title tag.

 // See inside image array

 // See title string

  // Print string inside template
 <span> {{image['#attributes'].title}}</span>
Read more

Overriding a twig template in a custom module in drupal 8

To override a twig template in a custom module the theme hook needs to see which template is needing going be altered and the parent module origin Twig file. In the .module of the custom module that is going to nullify the parent template add the code below.


The _theme hook example below is overriding the Blazy modules blazy.html.twig file.  The second preprocessor function hook is adding a custom variable so it can be accessed by the twig template in your module.

Read more

ubuntu 18.04 beetbox and vagrant

In 18.04 currently, Beetbox breaks unless you use the following versions of software Virtualbox, Vagrant 1.9.8 and manually install the NFS server


I got an unusual error today. When starting a new vagrant box

 nfs-kernel-server.serviceJob for nfs-server.service canceled

The way I solve it was two step

  • In vagrant box I remove all duplicate vagrant vms
  • delete the contents of the following file
sudo vim  /etc/exports 
Read more

CSS variables example

CSS variables a very cool! Notice ":root'  in the example below contains global variables that could be used anywhere in a styles sheet document. 

Read more