Add 2 new articles

blog_posts/js-element-from-point.md

@@ -0,0 +1,24 @@
+---
+title: "Tip: Element at a specific point on the page"
+shortTitle: Element at specific coordinates
+type: tip
+tags: javascript,browser
+expertise: intermediate
+author: chalarangelo
+cover: blog_images/armchair-in-yellow.jpg
+excerpt: Using `Document.elementFromPoint()` to easily get the element at a specific point on the page.
+firstSeen: 2022-12-18T05:00:00-04:00
+---
+
+
+Figuring out where an element is located on the page with JavaScript can be tricky. Such needs often arise when working with pointer events or other forms of user input. As expected, such a common problem has many different viable solutions using well-established web APIs.
+
+As I recently discovered, `Document.elementFromPoint()` provides a pretty interesting and straightforward solution. It allows you to get the element at a specific point on the page and it also works quite well with `iframe`s, too. Additionally, `Document.elementsFromPoint()` provides similar functionality, but returns an array of all the elements at a specific point on the page, in order of their z-index.
+
+```js
+// Returns the topmost element at the speicifed coordinates
+const element = document.elementFromPoint(x, y);
+
+// Returns an array of all the elements at the specified coordinates
+const elements = document.elementsFromPoint(x, y);
+```

blog_posts/js-window-location-cheatsheet.md

@@ -0,0 +1,63 @@
+---
+title: Window.location Cheat Sheet
+type: cheatsheet
+tags: javascript,browser
+expertise: beginner
+author: chalarangelo
+cover: blog_images/yellow-sofa.jpg
+excerpt: A quick reference for the `window.location` object.
+firstSeen: 2022-12-21T05:00:00-04:00
+---
+
+The `window.location` object is particularly useful when working with a page's URL information. Let's take a look at an example of a URL and what each property of the `window.location` object represents.
+
+```js
+const url = 'https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search';
+```
+
+Provide the above URL, here's a quick reference for the properties `window.location` object:
+
+### window.location.protocol
+
+- The protocol schema of the URL (usually `http:` or `https:`)
+- Sample value: `https:`
+
+### window.location.hostname
+
+- The domain name of the URL
+- Sample value: `dev.30secondsofcode.org`
+
+### window.location.port
+
+- The port number of the URL
+- Sample value: `8000`
+
+### window.location.host
+
+- The domain name and port number of the URL
+- Sample value: `dev.30secondsofcode.org:8000`
+
+### window.location.origin
+
+- The protocol schema, domain name and port number of the URL
+- Sample value: `https://dev.30secondsofcode.org:8000`
+
+### window.location.pathname
+
+- The path of the URL, including the leading slash
+- Sample value: `/c/js`
+
+### window.location.search
+
+- The query string of the URL, including the leading question mark
+- Sample value: `?page=2&sort=asc`
+
+### window.location.hash
+
+- The fragment identifier of the URL, including the leading hash
+- Sample value: `#search`
+
+### window.location.href
+
+- The full URL, including the protocol schema, domain name, port number, path, query string and fragment identifier
+- Sample value: `https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search`