おじゃち

English Articles

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 […]

English Articles

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 […]

English Articles

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 […]

English Articles

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. […]

English Articles

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 […]

English Articles

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 […]

English Articles

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 […]

English Articles

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 […]

English Articles

The Truth Behind Paid Apps: Many Are Actually Just Web Pages Inside an App

The Truth Behind Paid Apps: Many Are Actually Just Web Pages Inside an App Most people assume that mobile apps are built with complex programming languages and advanced frameworks. But the reality is that a large number of paid apps are simply Web pages wrapped inside an app shell. In other words, many apps in the App Store and Google Play are made with ordinary HTML, CSS, and JavaScript—displayed inside a WebView. Why Are So Many Apps “Web on the Inside”? Mobile apps can use a component called a WebView, which is basically a mini-browser inside the app. When developers use WebView, the app behaves like this: The entire UI is just a Web page Buttons and interactions are done with JavaScript Saving data relies on Web mechanisms (localStorage, APIs, etc.) So even though the app icon looks official, the inside is often just a website. Examples of Apps Commonly Built with WebView Surprisingly, these categories are often Web-based: Fortune-telling / horoscope apps Note-taking or journal apps Simple tool apps (counters, calculators, timers) Content viewer apps (blogs, videos, checklists) Reference databases or info apps All of these can run perfectly well with HTML, CSS, and JavaScript—no native code required. So […]

English Articles

Browser Cache Explained: Why Updates Don’t Show and How Strong/Weak Caches Work

Browser Cache Explained: Why Updates Don’t Show and How Strong/Weak Caches Work Developers often struggle with a common issue: “I updated the site, but the old version keeps showing.” In nearly all cases, the cause is the browser’s caching system. This article explains strong cache, weak cache, ETag, and Last-Modified in a practical way, and covers why updates don’t appear and how to reliably fix cache-related issues. What Is a Browser Cache? A browser cache stores copies of website data (HTML, CSS, JS, images) to speed up loading and reduce data usage. Major benefits include: Faster page load times Reduced server requests Lower data usage But the same mechanism often causes the infamous problem: changes don’t update because the browser is still using old files. Two Types of Browser Cache: Strong Cache and Weak Cache Browser caching is not one mechanism — it has two levels. ① Strong Cache (No server request until it expires) With strong cache, the browser does not contact the server at all. It uses stored files directly, making this the #1 cause of “updates not showing.” Triggered by headers like: Cache-Control: max-age=◯◯ Expires: ◯◯ If max-age=31536000 (1 year) is set, CSS or JS may stay […]