Skip to content

Instantly share code, notes, and snippets.

@Kishorchandth
Kishorchandth / Web vitals
Last active July 25, 2021 04:55
Web Vitals with PHP through Code Snippet plugin
function web_vitals( ){
// The Data (LCP, CLS and FID) collected by web-vitals.js are not sent to Google Analytics but display on console tab.
//You will only see it if you're login user
if ( is_user_logged_in() ){
?>
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
@Kishorchandth
Kishorchandth / web vitals
Created July 25, 2021 04:39
Web-Vitals JS libraries
<script type="module">
// Load the web-vitals library from unpkg.com (or host locally):
import {getFCP, getLCP, getCLS, getTTFB, getFID} from 'https://unpkg.com/web-vitals?module';
function getSelector(node, maxLen = 100) {
let sel = '';
try {
while (node && node.nodeType !== 9) {
const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
(node.className && node.className.length) ?
@Kishorchandth
Kishorchandth / gist:c13f993a69965e1eacee1887608cf5d8
Created July 23, 2021 06:57
Sticky header in WordPress using Elementor
/*
* Transparent to sticky header
*
*/
.sticky-header{
background-color: transparent!Important;
padding: 2% 0;
transition:
background-color 300ms linear,
/**
* This PHP will load only on blog post
*/
function add_this() {
if( is_single ( ) ) {
?>
/**
* Follow this step:
* #1 - visit the link -http://prntscr.com/u7ukyw
/**
* This PHP will load on every page and post
*/
function add_this() {
?>
/**
* Follow this step:
* #1 - visit the link -http://prntscr.com/u7ukyw
* #2 - Add this src - http://prntscr.com/u7ul9j
.elementor-sticky--effects   .site--nav  .elementor-nav-menu--main .elementor-item{
color:red;
font-size: 14px;
}
.site--nav .elementor-nav-menu--main .elementor-item{
color:green;
font-size: 16px;
transition:color .3s font-size .3s ease-in-out;
}
.elementor-sticky--effects   .site--logo   .elementor-image img {
width: 55%; /* adjust your width*/
}
.site--logo .elementor-image img{
width:60%;
transition:width .3s ease-in-out;
}
.elementor-sticky--effects.header--display{
background: #fbfbfb;
padding: 1% 0;
}