DEV Community: JavaScript Room

Building Reddit Game with Devvit and TypeScript (starter included)

JavaScript Room — Sat, 08 Nov 2025 18:05:54 +0000

Hey everyone,
I've recently built the simple quiz game on Reddit and want to share my experience and things I learned on the way.

This is my take on Reddit games on Youtube, in case you prefer a video format:

First of all, what is the Reddit Games?

They exist for years I believe, but for some reason many people don't know about them and I actually found out only recently too. It's an ecosystem on Reddit that includes their native hosting for web apps and proprietary framework called Devvit.js. So you can build full scale applications and games and host them for free on Reddit. Also, you can even receive in-app payments, and this is why I think it's still undervalued. I believe it will grow, but right now it looks like it's still early to enter the ecosystem. So in case you're interested keep reading.

A couple of words about Devvit

This is a framework built by the Reddit's team. You write an app with TypeScript or JavaScript, and it's ultimately running on Node.js on their servers. So you don't have any costs, just push your app and Reddit will host both frontend and backend for you.

There are two types of apps you can build: Blocks and Web. I only used Blocks so far. You write React/HTML-like syntax, but with custom HTML tags provided by Devvit (this is how you integrate it with you linter and transpiler) Blocks are very much limited and not an option for large/complex apps I'd say. But it's running automatically in the feed, and users don't have to launch it. For simple games and apps it might be just enough. I see much more emphasis on the Web, which was released not that long ago. With Web you build a standalone web application with a framework/library of your choice (React, Vue, Angular or any other). You have the backend part and the frontend part. For both types of apps you can access user data and use internal Redis storage to persist any data you need.

Here's quick comparison of Block and Web:

Feature	Devvit Blocks	Devvit Web
Interactive In-feed	✅	❌
Reddit Design System	✅	❌
Cross-platform (iOS/Android/Web)	✅	✅
Full Screen / Focus Mode	❌	✅
Sounds	❌	✅
3D Graphics	❌	✅
Animations	Limited	✅
Standard Web Stack	❌	✅

Need to start Blocks app quickly?

I have built a minimalistic starter repo for Blocks app. It uses TypeScript and Biome.js instead of ESLint which is used in their original starter. Feel free to give it a try!

Starter: https://github.com/room-js/reddit-game-blocks-starter/

If you have any questions or ideas, please leave a comment.

Happy Coding!

GraphQL schema - sharing Input and Output types structure

JavaScript Room — Mon, 24 Apr 2023 17:06:30 +0000

Hey GraphQL experts, I have a question for you: how do you achieve re-use of the schema fields when you need to have the same structure in the Input type and the Output?

Let's examine this code (GraphQL schema):

input myInput {
  field1: String
  field2: String
}

type myOutput {
  field1: String
  field2: String
}

Is there any way to re-use the structure here? I've tried to make use of fragments and extends functionality but nothing worked so far.

Is it possible to achieve that and how would you approach it?

TIA!

Dependabot: what is your favorite configuration (approach)?

JavaScript Room — Mon, 19 Jul 2021 11:42:10 +0000

Hello everyone! You probably well know and often use Dependabot in your projects. It's quite nice tool for automating the management of a project dependencies. I also use it on many Github repositories I manage. And recently I started noticing that I spend quite some time to manage the PRs. Dependabot can easily overwhelm you with the auto-generated PRs. Especially if you manage many repositories.

My typical config is quite simple right now:

# .github/dependabot.yml

version: 2
updates:
  - package-ecosystem: npm
    directory: "/"
    schedule:
      interval: daily
    commit-message:
      prefix: "[skip ci]: "

I was wondering what hacks do you guys use in your routine? Maybe you have found a nice approach here? Please share it if so! Thank you all in advance!

Deleting all S3 buckets in a single CLI command

JavaScript Room — Sun, 06 Jun 2021 09:32:02 +0000

Hi everyone!
This is more like a cheatsheet for myself, but maybe it will be also helpful for someone else. If you use AWS S3 storage service you probably have noticed that you cannot remove not empty buckets straight away via website, you have to clean up the content first. And then, when you have a bunch of buckets you want to delete, it's a bit of pain to remove them one by one via the AWS website interface. AWS command line interface can save us some time here. Don't forget to install it and configure your credentials. Then you can use the commands below in your terminal.

Delete all S3 buckets stored in your AWS account (including not empty):

aws s3 ls | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{} --force

Delete only empty buckets (without `--force` flag):

aws s3 ls | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{}

Delete only buckets with the prefix `old_`:

aws s3 ls | grep 'old_*' | cut -d" " -f 3 | xargs -I{} aws s3 rb s3://{} --force

If you have any questions or suggestion on the commands don't hesitate to leave a comment below. Have a productive day!

How to transfer repository from GitLab to GitHub

JavaScript Room — Fri, 13 Nov 2020 14:34:54 +0000

Hello!
If you're curious about migrating repository to GitHub from GitLab or another registry I've recorded a quick demo on that.
I've found 2 possible ways to do that, but only one of them supports both public and private repositories. GitHub has the import functionality available in UI, but unfortunately, it seems not supporting private repositories so far. Anyway, it's a very easy task to do. Take a look at the video, just 2 minutes...

Thanks for watching! And please let me know if I've missed something here...

All you need to know about JSON in 5 minutes

JavaScript Room — Thu, 04 Jun 2020 11:38:50 +0000

Hi! I've never thought that JSON can be a topic for a standalone tutorial/post. But recently I got this suggestion from one of my followers on Instagram and decided to make a quick overview of JSON. I actually think now that it might be useful for some devs. So I recorded the 5 minutes video:

You also can get through the points by yourself, it's not difficult for understanding anyway. Let's write it down:

JSON (JavaScript Object Notation) is a lightweight format for storing and transporting data. It's heavily used on modern web.

Syntax

File extension is ".json"
Root element must be an object or an array
All keys must be double-quoted
String values must be double-quoted (escape double quotes in the value)
Number and boolean values must NOT be double-quoted
Comments are not supported by design
No trailing commas

A browser's environment, as well as Node.js, has the global object JSON working with this format. Basically, you need to know just two its methods:

JSON.parse(argument): string -> object/array
JSON.stringify(argument): object/array -> string

// examples
JSON.parse("{\"key\": \"value\"}"); // { key: "value" }
JSON.stringify({key: "value"}); //"{"key":"value"}"

That's what you need to know about JSON. Did I miss something important? Please let me know in comments then.

Thanks for watching/reading and welcome to JavaScript Room blog on Instagram, Twitter, Facebook and Telegram!

Node.js: Migration from JavaScript to TypeScript

JavaScript Room — Sat, 30 May 2020 10:26:07 +0000

Hi! I've recorded a small tutorial about migration a small Node.js application to TypeScript. If you're not familiar with TS yet but want to migrate an existing project, you may find this video helpful.

P.S. It's not difficult, at all... :)

Thanks for watching! Any feedback is appreciated!

Follow JavaScript Room blog on Instagram: https://www.instagram.com/room_js

(Another) TypeScript starter for Chrome extensions

JavaScript Room — Thu, 28 May 2020 10:08:12 +0000

Hi, everyone! I've recently built the small Chrome extension for LinkedIn (it's open-sourced and available on GitHub). When I just decided to make it, I took a look at available starters. I found some but they didn't fit my needs, so I configured the project from scratch. And after that, I thought that it might be useful to make a standalone starter, so I (or you) can quickly bootstrap a new Chrome extension next time. I even recorded the video with a quick overview for people who are completely new to the stack.

Here is the starter itself

room-js / chrome-extension-ts-starter

Chrome Extension starter built with TypeScript

chrome-extension-ts-starter

It is a boilerplate for a Chrome Extension built with TypeScript and Parcel.

This starter consists of the following parts

Background script (vanilla TS)
Content script (vanilla TS)
Options page (Vue.js, Sass)
Popup page (Vue.js, Sass)
DevTools panel page (React.js, Styled Components)

And, of course, the ./manifest.json file describing its configuration.

Environment

Node.js >=12.0.0
NPM >= 6.0.0

Most probably it will work with earlier versions too but I didn't test it.

Testing

Jest is included and ready for the vanilla TS parts. Testing for React/Vue is not included in order to keep the Jest config clean.

Scripts

npm run dist - build the extension into ./dist folder
npm run lint - ESLint for .ts and .tsx files
npm run test - Jest unit tests

View on GitHub

Also, I wanted to share with you some nice stuff that I've found just yesterday. These guys at Bumble are doing a great job around Chrome extensions. Take a look at the packages they have published. You might also find them useful for building extensions.

Thanks for reading/viewing! Feel free to star the repo and follow JavaScript Room blog on Instagram.
Have a great time and stay safe!

Gatsby.js starter with light/dark themes based on CSS variables (TypeScript)

JavaScript Room — Mon, 02 Mar 2020 22:23:44 +0000

Hello, all my dear JAMStack'ers! If you are opened this post you might be feeling as much excited as me when working with modern static website generators. They are becoming so powerful! And Gatsby.js is definitely somewhere at the top of the list now. It works on React.js, has a large ecosystem and pretty descriptive docs. So more and more devs are trying it out. If you're one of them, I have something for you! Today I'd like to share with you my fresh Gatsby.js starter.

What it includes:

TypeScript support
Light and Dark themes based on CSS variables (persisted state)
Font Awesome
Normalize.css
Styling is done with CSS Modules
SASS support (for both: global styles and CSS Modules)
ESLint for linting TS

I made it simple and based on the default starter. Not much styling, nothing extra, all is in your hands...

How it looks like:

Live demo is available here:

gatsby-starter-typescript-themes.netlify.com

GitHub repository:

room-js / gatsby-starter-typescript-themes

Starter for Gatsby.js with TypeScript and light & dark themes

gatsby-starter-typescript-themes

A Gatsby starter based on the gatsby-starter-default with TypeScript support and Light/Dark themes based on CSS variables.

Includes

TypeScript
CSS Modules
SASS (for both: global styles and CSS Modules)
Light and Dark themes based on CSS variables.

Preview

How to use

Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying the starter.

# create a new Gatsby site using the starter
gatsby new my-themed-starter https://github.com/room-js/gatsby-starter-typescript-themes

Start developing.

Navigate into your new site’s directory and start it up.
```
cd my-themed-starter/
gatsby develop
```
Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open the my-themed-starter directory in your code editor of choice and edit src/pages/index.js. Save…

View on GitHub

How to create a new project:

Install Gatsby CLI: npm install -g gatsby-cli
Create a new project from this starter: gatsby new my-themed-starter https://github.com/room-js/gatsby-starter-typescript-themes

Thank you for reading!
If you like the starter I kindly ask you to star the GitHub repo and like the post! Also, if you got any questions about it, please let me know in the comments.

Read JavaScript Room blog on Instagram: @room_js

How do YOU speed up Docker (Compose) on Mac?

JavaScript Room — Tue, 10 Dec 2019 18:35:17 +0000

Hey everyone!

As I see, the performance of docker/docker-compose is a pain point for many developers and devops folks. I'm on the list, for sure. I still have Docker Compose running super slow on my fresh Mac Air.

How about you? Are you okay with your Docker's performance? And what tricks helped you to configure it nicely?

Creating a custom widget for Netlify CMS

JavaScript Room — Fri, 06 Dec 2019 12:05:40 +0000

Hi, devs!

Today I would like to share a few things I've found recently working with Netlify CMS. This CMS has a set of built-in fields, that you can use in your schema. Those fields are called "widgets" in the Netlify CMS ecosystem. Each widget describes the specific entry data type. For example, there are widgets Date, Text, Boolean, etc. You can find all available widgets in the official docs.

Most of the time, you probably will be fine with these built-in widgets. But it's also nice to look forward and think in advance, what if someday I need more functionality than the original widgets provide? Luckily, authors of Netlify CMS thought of this also and made it possible to create and register a custom widget. Moreover, you even can find a few articles that show and explain how to do that. But, all of them weren't clear enough for me, they are hiding quite important details of the implementation. So I had to read all of the articles to make it work. So the goal of this post is putting all of the important things together.

If you are not interested in further reading and want to see the actual code, you can directly go to the demo on codesandbox or github repo

Let's write some code

A custom widget consists of two different React.js components: "control" and "preview". The first one is taking input from a user and the second one is responsible for how the user input data will be rendered in the preview area. As far as I understood, the preview component is optional and if you don't have it the data will be rendered in the preview anyway, but you have no control over the styling in this case.

So, let's start with writing these two React.js components.

I made the "control" component based on CKEditor, which is a rich text editor (similar to built-in Markdown widget).

// Control component - src/components/customWidget/CustomWidgetControl.js
import React, { PureComponent } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export class CustomWidgetControl extends PureComponent {
  onChange = (event, editor) => {
    const data = editor.getData();
    this.props.onChange(data);
  }

  render() {
    return (
      <CKEditor
        editor={ ClassicEditor }
        onChange={this.onChange}
      />
    );
  }
}

The important things about the control component:

It CAN NOT be a functional component (React.FC). If you make it FC it will not save data for some reason, so be aware of it.
You need to update the stored data manually. For this, the control component has a prop onChange that receives the new value as a parameter. We need to call this prop on every change.

// Preview component - src/components/customWidget/CustomWidgetPreview.js
import React from 'react';

export const CustomWidgetPreview = (props) => {
  return (
    <div dangerouslySetInnerHTML={{ __html: props.value}} />
  );
}

What we need to know here is just that we get the value from the component's props. In this case, we get the HTML string and render it as a raw HTML.

Register the widget

So, we have created components for our custom widget. Now we need to introduce this widget to Netlify CMS, make it visible for it. Talking by Netlify CMS' terminology, we have to register our widget.

// src/cms/cms.js
import CMS from 'netlify-cms-app';
import { CustomWidgetControl, CustomWidgetPreview } from '../components/customWidget';

CMS.registerWidget('mywidget', CustomWidgetControl, CustomWidgetPreview);

registerWidget() method accepts three arguments: widget name, control component and preview component. The last one is optional as I mentioned above.

Make sure that the JavaScript file with this code is injected into the CMS pages. In this particular case, it's done by gatsby-plugin-netlify-cms plugin, but it very depends on how you use Netlify CMS.

Add the field to your schema

// static/admin/config.yml
...
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "My Custom Widget", name: "mywidgetname", widget: "mywidget"}

Recap

Control component can not be a function
Call onChange prop in control component to update the value
Use value prop in the preview component to access the input data

I hope, this article will help you and save your time on research. Please let me know in comments if something stays unclear to you.

Source code / Demo

room-js / netlify-cms-custom-widget

Small demo to show how to create a custom widget for Netlify CMS

netlify-cms-custom-widget

Small demo to show how to create a custom widget for Netlify CMS

The custom widget components are located in ./src/components/customWidget folder.

Live demo on CodeSandbox

View on GitHub

5 news portals for web developers

JavaScript Room — Mon, 28 Oct 2019 13:34:00 +0000

Hi, devs! A web developer's environment is rapidly changing, we all know that. That's why it's very important to stay in sync with recent updates and changes around the programming world. Today I'd like to share five resources I've found useful to get fresh news and updates from. Let's quickly go through them all:

1. WebDesignerNews.com

This portal is collecting design and dev news on the main page and split them also into different categories so you can easier find what you need. My favorite category is webdev but you might find other categories interesting too.

2. TheNextWeb.com

The Next Web has mostly tech news of the wide range on its main page. But if you move to the Design & Dev section you might find there many interesting articles! Check it out.

3. Hub.Packtpub.com/news

Packt is quite a famous publishing company, they have released many tech books and keep doing a great job actually! Also, they have a "hub" - website and news portal for programmers. Don't miss it too!

4. InfoWorld.com

One more resource with news and updates related to both hardware and software. All the news here are also categorized, for web dev updates please check out the Web Development category.

5. FrontEndFront.com

The last resource is completely focused on front-end development and posts only articles and news related to it. The blog looks nice and allows you to add your story to it. It looks pretty promising, I personally will keep my eye on this one.

What do you think about these five websites, do you know/read them? Or maybe you can recommend other good resources? Do not hesitate to put your thoughts in comments, sharing is caring! :) Thanks for reading!

DEV Community: JavaScript Room

Building Reddit Game with Devvit and TypeScript (starter included)

First of all, what is the Reddit Games?

A couple of words about Devvit

Need to start Blocks app quickly?

GraphQL schema - sharing Input and Output types structure

Dependabot: what is your favorite configuration (approach)?

Deleting all S3 buckets in a single CLI command

Delete all S3 buckets stored in your AWS account (including not empty):

Delete only empty buckets (without --force flag):

Delete only buckets with the prefix old_:

How to transfer repository from GitLab to GitHub

All you need to know about JSON in 5 minutes

Syntax

Node.js: Migration from JavaScript to TypeScript

(Another) TypeScript starter for Chrome extensions

Here is the starter itself

room-js / chrome-extension-ts-starter

Chrome Extension starter built with TypeScript

chrome-extension-ts-starter

This starter consists of the following parts

Environment

Testing

Scripts

Gatsby.js starter with light/dark themes based on CSS variables (TypeScript)

What it includes:

How it looks like:

Live demo is available here:

GitHub repository:

room-js / gatsby-starter-typescript-themes

Starter for Gatsby.js with TypeScript and light & dark themes

gatsby-starter-typescript-themes

Includes

Preview

How to use

How to create a new project:

How do YOU speed up Docker (Compose) on Mac?

Creating a custom widget for Netlify CMS

Let's write some code

The important things about the control component:

Register the widget

Add the field to your schema

Recap

Source code / Demo

room-js / netlify-cms-custom-widget

Small demo to show how to create a custom widget for Netlify CMS

netlify-cms-custom-widget

Live demo on CodeSandbox

5 news portals for web developers

1. WebDesignerNews.com

2. TheNextWeb.com

3. Hub.Packtpub.com/news

4. InfoWorld.com

5. FrontEndFront.com

Delete only empty buckets (without `--force` flag):

Delete only buckets with the prefix `old_`: