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

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 &!
//or
$~ 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] 
[mysqld]
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

$ 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 }}
</div>
  
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
 {{kint(image)}}

 // See title string
 {{kint(image['#attributes'].title)}}

  // 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

JavaScript browser storage example

Below is an example of  HTML5 Javascript browser storage written in pure ES6. Web storage can be used on any website. It stores information locally within the user's browser. Add information to the list and then close your browser and reopen it again and the data will automatically  populate.

Read more

CSS flex example

I have been playing with the new CSS flex tool and it is amazing. The css use is in the example below.

 

#content {
    display:flex;
    flex-wrap: wrap;
    background: #DAF7A6;
}

#description {
    display: inline-block;
    width:100%;
    background: #FFC300;
    order:3;
}


.article {
    order:2;
    flex:4;
    background: #FF5733;
}

.aside {
    order:1;
    flex:1;
    background: #C70039
}

#three-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}


#four-cols {
    display:flex;
    flex-wrap: wrap;
    background: #900C3F;
}

#five-cols {
    display:flex;
    flex-wrap: wrap;
    background: #581845;
}
Read more

Pages