Adding custom attributes to script and stylesheets tags

function custom_attr_style( $html, $handle, $href, $media ) {
    $handles = array('twentyeleven-style'); // stylesheet handle
    if( in_array( $handle, $handles ) ) {
        $html = str_replace(' href=', ' async href=', $html); // added custom attribute
    }
    return $html;
}
add_filter( 'style_loader_tag',  'custom_attr_style', 10, 4 );
 
function custom_attr_script( $html, $handle, $src ) {
	$handles = array('twentyeleven-script'); // script handle
    if( in_array( $handle, $handles ) ) {
        $html = str_replace(' src=', ' async src=', $html); // added custom attribute
    }
    return $html;
}
add_filter( 'script_loader_tag', 'custom_attr_script', 10, 3 );

Optimizing Contact Form 7

Loading Contact Form 7 CSS and JavaScript files on pages with specific slugs only:

// Deregistering Contact Form 7 CSS files on all pages without a Contact form
add_action( 'wp_print_styles', 'universio_cf7_deregister_styles', 100 );
function universio_cf7_deregister_styles() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

// Deregistering Contact Form 7 JavaScript files on all pages without a Contact form
add_action( 'wp_print_scripts', 'universio_cf7_deregister_javascript', 100 );
function universio_cf7_deregister_javascript() {
    if ( ! is_page( array( 'contact', 'contact-us', 'feedback' ) ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

Code Coverage

You can check the CSS and JS code coverage with Chrome Dev Tools:

You can show the Coverage tab from Dev Tools menu by choosing “More tools” => “Coverage”.

Alternatively, to open Dev Tools press Cmd+Opt+I (Mac) or Control+Shift+I (Windows, Linux). After this, you can access the Coverage from the Command Menu: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux) and then typing “Show Coverage”.

Git

Local Changes

Changed files in your working directory:
git status

Changes to tracked files:
git diff

View changes in file.txt:
git diff path/to/file.txt

Add all changes to the next commit:
git add .

Commit all staged changes:
git commit -m “Added header – JIRA-777”

Commit History

Show all commits, starting with newest:
git log

Show changes for a file.txt
git log -p path/to/file.txt

Show log in shorter view:
git log –oneline

Who changed what in file.txt
git blame path/to/file.txt

Branches & Tags

List all branches:
git branch -av

Switch to develop branch:
git checkout develop

Create new branch based on your current HEAD (based upon whatever branch you were on):
git branch new_branch

Delete local branch:
git branch -d branch-name

Delete local branch even if it is not fully merged:
dit branch -D branch-name

Merge & Rebase

Rebase commits on top of develop branch:
git pull –rebase origin develop

Continue the rebase (Add file with “git add path/to/file.txt” after resolving conflicts in the file):
git rebase –continue

Abort the rebase:
git rebase –abort

Advanced

Squash number of commits:

  • git rebase -i HEAD~2
  • git push –force

Working with stash

Save changes to stach:
git stash save “Updated code”

Show list of changes in stash:
git stash list

Apply stash with ID=0:
git stash apply stash@{0}

Delete stash with ID=0:
git stash drop stash@{0}

Searching in Git

Search in repository:
git grep “Search string”

Search ‘target’ in /custom/folder:
grep “target” /custom/folder

Search ‘target’ in any case (i.e. case insensitive search):
grep -i “target”

Search ‘target’ or ‘other’:
grep -E “target|other”

==========================

Checkout the “feature/branch-001” branch:

  • git pull origin feature/branch-001
  • git checkout -f feature/branch-001

Push:

  • git push

Push to specific branch:

  • git push -u origin feature/ABC-321

Reset recent commit:

  • git reset –hard

Get latest develop branch into your branch:

  • git pull origin develop

Get latest version of styles.css file from develop branch:

  • git pull origin develop web/css/styles.css

Animate on scroll

js:

AOS.init({
  duration: 500,
  offset: 100,
  easing: 'ease-in-out',
  disable: 'mobile'
})

html:

<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>

<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>

<div class="item" data-aos="slide-up">7</div>

<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>

Images Lazy Load

html:

<img class="lazyload" data-src="../img.jpg" width="200" height="100">

js:

var lazyLoadSettings = {
    elements_selector: '.lazyload'
};

var lazyLoadGlobal = new LazyLoad(lazyLoadSettings);

If you need to refresh lozyLoad for dynamically loaded images:

$(document).on('lazyLoadRefresh', function () {
    lazyLoadGlobal.update();
});

$(document).trigger('lazyLoadRefresh'); // Use this line after successful DOM update