MesmericDigital

import { TimelineMax, TweenMax, Power2, Back } from 'gsap'

let curtainsOpenTimeline = () => {
  return new TimelineMax()
    .set('.curtains', { transformOrigin: '0%' })
    .fromTo('.curtains', 0.6, { scaleX: 0 }, { scaleX: 1, ease: Power2.easeInOut })
    .fromTo('.curtains-logo', 0.3, { x: '-100%', autoAlpha: 0 }, { x: '-50%', autoAlpha: 1, ease: Power2.easeInOut }, '-=0.45')
}

let curtainsCloseTimeline = () => {

MesmericDigital

<?php

/** Template Hooks ********************************************************/

  /**
	 * Sale flashes
	 */
	add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
	add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

MesmericDigital

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

MesmericDigital

GENERATORS:

• Text Content Generator - http://www.lipsum.com
• Favicon Generator - http://tools.dynamicdrive.com/favicon
• Data Generator - https://mockaroo.com/
• Mobile Mockup Generator - https://mockuphone.com
• Logo Generator - https://www.logaster.com
• UUID Generator - https://www.uuidgenerator.net/
• Hash Generator - https://passwordsgenerator.net/sha256-hash-generator/
• Ultimate Code Generator - https://webcode.tools/

MesmericDigital

(function() { 
  var CSSCriticalPath = function(w, d, opts) {
    var opt = opts || {};
    var css = {};
    var pushCSS = function(r) {
      if(!!css[r.selectorText] === false) css[r.selectorText] = {};
      var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/);
      for(var i = 0; i < styles.length; i++) {
        if(!!styles[i] === false) continue;
        var pair = styles[i].split(": ");

MesmericDigital

html {
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;

MesmericDigital

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  

MesmericDigital

<form id="contact" name="contact" method="post">  
  <fieldset>  
    <label for="name" id="name">Name<span class="required">*</span></label>
    <input type="text" name="name" id="name" size="30" value="" required/>

    <label for="email" id="email">Email<span class="required">*</span></label>
    <input type="text" name="email" id="email" size="30" value="" required/>

    <label for="phone" id="phone">Phone</label>
    <input type="text" name="phone" id="phone" size="30" value="" />

MesmericDigital

Customizing VS Code

I followed the instructions in this blog post Multiple Fonts: Alternative to Operator Mono in VSCode, but did not see any changes made to VS Code. After digging a bit, I discovered that all the CSS class names had changed. They’re now e.g. .mtk13, .mtk16 { … }.

Gotchas

• Ensure it’s a file URL e.g. { "vscode_custom_css.imports": [ "file:///Users/Brian/Desktop/vscode-style.css" ] }
• If you move the location of your file and update your user settings with the new location, you will need to disable and enable custom CSS cmd+shift+p.
• Also, anytime you change the style in your custom CSS file, you need to disable, then re-enable the extension.

For reference

• vscode-styles for operator mono, fira code ligatures, and oceanic next italic · GitHub

MesmericDigital

<?php
// half-hearted CSS minification
$css = preg_replace(
  array('/\s*(\w)\s*{\s*/','/\s*(\S*:)(\s*)([^;]*)(\s|\n)*;(\n|\s)*/','/\n/','/\s*}\s*/'), 
  array('$1{ ','$1$3;',"",'} '),
  file_get_contents('linked.css')
);

// embed as a data: uri
$base64css = rtrim(strtr(base64_encode($css), '+/', '-_'), '=');