DEV Community: Zxce3

PHP Quines: Self-Replicating Code Explained

Zxce3 — Fri, 25 Apr 2025 13:27:14 +0000

PHP offers several ways to create quines - programs that output their own source code. Here's a technical dive into these self-replicating curiosities.

What Are Quines?

Quines are programs that produce their exact source code as output. While rarely practical, they present interesting programming challenges and demonstrate code introspection capabilities.

Simple Print Quine

<?php
$code = '<?php
$code = %s;
printf($code, 39, $code, 39);
';
printf($code, 39, $code, 39);

This basic quine stores its own source in $code with a placeholder. The printf() function replaces the placeholder with the code itself wrapped in quotes.

var_export() Quine

<?php
$a = '<?php $a = %s; echo sprintf($a, var_export($a, true));';
echo sprintf($a, var_export($a, true));

Uses var_export() to generate a string representation of the code variable. This representation gets inserted back into the original template.

Function-Based Quine

<?php function q() { $v = get_defined_vars(); echo "<?php\nfunction q() {\n \$v = get_defined_vars();\n echo \$v['s'];\n}\n\$s = " . var_export($v['s'], true) . ";\nq();\n"; } $s = "<?php\nfunction q() {\n \$v = get_defined_vars();\n echo \$v['s'];\n}\n\$s = " . var_export($s, true) . ";\nq();\n"; q();

Leverages get_defined_vars() to access its own variables. More complex but demonstrates PHP's introspection capabilities.

File Reading Quine

<?php echo file_get_contents(__FILE__);

Often considered "cheating" in quine competitions. Simply reads its own source code using PHP's __FILE__ magic constant.

Native Functions Quine

<?php
echo html_entity_decode(strip_tags(highlight_file($_SERVER['SCRIPT_FILENAME'], true)));

A creative approach by Tim Bond using PHP's syntax highlighting and then cleaning the output.

ASCII Manipulation Quine

<?
$a='chr(60).chr(63).chr(10).chr(36).chr(97).chr(61).chr(39).$a.chr(39).chr(59).chr(10)."echo $a;".chr(10).chr(63).chr(62)';
echo chr(60).chr(63).chr(10).chr(36).chr(97).chr(61).chr(39).$a.chr(39).chr(59).chr(10)."echo $a;".chr(10).chr(63).chr(62);
?>

Uses ASCII character codes to represent and reconstruct its own source. Harder to read but demonstrates another technique.

Arrow Function Quine

<?=(fn($s)=>"<?=$s(\x27$s\x27)?>")('(fn($s)=>"<?=$s(\x27$s\x27)?>")')?>

A modern PHP quine by Benoit Viguier using arrow functions. Compact and elegant with no semicolons.

Technical Application

Quines have limited practical use but demonstrate language features like:

String manipulation
Variable interpolation
Self-reference capabilities
Code as data principles

They're useful for understanding language internals and compiler theory. They represent fixed points in computation - a fascinating theoretical concept.

Further Exploration

Try modifying these examples to create "quine variants" like:

Radiation-hardened quines that can recover from corruption
Polyglot quines that work in multiple languages
Multiquines that transform into other programs on subsequent runs

These self-replicating programs offer a unique window into the fundamentals of computation.

Implementing Delay/Sleep in JavaScript with Promises and Async/Await

Zxce3 — Fri, 25 Apr 2025 01:49:45 +0000

Sometimes, you need to pause execution in JavaScript, like waiting for an API response or adding a delay between actions. Here’s how you can implement a delay (or sleep) function using modern JavaScript.

Using Promises

The setTimeout function is great for delays. Combine it with promises to create a reusable delay function:

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

This function resolves the promise after the specified time in milliseconds (ms).

Using Async/Await

With async/await, you can make the delay work like a synchronous pause inside asynchronous functions:

async function example() {
  console.log('Start');
  await delay(2000); // Pause for 2 seconds
  console.log('End');
}
example();

Key Points:

delay(ms) returns a promise that resolves after ms milliseconds.
await pauses execution in an async function until the promise resolves.

Why Use This Method?

It’s clean, modern, and avoids callback hell. Perfect for developers looking to write readable asynchronous code.

Got questions? Drop them below!

TypeScript: A Love-Hate Relationship

Zxce3 — Mon, 10 Mar 2025 15:00:42 +0000

As a developer working with TypeScript for several years, I've developed what can only be described as a complicated relationship with this language. It's like that friend who's always looking out for you but somehow manages to drive you crazy at the same time. So here's my honest take on TypeScript - why I love it but also why I hate it.

The Love Story ❤️

Type Safety that Saves Lives (or at least hours of debugging)

The primary reason I fell in love with TypeScript is its ability to catch errors before runtime. There's something deeply satisfying about being told you've made a mistake before you've even run your code.

// This won't compile - TypeScript is looking out for us
const user = { firstName: 'John', lastName: 'Doe' };
console.log(user.middleName); // Property 'middleName' does not exist on type '{ firstName: string; lastName: string; }'

Intelligent IDE Support

The enhanced development experience with TypeScript is remarkable. Auto-completion that actually works, intelligent refactoring, and helpful documentation on hover make coding faster and more pleasant.

interface User {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
  isActive: boolean;
  preferences: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

// With TypeScript, your IDE knows exactly what properties are available
function getUserFullName(user: User): string {
  return `${user.firstName} ${user.lastName}`;
}

Self-Documenting Code

TypeScript makes code more readable and self-documenting. When I come back to code I wrote months ago, having proper types is like finding detailed comments that actually stay updated with the code.

// Without TypeScript
function processData(data) {
  // What is data supposed to be? An object? An array? Who knows?
}

// With TypeScript
function processData(data: UserTransaction[]): ProcessedResult {
  // Ah, I'm working with an array of UserTransaction objects and returning a ProcessedResult
}

Better Refactoring Experience

When I need to make structural changes, TypeScript tells me exactly where I need to update my code. It's like having a diligent assistant pointing out all the places that would break after a change.

The Hate Story 💔

Configuration Hell

The tsconfig.json file might be one of my most edited files, and not in a good way. Trying to get the perfect balance of strictness vs. practicality can be maddening.

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,  // But how strict is too strict?
    "esModuleInterop": true,  // What does this even do again?
    "skipLibCheck": true,  // Why do I need this?
    // 30 other options I barely understand...
  }
}

The Type Definition Dependency Nightmare

When using third-party libraries, you often need separate type definition packages. And when those get out of sync or don't exist at all, it's a special kind of frustration.

npm install some-cool-library
# Excited to use my new library!

# But wait...
error TS7016: Could not find a declaration file for module 'some-cool-library'.

npm install @types/some-cool-library
# Sorry, no type definitions exist for this package

"Any" All The Things

When deadlines are tight, the temptation to use any becomes overwhelming. And once you start, it spreads like a disease through your codebase.

// Monday: I'll fix this later
const config: any = getConfig();

// Tuesday: Just need to ship this feature
function processUserData(data: any): any {
  return transformData(data);
}

// Friday: Your codebase is essentially JavaScript with extra steps

Type Gymnastics that Make Your Brain Hurt

Some advanced TypeScript types are so complex that you spend more time trying to please the compiler than actually writing business logic.

type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object 
    ? DeepReadonly<T[P]> 
    : T[P] extends Array<infer U> 
      ? ReadonlyArray<DeepReadonly<U>> 
      : T[P];
};

// Me, staring at this: "I just wanted to make an object readonly..."

Finding Balance

Despite my complaints, I can't imagine going back to plain JavaScript for any substantial project. TypeScript is like a strict teacher - you might not always enjoy the discipline, but you're better off because of it.

The key to a healthy relationship with TypeScript is finding the right balance:

Start strict but know when to make pragmatic exceptions
Don't overengineer your types - they should clarify, not complicate
Embrace gradual typing - you don't have to perfect everything at once
Keep learning - TypeScript is evolving, and your understanding should too

In conclusion, TypeScript and I will continue our tumultuous relationship. I'll keep cursing it when fighting the compiler at 2 AM, but secretly thanking it when it catches a bug that would have taken hours to find. It's a love-hate relationship I wouldn't trade for anything else.

Do you have a love-hate relationship with TypeScript too? What are your favorite features and biggest frustrations? Share in the comments below!

Dear Family: The AI Assistants in Your Home Are About to Become Real Helpers 🤖👨‍👩‍👧‍👦

Zxce3 — Sun, 09 Mar 2025 19:24:52 +0000

This is a submission for the Future Writing Challenge: How Technology Is Changing Things.

Additional Prize Categories

Explain Like I'm Five
Ripple Effects

Dear Family,

Remember how we used to joke about me being the "tech support" whenever I visited for holidays? Well, I'm writing to give you a heads-up about something that might soon change that dynamic forever: AI agents are about to graduate from those frustrating chatbots into something truly helpful.

What Are AI Agents, Really? 🤔

Imagine if your smartphone's assistant grew up and became like a helpful neighbor who lives inside your devices. Not a creepy neighbor—the good kind that waters your plants when you're away!

For the kids: Think about your favorite toy that can talk back to you. Now imagine if that toy could also:

Draw pictures for you when you describe what you want
Help you with homework by explaining things just the way you understand them
Remember that you're afraid of monsters and automatically check under the bed (through your home cameras) when you ask

That's what AI agents are becoming—not just toys or tools, but helpers that learn what you need and actually do things for you without having to be told every tiny step.

How This Will Show Up In Your Lives 🏡

For Mom and Dad: Remember when you spent 3 hours trying to figure out how to connect your new smart TV to Netflix? An AI agent will just do it when you say "Set up my new TV." It knows all the steps, can read the manual instantly, and can even teach you how to use special features afterward.

When Dad has questions about his blood pressure medication, an agent could research side effects, remind him when to take it, and even suggest questions to ask at his next doctor's appointment—all explained in plain English, not doctor-speak.

For my sister Julie and her kids: The homework help revolution is here! AI agents won't just provide answers (though teachers are already adapting their assignments to this reality). They'll help the kids understand concepts, create custom study plans based on how they learn best, and even make learning fun by turning lessons into games.

And Julie, that small business dream you've had? Agents could build your website, handle your appointment bookings, manage your social media, and create professional-looking marketing materials—tasks that would otherwise require hiring an entire team.

For Grandma: No more feeling left behind by technology! Imagine saying, "I want to join the family video call," and having your devices just handle it—no fumbling with links or apps or passwords. Your AI agent becomes your personal tech translator, explaining everything in terms you understand and never getting impatient when you ask the same question twice.

The Not-So-Rosy Parts ⚠️

Being your family's tech person means I should also warn you about challenges coming:

Privacy: These agents will know a lot about us to be helpful. Like how a good assistant knows your schedule, these will know your habits, preferences, and routines.
Dependency: Remember how we stopped memorizing phone numbers? That will happen with more skills. When was the last time anyone in our family actually navigated somewhere new without GPS?
Job Changes: Some roles will transform or disappear. Remember how travel agents became less common? That pattern will accelerate across many fields—from customer service to content creation to basic medical diagnosis.
Information Bubbles: These agents might show you only what they think you want to see, creating even stronger echo chambers than social media already has.
Human Connection: Will we outsource too many conversations? I worry about kids growing up with AI companions instead of learning the messy, beautiful art of human friendship.

How We Navigate This Together 🧭

My role as your family tech guru is evolving too. Instead of fixing your printer (the AI will handle that!), I'll help you understand when to trust these systems and when to be skeptical. I'll recommend which AI tools are truly helpful versus those that might be invasive or problematic.

I think our biggest adjustment will be learning to treat these as teammates rather than tools. You'll develop preferences for certain AI personalities just like you prefer certain friends for different activities. Some will feel almost like family members (in a good way!).

When I visit this Thanksgiving, I expect to hear how each of you is adapting. Some of you will embrace this enthusiastically, others more cautiously—and both approaches make perfect sense! The important thing is that we help each other navigate this shift thoughtfully.

So maybe instead of me walking Grandma through email setup yet again, we can spend our family time discussing how these technologies are changing your work, hobbies, and relationships. I'm genuinely curious about your experiences outside my tech bubble.

Until then, if you encounter an AI agent that seems particularly helpful (or frustrating!), take notes! I want all the details when we meet.

Love you all,

Alex

P.S. Yes, I used an AI to help organize my thoughts for this letter—how meta is that? But the experiences, concerns, and love are 100% human-made. For now, anyway! 😉

Written to: My extended family ranging from tech-resistant parents in their 70s to my sister with school-age children and my grandmother who's curious but intimidated by new technology.

Introducing shadcn-sveltekit-landing-page: A Modern Landing Page Template with SvelteKit & Shadcn

Zxce3 — Mon, 03 Mar 2025 05:07:48 +0000

Today I'm excited to share my latest project: shadcn-sveltekit-landing-page - a modern, fully responsive landing page template built with SvelteKit, Shadcn UI, TypeScript, and Tailwind CSS.

What is it?

This template is a conversion of the popular Shadcn-Vue landing page to SvelteKit, combining the power of Svelte's reactivity with the beautiful components from Shadcn UI.

Why I Built This

As a developer working with Svelte, I noticed there weren't many high-quality, ready-to-use landing page templates that leveraged both SvelteKit and Shadcn UI. This project fills that gap, providing an easy-to-customize template that follows modern web development best practices.

Features

The template includes everything you need for a professional landing page:

✅ Full Responsive Design - Looks great on all devices from mobile to desktop
✅ Dark Mode Support - Toggle between light and dark themes
✅ User-Friendly Navigation - Smooth scrolling and mobile-friendly menus
✅ Meta Tags - SEO-ready with proper meta tags

What's Included

The template comes with all the essential sections you'd need for a landing page:

✅ Navbar with mobile sidebar
✅ Hero section
✅ Sponsors showcase
✅ Benefits highlights
✅ Features overview
✅ Services section
✅ How It Works explanation
✅ Testimonials carousel
✅ Pricing plans
✅ FAQ section
✅ Team members showcase
✅ Community section
✅ Contact form
✅ Footer

Tech Stack

The project leverages a robust stack of modern technologies:

SvelteKit - The framework for building high-performance web applications
Shadcn-Svelte - A collection of beautifully designed components
TypeScript - For type safety and better developer experience
Tailwind CSS - For utility-first styling
Lucide Icons - For beautiful, consistent icons
Embla Carousel - For smooth, responsive carousels
Tailwind Variants - For variant management
Plus many more useful libraries!

Live Demo

Check out the live demo: shadcn-sveltekit-landing-page.zxce3.net

Getting Started

Getting up and running with this template is straightforward:

Clone the repository:

git clone https://github.com/zxce3/shadcn-sveltekit-landing-page.git

Navigate to the project directory:

cd shadcn-sveltekit-landing-page

Install dependencies:

npm install
# or
pnpm install
# or
yarn install

Start the development server:

npm run dev

Open your browser and visit http://localhost:5173

Building for Production

When you're ready to deploy, build your project:

npm run build

You can preview the production build with:

npm run preview

Customization

The template is designed to be easily customizable. You can modify colors, typography, and layout by updating the Tailwind configuration and component files.

Key areas to customize:

Update the content in src/routes for each section
Modify theme colors in tailwind.config.ts
Replace images in the static folder with your own
Customize components in src/lib/components

Who Is This For?

This template is perfect for:

Startups looking for a quick way to launch a professional landing page
Developers who prefer SvelteKit and want a head start
Anyone who needs a modern, responsive landing page with minimal setup

What's Next?

I'm planning to continue improving this template with:

Additional section variants
More animation options
Performance optimizations
Enhanced accessibility features

Contribute

Contributions are welcome! Feel free to open issues or submit pull requests on GitHub.

License

This project is licensed under the MIT License - see the LICENSE file for details.

If you find this template useful, consider giving it a ⭐ on GitHub!

Let me know in the comments if you have any questions or suggestions!

Building Tetris in Your Browser's Console with SvelteKit

Zxce3 — Mon, 17 Feb 2025 17:41:41 +0000

I'm excited to share my latest project: Tetris Console Edition - a unique implementation of the classic game that runs entirely in your browser's developer console! Built with SvelteKit and TypeScript, this project demonstrates how to create an engaging game experience using unconventional rendering techniques.

Game Features

🎮 Full Tetris gameplay in the console
⚙️ Customizable settings (board size, speed, etc.)
👻 Ghost piece visualization
📊 Score tracking and history
⏸️ Pause/Resume functionality

Technical Implementation

Console-Based Rendering

The game uses the browser's console as its display, with custom characters for different game elements:

const EMPTY = '⬛';
const PLACED = '🟪';
const ACTIVE = '🟨';
const GHOST = '⬜';
const BORDER = '🟦';

State Management

The game utilizes SvelteKit's latest reactivity features for state management:

let gameState = $state({
    started: false,
    paused: false,
    over: false,
    score: 0,
    board: [],
    currentPiece: {
        shape: [],
        row: 0,
        col: 0,
        name: ''
    }
});

Game Controls

Players can control the game using standard keyboard inputs:

← → : Move piece
↑ : Rotate
↓ : Soft drop
Space : Hard drop
P : Pause/Resume

Performance Optimizations

RequestAnimationFrame for smooth rendering
Efficient collision detection
Optimized piece movement and rotation
Score calculation with bonus points for multiple lines

Learning Outcomes

Building this project taught me several valuable lessons:

Creative UI Solutions: Using the console as a display medium
State Management: Handling complex game state with Svelte stores
Performance: Optimizing render cycles for smooth gameplay
TypeScript Integration: Leveraging type safety for game logic

Try It Yourself!

The project is open source and available on GitHub. To run it locally:

bun install
bun run dev

Then open your browser's DevTools (F12) and start playing!

Conclusion

This project showcases how modern web technologies can be used in creative ways to build unique gaming experiences. While the console might not be the conventional choice for game rendering, it provides an interesting challenge and demonstrates the flexibility of web platforms.

Check out the live demo or source code to explore more!

WakaWiki: AI-Powered Wiki Reader with Offline Support

Zxce3 — Wed, 12 Feb 2025 18:36:15 +0000

Discover a whole new way to explore Wikipedia right on your phone! Say hello to WakaWiki—a PWA that combines Wikipedia’s endless knowledge with a dash of AI magic for personalized content suggestions.

Why WakaWiki?

• AI-Driven Discovery: Our TypeScript-based recommendation engine keeps finding new articles that match your reading habits.

• Offline Support: Built with Workbox, WakaWiki lets you keep reading even if you lose internet access.

• SvelteKit-Powered: Enjoy fast performance with infinite scrolling, wrapped in a responsive design that adapts to any device.

• Smooth UI: Svelte and CSS unite to give you a clean, modern interface so you can focus on what you love—learning!

Under the Hood

• SvelteKit and Web Workers for speedy background tasks

• Workbox for advanced caching and offline-first architecture

• Wikipedia API for real-time updates from the world’s biggest knowledge base

Coming Soon

• Cross-device sync

• More language support

• Social sharing

• Enhanced analytics to track what you’re reading

If you’re ready to level up your Wiki experience, head over to:

👉 WakaWiki on Netlify

and don’t forget to star the repo on GitHub: Zxce3/wakawiki ⭐

[Boost]

Zxce3 — Fri, 31 Jan 2025 23:05:14 +0000

Designing Website Layouts: A Friendly Guide

Athreya aka Maneshwar ・ Jan 25

#webdev #beginners #designpatterns #uidesign

The Journey of Creating an Auto-Jump Dino Script

Zxce3 — Sat, 02 Nov 2024 21:51:25 +0000

I couldn’t sleep. Maybe it was the three cups of coffee I had consumed earlier, or maybe it was my mind racing with ideas. Regardless, I found myself restless and unable to drift off. Instead of fighting the insomnia, I decided to code. And what better way to spend that energy than creating a script that would make the Dino in the Chrome offline game jump by itself?

This is a story about how a small spark of an idea led to hours of tweaking, testing, and ultimately, a fully functioning auto-jump system for the T-Rex.

The Beginning: A Simple Idea

At first, I started with the most basic concept. I wanted the Dino to jump automatically whenever an obstacle was within range. The challenge seemed straightforward at the time. After a bit of thinking, I whipped up a simple script:

// Auto jump function
function autoJump() {
  const checkObstacle = setInterval(() => {
    const tRex = Runner.instance_.tRex;

    // Check if an obstacle is near
    const obstacles = Runner.instance_.horizon.obstacles;

    if (obstacles.length > 0) {
      const obstacle = obstacles[0];

      // If the obstacle is close and within jumpable range, make the Dino jump
      if (obstacle.xPos < 70 && obstacle.xPos > 20 && !tRex.jumping) {
        tRex.startJump();
      }
    }
  }, 10); // Check every 10ms
}

// Start auto jump
autoJump();

This first version did the job. The Dino would detect obstacles and automatically jump whenever it approached one. However, there was still a lot to improve. It felt robotic and limited—it could jump, but there was no crouching or consideration of how the game’s speed affected the Dino’s reactions. I wanted something more adaptive and dynamic.

The Evolution: Adaptive Auto-Jump and Crouching

I spent the next few hours refining the code, adding more features like adaptive jumping based on the game’s speed, and integrating a crouching mechanic for when the Pterodactyls flew by. The result was a script that felt much more in tune with the actual game. The final version allowed the Dino to react not just based on fixed distances, but by adjusting to the speed of the game itself.

Here’s what I came up with:

// Create the button to toggle auto-jump
const toggleButton = createToggleButton();
document.body.appendChild(toggleButton);

let autoJumpActive = false; // Auto-jump initially inactive
let autoJumpInterval = null; // Store interval ID
let jumpCount = 0; // Count the number of jumps
let obstacleCount = 0; // Count the number of obstacles encountered
let isCrouching = false; // Track crouch state

// Function to create the toggle button
function createToggleButton() {
  const button = document.createElement('button');
  button.innerText = 'Activate Auto-Jump';
  styleToggleButton(button);
  button.addEventListener('click', toggleAutoJump);
  return button;
}

// Function to style the toggle button
function styleToggleButton(button) {
  button.style.position = 'fixed';
  button.style.top = '10px';
  button.style.left = '10px';
  button.style.padding = '10px';
  button.style.zIndex = '1000';
  button.style.backgroundColor = '#4CAF50';
  button.style.color = '#fff';
  button.style.border = 'none';
  button.style.cursor = 'pointer';
}

// Function to simulate a key press
function simulateKeyPress(keyCode, key) {
  const event = new KeyboardEvent('keydown', {
    keyCode: keyCode,
    code: key,
    key: key,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event);
}

// Function to simulate a key release
function simulateKeyRelease(keyCode, key) {
  const event = new KeyboardEvent('keyup', {
    keyCode: keyCode,
    code: key,
    key: key,
    bubbles: true,
    cancelable: true,
  });
  document.dispatchEvent(event);
}

// Function to calculate adaptive distances for jumping and crouching based on speed
function calculateAdaptiveDistance(baseDistance) {
  const speed = Runner.instance_.currentSpeed;
  return baseDistance + speed * 3; // Adjust the multiplier as needed for more precision
}

// Function to start auto-jumping and crouching
function startAutoJump() {
  autoJumpInterval = setInterval(() => {
    const tRex = Runner.instance_.tRex;
    const obstacles = Runner.instance_.horizon.obstacles;
    const speed = Runner.instance_.currentSpeed; // Get the current speed of the game

    if (obstacles.length > 0) {
      const obstacle = obstacles[0];
      const distanceToObstacle = obstacle.xPos - tRex.xPos; // Distance from Dino to the obstacle

      // Dynamically calculate the adaptive jump and crouch distances based on game speed
      const jumpDistance = calculateAdaptiveDistance(100); // Base distance is 100, adjusted by speed
      const crouchDistance = calculateAdaptiveDistance(50); // Base crouch distance is 50
      const safeDistance = 40; // Minimum safe distance to avoid jumping too early

      // Check if the Dino needs to jump or crouch
      if (distanceToObstacle < jumpDistance && distanceToObstacle > safeDistance) {
        if (!tRex.jumping && !isCrouching) { // Ensure Dino is not crouching or jumping
          jumpCount++; // Increment jump count
          simulateKeyPress(32, ' '); // Simulate jump (spacebar)
        }
      } else if (distanceToObstacle <= crouchDistance && distanceToObstacle > safeDistance && !tRex.jumping) {
        // Only crouch if the Dino is not jumping
        simulateKeyPress(40, 'ArrowDown'); // Simulate crouch (down arrow)
        isCrouching = true; // Set crouch state to true
      } else if (obstacle.typeConfig.type === 'PTERODACTYL' && obstacle.yPos < 70) {
        // Crouch if the obstacle is a Pterodactyl flying high
        simulateKeyPress(40, 'ArrowDown'); // Simulate crouch (down arrow)
        isCrouching = true; // Set crouch state to true
      }

      // Release crouch when the obstacle is passed (Dino's xPos is greater than obstacle's xPos)
      if (tRex.xPos > obstacle.xPos && isCrouching) {
        simulateKeyRelease(40, 'ArrowDown'); // Release crouch (down arrow)
        isCrouching = false; // Reset crouch state
      }
    }

    // Update obstacle count
    obstacleCount = Runner.instance_.horizon.obstacles.length;

  }, 50); // Reduced interval time to 50ms for more frequent checks
}

// Function to stop auto-jumping
function stopAutoJump() {
  clearInterval(autoJumpInterval);
  autoJumpActive = false; // Reset auto-jump state
  toggleButton.innerText = 'Activate Auto-Jump';
  toggleButton.style.backgroundColor = '#4CAF50';
}

// Function to toggle auto-jump
function toggleAutoJump() {
  if (autoJumpActive) {
    stopAutoJump();
  } else {
    startAutoJump();
    toggleButton.innerText = 'Deactivate Auto-Jump';
    toggleButton.style.backgroundColor = '#f44336';
  }
  autoJumpActive = !autoJumpActive; // Toggle the state
}

// Detecting game over
const originalGameOver = Runner.prototype.gameOver;
Runner.prototype.gameOver = function() {
  stopAutoJump(); // Stop auto-jumping on game over
  originalGameOver.apply(this, arguments); // Call the original game over function
}

// Detecting when the game restarts
const originalStartGame = Runner.prototype.startGame;
Runner.prototype.startGame = function() {
  originalStartGame.apply(this, arguments);
  if (autoJumpActive) {
    startAutoJump(); // Restart auto-jump on game restart
  }
}

Reflections on the Coding Journey

This journey from a sleepless night to a fully functional auto-jump script was both fun and challenging. What started as a simple idea evolved into something much more complex, requiring attention to detail, adaptability, and a willingness to experiment. Each iteration brought the script closer to feeling like an integrated part of the game rather than a simple add-on.

This is the beauty of coding: you start with an idea, and through persistence and creativity, you end up with something that surpasses your original vision. And sometimes, it all begins with a few too many cups of coffee!

Simplify Your PHP Development with a Handy Bash Script

Zxce3 — Tue, 28 May 2024 19:04:42 +0000

As developers, we often need to quickly spin up a local PHP server for testing and development purposes. While PHP's built-in server is quite handy, repeatedly typing out the full command can become tedious. To streamline this process, I've created a simple Bash script called phloc that starts a PHP server with minimal fuss.

In this article, I'll guide you through the script step by step, explaining how it works and why it's beneficial for your development workflow.

What Does the Script Do?

The phloc script simplifies starting a PHP server by allowing you to specify a port number and document root directory. If you don't provide these options, it defaults to port 8080 and the current directory. The script also checks if the specified port is already in use and increments the port number if necessary.

The Script

Here's the complete script:

#!/bin/bash
# Script name: phloc
# Usage:
#   phloc [port] [doc_root]
#   port: port number to listen on (default: 8080)
#   doc_root: document root (default: current directory)
# Description:
#   Starts a PHP server on the specified port and document root.
#   If no port is specified, the default port 8080 is used.
#   If no document root is specified, the current directory is used.
#   The script is intended to be used for local development.
if [ $# -eq 0 ]; then
  port=8080
else
  port=$1
fi

doc_root="."

if [ $# -eq 2 ]; then
  doc_root=$2
fi

while true; do
  echo "Starting PHP server on port $port with document root $doc_root..."
  php -S 0.0.0.0:$port -t $doc_root

  # Check if the port is already in use
  if [ $? -eq 0 ]; then
    break
  else
    # Increment the port number and try again
    echo "Port $port is already in use, trying port $((port+1))..."
    port=$((port+1))
  fi
done

Step-by-Step Breakdown

Step 1: Shebang and Script Metadata

The script starts with the shebang (#!/bin/bash) which tells the system to execute the script using the Bash shell. This is followed by comments that provide usage instructions and a brief description of what the script does.

Step 2: Default Port and Document Root

if [ $# -eq 0 ]; then
  port=8080
else
  port=$1
fi

doc_root="."

Here, the script checks if any arguments were passed. If no arguments are provided, it sets the default port to 8080. The document root is set to the current directory by default.

Step 3: Handling Optional Document Root Argument

if [ $# -eq 2 ]; then
  doc_root=$2
fi

If two arguments are provided, the second argument is used as the document root.

Step 4: Starting the PHP Server

while true; do
  echo "Starting PHP server on port $port with document root $doc_root..."
  php -S 0.0.0.0:$port -t $doc_root

The script enters a while loop to start the PHP server. The echo command outputs the port and document root for transparency.

Step 5: Port Conflict Handling

  if [ $? -eq 0 ]; then
    break
  else
    # Increment the port number and try again
    echo "Port $port is already in use, trying port $((port+1))..."
    port=$((port+1))
  fi
done

The script checks the exit status of the php -S command. If the command succeeds ($? -eq 0), the loop breaks. If the port is already in use, the script increments the port number and tries again.

Why Use This Script?

Convenience: Saves time by reducing the need to repeatedly type out the full PHP server command.
Flexibility: Allows for quick changes to the port and document root.
Port Handling: Automatically handles port conflicts by incrementing the port number.

How to Use the Script

Save the Script: Copy the script and save it as phloc (or any preferred name) in your desired directory.
Make It Executable: Run chmod +x phloc to make the script executable.
Run the Script: Use ./phloc [port] [doc_root] to start your PHP server. If no arguments are provided, it defaults to port 8080 and the current directory.

By incorporating this script into your development toolkit, you can streamline your PHP development process, making it more efficient and less prone to human error.

Happy coding!

Building a Server Dashboard with a Single PHP File

Zxce3 — Sun, 03 Mar 2024 12:47:45 +0000

Introduction:

In the realm of web development and server management, having quick access to key system metrics is crucial for monitoring server health and performance. While there are many tools available for this purpose, building a custom server dashboard offers flexibility and customization tailored to specific needs. In this article, we'll explore how to create a server dashboard using a single PHP file.

Understanding the Need:

Server administrators and developers often require real-time insights into server performance, including CPU usage, memory utilization, disk space, and network activity. Having this information readily available helps in identifying bottlenecks, optimizing resource usage, and ensuring the smooth operation of services.

The Single PHP File Approach:

One elegant solution to create a server dashboard is to consolidate all functionality into a single PHP file. This approach simplifies deployment and maintenance since there's no need to manage multiple files or dependencies. Additionally, it provides a self-contained solution that can be easily shared or distributed.

Key Features:

Data Retrieval Functions:

The PHP file contains several functions dedicated to retrieving system information. These functions gather data such as CPU details, load average, server information, memory usage, disk space, uptime, network interfaces, and process count.

Data Formatting Utilities:

Utility functions handle data formatting tasks, ensuring that the displayed information is presented in a clear and understandable format. Functions like formatUptime() and formatBytes() are used to format uptime duration and byte sizes, respectively.

HTML Interface:

The PHP file generates an HTML interface dynamically based on the gathered system metrics. Each metric is displayed in a separate card, providing a visually appealing and organized layout. Users can easily navigate through different metrics to access the information they need.

Theme Customization:

The dashboard offers theme customization options, allowing users to switch between different visual themes to suit their preferences. This feature enhances user experience and personalization.

Implementation and Usage:

To deploy the server dashboard, simply upload the single PHP file to the server directory accessible via a web browser. Users can access the dashboard by navigating to the URL corresponding to the PHP file. The dashboard will then display real-time system metrics retrieved from the server.

Conclusion:

Building a server dashboard with a single PHP file offers a lightweight and efficient solution for monitoring server performance. By consolidating data retrieval, formatting, and presentation into a single file, developers can create a customizable and easily deployable tool for server management. Whether for personal use or deployment in production environments, a single PHP file dashboard provides valuable insights into server health and performance.

Staggered layout

Zxce3 — Wed, 02 Nov 2022 07:37:52 +0000

Staggered layout example from https://get.foundation/building-blocks/blocks/grid-staggered.html