In Vue.js, we can use v-for to render an Array as an HTML table or list nicely. But if we want to render an Object’s keys and values as a table, for example, I use JS Objects and an Array to store a lot of contact info, and each contact has different keys. I want to display the info for Contact 1 in a table. It seems v-for isn’t a good fit here? ...
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! ...
JavaScript has so many strange quirks! Today, while using parseFloat to convert a string into a number, I learned that if the input can’t be converted to a number, it returns NaN (Not a Number). So I wrote the following code to check for it: var score = parseFloat(prompt("Score:")); if(score === NaN) { console.log("Not a Number"); } else { console.log(score); } At first glance, this code seems perfectly reasonable, just like comparing undefined or null directly with equality. Who knew it would completely fail? ...
Many content sites have a mechanism that automatically appends the original article URL when text is copied, such as Mojing Lyrics and Zhihu. Some sites even ban users from copying text altogether. Achieving these features isn’t difficult; it only takes a few lines of simple JavaScript. But first you should think about whether your site really needs such a feature. When a regular visitor copies text and pastes it into Facebook, does that really harm your site? And if you truly want to stop visitors from copying text, these tricks only keep out the honest, not the determined. Are you really protecting your interests, or just making your site harder to use? ...
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! ...
To measure a function’s execution time in JavaScript, you can subtract the timestamp taken before the function runs from the timestamp taken after it finishes. Most people use new Date().getTime() to get a timestamp, but if your function runs in less than 1 millisecond, this won’t work, because the smallest unit of a timestamp is the millisecond. So I recommend the Window.Performance API. It gives you the number of milliseconds since the page started loading, with precision down to a thousandth of a millisecond. ...
In JavaScript, String.replace may behave differently than you expect. When you want to replace a string, you’ll find that replace only replaces the first occurrence. For example, “AAA”.replace(“A”, “B”) gives “BAA”, not the “BBB” you might expect. This is because the first argument of JS replace is actually a regular expression, not a string. If you pass in a string, only the first match is replaced, which leads to results you didn’t expect. ...
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. ...
Recently I came across a “round up” feature on Zeczec. For example, if a checkout total is NT$1359, pressing the round-up button changes it to NT$1400. It’s a fun feature, but when I actually tried to implement it, I found that rounding up isn’t easy. There are many non-technical concerns. Here I’ll record the problems I ran into while implementing it, the process I went through, and the final solution! ...
Most people know how to use JavaScript to record when a user enters a web page, but have you ever thought about how to tell when a user has “closed” it? Browsers today show multiple web pages as tabs, so it’s possible the user is actually looking at someone else’s page while yours just sits there. For example, YouTube often runs into this: a user leaves the page open to listen to music, but in fact they’re looking at Facebook… Today I’ll briefly note the JS page load and close events, as well as the focus (entering the page) and unfocus (leaving the page) events. With these events, you can record user behavior for analysis, and even do things like stop playing music when the user leaves the page. ...