Posts

Cloudflare Free: Make Your Domain Legit, Fast & Secure — A Practical Checklist

What you get for $0 (high‑impact highlights) • Authoritative DNS with global anycast • Universal SSL/TLS certificates (DV), Auto-renew • CDN caching + Brotli/Gzip compression • DDoS mitigation (L3/4/7) when proxied (orange cloud) • HTTP/2 and HTTP/3 (QUIC) support • WAF Managed Rules (free ruleset) + basic firewall • Bot Fight Mode (basic bot protection) • Bulk & Single Redirects (for www→apex, legacy URLs) • Email Routing (free inbound forwarding) + DMARC Management • DNSSEC (sign your zone) • Transform Rules (add security headers) Step‑by‑step setup (15–30 minutes) 1) Add your domain → change nameservers at your registrar to Cloudflare’s. 2) Proxy only web traffic you want protected/accelerated (orange cloud). Leave mail-related DNS records (MX, mail.) unproxied (gray cloud). 3) Enable DNSSEC → copy DS record into your registrar. 4) SSL/TLS → set mode to “Full (strict)” after you install a valid cert on origin (or use Cloudflare Origin CA). 5) Edge certificates → Universal SSL ON...
Post a Comment
Read more

Mixpanel (JavaScript) — Basic Setup Tutorial

Install npm install mixpanel-browser Create a tiny helper — src/mixpanel.js import mixpanel from "mixpanel-browser"; // Initialize Mixpanel with your project token // Prefer an env var injected at build time (recommended): // mixpanel.init(import.meta.env.VITE_MIXPANEL_TOKEN); mixpanel.init("YOUR_PROJECT_TOKEN_HERE"); // Track a page view export const trackPageView = (page) => {   mixpanel.track("Page View", { page }); }; // Track a custom event export const trackEvent = (event, properties = {}) => {   mixpanel.track(event, properties); }; // Identify a user (call on login/signup) export const identifyUser = (userId) => {   mixpanel.identify(userId); }; export { default } from "mixpanel-browser"; Use it in Svelte/SvelteKit — basic page view <script>   import { onMount } from "svelte";   import { trackPageView } from "../mixpanel"; // adjust the path as needed   onMount(() => {     trackPageView(globalThis.loc...
Post a Comment
Read more

How It Works: daisyUI (Tailwind Component Library & Theming)

What it is daisyUI is a component library on top of Tailwind CSS. It adds prebuilt class names (e.g., `btn`, `card`, `navbar`) and a theme system so you can build UIs quickly without hand‑rolling every utility string. How it works - Extends Tailwind via a plugin that registers component classes and CSS variables. - Themes are design‑token bundles applied via `data-theme` on `<html>` or a wrapper. - Because it compiles through Tailwind, unused styles can still be purged from production builds. Install & Setup (SvelteKit example) npm i -D tailwindcss postcss autoprefixer daisyui npx tailwindcss init -p # tailwind.config.cjs module.exports = {   content: ['./src/**/*.{svelte,html,js,ts}'],   theme: { extend: {} },   plugins: [require('daisyui')],   daisyui: {     themes: ['light','dark','cupcake']  // or true for all built-ins   } } # src/app.css @tailwind base; @tailwind components; @tailwind utilities; Basic usage <!-- Buttons, cards,...
Post a Comment
Read more