# Grayhat Blog Full Context > Expanded public blog context for Grayhat Blog. ## Page - [Blog Home](https://grayhat-company-blog.grayhatstudio.workers.dev/blog) - [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt) - [Sitemap](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sitemap.xml) - [Robots](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/robots.txt) - [OpenAPI](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/openapi.json) ## Content Counts - 36 post or pages - 77 tags - 17 authors ## Public Route Structure - [AI & the Future of Work Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/ai-and-the-future-of-work/llms-full.txt) - [Our struggles (and minor wins) with Rive for character animation in 2025 Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025/llms-full.txt) - ["I can talk to machines" Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-can-talk-to-machines/llms-full.txt) - [Full Stack Deployment: Setting Up CI/CD for Node.js Applications on AWS with Custom Domains Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/full-stack-deployment-setting-up-ci-cd-for-node-js-applications-on-aws-with-custom-domains/llms-full.txt) - [Grayhat Summer Internship - 2025 Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-summer-internship-2025/llms-full.txt) - [Wrap-up: Web Social Party Game Jam! Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/web-social-party-game-jam/llms-full.txt) - [Creating an MVP for an unofficial v0.dev VS Code Extension clone Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/creating-an-mvp-for-an-unofficial-v0-dev-vs-code-extension-clone/llms-full.txt) - [Pixels to Players: How Good Game Designs are Executed Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/pixels-to-players-how-good-game-designs-are-executed/llms-full.txt) - [This is ECHO. Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/coming-soon/llms-full.txt) - [Building a Unity Plugin in JavaScript Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-a-unity-plugin-in-javascript/llms-full.txt) - [Reject Cloud, return to onprem Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reject-cloud-return-to-onprem/llms-full.txt) - [How to GSoC: Lessons from my open source journey Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-gsoc-lessons-from-my-open-source-journey/llms-full.txt) - [Reflections from executing a Design Sprint Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint/llms-full.txt) - [Fixing a Next.js Documentation Issue Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue/llms-full.txt) - [Mastra MCP AI Hackathon, and the Illegal Agents pivot Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/mastra-mcp-ai-hackathon-and-the-illegal-agents-pivot/llms-full.txt) - [Grayhat at COMPPEC 2025 Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-at-comppec-2025/llms-full.txt) - [How to apply to Grayhat for GSoC 2025 Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-apply-to-grayhat-for-gsoc-2025/llms-full.txt) - [Is Crypto dead? (An analysis) Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/is-crypto-dead-an-analysis/llms-full.txt) - [Python vs Mojo: Are we there yet? Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/python-vs-mojo-are-we-there-yet/llms-full.txt) - [Create Multiplayer Web Games, Faster Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/create-multiplayer-web-games-faster/llms-full.txt) - [The rise of the Full Stack Designer Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-rise-of-the-full-stack-designer/llms-full.txt) - [Automatons and AI for JavaScript Junkies Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/automatons-and-ai-for-javascript-junkies/llms-full.txt) - [Secure your ship Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship/llms-full.txt) - [Sign in with Adobe in a Next.js App Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app/llms-full.txt) - [Building Blazingly Fast with Material Design Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design/llms-full.txt) - [Build games in Swift Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/build-games-in-swift/llms-full.txt) - [I feel blue - Unveiling Culture Fit; An Immortal Myth of Recruitment Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-feel-blue-unveiling-culture-fit-an-immortal-myth-of-recruitment/llms-full.txt) - [The Evolution of SecOps, DevOps, DevSecOps, GitOps, and Developer Experience Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-evolution-of-secops-devops-devsecops-gitops-and-developer-experience/llms-full.txt) - [Design to Scale Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale/llms-full.txt) - [We built a multiplayer, web-based Mario-like game with PlayroomKit... in 7 days! Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/we-built-a-multiplayer-web-based-mario-like-game-with-playroomkit-in-7-days/llms-full.txt) - [Will Google Material withstand XR? Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr/llms-full.txt) - [CSS Clamp: A Paradigm Shift in Responsive Web Design Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/css-clamp-a-paradigm-shift-in-responsive-web-design/llms-full.txt) - [URLSession: A journey to Advanced Request Control & Configuration Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/urlsession-a-journey-to-advanced-request-control-configuration/llms-full.txt) - [Medusa.js for Entrepreneurs, Part 2: Features Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-2-features/llms-full.txt) - [Medusa.js for entrepreneurs, Part 1: Intro Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-1-intro/llms-full.txt) - [About this site Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/about/llms-full.txt) - [Agents Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/agents/llms-full.txt) - [AI Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ai/llms-full.txt) - [Amazon Web Services (AWS) Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/amazon-web-services-aws/llms-full.txt) - [Animation Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/animation/llms-full.txt) - [Announcements Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/announcements/llms-full.txt) - [Apple Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/apple/llms-full.txt) - [Apple Developer Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/apple-developer/llms-full.txt) - [AR Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ar/llms-full.txt) - [Artificial Intelligence Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/artificial-intelligence/llms-full.txt) - [Automata Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automata/llms-full.txt) - [Automation Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automation/llms-full.txt) - [Automationsolutions Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automationsolutions/llms-full.txt) - [Bots Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/bots/llms-full.txt) - [Cloud Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/cloud/llms-full.txt) - [Codegen Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/codegen/llms-full.txt) - [Company Culture Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/company-culture/llms-full.txt) - [Copilot Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/copilot/llms-full.txt) - [CSS Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/css/llms-full.txt) - [CSS 3 Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/css-3/llms-full.txt) - [Cultura Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/cultura/llms-full.txt) - [Culture Add Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/culture-add/llms-full.txt) - [Deployment Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/deployment/llms-full.txt) - [Design Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design/llms-full.txt) - [Design Tools Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design-tools/llms-full.txt) - [Developer Tools Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/developer-tools/llms-full.txt) - [Development Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/development/llms-full.txt) - [DevOps Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/devops/llms-full.txt) - [E-Commerce Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/e-commerce/llms-full.txt) - [Events Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/events/llms-full.txt) - [Flutter Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/flutter/llms-full.txt) - [Game Design Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/game-design/llms-full.txt) - [Gaming Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/gaming/llms-full.txt) - [GitOps Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/gitops/llms-full.txt) - [Google Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/google/llms-full.txt) - [Google Summer of Code Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/google-summer-of-code/llms-full.txt) - [Infrastructure Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/infrastructure/llms-full.txt) - [Innovation Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/innovation/llms-full.txt) - [Internship Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/internship/llms-full.txt) - [iOS Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ios/llms-full.txt) - [JavaScript Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/javascript/llms-full.txt) - [LLMs Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/llms/llms-full.txt) - [Material UI Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/material-ui/llms-full.txt) - [Medusa Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/medusa/llms-full.txt) - [Medusa.js Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/medusa-js/llms-full.txt) - [Meta Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/meta/llms-full.txt) - [Multiplayer Gaming Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/multiplayer-gaming/llms-full.txt) - [Next.js Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/next-js/llms-full.txt) - [NextAuth Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/nextauth/llms-full.txt) - [Notes Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/notes/llms-full.txt) - [NPM Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/npm/llms-full.txt) - [Open Source Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/open-source/llms-full.txt) - [Open Source Community Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/open-source-community/llms-full.txt) - [Playroom Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/playroom/llms-full.txt) - [PlayroomKit Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/playroomkit/llms-full.txt) - [Podcast Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/podcast/llms-full.txt) - [Product Design Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/product-design/llms-full.txt) - [Recruitment Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/recruitment/llms-full.txt) - [Recruitment Strategies Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/recruitment-strategies/llms-full.txt) - [SecOps Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/secops/llms-full.txt) - [Software Engineering Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/software-engineering/llms-full.txt) - [Supply Chain Security Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/supply-chain-security/llms-full.txt) - [Swift Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/swift/llms-full.txt) - [Swift Advanced URL Sessions Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/swift-advanced-url-sessions/llms-full.txt) - [System Design Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/system-design/llms-full.txt) - [Tech Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/tech/llms-full.txt) - [Typescript Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/typescript/llms-full.txt) - [UI Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ui/llms-full.txt) - [Unity Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/unity/llms-full.txt) - [Upskill Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/upskill/llms-full.txt) - [URL Sessions Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/url-sessions/llms-full.txt) - [UX Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ux/llms-full.txt) - [Vercel Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/vercel/llms-full.txt) - [Voice Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/voice/llms-full.txt) - [VR Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/vr/llms-full.txt) - [W3C Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/w3c/llms-full.txt) - [WhatsApp Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/whatsapp/llms-full.txt) - [xstate Tag Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/xstate/llms-full.txt) - [Abdurrehman Subhani Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/subhani/llms-full.txt) - [Aniqa Sadaf Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/aniqa-sadaf/llms-full.txt) - [Anonymous Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/anonymous/llms-full.txt) - [Asfand Yar Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asfand/llms-full.txt) - [Asher Siddique Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asher/llms-full.txt) - [Hamad Ullah Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/hamadullah/llms-full.txt) - [Maaz Tariq Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/maaz-tariq/llms-full.txt) - [Muhammad Haroon Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhammad-haroon/llms-full.txt) - [Muhammad Munaf Ul Hassan Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhammad/llms-full.txt) - [Muhammad Usama Rashid Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/usama-rashid/llms-full.txt) - [Muhid Abid Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhid/llms-full.txt) - [Saad Bazaz Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/bazaz/llms-full.txt) - [Syed Abdullah Nasir Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/nasirabdullahsyed/llms-full.txt) - [Syed Zohair Abbas Hadi Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/zohair/llms-full.txt) - [Talal Ahmed Khan Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/talal/llms-full.txt) - [Talha Momin Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/mmntlh/llms-full.txt) - [Wasif Sadiq Author Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/wasif/llms-full.txt) ## Post And Page Summaries - [AI & the Future of Work](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/ai-and-the-future-of-work) - Popular student podcast show host, Fakhar Abbas, interviews Grayhat's CEO, Saad Bazaz, along with Maaz Ali Nadeem, CEO of Vector AI. - [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025) - Inspired by Duolingo, we also gave the beta Rive Editor a try to make our AI virtual friends in MindChat come alive. TLDR; It didn't go too well. - ["I can talk to machines"](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-can-talk-to-machines) - Lessons from Saleem Koul’s journey through robotics, telecom, and engineering at scale. - [Full Stack Deployment: Setting Up CI/CD for Node.js Applications on AWS with Custom Domains](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/full-stack-deployment-setting-up-ci-cd-for-node-js-applications-on-aws-with-custom-domains) - This comprehensive guide will walk you through establishing a professional CI/CD pipeline for Node.js applications on AWS EC2, complete with custom domain configuration. - [Grayhat Summer Internship - 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-summer-internship-2025) - Ready to build the future (and present) with us? The Grayhat Summer Internship 2025 is officially open! If you're a university student eager to learn, build, and solve real-world problems with a passionate team, this is your chance to jump in and grow. - [Wrap-up: Web Social Party Game Jam!](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/web-social-party-game-jam) - Grayhat's first national game jam was an absolute blast! Over 65 developers from 10 universities battled it out to create the best multiplayer card games using PlayroomKit—and the results were wild. Here's the full behind-the-scenes breakdown. - [Creating an MVP for an unofficial v0.dev VS Code Extension clone](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/creating-an-mvp-for-an-unofficial-v0-dev-vs-code-extension-clone) - The race to generate React UI code in VSCode ensues. - [Pixels to Players: How Good Game Designs are Executed](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/pixels-to-players-how-good-game-designs-are-executed) - Taking a game from an idea to reality is hard. How do you navigate through a sea of endless ideas and technologies, to deliver something... fun? - [This is ECHO.](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/coming-soon) - Grayhat, world. World, Grayhat. - [Building a Unity Plugin in JavaScript](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-a-unity-plugin-in-javascript) - Make your JS Library compatible with Unity. - [Reject Cloud, return to onprem](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reject-cloud-return-to-onprem) - Make the Cloud Overlords tremble in fear with your half-baked SSH and Wake-on-LAN powered virtual machine emulator. - [How to GSoC: Lessons from my open source journey](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-gsoc-lessons-from-my-open-source-journey) - From Google Summer of Code, to Grayhat. - [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint) - How we (partially) applied the Google Design Sprint Kit in a project, and its reflections. - [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue) - How a small bug in the MSW example led me to contribute my first merged PR to Next.js, and what it taught me about open source. - [Mastra MCP AI Hackathon, and the Illegal Agents pivot](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/mastra-mcp-ai-hackathon-and-the-illegal-agents-pivot) - We kicked off April with the first-ever Mastra MCP Hackathon, focused on creating custom MCPs with Illegal Agents. This lead to Illegal Agents pivoting towards the metaverse. - [Grayhat at COMPPEC 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-at-comppec-2025) - We always love a place where nerds love to build - no extra fluff. Here's Usama Rashid's narrative on the events which unfolded. - [How to apply to Grayhat for GSoC 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-apply-to-grayhat-for-gsoc-2025) - 💡Note: We were not able to make the cut for the GSoC (Google Summer of Code) program this year. We will still, however, be conducting open-source projects for students internationally. Apply to our internship program here: Grayhat Summer Internship - 2025 - [Is Crypto dead? (An analysis)](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/is-crypto-dead-an-analysis) - Took me quite some days to dive deep into the crypto world. Read more to find out. - [Python vs Mojo: Are we there yet?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/python-vs-mojo-are-we-there-yet) - Hey there! I am new to both Python and Mojo languages. In this repository, I went on a mission to explore and compare these two languages from scratch, knowing only the basics of programming (I started off knowing only the basics of C++). As I continue learning both languages, I'll be tracking my progress and updating the benchmarks in the following repository. Do give it a star ⭐️: https://github.com/grayhatdevelopers/mojo-vs-python-benchmarks/ Why did I do it? I've always wanted to explore - [Create Multiplayer Web Games, Faster](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/create-multiplayer-web-games-faster) - We built a React/Vite-powered game engine, powered by Playroom. - [The rise of the Full Stack Designer](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-rise-of-the-full-stack-designer) - Design the future. - [Automatons and AI for JavaScript Junkies](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/automatons-and-ai-for-javascript-junkies) - Automatons are the forerunners to AI, but don’t underestimate them. They’re cheap, fast, predictable, and do their job perfectly. What’s the difference? Both AI and Automatons branch out from the Theory of Automata, which is a foundational concept of computing. It sees the world as consequences and actions (in their terminology, “states” and “transitions”). Automatons start off very simple; they carry out tasks in a deterministic fashion. Consider it like a branch of finite possibilities, and a - [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship) - In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks. - [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app) - Use the power of Adobe to authenticate your Next app. - [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences. I’ve been recently working on a project that, for some - [Build games in Swift](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/build-games-in-swift) - Going down the memory lane of child play, I think of the days when the world seemed so much bigger from a little boy’s eyes playing Temple Run on a borrowed iPhone - a work of enormous wonderment. Lost in the labyrinth of my favourite video game, I yearned to be part of its magical universe. A single thought endlessly echoed in my mind: "How is this game created? I want to make games like this!" As the years passed and I grew, it was no surprise that I found myself on the path of a developer. W - [I feel blue - Unveiling Culture Fit; An Immortal Myth of Recruitment](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-feel-blue-unveiling-culture-fit-an-immortal-myth-of-recruitment) - We often find ourselves widening the gyre of recruitment practices in pursuit of filling teams with the right fit – hitting all the right notes of skill set, personality, and value. The quest to find the right fit to help us grow might as well get us on the path to make-believe land. Apologies for stumping on your bubble there, but as you run towards your familiar rock, you inadvertently overlook the diamond hidden in your path. Culturally-fit hiring strategies have set their roots deep in IT - [The Evolution of SecOps, DevOps, DevSecOps, GitOps, and Developer Experience](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-evolution-of-secops-devops-devsecops-gitops-and-developer-experience) - In the fast-paced world of software development, staying ahead of the curve is essential. As build times shorten, Sprint cycles shorten, and remote culture rises, the management of the Software Development Lifecycle is rapidly being transferred from the hands of managers into the hands of developers themselves. Auditing by a manager is no longer a one-time thing; metrics of software quality like security, performance, code quality, and testing have been delegated to the developers themselves. T - [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale) - Look beyond tech, trends, and fancy buzzwords; look back to humans. - [We built a multiplayer, web-based Mario-like game with PlayroomKit... in 7 days!](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/we-built-a-multiplayer-web-based-mario-like-game-with-playroomkit-in-7-days) - How we transformed an open-source single-player game to multiplayer. - [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr) - How to Material You. - [CSS Clamp: A Paradigm Shift in Responsive Web Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/css-clamp-a-paradigm-shift-in-responsive-web-design) - In the ever-evolving world of web development, it's crucial to stay ahead of the curve. As developers, we continuously seek efficient solutions that simplify our workflows and enable us to create exceptional user experiences. CSS, with its vast array of properties and functionalities, has always posed a challenge for newcomers and seasoned professionals alike. However, the introduction of CSS clamp has revolutionized the landscape of responsive design. In this article, we will explore the remark - [URLSession: A journey to Advanced Request Control & Configuration](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/urlsession-a-journey-to-advanced-request-control-configuration) - In iOS development, URLSession provides powerful capabilities for configuring network requests and exercising fine-grained control over their behavior. Let's explore some key aspects of request configuration and how you can leverage them in your app. Cache Policies: URLSession allows you to define cache policies for your requests. Cache policies determine whether a response should be cached, and if so, how it should be used. Some of the most used policies are: * `URLRequest.CachePolicy.usePr - [Medusa.js for Entrepreneurs, Part 2: Features](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-2-features) - Cloning the frontend, backend, and admin panel repositories results in a readily available template e-commerce application with all the basic user flows, from adding a product to a basket to placing and tracking orders. Furthermore, the administration panel has every capability imaginable for a template application. Below is a brief description of all the major features ready to use in the Medusa template app: User Side (Frontend) Below are some of the prominent features readily available fo - [Medusa.js for entrepreneurs, Part 1: Intro](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-1-intro) - The world of e-commerce is experiencing unprecedented growth, with more businesses moving online each day to meet the demands of digital consumers. As the industry continues to evolve, the need for efficient, user-friendly, and powerful tools for creating e-commerce web applications has become more critical than ever. Enter MedusaJS: a powerful, open-source e-commerce platform that simplifies the process of building and managing an online store. In this blog, we'll explore the power of MedusaJS - [About this site](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/about) - ECHO is an independent publication launched in May 2024 by Saad Bazaz. If you subscribe today, you'll get full access to the website as well as email newsletters about new content when it's available. Your subscription makes this site possible, and allows ECHO to continue to exist. Thank you! Access all areas By signing up, you'll get access to the full archive of everything that's been published before and everything that's still to come. Your very own private library. Fresh content, deliv ## Post And Page Content ### [AI & the Future of Work](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/ai-and-the-future-of-work) - Slug: `ai-and-the-future-of-work` - Published: 2026-05-10T01:18:00.000+05:00 - Updated: 2026-05-10T18:27:43.000+05:00 - Reading time: 36 min - Tags: Events, Podcast, AI, Agents, Artificial Intelligence, Infrastructure, LLMs, Open Source, Voice - Authors: Saad Bazaz - Visibility: public ***The original podcast was recorded in the Urdu (اردو) language. The transcript below is a translation, written by AI and edited by humans. There may be mistakes.**FAKHAR ABBAS:** Assalamu Alaikum, dear viewers. How are you? Are you all right? I'm your host, Fakhar Abbas. A week ago, we posted on LinkedIn, Facebook, YouTube, and Instagram about the "AI bubble" that's troubling many students. Even graduates are worried about what they'll do next. In that post, I featured two experts—Maaz Ali Nadeem and Saad Bazaz—and we invited them to address your concerns. Students are asking: "Which degree should I pursue? AI, cybersecurity, computer science? What skills should I learn? And even if I have skills, will AI take away our jobs?" There's a lot of fear and doubt. To clear those doubts, we arranged a special podcast for you. Our guests are industry insiders and prominent AI experts. They'll give their responses, and we'll compare them—live—with ChatGPT. How closely do their answers align with ChatGPT? Where do they differ? We collected questions from many of you, and this podcast is based on those questions—the real concerns of students. So please watch until the end. Now, let me introduce my guests. Sitting with me is **Maaz Ali Nadeem**, co-founder and CEO of Vector AI. He is a graduate of FAST AI, 20th batch, Islamabad campus. Also with me is **Saad Bazaz**, a graduate of CS 18th batch, FAST Islamabad campus. He is co-founder and CEO of Grayhat Developers. I have great respect for both of them. Bringing such busy people from the tech industry requires a special request. The purpose of this session is to help solve your problems through their advice. I'll now ask them to briefly introduce themselves, even though I've already said a little. **SAAD BAZAZ:** Thank you so much. My name is Saad. As Fakhar said, I'm the CEO and co-founder of Grayhat. I've been working in media since I was 15—about nine to ten years now. Later, I shifted to Computer Science for my degree and did software engineering work. Then, luckily, I started working with a company in Norway, and we founded Grayhat. Some of our clients came from Silicon Valley. Since then, we've expanded. I love coding and engineering on the side, and designing things in Figma—taking them from idea to completion is my hobby. **MAAZ ALI NADEEM:** Thank you. I started a little earlier—before graduating, actually before university. My first venture was selling knock-off shoes from the Russian market to Europeans while I was in Beijing. Then we created a hoodie brand called Easy back in 2019, pre-COVID, and ran it until COVID hit. After that, I came back to Pakistan and chose to pursue higher education. That was very difficult at first. During research, I realized I just couldn't do research. So eventually, building a company and being the front face of one was the right path for me. We actively work on multiple AI-native implementations worldwide, primarily in Australia, a bit in Pakistan, Canada, and the U.S.—though not very aggressively. Right now, our focus has shifted slightly toward Europe. We've built a lot of things, and many people are using them. But that's not the point today. The point is that we'll share insights based on our failed experiences. Insha'Allah, that's the goal. **FAKHAR ABBAS:** And your core work—is that AI-related? **MAAZ ALI NADEEM:** 100% AI-related. **FAKHAR ABBAS:** What about you, Saad? Is your work also AI-related? **SAAD BAZAZ:** Basically, we form a triangle: applications, gaming, and AI. We mix and match AI applications, AI games, and so on. So yes. **MAAZ ALI NADEEM:** And ours is a pyramid: foundational models, then workflows, then platforms, then sales. We're building a pyramid of AI solutions. **FAKHAR ABBAS:** We selected questions you shared. There were some redundant ones, which we filtered out. There were many great questions. We have about fifteen questions, plus some follow-ups. I'll read each question one by one. Our panel will give their response, and then we'll compare it with ChatGPT using the same prompt. **First question: Is coding going to become obsolete?** **SAAD BAZAZ:** First, I don't fully understand the fascination with coding, honestly. I've been coding for a long time and still do it on the side. For me, coding is a way of expression, a way to give instructions to a machine. Whether you do that through a high-level language, a design tool, or an LLM doesn't really matter. That said, I don't think software engineering is going anywhere in the next five years at least. Coding itself might evolve because these high-level languages were made for humans, but low-level coding will still thrive. People might start coding more in Rust, Go, and other low-level languages like C and C++ if they want to. **FAKHAR ABBAS:** To keep it short, what would you say? If you could explain in Urdu as well. **SAAD BAZAZ:** The kind of coding people are probably talking about—React coding—that might reduce a little, but not in the long run. We still need to talk to computers using programming languages. That kind of coding won't go away. **FAKHAR ABBAS:** So Maaz, what is your take? Is coding going to be obsolete? **MAAZ ALI NADEEM:** I think Saad summarized it well, but I'll add one thing. The term "coding" basically means translating a set of instructions into software. That translation process is becoming obsolete—or at least heavily assisted by AI tools that can even replace it, given the right instructions. Engineering, however, is not being replaced. Engineering means planning software so that it is scalable, testable, and actually works. Just works. We look at many government or public service platforms. The problem is often that banking systems are down, or something isn't working. That engineering—getting it right—is going to remain, because that problem hasn't been solved yet. Sure, you can translate "this button will work like this" and "this button will take you to that page," but that's fine. **FAKHAR ABBAS:** But big tech CEOs, like Claude's CEO and Elon Musk, say coding will become useless. They say it won't even be taught as a subject. Students are very afraid. What do you say from that perspective? **SAAD BAZAZ:** They are right, I think. Take an example from before LLMs. Everything was already templatized. If you wanted to make a SaaS app, a template was available. You'd pick it, apply it, make tweaks. That was all within our domain. Look at another domain: chip design. Someone showed me the chip design lifecycle, and I thought, "This sounds so familiar." It was basically the same as the software development lifecycle, just with minor tweaks. It turns out a similar thing happened in chip design. Powerful chips are now developed in modules. No one designs individual transistors or gates anymore. This has happened before in other industries. You might be seeing it in software engineering for the first time, but it's not new. There's nothing to be worried about. **MAAZ ALI NADEEM:** Yes, nothing to be afraid of. It's a good thing. We'll have more time to think. Manual translation into code is being replaced, sure. But the thinking process remains. If no one had to think at all, then there would be room for fear. But that's not the case. **FAKHAR ABBAS:** That was our first and very crucial question. Now, the second one: People used to learn coding by studying programming fundamentals, then OOP, data structures, and so on. Separate courses. How much will that change now? Should we learn the same way or differently? **SAAD BAZAZ:** It will be a bit different. It will become more logic-based. Pseudo-code will become more important. You need to learn logic, algorithms, and how to design a proper system—whether it's electrical, software-based, or mechanical. You need good logic. **FAKHAR ABBAS:** Maaz, what do you say? Compare the coding you learned when you started versus how students in university should learn now. **MAAZ ALI NADEEM:** I think we should put more pressure on them than ever before. It's easier to get things done now. No matter how much you try to stop students, they'll still go home and open ChatGPT or Claude. So, pseudo-code is definitely important for logic building. You'll have to get them to write extremely complex pseudo-code. And to ensure proper engineering, you should also have them write actual code at a younger age. They should translate their pseudo-code and test it, because until you run it, you cannot test it or identify use cases. I think it should get harder, not easier. That's the challenge for faculty and academia: how to make it more difficult. **FAKHAR ABBAS:** Thank you. Now let's see what ChatGPT says. Is coding going to be obsolete? **ChatGPT:** **FAKHAR ABBAS:** Almost the same response. **MAAZ ALI NADEEM:** So this confirms we have the right people sitting here. **FAKHAR ABBAS:** Now the second question from the audience: Will AI take away jobs in Pakistan? This is very crucial. Layoffs are happening in other countries. How much impact will there be in Pakistan? **SAAD BAZAZ:** I don't think AI will take away too many jobs in Pakistan right now, because Pakistan hasn't been fully digitized yet. When people in other countries talk about job losses, they're talking about white-collar or desk jobs. There aren't that many of those here to begin with. Pakistan still needs to adopt management systems and ERPs—they're still just a trend right now. So there's still a long way to go. There will actually be more job creation. **FAKHAR ABBAS:** That includes two groups: people working in Pakistan's local organizations and corporate sector, and Pakistanis doing remote jobs abroad. They will be affected, won't they? **SAAD BAZAZ:** Definitely, they will. Having a person behind a screen versus a terminal in the cloud is essentially the same thing. **FAKHAR ABBAS:** What do you say, Maaz? **MAAZ ALI NADEEM:** It's scary. Recently, we delivered a project at Vector that led to ten people being laid off at a company in Karachi. That's not something to be proud of. I was recently in Davos with a Global Youth Alliance that includes Accenture and the World Economic Forum, and they think about these issues. I pointed out that the team replaced by our AI transformation—we had to earn money, but the company wanted to replace them—those people were middle-aged. Thirty-five to forty years old, with families and children. They weren't earning six-figure PKR salaries, probably sixty to seventy thousand rupees a month. That was their major source of income. So that's critical. The good thing about the first world is that when they replace someone, they think about reskilling them using CSR funds. They invest in placing those people elsewhere. That's a lot of money. Pakistan and other third-world countries cannot invest that money. If people are replaced here, that's it. They go home and have to find the next job themselves. **SAAD BAZAZ:** I disagree a little with the narrative that jobs are going away. That narrative is mostly coming from the West—from Canada, the U.S., whose economies are declining. When their economy goes down, Meta lays off 1,000 or 2,000 people, AWS lays off people, and they label it "AI transition." But if you use their applications, the quality has dropped so much that it seems those people they laid off were pretty useful! Think about it: if you have a tool that makes each person ten times more productive, why would you lay people off? Your incentive should be: if I have 1,000 people, they can now do the work of 10,000. If I have 10,000, they can do the work of 100,000. They will do more work. Layoffs are not directly caused by AI; they are a direct indication of a declining economy. **FAKHAR ABBAS:** AI is not only eliminating jobs but also creating them. **MAAZ ALI NADEEM:** Creating jobs for educated people. **SAAD BAZAZ:** No, even for others. AI artists have emerged—people who have been empowered by these tools. I think AI will create more jobs and more upgrades. This scary narrative from the West is frightening people. Pakistan already had so few jobs to begin with. What's the worst that can happen? **MAAZ ALI NADEEM:** That's true, and it's a big narrative. But somewhere along the line, it will put a lot of pressure on us, absolutely. **FAKHAR ABBAS:** Let's see ChatGPT's response. Will AI take away more jobs in Pakistan? **ChatGPT:** **FAKHAR ABBAS:** People in the automation industry talk about this. I was reading about AWS Cloud—they laid off many people, put them on automation, and later suffered huge losses and a slowdown. **SAAD BAZAZ:** CloudFlare also had an outage recently, and they also had layoffs. The CTO of AWS said you can lay off people, sure, but you cannot replace juniors. Juniors are an essential part of your human workforce. That narrative is coming from the West, but what Maaz said is absolutely right: if you don't upskill people and they are doing redundant work, that is a bad thing. **FAKHAR ABBAS:** We'll also talk about which skills you need to learn to stay relevant in the AI world. Next question: Is AI just a hype cycle or a long-term infrastructure shift? **MAAZ ALI NADEEM:** It is a long-term infrastructure shift, yes—if applied with some thought. It is in a hype cycle right now, sure, and there's also a bubble that will burst. Every hype cycle bursts. But this isn't just a bubble that will burst and disappear. It will stay. During the blockchain era, the hype cycle went bust and couldn't transform anything afterward. Everyone thought everything in Pakistan would be tokenized—real estate, rooms, everything. That didn't last. With AI, it will be more natural. It is already happening and proving results. This is definitely a long-term thing. It will be implemented in your banks as well. Whether it's implemented in Pakistan first or not isn't the question—it's being implemented in the world. AI is already handling many after-hours tasks. Somewhere, it's enabling a business to stay relevant 24/7, answering calls, triggering workflows, providing good ROI, increasing revenue. No one hates more money coming in. So it's here to stay. There will be a bubble burst, then people will identify specific use cases to mature. Once it matures, it will definitely work. It's like when pens came—they never went away. Same with electricity. This is that kind of thing. **SAAD BAZAZ:** I 100% agree with Maaz. This was inevitable. People have been prophesying this since the 1950s and 60s—that one day robots would be made. It's human nature to evolve. The question is whether this particular wave will run. Architecturally, the main backbone is the transformer architecture, which hasn't been updated since 2017. Eight years with the same architecture—variations have come, but foundationally it's still the transformer. If you're building a data center the size of an entire city, like Mark Zuckerberg is doing for $50 billion, that feels a bit rushed. You're not doing as much foundational research as you are betting on it. You're subsidizing it heavily. Honestly, paying $20 for ChatGPT is basically harming them financially. They are pushing too fast and not researching AI sustainability. Data centers are not sustainable that way. I'll link that back to their economy going down. They have to pump their economy with the power of AI right now. So the hype we have now is real, but we are also pumping. Long term, definitely, AI has a place, but this is going a little overboard. **MAAZ ALI NADEEM:** I'll add a Pakistan context. We went to Pakistani companies, and they see that ChatGPT gives either free answers or costs $20. So they ask, "Why are you telling us this project needs huge infrastructure and the quality won't be the same?" When you implement models based on 8 billion parameters and serve a bank with one or two million active users, or a telecom with forty to fifty million users, the hardware costs millions. OpenAI offers it for $20, so why are you saying hardware costs millions? The problem is we have to make money from it. We don't have $5 billion to invest and wait three years for customer acquisition. We need to make money tomorrow. The expectation-reality gap is huge. **SAAD BAZAZ:** They are banking on the hope that at some point it will become economical. That's why they're pushing. Let's see what happens. **FAKHAR ABBAS:** Now we ask the same question to AI. **ChatGPT:** **FAKHAR ABBAS:** So long-term, because so much investment is being made, they're trying to build something. Question four: What does "learning AI" actually mean? Many people say, "Learn AI or be left behind." This is very important. **SAAD BAZAZ:** My approach is fundamental. When I say learning AI, I mean keep your math and logic strong so you can understand how an AI model works—how transformer architecture works. That's what learning AI means to me. But others might have a more advanced view. **FAKHAR ABBAS:** But people say even laypeople will have to learn AI because young people are doing it. **SAAD BAZAZ:** Absolutely. For them, it's a tool. Treat AI like any new tool. Don't outsource your mind. Use it to automate boring tasks. **MAAZ ALI NADEEM:** Seven months ago, I gave an answer for software developers and engineers who want to build AI. But reading the comments, I saw a question from a layperson's perspective: "If I partner with AI as my thinking partner—to close a deal, write a proposal—we plan together. AI and I throw ideas back and forth." Or someone who only does automation, with no connection to AI, and recently had to deploy a voice agent. His job is simply to prompt that agent well and piece together the tools, with no coding. When people learn to augment AI into their workflow, that's very beneficial. You learn how to use those tools depending on your current job role. You don't need to change your role. You just need to learn the tool so it can give you 10x productivity, like Saad mentioned. **FAKHAR ABBAS:** Now we ask ChatGPT: What does learning AI actually mean? **ChatGPT:** **SAAD BAZAZ:** I see a bit of the technical side in that answer, but the balance—humans won here. We balanced it. Point to humans. **FAKHAR ABBAS:** Whenever AI is mentioned, learning AI doesn't just mean you have to predict something. As you said, you share what you want, and it helps you achieve that goal. **SAAD BAZAZ:** Even to write a good prompt, you need to understand the fundamentals of how AI works and how it consumes data. It will always follow major data trends. So if your prompt reflects those trends, you'll get a good result. **MAAZ ALI NADEEM:** Talking to AI is an art. Right now, it's two people versus one AI. **FAKHAR ABBAS:** Question five: Do you need a top-tier university to succeed in tech? Senior students who couldn't get into FAST, NUST, GIKI, or LUMS worry about whether they'll get jobs. The culture at FAST is different, at LUMS it's different. If you're studying virtually or from a different location, can you get the same experience? Maaz, you start. **MAAZ ALI NADEEM:** First, let's be honest. Yes, being in a good university has an impact. But it also depends on whether you let that impact affect you. I've seen people at FAST who wasted their time, and people at tier-three universities—names we might not have even heard—who achieved something. Being in a good university means you are more likely to succeed or do better because the environment is already built: exposure, understanding, access to the market, a better competitive environment. The tag matters. Living in Pakistan, a good pre-built environment is essential. But if you compare going to MIT or not—if you're writing code, you can build a big company regardless. But if you're a Stanford dropout or graduate, the amount of funding your company gets automatically is huge. So positioning matters. But if your positioning isn't right—if you're at a university with no exposure or competitive environment—then it's up to you to step up. There are so many things happening in cities: competitions, community events, conferences. Just get up and go for the first two years. See what people are doing. Once you understand what you have to do, it doesn't matter if you're in a tier-three or tier-one university. And if you're in tier-one and think, "I've made it to the top," that won't help. These days, even at the FAST job fair, the 100% job success rate is going downhill because people are looking for very specific skills. They don't care if your degree says "FASTian" or not. **SAAD BAZAZ:** I totally agree with Maaz. The culture you study in matters a lot. But the bottom line is: don't let it get to your head. Whether you're in tier-one or tier-three, don't question yourself. When you go to university, all cards are balanced in the first semester. Everyone is back to square one. When you graduate, less and less of that matters around the world. Not many people care—it's just a conversation starter. "Oh, I dropped out of Stanford." "Oh, from MIT." That's the first interaction with a person. After that, everything is on the same level. The company needs its needs fulfilled. It doesn't care about pedigree. Some niche companies might care, but the majority just want the job done. We also see people who say, "I'm going to solve this problem for you. I studied this, I faced this issue, and I learned this skill. That's not your concern—but I can solve this problem for you." **FAKHAR ABBAS:** There is also a plus side to not being from a top university: you have plenty of time to learn industry-relevant skills instead of spending time on theory and three-hour exam papers. **MAAZ ALI NADEEM:** Saad gave a good example. In law and medicine, where you studied matters a lot. Outside of that, it's less important now. When we came in the 20th batch, everyone had four A-stars—FSc, A-Level, ICS, etc. There was an attempt to create differences. Then we had a professor who teaches at the Multan campus, Dr. Hasan Raza. He humbled everyone within six months in programming fundamentals. Even those with four stars got F's. Then we realized it doesn't matter. The same thing happens after you get a job. "You got a 3.1 from NUST, I got a 2.5. You got a 3.9 from LUMS, I got a 3.7 from Barani Institute. No, my 2.5 from FAST is much better." People think this way in their first year of employment. After that, everyone becomes humble. No one asks where you studied. They ask: do you work at DPL, Motive, Vector, or Grayhat? It just matters what you have done. **SAAD BAZAZ:** What value do you provide? **FAKHAR ABBAS:** A related question: people get opportunities to study abroad for bachelor's—Australia, UK, USA with scholarships. Compared to a Pakistani university, what should they choose? **SAAD BAZAZ:** The reason I would answer this question better is because my family has an academic background. Even when I did my BS, I had the opportunity to go abroad, and I'm sure Maaz did too. For a bachelor's, the most important thing you'll learn is to be groomed. You learn how to converse, how to be professional. When you go out for work, you first try to fit into society. If by luck you fit into their culture, fine. But most people going abroad end up sitting with the Pakistani diaspora anyway. So what's the point of going to Canada or the U.S. if you still only hang out with Pakistanis? **FAKHAR ABBAS:** But some people have achieved great success—like Sualeh Asif. What do you say, Maaz? If you have opportunities abroad, what should you do? **MAAZ ALI NADEEM:** If you have the resources and the understanding of what you need to do after going out—if you have a plan—then it's fine. In Pakistan, if you want to study at any university, you need a plan. If you want to go abroad, you also need a plan. How will I cook there? How will I commute? How much time will I give to my studies? Do I need to earn money to sustain myself? If you have answers to these, then sure. You also need to plan your boundaries. If you're moving to the UAE for your bachelor's—which is rare—or Qatar, like Carnegie Mellon in Qatar, that breaks a lot of boundaries. **SAAD BAZAZ:** What do you think is so special about Carnegie Mellon in Qatar? **MAAZ ALI NADEEM:** 100%. Just like McDonald's in Pakistan. **SAAD BAZAZ:** Yes, McDonald's in Pakistan. You can eat there if you want, but you can also eat at home. The people you mentioned are outliers. Only about 30 to 40 percent of people who go abroad actually succeed in getting what they aimed for. **MAAZ ALI NADEEM:** From my personal acquaintances, even less than 30 to 40 percent. **SAAD BAZAZ:** And if you're selling your life savings—house, car, land—to go abroad, that's too much. If you have resources and a plan, fine. But if you think, "Everything is bad in Pakistan, so I'm going abroad and leaving everything behind," you will end up disappointed. I'm not saying it's a bad thing—maybe you get a good experience. But 70 to 80 percent of people get disappointed. The same issues exist there. **MAAZ ALI NADEEM:** And in all that, you end up selling the only house or property you owned. **SAAD BAZAZ:** Exactly. If that's what you're doing, it's a disaster. **MAAZ ALI NADEEM:** If you're still doing it, go with a plan. Otherwise, if you have money to burn, sure. **FAKHAR ABBAS:** So back to the question: Don't be discouraged if you don't get into a top university. That's not a disadvantage. Don't compare yourself to top students. Instead, press for opportunity. Let's ask ChatGPT. **ChatGPT:** **FAKHAR ABBAS:** Our panel said it doesn't matter where you got your degree. What matters is your own experience and what you can do. So even if you don't get into a top university, don't be disappointed. Absolutely. **FAKHAR ABBAS:** Question six: BS in AI versus BS in Computer Science—which one to choose? There are also cybersecurity and software engineering. Students panic and want to do AI because of the bubble. What should they do? **SAAD BAZAZ:** I'm very traditional about this. If you want to do a BSCS, CS is a mathematical science. If you're interested in math and logic, and you want to create a programming language—not just use one—then you should do CS 100%. **MAAZ ALI NADEEM:** If you come with a plan, it all comes down to planning. Do you know why you want to do a BSCS? In my case, and with most people I know, we knew why we wanted to do it. I wasn't fond of assembly language. I wanted to learn more about NLP and computer vision. So you go with a plan. At this point, the degree title doesn't matter much. Our company, Vector AI, is an AI venture studio, but our team has more full-stack software engineers than AI researchers. Just pursuing a BS in AI or attaching that title isn't very relevant anymore. It was in 2020. Not anymore. **FAKHAR ABBAS:** Let's hear ChatGPT's response. **ChatGPT:** **FAKHAR ABBAS:** That answer sounds like it's from five years ago. You can pursue whatever degree you like. **SAAD BAZAZ:** Yes, it's a bit outdated. **MAAZ ALI NADEEM:** It was diplomatic. It tried to play it safe: "Do CS first, so you don't come back asking why I didn't tell you that doing cybersecurity wouldn't be an issue." **FAKHAR ABBAS:** Big tech companies say they don't even need a degree. What do you think, Maaz? **MAAZ ALI NADEEM:** They say it's not compulsory. They never say it's not necessary. If someone with a degree comes in and is good, they're welcome. But in cases where someone doesn't have a degree and is exceptional—those people are very rare. We glorify that too much. **SAAD BAZAZ:** A degree is proof of rigor. You've gone through hardship. Someone can go through hardship in other ways. I used to know a guy who worked while studying. By the time he graduated, he was already professional. When he went for interviews, you could tell. So a degree being mandatory doesn't matter. What matters is that the person is professional. **MAAZ ALI NADEEM:** Rigor is a very important part. **FAKHAR ABBAS:** Question seven: What skills should students build, and when? During a bachelor's degree, what skills should you develop? The first semester is tough, and there are breaks in between. What do you say? **SAAD BAZAZ:** I'm very adamant about this. Every young person in university asks, "Which technology should I learn?" Don't think about technology—React, Angular, PHP. I don't want to hear that from anyone. I don't expect anyone to be a React expert. What I encourage is developing critical thinking and logic-building skills. Take an assignment or project and tie it to a real-world problem. Take a problem from home, society, your neighborhood, or your university. Go talk to your professor: "What if I do this in my project or assignment?" If they give you the green light, go do it. The second thing I strongly encourage is open source. Every student should do open source. When you code in public, people will give you feedback—sometimes harsh. If you've used AI too much or done sloppy work, that pressure will make you improve. **FAKHAR ABBAS:** Yes, Maaz? **MAAZ ALI NADEEM:** I think Saad's answer covers it. I'll add one thing: traits are now being looked at more than skills. Traits are human nature that you need to develop—honesty, presentability, accountability, communication, reliability. Skills aren't the only thing. In our company, when we went to the last job fair, our evaluation sheet had no scoring for technical skills. It scored traits: how noble is the person? That was a score. Because rigor and purpose matter a lot now. Along with skills, it's very important to work on traits. **FAKHAR ABBAS:** Some experts say skills aren't as important as problem-solving ability, system design experience, and architecture understanding—at least for the next five to ten years. What do you say, Maaz? **MAAZ ALI NADEEM:** 100%. **SAAD BAZAZ:** In Pakistan, if you open the P@SHA Salary Survey from 2023 or 2024, it still says there are very few architects, solution designers, and requirements engineers. They don't exist in our market. They will be created. Once the SDLC runs correctly, then maybe five or ten years later we'll see their impact. **MAAZ ALI NADEEM:** Unfortunately, in Pakistan, when people say "architect" or "systems designer," they assume that person has ten years of experience. They are very rare and charge a lot. They've made something that should be common into something rare. But this is totally trainable. **SAAD BAZAZ:** Yes, you can learn all these things in university. You just have to consciously choose a direction and learn it. **FAKHAR ABBAS:** Now, ChatGPT's response. **ChatGPT:** **FAKHAR ABBAS:** ChatGPT covered a lot, but most of it matched. **MAAZ ALI NADEEM:** The human angle of the answer—you get that from us. **FAKHAR ABBAS:** Next question: How do you pick a career goal and build toward it? **SAAD BAZAZ:** The biggest help is to see other people in that area. Talk to them. Network. Sometimes even copy them to learn the ropes. As a student, if you like a subject—say algorithms—and you have a good relationship with your professor, talk to them. Ask what you can do with it. They are subject matter experts. Second, go to conferences and talk to people. Ask what they're doing. Take interest in what others do. That will motivate and guide you. When you translate that into your own goals, it helps. Finally, open source and hands-on work will help you. **FAKHAR ABBAS:** Maaz, how should someone choose a career goal and pursue it? **MAAZ ALI NADEEM:** "Choosing" is a difficult word. I haven't chosen my final goal yet. We are all evolving. We don't know what we'll do for the next fifty years. I have a guy on my team who is 19. He's studying fintech at FAST, works in machine learning research, and his hobby is financial analysis. He's also studying for a CFA. Three different things. The degree is different, the current role is different, and the plan is something else. That's fine. You don't have to pick one thing. You evolve and get exposed to new things. Someone who spent time in tech might get exposed to sports and pursue that. Someone might get exposed to tailoring and open a coat shop. You pick your career goals along the journey. For the next five years, create a direction—through talking to people and trying multiple things. I started selling shoes. Maybe I'll circle back to that someday. **FAKHAR ABBAS:** Some experts say you should learn skills that AI cannot replace. Putting rotis in a tandoor—that's the perfect business. AI won't replace that. Like selling shoes. **MAAZ ALI NADEEM:** I'm sure AI can't design and sell shoes. **SAAD BAZAZ:** In Pakistan and across Asia, we force ourselves into careers purely based on money. Look, society needs all kinds of people: nurses, shoe sellers, shoemakers, tech people, healthcare workers. What matters is that your knowledge is reusable. If you've studied CS, you can translate that to other domains—maybe not healthcare, but many others. Imagine a guy running a light shop. If he's an educated electrical engineer, he will run it properly, with vision and methodology. He will scale it correctly. Customers will be happier than going to another shop where the seller doesn't even know the shape and size of a bulb and sells out of compulsion, not interest. Look at your interest and what value you as a person can provide. That should be your goal, not chasing money or trends. **MAAZ ALI NADEEM:** You see this trend in Islamabad: conventional businesses are coming back. I have friends who run a bread business called Croûte. They make amazing bread at the Islamabad Farmers Market. It's their hobby—not their day job. They're consultants by day and bread makers by night. The "Guy Who Knows Food" on Instagram—the kimchi guy. He studied something else but sells kimchi as a hobby. We order ghee from Gulberg or somewhere. They do good work. **SAAD BAZAZ:** When good people work, there's finesse. You can tell an educated person made it—the packaging, the marketing. It makes you feel good. **MAAZ ALI NADEEM:** The guy who made Anatummy burgers—why is it called Anatummy? Because he's a doctor. It's his hobby. People turn hobbies into conventional businesses, and they shouldn't be ashamed of it. They seem to enjoy them more. **FAKHAR ABBAS:** What about the donut thing? **MAAZ ALI NADEEM:** Donuts? Crusteez? You mean Crumble. He definitely didn't learn to make cookies at GIKI. It's a hobby. He should do it. **FAKHAR ABBAS:** Let's move to ChatGPT. **ChatGPT:** **MAAZ ALI NADEEM:** To some extent, it's right, but it didn't include the human element. **SAAD BAZAZ:** Keeping all of Pakistan in mind. **FAKHAR ABBAS:** Now our rapid-fire round. Please keep your answers to about a minute. Next question: Why don't we see million-dollar SaaS companies from Pakistan? All the big billion-dollar projects are built by outsiders. Investment goes abroad. No one knows Pakistan. Sualeh Asif's Cursor is from MIT, in that environment. Why not from Pakistan? What's the problem and solution? **SAAD BAZAZ:** The technical answer is we don't have investment. That's why we don't have million-dollar SaaS. But I'm more concerned about why we care about million-dollar SaaS. The million dollars they earn comes from investment, and they claim their ARR or MRR is that much. If we make even a small software that serves a small company in Pakistan, that's a big thing on its own. You need to scale to a million dollars. If it scales through your local industry and your industry adopts it, you'll make enough money that your children will be happy and your life will be set. **FAKHAR ABBAS:** Maaz? **MAAZ ALI NADEEM:** Ignore the fact that it's million or billion or thousand dollars. The fact that we don't see cool things coming out of Pakistan is an exposure problem. Our industry is not mature at all. Vyro has broken that barrier—they jumped on it and said, "No, we can do it." But it's a mindset problem. Why does this immaturity arise? Because we don't get many opportunities to go abroad. LEAP is coming to Saudi Arabia in two months, but there's already speculation that Pakistanis won't get visit visas. It's not easy. We were shortlisted for an exhibition in Vietnam—the only company from Pakistan. Vietnam's visas were closed, so we couldn't go. Sixty-nine Indian companies went. None from Pakistan. If you want to go to the U.S. or Switzerland, it's extremely difficult to get a visa. This global exposure problem also comes from governance issues. The ecosystem doesn't mature because it doesn't get chances to go abroad. **FAKHAR ABBAS:** You recently went to the World Economic Forum in Davos. How much of Pakistan's presence was there compared to India? **MAAZ ALI NADEEM:** 200 versus 10. **FAKHAR ABBAS:** Could we bring any investment? **MAAZ ALI NADEEM:** Unfortunately, we couldn't. **FAKHAR ABBAS:** ChatGPT's response. **ChatGPT:** **FAKHAR ABBAS:** Next question: What separates long-term agencies from trend chasers? **SAAD BAZAZ:** The biggest differentiator, which even big companies don't do, is R&D. Innovation. They treat it as the job of professors. "We'll adopt this when it's fully stable." For example, the CEO of a big company was at FAST for a session and said, "I don't believe in AI. AI will happen when it's stable." That mindset needs to change. Young companies founded by people with fresh PhDs—like Quest—have a higher chance of winning in the long run by doing R&D. **MAAZ ALI NADEEM:** True. If you've evolved through R&D, like Quest, you're going to win. At the agency level, groups of people quickly service things. Their reason for retaining clients is that they retain clients. Some agencies change their service offerings every month based on trends—today OpenClaw, tomorrow ClawdBot, next Blend. They're not making money from effort. Other companies use age-old tools and offer a single service. They build credibility within that service. They retain clients monthly—maybe $500 per month per client. That long-term sustainability comes from credibility in delivery. Trends won't make you money or bring you to the table. Credibility—serving a company for two years and delivering well—will benefit you. That's something we miss. **ChatGPT:** **FAKHAR ABBAS:** Next question: Pakistan is mostly service-based instead of product-based. Is that true? **SAAD BAZAZ:** It's true, and I don't have a problem with it. As long as you can engineer something valuable and compose something, it doesn't matter if it's product-based or service-based, as long as you can deliver. Product-based companies rely on business, marketing, sales, and investment. That ecosystem doesn't exist here, so we can't take that on. But if you're running a good service-based company, engineering things well, delivering quality—it doesn't really matter. **MAAZ ALI NADEEM:** 100%. I'll touch on the Davos experience again. In Davos, there's a street like Mall Road with houses of different governments and companies. The three biggest companies there were Wipro, TCS, and Infosys—primarily service companies. Multi-billion dollar companies. TCS is worth $21.6 billion with 600,000 employees. None of our companies were there because we aren't even doing service at that scale. We should worry about scale, not whether it's service or product. Palantir makes military products. TCS was there. OpenAI wasn't. Microsoft productizes OpenAI and sells it as a service. You create IP and sell that IP as a service in Pakistan. You don't always need a product subscription. Or you build a service based on that IP and sell customized services. Netsol does that. The issue isn't service vs. product or B2B vs. B2C. What matters is the scale of the question, and we tend to miss that. **ChatGPT:** **FAKHAR ABBAS:** Next question: What have been Vector AI's and Grayhat's biggest wins? **SAAD BAZAZ:** Our strength is people. Our main product is our brains. Our biggest win is that our people consistently mentor, give internships, do FYPs, and do deep R&D as a young startup. That allows us to innovate and allows our people to think beyond. When they go into services with that mindset, clients think, "This person is thinking differently." Why? Because we manufacture them to think differently. That's our biggest win. **FAKHAR ABBAS:** In one sentence: most startups crash, but yours is growing, MashaAllah. What's the one-liner? "People"? **SAAD BAZAZ:** The people are good. The people we chose, trained, and beyond. Eighty percent of our staff came through our internship programs. **FAKHAR ABBAS:** And retention is very good. **SAAD BAZAZ:** Good people are our business. **FAKHAR ABBAS:** Maaz? **MAAZ ALI NADEEM:** I don't have a particular definition of a win, but the credibility we have built—inside and outside the company—is very important. Even if someone leaves us, they won't say anything bad about us. I can guarantee that. No one will say, "They underpaid me, exploited me, or never gave me good work." Unfortunately, many people say bad things about previous companies. If no one says bad things about you, that's added credibility. Second, these people randomly refer you: "If you're looking for a company, talk to them." That word-of-mouth ensures your credibility, brand image, and that you're not shady or a scam. That credibility is our biggest win. **FAKHAR ABBAS:** Let's see what ChatGPT says about these companies. **ChatGPT:** **FAKHAR ABBAS:** Awesome. All our previous responses were twenty seconds long; this time, ChatGPT's was about half a minute with lots of data. Next question: How big is the voice AI market really? **MAAZ ALI NADEEM:** From the perspective of building a SaaS tool for voice AI, many agencies worldwide are providing voice AI services. It's very big. In Pakistan, I wouldn't say it's big initially because when you build Urdu models and deploy them, the cost is very high due to the large usability. When you use API-first integrations—GPT, ElevenLabs, and other platforms—and use the service in South Africa (English), Australia (English), or any other commonly researched language like Hindi, it's massive. Any place with a large population where some disaster is occurring or public service is being provided—ElevenLabs just partnered with Ukraine for all public service calls through their voice AI. The market is incredible: public service, banking, insurance, finance. There's a lot to do. **FAKHAR ABBAS:** Saad? **SAAD BAZAZ:** I agree. My research goes back to 2021, when we built one of the world's first speech translation engines, Omni. A year later, ElevenLabs came out with something similar. It's very lucrative. Among human senses—speech, touch, hearing, feeling—speech is a huge way we communicate. The challenge is the temporal nature of speech data; it's always hard to train on. Transformers are making it easier, but there are more modalities. Voice AI has its space. Text AI has its space. In the future, maybe brain AI will have its space—I'm doing research on that, and it seems interesting. Everything has its own place. Voice AI has a huge market. **MAAZ ALI NADEEM:** And we shouldn't glorify it too much or take it in a very regional way. You say, "Let's bring voice in Pashto. Let's start small." But we also become very ambitious: "We'll bring all fifty languages spoken in Pakistan, including Memoni and Gujarati." Brother, there isn't that much use case for those. Let's generalize things first because distribution is easier there. We quickly specialize and regionalize without any issues. **ChatGPT:** **FAKHAR ABBAS:** Next question: What does it actually take to build an AI product like ChatGPT, Cursor, Claude, MidJourney, or Perplexity? We see all these coming from outside. Claude is a big thing these days—there's even talk of banning it. Whenever something good solves people's problems, it gets used for military purposes and then suppressed. But you mentioned all the big names, including Cursor. **SAAD BAZAZ:** I'll get a little technical. I've done product management for three to four Silicon Valley projects through Grayhat, and I've run AI products—some foundational (building the model itself) and some AI wrappers that call an API. At the level of products you're describing, if you don't have R&D, you will never make it. Sorry to say. Sure, you can push with investment, push as hard as you can. But if you don't have an entire pipeline of information coming in, you won't succeed. I'm not saying you need a 100% research team. Look at DeepSeek—they don't have that, but they have an environment of research, a source from universities or people bringing information and putting it into their product. **FAKHAR ABBAS:** Some small companies with only a few people—not big tech giants—have built things like Cursor. They attract investors by floating an idea. **SAAD BAZAZ:** Same thing. Either you have a lot of money to pump (like Cursor) or you have research strength (like MidJourney). If you lack one, you might survive. If you lack both, you can't make it. **FAKHAR ABBAS:** So in Pakistan, we can't do anything like that right now? **MAAZ ALI NADEEM:** I'll add to what Saad said. It's either research or money. Research also comes from money. We tried to build a partnership with another company in Islamabad for a text-to-mobile-app platform. We built it and started running it, then stopped. We were competing with two Indian companies—one from Gujarat, one from Surat. Both got funding. But before that, there was ecosystem maturity. Maturity in knowing how to do AWS deployments, get credits, raise funding for those credits, take a proof of concept to the world, position the product—whether in the U.S., Saudi Arabia, or Australia. And given all that, access to money is necessary. Neither access to money nor access to markets with money exists, partly due to visa problems. Until that matures, it can't happen. Again, people like Vyro have broken rules, and we should start sitting with each other better. We're sitting with Grayhat after two years. **SAAD BAZAZ:** After two years, man. There's so much going on, we never find time. I love the way Vyro did it, but they were a services company for a long time, learned all the tricks and trades, then got investment plus strong R&D. **MAAZ ALI NADEEM:** They have very strong R&D. Cowlar is another example—a service company that built a product, but that's rare. **FAKHAR ABBAS:** I forgot about that. People used to pitch ideas, investors would be present. Was that real or a spoof? **MAAZ ALI NADEEM:** In reality, the Indian government supports such ideas a lot more than Pakistan. Right now, Pakistani media showed that there was no control at the India AI Summit—chaos, people couldn't enter—and claimed our summit was controlled and powerful. Unfortunately, that was wrong. They actually had tangible things to use. We didn't. And our event got canceled the next day due to rain. People who paid 10 lakh rupees each for booth setups haven't been refunded yet. **FAKHAR ABBAS:** ChatGPT's response. **ChatGPT:** **MAAZ ALI NADEEM:** It included millions in hardware as well. **FAKHAR ABBAS:** So to succeed, you need GPUs and money. Last question: How to achieve financial independence in the age of AI? Everyone wants money to become independent. Please tell us, Saad. **SAAD BAZAZ:** The standard answer is that financial independence comes from having a business and entrepreneurship. But I'll tie it to value. If you can provide value to anyone—in your job—you can achieve it. If you go to a job every day and see that AI can help the company, pitch it to your superiors and team members. Build an internal team. Do intrapreneurship. Say, "We're going to build something to accelerate this company." If the company doesn't support it, they're really missing out—they'd be a dumb company not to do it. If you get an idea alongside your work, you can always start it. In the end, if you can provide value, you will get financial independence in a capitalist world. **MAAZ ALI NADEEM:** Correct. Financial independence for 20-to-22-year-olds means having enough money so you don't have to worry about basic daily needs. The definition evolves as you grow and hit different milestones. Initially, using AI in an internship or part-time job can make that process faster and help you get that job. Second, in our company, there's a guy named Musab who studies part-time at university. He makes investments to achieve financial independence through asset building. Before investing, he might ask Claude, "Climate change is a big issue. Coffee exports are declining. Should I invest in coffee? Will coffee be valuable in the future?" Claude will answer. Or he'll ask, "JS Bank is offering me these stocks. What does this portfolio look like? What should I do given Pakistan's geopolitical situation?" This is the age of AI—access to knowledge is great. Use it to leverage financial independence. Anyone can do that in their own way. **FAKHAR ABBAS:** One more question: You've talked a lot about Claude compared to ChatGPT. Most people use ChatGPT daily. "What should I do today? Which color matches this outfit?" But for investments and business, what's Claude's advantage over ChatGPT? Who should use Claude? **MAAZ ALI NADEEM:** This is the debate like Honda vs. Toyota. Toyota has more reliability, but Honda has more luxury. I find Claude's answers more interesting—it gives me a discussion-like feel, like I'm talking to a friend. If I have to refine a proposal or prepare for Davos—figuring out who to meet and how to navigate the entire week—I sit with Claude. **FAKHAR ABBAS:** So Claude is better than ChatGPT? You find more mature answers from it. **MAAZ ALI NADEEM:** This goes on and on. **FAKHAR ABBAS:** I thought only coders or programmers use Claude. That's not the case? **MAAZ ALI NADEEM:** Creative people use it more. **SAAD BAZAZ:** It's more about taste. It depends on the person's preference. For work, it's definitely good. But Claude is a bit too much for me—it talks too much. **FAKHAR ABBAS:** Just two days ago, Claude said it can do COBOL, IBM's coding language, and shares fell 13%. So the AI industry is dropping bombs. **SAAD BAZAZ:** For general purpose, I prefer ChatGPT. For coding, definitely Claude is better. But sometimes I just need something done without the BS that models give. I go straight to DeepSeek. Its context window is so big—I throw something in and say, "Just do this. Don't talk about anything else. Just get the job done." It's made by the Chinese boys, after all. **MAAZ ALI NADEEM:** Yeah, it's a world of its own. **FAKHAR ABBAS:** I'm very thankful. Saad Bazaz did all the work—took all the raw data, filtered it, and printed this A3 page. Credit goes to Saad for the entire arrangement. Let's clap for that. These were questions from students—some about to graduate, some already graduated. Maaz, you're very experienced and involved in many places, multitasking like pipelining, MashaAllah. Saad's company has also grown a lot. Two years ago, I interviewed Maaz, and his employees were 8 to 10. Now, MashaAllah, it's 30-plus. Saad's startup is also growing a lot. May Allah bless them further. When you hire or offer internships to students, what features do you look for? What would you like to tell students? **SAAD BAZAZ:** Good question. I mostly do design and business hiring. Engineering hiring I leave to my engineering team. As a fresh grad, just be yourself. We are investing in potential—we're taking a risk on a person. Be honest and humble about what you know and don't know. Be clear about it. Second, be learning-oriented and growth-oriented. Don't prioritize a few rupees more or less. Prioritize: Am I learning? Am I growing? If you grow, you will produce value and provide it to people. That student mindset should continue throughout life. A student becomes a teacher, and the teacher also learns from the student. If you have that mindset, that's good. **FAKHAR ABBAS:** And Maaz? **MAAZ ALI NADEEM:** Not much different from Saad. Sometimes you just have to let it be. Often, people try to be smart with you, and you try to be smart with them. They come and evaluate, "This company is small. Why should I join?" Then they say, "We have one or two offers from other places." That's cool—secure yourself. But it's a two-way process. We trust you; you trust us. We are not a 50-year-old company, and you are not 20 years old. You have to work it out maturely together, with compromises from both sides. We will always be honest with you about your growth trajectory. But you also have to be honest with us about what you deliver. **FAKHAR ABBAS:** One last question from the audience that I didn't add earlier: AI is eliminating a lot of entry-level jobs for fresh graduates. You both have companies. Graduates approach you, and you have to shortlist them. What are your thoughts on entry-level jobs for fresh graduates over the next 5 to 10 years? Is the market saturated? **SAAD BAZAZ:** AWS laid off 1,000 to 1,500 people, but later their CTO said you need junior-level jobs. Juniors are part of your pipeline. Every senior was once a junior. A junior is a long-term investment—they integrate into the system, make observations, and grow. If you eliminate entry-level jobs, you will very soon become extinct. No matter how big your company is, you won't have future partners. Those juniors could be the people making products or managing AI tomorrow. Whether you're a young company or a large one, don't kill junior roles. That's not fair. **MAAZ ALI NADEEM:** If we talk like this, Claude now does financial analysis. Will we remove McKinsey's entry-level analysts? No. Because what remains is human connection. Junior software engineers sit in front of clients, listen to their problems, and build personal connections. If no one builds personal connections, the work cannot be completed. Even to deliver a landing page, we get to know the client—what they like to eat, where they live, where they go. **SAAD BAZAZ:** And there are things that aren't said, which we just infer. AI can only do what you say. **MAAZ ALI NADEEM:** 100%. So much is left to human experience. If you are a human being who is completely replaceable because you are redundant and lack the ability to adapt and grow, then yes, your job is at risk. **SAAD BAZAZ:** If you say, "No, I have to do the same work that Cursor or Claude is doing," then yeah, it's difficult to survive. **FAKHAR ABBAS:** Bundle of thanks to both of you. You've spent more than an hour and a half from your very tight schedules for the sake of students—so they can get tips and advice they've been waiting for. It's hard to connect directly with people like you. This platform was created for that purpose: to interview people so they can share their experiences for your benefit. More will follow on this channel. Thank you again. Thank you, Saad, for arranging the entire podcast room. He prepared all these things on the fly—they weren't pre-planned. **MAAZ ALI NADEEM:** He got them painted yesterday! **FAKHAR ABBAS:** Yes, painted yesterday. Amazing achievements, all the lights, etc., MashaAllah. Thank you very much, Maaz. If any question remains unanswered or you're not satisfied, you can still ask in the comment section. Take care. Best wishes to all of you. Allah Hafiz. Thank you. **SAAD BAZAZ:** Also like and subscribe to the STEM Sphere! **MAAZ ALI NADEEM:** Fakhar's STEM Sphere! ### [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025) - Slug: `our-struggles-and-wins-with-rive-2025` - Published: 2025-11-06T14:00:03.000+05:00 - Updated: 2025-11-19T23:03:41.000+05:00 - Reading time: 5 min - Tags: Animation, Design, AI, Artificial Intelligence, Flutter, Developer Tools, Design Tools - Authors: Saad Bazaz, Abdurrehman Subhani, Aniqa Sadaf, Talal Ahmed Khan, Wasif Sadiq, Muhammad Usama Rashid - Visibility: public Grayhat first met the Rive team at GDC 2024. Early startup energy, cool booth, tons of hype. At the time, we already knew about Rive, but we hadn’t actually battle-tested it in any real production scenario. It looked promising, and we filed it away as a “maybe one day” tool. *Fast forward to this year... We finally decided to give it a real shot. ## **Solly, Our First Rive Experiment** Our first test was simple. We built an animated mascot named **Solly** for MindChat. Just a cute, lively animation. It turned out pretty solid. *An animated Solly, the mascot for MindChat.In our hubris, we decided to go big. Not just animated characters. We wanted **full lip-sync and animated avatars reacting in real-time during video calls**. That’s when our rabbit hole journey began. ## **Research and Learnings** To understand what “good” looks like, we researched teams already doing this at scale. We studied Duolingo’s approach to visemes and character speech, which instantly made them our north star. We also pored over Guido Rosso's breakdown of how Duolingo uses GenAI and Rive for more technical insight. It's an excellent blend of art and tech, I highly recommend watching it: *For character structure and workflow inspiration, we found Tolan’s process incredibly useful, detailed in their post on designing their character. We also dove into the broader concepts of phonemes and visemes, looking at established solutions in the 3D space like Reallusion's iClone for AI-powered lip-sync. Enough theory, let's build. ## **Intersecting art and tech (Rive + Flutter)** To get hands-on, we learned the basics through foundational tutorials like this Rive in Flutter video and this more advanced follow-up. Community tips, like this Reddit thread on a better way to animate, and the official Rive best practices guide were essential reading. Then we got our hands dirty by running our first interactive test. We replaced the Interacting Bear Demo from GitHub with the Monster Mouth (found on the Rive Marketplace), and lipsynced it. *At this point, we were feeling pretty confident. We started exploring Rive's marketplace for rigs, especially mouth rigs and lip-sync templates: - Mouth Movement Rig - Custom Talking Avatar Lip Sync - Karaoke with Zari - Monster Mouth - Wave, Hear and Talk - Mouth Rig We built our own character in a flat, simple style so iteration would be fast. ## **Nested Artboard Hell** Then came the pain. Nested artboards. Calling inputs inside nested rigs from the parent board. This should have been trivial, as most of our designers came from an Adobe After Effects and Sony Vegas background. Instead it became a multi-day excavation. We even built a minimal reproducible Rive file just to understand the problem first, with data binding and nested artboards. We searched everywhere for answers. We scoured Stack Overflow for solutions, read through Reddit threads where users lamented broken nested animations, and followed a critical GitHub issue in the rive-flutter repository that highlighted our exact problem. The Rive community forum had a thread on passing input values that never got a definitive answer. Finally, we found a random deep-internet video that solved it. From Rive, but not on the surface. Not from official docs. Just some obscure YouTube video that succeeded where the actual product failed to explain itself. *And that’s when it hit me. Rive is not designed for professionals yet. Rive is built for early adopters, vibers, Behance-Dribbble motion designers, landing page razzle dazzle, and social media loops. Not structured engineering-grade animation pipelines. Anyone doing real character systems will eventually hit architecture problems. Rive isn’t there yet. But we were too deep in this to give up. ## **Building Our Own Playground** Once we finally got our rig working, we wanted to test it with our custom lip-sync algorithm. We tried using the third-party playground, rive.rip. Cool idea, but feature-limited. Not useful for live algorithmic testing. So we built our own playground in Flutter, specifically for real-time lip-sync with AI voices and Rive characters. You can find the source code for our Rive Playground on GitHub. And here is the deployed version you can play with: * Drag to resize ⤡ Open in new tab (function(){ var box = document.getElementById('rive-resize'); var iframe = box.querySelector('iframe'); var handle = document.getElementById('rive-resize-handle'); var minW = 200, minH = 200; // If Ghost gives width:100% (or if you want it to *look* full-width initially), // set a pixel width equal to the parent's computed width so the element can be resized. function setInitialWidth() { try { var pw = box.parentElement.clientWidth || document.documentElement.clientWidth; // Use parent's width but not less than minW box.style.width = Math.max(minW, Math.min(pw, 700)) + 'px'; } catch(e) { /* ignore */ } } // Initialize setInitialWidth(); // Recompute if window changes (keeps sensible starting width) window.addEventListener('resize', setInitialWidth); var dragging = false; function startDrag(e) { e.preventDefault(); dragging = true; // allow mouse events to reach document while still interacting with iframe iframe.style.pointerEvents = 'none'; window.addEventListener('mousemove', onDrag); window.addEventListener('mouseup', stopDrag); window.addEventListener('touchmove', onDrag, { passive: false }); window.addEventListener('touchend', stopDrag); } function onDrag(e) { if (!dragging) return; e.preventDefault(); var clientX = (e.touches && e.touches[0]) ? e.touches[0].clientX : e.clientX; var clientY = (e.touches && e.touches[0]) ? e.touches[0].clientY : e.clientY; var rect = box.getBoundingClientRect(); var newW = Math.max(minW, clientX - rect.left); var newH = Math.max(minH, clientY - rect.top); box.style.width = newW + 'px'; box.style.height = newH + 'px'; } function stopDrag() { dragging = false; iframe.style.pointerEvents = ''; window.removeEventListener('mousemove', onDrag); window.removeEventListener('mouseup', stopDrag); window.removeEventListener('touchmove', onDrag); window.removeEventListener('touchend', stopDrag); } handle.addEventListener('mousedown', startDrag); handle.addEventListener('touchstart', startDrag, { passive: false }); // optional: double-click handle to snap back to parent's width handle.addEventListener('dblclick', setInitialWidth); })(); ## **Final Result** We managed to make our animation work, with nested artboards and lip-sync. Check it out here: *It's still a work-in-progress, but we continue to learn and improve. ## **The Rive Reality Check** After this entire journey, here’s the honest breakdown. ### **The Cons** - The interface is unintuitive and tries too hard to cosplay as Figma without earning it. - Features like components and preview mode feel half-baked. - Pricing is preposterous, especially when they suddenly made exports paid mid-project. - Performance is unoptimized and multiplayer is buggy. - Browser sync pauses make it feel clunky instead of modern. ### **The Pros** - It works, at least in Beta terms. - Web-based. - Collaborative. - Fun for simple animation use cases. ### **My Verdict** If you already have working pipelines in Blender, After Effects, Spline, or your own tooling, stick with them. Rive is cool, but it is not ready for serious production beyond funky assets, splash animations, and loading screens. I still believe Rive should eventually be acquired by Figma and merged into a full pipeline. But if I see them pull a “we’ll stay independent forever” move like Figma did with Adobe, my remaining hope will evaporate. To anyone from the Rive team: If you're reading this, I'd love to talk and have a feedback session on our team's experience on the Paid plan. Maybe we can find a better way out! Peace ✌️ *Credits to:* - Umayma binte Saleem, our Web, Interactions and Graphics intern, for the first Solly animation - Ayesha Aamir (UI/UX Designer) for her research, character design and animation implementation - AbdurRehman Subhani (Lead Engineer) for building the open source Playground, and developing the lip sync algorithm with AI - Aniqa Sadaf (Product Designer) for world-building ### ["I can talk to machines"](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-can-talk-to-machines) - Slug: `i-can-talk-to-machines` - Published: 2025-10-09T22:09:12.000+05:00 - Updated: 2025-11-04T23:26:44.000+05:00 - Reading time: 6 min - Tags: Events, Software Engineering, Company Culture - Authors: Saad Bazaz - Visibility: public We had an awesome session with Saleem Koul, senior Software Engineer who has worked for around 30 years with multiple Big Tech companies including Motorola, Nokia and more (Intel, Qualcomm). ## TLDR; Based on his extensive career at industry giants like Nokia and Motorola, Mr. Saleem Koul emphasized that large, successful companies like Nokia operate on core principles of **Focus, Innovation, and Quality**. He illustrated that the best engineers distinguish themselves by proactively seeking solutions and automating processes, not just completing assigned tasks. True innovation, he taught, comes from a personal drive to improve systems and make the work of your entire team easier and more efficient, often by identifying manual bottlenecks and creating automated solutions that enhance speed, accuracy, and scalability. Ultimately, he championed the mindset of owning a problem, finding the optimal solution, and consistently striving to elevate both the product and the people around you. Saleem Koul’s career spans robotics, embedded systems, telecom infrastructure, and 5G networks. Across these domains, his approach has been consistent: focus on solving real problems, automate wherever possible, and hold the line on engineering quality. He’s seen how large companies like Nokia operate at scale, and he’s distilled clear lessons on what it takes to become an exceptional engineer inside complex organizations. ## Early Foundations Saleem’s path began at the **Pakistan Atomic Energy Commission**, in a robotics lab experimenting with early AI methods. Long before machine learning became mainstream, he worked with **single-layer perceptrons*** and **genetic algorithm**...** ***back in the late 80s and early 90s, when AI was in its early stages. He later moved to the **University of Texas at Arlington**, where he pursued **Digital Signal and Image Processing**, **Computer Vision**, and **Medical Imaging**. His research combined **MRI’s structural data with PET’s functional imaging**, improving the clarity and diagnostic utility of scans. He also worked on early UAV stability problems, applying control theory to keep aircraft stable — well before drones were commercialized. *## Entering Telecom Saleem joined **Nortel** during the UMTS rollout, then moved to **Motorola** and later **Nokia** (via Motorola’s acquisition). His core work was in **embedded systems**, developing and testing **vocoders**, signal processing components, and low-level code for **PowerPC architectures**. At Nokia, he observed that the company’s scale and resilience rested on three clear operational principles: **Focus, Innovation, and Quality**. - **Focus** meant that projects were broken into essential, well-defined components. Distractions were minimized. - **Innovation** wasn’t about brainstorming sessions; it was about finding better ways to do the work already at hand. - **Quality** was non-negotiable — systems shipped only when they met rigorous internal standards, because failure at network scale was not an option. Saleem often emphasizes that **a great engineer isn’t the one who merely finishes the task, but the one who finds the most effective way to do it**, even if that means redesigning the approach. ## Automating the Hard Work One of his most impactful contributions was in **network testing automation**. Traditionally, telecom teams performed manual drive tests: engineers would drive through test areas at night, measuring **signal strength**, **handover performance**, and **call reliability**. This process was slow, error-prone, and heavily dependent on human coordination. Saleem developed a fully automated system — later nicknamed the **Uber Driver** project. Using **Snapdragon devices**, **Qualcomm QXDM**, GPS triggers, and custom scripts, his solution automated the entire process: data collection, post-processing, visualization, and reporting. By morning, the system generated **Google Earth maps** and **presentation decks** without human intervention. The result was a **14× reduction in testing time**. More importantly, it shifted how teams thought about field validation. **“Lab simulations are useful, but real-world testing tells you the truth,” he would often point out. Environmental factors like vegetation, air quality, or building density rarely matched lab conditions. His insistence on real-world data improved network reliability and forced teams to confront gaps in their assumptions.*## Multimedia and 5G Saleem also led efforts to demonstrate **5G multimedia streaming** at **26 GHz and 39 GHz** bands. These live demos involved transmitting **4K and 8K video** over directional links — a technically demanding task that revealed issues like line-of-sight sensitivity, multi-base station synchronization, and OS-specific bugs. His role was to ensure these demos worked **end-to-end**, across devices, networks, and platforms. It was an example of how deep technical expertise, combined with disciplined execution, enables innovation at scale. ## Navigating Large Organizations Saleem is candid about the realities of working inside large technology companies. Technical excellence is essential, but **organizational dynamics** play a major role. Promotions often lead to managerial tracks, where technical work is replaced by politics and coordination. He consciously chose to remain on the engineering track, focusing on building systems rather than managing teams. **“If you’re technically strong, the system will always need you,” he says. “But at some point, you peak at a certain engineering level.”## Mentorship and Leadership Saleem spent time as an **educational leader** for Nokia, mentoring interns. He highlights the rewarding nature of seeing their mentees go on to successful careers, often earning more money and securing better jobs than they had. He stressed that having a non-traditional degree (like a BA or a Mining Engineering degree) is not a barrier in the US corporate culture if one is enthusiastic and performs well. He reflects on his career trajectory, explaining why he **chose not to move into managerial roles** despite reaching the top of the technical ladder. He **disliked corporate politics**, which became more intense at higher managerial levels. Although there is some politics in technical roles as well, he emphasized that **strong technical skills make one indispensable**. This dislike for politics ultimately shaped his decision to remain in technical and innovation-driven roles rather than pursuing senior management positions. Saleem’s manager once encouraged him to move into a managerial position, given his years of experience and technical strength. Saleem declined. He explained that he preferred solving problems directly rather than managing people or politics. His exact phrasing was: ****“**I told him**, I can talk to machines. I can’t talk to people.”**## On Programming (C Language) and Embedded Systems When asked about their favorite aspects of **C programming**, Saleem explains: - His work started off mostly on **embedded systems**, with limited memory and processing power. - Libraries and high-level abstractions common on PCs were not feasible; instead, **efficient C and assembly** were required to work with microcontrollers like **Motorola 68040** and **PowerPC**. Over time, they worked across many domains — **electrical engineering, mechatronics, robotics**, and software — before finding their niche. ## Reflections on Skills, Innovation, and Workplace Realities **Innovation is self-driven**: No one told Saleem to innovate; he identified inefficiencies and built better solutions. To **stand out as an engineer**, one must: - Be proactive in problem-solving. - Strive for the **“best way”** among many possible solutions. Saleem recalled his early days manually calculating throughput line by line in terminals before automating testing, which drastically improved speed and efficiency. **"I'll tell you clearly, from my experience, your boss will never tell you to innovate... No one ever told me, this isn't good, do this, do that, it'll be so much better. No! I have a nerdy habit, if I am doing something redundant, I get bored... and then I automate it!"## Global Standards, Academia, and Technological Roots Saleem briefly traced **technological foundations**: - Mentioned **Orthogonal Frequency Division Multiplexing (OFDM)**, **cosine transform** (core of JPEG), and figures like **Dr. K. R. Rao** (University of Texas at Arlington), his supervisor, whose work became industry standards. - Standards compliance involves massive, detailed requirement PDFs that all vendors must follow. Saleem emphasize how **industry builds on academic research**, but commercialization requires strict global standardization. ## Observations from Home After returning to Pakistan, Saleem continued working remotely for US companies. Eventually, **taxation issues and unreliable infrastructure** made it unsustainable. He has been clear in his assessment of the local tech landscape: Pakistan remains in a **catch-up phase**, often competing on cost rather than building ecosystems. In contrast, India’s early investments in infrastructure and capability have allowed it to leap forward. ## Takeaways Saleem’s career offers practical lessons for engineers and organizations alike: - **Anchor in Focus, Innovation, and Quality.** These principles scale. - **Automate wherever possible.** If a task is repetitive, make it disappear. - **Validate in the real world.** Simulations have limits. - **Stay technically sharp.** Strong engineers shape products as much as managers. - **Adapt to structures but don’t be consumed by them.** His journey reflects how sustained technical excellence, applied consistently over decades, can shape industries — often without fanfare. *One with the team. ### [Full Stack Deployment: Setting Up CI/CD for Node.js Applications on AWS with Custom Domains](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/full-stack-deployment-setting-up-ci-cd-for-node-js-applications-on-aws-with-custom-domains) - Slug: `full-stack-deployment-setting-up-ci-cd-for-node-js-applications-on-aws-with-custom-domains` - Published: 2025-05-13T15:00:41.000+05:00 - Updated: 2025-05-13T15:00:41.000+05:00 - Reading time: 9 min - Tags: DevOps, Cloud, Automation, Deployment, Development, Software Engineering, Amazon Web Services (AWS) - Authors: Syed Abdullah Nasir - Visibility: public 💡This is a repost from Abdullah's original blog on Medium. Check it out here: https://medium.com/@nasirabdullahsyed/full-stack-deployment-setting-up-ci-cd-for-node-js-applications-on-aws-with-custom-domains-8924217cb1a4In today’s competitive digital landscape, the ability to deploy applications quickly and reliably is essential for development teams. This comprehensive guide will walk you through establishing a professional CI/CD pipeline for Node.js applications on AWS EC2, complete with custom domain configuration. Whether you’re a solo developer or part of a larger team, these automation techniques will streamline your workflow and ensure consistent deployments. # Understanding CI/CD and Its Benefits Continuous Integration and Continuous Deployment (CI/CD) revolutionizes the software development lifecycle by automating testing and deployment processes. Instead of manually transferring files and restarting services, a well-configured CI/CD pipeline handles these tedious tasks automatically when you push code changes to your repository. The benefits include: - Reduced human error during deployments - Faster release cycles - Consistent testing before production deployment - Easier rollbacks when issues arise - Better collaboration within development teams # Prerequisites Before we dive into implementation, ensure you have: - An active AWS account with permissions to create and manage EC2 instances - A Node.js application ready for deployment (either existing or new) - A GitHub repository containing your application code - A domain name (if implementing the custom domain section) # Part 1: Setting Up Your AWS Infrastructure # Launching an EC2 Instance Let’s begin by creating the server that will host your application: - Log in to your AWS Console and navigate to the EC2 Dashboard *****AWS EC2 Dashboard****- Click the “Launch Instance” button - Select an appropriate Amazon Machine Image (AMI). For Node.js applications, Ubuntu or Amazon Linux 2 are excellent choices due to their stability and widespread support *****EC2 Launch Instance Section 2 — Application and OS Images (Amazon Machine Image)****- Choose an instance type. For smaller applications or testing environments, the free-tier eligible t3.micro is sufficient. Production applications may require more resources depending on traffic expectations *****EC2 Launch Instance Section 3 — Instance type****- Configure a key pair. This is critical for secure SSH access to your instance. Either create a new key pair or select an existing one, but ensure you download the private key file (.pem) if creating a new one *****EC2 Launch Instance Section 4 — Key pair (login)*********EC2 Launch Instance Section 4.1 — Key pair (login) — Create key pair Popup****- Configure security groups to allow the necessary network traffic: - SSH (port 22): Restrict to your IP address for security - HTTP (port 80): Allow from anywhere (0.0.0.0/0) - HTTPS (port 443): Allow from anywhere (0.0.0.0/0) *****EC2 Launch Instance Section 5 — Network settings****- Configure storage settings: - For most Node.js applications, the default storage allocation (8 GB) is sufficient - Use General Purpose SSD (gp2 or gp3) for balanced performance - Consider increasing storage if you anticipate **storing large media files**, **accumulating extensive logs**, **hosting databases locally (though a separate RDS instance is recommended for production) - **You can always increase storage later if needed *****EC2 Launch Instance Section 6 — Configure storage****- Launch the instance and note the Public IP address assigned to it *****EC2 Launch Instance Section 8 — Summary*********EC2 Instance Tab****# Setting Up the Server Environment After launching your EC2 instance, you’ll need to install the necessary software: - Connect to your instance via SSH: *****EC2 Instance — Connect Section — SSH Client Tab****ssh -i /path/to/your-key.pem ubuntu@your-ec2-public-ip - Update the package repositories: sudo apt update - Install Node.js and npm: sudo apt-get install -y nodejs - Install Nginx to act as a reverse proxy and check its status: sudo apt-get install nginx sudo systemctl start nginx sudo systemctl enable nginx sudo systemctl status nginx - Install PM2, a process manager that will keep your Node.js application running: sudo npm install -g pm2 At this point, navigating to your EC2 instance’s public IP address *http://your-ec2-public-ip/* in a browser should display the default Nginx welcome page, confirming that your web server is working correctly. # Part 2: Configuring GitHub Actions for CI/CD GitHub Actions provides an elegant way to implement CI/CD directly within your GitHub repository. We’ll set up a workflow that automatically deploys your application whenever changes are pushed to the main branch. # Setting Up a Self-Hosted GitHub Runner Unlike GitHub’s cloud-based runners, a self-hosted runner gives you direct access to your EC2 instance during deployment: - In your GitHub repository, navigate to Settings > Actions > Runners. *****GitHub Repository Settings — Actions Tab****- Click “New self-hosted runner” - Select “Linux” as the operating system. - Follow the provided instructions to download, configure, and run the GitHub Actions runner on your EC2 instance. *****GitHub Repository Settings — Actions Tab — New Runners Setup****Once installed, set up the runner as a system service to ensure it runs continuously: cd ~/actions-runner sudo ./svc.sh install sudo ./svc.sh start Verify that the service is running: sudo ./svc.sh status # Creating the GitHub Actions Workflow Now, create the workflow definition that will trigger your deployments: - Add your applications environment variables as a GitHub Secret *****GitHub Repository Settings — Secrets and Variables Tab*********GitHub Repository Settings — Secrets and Variables Tab — New Repository Secret Setup****- In your repository, create a directory structure .github/workflows/ - Add a file named deploy.yml with the following content: name: Node.js CI/CD # Trigger the workflow on pushes to the "main" branch on: push: branches: [ "main" ] jobs: build: # This job runs on your self-hosted runner runs-on: self-hosted steps: # Step 1: Checkout the latest code - uses: actions/checkout@v4 # Step 2: Setup Node.js environment - name: Use Node.js 20.x uses: actions/setup-node@v3 with: node-version: '20.x' cache: 'npm' # Step 3: Install dependencies - run: npm ci # Step 4: Set up environment variables # This step assumes you've stored your env variables as GitHub Secrets - run: | touch .env echo "${{ secrets.PROD_ENV }}" > .env # Step 5: Build the project if needed - run: npm run build --if-present # Step 6: Restart the application using PM2 - run: pm2 restart node-app || pm2 start server.js --name node-app This workflow performs several important functions: - Checks out your code on the EC2 instance - Sets up the appropriate Node.js version - Installs dependencies with npm ci (which is faster and more reliable than npm install) - Creates an environment file with your secrets - Builds your application if needed - Starts or restarts your application with PM2 # Configuring Nginx as a Reverse Proxy Now, set up Nginx to direct incoming web traffic to your Node.js application: sudo nano /etc/nginx/sites-available/default Replace the default configuration with: server { listen 80; server_name _; # For API endpoints location /api { rewrite ^\/api\/(.*)$ /api/$1 break; proxy_pass http://localhost:4000; # Adjust port to match your application proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } Test the configuration and restart Nginx: sudo nginx -t sudo systemctl restart nginx # Part 3: Adding a Custom Domain A professional application should have a proper domain name rather than an IP address. Let’s configure your application to use your custom domain. # Setting Up DNS Records - Log in to your domain registrar’s dashboard (e.g., Namecheap, GoDaddy, Route 53). - Navigate to the DNS management section for your domain. - Create A records pointing to your EC2 instance: - Type: A Record - Host: @ (for root domain) - Value: Your EC2 instance’s public IP address - TTL: 3600 (or recommended value) - For the www subdomain: - Type: A Record - Host: www - Value: Your EC2 instance’s public IP address - TTL: 3600 # Updating Nginx Configuration for Your Domain - Create a new Nginx configuration file for your domain: sudo nano /etc/nginx/sites-available/default - Add the following configuration: server { listen 80; server_name your-domain.com www.your-domain.com; # For API endpoints location /api { rewrite ^\/api\/(.*)$ /api/$1 break; proxy_pass http://localhost:4000; # Adjust if needed proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # For serving static content or frontend location / { proxy_pass http://localhost:4000; # Adjust if needed proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } - Enable the new configuration: sudo ln -s /etc/nginx/sites-available/your-domain.conf /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl restart nginx # Securing Your Application with SSL/TLS Adding HTTPS encryption is crucial for modern web applications: - Install Certbot and the Nginx plugin: sudo apt update sudo apt install certbot python3-certbot-nginx - Obtain and install SSL certificates: sudo certbot --nginx -d your-domain.com -d www.your-domain.com - Follow the prompts to complete setup, choosing to redirect all HTTP traffic to HTTPS. - Certbot automatically configures renewal, but you can test it: sudo certbot renew --dry-run After SSL configuration, your Nginx setup will be updated to handle HTTPS connections securely. # Part 4: Verifying and Testing the Deployment After completing the setup, it’s time to verify that everything works as expected: - Push a change to your repository: git add . git commit -m "Test CI/CD deployment" git push origin main - Monitor the GitHub Actions workflow in your repository’s Actions tab. - Once the workflow completes, visit your domain or EC2 public IP address to verify that your application is running correctly. - Check the PM2 status on your EC2 instance: pm2 status # Advanced Optimizations To further enhance your deployment, consider these advanced optimizations: # Allocating an Elastic IP An Elastic IP ensures your application remains accessible even if your EC2 instance is restarted: - In the AWS Console, navigate to EC2 > Elastic IPs. - Allocate a new Elastic IP address. - Associate it with your EC2 instance. - Update your DNS A records to point to this new Elastic IP. # Implementing a CDN For applications serving users across different geographic regions, a CDN can significantly improve performance: - Set up AWS CloudFront or another CDN service. - Configure the CDN to use your domain as the origin. - Update your DNS records to point to the CDN distribution. # Setting Up Monitoring and Logging Implement monitoring to stay on top of your application’s health: - Install a monitoring agent like AWS CloudWatch or set up Prometheus. - Configure alerting for critical metrics like CPU usage, memory utilization, and disk space. - Set up centralized logging with tools like CloudWatch Logs, ELK Stack, or Graylog. # Common Troubleshooting Tips If you encounter issues during setup, check these common problem areas: - **DNS Resolution Issues**: Use nslookup your-domain.com to verify DNS propagation. - **Connection Refused Errors**: Check that your security groups allow traffic on the necessary ports. - **Application Not Running**: Check PM2 logs with pm2 logs node-app. - **Nginx Configuration Problems**: Review error logs with sudo tail -f /var/log/nginx/error.log. - **SSL Certificate Issues**: Ensure that Certbot completed successfully and check for certificate errors in browser developer tools. # Conclusion You’ve now set up a professional-grade CI/CD pipeline for your Node.js application on AWS EC2, complete with a custom domain and HTTPS encryption. This automation will save you countless hours of manual deployment work while ensuring consistent and reliable updates to your application. By leveraging GitHub Actions, you’ve created a streamlined workflow that automatically deploys your code whenever changes are pushed to your repository. This approach facilitates rapid iteration and helps maintain a consistent development experience across your team. The addition of a custom domain with SSL/TLS encryption provides a professional appearance and ensures secure communication between your users and your application. Remember to maintain your infrastructure by keeping your server updated and monitoring your application’s performance. For more advanced scenarios, consider exploring container-based deployments with Docker and Kubernetes, which can provide even greater flexibility and scalability for complex applications. Happy coding and deploying! ### [Grayhat Summer Internship - 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-summer-internship-2025) - Slug: `grayhat-summer-internship-2025` - Published: 2025-05-12T01:45:54.000+05:00 - Updated: 2025-05-20T16:34:09.000+05:00 - Reading time: 11 min - Tags: Announcements, Internship, Company Culture, Upskill - Authors: Talal Ahmed Khan - Visibility: public Every summer at Grayhat, we open our (virtual) doors to a group of curious, driven, and collaborative university students who are excited to build real-world projects, solve meaningful problems, and grow in an environment that values experimentation and impact. This year, we’re back—and better than ever! Join our Discord in the meanwhile: https://discord.gg/xcBpqMDP2E ## Are we all you want in an internship? At Grayhat, our summer internship program offers a dynamic experience designed to help you thrive in your career endeavors. Our challenging work environment will support and nourish both your professional and personal growth. We look for interns with fresh ideas, insights, and a knack for growth. The experience is all serious work with a pinch of fun! If you want to work for a company that challenges you and recognizes your contributions, Grayhat is the employer for you! ## Who is she? Grayhat? Oh, she’s full of wonders. Offers services. Has her own product. Open-source contributions. Beyond her product Omni, she is dramatically expanding into services in AI, Game Development, Web Dev and Mobile Dev, you name it! Work ** Upon arrival at Grayhat, interns are given meaningful work assignments that have a direct impact on the business. Interns set a personal development goal as well as professional development goals with their managers on their first day. These goals allow interns to drive their own career development and experiences while at Grayhat. We give interns the autonomy to create, get involved, make mistakes, and get a chance to tug on the turbulent industry ropes. Grow ** We believe in individual growth. Therefore, intern growth is not only encouraged, it is the expectation! We have both formal and informal programs designed to mentor our interns and help them advance their personal and professional journeys from good to GREAT! Experience ** If you ask any of our past interns, they will tell you that no day is ever the same! In between working on your project goals, you would have the opportunity to participate in team brainstorms, attend company meetings led by our Senior Leadership, collaborate, break bread together, and even enjoy our activity days! ## Open Positions UI/UX ** Join our dynamic design team as a UI/UX Design Intern and contribute to creating user-centered and visually compelling digital experiences. This internship offers the opportunity to be involved in the full spectrum of the design process, from understanding user needs to crafting intuitive interfaces. If you are passionate about both the science of user experience and the art of user interface design, and eager to create impactful digital products, we encourage you to apply! **Requirements** - A strong portfolio showcasing your understanding of both UI and UX principles and your design process. - Proficiency in design and prototyping tools such as Figma, Sketch, Adobe XD (or similar). - Familiarity with user research methods and the ability to translate insights into design decisions. - Experience in creating user flows, wireframes, and interactive prototypes. - Solid understanding of visual design principles, typography, color theory, and layout. - Knowledge of usability and accessibility best practices. - Strong knowledge of human-computer interface (HCI) - Strong knowledge of User Experience techniques - (bonus) Familiarity with Design Sprints - Strong communication and collaboration skills. - A user-centric mindset with a passion for creating effective, enjoyable, and aesthetically pleasing digital experiences. Product Design ** Become an integral part of our product development team as a Product Design Intern, contributing to the creation of user-centered and innovative products. This internship offers a unique opportunity to be involved in the entire product lifecycle, from ideation to iteration. If you have a passion for understanding user needs, solving complex problems through design, and creating impactful and user-friendly products, we encourage you to apply! **Requirements** - A strong portfolio showcasing your design process and problem-solving skills. - Familiarity with user-centered design (UCD) principles and methodologies. - Strong understanding of the product design lifecycle (or Industrial Design life cycle) - Proficiency in design and prototyping tools such as Figma, Sketch, Adobe XD (or similar). - Basic proficiency in 3D modelling tools like Sketchup. - Understanding of user research methods and the ability to translate insights into design decisions. - Experience with creating wireframes, prototypes, and user flows. - Basic understanding of visual design principles, usability, and accessibility. - Strong communication and collaboration skills. - A curious and empathetic mindset with a passion for creating meaningful products. Web, Interaction and Graphic Design ** Join our creative team as a Web, Interaction, and Graphic Design Intern and contribute to crafting engaging and visually appealing digital experiences. This internship offers a unique opportunity to blend your passion for aesthetics, user-centered design, and web functionality. If you have a strong visual eye, an understanding of user interaction principles, and a desire to create impactful digital products, we'd love to hear from you! **Requirements** - A portfolio showcasing your design skills in web design, graphic design, and/or interaction design. - Proficiency in design software such as Adobe Photoshop, After Effects, Illustrator, and Figma (or similar), OR proficiency in web design tools like Framer, Webflow, Wordpress - Understanding of animation design and implementation - Basic understanding of web design principles, including layout, typography, and color theory. - Familiarity with user interface (UI) and user experience (UX) concepts. - Basic knowledge of HTML and CSS is desirable. - Understanding of responsive design principles. - Strong understanding of graphic design principles. - Strong visual communication skills and attention to detail. - Ability to work collaboratively and incorporate feedback. - A passion for creating user-friendly and aesthetically pleasing digital experiences. Artificial Intelligence (AI) ** Join our cutting-edge AI team as an intern focused on the exciting intersection of Machine Learning Operations (MLOps) and Natural Language Processing (NLP). This unique opportunity will allow you to contribute to the development, deployment, and optimization of intelligent systems that understand and process human language. If you have a strong foundation in programming and a keen interest in both the engineering aspects of AI and the fascinating world of language, this internship offers a valuable chance to gain hands-on experience in two critical and rapidly growing areas of artificial intelligence. **Requirements** - Solid understanding of fundamental programming concepts. - Familiarity with machine learning concepts and workflows. - Basic understanding of Natural Language Processing (NLP) techniques (e.g., text preprocessing, sentiment analysis, language modeling). - Exposure to or a strong interest in learning about MLOps principles, including model deployment, monitoring, and version control using tools like MLflow or similar. - Familiarity with data versioning concepts and tools like DVC (Data Version Control) is a plus. - Familiarity with relevant libraries and frameworks in both ML (e.g., TensorFlow, PyTorch, scikit-learn) and NLP (e.g., NLTK, spaCy, transformers). - Understanding of data manipulation and analysis using libraries like Pandas and NumPy. - Basic understanding of containerization technologies (e.g., Docker) and cloud platforms (e.g., AWS, Azure, GCP) is a plus. - Strong analytical and problem-solving skills. - Excellent communication and a proactive approach to learning and contributing to a dynamic team. - Familiarity with version control systems like Git. Game Development ** Join our programming team as a Game Development Intern and contribute to the core mechanics and systems that drive our games. If you have a solid foundation in programming, enjoy tackling complex technical challenges within a creative context, and are eager to see your code bring game worlds to life, this internship offers a unique opportunity to hone your programming skills in the exciting field of game development. **Requirements** - Strong proficiency in at least one relevant programming language (e.g., C#, C++). - Basic understanding of object-oriented programming (OOP) principles. - Familiarity with game engine architecture and scripting (e.g., Unity's MonoBehaviour, Unreal Engine's Actors). - Understanding of fundamental concepts in game programming (e.g., physics, AI, animation). - Experience with version control systems like Git. - Strong analytical and problem-solving skills. - A passion for video games and a desire to contribute to gameplay and technical implementation. Game Tools Engineer ** Join our dynamic team as a Game Tools Engineering Intern and contribute to the development and maintenance of tools that support our game developers and enhance our game development pipeline. This internship offers an exciting opportunity to learn about the game development process and gain hands-on experience in creating solutions that empower other developers. We are looking for enthusiastic candidates with a foundational understanding of Unity and C#, a passion for problem-solving, and a strong desire to learn about game development tools, software architecture, networking principles, and low-level programming concepts. **Requirements** - Basic understanding of Unity and C# programming. - Familiarity with the C# syntax and a willingness to write clean code. - Interest in learning about algorithms and their application in game development. - Eagerness to learn the design, development, and maintenance of custom Unity Editor tools and plugins. - Interest in understanding how tools can improve workflows for asset management, level design, data visualization, and debugging. - Willingness to learn about maintaining custom packages within Unity. - A desire to identify potential bottlenecks in the development pipeline and explore tool-based solutions. - Basic familiarity with version control concepts, ideally Git. - Developing debugging skills and a willingness to learn how to identify and resolve issues in Unity projects. - Interested in backend development. - Interest in understanding the game development life cycle (GDLC) or SDLC. - Ability to work collaboratively within a team and contribute to tool development tasks. - Strong communication skills and a willingness to ask questions and learn from experienced developers. - Currently pursuing a Bachelor's degree in Computer Science, Computer Engineering, or a related field with coursework in Computer Networks and Software Architecture. - Basic understanding of networking concepts and socket programming is a plus. - Above average grades in introductory programming, software development, computer networks, and software architecture coursework are a plus. Web Development ** Join as a Web Development Intern to assist in building and maintaining engaging and functional web apps. If you have a keen interest in front-end and back-end technologies, enjoy problem-solving, and are ready to work on real-world projects, this is the perfect opportunity for you. **Requirements** - Knowledge of HTML, JavaScript, and relevant web development frameworks. - Basic understanding of server-side languages such as React.js, Next.js, or Node.js. - Familiarity with version control systems like Git. - Strong problem-solving abilities and a proactive mindset. - Experience with responsive and adaptive design is desirable. Software Engineering ** Join our team at Grayhat as a Software Engineering Intern, contributing to the successful planning, execution, and delivery of our software development projects. If you have strong organizational and communication skills, an interest in technology, and a desire to learn about the structured processes that drive software creation, this internship offers a valuable opportunity to gain hands-on experience in managing complex technical projects. **Requirements** - Strong organizational and time-management skills. - Excellent written and verbal communication abilities. - Basic understanding of project management principles and methodologies. - Familiarity with different Software Development Lifecycles (SDLCs) such as Agile, Waterfall, etc. - Interest in learning about project planning tools and techniques. - Ability to work collaboratively within a team environment. - Proactive attitude and a willingness to learn about the software development process. - Proficiency in basic office software (e.g., Google Workspace, Microsoft Office Suite). - Any prior exposure to software development concepts is a plus. Quality Assurance (QA) and Testing ** Become a crucial part of our engineering process as a QA and Testing Intern. You'll contribute to ensuring the quality and reliability of our software and applications through meticulous manual **and automated** testing and analysis. If you possess a sharp eye for detail, enjoy identifying and resolving issues, and are passionate about delivering high-quality products, this internship offers a fantastic opportunity to gain hands-on experience in the world of software quality assurance. **Requirements** - Strong analytical and problem-solving skills with a keen attention to detail. - Basic understanding of software testing principles and methodologies, **including automated testing concepts**. - Familiarity with different types of testing (e.g., functional, usability, regression), **and an interest in learning about test automation**. - Ability to clearly document and communicate test results and identified defects. - **Exposure to or a willingness to learn automation tools and frameworks.** - Experience with bug tracking tools (e.g., Jira, Bugzilla) is a plus. - A proactive approach and a desire to learn and contribute to a quality-focused team. Business Operations ** Join our Business team as a Business Operations Intern, where you'll gain valuable experience in HR operations, account executive operations, marketing, social media, and more. This role is perfect for individuals with excellent interpersonal skills, a passion for people management, and a desire to learn about HR, marketing and sales practices in a dynamic environment. **Requirements** - Strong interpersonal and communication skills. - Basic understanding of HR or Sales or Marketing principles and practices. - Excellent organizational and time-management abilities. - Proficiency in Google Office Suite (or Microsoft). - Prior experience or coursework in HR is beneficial. Click Here to Apply for Summer Internship 2025## Wait, there's more! ### Do your Final Year Project/Thesis with us Grayhat has built strong ties with academia for the past two years. We've collaborated with: - GIKI (Ghulam Ishaq Khan Institute of Engineering Sciences and Technology) - Swabi - FAST National University of Computer and Emerging Sciences - Islamabad - NUST (National University of Science and Technology) - Islamabad - MAJU - Karachi - NEDUET - Karachi - Beaconhouse National University - Lahore With students and faculty from the above universities, we've supervised multiple Final Year Projects to fruition, out of which 80%+ receive an A grade (or better). This year, we plan to engage **Final Year students **from **all universities across the world, **and also plan to onboard **MS Thesis **students with our program. So if you're an undergraduate or postgrad student looking to spend your year building something impactful, fill out the form below. Click Here to Apply for FYP/MS Thesis Supervision## Previous Final Year Projects ### 2024-2025 (latest) ### Babelfish ** As part of our continued movement to push the boundaries of human communication, Grayhat supervised ****Babelfish, ****a real-time voice translation engine, in a collaboration with BIOMISA. *****BIOMISA *******is a lab at College of EME, NUST leading the research in BioMedical Image and Signal Analysis. It's led by *******Dr. Usman Akram *******who is one of the youngest PhDs of Pakistan, working in AI in healthcare. ** ActorDB ** After struggling with introducing Omni to professional video editors, we found it necessary to build an open-source video-indexing engine which could later be ported to Adobe Premiere Pro. WorkStack ** Grayhat self-hosts most of its digital infrastructure, on its on-premises server systems. To make work smoother, we have a "stack" of tools we use. This project aimed to make that stack more deeply integrated with one another. Deepfake Detection Dashboard ** Where we build deepfakes (for good), we also needed a protection and tagging verification for our generations. ### 2023-2024 DubLingo ** We rebuilt our original dubbing engine for Urdu, in our collaboration with UrduX. *****UrduX *******is a lab at FAST NUCES leading the research in Natural Language Processing. It's led by *******Dr. Mehreen Alam******* who is a dedicated researcher and a proud Pakistani who wants to push the boundaries of AI in Pakistan. She is truly aiming for academic and industry collaboration. ** Learn more: LinkedIn post ### 2022-2023 Dublr ** Our original pipeline was rebuilt with more modern components, in collaboration with students from GIKI, Topi, Swabi. ## FAQs What do we look for? ** Above all, we look for individuals who are willing to commit to learning and growth. It can get rough, but you come out polished. Will the internship be paid? ** Yes, internships at Grayhat are paid. What is the duration of this internship? ** 2 months. What is the selection process? ** We receive all applications directly through our website and review each by hand. Our recruiting team will reach out to further discuss application materials if we find a relevant match in skillset and experience. How long until I'll get a response? ** It usually takes a week or 2. Where is Grayhat located? ** https://g.co/kgs/qdGj2mZ Is the FYP/Thesis program paid? ** Depends. Grayhat has a policy of hiring part-time people only from their FYP/Thesis groups. How does supervision work? Is it done entirely by the Grayhat team, or in collaboration with our university supervisor? ** Your academic supervisor is your primary supervisor. They will guide you in terms of: - - Timelines with the university - How to conduct academic research - They will review your academic submissions - Q/A and technical details/guidance on deliverables A Grayhat representative would be your secondary supervisor. They will guide you in terms of: - - Conducting product market research - Properly structuring your team - Running the SDLC (or equivalent) - Product mindset - Drive to deploy to market Note that neither of them are project managers. We don't manage projects, we just enable students to be the best they can be. It is up to them to learn the professionalism and delivery. We allow them access into our networks so they can interact with academia across Pakistan, our engineers and our designers. Do we need formal approval or permission from our faculty to do the FYP with you? ** Yes. But first fill out the form, let's talk, and we can figure out the details with your university afterwards. Further Queries? ** You can contact us at talal.ahmed.khan@grayhat.studio. He's our DevRel, so if you have any queries related to Grayhat, he's got the answer! ### [Wrap-up: Web Social Party Game Jam!](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/web-social-party-game-jam) - Slug: `web-social-party-game-jam` - Published: 2025-04-28T18:41:28.000+05:00 - Updated: 2025-04-29T01:03:14.000+05:00 - Reading time: 7 min - Tags: Events, Game Design, Gaming, Unity, Playroom, PlayroomKit, Announcements, Multiplayer Gaming - Authors: Talal Ahmed Khan - Visibility: public ℹ️This is just the beginning for us.Picture this: **65 game developers**, **10 universities**, and **48 chaotic hours** to build multiplayer card games from scratch. Why did we do it? Simple—**to break things at scale.** At Grayhat, we’ve been building **PlayroomKit for Unity** for months—testing mechanics, debugging sync issues, taking the SDK to production (finally! 🥲) and pitching wild ideas to Little Umbrella. But why keep the fun to ourselves? ### **Get the bread** ✅ **Massive Playground for Experiments** We set the *exact same challenges* we face in client projects—multiplayer sync, turn systems, state management—and let **10x more developers** crash into them. The result? A goldmine of feedback, failed prototypes, and genius workarounds. (*Jou cheez hum kar rahay hain, wohi in say karwa kay dekho!*) ✅ **Direct Firehose of Talent & Ideas** No theory, no hypotheticals—just **raw, unfiltered game dev chaos**. Our team (@Talha, @Saad, @Talal, @Zohair) got to mentor, troubleshoot, and *be inspired by good ideas* (shhh) from jammers. Some of these concepts? **Mindstorm-level potential.** ✅ **Side Perks** - HR training? Check. (*Nothing teaches like a room full of panicked devs.*) - Marketing boost? Check. (*Nothing sells like screaming students.*) - PlayroomKit partnership leveled up? **Big check.** ### **Why NaSCon?** - **Lesser (not zero) logistical nightmares** (Islamabad = home turf) - **FAST-NUCES host team = instant synergy** - **Recruitment pipeline?** (*Hello, future Grayhat hires.*) Bottom line? **We didn’t just run a game jam—we weaponized it.** And this was just **our first time.** ### **The Game Judging Panel 👁️** The Game Jam’s submissions were evaluated by **Tabish Ahmed** and **Aaron (aka @swagshaw on Discord)** from **Playroom/Little Umbrella**, two key figures in the multiplayer gaming space. **Tabish Ahmed**, a co-founder of **Little Umbrella**, has been instrumental in shaping Playroom’s vision for accessible multiplayer game development. His background in product strategy in various FAANG companies (Google, Meta, Adobe) and developer ecosystems made him the perfect judge for assessing both technical execution and creative design. **Aaron (@swagshaw)**, Playroom’s Developer Advocate, is a well-known voice in indie game dev circles—especially on Discord, where he helps run the **Boss Rush Game Jam**. His deep understanding of gamejamming and hands-on experience gave him unique insight into how teams could leverage the SDK’s multiplayer features to build unique games. *(Next up: The full story of how 65 devs survived 3 days of multiplayer madness.)* 🚀 ## **Day 1: Learning, Brainstorming & Chaos** 📍 **Venue:** FAST-NUCES, Islamabad - **9:00 AM:** The FAST-NUCES host team arrived, setting up projectors, decorations, and (most importantly) water bottles. - **12:00 PM:** Participants rolled in—some confident, some nervous, all excited. - **Problem Statement Drop:** "Build an original multiplayer card game. No Uno clones!" (We had to enforce this *multiple* times.) - **Workshop Time:** The Grayhat team, spearheaded by **Talha Momin**, ran a **PlayroomKit deep dive**, explaining multiplayer sync, game states, and how to avoid disasters. - **Most Chaotic Moment:** A last-minute Wi-Fi firewall problem forced some teams to **hotspot from their phones**. By evening, teams had rough prototypes—some functional, some… *experimental*. *****The "How to use PlayroomKit" Workshop, delivered by Talha Momin (Software Engineer 1) ## **Day 2: Build Day** 🕒 **9:30 AM:** Host team arrived 🕒 **10:30 AM:** Teams returned, looking slightly more tired but determined. - **The Great Multiplayer Struggle:** Many teams hit roadblocks with PlayroomKit syncing.- *"Why does my card disappear when I play it?"* - *"Why is my opponent seeing a different hand?!"* - **Grayhat to the Rescue:** Volunteers ran from table to table, fixing bugs and calming nerves. - **Underdog Story:** Team *"Anicards"*—who had zero Unity experience before the jam—somehow built a working animal battle card game. Legends. By **2 PM**, exhausted but hopeful, teams left to polish their games overnight. ****Day 2 was mostly about coding, and collaborating ## **Day 3: Judgement Day** 🏆 **8:00 AM:** Final sprint—some teams arrived **early**, frantically fixing last-minute bugs. - **9:00 AM:** Judges arrived (Grayhat on-site + Playroom online). The pressure was *on*. - **Judging time:**- *5th Ace* had judges super impressed with a well thought out genre-blender game. - *Anicards* – Well, at least it worked! - *Others – *mostly submitted half-baked designs and implementations. But understandable given the duration of the event. - **Winner Announcement:**- **🥇 1st Place:** *5th Ace* (PKR 50,000) – "A genius social deception game!" - **🥈 Runner-Up:** *Anicards* (PKR 30,000) – "Simple, polished, and fun!" - **Most Emotional Moment:** The *Anicards* team (all first-time Unity users) **celebrated like they’d won the lottery**. ## **What Participants Said** Here's the real, unfiltered participant feedback from the Game Jam, presented clearly and honestly: ### Participant Testimonials: The Good, The Bad, and The Real The Frustrations*"PlayroomKit is not good - it doesn't make game dev easy. We spent hours just trying to get basic multiplayer working."* *"My cards remained static and unplayable even though I made sure they were copied prefabs from the original. After analyzing the code for hours, I had to change my entire strategy."* *"The introduction of PlayroomKit was a surprise that threw us off. We needed at least a week to properly learn it before competing."* The Technical Challenges*"Biggest struggle? Definitely PlayroomKit integration. The initial setup was confusing and we lost valuable time."* *"We're newbies and making a multiplayer game without prior experience is hard. The documentation wasn't enough for beginners."* *"The Discord activity integration was unclear. A short tutorial would have helped immensely."* The Positive Experiences*"The mentors were incredibly helpful. When we were stuck, they came to our table and solved our issues personally."* ("Anicards" team member) *"Despite the challenges, I'm now fully entering game dev because of this event. The hands-on experience was invaluable."* (Enthusiastic participant) *"Card designing was the most enjoyable part for me. Seeing our creations come to life was rewarding."* (Anonymous artist) Suggestions for Improvement*"Don't limit developers to specific tools. Let us use what we're comfortable with."* (Anonymous developer) *"Announce required SDKs at least 3 days before the jam. Learning new tech during competition is stressful."* ("Doctor vs Virus" team) *"More time! Two days isn't enough, especially when learning new tools. A 5-day jam would be better."* (Multiple participants) The Real Talk*"Nascon management was terrible. But the Game Jam organizers themselves were great - responsive and helpful."* (Blunt participant) *"There's nothing a student enjoys more than staring at Visual Studio for 3 hours, taking a break, then staring for 3 more. 10/10 would do again."* (Sarcastic but dedicated participant) *"The competition felt like 50% game dev and 50% wrestling with external tools. More focus on actual game creation would be better."* (Experienced participant) The Silver Linings*"Even though we didn't finish, we learned so much about multiplayer sync that we couldn't have learned in classes."* ("Cards Clash" team) *"The Q&A session at the end was super helpful for understanding what we did wrong."* (First-time jammer) *"Seeing our simple animal battle game actually work in multiplayer was magical. Worth all the frustration."* ("Anicards" team) 📉 **Biggest Struggles:** - **Multiplayer sync issues** (of course) - **Confusing PlayroomKit setup** (npm + Unity = headaches) - **Time pressure** (many teams couldn’t finish in the short duration) ## **Key Takeaways** ✅ **PlayroomKit is dope but needs better docs & templates.** ✅ **Multiplayer is HARD.** (But rewarding when it works.) ✅ **Original ideas win.** (No Uno clones made it to finals.) ✅ **Mentors = heroes.** (Shoutout to the Grayhat squad.) ## **What’s Next?** 🔜 **More Jams, More Games:** We’re already planning the next one—bigger prizes, smoother onboarding, and maybe even a **Discord integration challenge**. 🚀 **For Playroom/Little Umbrella:** - **Better Unity docs** (please!) - **One-click starter templates** (save us from npm hell) - **Native build support?** (WebGL is cool but limiting.) 🎮 **For Participants:** Keep polishing those games—some of these deserve a real release! ### **Final Words** Huge thanks to: - **FAST-NUCES** for hosting. - **Playroom/Little Umbrella** for the SDK + judging. - **All participants** for the chaos, the memes, and the awesome games. **Missed this one? Don’t worry—we’re just getting started.** 🚀 ## **Play the Winning Games** ### The 5th Ace (Winner 👑) **Team:** Neva **Playable Demo:** https://5thace.playroom.gg **Concept:** - A **social deduction card game** blending bluffing and strategy. - Players alternate roles: *Liar* (creates false card combos) vs. *Detective* (calls out bluffs). - Power-ups add meta-layers to deception. **Why Explore Further?** - Proven fun factor with minimal assets (Minecraft-inspired UI). - Scalable for Discord’s social ecosystem. - Potential to expand with themed decks (e.g., cyberpunk, fantasy). Unity WebGL Player | 5th Ace*5th Ace### **Anicards** (Runner-Up 🥈) **Team:** Red Team **Playable Demo:** https://anicards.playroom.gg **Concept:** - Animal-themed **asymmetric battle game** where cards represent creatures with unique powers. - Lightweight but functional multiplayer sync via PlayroomKit. **Why Explore Further?** - Simple core loop ideal for quick sessions. - Easy to reskin for educational/children’s markets. - Could integrate NFT-style collectible animals. Unity WebGL Player | ANICARDS*ANICARDS### **Other Game Jam Submissions (Non-Winners)** - **Doctor vs Virus** *(Learning Squad)*- Asymmetric card game: Doctor (heals) vs. Virus (infects organs). - **MCards** *(Usama)*- Multiplayer solitaire-style card game. - **Solo Leveling: Hunters Unleashed** *(Lada)*- Fast-paced boss-battling card game with gear/summon mechanics. - **2Q (Monster Duel)** *(2Q Team)*- Turn-based monster battle with elemental strengths/weaknesses. - **Cards Clash** *(Ziki Team)*- Unfinished card combat game (concept only). - **Unnamed Card Game** *(NebrasAssad)*- Attempted dynamic card system with prefab issues. ### [Creating an MVP for an unofficial v0.dev VS Code Extension clone](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/creating-an-mvp-for-an-unofficial-v0-dev-vs-code-extension-clone) - Slug: `creating-an-mvp-for-an-unofficial-v0-dev-vs-code-extension-clone` - Published: 2024-08-19T15:30:04.000+05:00 - Updated: 2024-08-19T16:46:07.000+05:00 - Reading time: 5 min - Tags: Developer Tools, Artificial Intelligence, Development, Codegen, Copilot, GitOps, AI, Open Source - Authors: Asher Siddique, Muhammad Usama Rashid - Visibility: public **This extension is in no way affiliated with v0.dev or Vercel. It's just a dummy pet project we made to test out code generation in VSCode. We do aim on pursuing similar goals, but definitely with a different name 🥸Before we started working on this extension, another team with Grayhat was already working on an earlier version of the idea. The initial approach was to create a simple website embedded within VS Code using an iframe. **v0.dev** served as the core interface where users could input prompts and receive generated React component code. However, the iframe approach quickly ran into issues, as the website was eventually blocked by various security measures within VS Code. This made us rethink our strategy and led to the decision to build a native VS Code extension without relying on any website outside of VS Code. ## **Planning** To streamline things, we started with creating a detailed game plan that outlined the core functionalities we aimed to implement in the extension's proof of concept. These core features included: - An input field for user prompts - Image upload functionality - Handling API calls to the hosted LLM and processing responses - Displaying the generated React components as text in a UI element Alongside these features, we established a timeline with specific delivery dates to keep the project on track. Once the game plan was set, our next step was to familiarize ourselves with the documentation on how extensions work in VS Code. This research was crucial in helping us understand the necessary APIs and the architecture of a typical extension. With this knowledge in hand, we proceeded to set up a basic extension, similar to a "Hello World" page in web development. This initial setup served as the framework on which we built the entire extension. ## **Researching the docs** After briefly exploring the documentation, we began searching for and testing the appropriate API that would allow us to create a chat-like view in the primary sidebar of VS Code. To our misfortune, we could not find one that met our needs right away. So, for the first iteration, we settled on creating a chat-like view within the main editor. The goal was to build a basic skeleton in the main editor first, with the plan to eventually move the entire interface to the primary sidebar in the next iteration. In this initial setup, we aimed to create a WebView in the main editor that asks for the description of the component. ** ** ** 0:00 /0:27 * **1× ** ** * For the code generation part, we initially decided on using Claude 3.5 Sonnet or GPT-4o, but realized that spending extra resources on just a proof of concept was unnecessary. Therefore, we moved ahead with codegen-350M-mono from a pool of free/open source LLMs such as StarCoder, CodeGeeX, open-LLAMA, and code-LLAMA, primarily due to its popularity. ## **The Development Phase** Development was broken down into phases. The first phase produced the first version upon which the rest of the extension was built. All phases followed the game-plans that were created before starting them. What do the game-plans do? They are the official documents that list the features, delivery date, feature assignment, and other technical details for the phase. For the first iteration, we kept it simple and only focused on getting the input prompt, calling the LLM through HuggingFace’s Inference API, and displaying the output. This was relatively simple, just a bunch of HTML and CSS, and calling some VS Code Extension API’s endpoints. For the second iteration, we made some improvements as well as added new features. The improvements included moving the chat panel from the editor window to the primary sidebar window. The first version had an extra step to launch the chat window, which was also removed in the second version so that the process would be straightforward. The feature that was added was a copy button so that the end user can use the generated code in their project. The third and final iteration involved implementation of syntax highlighting using Shiki syntax highlighter, and using VS Code UI library instead of default CSS styles for a similar look and feel. ## **The team** We were a team of two and the development of the extension was a collaborative effort, where we divided the work based on our strengths. Aitsam, focused on the front-end development, handling the design and implementation of the user interface, ensuring that the overall extension seemed a part of VS Code in terms of interface. On the other hand, Asher took charge of the backend development. The responsibilities were managing the API integration, handling the logic for making API calls to the LLM, integrating it with the front-end, and processing the responses. Asher's work ensured that the extension could communicate with the AI model properly. ## **Navigating the Constraints** The previous team's biggest blocker eventually turned out to be v0.dev's own website. The website didn't allow iframing in the VSCode soon after the initial launch, and the team tried its best to uncover the underlying APIs, but it was a hassle trying to setup Vercel Auth to work alongside the original website. There also wasn't an official REST API. For our team, the biggest blocker we faced while developing an MVP was the **LLM model**. What we failed to realize was that codegen-350M-mono was a good autocomplete LLM. What we actually wanted was something that could turn prompts into code. The first version of the MVP was tested out using codegen and the possible improvements were noted down. The search for an LLM led us to Mistral-7B, specifically Instruct-v0.3. Mistral turned out to be quite a good model, as it was able to handle engineered prompts and the output was on point as well. From the improvements that we noted down, the second biggest blocker that we felt was moving the chat panel from the editor in VS Code to the primary sidebar. This required a whole refactor of the HTML, and not to mention there wasn’t much in the documentation about using WebViews in the primary sidebar. This took a good half a week but we were able to implement it and the extension received a very natural look and feel. *## **Possible Improvements** One place where the extension could improve massively was the output UI element. Instead of displaying the generated code, we could instead output the render of the code. This would help the end user in quickly determining whether the generated component is correct or does it need to be generated again, all without launching their project again. Our team lead gave us this idea but it never came to fruition due to time constraints. ### [Pixels to Players: How Good Game Designs are Executed](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/pixels-to-players-how-good-game-designs-are-executed) - Slug: `pixels-to-players-how-good-game-designs-are-executed` - Published: 2024-08-14T23:04:07.000+05:00 - Updated: 2024-08-15T11:11:02.000+05:00 - Reading time: 6 min - Tags: Game Design, Product Design, System Design, Design, Gaming, Multiplayer Gaming, Playroom, PlayroomKit, Development, Software Engineering - Authors: Maaz Tariq - Visibility: public ** Great video games are like great books or movies; they resonate with us because they reflect our own experiences, dreams, and fears Like a composer crafting a symphony or a painter stroking onto their canvas, designing a game is a similar creative endeavour to any other art. There are no ways to design a game and a million ways to create one simultaneously. Making a good game is like making a good movie, it is supposed to be an experience one goes through that leaves an impact and gives a new perspective. Crafting together a piece of media that can deliver enough sentimental value to keep players coming back, that is what game design is all about. ## Making your Game Relatable One of the key aspects of making a moving art piece is adding elements in the piece that help the audience relate to it. When one sees another character going through situations they have gone through in real life, it develops a bond with the character. This pattern is commonly seen with anime protagonists having very relatable personality traits or situations in even a supernatural world. ** It should be the experience, that is touching. What I strive for is to make the person playing the game the director ***- Shigeru Miyamoto*** *****Papers, Please****Invoking that feeling of relatability is a key part of keeping the players coming back. A good example of executing this strategy is “Papers, Please”. To say very loosely, it's a game about checking and approving documents. A very simple premise, but it is a hit game because the way it sets the mood and develops the scene is very natural. It reminds you of a paperwork-heavy office, it makes you feel like an actual clerk with all the tediousness that comes with it. flipping through pages to check for rules, the applicant’s documents missing or fraudulent cards and ID cards and you have to manage all this junk under a time limit. The authenticity of the experience sells the game. *****Katana Zero****The experience we want to invoke is not limited to experiences our player has personally experienced but also seen others experience in their vicinity. The video game “Celeste” does an excellent job of explaining what depression feels like to people who haven’t experienced it, helping them understand people who suffer from depression. “Katana Zero” is a game with an excellent storyline. It explains the struggles of a soldier dealing PTSD in a very supernatural, ongoing conspiracy theory setting. After going back and forth with some product teams, I've learned that this goes hand-in-hand with KYC (Know Your Customer). Something which might help you to narrow down an idea is to first do some bare-bone **audience research. **Who is the target audience you have the most access to, whether in your friends circle, community, or in your company's easiest access? What is daily life for them, what is entertainment, what makes their heads turn? Just some raw data from here, organized and transformed into a "player persona", can act as a prompt for you to brainstorm some better ideas - Then you can easily validate or verify your ideas by just bouncing them off of that persona. (you can even reach out to an audience member and present ideas to them) ## Using the Right Tools Invoking experience is one of, if not the greatest, priorities for a game designer. The designer must have tools capable enough to pull off the ideas they draft. A designer’s canvas is the engine they use. The way you cannot achieve on a smaller canvas what you can on a larger one. You cannot do things on an engine that is incapable of following through with the mechanics of your design. More often than not, the development-end of game-building is almost as artistic as the design side. It makes sense, given that you need to create a world which truly captures the emotion conveyed in the game, or at least having enough helpful snippets which can keep the code clean while building out the game. This usually drives companies to build custom game engines, or at least base them off of existing ones. Many times, technological advances are the reason for designing new experiences to human entertainment. Grayhat's npm package "create-multiplayer-game" is built to speed up the development process and simplify implementing game designs. We use it thoroughly when building out game prototypes - However, by the time the game reaches production, the engine does take a beating. But we use the new findings to improve the engine once more. The package aims to streamline the creation of React-based (more coming in the future!) multiplayer games, making it easier for developers to focus on the creative aspects of game design rather than being limited by technical challenges. *create-multiplayer-game (CMG) does lots of heavy lifting for you. It provides you with prebuilt modules so you don’t have to reinvent the wheel every time. CMG provides a silent router, letting you change game phases without any changes in the URL bar. This makes the game-flow entirely in control of the game itself and handles the possibility of cheating by messing with the URL to switch phases. It also has its own loading module which can show what file is being loaded in real time. All in all it has the essential parts of a video game for any kind of game prebuilt, so you can focus on the design instead of the execution. ## Learning from Retrospective “Meme, Chat, Robots” has a user interface and design similar to Meta apps. When talking about the game with Saad Bazaz, I learned Meme, Chat, Robots’ UI was designed by a talent at Meta. Using Radix, helps us make reusable components that can be used throughout the project, giving it a coherent look and feel. Addition of a silent react-router, one that can route to different pages without showing changes in the URL. While seemingly a small change, it makes a substantial difference for video games. A video game has to follow a game flow, unlike apps where users can go to whatever page they like. moving from stage 1 to stage 2, or from a cut-scene to gameplay requires a game flow that cannot be tampered with from the URL. ## Get Your Hands Dirty As a game designer, your tools are the technologies and languages you build games with and your canvas is the game engine you use. To translate your designs into the game, you will have to know how the game works. How it's built and why it does what it does. You can’t get away with skipping learning a phase of development, learning development helps the design be grounded and realistic. *## Recycle your Trash There’s no such thing as bad ideas. I have used parts of stories and themes I wrote in my high school essays in complete products! Stories and ideas that don’t seem like a good fit are just in the wrong place. Always save your drafts and keep them close whenever you want to brainstorm a new theme or look for your game. Have different folders for all kinds of media you draw inspiration from, then try to fit them to any future projects. Make different folders for music and art and keep adding any ideas in those folders. ** The first mark on an empty canvas is the most difficult to make Having a stash of resources like these help you form your first stroke on a blank canvas. ## Verdict As daunting as designing a video game may seem, following only a couple of principle can guarantee an interesting result. Trial and error is part of the game, like any design process. Pair it with some direction and you’re good to go! Here’s a small recap: - Design the experience, not the app - Bind real-life experiences with the video game’s experience - Use a capable game engine, that fits your game aesthetic and can pull off your design - Learn and apply from previous projects, embrace failure - Learn and experience every part of the dev process firsthand Now building the latest video game, I have learnt a few more lessons to help me contribute to CMG. Stay tuned for more in-depth articles discussing game design and CMG! ### [This is ECHO.](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/coming-soon) - Slug: `coming-soon` - Published: 2024-05-05T12:00:00.000+05:00 - Updated: 2025-05-19T02:58:56.000+05:00 - Reading time: 2 min - Tags: Notes - Authors: Saad Bazaz - Visibility: public We talk about the latest in cut-throat, hardcore engineering. Some topics we love talking about: - **Design: **Practical design, design systems, design tokens, system design and product design. - **Development: **Solving hard and/or niche problems through code, trying out new tech, benchmarking - **Engineering:** Thinking better, problem solving, case studies, open-source work What we **won't **do: - **AI-generated content.** This will be raw information from raw humans, do what you want with it. - **Build without reference. **We won't just start quantum computer software coding for no reason at all. We'll try to link it with something we're doing. Which leads to... - **Avoid the fine details.** This isn't content for SEO, or for the fat cats in skyscrapers smoking fat cigars. This is for the builders. - **Be professionally surprised. **i.e. AI / Crypto hypebros. Basically the kind of people summed up in this meme: * However, I can't make promises on all the above. We may slip up here and there, sure, but I can promise one thing for sure; you'll find a lot of heart. Have fun. ## Sign up for ECHO From humans, to humans. Discover the cutting-edge in emerging tech, artificial intelligence, and innovative ideas. * * ** Join the fun .nc-loop-dots-4-24-icon-o{--animation-duration:0.8s} .nc-loop-dots-4-24-icon-o *{opacity:.4;transform:scale(.75);animation:nc-loop-dots-4-anim var(--animation-duration) infinite} .nc-loop-dots-4-24-icon-o :nth-child(1){transform-origin:4px 12px;animation-delay:-.3s;animation-delay:calc(var(--animation-duration)/-2.666)} .nc-loop-dots-4-24-icon-o :nth-child(2){transform-origin:12px 12px;animation-delay:-.15s;animation-delay:calc(var(--animation-duration)/-5.333)} .nc-loop-dots-4-24-icon-o :nth-child(3){transform-origin:20px 12px} @keyframes nc-loop-dots-4-anim{0%,100%{opacity:.4;transform:scale(.75)}50%{opacity:1;transform:scale(1)}} Email sent! Check your inbox to complete your signup. No spam. Unsubscribe anytime. ### [Building a Unity Plugin in JavaScript](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-a-unity-plugin-in-javascript) - Slug: `building-a-unity-plugin-in-javascript` - Published: 2024-05-04T14:21:06.000+05:00 - Updated: 2024-08-31T13:07:31.000+05:00 - Reading time: 6 min - Tags: Development, Gaming, Multiplayer Gaming, Software Engineering - Authors: Talha Momin - Visibility: members **Playroom for Unity is open-source. Check it out here: https://github.com/asadm/playroom-unity**Interested in trying out Playroom for Unity? Check the docs! Join the Discord channel too in case you need help, you'll find me lurking there sometimes. 😁Creating a game is no easy task, and crafting a multiplayer experience adds an even greater level of difficulty. But thanks to industry experienced developers who've created numerous tools which make the process of creating multiplayer games easier and more productive, developers can now focus on creating fun and immersive experiences for their users, and not worry about the networking side. One growing platform for this purpose is PlayroomKit by Playroom, which mainly focuses on multiplayer web-based party games. I'm a Unity Developer, so I've had my eyes on similar multiplayer plugins for quite a while. Some of them are: - **Normcore:** https://normcore.io/ - **Photon:** https://assetstore.unity.com/packages/tools/network/photon-unity-networking-classic-free-1786 - **PlayFab:** https://learn.microsoft.com/en-us/gaming/playfab/features/multiplayer/lobby/lobby-matchmaking-sdks/multiplayer-unity-plugin-quickstart - **Hathora:** https://hathora.dev/ One of my biggest complaints (and the community's) is how hard it is to get things up and running with these libraries. All that previous knowledge helped me, when I had to implement a plan to create PlayroomKit for Unity, keeping the objective in mind, making sure I didn’t hurt Developer Experience, and using my knowledge in Unity and hacking around in C# and JS. ### The Goal **Combine the ease of PlayroomKit with power of the Unity engine.The PlayroomKit package is super simple to get started with… in JS, at least. That’s a developer experience we needed to port to Unity. At the same time, we had to make the Unity library at feature parity with the JS library, following the exact same API. (That makes it easier to write docs, at least 😃) Here our first **problem** arises which is quite easy to pinpoint: Unity uses C# and PlayroomKit is a JavaScript package. So some interoperability had to occur. To achieve this, we had the following approaches: - Convert the JS library to C#, or, - Use a JavaScript Interpreter for .NET (JINT), or, - Use the Interaction with browser scripting provided by Unity itself. **If you want to go deeper into the thought process of “why” we went with our final approach, I highly recommend reading Playroom’s official blog on this very topic.### The Approach We went with the **third approach**, referring the Unity docs. In short, the workflow is like this: - We work with 2 files: a JSLIB (JavaScript Library) and C# class. - The JSLIB file acts as a bridge between PlayroomKit (or any other JS library) and C# (Unity) *What I call "The Bridge".The figure above shows basic working of the system. ### Problem 1: Passing Data The Unity documentation shows an example where the primitive datatypes are being used to pass data between C# and JS. This process of converting is known as: ***Marshalling.** This process involves converting an object's memory representation into a format suitable for storage or transmission, especially across different runtimes.*The documentation gives us a good starting point with examples for the basic datatypes: Hello: function () { window.alert("Hello, world!"); }, HelloString: function (str) { window.alert(UTF8ToString(str)); }, PrintFloatArray: function (array, size) { for(var i = 0; i > 2) + i]); }, AddNumbers: function (x, y) { return x + y; }, StringReturnValueFunction: function () { var returnStr = "bla"; var bufferSize = lengthBytesUTF8(returnStr) + 1; var buffer = _malloc(bufferSize); stringToUTF8(returnStr, buffer, bufferSize); return buffer; }, And in C# we will define the functions like this: [DllImport("__Internal")] private static extern void Hello(); [DllImport("__Internal")] private static extern void HelloString(string str); [DllImport("__Internal")] private static extern void PrintFloatArray(float[] array, int size); [DllImport("__Internal")] private static extern int AddNumbers(int x, int y); [DllImport("__Internal")] private static extern string StringReturnValueFunction(); To use these functions, we can call them like so: void Start() { Hello(); HelloString("This is a string."); // sending a string to JS float[] myArray = new float[10]; PrintFloatArray(myArray, myArray.Length); int result = AddNumbers(5, 7); Debug.Log(result); Debug.Log(StringReturnValueFunction()); }Now this is all great, but the issue arises when we have to deal with async code or functions with callbacks. ### Problem 2: Async Code or Callbacks?! There are great discussions on the Unity Forums regarding using async functions and for passing callbacks as well. In the case for PlayroomKit, instead of using async / await, we went with providing callbacks, (PlayroomKit already provides callback parameters wherever required). The pattern here is something like so: ### [Reject Cloud, return to onprem](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reject-cloud-return-to-onprem) - Slug: `reject-cloud-return-to-onprem` - Published: 2024-02-29T12:03:00.000+05:00 - Updated: 2024-08-17T13:24:35.000+05:00 - Reading time: 6 min - Tags: Software Engineering, Cloud, Infrastructure, DevOps - Authors: Saad Bazaz - Visibility: public Remember when you could easily spin up a gaming server on your dusty ahh Pentium 4 desktop, and play with people around the world? Honestly, I don't. I couldn't really figure that out with the crusty internet speeds I had, all the blockades on our Internet here, and the learning curve was way too high. ## My self-hosting journey **You merely adopted the Cloud. I was born into it, moulded by it.I ran LAN parties back in school. My friends and I would load all the lab PCs with Counter Strike 1.6, and play the heck out of the hottest summer days. In uni, one of my laptop's broke apart (it was stepped on), and since I'm not a wasteful guy, I created a Linux-powered mediaserver out of it which I streamed movies off of using Samba, giving me almost unlimited storage and my own personal cinema. I got into self-hosting. I ran SSH off of my broken laptop, and used to build projects on it, using my good laptop as simply a "portal". I then stumbled upon **CapRover**** **in it's early stages, and I absolutely loved it. I deployed a few apps, crashed a lot of stuff, but it was cool in general. Then came **Coolify**, and I haven't let it go so far! ## What's going on in the Cloud world?! **TLDR; The Big Cloud Exit is very real.Even though Cloud, Cloud Native and IAAC are on the rise, there's a continuous increase in unnecessary complexity and overhead, which pretty much kills the case for simpler use cases. There seems to be a two factions - Cloud-only and on-premises - but they seem to be united by similar technologies (Containerization, modularity, etcetera.) ### The Olden Days Let's start with a bit of history. Before Gen Z and millennials got into software, baby boomers had a very distinct sales strategy. Build once, sell once. You pay $200, you own a license to the software, and now it's yours. It's installed on your computer and you can do whatever the heck you want to do with it. This process, albeit slow, had it's charms. Software had to be built right the first time before sales started, which resulted in pretty stable software for its time. For instance, you couldn't just send an update of your game to the Nintendo Gameboy. The cartridge had to be flashed once. The only way to update was a complete recall, like when Nintendo recalled Pokemon cartridges back in the early 2000s. As peer-to-peer arose in popularity, so did Tor. Piracy and illegal filesharing called for a need to "centralize" a software's control points. These pointed to having a remote server, most likely in the software's creators office. This gave rise to the subscription model. (Although, despite many misconceptions, the subscription model existed before as well in the form of mail-in CDs, USBs, etcetera). Then arose an interesting proposal: What if all these software creators centralized their centralized servers even further?! This lead to mass-scale Cloud providers like Microsoft, Google, Amazon, and more. Today, Amazon Web Services (AWS) stands as the largest cash producer in Amazon's portfolio. ### Fast forward The costs of subscriptions just keep adding up. The software company owning the SaaS tool you use, is further paying subscription to another service, which is further paying subscriptions to another, and finally at the end of the chain is a company which is burning VC money like crazy just to keep **their **subscription costs at the lowest. Sounds familiar? ▲ For the sake of comparison, here's the subscription cost of running a software agency of 15 people, on modern SaaS tools: *Costs with ALL SaaS SubscriptionsNow eradicate some costs with self-hosted options: *Costs with some SaaS Subscriptions, mixed with self-hostingYes, obviously the saving you're getting will probably be spent on **electricity, hardware, maintainers, **and **backups.** **Still, **when you're paying $15k a year for just the tools under your belt, you gotta step back and think; "Why don't I own the software at this point?" Surely, $15k (or even a fraction of it) in share values HAS to add up to something. Plus, there's always a chance of screwing up with a memory leak somewhere (like this user who made the same sad mistake), or the risk of being DDoS'ed, which can surge your Cloud bill to $104,000 (like this Netlify user) just overnight. What's the point of a Cloud and all its services, if you can't have a good night's sleep? This sentiment, along with tonnes more surrounding privacy, performance, and peace, have driven self-hosted enthusiasts around the world to build a new business model for the sustainability of the tech world. ## "Self-hosted" as a business model Some major and minor events in the self-hosting world: - 37signals announces Once.com with their first pay-once-own-forever software, CampFire. Their manifesto is an excellent read, and they've been advocates of Quitting Cloud for quite some time. - Plane.so, open source task management software reaches 22k stars on GitHub in less than a year - Coolify, the absolute king of self-hosting management, has more than 15,000 self-hosted instances. - Medusa.js, possible the biggest self-hosting of all marketplaces, reaches 20k stars on GitHub - Microsoft ditches Azure (their own Cloud) for LinkedIn (their own product) We're seeing two trends clearly - Either go full in Cloud, or allow people to self-host. This spawns an entirely new business model; host yourself for free, or host on our Cloud for $$. What does this mean for new startups and businesses? In fierce competition, letting people self-host with a strong license means you can: - Get your product tested, verified easily by a large number of users. Use the feedback to build better - Remove privacy and security concerns, improve trust on your product - Resolve DevOps problems - Get bugs fixed and features created through the community - Get Viral. Get promoted for pretty much free through just some good DevRel, and get tonnes of appreciation ## Self-hosting as a Tech Startup ***Mantra: *You can't call yourself a Cloud or DevOps engineer unless you can run an on-prem server and maintain it for a minimum of 3 months.Let's talk real benefits for startups, other than making their business model self-hosted. What can you get done with a self-hosted, on-premises system in your workplace? - **Expendable dev servers. **Save the cost of Google Cloud for staging and dev servers. - **Build runners, CI/CD. **The boring stuff, the compute-consuming stuff. - **Business Development and Sales automations. **Business operations with expendable data, which are usually stateless and just need to be "listening" somewhere (Examples: Scrapers, Bulk emailers) - **Process automations** (Examples: Stateless Slack Bots, Discord Bots, Builder Bots, Automated Changelog Updates. You name it.) - No **data privacy** concerns (if you apply the right security practices!) - **Monitoring** (Example: Checking system healths for projects, checking your baby monitor) - Learn how to **get your hands dirty**. Clouds often have fancy names for pretty basic stuff in almost any onprem system. It's good to know their origins, as it helps you make better Cloud deployments, and can improve your engineering culture too. *By the way, I'm not **against Cloud. **I just encourage people to know what they're doing, and to use the right tool for the right job. Knowing the basics of building onprem systems is crucial in a Cloud Native world.* ## Resources What are the best places to learn self-hosted, and to get guidance? - Discord servers: As always, you'll find the best of the best basement dwellers lurking around on Discord. There are tonnes of self-hosting communities who can guide you on the basics. I particularly love Coolify's community, but I'm sure you'll find more on top.gg - The Awesome Self-Hosted list - The r/servers subreddit - The r/selfhosted subreddit - This cool blog I found - ChatGPT The list I have is exhaustive, but if you have more suggestions, drop a comment and I'll add it up! ## What's next We're building on-prem AI systems for Omni. Why? - Unrealistic GPU costs on the Cloud - Hybrid architecture: We want Omni to be deployable anywhere for quick processing, so we need to ensure resources are used the right way During this, we've figured out some pretty good ways to make teams more efficient while easily saving around $3000 annually. I call it "WorkStack". I'll be publishing a guide soon on **WorkStack**, and how you can use it in your org to save you some costs. Plus, expect some **open-source goodies **to help you along the way. Happy hacking! ⚡️ *We love doing things differently, and contributing to the overall knowledge stream. A lot of our work is R&D-based and on experimental tech in application development and Artificial Intelligence. If you're interested in working with *Grayhat*, DM or comment!* **This article was authored by** Saad Bazaz, **Chief Executive Officer at Grayhat. Special thanks to **Muhammad Hashim **for his research on the topic, and **Sohaib Bazaz** and **Muhammad Saad** for their work on Baadal, Grayhat's on-premises infrastructure.** ### [How to GSoC: Lessons from my open source journey](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-gsoc-lessons-from-my-open-source-journey) - Slug: `how-to-gsoc-lessons-from-my-open-source-journey` - Published: 2025-11-12T14:00:19.000+05:00 - Updated: 2025-11-12T14:00:19.000+05:00 - Reading time: 5 min - Tags: Open Source, Open Source Community, Google, Google Summer of Code - Authors: Muhammad Haroon - Visibility: public When I was in third year of university, I came to know about the Google Summer of Code (GSoC) program through YouTube. For those who don’t know about GSoC, it is a prestigious program (sort of an internship) which Google has conducted every year since 2005. Google selects a number of open-source organizations each year. Contributors then submit their proposals to different projects of different organizations, and each organization accepts or rejects them based on the contributor’s past involvement and the quality of their proposal. Once accepted, one work on the project for 3 to 4 months under the guidance of assigned mentors. The goal of GSoC is to bring new contributors into open-source organizations. It really motivated me to participate mainly because I wanted to work on software that is used by millions of people, gain hands-on experience with real-world projects, have Google on my resume (which is a pretty cool thing!), and of course the stipend was a great bonus. After my third year ended, I got a 2-month break, and I thought, *why not give it a shot?* I began exploring different organizations in July 2024, and I found this website extremely helpful. It provided all the essential details about each organization including how many times the organization participated and in which years, the tech stack of that particular organization, and past selected contributors. Overall, it offered a comprehensive overview of each organization. 💡****Tip:**** Choose the organization which has participated in GSoC for multiple years. It’ll have a high chance of coming again in the upcoming year and will also be selecting more contributors, not just 1 or 2.*💡****Tip:**** Choose the organization early.I chose Sugar Labs as my organization in mid-July 2024 because its mission aligned with my interests. Additionally, its consistent participation in Google Summer of Code (for over 10 years) and the high number of contributors selected each year made it a strong choice. Sugar Labs has several projects, including Music Blocks, Sugarizer, Sugar, and many more. My interests and tech stack aligned best with Music Blocks. It is a visual programming language and a collection of manipulative tools for exploring musical and mathematics concepts in an integrative and entertaining way. My first step was to find the communication channels where I could interact with the project maintainers. Most of these links were available in the README file of the GitHub repository. I was able to find those and introduced myself to the community. 💡****Tip:**** Most of the questions that come to your mind are already answered in the documentation, so make sure to read that first. If something is unclear, then one can reach out to the maintainers. Many contributors skip reading the documentation and ask basic questions directly, which can sometimes frustrate the maintainers.Next, I went through its documentation. Most of the questions I had, such as how to set up the project locally, how it works, etc., were clearly answered there. After reading the documentation, I successfully set up the Music Blocks project on my local machine. 💡****Tip:**** Before contributing, try to play with the project, understand how it works, make some changes to the code, and see if they are reflected.I experimented with the project by changing the text on a button to check whether it was reflected or not. While exploring the project, one may come across several bugs; ocan report them or even try to fix them. I was experimenting with Music Blocks when I found an issue in their JavaScript editor: there was an extra line number. I decided to fix it, which eventually became my first open-source contribution. *I located the relevant code, and the Visual Studio search functionality helped me a lot in finding it. 💡****Tip:**** One don’t have to understand the entire codebase of the project, start small.The code was adding 1 to the line count. I just removed it and it worked. *I tested it thoroughly and created a Pull Request for it. To my surprise, it was merged within 3 to 4 hours. I was so excited and happy about it. It actually motivated me to make more contributions. 💡****Tip:**** These contributions and communications with the maintainers actually build trust, and there are high chances of one being selected.Afterwards, I made several more contributions. All my contributions can be found here: https://github.com/sugarlabs/musicblocks/pulls/haroon10725 Through these contributions, I learned not only how to write better code, but also how to communicate effectively and document my work properly. GSoC organizations are announced around February 2025. The organizations that apply to the program publish their idea list around January, so contributors can choose the idea which excites them the most and start exploring it. 💡****Tip:**** At max one can submit 3 proposals in GSoC; try to submit at least two proposals for 2 different projects to increase your chance.Sugar Labs also started to publish their ideas around December and January 2025. I chose two ideas from the list and started exploring them. Then from the end of February 2025, I started to work on my proposals. I created two detailed proposals that included my past contributions, how I would complete the project, and a timeline. 💡****Tip:**** Make sure the mentors assigned to the project review your proposal and give feedback on it.I asked the project mentors to review my proposals. They reviewed them and gave me detailed feedback. I improved them and then submitted them to the GSoC website one week before the deadline, as 8th April 2025 was the last date for it. I was pretty confident that I would be selected due to my past activity with the organization. But unfortunately, when the results were announced on May 08, 2025, I was not selected. But this didn’t stop me from making meaningful contributions. After 3 to 4 days, my mentor reached out to me saying that “there is still a chance we can get you into GSoC; Google has opened some additional spots and we are going to nominate you.” I was so happy and thanked my mentors. But luck was not on my side and I couldn't get selected. But then Sugar Labs announced their Sugar Summer of Code 2025. This was the first time they did it, and I was their pilot candidate for it. Under the guidance of my mentors, I created an AI Sample Generation tool which can create endless samples. A small demo of it can be found below: *After completing my internship, I didn't stop contributing. I have continued to stay active in the Sugar Labs community, contributing in various areas. In addition, I've explored and contributed to several other open-source projects such as UniversalPython, which has helped me broaden my technical skills and understanding of collaborative software development. I strongly believe that contributing to open-source projects is one of the best ways to gain hands-on experience. It not only sharpens your coding skills but also teaches you how to collaborate effectively, communicate with the maintainers and work on real world software used by people around the world. At the last I would like the thanks my mentors; Walter Bender (https://github.com/walterbender) and Devin Ulibarri (https://github.com/pikurasa) for their guidance throughout the journey and Saad Bazaz (https://github.com/SaadBazaz) for guiding me in open-source. ### [Reflections from executing a Design Sprint](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/reflections-from-executing-a-design-sprint) - Slug: `reflections-from-executing-a-design-sprint` - Published: 2025-10-30T14:00:46.000+05:00 - Updated: 2025-10-30T14:00:46.000+05:00 - Reading time: 5 min - Tags: Design, Product Design, UI, UX - Authors: Aniqa Sadaf - Visibility: public We're experimenting hard in Grayhat right now to figure out a design flow that actually *works*. We're throwing everything at the wall, trying out all the best practices, using both physical tools (like, chart papers on walls, stickies, real Kanbans, paper and pens... the works) and digital ones (Figma, obviously 💃), and seeing how far we can push AI to help us out. We're not starting from zero, though. We're taking a lot of inspiration from the Google Sprint Kit and mixing it with solid SDLC/GDLC principles. It's important that we first learn the basics, and don't reinvent the wheel. We started with a startup, called Camply (now it's called Enrichly). We were in the "Planning Phase," just trying to figure out what we were even building, who for, and what problem it was going to solve. Camply is a web app for finding and signing up for camps, and the whole goal was to make it super smooth and hassle-free for customers. Our main focus was on fixing two big pain points for users. To do that, we had to dive into research - checking out competitor websites like Outschool, Allschool, you know, the ones our client used and recommended. The cool part was our client *was* the user, so she knew exactly where all the problems were on these other sites. She was our Onsite Customer. I moodboarded all these competitor sites in Figma. Compared their features, their flows, what worked and what totally didn't. From talking to our client and looking at the pain points, we realized we needed a design that was just… intuitive. Something that guides the user on its own, you know? Easy to understand and just fixes their problems. We had a bunch of features to think about - camp listings, search and filters, authentication, all that. But with the budget and timeline, we had to pick what would have the biggest impact. We narrowed it down to the search mechanism. We really had to put our brains into designing the best search. We even looked at sites like Amazon because, let's be honest, their search is just good, and users are familiar with the patterns in it (especially moms!). Then came the system design phase. The team set milestones and planned out the Camply flow for the POC. We had a ton of collaborations just to make sure the design and the tech architecture were compatible and could actually solve the business problems. We did the usual stuff - daily standups, cross-disciplinary meetings, weekly sprints, design handoffs. During the design phase, I made user personas for the "parent" and the "camp manager." Started with rough sketches, got initial client feedback, and discussed everything with the team. I had to constantly update the system architect on every little design change so we could track compatibility. Every design decision I made, I had to be sure it could actually be built well and on time. After the initial sketches (which we did with the system architect using paper and colored pens, lol), I turned them into wireframes in Figma and got the client's feedback. Once the flows were locked, I moved to high-fidelity prototypes. I used the Material Design library because it's neat, has great guidelines, and makes everything consistent. Client feedback was a constant loop until everything was finalized. Once the functional Figma prototypes were ready, we shipped them to the business team. They did the initial user surveys and interviews to test the designs. That led us into the development phase. When development started and the first version of the app went live, I was deep in design QA. I had to make sure the experience was smooth, the flows were accurate, and all the features worked as designed. We recorded all the issues, prioritized them, and got them fixed by the devs systematically. After version one was out, we planned to test it with real users: usability testing. Usability testing is ideal to: - Validate your hypothesis - Fix issues before the big launch - See how users actually use your product vs. a competitor's You should do it at every step. Depending on the stage, you ask different questions. There are three main times to ask users questions: before the test (to screen them), during the test (to answer your research questions), and after the test (for overall feedback). The most important thing? You gotta have the *correct audience*. Not everyone is your user. So you do a quick screening test first with questions like: - How does your everyday life look? - How often do you use products like this? - What do you identify as? etc. Then, during the test, your questions shouldn't lead the user. Let them think aloud. You just watch them interact, notice their body language, and ask things like: - I noticed you did [this action], why so? - What features do you find the most valuable? - Can you try performing [this specific action]? After the test, you ask more open questions: - How was your overall experience? - How likely are you to use this product? And as a designer, you HAVE to note the "critical incidents." - You expected the user to do one thing, but they did something totally different. - They seemed frustrated, or happy, or confused. - You assess what was a success and what was a failure. Tools like website heatmaps also help a ton. They show you the hottest areas on your site - where people click, scroll, move. It helps you understand where to focus on improving the experience. And lastly, you HAVE to document all the test feedback properly. Spreadsheets, screen recordings, audio notes… everything. You'll be amazed at what you notice when you rewatch it. So what do you do after usability testing? You analyze all that data. Look for patterns and common pain points. You need to look at both the numbers (quantitative data, like task completion rates) and the observations (qualitative data). Then you make informed decisions. But listen, NOT EVERY ISSUE IS IMPORTANT. You have to prioritize. Think about how often a problem happens, how much it messes up the user experience, and the potential ROI for fixing it. Collaboration between design and dev is crucial here. You gotta discuss possible solutions together. And then you make iterative changes. Don't try to fix everything at once. After you've made the initial changes, you go for another round of testing. See how the experience has improved and track the data. **So what could we have improved?** In our case, we did apply the best practices for usability testing. We went through all three stages, but we didn't record the feedback in a systematic way. Which led us to just assume we had to change everything a user didn't like. We really needed to group the common user issues and prioritize them properly. And you can't forget that as you move from a POC to an MVP, the client always has new feature demands. If we had recorded what needed to be worked on *after* the usability testing, and also tracked the new features, in a proper, systematic way… it would have led to a much happier client and way more realistic deadlines. We still have a long way to go... We're trying to incorporate technologies like Dev Mode, AI, scripting and more. Also, our Design offering has expanded beyond just UI/UX: We now also focus on Graphic Design, Character Design, Animation and more (coming soon - 3D is exciting!). I'd love to learn more about what your design process is, and how you think we can improve. ## **Some resources** - https://designsprintkit.withgoogle.com/ - https://designlab.com/blog/guide-to-usability-testing-methods - https://designlab.com/blog/what-is-the-ux-design-process - https://www.lyssna.com/guides/usability-testing-guide/usability-testing-methods/ - https://www.lyssna.com/blog/website-heatmaps/ - https://www.linkedin.com/pulse/next-steps-after-conducting-ux-testing-your/ ### [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue) - Slug: `fixing-a-next-js-documentation-issue` - Published: 2025-10-24T18:22:25.000+05:00 - Updated: 2025-10-24T18:31:40.000+05:00 - Reading time: 4 min - Tags: Open Source, Vercel, Next.js, JavaScript, Open Source Community - Authors: Hamad Ullah - Visibility: public A few months ago, I was assigned a ticket to integrate **Mock Service Worker **in to Ruby for API mocking. While trying to make things work, I stumbled upon a confusing issue, not in my code, but in the **Next.js documentation itself**. What began as a simple debugging session turned into a pull request that’s now officially merged into the Next.js repository. This is a blog post on of how I found an issue, what I did to fix it, and why contributing to open source is essential. ### How I Found the Issue I setting up **API mocking** using **MSW** in our Next.js application. For local development, MSW is incredibly useful, it intercepts network requests and allows us to simulate API behaviour without touching the backend. I followed the Next.js documentation example for MSW setup carefully, but something just wasn’t working. The **worker setup** wasn’t behaving as described, in fact the imports were unrecognized. After digging into the issue for a bit, I realized the example itself had a **outdated setup,** something subtle that could easily trip up any developer trying to follow it step by step. I checked GitHub, and someone had already opened an issue describing the same problem. I realized the documentation is outdated and added a to-do for future reference to fix it in my free time. ### What I Did I cloned the Next.js repo, navigated to the documentation example, and made the necessary fix. The goal was simple, make the MSW example actually work as advertised. After verifying the fix locally and ensuring that it didn’t break anything else, I submitted a **pull request** with a short, clear explanation of what the problem was and how my change resolved it. The **Pull Request **I made is the following**:** Fix/msw-issue-68521 by HamadUllah16 · Pull Request #83482 · vercel/next.jsFix: 68521 Updating outdated with-msw example The with-msw is outdated and doesn't work with the latest msw version. What? The with-msw example is outdated and does not work with the latest msw…*GitHubvercel*Soon after, one of the maintainers reviewed it, validated the change, and merged it. That was a really satisfying moment, not just because my code was now part of Next.js, but because other developers wouldn’t need to waste their time figuring out why the setup isn't working as expected. ### Why I Think It Got Merged Open source maintainers get hundreds of PRs. What I did was review the ones that actually got merged. I think that’s what worked in my case: - I explained *why* the fix was needed, not just *what* it did. - I referenced the existing issue and made it easy to verify the bug and the fix. - The PR didn’t introduce extra complexity. It was a focused, single-purpose fix. - I followed the repo’s contribution guide and conventions closely. - I added a demo video which made it easier for reviewers to glance over my changes. Even though they'd still test locally, it establishes trust. I tried to make it as contextual and easy to review as possible, because open-source reviewers are often doing this work in their free time - it's best to utilize their time in the best possible way, in the rare hours they get it. ### Why is open source development important? Open source is the invisible backbone of modern web development. Majority of the frameworks, libraries, and tools we use, from **React** to **Next.js**, **MSW**, **Tailwind**, and beyond, are built on the collective effort of thousands of developers who share their work openly. Contributing back isn’t just a nice gesture, it’s how the web keeps evolving. When you fix a bug, improve documentation, or clarify an example, you’re helping thousands of other developers avoid the same confusion. What makes open source especially powerful in the **JavaScript ecosystem** is how interconnected everything is. A small fix in one project can ripple across others, improving developer experience far beyond a single codebase. In a world where frameworks constantly transform and build on each other, collaboration is what keeps innovation moving forward. Ruby – AI Powered Pitch Platform for Smarter SalesClose deals faster with Ruby. Instantly generate personalized, insight-driven sales pitches for any company using AI. Trusted by modern sales teams to win more.**Check out Ruby, the project I'm working on at Grayhat. I'm open to learn more in the future about Next.js and contributing to open-source. Stay tuned! ### [Mastra MCP AI Hackathon, and the Illegal Agents pivot](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/mastra-mcp-ai-hackathon-and-the-illegal-agents-pivot) - Slug: `mastra-mcp-ai-hackathon-and-the-illegal-agents-pivot` - Published: 2025-05-10T10:49:00.000+05:00 - Updated: 2025-05-19T02:02:01.000+05:00 - Reading time: 5 min - Tags: AI, Events, Agents, LLMs, Innovation, Artificial Intelligence, Announcements - Authors: Saad Bazaz, Talal Ahmed Khan - Visibility: public The first **Illegal Agents AI Hackathon** was a groundbreaking success, with **70 developers** from 13+ universities competing to build the most innovative AI agent systems. After intense judging rounds, we're proud to announce the winners who pushed the boundaries of what's possible with MCP technology. ## 🏆 Meet the Champions ### 1st Place: Omni Recruiter by Hashim Muhammad Nadeem **The Ultimate HR Automation Suite** * This end-to-end recruitment system combines **7 custom MCP servers** to: - Screen resumes from Google Drive - Analyze LinkedIn profiles (posts/likes/activity) - Conduct AI phone interviews with voice synthesis - Create GitHub repos for technical assessments - Send follow-up emails autonomously *Judges' note: "A staggeringly complete implementation that demonstrates MCP's potential in enterprise workflows."* ### 2nd Place: AI Software Engineer by Talha Ali *An autonomous coding assistant that: - Writes and tests production-ready code - Pushes to GitHub repositories - Updates Supabase databases - Sends Slack notifications with test results # All Projects Showcase Here are all the projects with a valid, working submission. ### SummitAI by Abdullah Ashfaq *Revolutionizes meeting management by: - Extracting action items from notes/docs - Creating structured summaries - Sending alerts to Discord channels - File management automation ## GitHub-Slack-Zoom Connector by Hamas Akram *Connects development workflows by: - Integrating GitHub with Slack - Enabling Zoom meeting interactions - Automating team collaboration ## Excalidraw Agent by Abdullah *Visualizes ideas by: - Programmatically interacting with Excalidraw - Creating/updating visual diagrams - Saving drawings automatically ## YouTube Analyzer by Muhammad Zubair *Enhances video consumption by: - Extracting key information from YouTube links - Generating summaries and notes - Enabling video Q&A - Finding specific content ## Discord Moderator by Kaleemullah Younas * Automates server management by: - Scanning and moderating messages - Enforcing community rules - Managing roles/channels - Issuing warnings and alerts ## Vision Buddy by Anas Khan *Supports student success by: - Planning educational journeys - Finding scholarships/opportunities - Preparing for interviews - Creating study roadmaps ## n8n Workflow Manager by Mubashir Hamad Create and Share Interactive Product Demos for Free | SupademoShowcase your product with interactive product demos and guides that can be easily shared as a link or embedded in your website and blogs. Drive product adoption, increase engagement, and boost retention.*Supademo*Automates workflows by: - Managing n8n automation workflows - Editing/updating workflows - Syncing with GitHub repositories ## Instagram Post Automator by Samiullah * Simplifies social media by: - Generating post content from descriptions - Auto-publishing to Instagram - Sending completion notifications ## GitHub Repo Creator by Shozab Mehdi *Accelerates development by: - Creating GitHub repositories on command - Simplifying project setup - Handling repository initialization ## Workflow Automation Scout by Muhammad Usman * Enhances productivity by: - Analyzing repetitive tasks - Providing automation guidance - Implementing workflow solutions ## GitHub-Slack Manager by Abdullah Faisal Built a Slack-based Dev Assistant in 24 hours. Watch the demo. | ABDULLAH FAISAL posted on the topic | LinkedInJust dropped a quick demo of our Slack-based Dev Assistant built during NaSCon AI Hackathon.💻 Platform used: illegalagents.ai Talk to it like a human — it reviews PRs, creates repos, writes docs, edits code & even notifies your team. All from illegalagents. No tab switching. No drama. Check it out 👇*LinkedInMUHAMMAD AHMED*Streamlines development by: - Managing GitHub functions - Providing Slack notifications - Keeping teams informed ## The Sentinel by Sohaib Sarosh Shamsi *Improves code quality by: - Generating unit tests automatically - Identifying untested API endpoints - Analyzing endpoint functionality - Integrating with CI/CD pipelines ## Discord Time Scheduler by Shah Faisal AI agent schedules and reschedules on Discord | Faisal Azmat posted on the topic | LinkedInImagine your calendar saying: 'Hold up... you can’t be in two places at once.'" Meet a Discord-native AI agent with a mind of its own — it schedules, detects overlaps, and negotiates your time like a personal assistant that never sleeps (and never asks for a raise ☕). Built during my first AI hackathon using Illegal Agents website, this isn’t just AI on Discord — it’s AI in sync with you. In this short demo: 💬 Natural conversation ⚠️ Smart conflict detection 🔁 Real-time rescheduling All happening inside your server. 🎥 Watch it in action — because calendars should be more than just boxes and dates. #AI #HackathonProject #SmartScheduling #Automation #DiscordAgent #CreativeTech #StudentInnovation #illegalagents.ai*LinkedInAlexander Mejia*Organizes time by: - Creating events from natural language - Detecting scheduling conflicts - Suggesting resolution options - Updating schedules dynamically ## Omni Swap by Muhammad Etisam Ul Haq * Supports developers by: - Providing code analysis/review - Offering debugging assistance - Suggesting architectural designs - Recommending best practices ## Code Scribe by Muhammad Etisam Ul Haq * Automates documentation by: - Analyzing code files - Generating structured docs - Saving to project directories - Maintaining documentation ## By the Numbers: Hackathon Impact ***Developer Feedback:** - 92% said MCP concepts were clearly explained - 10/10 recommendation score from winners - "Super easy to make AI agents quickly!" - Hashim M. Nadeem (1st Place) ## What We Learned ### The Good: ✅ **Rapid Prototyping Works** Teams built complex agents like YouTube Analyzer and Instagram Poster in View LinkedIn announcement - Join our Discord to continue building ** ### [Grayhat at COMPPEC 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/grayhat-at-comppec-2025) - Slug: `grayhat-at-comppec-2025` - Published: 2025-05-09T11:56:38.000+05:00 - Updated: 2025-05-09T11:56:38.000+05:00 - Reading time: 5 min - Tags: Events, Recruitment, AI - Authors: Muhammad Usama Rashid - Visibility: public It had been nearly a decade since I first set foot on the EME campus, my heart full of hope for admission to NUST. After countless coaching sessions at KIPS and three attempts at the NET exam—each falling short of my dream discipline—I finally found myself enrolled in the Computer Engineering department at EME. Almost immediately, I was surprised by small details—like buying my own university uniform—that felt oddly out of place, yet somehow only deepened my excitement. Those early days were an adventure: swimming laps in the campus pool, trying my hand at horse riding, and exploring the well-stocked libraries filled with cutting-edge resources. Every new discovery reaffirmed that I was exactly where I needed to be. Despite my affection for Lahore, it was my passion for electrical engineering that eventually drew me away to UET for my bachelor’s degree. The pull of that first campus never waned, though, and a decade later I returned—not as a student, but as a representative of my company, Grayhat. Stepping back into the familiar halls felt surreal. I’d come for COMPPEC EME NUST, a competition renowned for pushing students to master the latest technologies. What struck me most was the electric enthusiasm of the participants: professional, curious, and brimming with ideas—just like I had been all those years ago. Arriving around 10:30 AM, I found our booth nearly set up, thanks to Saad Bazaz’s vibrant posters. As I arranged them just so, I realized something profound: for a lifelong “nerd” like me, this place still felt like home. And as visitors began to gather, I knew we were in for an unforgettable day. # Babelfish = Technical Marvel + Chaos! We built Omni out of a desire to improve human communication across the world. This year, we planned to take a huge leap forward—a natively-built, realtime (under 2 second latency) translation system with an amazing UI/UX on an **Apple Watch**. Our target is to make it easy for American tourists to talk to locals, during their trips to Europe (Eurotrips, or summer getaways, as they call them). Aarij, Abdullah and Ali (Triple A, as we call them), our FYP team, managed to deliver all them all and above. You can't have amazing technology without some drama, can you? Well, we had plenty. We had to rip apart another PC in BIOMISA (Thanks, professors!) to run our backend, as the primary PC we brought in (GMachine, God bless it) was not working properly with the university intranet. We aimed to run the demo locally, hence a lot of networking drama had to be figured out. ***Chaos ensued during setup. Here, you can see a ripped-open tower PC with a RTX 2080, and some random pics of Aarij and a BIOMISA team member. 💡Despite all the above, our rockstar FYP team later went on to be selected for the top 5 (Gold) Final Year Projects of the University. Whether they win first prize or not, what they and we have learned is invaluable—build something which solves someone's problems, and people will love it.We will be launching a commercialized version of *babelfish* soon. Stay tuned to our LinkedIn to find out the launch date. # The stall Here's the part we love most... connecting with people. *****Our stall at COMPPEC at EME College Here’s how it all looked: for the next few hours, we were practically swarmed by students eyeballing our projects. I zeroed in on our crowd-favorite, **Death by AI**—a delightfully twisted prompt game where you get a life-or-death scenario, 60 seconds, and just 140 characters to craft a survival plan. The AI then grills your strategy and renders your fate. Nail it, and you live out a whole AI-generated saga celebrating your cleverness. Flub it, and you’re “unable to survive”—no refunds or do-overs! Seeing teams huddle around, debating strategies with the intensity of chess grandmasters (only to discover the simplest idea usually wins), was both hilarious and humbling. I was thrilled—pride practically oozing from my smile—watching the next-gen problem-solvers give our AI a real run for its money. Plus, handing out free drinks and toffees? Instant crowd-pleaser. What really surprised me was how curious everyone was about Grayhat’s work. Drawing on my four years at NESCOM NDC, I led an impromptu masterclass on career paths in Embedded Systems Design. These students arrived armed with lists of courses taken, projects completed, and dreams for the future. Guiding them—recommending key skills, current industry projects, and nifty tools—felt like paying forward everything I’ve learned. All in all, a fantastic reminder that amazing things happen when passion, curiosity, and a bit of friendly competition collide. When the dust settled and our brains had nearly melted from all that AI-induced tension, it was time for the prize distribution ceremony—NUST style. We were graciously handed a token of appreciation. Awards flew out for everything from Speed Programming (blink and you’d miss a contestant typing at 200 WPM) to the nerve-racking 3-Minute Thesis, where presenters managed to pack PhD-level insights into alarm-clock territory. But the real showstopper? A special youngsters’ category—yes, actual school kids, probably still trying to remember their locker combinations, were out there debugging code like seasoned pros. Watching them code circles around us veterans made my chest puff up so much I nearly needed an exhaust valve. As a proud Pakistani, seeing these pint-sized prodigies tackle algorithms with such gusto convinces me our future is in very capable hands (and possibly a few tiny circuit boards!). All in all, it was a good 2 days and I for one, can't wait to go back again someday. Onwards and Upwards! ***From the left: Talal Ahmed Khan, Saad Ahmed Bazaz, Muhammad Usama Rashid (me)# Special thanks to Grayhat Dr Usman Akram and the team at BIOMISA: https://biomisa.org/ *NUST* College of Electrical & Mechanical Engineering COMPPEC Host Team (Especially one kind young man named Anees, from the Media team, who randomly helped us move our stuff to our car) RIP one of our 2k monitors, rest easy young device. ### [How to apply to Grayhat for GSoC 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/how-to-apply-to-grayhat-for-gsoc-2025) - Slug: `how-to-apply-to-grayhat-for-gsoc-2025` - Published: 2025-02-09T11:16:34.000+05:00 - Updated: 2025-05-12T01:53:16.000+05:00 - Reading time: Unknown min - Tags: None - Authors: Saad Bazaz - Visibility: public 💡**Note: We were not able to make the cut for the GSoC (Google Summer of Code) program this year. We will still, however, be conducting open-source projects for students internationally. **Apply to our internship program here: Grayhat Summer Internship - 2025 ### [Is Crypto dead? (An analysis)](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/is-crypto-dead-an-analysis) - Slug: `is-crypto-dead-an-analysis` - Published: 2024-05-16T00:58:33.000+05:00 - Updated: 2024-05-16T00:58:33.000+05:00 - Reading time: Unknown min - Tags: Innovation - Authors: Saad Bazaz - Visibility: public Yes. ### [Python vs Mojo: Are we there yet?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/python-vs-mojo-are-we-there-yet) - Slug: `python-vs-mojo-are-we-there-yet` - Published: 2024-05-05T23:21:29.000+05:00 - Updated: 2024-05-14T14:37:15.000+05:00 - Reading time: 11 min - Tags: None - Authors: Anonymous - Visibility: public Hey there! I am new to both Python and Mojo languages. In this repository, I went on a mission to explore and compare these two languages from scratch, knowing only the basics of programming (I started off knowing only the basics of C++). **As I continue learning both languages, I'll be tracking my progress and updating the benchmarks in the following repository. Do give it a star ⭐️: https://github.com/grayhatdevelopers/mojo-vs-python-benchmarks/## Why did I do it? I've always wanted to explore Python (because of how better it was than C++ according to many friends at university). During my internship at Grayhat, I was advised to learn Python **alongside** Mojo, given that they had a similar syntax. I took the time to read through Mojo's documentation. It seemed promising and interesting. The team at Modular has designed Mojo to be a superset of Python, and it's **specifically** built for complex mathematical coding, something that would be required in **Artificial Intelligence** (What I'm currently studying in University, and the current market boom 🤯). Since it's a newer language, I can also expect it to offer new features and improvements, aligned with modern-day requirements. This made me wonder: **Can Mojo be my daily driver? Can I use it to **learn **programming?It gives the community a good chance to see how well Mojo can really replace Python, especially for its **adoption by newcomers**. It's often said that: **“**If you can't explain it to a six-year-old, you don't understand it yourself.”**Let's see how well Mojo and Python can explain themselves to, well, me! ## Metrics for judging both the languages I set out with the following metrics to judge between the two: - (Which one of them was) **User-friendly** - (Which one of them was) **Easier to use** - (Which one of them is better in) **Performance and stability** The environment which I tested all this in: - OS: Ubuntu WSL on Windows 11 - Editor: VS Code - Version of Python: Python 3.10.12 - Version of Mojo: Mojo 0.7.0 (af002202) - My laptop specifications (Dell XPS 13): - Core i7 1165G7 @2.8GHz - 8GB DDR4 RAM - Integrated Graphics Now that we've gotten that out of the way... Let's get technical with some experiments! ## Experiments **Check the results below if you prefer not to go into the experiment details.### Results For all the codes, Python ran significantly faster than Mojo and beat Mojo, in speed, by a huge margin (at least in my case). ### Comparing the advantages of both 1: Python installation was much simpler compared to Mojo. Installing Mojo was not user-friendly; it would have been better if there was a one-click installation option for Mojo on Windows, similar to Python. 2: The syntax of Mojo and Python was quite similar, with the main difference being that in Mojo, you need to use Python functions by importing them. For example, to take user input, you have to import the "input" function from Python. This made Python easier to learn. For example to use the input function, I first need to import it from Python and then use it in Mojo: from python import Python py = Python.import_module("builtins") py.input("Enter your name")3: Mojo provided helpful explanations with each error, making it easier for me to understand and identify my mistakes. Python, on the other hand, lacked this feature, which is an advantage of Mojo. 4: The code itself requires a main() function to be called in Mojo for it to run while Python runs as is. i.e: *While Python can run without adding this main() function. Interesting design choice! 5: The Discord community of Mojo is very active and helpful. Their Discord has a chatbot which guides through every inconvenience with ease and is up to date with all the errors that I encountered while coding in Mojo For example: *This bot is equipped with the latest info regarding Mojo, so was a very helpful feature 6: Python proved to be more user-friendly for me, mainly due to its proper documentation (because of it being older than Mojo). Moreover, the commands in Python were straightforward and simple to use, unlike Mojo, where there were some instances like for example me clearly stating the variable type (requiring explicit variable declarations), a step which I didnt have to do in Python ### Programs - **Length of last word**: returning the length of the last word in the string. - **Student attendance record**: Whether or not the student is eligible for an attendance award - **Remove repeating letters**: Removing the adjacent letters (one being capital) in a string. - **Detect Capital letter usage** : Returning true if the usage of capitals in it is right. - **Find the difference**: Returning the extra letter among 2 strings ### Benchmarking and Testing The performance of both languages was benchmarked using **Hyperfine**. Programs were tested and outputs were compared to see which one of them was faster (ran an additional code for testing the Memory) ## Question 1 **Given a string s consisting of words and spaces, return *the length of the **last** word in the string. *A **word** is a maximal substring consisting of non-space characters only.**Python Code:** class Solution(object): def lengthOfLastWord(self, s): """ :type s: str :rtype: int """ enterword=s count=0 for i in range(len(enterword)-1,-1,-1): if enterword[i] != " ": count+=1 elif count>0: break return count **Mojo code:** from python import Python def lengthOfLastWord(enterword: String): py = Python.import_module("builtins") count = 0 for i in range(len(enterword)-1, -1, -1): if enterword[i] != " ": count += 1 elif count > 0: break print("Length of the last word:") print(count) def main(): input_string = "Hello World" lengthOfLastWord(input_string) Link: https://leetcode.com/problems/length-of-last-word/description/ ### Benchmarks **Benchmark 1 (Python):** python3 problem-1.py Time (mean ± σ): 11.1 ms ± 1.6 ms [User: 9.4 ms, System: 1.8 ms] Range (min … max): 8.8 ms … 22.1 ms 212 runs Avg memory: 8412k **Benchmark 2 (Mojo):** mojo problem-1.mojo Time (mean ± σ): 222.3 ms ± 9.7 ms [User: 238.4 ms, System: 28.6 ms] Range (min … max): 205.5 ms … 238.0 ms 14 runs Avg memory: 38548k ### Which performed better? The Python code ran 19.95 ± 3.02 times faster than Mojo code ## Question 2 **Given an integer x return true if x *is a palindrome and false otherwise***Python Code:** def checkRecord(attendance_record): attendance_record_str = str(attendance_record) absent_count = 0 late_count = 0 for i in range(len(attendance_record_str)): if attendance_record_str[i] == 'A': absent_count += 1 late_count = 0 elif attendance_record_str[i] == 'L': late_count += 1 else: late_count = 0 if late_count >= 3 or absent_count >= 2: print("The attendance record is not acceptable.") return False print("The attendance record is acceptable.") return True # def main(): checkRecord("PAALP") main() **Mojo Code:** from python import Python def checkRecord(attendance_record: String): py = Python.import_module("builtins") attendance_record_str = attendance_record absent_count = 0 late_count = 0 for i in range(len(attendance_record_str)): if attendance_record_str[i] == 'A': absent_count += 1 late_count = 0 elif attendance_record_str[i] == 'L': late_count += 1 else: late_count = 0 if late_count >= 3 or absent_count >= 2: print("The attendance record is not acceptable.") return False print("The attendance record is acceptable.") return True def main(): checkRecord("PAALP") Link: https://leetcode.com/problems/student-attendance-record-i/description/ ### Benchmarks **Benchmark 1 (Python):** python3 problem-2.py Time (mean ± σ): 11.9 ms ± 2.2 ms [User: 9.8 ms, System: 2.2 ms] Range (min … max): 8.8 ms … 23.0 ms 316 runs Avg memory: 8392k **Benchmark 2 (Mojo)**: mojo problem-2.mojo Time (mean ± σ): 236.4 ms ± 5.3 ms [User: 259.6 ms, System: 21.9 ms] Range (min … max): 228.0 ms … 243.9 ms 12 runs Avg memory: 39080k ### Which performed better? The Python code ran 19.78 ± 3.59 times faster than the Mojo code ## Question 3 **Given a string s of lower and upper case English letters. A good string is a string which doesn't have **two adjacent characters** s[i] and s[i + 1] where:- 0 **Python Code:** def makeGood(s): result = "" i = 0 while i **Mojo Code:** from python import Python def makeGood(s: String): py = Python.import_module("builtins") result = str("") i = 0 while i Link: https://leetcode.com/problems/make-the-string-great/ ## Benchmarks Time (mean ± σ) Range (min … max) Avg.Memory Runs Python 10.0 ms ± 2.4 ms 7.2 ms … 26.2 ms 8240k 111 runs Mojo 176.9 ms ± 17.0 ms 161.6 ms … 216.5 ms 39000k 13 runs ## Which performed better? The Python code ran 17.67 ± 4.61 times faster than the Mojo code. ## Question 4 **You are given a string s representing an attendance record for a student where each character signifies whether the student was absent, late, or present on that day. The record only contains the following three characters:- 'A': Absent. - 'L': Late. - 'P': Present. **The student is eligible for an attendance award if they meet **both** of the following criteria:- The student was absent ('A') for **strictly** fewer than 2 days **total**. - The student was **never** late ('L') for 3 or more **consecutive** days. **Return true *if the student is eligible for an attendance award, or* false *otherwise*.**Python Code:** def detectCapitalUse(word): uinput = str(word) number_of_capital_letters = 0 for i in range(len(uinput)): letter = uinput[i] if ord(letter) **Mojo Code:** from python import Python def detectCapitalUse(word: String): py = Python.import_module("builtins") uinput = word number_of_capital_letters = 0 for i in range(len(uinput)): letter = uinput[i] if ord(letter) Link: https://leetcode.com/problems/detect-capital/description/ ### Benchmarks **Benchmark 1 (Python):** python3 problem-4.py Time (mean ± σ): 11.1 ms ± 1.3 ms [User: 9.6 ms, System: 1.7 ms] Range (min … max): 9.8 ms … 17.4 ms 260 runs Avg memory: 8420k **Benchmark 2 (Mojo):** mojo problem-4.mojo Time (mean ± σ): 230.1 ms ± 10.1 ms [User: 249.7 ms, System: 26.7 ms] Range (min … max): 215.3 ms … 252.0 ms 13 runs Avg memory: 38820k ### Which performed better? The Python code ran 20.64 ± 2.52 times faster than the Mojo code ## Question 5 **You are given two strings s and t. String t is generated by random shuffling string s and then add one more letter at a random position. Return the letter that was added to t.**Python Code:** def findTheDifference(s, t): for i in range(len(t)): if s[i] != t[i]: result = t[i] break print("The difference is:", result) def main(): findTheDifference("abcd", "abced") main() **Mojo Code:** from python import Python def findTheDifference(s:String, t:String): py = Python.import_module("builtins") for i in range(len(t)): if s[i] != t[i]: result = t[i] print("The difference is:") print(result) break def main(): findTheDifference("abcd", "abced") Link: https://leetcode.com/problems/find-the-difference/description/ ## Benchmarks Time (mean ± σ) Range (min … max) Avg.Memory Runs Python 9.7 ms ± 1.3 ms 7.3 ms … 15.6 ms 8420k 304 runs Mojo 178.0 ms ± 10.9 ms 167.2 ms … 205.7 ms 8500k 14 runs ## Which performed better? The Python code ran 18.31 ± 2.70 times faster than the Mojo code. ### Final Remarks This is the conclusion I came up to after experimenting with both Python and Mojo, from installation up until their usage. - **User Friendly:** For someone like me who doesn't know much about programming languages, I found Python to be more user-friendly. From installing the software to writing code, Python was easier to understand. Installing Python was a simple one-click process, while it took me some time to figure out how to install Mojo, especially because I'm not familiar with terminals and Ubuntu. When it comes to writing code, Python was straightforward and easy to grasp, whereas with Mojo, I had to pay attention to small details to make sure the code worked correctly. So Mojo was harder for me and other new users to adopt and understand - **Easier to Use: **Mojo and Python have similar ways of writing code, so it wasn't too difficult to understand both of them. However, Mojo uses functions from Python, even for simple tasks like "taking input." In Mojo, I had to use a prefix like "py.input" instead of just "input" in Python. This got confusing, and I had to make sure to use the right prefixes for each command, making Python seem simpler and more straightforward. Additionally, a feature I really liked in Mojo was that it explained why an error occurred inside the code. This made it easier for me to figure out exactly what went wrong, which is a feature lacking in Python.As for the REPL, the REPL of Mojo showed the line number for each line of code while Python didn’t. However, I couldn’t use Python-based functions in Mojo when I tried it from REPL. For example when I tried the input function in MOJO, the REPL would stop responding: *While it worked perfectly on Python: * I didn’t do a lot on REPL but when I did, this is what I found. Also, the speed of Mojo was slower even in the REPL. It took longer for Mojo to print a simple “Hello World” than Python. 3. **Performance and Stability:** I noticed a small delay in how quickly the code ran between Python and Mojo. The difference was more noticeable, especially when I coded directly in the terminal instead of using VS Code. So, when it comes to performance, Python is significantly faster than Mojo. The reason **I** believe made Python faster than Mojo was that Mojo needs to import functions from Python for it to use them. So that importing might be the reason for it to run a bit slower while Python uses it’s own function hence the speed difference. In terms of stability, both languages worked well during my usage. However, I did encounter a strange error when I tried to import Python variables inside a function (which is supposed to be done globally, outside the function). Here's an error I faced: *Quite a raw error, considering it mentions LLVM. Maybe it's for the big guys. Regarding stability, I don’t have a solid answer to it. Both of the languages ran smoothly without me having to face bugs or glitches. Overall, I had tonnes of fun and learned a lot about programming languages. I really hope this breakdown helps more noobs on their way to keyboard-breaking glory, and inspires them to try out new tech, specially in its early stages. Peace! ### [Create Multiplayer Web Games, Faster](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/create-multiplayer-web-games-faster) - Slug: `create-multiplayer-web-games-faster` - Published: 2024-05-04T10:31:32.000+05:00 - Updated: 2024-08-31T13:41:49.000+05:00 - Reading time: 2 min - Tags: Development, Multiplayer Gaming, Gaming, JavaScript, Developer Tools - Authors: Syed Abdullah Nasir - Visibility: public **Open-source Product Announcement! Check out create-multiplayer-game on NPM and GitHub. Currently in alpha.***Imagine this**...* You have a great idea for your next indie game, and since the world is online-first, you dive into the world of multiplayer game development, but you want to skip the tedious setup process. Sockets? Firebase Realtime DB? Eventually, you give up on multiplayer, and focus on building a great single-player experience first. When you do, and you put off multiplayer to the end, you end up having to refactor a lot of code to make it "multiplayer-ready". What if games were built **multiplayer-first**? That's why we built a React/Vite powered game template, powered by Playroom. It swiftly conjures up a multiplayer game template in React, so you can focus on bringing your gaming vision to life. npx create-multiplayer-game@latestIt will ask you a few small questions to personalize your game. Have a look. *Works great with macOS and Linux.**Name Your Game: **First off, we need a name for your masterpiece. What will you call it? **Project Name: **Need a project name, or are you happy with the default generated one? Feel free to customize it as you like! **Choose Your Template: **Now, which template suits your fancy? Use your arrow keys to browse the options: *Option A:* "vite-react-ts": A ReactJS project with Vite, crafted in TypeScript. It's equipped with PlayroomKit for multiplayer magic, along with an array of game components, sounds, and interactions. Usually the top choice. *Option B:* "next-ts'': A NextJS project in TypeScript, powered by PlayroomKit for multiplayer functionality. Once you've made your choice, sit back as we download your selected template. Then, you'll be greeted with a message: "Project initialized at . Happy Coding!" ### What's next? - We're building a mechanism for you to keep updating your game, as we improve our templates. - We're building a useful Chrome DevTool for debugging game states (no more hardcoding or adding "cheats" to go forward in a game). - Some premium templates with some extra goodies. Read more here: https://grayhat.studio/games/pricing *We love open source, bringing useful tech to builders, and contributing to the overall knowledge stream. A lot of our work is R&D-based and on experimental tech. If you're interested in working with or for *Grayhat*, DM or comment!* **This article was authored by** Syed Abdullah Nasir, **Software Engineer at Grayhat.** ### [The rise of the Full Stack Designer](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-rise-of-the-full-stack-designer) - Slug: `the-rise-of-the-full-stack-designer` - Published: 2023-12-19T14:21:00.000+05:00 - Updated: 2024-05-13T16:30:26.000+05:00 - Reading time: 5 min - Tags: Design, Artificial Intelligence - Authors: Muhid Abid - Visibility: public Human creativity, evident since the era of cave paintings, has consistently driven advancements in design. From early sketches to digital tools shaping other tools, the evolution of UI/UX and HCI has been remarkable. The convergence of design and technology has given rise to tools like Figma, Adobe XD, and platforms such as FlutterFlow and Webflow, transforming the way we build digital experiences. The future, marked by innovations in AI, promises a paradigm shift in sketching and design. In this dynamic landscape, the emergence of the full stack designer reflects the evolving roles in technology and design. Who is the Full Stack Designer? What is the future of design? Let’s touch upon such questions, together. ### The Evolution of Design Humans have been designing since the early days; cave painting. It’s a core part of planning and strategizing. The ability of humans to plan and coordinate attacks is what has distinguished us from other beings, and in the future, perhaps will be the sole differentiator between us and newer beings. In the history of computing, UI/UX or HCI has evolved from sketching, to drawing and to using digital tools themselves to design other digital tools (trippy!). For years, humans have used visualization to achieve a “vision” of what they’re building, from movies to games and to all kinds of computer programs. The term “User Experience” itself is relatively new. It was coined by Don Norman in 1993 (Nielsen Norman Group, 2017). Using digital tools to **build** other tools is not a new idea. Since even before the millenia, UML, codegens, and tool-builders like Eclipse have been blurring the lines between what is a “sketch” and what is real implementation. Today, we see more refined versions of such tools. Prototyping tools like Figma and Adobe XD are allowing designers to create functional prototypes, and plugins like Figma → Code AI are making it possible to generate entire screens with just a few commands. Additionally, platforms like FlutterFlow and Webflow are making it easier than ever to visually build websites and apps. All this is about to change. Back in 2016, Google’s early stage text-to-sketch demo, named “Quick, Draw!”, showed us how the concept of sketching may be revolutionized, replacing your sketches with real-life drawings. Today, in 2023, we see Gemini, which boasts exceptional cognitive understanding of visual scenarios. We also see Figma taking huge strides in reducing handover with their Dev Mode, with interesting AI-based features which bridge the gap between engineering and design. As we evolve AI and the tooling around it, we may see humans honing in on their strengths (their brains) than their weakness (their bodies), which was one the sole differentiator between us and other animals. We may become more of "orchestrators", and the planners of the future, while AI and robots are the executors. ### The Full Stack Designer of Today Below are some schools of thought about who the Full Stack Product Designer is (Pixso, 2023): - A person with a wide range of skills who can handle all aspects of software development unilaterally. - A web designer who knows his way around coding and can develop the designs they have designed. - A designer that is well-versed in the technical aspects of a product and can take it from idea to prototype on his own. - A professional that’s highly skilled in strategic planning, user analysis, interface design, and visual design. - A technical professional who can take a product end-to-end, understand complex Business Requirement Documents, decide which features should be built, communicate with all the stakeholders from engineering to clients, handle high fidelity designs, and help QA. There are many definitions of the Full Stack Product Designer and they are all right in their own context! The kind of a Full Stack Product Designer you need completely depends on what your company team needs. In her blog “What does it mean to be a “full stack” designer? Is it worth the effort?” Chung calls a remarkable multitalented designer, a Unicorn 🦄. Below is an illustration from that blog post showing the overlapping skills of a unicorn designer: *Image from:### The next few years… The standard UI designer, up until now, branches into two directions; either they become 1) an executive with a high level understanding of design or product (Chief Product Officer, Chief Design Officer), or, 2) a technical master of their craft, that is, a Senior UI Designer. The diagram below shows how these careers evolve and eventually become extremely distinct. *A recent discussion with Ouzair Hafeez, senior Product Designer at Spotify, showed us how similar career paths are followed in emerging startups and even corporates. How do we see this map out in the next 5 years? We may see fullstack engineering mixing with fullstack design, and the gap between technical and executive eventually merging into one. Plus, depending on the type of company, the senior Product Designer and Chief Product Officer may be the same person. Today, we see many startups lead by designers. We’ve worked with Tabish Ahmed, who has an awesome career as a Product Lead and Designer at Meta, Google and Adobe, working on a technical startup, Playroom. It seems like the ease of prototyping enables designers to directly communicate and achieve objectives with engineers, and their contributions can directly be mapped out to code. However, we still have separate roles (so far!) for technical and design leads. As the gap between prototyping and real engineering decreases, at least for MVPs, we may see early stage startups having one person for both executive functions in design and engineering; the Chief Product Officer, and one person for both technical functions in design and engineering; the Full Stack Product Developer. A similar pattern is followed at Omni, which enables them to achieve goals with a tiny team. ### AI Revolution & the future Designer? With the rapid development of AI there has come a wave of intelligent design and development assistants. These tools are still in their early stages but with the speed they are being developed, it won’t be late till we see them being used everywhere as a basic tool. So what does it mean for the Full Stack Product Designer of the future? They need to leverage this AI to accelerate the design and development process, utilizing tools and systems that allow them to create efficient and effective designs. They will have to get proficient in using low code tools and hardware at the very least. Soon we should be seeing unicorns leading entire projects end-to-end. If you’re a designer today, you should be trying to get into both deeper design concepts as well as doing some end-to-end product building. Side projects really help! ### Conclusion The rapid development of technology is giving rise to a new era of Full Stack Designers. With their unique blend of technical, creative, and business skills, full stack designers play a crucial role in bridging the gap between various teams while being the think tank in the team. As technology continues to advance, design roles are becoming less pronounced, and the full stack designer is becoming an integral part of the entire product development process. The future holds exciting possibilities for full stack designers, as they continue to adapt and evolve alongside the ever-changing landscape of technology. ### References - https://pixso.net/tips/full-stack-designer/ - https://careerfoundry.com/en/blog/ux-design/what-is-a-full-stack-designer/ - https://medium.com/ux-school/what-does-it-mean-to-be-a-full-stack-designer-is-it-worth-the-effort-575b07e3a4ea *We love building new, visually-stunning and performant technology, for the future. A lot of our work is R&D-based and on experimental tech. If you're interested in working with or for *Grayhat*, DM or comment!* **Author:** Muhid Abid **Co-author:** Saad Bazaz ### [Automatons and AI for JavaScript Junkies](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/automatons-and-ai-for-javascript-junkies) - Slug: `automatons-and-ai-for-javascript-junkies` - Published: 2023-12-11T15:28:00.000+05:00 - Updated: 2024-05-09T16:25:01.000+05:00 - Reading time: 4 min - Tags: JavaScript, LLMs, Automation, AI, Automata, Automationsolutions, Bots, Meta, WhatsApp, Artificial Intelligence, xstate - Authors: Saad Bazaz - Visibility: public *AI !== LLMsAutomatons are the forerunners to AI, but don’t underestimate them. They’re cheap, fast, predictable, and do their job perfectly. What’s the difference? Both AI and Automatons branch out from the Theory of Automata, which is a foundational concept of computing. It sees the world as consequences and actions (in their terminology, “states” and “transitions”). Automatons start off very simple; they carry out tasks in a deterministic fashion. Consider it like a branch of finite possibilities, and at each state, it decides to move to the next state or stay on the current one. AI (especially deep learning) can be seen as a complex Automatons with the ability to “learn”. TLDR; Automatons work on data, AI understands it. ## The problem At Omni, we wanted to utilize Vercel’s Serverless Architecture to deliver video and audio content to multiple platforms, WhatsApp being the first. We leaned towards Vercel’s Edge functions due to the mass scale at which they can operate, and due to the cheap cost and long function runtimes. Unlike a standard server, Serverless cannot have context. Each function invocation is independent from the other. We needed a solution to persist state between function invocations, and we needed to make it robust for our product roadmap; there are tonnes of features more to be implemented. We wanted to have a conversational flow with the user. Having an “if else” sort of situation would get messy **very quickly.** We couldn’t be restricted by bot libraries because 1) The Edge is very picky about libraries; many JavaScript libraries are not supported, 2) Making external API calls for the bot would be a costly resource, 3) We needed to actually render content, and we weren’t too sure about how that would play out in a restricted environment. ## Stumbling upon states Luckily, I’d taken a course on Formal Methods back in uni. We’d made states in two boomer Eclipse tools called SPIN and UPPAAL. I knew we needed something similar. We needed something which could “pause” and “resume” work from any point, and knew exactly what to do. But there was no way I was going back to Eclipse. Then we discovered XState.js. State management is a challenge on the web, giving rise to Redux, Zustand, and many more state management libs. XState solves that using academic principles of state management. It’s also got a snazzy web editor, reminiscent of my Eclipse days, but at least with good UI. *PS: If a professor is reading this, please utilize new libraries like these in your classrooms, instead of dinosaur-age software which was prime in your days. This stuff is more relevant to students and can help them solve actual problems.* ### Building We used the online editor to build the states, with the help of our research partner Haroon Ali. The online editor gave us the equivalent JS code, and we loaded the now-deprecated XState 4. Worked well in Edge. Here’s our original diagram: Xstate Machine original diagram * However, it turns out that academic theory is a bit different from practical; we ended up having to add reusable guards on JavaScript to keep our code sane. Now that it was a reusable and clean machine, we created a Factory Function that would generate a flavored machine for every platform; WhatsApp, Telegram, and WeChat. Our highest priority is maintenance and ease of adding new features. Since we’re only two developers, it would mean the death of our product if it took too long to adapt to new features. ## Cons ### Predictable death XState has no predictable way of knowing when its transitions have stopped. That was bad for us, because as soon as we returned a response to the user, our serverless function was killed. To tackle that, we polled the machine every few seconds to see if there was still any activity. // Additional "hack" to wait for the state to settle do { const space = '\\u200B' // Zero Width Space const queue = encoder.encode(space) // Send an empty streaming response to keep the serverless function alive controller.enqueue(queue) // Wait 12 seconds. That's quite enough for Omni renders. await new Promise((resolve) => setTimeout(resolve, 12000)) } while (Object.entries(interpreter.state.activities).some((v) => v[1])) console.log('[machine] Ending interpreter...') // Complete the streaming response here controller.close() ### Always We use the “always” keyword in XState to auto-transition to states. However, there’s no way to repeat an “entry” action when the state loops on itself. So our bots are quiet when they’re stuck at a state. ### Cache states This is more of a Vercel Edge problem than an Xstate problem, but if there was a more performant (and, as always, cheap!) way of retrieving userstate, we would shift to that. We’ve checked out Vercel KV, but that seems a bit overkill for now. Are you a developer? Have you really read all this through? Bruh. If yes, we’d love to hear your solutions! We're building AI-powered dubbing tools at scale and at precision, at Omni. If you're interested in our API, or interested in joining our team, hit us up. **Author: **Saad Bazaz **Special mentions:** Muhammad Hashim for kickass botting Haroon Ali for RnDing at his best. UrduX for their constant support and research work. ### [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship) - Slug: `secure-your-ship` - Published: 2023-10-25T15:36:00.000+05:00 - Updated: 2024-05-10T13:49:03.000+05:00 - Reading time: 3 min - Tags: Supply Chain Security, NPM, Open Source, Open Source Community, JavaScript, Typescript, Vercel, Innovation, Tech - Authors: Asfand Yar - Visibility: public *In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks. Real-world incidents serve as stark reminders of the impact of security vulnerabilities. The Equifax breach in 2017 exposed sensitive data from 147 million individuals due to unpatched software, and the Colonial Pipeline ransomware attack in 2021 disrupted critical fuel supplies. Security lapses have even derailed major mergers and acquisitions, as seen in the delayed acquisition of Yahoo by Verizon following data breach revelations. The SolarWinds exploit underscored the risks associated with unlicensed software, affecting numerous networks. ### AI & Blockchain bring more security concerns than before. Supply chain challenges wield a profound impact on the growth trajectory of today's AI and blockchain startups. In the AI realm, dependencies on open-source libraries and frameworks make startups vulnerable to security breaches and compromised model outputs, disrupting development timelines and compromising data integrity. Likewise, in the blockchain space, vulnerabilities in smart contract frameworks and consensus mechanisms due to supply chain issues can undermine the trustworthiness of distributed ledgers, leading to compliance issues and investor concerns. These vulnerabilities often arise from various sources such as unpatched software, misconfigurations, and human error. The complexity introduced by open-source components and third-party integrations necessitates thorough vetting and monitoring to counter potential threats. ### Enter SecOps. Integrating Supply Chain Security and Security Operations (SecOps) into development cycles becomes imperative for proactively addressing vulnerabilities. However, current security solutions often suffer from alert fatigue, overwhelming users and diluting the impact of critical notifications. Enter listen.dev, a new player in the dynamic landscape of web development challenges, offering a fresh perspective on fortifying security measures seamlessly. ### Make Security Actionable. If you've used dependabot before, you'll immediately know what the term "alert fatigue" means even if you've never read about it before. Basically, when you receive a flood of notifications and alerts but don't have an action item for them, and they keep piling up, you eventually start ignoring the notifications. That's deadly for security; you start ignoring once, and it goes permanently under the rug **until it's too late.** We've had some insider conversations with listen.dev, and according to their claims, security is no longer an afterthought. It's gotta be part of the SDLC (Software Development Life Cycle). What does that mean for devs? Just like how Vercel plugs themselves right into the everyday DX (Developer Experience) of a developer with their GitHub integration, listen.dev also has a GitHub integration which gives you 1) Actionable insights, 2) A "Security Review" mechanism (Yes, it works exactly as it sounds like. It's a security approval for each PR which has security vulnerabilities). On the side, Listen features the standard: **Real-time Security Scans:** By embedding real-time security scans into each pull request, listen.dev facilitates early identification and resolution of vulnerabilities during code integration. **DNS Profiling:** A standout feature, listen.dev's DNS profiling provides proactive alerts for potential malicious attacks, acting as a shield against looming threats. **User-Friendly Interface:** listen.dev distinguishes itself by offering a user-friendly interface focusing highly on its DX (taking inspiration from Vercel), making security measures not only effective but also accessible. **High Customization:** The platform's high level of customization caters to diverse user needs, ensuring improved security and ease of use with tailor-made solutions adaptable to specific requirements. In the ever-evolving digital landscape, listen.dev emerges as a promising contender, offering robust security enhancements alongside a user-centric approach. Its suite of features designed for practical usability and adaptability signals a potential shift towards more secure and personalized web development practices. The key is not just about adopting new tools but integrating security seamlessly into the development workflow. It's necessary now more than ever before to be proactive than reactive - a supply chain vulnerability or hack could mean life or death for a company in today's privacy-savvy world. At Grayhat, we bring impossible to life, and challenge tech to its very extreme. A team of ragtag hackers, with a thirst for innovation, we don't shy from taking on early-stage design and development challenges which define the gray line which sits between the possible and impossible. Interested in working with us? Drop us an email at sales@grayhat.com.pk Author: Asfand Yar Aftab ### [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app) - Slug: `sign-in-with-adobe-in-a-next-js-app` - Published: 2023-10-20T13:07:00.000+05:00 - Updated: 2024-08-31T13:42:30.000+05:00 - Reading time: 3 min - Tags: JavaScript, Development, Next.js, NextAuth - Authors: Saad Bazaz - Visibility: members **You can see the relevant Pull Request, and all the provider's code mentioned in this article, on GitHub: https://github.com/nextauthjs/next-auth/pull/8890Whether you're a seasoned Auth geek, or a newbie, NextAuth (soon, Authjs.dev) is the auth lib to use. That's why we chose it for Omni, since we needed a stable Auth solution so we could focus on experience. Adobe is a popular platform for creatives, and is widely used (obviously) internally at Adobe. From Behance, to Creative Cloud, and to Adobe Stock and many more, it's sort of the defacto for professional creatives. I believe it's a staple for products building in the art, media and design space, and sits right next to Google and ArtStation, and that made it a low-hanging fruit as an authentication feature for Omni's tools. This article has been made after painful hours understanding Adobe's OAuth 2.0 documentation. But there's one thing I'm grateful for; **standards** in the boring stuff. OAuth 2.0 has really made life much easier than before. The wild days of crappy Auth setups are long gone, and almost all major providers follow the standard to quite an extent, making integrations a breeze. At least for the libraries and builders who understand the standard. ## How to implement Adobe OAuth 2.0 Authentication ### 1. Create an account on Adobe's Developer Console Pretty straightforward. Use your team's account to create a Developer account on Adobe. You should be able to see a console here: https://developer.adobe.com/console/home *An important question: *What information do you want from Adobe? This is something that differs for each app. In our case, we just needed the bare minimum, so we went with Adobe Stock. You can see all the available scopes in OAuth 2.0 here. ### 2. Create a project On the Adobe Developer Console, create a new project for the app you're working on. ### 3. Add an API In the project you just created, you need to add an API. We chose Adobe Stock here, as mentioned earlier, because it gave us what we needed at the bare minimum. Make sure to choose an API with the **OAuth Web App **option. That's the one which'll work with Next.js. Read more on all the types here. ### 4. Configure the Credential **Default redirect URI: **This is the domain where you're hosting your app. Use https. **Redirect URI pattern: **This is a regex. This is the one I use: https://({{YOUR-PROJECT-NAME-ON-VERCEL}}-.*-{{YOUR-TEAM-NAME-ON-VERCEL}}\.vercel\.app|localhost)(.*)/api/auth/callback/adobe### 5. Install NextAuth Read more on that here. Set it up as per your requirements. ### 6. Add the Adobe Provider If, by the time you're reading this article, our PR is not part of the main source code, you'll have to add a custom OAuth Provider. No worries, here's the code for that: ### [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - Slug: `building-blazingly-fast-with-material-design` - Published: 2023-10-13T16:01:00.000+05:00 - Updated: 2024-05-09T16:23:02.000+05:00 - Reading time: 5 min - Tags: Material UI, Flutter, UI, UX, Design - Authors: Wasif Sadiq - Visibility: public *Build fast and stable, and get MVPs done faster.In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences. I’ve been recently working on a project that, for some reason, started off with a totally custom UI. It was quite painstaking, trying to nail down multiple screen sizes, ensuring consistency, etcetera. That’s when our team brainstormed and decided to redesign the entire app, Figma and Flutter both, in Material UI. That's when I decided to delve into the world of Material Design. Using it immediately gave the app a fresh and engaging user interface. The client was passionate about creating an application that not only served a purpose but also left users with a memorable experience, so Material UI fit perfectly into the users’ native systems, Android, and gave them a seamless experience. *Let's take a deeper dive into Material Design, shall we?* Back in 2014, Google unveiled its masterpiece - Material Design. It's like a special design guide for making digital interfaces look and work better. It uses grids, smooth movements, and cool lighting and shadows. It's all about grid-centric layouts, fluid animations, and those subtle yet striking lighting and shadow effects – all coming together to create a user experience that feels as intuitive as a well-worn path. As I delved deeper into Material Design's guidelines and principles, I could immediately sense the attention-to-detail the designers at Google had. They’ve worked on almost every aspect of the design system, and made it super general so it can adapt to almost any system. It wasn't just about making things look beautiful; it was about making them work seamlessly too. You can learn more about the design side of Material in our previous article. *Now, **why** did Material Design supercharge our process?* ***A Unified Visual Language. ***Embracing Material Design means joining a conversation that Google has been perfecting for years. It's like speaking the same language as Android enthusiasts – a familiar, comforting dialogue. Since most of our users were on Android, it was a no-brainer to use Material to make our app blend in with the OS. Our designers made sure to take hints from Google’s own Drive and Mail app, and from the native Dialer app. We had to bring in a Pixel 4 specially for this (thanks to our team member, Syed Abdullah Nasir, for his phone 😅) ***Ready-Made Building Blocks.*** Material Design gives developers a treasure trove of premade UI components. No need to start from scratch; these elements are like LEGO blocks that speed up your prototyping and development process. Both design and development teams were super happy with this; the designers used the Material 3 Design Kit, and used the standard Android frame in Figma, to design the base screens. Then, all the Flutter team had to do was see the name of the components in the design, go to the Flutter Material 3 Docs, look up the same names of components, and simply use them in our code. ***Seamless Across Platforms.*** As we embrace cross-platform tools, Material Design shines as a beacon of consistency. It ensures your design looks and feels the same, no matter where it's experienced. This was super important for the folks at the development team; our client wanted a consistent look across all Android screens, from Pixels, to Samsungs. The best part of Material was that it was consistent; Heading1 was Heading1, in Figma, in a Samsung phone, in an iPhone, and almost any device. So we were never worried that something might look odd according to screen size. ***Engaging User Experiences.*** Material Design puts user interactions front and centre. It's all about giving users immediate feedback, creating interfaces that feel like second nature, and ultimately, making users smile with delight. We were just glad we got the ripple animation out-of-box. It brought a hint of professionality and polish to our work. ***Continuous Evolution and Community Support.** *With Google's watchful eye, Material Design keeps evolving to stay in tune with the latest UI/UX trends. Plus, there's a vibrant community out there, offering plugins, extensions, and wisdom in forums. The transition from Material 2 to 3, and from color themes, is pretty seamless. *But… I’m not a Flutter guy 😞 How can I use Material?* Here, let's talk about *how *to incorporate Material Design into your projects with frameworks and libraries that make it a breeze: **For the Web.** - If you're a React enthusiast, MUI is your go-to choice. - Vue.js lovers can embrace Vuetify for a rich suite of Material components. - Angular devotees are in luck. Since Angular is also maintained by Google, it has pretty much the best Material library possible, Angular Material! Best docs ever. **For Flutter (Google's darling).** Google's Flutter inherently champions Material Design. Just tap into package:flutter/material.dart to unlock a world of Material widgets. **For Android.** If you want a true Material experience on Android, look no further than AndroidX's Material Components. They're tailor-made to adhere to Google's Material guidelines. **For iOS.** Even in the Apple ecosystem, Material Design has a presence. Material Components for iOS gracefully bridges the gap, ensuring a consistent experience, however, they are entering maintenance mode and recommend shifting to native iOS components, SwiftUI and even Flutter. *I’m pumped! 🤩 Now what?* Leveraging these frameworks and libraries not only streamlines your development process but also guarantees an authentic Material Design experience, staying true to its core principles. I recommend you to read its principles and familiarize yourself with the concepts. That way, you won’t always have to rely on a designer to tell you exactly what to do; you can use your own Material-intuition to solve things yourself, along the way. Therefore, as you embark on your Material Design journey… **Dive into the Guidelines. **Immerse yourself in Google's official guidelines. They're like your North Star, guiding you through the vast sea of typography, motion, and more. **Harness Material Components. **Whether it's web development with Material Components for Web or conquering the mobile realm with iOS and Android versions, Material Components are your trusty companions. **Designer's Arsenal. **Prototype in style with design tools like Sketch, Figma, and Adobe XD. They offer Material Design kits that'll make your designs sing. **Stay Ahead.** Engage with Material Design-focused communities or forums. It's how you ensure you're always at the forefront of design evolution. In closing, remember that Material Design is more than just a pretty face. It's a catalyst for efficiency and aesthetic brilliance. By embracing its philosophy, you're not just hopping on a design bandwagon – you're supercharging your journey in the world of development. Whether you're a developer, designer, or a visionary crafting digital experiences, Material Design is your indispensable ally in shaping the future of the digital landscape. It certainly was mine, and it might just be yours too. **Author: **Wasif Sadiq **Editor:** Fatima Majid ### [Build games in Swift](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/build-games-in-swift) - Slug: `build-games-in-swift` - Published: 2023-09-27T16:07:00.000+05:00 - Updated: 2024-05-14T13:13:06.000+05:00 - Reading time: 4 min - Tags: Development, Gaming, Swift, Apple, Apple Developer, Multiplayer Gaming, iOS, Playroom, PlayroomKit - Authors: Anonymous - Visibility: public *Apple is making moves into the gaming world. You might want to prepare yourself for it.Going down the memory lane of child play, I think of the days when the world seemed so much bigger from a little boy’s eyes playing *Temple Run* on a borrowed iPhone - a work of enormous wonderment. Lost in the labyrinth of my favourite video game, I yearned to be part of its magical universe. A single thought endlessly echoed in my mind: "How is this game created? I want to make games like this!" As the years passed and I grew, it was no surprise that I found myself on the path of a developer. With each step, I honed my skills and explored various avenues. But destiny had a plan of its own, and it led me to the realm of Swift. *Perhaps the little boy within me had awakened to redirect me to a path I was destined to tread.* And there, I discovered Swift, Apple's remarkably user-friendly programming language, waiting to breathe life into those long-cherished dreams. As Apple dives further into entertainment and gaming with hardware like the VisionPro, and with its own custom M1 chips, we may see a surge of Apple-native gaming engines, a more refined Unity and Unreal, machine learning frameworks, and perhaps, a new era of desktop and mobile gaming with Apple. Let’s step into the world of gaming in Swift, uncovering the tools, frameworks, and tips that make it an exciting journey for budding game developers. ### Starting off with a simple, thought provoking question - why Swift? **Blazing fast performance. **Like a high-performance sports car in the programming world, it is built for speed and efficiency. When it comes to gaming, performance is key, and Swift ensures your games run seamlessly and without a hitch. Swift is optimized for Apple, and ships natively for all OSes - iOS, iPadOS, macOS, watchOS, to name a few. **Go beyond Apple devices. **Originally designed for Apple gadgets, Swift has spread its wings. You can use it to create games not only for iOS and macOS but also for other platforms, reaching a broader audience. Making a greater impact. **Seamless integration. **It plays harmoniously with Apple's tech toolbox, including SpriteKit, SceneKit, and ARKit. This synergy simplifies game development, letting you harness cutting-edge features with ease. ### How does an app dev do game dev? Game development is pretty similar to app development - it just involves more creative processes, however these can be easily mapped to one's app development pipeline: - **Idea Generation: **Start with a spark of inspiration. Think about what kind of game you want to create. Is it a mind-bending puzzle, an adrenaline-pumping action-adventure, or perhaps a captivating simulation? - **Designing Gameplay: **Outline the rules, objectives, and gameplay mechanics. Consider how players will interact with your game world. - **Coding with Swift: **Dive into Swift to bring your ideas to life. Write the code that powers your game mechanics and characters. - **Testing and Tweaking: **Games evolve through testing. Playtest your game, gather feedback, and make improvements. - **Polishing Graphics and Sound: **Create captivating visuals and immersive audio to make your game come alive. - **Launching Your Creation: **When your game is ready, launch it and share it with the gaming community. Embrace player feedback to enhance your creation. While Swift is a great choice for game development, like anything in life, it certainly its has its cons, I have enlisted some below: - Platform Limitations: While Swift has expanded its horizons, it's still primarily associated with Apple platforms. - Types of Games: Swift seems better for* point-and-click *games, *puzzle *games, and games with native UI. Swift may not be a good choice for complex games involving interactions and physics-based game mechanics. While there are open-source game engines in Swift like GateEngine available, their support is limited and it's just good for pet projects. - Learning Curve: Learning Swift and game development can be a bit challenging, especially for beginners. - Resource Availability: The Swift game development community is smaller compared to other game development languages like Unity or Unreal Engine. On the flipside, opting for a native programming language like Swift over web technologies offers several advantages: - Performance: Native languages are finely tuned for specific platforms, delivering superior performance compared to web-based technologies that run in a web browser. - Access to Hardware: Native languages have direct access to hardware resources, enabling more efficient utilization of device capabilities such as graphics and sensors. - Offline Play: Native games can be enjoyed offline, ensuring a seamless gaming experience without needing an internet connection. - Platform Integration: Native languages offer deeper integration with platform-specific features and libraries, resulting in a more polished and immersive gaming experience. Taking Swift game development a step further, my team built PlayroomKit's SDK for Swift, enabling easy multiplayer between platforms. This groundbreaking advancement involves wrapping a JavaScript SDK in Swift, providing you with the ability to seamlessly incorporate web technologies into your Swift-based games. This, in turn, opens up opportunities for cross-platform gameplay, expanding your game's reach to even greater heights. To showcase the power of PlayroomKit, we integrated it into a TicTacToe game. Simple, yet engaging. The result? A fun and interactive gaming experience that seamlessly combines the best of both worlds: Swift and web technologies. Swift - a secret doorway to your (*I mean* *our)* game development dreams. Whether you're painting 2D wonders with SpriteKit, exploring 3D universes with SceneKit, or unleashing your creativity with Metal, Swift equips you with the tools to make your gaming visions come alive. With passion, creativity, and a bit of Swift know-how, you're set for an incredible journey into the world of game development. Get ready to craft experiences that captivate players, bring joy, and make your mark in the gaming universe. It's time to let your gaming adventures begin! **Author:** Engr Sajid Khalil **Editor:** Fatima Majid ### [I feel blue - Unveiling Culture Fit; An Immortal Myth of Recruitment](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/i-feel-blue-unveiling-culture-fit-an-immortal-myth-of-recruitment) - Slug: `i-feel-blue-unveiling-culture-fit-an-immortal-myth-of-recruitment` - Published: 2023-09-15T16:29:00.000+05:00 - Updated: 2025-04-29T00:21:29.000+05:00 - Reading time: 3 min - Tags: Recruitment, Culture Add, Company Culture, Recruitment Strategies, Cultura - Authors: Anonymous - Visibility: public We often find ourselves widening the gyre of recruitment practices in pursuit of filling teams with the *right fit* – hitting all the right notes of skill set, personality, and value. The quest to find *the right fit* to help us grow might as well get us on the path to make-believe land. Apologies for stumping on your bubble there, but as you run towards your familiar rock, you inadvertently overlook the diamond hidden in your path. Culturally-fit hiring strategies have set their roots deep in IT recruitment. It has become a norm to hire individuals matching closely to set organizational values and the JD. It's an unconscious inclination towards structuring the process in ways it benefits the organization *currently*. For a *current* project. To fill *current* needs. Seems like a big win at the moment - and it is! You just achieved culture-fit! But how much value does it add value in the long run? Recruiters go to great lengths to find the right candidate and end up with a conformed team of like-minded – culturally fit individuals. Sounds great, no? But does all the glitter make it gold? *Yes* – would be the easiest deduction. As a recruiter and having been on the sinking boat to hire the right fit, I have hired some exemplary candidates who fit the role and resonated with current culture but alas! I had to face turnover as early as after 2 days of joining (amongst others who stuck around for half a year… or a week). A reflection was in order. A restructuring of the seemingly right process became inevitable. So, who do we really blame here, the recruiter, candidate, or culture? Perhaps leave it to the Gods of fate. Unfortunately, besides being a short-term approach, finding the right people to hire is time consuming and has several downsides! Sometimes, we focus too much on technical skills that the idea of how a person can make the team better is sidelined. There’s a psychological tug-of-war in industry to achieve the *right fit* when all we strive for is to be different – perhaps a *right add *might change the narrative? Make way for the star of this article *culture add* here. We are talking about adding a pop of fuchsia to a canvas of whites. While it may not be everyone's cup of tea, it undeniably commands attention. Similarly, embracing a new perspective, veering away from the conventional, and introducing a challenging feat to the team can kickstart innovation, liberate you from a similarity rut, and broaden your visionary horizons. As Mahatma Gandhi said and I quote, “No culture can live, if it attempts to be exclusive.”. Culture add advocates for diversifying teams with individuals who bring forth a fresh perspective to help the team grow rather than just expand the team who dress, talk, behave, and perform the same. A study conducted by McKinsey & Company highlights the tangible financial benefits associated with top-team diversity. Additionally, research published by The Association for Psychological Science underscores that empirical evidence strongly supports the notion that diversity, encompassing differences in ethnicity, culture, gender, and more, yields substantial advantages for organizations. In a world where everyone races towards a novel future, sometimes the answers lie in the past. Learning from the historical concept of *Seidenstrassen* or Silk Roads; a metaphor of European and Asian cultural interchange, we luminate the pathways not paved with silk and spices, but differences in ideas, perspectives, skills, and traits. The concept of *culture add* or the *right add, *as I have advocated throughout, challenges the traditional notion of recruiting individuals who seamlessly fit into an organization's existing culture. This approach actively encourages the inclusion of culturally diverse individuals within the organization. Ideally, the culture add approach encompasses both cognitive and visible diversity. For instance, from a cognitive standpoint, it might involve hiring an impulsive decision maker into a predominantly calculated team – and vice versa. On a visible level, it could mean adding a female member to a male-dominated group. Building on this, while hiring for IT teams, one can keep an eye out for emerging talent, potential, and disqualify bias based on current skill sets. With the industry growing in all possible directions, hiring for the future is key to thriving in cut-throat competition. Let's ask ourselves, how can this different tech-stack change the dynamics? How might diversifying the skill sets within a team influence the development of creative solutions and products? Will adding this individual with an itch for unconventional into a team of conventional coders stir up innovation? However, this approach doesn’t require an extreme shift from your existing culture. But should definitely inspire a process away from fitting candidates into carefully curated boxes to seamlessly fit-in; and towards an addition to make you think differently, expand your point of view, and invigorate growth in different directions. From hiring with a tunnel vision of stale homogeneity, to striving for dynamic diversity. And that’s where hiring for growth instead of mere expansion begins. Let’s expand more on the topic in the articles in sequel to this one. Share your thoughts, and stay tuned to dive in more detail with us! **Author: **Fatima Majid ### [The Evolution of SecOps, DevOps, DevSecOps, GitOps, and Developer Experience](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/the-evolution-of-secops-devops-devsecops-gitops-and-developer-experience) - Slug: `the-evolution-of-secops-devops-devsecops-gitops-and-developer-experience` - Published: 2023-09-06T16:34:00.000+05:00 - Updated: 2024-05-09T16:35:52.000+05:00 - Reading time: 3 min - Tags: DevOps, GitOps, SecOps, Software Engineering - Authors: Syed Abdullah Nasir - Visibility: public *OctokittyOpsIn the fast-paced world of software development, staying ahead of the curve is essential. As build times shorten, Sprint cycles shorten, and remote culture rises, the management of the Software Development Lifecycle is rapidly being transferred from the hands of managers into the hands of developers themselves. Auditing by a manager is no longer a one-time thing; metrics of software quality like security, performance, code quality, and testing have been delegated to the developers themselves. The base unit is now the Pull Request - whenever a chunk of code is added to the main code, it's the team's responsibility to ensure it's good code. This allows developers to consistently improve all the metrics and have a "history" of quality. Five crucial concepts have emerged in recent years, revolutionizing the way software is developed, secured, and managed. These concepts are SecOps, DevOps, DevSecOps, GitOps, and Developer Experience (DX). In this article, we will explore each of these practices and their significance in modern software development. **SecOps** SecOps, short for Security Operations, has become indispensable in today's digital landscape. It encompasses the integration of security practices into the operations of the software development process. The primary goal is to fortify software security by ensuring that security is not an afterthought but a fundamental part of the development pipeline. By embedding security practices from the outset, SecOps minimizes vulnerabilities and strengthens defenses against cyber threats. **DevOps** DevOps, a portmanteau of Development and Operations, is all about fostering collaboration and automation within a software development team. It aims to bridge the gap between developers and operations teams, enabling faster development cycles and improved software quality. DevOps practices include continuous integration, continuous delivery, and infrastructure as code, creating a streamlined and efficient development process. **DevSecOps** DevSecOps takes the principles of DevOps and adds a crucial layer of security. In today's threat landscape, security cannot be an afterthought. DevSecOps integrates security measures throughout the entire DevOps pipeline, ensuring that security is woven into every stage of development. This proactive approach reduces the risk of vulnerabilities and data breaches, making it a vital practice for safeguarding software in the digital age. **GitOps** GitOps leverages the power of version control systems, most notably Git, to manage and automate the deployment, configuration, and monitoring of applications and infrastructure. By treating infrastructure as code and using Git repositories as the single source of truth, GitOps simplifies and streamlines the management of complex systems. This approach enhances traceability, transparency, and collaboration among development and operations teams. **Developer Experience (DX)** Developer Experience, or DX, is about creating an environment that empowers developers to do their best work. It encompasses everything from user-friendly development tools and documentation to efficient workflows and supportive team dynamics. A positive DX leads to increased developer productivity and innovation, making it a critical factor in attracting and retaining top talent in the competitive software industry. **The Synergy** When these five concepts—SecOps, DevOps, DevSecOps, GitOps, and DX—are combined, they form a holistic approach to software development and operations. DevOps accelerates development cycles, while DevSecOps ensures that security is embedded from the start. GitOps streamlines deployment and management, while a positive DX enhances productivity and innovation. The interplay between these practices creates a secure, efficient, and enjoyable development environment. ## Why Ops? 1. Efficiency: Streamlining complex software development and operations. 2. Speed: Faster development, deployment, and innovation. 3. Security: Integrating security from the start. 4. Agility: Adapting quickly to changing market demands. 5. Cost Reduction: Optimizing resources and reducing operational costs. 6. Developer Productivity: Enhancing the developer experience to attract top talent. Numerous organizations have successfully implemented these practices to transform their software development processes. From tech giants to startups, the adoption of DevOps, DevSecOps, GitOps, and a positive DX has led to faster delivery of high-quality software with enhanced security features. **Google's DevOps Transformation** Google adopted DevOps principles to enhance its software development and operations. They reduced their average release cycle from months to days, resulting in faster feature delivery and improved service reliability. This transformation allowed Google to maintain its leadership in the tech industry. **Netflix's Continuous Deployment with DevOps** Netflix implemented DevOps practices to achieve continuous deployment. They can now release updates and new features to their streaming platform hundreds of times a day. This rapid iteration keeps customers engaged and satisfied, making Netflix a global entertainment giant. **Target's DevSecOps for Enhanced Security** Target integrated DevSecOps to bolster its cybersecurity efforts. By proactively addressing security vulnerabilities in the development process, they fortified their systems against threats. This approach helped Target rebuild trust with customers after a significant data breach, showcasing the power of DevSecOps in safeguarding sensitive data. **Conclusion** In the ever-evolving landscape of software development, staying updated with these transformative practices is essential. SecOps, DevOps, DevSecOps, GitOps, and DX are not just buzzwords; they represent the future of efficient, secure, and enjoyable software development. Embracing these concepts can help your organization stay competitive and thrive in the digital age. **Author: **Syed Abdullah Nasir ### [Design to Scale](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/design-to-scale) - Slug: `design-to-scale` - Published: 2023-08-23T16:37:00.000+05:00 - Updated: 2024-08-17T13:22:00.000+05:00 - Reading time: 3 min - Tags: Design, UI, UX, Product Design, System Design - Authors: Saad Bazaz - Visibility: public Picture yourself driving down a road and making a left turn at the end, only to be confronted by a roadblock due to ongoing construction. Swiftly, you reverse your vehicle, alter your path, and embark on a detour to ultimately reach your intended destination. Now, expand this scenario on a larger scale. Imagine a crowd of *ten thousand* other individuals navigating the same road, and among them, *one thousand* encounter the obstructed route. Like you, they also backtrack, change directions, and adopt an alternative route. Another possible scenario: Someone else witnessing both your car and the one ahead of you taking an unplanned detour promptly deduces that something is off. They might assess the situation from a distance and perceive it as an anomaly and follow your lead without seeing what's wrong for themselves. **Paulo Coelho says, “The problem is, sometimes you stop and think you understand the world. This is not correct. The world is always moving.”At an individual level, making mistakes is a natural part of life's journey. But when these mistakes are magnified on a grand scale, they can become a costly hiccup. Mistakes can inspire systems, but can also mold them like a shell around themselves. Nature has a keen tolerance to mistakes - it embraces them as part of its change mechanics. A zebra has an instinct to save its life from a threat like a lion, but that instinct is actually the absence of the love of death, which… died. Countless zebras with a will to die had to die, before the ones which didn’t could become the majority. Designing and scaling systems with a "natural" mindset, often referred to as biomimicry or biologically inspired design, involves drawing inspiration from the efficiency, adaptability, and sustainability found in natural systems. By integrating these principles into human-made systems, it's possible to create solutions that are better aligned with the natural world and more conducive to scalability. What is natural, though? Is it something which has been iterated over countless times? Can, one day, our robotic and cold systems be called “natural”? If I simulate a system through a genetic algorithm, test every possible edge-case of it, and let it figure out the best way to do something… can I now call that system “natural”? Perhaps the building of systems, whether inspired by the nature around them or not, is inherently “natural” to a human being. Systems don’t also have to be invented or thought from scratch. They can build upon existing systems, or be a subset of them. You can build a system by connecting a few other systems with one another. Almost every ecosystem on earth is symbiotic in nature; the output of one, becomes the input to another, and vice versa. Shouldn’t our systems be strict, and built to prevent mistakes? I think otherwise. Keeping things stupidly simple, and building a robust framework of iterative improvement, while keeping a large vision in mind, may still be the best approach to building systems. The objective is always to maintain a balance, while moving progress - a key point of nature’s systems is sustainability. Of course, yes, there could be a “catastrophic event” which changes the course of the system, but good systems will always find a way forward, or, die out and leave a vacuum for better ones. "Nature has already solved many of the problems we are grappling with. Animals, plants, and microbes are the consummate engineers. They have found what works, what is appropriate, and most important, what lasts here on Earth." — Janine Benyus In the business world, this “balance” usually translates to burn rates, cost-profit charts, etcetera. As humans and their technology evolves, these iteration cycles may become shorter, but they will always exist. Perhaps one day, we humans could escape the labor which goes into these cycles and become strategic thinkers and visionaries. This evolution would augment (not replace!) human capabilities, and would force us to redesign and rethink some of our inefficient and “unnatural” human systems which have crept into our world. The first question I ask at Grayhat when designing systems is “How would this system exist if there was no technology in the world?”. In most cases, when software translates to the real world, there is almost always a way to achieve the objective without even touching a screen. Playing around real-world perceptions and experiences is a key stepping stone in the road to invention - only once you’ve understood how humans perceive the existing world, can you bring them out of their everyday lives and blow their minds. In the words of Albert Szent-Gyorgy: **"Innovation is seeing what everybody has seen and thinking what nobody has thought."**Author: **Saad Bazaz **Editor: **Aniqa Sadaf ### [We built a multiplayer, web-based Mario-like game with PlayroomKit... in 7 days!](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/we-built-a-multiplayer-web-based-mario-like-game-with-playroomkit-in-7-days) - Slug: `we-built-a-multiplayer-web-based-mario-like-game-with-playroomkit-in-7-days` - Published: 2023-08-09T16:51:00.000+05:00 - Updated: 2025-10-12T20:37:37.000+05:00 - Reading time: 5 min - Tags: Multiplayer Gaming, Playroom, PlayroomKit, Gaming, Innovation - Authors: Saad Bazaz, Anonymous - Visibility: public To play the game, open this link on a laptop or TV: https://cast-app.vercel.app/ *Update: *We've now proudly open-sourced this project! Repository: https://github.com/grayhatdevelopers/platformer.ai *“The best articles are the ones with clickbaity titles.” - Unknown* We’ve been grinding our gears for 2 years at Grayhat, trying to get into games. Sure, we love web development and making the best products for our clients. Sure, we’ve built things in low-level vanilla JavaScript (at that point I would’ve loved me some chocolate JS) which haunt me in my sleep every night. But that doesn’t beat the fun in games, does it? We tried everything; Unity. Unreal. ThreeJS (we even tried building a game engine in ThreeJS - more on that later). The toughest part? **Multiplayer**. Every single time. Sure, we got some good, choppy single player working. But when it came to having more people join the fun, the logic just didn’t scale. This year, we made a resolution to try something new. We brushed off the trusty ol’ game engine, Phaser3, and explored some interesting new tech for multiplayer - **PlayroomKit.** *(I mean, we’re not biased towards it. There are a lot of great solutions out there - it’s just that this is the one we helped build.)* It’s not really something new unless we give ourselves an insane challenge, is it? So here goes… A multiplayer Mario-like game in 7 days. 7. *Multiplayer.* ## Day 1 - Inception: *“We’ll have to start by building a Mario-like game.”* *“Last I heard, my job title wasn’t ‘Wheel Inventor’. Let’s try something else...”* We usually build upon the shoulders of giants, and this time was no different. We found some cool code for Mario in Phaser3 on GitHub. The code comments were in Chinese, so it took some translation with ChatGPT to understand what it meant. We studied the refreshingly-nice documentation for PlayroomKit. Given that our objective was a classic platformer game, the Phaser example gave us a good high-level overview of how the game would work. PlayroomKit's Stream Mode makes your game act like a typical game console - A separate screen plays the game, while the phone(s) are simply controllers. We found that was a nice option for our Mario game, since the classic feel of the NES is really hard to replicate on a phone’s tiny 5” screen. ## Day 2 - Masters of Puppets We ran the project, and fell into the classic dilemma. As a software engineer, it feels easier to rebuild a project from scratch because it makes the code feel more like you. That keeps you safe and comfortable. I feel like the sign of a good software engineer is their ability to play with the cards they get and make the best out of it. I think of it as *iterative rebuilding* - use the right practices *going forward*, and *refactor* things which get in your way. Sort of like a long antibiotics course. In our case, the code structure was great - but to actually have the player move whenever the controller on PlayroomKit was moved, we thought we might have to dive deep into the game logic. Fortunately for us, we had a short brainfart - We could simply **simulate keypresses **within the game. I knew for a fact that game engines had such options, to account for bot players, and for automated testing. I’d seen a similar concept being used in Google’s own blogs, where they simulated keypresses on Chrome’s Dino Game. So we created a basic Phaser KeySimulator, and hooked it up with our phone controller: // Simulate pressing a key simulateKeyPress(keyCode) { const keyObj = this.input.keyboard.addKey(keyCode) keyObj.isDown = true keyObj.timeDown = this.time.now keyObj.isUp = false keyObj.timeUp = 0 this.input.keyboard.emit('keydown') } // Simulate releasing a key simulateKeyRelease(keyCode) { const keyObj = this.input.keyboard.addKey(keyCode) keyObj.isDown = false keyObj.timeDown = 0 keyObj.isUp = true keyObj.timeUp = this.time.now this.input.keyboard.emit('keyup') } // An example of simulating the UP key for 1 second simulateKeyPress(Phaser.Input.Keyboard.KeyCodes.UP) setTimeout(() => simulateKeyRelease(Phaser.Input.Keyboard.KeyCodes.UP, 1000)That was it. No need to change controls deep down - We just puppeteered it from the top! ## Day 3 - Powering Up We whipped up a simple SNES controller using some great code from Codepen. We hooked the buttons with PlayroomKit’s state logic and started sending “inputs” from the controller to the cast screen. See the Pen SNES Controller by Tim Pietrusky (@TimPietrusky) on CodePen. So far, we’d gotten single-player to work. Game running on laptop, controller running on phone. *Some problems: 1. It was only single-player. 2. We had no way to automate testing. We had to play the game every single time to test every feature. ## Day 4 - Luigi: Our idea was to have a free-for-all of players filling the game, to test the limits of the PlayroomKit SDK. The original game’s code didn’t agree - it was built solely for a single player. ### Hardcoding: The first step to a good experiment is dummy data - you can’t tightly couple yourself in long implementations unless you know what you’re doing. In our case, it meant adding a second hardcoded player. After some blood, sweat and tears, and adding comments wherever we broke stuff, we were able to add a second, albeit quite diseased, player to the game, and make it perform actions based on a second player (also hardcoded). ## Day 5 - Multiplayer Mayhem: If it works for 2, it should work for 20. We took a dive and replaced the hardcoded second player with some more generic logic which allowed an “array” of players to exist simultaneously, each with its own logic. This took multiple breaks of the code and a lot of overtime, but the results? Worth it. *## Day 6 - Field Test: It was time to put the guinea pigs up to the test. *The chaos which ensued was exactly what we were looking for. ## Day 7 - Deployment We decided we’d had enough of juggling two repositories - one for the cast screen in Phaser3, the other for the controller in React - so we built a Turbo monorepo to make things easier to deploy, manage and test. Installation was pretty straightforward - until we got the genius idea to standardise Node versions across the two projects. There went our day. Vercel’s got great support for Turborepo, so deployment was a breeze. ## A noob's overview Making games multiplayer has always been a hassle, and it's a huge barrier-to-entry for emerging game devs and studios. For Grayhat, PlayroomKit was the key for a rag-tag group of web developers to explore game dev at warp speeds - no need to worry about infra anymore, we could now focus on making games look appealing and engaging. That's the whole point. Apps can survive bad UI/UX to a certain extent. Games can't. If your game isn't fun, no one is going to even consider it twice. But that kind of craft takes time, and when you're spending hours figuring out why your networking code is sending corrupt data, you're either gonna spend big bucks, or a lot of hours. We have neither. Sure, PlayroomKit has its pitfalls - there's a huge roadmap ahead with tonnes of work to be done. But I understand that it's early stage tech and there's a lot of potential in it. The Playroom team already has a huge list of amazing features, like built-in lobbies and joysticks, and we love being part of the journey. I'd put it as simply as: **It's the Firebase of game development.## Parting words 🚀 Have you tried game dev? What are the challenges you've faced? Would you like to read more about stuff like this? DROP A COMMENT! *Disclaimer:* We do not own the rights over any characters or any resemblance of the characters depicted in the game. This experiment was purely for fun and to learn, and we do not have any commercial benefit from it. ### [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr) - Slug: `will-google-material-withstand-xr` - Published: 2023-07-20T16:55:00.000+05:00 - Updated: 2024-05-09T18:32:34.000+05:00 - Reading time: 4 min - Tags: Design, VR, AR, UI, Flutter - Authors: Muhammad Munaf Ul Hassan - Visibility: public It goes by many names. Material, Google Material, M3, Material You, the Worst Design Library Ever As Per Every Posh Designer. Unveiling Material You - Material DesignThe next stage for Material Design*Material Design*You may know it after Google announced Material 3 as the successor of the widely known, boring Material 2. Perhaps you heard how Material 3 supports super cool widgets on the home screen. Or, you randomly woke up one night to find your Google Pixel looking completely different than it did at the party last night. The real deal, however, is how Google is shifting the Material mindset to capture a larger range of devices; from watches, to TVs, and even car dashboards. It's 2023. Why are we writing about M3 now? We're working on building native-like Flutter apps, and have discovered that the latest versions of Flutter are now shipping with M3 beta, as the out-of-box UI solution. Flutter – Material Design 3Start building with Flutter*Material Design*### UI/UX is changing For the past two decades, UI/UX was synonymous with "design for screens". A few years up until Apple's sudden announcement of the VisionPro, we've seen a dynamic shift to extend UI/UX beyond the pixels of a screen; it's gone back to its native definition of "how to make people a part of the things they do". *The official demo of how the "apps" menu would look like in the Apple VisionProApple, as always, went pretty hard on designers. A complete guideline, along with some great tips, is available on Apple's Design section to build interfaces the "right way" for XR. This isn't the first time; Apple is notorious for being pretty strict and demanding on designers, and has released guidelines for every single interface they support, each with their bespoke environments, inputs, and dos-and-donts, be it for watches, phones, tablets, and even cars. ### Material 3+ as a competitor We've discovered that in the world where we're constantly surrounded by digital interfaces, Google's Material Design M3 offers a more powerful blueprint than its predecessors and competitors, for creating a user-friendly UI. Clear, user-focused language is at its heart, ready to transform your platform's user experience across the board. ### How to Material You **1. Clear Communication is Key** The hallmark of M3 is direct, user-centric language. Replace ambiguous prompts such as "Are you sure you want to move to trash?" with the more direct "Move to trash?" **2. Titles Matter** Avoid all caps in your titles. M3 advocates for sentence case, creating a softer and more welcoming interface. **3. Make Every Word Count** Abbreviations can be useful, but clarity is king. Unless you're short on space, full terms outperform abbreviations in ensuring your message reaches every user. **4. The 'You' Factor** M3 recommends the use of "you" to create a personal touch. It's about keeping the conversation between the UI and the user, so refrain from mixing "you" or "your" with "me" or "my". **5. Punctuation Perfection** Less is more when it comes to punctuation. Avoid periods in short texts and opt for contractions - "can't" is easier on the eyes than "cannot". Oxford commas are endorsed, unless there's an ampersand in play. Remember, commas always live inside quotation marks. **6. Exclaim with Caution** While exclamation points aren't banned, they should be used sparingly. Exceptions are allowed for greetings and congratulatory messages. **7. The Role of Parentheses** Parentheses are handy for defining acronyms or citing sources, but skip them for side notes or afterthoughts. **8. The Ampersand Rule** The '&' symbol is a bit of a diva. It’s acceptable in headings, but best avoided in body text. Google's Material Design M3 is more than just a style guide - it's a strategic tool for enhancing user experience and making that said experience consistent across multiple interactions. The official Material website does not delve into tiny specifics by mentioning screen sizes, device types, etcetera. I take that as a good sign. That means they design beyond the boundaries and restrictions of mere devices. They design for humans. However, going through the Foundations section of Material design's official website, it specifically covers touch devices, but not hand gestures through vision cameras. That kind of threw me off. Also, the layouts aren't really capturing the Z-depth factor in XR. This definitely needs some updating and some language change to make the system more inclusive to XR. There's a world beyond 3-pane layouts and 2-dimensional interfaces: Get going with the times, Google! ;) They're not too behind in the game though. Apple still uses iPad layouts and interfaces for the VisionPro. Smart or lazy? I'll leave that to you to decide. ### Parting words A clear, engaging UI built for the right platform, can be a pivotal factor in product adoption and user satisfaction, laying the groundwork for robust business growth. Stay tuned to our newsletter for more updates and insights on enhancing your digital interfaces. Now, it's over to you: Do you think Material will survive? Guest Author: Muhammad Munaf Edited by: Saad Bazaz ### [CSS Clamp: A Paradigm Shift in Responsive Web Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/css-clamp-a-paradigm-shift-in-responsive-web-design) - Slug: `css-clamp-a-paradigm-shift-in-responsive-web-design` - Published: 2023-06-28T16:59:00.000+05:00 - Updated: 2024-05-10T13:48:22.000+05:00 - Reading time: 3 min - Tags: CSS 3, Upskill, W3C, CSS - Authors: Asfand Yar - Visibility: public *In the ever-evolving world of web development, it's crucial to stay ahead of the curve. As developers, we continuously seek efficient solutions that simplify our workflows and enable us to create exceptional user experiences. CSS, with its vast array of properties and functionalities, has always posed a challenge for newcomers and seasoned professionals alike. However, the introduction of CSS clamp has revolutionized the landscape of responsive design. In this article, we will explore the remarkable benefits and functionalities of CSS clamp, unveiling its potential to streamline our development processes and elevate our CSS skills effortlessly. ## **Introduction: Simplifying Responsive Design with CSS Clamp** CSS clamp has become a game-changing solution for responsive design, offering versatility and ease of use that every developer should embrace. With its increasing browser support, it has the potential to be the next best thing after media queries, revolutionizing the way we create responsive layouts and typography. ## **The Magic of CSS Clamp: Fluid Containers and Responsive Typography** So, what exactly does CSS clamp bring to the table? Imagine creating a container with a width value like **clamp(300px, 90vw, 1600px)**. Within this single declaration, a world of possibilities unfolds. The first value, **300px**, sets a minimum width for the container, ensuring it never shrinks beyond this limit. This prevents content from becoming cramped and unreadable on smaller screens, enhancing the overall user experience. To introduce responsive magic to the container's width, the second value must be fluid. By leveraging viewport units, such as '**vw**' representing a percentage of the viewport width, the container's width dynamically adjusts according to the screen size. For instance, when using **clamp(300px, 90vw, 1600px),** the container will fluidly scale between occupying 90% of the viewport's width on larger screens and maintaining optimal readability on narrower screens like mobile devices. This eliminates the need for additional media queries or complex calculations, providing a seamless and responsive experience for users. ## **CSS Clamp in Action: Creating Dynamic Container Widths** To ensure design consistency and prevent overly wide containers on large screens, the third value, **1600px**, sets an upper limit for the container's width. When the calculated width based on the viewport percentage exceeds this maximum value, the container's width is capped at **1600px**. This harmonious interplay between minimum, responsive, and maximum width values empowers developers to create designs that adapt gracefully across a myriad of screen sizes and resolutions. ## **Achieving Responsive Typography with CSS Clamp** CSS clamp isn't limited to fluid containers; it also presents an effective solution for achieving responsive typography without the need for media queries. By applying clamp to heading sizes and body text, we can create fluid and scalable typography that adjusts seamlessly to different screen widths. For instance, let's consider a heading element with the CSS declaration:** font-size: clamp(24px, 6vw, 48px)**. In this case, the heading font size dynamically scales based on the viewport width. On larger screens, it occupies 6% of the viewport width, resulting in visually appealing and well-proportioned headings. On narrower screens, the font size adjusts to maintain optimal legibility without requiring manual adjustments or additional media queries. Similarly, we can apply CSS clamp to body text, allowing it to adapt fluidly to various screen sizes. For example, a CSS rule like **font-size: clamp(16px, 2vw, 20px)** ensures that the body text scales between **16px** if **2vw** is less than **16px**, and **20px** if **2vw** is greater than **20px**. Furthermore, if **2vw** is equal to any of the values **17px**, **18px**, or **19px**, the font size will adjust accordingly. This granular control over the typography guarantees optimal readability and enhances the overall user experience. ## **Streamlining Development: Eliminating Media Queries with CSS Clamp** By leveraging CSS clamp for responsive typography, we can create harmonious and visually pleasing designs that automatically adjust to different screen widths. This approach eliminates the need for writing multiple media queries targeting specific breakpoints, streamlining our CSS code, and simplifying maintenance efforts. With the power of CSS clamp, we can achieve typography that not only adapts seamlessly but also provides a consistent and engaging experience across various devices. ## **Embracing CSS Clamp: Revolutionizing the Future of Responsive Design** In conclusion, CSS clamp emerges as a powerful ally in the realm of responsive design. Its ability to create fluid containers and scale typography effortlessly without reliance on media queries opens up new possibilities for developers. By embracing CSS clamp, we can streamline our development workflows, enhance user experiences, and ensure consistent design across a multitude of devices and resolutions. As we strive to stay ahead in the ever-changing landscape of web development, CSS clamp proves to be an indispensable tool in our arsenal. I've set up an example of CSS clamp in action... test it out and let us know in the comments if you have more ideas on how to use it! CSS Clamp Article by Asfand Yar Aftab ### [URLSession: A journey to Advanced Request Control & Configuration](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/urlsession-a-journey-to-advanced-request-control-configuration) - Slug: `urlsession-a-journey-to-advanced-request-control-configuration` - Published: 2023-06-21T17:03:00.000+05:00 - Updated: 2024-05-09T17:04:49.000+05:00 - Reading time: 2 min - Tags: Swift, Apple Developer, Apple, Swift Advanced URL Sessions, URL Sessions - Authors: Syed Zohair Abbas Hadi - Visibility: public *In iOS development, URLSession provides powerful capabilities for configuring network requests and exercising fine-grained control over their behavior. Let's explore some key aspects of request configuration and how you can leverage them in your app. **Cache Policies:** URLSession allows you to define cache policies for your requests. Cache policies determine whether a response should be cached, and if so, how it should be used. Some of the most used policies are: - `URLRequest.CachePolicy.useProtocolCachePolicy`: The default policy that follows the caching rules specified by the server's response headers. - `URLRequest.a.reloadIgnoringLocalCacheData`: Forces a server reload and bypasses the local cache. - `URLRequest.CachePolicy.returnCacheDataElseLoad`: Returns cached responses if available, otherwise loads the data from the server. You can specify the cache policy when creating your URLRequest object: let url = URL(string: "https://api.example.com/data") let request = URLRequest(url: url!, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 30)A single line of code can be the key to avoiding numerous challenges. By leveraging caching policies, you can effectively overcome latency issues, enhance the offline user experience, and alleviate server load. **Request Priorities:** There are certain cases where higher-priority requests should be made first, in that case, URLSession has also got you covered. It allows you to give Higher-priority requests more bandwidth and resources. Request priorities are defined using the `URLRequest.NetworkServiceType` enum, which includes options like `.default`, `.background`, `.interactive`, and `.voIP`(we’ve been able to make significant progress with this particular service type 😬). Here's an example of setting request priority: let url = URL(string: "https://api.example.com/data") var request = URLRequest(url: url!, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 30) request.networkServiceType = .background**Fine-grained Control using Delegates:** To get an even tighter grip over sessions, URLSession provides delegate methods that allow you to exercise control over the request lifecycle and handle various aspects of networking. The key delegates include `URLSessionDelegate`, `URLSessionTaskDelegate`, `URLSessionDataDelegate`, and `URLSessionDownloadDelegate`. These delegates provide methods for handling authentication challenges, monitoring progress, handling response data, and more. For example, you can implement the Authentication Challenges like basic authentication, OAuth or custom auth schemes. A way to do this can be seen below: class MyURLSessionDelegate: NSObject, URLSessionDelegate { // ... func urlSession(_ session: URLSession, task: URLSessionTask, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) { // Handle authentication challenges if challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust { // Example: Validate server's SSL certificate let credential = URLCredential(trust: challenge.protectionSpace.serverTrust!) completionHandler(.useCredential, credential) } else { completionHandler(.performDefaultHandling, nil) } } // ... }**Use Cases for Fine-grained Control:** Fine-grained control becomes crucial in scenarios where you need to handle custom authentication schemes, implement resumable downloads, track progress, manage cookies, or handle specific network conditions. Additionally, by using delegates, you can intercept and modify request and response data, customize caching behavior, or implement your own networking protocols. By leveraging the power of URLSession's request configuration and delegates, you can tailor your networking code to meet your app's specific requirements and provide a seamless user experience. Small changes like these can go a long way in improving the efficiency of your app. Enjoy your SWIFT journey! Article by Zohair Hadi ### [Medusa.js for Entrepreneurs, Part 2: Features](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-2-features) - Slug: `medusa-js-for-entrepreneurs-part-2-features` - Published: 2023-06-14T17:06:00.000+05:00 - Updated: 2024-05-09T17:07:12.000+05:00 - Reading time: 3 min - Tags: E-Commerce, Medusa, Medusa.js, JavaScript - Authors: Anonymous - Visibility: public *Cloning the frontend, backend, and admin panel repositories results in a readily available template e-commerce application with all the basic user flows, from adding a product to a basket to placing and tracking orders. Furthermore, the administration panel has every capability imaginable for a template application. Below is a brief description of all the major features ready to use in the Medusa template app: ### **User Side (Frontend)** Below are some of the prominent features readily available for end-users on the frontend. Being open source, Medusa is evolving day by day and continuously adding new features to make e-commerce application creation a breeze! **Login/Sign up:** Users can create accounts, and Medusa keeps track of completed orders, pending orders, billing addresses, and more. **Note:** Account creation is not mandatory; users may also make anonymous purchases without signing in. **Browse products: ** Users can explore different available products and view specific details for each product, such as variants, material, weight, kind, shipping and returns, inventory, and other product details provided by the admin. **Add to cart: ** Users can easily add products to their cart and set the desired quantity. Medusa also handles the inventory quantity, which we'll cover later in the admin section! **Discount coupon: ** Users can apply a discount coupon, if offered by the store, and enjoy discounts on price or delivery based on the conditions set by the admin. **Gift card: ** Users may enter a gift card, if applicable, and receive rewards for their purchase according to the conditions set by the store admin. **Delivery:** Users can select shipping alternatives provided by the store manager after completing the billing details form. **Payment: ** Once products are added to the cart, the delivery method is selected, discounts (if any) are applied, and taxes (if any) are added, users can make payments using authorized methods set by the store administrator. However, integration of the payment plugin is required before proceeding. **Receipt generation: ** After a successful payment, an order receipt is generated, and the order is placed on the server and displayed on the admin dashboard. All basic template pages are available on the frontend; simply customize them as desired and create any new pages related to your app that are not already available. ### **Admin Panel** Logging into the Admin Panel using the default account (username: admin@medusa-test.com, password: supersecret) or an admin account created by posting an API request on the server using Postman gives you access to the following ready-to-use features. **Orders: ** When an order is placed, it is added to the orders list on the orders tab at the top of the admin dashboard. Clicking on an order displays detailed information about the placed order and provides admin access to available options, such as canceling the order, capturing money, creating fulfillment, editing the order, and more. **Products: ** One of the most important modules of any e-commerce platform is the ability for the admin to add new products to one or more sales channels (sales channels will be addressed later). Medusa provides full admin support for adding/editing products, organizing products, adding products to different sales channels, adding different variants with different prices, adding attributes related to products, adding thumbnails and media files (requires integration of a cloud bucket plugin), setting inventory management flags, monitoring quantity, defining delivery alternatives, and much more for adding items as per the store management requirements. **Customers: ** All clients registered with the application can be viewed and searched in the customer list displayed in the customers tab of the side menu bar. Registration date, orders, and other client information can be accessed here. Admin can also add new customers. A highly interesting and necessary feature in the customers module is the ability for the administrator to establish and add customers to customer groups. Customers in a certain group can be readily treated based on specific conditions/benefits, such as creating a group of B2B customers or loyal customers, etc. These clients can be linked to one or more sales channels, allowing for offering different options to target audiences or charging varying prices for the same items. **Discounts: ** Discounts can be suggested for all customers as a whole or for a specific consumer group. Medusa offers three types of discounts: percentage discounts, flat amount discounts, and free delivery discounts. When a discount is created, a discount code must be generated for eligible users to enter and receive the discount. **Gift cards: ** Gift cards can be generated and managed by the store manager or used by customers for their purchases. **Pricing: ** Prices for different product variants can be overridden for different customer groups. If no override is made, then the default product variant price will be applied. These are the major features of the Medusa Admin Panel. Furthermore, Medusa provides support for managing regions, currencies, return reasons, and taxes for different regions, while also allowing the creation of different sales channels (still in beta version and needs to be enabled before use at the time of writing the blog). ### **Conclusion** Everything you need for your e-commerce application is available; all you have to do is customize it to your specifications and get paid for the whole e-commerce solution in the shortest time known to humanity! Article by Talha Rizwan Malik ### [Medusa.js for entrepreneurs, Part 1: Intro](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-1-intro) - Slug: `medusa-js-for-entrepreneurs-part-1-intro` - Published: 2023-06-06T17:08:00.000+05:00 - Updated: 2024-05-09T17:09:02.000+05:00 - Reading time: 2 min - Tags: Medusa, Medusa.js, JavaScript, E-Commerce - Authors: Anonymous - Visibility: public *The world of e-commerce is experiencing unprecedented growth, with more businesses moving online each day to meet the demands of digital consumers. As the industry continues to evolve, the need for efficient, user-friendly, and powerful tools for creating e-commerce web applications has become more critical than ever. Enter MedusaJS: a powerful, open-source e-commerce platform that simplifies the process of building and managing an online store. In this blog, we'll explore the power of MedusaJS and how it makes creating an e-commerce web application a breeze for developers. **1. Ready-to-Use Application:** Everything you need for your e-commerce application is available, from the frontend to the backend and the admin panel. With all the necessary modules at your disposal, your task is to mold it according to your requirements and create an e-commerce application with minimal coding in the quickest time possible. **2. Flexible and Modular Architecture:** One of the standout features of MedusaJS is its flexible and modular architecture. This allows developers to easily tailor the platform to their specific needs by adding or removing features as necessary. The use of a headless architecture also enables seamless integration with any frontend, making it an ideal choice for businesses seeking a custom online shopping experience. **3. Easy-to-Use API:** MedusaJS provides a robust, easy-to-use API that allows developers to access and manage all aspects of their e-commerce store. With comprehensive documentation and an active community, getting started with MedusaJS is simple. Developers can quickly build and deploy their e-commerce web applications with ease. **4. Support for Multiple Payment and Shipping Options:** An essential aspect of any e-commerce platform is its ability to support multiple payment and shipping options. MedusaJS offers built-in support for popular payment gateways like Stripe, PayPal, and Braintree, as well as integrations with shipping providers such as Shippo and EasyPost. This flexibility allows businesses to choose the payment and shipping options that best suit their needs, ultimately enhancing the customer experience. **5. Extendable with Plugins:** MedusaJS's plugin-based system enables developers to extend the platform's functionality with ease. Numerous plugins are already available for various use cases, such as adding support for additional payment gateways or integrating with third-party services. This extensibility ensures that MedusaJS can grow and adapt to meet the ever-changing needs of the e-commerce landscape. **6. Community and Support:** As an open-source platform, MedusaJS boasts an active and supportive community of developers and users. Help is readily available through forums, social media, and other online resources. Regular updates and improvements to the platform ensure that it remains at the cutting edge of e-commerce technology. **Conclusion:** MedusaJS is a powerful, flexible, and easy-to-use e-commerce platform that streamlines the process of creating and managing an online store. With its modular architecture, robust API, support for multiple payment and shipping options, and a thriving community, MedusaJS is an excellent choice for businesses looking to build a custom e-commerce web application. By harnessing the power of MedusaJS, developers can focus on creating engaging, feature-rich online shopping experiences that cater to the demands of today's digital consumers. Article by Talha Rizwan Malik ### [About this site](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/about) - Slug: `about` - Published: 2024-05-03T19:45:34.000+05:00 - Updated: 2024-05-04T09:45:15.000+05:00 - Reading time: 1 min - Tags: None - Authors: Saad Bazaz (Admin account) - Visibility: public ECHO is an independent publication launched in May 2024 by Saad Bazaz. If you subscribe today, you'll get full access to the website as well as email newsletters about new content when it's available. Your subscription makes this site possible, and allows ECHO to continue to exist. Thank you! ### Access all areas By signing up, you'll get access to the full archive of everything that's been published before and everything that's still to come. Your very own private library. ### Fresh content, delivered Stay up to date with new content sent straight to your inbox! No more worrying about whether you missed something because of a pesky algorithm or news feed. ### Meet people like you Join a community of other subscribers who share the same interests. ### Start your own thing Enjoying the experience? Get started for free and set up your very own subscription business using Ghost, the same platform that powers this website. ## Tags - [Agents](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/agents) - 2 posts - [AI](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ai) - 6 posts - [Amazon Web Services (AWS)](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/amazon-web-services-aws) - 1 post - [Animation](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/animation) - 1 post - [Announcements](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/announcements) - 3 posts - [Apple](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/apple) - 2 posts - [Apple Developer](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/apple-developer) - 2 posts - [AR](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ar) - 1 post - [Artificial Intelligence](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/artificial-intelligence) - 6 posts - [Automata](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automata) - 1 post - [Automation](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automation) - 2 posts - [Automationsolutions](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/automationsolutions) - 1 post - [Bots](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/bots) - 1 post - [Cloud](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/cloud) - 2 posts - [Codegen](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/codegen) - 1 post - [Company Culture](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/company-culture) - 3 posts - [Copilot](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/copilot) - 1 post - [CSS](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/css) - 1 post - [CSS 3](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/css-3) - 1 post - [Cultura](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/cultura) - 1 post - [Culture Add](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/culture-add) - 1 post - [Deployment](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/deployment) - 1 post - [Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design) - 7 posts - [Design Tools](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/design-tools) - 1 post - [Developer Tools](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/developer-tools) - 3 posts - [Development](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/development) - 7 posts - [DevOps](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/devops) - 3 posts - [E-Commerce](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/e-commerce) - 2 posts - [Events](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/events) - 5 posts - [Flutter](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/flutter) - 3 posts - [Game Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/game-design) - 2 posts - [Gaming](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/gaming) - 6 posts - [GitOps](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/gitops) - 2 posts - [Google](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/google) - 1 post - [Google Summer of Code](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/google-summer-of-code) - 1 post - [Infrastructure](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/infrastructure) - 2 posts - [Innovation](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/innovation) - 4 posts - [Internship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/internship) - 1 post - [iOS](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ios) - 1 post - [JavaScript](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/javascript) - 7 posts - [LLMs](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/llms) - 3 posts - [Material UI](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/material-ui) - 1 post - [Medusa](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/medusa) - 2 posts - [Medusa.js](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/medusa-js) - 2 posts - [Meta](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/meta) - 1 post - [Multiplayer Gaming](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/multiplayer-gaming) - 6 posts - [Next.js](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/next-js) - 2 posts - [NextAuth](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/nextauth) - 1 post - [Notes](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/notes) - 1 post - [NPM](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/npm) - 1 post - [Open Source](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/open-source) - 5 posts - [Open Source Community](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/open-source-community) - 3 posts - [Playroom](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/playroom) - 4 posts - [PlayroomKit](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/playroomkit) - 4 posts - [Podcast](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/podcast) - 1 post - [Product Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/product-design) - 3 posts - [Recruitment](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/recruitment) - 2 posts - [Recruitment Strategies](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/recruitment-strategies) - 1 post - [SecOps](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/secops) - 1 post - [Software Engineering](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/software-engineering) - 6 posts - [Supply Chain Security](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/supply-chain-security) - 1 post - [Swift](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/swift) - 2 posts - [Swift Advanced URL Sessions](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/swift-advanced-url-sessions) - 1 post - [System Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/system-design) - 2 posts - [Tech](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/tech) - 1 post - [Typescript](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/typescript) - 1 post - [UI](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ui) - 4 posts - [Unity](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/unity) - 1 post - [Upskill](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/upskill) - 2 posts - [URL Sessions](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/url-sessions) - 1 post - [UX](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/ux) - 3 posts - [Vercel](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/vercel) - 2 posts - [Voice](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/voice) - 1 post - [VR](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/vr) - 1 post - [W3C](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/w3c) - 1 post - [WhatsApp](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/whatsapp) - 1 post - [xstate](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/xstate) - 1 post ## Authors - [Abdurrehman Subhani](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/subhani) - 1 post - [Aniqa Sadaf](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/aniqa-sadaf) - 2 posts - [Anonymous](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/anonymous) - 6 posts - [Asfand Yar](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asfand) - 2 posts - [Asher Siddique](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/asher) - 1 post - [Hamad Ullah](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/hamadullah) - 1 post - [Maaz Tariq](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/maaz-tariq) - 1 post - [Muhammad Haroon](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhammad-haroon) - 1 post - [Muhammad Munaf Ul Hassan](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhammad) - 1 post - [Muhammad Usama Rashid](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/usama-rashid) - 3 posts - [Muhid Abid](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/muhid) - 1 post - [Saad Bazaz](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/bazaz) - 12 posts - [Syed Abdullah Nasir](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/nasirabdullahsyed) - 3 posts - [Syed Zohair Abbas Hadi](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/zohair) - 1 post - [Talal Ahmed Khan](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/talal) - 4 posts - [Talha Momin](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/mmntlh) - 1 post - [Wasif Sadiq](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/author/wasif) - 2 posts ## Notes For Agents - `llms.txt` remains the compact discovery layer. - `llms-full.txt` expands page content and includes descendant public route content where applicable. - Tag and author full-context routes include the public post bodies in that collection.