All articles

JavaScript / 11 Sep 2025 / 2 min read

Understanding bind:value Between Parent and Child Components in Svelte

One convenient Svelte feature is two-way binding with bind:value. It can keep state in a parent component synchronized with a value exposed by a child component without writing separate event-handling boilerplate. The following example connects a reusable input component to state in its parent. 1. Child Component: InputField.svelte Create src/lib/components/InputField.svelte: <script lang="ts"> export let value: string = ""; </script> <h2>Child Component</h2> <input type="text" bind:value /> <p>Input value in child: {value}</p> How it works:

Svelte Props

JavaScript / 11 Sep 2025 / 3 min read

Building a Todo List with Stores in SvelteKit

Svelte stores provide a simple way to share reactive state across components. In this tutorial, we will build a small Todo List with: Adding tasks Marking tasks complete Editing tasks Deleting tasks Task statistics A live clock The example uses Svelte + TypeScript and the classic Svelte store APIs. 1. Define the Task Type Create src/lib/types/task.ts: export interface Task { id: number; title: string; done: boolean; } Each task has:

Svelte State Management

JavaScript / 11 Sep 2025 / 2 min read

Building a Simple Search Feature in Svelte

Svelte’s reactivity makes it straightforward to update the UI when component state changes. In this example, we will build a small product search: as the user types, matching items appear immediately. 1. Complete Example Create src/routes/+page.svelte: <script lang="ts"> let query = ""; let products = ["Laptop", "Mouse", "Keyboard", "Monitor", "Printer"]; let results: string[] = []; function searchProducts(q: string) { if (q.trim() === "") { results = []; } else { results = products.filter((p) => p.toLowerCase().includes(q.toLowerCase()) ); } } // Reactive statement: runs whenever query changes $: searchProducts(query); </script> <input bind:value={query} placeholder="Search products..." /> <ul> {#if query.trim() !== ""} {#if results.length > 0} {#each results as item} <li>{item}</li> {/each} {:else} <li>No results</li> {/if} {/if} </ul> 2. How It Works The component has three pieces of state:

Svelte Reactive Statement

Cloud Computing / 06 Sep 2025 / 3 min read

Reverse Proxy with Nginx and Go for Microservices

As an application grows, splitting it into smaller services can make independent deployment and scaling easier. For example: Product service on port 8080 Blog service on port 8081 Users should not need to know those internal ports. An Nginx reverse proxy can expose both services under one domain and route requests by URL path. 1. Configure the Nginx Reverse Proxy Create a site configuration: sudo nano /etc/nginx/sites-available/yourdomain.com Add:

DevOps Nginx

Web Development / 04 Sep 2025 / 3 min read

Building an Article CRUD with Laravel and Filament Admin Panel

Laravel provides a productive foundation for modern PHP applications, and Filament can add a powerful admin panel with generated forms, tables, and CRUD pages. In this tutorial, we will create a Laravel project and build an Article CRUD resource with Filament. 1. Create a New Laravel Project composer create-project --prefer-dist laravel/laravel website The final argument, website, is the project directory name. Change it if you want a different project name.

Laravel Filament

Web Development / 03 Sep 2025 / 3 min read

Running Laravel Queues on cPanel with Cron Jobs

Laravel queues are useful for work that should not block an HTTP request, such as sending email, generating reports, importing data, or processing files. On a VPS, a process supervisor is usually the best way to keep long-running queue workers alive. Shared cPanel hosting often does not provide that option, so a cron-driven worker can be a practical fallback. This pattern starts a worker periodically and tells it to exit once the queue becomes empty.

Laravel Queue

Cybersecurity / Updated 10 Sep 2025 / 2 min read

How to Whitelist IP Address Ranges with .htaccess

.htaccess is useful for more than URL rewriting and caching. It can also provide an additional access-control layer, including restricting an application to specific IP addresses or IP ranges. This technique can be useful when: An application is still in development and should only be available to an internal team. You want to protect sensitive paths such as /admin or /api. A server should only be reachable from an office network or VPN. Whitelist One IP Address To allow only one IP address:

DevOps Security

Cybersecurity / Updated 10 Sep 2025 / 2 min read

How to Block IP Ranges with `.htaccess`

One useful feature of Apache is the flexibility of .htaccess. In addition to URL rewriting and caching rules, .htaccess can also restrict access based on IP addresses. If you are dealing with spam bots, brute-force attempts, or unwanted traffic from a particular network, one quick option is to block an individual IP address or an entire range. Block a Single IP Address To block one IP address, use: <RequireAll> Require all granted Require not ip 192.168.1.100 </RequireAll> This blocks 192.168.1.100 while allowing other clients to access the site.

DevOps Apache

Cybersecurity / 03 Sep 2025 / 2 min read

Creating a CA Bundle and Converting an SSL Certificate to .PFX

Managing SSL/TLS certificates is a routine task for many developers and system administrators. One common requirement is to combine intermediate certificates into a CA bundle and then convert the certificate and private key into a .pfx file. The .pfx format, also known as PKCS#12, is commonly used when importing certificates into Windows Server and IIS, Microsoft Exchange, and other applications that expect a PKCS#12 bundle. This guide walks through the process.

DevOps SSL

CSS / 03 Sep 2025 / 8 min read

Building a Responsive Mega Menu Navbar with Tailwind CSS and Alpine.js

Navigation is one of the most important components of a website. For sites with many categories, a mega menu can present many options cleanly inside a large dropdown. This article shows how to build a responsive navbar with mega menus using Tailwind CSS for styling and Alpine.js for interactive behavior. Main Navbar Features Desktop Navigation Main links: Home, Products, Services, About, Contact Mega menus for Products and Services A regular dropdown for About Mobile Navigation

CSS Tailwind

Web Development / 03 Sep 2025 / 3 min read

Automatically Encrypting Eloquent Model Attributes

Applications often store fields that deserve additional protection at rest. Laravel can encrypt selected Eloquent attributes before they are written to the database and decrypt them automatically when they are read. For modern Laravel applications, the built-in encrypted cast is preferable to overriding Eloquent’s magic __get() and __set() methods. It integrates with the model casting system and avoids interfering with Eloquent internals. Basic Implementation Define encrypted attributes in the model’s casts:

Laravel Security

Cybersecurity / 03 Sep 2025 / 3 min read

.htaccess Rules to Prevent PHP Execution

Public upload directories are a common security-sensitive part of web applications. If an attacker manages to upload a file such as shell.php and the web server executes it, the upload feature can become a route to remote code execution. On Apache, a directory-specific .htaccess configuration can help prevent script execution in locations that should contain only static files. Why .htaccess Can Help Apache supports .htaccess files for directory-level configuration when the server permits the relevant overrides. This makes it possible to apply security rules to a specific directory without changing every virtual-host setting.

DevOps Security

Web Development / Updated 02 Sep 2025 / 2 min read

Building a Live Search Page in Filament PHP

Real-time search can make an admin dashboard much easier to use. Filament is built on Livewire, so a custom resource page can react to search input without writing a separate frontend application. This example adds a live-search page to a PostResource. 1. Generate a Custom Page Generate a custom page inside the resource: php artisan make:filament-page SearchPost --resource=PostResource --type=custom The exact generated path can vary by Filament version and panel structure, so check the files created by the command.

Laravel Filament

Rust / Updated 02 Sep 2025 / 3 min read

Understanding Structs and Methods in Rust

Structs are Rust’s primary way to group related values into a custom data type. They make data models explicit and can be paired with impl blocks to define methods and associated functions that belong with that data. What Is a Struct? A struct is a custom type that combines related fields into one logical value. Rust structs are often used for domain models, configuration, state, request data, and many other structured values.

Rust

Rust / Updated 02 Sep 2025 / 3 min read

Understanding Enums and Pattern Matching in Rust

Enums and pattern matching are central Rust features for representing a fixed set of possible states and handling each state explicitly. Rust enums can carry data, while match lets you destructure those values and choose behavior based on their shape. What Is an Enum in Rust? An enum defines a type whose value is exactly one of several variants. Unlike simple enumerations in some languages, Rust variants can also carry structured data.

Rust

Rust / Updated 02 Sep 2025 / 3 min read

Method Syntax in Rust

Rust methods define behavior associated with a type such as a struct or enum. They are usually declared inside an impl block and are called on a value with dot syntax. What Is a Method in Rust? A method is a function whose first parameter is some form of self, which represents the value the method is called on. Methods keep behavior close to the type it belongs to and often make APIs easier to read.

Rust

Rust / Updated 02 Sep 2025 / 3 min read

Working with Arrays in Rust

An array in Rust is a fixed-size collection whose elements all have the same type. Arrays are useful when the number of elements is known at compile time and should not grow or shrink during execution. What Is an Array in Rust? The type of an array includes both its element type and its length. For example, [i32; 5] is an array containing exactly five i32 values. A differently sized array is a different type.

Rust Array

Rust / Updated 02 Sep 2025 / 3 min read

Using Variables in Rust

Variables are one of the first Rust concepts to learn because Rust makes mutability, types, and ownership explicit. This guide covers variable declarations, mutable values, type annotations, constants, and shadowing. What Is a Variable in Rust? A variable binds a name to a value. Rust is statically typed, so the compiler knows the type of every variable at compile time and checks that operations use compatible types. Declare Variables Use let:

Rust

Rust / Updated 02 Sep 2025 / 3 min read

Using Functions in Rust

Functions are reusable blocks of code that help divide a program into smaller, focused pieces. Rust functions can accept typed parameters, return values, borrow data, and work with functions or closures as inputs. What Is a Function in Rust? Functions are declared with the fn keyword, followed by the function name, parameters, an optional return type, and a body: fn function_name(parameters) { // function body } Define and Call a Function fn main() { greet(); } fn greet() { println!("Hello, Rustacean!"); } Rust does not require a function to be defined before the call site in the source file, as long as it is visible in the current module.

Rust

JavaScript / Updated 02 Sep 2025 / 3 min read

Understanding Watchers in Vue 3

Vue 3 watchers let you run side-effect logic when reactive data changes. They are useful for tasks such as triggering an API request, synchronizing with an external system, persisting state, or responding to a transition between values. 1. What Is a Watcher? A watcher observes one or more reactive sources and runs a callback when their values change. Unlike a computed property, which represents derived state, a watcher is usually intended for side effects.

Vue Array

Rust / Updated 02 Sep 2025 / 4 min read

Understanding References and Borrowing in Rust

References and borrowing let Rust code access data without taking ownership of it. These concepts are fundamental to Rust’s memory-safety model and allow programs to share and mutate data under rules that the compiler can verify. What Is a Reference in Rust? A reference points to a value owned elsewhere without becoming responsible for dropping that value. References use & syntax and are either immutable or mutable: Immutable reference (&T): allows read-only access. Mutable reference (&mut T): allows mutation while enforcing exclusive access rules. Immutable References Immutable references let a function inspect a value without consuming it:

Rust

Rust / Updated 02 Sep 2025 / 3 min read

Understanding Control Flow in Rust

Control flow determines which parts of a program run and how often they run. Rust provides expressive control-flow constructs including if, match, loop, while, and for. Understanding these tools is essential for writing programs that make decisions, repeat work, and handle different states safely. What Is Control Flow? Control flow describes the order in which statements and expressions are evaluated. It lets a program choose between branches, repeat operations, and respond differently to values or conditions.

Rust

JavaScript / Updated 02 Sep 2025 / 3 min read

Understanding Computed Properties in Vue 3

Vue 3’s reactivity system makes it easy to derive values from reactive state. A computed property is a value that Vue automatically recalculates when its reactive dependencies change and caches between updates when those dependencies stay the same. 1. What Is a Computed Property? Computed properties are designed for derived state. Instead of storing both source data and a duplicated calculated value, you define how the value should be computed from its dependencies.

Vue

JavaScript / Updated 02 Sep 2025 / 2 min read

Two-Way Binding with `v-model` in Vue 3

Two-way binding is a common part of interactive Vue applications. In Vue 3, v-model provides a concise way to synchronize form controls with component state. This guide covers the basic syntax, common input types, custom components, and a few practical guidelines. 1. What Is Two-Way Binding? Two-way binding keeps a UI control and JavaScript state synchronized. When the user changes an input, the state updates; when the state changes, the rendered input reflects the new value.

Vue