Tag: Javascript

Taking Bun JavaScript runtime for a spin

Taking Bun JavaScript runtime for a spin

Bun has made a big splash on reaching version 1.0. It is so much faster than Nodejs and provides enough compatibility with Nodejs to get most people interested. One of the key design decisions that helped Bun achieve this outstanding performance is to bundle all the tooling required for a typical JavaScript project into a…

Read More Read More

Released svelte-lexical 0.3.1: Upload images

Released svelte-lexical 0.3.1: Upload images

It is a minor release including few bug fixes and minor enhancements. We have to ability to upload images now, earlier images could only be added using a URL. Another enhancement is the ability to use collaboration in nested editors like image caption. Here is a demo: Change Log:

Released svelte-lexical 0.3.0: Code blocks and link editor

Released svelte-lexical 0.3.0: Code blocks and link editor

svelte-lexical version 0.3.0 is out with a lot of new features and bug fixes. Now, we can insert code blocks. They support keyword and syntax highlighting in 14 different languages. Also, there is support for code formatting using Prettier for HTML, JavaScript, CSS and markdown. Another focus area for enhancements in this release is hyperlinks.…

Read More Read More

Type transformations in TypeScript: Removing functions from a type

Type transformations in TypeScript: Removing functions from a type

TypeScript is often quoted as one of the most loved programming languages (StackOverflow, 2022). I guess, what contributes to it is the ease with which TypeScript can be introduced in a JavaScript project and the benefits it bring like static type checking, null safety, better refactoring and IntelliSence support. Another aspect of TypeScript which I…

Read More Read More

Unit testing in Svelte

Unit testing in Svelte

We are going to set up unit testing in Svelte using Testing Library and Jest. The working version of the project is available here. You can use it as a starter template for your project. 1 – Let’s start with the standard svelte template to create a new project. You need to have Nodejs, npm,…

Read More Read More

Developed a Rich-text Editor for Svelte (svelte-lexical)

Developed a Rich-text Editor for Svelte (svelte-lexical)

Developed a rich-text editor for svelte called svelte-lexical. It is based on Lexical, an open source framework for creating rich-text editors developed by Facebook. Here is the GitHub repo: https://github.com/umaranis/svelte-lexical Technical details

CSS in Svelte

CSS in Svelte

Svelte is a front-end framework for web development, you can find more about it here. This post is about using CSS in Svelte. CSS in Svelte Components CSS styles specified in Svelte components are scoped to the component itself, meaning they don’t affect anything outside the component. Svelte compiler achieves this by making appropriate changes…

Read More Read More

Svelte – a difficult kind of UI Framework

Svelte – a difficult kind of UI Framework

Svelte is a front-end framework for web development like React, Vue and Angular. In a short time, Svelte has become very popular as you can see from ‘State of JS’ survey or the stars on it’s GitHub repo. Single Page Application (SPA) These UI Frameworks enable us to create single-page applications where most of the…

Read More Read More

Create Masonry Layout with CSS (Grid with variable-sized contents arranged in columns)

Create Masonry Layout with CSS (Grid with variable-sized contents arranged in columns)

Source code for examples in this article can be found at https://github.com/umaranis/css-masonry-layout In Masonry layout, variable-sized items are arranged in columns. It is different from a regular grid in the sense that it doesn’t have fixed-sized rows. Pinterest is a popular example of the masonry layout. The layout looks beautiful and makes efficient use of…

Read More Read More

Add linting to NodeJs and TypeScript project

Add linting to NodeJs and TypeScript project

We are going to install TypeScript ESLint for finding potential problems with our code. Most online tutorials talk about using TSLint for TypeScript, but it is deprecated now in favour of ESLint. Let’s start by installing ESLint. To configure the linter, we need to create a config called .eslintrc.js in the root directory. Let’s create…

Read More Read More