Deliver Operational Insights to Atlassian Opsgenie using DevOps Guru

As organizations continue to grow and scale their applications, the need for teams to be able to quickly and autonomously detect anomalous operational behaviors becomes increasingly important. Amazon DevOps Guru offers a fully managed AIOps service that enables you to improve application availability and resolve operational issues quickly. DevOps Guru helps ease this process by leveraging machine learning (ML) powered recommendations to detect operational insights, identify the exhaustion of resources, and provide suggestions to remediate issues. Many organizations running business critical applications use different tools to be notified about anomalous events in real-time for the remediation of critical issues. Atlassian is a modern team collaboration and productivity software suite that helps teams organize, discuss, and complete shared work. You can deliver these insights in near-real time to DevOps teams by integrating DevOps Guru with Atlassian Opsgenie. Opsgenie is a modern incident management platform that receives alerts from your monitoring systems and custom applications and categorizes each alert based on importance and timing.

This blog post walks you through how to integrate Amazon DevOps Guru with Atlassian Opsgenie to
receive notifications for new operational insights detected by DevOps Guru with more flexibility and customization using Amazon EventBridge and AWS Lambda. The Lambda function will be used to demonstrate how to customize insights sent to Opsgenie.

Solution overview

Figure 1: Amazon EventBridge Integration with Opsgenie using AWS Lambda

Amazon DevOps Guru directly integrates with Amazon EventBridge to notify you of events relating to generated insights and updates to insights. To begin routing these notifications to Opsgenie, you can configure routing rules to determine where to send notifications. As outlined below, you can also use pre-defined DevOps Guru patterns to only send notifications or trigger actions that match that pattern. You can select any of the following pre-defined patterns to filter events to trigger actions in a supported AWS resource. Here are the following predefined patterns supported by DevOps Guru:

DevOps Guru New Insight Open
DevOps Guru New Anomaly Association
DevOps Guru Insight Severity Upgraded
DevOps Guru New Recommendation Created
DevOps Guru Insight Closed

By default, the patterns referenced above are enabled so we will leave all patterns operational in this implementation.  However, you do have flexibility to change which of these patterns to choose to send to Opsgenie. When EventBridge receives an event, the EventBridge rule matches incoming events and sends it to a target, such as AWS Lambda, to process and send the insight to Opsgenie.

Prerequisites

The following prerequisites are required for this walkthrough:

An AWS Account

An Opsgenie Account

Maven
AWS Command Line Interface (CLI)
AWS Serverless Application Model (SAM) CLI

Create a team and add members within your Opsgenie Account

AWS Cloud9 is recommended to create an environment to get access to the AWS Serverless Application Model (SAM) CLI or AWS Command Line Interface (CLI) from a bash terminal.

Push Insights using Amazon EventBridge & AWS Lambda

In this tutorial, you will perform the following steps:

Create an Opsgenie integration
Launch the SAM template to deploy the solution
Test the solution

Create an Opsgenie integration

In this step, you will navigate to Opsgenie to create the integration with DevOps Guru and to obtain the API key and team name within your account. These parameters will be used as inputs in a later section of this blog.

Navigate to Teams, and take note of the team name you have as shown below, as you will need this parameter in a later section.

Figure 2: Opsgenie team names

Click on the team to proceed and navigate to Integrations on the left-hand pane. Click on Add Integration and select the Amazon DevOps Guru option.

Figure 3: Integration option for DevOps Guru

Now, scroll down and take note of the API Key for this integration and copy it to your notes as it will be needed in a later section. Click Save Integration at the bottom of the page to proceed.

­­­

Figure 4: API Key for DevOps Guru Integration

Now, the Opsgenie integration has been created and we’ve obtained the API key and team name. The email of any team member will be used in the next section as well.

Review & launch the AWS SAM template to deploy the solution

In this step, you will review & launch the SAM template. The template will deploy an AWS Lambda function that is triggered by an Amazon EventBridge rule when Amazon DevOps Guru generates a new event. The Lambda function will retrieve the parameters obtained from the deployment and pushes the events to Opsgenie via an API.

Reviewing the template

Below is the SAM template that will be deployed in the next step. This template launches a few key components specified earlier in the blog. The Transform section of the template allows us takes an entire template written in the AWS Serverless Application Model (AWS SAM) syntax and transforms and expands it into a compliant CloudFormation template. Under the Resources section this solution will deploy an AWS Lamba function using the Java runtime as well as an Amazon EventBridge Rule/Pattern. Another key aspect of the template are the Parameters. As shown below, the ApiKey, Email, and TeamName are parameters we will use for this CloudFormation template which will then be used as environment variables for our Lambda function to pass to OpsGenie.

Figure 5: Review of SAM Template

Launching the Template

Navigate to the directory of choice within a terminal and clone the GitHub repository with the following command:

Change directories with the command below to navigate to the directory of the SAM template.

cd amazon-devops-guru-connector-opsgenie/OpsGenieServerlessTemplate

From the CLI, use the AWS SAM to build and process your AWS SAM template file, application code, and any applicable language-specific files and dependencies.

sam build

From the CLI, use the AWS SAM to deploy the AWS resources for the pattern as specified in the template.yml file.

sam deploy –guided

You will now be prompted to enter the following information below. Use the information obtained from the previous section to enter the Parameter ApiKey, Parameter Email, and Parameter TeamName fields.

 Stack Name
AWS Region
Parameter ApiKey
Parameter Email
Parameter TeamName
Allow SAM CLI IAM Role Creation

Test the solution

Follow this blog to enable DevOps Guru and generate an operational insight.
When DevOps Guru detects a new insight, it will generate an event in EventBridge. EventBridge then triggers Lambda and sends the event to Opsgenie as shown below.

Figure 6: Event Published to Opsgenie with details such as the source, alert type, insight type, and a URL to the insight in the AWS console.enecccdgruicnuelinbbbigebgtfcgdjknrjnjfglclt

Cleaning up

To avoid incurring future charges, delete the resources.

Delete resources deployed from this blog.
From the command line, use AWS SAM to delete the serverless application along with its dependencies.

sam delete

Customizing Insights published using Amazon EventBridge & AWS Lambda

The foundation of the DevOps Guru and Opsgenie integration is based on Amazon EventBridge and AWS Lambda which allows you the flexibility to implement several customizations. An example of this would be the ability to generate an Opsgenie alert when a DevOps Guru insight severity is high. Another example would be the ability to forward appropriate notifications to the AIOps team when there is a serverless-related resource issue or forwarding a database-related resource issue to your DBA team. This section will walk you through how these customizations can be done.

EventBridge customization

EventBridge rules can be used to select specific events by using event patterns. As detailed below, you can trigger the lambda function only if a new insight is opened and the severity is high. The advantage of this kind of customization is that the Lambda function will only be invoked when needed.

{
“source”: [
“aws.devops-guru”
],
“detail-type”: [
“DevOps Guru New Insight Open”
],
“detail”: {
“insightSeverity”: [
“high”
]
}
}

Applying EventBridge customization

Open the file template.yaml reviewed in the previous section and implement the changes as highlighted below under the Events section within resources (original file on the left, changes on the right hand side).

Figure 7: CloudFormation template file changed so that the EventBridge rule is only triggered when the alert type is “DevOps Guru New Insight Open” and insightSeverity is “high”.

Save the changes and use the following command to apply the changes

sam deploy –template-file template.yaml

Accept the changeset deployment

Determining the Ops team based on the resource type

Another customization would be to change the Lambda code to route and control how alerts will be managed.  Let’s say you want to get your DBA team involved whenever DevOps Guru raises an insight related to an Amazon RDS resource. You can change the AlertType Java class as follows:

To begin this customization of the Lambda code, the following changes need to be made within the AlertType.java file:

At the beginning of the file, the standard java.util.List and java.util.ArrayList packages were imported
Line 60: created a list of CloudWatch metrics namespaces
Line 74: Assigned the dataIdentifiers JsonNode to the variable dataIdentifiersNode
Line 75: Assigned the namespace JsonNode to a variable namespaceNode
Line 77: Added the namespace to the list for each DevOps Insight which is always raised as an EventBridge event with the structure detail►anomalies►0►sourceDetails►0►dataIdentifiers►namespace
Line 88: Assigned the default responder team to the variable defaultResponderTeam
Line 89: Created the list of responders and assigned it to the variable respondersTeam
Line 92: Check if there is at least one AWS/RDS namespace
Line 93: Assigned the DBAOps_Team to the variable dbaopsTeam
Line 93: Included the DBAOps_Team team as part of the responders list
Line 97: Set the OpsGenie request teams to be the responders list

Figure 8: java.util.List and java.util.ArrayList packages were imported

 

Figure 9: AlertType Java class customized to include DBAOps_Team for RDS-related DevOps Guru insights.

 

You then need to generate the jar file by using the mvn clean package command.

The function needs to be updated with:

FUNCTION_NAME=$(aws lambda
list-functions –query ‘Functions[?contains(FunctionName, `DevOps-Guru`) ==
`true`].FunctionName’ –output text)
aws lambda update-function-code –region
us-east-1 –function-name $FUNCTION_NAME –zip-file fileb://target/Functions-1.0.jar

As result, the DBAOps_Team will be assigned to the Opsgenie alert in the case a DevOps Guru Insight is related to RDS.

Figure 10: Opsgenie alert assigned to both DBAOps_Team and AIOps_Team.

Conclusion

In this post, you learned how Amazon DevOps Guru integrates with Amazon EventBridge and publishes insights to Opsgenie using AWS Lambda. By creating an Opsgenie integration with DevOps Guru, you can now leverage Opsgenie strengths, incident management, team communication, and collaboration when responding to an insight. All of the insight data can be viewed and addressed in Opsgenie’s Incident Command Center (ICC).  By customizing the data sent to Opsgenie via Lambda, you can empower your organization even more by fine tuning and displaying the most relevant data thus decreasing the MTTR (mean time to resolve) of the responding operations team.

About the authors:

Brendan Jenkins

Brendan Jenkins is a solutions architect working with Enterprise AWS customers providing them with technical guidance and helping achieve their business goals. He has an area of interest around DevOps and Machine Learning technology. He enjoys building solutions for customers whenever he can in his spare time.

Pablo Silva

Pablo Silva is a Sr. DevOps consultant that guide customers in their decisions on technology strategy, business model, operating model, technical architecture, and investments.

He holds a master’s degree in Artificial Intelligence and has more than 10 years of experience with telecommunication and financial companies.

Joseph Simon

Joseph Simon is a solutions architect working with mid to large Enterprise AWS customers. He has been in technology for 13 years with 5 of those centered around DevOps. He has a passion for Cloud, DevOps and Automation and in his spare time, likes to travel and spend time with his family.

Astro 2.0 and TypeScript 5.0 beta

#​623 — January 27, 2023

Read on the Web

JavaScript Weekly

Astro 2.0: The Next-Gen ‘Islands’-Oriented Web Framework — 2.0 includes hybrid rendering (mixing of SSR and SSG outputs), type safety for Markdown & MDX, and an upgrade to Vite 4.0. Astro is worth exploring when performance is key as it works with popular frameworks but lets you deliver the least JS possible to get pages rendered.

Fred Schott

Prefer a talk? Nate Moore’s ViteConf talk ▶️ Islands Architecture, Astro, and You will bring you up to speed.

Deep Cloning Objects in JavaScript, The Modern Way — If you’ve been leaning on something like Lodash for deep cloning, you might not need to any longer. “It’s been a long time coming, but we finally now have the built-in structuredClone function to make deep cloning objects in JavaScript a breeze.”

Steve Sewell

Go From Professional Web Developer to Lead Engineer — Aspiring lead developer? Our collection of comprehensive video courses cover the fundamentals of JavaScript, TypeScript, React, web performance, and more.

Frontend Masters sponsor

Announcing TypeScript 5.0 Beta — A new major version number, but users of the popular typed JS superset will face a ‘similar upgrade experience’ to previously. Decorators make it in as a first class feature, significant performance and package size optimizations are present, export type * is supported, all enums are now union enums, and much more.

Daniel Rosenwasser (Microsoft)

AlaSQL.js 3.0: Isomorphic JavaScript SQL Database — A SQL database you can use in the browser, Node.js or mobile apps. An interesting bit of functionality is you can use SQL to query JavaScript objects – example. “The library adds the comfort of a full database engine to your JavaScript app. No, really.”

Andrey Gershun

IN BRIEF:

🏅 If you’re really into Vue.js, you’ll soon be able to become officially certified in it.

If you’re using React, you should be using a React framework, 🐦 says Andrew Clark of the core team.

The creator of alternative JS runtime Bun asks: “If there’s one thing missing from Bun for you to switch, what is it?” You can reply on Twitter.

jQAPI.com is an amazing meeting of old and new JavaScript – it’s an Astro powered version of jQuery’s documentation!

RELEASES:

Shoelace 2.0
↳ Agnostic library of web components.

μFuzzy 1.0
↳ Tiny fuzzy search library.

React Router 6.8

Node.js 19.5.0

📒 Articles & Tutorials

Getting Started with SvelteKit — SvelteKit only recently hit 1.0 and this is a comprehensive overview of how to build a site using the Svelte-oriented app framework. It covers topics like routing, layouts, data, props and more.

Adam Rackis

Using .NET Code from JavaScript using WebAssembly“Starting with .NET 7, you can easily run any .NET method from JavaScript without needing the whole Blazor framework.”

Gérald Barré

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

scrollend: A New JavaScript Event — Finally an event you won’t need a hotel booking for. scrollend provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? Surprisingly not – Firefox 109+ supports it too.

Adam Argyle (Chrome Team)

Packaging Rust Apps for the npm Registry — Isn’t npm just for JavaScript projects? Nope. Node is required to make this technique work, but as long as you can package and execute a binary, you’re good to go.

Orhun Parmaksız

Making Sense of TypeScript using Set Theory — This article certainly doesn’t hang around. Neat diagrams too.

Vladimir Klepov

React Authentication, Simplified

Userfront sponsor

Accessible Hamburger Buttons without JavaScript — Sometimes you need to consider if modern techniques allow you to avoid JavaScript. Here’s a CodePen if you want to play.

Pausly

While we’re on the topic of less JavaScript, the latest episode of the Stack Overflow podcast ▶️ ‘The less JavaScript, the better’ focuses on Astro.

🛠 Code & Tools

Uppy 3.4: Powerful, Modular JavaScript File Uploader — Upload not just from local sources but even Dropbox or Instagram. Integrates with popular frameworks and supports resumable uploads. GitHub repo.

Transloadit

Nut.js 3.0: Desktop Automation from Node — Take control of your desktop (Windows, macOS or Linux) in code with control over keyboard + pointer, along with image matching functionality. GitHub repo.

Simon Hofmann

Optimize Your Systems’ Performance With TelemetryHub – Real-Time Data Monitoring & Analysis — An advanced data visualization and analysis tool that can help you identify and resolve unseen issues in your environment. Try free.

TelemetryHub by Scout sponsor

Eleventy v2.0: First Beta of the Popular Site GeneratorEleventy is a popular Node.js static site generator and v2.0 includes enough major changes that a thorough beta is needed. The creator ▶️ made this quick video about the release.

Zach Leatherman

Mock Service Worker 1.0: API Mocking Library for Browser and Node — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

Drift: A Self-Hostable Gist-Like / Pastebin Service — Built with Next.js 13.

Max Leiter

Dygraphs 2.2
↳ Interactive charts of time series data.

actions/github-script 6.4
↳ Write GitHub Actions workflows in JS.

Playwright 1.30
↳ Browser automation framework.

Faast.js 6.4
↳ Serverlessly call JS functions on AWS Lambda & Google Cloud Functions.

Cypress 12.4
↳ Testing framework for anything in a browser.

D3plus 2.1
↳ Extend D3.js with more visualization types.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Senior Full-Stack Engineer – React + TypeScript — Come help Qwire modernize how studios, composers, artists, publishers, labels, and the rest of the industry manage music rights.

Qwire

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Managing Dev Environments with Amazon CodeCatalyst

An Amazon CodeCatalyst Dev Environment is a cloud-based development environment that you can use in CodeCatalyst to quickly work on the code stored in the source repositories of your project. The project tools and application libraries included in your Dev Environment are defined by a devfile in the source repository of your project.

Introduction

In the previous CodeCatalyst post, Team Collaboration with Amazon CodeCatalyst, I focused on CodeCatalyst’s collaboration capabilities and how that related to The Unicorn Project’s main protaganist. At the beginning of Chapter 2, Maxine is struggling to configure her development environment. She is two days into her new job and still cannot build the application code. She has identified over 100 dependencies she is missing. The documentation is out of date and nobody seems to know where the dependencies are stored. I can sympathize with Maxine. In this post, I will focus on managing development environments to show how CodeCatalyst removes the burden of managing workload specific configurations and produces reliable on-demand development environments.

Prerequisites

If you would like to follow along with this walkthrough, you will need to:

Have an AWS Builder ID for signing in to CodeCatalyst.

Belong to a space and have the space administrator role assigned to you in that space. For more information, see Creating a space in CodeCatalystManaging members of your space, and Space administrator role.

Have an AWS account associated with your space and have the IAM role in that account. For more information about the role and role policy, see Creating a CodeCatalyst service role.

Walkthrough

As with the previous posts in our CodeCatalyst series, I am going to use the Modern Three-tier Web Application blueprint.  Blueprints provide sample code and CI/CD workflows to help make getting started easier across different combinations of programming languages and architectures. To follow along, you can re-use a project you created previously, or you can refer to a previous post that walks through creating a project using the blueprint.

One of the most difficult aspects of my time spent as a developer was finding ways to quickly contribute to a new project. Whenever I found myself working on a new project, getting to the point where I could meaningfully contribute to a project’s code base was always more difficult than writing the actual code. A major contributor to this inefficiency, was the lack of process managing my local development environment. I will be exploring how CodeCatalyst can help solve this challenge.  For this walkthrough, I want to add a new test that will allow local testing of Amazon DynamoDB. To achieve this, I will use a CodeCatalyst dev environment.

CodeCatalyst Dev Environments are managed cloud-based development environments that you can use to access and modify code stored in a source repository. You can launch a project specific dev environment that will automate check-out of your project’s repo or you can launch an empty environment to use for accessing third-party source providers.  You can learn more about CodeCatalyst Dev Environments in the CodeCatalyst User Guide.

Figure 1. Creating a new Dev Environment

To begin, I navigate to the Dev Environments page under the Code section of the navigaiton menu.  I then use the Create Dev Environment to launch my environment.  For this post, I am using the AWS Cloud9 IDE, but you can follow along with the IDE you are most comfortable using.  In the next screen, I select Work in New Branch and assign local_testing for the new branch name, and I am branching from main.  I leave the remaining default options and Create.

Figure 2. Dev Environment Create Options

After waiting less than a minute, my IDE is ready in a new tab and I am ready to begin work.  The first thing I see in my dev environment is an information window asking me if I want to navigate to the Dev Environment Settings.  Because I need to enable local testing of Dynamodb, not only for myself, but other developers that will collaborate on this project, I need to update the project’s devfile.  I select to navigate to the settings tab because I know that contains information on the project’s devfile and allows me to access the file to edit.

Figure 3. Toolkit Welcome Banner

Devfiles allow you to model a Dev Environment’s configuration and dependencies so that you can re-produce consisent Dev Environments and reduce the manual effort in setting up future environments.  The tools and application libraries included in your Dev Environment are defined by the devfile in the source repository of your project.  Since this project was created from a blueprint, there is one provided.  For blank projects, a default CodeCatalyst devfile is created when you first launch an environment.  To learn more about the devfile, see https://devfile.io.

In the settings tab, I find a link to the devfile that is configured.  When I click the edit button, a new file tab launches and I can now make changes.  I first add an env section to the container that hosts our dev environment.  By adding an environment variable and value, anytime a new dev environment is created from this project’s repository, that value will be included.  Next, I add a second container to the dev environment that will run DynamoDB locally.  I can do this by adding a new container component.  I use Amazon’s verified DynamoDB docker image for my environment. Attaching additional images allow you to extend the dev environment and include tools or services that can be made available locally.  My updates are highlighted in the green sections below.

Figure 4. Example Devfile

I save my changes and navigate back to the Dev Environment Settings tab. I notice that my changes were automatically detected and I am prompted to restart my development environment for the changes to take effect.  Modifications to the devfile requires a restart. You can restart a dev environment using the toolkit, or from the CodeCatalyst UI.

Figure 5. Dev Environment Settings

After waiting a few seconds for my dev environment to restart, I am ready to write my test.  I use the IDE’s file explorer, expand the repo’s ./tests/unit folder, and create a new file named test_dynamodb.py.  Using the IS_LOCAL environment variable I configured in the devfile, I can include a conditional in my test that sets the endpoint that Amazon’s python SDK ( Boto3 ) will use to connect to the Dynamodb service.  This way, I can run tests locally before pushing my changes and still have tests complete successfully in my project’s workflow.  My full test file is included below.

Figure 6. Dynamodb test file

Now that I have completed my changes to the dev environment using the devfile and added a test, I am ready to run my test locally to verify.  I will use pytest to ensure the tests are passing before pushing any changes.  From the repo’s root folder, I run the command pip install -r requirements-dev.txt.  Once my dependencies are installed, I then issue the command pytest -k unit.  All tests pass as I expect.

Figure 7. Pytest test results

Rather than manually installing my development dependencies in each environment, I could also use the devfile to include commands and automate the execution of those commands during the dev environment lifecycle events.  You can refer to the links for commands and events for more information.

Finally, I am ready to push my changes back to my CodeCatalyst source repository.  I use the git extension of Cloud9 to review my changes.  After reviewing my changes are what I expect, I use the git extension to stage, commit, and push the new test file and the modified devfile so other collaborators can adopt the improvements I made.

Figure 8.  Changes reviewed in CodeCatalyst Cloud9 git extension.

Cleanup

If you have been following along with this workflow, you  should delete the resources you deployed so you do not continue to incur  charges. First, delete the two stacks that CDK deployed using the AWS CloudFormation console in the AWS account you associated when you launched the blueprint. These stacks will have names like mysfitsXXXXXWebStack and mysfitsXXXXXAppStack. Second, delete the project from CodeCatalyst by navigating to Project settings and choosing Delete project.

Conclusion

In this post, you learned how CodeCatalyst provides configurable on-demand dev environments.  You also learned how devfiles help you define a consistent experience for developing within a CodeCatalyst project.  Please follow our DevOps blog channel as I continue to explore how CodeCatalyst solve Maxine’s and other builders’ challenges.

About the author:

Ryan Bachman

Ryan Bachman is a Sr. Specialist Solutions Architect at AWS, and specializes in working with customers to improve their DevOps practices. Ryan has over 20 years of professional experience as a technologist, and has held roles in many different domains to include development, networking architecture, and technical product management. He is passionate about automation and helping customers increase software development productivity.

Why document.write() is bad

#​622 — January 20, 2023

Read on the Web

JavaScript Weekly

Why Not document.write()? — Many moons ago, document.write was a mainstay of client-side JavaScript code, but it’s long been considered a bad practice – why? Harry digs in, noting that it “guarantees both a blocking fetch and a blocking execution, which holds up the parser for far longer than necessary”.

Harry Roberts

New: The WebAssembly JavaScript Promise Integration API — A technical explanation from the V8 team on a new API to let WebAssembly apps bridge the synchronous / asynchronous gap of expectations around external functionality (consider that many apps are written synchronously, but modern Web APIs are usually asynchronous). JSPI helps bridge both worlds and can be tested via a flag in Chrome.

McCabe, Michaud, Rezvov, Dahl / V8 Team

Break the Programming Mold with Dependency Injection — Keep your code on the cutting edge with dependency injection in JavaScript. Check out Snyk’s guide that gives a breakdown of what dependency injection is, when you should use it, and what popular JavaScript frameworks it’s implemented.

Snyk sponsor

Why Is My Jest Suite So Slow?Jest is known for its speed and simplicity so the author was surprised at how quickly his team’s test suite was slowing down. This is a write up of the ensuing investigation along with the improvements that slashed test running time.

Steven Lemon

Bun v0.5 ReleasedBun is another JavaScript runtime taking the world by storm and a level of Node compatibility has been baked in from the start. v0.5 adds support for node:readline, workspaces, a node:dns shim, and network socket creation support such that more Node.js-based database libraries work out of the box.

Ashcon Partovi

IN BRIEF:

The ▶️ latest episode of the JS Party podcast tackles ‘the rise and fall’ of JavaScript frameworks and the modern trend towards smaller ones.

The folks at NodeSource have put together a top 10 list of Node open-source projects ‘to keep an eye on’ in 2023.

Aurelia 2 is now in beta.

RELEASES:

⭐️ esbuild 0.17.0
↳ Popular bundler. Note that this is a key release with backwards incompatible changes.

Inertia.js 1.0
↳ Build SPAs for any backend.

React Native 0.71

Remix 1.10.0
↳ Popular full stack framework.

📒 Articles & Tutorials

🎨  Building an Accessible Theme Picker — An attractively presented, easy to follow tutorial for a handy site feature.

Sarah L. Fossheim

Fixing a Memory Leak in a Production Node.js App — Kent encountered a variety of weird memory and CPU usage spikes in his Node-powered app and decided to figure out what was going on. This post walks through his complete journey, with plenty of side problems encountered along the way, before discovering the root cause was where he least expected it.

Kent C Dodds

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

📊  A Beginner’s Guide to Chrome Tracing — For when you want to go deeper than the Performance tab. With tracing, you can record what a browser is up to far behind the scenes.

Nolan Lawson

Handling Errors Like a Pro in TypeScript“Learn the design pattern I use to handle errors and write cleaner code.”

Kolby Sisk

A Beginner’s Guide to async/await with Examples

James Hibbard

10 Mistakes to Avoid When Starting with Vue 3

Fotis Adamakis

🛠 Code & Tools

RoughNotation: Cute Animated ‘Rough’ Text Annotations — Uses Rough.js (itself a project worth checking out) to get a hand-drawn look. Lots of nice interactive examples on the page showing a variety of annotation styles (boxes, underlines, circles..)

Preet Shihn

Free Website Speed Test: Does Your Site Meet Google’s Core Web Vitals? — Get an in-depth technical analysis of your site and learn how to make it fast. Rank higher in Google & deliver great UX.

DebugBear sponsor

Modern Errors: Handle Errors in a Simple, Stable, Consistent Way — Create error classes, wrap or aggregate errors, or use one of several plugins to do things like print bug reporting info, print stack traces, or more. Happy in both Node and the browser.

ehmicky

Shifty: A Small, Fast Tweening EngineAll it does is tweening. It’s a low level animation solution that you can integrate into any rendering mechanism of your choice. The examples here demonstrate it well as it can be used for ‘animating’ things in an unconventional sense. GitHub repo.

Jeremy Kahn

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features! For such a dramatic set of effects, things feel smooth and.. surprisingly tolerable 😁 GitHub repo.

De Rosa, Michel, et al.

Rete.js 1.5: A Framework for Visual Programming — Create a node-based editor in the browser and apply logic. Check out these demos on CodePen. GitHub repo.

Vitaliy Stoliarov

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

gpu-io: GPU-Accelerated Computing Library — for physics simulations and other mathematical calculations. A neat look at the power of WebGL. Several examples.

Amanda Ghassaei

Chart.js 4.2
↳ Simple Canvas-based charts. (Samples.)

Serialize JavaScript 6.0.1
↳ Serialize JS to a JSON superset.

axios-retry 3.4
↳ Axios plugin that retries failed requests.

Axios 1.2.3 – Popular HTTP client library.

Commander.js 10.0 – Node.js CLIs made easy.

Mineflayer 4.7 – JS API for Minecraft bots.

Wretch 2.4 – Fetch API wrapper with niceties.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Journey to adopt Cloud-Native DevOps platform Series #2: Progressive delivery on Amazon EKS with Flagger and Gloo Edge Ingress Controller

In the last post, OfferUp modernized its DevOps platform with Amazon EKS and Flagger to accelerate time to market, we talked about hypergrowth and the technical challenges encountered by OfferUp in its existing DevOps platform. As a reminder, we presented how OfferUp modernized its DevOps platform with Amazon Elastic Kubernetes Service (Amazon EKS) and Flagger to gain developer’s velocity, automate faster deployment, and achieve lower cost of ownership.

In this post, we discuss the technical steps to build a DevOps platform that enables the progressive deployment of microservices on Amazon Managed Amazon EKS. Progressive delivery exposes a new version of the software incrementally to ingress traffic and continuously measures the success rate of the metrics before allowing all of the new traffics to a newer version of the software. Flagger is the Graduate project of Cloud Native Computing Foundations (CNCF) that enables progressive canary delivery, along with bule/green and A/B Testing, while measuring metrics like HTTP/gRPC request success rate and latency. Flagger shifts and routes traffic between app versions using a service mesh or an Ingress controller

We leverage Gloo Ingress Controller for traffic routing, Prometheus, Datadog, and Amazon CloudWatch for application metrics analysis and Slack to send notification. Flagger will post messages to slack when a deployment has been initialized, when a new revision has been detected, and if the canary analysis failed or succeeded.

Prerequisite steps to build the modern DevOps platform

You need an AWS Account and AWS Identity and Access Management (IAM) user to build the DevOps platform. If you don’t have an AWS account with Administrator access, then create one now by clicking here. Create an IAM user and assign admin role. You can build this platform in any AWS region however, I will you us-west-1 region throughout this post. You can use a laptop (Mac or Windows) or an Amazon Elastic Compute Cloud (AmazonEC2) instance as a client machine to install all of the necessary software to build the GitOps platform. For this post, I launched an Amazon EC2 instance (with Amazon Linux2 AMI) as the client and install all of the prerequisite software. You need the awscli, git, eksctl, kubectl, and helm applications to build the GitOps platform. Here are the prerequisite steps,

Create a named profile(eks-devops)  with the config and credentials file:

aws configure –profile eks-devops

AWS Access Key ID [None]: xxxxxxxxxxxxxxxxxxxxxx

AWS Secret Access Key [None]: xxxxxxxxxxxxxxxxxx

Default region name [None]: us-west-1

Default output format [None]:

View and verify your current IAM profile:

export AWS_PROFILE=eks-devops

aws sts get-caller-identity

If the Amazon EC2 instance doesn’t have git preinstalled, then install git in your Amazon EC2 instance:

sudo yum update -y

sudo yum install git -y

Check git version

git version

Git clone the repo and download all of the prerequisite software in the home directory.

git clone https://github.com/aws-samples/aws-gloo-flux.git

Download all of the prerequisite software from install.sh which includes awscli, eksctl, kubectl, helm, and docker:

cd aws-gloo-flux/eks-flagger/

ls -lt

chmod 700 install.sh ecr-setup.sh

. install.sh

Check the version of the software installed:

aws –version

eksctl version

kubectl version -o json

helm version

docker –version

docker info

If the docker info shows an error like “permission denied”, then reboot the Amazon EC2 instance or re-log in to the instance again.

Create an Amazon Elastic Container Repository (Amazon ECR) and push application images.

Amazon ECR is a fully-managed container registry that makes it easy for developers to share and deploy container images and artifacts. ecr setup.sh script will create a new Amazon ECR repository and also push the podinfo images (6.0.0, 6.0.1, 6.0.2, 6.1.0, 6.1.5 and 6.1.6) to the Amazon ECR. Run ecr-setup.sh script with the parameter, “ECR repository name” (e.g. ps-flagger-repository) and region (e.g. us-west-1)

./ecr-setup.sh <ps-flagger-repository> <us-west-1>

You’ll see output like the following (truncated).

###########################################################

Successfully created ECR repository and pushed podinfo images to ECR #

Please note down the ECR repository URI          

xxxxxx.dkr.ecr.us-west-1.amazonaws.com/ps-flagger-repository                                                   

Technical steps to build the modern DevOps platform

This post shows you how to use the Gloo Edge ingress controller and Flagger to automate canary releases for progressive deployment on the Amazon EKS cluster. Flagger requires a Kubernetes cluster v1.16 or newer and Gloo Edge ingress 1.6.0 or newer. This post will provide a step-by-step approach to install the Amazon EKS cluster with managed node group, Gloo Edge ingress controller, and Flagger for Gloo in the Amazon EKS cluster. Now that the cluster, metrics infrastructure, and Flagger are installed, we can install the sample application itself. We’ll use the standard Podinfo application used in the Flagger project and the accompanying loadtester tool. The Flagger “podinfo” backend service will be called by Gloo’s “VirtualService”, which is the root routing object for the Gloo Gateway. A virtual service describes the set of routes to match for a set of domains. We’ll automate the canary promotion, with the new image of the “podinfo” service, from version 6.0.0 to version 6.0.1. We’ll also create a scenario by injecting an error for automated canary rollback while deploying version 6.0.2.

Use myeks-cluster.yaml to create your Amazon EKS cluster with managed nodegroup. myeks-cluster.yaml deployment file has “cluster name” value as ps-eks-66, region value as us-west-1, availabilityZones as [us-west-1a, us-west-1b], Kubernetes version as 1.24, and nodegroup Amazon EC2 instance type as m5.2xlarge. You can change this value if you want to build the cluster in a separate region or availability zone.

eksctl create cluster -f myeks-cluster.yaml

Check the Amazon EKS Cluster details:

kubectl cluster-info

kubectl version -o json

kubectl get nodes -o wide

kubectl get pods -A -o wide

Deploy the Metrics Server:

kubectl apply -f https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml

kubectl get deployment metrics-server -n kube-system

Update the kubeconfig file to interact with you cluster:

# aws eks update-kubeconfig –name <ekscluster-name> –region <AWS_REGION>

kubectl config view

cat $HOME/.kube/config

Create a namespace “gloo-system” and Install Gloo with Helm Chart. Gloo Edge is an Envoy-based Kubernetes-native ingress controller to facilitate and secure application traffic.

helm repo add gloo https://storage.googleapis.com/solo-public-helm

kubectl create ns gloo-system

helm upgrade -i gloo gloo/gloo –namespace gloo-system

Install Flagger and the Prometheus add-on in the same gloo-system namespace. Flagger is a Cloud Native Computing Foundation project and part of Flux family of GitOps tools.

helm repo add flagger https://flagger.app

helm upgrade -i flagger flagger/flagger

–namespace gloo-system

–set prometheus.install=true

–set meshProvider=gloo

[Optional] If you’re using Datadog as a monitoring tool, then deploy Datadog agents as a DaemonSet using the Datadog Helm chart. Replace RELEASE_NAME and DATADOG_API_KEY accordingly. If you aren’t using Datadog, then skip this step. For this post, we leverage the Prometheus open-source monitoring tool.

helm repo add datadog https://helm.datadoghq.com

helm repo update

helm install <RELEASE_NAME>

    –set datadog.apiKey=<DATADOG_API_KEY> datadog/datadog

Integrate Amazon EKS/ K8s Cluster with the Datadog Dashboard – go to the Datadog Console and add the Kubernetes integration.

[Optional] If you’re using Slack communication tool and have admin access, then Flagger can be configured to send alerts to the Slack chat platform by integrating the Slack alerting system with Flagger. If you don’t have admin access in Slack, then skip this step.

helm upgrade -i flagger flagger/flagger

–set slack.url=https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK

–set slack.channel=general

–set slack.user=flagger

–set clusterName=<my-cluster>

Create a namespace “apps”, and applications and load testing service will be deployed into this namespace.

kubectl create ns apps

Create a deployment and a horizontal pod autoscaler for your custom application or service for which canary deployment will be done.

kubectl -n apps apply -k app

kubectl get deployment -A

kubectl get hpa -n apps

Deploy the load testing service to generate traffic during the canary analysis.

kubectl -n apps apply -k tester

kubectl get deployment -A

kubectl get svc -n apps

Use apps-vs.yaml to create a Gloo virtual service definition that references a route table that will be generated by Flagger.

kubectl apply -f ./apps-vs.yaml

kubectl get vs -n apps

[Optional] If you have your own domain name, then open apps-vs.yaml in vi editor and replace podinfo.example.com with your own domain name to run the app in that domain.

Use canary.yaml to create a canary custom resource. Review the service, analysis, and metrics sections of the canary.yaml file.

kubectl apply -f ./canary.yaml

After a couple of seconds, Flagger will create the canary objects. When the bootstrap finishes, Flagger will set the canary status to “Initialized”.

kubectl -n apps get canary podinfo

NAME      STATUS        WEIGHT   LASTTRANSITIONTIME

podinfo   Initialized   0        2023-xx-xxTxx:xx:xxZ

Gloo automatically creates an ELB. Once the load balancer is provisioned and health checks pass, we can find the sample application at the load balancer’s public address. Note down the ELB’s Public address:

kubectl get svc -n gloo-system –field-selector ‘metadata.name==gateway-proxy’   -o=jsonpath='{.items[0].status.loadBalancer.ingress[0].hostname}{“n”}’

Validate if your application is running, and you’ll see an output with version 6.0.0.

curl <load balancer’s public address> -H “Host:podinfo.example.com”

Trigger progressive deployments and monitor the status

You can Trigger a canary deployment by updating the application container image from 6.0.0 to 6.01.

kubectl -n apps set image deployment/podinfo  podinfod=<ECR URI>:6.0.1

Flagger detects that the deployment revision changed and starts a new rollout.

kubectl -n apps describe canary/podinfo

Monitor all canaries, as the promoted status condition can have one of the following statuses: initialized, Waiting, Progressing, Promoting, Finalizing, Succeeded, and Failed.

watch kubectl get canaries –all-namespaces

curl < load balancer’s public address> -H “Host:podinfo.example.com”

Once canary is completed, validate your application. You can see that the version of the application is changed from 6.0.0 to 6.0.1.

{

  “hostname”: “podinfo-primary-658c9f9695-4pqbl”,

  “version”: “6.0.1”,

  “revision”: “”,

  “color”: “#34577c”,

  “logo”: “https://raw.githubusercontent.com/stefanprodan/podinfo/gh-pages/cuddle_clap.gif”,

  “message”: “greetings from podinfo v6.0.1”,

}

[Optional] Open podinfo application from the laptop browser

Find out both of the IP addresses associated with load balancer.

dig < load balancer’s public address >

Open /etc/hosts file in the laptop and add both of the IPs of load balancer in the host file.

sudo vi /etc/hosts

<Public IP address of LB Target node> podinfo.example.com

e.g.

xx.xx.xxx.xxx podinfo.example.com

xx.xx.xxx.xxx podinfo.example.com

Type “podinfo.example.com” in your browser and you’ll find the application in form similar to this:

Figure 1: Greetings from podinfo v6.0.1

Automated rollback

While doing the canary analysis, you’ll generate HTTP 500 errors and high latency to check if Flagger pauses and rolls back the faulted version. Flagger performs automatic Rollback in the case of failure.

Introduce another canary deployment with podinfo image version 6.0.2 and monitor the status of the canary.

kubectl -n apps set image deployment/podinfo podinfod=<ECR URI>:6.0.2

Run HTTP 500 errors or a high-latency error from a separate terminal window.

Generate HTTP 500 errors:

watch curl -H ‘Host:podinfo.example.com’ <load balancer’s public address>/status/500

Generate high latency:

watch curl -H ‘Host:podinfo.example.com’ < load balancer’s public address >/delay/2

When the number of failed checks reaches the canary analysis threshold, the traffic is routed back to the primary, the canary is scaled to zero, and the rollout is marked as failed.

kubectl get canaries –all-namespaces

kubectl -n apps describe canary/podinfo

Cleanup

When you’re done experimenting, you can delete all of the resources created during this series to avoid any additional charges. Let’s walk through deleting all of the resources used.

Delete Flagger resources and apps namespace
kubectl delete canary podinfo -n  apps

kubectl delete HorizontalPodAutoscaler podinfo -n apps

kubectl delete deployment podinfo -n   apps

helm -n gloo-system delete flagger

helm -n gloo-system delete gloo

kubectl delete namespace apps

Delete Amazon EKS Cluster
After you’ve finished with the cluster and nodes that you created for this tutorial, you should clean up by deleting the cluster and nodes with the following command:

eksctl delete cluster –name <cluster name> –region <region code>

Delete Amazon ECR

aws ecr delete-repository –repository-name ps-flagger-repository  –force

Conclusion

This post explained the process for setting up Amazon EKS cluster and how to leverage Flagger for progressive deployments along with Prometheus and Gloo Ingress Controller. You can enhance the deployments by integrating Flagger with Slack, Datadog, and webhook notifications for progressive deployments. Amazon EKS removes the undifferentiated heavy lifting of managing and updating the Kubernetes cluster. Managed node groups automate the provisioning and lifecycle management of worker nodes in an Amazon EKS cluster, which greatly simplifies operational activities such as new Kubernetes version deployments.

We encourage you to look into modernizing your DevOps platform from monolithic architecture to microservice-based architecture with Amazon EKS, and leverage Flagger with the right Ingress controller for secured and automated service releases.

Further Reading

Journey to adopt Cloud-Native DevOps platform Series #1: OfferUp modernized DevOps platform with Amazon EKS and Flagger to accelerate time to market

About the authors:

Purna Sanyal

Purna Sanyal is a technology enthusiast and an architect at AWS, helping digital native customers solve their business problems with successful adoption of cloud native architecture. He provides technical thought leadership, architecture guidance, and conducts PoCs to enable customers’ digital transformation. He is also passionate about building innovative solutions around Kubernetes, database, analytics, and machine learning.

Manually Approving Security Changes in CDK Pipeline

In this post I will show you how to add a manual approval to AWS Cloud Development Kit (CDK) Pipelines to confirm security changes before deployment. With this solution, when a developer commits a change, CDK pipeline identifies an IAM permissions change, pauses execution, and sends a notification to a security engineer to manually approve or reject the change before it is deployed.

Introduction

In my role I talk to a lot of customers that are excited about the AWS Cloud Development Kit (CDK). One of the things they like is that L2 constructs often generate IAM and other security policies. This can save a lot of time and effort over hand coding those policies. Most customers also tell me that the policies generated by CDK are more secure than the policies they generate by hand.

However, these same customers are concerned that their security engineering team does not know what is in the policies CDK generates. In the past, these customers spent a lot of time crafting a handful of IAM policies that developers can use in their apps. These policies were well understood, but overly permissive because they were often reused across many applications.

Customers want more visibility into the policies CDK generates. Luckily CDK provides a mechanism to approve security changes. If you are using CDK, you have probably been prompted to approve security changes when you run cdk deploy at the command line. That works great on a developer’s machine, but customers want to build the same confirmation into their continuous delivery pipeline. CDK provides a mechanism for this with the ConfirmPermissionsBroadening action. Note that ConfirmPermissionsBroadening is only supported by the AWS CodePipline deployment engine.

Background

Before I talk about ConfirmPermissionsBroadening, let me review how CDK creates IAM policies. Consider the “Hello, CDK” application created in AWS CDK Workshop. At the end of this module, I have an AWS Lambda function and an Amazon API Gateway defined by the following CDK code.

// defines an AWS Lambda resource
const hello = new lambda.Function(this, ‘HelloHandler’, {
runtime: lambda.Runtime.NODEJS_14_X, // execution environment
code: lambda.Code.fromAsset(‘lambda’), // code loaded from “lambda” directory
handler: ‘hello.handler’ // file is “hello”, function is “handler”
});

// defines an API Gateway REST API resource backed by our “hello” function.
new apigw.LambdaRestApi(this, ‘Endpoint’, {
handler: hello
});

Note that I did not need to define the IAM Role or Lambda Permissions. I simply passed a refence to the Lambda function to the API Gateway (line 10 above). CDK understood what I was doing and generated the permissions for me. For example, CDK generated the following Lambda Permission, among others.

{
“Effect”: “Allow”,
“Principal”: {
“Service”: “apigateway.amazonaws.com”
},
“Action”: “lambda:InvokeFunction”,
“Resource”: “arn:aws:lambda:us-east-1:123456789012:function:HelloHandler2E4FBA4D”,
“Condition”: {
“ArnLike”: {
“AWS:SourceArn”: “arn:aws:execute-api:us-east-1:123456789012:9y6ioaohv0/prod/*/”
}
}
}

Notice that CDK generated a narrowly scoped policy, that allows a specific API (line 10 above) to call a specific Lambda function (line 7 above). This policy cannot be reused elsewhere. Later in the same workshop, I created a Hit Counter Construct using a Lambda function and an Amazon DynamoDB table. Again, I associated them using a single line of CDK code.

table.grantReadWriteData(this.handler);

As in the prior example, CDK generated a narrowly scoped IAM policy. This policy allows the Lambda function to perform certain actions (lines 4-11) on a specific table (line 14 below).

{
“Effect”: “Allow”,
“Action”: [
“dynamodb:BatchGetItem”,
“dynamodb:ConditionCheckItem”,
“dynamodb:DescribeTable”,
“dynamodb:GetItem”,
“dynamodb:GetRecords”,
“dynamodb:GetShardIterator”,
“dynamodb:Query”,
“dynamodb:Scan”
],
“Resource”: [
“arn:aws:dynamodb:us-east-1:123456789012:table/HelloHitCounterHits”
]
}

As you can see, CDK is doing a lot of work for me. In addition, CDK is creating narrowly scoped policies for each resource, rather than sharing a broadly scoped policy in multiple places.

CDK Pipelines Permissions Checks

Now that I have reviewed how CDK generates policies, let’s discuss how I can use this in a Continuous Deployment pipeline. Specifically, I want to allow CDK to generate policies, but I want a security engineer to review any changes using a manual approval step in the pipeline. Of course, I don’t want security to be a bottleneck, so I will only require approval when security statements or traffic rules are added. The pipeline should skip the manual approval if there are no new security rules added.

Let’s continue to use CDK Workshop as an example. In the CDK Pipelines module, I used CDK to configure AWS CodePipeline to deploy the “Hello, CDK” application I discussed above. One of the last things I do in the workshop is add a validation test using a post-deployment step. Adding a permission check is similar, but I will use a pre-deployment step to ensure the permission check happens before deployment.

First, I will import ConfirmPermissionsBroadening from the pipelines package

import {ConfirmPermissionsBroadening} from “aws-cdk-lib/pipelines”;

Then, I can simply add ConfirmPermissionsBroadening to the deploySatage using the addPre method as follows.

const deploy = new WorkshopPipelineStage(this, ‘Deploy’);
const deployStage = pipeline.addStage(deploy);

deployStage.addPre(
new ConfirmPermissionsBroadening(“PermissionCheck”, {
stage: deploy
})

deployStage.addPost(
// Post Deployment Test Code Omitted
)

Once I commit and push this change, a new manual approval step called PermissionCheck.Confirm is added to the Deploy stage of the pipeline. In the future, if I push a change that adds additional rules, the pipeline will pause here and await manual approval as shown in the screenshot below.

Figure 1. Pipeline waiting for manual review

When the security engineer clicks the review button, she is presented with the following dialog. From here, she can click the URL to see a summary of the change I am requesting which was captured in the build logs. She can also choose to approve or reject the change and add comments if needed.

Figure 2. Manual review dialog with a link to the build logs

When the security engineer clicks the review URL, she is presented with the following sumamry of security changes.

Figure 3. Summary of security changes in the build logs

The final feature I want to add is an email notification so the security engineer knows when there is something to approve. To accomplish this, I create a new Amazon Simple Notification Service (SNS) topic and subscription and associate it with the ConfirmPermissionsBroadening Check.

// Create an SNS topic and subscription for security approvals
const topic = new sns.Topic(this, ‘SecurityApproval’);
topic.addSubscription(new subscriptions.EmailSubscription(‘[email protected]’));

deployStage.addPre(
new ConfirmPermissionsBroadening(“PermissionCheck”, {
stage: deploy,
notificationTopic: topic
})

With the notification configured, the security engineer will receive an email when an approval is needed. She will have an opportunity to review the security change I made and assess the impact. This gives the security engineering team the visibility they want into the policies CDK is generating. In addition, the approval step is skipped if a change does not add security rules so the security engineer does not become a bottle neck in the deployment process.

Conclusion

AWS Cloud Development Kit (CDK) automates the generation of IAM and other security policies. This can save a lot of time and effort but security engineering teams want visibility into the policies CDK generates. To address this, CDK Pipelines provides the ConfirmPermissionsBroadening action. When you add ConfirmPermissionsBroadening to your CI/CD pipeline, CDK will wait for manual approval before deploying a change that includes new security rules.

About the author:

Brian Beach

Brian Beach has over 20 years of experience as a Developer and Architect. He is currently a Principal Solutions Architect at Amazon Web Services. He holds a Computer Engineering degree from NYU Poly and an MBA from Rutgers Business School. He is the author of “Pro PowerShell for Amazon Web Services” from Apress. He is a regular author and has spoken at numerous events. Brian lives in North Carolina with his wife and three kids.

Vite 4.0 released

#​618 — December 9, 2022

Read on the Web

JavaScript Weekly

Vite 4.0 Released — From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box: fast hot module replacement, instant server starts, optimized builds with Rollup, TypeScript and JSX support (more on why to use Vite here). You can even give it a quick spin online via vite.new.

Evan You and Vite Contributors

Anjana Vakil on the JavaScript Fundamentals — This video course covers the core skills needed to become a professional JavaScript programmer, including writing reusable code with functions, conditionals, fetching data from APIs, and more. It’s everything you need to continue your journey to become effective at JavaScript.

Frontend Masters sponsor

npm Gains New Security Features — GitHub continues its work in making the npm ecosystem safer. Two new things: granular access tokens so package owners can better control access to publishing workflows, and a new code explorer to look directly at the contents of packages from the official npm site.

Monish Mohan (GitHub)

Console Ninja: console.log Output Right Next to Your Code — A VS Code extension that displays console.log output and runtime errors next to your code. Jack Herrington recorded ▶️ a neat 6 minute intro showing it off recently.

Wallaby.js Team

IN BRIEF:

There’s a React documentary in production – ▶️ here’s the trailer.

AWS has unveiled Step Functions Distributed Map, a way you can run hugely parallel (up to 10,000 simultaneous executions) operations (written in JavaScript, perhaps) over data and documents stored on S3.

A quick look back 27 years to the launch of JavaScript in 1995.

📊 D3 7.7, the latest version of the popular data visualization framework, is out and I wanted to recommend looking at co-creator Mike Bostock’s notebooks if you want inspiration on using D3, a look at new features, etc. He posts interesting stuff.

The JS debugger in the latest VS Code release now supports console.profile for CPU profiling code, as well as nested sourcemaps.

RELEASES:

Rome 11Linter in urbe novissima sunt.

Storybook 7.0 beta 0

Rollup 3.7 – ES module bundler.

xv 2.0 – Zero-config Node test runner.

Nx 15.3 (A huge news update post.)

Ember 4.9

Bun 0.3 – The challenger JS runtime.

📒 Articles & Tutorials

Sandboxing with PartytownPartytown provides a way to run third party scripts within a Web Worker rather than on the main thread. Could this be used for sandboxing? Weston tried it out and concluded it’s not quite there.

Weston Ruter

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

Is Prisma Better Than Your ‘Traditional’ ORM?Prisma has become a very popular ORM option in the Node space in recent years. The creator of the Practica Node starter app considers if Prisma makes sense as a universal ‘go to’ ORM. No, but..

Yoni Goldberg

When to Use gRPC vs GraphQL — A balanced comparison of two popular API protocols to see where each works best.

Loren Sands-Ramshaw

Breakpoints and console.log is the Past, Time Travel is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.

Wallaby.js sponsor

▶  A Discussion on Optimizing Your JavaScript with Rust — A chat with Vercel’s Lee Robinson at the recent Next.js conference.

Ben Popper podcast

🛠 Code & Tools

Codux: A Visual IDE for React — One of the co-founders of Wix introduces a new standalone tool to accelerate the React development process. It currently only supports Chromium-based browsers but you can take it for a test drive or learn more from its homepage.

Nadav Abrahami (Wix)

Harlem 3.0: Simple Extensible State Management for Vue 3 — Provides a simple functional API for creating, reading, and mutating state.

Andrew Courtice

Open Source Firebase Alternative for Web, Mobile, and Flutter Devs

Appwrite sponsor

JS Image Carver: Content-Aware Image Resizer and Object Remover — Uses the seam carving approach (if you’ve used ‘Content Aware Scale’ in Photoshop, you’ve seen it). The live demo on this one is fun to watch.

Oleksii Trekhleb

Civet: The CoffeeScript of TypeScript? — If you liked CoffeeScript back in the day, here’s the same idea in a modern TypeScript-oriented form.

Daniel Moore

Maska 2.1: Zero-Dependency Input Mask — Happy in vanilla situations, but can also integrate with Vue 2/3. GitHub repo.

Alexander Shabunevich

node-calls-python: Call Python from Node — One use case the author mentions is plugging into Python’s rich ecosystem of machine learning tools.

Menyhért Hegedűs

reduced.to: Open Source URL Shortening App Built with Qwik — The app itself is live at reduced.to but you might find it interesting as an example of a frontend built using the Qwik framework.

Ori Granot

📺 Yesterday, This Dot Media published Qwik’s creator Misko Hevery giving ▶️ a live coding introduction to Qwik – a useful way to get up to speed.

💻 Jobs

Software EngineerStimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness. Join our engineering team.

Stimulus

Senior UI Dev — Join us and innovate with MicroFrontends, custom Node tools, build systems (Webpack/Github Actions), TypeScript, React, and more with a11y and DX in mind.

Vertex Inc

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Spacetime 7.3
↳ Lightweight JavaScript timezone library.

Partytown 0.7.3
↳ Run intensive third-party scripts in a worker.

Splitter 1.4
↳ React component for split views.

reveal-md 5.4
↳ Reveal.js presentations from Markdown files.

Mongoose 6.8
↳ MongoDB object modeling library.

React Tooltip 5.0

A new jQuery release for Xmas

#​619 — December 16, 2022

Read on the Web

🎄 This is the final issue of the year – we’ll be back on January 6, 2023. We hope you have a fantastic holiday season, whether or not you are celebrating, and we’ll see you for a look back at 2022 in the first week of January 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Announcing SvelteKit 1.0Svelte is a virtual DOM-free, compiled ahead of time, frontend UI framework with many fans. SvelteKit introduces a framework and tooling around Svelte to build complete webapps. This release post explains some of its approach and how it differs to other systems.

The Svelte Team

Dr. Axel Tackles Two Proposals: Iterator Helpers and Set Methods — Here’s something to get your teeth into! Dr. Axel takes on two promising ECMAScript proposals and breaks down what they’re about and why they’ll (hopefully) become useful to JavaScript developers. The first tackles iterator helpers (new utility methods for working with iterable data) and the second tackles Set methods which will extend ES6’s Set object.

Dr. Axel Rauschmayer

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🏆  The Best of Node Weekly in 2022 — In this week’s issue of Node Weekly (our Node.js-focused sister newsletter) we looked back at the most popular items of the year, including the Tao of Node, an array of JavaScript testing best practices, and the most popular Node.js frameworks in 2022.

Node Weekly Newsletter

jQuery 3.6.2 Released — Humor me. You might not be using jQuery anymore, but it’s (still) the most widely deployed JavaScript library and it’s fantastic to see it being maintained.

jQuery Foundation

IN BRIEF:

Node 19.3.0 (Current) has been released to bring npm up to v9.2. Breaking changes in v9.x warrant this update and the release post explains the current policy around npm’s ongoing inclusion in Node.

ƛ The Glasgow Haskell Compiler (GHC) has gained a new JavaScript backend meaning the reference Haskell compiler can now emit JavaScript and be used more easily to build front-end apps.

GitHub is rolling out secrets scanning to all public repos for free.

The New Stack reflects on 2022 as a ‘golden year’ for JavaScript and some of the developments we’ve seen. We’ll be doing our own such roundup in the next issue.

RELEASES:

Node.js 16.19.0 (LTS) and 14.21.2 (LTS)

Chart.js 4
↳ Canvas-based chart library. (Samples.)

PouchDB 8.0
↳ CouchDB-inspired syncing database.

SWR 2.0 – React data-fetching library.

📒 Articles & Tutorials

Why Cypress v12 is a Big Deal — A practical example-led love letter of sorts to how the latest version of the popular Cypress ‘test anything that runs in a browser’ library makes testing frontend apps smoother than before.

Gleb Bahmutov

Five Challenges to Building an Isomorphic JS Library — When it comes to JavaScript, “isomorphic” means code or libraries that run both on client and server runtimes with minimal adaptations.

Nick Fahrenkrog (Doordash)

▶  A Podcast for Candid Chats on Product, Business & Leadership — Join Postlight leaders & guests as they discuss topics like running great meetings & creating solid product launches.

The Postlight Podcast sponsor

Next, Nest, Nuxt… Nust?“This blog post is for everyone looking for their new favorite JavaScript backend framework.” If the names of frameworks are all starting to blur together in your head, this is for you. Marius explains just what systems like Next and Gatsby do and touches on a few differences.

Marius Obert (Twilio)

Calculating the Maximum Diagonal Distance in a Given Collection of GeoJSON Features using Turf.js — This is cool. Turf.js is a geospatial analysis library, by the way.

Piotr Jaworski

Optimize Interaction to Next Paint — How to optimize for the experimental Interaction to Next Paint (INP) metric — a way to assess a page’s overall responsiveness to user interactions.

Jeremy Wagner & Philip Walton (Google)

Need to Upgrade to React 18.2? Don’t Have Time? Our Experts Can Help — Stuck in dependency hell? We’ve been there. Hire our team of experts to upgrade deps, gradually paying off tech debt.

UpgradeJS.com – JavaScript Upgrade Services by OmbuLabs sponsor

How We Configured pnpm and Turborepo for Our Monorepo

Pierre-Louis Mercereau (NHost)

Rendering Emails with Svelte

Gautier Ben Aim

🛠 Code & Tools

Wretch 2.3: A Wrapper Around fetch with an Intuitive Syntax — A long standing, mature library that makes fetch a little more extensible with a fluent API. Check the examples.

Julien Elbaz

SWR 2.0: Improved React Hooks for Data Fetching — The second major release of SWR (Stale-While-Revalidate) includes new mutation APIs, new developer tools, as well as improved support for concurrent rendering.

Ding, Liu, Kobayashi, and Xu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

vanilla-tilt.js 1.8: A Smooth 3D Tilting Effect Library — No dependencies and simple to use and customize. GitHub repo.

Șandor Sergiu

visx: Airbnb’s Low Level Visualization React Components — Bring your own state management, animation library, or CSS-in-JS.. visx can slot into any React setup. Demos.

Airbnb

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte.

Daybrush

PortalVue 3.0
↳ Feature-rich portal plugin for Vue 3.

Kea 3.1
↳ Composable state management for React.

jest-puppeteer 6.2
↳ Run tests using Jest + Puppeteer.

NodeBB 2.7 – Node.js based forum software.

Pino 8.8 – Fast JSON-oriented logger.

💻 Jobs

Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Stickermule

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🎁 And one for fun

Snow.js: Add a Snow Effect to a Web Page — Well, it’s that time of the year (in some parts of the world!) If you’re more interested in how the effect is made, it’s inspired by this CodePen example built around some fancy CSS.

Or if you’re a bit more childish, you could always put Fart.js on your site.. 🙈

Merry Christmas to you all and we’ll see you again in 2023!

Looking at both 2022 and 2023

#​620 — January 6, 2023

Read on the Web

We’re back for 2023 😀 As is our tradition, we’re taking a quick look back at the past year – this time led by a few choice retrospectives, then followed by the most popular articles and tools included in JavaScript Weekly in 2022. There’s sure to be some things you missed or want to revisit – enjoy!
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

🌟 The 2022 JavaScript Rising Stars — For the seventh time, Michael Rambeau kicks off our year with a roundup of ‘trending projects’ in the JavaScript space. Bun takes the top spot for 2022, but we’ll leave the rest for you to check out. A few guest authors also share their opinions on the ecosystem.

Michael Rambeau et al.

Evan You Looks at 2022 and 2023 — You’ll know Evan for Vue.js and Vite and here he recaps what happened in the Vue world in 2022 (like Vue 3.x becoming the new default version) and what we can expect in 2023, including the mysteriously named Vapor Mode.. We’re also warned Vue 2.x has one year before it reaches EOL.

Evan You

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

Six JavaScript Projects to Watch in 2023 — A reasonable selection, focused on newer, more cutting edge, but also very promising projects (including the aforementioned Bun).

AsyncBanana

LOOKING BACK AND FORWARD:

Michael Shilman writes about the future for Storybook in 2023.

Ryan Carniato ponders where JS frameworks are headed in 2023.

📅 ▶️ 10 JavaScript conferences to consider attending this year.

Some other 2022 roundups and reflections: Cassidy Williams, Igalia Web Platform Team, Dave Rupert, Stéphanie Walter, Pawel Grzybek, Stephanie Eckles, Michelle Barker, Rachel Andrew, Remy Sharp, Ahmad Shadeed, the HTTP protocol 😆

RELEASES:

Spacetime 7.4 – Lightweight timezone library.

Lerna 6.4 – JS monorepo build tool.

TestCafe 2.2 – End-to-end Web testing.

Vuetify 3.1 – Vue component framework.

📒 Top Articles & Tutorials of 2022

As determined by their popularity in JavaScript Weekly.

1. Douglas Crockford: “The best thing we can do today to JavaScript is to retire it.” — The most popular link of the year was to an interview with the author of JavaScript: The Good Parts (and discoverer-of-sorts of JSON) where he explained the benefits of code reading, why we need better languages, and how he won’t “write about JavaScript again.”

Evrone

2. Ecma International Approved ECMAScript 2022 — The second most popular item of the year was a bit more positive, with Ecma making ECMAScript 2022 a standard. Dr. Axel brought us up to speed with what this meant at a practical level. You’ll already be using some of these features – this move just tied up the formalities.

Dr. Axel Rauschmayer

▶  Whiskey Web and Whatnot: Your New Favorite JavaScript Podcast — A fireside chat with your favorite devs. Guests include Wes Bos, Charlie Gerard, Chris Coyier, and Kelly Vaughn.

Whiskey Web and Whatnot sponsorpodcast

3. JS Function Composition: What’s The Big Deal? — James’ articles on JavaScript fundamentals are always popular and last year we got a fresh one focusing on a common activity: function composition. “What’s the big deal?” he asks.

James Sinclair

4. AbortController is Your FriendAbortController provides a way to abort web requests at any point without waiting for a response but it’s possible to twist it into other use cases, as we saw here.

Sam Thorogood

5. Ten Common JavaScript Issues Developers Face — A good old-fashioned list. If you’ve been working with JavaScript for many years, these are potholes you (probably) know to avoid but there’s enough to chew on here otherwise.

Ryan J. Peterson

6. A Pipe Operator for JS: Introduction and Use Cases — Many developers feel a pipe operator is missing from JavaScript. Luckily there’s a pipeline operator proposal at stage 2 in TC39. Dr. Axel explains why you’d want this and how it could work.

Dr. Axel Rauschmayer

7. Patterns.dev: Modern Web App Design Patterns — A free book you can download in PDF format or enjoy on the Web. Learn about lots of fundamentals, from how different styles of rendering or importing resources work to performance optimizations and case studies.

Lydia Hallie, Addy Osmani, and Others

8. Decorators for ES6 Proposal Reached Stage 3 at TC39 — It’s a few years in the making, but a decorators proposal conditionally made it to stage 3 and people were very excited. Fingers crossed we see more from this in 2023.

Ecma TC39

🛠 Top Code & Tools of 2022

As determined by their popularity in JavaScript Weekly.

1. Rome Formatter: Super Fast JavaScript Formatting — I liked the image for this enough to want to include it again 😉 As of 2023, Rome (now at version 11) remains an ambitious project that sets out to replace a lot of JS tools in one hit with the initial focus being on Prettier-esque code formatting, as well as linting. Compiling, bundling, and testing features are scheduled to appear throughout 2023.

Rome Team

2. TypeScript 4.6 Released — Not a lot to say here, as TypeScript is always popular, and it’s now up to version 4.9, but with v4.6 it took a step forward by being able to detect more syntax errors in plain old JavaScript, a benefit for all JavaScript-developing VS Code users, at least.

Daniel Rosenwasser

Dynaboard: The Pro-Code Web App Builder Made for Developers — Build high performance public and private web apps in a collaborative — code forward — WYSIWYG environment.

Dynaboard sponsor

3. Vite 4.0 Released — This was only a month ago, too. From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box. We look forward to more Vite news in 2023.

Evan You and Vite Contributors

4. Lexical: An Extensible Text Editor Library — Out of Meta came a new text editor framework putting accessibility, performance, and reliability at its heart. At only 22KB gzipped and with React 18+ support (but vanilla is also OK), it reminded us of Draft.js but they say it’s the “next generation” and Meta is already replacing Draft.js with Lexical in their internal apps.

Meta / Facebook

5. Bun: A (Still) Interesting New JavaScript Runtime — Bun appeared in summer 2022 as a new JavaScript runtime built not around V8 (like Node.js or Deno are) but WebKit/Apple’s JavaScriptCore. It includes its own bundler, transpiler, task runner, and npm client, but most significantly boasts huge performance improvements over existing options and supported a lot of Node and Web APIs out of the box.

Jarred Sumner

6. JSON Crack: Visualize JSON Data in Graph Form — Got JSON, want to view it? This is a neat tool for working with and displaying JSON data structures. You can play with it online, embed the graphs into your site, or download them for further use.

Aykut Saraç

Stuck on Node 10? Need to Upgrade but Don’t Have Time? Contact Us 🚀

UpgradeJS.com | Node and JavaScript Upgrade Services sponsor

7. Shader Park: Create Interactive 2D and 3D Shaders with JavaScript — An open source Web-based platform, community, and library for simplifying the mystifying world of shaders and GPUs by letting you create them procedurally with JavaScript. Note: This site is heavy on the browser given its use of WebGL, so may not be suitable for every device.

Blankensmith and Whidden

8. Axios 1.0: The Popular HTTP Client Library/API — With 98k GitHub stars and a presence in numerous thousands of package.json files, Axios remains very popular and it’s amazing it only hit 1.0 in 2022. The Fetch API has taken much of Axios’ thunder but, like jQuery, Axios still wraps up a lot of functionality into a broadly liked API. (Official homepage.)

Axios Project

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Backend Engineer, TypeScript (Berlin / Remote) — Thousands of people love our product (see Trustpilot for yourself). Join the team behind it and help us scale. 🚀

Feather

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

We’re back to normal service as of next week! If you’ve got anything you’d like to submit for our consideration, hit reply and let us know.

Java-Script Jarre

#​621 — January 13, 2023

Read on the Web

JavaScript Weekly

The State of JS 2022The State of JS is one of the JavaScript ecosystem’s most popular surveys and this time 39,471 folks took part giving us a snapshot of the tools, technologies, and language features people are using (or not using!) There’s a lot to go through, but here are some key points:

top-level await is the most newly adopted feature recently.
The JavaScript / TypeScript balance shows a majority of developers using TypeScript over JS.
Express remains by far the most popular backend framework with Nest, Fastify, Strapi, and Koa following somewhat behind.
Other interesting results can be found in JS pain points, what is currently missing from JS, and the ‘Awards’ for stand out items (complete with snazzy visual effects).

Devographics

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🗣 Is TypeScript Worth It? — Time saver or waste of time? The relationship between TypeScript and JavaScript remains a complex one. An extensive discussion took place on Hacker News this week and, notably, TypeScript PM Daniel Rosenwasser popped up to respond to some of the concerns.

Hacker News

IN BRIEF:

You’ll be aware of JavaScript’s strict mode but one developer thinks we need a stricter mode to fix several other syntax issues.

Publint is an online tool for ‘linting’ live npm packages to see if they are packaged correctly, as a way to ensure maximum compatibility across environments.

RELEASES:

Node v19.4.0 and v18.13.0 (LTS)

Commander.js 9.5
↳ Node.js command-line interface toolkit.

Angular 15.1

Pixi.js 7.1 – Fast 2D on WebGL engine.

📒 Articles & Tutorials

The Gotcha of Unhandled Promise Rejections — A rough edge with promises that can sneak up on you. Jake looks at a ‘gotcha’ around unhandled promise rejections and how to work around it.

Jake Archibald

HTML with Superpowers: The Guidebook — A free resource introducing Web Components, what they are, and what problems they’re trying to solve. You can see the Guidebook directly here.

Dave Rupert

With Retool You Ship Apps Fast with 100+ Perfectly Crafted UI Components — The fast way for devs to build and share internal tools. Teams at companies like Amazon, DoorDash & NBC collaborate around custom-built Retool apps to solve internal workflows.

Retool sponsor

Everything About React’s ‘Concurrent Mode’ Features — An in-depth, example-led exploration of Concurrent Mode (now more a set of features integrated into React 18 than a distinct ‘mode’).

Henrique Yuji

Using GitHub Copilot for Unit Testing? — Even if you find the idea of a AI tool like Copilot writing production code distasteful, it may have a place in speeding up writing tests.

Ianis Triandafilov

How to Destructure Props in Vue (Composition API) — How to correctly destructure props object in a Vue component while maintaining the reactivity.

Dmitri Pavlutin

Using Inline JavaScript Modules to Prevent CSS Blockage

Stoyan Stefanov

How to Build a GraphQL Server with Deno

Andy Jiang

🛠 Code & Tools

Gluon: Framework for Creating Desktop Apps from Sites — A new approach for building desktop apps on Windows and Linux from Web sites using Node (or Deno) and already installed browsers (Chromium or Firefox). Initial macOS support has just been added too.

Gluon

Structura.js: Lightweight Library for Immutable State Management” It is based on the idea of structural sharing. The library is very similar to Immer.js, but it has some advantages over it.”

Giuseppe Raso

Tuple, a Lightning-Fast Pairing Tool Built for Remote Developers — High-resolution, crystal-clear screen sharing, low-latency remote control, and less CPU usage than you’d think possible.

Tuple sponsor

Bay.js: A Lightweight Library for Web Components — Makes it easy to create web components that can be reused across projects. It also boasts performant state changes and secure event binding.

Ian Dunkerley

Twify: Scaffold a Tailwind CSS Project with a Single Command — You can use your preferred package manager and it supports creating projects with Next.js, Nuxt 2/3, SvelteKit, Remix, Angular, and more.

Kazi Ahmed

Lazy Brush 2.0: A Library for Smooth Pointer Drawing — Allow your users to draw smooth curves and straight lines with your mouse, finger or any pointing device. This long standing library has just migrated to TypeScript and gained a new ‘friction’ option to customize the feel. GitHub repo.

Jan Hug

 Mafs: React Components for Interactive Math — Build interactive, animated visualizations using declarative code with illustrative demos like bezier curves. The documentation is fantastic – check out how easy it is to make plots. Or just head to the GitHub repo.

Steven Petryk

Are You Looking for a New Observability Tool?

TelemetryHub by Scout sponsor

Hyphenopoly 5.0: A Polyfill for Client-Side Hyphenation — An interesting use of WebAssembly here.

Mathias Nater

visx 3.0
↳ D3-powered visualization React components.

Atrament 3.0
↳ Library for drawing and handwriting on a canvas element.

HLS.js 1.3
↳ Library to play HLS (HTTP Live Streaming) in browsers, with MSE support.

💻 Jobs

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Backend Engineer, TypeScript (Berlin / Remote) — Thousands of people love our product (see Trustpilot for yourself). Join the team behind it and help us scale. 🚀

Feather

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🎶 Écoute la musique..

Oxygene Pt 4, as Performed by JavaScript — This is fun. Dittytoy is a simple, JavaScript-powered online generative music tool and someone has put together a surprisingly faithful rendition of perhaps one of the best known instrumental synth songs ever, all the way from 1976.

Dittytoy