标签：#Web

Hey everyone 👋 Is anyone here playing RF Online Next? I recently built a fan guide website for it: 👉 https://rf-online-next.net RF Online Next Guide — Starter Finder & Beginner Tips New to RF Online Next? Answer 3 questions to get your starter Biosuit, faction lean, and first-day checklist — personalized for your playstyle. rfonlinenextguide.com The idea is pretty simple. When a new MMO launches, information is usually all over the place — Discord messages, random posts, outdated guides, fake code pages, and long videos when you only need one quick answer. So I wanted to make a cleaner guide hub for players who just want to know: how to download and play which faction to pick what Biosuits/classes are good whether there are any real codes how to fix server full/login issues how Mining War / Chip War works what Sacred Weapons do The site focuses a lot on Mining War, the big 450-player faction war between Bellato, Cora, and Accretia. I also tried to keep the content honest. For example, the codes page doesn’t list fake “working codes” just for clicks. If there are no confirmed codes, it says that clearly. From the dev side, I structured the site around search intent instead of a normal blog feed. So the homepage points players directly to the guide they probably need. It also has multilingual sections for different regions, since RF Online Next has players from many countries. Would love to hear feedback from other devs, especially on: site structure SEO approach guide layout content clarity anything that feels confusing If you’re into MMOs, gaming websites, or niche SEO projects, feel free to check it out: 👉 https://rf-online-next.net RF Online Next Guide — Starter Finder & Beginner Tips New to RF Online Next? Answer 3 questions to get your starter Biosuit, faction lean, and first-day checklist — personalized for your playstyle. rfonlinenextguide.com

Instagram/WhatsApp Stories have a signature UI: those segmented bars across the top, one filling at a time. It looks fancy but it's a simple pattern. Here's a live, tappable rebuild in vanilla JS + CSS. 📸 Try it (tap left/right, hold to pause): https://dev48v.infy.uk/design/day17-instagram-stories.html The segmented bar One bar per story. The rule: only the active segment animates its width 0→100%; segments before it are full, segments after are empty. When the active one completes, advance to the next and reset the rule. Driving the fill A single requestAnimationFrame loop tracks elapsed time vs the per-story duration (~4s) and sets the active bar's width. On completion → next story. The interactions that sell it Tap the right half = next, left half = previous (split the screen into two zones). Press-and-hold = pause ( pointerdown pauses the timer, pointerup resumes) — so users can actually read. Reset past/future segment states whenever you jump. Why rAF over CSS animation A timer loop makes pause/resume and tap-to-skip trivial — you control the clock. Pure CSS animations are harder to interrupt mid-fill. 🔨 Full build (segments → animate active → advance → tap zones → hold-to-pause) on the page: https://dev48v.infy.uk/design/day17-instagram-stories.html Part of DesignFromZero. 🌐 https://dev48v.infy.uk

Check how on-premises AI solutions empower enterprises to safeguard sensitive code, ensure data residency, and maintain full compliance without compromising performance. Why privacy and security matter in AI-powered development? As enterprises increasingly adopt AI to automate code reviews, testing, and vulnerability scanning, ensuring data privacy becomes paramount. Cloud-based AI tools may expose sensitive source code, customer data, or intellectual property to external risks. By contrast, on-premise AI tools allow organizations to keep data within their controlled environments by aligning with data sovereignty and compliance requirements like GDPR and CCPA. According to Gartner, by 2026, 75% of organizations will demand AI solutions that guarantee strong data residency and compliance assurances. What are on-premise AI tools for software development On-premise AI tools are artificial intelligence solutions that are deployed and operated within an organization’s own infrastructure, rather than relying on external cloud services. In the context of software development, on-premise AI allows teams to leverage advanced AI capabilities such as code analysis, automated testing, and security scanning while keeping all data and processes within their own controlled environment. Core components of on-premise AI infrastructure include: Hardware: servers, GPUs, and storage devices physically located on-site or in a private data center. Software: AI models, orchestration tools, and management platforms installed and maintained by the organization. Security Measures: firewalls, access controls, and monitoring systems tailored to the organization’s specific needs. Examples of on-premise AI tools in software development: AI-powered code review platforms installed on internal servers automated vulnerability scanners running within the company’s network machine learning models for test automation, hosted locally. Primary connection to data privacy: on-premise AI ensures that sensit

Deixa eu adivinhar. Você tá com um projeto Laravel rodando, tem uns 5, 10, talvez 15 formulários que recebem CPF. Cadastro de cliente, cadastro de fornecedor, atualização de perfil, checkout, área administrativa… e em cada um desses lugares tem aquela mesma lógica de validação de CPF. Copiada. Colada. Com pequenas variações. E tá tudo bem. Até o dia em que o cliente pede pra mudar uma regra. Ou um bug aparece em um formulário e funciona normal no outro. Aí você abre o projeto, dá um Ctrl+Shift+F procurando "cpf" e… surpresa: tem oito lugares diferentes com a mesma validação. Com mensagens de erro escritas de oito jeitos. Uma delas até com erro de digitação. Já passou por isso? Então senta que essa conversa é pra você. O crime acontecendo em câmera lenta Olha esse cenário aqui, que eu garanto que você já viu (ou escreveu): // app/Http/Requests/StoreClienteRequest.php public function rules () { return [ 'cpf' => [ 'required' , function ( $attribute , $value , $fail ) { $cpf = preg_replace ( '/[^0-9]/' , '' , $value ); if ( strlen ( $cpf ) !== 11 ) { $fail ( 'CPF inválido.' ); return ; } // ... mais 20 linhas do algoritmo }], ]; } E aí, três dias depois, no outro Form Request: // app/Http/Requests/StoreFornecedorRequest.php public function rules () { return [ 'cpf' => [ 'required' , function ( $attribute , $value , $fail ) { $cpf = preg_replace ( '/[^0-9]/' , '' , $value ); if ( strlen ( $cpf ) !== 11 ) { $fail ( 'O CPF informado não é válido!' ); // mensagem diferente, claro return ; } // ... mais 20 linhas quase iguais, mas não exatamente }], ]; } Multiplica isso por 8 telas. Agora imagina o seu "eu do futuro" tentando manter isso. Dá pra sentir a dor daqui. DRY: a sigla que vai salvar seu projeto (e sua sanidade) DRY significa Don't Repeat Yourself . Em bom português: não se repita, caramba. A ideia é simples: cada pedaço de conhecimento (uma regra de negócio, um cálculo, uma validação) deve existir em um único lugar no seu sistema. Se precisar mudar, você muda em u

I run Vite on almost everything. Astro sites, Nuxt projects, a small group of libraries I maintain on the side. The build tool is the part of the stack I think about least, because it just works. So when the thing under all of that changes twice in three months, I read the release notes properly. Here is what actually changed, what breaks, and the part that made developers argue for a week straight. For Five Years, Vite Ran on Two Bundlers When Vite launched, it made a pragmatic bet. esbuild for the dev server, because it is fast. Rollup for production, because its output is well optimized. Two tools, two jobs. It worked. But it had a cost. Two bundlers meant two configs, two sets of quirks, and output that could drift between dev and prod. You tuned one, and the other behaved slightly differently. Vite 8 ends the split. It shipped on March 12 with a single bundler called Rolldown, written in Rust, with the Rollup plugin API on top. Under Rolldown sits Oxc, a Rust parser and transformer that does the TypeScript and JSX work Babel used to do. One language. One pipeline. Dev and prod finally agree. This Is a Pattern, Not a One-Off esbuild (Go) made webpack look slow. Bun did the same to Node for some workloads. Biome replaced Prettier and ESLint and runs many times faster. Now Rolldown does it to Rollup and esbuild at the same time. Every time a core JavaScript tool gets rewritten in a compiled language, the same thing happens. The speed jump is large enough to make the old version look broken. The interesting part is not the speed. It is the compatibility. These Rust tools do not ask you to relearn your stack. Rolldown speaks the Rollup plugin API. Biome follows ESLint and Prettier conventions. The migration is designed to be boring, and boring is the point. The Numbers, With a Grain of Salt The headline figure is real. Linear cut its production build from 46 seconds to 6 . Vite reports builds 10 to 30 times faster than the old Rollup path. Other large projects repor

Making of Aantraa aantraa.site — AI audio & video translation, caption generator, and viral shorts cutter. Under the Hood I run a small YouTube channel. I'm not a full-time content creator, but YouTube is a solid platform to gain traffic for your online work, business, project, or idea. Aantraa is what I built in a week. The main concept is simple: Video translation into multiple languages Audio translation — including text-to-audio, with MP3 output for Premiere Pro Long-form to shorts — convert YouTube long-form video into short clips At that time, only three features were needed, so website development wasn't the heavy lift. The real work was building APIs, backend infrastructure to integrate AI into video, and dealing with heavy storage. Breaking the execution into steps: How I made Aantraa AI LLM layering and provider Aantraa is heavily dependent on AI APIs — we need reliable infrastructure for LLM providers. OpenRouter, Portkey, Vercel AI SDK labs, and individual APIs for Anthropic, Deepseek, and OpenAI are solid options. I prefer OpenRouter for Aantraa for one reason: multiple model support — it's easy to pick the cheapest capable model for each job. Easy to integrate, strong community support, free model access, and more. AI LLM APIs are needed at almost every stage in the backend: Understanding video context and creating a script Translating the script into target languages Recording the script into MP3 or WAV format Summarising the video Generating captions Cutting videos into shorts Building APIs and servers Each layer needs heavy AI context and prompt engineering. Loop engineering is the trend here — and it's required for aantraa. For example, video translation works in multiple connected steps: Video translation API breakdown AI understands the video, fed into the LLM via the ffmpeg module AI generates a script/caption from the video AI translates the script into the desired language AI generates audio (MP3 or WAV) of the new translation AI glues audio a

You type www.google.com into your browser and hit Enter. The page loads in under a second. But stop and think about what just happened. Your browser didn't know where Google lives on the internet. It had to ask. And in that fraction of a second, a surprisingly elegant chain of lookups took place behind the scenes. That system is called DNS — the Domain Name System. Think of it as the internet's phonebook: it translates human-friendly names like www.google.com into machine-friendly IP addresses like 142.250.80.46 . Without it, you'd have to memorise numbers to visit any website. Let's walk through exactly what happens, step by step. Step 1: You Type a URL — But What Does It Mean? When you type www.bing.com , you're entering a domain name . Domain names have a structure — and reading them right-to-left tells you a lot: www . bing . com │ │ │ │ │ └── Top-Level Domain (TLD): category or country │ └──────── Second-Level Domain (SLD): the brand/org name └─────────────── Subdomain: a section of the site (optional) Some real examples: Domain TLD SLD Subdomain www.bing.com .com bing www news.bbc.co.uk .uk bbc news docs.github.com .com github docs TLDs indicate the type or origin of a site — .com for commercial, .edu for education, .in for India, and so on. Step 2: Your Browser Checks Locally First Before going anywhere on the internet, your browser does a quick local check — two of them, actually. 1. Browser cache Modern browsers cache DNS results from previous lookups. If you visited bing.com five minutes ago, the browser already knows its IP and skips the entire lookup process. 2. The hosts file Your operating system has a plain text file that maps domain names to IPs manually. On most systems it lives at: Windows: C:\Windows\System32\drivers\etc\hosts Mac/Linux: /etc/hosts It looks like this: 127 . 0 . 0 . 1 localhost 192 . 168 . 1 . 10 mydevserver . local Developers use this all the time for local testing — mapping a production domain name to a local IP to test before go

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is...

Looked at 30 products running Meta + TikTok ads profitably. 7 patterns every single one had: PRICE : $25-$65 Below = thin margins. Above = harder impulse. BUNDLE OPTIONS "Buy 2 save 10% / Buy 3 save 15%" — every store had this. None were single-product only. VISUAL HOOK IN 3 SECONDS Unique design, specific problem solved, or "wow factor." Generic products failed. REAL REVIEWS WITH PHOTOS Not 5-star spam. Real, mixed reviews. Even negatives build trust. SHIPPING TIME ON PDP Every store disclosed it directly. None hid it in FAQ. STICKY ADD-TO-CART ON MOBILE All 30 had it. If your Add to Cart scrolls off-screen on mobile, you're losing sales. POST-PURCHASE UPSELL "Add this for $X" / subscription / bulk refill. This is where AOV lives. WHAT THEY DIDN'T HAVE Live chat (only 4/30) Exit-intent popups (only 2/30) Countdown timers (only 3/30) Countdown timers (only 3/30 — most had REAL shipping urgency instead) Multiple payment options visible on PDP (most just had Shopify default) The "guru tactics" aren't what winning stores use. 3 QUICK WINS Pick products with visual hooks Bundle by default Fix PDP before scaling ads

Every small task used to mean a new tab. JSON formatter on one site, GST calculator on another, PDF merger somewhere that wanted my email before it would merge two pages. Ads everywhere, slow UIs, and that low-grade worry about uploading a payslip or invoice to a server I do not control. I got tired of juggling twenty bookmarks for work that should take thirty seconds — so I started building one place for all of it. What ToolReign is ToolReign is a free online toolbox: 260+ utilities across 15 categories , all running in your browser. Developer tools (JSON formatter, JWT decoder, API client), text utilities, SEO helpers, PDF and image tools, spreadsheets, and a finance section I built with India in mind — GST with CGST/SGST/IGST splits, EMI and SIP calculators, HRA exemption, gratuity, income tax estimates, and more. The idea is straightforward: open a tool, do the work, leave. No signup wall, no file uploads to a backend, no account to manage. I am Anirudha Sonwane , a Senior Software Engineer at Giant Leap Systems in Pune. ToolReign is a side project I build around my day job — not a pitch deck, just something I wished existed. The tech stack decisions Next.js 14 App Router and static export Each tool lives at its own route under src/app/{category}/{tool-slug}/ . That maps cleanly to SEO: one URL, one search intent, one page of metadata. The site exports statically ( output: 'export' ), so production deployment is uploading an out/ folder to static hosting — no Node server to babysit. The App Router made this scale. Add a page component, register the slug in tool-registry.json , and the sitemap, category hubs, and search index pick it up automatically. At 260+ tools, hand-maintaining URLs would have broken within a month. 100% client-side — the decision that shaped everything This was the core architectural bet, and it is also the privacy story: your data never leaves the browser. Finance calculators are plain TypeScript math with useMemo . PDF merge and split use

React dialogs often start simple. You add an isOpen state, then a selected item state, then confirm/cancel callbacks, then another dialog after the first one. Eventually, a simple flow can become scattered across multiple components. For example, a user flow like this: Select a user Confirm the action Add the user often becomes multiple pieces of state: const [ isUserSearchOpen , setIsUserSearchOpen ] = useState ( false ); const [ isConfirmOpen , setIsConfirmOpen ] = useState ( false ); const [ selectedUser , setSelectedUser ] = useState < User | null > ( null ); This works, but the actual flow is harder to read. What if dialogs could be handled as async flows? I wanted the code to read closer to the user flow: const user = await openAsync ( UserSearchDialog ); if ( ! user ) return ; const confirmed = await openAsync ( ConfirmDialog , { title : `Add ${ user . name } ?` , }); if ( confirmed ) { await addUser ( user . id ); } The dialog opens, waits for a result, and the caller continues based on that result. This is about orchestration, not UI This is not meant to replace Radix, MUI, Headless UI, shadcn/ui, or custom dialog components. Those libraries solve the dialog UI problem well. The idea here is to manage the flow around dialogs: opening dialogs from anywhere under a provider resolving typed result values handling nested dialogs distinguishing completed vs dismissed supporting dismissal reasons guarding close behavior with shouldClose So the actual dialog UI can still be your own component. I packaged the pattern I turned this idea into a small open-source library called react-dialog-flow . It provides a headless dialog stack, Promise-based openAsync , typed results, nested dialogs, closeTop , closeAll , dismissal reasons, shouldClose , and optional UI primitives. GitHub: https://github.com/CHOKANGYEOL/react-dialog-flow npm: https://www.npmjs.com/package/react-dialog-flow Docs: https://dialog-flow.kangyeol.com/ It is still early, so I am mainly looking for feed

You already understand tokens. Extensions are just middleware for your money. If you have ever worked with Stripe, you know the pattern. You start with a simple charge: send money from point A to point B. Then you add features — subscriptions, transfer fees, metadata on invoices, compliance checks. Each feature is a separate Stripe product or API call, and wiring them together is your job. Solana's Token Extensions Program is the same idea, but at the blockchain protocol level. Instead of bolting features on top of a basic token after creation (which Solana does not allow), you declare every capability upfront, and the runtime enforces it automatically. No smart contract to write. No backend service to maintain. Just configuration flags at creation time. What is a token extension? A token extension is an optional feature you enable when you create a token mint. Under the hood, each extension reserves extra bytes in the mint's on-chain account. Those bytes store configuration — an interest rate, a fee percentage, a metadata URI — and the Solana runtime reads them during every transaction. The original SPL Token Program is simple. It stores supply, decimals, and authorities. The Token Extensions Program ( TokenzQdBNbLqP5VEhdkAS6EPFLC1PHnBqCXEpPxuEb ) is a superset. It stores everything the original does, plus additional data for each extension you enable. Extensions map directly to Web2 concepts Extension Web2 Analogy What It Does Transfer Fees Payment processor fee Deducts a % on every transfer Interest-Bearing Savings account APY Displays time-adjusted balance Metadata Product catalog entry Stores name, symbol, URI on-chain Default Account State KYC gating All accounts start frozen; you thaw approved users Non-Transferable Professional license Tokens cannot be sold or transferred Permanent Delegate Admin revoke power Issuer can burn tokens from any holder A concrete example Here is the exact command I ran to create a token with transfer fees, interest-bearing, and m

JavaScript Array Search Methods What are Array Search Methods? Array Search Methods are used to: Find the position (index) of an element. Check whether an element exists. Retrieve an element that satisfies a condition. Find the index of an element that matches a condition. Search from the beginning or the end of an array. Common Array Search Methods Method Purpose Returns indexOf() Finds the first occurrence of a value Index or -1 lastIndexOf() Finds the last occurrence of a value Index or -1 includes() Checks whether a value exists true / false find() Finds the first matching element Element or undefined findIndex() Finds the index of the first matching element Index or -1 findLast() (ES2023) Finds the last matching element Element or undefined findLastIndex() (ES2023) Finds the last matching index Index or -1 1. Array.indexOf() Definition The indexOf() method searches an array for a specified value and returns the index of its first occurrence . If the value is not found, it returns -1 . Syntax array . indexOf ( searchElement ) array . indexOf ( searchElement , startIndex ) Parameters Parameter Description searchElement Value to search for startIndex (optional) Index where the search starts Returns Index of the first matching element. -1 if not found. Internal Working Suppose: let fruits = [ " Apple " , " Orange " , " Mango " , " Orange " ]; Memory: Index 0 → Apple 1 → Orange 2 → Mango 3 → Orange When: fruits . indexOf ( " Orange " ); JavaScript starts from index 0 : Apple ❌ Orange ✅ Found Stops immediately and returns: 1 Example let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . indexOf ( " Orange " )); Output 1 Example - Not Found let fruits = [ " Apple " , " Orange " ]; console . log ( fruits . indexOf ( " Mango " )); Output -1 Example - Start Position let fruits = [ " Apple " , " Orange " , " Banana " , " Orange " ]; console . log ( fruits . indexOf ( " Orange " , 2 )); Output 3 Real-Time Example Suppose an e-commerce site wants to

What is an Array? An Array is a special object in JavaScript used to store multiple values in a single variable. Instead of creating separate variables, let student1 = " John " ; let student2 = " David " ; let student3 = " Alex " ; we can use an array: let students = [ " John " , " David " , " Alex " ]; Each value inside the array is called an element , and every element has an index starting from 0 . Index : 0 1 2 ------------------------- Array : | John | David | Alex | ------------------------- 1. Array length Definition The length property returns the total number of elements present in an array. It is not a function . It is a property of an array object. It is also writable, meaning you can change the length to increase or decrease the array size. Syntax array . length To modify the array length: array . length = newLength ; Parameters None. Returns Returns a number representing the total number of elements in the array. Internal Working Consider this array: let fruits = [ " Apple " , " Orange " , " Mango " ]; Memory representation: Index 0 → Apple 1 → Orange 2 → Mango length = 3 When JavaScript creates the array, it internally stores a special property: { 0 : "Apple" , 1 : "Orange" , 2 : "Mango" , length: 3 } Whenever you access: fruits . length JavaScript simply returns the value stored in the length property. It does not count the elements every time. This makes length very fast. Example 1 let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . length ); Output 3 Example 2 - Updating Length let numbers = [ 10 , 20 , 30 , 40 ]; numbers . length = 2 ; console . log ( numbers ); Output [ 10 , 20 ] JavaScript removes the remaining elements. Example 3 - Increasing Length let colors = [ " Red " , " Blue " ]; colors . length = 5 ; console . log ( colors ); Output [ "Red" , "Blue" , empty × 3 ] The new positions become empty slots . Real-Time Example Imagine an E-commerce Shopping Cart . let cart = [ " Laptop " , " Mouse " , " Keyboard " ]; co

A String in JavaScript is a sequence of characters used to store text. let course = " JavaScript " ; 1. String length Purpose Returns the total number of characters in a string. Syntax string . length Example let company = " OpenAI " ; console . log ( company . length ); Output 6 Real-Time Example Checking password length before registration. 2. String charAt() Purpose Returns the character at a specified index. Syntax string . charAt ( index ) Example let city = " Madurai " ; console . log ( city . charAt ( 3 )); Output u Internal Logic M a d u r a i 0 1 2 3 4 5 6 Index 3 contains "u". 3. String charCodeAt() Purpose Returns the Unicode value (UTF-16 code) of a character. Example let letter = " A " ; console . log ( letter . charCodeAt ( 0 )); Output 65 More Examples console . log ( " a " . charCodeAt ( 0 )); Output: 97 4. String codePointAt() Purpose Returns the Unicode code point of a character. Useful for emojis and special symbols. Example let emoji = " 😊 " ; console . log ( emoji . codePointAt ( 0 )); Output 128522 Difference console . log ( " 😊 " . charCodeAt ( 0 )); console . log ( " 😊 " . codePointAt ( 0 )); codePointAt() gives the actual Unicode value. 5. String concat() Purpose Combines two or more strings. Example let firstName = " Annapoorani " ; let lastName = " Kadhiravan " ; let fullName = firstName . concat ( lastName ); console . log ( fullName ); Output Annapoorani Kadhiravan Alternative console . log ( firstName + lastName ); 6. String at() Purpose Returns character at a specific position. Supports negative indexing. Example let language = " JavaScript " ; console . log ( language . at ( 0 )); console . log ( language . at ( - 1 )); Output J t 7. String [ ] Purpose Access characters using bracket notation. Example let laptop = " Dell " ; console . log ( laptop [ 0 ]); console . log ( laptop [ 2 ]); Output D l Difference console . log ( laptop . charAt ( 0 )); console . log ( laptop [ 0 ]); Both return same result. 8. String slice() Purpose Extract

Almost every "generate a PDF" feature starts the same way. You already have HTML. You already have CSS. So you reach for the obvious move: render the page, screenshot it to PDF, ship it. Puppeteer, Playwright, wkhtmltopdf, a hosted "HTML to PDF API" — pick your flavor. In an afternoon you have an invoice coming out the other end and it looks fine. Then it goes to production. And "fine" slowly turns into a backlog of weird, hard-to-reproduce bugs. This is not an argument that HTML-to-PDF is useless. For a one-off export or an internal report, it's great. The argument is narrower: the moment PDF generation becomes a real, automated, customer-facing part of your product, "screenshot a web page" is the wrong abstraction — and the failure modes are predictable enough to list in advance. The core problem: a PDF is not a web page A browser renders for an infinite, scrollable, single-width viewport. A PDF is a stack of fixed, finite, printable pages. Those are different physics. HTML-to-PDF works by rendering your page in a headless browser and then slicing that continuous render into page-sized pieces. Everything that's hard about it comes from that one mismatch: you designed for a stream, and now you're forcing it into pages. Most of the bugs below are just that mismatch showing up in different costumes. Failure mode 1: pagination This is the big one. A browser has no concept of "page 2." So when your content is taller than one page, the engine has to guess where to cut — and it cuts wherever the pixel ruler lands. That means: a table row sliced in half across the page break a heading stranded alone at the bottom of a page, its content on the next a total row that floats away from the table it belongs to a signature block split from the line above it CSS has break-inside: avoid , break-before , and friends — and they help. But support is uneven across engines, they interact badly with flex/grid, and you end up hand-tuning rules per document until it looks right for the da

I spent 13 years in financial services — 7 at Discover Financial, 6 at Bread Financial — consistently finishing in the top 5% of my team. I was good at my job. Really good. But in March 2026, I enrolled in Coding Temple's Full-Stack Web Development bootcamp and started building. Here's what 3 months actually looks like from zero. Month 1: HTML, CSS, and Figuring Out Why Nothing Looks Right I started where everyone starts — HTML and CSS. Built a food landing page (FoodSpot) and a multi-page event site (EventHive). Learned Flexbox, Grid, responsive design, and why box-sizing: border-box should just be the default everywhere. What I shipped: FoodSpot — food landing page EventHive — responsive multi-page event site What I earned: ✅ Web Development with HTML & CSS (Coding Temple verified badge) Month 2: JavaScript, Then Python JavaScript clicked faster than I expected. DOM manipulation, ES6+, event listeners. Then Python — and honestly, Python felt natural. The OOP concepts made sense immediately. What I shipped: Python CLI Task Manager — persistent task app with file storage, OOP, exception handling Defeat the Evil Wizard — text-based RPG with multiple classes, inheritance, combat logic, and game state management What I earned: ✅ JavaScript Mastery ✅ Python Foundations for Software Engineering ✅ Advanced Python Month 3: React React was the biggest jump. Component architecture, hooks, state management, routing. But I got through it by building something real. What I shipped: FakeStore API — a full e-commerce SPA consuming a live REST API with dynamic product rendering, client-side routing, CRUD operations, and loading/error state management What I earned: ✅ Single Page Apps with React What I Brought From Finance That Helped People underestimate what non-tech backgrounds bring to code. Here's what transferred directly: Data analysis → Debugging mindset. I spent years finding patterns in account data. Finding why code breaks is the same muscle. Process optimization → Clean

We tend to write React as functional programming because the functional component is the mainstream. In this era, one of the issues we often encounter is conditional statements. There are a variety of conditional statements, such as if, switch, and ternary operator. We confuse when to use them properly. Assign the result of the conditional statement into a variable This makes it easy to read, test, and modify codebases. The representative case is ternary operator const userName = user ? user . name : ' No user found ' ; Of course, we can write the code another way. const point = 80 ; let result ; if ( point >= 70 ) { result = ' passed ' ; } else { result = ' failed ' ; } console . log ( result ); // passed In this way, we can not ensure the immutability of let , and this section with the conditional branch is written in a procedural style. To solve this issue, we have to wrap this in a function. const judge = ( point : number ) => { if ( point >= 70 ) { return ' passed ' ; } return ' failed ' ; }; In addition to wrapping that statement, I suggest that you use early return to save the else statement. Do not write conditional statements in the return value of tsx (the UI rendering portion) ** When there is only a single conditional statement, or there is no need for any execution in the conditional statement. Let's use the ternary operation simply. import { FC } from ' react ' ; import { useQuery } from ' @tanstack/react-query ' ; import getUser from ' domains/getUser ' ; type Props = { userId : number ; }; const Profile : FC < Props > = ( props ) => { const { userId } = props ; const getSpecificUser = async () => { const specificUser = await getUser ( userId ); return specificUser ; }; const { data : user } = useQuery ([ ' user ' , userId ], getSpecificUser ); const userName = user ? user . name : ' User not found ' ; return < p > User ： { userName } < /p> ; }; export default Profile ; const userName = user ? user . name : ' User not found ' ; In this statement, you

An innovative Moroccan platform for finding, renting, and selling real estate, offering a simple and seamless experience tailored to the local market. Challenge Launch Sarout.ma, an innovative Moroccan platform dedicated to searching, renting and selling real estate, on an ultra-competitive market dominated by a few historical players often criticized for dated ergonomics and uneven listing quality. The challenge: build an intuitive, modern real estate marketplace able to connect individual owners, agencies and tenants across all of Morocco — Casablanca, Rabat, Marrakech, Tangier, Agadir — with clear navigation and smart search. It also required enriched, geolocated listings updated in real time, and a journey differentiated by user profile (searcher, owner, professional agency). Solution Development of a site with a clean, fully responsive interface, designed mobile-first since most real estate searches in Morocco happen on smartphones. Integration of advanced dynamic filters (city, neighborhood, price, surface, number of rooms, property type, furnished/unfurnished) with instant result refresh. Listing management via a complete owner dashboard: creation, editing, view statistics, photo management with multi-upload and automatic compression, scheduling of paid promotions. Each property page has an SEO-optimized URL, rich descriptive content, precise geolocation on an interactive map, and the option to directly request a viewing. SEO architecture focused on local ranking: category pages per city and neighborhood, Schema.org RealEstateListing markup, dynamic sitemap. Email alert system for saved searches, listing moderation, and a professional agency dashboard for premium accounts. Results A high-performing, accessible real estate portal that significantly simplifies property search for individuals and strengthens listing visibility across Morocco. The interface fluidity stands out in a market where competition remains rough around the edges. Steady growth in publishe

The code runs. That's not the question. There's a failure mode with AI-generated code...