In a recent project, I worked with Markdown files that contained metadata at the top for blog posts. I needed to parse the Markdown with JavaScript and make a set of key/value pairs.
As you can see, the metadata is encapsulated in – – – with the metadata contained within.
// Function to parse metadata from a markdown file const parseMarkdownMetadata = markdown => { // Regular expression to match metadata at the beginning of the file const metadataRegex = /^---([\\s\\S]\*?)---/; const metadataMatch = markdown.match(metadataRegex); // If there is no metadata, return an empty object if (!metadataMatch) { return {}; } // Split the metadata into lines const metadataLines = metadataMatch[1].split("\\n"); // Use reduce to accumulate the metadata as an object const metadata = metadataLines.reduce((acc, line) => { // Split the line into key-value pairs const [key, value] = line.split(":").map(part => part.trim()); // If the line is not empty add the key-value pair to the metadata object if(key) acc[key] = value; return acc; }, {}); // Return the metadata object return metadata; }; You can call this function and pass in the markdown file content. It will return an object with the metadata.
There are many different ways to solve this use case. You want to wait for an element to exist on the page and run a callback function when it does. It seems simple enough, but what’s the easiest way?
By using an async function and a while loop, we can wrap setTimeout in a promise, then await it, and then resolve the promise when the timeout completes. As you can see, it will continue the loop until we reach the timeout passed into the function (or the element is found).
At work, I’ve been migrating us over from Cypress to Playwright for end-to-end tests. In that time, we’ve enabled two-factor authentication functionality in our application for security.
These TOTP tokens are great for security but provide an additional challenge for testing.
While Playwright supports saving state, our application tokens have a short expiry. I needed to log in to our application, enter a one-time password, and test.
The logging-in part was easy. We created development environment credentials. But because 2fa is enabled in all environments, we still had the issue of needing a TOTP token.
Despite doing this front-end thing for over a decade, I still encounter new problems thanks to the ever-evolving web specifications. One of the newer specifications is Web Components.
Now, my situation was I wanted to see Bootstrap 5 Javascript components. Because of the closed-wall nature of Shadow DOM means, the global approach Bootstrap takes by default will not work for components.
Fortunately, it is possible to use Bootstrap components with Shadow DOM, albeit programmatically.
Say what you will, but since its introduction in 2009, Node.js has been the undisputed king of server-side Javascript. Created by Ryan Dahl, Node.js had virtually no competition for years.
Until recently, the only person to truly challenge Node.js was Ryan Dahl with his runtime Deno that improved upon some of the flaws that Ryan saw in Node.js which that were systematic and difficult to fix.
Well, there is a new competitor NOT written by Ryan this time called Bun. Who said 2022 had no surprises left?
After raising a $4,900,000 seed investment back in March 2021, Deno has just announced quite a substantial round of Series A investment of $21 million. The funding round led by Sequoia brings its total investment to $26 million to date.
Deno will mainly use the cash to build their commercial offering Deno Deploy.
Admittedly, I shamefully wrote Deno Deploy off as a Deno-specific Heroku. Still, after the announcement, I looked deeper at Deno Deploy, and it’s so much more than that. While the name might sound like a continuous integration tool, it’s a Runtime As A Service (RaaS) platform allowing you to run scalable code.
While sorting an array of objects recently, I needed to sort by an identifier prefixed with two letters and ended with numbers. An example is “AQ110” — you might be tempted to reach for a library, but you can achieve this in Javascript with very little code.
Say hello to localCompare.
I had a list of values that looked like this:
AQ2 AQ110 AQ19 AQ190 AQ64 AQ5 The lettering didn’t matter so much, but the numbers did. By default, just using a plain old .sort() will not be enough. If you were to use .sort() by itself, it would get tripped up on high numbers starting with the same value (eg. 10, 110, 11 and so on).
Languages such as PHP have methods for de-duplicating arrays, but Javascript strangely does not. In PHP, you can write. array_uniqueAnd this function will remove duplicates.
There are so many solutions online you will find for this problem. They mostly centre around using filter and index checks, others recommend libraries like Lodash.
Forget installing libraries or writing convoluted functional programming inspired solutions. You can do this:
const arr = [1, 2, 3, 9, 1, 6, 4, 3, 9, 2, 4, 6]; const unique = [...new Set(arr)]; If you were to console log the contents of unique using the spread operator, we convert it back to a unique array. You would get an array containing: [1, 2, 3, 9, 6, 4] — the Set object is creating for storing unique collections, not only arrays but other types of data too.
Dates in Javascript have always been a PITA. It is one of the reasons that libraries like MomentJS reigned supreme for so long. Things are complicated, especially if you’re dealing with different timezones. Fortunately, working with simple DATETIME values has never really been a problem.
What prompted this post was that I am working with WordPress a lot at the moment, and all dates in WordPress are MySQL DATETIME formatted dates. Say you have a DATETIME value that looks like this: 2021-10-05 00:00:00 — you can use the Javascript Date object on this because it’s a valid date value.
There is a Javascript library for almost anything. But sometimes, it’s good to code your solutions to specific problems where the resulting code will be lighter, and you will feel more rewarded as a result.
When it comes to infinite scrolling in Javascript, many examples, you will find online relate to scrolling the main window (which is a common thing). But what if you have an overflowing DIV that you want to add infinite scrolling on? The logic is the same.