Frank Yonnetti frankyonnetti

Drupal theme using Vite contrib module

Basic theme dev setup for Vite after installing a Drupal Starterkit theme

Tested in Valet and MAMP Pro local environments.

themes/custom/THEME/package.json

Webpack Drupal Theming

Install

Install the following node modules (npm), in the same directory as this readme file, for compiling and linting our code.

npm i -D @babel/core @babel/preset-env autoprefixer babel-loader browser-sync browser-sync-webpack-plugin css-loader mini-css-extract-plugin postcss-loader postcss-pxtorem sass sass-loader standard stylelint stylelint-config-sass-guidelines stylelint-order webpack webpack-cli

Difference Between Pixel (Px) and Point (Pt) Font Sizes in Email Signatures

A point (pt) is equal to 0.352778 millimeters, 0.0138889 inches, or 1.333 pixels.

Points	Pixels
6pt	8px
7pt	9px
7.5pt	10px
8pt	11px

Cheat sheet for moving from jQuery to vanilla JavaScript

Selecting elements

Selecting one or several DOM elements to do something with is one of the most basic elements of jQuery. The equivalent to $() or jQuery() in JavaScript is querySelector() or querySelectorAll(), which, just like with jQuery, you can call with a CSS selector.

// jQuery, select all instances of .box
$(".box");

	<?php
	use Valet\Drivers\Specific\WordPressValetDriver;

	class LocalValetDriver extends WordPressValetDriver {

	/** @var string The remote host to proxy requests to */
	const REMOTE_HOST = 'https://remotehost.com/';

	/** @var string If the request URI starts with this, we want to proxy the request to the remote host */
	const URI_PREFIX = '/wp-content/uploads/';

	# [NPM Check Updates](https://www.npmjs.com/package/npm-check-updates)

	- Install the tool `npm i -D npm-check-updates`
	- Update the package.json `npx ncu --upgrade`
	- Install the new packages npm install

	!.eslintrc.json
	!README.md
	node_modules
	bsync-config.js

	> 0.2%
	last 2 version
	Firefox ESR
	not dead

	https://css-tricks.com/snippets/css/css-triangle/

	.arrow-up {
	content: "";
	border-right: 15px solid transparent;
	border-bottom: 15px solid black;
	border-left: 15px solid transparent;
	width: 0;
	height: 0;
	}