--- title: "John Au-Yeung (@john-auyeung) | Hashnode" description: "Front End Developer. Read the latest articles by John Au-Yeung on Hashnode." url: "https://hashnode.com/@john-auyeung" --- @john-auyeung # John Au-Yeung @john-auyeung · Joined March 2021 Front End Developer ### [How to Retrieve the Position of an HTML Element Relative to the Browser Window?](https://jauyeung.hashnode.dev/how-to-retrieve-the-position-of-an-html-element-relative-to-the-browser-window?utm_source=hashnode&utm_medium=feed) Retrieving the position of an HTML element relative to the browser window is something that we’ve to sometimes in our JavaScript web app. In this article, we’ll look at ways to get the position of an HTML element relative to the browser window. The g... 3 min read · [jauyeung.hashnode.dev](https://jauyeung.hashnode.dev/how-to-retrieve-the-position-of-an-html-element-relative-to-the-browser-window?utm_source=hashnode&utm_medium=feed) [Mar 20, 2021](https://hashnode.com/posts/how-to-retrieve-the-position-of-an-html-element-relative-to-the-browser-window/60568bd85f8d51216972745d) ### [How to Add an Image Preview When an Image File is Selected in the File Input?](https://jauyeung.hashnode.dev/how-to-add-an-image-preview-when-an-image-file-is-selected-in-the-file-input?utm_source=hashnode&utm_medium=feed) Adding a preview for the selected image is something that we’ve to do sometimes in our JavaScript web app. In this article, we’ll look at how to add an image preview to show the image the user is selected. Add an Image Preview for a File Input To add... 4 min read · [jauyeung.hashnode.dev](https://jauyeung.hashnode.dev/how-to-add-an-image-preview-when-an-image-file-is-selected-in-the-file-input?utm_source=hashnode&utm_medium=feed) [Mar 20, 2021](https://hashnode.com/posts/how-to-add-an-image-preview-when-an-image-file-is-selected-in-the-file-input/60568bbc63a05a21443f2917) ### [How to Add a New Array Elements at the Beginning of an Array in JavaScript?](https://jauyeung.hashnode.dev/how-to-add-a-new-array-elements-at-the-beginning-of-an-array-in-javascript?utm_source=hashnode&utm_medium=feed) Adding a new array element to the beginning of an array is something that we’ve to sometimes in our JavaScript apps. In this article, we’ll look at how to add new array elements at the beginning of an array in JavaScript. Array.prototype.concat One w... 4 min read · [jauyeung.hashnode.dev](https://jauyeung.hashnode.dev/how-to-add-a-new-array-elements-at-the-beginning-of-an-array-in-javascript?utm_source=hashnode&utm_medium=feed) [Mar 20, 2021](https://hashnode.com/posts/how-to-add-a-new-array-elements-at-the-beginning-of-an-array-in-javascript/60568b9f5f8d512169727456) ### [TypeScript Advanced Types — Type Guards](https://jauyeung.hashnode.dev/typescript-advanced-types-type-guards?utm_source=hashnode&utm_medium=feed) TypeScript has many advanced type capabilities which make writing dynamically typed code easy. It also facilitates the adoption of existing JavaScript code since it lets us keep the dynamic capabilities of JavaScript while using the type-checking cap... 13 min read · [jauyeung.hashnode.dev](https://jauyeung.hashnode.dev/typescript-advanced-types-type-guards?utm_source=hashnode&utm_medium=feed) [Mar 20, 2021](https://hashnode.com/posts/typescript-advanced-types-type-guards/60568b6063a05a21443f2910) ### [Using Design Mode and execCommand to Fiddle with Web Pages](https://jauyeung.hashnode.dev/using-design-mode-and-execcommand-to-fiddle-with-web-pages?utm_source=hashnode&utm_medium=feed) To make fiddling with the design of webpages easy, modern browsers have a design mode built-in. We can toggle it on with the document.designMode property set to 'on' . Furthermore, we can send commands to change the page when it’s design mode with th... 11 min read · [jauyeung.hashnode.dev](https://jauyeung.hashnode.dev/using-design-mode-and-execcommand-to-fiddle-with-web-pages?utm_source=hashnode&utm_medium=feed) [Mar 20, 2021](https://hashnode.com/posts/using-design-mode-and-execcommand-to-fiddle-with-web-pages/60568b3b63a05a21443f290a)