Forem: Arnav Bansal

How to normalize (join together) bold nodes in HTML DOM?

Arnav Bansal — Sun, 01 Sep 2019 19:57:22 +0000

I'm building a contenteditable editor which involves multiple rows of contenteditable divs

I want to turn this:

Lorem Ipsum Dolor Sit Amet

into this:

Lorem Ipsum Dolor Sit Amet

How do you split contenteditable text preserving html formatting? [solved]

Arnav Bansal — Sun, 11 Aug 2019 10:36:21 +0000

I'm using contenteditable divs to represent paragraphs in my editor. I've implemented most of the usual editing features

Splitting paragraphs breaks when any HTML formatting is involved.

For example, adding a space and hitting enter results in

&
nbsp;

Of course, ' ' being a single character that represents a space.

Solution (Update)

Okay I figured it out.

innerHTML and innerText aren't useful for DOM manipulation.

However, the selection and ranges API is great for this. extractContents automatically splits elements without breaking markup.

function splitNode(selection, root) {
  let range = selection.getRangeAt(0);
  let {firstChild, lastChild} = root;

  let previousRange = document.createRange();
  previousRange.setStart(firstChild, 0);
  previousRange.setEnd(range.startContainer, range.startOffset);

  let nextRange = document.createRange();
  nextRange.setStart(range.endContainer, range.endOffset);
  nextRange.setEnd(lastChild, lastChild.length);
  return {
    previous: previousRange,
    current: range,
    next: nextRange,
  };
}

let ranges = splitNode(document.getSelection(), contentEditableDiv);
let nextFragment = ranges.next.extractContents();

How do you detect what line it is in wrapped text elements?

Arnav Bansal — Wed, 07 Aug 2019 11:47:04 +0000

I'm implementing a custom editor that uses rows of contenteditable divs. I'm having trouble implementing the right behavior for the 'up' or 'down' key.

When the 'up' key is pressed, I need to detect whether the caret is on the first line of text, and move the caret to the div above. Likewise for the 'down' key and the last line of text.

Thanks!

How do I detect if the '+' key is pressed (without the shift)

Arnav Bansal — Sun, 14 Jul 2019 14:49:39 +0000

I want to trigger the KeyboardEvent for the '+' key even if the '=' key is pressed

'shift+=' is '+' on English keyboards, but on other keyboards, the key for which 'shift+key' is '+' might be different. How do I account for all such cases?

Database design where state is a function of mutations.

Arnav Bansal — Wed, 09 Jan 2019 19:55:26 +0000

I'm thinking along the lines of redux, where the state is a function of an initial state, and mutations carried out by reducers.

The benefit is that mutations can capture a large amount of information, and as requirements change, the reducers can be modified to produce a new state.

Also, we have a history built in.

Is this a common pattern in database design?

Specifically, I'm considering implementing this on Firestore. What should I know?

How do people even work with colors?

Arnav Bansal — Sun, 25 Nov 2018 13:01:12 +0000

My monitors show colors differently.

My phone's brightness changes, depending on the lighting.

The angle at which I'm looking at the screen affects the color.

My room's lighting differs throughout the day.

I'm sure I see colors differently right after waking up.

I'm sure I see colors differently after I've been working for a while.

I'm not sure we all see colors the same way (Is my red the same as your red?).

Some people are color-blind (and for them, I'm contrast-blind).

How do people even work with colors?

Can CSS color variables depend on each other? Help me fight off CSS preprocessors.

Arnav Bansal — Fri, 23 Nov 2018 10:47:40 +0000

Here, --dark-highlight is a brighter version of --dark. Is there a way I can set --dark-highlight to be dependent on --dark, where it automatically uses the same hue, saturation, and alpha values, but increases the lightness by 5%

:root {
  --dark: hsla(209, 28%, 6%, 1);
  --dark-highlight: hsla(209, 28%, 11%, 1);
}

Also, what's a good guide to the new CSS features?

How do you customize service workers for Angular 6+? I'm making use of Firebase, and it needs a service worker.

Arnav Bansal — Tue, 20 Nov 2018 14:42:04 +0000

I'm using Ionic 4/Angular 6 with Firebase.

I enabled Angular with this command

ng add @angular/pwa@v6-lts --project app

It generated ngsw-config.json, which generates a service worker in production. But how do I add code to the service worker?

I'm adding Firebase to it, to make use of Firebase Cloud Messaging.

What are the advantages of using Pub/Sub instead of directly triggering through HTTP (Google Cloud Scheduler)?

Arnav Bansal — Mon, 19 Nov 2018 13:02:36 +0000

My guess: security.

Cloud Scheduler doesn't seem to provide any way to verify the request source. If the endpoint is discovered, users could trigger the endpoint outside schedule.

Are there any other benefits of using pub/sub?

Google Cloud Scheduler: https://cloud.google.com/scheduler/

Google Cloud Pub/Sub: https://cloud.google.com/pubsub/

I'm upgrading a React frontend that's an year old. My current process is slow and painful. How could I speed it up?

Arnav Bansal — Mon, 22 Oct 2018 06:24:44 +0000

I'm working on a React 15 project that compiles in Node 6, and am updating it to React 16/Node 10.

My current process: I use npm outdated to find old packages and update them to newer versions. I run npm install after that, and then load the frontend with webpack.

I've found that there are several packages that might be deeply interdependent, and updating one without making changes or updating other packages breaks the frontend with an error in 'linkClass.js'

I'd appreciate any help.

I'm looking for an embeddedable code editor. Preferably one that looks great.

Arnav Bansal — Wed, 17 Oct 2018 05:01:45 +0000

I'm creating an online demo for a web technology. I need an editor that can highlight at least JavaScript. Edit functionality isn't a must.

But it must look fabulous.

What's the go-to editor for this?

Why you need to know about the Lindy effect, as a developer.

Arnav Bansal — Mon, 15 Oct 2018 20:15:35 +0000

Age affects living beings negatively. Younger organisms can be expected to outlast older ones.

But non-perishable things like ideas, music, and technology behave differently.

If a book has been in print for forty years, I can expect it to be in print for another forty years. But, and that is the main difference, if it survives another decade, then it will be expected to be in print another fifty years. This, simply, as a rule, tells you why things that have been around for a long time are not "aging" like persons, but "aging" in reverse. Every year that passes without extinction doubles the additional life expectancy. This is an indicator of some robustness. The robustness of an item is proportional to its life!
-Nassim Taleb

The longer technologies have survived, the longer they are likely to stay alive. This is called the Lindy effect.

It's worth applying the idea of the Lindy effect to something like the JavaScript ecosystem, and programming in general. Frameworks come and frameworks go. Languages behave similarly, although to a lesser extent. But algorithms and the math underneath them doesn't change much.

If you're building something, especially if for the long term, the Lindy effect might be a good counterbalance to the urge of experimenting with new things.