HTML on Lin's Blog

Forcing a Hyperlink to Download a File in HTML

Wed, 26 Apr 2017 09:56:50 +0000

Modern browsers are smart. When a hyperlink points to a plain text file, a PDF, or a CSS file, the browser previews it instead of downloading it. But sometimes we want users to download the file directly instead of viewing it in the browser. For example, when I previously went to the jQuery official site to download jquery.js, it opened as a preview, and I had to right-click and choose “Save As.” But my goal was clear: I wanted to download the file, not view it!

Fixing HTML Anchor Content Hidden Behind a Menu

Mon, 20 Feb 2017 23:28:39 +0000

HTML anchors are very handy. When a page is long, an anchor lets visitors jump quickly to a specific section. This technique shows up in many technical documents and blogs. If you’ve seen a URL like https://coder.tw/?p=123#section1, that’s the HTML anchor feature at work. Although it’s convenient, it brings some problems. The most common one: there is a floating menu at the top of the page. When a visitor clicks an anchor link, the browser does scroll to the section, but part of the text ends up hidden behind the menu. I had always been annoyed by this, and today, while reading Facebook’s technical documentation, I found their solution, which is pretty good.

How to Prevent the Input onFocus Event From Firing After Page onFocus

Thu, 16 Feb 2017 11:27:59 +0000

Recently I was working on adding Google Analytics user event tracking code to a website. I attached the code to inputs using HTML event handlers, so that whenever a user clicks a specific field or button, a record is sent to Google Analytics. This works fine, but I noticed a problem. If a user clicks into an input field, switches to another page (another Chrome tab), and then switches back to my page (Page onFocus), the input’s onFocus event fires automatically!

Handling File Uploads on the Frontend With JS: Preview, Size, Dimensions, and Format

Thu, 09 Feb 2017 13:44:33 +0000

What I hate most when uploading a file is being told five minutes later that the file is too big or the dimensions are wrong! We usually leave upload validation to the backend, so a file has to be uploaded before we can check whether it meets the requirements. Images in particular also need their aspect ratio checked. If all of this is left entirely to the backend, the user experience can suffer. When I was researching profile picture uploads at NewTalk, I found that all of this can actually be handled on the frontend. With JS and HTML5 APIs, you can check the file’s format, size (20MB), and dimensions (100x100). You can even do previews and client-side image cropping and conversion!

JavaScript: Manipulating Browser History, Changing URLs, and the Back Button Event (Essential for SPAs)

Sat, 14 Jan 2017 12:59:02 +0000

Nowadays JavaScript is everywhere. Using JS to manipulate web pages, for things like Ajax, page switching, and pop-up windows, is more and more common. There are even JS frameworks such as React JS and Vue JS that help you develop Single Page Applications (SPAs). When you manipulate a web page with JS, the thing you fear most is URL changes and history. For example, if you switch pages with jQuery, the URL doesn’t change, because it’s a JS operation. And when the user clicks the browser’s Back button in the top left corner, they go straight to another page, because JS operations aren’t recorded in the history (in fact, they can’t be). To solve this series of problems, you can use history.pushState, history.replaceState, and the onpopstate event provided by HTML5.

Zen Coding: A Great Tool for Speedy Web Development, a Must-Have for Anyone Who Likes Hand-Writing Web Pages～

Mon, 22 Aug 2011 21:40:44 +0000

I think many people are like me: when building a web page, they don’t like dragging out the layout directly in DW, and instead prefer to open Notepad and write the HTML by hand～ The upside of this approach is that it sharpens your skills XD, but the downside is that development is a bit slow (actually, once you get used to working this way, you’re faster than you would be with DW… XD). Today I want to introduce Zen Coding to you — it can make you write web pages N times faster! You can write web pages directly using CSS-style syntax～

W3C Validation: Checking Whether Your Site's CSS Meets the Standards

Sun, 06 Sep 2009 13:36:56 +0000

About the W3C:

The W3C is an organization dedicated to standardizing the web. It is responsible for drafting all kinds of web-related specifications. For example, the CSS4 standard and XHTML were both created by the W3C. Why create these standards? The reason is simple. Web pages are displayed in different browsers. If every browser used different syntax, web designers would have a hard time. But getting all browser vendors to agree on one standard is difficult. I think the main reason is that they're all competing with each other. That's why the W3C was created: an impartial third party drafts the standards, and each browser vendor (such as IE, Opera, and Firefox) must follow these basic rules. Of course, browsers can add their own syntax if they want. Still, not every browser follows the W3C specifications. Big names like IE don't, which is why many web designers have a love-hate relationship with IE (love, because so many people use it; hate, because it doesn't play by the rules). Now that you have a basic understanding of the W3C, let me show you how to check whether a web page meets the standards.