Arifursdev

See: alpinejs/alpine#3016

I have found the bset approach to be this:

Install Alpine.js from npm and bundle it with your js file (documentation). Don't assign it to window:

import Alpine from "alpinejs";
// Assign a custom prefix:
Alpine.prefix("xyz-");
// Don't assign Alpine to the window (keep it private):

Arifursdev

Alpine.directive('typed', (el, { expression, modifiers }, { evaluateLater, effect, cleanup }) => {
	const getStrings = evaluateLater(expression);
	
	const modifierValue = (key, fallback) => {
		if (-1 === modifiers.indexOf(key)) {
			return fallback;
		}
		
		const value = modifiers[modifiers.indexOf(key) + 1];
		

Arifursdev

<?php 

function progressBar($current, $total, $barLength = 50) {
    $progress = ($current / $total) * 100;
    $progressBar = floor(($progress / 100) * $barLength);
    $emptyBar = $barLength - $progressBar;

    ob_start();
    echo "[";

Arifursdev

Unicode cheat sheet

A curated list of unicode characters I want to have quick reference toward, including their literal presentation (where possible), description from the unicode table, various representations, and how to enter it as a Vim digraph*.

They are grouped by category, including a link to the relevant Unicode block. Also see the full list of Unicode blocks

Arifursdev

Command Execution

exec           - Returns last line of commands output
passthru       - Passes commands output directly to the browser
system         - Passes commands output directly to the browser and returns last line
shell_exec     - Returns commands output
\`\` (backticks) - Same as shell_exec()
popen          - Opens read or write pipe to process of a command
proc_open      - Similar to popen() but greater degree of control
pcntl_exec - Executes a program

Arifursdev

@echo off
setlocal EnableDelayedExpansion

ver | find "10." > nul
if errorlevel 1 (
	echo Your Windows version is not Windows 10... yet. Brace yourself, Windows 10 is coming^^!
	pause
	exit
)

Arifursdev

adev-tooltip.js

class Tooltip {
  constructor() {
    this.tooltipElement = this.createTooltipElement();
    this.init();
  }

  init() {

Arifursdev

Add a shipping rates calculator to your Shopify store

requires: jQuery

estimate-shipping-calculator.js

window.estimateShippingCalculator = window.estimateShippingCalculator || {};

(function ($) {

Arifursdev

class HorizontalScrollDragger {
  constructor(element) {
      this.slider = typeof element === "string" ? document.querySelector(element) : element instanceof Element ? element : null;
      if (this.slider === null) return console.error("HorizontalScrollDragger: Element not found");
      this.isDown = false;
      this.preventClick = false;
      this.startX;
      this.scrollLeft;
      this.init()
  }

Arifursdev

function toDMS(deg) {
    var d = Math.floor(deg);
    var min = Math.floor((deg - d) * 60);
    var sec = ((deg - d - min / 60) * 3600).toFixed(2);
    return d + "° " + min + "' " + sec + "\"";
}

function convertLatLngToDMS(lat, lng) {
    var latDMS = lat >= 0 ? "N" : "S";
    var lngDMS = lng >= 0 ? "E" : "W";