![\"TP-Link](\"https://alex.zappa.dev/blog/isp-router-replacement/assets/tp-link-paywall-1.png\")
\n ![\"TP-Link](\"https://alex.zappa.dev/blog/isp-router-replacement/assets/tp-link-paywall-2.png\")
\nYou know what's ironic? A cookie consent banner that violates privacy before you even click "Accept."
\nThat's exactly what HubSpot's cookie banner does. It loads Google Fonts, sending your visitor's IP address to Google's servers, the moment the page loads. No consent asked. No opt-in. Just a quiet little request to fonts.googleapis.com that most people never notice.
I noticed. And it took me down a rabbit hole.
\nIf you're using HubSpot's embedded tracking script on a non-HubSpot website (which many businesses do for CRM, forms, and analytics), you're also getting their cookie consent banner. Sounds great, right? GDPR compliance out of the box!
\nExcept the banner itself loads Google Fonts. Before the visitor has given any consent. Before any cookies are set. The very tool meant to protect privacy is leaking personal data to a third party.
\nHere's what happens when HubSpot's script loads:
\nhs-script-loader JavaScript file is fetched<link> elements pointing to fonts.googleapis.comThis is not a theoretical problem. In January 2022, the Munich Regional Court (LG München) ruled that dynamically loading Google Fonts violates GDPR because it transmits the user's IP address to Google without consent. The website operator was fined €100 in damages, and that ruling triggered a wave of warning letters across Germany and Austria.
\nOn top of that, HubSpot injects its own <style> tags (hs-banner-style and hs-banner-modal-style) with default CSS that often conflicts with your site's design. So you get both a privacy violation and visual junk.
I'm not the first person to notice this. The HubSpot community has multiple threads about it, and none of them have a real solution from HubSpot:
\nThe answer from HubSpot? Silence. Or "use custom CSS to override the styles." That doesn't fix the privacy issue -the request to Google still goes out.
\nHere's the thing that really gets me. This Google Fonts issue is just one symptom of a much bigger disease: cookie banners that do absolutely nothing.
\nI've seen this firsthand. I once told a business owner that their cookie banner was purely cosmetic - it didn't actually block any cookies, didn't gate any third-party scripts, and didn't comply with GDPR in any meaningful way. His response?
\n\n\n"We have a banner. We're compliant."
\n
\n— a Biz owner who doesn't understand how GDPR works
No. Having a banner doesn't make you compliant. That's like putting a "No Trespassing" sign on your front door while leaving it wide open.
\nI wrote about this in detail on FreshJuice: Your cookie banner is probably illegal. The short version: most cookie banners are legal decoration. They sit on websites looking official while cookies fire on page load, third-party scripts track visitors without consent, and Google Fonts leak IP addresses to Mountain View.
\nAnd here's the kicker with HubSpot specifically. They actually have a decent Cookie Banner API. It gives you:
\naddPrivacyConsentListener - to conditionally load scripts based on consentrevokeCookieConsent - to reset consent and remove HubSpot cookiesshowBanner - to let users change their preferencesanalytics, advertisement, functionalitySo the API exists. You can properly gate your third-party scripts behind consent categories:
\nvar _hsp = (window._hsp = window._hsp || []);\n_hsp.push([\n \"addPrivacyConsentListener\",\n function (consent) {\n if (consent.categories.analytics) {\n // Only now load analytics\n }\n if (consent.categories.advertisement) {\n // Only now load ad pixels\n }\n },\n]);But none of this matters if the banner itself, the very thing asking for consent, is already leaking data to Google via fonts. The API has no option to disable Google Fonts loading. You can't configure it away. There's no disableGoogleFonts: true flag. The font request goes out before your consent listener even fires.
It's like building a security system for your house but leaving the back window open.
\nLet's be clear about what's happening: when a browser fetches a Google Font, Google receives:
\nAfter the Munich ruling, this is unambiguously a GDPR violation when done without consent. And a cookie consent banner doing it is... well, peak irony.
\nBut it's not just about legality. It's also about performance. Loading fonts from an external CDN means:
\nfonts.googleapis.comfonts.gstatic.comAll for fonts that your website probably already has loaded, or that the user's system already provides.
\nSince HubSpot won't fix this, I did. The solution is a JavaScript snippet that goes before the HubSpot script loader. It uses two techniques:
\ndocument.createElement to block Google Fonts at creation time # Anchor link (function () {\n // Proxy createElement to kill Google Fonts links before any network request\n var _create = document.createElement.bind(document);\n document.createElement = function (tag) {\n var el = _create(tag);\n if (tag.toLowerCase() === \"link\") {\n // Override the href property setter\n var hrefDesc = Object.getOwnPropertyDescriptor(\n HTMLLinkElement.prototype,\n \"href\",\n );\n if (hrefDesc && hrefDesc.set) {\n var origSet = hrefDesc.set;\n Object.defineProperty(el, \"href\", {\n set: function (v) {\n if (\n typeof v === \"string\" &&\n v.includes(\"fonts.googleapis.com\")\n )\n return;\n origSet.call(this, v);\n },\n get: hrefDesc.get\n ? function () {\n return hrefDesc.get.call(this);\n }\n : undefined,\n configurable: true,\n });\n }\n // Also override setAttribute for href\n var origSetAttr = el.setAttribute.bind(el);\n el.setAttribute = function (k, v) {\n if (\n k === \"href\" &&\n typeof v === \"string\" &&\n v.includes(\"fonts.googleapis.com\")\n )\n return;\n return origSetAttr(k, v);\n };\n }\n return el;\n };\n\n // MutationObserver as a safety net -remove anything that slips through\n new MutationObserver(function (mutations) {\n for (var i = 0; i < mutations.length; i++) {\n for (var j = 0; j < mutations[i].addedNodes.length; j++) {\n var n = mutations[i].addedNodes[j];\n if (n.nodeType !== 1) continue;\n var tag = n.tagName;\n // Remove Google Fonts links\n if (\n tag === \"LINK\" &&\n n.href &&\n n.href.includes(\"fonts.googleapis.com\")\n ) {\n n.remove();\n continue;\n }\n // Remove HubSpot's default banner styles (optional -if you want to use your own)\n if (\n tag === \"STYLE\" &&\n (n.id === \"hs-banner-style\" ||\n n.id === \"hs-banner-modal-style\")\n ) {\n n.remove();\n }\n }\n }\n }).observe(document.documentElement, {\n childList: true,\n subtree: true,\n });\n})();<!-- Block Google Fonts and HubSpot default styles -->\n<script>\n // ... the script above ...\n</script>\n\n<!-- HubSpot Embed Code -->\n<script\n type=\"text/javascript\"\n id=\"hs-script-loader\"\n async\n defer\n src=\"//js-eu1.hs-scripts.com/YOUR_ID.js\"\n></script>The order matters. The proxy must be in place before HubSpot's script starts executing and creating DOM elements.
\nThe createElement proxy intercepts every <link> element HubSpot tries to create. Before the element can be inserted into the DOM (and trigger a network request), it checks if the href points to fonts.googleapis.com. If it does, the setter silently returns without setting the value. No URL = no network request = no IP leak.
The MutationObserver is a safety net. It watches the entire document for new nodes. If a Google Fonts link somehow slips through the proxy (maybe via innerHTML or a different code path), the observer catches it and removes it immediately.
The style removal (hs-banner-style and hs-banner-modal-style) is optional but recommended. HubSpot injects default CSS that often clashes with your site's design. Removing these lets you style the consent banner with your own CSS that matches your site. You can skip this part if you're fine with HubSpot's default appearance.
Beyond fixing HubSpot's mess, here's what you should be doing with fonts in general:
\nDownload the font files and serve them from your own domain. No third-party requests, no IP leaks, better caching control.
\n@font-face {\n font-family: \"Inter\";\n src: url(\"/fonts/inter-var.woff2\") format(\"woff2\");\n font-display: swap;\n}If self-hosting feels like too much work, Bunny Fonts is a drop-in replacement for Google Fonts. Same API, same fonts, but:
\nThe migration is literally a find-and-replace:
\n- https://fonts.googleapis.com/css2?family=Inter\n+ https://fonts.bunny.net/css2?family=Inter\nThat's it. Same URL structure, same font files, zero privacy issues.
\nThe most performant option? Don't load any web fonts at all:
\nbody {\n font-family:\n system-ui,\n -apple-system,\n \"Segoe UI\",\n Roboto,\n \"Helvetica Neue\",\n Arial,\n sans-serif;\n}System fonts are already on the user's device. Zero network requests. Instant rendering. And they look native to the platform, which many users actually prefer.
\nThis isn't just about HubSpot. It's about a mindset problem in the web industry:
\nThird-party tools shouldn't load their own fonts. If a tool injects UI into your website (cookie banners, chat widgets, analytics dashboards), it should use the fonts already available on the page or fall back to system fonts. Loading Google Fonts for a cookie banner that displays two sentences of text is absurd.
\nPrivacy-first means privacy always. A consent mechanism that violates privacy before consent is given defeats its own purpose. If HubSpot can build a complex consent management system, they can certainly avoid loading Google Fonts from a third-party CDN.
\nPerformance matters. Every external resource is a potential point of failure, an extra DNS lookup, and wasted bandwidth. Cookie banners should be lightweight. They should appear instantly. Loading external fonts for cosmetic reasons is the opposite of lightweight.
\ndocument.createElement and using a MutationObserver to block Google Fonts requestsCloudflare is deprecating Pages in favor of Workers with Static Assets. It's not a sudden death, but the writing is on the wall. Time to migrate.
\nI had a setup with two separate projects: an 11ty static site on Pages and an API on Workers. Decided to merge them into one Worker project that handles both static assets and API routes. Clean and simple.
\nThe migration itself was surprisingly smooth. Cloudflare's docs are solid, and there are some good community guides out there:
\nHere's what a combined Worker + Static Assets config looks like:
\n{\n \"$schema\": \"./node_modules/wrangler/config-schema.json\",\n \"name\": \"my-website\",\n \"main\": \"worker/index.js\",\n \"compatibility_date\": \"2025-11-17\",\n\n // Disable workers.dev subdomain (using custom domain only)\n \"workers_dev\": false,\n \"preview_urls\": false,\n\n // Static assets configuration\n // Static assets are served first EXCEPT for /api/* patterns\n \"assets\": {\n \"directory\": \"./_site\",\n \"binding\": \"ASSETS\",\n \"not_found_handling\": \"404-page\",\n \"run_worker_first\": [\"/api/*\"]\n },\n\n // Custom domain routing\n \"routes\": [\n {\n \"pattern\": \"example.com\",\n \"custom_domain\": true\n }\n ],\n\n // Environment variables are stored in:\n // - .dev.vars (local development, gitignored)\n // - Cloudflare dashboard secrets (production)\n\n \"observability\": {\n \"enabled\": true,\n \"head_sampling_rate\": 1\n },\n\n // KV Namespaces\n \"kv_namespaces\": [\n {\n \"binding\": \"CACHE_KV\",\n \"id\": \"your-kv-namespace-id\"\n }\n ],\n\n // D1 Database\n \"d1_databases\": [\n {\n \"binding\": \"DB\",\n \"database_name\": \"my_database\",\n \"database_id\": \"your-d1-database-id\"\n }\n ]\n}The key is run_worker_first — it routes API requests through the Worker while serving static files directly. Best of both worlds.
Everything worked great. But when I tried to delete the old Pages project... nope. 😤
\n\n\n"We are very sorry that you did not succeed."
\n
\n— Cloudflare, when you try to delete a Pages project with 500+ deployments
![\"King's](\"https://alex.zappa.dev/blog/cloudflare-pages-to-workers-migration/assets/kings-quest-game-over.jpeg\")
\nThis weekend I was playing the original King's Quest on my Steam Deck (bought the whole Sierra collection of 7 games on sale), and this game over message felt way too familiar. The game brings back warm memories of childhood when our whole family would sit together and play this wonderful adventure. If I remember correctly, it was even translated into Russian back in the day.
\nThe dashboard just wouldn't let me. Too many deployments.
\nTurns out, Cloudflare has a "protection mechanism" to prevent accidental deletion of projects with a high number of deployments. Which is... fine, I guess? But also annoying when you actually want to delete something.
\nCloudflare documents this issue in their known issues page. Their solution? Download a Node.js script, run npm install, set environment variables, and execute it.
It works, but requires Node.js dependencies (node-fetch, exponential-backoff) and uses environment variables which end up in your shell history. I wanted something simpler.
I also found this StackOverflow question where others had the same problem.
\nI wrote a quick bash helper that does the same thing. No npm, no extra dependencies. Just curl, jq, and a few minutes of your time.
#!/bin/bash\n# Delete Cloudflare Pages/Workers deployments via API\n# Usage: ./delete-cf-deployments.sh --project=xxx --account=xxx --token=xxx [--limit=N] [--keep=N]\n\nPROJECT=\"\"\nACCOUNT_ID=\"\"\nTOKEN=\"\"\nLIMIT=\"\"\nKEEP=\"\"\n\nfor arg in \"$@\"; do\n case $arg in\n --project=*) PROJECT=\"${arg#*=}\" ;;\n --account=*) ACCOUNT_ID=\"${arg#*=}\" ;;\n --token=*) TOKEN=\"${arg#*=}\" ;;\n --limit=*) LIMIT=\"${arg#*=}\" ;;\n --keep=*) KEEP=\"${arg#*=}\" ;;\n esac\ndone\n\nif [ -z \"$PROJECT\" ] || [ -z \"$ACCOUNT_ID\" ] || [ -z \"$TOKEN\" ]; then\n echo \"Usage: $0 --project=<name> --account=<id> --token=<api-token> [options]\"\n echo \"\"\n echo \"Required:\"\n echo \" --project=NAME Cloudflare Pages project name\"\n echo \" --account=ID Your Cloudflare account ID\"\n echo \" --token=TOKEN Cloudflare API token\"\n echo \"\"\n echo \"Options:\"\n echo \" --limit=N Delete only N deployments (for testing)\"\n echo \" --keep=N Keep the last N deployments (cleanup mode)\"\n echo \"\"\n echo \"Examples:\"\n echo \" $0 --project=my-site --account=abc123 --token=xyz789 --limit=3\"\n echo \" $0 --project=my-site --account=abc123 --token=xyz789 --keep=10\"\n echo \" $0 --project=my-site --account=abc123 --token=xyz789\"\n echo \"\"\n echo \"Get API token: Cloudflare Dashboard → My Profile → API Tokens\"\n echo \" → Create Token → Edit Cloudflare Pages\"\n echo \"\"\n echo \"Get Account ID: Cloudflare Dashboard → any site → Overview\"\n echo \" → right sidebar under 'API'\"\n exit 1\nfi\n\nAPI=\"https://api.cloudflare.com/client/v4/accounts/$ACCOUNT_ID/pages/projects/$PROJECT\"\n\necho \"Deleting deployments for: $PROJECT\"\n[ -n \"$LIMIT\" ] && echo \"Limit: $LIMIT\"\n[ -n \"$KEEP\" ] && echo \"Keeping last: $KEEP deployments\"\necho \"\"\n\nCOUNT=0\nPAGE=1\n\n# For --keep mode, we need to skip the first N deployments\n# API returns deployments sorted by date (newest first)\n# So we paginate past the ones we want to keep\n\nif [ -n \"$KEEP\" ]; then\n # Calculate which page to start from\n PER_PAGE=25\n SKIP_PAGES=$((KEEP / PER_PAGE))\n SKIP_IN_PAGE=$((KEEP % PER_PAGE))\n PAGE=$((SKIP_PAGES + 1))\n echo \"Skipping first $KEEP deployments (starting from page $PAGE)...\"\n echo \"\"\nfi\n\nwhile true; do\n # Fetch deployments with pagination\n RESPONSE=$(curl -s \"$API/deployments?per_page=25&page=$PAGE\" \\\n -H \"Authorization: Bearer $TOKEN\")\n\n IDS=$(echo \"$RESPONSE\" | jq -r '.result[].id // empty' 2>/dev/null)\n\n if [ -z \"$IDS\" ]; then\n echo \"No more deployments.\"\n break\n fi\n\n # Convert to array\n IDS_ARRAY=($IDS)\n START_INDEX=0\n\n # On the first page in --keep mode, skip partial entries\n if [ -n \"$KEEP\" ] && [ \"$PAGE\" -eq \"$((SKIP_PAGES + 1))\" ] && [ \"$SKIP_IN_PAGE\" -gt 0 ]; then\n START_INDEX=$SKIP_IN_PAGE\n echo \"Skipping first $SKIP_IN_PAGE on this page...\"\n fi\n\n for ((i=START_INDEX; i<${#IDS_ARRAY[@]}; i++)); do\n ID=\"${IDS_ARRAY[$i]}\"\n\n echo \"Deleting $ID...\"\n curl -s -X DELETE \"$API/deployments/$ID?force=true\" \\\n -H \"Authorization: Bearer $TOKEN\" > /dev/null\n\n COUNT=$((COUNT + 1))\n\n if [ -n \"$LIMIT\" ] && [ \"$COUNT\" -ge \"$LIMIT\" ]; then\n echo \"\"\n echo \"Reached limit of $LIMIT. Deleted $COUNT deployments.\"\n exit 0\n fi\n\n sleep 0.3\n done\n\n # In normal mode (no --keep), always fetch page 1 since we're deleting\n # In --keep mode, move to next page\n if [ -z \"$KEEP\" ]; then\n PAGE=1\n else\n PAGE=$((PAGE + 1))\n fi\ndone\n\necho \"\"\necho \"Done! Deleted $COUNT deployments.\"\necho \"\"\necho \"To delete the project entirely, run:\"\necho \" npx wrangler pages project delete $PROJECT\"\necho \"\"\necho \"Or delete it via Cloudflare Dashboard:\"\necho \" Workers & Pages → $PROJECT → Settings → Delete project\"The script loops through all deployments using the Cloudflare API, deleting them one by one with a small delay to avoid rate limiting. Once done, it prints instructions for deleting the project via Wrangler or Dashboard.
\n--limit=N - Test mode. Delete only N deployments to make sure everything works before going all in.--keep=N - Cleanup mode. Keep the last N deployments and delete the rest. Perfect for regular maintenance.You'll need two things:
\nAPI Token - Go to Cloudflare Dashboard → My Profile → API Tokens → Create Token → "Edit Cloudflare Pages" template.
\nAccount ID - Open any site in Cloudflare Dashboard → Overview → look at the right sidebar under "API".
\nDeleting deployments for: my-old-project\nLimit: 10\n\nDeleting a1b2c3d4-e5f6-7890-abcd-ef1234567890...\nDeleting b2c3d4e5-f6a7-8901-bcde-f12345678901...\nDeleting c3d4e5f6-a7b8-9012-cdef-123456789012...\nDeleting d4e5f6a7-b8c9-0123-defa-234567890123...\nDeleting e5f6a7b8-c9d0-1234-efab-345678901234...\nDeleting f6a7b8c9-d0e1-2345-fabc-456789012345...\nDeleting a7b8c9d0-e1f2-3456-abcd-567890123456...\nDeleting b8c9d0e1-f2a3-4567-bcde-678901234567...\nDeleting c9d0e1f2-a3b4-5678-cdef-789012345678...\nDeleting d0e1f2a3-b4c5-6789-defa-890123456789...\n\nReached limit of 10. Deleted 10 deployments.I've put the script on GitHub Gist for easy access:
\n\nFeel free to use it, fork it, improve it. If you find any bugs or have suggestions, let me know!
\nThe official solution works fine. But it requires Node.js, npm install, and passes credentials via environment variables (which end up in shell history). My bash script:
curl and jq--keep=N option to retain recent deploymentsIf you prefer Node.js, use theirs. If you want something lighter, use mine. 🤷
\nCloudflare won't let you delete Pages/Workers projects with too many deployments. Their solution needs Node.js. Mine is just bash. Grab the script and clean up your old deployments.
\n", "date_published": "2026-01-11T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/isp-router-replacement/", "url": "https://alex.zappa.dev/blog/isp-router-replacement/", "title": "How I replaced my ISP router and extracted PPPoE credentials using a bridge sniffer", "content_html": "I use Digi España with their standard ZTE H3600 router, but ISP-provided hardware is always limited. You can't properly configure VPN, firewall, or DNS. What I really wanted was full control over my network.
\nThat's why I chose GL.iNet. Their routers run OpenWRT, which is essentially a well-optimized Linux distribution. I can SSH into the terminal and configure everything through standard Linux config files. That level of control simply isn't possible with ISP hardware.
\nFor a long time, I was using this setup:
\nONT → Digi Router → Google Wifi Mesh (Router Mode)\nLater I replaced the Google Wifi with TP-Link Deco X60 WiFi 6 Mesh routers. And I wouldn't have touched this whole setup if it weren't for TP-Link's greed. 😤
\nImagine this: three years ago you buy a very expensive product advertised as having a firewall, advanced filtering rules, ad blocking, and many other features. Then one sunny Spanish day, you get a firmware update. I'm one of those people who gets excited about new firmware and eagerly installs it. 🤩 My excitement ended the moment I discovered that part of my router's functionality was now behind a paywall! 🤯 They added a subscription wall to built-in features of my router!
\n\n \nThis isn't even a cloud service. This is hardware I bought! It reminds me of BMW's heated seat subscription or Mercedes' audio system paywall. Funny, right? 😂 But facts are facts. I was shocked 😱 and decided it was time to replace the router with something more advanced and open in terms of settings and functionality.
\nSo I thought: why not replace it with my travel router for testing? Would it handle the load? I was surprised. Yes, it actually does, except for some dead zones in the apartment where the walls seem to be shielded somehow.
\nIn the end, I decided to keep the TP-Link units but switched them from router mode to access point mode, essentially giving the middle finger to all their subscriptions. 😎
\nTwo TP-Link units spread across different points in my apartment more than cover the entire area, delivering up to 900 Mbps over WiFi 6 with stable, lag-free internet.
\nBecause my network topology had become overly complex, I thought: why not remove the Digi router entirely and connect my travel router directly to the ONT? That's when I remembered I didn't know the PPPoE login and password. I could have just opened a support ticket with Digi. They provide credentials without any issues. But where's the fun in that? 😄 I decided to go the hacker route and capture them myself for the experience and entertainment. 🕵️
\nThe first thing I tried was the ZTE web interface. The PPPoE password is hidden. Actually, it's not even there! I tried extracting it through DevTools, but the interface is JavaScript-based without direct URLs. Analyzing dashboard requests didn't reveal any vulnerabilities either.
\nAttempting to connect via SSH on port 22 failed. The port was closed or the daemon wasn't running.
\nI also tried various login combinations for advanced settings:
\nadmin / password from the router stickerfactorymode / Zte521192.168.1.1/manager_dev_config_t.gchNothing worked. The Digi firmware is well locked down and likely stripped, with all settings including PPPoE login and password baked into the firmware.
\nThen I remembered: PPPoE authentication is transmitted unencrypted. Time to sniff some packets. 😏
\nThe idea is simple: place a computer between the ONT and router, pass traffic through transparently, and listen to the PPPoE handshake. PAP credentials are transmitted in plain text.
\nIn my case, I used a Mele Quieter 4C mini PC with Pop!_OS. I keep it around for testing apps on x86_64 since not everything runs smoothly in emulators on Apple Silicon. For the new router, I used my GL.iNet Beryl AX MT3000 travel router as a test. If it works out, I'll probably upgrade to a Flint 2.
\nONT → [eth0 Computer eth1] → ZTE Router\nsudo apt update\nsudo apt install bridge-utils tcpdump wireshark# Find interface names\nip a\n\n# Create bridge\nsudo ip link add br0 type bridge\nsudo ip link set enp1s0 master br0 # built-in ethernet\nsudo ip link set enxc8a36235e23e master br0 # USB adapter (name will differ)\nsudo ip link set enp1s0 up\nsudo ip link set enxc8a36235e23e up\nsudo ip link set br0 upThe sequence matters here:
\nsudo tcpdump -i br0 -vvvs 0 -w pppoe_capture.pcapDuring boot, the router establishes a PPPoE session and sends credentials in plain text.
\nOnce the internet LED on the router lit up (indicating a successful connection), I stopped tcpdump (Ctrl+C) and analyzed the capture:
\nsudo tcpdump -r pppoe_capture.pcap -vvv | grep -iE \"pap|chap|user|pass|name\"The password appeared immediately in the output. 🎉
\nI was doing all this connected to a TV, so taking screenshots was inconvenient, but later I opened the capture in Wireshark and took a screenshot.
\nOpen the capture in Wireshark with filter pap:
![\"Wireshark](\"https://alex.zappa.dev/blog/isp-router-replacement/assets/wireshark-pppoe.png\")
\nIn the logs, I found the PAP Authentication Request:
\nPAP, Auth-Req (0x01), id 1, Peer [USERNAME]@digi, Name [PASSWORD]\nImportant: PAP transmits credentials in plain text, which is why the capture works.
\n| Parameter | \nValue | \n
|---|---|
| Protocol | \nPPPoE | \n
| Username | \n[captured username]@digi | \n
| Password | \n[captured password] | \n
| VLAN ID | \n20 | \n
| MTU | \n1500 | \n
| MAC Clone | \nMAC address of old router | \n
Initially, the connection wouldn't establish. Logs showed "Timeout waiting for PADO packets". The problem was solved by adding VLAN ID 20 to the PPPoE settings.
\nYou can find the MAC on the ZTE sticker or in its web interface under WAN settings.
\nCause: ONT isn't responding to PPPoE requests.
\nSolutions:
\nThe logs showed a warning about MTU 1492. Standard MTU for PPPoE is 1492, but Digi works with 1500 as well.
\nIf you don't have two Ethernet ports, you can set up a fake PPPoE server:
\n# Disconnect ONT from router\n# Connect router directly to computer\n\nsudo pppoe-server -I eth0 -L 10.0.0.1 -R 10.0.0.10 -N 1 -k -FThe router will try to connect to the "provider" and send credentials. However, this method is less reliable. Not all routers send credentials to a fake server.
\nAfter setting up my new router (or rather, verifying these settings):
\nBehind CGNAT (IP 100.x.x.x), you're not directly visible from the internet anyway, but extra protection never hurts.
\nMy new setup is much simpler and more logical:
\nONT → GL.iNet Beryl AX (PPPoE)\n ↓ ↓ ↓ ↓ ↓ ↓ ↓\nTP-Link Deco X60 (AP Mode, WiFi roaming) 2 units connected via Ethernet backhaul\n+ multiple Ethernet switches to various devices\nThe entire process took about an hour, including experimenting with settings. Now I have full control over my home network: proper firewall, VPN, AdGuard, and no ISP firmware limitations. 💪
\nThis little adventure reminded me of my sysadmin days back in the early 2000s when we were learning how Linux actually works under the hood. That's when I first met Ubuntu. Later came Arch and Fedora. I'm pretty much OS-agnostic at this point, though Linux and macOS are my favorites. Mac is my daily driver for productivity, but Linux is where I go for fun, joy, and tinkering with my homelab. 🛠️ And yes, I use Arch btw. 🐧
\nConnection Type: PPPoE\nVLAN ID: 20\nMTU: 1500\nMAC: clone from original router\n\n\n", "date_published": "2026-01-03T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/year-in-review-2025/", "url": "https://alex.zappa.dev/blog/year-in-review-2025/", "title": "2025 year in review: a year of building, learning, and gratitude", "content_html": "Disclaimer:
\n
\nThis article is for educational and entertainment purposes. It describes obtaining credentials for your own connection. Use this information responsibly.
If you've noticed my blog has been quiet this year, there's a good reason for that. I've been heads-down, completely immersed in development, research, and building things I'm genuinely proud of.
\nLooking at my GitHub profile, this year brought:
\n![\"GitHub](\"https://alex.zappa.dev/blog/year-in-review-2025/assets/github-stats-2025.png\")
\nBut numbers only tell part of the story.
\nMost of my energy this year went into FreshJuice, a creative development studio focused on HubSpot CMS and modern web development.
\nWhat started as a way to share HubSpot development knowledge evolved into something bigger:
\nSpeaking of tools, this year I built and launched a whole suite of free online utilities on FreshJuice:
\nAll completely free, no sign-up required. Just open and use.
\nA highlight of the year was partnering with CloudCannon. The FreshJuice 11ty Starter is now available in their community themes, featuring full visual editing and page builder capabilities. If you're looking for a modern Eleventy starter with a powerful CMS, check it out!
\nI've also been maintaining and improving several Eleventy plugins:
\nMy primary work continues to be with the amazing marketing team at Kandji, which transitioned to Iru this year. As part of the team, I build and maintain their HubSpot infrastructure, internal tools, and marketing websites. I even spent six months working from Kandji's London HQ, where I had the chance to meet and collaborate with some truly incredible people in person.
\nTo the entire team: thank you for your trust, collaboration, and the opportunity to build something meaningful together.
\nI want to give a special shoutout to Sylvia LePoidevin, who I had the pleasure of working with for almost 8 years, even before Kandji.
\nThis year, Sylvia decided to start something new: her own journey in the marketing world. She launched Zero to One Marketer, a blog sharing her insights on marketing, growth, and building from scratch. If you're in marketing or just curious about the field, I highly recommend checking it out. Her experience leading marketing teams and building brands from the ground up makes her perspective incredibly valuable.
\nThank you, Sylvia, for almost 8 years of collaboration and the countless projects we built together. Wishing you all the best in this exciting new chapter!
\nHere's something unexpected: I started actively posting on LinkedIn in July this year, and I'm genuinely surprised by what I found.
\nWhat inspired me to try? Actually, it was Sylvia. After reading her viral post about lessons from going 0 to 1 as the first marketing hire (458,000+ impressions!), I thought: "Maybe I should give this a real shot too."
\nI expected the usual corporate noise, but instead discovered a warm, supportive community of developers, marketers, and fellow HubSpot enthusiasts who actually engage, share insights, and help each other grow.
\nThe numbers speak for themselves:
\n![\"LinkedIn](\"https://alex.zappa.dev/blog/year-in-review-2025/assets/linkedin-stats-2025.png\")
\nThese might not be viral numbers, but for me they're huge. I've always treated this blog as a personal journal rather than a platform for engagement: no comment sections, no analytics obsession, just me and my thoughts. LinkedIn changed that. For the first time, I have a space to actually connect with people who share my interests, exchange ideas, and learn from each other. Every like, comment, and connection has meant more than you know.
\nAnd yes, while writing this very post, I updated the design of this website! The navbar now features a liquid glass effect with backdrop blur, a smart sticky header that hides on scroll down and shows on scroll up, and a slick animated mobile menu. I also added a search functionality powered by Pagefind, an amazing static search tool created by the CloudCannon team. Sometimes you just need to practice what you preach and ship something for yourself.
\nI've also been diving deep into accessibility. I set up automated tests to ensure this site passes WCAG 2.1 AA validation, with plans to reach AAA where possible. The WCAG and ADA guidelines have evolved significantly, covering nuances I used to overlook. In the coming year, I'm committed to learning them all and building better web experiences. When design constraints make full compliance tricky, I'll add controls like high-contrast modes to ensure everyone can use my sites comfortably.
\nThis year reminded me why I love what I do. It's not just about the code, it's about the people.
\nThank you to:
\n2026 is around the corner, and I have plans. More open-source tools, more sharing, and hopefully more blog posts here (I promise to write more!).
\n\n\nIf you get just 1% better each day, you'll end up 37 times better by the end of the year.
\n— James Clear, Atomic Habits
\n
Small steps, big impact. Let's keep pushing for progress and spreading good into the world.
\nBut for now, I'm taking a moment to appreciate how far we've come. Thank you for being part of this journey.
\nHappy Holidays and Happy New Year! 🎉
\n", "date_published": "2025-12-28T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/aieo-orange-guest/", "url": "https://alex.zappa.dev/blog/aieo-orange-guest/", "title": "Guest post on Orange Marketing: AIEO is the new SEO", "content_html": "The future of search isn't keywords, it's context.\nSeems like no one really Googles anymore. We just ask AI.\nSearch has evolved, and so should the way we create and optimize content.
\nIn this guest post for Orange Marketing, I explored how marketers and modern web developers can rethink their strategies for the age of AI-powered search, where trust, structure, and machine-readable data become the new SEO fundamentals.
\n👉 You can read the full article on Orange Marketing’s blog:\nAIEO / AEO is the New SEO: What HubSpot Marketers Should Know
\nThanks for reading, and stay fresh out there. 🍊
\n", "date_published": "2025-10-08T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/how-to-manage-multiple-ssh-keys-for-multiple-github-accounts-on-one-computer/", "url": "https://alex.zappa.dev/blog/how-to-manage-multiple-ssh-keys-for-multiple-github-accounts-on-one-computer/", "title": "How to manage multiple SSH keys for multiple GitHub accounts on one computer", "content_html": "Recently my son asked me how to manage multiple SSH keys for multiple GitHub accounts on one computer. He starts his journey as computer science student and he need to work with multiple GitHub accounts for his projects.
\nMy first attempt was to find an article or ready solution to point him to. But I couldn't find a good one. So I decided to write this article to help him and other developers who’re facing the same issue.
\n![\"How](\"https://alex.zappa.dev/blog/how-to-manage-multiple-ssh-keys-for-multiple-github-accounts-on-one-computer/assets/laptop-keys.png\")
\nIf you haven’t already, generate two SSH keys for each GitHub account:
\nssh-keygen -t ed25519 -C \"personal_email_account@example.com\" -f ~/.ssh/id_ed25519_personal\nssh-keygen -t ed25519 -C \"student_email_account@example.com\" -f ~/.ssh/id_ed25519_edu-f flag specifies the filename for the keys (e.g., id_ed25519_personal and id_ed25519_edu).\n\nIf you are using a legacy system that doesn't support the Ed25519 algorithm, use:
\n\nssh-keygen -t rsa -b 4096 -C \"personal_email_account@example.com\" -f ~/.ssh/id_rsa_personal\nssh-keygen -t rsa -b 4096 -C \"student_email_account@example.com\" -f ~/.ssh/id_rsa_edu
Add both keys to your SSH agent:
\neval \"$(ssh-agent -s)\"\nssh-add ~/.ssh/id_ed25519_personal\nssh-add ~/.ssh/id_ed25519_eduEdit (or create) your ~/.ssh/config file to define configurations for each GitHub account.
\n# GitHub Personal Account\nHost github.com\n HostName github.com\n User git\n IdentityFile ~/.ssh/id_ed25519_personal\n\n# GitHub Education Account\nHost github.edu\n HostName github.com\n User git\n IdentityFile ~/.ssh/id_ed25519_eduWhen cloning or working with Git repositories, use the corresponding host name defined in the SSH config:
\nFor Personal account:
\ngit clone git@github.com:username/repo.gitFor Education account:
\ngit clone git@github.edu:username/repo.gitVerify the setup by testing the SSH connection for each account:
\nssh -T github.com\nssh -T github.eduIf the setup is correct, GitHub will identify each account and display a success message.
\nIf you already cloned repositories using the default git@github.com format, update the origin remote URL to use the appropriate host:
\ngit remote set-url origin git@github.edu:username/repo.gitMake sure the SSH public keys (id_ed25519_personal.pub and id_ed25519_edu.pub) are added to the respective GitHub accounts in their settings.
\nTo avoid conflicts, set up a global Git configuration for each account:
\ngit config --global user.name \"Personal Name\"\ngit config --global user.email \"personal_email_account@example.com\"then you need to update the global configuration for the second account:
\ntouch ~/.gitconfig_edu\necho \"[user]\" >> ~/.gitconfig_edu\necho \" name = Student Name\" >> ~/.gitconfig_edu\necho \" email = student_email_account@example.com\" >> ~/.gitconfig_eduand then you need update the global configuration file ~/.gitconfig to include the second configuration file:
echo \"[includeIf \\\"gitdir:~/path/to/your/education/**\\\"]\" >> ~/.gitconfig_edu\necho \" path = ~/.gitconfig_edu\" >> ~/.gitconfig_edu\n\nNote: for Windows users ruleset
\nincludeIfcould be different.\necho \"[includeIf \\\"gitdir/i:C:/path/to/your/education/**\\\"]\" >> ~/.gitconfig_edu
This setup allows you to:
\nWhen you run a Git command in a repository located in the ~/path/to/your/education/ directory, Git will use the configuration from the ~/.gitconfig_edu file.
In all other cases, Git will use the default global configuration.
\nTo confirm the correct profile is being applied in a specific directory:
\ngit config --get user.name\ngit config --get user.email\n\nImportant notes:
\n\n
\n- The included files (e.g.,
\n~/.gitconfig_edu) must be valid Git configuration files.- Make sure to replace
\n~/path/to/your/education/**with the actual path to your education repositories.- If a directory doesn’t match any includeIf condition, the global configuration will be used.
\n
That’s it! You’ve successfully set up and managed multiple SSH keys for multiple GitHub accounts on one computer.
\n", "date_published": "2024-12-06T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/webchronicle/", "url": "https://alex.zappa.dev/blog/webchronicle/", "title": "webChronicle: your personal Wayback Machine", "content_html": "In October 10. 2024 I was looking an archived copy of the website on the Wayback Machine and found that the web archive is down.
\n![\"Wayback](\"https://alex.zappa.dev/blog/webchronicle/assets/wayback-machine-down.png\")
\nShortly I started looking at internet media, what's happened to one of the useful resources in the internet, and found Wayback Machine is down for a reason of DDoS attack.
\nHere is a Forbes article about this incident.
\nThis case brings me to the idea of creating a personal web archiving tool that allows you to capture and explore snapshots of webpages over time. Like the Wayback Machine, but as your own personal Time Machine.
\nThe webChronicle is a simple tool that allows you to capture and explore snapshots of webpages over time. It's like the Wayback Machine, but as your own personal Time Machine.
\n![\"Back](\"https://alex.zappa.dev/blog/webchronicle/assets/bttf-meme.png\")
\nThe webChronicle builds on the Eleventy static site generator and the website-scraper package to capture and store snapshots of webpages.
\nAs a result you will have a static website that you can host on Netlify or Vercel to explore snapshots of webpages over time.
\n\nYou also may deploy this project to other platforms like Heroku, AWS, Cloudflare Pages or Google Cloud.
\n![\"Netlify](\"https://www.netlify.com/img/deploy/button.svg\")
\n npm install.webchronicle.config.js with your configuration:module.exports = {\n ...\n urls: [\n 'https://example.com',\n 'https://example.org',\n ],\n urlFilter: (url) => {\n return url.includes('example.com') || url.includes('example.org');\n },\n ...\n};npm run scrapergit add ./scrapped-websites\ngit commit -m \"Scrapped websites\"\ngit pushhttp://localhost:8080:npm run startYou can explore the live demo of the webChronicle at webChronicle.
\nSpecial thanks to James Dancer for the inspiration behind the name. Your idea was spot on!
\nYou can find the source code of the webChronicle on GitHub.
\nIf you notice an issue, feel free to open an issue.
\nHappy Holidays, and Thanks for reading! 🙏
\n", "date_published": "2024-12-01T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/upgrading-to-eleventy-v3/", "url": "https://alex.zappa.dev/blog/upgrading-to-eleventy-v3/", "title": "Upgrading to Eleventy v3", "content_html": "This post inspired by Max's blog about Upgrading to Eleventy v3
\n![\"Eleventy](\"https://alex.zappa.dev/blog/upgrading-to-eleventy-v3/assets/11ty-possum.jpg\")
\nRight after 11tyConf which was in May of this year, I want to try a new 11ty version and test new image transform plugin.
\nAlthough v3.0.0 is still in alpha, and I'm sure it will be released soon enough that we can use the latest version for testing production, at least for personal websites like mine.
The biggest change in v3 is that Eleventy switches to use ECMAScript Module Syntax (ESM). That aligns it with contemporary standards for JS packages.
\nIn “Lessons learned moving Eleventy from CommonJS to ESM”, Zach explains the motivation for the switch.
\nMeantime, on projects where I work and worked usually was a mix of ESM and commonJS, and I never really thought too much about switch until now.
\nI thought it would be all I had to do for the first time, update the package.json by adding new property type and set value to module.
// package.json\n{\n \"name\": \"alex.zappa.dev\",\n \"version\": \"7.0.0\",\n \"type\": \"module\",\n // ...\n}Well... it was just a start before realizing there are so many other files and scripts I have to update.
\nSince all JS files are modules now, they need updating as well.
\nBasically we cant use CommonJS syntax like module.exports = thing or require('thing') anymore, and we need to replace it with ESM module syntax instead.
In an Eleventy v2 project, you’ll typically have your eleventy.config.js, files for filters/shortcodes and global data files that may look something like this:
const plugin = require('plugin-package')\n// ...\nmodule.exports = {\n something: plugin({ do: 'something' })\n}Using ESM syntax, rewrite these files to look like this:
\nimport plugin from 'plugin-package'\n// ...\nexport default {\n something: plugin({ do: 'something' })\n}It was repetitive work, but once done, it's worth every second.
\nSince I use postCSS with TailwindCSS in my website, I also have to update postCSS and TailwindCSS config files, this is where I found one small issue with tailwindcss/nesting plugin.
Its not ready to be used yet, and cant be imported like most of other plugins.
\nTo solve issue, I found one thread on github issues, the solution was simple, instead of importing tailwindcss as:
\nimport tailwindNesting from \"tailwindcss/nesting\";you have to specify which file you looking to import
\nimport tailwindNesting from \"tailwindcss/nesting/index.js\";Eleventy image plugin got a new feature to optimize any <img> tag on fly using eleventyTransform.
Implementation is simple, and make you code clean, since you no need to use shortcodes for images anymore
\nimport { eleventyImageTransformPlugin } from \"@11ty/eleventy-img\";\n\nexport default function (eleventyConfig) {\n eleventyConfig.addPlugin(eleventyImageTransformPlugin, {\n // which file extensions to process\n extensions: \"html\",\n\n // Add any other Image utility options here:\n\n // optional, output image formats\n formats: [\"avif\", \"webp\", \"auto\"],\n\n // optional, output dir and url path for images\n outputDir: \"./_site/img/\",\n urlPath: \"/img/\",\n\n // optional, output image widths\n widths: [\"auto\"],\n\n // optional, attributes assigned on <img> override these values.\n defaultAttributes: {\n loading: \"lazy\",\n decoding: \"async\",\n }\n });\n}This code broke my website, because I forgot to update shortcode implementation first.
\nSo to solve this problem I have to add an attribute eleventy:ignore to the image shortcode:
import eleventyImage from \"@11ty/eleventy-img\";\n\n// Only one module.exports per configuration file, please!\nexport default function (eleventyConfig) {\n eleventyConfig.addShortcode(\"image\", async function (src, alt, sizes) {\n // ...\n let imageAttributes = {\n alt,\n sizes,\n \"eleventy:ignore\": \"\",\n loading: \"lazy\",\n decoding: \"async\",\n };\n // ...\n });\n};And as result it works perfectly fine, but I want to replace most of shortcodes to regular <img> tags, and I did it.
If your project is similar than mine then you can prepare your project to migrate to ESM syntax now, before Eleventy v3 will be released.
\nOr if you like me, who like to use latest technology in web development, do that a soon as you can.
\n", "date_published": "2024-06-23T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/custom-user-avatars-for-wordpress/", "url": "https://alex.zappa.dev/blog/custom-user-avatars-for-wordpress/", "title": "Custom user avatars for WordPress", "content_html": "WordPress is a powerful platform that allows you to create and manage a wide variety of websites. One of the key\nfeatures of WordPress is its user management system, which allows you to create user accounts and assign different roles\nand permissions to each user.
\nBy default, WordPress uses Gravatar to display user avatars, but you may want to add custom avatar functionality to your\nsite to make it more attractive to users, or maybe you want to give users the option to upload their own avatar images.\nOr maybe the author no have access to Gravatar anymore...
\nIn this blog post, I want to share with you a simple and quick solution to add custom avatar functionality to your WordPress.
\nTo add custom avatar functionality to your WordPress site, we will use the Advanced Custom Fields (ACF) plugin. ACF is a powerful plugin that allows you to create custom fields for posts, pages, and users.
\nFirst, you need to install and activate the Advanced Custom Fields plugin on your WordPress site. Once you have installed the plugin, you can add a code snippet to your theme's functions.php file to create a custom field for user avatars. See the code snippet below:
if (class_exists('ACF')) {\n\n add_action('acf/include_fields', function () {\n if (!function_exists('acf_add_local_field_group')) {\n return;\n }\n\n acf_add_local_field_group(array(\n 'key' => 'user_extra_options',\n 'title' => 'User Extra Options',\n 'fields' => array(\n array(\n 'key' => 'user_extra_options__custom_gravatar',\n 'label' => 'Custom Gravatar',\n 'name' => 'custom_gravatar',\n 'aria-label' => '',\n 'type' => 'image',\n 'instructions' => '',\n 'required' => 0,\n 'conditional_logic' => 0,\n 'wrapper' => array(\n 'width' => '',\n 'class' => '',\n 'id' => '',\n ),\n 'return_format' => 'id',\n 'library' => 'all',\n 'min_width' => '',\n 'min_height' => '',\n 'min_size' => '',\n 'max_width' => '',\n 'max_height' => '',\n 'max_size' => '',\n 'mime_types' => '',\n 'preview_size' => 'thumbnail',\n ),\n ),\n 'location' => array(\n array(\n array(\n 'param' => 'user_form',\n 'operator' => '==',\n 'value' => 'all',\n ),\n ),\n ),\n 'menu_order' => 0,\n 'position' => 'normal',\n 'style' => 'default',\n 'label_placement' => 'top',\n 'instruction_placement' => 'label',\n 'hide_on_screen' => '',\n 'active' => true,\n 'description' => '',\n 'show_in_rest' => 0,\n ));\n });\n\n function sunnypixels_custom_avatar($avatar, $id_or_email, $size, $default, $alt, $args)\n {\n $id = sunnypixels_get_user_id($id_or_email);\n\n if (!$id)\n return $avatar;\n\n $custom_avatar = get_user_meta($id, 'custom_gravatar', true);\n\n if ($custom_avatar) {\n $custom_avatar = wp_get_attachment_image_src($custom_avatar)[0];\n $avatar = \"<img alt='{$alt}' src='{$custom_avatar}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' {$args['extra_attr']} />\";\n }\n\n return $avatar;\n }\n\n function sunnypixels_custom_avatar_url($url, $id_or_email, $args)\n {\n $id = sunnypixels_get_user_id($id_or_email);\n\n if (!$id)\n return $url;\n\n $custom_avatar = get_user_meta($id, 'custom_gravatar', true);\n\n if ($custom_avatar) {\n $custom_avatar = wp_get_attachment_image_src($custom_avatar)[0];\n $url = $custom_avatar;\n }\n\n return $url;\n }\n\n function sunnypixels_get_user_id($id_or_email)\n {\n if (is_numeric($id_or_email))\n return $id_or_email;\n\n if (is_object($id_or_email))\n return $id_or_email->user_id;\n\n if (is_string($id_or_email))\n return get_user_by('email', $id_or_email) ? get_user_by('email', $id_or_email)->ID : 0;\n\n return 0;\n }\n\n add_filter('get_avatar', 'sunnypixels_custom_avatar', 100500, 6);\n add_filter('get_avatar_url', 'sunnypixels_custom_avatar_url', 100500, 3);\n\n} else {\n\n add_action('admin_notices', function () {\n echo '<div class=\"notice notice-warning is-dismissible\"><p>Advanced Custom Fields plugin is required for Custom Gravatar functionality.</p></div>';\n });\n\n}You can find copy of this snippet here.
\nThe result of this code snippet is a new field in the user profile page, where users can upload their custom avatar images. The custom avatar images will be displayed instead of the Gravatar images on the site.
\n![\"Custom](\"https://alex.zappa.dev/blog/custom-user-avatars-for-wordpress/assets/wp-custom-gravatar-dashboard.jpeg\"){kind=avatar}
\nif you don't want to edit your WordPress theme, you can use a plugin variation of this solution, I coded for you. You can find it here.
\nI hope this blog post helps you add custom avatar functionality to your WordPress site. If you like this plugin, please consider to give it a star on GitHub.
\n", "date_published": "2024-04-09T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/how-to-use-structured-data-schema-markup-in-hubspot-to-improve-seo/", "url": "https://alex.zappa.dev/blog/how-to-use-structured-data-schema-markup-in-hubspot-to-improve-seo/", "title": "How to use structured data (schema markup) in HubSpot to improve SEO", "content_html": "Structured data, also known as schema markup, is an important tool that can significantly improve your website's search\nengine optimization (SEO). By implementing schema markup in HubSpot, you can provide search engines with valuable\ninformation about your content, helping them to better understand and display your website in search results. In this\nblog post, we will explore the benefits of using structured data and provide you a code snippets which you can use to\nimplement schema markup in HubSpot.
\nThere are many different types of schemas available on Schema.org, with over 760 listed.\nSchema.org is a website created by Bing, Google, and Yahoo to provide a common set of schemas for structured data. It\ncan be overwhelming for first-time readers to decide which schema to use. However, Google provides a helpful breakdown\nof specific schemas that can be used for their rich results. These schemas are listed on\ntheir search gallery documentation.\nIn this case, we will focus on the Article structured data type, which is commonly used for news, sports, or blog\narticles. It allows for features like a Top stories carousel, headline text, and larger-than-thumbnail images.
\nUsing structured data in HubSpot offers several advantages for your website's SEO. First and foremost, it helps search\nengines understand the semantics of your content, enabling them to display rich snippets in search results. These\nsnippets provide users with more detailed and visually appealing information about your website, increasing the\nlikelihood of attracting clicks. Additionally, structured data helps search engines categorize your content more\naccurately, improving its visibility to relevant audiences and increasing organic traffic to your website.
\nTo start implementing structured data in HubSpot, you first need to identify the content elements that would benefit\nfrom schema markup. This could include blog posts, product pages, events, and more. Once you have identified the\nrelevant content, you can proceed with adding schema markup to your HubSpot templates. HubSpot provides a user-friendly\ninterface that allows you to easily edit your templates, insert schema markup, and preview the changes. Be sure to\nvalidate your schema markup\nusing Google's Structured Data Testing Tool to\nensure it is implemented correctly.
\nWhen deciding how to implement your structured data in HubSpot, there are two options to consider. It's important to\nchoose the option that suits your needs best.
\nThis option involves adding the code at the template level. It works well when you have a single schema that applies\nconsistently to your content. For example, if you have a blog that only contains news articles, you can simply include\nthe Article schema in the template. In this case, your content editor doesn't need to worry about adding any additional\ninformation.
\nThe second option is to create a custom module, either Local or Global, to use on pages or blogs. This method is ideal\nwhen you have multiple schema types (such as Article, Event, JobPosting, etc.) that you want to implement within your\nblog. You can offer options for the content editor to choose from when publishing each piece of content.
\nBlogPosting schema example:
\n<script type=\"application/ld+json\">\n{\n \"@context\": \"https://schema.org\",\n \"@type\": \"BlogPosting\",\n \"mainEntityOfPage\": {\n \"@type\": \"WebPage\",\n \"@id\": \"{{content.absolute_url}}\"\n },\n \"headline\": \"{{content.title}}\",\n {%- if content.use_featured_image -%}\n \"image\": [\n \"{{content.featured_image}}\"\n ],\n {%- endif -%}\n \"datePublished\": \"{{content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S')}}\",\n \"dateModified\": \"{{content.updated|datetimeformat('%Y-%m-%dT%H:%M:%S')}}\",\n \"author\": {\n \"@type\": \"Person\",\n \"name\": \"{{content.blog_post_author.full_name}}\",\n \"url\": \"{{content.parent_blog.root_url}}/author/{{content.blog_post_author.slug}}\"\n },\n \"publisher\": {\n \"@type\": \"Organization\",\n \"name\": \"{{site_settings.company_name or brand_settings.primaryLogo.name or 'Company Name'}}\",\n \"logo\": {\n \"@type\": \"ImageObject\",\n \"url\": \"{{brand_settings.primaryLogo.src}}\"\n }\n },\n \"description\": \"{{content.meta_description|striptags|safe|truncate(160, True, '')}}\",\n \"url\": \"{{content.absolute_url or request.full_url}}\"\n}\n</script>BreadcrumbList schema example:
\n<script type=\"application/ld+json\">\n{\n \"@context\": \"https://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n {\n \"@type\": \"ListItem\",\n \"position\": 1,\n \"name\": \"Home\",\n \"item\": \"{{site_settings.company_url}}\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 2,\n \"name\": \"Blog\",\n \"item\": \"{{content.parent_blog.root_url}}\"\n },\n {\n \"@type\": \"ListItem\",\n \"position\": 3,\n \"name\": \"{{content.title}}\",\n \"item\": \"{{content.absolute_url}}\"\n }\n ]\n}\n</script>There are several tools available to help you implement structured data in HubSpot. One of the most popular tools is:
\nIn conclusion, incorporating structured data in HubSpot is a powerful tactic to enhance your website's SEO. By providing\nsearch engines with more information about your content, you can improve its visibility, attract more organic traffic,\nand enhance the user experience. Don't overlook the importance of schema markup in your SEO strategy. Implement it in\nyour HubSpot templates today and reap the benefits of higher search rankings and increased website traffic. Stay Ahead\nof the competition and make the most out of your HubSpot platform by leveraging the power of structured data.
\nI just found out that HubSpot has released Structured Data (Beta) and it works really well.\nI'm still think homebrewed solution is better, but it's good to know that HubSpot is moving in the right direction.
\n", "date_published": "2024-01-07T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/the-best-free-image-placeholder-for-quick-and-easy-content-mockups/", "url": "https://alex.zappa.dev/blog/the-best-free-image-placeholder-for-quick-and-easy-content-mockups/", "title": "The best free image placeholder for quick and easy content mockups", "content_html": "One of the challenges content creators face is finding high-quality, visually appealing images to enhance their articles\nor blog posts. However, it can be time-consuming and expensive to source these images from stock photo sites.\nThankfully, there are free image placeholders available that can quickly and easily serve as temporary replacements\nuntil the final images are obtained. In this blog post, we will explore the best free image placeholders to assist\ncontent creators in their quest for captivating visual content.
\nOne popular option for a free image placeholder is Placehold.co. This platform offers a simple\nand user-friendly interface that enables users to generate image placeholders of custom sizes simply by modifying the\nURL. With Placehold.co, content creators can specify the width, height, background color, text color, and even add\ncustom text to their placeholders. This versatility makes it a valuable tool for quick and easy content mockups.
\nSee the example below:
\n<img src=\"https://placehold.co/320x150?text=320x150\\nhttps:/placehold.co/\" alt=\"Placeholder Image\">Another excellent choice for free image placeholders is Lorem Picsum(formerly known as\nUnsplash It). This platform provides high-quality placeholder images sourced from Unsplash, a popular stock photography\nplatform. Users can specify the size, category, and even apply filters to match their desired aesthetic. These\nplaceholders can be easily downloaded, allowing content creators to populate their drafts with visually pleasing images\nbefore acquiring the final ones.
\nSee the example below:
\n<img src=\"https://unsplash.it/320/150?image=57\" alt=\"Placeholder Image\">![\"Placeholder](\"https://unsplash.it/320/150?image=57\")
\nUpdated: Temporary broken or finally deprecated, please check the Unsplash Source API
\nUnsplash Source is another free image placeholder that offers a wide selection of\nplaceholder images from Unsplash. Users can specify the size, category, and even apply filters\nto match their desired aesthetic. Additionally, Unsplash Source provides options to customize the background color, text\noverlay, and even add a logo. With its comprehensive database and customizability, Unsplash Source is a reliable choice\nfor content creators in need of high-quality placeholder images.
\nSee the example below:
\n<img src=\"https://source.unsplash.com/320x150/?funny+cat\" alt=\"Placeholder Image\">Pixabay Fillers is a free image placeholder that offers a wide selection of\nplaceholder images from Pixabay. Users can specify the size, category, and even apply filters\nto match their desired aesthetic. Additionally, Pixabay Fillers provides options to customize the background color, text\noverlay, and even add a logo. With its comprehensive database and customizability, Pixabay Fillers is a reliable choice\nfor content creators in need of high-quality placeholder images.
\nSee the example below:
\n<img src=\"https://cdn.pixabay.com/video/2015/08/08/125-135736646_small.jpg\" alt=\"Placeholder Image\">![\"Placeholder](\"https://cdn.pixabay.com/video/2015/08/08/125-135736646_small.jpg\")
\nAs content creators, incorporating captivating visuals into our articles and blog posts is crucial for engaging our\nreaders. However, finding the perfect images can be a time-consuming and expensive process. Fortunately, free image\nplaceholders like Placehold.co, Lorem Picsum, Unsplash, and Pixabay Fillers offer convenient solutions for quick and\neasy content mockups. Whether it's generating customizable image placeholders, accessing high-quality stock photos, or\nadding personal touches, these tools provide the necessary resources to enhance our content creation workflow. By\nutilizing these free image placeholders, content creators can streamline their process and focus on delivering engaging\nand visually stunning content to their audience.
\nMy favorite is Unspalsh Source API, what's yours?
\n", "date_published": "2023-08-20T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/migrating-from-wordpress-to-11ty-enhancing-website-performance-and-control/", "url": "https://alex.zappa.dev/blog/migrating-from-wordpress-to-11ty-enhancing-website-performance-and-control/", "title": "Migrating from WordPress to 11ty: enhancing website performance and control", "content_html": "Hey there, lovely readers! Today, I am absolutely thrilled to share with you my very first blog post on my newly\nmigrated website! After careful consideration and research, I decided to move away from WordPress and embrace the world\nof static website generation with 11ty. This decision was driven by my desire for simplicity, performance, and increased\ncontrol over my website. In this post, I will dive into the reasons behind my migration, the benefits of using 11ty, and\nmy initial thoughts on this exciting new journey. So, grab a cup of coffee and let's get started!
\nWhen I embarked on my blogging journey, I experimented with various platforms including Blogger, WordPress, Jekyll, and\nGhost. Initially, WordPress seemed like the obvious choice with its user-friendly interface, extensive plugin options,\nand vibrant community. However, over time, I began to encounter some limitations. WordPress felt bloated, resulting in\nsluggish website loading times, and the constant plugin updates became tiresome. It was then that I came across 11ty and\nthe concept of static website generation, which intrigued me with its promise of swift loading times and streamlined\nupkeep. The idea of having complete control over my website's codebase and including only what I truly needed greatly\nappealed to me. Thus, the decision to switch to 11ty was born.
\nNow that I have migrated my website, I can already see some major benefits of using 11ty. Firstly, the performance gains\nare remarkable. With static website generation, there is no need for server-side processing or database queries,\nresulting in lightning-fast loading times. This not only enhances the user experience but also improves search engine\noptimization. Secondly, the simplicity of 11ty is a refreshing change. The configuration is straightforward, the\ntemplating language is intuitive, and the documentation is extensive. I feel more confident and in control of my website\nthan ever before. Lastly, the ability to version control my website's codebase using Git is invaluable. I can easily\ntrack changes, collaborate with others, and revert back to a previous version if needed.
\n![\"Google](\"https://alex.zappa.dev/blog/migrating-from-wordpress-to-11ty-enhancing-website-performance-and-control/assets/pagespeed-report.png\")
\nAs with any new venture, there is a learning curve that comes with using 11ty. However, I must say that the transition\nhas been relatively smooth. The initial setup was a breeze, thanks to the excellent documentation provided by the 11ty\ncommunity. Migrating my old blog posts to the new platform was a bit time-consuming, but it allowed me to revisit my\ncontent and update it along the way. One of the things that excites me the most about 11ty is the flexibility it offers.\nWhether I want to create a simple blog, a full-fledged e-commerce site, or a documentation portal, 11ty can accommodate\nall my needs. I am eager to dive deeper into its features and explore the endless possibilities it presents.
\nIn conclusion, the decision to migrate my website from WordPress to 11ty has been one of the best I have made for my\nonline presence. The performance gains, simplicity, and control over my website have exceeded my expectations. Even\nthough there was a learning curve, the transition has been smooth, and I am excited to continue the journey with 11ty. I\nhighly recommend considering static website generation with 11ty if you are looking to enhance your website's\nperformance and take control of your online presence.
\nAs I look Ahead to the future, I am excited to outline my plans for further improving my website. I have identified a\nfew key areas that I intend to focus on for future updates:
\nThese planned updates reflect my commitment to continuously improving my website and providing an exceptional user\nexperience. I believe that by focusing on navigation enhancements, implementing a search page, and incorporating a\nTwitter-based comment system, I will be able to create a more engaging and content-rich environment for my visitors.\nStay tuned for more blog posts where I will be sharing tips, tricks, and insights on using 11ty to its full potential.\nUntil next time, happy coding!
\n", "date_published": "2023-08-13T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/how-to-change-app-store-preferred-language-2022/", "url": "https://alex.zappa.dev/blog/how-to-change-app-store-preferred-language-2022/", "title": "How to change App Store preferred Language 2022", "content_html": "My wife has issue with AppStore on MacBook, her account, and iPhone was set up in English but for some reason AppStore\non macOS have been in Spanish.
\n![\"App](\"https://alex.zappa.dev/blog/how-to-change-app-store-preferred-language-2022/assets/appstore-esp.png\")
\nIn internet, you can find numerous instructions how to change language of your account and AppStore. Some of them live\non Apple Support pages, but no one solution works for me, and according to google requests, looks like I’m not the only\none who has this issue.
\nAs AppleCare+ holder I decided to ask Apple advisors about my issue by email first, with no good answer 🙁
\nLater I try to contact Apple Support via chat, and there are a couple of funny stories… So far, I would like to say,\nApple Advisors are the most friendly and skilled support ever! But even they, couldn’t help me 🙁
\nFirst I got connected to Super Advisor who tried to help me, but the chat looks like freez.. Or he made it looks like\nfreeze :/
\nAnyway, second time I got connection with very friendly guy who try to debug a problem and ask me to try alternatives.
\nNo one of their solutions don’t want to solve my issue, we have tried to remove VPNs, remove LittleSnitch Firewall,\nreset settings, check Apple ID, brake SMC settings 🙂 Nothing helps, and he decides to schedule a phone call with super\nAdvisor 🙂
\nLong story short… after all manipulations I made, and taking short coffee break, I found a simple solution!
\nThe App Store on macOS its an webpage AppView, and language of AppStore based on geoIP location, so if you based in\nSpain like I am and you log in to appStore, the language will be set to Spanish.
\nEven your account set up to English, so based on my discovery I set my VPN to UK location, logout from AppStore, force\nclose it, and open again, first it was in Spanish again, but after I login to my Apple ID, AppStore become to English!!!
\n![\"App](\"https://alex.zappa.dev/blog/how-to-change-app-store-preferred-language-2022/assets/appstore-eng.png\")
\nLater I turn VPN off and restart my mac to see if AppStore change language, but its not, from now my AppStore are always\nin English.
\nThis is it, solution was super simple, but nobody, even Apple Support have no idea about this glitch.
\n", "date_published": "2022-01-21T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/my-favorite-css-hacks/", "url": "https://alex.zappa.dev/blog/my-favorite-css-hacks/", "title": "My favorite CSS hacks", "content_html": "As it is with every coding language, there are several shortcuts or hacks with CSS that allow you to write cleaner code, improve design elements, and save valuable time. Furthermore, you can directly insert these snippets to your site using a code editor. And here is my favorite CSS Hacks.
\nThe border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height.
\nhtml {\n\tbox-sizing: border-box;\n}\n*, *:before, *:after {\n\tbox-sizing: inherit;\n}Use selection pseudo-class to give a personal touch to text selection on your websites.
\nSee the Pen on CodePen.
\nSet the color of the cursor in input elements.
\ninput, textarea {\n\tcaret-color: #ff0000;\n}See the Pen on CodePen.
\nDisplay links when the element has no text value, but the attribute has a link.
\na[href^=\"http\"]:empty::before {\n content: attr(href);\n}See the Pen on CodePen.
\nIn this simple hack, you can make sure that your images always fit the visitor’s screen, regardless of the device they’re using. More use cases could be found here.
\nimg {\n max-width: 100%;\n height: auto;\n}When you want a style that applies to users with dark mode turned on, add your style inside media query below. If we want the black background and white text for dark mode users, we will type something like this:
\n@media (prefers-color-scheme: dark) {\n body {\n background-color: #111111;\n color: #FFFFFF;\n }\n}Sometimes we have icons or images that we just don’t want to be seen on the mobile view.
\n@media only on screen and (max-width: 767px) {\n\tsection .user-img {\n\t\tdisplay: none;\n\t}\n}CSS vendor prefixes, also sometimes known as or CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers. This may be done during a sort of testing and experimentation period where the browser manufacturer is determining exactly how these new CSS features will be implemented.
\nThe CSS browser prefixes that you can use (each of which is specific to a different browser) are:
\n-webkit--webkit--webkit--webkit--moz--ms--o-\n\nThe Autoprefixer uses data on the popularity of browsers and support for vendor prefixes by browsers. Based on this information, it arranges and deletes the prefixes. It can help you get prefixes for: animations, transition, transform, grid, flex, flexbox and others.
\n\n
To make sure your CSS works well on the rest of browsers, always use Autoprefixer, here ho is it looks like:
\n![\"Autoprefixer](\"https://alex.zappa.dev/blog/my-favorite-css-hacks/assets/autoprefixer-css-online.png\")
\nThere are countless tricks we can use with CSS3. Which is your favorite? Comment down below.
\n", "date_published": "2021-11-29T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/", "url": "https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/", "title": "Detect dark or light system mode", "content_html": "As developer, I do prefer dark schema for system and all my apps except Gmail on mobile 🙂 Emails still not so friendly for dark theme mode 🙂
\n![\"Light](\"https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/assets/meme-light-ide.jpeg\")
\nThe prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme.
\n\n\nThe user might indicate this preference through an operating system setting (e.g. light or dark mode) or a user agent setting.
\n\n
Indicates that a user has notified the system that they prefer an interface that has a dark theme.
\nWhen you want a style that applies to users with dark mode turned on, add your style inside media query below. If we want the black background and white text for dark mode users, we will type something like this:
\n@media (prefers-color-scheme: dark) {\n\tbody {\n\t\tbackground-color: #000000;\n\t\tcolor: #FFFFFF;\n\t}\n}Indicates that the user has notified the system that they prefer an interface that has a light theme.
\nWhen you want a style that applies to users with light mode turned on, add your style inside media query below. If we want the white background and black text for light mode users, we will type something like this:
\n@media (prefers-color-scheme: light) {\n\tbody {\n\t\tbackground-color: #FFFFFF;\n\t\tcolor: #000000;\n\t}\n}\n\nThe Window interface’s matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.
\n\n
Here is simple example how to use it:
\nif (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n // dark mode\n} else {\n\t// light mode or not supported\n}To watch for changes:
\nwindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n const newColorScheme = e.matches ? \"dark\" : \"light\";\n});Google Tag Manager could detect user’s theme color preferences, and after send that data to Google Analytics for example.
\nOpen Google Tag Manager Dashboard, on sidebar select tab Variables and add new User-Defined Variables
\nSelect Custom JavaScript and copy-paste code from below:
\nfunction () {\n\tif (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n\t\treturn 'Dark';\n\t}\n\telse if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {\n\t\treturn 'Light';\n\t}\n\treturn 'No Preference';\n}Result should look like a screenshot.
\n![\"Google](\"https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/assets/google-tag-manager-custom-javascript.png\")
\nTo track user color mode with Google Analytics Universal, we need to create a tag in GTM like screenshot below, and fire it on PageView trigger.
\n![\"Google](\"https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/assets/google-tag-manager-ga-universal-event.png\")
\nNot a secret, Google Analytics v4 has new way to collect data, and in this case, we need to create a tag in GTM and also create custom dimension in Google Analytics.
\n![\"Google](\"https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/assets/google-tag-manager-user-color-mode-gav4.png\")
\n![\"Google](\"https://alex.zappa.dev/blog/detect-dark-or-light-system-mode/assets/google-analysis-v4-custom-dimension.png\")
\nAfter all set, in 48h, you will start to see User color mode in your Google Analytics reports.
\nThis is it, hope this article help to learn something new, GTM and GA could help us to collect a lot of different information, to learn how to do that, I strongly recommend checking Analytics Mania where Julius teaching how to use GTM and GA in god mode 😉
\n", "date_published": "2021-11-21T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/mobile-friendly-responsive-images-with-css/", "url": "https://alex.zappa.dev/blog/mobile-friendly-responsive-images-with-css/", "title": "Mobile friendly Responsive images with CSS", "content_html": "The term “responsive images” has come to mean “responsive images in HTML”, in other words, the srcset and sizes\nattribute for <img> and the <picture> element. But today I want to talk about a common issue, when image go outside\ncontainer.
In HTML, srcset is like this:
\n<img srcset=\"\n examples/images/image-384.jpg 1x,\n examples/images/image-768.jpg 2x\n\" alt=\"[…]\">And this is good and correct way we know, but what we can do when image goes outside container even they have srcset\nattribute?
Here is example:
\n![\"Responsive](\"https://alex.zappa.dev/blog/mobile-friendly-responsive-images-with-css/assets/responsive-images-issue.png\")
\nOn screenshot, you can see classic issue with blogs on WordPress or HubSpot
\nWe must ensure the image is fluid, but up to a limit! Solution: the CSS max-width rule. By this rule, we will indicate\nthe image width in pixels, at the most, 100% of the width of the container. Here is example:
\nimg {\n\tmax-width: 100%;\n\theight: auto;\n}For WordPress by adding code below to style.css file in theme directory:
.entry-content img,\n.entry-summary img,\n.comment-content img,\n.widget img,\n.wp-caption {\n\tmax-with: 100%;\n\theight: auto;\n}For HubSpot: Open Settings > Website(sidebar) > Pages(sidebar) > Templates(tab) > Site head HTML(section) and paste the\nfinal code to Site head HTML editor:
\n<style>\n\t.body-wrapper img {\n\t\tmax-with: 100%;\n\t\theight: auto;\n\t}\n</style>This is it, it should resolve the issue with oversized images. Here is example on CodePen, how its work:
\nSee the Pen on CodePen.
\nThis is it! Hope my post have been helpful, stay safe!
\n", "date_published": "2021-10-27T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/keep-track-utm-parameters-for-hubspot-forms-like-cookie-monster/", "url": "https://alex.zappa.dev/blog/keep-track-utm-parameters-for-hubspot-forms-like-cookie-monster/", "title": "Keep Track UTM parameters for HubSpot forms like Cookie Monster", "content_html": "About a week ago, I outlined\nstep-by-step how to track UTMs across session and\npopulate HubSpot forms even the visitor\nalready left the target page and after checking other website pages decided to finish a form and submit application.
\nThis time I will explain how we can do the same with cookies and store UTM parameters for a day, or week, or even more.
\nThe downside of sessionStorage solution is when\nvisitor close the browser tab, stored cookies will be gone.
\n\n\nAn HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user’s web browser. The\nbrowser may store the cookie and send it back to the same server with later requests. Typically, an HTTP cookie is\nused\nto tell if two requests come from the same browser—keeping a user logged in, for example. It remembers stateful\ninformation for the stateless HTTP protocol.
\nFrom Web docs | MDN
\n
I don’t want to “reinvent the wheel”, so we will use JavaScript Cookie\nlibrary, and the easiest way to start work with this library get it from CDNJS.com. The snippet we\ncan get and install\nto the footer of the website looks like this:
\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js\" referrerpolicy=\"no-referrer\"></script>Or use the latest version with UnPKG.com
\n<script src=\"https://unpkg.com/js-cookie\"></script>Next step let’s get the code from previous post and\nset them to use cookies instead of sessionStorage
\n(function ($, w, d, Cookies, GET) {\n\t// Create object and store UTMs\n\tvar utm = {\n\t\tsource: GET('utm_source'),\n\t\tcampaign: GET('utm_campaign'),\n\t\tcontent: GET('utm_content'),\n\t\tmedium: GET('utm_medium'),\n\t\tterm: GET('utm_term')\n\t};\n\t// Check if one or more UTMs present in URL\n\tif (utm.source || utm.campaign || utm.content || utm.medium || utm.term) {\n\t\t// Set Cookie __utm_params with livetime period 7 days\n\t\tCookies.set('__utm_params', utm, {expires: 7, path: '/'});\n\t}\n\t// Check if UTM parameters stored in SessionStorage\n\tif (Cookies.get('__utm-params')) {\n\t\t// Parse UTMs from SessionStorage to JSON\n\t\tvar storedUTM = JSON.parse(Cookies.get('__utm-params'));\n\t\t// Add Event Listener for `onFormReady` event\n\t\tw.addEventListener('message', function (e) {\n\t\t\tif (e.data.type === 'hsFormCallback' && e.data.eventName === 'onFormReady') {\n\t\t\t\t// Find all HubSpot forms on the page\n\t\t\t\tvar scope = $(d).find('form[data-form-id]');\n\t\t\t\t// Check if UTM parameter exists and populate form hidden input fields\n\t\t\t\tif (storedUTM.source) {\n\t\t\t\t\tscope.find('[name=\"utm_source\"]').val(storedUTM.source).change();\n\t\t\t\t}\n\t\t\t\tif (storedUTM.campaign) {\n\t\t\t\t\tscope.find('[name=\"utm_campaign\"]').val(storedUTM.campaign).change();\n\t\t\t\t}\n\t\t\t\tif (storedUTM.content) {\n\t\t\t\t\tscope.find('[name=\"utm_content\"]').val(storedUTM.content).change();\n\t\t\t\t}\n\t\t\t\tif (storedUTM.medium) {\n\t\t\t\t\tscope.find('[name=\"utm_medium\"]').val(storedUTM.medium).change();\n\t\t\t\t}\n\t\t\t\tif (storedUTM.term) {\n\t\t\t\t\tscope.find('[name=\"utm_term\"]').val(storedUTM.term).change();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n})(jQuery, window, document, Cookies, function (param, url) {\n\turl = url ? url : window.location.href;\n\tvar vars = {};\n\turl.replace(location.hash, '').replace(/[?&]+([^=&]+)=?([^&]*)?/gi, function (m, key, value) {\n\t\tvars[key] = value !== void 0 ? value : '';\n\t});\n\treturn typeof vars[param] !== 'undefined' ? vars[param] : '';\n})Open Settings > Website(sidebar) > Pages(sidebar) > Templates(tab) > Site footer HTML(section) and paste the final code\nto Site footer HTML editor between script tags
\n<script src=\"https://unpkg.com/js-cookie\"></script>\n<script>\n\t(function(){\n\t // do something\n\t})();\n</script>![\"HubSpot](\"https://alex.zappa.dev/blog/keep-track-utm-parameters-for-hubspot-forms-like-cookie-monster/assets/hubspot-site-footer-html-editor.png\")
\nFinal result should look like screenshot
\nThe same method could be used for any websites(Webflow, WordPress, Wix, Static, etc…) who use HubSpot forms.
\n", "date_published": "2021-10-22T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/track-utm-parameters-for-hubspot-forms-like-a-boss/", "url": "https://alex.zappa.dev/blog/track-utm-parameters-for-hubspot-forms-like-a-boss/", "title": "Track UTM parameters for HubSpot forms like a BOSS", "content_html": "I think a Tracking URL is a good feature for marketing perspectives.
\n\n\nTracking URLs help you measure the effectiveness of your marketing campaigns by providing information to HubSpot when\nvisitors access your site through the URL.
\nCreate a tracking URL when you want to track traffic from a campaign to a page with the HubSpot tracking code. Examples\ninclude email blasts, PPC campaigns, and banner ads. You can also create a tracking URL using\nyour meeting links.
\nA tracking URL is a normal URL with parameters attached to it. When visitors come to your site from a tracking URL,\nHubSpot saves the information in those parameters. Learn how\nto analyze traffic data from tracking URLs in the traffic\nanalytics tool.
\n\n
Meantime, it’s good idea to pass those UTM parameters to form hidden fields
\n\n\nHubSpot makes it relatively easy to pass UTM parameters from a URL into hidden fields in a HubSpot form. In this blog\npost, we will outline step-by-step how to do so.
\n
From How to pass UTM parameters into a HubSpot form
\nThe downside of the method described in article above it’s work only with landing page, when user arrives to your page\nvia URL with UTM parameters, and if he goes to the next page or check some pages before actually do some actions with\nform on landing page, the UTMs will be lost.
\nSo basicly we looking to pass UTMs to form fields with property\nnames: utm_source, utm_campaign, utm_content, utm_medium, utm_term.
\n\nThe read-only sessionStorage property accesses a\nsession Storage object for the\ncurrent origin. sessionStorage is\nsimilar to localStorage; the difference is\nthat while data in localStorage doesn’t expire, data in sessionStorage is\ncleared when the page session ends.
\nFrom Web docs | MDN
\n
First what we have to learn about JavaScript on systems like HubSpot, always encapsulate your JavaScript using Anonymous\nFunctions, to avoid global issues.
\n(function () {\n\t// do something\n})();This simple encapsulation example will help you exclude your code from global variables, also will not have to override\nyour or third-party modules on HubSpot.
\nMoreover, it can make your code a bit tiny and clean if you pass some global variables to the function, like next\nexample.
\n(function ($, w, d) {\n\t// do something\n})(jQuery, window, document);In the example above, we pass jQuery, window, and document as variables to the function which allow us to use $\nas\njQuery alias, and use a short name for window and document.
To get the query string component of the URL we need a small helper function like this:
\nfunction GET(param, url) {\n\turl = url ? url : window.location.href;\n\tvar vars = {};\n\turl.replace(window.location.hash, '').replace(/[?&]+([^=&]+)=?([^&]*)?/gi, function (m, key, value) {\n\t\tvars[key] = value !== void 0 ? value : '';\n\t});\n\treturn typeof vars[param] !== 'undefined' ? vars[param] : null;\n}This small function help us to extract query parameters from current URL. And here is how we could use the new GET\nfunction to extract UTMs from URL
var utm_source = GET('utm_source');\nvar utm_campaign = GET('utm_campaign');\nvar utm_content = GET('utm_content');\nvar utm_medium = GET('utm_medium');\nvar utm_term = GET('utm_term');Next we have to add Event Listener to populate forms after they have been rendered on webpage, to achieve that we have\nto check HubSpot Forms API and check event called onFormReady, here is example how to use it:
window.addEventListener('message', function(event) {\n if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {\n console.log(\"Form Ready!\");\n // do something\n }\n});After all, let’s combine all code we have right now to one module:
\n(function ($, w, d, storage, GET) {\n // Creat object and store UTMs\n var utm = {\n source: GET('utm_source'),\n campaign: GET('utm_campaign'),\n content: GET('utm_content'),\n medium: GET('utm_medium'),\n term: GET('utm_term')\n };\n // Check if one or more UTMs present in URL\n if (utm.source || utm.campaign || utm.content || utm.medium || utm.term) {\n storage.setItem('utm_params', JSON.stringify(utm));\n }\n // Check if UTM parameters stored in SessionStorage\n if (typeof storage.getItem('utm_params') === 'string') {\n // Parse UTMs from SessionStorage to JSON\n var storedUTM = JSON.parse(storage.getItem('utm_params'));\n // Add Event Listener for `onFormReady` event\n w.addEventListener('message', function(e) {\n if (e.data.type === 'hsFormCallback' && e.data.eventName === 'onFormReady') {\n // Find all HubSpot forms on the page\n var scope = $(d).find('form[data-form-id]');\n // Check if UTM parameter exists and populate form hidden input fields\n if (storedUTM.source) {\n scope.find('[name=\"utm_source\"]').val(storedUTM.source).change();\n }\n if (storedUTM.campaign) {\n scope.find('[name=\"utm_campaign\"]').val(storedUTM.campaign).change();\n }\n if (storedUTM.content) {\n scope.find('[name=\"utm_content\"]').val(storedUTM.content).change();\n }\n if (storedUTM.medium) {\n scope.find('[name=\"utm_medium\"]').val(storedUTM.medium).change();\n }\n if (storedUTM.term) {\n scope.find('[name=\"utm_term\"]').val(storedUTM.term).change();\n }\n }\n });\n }\n})(jQuery, window, document, sessionStorage, function (param, url) {\n url = url ? url : window.location.href;\n var vars = {};\n url.replace(location.hash, '').replace(/[?&]+([^=&]+)=?([^&]*)?/gi, function (m, key, value) {\n vars[key] = value !== void 0 ? value : '';\n });\n return typeof vars[param] !== 'undefined' ? vars[param] : '';\n})Open Settings > Website(sidebar) > Pages(sidebar) > Templates(tab) > Site footer HTML(section) and paste the final code toSite footer HTML editor between script tags
\n<script>\n(function(){\n // do something\n})();\n</script>![\"HubSpot](\"https://alex.zappa.dev/blog/track-utm-parameters-for-hubspot-forms-like-a-boss/assets/hubsput-site-footer-html-editor.png\")
\nFinal result should look like screenshot
\nThe same method could be used for any websites(Webflow, WordPress, Wix, Static, etc…) who use HubSpot forms.
\nThis is it! Next time, I will cover the way how to store UTM parameters in cookie files.
\n", "date_published": "2021-10-16T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/wp-plugin-elementor-multidomain-support/", "url": "https://alex.zappa.dev/blog/wp-plugin-elementor-multidomain-support/", "title": "WP plugin Elementor Multidomain Support", "content_html": "This plugin will help those who have a Multilanguage website with a multi-domain structure, the plugin will add to\nElementor Page Builder the support for multi-domains structure.
\nThe source code of plugin can be found here https://github.com/reatlat/wp-elementor-multidomain-support
\nPlugin available in WordPress repository, and also\nyou can download it from GitHub
\n", "date_published": "2019-04-21T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/how-to-block-visitors-by-country-with-the-nginx-geoip-module-debianubuntu/", "url": "https://alex.zappa.dev/blog/how-to-block-visitors-by-country-with-the-nginx-geoip-module-debianubuntu/", "title": "How to block visitors by country with the NGINX GeoIP Module (Debian/Ubuntu)", "content_html": "In the last time, I see a lot of attack from botnet with IPs from eastern europe. Several of my projects\naren’t concerned about visitors from those countries, so we just block all of them 🙂
\nThis tutorial explains how to use the GeoIP module with NGINX to block visitors by country. This is made possible by the\nGeoIP database which maps users’ IP addresses to countries. NGINX must be version 1.9.11 or higher, and installed the\nHttpGeoipModule to use the GeoIP database.
\nActually, it’s pretty easy with the latest Nginx release. I use nginx v1.15.5, which I think the last stable one 🙂
\nWe need install 3 packages using this command
\napt-get install nginx-module-geoip geoip-database libgeoip1Perhaps the last one package(libgeoip1) you already have on your server 🙂
\nAfter that we have to include new module and rules to file
\n/etc/nginx/nginx.conf\nAdd before http {} block open:
\n[...]\n # Load GeoIP module\n load_module \"modules/ngx_http_geoip_module.so\";\n[...]Place next block in the http {} block, before any include lines:
\n[...]\n # ISO codes here https://dev.maxmind.com/geoip/legacy/codes/iso3166/\n geoip_country /usr/share/GeoIP/GeoIP.dat;\n map $geoip_country_code $allowed_country {\n default yes;\n RU no;\n UA no;\n BY no;\n }\n[...]Now, this actually doesn’t block any country, it just sets the $allowed_country variable. To actually block countries,\nyou must open your vhost configuration and place the following code in the server {} container (this can go inside and\nalso outside any location {} block):
\n[...]\n if ($allowed_country = no) {\n return 444;\n }\n[...]Definitely, you can have a bit more complicated config structure, but this is just example how it’s work.
\nWe return Error 444 connections closed without response.
\nA non-standard status code used to instruct nginx to close the connection without sending a response to the client, most\ncommonly used to deny malicious or malformed requests.
\nThis status code is not seen by the client, it only appears in nginx log files. More information\non nginx documentation.
\nRun command
\nnginx -tYou have to see this respond
\nnginx: the configuration file /etc/nginx/nginx.conf syntax is ok\nnginx: configuration file /etc/nginx/nginx.conf test is successfulIf your configuration pass the test, restart nginx using systemctl
\nsystemctl restart nginxAdmire your great work ? and test how it’s work with VPN service.
\n", "date_published": "2019-04-14T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/how-remove-dsstore-files-from-a-git-repository/", "url": "https://alex.zappa.dev/blog/how-remove-dsstore-files-from-a-git-repository/", "title": "How remove .DS_Store files from a Git repository?", "content_html": "Mac OS X users can include system .DS_Store files to repository accidentally.
\nFirst, you can check how much .DS_Srore files you have on your work directory. Use fallow command:
\nfind .* -name \".DS_Store\" -type fTo remove all .DS_Store files from git you can use fallowing command:
\nfind .* -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatchAdd to the file .gitignore, which can be found at the top level of your repository (or created if it isn’t there already).
You can do this easily with this command in the top directory:
\necho \"# Apple macOS\\n.DS_Store\\n.DS_Store?\\n*/.DS_Store\" >> .gitignoreThen add and commit your new .gitignore file
git add .gitignore && git commit -m '.DS_Store banished!'echo \"# Apple macOS\\n.DS_Store\\n.DS_Store?\\n*/.DS_Store\" >> ~/.gitignore_globalSet the global git configuration
\ngit config --global core.excludesfile ~/.gitignore_globalAdmire your great work?
\nAlso, check gitignore.io where you can configure your own .gitignore file by few clicks.
Do you have Bitly account? If not signup right now.
\nIf you are looking for start using the Bitly API, you will need your Oauth Access Token. To find your OAuth access token\nnavigate to the hamburger menu button in the top right-hand corner. From the drop down select ‘Settings’ and then\ncontinue to the ‘Advanced Settings’ tab. Look to the bottom under ‘For Developers’ and click on the OAuth hyperlink.
\n![\"Bitly](\"https://alex.zappa.dev/blog/how-do-i-find-my-bitly-oauth-access-token/assets/api-key-with-arrow.png\"){kind=icon}
\nIf you need to generate an access token so you can use our API, you can go to https://bitly.com/a/oauth_apps, click\n“Generic Access Token”,
\n![\"Bitly](\"https://alex.zappa.dev/blog/how-do-i-find-my-bitly-oauth-access-token/assets/bitly-edit-profile-generic-access-token.png\")
\nThen enter your password to create the token, and then copy that token into your code or configuration.
\nAccess tokens don’t expire (though you can expire them manually if yours leaks into the wild), so you can use the single\naccess token as long as you need.
\n", "date_published": "2019-01-19T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/campaign-url-builder-introducing-the-shortcodes/", "url": "https://alex.zappa.dev/blog/campaign-url-builder-introducing-the-shortcodes/", "title": "Campaign URL Builder Introducing the Shortcodes", "content_html": "Today, I’m excited to introduce the first release of shortcodes\nfor Campaign URL Builder plugin.
\nShortcode settings moved to new tab Shortcode on top tabs menu.
\n![\"Campaign](\"https://alex.zappa.dev/blog/campaign-url-builder-introducing-the-shortcodes/assets/campaign-url-builder-shortcode-settings.png\")
\nBy default, shortcodes disabled, also if you use bulletin API key shortcodes also will be disabled.
\nPlease use your API key for Bitly. How to find your Bitly API key, read here.
\n![\"Campaign](\"https://alex.zappa.dev/blog/campaign-url-builder-introducing-the-shortcodes/assets/campaign-url-builder-introducing-the-shortcodes.png\")
\nThis is how default shortcode generate a form on front-end
\nBy default, shortcode styles have very basic styles, you can disable it and create your styles.
\nAttributes is optional and for your choice.
\nThis is stock example, you can replace it like you want.
\nIf you use type=”preset” all fields which already have presented attributes will have read only attribute, and front end users can’t replace it.
The custom_parameters, you can pass only 3 couples. For example my_param=someValue. please separate couples by Vertical Bar.
The attribute hidden can contain the name of fields which you want to hide from front-end. For example, hidden=”utm_source,utm_medium,utm_campaign” in this case 3 input fields will be hidden for users.
Very soon, I will prepare the visual shortcode generator.
\nSimple example
\n[Campaign-URL-Builder]Advanced example
\n[Campaign-URL-Builder wrapper=\"MegaWrapperClass\" wrapper-inline-style=\"background:#ccc;padding:15px;\" form=\"MegaFormClass\" form-inline-style=\"padding:10px; background:#c19393\" campaign_page=\"https://alex.zappa.dev\" utm_source=\"\" utm_medium=\"\" utm_campaign=\"\" utm_term=\"\" utm_content=\"\"]PHP example
\n<?php echo do_shortcode('[Campaign-URL-Builder]'); ?>On Campaign URL Builder plugin, I decided finally move to Bitly API endpoint.
\nSince March 2019, Campaign URL Builder plugin will be turning down support for\ngoo.gl URL shortener. Previously created links will continue to redirect to their intended destination. Please see this\nGoogle blog post for more details.
\n", "date_published": "2019-01-14T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/wp-plugin-campaign-url-builder/", "url": "https://alex.zappa.dev/blog/wp-plugin-campaign-url-builder/", "title": "WP plugin Campaign URL Builder", "content_html": "This plugin allows you to easily add campaign parameters to URLs so you can track Custom Campaigns in Google Analytics.\nAlso, you can easily create short links and easily share it on social networks.
\nFrom WordPress repository
\nOr alternative repository on GitHub, the latest release.
\nA shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed\nfiles or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode =\nshortcut.
\nCampaign URL Builder shortcode allows you to place presented shortlink generator on any page content.
\nComing a soon as possible… ?
\n", "date_published": "2019-01-01T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/gitkraken-cross-platform-editor-for-git-repos/", "url": "https://alex.zappa.dev/blog/gitkraken-cross-platform-editor-for-git-repos/", "title": "GitKraken – cross-platform editor for git repos", "content_html": "I did not use the GUI to work with git. When I was just starting to program, there was nothing interesting for Linux,\nbut theoretically, I was immediately taught to the command line, so no interfaces were required.
\nThen gitg and IDEA came along with its integration with git, and this perfectly\ncomplemented my work on the command line.
\nHowever, I still follow different projects, especially if they are written on the technologies of the front. So, I\nstumbled upon GitKraken. Cross-platform git interface.
\n![\"GitKraken](\"https://alex.zappa.dev/blog/gitkraken-cross-platform-editor-for-git-repos/assets/girkraken-interface.png\")
\nGitKraken is written in electron and uses open\nlibraries: NodeGit, libgit2. This is exactly what allows it to\nsimply support cross-platform.
\n![\"GitKraken](\"https://alex.zappa.dev/blog/gitkraken-cross-platform-editor-for-git-repos/assets/gitkraken-merge.png\")
\nA certain minus of the program is that it is limited free(Freemium). For personal use, with some functional limitations,\nit is completely free, but for professional work you have to take subscription. The cost of a subscription per year is\nnot costly, just $49 per year.
\nRecently found an excellent coupon with a $20Off discount for a one-year subscription. Coupon can be obtained if you\nfollow the link https://www.gitkraken.com/switch, GitKraken thus attracts new subscribers.
\n\n\nBy the way, you can immediately use the switch2018 coupon.
\n
![\"GitKraken](\"https://alex.zappa.dev/blog/gitkraken-cross-platform-editor-for-git-repos/assets/gk-features.png\")
\nThere are many goodies, but the most beautiful thing, in my opinion, is that the merge conflict tools, merge a\nconflicting code very difficult on big projects, and often took a lot of time because something could be overwritten and\na whole code branch was lost.
\nWith GitKraken, this has become elementary, the code highlighting system for changes in the code (DIFF) and the built-in\neditor allow you to make changes to the files on the fly and the build process becomes effortless.
\nThis and many other pleasant things make working with Git using GitKraken very fast and comfortable, and therefore\nincreases productivity.
\nGitKraken also recently introduced a task-tracking system similar to Trello, called GitKraken Glo. Together with the\nGitHub Issues, the Glo can be an excellent task manager. About GitKraken Glo will write a little later.
\nHave fun?
\n", "date_published": "2018-11-09T00:00:00Z" } , { "id": "https://alex.zappa.dev/blog/adding-subscribers-to-a-list-using-mailchimps-api-v3/", "url": "https://alex.zappa.dev/blog/adding-subscribers-to-a-list-using-mailchimps-api-v3/", "title": "Adding subscribers to a list using Mailchimp’s API v3", "content_html": "Based on the List Members Instance docs, the easiest way\nis to use a PUT request which according to the docs either “adds a new list member or updates the member if the email\nalready exists on the list”.
\nFurthermore, API key is definitely not part of\nthe JSON schema and there’s no point in\nincluding it in your JSON\nrequest.
\nAlso, you can use CURLOPT_USERPWD for basic HTTP auth as illustrated in below.
\nI’m using the following function to add and update list members. You may need to include a slightly different set of\nmerge_fields depending on your list parameters.
\n<?php\n/**\n * Adding subscribers to a list using Mailchimp's API v3\n * Based on the List Members Instance docs,\n * @link http://developer.mailchimp.com/documentation/mailchimp/reference/lists/members/\n */\n$data = [\n 'email' => 'angelina.jolie@example.com',\n 'status' => 'subscribed',\n 'firstname' => 'Angelina',\n 'lastname' => 'Jolie'\n];\nsyncMailchimp($data);\nfunction syncMailchimp($data) {\n $apiKey = 'your api key';\n $listId = 'your list id';\n $memberId = md5(strtolower($data['email']));\n $dataCenter = substr($apiKey,strpos($apiKey,'-')+1);\n $url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listId . '/members/' . $memberId;\n $json = json_encode([\n 'email_address' => $data['email'],\n 'status' => $data['status'], // \"subscribed\",\"unsubscribed\",\"cleaned\",\"pending\"\n 'merge_fields' => [\n 'FNAME' => $data['firstname'],\n 'LNAME' => $data['lastname']\n ]\n ]);\n $ch = curl_init($url);\n curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);\n curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);\n curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n curl_setopt($ch, CURLOPT_TIMEOUT, 10);\n curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');\n curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);\n $result = curl_exec($ch);\n $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n curl_close($ch);\n return $httpCode;\n}\n