Skip to content

Instantly share code, notes, and snippets.

View parthnvaswani's full-sized avatar
🏠
Working from home

Parth Vaswani parthnvaswani

🏠
Working from home
View GitHub Profile
@parthnvaswani
parthnvaswani / Commands.md
Last active February 9, 2023 12:30
Setup PHPCS for WordPress Development

Install PHPCS using composer:

composer g require --dev automattic/vipwpcs dealerdirect/phpcodesniffer-composer-installer -W

Note: If you do not have composer install it using brew:

brew install composer

Edit your .zshrc file and add the following line at the end:

export PATH="$HOME/.composer/vendor/bin:$PATH"

Note: .zshrc exists in the home folder to append the line use following commands:

Interactivity API

Interactivity API is a new API that allows developers to create interactive blocks in WordPress. It is built on top of the Block Editor and provides a way to create blocks that can interact with each other. Before the Interactivity API, developers had to rely on custom JavaScript code to create interactive blocks.

Some configurations are required to use the Interactivity API and its scripts. As @wordpress/intereactivity provides its scripts as js module and we can only import use a module script in another module script.

Custom Interactive Block

To create a custom interactive block using the Interactivity API, you need to follow these steps:

# Example usage: sh compress_images.sh -i=images -o=compressed_images -w=1280 -e=jpg -f=webp
# Set default values
width="1280"
src="./images"
dest="./compressed_images"
extension="jpg"
output_format="webp"
function print_help {
@parthnvaswani
parthnvaswani / AccessibilityChecklist.md
Last active June 17, 2024 12:27
Exhaustive Web Accessibility Checklist

1. Perceivable

Text Alternatives

  • Images: Add alt text to all images that convey information.
  • Decorative Images: Use empty alt attributes (alt="") for purely decorative images.
  • Complex Images: Use longdesc or detailed descriptions for complex images like charts or infographics.
  • Icons: Provide text labels for icon-based buttons.
  • Linked images: Add alt text that details their URL destination, not a description of the image.

Time-Based Media

@parthnvaswani
parthnvaswani / FrontendPerformanceChecklist.md
Last active June 21, 2024 06:55
Frontend Performance Checklist for Developers

Frontend Performance Checklist

This list was created after observing that many major websites often overlook crucial performance details, relying primarily on Core Web Vitals (CWV) reports for performance assessments. While CWV reports are essential, they do not capture every aspect of frontend performance optimization. This checklist aims to fill those gaps by providing developers with a comprehensive set of best practices to ensure optimal frontend performance.

Who is this checklist for?

  • Web Developers: To guide them in implementing best practices for frontend performance during development.
  • Project Managers and QA Teams: To use as a reference for setting performance benchmarks and conducting code reviews.

When can this checklist be applied?

  • During Development: Integrate these practices while writing and structuring code to ensure a performance-first approach.
  • During PR Reviews: Use this checklist as a standard during pull request (PR) reviews to ensure new code adheres to
@parthnvaswani
parthnvaswani / change_mimetype.sh
Last active June 28, 2024 06:20
BASH Script for updating image file extension according to its mime type in a recursive manner and log it in JSON file
# Image Folder
IMAGE_FOLDER="./uploads"
# JSON File
JSON_FILE="./images.json"
# JSON string
JSON_STRING=""
# Loop through all image files recursively in the folder and update the extension
const fs = require('fs');
const path = require('path');
// File to get the error files from
const file = path.join(__dirname, 'media-import-caris-1718959862750.txt');
// Read the file
fs.readFile(file, 'utf8', (err, data) => {
if (err) {