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

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

CSS grid example

I have been playing with the new CSS grid tool and it is amazing. See what happens when you resize the page

 

Read more

Drupal 8 views html5 text placeholder

In Drupal 8 views an anonymous user has the ability to filter content. When exposes the filters is enabled. But there is no html5 placeholder by default for a text field. The function below will add placeholder text to every views exposed form input as long it has a label.

Read more

Creating a custom twig layout for views content in Drupal 8

If site builder needs to create a custom view twig file. In Drupal 8 you have to register a suggestion with the theme array. Adding the function below to your template.theme will give the developer the ability to add a twig file called views-view-viewname--.html.twig.

Read more

Drupal 8 howto setting a twig variable for a if statement

To set a twig variable in Drupal 8 so that can add conditional logic to a region, block, node, custom layout display and/or field in the templating system. Below is are some examples on how to do this,

Does the variable have any content at all

     
{% set content_variable = content.field_or_content|render|trim  %}
{% if content_variable %}
//-- print result if true
{% else %}
//-- print result if false
{% endif %}

Sometimes the content only has HTML tags use  striptags can remove it

Read more

Create a custom twig template for a form in Drupal 8

To create a custom twig template for a certain form in Drupal 8 you will need to add a theme suggestion hook in your .theme file like the suggestion below.

/**
 * Implements hook_theme_suggestions_HOOK() for contact form suggestion.
 */
function themename_theme_suggestions_form_alter(array &$suggestions, array $variables) {
    $suggestions[] = 'form__' . $variables['element']['#form_id'];
}
Read more

Moving production database and files from AWS Drupal 8 instance to development server

Moving production database and files from AWS Drupal 8 instance to development server using SSH is really easy on EC2. The scripts below takes a copy of the production servers files directory and database in Drupal 8, the assest are then placed all into sync directory. Then SSH copies all these files to the development server. The process below allow no user to access production using Drush

Read more

How to assign content to a specific user role Drupal 8 in a custom module programmatically

This function in Drupal 8 allows you to test the user's current role and give them access to some sort of data programmatically. For example, you might have a custom block that you want only a certain role to see. This function below will give you that functionality. Add the code to your .module file in your module .theme in your custom theme.

Read more

Web development functions I use in my linux bashrc file

My ./bashrc shorthand vagrant function call for the Linux terminal. So I can speed up access to my development machines

alias www='cd /home/www/Html/'

function vup() {
    www && cd $1 && vagrant up
}

function vhalt() {
    www && cd $1 && vagrant halt
}

function vdir() {
    www && cd $1
}

function vdirw() {
    www && cd $1 && cd docroot
}

function vssh() {
    www && cd $1 && vagrant up && vagrant ssh
}

Auto generated passwords

function pwdg(){
   openssl rand -base64 16 | colrm $1
} 


Read more

Vagrant beetbox and ubuntu an host

Beetbox is an amazing for developing all sorts of websites. But installing it on an Ubuntu host at times there can be some small issues.

Extra vagrant packages

Make sure you provision the vagrant machine after adding the plugins as you can get the dreaded "No host IP was given to the Vagrant core NFS helper" (see issue here)

vagrant plugin install vagrant-vbguest
vagrant plugin install vagrant-faster
vagrant plugin install vagrant-hostsupdater
vagrant plugin install vagrant-auto_network
Read more

Pages