[{"content":"Prerequisites\nDownload the Fastboot ROM for your device. Install Android SDK platform-tools (fastboot.exe must be in system PATH). Boot the device into Fastboot Mode (Volume Down + Power or adb reboot fastboot). Terminology\nAnti-Rollback – Prevents flashing older firmware. Check with: fastboot getvar anti\nFastboot ROM – Complete OS image with separate partitions (boot, system, vendor, userdata, etc.).\nFlashing Instructions\nExtract the Fastboot ROM to a folder on your PC.\nBoot the device into Fastboot Mode.\nConnect via USB and verify detection:\nfastboot devices Your device ID must appear. If it doesn\u0026rsquo;t, check out Troubleshooting\nRun the provided script or flash manually:\nflash_all.bat – resets everything flash_all_except_storage.bat – resets partitions but preserves user data flash_all_lock.bat – resets everything + locks bootloader Example for full reset with unlocked bootloader:\nflash_all.bat Device should automatically reboot. If it didn\u0026rsquo;t run fastboot reboot or Hold Power button\nTroubleshooting If fastboot devicesreports waiting for devices:\nCheck Device Manager for issues. Verify drivers are installed Change USB cable/port. If the script runs but does nothing:\nEnsure fastboot.exe is in PATH. Verify the device anti version ≤ firmware anti version. If anti-rollback validation fails, it can be manually bypassed by editing scripts, but this risks bricking the device.\n","permalink":"https://almazhecker.github.io/almazich/posts/flashing-android/","summary":"\u003cp\u003e\u003cstrong\u003ePrerequisites\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eDownload the Fastboot ROM for your device.\u003c/li\u003e\n\u003cli\u003eInstall Android SDK platform-tools (\u003ccode\u003efastboot.exe\u003c/code\u003e must be in system PATH).\u003c/li\u003e\n\u003cli\u003eBoot the device into Fastboot Mode (\u003cstrong\u003eVolume Down + Power\u003c/strong\u003e or \u003ccode\u003eadb reboot fastboot\u003c/code\u003e).\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cstrong\u003eTerminology\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eAnti-Rollback\u003c/strong\u003e – Prevents flashing older firmware. Check with: \u003ccode\u003efastboot getvar anti\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eFastboot ROM\u003c/strong\u003e – Complete OS image with separate partitions (boot, system, vendor, userdata, etc.).\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eFlashing Instructions\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eExtract the Fastboot ROM to a folder on your PC.\u003c/p\u003e","title":"Flashing Xiaomi via Fastboot ROM"},{"content":"Prerequisites\nInstall Magisk from official releases: Magisk GitHub Install Android SDK platform-tools (we specifically need fastboot.exe) Terminology\nROM – Refers to firmware images, not true read-only memory. Recovery ROM – OS image flashed via recovery partition, usually packaged as a single archive (ZIP, payload.bin) for OTA updates or sideloads. Fastboot ROM – Complete OS image for flashing via fastboot, with all partitions separated (boot, system, vendor, userdata, etc.) for full or selective flashing. Installation Instructions\nDownload the Fastboot ROM for your device. The OS version must match your current firmware. I specifically download from here\nExtract boot.img from the Fastboot ROM, copy to your phone and patch it with Magisk. The patched image and its path will be displayed in the terminal.\nCopy the patched image to your PC, turn off your phone, and boot into Fastboot Mode.\nFlash the patched boot image:\nfastboot flash boot \u0026lt;magisk_patched\u0026gt;.img Replace \u0026lt;magisk_patched\u0026gt; with the path to your patched image.\nNote: If you flashed boot.img but Magisk did not gain root access, repeat steps 2–4 using init_boot.img instead. Flash it with: fastboot flash init_boot \u0026lt;magisk_patched\u0026gt;.img Restart the phone and open the Magisk app. If the Superuser tab is available, you have root access. Otherwise, patch and flash init_boot.img as described above Troubleshooting\nIf fastboot says “waiting for devices”:\nTry a different USB cable or port.\nCheck that drivers are installed.\nOpen Device Manager on Windows and verify there\u0026rsquo;s no warning icon on your device.\nIf a warning icon appears, install proper Fastboot drivers.\nExample: On my device, ADB recognized the phone but fastboot didn’t. After reinstalling USB driver it started to work.\n","permalink":"https://almazhecker.github.io/almazich/posts/root-android/","summary":"\u003cp\u003e\u003cstrong\u003ePrerequisites\u003c/strong\u003e\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eInstall Magisk from official releases: \u003ca href=\"https://github.com/topjohnwu/Magisk/releases\"\u003eMagisk GitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eInstall Android SDK platform-tools (we specifically need \u003ccode\u003efastboot.exe\u003c/code\u003e)\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cstrong\u003eTerminology\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eROM\u003c/strong\u003e – Refers to firmware images, not true read-only memory.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRecovery ROM\u003c/strong\u003e – OS image flashed via recovery partition, usually packaged as a single archive (ZIP, payload.bin) for OTA updates or sideloads.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eFastboot ROM\u003c/strong\u003e – Complete OS image for flashing via fastboot, with all partitions separated (boot, system, vendor, userdata, etc.) for full or selective flashing.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eInstallation Instructions\u003c/strong\u003e\u003c/p\u003e","title":"How to Root Android Device"},{"content":"The performance of lightweight pages can sometimes lag, while heavier applications run smoothly. This discrepancy lies in browser rendering threads and the pixel pipeline.\nCore Threads in Browser Rendering Browsers typically utilize three primary threads:\nUI Thread Handles browser interface elements (tabs, address bar), separate from page rendering.\nRenderer Thread (Main Thread) Executes JavaScript, HTML, and CSS. It handles:\nDOM/CSSOM parsing Style calculation Layout (reflow) Painting Compositor Thread Uses the GPU to render the final output to the screen. It operates independently from the main thread, optimized for:\nTransform operations (scale, skew, rotate) Opacity changes Smooth scrolling The Pixel Pipeline: 5 Key Phases Pixel pipeline phases\nJavaScript/CSS Triggers visual updates such as DOM changes or class toggles.\nStyle Applies CSS rules to DOM nodes.\nTip: Use simple selectors to minimize rendering cost (avoid deep descendant selectors like div \u0026gt; ul \u0026gt; li a).\nLayout (Reflow) Calculates element geometry (position and size).\nExpensive if affecting many elements. Paint \u0026amp; Rasterization\nPaint (CPU): Generates drawing instructions for the GPU. Rasterization (GPU): Converts drawing instructions into pixel data. At this stage, DOM nodes become GPU-backed textures but aren\u0026rsquo;t yet composed into the final image.\nComposite Combines these textures into the final screen output, handling z-index, overlaps, transforms, etc. Operates on the Compositor Thread.\nOptimizing the Pixel Pipeline Browsers optimize the pipeline to avoid executing all five phases unnecessarily:\nFull Pipeline (JS → Style → Layout → Paint → Composite) Triggered by geometry changes (e.g., width, height, position). A layout change requires a full reflow and repaint.\nSkip Layout (JS → Style → Paint → Composite) Triggered by visual-only changes (e.g., color, background). These don\u0026rsquo;t affect layout and skip the layout phase.\nSkip Layout and Paint (JS → Style → Composite) Triggered by transform/opacity changes. These are handled in the Compositor Thread, skipping Layout and Paint phases entirely.\nReflow (Layout) Optimization When a DOM node\u0026rsquo;s geometry changes, the browser reflows only the affected nodes. However, layout changes can cascade, affecting parent or sibling nodes and triggering additional reflows.\nTo optimize reflows, avoid changes that affect ancestor or sibling layout. Ensure fixed container sizes to avoid pushing children outside their bounds.\nAccessing layout properties (e.g., width, height, offsetTop) triggers reflow because layout properties are calculated on-demand for performance.\nconst button = document.getElementById(\u0026#34;submit-btn\u0026#34;); console.log(button.style.width); // reflow triggered console.log(button.getBoundingClientRect()); // reflow triggered GPU Compositing Layers Compositing layers are isolated render surfaces promoted during the Layout phase. These layers:\nLayout and Paint once (initial render). Are cached in GPU memory. Skip layout and paint on subsequent updates. Elements using GPU-optimized properties such as transform, opacity, and certain filters are promoted to compositing layers.\nThese properties don’t modify HTML structure but only visual appearance, allowing for faster updates. When modified, compositing layers are redrawn directly from the GPU memory without needing recalculations.\nModifying properties like width, height, or background forces a full pipeline since they impact layout.\nUse compositing layers wisely. Excessive use can increase GPU memory consumption, slowing performance on mobile devices.\n/* Good - Animate what\u0026#39;s necessary */ .slide-in { transform: translateX(0); transition: transform 0.3s; } /* Bad - Forces unnecessary layer creation */ .static-element { will-change: transform; } Optimization Techniques Animations: Prefer transform over left/top for animations. Transform is GPU-accelerated and runs on the Compositor Thread, avoiding layout and paint phases, preserving Main Thread performance.\n/* Bad - Triggers layout and paint on each frame */ @keyframes janky { from { left: 0; } to { left: 100px; } } /* Good - Composite-only, GPU-accelerated */ @keyframes smooth { from { transform: translateX(0); } to { transform: translateX(100px); } } DOM Interaction: Batch DOM reads and writes to avoid layout thrashing. Forced synchronous layout, where JavaScript reads and writes to the DOM in an alternate manner, causes repeated reflows and performance degradation.\n// Bad: alternate reads/writes → multiple forced reflows elements.forEach((el) =\u0026gt; { el.style.width = `${el.offsetWidth}px`; // offsetWidth forces layout // style.width triggers layout recalculation (reflow) because geometry changes }); // Good: Batched reads and writes → single reflow const widths = elements.map((el) =\u0026gt; el.offsetWidth); elements.forEach((el, i) =\u0026gt; { el.style.width = `${widths[i]}px`; }); requestAnimationFrame Sync Updates with the Browser’s Render Cycle. Use rAF to sync visual updates with the browser’s refresh rate (typically 60fps). Avoids jank and reduces wasted frames.\n// Animating box position in sync with the browser’s refresh rate let position = 0; function animate(timestamp) { position += 1; box.style.transform = `translateX(${position}px)`; if (position \u0026lt; 300) { requestAnimationFrame(animate); } } requestAnimationFrame(animate); // Start the animation Debugging Tools Chrome DevTools: Layer Tab: Visualize compositing layers. Performance Tab: Record animation frames. Rendering Tab: Inspect paints and layer behaviors. Key Takeaways Offload rendering work to the Compositor Thread (via transform/opacity). Minimize layout thrashing by batching DOM operations. Use GPU layers strategically—optimize for performance and memory. Test on low-end devices to understand memory and performance constraints. Fun Facts Chrome optimizes scrolling to always occur on the Compositor Thread. Even with the main thread blocked (e.g., running a while(true) loop), scrolling remains responsive, demonstrating the power of GPU acceleration for certain tasks.\n","permalink":"https://almazhecker.github.io/almazich/posts/optimized-css/","summary":"\u003cp\u003eThe performance of lightweight pages can sometimes lag, while heavier applications run smoothly. This discrepancy lies in browser rendering threads and the pixel pipeline.\u003c/p\u003e\n\u003ch2 id=\"core-threads-in-browser-rendering\"\u003eCore Threads in Browser Rendering\u003c/h2\u003e\n\u003cp\u003eBrowsers typically utilize three primary threads:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eUI Thread\u003c/strong\u003e\nHandles browser interface elements (tabs, address bar), separate from page rendering.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eRenderer Thread (Main Thread)\u003c/strong\u003e\nExecutes JavaScript, HTML, and CSS. It handles:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDOM/CSSOM parsing\u003c/li\u003e\n\u003cli\u003eStyle calculation\u003c/li\u003e\n\u003cli\u003eLayout (reflow)\u003c/li\u003e\n\u003cli\u003ePainting\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eCompositor Thread\u003c/strong\u003e\nUses the GPU to render the final output to the screen. It operates independently from the main thread, optimized for:\u003c/p\u003e","title":"Understanding Browser Rendering \u0026 UI Optimization"}]