Chrome Web Developer Tools
Table of Contents Keyboard Shortcuts To open the Chrome Developer Tools, Console Tab, you can use the following shortcodes:Windows: ctrl + shift + jMac: cmd + option + iTo open…
Useful Commands & Techniques
How to get the number of DOM elements used in a web page? document.getElementsByTagName('*').length
React.js Video Game Discovery App Project (Part 2)
Install React Query npm i @tanstack/react-query@4.28 Edit main.tsx import "bootstrap/dist/css/bootstrap.css"; import React from "react"; import ReactDOM from "react-dom/client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import App from "./App"; import…
HTML Canvas
The Canvas Element <canvas id="cv1" width="300" height="150"> Fallback content here </canvas> widthThe width of the canvas element(default is 300)heightThe height of the canvas element(default is 150)toDataURL(type)Convert content into a data…
WordPress Elementor Page Builder
Table of Contents Removing Default Bottom Margins from Elementor Paragraphs Elementor's paragraph elements come with a default bottom margin, which often results in excessive spacing between designed elements on the…
Next.js 14 SAAS Automation Builder
Table of Contents Setup the Next.js project (shadcn/ui)https://ui.shadcn.com/docs/installation/next bunx --bun create-next-app@latest . --typescript --tailwind --eslint ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you…
Next.js
Table of Contents Useful VS Code extensions ES7+ React/Redux/React-Native snippetsId: dsznajder.es7-react-js-snippetsDescription: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.Version: 4.4.3Publisher: dsznajderVS Marketplace…
PHP for WordPress
Table of Contents PHP Coding Conventions All PHP files must end in .phpStatements (or commands) in PHP end with a semicolon (;)If you want to include comments, which are nonfunctional…
Node.js
Table of Contents NPM initialization npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.…
React.js Video Game Discovery App Project
Table of Contents Setting up the project npm create vite@4.1.0 ✔ Project name: … game-hub ✔ Select a framework: › React ✔ Select a variant: › TypeScript Scaffolding project in…