English Articles

The Safari Cache Delete Technique Every Web Tool Developer Uses — Why “Clear All” Can Make Things Worse

The Safari Cache Delete Technique Every Web Tool Developer Uses — Why “Clear All” Can Make Things Worse Safari’s cache often gets treated as the “enemy,” especially when web tools stop updating or icons refuse to refresh. But in reality, cache is a performance booster — until you’re developing a tool. After clearing Safari’s cache more than 1,000 times while building WebClip and PWA-related tools, I finally arrived at a method that clears every hidden cache layer without breaking logins or wiping unrelated data. Why the “Clear All” Option Is a Bad Idea The common beginner move is: Settings → Safari → Clear History and Website Data But this causes major problems: You lose every login session Your settings are reset across all sites Shopping carts and preferences disappear Some caches (especially WebClip caches) do NOT get cleared Yes — even after clearing everything, Safari may still keep a shadow cache that prevents updated files or icons from appearing. The Correct Approach: Delete Cache for One Site Only Safari stores cache per domain, which means you can safely delete data for just one website without affecting anything else. For developers or anyone using WebClip, PWA, or custom icons, this method […]

JavaScript Isn’t as Free as It Looks: Why Every Action Requires Its Own Script

JavaScript Isn’t as Free as It Looks: Why Every Action Requires Its Own Script Many beginners start learning web development with one big assumption: “JavaScript can do anything, right?” But once you begin writing it, you quickly realize something surprising: “It looks free, but it’s not actually that free…” JavaScript is powerful—but it is not magic. Even the simplest behavior requires a dedicated piece of code. In other words: One action = one script. “JavaScript can do anything” is half true, half misunderstanding Yes, JavaScript can handle animations, data processing, API calls, DOM updates, and more. But that simply means: “It can do it if you write it.” JavaScript never does the rest for you. It is a language where you must explicitly describe every step. Why one simple action often requires multiple pieces of JS Take something as simple as a calculator button: Get the input value → script #1 Add numbers → script #2 Update the screen → script #3 Handle errors → script #4 Even a tiny “add numbers” tool contains multiple invisible scripts behind the scenes. That’s why JavaScript often feels like: “Freedom… but only if you write everything manually.” JavaScript does nothing automatically It doesn’t […]

Why OJapp Icons Look So Clean: The Role and Limits of CSS Explained

Why OJapp Icons Look So Clean: The Role and Limits of CSS Explained Icons created with OJapp look surprisingly clean on both iPhone and Android home screens. Many users ask: “Why does it look so crisp?” This article explains the answer from a CSS perspective. Conclusion First: CSS Handles the Appearance, OJapp Provides the Perfect Material Clean icons are possible thanks to two elements working together: ① High-resolution source images prepared by OJapp ② WebClip’s CSS-like rules that automatically tidy up the icon CSS is a technology for styling. WebClip (the iOS/Android “Add to Home Screen” feature) internally uses rules very similar to CSS. CSS-Based Conditions That Make Icons Look Good To understand why icons look clean, it helps to view the process through the logic of CSS. 1. High-resolution images (1024px+) When CSS uses something like background-size: cover;, low-resolution images get blurry. WebClip behaves similarly—small images lose clarity. 2. Square images (1:1 ratio) Just like object-fit: cover; in CSS, non-square images get cropped. OJapp enforces a perfect square to prevent unpredictable trimming. 3. PNG with transparency works best Home screen icons automatically receive rounded corners—similar to border-radius. Transparent PNGs naturally blend with these shape rules. CSS “Limitations” That Actually […]

What CSS Can and Cannot Do: A Beginner-Friendly Explanation

What CSS Can and Cannot Do: A Beginner-Friendly Explanation When you start learning web development, one of the first questions you’ll face is: “What exactly can CSS do?” “And what can’t it do?” This article explains the true role of CSS by clearly separating its “can do” and “cannot do” capabilities in a way beginners can easily understand. What CSS Can Do (✓) CSS is all about visual styling. Colors, layout, animation—anything related to appearance is its specialty. 1. Change colors, text, and backgrounds Set text color (color) Add background colors or images Adjust fonts and sizes 2. Control spacing and layout Adjust margins and padding Create layouts using flexbox or grid Align content left, center, or right 3. Create animations and visual effects Fade-in effects (opacity) Rotation and scaling (transform) Complex animations with @keyframes 4. Apply reusable design patterns One of the biggest strengths of CSS is that you can apply the same design to many elements using classes. What CSS Cannot Do (✕) On the other hand, CSS cannot handle logic, data, or interaction. In simple terms: CSS controls appearance, nothing more. 1. Save or store data Store user input (✕) Keep users logged in (✕) Saving or […]

The Complete History of iOS WebClip: How Home Screen Icons Evolved and Why the Shadow Cache Exists

The History of iOS WebClip｜How the Home Screen Icon Feature Evolved Over 15+ Years Today, adding a website to the iPhone home screen feels completely normal. But this feature—called WebClip—was not part of the original iPhone, nor was it designed the way it behaves today. Over time, WebClip evolved dramatically: from simple screenshot-based shortcuts to a complex system involving apple-touch-icon, manifest icons, PWA features, and the infamous Shadow Cache. This article explains: How WebClip was born How it evolved through each major iOS era Why the Shadow Cache exists today Why icons became so difficult to update No English article currently covers this history in depth— so this is the world’s most complete explanation. 2007: iPhone OS 1 — No WebClip Yet The very first iPhone (iPhone OS 1.0) did not have a way to add websites to the home screen. Users could only save bookmarks inside Safari. The concept of a “web icon” sitting beside app icons did not yet exist. 2008: iPhone OS 1.1.3 — WebClip Is Born Apple introduced Add to Home Screen in iPhone OS 1.1.3 (2008). This was the birth of WebClip. Its early characteristics were very simple: The icon was automatically generated from a […]

Why iPhone Home Screen Icons Don’t Update: The Hidden “Shadow Cache” in Safari Explained

Why iPhone Home Screen Icons Don’t Update: The Hidden “Shadow Cache” in Safari Explained “Why isn’t my new icon showing?” “I replaced the image, but the home screen still shows the old one…” If you’ve added a website to your iPhone’s home screen and the icon won’t update, you’ve run into one of Safari’s most confusing behaviors. The real cause is a little-known system inside iOS: Safari’s hidden “Shadow Cache.” In this guide, we’ll break down the entire mechanism— how iOS stores icons, why they don’t refresh, how to force updates, and how tools like OJapp avoid the problem entirely. The Short Answer: iOS Stores Icons in a Separate Hidden Cache When a user adds a website to their home screen (a Web Clip), iOS stores the icon in a dedicated cache separate from normal browser cache. This “shadow cache” has several unique characteristics: Clearing Safari cache does NOT remove it Reloading the webpage does not trigger an update If the icon URL is the same, the old image will always be used The cache can stay for days or longer In other words: once iOS saves an icon, it treats it like an app icon — stable and persistent. […]

HTML, CSS, and JavaScript Explained Like You’re 10 Years Old

HTML, CSS, and JavaScript Explained Like You’re 10 Years Old When you make a web page, you use three main tools: HTML, CSS, and JavaScript. But many beginners wonder: “What’s the difference between them?” To make it super easy, let’s explain them using a simple example: building a house. HTML is the “frame of the house” HTML creates the structure and content of a web page. In a house, HTML is like: The walls and pillars The rooms The doors and windows Where everything is placed Without HTML, nothing appears on the page — it’s just an empty lot. CSS is the “design and decoration” CSS controls the look and style of everything HTML built. In a house, CSS is like: Painting the walls Choosing the flooring Decorating rooms Making the windows look stylish CSS makes a website pretty, readable, and organized. JavaScript is the “electricity and machines” JavaScript makes things move and react. In a house, JavaScript is like: Lights turning on when you flip a switch Automatic doors opening Clocks that keep ticking Machines that do things when you press a button JavaScript controls all the “when you click this, something happens” actions. Summary: All three complete the […]

How to Publish a Website for Free: A Beginner’s Guide to GitHub Pages

How to Publish a Website for Free: A Beginner’s Guide to GitHub Pages “ I made a web page… but how do I show it to other people? ” “ I want a link I can open on my phone! ” If that sounds like you, the easiest solution is GitHub Pages. With no server contract, no domain purchase, and no fees, you can publish your website to the world for completely free. What is GitHub Pages? GitHub Pages is a free hosting service for static websites. Cost: Completely free No ads Works by simply uploading an index.html file Generates a public URL you can open on any device It’s the perfect tool for beginners learning web development. Publishing Your Website Takes Only 4 Steps ① Create a GitHub Account It’s free and requires only an email address. Visit https://github.com Create an account (Sign Up) ② Create a Repository (a folder for your site) Log in to GitHub Click the “＋” icon → New repository Name your repository (example: myweb) Select Public Click Create repository This becomes the place where your web files will live. ③ Upload Your index.html Open your new repository Click Add file → Upload files Drag […]

How to View Your Web Page on Your Phone — The Easiest Ways for Beginners

How to View Your Web Page on Your Phone — The Easiest Ways for Beginners After creating your first web page, the next big question is: “How do I see this on my phone?” The good news is: You don’t need a server, a USB cable, or any technical setup. Here are the three easiest free methods for beginners. Method 1: Use a Free Hosting Service (Recommended) The easiest and most reliable way is to upload your page to a free hosting service. This gives you a URL you can open on any phone. Popular free options: GitHub Pages (free, no ads) Netlify (free) Once uploaded, you get a public link that you can open on your phone or share with others. Simple GitHub Pages Steps Create a GitHub account Create a repository Upload your index.html Enable GitHub Pages in “Settings → Pages” → Instantly accessible from your phone via URL. Method 2: Preview on Your Phone via Local Wi-Fi If your PC and phone are on the same Wi-Fi network, you can view your page locally using a simple “local server.” The most beginner-friendly tool is Live Server in VSCode. How to Use Live Server Open VSCode Install the […]

How to Create a Simple Web Page for Free — A Beginner-Friendly 10-Minute Guide

How to Create a Simple Web Page for Free — A Beginner-Friendly 10-Minute Guide Most beginners think they need special software or coding knowledge to make a web page. But the truth is you can create a working web page for free using only your computer and a browser. No installations, no tools, no prior experience required. This guide shows the simplest possible method to create your first web page in just 10 minutes. What You Need Only two things: A computer (Windows or Mac) A browser (Chrome, Safari, etc.) That’s all. You don’t need VSCode or any development tools yet. 1. Create a Folder Named “mypage” Your folder will act as the “home” for your first web page. Right-click on your desktop Select “New Folder” → name it mypage 2. Create a File Named “index.html” Open the mypage folder Right-click → “New” → “Text Document” Rename it to index.html In the world of websites, index.html is the default entry page. 3. Open index.html and Paste This Code Right-click the file → “Open with” → Notepad (or any simple editor), and replace everything with the code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First […]