JavaScript and Web Development Articles
Unlike the name implies, Markdown is a markup language that can be used to create rich text output while authoring content in a plain text editor without formatting. Like HTML , Markdown includes a base syntax, however there is no formal specification for Markdown, like there is for HTML. As a result there are many Markdown variants , with each providing their own syntax variations and…
GraphQL is a query language specification that is used for Web APIs to permit the use of API clients to create data queries. The queries can be specific to the client, and they are sent to a GraphQL server that is able to return exactly the data that was requested. A single GraphQL POST request can be used to obtain all of the data that is needed for the current context. This is in contrast to…
GitHub Actions are included with Github Repositories and can be used to automate project workflows like building and deploying code. In this example we will see how to automate the build process and deployment of a site built with the Jamstack . We can use GitHub Actions to checkout a specific branch in a git repository, and then execute a build process that is common to Jamstack sites that are…
XML is a textual data format that is standardized, and as a result is widely used throughout a variety of systems. Two common usages are for website sitemaps and RSS feeds, both of which can use XML as the document format. Other usages of XML can include RESTful HTTP API endpoints , both receiving and returning XML requests and responses. This post will include the steps to convert JSON to XML…
The Service Worker API is available to use in all major browsers. Service Workers are JavaScript files that contain event driven worker code, that do not run on the main thread of the browser. They are used as a proxy for network requests, more specifically, service workers can be used to intercept requests and modify them as well as cache responses. In addition to caching responses a service…
An xml sitemap informs search engines with information regarding the structure of a website and which pages should be available to be indexed in search results. The xml sitemap file includes the url location for all the pages included and the date the page was last modified. If you are building a blog website it is especially important to include a sitemap file containing information about all the…
This post is an updated version of a previous post containing instructions on how to compile sass with the node-sass npm package , which is now deprecated. The SASS team now recommends using Dart Sass in favor of LibSass for new development projects. This means that the sass npm package should be used instead of the node-sass npm package, which is built on top of LibSass, to compile sass with…
GitHub provides webhooks that can send a POST request when a predetermined event is triggered. There are many different GitHub event types , and a common event to integrate into workflows is the PullRequestEvent . Any time a pull request has event activity of the following action types: opened closed reopened assigned unassigned review_requested review_requested_removed labeled unlabeled…
The uuid, or universally unique identifier, npm package is a secure way to generate cryptographically strong unique identifiers with Node.js that doesn't require a large amount of code. The uuid npm package has zero dependencies, and over thirty thousand packages depend on it, making it a safe choice when an id is needed that is guaranteed to be unique. It supports commonJS modules and also…
As of Node.js version 13.2.0 ECMAScript modules are now supported by default without adding an experimental flag. Although, using ES Modules without making the required configuration changes will result in the error "SyntaxError: Cannot use import statement outside a module". This is because Node.js, by default, is expecting the CommonJS module format. Using TypeScript in combination with ES…
Before developing with Azure Serverless Functions and Azure Table storage locally, there are some tools required to emulate Azure Storage and provide a run-time environment for the Node.js serverless functions. Please make sure the prerequisites are set up before running the example code that follows. Setup Azure Storage Emulator In order to save on development costs, instead of creating cloud…
Running too many asynchronous processes simultaneously with Node.js can cause issues that will lead to the process crashing. An example of this is when reading files inside of an asynchronous callback function that is being executed using the map() method on an array. To prevent a scenario where the node.js process might crash with an EMFILE error , it can be helpful to split an array into smaller…
Let's say you are building a site with the Jamstack and you want to use node.js to generate the rss feed for your site . In doing so you realize that your post content contains relative links when checking with the validator provided by the W3C Feed validation service , and it indicates elements should not contain relative URL references . In order to make sure the RSS feed is valid, and only…
To mitigate Cross-site request forgery attacks, websites that submit forms can include a nonce , to make sure that the request is being sent from the origin that is expected. This way, a post request containing the nonce, or public token, can be verified with a secret, and stored on the server before mutating any data. Using a CSRF token doesn't guarantee that a website will be safe from malicious…
EJS is a templating language that uses JavaScript to generate HTML. This post will illustrate how to use Node.js with TypeScript to render an EJS file into HTML markup. Please make sure you have Node.js and npm installed first. If you are unfamiliar with Typescript please read my post describing how to compile TypeScript with npm . EJS Begin by creating a new EJS file named index.ejs. This file…
The JavaScript Fetch API provides a utility to make AJAX requests. This post will show how ES6 syntax can be used with Typescript and the Fetch API to submit an HTML form. Using the Fetch API in conjunction with other Web API's a post request can be sent, containing FormData Objects in the body of the request. HTML Form First we need to create an html file, let's call it index.html, with a form…
Jamstack blogs, or otherwise static sites that are built with prerendered markup can load quickly and cost less to run, however one potential drawback of a serverless approach for a blog can be the lack of a content management system. Without using a database or a headless content management system, blogs built with the Jamstack are most likely storing their content in a git repository, and this…
UPDATE : The steps in this post show how to compile sass using the node-sass npm package, which is built on top of LibSass. LibSass is now deprecated in favor of Dart Sass , the new primary implementation of SASS. You will want to reference my other post that shows how to use the Dart Sass JavaScript implementation with npm for the most current way of using npm to compile SASS. There are many…
Npm package.json scripts can be used to run various commands. Here, we will learn how to run the TypeScript compiler to generate JavaScript output from TypeScript source files. Before we start, make sure you have Node.js and npm installed. TypeScript In a new folder, create a file named script.ts. Then, add some sample code so we can test whether the JavaScript output is being generated properly.…
The html-minifier npm package provides a command line interface that makes it possible to minify HTML. This can be useful when working with a site built with the Jamstack . One example of this scenario could be a site that uses a static site generator to output prerendered HTML files at build time. In this case, and especially when serving lots of content, minifying the HTML output can result in…
If you're building a blog with the Jamstack your content might be stored in a git repository. This can help to reduce overhead, since a database is no longer required, but presents other interesting challenges like displaying post metadata. This may include the date the post was created or the date it was last updated, information that can be helpful to readers and enhances the display of the post…
There are a variety of ways to send an email with Node.js. One way is to utilize the email service offered by SendGrid . The email API has a free plan , which does have a usage limit, specified on their website, but it should be enough for example purposes. To use the SendGrid Mail Service npm package , an API key is required which can be obtained by creating a new SendGrid account . SendGrid API…
An RSS feed is a convenient way to allow access to syndicated content in a standardized format that is easily shareable and discoverable. Recently I've been using feedly to stay up to date with a variety of web development blogs. This got me interested in how to add an rss feed to a static website built with the Jamstack , specifically how to generate an rss feed from blog post data with node.js…