Forem: Axorax

List of JavaScript runtimes - 2025

Axorax — Fri, 17 Jan 2025 13:30:37 +0000

Node.js

https://nodejs.org/

Engine: V8

Features:

Extensive ecosystem with npm.
Long-term community support and large developer base.

Deno

https://deno.com/

Engine: V8

Features:

Secure by default (sandboxed environment).
Built-in utilities for modern development (e.g., file fetch, testing).

Bun

https://bun.sh/

Engine: JavaScriptCore

Features:

Extremely fast runtime.
Integrated bundler, transpiler, and package manager.
Built-in support for popular APIs like fetch and WebSocket.

Winter.js

https://github.com/wasmerio/winterjs

Engine: SpiderMonkey

Features:

Supposed to be fast.
idk

Txiki.js

https://github.com/saghul/txiki.js

Engine: QuickJS

Features:

Lightweight and embeddable.
Cross-platform with minimal dependencies.
Ideal for constrained environments.

Napa.js

https://github.com/microsoft/napajs

Archived
Engine: V8

Features:

Multi-threaded JavaScript runtime.
Provides workers for parallel execution.

Window.js

https://windowjs.org/

Archived
Engine: QuickJS

Features:

Lightweight runtime for building GUI applications.
Minimal dependencies, built for simplicity.
Integrated rendering engine for native-like UI.

What is micropython?

Axorax — Mon, 29 Jul 2024 15:39:58 +0000

You may have heard the word "micropython". When I first came across this word, I was pretty confused. Is it a library for Python? What is it used for? And many more. In this post, I will try my best to explain what micropython is in simple terms. If I make any mistakes feel free to correct me in the comments.

What exactly is it?

Micropython is a simple implementation of Python 3. It's not a library for Python or anything. It has some of the standard libraries of Python.

Micropython is run on microcontrollers and it is optimized for it.

This is what they say about micropython on their website:

MicroPython is a lean and efficient implementation of the Python 3 programming language that includes a small subset of the Python standard library and is optimised to run on microcontrollers and in constrained environments.

The MicroPython pyboard is a compact electronic circuit board that runs MicroPython on the bare metal, giving you a low-level Python operating system that can be used to control all kinds of electronic projects.

MicroPython is packed full of advanced features such as an interactive prompt, arbitrary precision integers, closures, list comprehension, generators, exception handling and more. Yet it is compact enough to fit and run within just 256k of code space and 16k of RAM.

MicroPython aims to be as compatible with normal Python as possible to allow you to transfer code with ease from the desktop to a microcontroller or embedded system.

Summary:

MicroPython is a compact version of Python 3 for microcontrollers. It supports advanced features and a subset of the standard library. The MicroPython pyboard runs it directly on hardware for projects. It's compatible with standard Python for easy code transfer. It fits within 256k of code space and 16k of RAM.

How does the syntax look like?

import machine
import utime

# Configure the pin connected to the LED
led = machine.Pin(2, machine.Pin.OUT)

# Blink the LED in an infinite loop
while True:
    led.value(1)    # Turn the LED on
    utime.sleep(1)  # Wait for 1 second
    led.value(0)    # Turn the LED off
    utime.sleep(1)  # Wait for 1 second

More information and download

Their website: https://micropython.org/
Download: https://micropython.org/download/

Hope you found it useful!

Deploy static site manually using Netlify in 2024

Axorax — Mon, 29 Jul 2024 13:34:20 +0000

In this post, I will show you how to deploy a static site using Netlify.

Requirements

a Netlify account
a static site (to deploy)

Steps

1. Login to Netlify

2. Add new site > Deploy manually

3. Drag and drop your folder

Done!!!

X / Twitter alternative platforms

Axorax — Mon, 29 Jul 2024 11:38:08 +0000

Twitter is not what it used to be anymore. The name changed to X and a lot of restrictions were implemented for developers as well as users. They also made the blue checkmark available for anyone to get by paying a monthly fee. In this article, I will share some alternatives to X (formerly Twitter). However, I want to mention that I still use X and I'm not telling anyone to stop using the platform or anything. I'm only sharing some alternatives.

Mastodon

https://joinmastodon.org/

A decentralized social network where users can join different servers but still interact across the network.

Threads

https://www.threads.net/

A social networking service developed by Meta that is designed to compete with Twitter / X.

Hivesocial

https://www.hivesocial.app/

A social network that combines the best features of social media with a chronological feed. It feels like a mix of X and Instagram.

Minds

https://www.minds.com/

A social network focused on open-source and privacy.

5 sites to check website accessibility

Axorax — Sun, 28 Jul 2024 12:08:13 +0000

Website accessibility is more important than ever nowadays. It can be a bit difficult to manually check if your site follows all of the standards or not. So, I've made a list of some services that will help you to ensure you follow all of the standards!

And the best part? They are all FREE!!!

Wave

https://wave.webaim.org/

WAVE® is a suite of evaluation tools that help authors make web content more accessible to individuals with disabilities. It identifies many accessibility and WCAG errors and supports human evaluation of web content, focusing on issues that impact end users and promoting web accessibility education.

Accessibilitychecker

https://www.accessibilitychecker.org/

AccessibilityChecker provides a free ADA and WCAG compliance checker that identifies web accessibility issues and gives exact instructions for fixing them.

Accessibe

https://accessibe.com/accessscan

Accessibe allows you to find out if your site is accessible & ADA Compliant or not.

Websiteaccessibilitychecker

https://websiteaccessibilitychecker.com/checker/index.php

Their site looks very old. To be honest, it's probably the worst one in this list. They failed to detect any flaws in one of my sites (which has some accessibility issues).

Deque

https://www.deque.com/free-accessibility-test/

Find the accessibility issues you need to fix and meet your compliance goals. A quick automated scan, powered by axe, provides a summary report and an offer to book an in-depth consultation with a Deque expert.

Add background blur with one line of CSS

Axorax — Sun, 28 Jul 2024 04:04:39 +0000

Adding background blur to an element can make it more visually appealing and it's also REALLY use to do it. So, you might as well add it cuz why not? ¯\_(ツ)_/¯

The line of code you need

backdrop-filter: blur(5px);

Besides that, make sure that the element that will have a blurred background is not a solid color but is a bit transparent. And, ensure that the background of that element is not a solid color either.

Full code / Example

HTML

<h1>Subscribe to Axorax!</h1>

CSS

body {
  background: url("./nature.jpg") no-repeat center center / cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  font-family: "arial", sans-serif;
}

h1 {
  padding: 1.5rem;
  border-radius: 10px;
  color: #ffffff;
  /* ↓ Important ↓ */
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(5px);
}

Thanks for reading! Have an amazing day! ✨

How to delete entire git commit history?

Axorax — Fri, 26 Jul 2024 00:34:35 +0000

I have deleted my git commit history plenty of times just to make my repository look "clean" (roast me in the comments for it). It's probably best to not do this but I will still share how to do it.

Delete entire commit history

git checkout --orphan latest_branch

git add -A

git commit -am "commit message"

git branch -D main

git branch -m main

git push -f origin main

I did not figure this out myself or anything. I got it from here. It's by Desta Haileselassie Hagos, later edited by creyD

Personally, I don't like to type out every single one of those commands. So, I made a Git alias that allows me to do all of that in one single command. Using my Git alias the command becomes:

git renew "sub to axorax"

To make the Git alias for yourself, paste the command below in the terminal:

git config --global alias.renew '!f() { \
  git checkout --orphan latest_branch && \
  git add -A && \
  git commit -am "$1" && \
  git branch -D main && \
  git branch -m main && \
  git push -f origin main; \
}; f'

Gradient text for your website in 5 methods

Axorax — Thu, 25 Jul 2024 17:04:24 +0000

In this article, I will show you a couple of ways to get gradient text using CSS (and some without CSS). You may already be familiar with one of the methods.

HTML for method - 1, 2 and 3

<h1>Sub to Axorax on YT!</h1>

Method - 1 (CSS)

h1 {
  background: -webkit-linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Method - 2 (CSS)

h1 {
  background: linear-gradient(#e28bfc, #8bb8fc);
  background-clip: text;
  color: transparent;
}

Method - 3 (CSS clip-path)

h1 {
  position: relative;
  display: inline-block;
}

h1::before {
  content: "Sub to Axorax on YT!";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  color: transparent;
  clip-path: text;
}

Method - 4 (SVG)

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#e28bfc;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8bb8fc;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text x="10" y="50" font-size="72" fill="url(#gradient)">Gradient Text</text>
</svg>

Method - 5 (HTML canvas)

<canvas id="canvas" width="800" height="200"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '3rem sans-serif';
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, '#e28bfc');
  gradient.addColorStop(1, '#8bb8fc');
  ctx.fillStyle = gradient;
  ctx.fillText('Sub to Axorax on YT!', 10, 100);
</script>

Hope you found something useful!

Add placeholder text to div with contenteditable="true"

Axorax — Thu, 25 Jul 2024 07:55:59 +0000

You may have come across the contenteditable attribute. It's used in many places. It's a much better alternative to something like a textarea. You can add contenteditable="true" to any div and then it acts like an input field. In this article, I will show you how to add placeholder to text to it as it doesn't support the placeholder attribute right out of the box.

The code needed

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

That's all the code you need! However, if you only add that to the CSS then it won't work. You need to add a placeholder attribute to your HTML and also ensure that the div is visible.

Full code / Example

HTML

<div contenteditable="true" placeholder="Subscribe to Axorax on YT! :D"></div>

CSS

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

That's all there is to it. Hope you find it useful!