DEV Community: Younes Laaroussi

Augmenting Phantom With Auth0 Authority

Younes Laaroussi — Fri, 03 Apr 2026 21:05:39 +0000

Phantom already knew how to listen, see the browser, and act. The real challenge was turning that local agent into a system that could use connected accounts, delegate safely, and expose authority instead of hiding it.

By Younes Laaroussi

Phantom started as a browser-native agent. You talk, it reacts, and the extension takes care of the visible work: reading the page, clicking, scrolling, opening tabs, and moving through the browser with almost no friction. That part was already compelling. What was missing was a trustworthy answer to a more serious question:

What gives it the right to act for the user outside the tab?

That question changes the architecture immediately. A browser extension can hold state, but it is the wrong place to improvise long-lived authority. As soon as Phantom started reaching into Gmail, Calendar, Docs, Sheets, Tasks, and Linear, “the extension has access” stopped sounding clever and started sounding irresponsible.

The project became more interesting when I stopped treating authorization as a detail. Instead of asking how to cram more power into the local agent, I asked how to split the system so the local part remained fast and intimate while the authority layer became visible, scoped, and reviewable.

That is where Auth0 changed the direction of the product. Phantom did not stop being a local browser companion. It stopped pretending that local execution should also be the source of truth for identity, connected accounts, provider access, and approval.

Runtime split. The extension stays local. The hosted companion and gateway become the authority surface. Auth0 owns connected accounts, delegated access, and approval. Providers stay downstream instead of being smuggled into browser state.

Auth0 turned Phantom into a delegated system instead of a clever extension

The first concrete shift was connected accounts. Provider login should not be a side effect of whatever tab the user happens to have open. With Auth0 Token Vault, Phantom can connect Google and Linear through a proper authority layer, which means the browser extension no longer needs to own raw provider credentials or fake its way through session cookies and copied tokens.

The second shift was visibility. The companion is not there just to look nice. It is the surface that tells the truth about the system: which accounts are connected, which actions are pending, which high-risk operations need approval, and what has already happened. That interface matters because it translates invisible authorization state into something a user can actually inspect.

The third shift was approval. Reads can stay lightweight. Mutating actions should not. Creating calendar events, sending mail, and opening real work in external systems should step up into explicit approval instead of feeling like silent model behavior. Auth0 Guardian gives that moment a real boundary.

The product got better when it became less magical and more legible.

Here’s the core of what changed:

Token Vault

Provider authority moved out of the extension.

Google and Linear now sit behind Auth0’s connected-account flow instead of leaking into the browser runtime as an implementation shortcut.

Companion

The system exposes status instead of hiding it in prompts.

Connected accounts, pending approvals, and delegated action history are all visible in one place, which makes the app easier to trust and easier to demo honestly.

Guardian

High-risk actions gained a real consent boundary.

Approval is no longer a narrative flourish. It is an actual gate in the runtime, tied to the user and reflected in the system’s action state.

The interesting part is not that Phantom can act. It is how those actions travel.

Once the agent asks to do something meaningful, the request moves through a chain that makes sense. The extension initiates the action. The gateway performs provider-specific work. Auth0 sits in the middle as the authority layer. The companion shows the resulting action record. If approval is required, that request becomes visible before the mutating step can finish.

That gives Phantom a much stronger operating model than “the AI did something in my browser.” It becomes possible to say exactly what happened, where it happened, and why the system was allowed to proceed.

Delegated action flow. The browser agent initiates work locally. The hosted gateway handles provider calls. Results return as action records rather than disappearing into conversational state.

Authority lanes. Phantom remains the local interface, but Auth0 becomes the durable authority layer between the agent and downstream providers.

Step-up approval is what makes the product feel responsible

A useful agent should not force the same friction on every action, but it should absolutely create friction when the user’s behalf is being asserted in a consequential way. That is the point where Auth0 stops being a backend convenience and becomes product substance.

The approval loop matters because it is easy to explain:

The user asks for an action.
Phantom prepares it.
Auth0 requests approval.
The user approves on their own device.
The action completes.
The companion records the outcome.

That sequence is a lot less flashy than an unconstrained agent, but it is much closer to something people could actually live with.

Approval loop. The system becomes more trustworthy when the approval step is visible, attributable, and tied to the final action record instead of being treated like invisible middleware.

Why this architecture feels right

What I like most about the final shape is that it keeps both halves of the idea intact. Phantom still feels like a local companion. It speaks, watches, and acts in the browser without turning into a remote dashboard. But the authority behind it is no longer improvised. Identity, connected accounts, delegated access, and approval now live in the right place.

That split is the real product.

Local execution gives the system immediacy. Auth0 gives it discipline. One without the other would either feel weak or unsafe. Together they make a browser agent that can do real work without pretending that permission is somebody else’s problem.

Phantom is still the same spirit at the edge of the browser. The difference is that now it has a visible authority model behind it. That is what turned it from a neat interaction demo into a system I can explain with a straight face.

Live site: https://phantom-auth0-server-pio3n3nsna-uc.a.run.app
Companion: https://phantom-auth0-server-pio3n3nsna-uc.a.run.app/companion
Source: https://github.com/youneslaaroussi/phantom-auth0

I Built a Browser AI Agent in One Session — Here's What Happened

Younes Laaroussi — Sat, 14 Mar 2026 18:21:02 +0000

This article was created for the purposes of entering the Gemini Live Agent Challenge hackathon. #GeminiLiveAgentChallenge

What if your browser had a friend? Not a chatbot. Not an assistant. A little spirit that floats next to your cursor, listens to your voice, watches your screen, and just... does things for you.

That's Phantom. And the weirdest part isn't what it does — it's how it got built.

The premise was simple

I wanted to talk to my browser. Not type commands into a terminal. Not click through menus. Just say "open YouTube and search for lo-fi music" and have it happen.

The Gemini Live API made this possible — real-time bidirectional audio over WebSockets, with function calling baked in. The model can listen, talk back, AND execute tools, all in the same stream. No polling. No turn-based nonsense. Just a live conversation where the AI can actually do things.

The part nobody talks about: building speed

Here's where it gets meta. I used Gemini as my coding agent throughout the entire build. Not just for boilerplate — for architecture decisions, debugging WebSocket frame formats, generating deployment scripts, even creating the mascot art.

The whole project — Chrome extension, Cloud Run proxy, landing page, 8 persona system, sound design, animated sprites, onboarding flow, trace debugger — was built in a single extended session. One human, one AI, rapid-fire iteration.

How it actually works

Phantom is a Chrome extension (built with Plasmo) that opens a side panel. When you tap the mic button, it:

Opens a WebSocket to the Gemini Live API (either directly with your key, or through our Cloud Run proxy)
Streams your microphone audio as PCM at 16kHz
Receives spoken responses AND function calls in the same stream
Executes browser tools — clicking, typing, scrolling, navigating tabs
Optionally streams your screen at 1 FPS so the model can see what you see

The key insight: Gemini Live's realtimeInput lets you send audio and video frames simultaneously. The model processes them together. So when you say "click the blue button," it can actually see the blue button in the video stream and figure out which element you mean.

The proxy problem

Free API keys have rate limits. We rotate through multiple keys on the server side, and the Cloud Run proxy handles the WebSocket relay. The client never sees the API key.

One painful discovery: when proxying WebSocket frames through Node.js, the ws library's default maxPayload silently drops large messages. Our 100KB JPEG frames were vanishing. A one-line fix (maxPayload: 10 * 1024 * 1024) solved hours of "why is the model hallucinating what's on screen."

The tool system

The model has access to 14 browser tools via Gemini's function calling:

Navigation: openTab, getTabs, switchTab, getPageTitle
Interaction: clickOn, typeInto, pressKey, highlightElement
Inspection: getAccessibilitySnapshot, findElements
Movement: scrollDown, scrollUp, scrollToElement

Each tool plays its own sound effect (generated via ElevenLabs' SFX API) — a soft whoosh for navigation, crystal clicks for typing, gentle chimes for success.

Privacy Shield: What the AI Never Sees

Here's the uncomfortable truth about screen-sharing AI agents: they see everything. Your passwords. Your credit cards. Your API keys. Every token, every secret, every SSN on screen — all of it gets sent as JPEG frames to a remote model.

We built Privacy Shield to fix this.

How it works

Before every single frame capture (once per second), Phantom injects a script into the active page that:

Scans the DOM for sensitive inputs — password fields, credit card inputs, anything with autocomplete="cc-number", inputs named ssn, token, api_key, etc.
Scans visible text for PII patterns — credit card numbers, Social Security numbers, API keys (Google, OpenAI, AWS, ElevenLabs), bearer tokens, private keys
Applies a CSS blur to every match
Captures the screenshot — the JPEG now has sensitive content blurred
Removes the blur instantly — the user never sees it (~30ms round trip)

The result: Gemini sees your screen, but never sees your secrets.

What it catches

Category	Pattern
Passwords	All `type="password"` inputs, login forms
Credit cards	`4111-1111-1111-1111` style numbers
SSNs	`123-45-6789` format
API keys	Google (`AIza...`), OpenAI (`sk-...`), AWS (`AKIA...`)
Tokens	Bearer tokens, private keys, generic secrets
Form context	Any input inside a `/login` or `/payment` form action

Zero latency, zero dependencies

No API calls. No cloud services. No model inference. Pure DOM analysis + regex, running in under 5ms per frame. For production, this could be augmented with Google Cloud DLP's 150+ infoType detectors — but for real-time 1 FPS streaming, the deterministic approach is faster and more reliable.

Why this matters

Every screen-sharing AI tool should have this. Most don't. We tested Google Cloud DLP — it's thorough but takes ~2 seconds per request. At 1 FPS, that's unusable. Privacy Shield runs in 5ms and catches the patterns that matter most in a browser context.

This isn't a feature. It's a responsibility.

The mascot changed everything

Halfway through the build, I had a working agent. It could hear, see, and act. But it felt like a tool. Functional. Sterile. The kind of thing you demo once and forget.

So I asked Gemini to generate pixel art mascots.

I fed it a prompt for a "one-eyed spirit wisp, ethereal blue-purple glow, 64x64 pixel art" and got back something with genuine character. A little floating creature with a single curious eye. It looked like it belonged in a SNES game.

Then I went further. I asked for variations: the same wisp wearing a detective hat, a crown, nerdy glasses, a pirate hat, headphones, a wizard hat, and tiny devil horns. Same style, same palette, all consistent. Gemini's image generation (via gemini-2.5-flash-image) kept the character recognizable across every variation.

These became personas — not just cosmetic skins, but full personality packages:

Persona	Voice	Vibe
Phantom	Kore	Friendly, curious spirit
Sleuth	Charon	Noir detective, dramatic
Regent	Orus	Regal, dignified
Byte	Puck	Nerdy, excitable
Captain	Fenrir	Pirate, adventurous
Vibe	Aoede	Chill, laid back
Arcane	Zephyr	Mystical wizard
Gremlin	Leda	Chaotic, mischievous

Each persona has its own Gemini voice, mascot image, and system prompt that shapes how the agent talks. When you pick "Captain," the agent calls websites "islands" and says "aye aye!" When you pick "Gremlin," it's gleefully chaotic but still gets the job done.

Users pick their persona during onboarding. It's the second screen they see, right after "Hey, I'm Phantom." Judges remember characters. They forget features.

The meta layer: AI building AI

The most honest thing I can say about this project is that it was a collaboration between a human with ideas and an AI with execution speed.

Here's what Gemini specifically helped build:

Architecture: The WebSocket proxy, tool system, and session management were pair-programmed with a coding agent
Mascot art: All 9 character variations generated via gemini-2.5-flash-image with img2img — I provided the base wisp and asked for costume variations
Sprite animations: 4 spritesheets (idle, listening, talking, thinking) generated from the same base character
Debugging: When the vision proxy wasn't working, the agent wrote a direct-vs-proxy comparison test that isolated the maxPayload bug
Deployment: The Cloud Run setup, Artifact Registry config, Secret Manager integration, and service account creation were all scripted live

The sound effects came from ElevenLabs' SFX API — text descriptions like "soft magical chime, fairy-like sparkle, UI connect sound" turned into actual audio files that now play when you connect, toggle vision, or execute a tool.

What took days in previous projects took hours here. Not because the code was simpler, but because the iteration loop was: idea → implement → test → fix → next, with no context-switching overhead.

What I learned

Character sells. A pixel art wisp with a detective hat is more memorable than any feature list.
Sound matters. A tiny chime when you connect makes the whole experience feel 10x more polished.
The Live API is undersold. Bidirectional audio + function calling + video input in one WebSocket is genuinely new. Most demos treat it as a voice chatbot. It's actually an agent runtime.
AI-assisted development isn't cheating — it's the new normal. The human still makes every creative and architectural decision. The AI just removes the friction between thinking and doing.

Try it

Phantom is open source. Install the Chrome extension, pick a persona, and start talking to your browser.

GitHub: github.com/youneslaaroussi/Phantom
Live site: phantom-server-pio3n3nsna-uc.a.run.app

Built for the Gemini Live Agent Challenge. #GeminiLiveAgentChallenge

BlockArt: Bringing GPT-4o Image Generation to Storyblok’s CMS

Younes Laaroussi — Sun, 29 Jun 2025 19:27:49 +0000

This is a submission for the Storyblok Challenge

What I Built

Meet BlockArt — an AI-powered image editing plugin that turns Storyblok into your creative playground.

No more jumping between tools or begging designers for assets. With BlockArt, your CMS becomes your studio. Generate images from text. Mask and edit like a pro. Inpaint with surgical precision. Drop in a wild prompt and watch it stream in, pixel by pixel, right inside Storyblok.

It’s not just about playing with images. This thing is smart. It writes your alt-texts, enhances your prompts, and syncs directly with Storyblok’s asset system.

Core Capabilities

🎨 AI-Powered Image Editing: Full image transformation and precise inpainting using OpenAI's GPT-4o Responses API
🖼️ Text-to-Image Generation: Create entirely new images from text descriptions
🎭 Advanced Mask Editor: Pixel-perfect selection tools for targeted editing
📝 Smart Prompt Enhancement: Leverage Storyblok's Prompt AI (Beta) for intelligent suggestion improvements
♿ Automatic Accessibility: AI-generated alt-text for SEO and accessibility compliance
📚 Version History: Track and revert between different edits
🔄 Seamless Asset Management: Complete integration with Storyblok's asset pipeline
🌍 Multi-Region Support: Works with all Storyblok regions (US, EU, CA, AP, CN)

Demo

youneslaaroussi / blockart

Generate and Edit Storyblok Assets with AI

BlockArt Storyblok Field Plugin

A powerful Storyblok field plugin for AI-powered image editing and asset management.

🎥 Watch the Videos

🚀 Demo Video

⚙️ Setup Instructions

Prerequisites

Before getting started, make sure you have the following installed and set up:

Node.js (version 16 or higher)
pnpm package manager
Storyblok account with at least one space
Git for version control
OpenAI account with billing enabled and an API key

Quick Setup

Option 1: Direct Plugin Installation (Recommended)

The easiest way to get started is to use our pre-built plugin file:

Step	Screenshot	Instructions
1		Go to My Plugins in your Storyblok account and click New Field-type
2		Enter a name for your plugin (e.g., "my-blockart-plugin") and click Save
3		Copy the contents of `./build_plugin.js` from this repository and paste it into the code editor, then click Save and Publish

Option 2: Build from Source

If you prefer to build the plugin…

View on GitHub

Here’s how it goes: you open your Storyblok editor, drop in the BlockArt field, and boom — instant image playground. You can start fresh with a text prompt or pick an existing asset. Want to tweak an image? Choose full edit or inpainting mode. Our built-in mask editor lets you paint over the part you want to change. Then feed it a smart prompt (manually or get help from Storyblok’s Prompt AI), and let GPT-4o work its magic.

As the image streams in, you watch it evolve in real-time. Once happy, you hit save and the image is stored back in your Storyblok assets, complete with metadata, alt-text, and version history. It’s buttery-smooth.

See the Github README or watch this Vimeo to setup BlockArt.

Storyblok Space: https://app.storyblok.com/#/me/spaces/285338869245722/

(note that this link is not publicly accessible)

Live Website that uses assets created using Storyblok: https://main.d1uj1niyggenq6.amplifyapp.com/landing?_storyblok_published=61822370039376
(but please note that the actual deliverable of my submission is the plugin itself, which is INSIDE the storyblok editor, and unfortunately spaces cannot be shared publicly so please setup the plugin within your own editor using instructions above)

And here is the repo with the demo space code: https://github.com/youneslaaroussi/blockart-demo-space

How I Used Storyblok

BlockArt demonstrates deep integration with Storyblok's ecosystem through multiple API layers and features:

Local Testing with Storyblok CLI

To rapidly prototype and test BlockArt in a realistic environment, I used the Storyblok CLI v4 to spin up a full-featured local demo space. This allowed me to:

Scaffold a clean Storyblok space structure with demo components
Test plugin integration directly within simulated content blocks
Validate asset upload workflows and Prompt AI interactions without polluting a production space
Iterate faster by decoupling plugin development from live projects
Run a TLS Proxy to directly serve localhost and use it in Storyblok editor

This local CLI-powered setup was instrumental in refining the user experience and debugging complex edge cases during development.

🔧 Management API Mastery

Complete Asset Lifecycle: From signed upload requests to S3 storage to asset finalization
Multi-Region Architecture: Supports all Storyblok regions with dynamic API endpoint resolution
Advanced Asset Management: Upload, update, delete, and retrieve operations with comprehensive error handling
Metadata Management: Automatic alt-text and title updates for improved SEO and accessibility

🎨 Field Plugin SDK Integration

Native UI Integration: Seamlessly blends with Storyblok's interface design system
Real-time Content Sync: Bidirectional data flow between plugin and Storyblok
Asset Browser Integration: Direct access to existing media library
Plugin State Management: Persistent storage of edit history and user preferences

🤖 Storyblok Prompt AI (Beta) Integration

The plugin leverages Storyblok's cutting-edge Prompt AI for enhanced user experience:

// Example AI enhancement implementation
const enhancePrompt = async (action, originalPrompt) => {
  return await promptAIAction({
    action: action, // 'rephrase', 'extend', 'simplify', etc.
    text: originalPrompt,
    textLength: '160',
    basedOnCurrentStory: true,
  });
};

Supported Enhancement Actions:

prompt: Generate creative suggestions
rephrase: Improve clarity and effectiveness
extend: Add rich descriptive details
simplify: Make prompts more accessible
adjust-tone: Modify style and mood
fix_spelling_and_grammar: Ensure quality

Frontend & Core

React 18.3 with TypeScript for robust type safety
Vite 5.4 for lightning-fast development and optimized builds
Storyblok Field Plugin SDK 1.6 for seamless CMS integration
Lucide React for consistent iconography

AI & Image Processing

OpenAI SDK 5.5 with GPT-4o Responses API for advanced image editing
Custom Image Processing Pipeline for format conversion and optimization
Real-time Streaming for progressive image generation feedback

Testing & Quality

Vitest for comprehensive unit testing
Testing Library for component testing
ESLint with TypeScript rules for code quality

AI Integration

BlockArt pushes the boundaries of AI integration within Storyblok, creating a seamless bridge between creative vision and technical execution:

🚀 Cutting-Edge AI Models

OpenAI GPT-4o Responses API: Leverages the latest multimodal capabilities for superior image understanding and generation
Advanced Image Processing: Supports both full image editing and precise inpainting with mask-based editing
Streaming Generation: Real-time progress updates with partial image previews for enhanced user experience

🎯 Intelligent Workflow Automation

Context-Aware Processing: AI understands both image content and user intent for optimal results
Automatic Alt-Text Generation: Uses vision models to create descriptive, SEO-friendly alt attributes
Smart Prompt Enhancement: Integrates with Storyblok's Prompt AI to improve user prompts automatically
Version Control Intelligence: Tracks editing decisions and suggests improvements based on history

🔄 Seamless Content Integration

The AI layer doesn't just generate images—it creates content that's immediately ready for production:

// Example of the complete AI-to-Storyblok pipeline
const processAndSaveImage = async (prompt: string, originalImage: string) => {
  // 1. AI processes the image
  const editedImage = await processImageWithStreaming(originalImage, prompt);

  // 2. AI generates accessible alt-text
  const altText = await generateAltText(editedImage);

  // 3. Save to Storyblok with metadata
  const asset = await storyblokAPI.uploadAsset(
    editedImage, 
    generateFilename(originalFilename, prompt),
    altText,
    `AI-edited: ${prompt}`
  );

  return asset;
};

📈 Performance Optimizations

Streaming Updates: Users see progress in real-time, improving perceived performance
Intelligent Caching: Reduces API calls while maintaining data freshness
Adaptive Quality: Balances generation speed with output quality based on use case
Error Recovery: Graceful handling of API failures with automatic retry mechanisms

Learnings and Takeaways

Building BlockArt has been an incredible journey that pushed the boundaries of what's possible when combining AI with modern CMS platforms.

🏆 What I'm Proud Of

Technical Innovation: Successfully integrated OpenAI's newest GPT-4o Responses API with Storyblok's Management API, creating a seamless AI-powered workflow that feels native to the platform.

User Experience Design: Created an intuitive multi-step interface that makes complex AI image editing accessible to content creators without technical backgrounds. The streaming updates and real-time previews provide immediate feedback that enhances the creative process.

Comprehensive Integration: Went beyond basic functionality to implement a complete asset management pipeline, version history, accessibility features, and multi-region support—making it production-ready for enterprise use.

Accessibility First: Automatic alt-text generation ensures every AI-created image meets accessibility standards, something often overlooked in AI image tools.

🔧 Technical Challenges Overcome

Complex Asset Pipeline: Implementing Storyblok's three-stage upload process (signed response → S3 upload → finalization) required deep understanding of cloud storage patterns and error handling.

AI Model Integration: Working with OpenAI's latest Responses API meant adapting to cutting-edge technology with limited documentation, requiring extensive experimentation and optimization.

Real-time Streaming: Building a responsive UI that handles streaming image generation while maintaining state consistency across React components was technically challenging but crucial for user experience.

Cross-Browser Compatibility: Ensuring the plugin works consistently across different browsers, especially handling canvas operations and file uploads in various environments.

💡 Key Insights

AI + CMS Synergy: The combination of AI capabilities with robust content management creates exponentially more value than either technology alone. Users can generate, edit, and immediately deploy content in a single workflow.

Progressive Enhancement: Starting with a solid foundation (Storyblok's infrastructure) and adding AI as an enhancement layer proved more successful than building AI-first and trying to integrate CMS features.

User-Centric AI: The most impactful AI features aren't the most technically impressive ones—they're the ones that solve real user problems, like automatic alt-text generation and prompt enhancement.

Developer Experience Matters: Storyblok's excellent documentation, SDK, and developer tools made it possible to focus on innovation rather than fighting with APIs.

🚀 Future Vision

This project demonstrates the incredible potential of AI-augmented content management. I envision a future where:

Content creators can describe their vision in natural language and see it instantly realized
Accessibility becomes automatic rather than an afterthought
Creative workflows are enhanced, not replaced, by AI assistance
CMS platforms become intelligent creative partners

BlockArt is just the beginning of this transformation, and I'm excited to continue pushing the boundaries of what's possible when human creativity meets artificial intelligence within powerful platforms like Storyblok.

Built with ❤️ for the Storyblok Developer Challenge

CC-my-Jira: Agentic JIRA Ticketing via Postmark

Younes Laaroussi — Sat, 07 Jun 2025 16:16:57 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

view highres architectural diagram

I built CCMyJira, an AI-powered, multi-tenant SaaS platform that intelligently transforms emails into structured, actionable JIRA tickets. It bridges the communication gap between email-centric clients/users and JIRA-focused development teams.

The Core Problem: Critical requests, bug reports, and feedback in emails often get lost, misinterpreted, or require manual, error-prone transcription into JIRA, leading to inefficiencies and delays.

CCMyJira's Solution – Key Capabilities:

Capability	Description
🧠 AI Agents	Leverages GPT-4.1 to understand the content, intent, and technical nuances of incoming emails.
🎟️ Intelligent Ticket Management	Searches existing JIRA issues to prevent duplicates; creates new tickets or updates existing ones with information from follow-up emails.
📎 Seamless Attachment Handling	Automatically extracts and uploads all email attachments (documents, images, logs) and embedded images to the relevant JIRA ticket, preserving crucial context.
🎯 Smart Assignee Suggestions	AI considers team workload, skills (from JIRA profiles/roles), and email content (like @mentions) to suggest the most appropriate assignee.
🏢 Multi-Tenant SaaS Architecture	Supports multiple organizations with Atlassian OAuth for self-serve onboarding, custom domain verification (using Postmark for verification emails), and data isolation via Supabase Row Level Security (RLS).
⚡ Reliable & Scalable Email Ingestion (via Postmark)	Postmark webhooks receive an immediate `200 OK` (~50ms). Intensive AI/JIRA processing (15-60+ secs) is handled by background workers (BullMQ/Redis), preventing Postmark timeouts and ensuring every email is reliably captured and processed.
📧 Robust Email Handling (Postmark)	Inbound Parsing: All emails (to `hello@send.ccmyjira.com`) are parsed by Postmark, providing rich JSON. Outbound Delivery: Postmark sends critical operational emails, like domain verifications.

Essentially, CCMyJira acts as an intelligent automation layer, ensuring every important email becomes an actionable JIRA item, with Postmark as the crucial email gateway.

Demo

Watch the Video Demo:

Experience CCMyJira live: ccmyjira.com

We offer two ways to explore the platform's capabilities:

1. 🚀 Instant Demo (No Atlassian Account Needed)

This mode lets you see the core email-to-ticket functionality in action immediately using a shared demo JIRA board.

Step	Action
1	Go to ccmyjira.com
2	During the onboarding, click "Use Demo Account".
3	Send an email from any email address to `hello@send.ccmyjira.com`. Try including a subject like "Urgent Bug: Website Checkout Broken," details in the body, and perhaps an inline image or an attachment.
4	Observe the demo JIRA board UI on the CCMyJira website. Your new ticket, along with any attachments, should appear live within a minute or two as the AI processes it.

What you'll see:
An email transformed into a JIRA ticket in a Kanban view:

(note that in demo mode, you can't directly access the Jira links because they can't be public, therefore I built a custom API to fetch Jira tickets and view attachments)

2. 🔒 Full SaaS Experience (With Your Atlassian Account)

This mode demonstrates the complete multi-tenant SaaS flow, connecting CCMyJira to your own Atlassian JIRA instance.

Step	Action
1	Go to ccmyjira.com
2	Click "Login with Atlassian" and authenticate with your Atlassian account.
3	Follow the onboarding steps to create an organization.
4	Verify your company domain. Note: Public email providers (like gmail.com) cannot be used for verified routing to your private JIRA for security reasons; a custom domain is required. Postmark will send a verification email to an admin address at your domain.
5	Configure your JIRA board details (target project, etc.).
6	Send an email from your verified company domain to `hello@send.ccmyjira.com`. This address can also be CC'd or BCC'd.
7	Watch as the AI processes the email and creates/updates a ticket directly in your JIRA project, also reflected in the CCMyJira dashboard.

Kanban View within CCMyJira:
Once tickets are processed, you can view them in JIRA or the Kanban view:

Testing Tips:

Complex Emails: Try sending emails with mixed content: inline images, multiple attachments (PDFs, logs, text files), HTML formatting, and long discussion threads.
Keywords: Use keywords that might imply priority (e.g., "urgent," "critical") or ticket type (e.g., "bug report," "feature request").
Mentions: If you've set up users in your JIRA project, try @mentioning a user in the email body.
Follow-ups: Reply to the original email thread (ensuring hello@send.ccmyjira.com is a recipient). The AI should identify it as a follow-up and update the existing JIRA ticket.

Code Repository

The project is split into two main repositories:

Server-Side Application (Backend):
- This repository contains all the NestJS backend logic, including the AI agent, JIRA integration, Postmark webhook handling, multi-tenancy features, queue management, and API endpoints. The comprehensive documentation (/docs folder) detailing the architecture and features resides here.

youneslaaroussi / ccmyjira-server

AI-Powered Email-to-JIRA SaaS (Postmark Challenge)

🏆 Built for Postmark Challenge | Live Demo | API Docs | Challenge Link

🏗️ Architecture

🚀 Try It Now (Live Demo)

🟢 No Atlassian Account Needed (Demo Mode)

Step	Action
1	Go to ccmyjira.com
2	Click "Use Demo Account" during onboarding
3	Send an email from any email address to `hello@send.ccmyjira.com`
4	See the ticket and attachments appear live in the demo JIRA board UI

🔒 With Your Atlassian Account (Full SaaS Flow)

Step	Action
1	Go to ccmyjira.com
2	Authenticate with your Atlassian account
3	Verify your company domain (no public email providers like gmail)
4	Configure your JIRA board (project, users, sprints)
5	Send an email from your verified domain to `hello@send.ccmyjira.com` (or use forwarding/CC/reply-all)
6	Watch tickets and attachments appear live in your JIRA board UI

Note: For authenticated orgs, only emails sent from your verified domain are accepted and routed…

View on GitHub

Website & Dashboard (Frontend):
- This repository contains the Next.js/React frontend application, which includes the user onboarding, dashboard for viewing processed tickets, organization management, and domain verification UI.

youneslaaroussi / ccmyjira-site

https://ccmyjira.com

CCMyJIRA - Professional JIRA Dashboard

A modern, professional dashboard for real-time JIRA ticket monitoring, team workload management, and system performance tracking.

🛠 Prerequisites

Bun (latest version)
JIRA instance with API access
Valid JIRA project key

🚀 Installation

Clone the repository:

git clone https://github.com/youneslaaroussi/ccmyjira-site.git
cd ccmyjira-site

Install dependencies:

bun install

Set up environment variables:

cp env.example .env.local

Configure your .env.local:

NEXT_PUBLIC_API_BASE_URL=http://localhost:3001

Start the development server:

bun dev

Open http://localhost:3000 in your browser.

✨ Features Overview

Feature	Description
Enhanced Kanban Board	Interactive ticket management with drag-and-drop, filtering, and real-time updates
Team Workload Management	Visual representation of team capacity and task distribution
Real-time Metrics	Live dashboard with KPIs, sprint progress, and performance tracking
Modern UI/UX	Responsive design with dark mode, animations, and professional styling
Organization Management	Multi-organization support with domain verification
Attachment Support	View and download JIRA ticket attachments directly from the dashboard
Advanced Filtering	Search and filter tickets by

…

View on GitHub

How I Built It

view highres smart assignment diagram

Building CCMyJira was an exploration into creating a deeply integrated system where email, AI, and project management converge to streamline workflows. The mission was clear: make emails first-class citizens in JIRA, intelligently.

The Core Idea: Intelligent Email-to-JIRA Automation

The project stemmed from the universal challenge of critical information shared via email often being siloed or requiring tedious manual effort to integrate into project management tools like JIRA. I aimed to not just automate this but to infuse it with intelligence to understand context, prevent redundancy, and ensure tasks are actionable.

The agent has access to some of these tools:

{
  name: 'get_current_period',
  description: 'Get current date and time information'
}

{
  name: 'read_jira_tickets',
  description: 'Read JIRA tickets from a specific time period',
  parameters: {
    days: 'Number of days to look back',
    status: 'Filter by ticket status',
    assignee: 'Filter by assignee',
    searchText: 'Search in summary/description'
  }
}

{
  name: 'create_jira_ticket',
  description: 'Create a new JIRA ticket. Email attachments and embedded images are automatically included.',
  parameters: {
    summary: 'Ticket title/summary',
    description: 'Detailed description. Email context will be automatically appended.',
    issueType: 'Bug, Story, Task, Epic, etc.',
    priority: 'Highest, High, Medium, Low',
    assignee: 'Username or email to assign',
    labels: 'Array of labels to add',
    components: 'Array of component names'
  }
}

{
  name: 'modify_jira_ticket',
  description: 'Modify an existing JIRA ticket. New email attachments and embedded images are automatically added.',
  parameters: {
    ticketKey: 'JIRA ticket key (e.g., PROJ-123)',
    summary: 'New summary (optional)',
    status: 'New status (optional)',
    assignee: 'New assignee (optional)',
    comment: 'Add comment. Email context will be automatically appended. (optional)'
  }
}

Leveraging Postmark for Robust Email Processing

Postmark was instrumental, serving as the reliable and developer-friendly gateway for all email interactions.

Inbound Email Parsing – The Heart of the System: CCMyJira's ability to process emails begins with Postmark. Emails sent to hello@send.ccmyjira.com are received and meticulously parsed by Postmark. The resulting rich JSON payload, complete with attachments, HTML/text bodies, and headers, is then dispatched via webhook to our NestJS API endpoint (/webhooks/postmark). This structured data is the fuel for our AI engine.
Critical: Immediate Webhook Response & Asynchronous Processing: A cornerstone of the architecture (detailed in README.md and docs/01-architecture.md) is the immediate 200 OK response (target <100ms) to Postmark webhooks. The intensive AI processing and JIRA API communications (often 15-60+ seconds) are deferred to background jobs managed by BullMQ and Redis. This design is vital as it prevents Postmark webhook timeouts, ensuring no email is lost and maintaining system responsiveness and scalability.
Outbound Email for Operational Integrity: Beyond inbound, Postmark handles essential outbound communications. Most significantly, it sends domain verification emails (as outlined in docs/15-domain-verification-guide.md). This Postmark-powered step is crucial for the multi-tenant security model, allowing organizations to securely link their email domains to their JIRA instances.
Professional Presence with Custom Domains: Postmark facilitates the use of CCMyJira's own inbound domain (send.ccmyjira.com) and a verified sender domain (noreply@ccmyjira.com), enhancing trust and brand consistency for users.

Postmark's reliability, comprehensive API, and clear documentation for both inbound parsing and outbound sending were pivotal, allowing me to focus on the application's core intelligence.

Tech Stack

Category	Technology	Purpose
Backend
Framework	NestJS (TypeScript)	Modular, scalable, and maintainable API development.
AI	OpenAI GPT-4o SDK	Email analysis, intelligent ticket creation, smart assignments.
Queue System	BullMQ & Redis	Managing background jobs for AI processing & JIRA interactions, ensuring webhook responsiveness.
Database	Supabase (PostgreSQL)	Multi-tenant data storage (users, orgs, domain configs, JIRA settings) with Row Level Security for tenant isolation.
Containerization	Docker & Docker Compose	Consistent development, testing, and production environments.
Frontend
Framework	Next.js & React	Modern, interactive UI for dashboards, onboarding, and configuration (details in `docs/16-frontend-integration-guide.md`).
Deployment & Infrastructure
Hosting	AWS EC2 (t3.medium)	Application and worker hosting.
Load Balancing	AWS Application Load Balancer (ALB)	SSL termination and request distribution.
DNS	AWS Route 53	Managing `api.ccmyjira.com` and `ccmyjira.com`.
Managed Redis	Upstash Redis	Queue backend for BullMQ in production.

Key Implementation Details & Architectural Decisions

CCMyJira's effectiveness stems from several core architectural choices:

Postmark-Driven Asynchronous Processing: To ensure reliability with Postmark, incoming emails trigger a rapid 200 OK response. The actual complex processing (AI analysis, JIRA updates) is then handled by a robust background queue system (BullMQ/Redis). This prevents Postmark webhook timeouts and allows the system to gracefully manage email bursts.
Sophisticated AI Agent (docs/04-ai-agent.md):
- Iterative Intelligence: Uses multi-step GPT-4o conversations to understand email context deeply, search JIRA for existing issues (preventing duplicates), and then decide on the best action (create, update, comment).
- Comprehensive Data Handling: Processes and attaches all email content, including files and embedded images, directly to JIRA tickets.
- High-Quality Ticket Creation: AI is guided to create well-structured, professional JIRA tickets (see docs/improved-ticket-example.md) that are immediately actionable, a significant step up from raw email dumps.
- Smart Assignments: Suggests appropriate JIRA users for tickets based on workload, skills, and email content (like @mentions).
**Secure & Scalable Multi-Tenancy (docs/13-multi-tenant-architecture.md):
- Seamless Onboarding: Users connect via Atlassian OAuth, securely linking their JIRA instances.
- Postmark-Secured Domain Verification: Organizations verify domain ownership using a Postmark-sent confirmation email. Only emails from verified domains are routed to a tenant's JIRA, ensuring emails go to the correct organization.
- Data Isolation: Supabase RLS strictly separates each organization's data.
- Targeted Email Routing: A dedicated service maps incoming email domains to the correct tenant, applying their specific JIRA and AI settings.
Production-Ready Design:
- Comprehensive Documentation: The project is backed by extensive documentation covering architecture, setup, and APIs.
- Dockerized: For consistent environments from development to production.
- Large Payload Support: Engineered to handle large emails with multiple attachments (up to 10MB).
- Modular & API-First: Promotes maintainability and clear separation of concerns.

Experience with Postmark

My experience integrating Postmark was exceptionally positive and fundamental to CCMyJira's success. Postmark effectively solved the critical first step: getting email content into the application reliably and in a structured format.

Developer-Friendly Inbound Parsing: Postmark's webhook setup was straightforward, and the parsed email JSON was rich and easy to work with. This was the primary Postmark feature utilized and it formed the very foundation of the application.
Reliability & Peace of Mind: Knowing Postmark handles the complexities of email reception and parsing (with webhook retries) allowed me to focus on the core AI and JIRA integration logic.
Excellent Documentation: Clear guides and API references accelerated development significantly.
Efficient Testing: The ability to quickly test the inbound flow was invaluable for iteration.
Built for Scale: The webhook architecture, paired with our asynchronous processing, ensures the system is ready for high email volumes.

Postmark's inbound parsing was not just a feature used; it was the enabling technology that made CCMyJira feasible. It elegantly abstracts the complexities of email handling, empowering developers to build innovative email-driven applications like this one.

Developed by Younes Laaroussi.

MailBudget — From Messy Receipts to Meaningful Money Insights

Younes Laaroussi — Sat, 31 May 2025 14:03:57 +0000

Submission for the Postmark Challenge: Inbox Innovators

🏗️ What I Built

MailBudget is a proactive, modular finance assistant that leverages Postmark's robust inbound email parsing capabilities to automate financial insights and inbox cleanup.

At its core, MailBudget functions as a "hub-and-spoke" system—Postmark serves as the universal inbox gateway, while lightweight plug-in adapters (such as Gmail Cleanup) can be added or removed without impacting the core application.

Security (DKIM/SPF) validation happens upfront, AI-driven insights are generated downstream, and structured data is neatly stored for easy access.

With MailBudget, email receipts become actionable data, spending spikes are proactively identified, and your inbox stays tidy—all without manual intervention

🎬 Demo

⚠️ Warning: Any data you share will appear in a public database, so please don't share any receipts with confidential information. If you do accidentally send something, please reach out to me and I'll delete it.

Forward a Receipt
- Send any email receipt or invoice to the following address: 3728c7c80a75490dd061ca9611e2ba2e@inbound.postmarkapp.com
Watch Your Data Appear
- Navigate to the live Airtable view.
- Refresh after 10-30 seconds to see structured receipt data.
Instant AI Insights
- Receive immediate insights by running: curl -X POST "http://3.95.208.224/ai-agent/analyze?to=your-email@example.com"
- Alternatively, explore via Swagger UI.

📖 Full API Docs: http://3.95.208.224/api/docs

Screenshots & video walkthrough:

Insight email

Monthly report

Note: Inbox cleanup requires running the app locally with your own Gmail OAuth keys. A dry-run preview mode is included so nothing is deleted by accident.

💻 Code Repository

All source code, setup instructions, and a one-click Docker deployment are on GitHub:

youneslaaroussi / mailbudget

MailBudget: The Proactive Postmark-Powered Inbox-Cleaning Finance Assistant

Transform your email receipts into intelligent financial insights — and automatically tidy up your inbox

📑 Table of Contents

🚀 The Problem We Solve

Every day, inboxes fill up with receipts, invoices, and bank notifications—valuable financial data trapped in unstructured text. MailBudget unlocks that data.

By leveraging Postmark as our rock-solid inbound gateway, MailBudget turns inbox clutter into clarity:

✅ Parses every receipt or invoice into clean, structured data
✅ Surfaces anomalies & trends with an AI/RAG pipeline
🧹 After processing, it can delete the original email so your workspace stays squeaky-clean

🛠 How It Works

At a glance: MailBudget is a hub-and-spoke system—Postmark acts as the universal inbox gateway, while lightweight plug-in adapters (e.g., Gmail Cleanup) bolt on or…

View on GitHub

⚙️ How I Built It

view highres diagram

Postmark Inbound & Send APIs handle all email I/O and security (DKIM, SPF, spam filtering) so I could focus on features, not deliverability.
Node.js, NestJS & TypeScript power the server.
GPT-4 extracts structured data from email bodies and crafts the insight summaries.
Airtable is the single source of truth for transactions, making RAG queries trivial.
Gmail Cleanup Adapter speaks to Google via OAuth2; because the core logic lives behind Postmark webhooks.

💡 Challenges & Key Implementations

Agentic toolkit – The GPT-4 agent isn't a one-shot prompt; it wields named tools defined in src/ai-agent/services such as queryAirtable, upsertTransaction, listSubscriptions, and sendInsightEmail. Armed with the caller's context it can chain calls—e.g., fetch last-30-days spend, compare against today, then craft a spike alert—before deciding to deliver or discard.
Multi-line & mixed-format receipts – Many vendors stuff several SKUs in one email while others attach PDF invoices. We built a two-pass extractor: first an HTML/Markdown pass, then (if needed) a PDF→text pass. Parsed line-items roll up into a single transaction but stay individually searchable.
False-positive guardrail – Not every email that looks like a receipt is one. A lightweight classifier checks sender domain + template heuristics + AI confidence; uncertain messages get labeled "informational" so they don't pollute the ledger.
Idempotency & duplicates – Postmark's webhook ID plus an email hash ensure the same email can't be processed twice—even across redeploys.

Biggest win? Keeping the architecture modular: Postmark at the center, tiny adapters at the edge, and AI doing the heavy lifting in between. It meant I spent more time polishing the user experience (and adding dry-run / WCAG formatting) instead of wrangling infrastructure.

AI Agent Workflow Example

Below is a real trace of MailBudget’s AI agent workflow:

parse_postmark_webhook(id=abc123):
   → upsertTransaction(vendor="Amazon", amount="$39.99")
   → queryAirtable(last_30_days_spend)
   → detect_spike(threshold=25%)  # Detected a 32% spending spike
   → sendInsightEmail(to="user@example.com", subject="[Spike Alert] Coffee spending up 32%")

💭 Why It Matters

Picture a coffee-shop founder drowning in hundreds of emailed Stripe receipts every month or a visually-impaired freelancer who relies on screen-readers to track deductible costs.

MailBudget turns those noisy inboxes into quiet ledgers:

Saves hours of manual spreadsheet work for indie founders.
Spots duplicate subscription charges before they become costly leaks.
Gives accountants a single Airtable feed they can integrate with existing tooling.

In short, less grunt work, fewer surprises, more informed financial decisions.

♿ Accessibility

Emails generated by MailBudget follow WCAG AA guidelines: proper semantic headings, high-contrast colour palette, and ALT text for every table cell so screen-reader users get the same insight as everyone else.

The public demo is zero-sign-up— just forward an email—so you can try it without technical hurdles.

🚀 What's Next

Custom Domain - configure our own custom domain that is easy to remember when forwarding emails.
Outlook Cleanup Adapter – plug-in already sketched, will extend the same OAuth flow to Microsoft 365.
CSV / QuickBooks exporter – one-click hand-off to popular accounting suites.

The modular design (Postmark hub, adapters on the edge) makes each of these only a weekend project away.

—-
Update:

Please change all API links to this: http://54.164.243.239/

How Vidova.ai Can Elevate Your Technical Blog Posts on dev.to

Younes Laaroussi — Thu, 08 Aug 2024 14:03:41 +0000

Writing technical articles on dev.to is a fantastic way to share your knowledge, showcase your skills, and engage with a vibrant community of developers. But if you want to take your posts to the next level, incorporating visual content is essential. Whether you're demonstrating code, explaining software concepts, or showcasing a new tool, high-quality visuals can make your content more engaging and easier to understand. That’s where Vidova.ai comes in.

Why Visual Content Matters in Technical Writing

Visuals are crucial in breaking down complex information into digestible pieces. They can illustrate concepts that might be difficult to explain with words alone, helping your readers grasp the material more quickly and retain it longer. Screenshots, GIFs, and videos are especially effective when writing about software development.

How Vidova.ai Simplifies Visual Content Creation

Vidova.ai is designed to help you quickly and easily create high-quality visual content for your blog posts. Here’s how it can enhance your dev.to articles:

1. Effortless Screen Recording

With Vidova.ai, you can record your screen in just a few clicks. Whether you’re demonstrating a piece of code, showcasing a tool, or walking through a tutorial, Vidova.ai makes it easy to capture everything on your screen in stunning 4K resolution.

Suggested Use: Record a short video clip demonstrating how a piece of code works, and embed it in your dev.to post to give your readers a clear, visual understanding of the concept.

2. Built-in Video Editing

Vidova.ai comes with integrated editing tools that allow you to trim, cut, and enhance your videos without needing additional software. This means you can quickly polish your recordings before adding them to your article.

Suggested Use: After recording a screen session, use the built-in editor to highlight key parts of your demo, add annotations, or zoom in on important details.

3. AI-Generated Captions

Ensure your videos are accessible to all readers with AI-generated captions. Vidova.ai automatically creates captions for your videos, saving you time and ensuring that your content reaches a wider audience.

Suggested Use: Include a video with captions that explain a complicated process or concept, making it easier for non-native speakers and those with hearing impairments to follow along.

4. Custom Cursor Enhancements

With Vidova.ai, you can replace your system cursor with a custom SVG cursor that remains crisp at any zoom level. This is especially useful when you need to direct attention to specific areas of your screen.

Suggested Use: When recording a tutorial, use the custom cursor to point out important elements in your UI, ensuring that your readers don’t miss any critical details.

Why Vidova.ai is Perfect for dev.to Writers

Time-Saving: Quickly create, edit, and publish visual content without the need for multiple tools.
High-Quality Output: Produce professional-looking videos that enhance your technical content.
Tailored for Developers: Vidova.ai is designed with tech professionals in mind, making it the ideal tool for creating content that resonates with the dev.to community.

Conclusion

Incorporating visual content into your dev.to articles is a surefire way to increase engagement and provide more value to your readers. With Vidova.ai, you can create stunning visual content that complements your technical writing, making your posts stand out in the crowded world of online content.

👉 Ready to enhance your dev.to articles? Try Vidova today and see the difference it can make in your content creation process.

This one tool will Take your Landing Pages to the Next Level

Younes Laaroussi — Thu, 11 Jul 2024 02:38:26 +0000

OBS Studio has long been a staple for streamers and content creators, but for developers and technical professionals seeking streamlined functionality and ease of use, OBS often falls short. This is particularly true when trying to integrate features like AI-generated captions or displaying keyboard actions—tasks that can become tangled in a web of plugins and configurations. Here’s why Vidova.ai offers a superior alternative.

🛑 The Limitations of OBS for Simple Enhancements

OBS, while powerful, complicates what should be straightforward. Adding basic functionalities such as AI captions or displaying keyboard actions usually involves navigating through multiple plugins, some of which are not free. This can quickly become a frustrating and costly endeavor.

✨ Enter Vidova.ai: A Tailored Solution

Vidova.ai is designed to cut through the complexity, offering a seamless and intuitive screen recording experience tailored for tech professionals. It simplifies every aspect of screen recording and editing, ensuring that you can focus more on creating and less on configuring.

👌 User-Friendly Interface: Quickly start recording with an intuitive setup that bypasses the steep learning curve associated with OBS.
🔧 Integrated Developer Features: Enjoy built-in support for AI captions and displaying keyboard shortcuts during recordings—no plugins or additional purchases necessary.
🎥 Efficient Editing and Recording: Capture and edit high-quality videos up to 4K at 60 FPS with integrated tools designed for productivity.

🖱️ Advanced Cursor Enhancement

A standout feature of Vidova.ai is its ability to replace your system cursor with a high-quality SVG cursor during recordings. This not only enhances the visual appeal of your videos but also offers optional smoothing of cursor motion, creating a sleek, glide-like movement that can make tutorials and demonstrations significantly more engaging and easier to follow.

🌟 Benefits of Vidova's SVG Cursor Enhancements:

🔍 Enhanced Clarity: The high-resolution SVG cursor remains crisp and clear at all zoom levels, making it ideal for high-definition recordings.
🌊 Smooth Motion: The optional smooth glide feature makes cursor movements fluid and easy to track, reducing visual clutter and enhancing viewer comprehension.
💼 Professional Aesthetics: The sleek cursor design contributes to a more polished and professional-looking video, setting your content apart from others.

🔁 Why Make the Switch to Vidova.ai

If you’re still using OBS out of habit, consider these compelling reasons to switch to Vidova.ai:

🚫 No More Plugin Hassles: Say goodbye to the complexity of plugins for basic features. Vidova.ai offers these functionalities out of the box.
🎯 Tailored for Creators: Unlike OBS, which is designed for a broad audience, Vidova.ai is specifically crafted to support the workflows of developers and tech educators.
⚙️ Streamlined Design: Focus on creating content with a tool that is both powerful and easy to use, designed to enhance your productivity.

🤝 Join the Vidova.ai Community

Choosing Vidova.ai means joining a community of like-minded tech professionals who value efficiency and quality. Your feedback and experiences help shape the software, ensuring that it continuously evolves to meet the specific needs of its users. Vidova.ai isn't just about providing a tool; it's about fostering a collaborative community that enhances everyone's screen recording experience.

🎬 Final Words

It's time to move away from the cumbersome OBS and embrace a tool that truly aligns with your needs as a developer or tech educator. Vidova.ai combines ease of use with powerful features, making it the ideal choice for those who want to produce high-quality, professional-looking videos without the hassle of complex setups and plugins.

Say goodbye to the generic approach of OBS and welcome the tailored efficiency of Vidova.ai. Enhance your productivity and elevate your content with a tool designed specifically for tech professionals.

🚀 For Teams: Vidova.ai is also perfect for teams looking to enhance their collaborative projects and streamline their screen recording processes. For team inquiries or to discuss how Vidova.ai can benefit your organization, please reach out directly to me at ceo@vidova.ai. Let’s optimize your team's creative potential with Vidova.ai.

👉 Don’t wait! Join us at Vidova.ai and become part of a movement that’s redefining what screen recording software can do. Sign up today and start transforming the way you create and share your projects.

Stop Using OBS: Why Vidova.ai is the Screen Recorder You Didn’t Know You Needed

Younes Laaroussi — Sat, 06 Jul 2024 05:04:11 +0000

🛑 The Limitations of OBS for Simple Enhancements

✨ Enter Vidova.ai: A Tailored Solution

👌 User-Friendly Interface: Quickly start recording with an intuitive setup that bypasses the steep learning curve associated with OBS.
🔧 Integrated Developer Features: Enjoy built-in support for AI captions and displaying keyboard shortcuts during recordings—no plugins or additional purchases necessary.
🎥 Efficient Editing and Recording: Capture and edit high-quality videos up to 4K at 60 FPS with integrated tools designed for productivity.

🖱️ Advanced Cursor Enhancement

🌟 Benefits of Vidova's SVG Cursor Enhancements:

🔍 Enhanced Clarity: The high-resolution SVG cursor remains crisp and clear at all zoom levels, making it ideal for high-definition recordings.
🌊 Smooth Motion: The optional smooth glide feature makes cursor movements fluid and easy to track, reducing visual clutter and enhancing viewer comprehension.
💼 Professional Aesthetics: The sleek cursor design contributes to a more polished and professional-looking video, setting your content apart from others.

🔁 Why Make the Switch to Vidova.ai

If you’re still using OBS out of habit, consider these compelling reasons to switch to Vidova.ai:

🚫 No More Plugin Hassles: Say goodbye to the complexity of plugins for basic features. Vidova.ai offers these functionalities out of the box.
🎯 Tailored for Creators: Unlike OBS, which is designed for a broad audience, Vidova.ai is specifically crafted to support the workflows of developers and tech educators.
⚙️ Streamlined Design: Focus on creating content with a tool that is both powerful and easy to use, designed to enhance your productivity.

🤝 Join the Vidova.ai Community

🎬 Final Words

How to Build a Telegram Bot using Typescript & Node.js

Younes Laaroussi — Mon, 02 Jan 2023 18:36:14 +0000

Introduction

In this tutorial, you’ll learn all the steps that go into building a dead-simple Telegram bot and hosting it on the cloud. It will greet people and apply ＦＡＮＣＹ text effects.

You’ll be writing code using the Typescript language and running it on the Node.js server environment.

And seeing as Telegram bots are built on an HTTP-based API, you’ll be using the GrammY framework for higher-level abstractions and a better programming experience.

Prerequisites

Before writing any code, make sure to have the following programs installed on your computer:

Telegram client.
Node.js v14+, NPM v6+, and cURL.
VS Code, or any other IDE of choice.

You’ll be using Cyclic to host this project on the cloud, so make sure to sign up (referral link) and take advantage of the Free Forever tier.

And while you don’t have to be an expert in it, you should know a bit of Typescript. You’ll be using it to write all the code in this tutorial.

Setup the Project

Downloading the starter files

Start-up this project by cloning the final version into your computer:

git clone https://github.com/eludadev/telegram-bot.git
cd telegram-bot

And make sure to roll it back to its very first stage, so you can learn how to build the rest of it in this tutorial:

git reset --hard 3ea99a5e111e84da4825b0732d76c386b5c8fdda

After that’s done, install the project’s dependencies:

npm install

Getting your Telegram bot API token

Using the Telegram client, start a conversation with the @BotFather. Send it the following messages:

/newbot
Your bot name
_Your bot username _(can’t contain spaces and must end in “bot”)

After that, create a new file in the project’s root directory called .env. Paste the following line into that file, replacing <YOUR-API-TOKEN> with your bot’s API token that you just got from the last message with @BotFather.

TELEGRAM_TOKEN=<YOUR-API-TOKEN>

Initializing the Telegram bot

Create a new file called bot.ts in the src/ directory. That’s where you’ll be writing code for the rest of this tutorial.

You’ll be using the GrammY framework to build this bot; it’s much easier this way instead of interacting directly with the API routes.

Head into the bot script and import the library in question:

import { Bot } from "grammy";
// Create a bot using the Telegram token
const bot = new Bot(process.env.TELEGRAM_TOKEN || "");

As you can see, the bot is created with the TELEGRAM_TOKEN variable that you just set in the .env file. After that, handle all message events by responding with a friendly robot introduction:

const introductionMessage = `Hello! I'm a Telegram bot.
I'm powered by Cyclic, the next-generation serverless computing platform.

<b>Commands</b>
/yo - Be greeted by me
/effect [text] - Show a keyboard to apply text effects to [text]`;

const replyWithIntro = (ctx: any) =>
  ctx.reply(introductionMessage, {
    parse_mode: "HTML",
  });

bot.on("message", replyWithIntro);

Take note of the parse_mode parameter. It’s used to allow HTML tags in the message response, such as Commands.

And finally, start-up the bot by running one method:

bot.start()

Follow that by executing the bot script:

npm run dev

And boom! You’ve got yourself a dead-simple bot running on your computer. You can test-it out by sending it a message on Telegram; you may want to follow the link previously given to you by @BotFather.

Handle Basic Commands

Telegram bots can handle commands, which aren’t much different from ordinary messages. The syntax for such interactions follows the following format:

bot.command("start", replyWithIntro);

Test it out by sending the /start message to your bot. Note that your program is automatically updated once you modify the bot script.

After that’s done, modify your bot to handle the /yo command. It will simply respond with the username of the sender:

// Handle the /yo command to greet the user
bot.command("yo", (ctx) => ctx.reply(`Yo ${ctx.from?.username}`));

And since the bot.on(“message”) event handler is on top, it will catch all messages and the /start and /yo commands won’t have an effect. Please make sure to always keep it at the bottom of the file:

// Keep this at the bottom of the file
bot.on("message", replyWithIntro);

Build Inline Keyboards

Telegram bots can also respond with a set of buttons underneath the message.

Let’s do a simple demonstration. Change the introductory response to also contain a button that links users to the Cyclic website, the platform that we’ll use to deploy our bot to the cloud for free at the end of this tutorial:

import { InlineKeyboard } from "grammy";

const aboutUrlKeyboard = new InlineKeyboard().url(
  "Host your own bot for free.",
  "https://cyclic.sh/"
);

const replyWithIntro = (ctx: any) =>
  ctx.reply(introductionMessage, {
    reply_markup: aboutUrlKeyboard,
    parse_mode: "HTML",
  });

After this step, you may want to re-execute the bot script after interrupting it with the Ctrl+C keyboard combination:

npm run dev

A more advanced example

Let’s now do a more advanced example. Other inline keyboards may contain general buttons, whose actions can be handled to the furthest extent.

Handle the /effectcommand, and make it apply bold, italic, and a bunch more effects to text:

import { chunk } from "lodash";
import { applyTextEffect, Variant } from "./textEffects";

import type { Variant as TextEffectVariant } from "./textEffects";

type Effect = { code: TextEffectVariant; label: string };
const allEffects: Effect[] = [
  {
    code: "w",
    label: "Monospace",
  },
  {
    code: "b",
    label: "Bold",
  },
  {
    code: "i",
    label: "Italic",
  },
  {
    code: "d",
    label: "Doublestruck",
  },
  {
    code: "o",
    label: "Circled",
  },
  {
    code: "q",
    label: "Squared",
  },
];

const effectCallbackCodeAccessor = (effectCode: TextEffectVariant) =>
  `effect-${effectCode}`;

const effectsKeyboardAccessor = (effectCodes: string[]) => {
  const effectsAccessor = (effectCodes: string[]) =>
    effectCodes.map((code) =>
      allEffects.find((effect) => effect.code === code)
    );
  const effects = effectsAccessor(effectCodes);

  const keyboard = new InlineKeyboard();
  const chunkedEffects = chunk(effects, 3);
  for (const effectsChunk of chunkedEffects) {
    for (const effect of effectsChunk) {
      effect &&
        keyboard.text(effect.label, effectCallbackCodeAccessor(effect.code));
    }
    keyboard.row();
  }

  return keyboard;
};

const textEffectResponseAccessor = (
  originalText: string,
  modifiedText?: string
) =>
  `Original: ${originalText}` +
  (modifiedText ? `\nModified: ${modifiedText}` : "");

const parseTextEffectResponse = (
  response: string
): {
  originalText: string;
  modifiedText?: string;
} => {
  const originalText = (response.match(/Original: (.*)/) as any)[1];
  const modifiedTextMatch = response.match(/Modified: (.*)/);

  let modifiedText;
  if (modifiedTextMatch) modifiedText = modifiedTextMatch[1];

  if (!modifiedTextMatch) return { originalText };
  else return { originalText, modifiedText };
};

// Handle the /effect command to apply text effects using an inline keyboard
bot.command("effect", (ctx) =>
  ctx.reply(textEffectResponseAccessor(ctx.match), {
    reply_markup: effectsKeyboardAccessor(
      allEffects.map((effect) => effect.code)
    ),
  })
);

// Handle text effects from the effect keyboard
for (const effect of allEffects) {
  const allEffectCodes = allEffects.map((effect) => effect.code);

  bot.callbackQuery(effectCallbackCodeAccessor(effect.code), async (ctx) => {
    const { originalText } = parseTextEffectResponse(ctx.msg?.text || "");
    const modifiedText = applyTextEffect(originalText, effect.code);
    la

    await ctx.editMessageText(
      textEffectResponseAccessor(originalText, modifiedText),
      {
        reply_markup: effectsKeyboardAccessor(
          allEffectCodes.filter((code) => code !== effect.code)
        ),
      }
    );
  });
}

Handle Inline Queries

Telegram bots support inline queries, a feature which enables them to be invoked from any chat within Telegram by calling them with their “@” username. Let’s use this to allow users to apply text effects in any conversation using your bot.

Enabling inline mode for your Telegram bot

By default, this feature comes disabled. Contact @BotFather to enable it:

/mybots
Select your bot from the inline keyboard
Bot settings
Inline mode
Turn on

Handling the “effect” inline query

Inline queries are generally handled by matching a RegEx pattern. We’ll listen for the “effect [effect] [text]” query and handle it by applying [effect] to [text]:

const queryRegEx = /effect (monospace|bold|italic) (.*)/;
bot.inlineQuery(queryRegEx, async (ctx) => {
  const fullQuery = ctx.inlineQuery.query;
  const fullQueryMatch = fullQuery.match(queryRegEx);
  if (!fullQueryMatch) return;

  const effectLabel = fullQueryMatch[1];
  const originalText = fullQueryMatch[2];

  const effectCode = allEffects.find(
    (effect) => effect.label.toLowerCase() === effectLabel.toLowerCase()
  )?.code;
  const modifiedText = applyTextEffect(originalText, effectCode as Variant);

  await ctx.answerInlineQuery(
    [
      {
        type: "article",
        id: "text-effect",
        title: "Text Effects",
        input_message_content: {
          message_text: `Original: ${originalText}
Modified: ${modifiedText}`,
          parse_mode: "HTML",
        },
        reply_markup: new InlineKeyboard().switchInline("Share", fullQuery),
        url: "http://t.me/EludaDevSmarterBot",
        description: "Create stylish Unicode text, all within Telegram.",
      },
    ],
    { cache_time: 30 * 24 * 3600 } // one month in seconds
  );
});

Polish the Telegram Bot

It’s often useful for Telegram bots to display a list of supported commands, and while we’re already doing that in the introductory message, there’s a more formal way of doing so, and it’s as simple as one command:

// Suggest commands in the menu
bot.api.setMyCommands([
  { command: "yo", description: "Be greeted by the bot" },
  {
    command: "effect",
    description: "Apply text effects on the text. (usage: /effect [text])",
  },
]);

Note that to see the new menu, you must restart your Telegram client.

Furthermore, professional bots come with a profile picture and a well-formed description. You can do all of that by contacting @BotFather:

Edit bot
Edit about / Edit description / Edit botpic

Deploy the Telegram Bot to the Cloud

Long Polling vs Webhooks

There are two fundamentally different ways of deploying your Telegram bot to the web.

The first one is Long Polling, and we’ve already been using it in this tutorial by running bot.start(). With it, bots constantly send requests to the Telegram servers checking for new messages, and responding to them accordingly.

This approach is not compatible with the serverless architecture, as the latter expects applications to only run once, and only on-demand.

“Serverless means applications are only on for the time it takes to process individual requests. They are suspended immediately after each response is sent.” — Cyclic docs.

The solution to this problem is deployment by Webhooks, an alternative strategy that makes the Telegram client itself contact your bot when there’s a new message. And while this comes with its own drawbacks, it’s fully compatible with serverless architecture.

Using Webhooks for deployment

By following the NODE_ENV environment variable, we can tell whether the bot instance is running in a development or a production stage. Replace the bot.start() command with the following:

import { webhookCallback } from "grammy";
import express from "express";

// Start the server
if (process.env.NODE_ENV === "production") {
  // Use Webhooks for the production server
  const app = express();
  app.use(express.json());
  app.use(webhookCallback(bot, "express"));

  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => {
    console.log(`Bot listening on port ${PORT}`);
  });
} else {
  // Use Long Polling for development
  bot.start();
}

Pushing all files to a Github Repository

It’s imperative that we use a Github repository to store our bot files so we can deploy it to the cloud. After creating a new repository (either public or private), run the following commands to link it with your local Git instance, replacing <YOUR-GH-REPO-LINK> with your repo’s URL:

export GH_REPO="<YOUR-GH-REPO-LINK>"
git remote remove origin
git remote add origin "$GH_REPO.git"

After that, stage, commit, and push your files to the new remote origin:

git add .
git commit -m "Build the Telegram bot."
git branch -M main
git push origin main

Deploying for free using Cyclic

After creating your Cyclic account (referral link), use it to deploy your new Telegram bot.

It’s free forever, and no credit card is required.

Note that you must sign up using the same Github account that you used to create your bot’s repository.

Open your Cyclic dashboard, click on the Deploy button and switch to the “Link your own” tab. Search for your bot’s repo and click on the “Connect” button. Then sit back and watch it do all the work for you!

The final step is setting the same environment variables as you did in the .env file. Open your Cyclic deployment’s dashboard page, switch to the Variables page and set the appropriate values for the environment variables:

NODE_ENV: production
TELEGRAM_TOKEN: your bot’s API token (same as .env file)

Connecting your Telegram bot to your Cyclic server

You want to tell Telegram to send the Webhook requests to your Cyclic server. So conclude this project by copying your Cyclic deployment’s URL and running these commands:

export TELEGRAM_API_TOKEN=... # YOUR TELEGRAM API TOKEN
export TELEGRAM_WEBHOOK_URL=... # YOUR CYCLIC DEPLOYMENT URL
curl "https://api.telegram.org/bot$TELEGRAM_API_TOKEN/setWebhook?url=$TELEGRAM_WEBHOOK_URL"

And boom! Your bot’s now actively running on the cloud! You may stop your local development instance by pressing Ctrl+C and notice how your bot is still working.

Conclusion

You’ve successfully reached the end of this tutorial! There are many more things you could add to this bot, including but not limited to games, error handling and internationalization.

You may also want to learn more about Telegram bots:

And here are some resources to advance your knowledge about serverless computing:

12 Rarely Used JavaScript Web APIs that Will Boost Your Website to THE MOON 🚀

Younes Laaroussi — Sat, 23 Jul 2022 07:43:00 +0000

There are over 97 Web APIs, and you’re only using 5% of them. Let’s unlock that other 95 percent!

After taking a long stroll down the dark realms of the spec, I realized that there were so many technologies out there being left-out.

My goal with this article is to bring them to the light. And I’ll prove to you, using practical examples, that some APIs are really worth a shot!

Each section will thoroughly examine each API and provide a fun example that beautifully demonstrates a practical use-case.

Ad: Like freebies? 🤑

I made a pack of 100 free hover animations. Get it now, share it, and do whatever you want with it. It's yours forever! ❤️

📑 Table of Contents

🤳 Screen Orientation API
📺️ Fullscreen API
📲 Intersection Observer API
💤 Screen Wake Lock API
💻️ Screen Capture API
📔 IndexedDB API
🧠 Local and Session Storage APIs
🎨 Houdini API
🕸️ Web Share API
📋️ Clipboard API
✒️ Selection API
👀 Page Visibility API

Warning about portrait mode

Screen is too narrow. try in landscape mode.

Some apps like non-linear video editors were not meant for vertical devices: they just don’t work well in narrow screens!

Sure, the web is supposed to be responsive, but it’s not always worth it to port a whole wide layout to a narrow display.

Wouldn’t it be nice if we could warn our users when their device is rotated in the wrong direction? Let me introduce to you… the Screen Orientation API!

In order to avoid errors, it’s important to check support for the Screen Orientation API. This is as simple as: if ('orientation' in screen). You’ll see this pattern again and again throughout this article.

The Screen Orientation API

Browsers expose a global variable named screen, which we’ll use to access the information we need. The [ScreenOrientation](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation) instance can be accessed with screen.orientation. We’ll be working with this object throughout this section.

Detecting the screen orientation

Screen Orientation types and angles: https://w3c.github.io/screen-orientation/#dfn-screen-orientation-values-table

Contrary to popular belief, there are four ways that a screen can be oriented, as can be seen in the picture above. But we’re only interested in knowing whether the screen is in portrait or landscape mode, and it’s easy to write a function that tells us exactly that:

function getOrientation() {  
    const isPortrait = screen.orientation.type.startswith('portrait')  
    return isPortrait ? 'portrait' : 'landscape'
}

Locking the screen orientation

Native apps like Instagram lock the screen orientation while it’s in-use. As the line between PWAs and native apps is getting blurrier by the day, it’s not a surprise that this feature is also on the web.

While less supported, it’s also possible to lock and unlock the screen orientation using this code snippet:

screen.orientation.lock(orientation)

Don’t forget to handle errors too, because as I already stated, this feature is not well-supported.

Making your website a full-screen experience

Browsers cover our websites with a lot of UI elements, distracting the user from what’s important.

Screenshot of Chrome mobile, highlighting the browser’s UI elements.

This is especially a problem when it comes to immersive content, such as:

movies,
games,
maximizing images.

and the list goes on-and-on.

Thankfully, the Fullscreen API comes and saves the day!

This feature is very well supported in all modern browsers, so don’t worry about using it.

Entering fullscreen mode

Surprisingly, any DOM element can enter fullscreen mode:

el.requestFullscreen()

However, most of the time, we want the entire page to enter fullscreen. The root document element —<html>— can be accessed in JavaScript with document.documentElement.

So it’s not unusual to see this code snippet floating around the web:

document.documentElement.requestFullscreen()

Leaving fullscreen mode

There’s a variety of ways for exiting. Some of them are the browser-default keyboard shortcuts: ESC and F11.

There’s also the possibility to leave by switching tabs Ctrl+Tab or jumping windows Alt+Tab.

However, the most important leaving mechanism is the one that you — the developer — provide. You can programmatically disembark fullscreen mode with the following:

document.exitFullscreen()

In a deployment environment, however, it’s important to avoid errors by checking if this function exists before calling it:

if (document.exitFullscreen) {    
    document.exitFullscreen()
}

Verifying if the user is in fullscreen mode

If we wanted to implement a fullscreen toggle as seen in the Codepen at the start, we’d need a way to determine whether or not fullscreen mode is active.

That’s totally possible with the following code snippet:

document.fullscreenElement // returns 'null' or the fullscreen-enabled DOM element

For better browser compatibility, we’d have to check for multiple attributes:

document.fullscreenElement    
    || document.mozFullscreenElement    
    || document.msFullscreenElement    
    || document.webkitFullscreenElement

With this in hand, we can implement a fullscreen toggle:

function toggleFullScreen() { 
    if (!document.fullscreenElement) {   
        document.documentElement.requestFullscreen(); 
    } else {  
        if (document.exitFullscreen) {   
            document.exitFullscreen();  
        } 
    }
}

Animating an element as it enters the viewport

Consider all the times you needed to do something when an element enters into view:

Animating it,
Loading more content (Infinite Scrolling),
Lazy-loading an image,
Registering ad revenue.

One naive solution is calling getBoundingClientRect on every scroll event. And I mean… it works!

However, it’s terribly inefficient. It runs on the main thread, so the more event listeners that we register, the slower our app becomes.

Thankfully, browser engineers have blessed us with the Intersection Observer API: an efficient solution that delegates all optimizations to the browser, so that we — web developers — can focus on what’s important.

We’re gonna make a pretty cool effect where text elements are highlighted only when they enter into view, creating a sleek and modern animation that our readers will appreciate. See it with your own eyes in the Codepen above.

Creating an observer

Before we start listening for intersection events, we must to create an observer object that handles all the background tasks:

const options = {  
    root: null, // use viewport  
    threshold: 0.75
}

const observer = new IntersectionObserver(callback, options)

You may have noticed threshold. It’s an option that tells the browser to only trigger intersection events when N% of the element is visible.

Handling intersection events

Let’s define callback, a function that will be called once an intersection event occurs.

We want to handle the event only when the element is shown at least N% in the viewport:

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    // ...
  }
}

It’s time to decide what to do with an element when it enters into view. In this case, we’ll simply assign it the .active class name, while delegating the animation responsibilities to CSS.

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    entry.target.classList.add('active')
  }
}

We can also “undo” this effect once it leaves the screen:

function callback(entry) {
  if (entry.intersectionRatio > 0.75) {
    entry.target.classList.add('active')
  } else {
    entry.target.classList.remove('active')
  }
}

For a deeper introduction to the IntersectionObserver API, read this amazing article by Denys Mishunov.

Preventing the screen from going dark

Paused space-launch video on Youtube, showing the video player’s controls.

Long-form videos require the screen to stay on even without any interaction. This behavior is usually seen on native applications, but with the Screen Wake Lock API, it’s on the web too!

There are many other use-cases for this API:

Online games,
Presentations,
Drawing on canvas,
Camera,
Streaming,
Timers.

and the list never stops.

Let’s delve deeper into its inner-workings!

Firefox and Safari have yet to support this feature. So it’s always a good idea to check its availability first, in order to avoid all kinds of errors: if ('wakelock' in navigator)

Acquiring wakelock

A video player, such as Youtube, might acquire wakelock in its play function:

let wakelock = null

async function play() {
    // … 
    wakelock = await navigator.wakeLock.request('screen')
}

If the user’s battery is too low, expect it to fail.

Releasing wakelock

It’s bad practice to keep the wakelock on forever, as that will hurt the user’s battery and might even degrade performance. So make sure to always release it when possible:

async function pause() {
  // ...
  await wakelock.release()
}

Whenever the user leaves your website’s tab, the wakelock is automatically released.

In this case, you should re-acquirese it by listening to the visibilitychange event, which we’ll learn more about in another section.

But in a nutshell, it’s triggered when the user leaves/enters the website’s tab.

document.addEventListener('visibilitychange', async () => {  
    if (wadocument.addEventListener('visibilitychange', async () => {  
    if (wakelock !== null && document.visibilityState === 'visible') {    
        wakelock = await navigator.wakeLock.request('screen')  
    }
})

Recording your screen

There’s an increasing number of web-based screen recording apps. But how exactly do they do it? The answer is surprisingly simple.

The secret to their success is the Screen Capture API, an easy-to-use interface that allows users to record their screen in a wide variety of ways:

Whole screen,
Specific window,
Specific tab.

It also comes with extra nifty features, including but not limited to:

blurring/covering overlapping windows to avoid accidentally sharing sensitive information,
hiding/showing the cursor,
recording sound.

Browser compatibility

I hate to be the bearer of bad news, but no mobile browsers support this API as of yet.

On the other hand, it’s very well-supported by modern desktop navigators! (except Internet Explorer, of course)

Starting screen capture

With this delight of an API, recording the screen is shockingly simple:

const options = {
    video: {
        cursor: 'always' // show the cursor
    },
    audio: false // don't record audio
}
navigator.mediaDevices.getDisplayMedia(options) // returns a promise

Would you believe me if I told you that was it? Well, I never lie.

Screen Capture Prompt showing the 3 types: entire screen, window, tab.

The above function tells the browser to show a prompt for selecting the desired recording surface, as can be seen on the image above. (try it yourself in the codepen at the start of this section)

Preview the recording

It would be nice if we could see exactly what the website is seeing. Thankfully, that’s terribly easy to do:

<video autoplay id="preview"></video>

And that was it for the HTML. Now, let’s move into the JavaScript logic:

previewElem = document.getElementById('preview')
previewElem.srcObject = await navigator.mediaDevices.getDisplayMedia(options)

That’s it! Now you can see what’s being recorded, in real time.

Stopping screen capture

With one method, we can achieve everything! Note that it’s important to have a preview element first, as demonstrated in the last subsection.

let tracks = previewElem.srcObject.getTracks()

tracks.forEach(() => track.stop())
previewElem.srcObject = null

Storing tabular data in an on-device database

There’s an entire NoSQL database system hidden right in your browser, and it’s accessed with the IndexedDB API!

Each operation is asynchronous, so it never slows down other operations. It’s also cleared once the user erases the browser’s cache or locally-stored data.

In addition to all of that, it also supports the usual search, get, and put actions, with transactions on the side. It can store almost all kinds of data, including but not limited to File, images and videos as Blob, and String of course.

Unfortunately, not all browsers agree on which kind of data should be supported. Safari on iOS, for example, cannot store Blob data. However, it’s possible to convert all other formats to an ArrayBuffer, which is very well-supported by all platforms.

Storage limit is not an issue, because most browsers allocate a bunch of space that your websites can consume freely. Also, each database is tied not only to a domain name, but to the very specific subdomain. To add to all of that, browser compatibility is not an issue at all, not even on IE11.

There are many things that we can do with this treat of an API, including but not limited to:

Storing structured data for offline use,
Speeding up the loading time for repeated visits,
Caching user-generated data,
Temporarily saving data before uploading it to a server.

Let’s see how we can store contact data in IndexedDB!

Using IndexedDB

Before we can do anything, we should use a wrapper library on top of IndexedDB because, by default, it’s too complicated; it uses events instead of promises.

import { openDB } from 'idb';

const db = await openDB('contacts', 1, {
    // Creates a new database if it doesn't exist.
    upgrade(db) {
        db.createObjectStore('contacts', {
            // The 'id' property of the object will be the key.
            keyPath: 'id',
            // If it isn't explicitly set, create a value by auto incrementing.
            autoIncrement: true,
        })

        // Create an index on the 'name' property of the objects.
        store.createIndex('name', 'name');
    }
})

And with that done, we can start storing structured data like it’s no one’s business!

await db.add('contacts', {
    name: 'John Doe',
    age: 25,
    email: 'johndoe@john.doe'
})

And we can just as easily retrieve all of it:

// Get all contacts in name order:
const contacts = await db.getAllFromIndex('contacts', 'name')

That’s all we need to know for our simple use-case. But if you’re still interested, you can delve deeper into the documentation.

Storing text data on the device even when the user leaves

While we can use IndexedDB to store large and complicated data on the browser, it’s still important to consider those other times when all we need to save is a simple key-value pair:

Login information,
Newsletter subscription state,
Cookies consent,
Analytics tracking pixels.

It’s important to note that sensitive information (passwords, credit card information, social security numbers, etc…) should NEVER be saved in the browser, because it’s vulnerable to XSS attacks in addition to other exploits.

There’s a special utensil for such simple cases, and it’s called the Web Storage API. And just like IndexedDB, it’s tied to the particular subdomain. It’s also cleared if the user empties the browser’s cache or data.

In this API, you’ll find two types of storage: localStorage and sessionStorage. They offer different benefits:

Local storage persists data even when the user leaves the website, unlike session storage which clears all data as soon as the tab is closed.
Local storage can store more data, unlike session storage which is maxed-out at 5MB.

Using local storage

Say that we’re implementing a newsletter subscription form. We don’t want to keep showing it to the user even after they’ve subscribed, so we’ll use the localStorage global variable to conditionally display it:

function subscribe() {
    // ...
    localStorage.setItem('is-newsletter-subscribed', true)
}

You can now use DevTools to see the new item, saved right in your computer.

And now, let’s write a function that decides whether or not to show the subscription form:

function isSubscribed() {
    return localStorage.hasOwnProperty('is-newsletter-subscribed') ? localStorage.getItem('is-newsletter-subscribed') : false
}

As you can see, we’re first checking if the newsletter-subscribed item exists. If it does, we simply return its value using getItem(), otherwise, we return false because the user hasn’t subscribed yet.

Creating a location-aware ripple effect

With the advance of the web, special effects have grown too. These days, CSS properties are just not enough to achieve our wildest dreams.

Our last resort used to be GIFs and images, but with the CSS Painting API, that’s not the case anymore!

Now, we can use all the stylish effects that come with the HTML Canvas to draw anything over an element’s background.

Browser compatibility is not that great. Firefox and Safari on iOS are yet to support it. Therefore, it’s very important to run the following: if ('paintWorklet' in CSS)

Let’s build a ripple effect without any pseudo-elements, inspired by Google’s own implementation.

The JavaScript Logic

For this effect to work, we need to use JavaScript events to get the cursor’s x and y positions:

// index.js

button.addEventListener('click', (e) => {
    const {x: offsetX, y: offsetY} = button.getBoundingClientRect()
    const [x, y] = [e.clientX - offsetX, e.clientY - offsetY]

    button.style.setProperty('--x', x)
    button.style.setProperty('--y', y)
    // ...
})

Since the ripple effect is an animation that evolves over time, we need to keep track of its timeline using a tick variable:

// index.js

button.addEventListener('click', (e) => {
    // ...

    const start = performance.now()
    requestAnimationFrame(function step(now) {
        const tick = Math.floor(now - start)
        button.style.setProperty('--tick', tick)

        // Continue animation
        requestAnimationFrame(step)
    })
})

The above code uses [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to create an efficient and optimized animation. During each animation step, we calculate the “tick” and assign it to a CSS property.

If we leave it like this, it will run forever. So let’s add an “end condition” to end the animation. We’re gonna stop it when it reaches 1 second (meaning 1000 milliseconds):

// index.js

button.addEventListener('click', (e) => {
    // ...

    requestAnimationFrame(function step(now) {
        const tick = Math.floor(now - start)
        button.style.setProperty('--tick', tick)

        // Stop the animation after 1 second
        if (tick > 1000) {
            button.style.setProperty('--tick', 0)
            return
        }

        // Continue animation
        requestAnimationFrame(step)
    })
})

And that’s it for the logic!

The Paint Worklet

Let’s make the actual ripple effect, using the Paint API.

This effect should go into a separate file, which we’ll call ripple.js.

Let’s start by retrieving the CSS properties that we just defined:

// ripple.js

registerPaint('ripple', class {
    static get inputProperties() {
        return ['--x', '--y', '--tick']
    }
})

Next, we’ll use the Canvas API to draw a circle into the button’s background:

// ripple.js

registerPaint('ripple', class {
    //...

    paint(ctx, {width}, props) { 
        // Retrieve props
        const x = parseFloat(props.get('--x').toString())
        const y = parseFloat(props.get('--y').toString())
        let tick = parseFloat(props.get('--tick').toString())

        // Clamp tick in [0, 1000]
        if (tick < 0) tick = 0
        if (tick > 1000) tick = 1000

        // Draw ripple
        const rippleColor = 'rgba(255,255,255,0.54)'
        ctx.fillStyle = rippleColor
        ctx.globalAlpha = 1 - tick/1000
        ctx.arc(
            x, y, // center
            width * tick/1000, // radius
            0, 2 * Math.PI // full circle
        )

        ctx.fill()
    }
})

Registering the paint worklet

Go back into your index.js file, and add the following code:

// index.js

if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('ripple.js')
}

It will first check if CSS Paint API is supported, and only then will it link the ripple effect.

And we’re done! All that’s left is to use this effect. So add the following code to your CSS:

button {
    background-color: #0d1117;
    background-image: paint(ripple);
}

For a deeper introduction to the CSS Paint API, read this amazing article by Adrian Bece.

Showing a native sharing menu

There is so much content on the web that we may want to share with others:

links,
images,
paragraphs.

and the list never ends.

Normally, a developer would implement their own sharing system with links to Twitter, Facebook, and other social media sites.

These components, however, always fall short compared to their native counterparts, which come with a gigantic quantity of options:

sharing with contacts,
sharing with other apps,
sharing over bluetooth,
copying to clipboard.

and the list, again, never ends.

These native sharing menus used to be exclusive to native applications, but with the Web Share API, that fact is no longer true.

Browser compatibility is excellent in mobile browsers, but struggles a bit when it comes to Firefox on desktop.

Try it yourself in the Codepen above, and if it’s not supported in your device, here’s what it can to look like:

Sharing menu with many options including Gmail, Messages, Reddit, and LinkedIn.

Sharing URLs

The method to look for is navigator.share. It takes an object containing a title, a string of text, and a URL.

const shareData = {
  title: 'Smashing Magazine',
  text: 'Smashing Magazine — For Web Designers And Developers',
  url: 'https://www.smashingmagazine.com/'
}

await navigator.share(shareData)

Note that this function is protected by transient activation, meaning it requires a UI event (like clicking) before it can be handled.

Copying text to the clipboard

The clipboard is one of the most underrated features in today’s computers. Would we developers survive without the constant Ctrl+C’ing code from Stackoverflow? Doubt it.

Clipboards are all about moving digital information from point A to point B. The only alternative is rewriting content by-hand, which is a huge opportunity for errors. Modern clipboards also allow the copying of images and other forms of media.

With the advent of the Clipboard API, developers can shine the beauty of UX on their users by programmatically copying important information to the user’s clipboard. This feature is also seen everywhere, from code in the MDN website to Twitter. It’s only missing in Stackoverflow, and for good reason.

Browser compatibility is also great, except IE of course.

Using the Clipboard API

Copying text is extremely simple:

await navigator.clipboard.writeText('Howdy, partner!')

And reading it is just as easy:

const text = await navigator.clipboard.readText()

Sharing the selected text

Selected text on a blog with a sharing tooltip on top of it.

Multiple blogs such as Medium allow users to effortlessly share selected text with other social platforms.

Being such a useful feature, it encourages the sharing of content, and as a result, it grows the blog to enormous proportions.

We already saw how to invoke a native sharing menu in a previous section, so let’s just focus on text selection.

Also, we won’t see how to add a tooltip on top of selected text, but we‘ll delve into using the Selection API to retrieve the selected portion of text, because this whole article is about APIs and their use-cases.

And no need to worry about the browser compatibility, because it’s just perfect!

Getting the selected text

This is a terribly easy thing to do:

const text = window.getSelection().toString()

That’s it! Now seek the previous section on the Web Share API to pop-up an OS-defined sharing menu, and let your users go wild!

Changing the title when the user leaves the tab

Website title changing from “Shopping website” to “Please stay” when the user leaves the tab.

It’s possible for a website to tell if it’s being viewed or not with the Page Visibility API.

While I don’t advocate using the Page Visibility API to grab the user’s attention with annoying messages, it has many positive use-cases:

showing new notifications,
reporting engagement analytics,
pausing video and audio,
stopping an image carousel.

Browser compatibility is not an issue.

Detecting page visibility

We can get the page’s visibility state any time with the following code:

document.visibilityState // 'visible' or 'hidden'

But real use-cases require listening to events and respectively changing some behavior.

Unfortunately, the event name varies by browser, so we have to do the following:

let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

We then can listen for page visibility events, like this:

document.addEventListener(visibilityChange, handleVisibilityChange);

function handleVisibilityChange() {
  if (document[hidden]) {
    // page is hidden
  } else {
    // page is visible
  }
}

For the purposes of our demonstration, we’ll just change the document title:

function handleVisibilityChange() {
  if (document[hidden]) {
    document.title = 'Please stay!!!'
  } else {
    document.title = 'Shopping website'
  }
}

Note that I don’t recommend doing this, as it’s just annoying to the user and a fundamental malpractice in ethical web design.

Conclusion

Web APIs these days are bridging the gap between the web applications and the native applications.

The web is starting to become a real threat to the monopolies created by the App Store and the Google Play Store, and it’s showing no signs of stopping. Let’s discuss this in the comment section below!

There are many more APIs that we haven’t explored yet, and some can do unbelievable things like scanning bar-codes and even recognizing speech! So stay tuned for a part 2! ❤️

Honorable Mentions

It would be a shame to not mention another group of APIs that are very rarely used, and yet have so many interesting and practical use-cases:

Like freebies? 🤑

I made a pack of 100 free hover animations. Get it now, share it, and do whatever you want with it. It's yours forever! ❤️

[Deleted User]

I Made 100 CSS Buttons For Your Next Big Project 🚀️

Younes Laaroussi — Sun, 22 May 2022 22:35:00 +0000

If you like this article, don’t forget to click on that heart button to show your appreciation.

You’re probably thinking: That’s an odd way to start an article…

But I just wanted to show you that buttons really are everywhere!

youneslaaroussi / ui-buttons

100 Modern CSS Buttons. Every style that you can imagine.

🚀️ We're on Product Hunt!

If you want me to keep making amazing free resources for you, I would really appreaciate your feedback and support on my Product Hunt launch! 🤗️

🤖️ To See Code, Click on One of The Links

Preview	Link	Description
	Basic	CSS Button that changes color on click or hover.
	Inverted Triangles	CSS Button slides its two inverted triangles to the middle on click or hover.
	Line Slide	CSS Button that slides its pseudo-element underline on hover or click.
	Don't Cross The Line	CSS Button that crosses over itself and expands on hover or click.
	Slicer And Marquee	CSS Button that slices its background and cycles its content vertically on click or hover.
	Zoom In And Text Rotate	CSS Button that slides two inward-pointing pseudo-element triangles to the center on hover or click.
	Alternate Blocks And Text Flip	CSS Button that slides its four alternate blocks

…

View on GitHub

You’re bored. So you take your phone out, and you click buttons to —

turn it on (a physical button)
open the twitter app (an icon button)
go to the home page (a navigation button)
like and reply to a tweet (an action button)

and the list goes on and on….

I think that you get it by now, we are obsessed with pressing buttons! So let me propose an idea…

Buttons should be more fun! And by “fun”, I really mean —

practical,
precise,
and modern.

But as web developers, we already have to worry about so many other things —

accessibility (a11y),
web vitals,
seo.

So imagine if someone could just take one little hurdle away, so that we can focus on the more important stuff…

I decided that I should be that person. I took on the responsibility of building buttons that are —

accessible (uses ARIA attributes),
modern in style,
responsive (works on desktop and mobile).

And not just that, I also decided to make ONE HUNDRED different styles for these buttons. You are guaranteed to find that one style that just works on your website!

Now let’s break-apart one of my favorite button styles: The Overfold.

It first starts by animating a clip-path from one corner to another.

The second part of the effect involves scrolling text vertically, while clipping it using overflow: hidden.

Did you know? I’m working on 150 CSS Buttons. Follow me to be the first to know when it drops! 🤗

[Deleted User]

// Detect dark theme var iframe = document.getElementById('tweet-1526989502199234567-139'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1526989502199234567&theme=dark" }

Those HTML Elements You Never Use 🌚🕵🏿

Younes Laaroussi — Mon, 11 Apr 2022 20:24:00 +0000

There are over a hundred elements in HTML, all of which can be applied to pieces of text to give them special meaning in a document. Most of us only know a few, like the , <div>, and <body> elements…

But there are actually a bunch more hidden in the dark realms of the W3C reference. That’s why, in this article, I took the liberty of diving deep into the HTML documentation, to come out with a handy bag of elements that will improve your website in not one, but two very important ways: accessibility and SEO.

Press Ctrl+D to bookmark this article and easily come back to it when you need it. And with that said, let’s begin!

👉 `<abbr>` — Abbreviation

This elements represents both abbreviations (like Corporation ➟ Corp.) and acronyms (like Cascading Style Sheets ➟ CSS). Additionally, you can use its title attribute to write the full form of the word so that screen readers can read it and users can hover over it to read it.

👉 `<ins>` and `<del>` — Insert and Delete

The <ins> and <del> elements represent a range of text that has been added or deleted to a document. You may have already seen these elements in the Github Pull Requests.

👉 `<dfn>`, `<var>`, `<kbd>`, `<samp>`, and `<output>` — Technical Elements

These are elements that represent special technically-oriented parts in a document, like definitions, variables, keystrokes, etc…

👉 `<bdo>` — Text Directionality

This element changes the directionality of text to make it render backwards. You can control its behavior using the dir attribute.

Although not its intended use, but it can reverse text using nothing but HTML!

👉 `` — Highlighting Text

The purpose of this element is to highlight text like you would with a marker.

👉 `<area>` — Clickable Image Areas

You can use this element to make certain areas of your image behave like links!

👉 `<dl>`, `<dd>`, and `<dt>` — Description Lists

You can use these elements to create a semantically-accurate description list where you define multiple terms in one block of text.

👉 ``and ``— Superscripts and Subscripts

With these two elements, you can add superscripts (like x²) and subscripts (like x₀) to your document.

👉 `<figure>` and `<figcaption>` — Labeled Images

You can use <figure> to contain any element that you want, like an image for example. And then, you add <figcaption> as its last child, where you can add a block of text that describes what’s above it.

👉 `<progress>` and `<meter>`— Marking Progress

This one allows you to create semantically-right progress-bar elements where you show how far an action is from being finished.

👉 `<details>` — Expandable Menus

You can use this element to create a native menu that has a title and can expand using a button. No JavaScript needed.

👉 `<dialog>` — Pop-up Dialogs

It’s possible to create semantically-accurate dialogs using this element. It doesn’t do much by itself, so you have to use CSS and JavaScript to add more functionality.

👉 `<datalist>`— Text Input Suggestions

This element lets you manually add text-input suggestions. You can add anything you want!

👉 `<fieldset>`— Grouping Form Elements

Keep your forms tidy and more user-friendly by using the <fieldset>element.

👉 `<object>`— Embedding External Objects

With this amazing element, you can embed almost any file you want to your website! The most commonly supported files are PDFs, Youtube videos, etc…

👉 `<noscript>`— If JavaScript Is Disabled

This element can be used to show some content when JavaScript is disabled by the browser. It’s very commonly used by websites that heavily depend on JavaScript, like Single Page Applications (SPAs).

If you found this guide useful, please don’t forget to bookmark it for future reference.

I make posts like this everyday, so please follow me to stay informed. ❤️

[Deleted User]

// Detect dark theme var iframe = document.getElementById('tweet-1526989502199234567-199'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1526989502199234567&theme=dark" }