Note
Hi, everyone. I've been putting in a lot of work on this over the last few weeks months (sob) and i'm currently underemployed! If you'd like to hire me to do CMS-based work (i focus on Craft and ExpressionEngine but i do some WordPress work as well), please reach out! Alternatively, if you'd like to chip in toward bills & groceries, that's a big help right now!
| const getAllFocusableElements = (parent) => Array.from(parent.querySelectorAll('*')).filter(elm => elm.tabIndex > -1).sort((a,b) => a.tabIndex > b.tabIndex ? 1 : a.tabIndex < b.tabIndex ? -1 : 0); |
| # | |
| # This script converts margins, padding, and borders to logical values, | |
| # allowing RTL and vertical languages to show correctly. | |
| # Supports both *.css and *.scss files. | |
| # | |
| # Some renames are not yet implemented widely, and may require CSS plugin | |
| # https://github.com/csstools/postcss-logical | |
| # They have been commented out for now, but feel free to try them out. | |
| # | |
| # Full spec: https://drafts.csswg.org/css-logical/ |
| function observeElement(element) { | |
| const config = { attributes: true, childList: true, subtree: true }; | |
| const callback = function(mutationsList, observer) { | |
| for(let mutation of mutationsList) { | |
| if (mutation.type === 'childList') { | |
| const additions = mutation.addedNodes; | |
| const removals = mutation.removedNodes; | |
| if (removals.length) { | |
| console.log('Child nodes were removed:', ...removals); | |
| } |
After you've downloaded and installed WAMP Server, follow these steps:
Add C:\wamp64\bin\apache\apache2.4.27\bin directory to the PATH so you can access openssl command from the command prompt (WAMP comes with its own version of OpenSSL already integrated, so you don't need to install it. You'll find it in this directory.).
IMPORTANT: Please note that the path of your installation depends on your version of Apache! DO NOT copy and paste the paths presented in this gist as they will not match with yours!
Navigate to your user directory (C:\Users\%YOUR_USERNAME%\), create a new folder (.openssl), navigate to it with Powershell and run these commands:
openssl genrsa -aes256 -out private.key 2048
openssl rsa -in private.key -out private.key
You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.
I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.
This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.
Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa
| :root { | |
| --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
| --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); | |
| --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); | |
| --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); | |
| --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); | |
| --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); |
| function getLocation() { | |
| if (!navigator.geolocation) { | |
| alert("Sorry, but Geolocation is not supported by this browser."); | |
| } | |
| navigator.geolocation.getCurrentPosition(showPosition); | |
| } | |
| function showPosition(position) { | |
| var lat = position.coords.latitude; | |
| var long = position.coords.longitude; |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent