Blog - Javascript

Posts about Javascript

Promise.withResolvers in JavaScript

Let me know if you've heard this one before. You have a function that is reading some sort of file (let's say a csv with a known format and no header line). You want to use streams so you can act on each line but you need to return a promise that resolves once the file has been fully read. Nine times out of ten, you've probably been wrapping the whole function up in a promise definition. I'd suspect something like the below code. // The data type we want from our csv type Child = { name: stri

Rogue Engine & JS Game Development

Those who have been following me for a while might know that while I'm no game developer, much like 90% of all other web devs, game development was my starting goal for getting into programming. Heck, I even went to a game development specialist school for my college education (Age 16-18 to avoid American confusion). Obviously, in hindsight, that wasn't the plan the world had for me... I had a brief foray back into that world when I spent the start of the pandemic working for a E-Sports Betting

Creating a Mailing List with Mailersend

I've long since wanted to add a mailing list to the blog as a way that people could directly show interest in what was being posted. I did however have the big provision that I didn't want to manually be creating emails to send out. I wanted to automate it. Off the back of my recent release process improvement I realised that I could finally start to build this feature. I started by doing a little bit of research on which mailing list system I wanted to use. A few years back, I'd used Sendgrid

Building a Modern Release Process for Blog Posts

One of the earliest articles I ever wrote was about the posting process that my blog posts followed. It used a local typescript script that accessed the mongoDB database and added/updated a blog post. It was simple and good enough for the features that the site had at that point. I've been using and expanding that posting process for a while now, but I find myself at a crossroads... OG Images are being generated and stored the first time they are accessed (which takes a while), My local machine

I made a daily web game

It seems like simple daily web games, à la Wordle or Framed, have been quite popular over the pandemic. One could argue that interest began to wane as everything opened up again, but I still know many people who consistently log in to challenge themselves each day. My partner especially, loves these games - playing about 3 different ones without fail. I had an idea whilst this craze was going on for a similar daily game but one, unlike Wordle or Framed, which required you to log on the next day

Switching to Webmention Comments

A while back I introduced likes to the blog through the use of Webmentions and Bridgy. I even went so far as to release my own library for handing Webmentions which I'm pleased to say I've been steadily working on ever since. On the other hand, this blog has been using Utterances to handle comments practically since I started it. Despite how happy I've been with Utterances, I've also been very aware of it's limitations as a comment platform. Not everyone has a GitHub account, and while this blog

Improving Twitter Embeds using the Twitter API

For a long time now, I've been frustrated by how slow the official twitter embed is. Any page where I've embedded a tweet, becomes noticeably slower. The warnings on lighthouse are always the same - "Reduce the impact of third-party code". When broken down further, you can see that you spend on average 730ms exclusively on twitter javascript files. This is frankly unusable. However, there is a solution, albeit one that requires some effort. We can remove all of this javascript if we instead fet

Piping Javascript

Javascript has had arrow functions (() => true) for a while now. Introduced as part of ES6 (The 2015 edition of the ECMAScript spec), They allow developers to create easy anonymous functions that use their parent's scoped this value. I'd argue that it is one of the most important changes ever made to Javascript in the realm of code readability (followed closely by promises for helping to solve Callback Hell), However, there is currently a stage 2 proposal specification that I believe has the pot

Web Mentions

One of my favourite features of hosted blogging platforms, such as Medium, is the simple feedback systems they have in place. Medium posts display a number of claps and comments. Each user can give a post up-to 20 claps based on how much they like a post. This means that, at a glance, you have information that can tell you how valuable the content of a post is considered. Sites like Reddit and Hacker News use an upvote/downvote system for a similar purpose and most social media sites have some f

Stop The Screen Going To Sleep With JavaScript

We've all been there. Cooking a complex recipe where each step takes a good couple of minutes. Our hands covered in some type of sauce made of who knows how many ingredients. We go to check the next step on our phone only to see that it's gone to sleep due to inactivity. We know that even if we quickly wash our hands, there is inevitably going to be some level of greasy trail left on our phone screen as we are forced to unlock it... However, thanks to a web API released in chrome 85, this doesn

Native OS Share Options via Web

Don't you just love the native share UI on Android and IOS? Well, did you know that you can provide that exact experience to users of your website using the navigator.share web API? You can do so in just a couple of minutes and a few lines of JavaScript! You should be aware that at the time of writing, I'm not aware of any desktop browsers that support this feature, although it is supported by all major mobile web browsers. Because you are accessing a native OS function, there are also a few se

OG Images with Cloud Functions

If you follow me on social media, you're probably aware of the social image that shows up for any articles I share from this site. It's a giant image of my face. Now I don't know about you but I don't think this is a great image for getting engagement. I wouldn't click it... [tweet 1530986495850446852] This is done by setting a page's OG (Open Graph) Image in the html head of your page. The Open Graph protocol allows you to turn any web page into rich objects for social media sites. In the exa

The Strange World of NPM Site Alternatives

Like many web developers, I work day to day within the javascript ecosystem. For those who aren't aware, NPM is the primary package manager for javascript developers. While in the early days, it was primarily for NodeJS and backend use (with Bower acting as the frontend equivalent), it is now used consistently across the stack. I use NPM at least 100 times a day; Not just for installing and managing packages but for managing scripts, git hooks and test suites. npm run dev, npm run test and npm r

Chrome Page Transitions in Modern Frontend Frameworks

With Google IO a few days ago, all sorts of new and interesting things got announced. One thing that really struck my imagination was the new Google page transitions functionality for web. I wanted to take a look at the new API and see how difficult it would be to implement in a site like mine. The Google team posted a video explaining the new API, as well as a demo and github repo showing us how it works so I have a nice jumping off point, but to put it simply, the Page Transition API allows d

Blog Post Deployment

So I did a little more work on polishing the blog today. It now has author filtering, available from any post by a given author. I also put in some pagination. Obviously the pagination isn't visible just yet but I wanted to get it working before I needed it. The majority of my work was actually around releasing. See, the first blog post was actually added manually to the MongoDB database... db.getCollection("blog").insert({}) For those who don't know, MongoDB is a BSON NoSQL database. This me