DEV Community: Eugene Karataev

Excalidraw state management

Eugene Karataev — Fri, 20 Mar 2020 13:18:12 +0000

Excalidraw is a nice minimalistic drawing tool for block diagrams, sketches e.t.c.

It was written by Christopher Chedeau, who works at Facebook. He worked on projects like React Native, create-react-app, Prettier and many others.

The project uses React and Typescript and is open-source. I was interested what state management library top-notch frontend engineers use for their side projects nowdays.

Is it Redux? Redux Toolkit? MobX? Context API?

It turns out that no external state management library was used. Instead there is a custom mix of local component state and Redux.

I was interested in how this system works and I wrote a minimal example to reproduce Excalidraw's state management. There are three main blocks:

Actions. They are like Redux reducers: recieve state and an optional payload and produce a new state with changes.

export const increment = register({
  name: 'increment',
  perform: state => ({
    ...state,
    counter: state.counter + 1
  })
});

export const decrement = register({
  name: 'decrement',
  perform: state => ({
    ...state,
    counter: state.counter - 1
  })
});

Action Manager. This guy is responsible for registering and performing actions.

export class ActionManager {

  actions: {[keyProp: string]: Action};
  updater: UpdaterFn;
  getState: GetStateFn;

  constructor(updater: UpdaterFn, getState: GetStateFn) {
    this.updater = updater;
    this.actions = {};
    this.getState = getState;
  }

  registerAction = (action: Action) => {
    this.actions[action.name] = action;
  };

  registerAll = (actions: Action[]) => {
    actions.forEach(action => this.registerAction(action));
  };

  renderAction = (name: string, payload?: any) => {
    const action = this.actions[name];
    if (!action) {
      console.log(`No action with name ${name}`);
      return;
    }
    const newState = action.perform(this.getState(), payload);
    this.updater(newState);
  }
}

State. The application state lives in the root App component and gets updated from ActionManager.

const initialState: AppState = {
  counter: 1,
  todos: []
};

class App extends React.Component<any, AppState> {

  actionManager: ActionManager;

  constructor(props: any) {
    super(props);

    this.state = initialState;
    this.actionManager = new ActionManager(this.stateUpdater, this.getState);
    this.actionManager.registerAll(actions);
  }

  getState = () => this.state;

  stateUpdater = (newState: AppState) => {
    this.setState({...newState});
  };

  render() {
    return (
      <div>
        <Counter actionManager={this.actionManager} appState={this.state} />
        <hr />
        <Todo actionManager={this.actionManager} appState={this.state} />
      </div>
    )
  }
}

When application starts the app state is created and a new instance of ActionManager is instantiated. Both state and actionManager are provided as props to every react component down the tree. When a component wants to make a change, it calls actionManager.renderAction('someAction').

This is an interesting approach to state management which I did not met before. It has minimum boilerplate compared to the classic Redux.
There is props drilling with state and actionsManager, but it's not that bad.
The business logic is nicely grouped in actions folder and can be easily accessed from any component from the tree.

Here's the codesandbox demo if you're interested.

DEV users landscape

Eugene Karataev — Mon, 09 Dec 2019 09:38:39 +0000

One day I was reading DEV and noticed Ben's post saying that there are more than 250k registered users. "Wow, that's a lot" I thought.

Couple of weeks later I saw the post describing the current state of DEV API. And I thought it'd be interesting to have a bird eye view on the DEV users landscape.

And here we go

Features:

250k user avatars in one place
hover on an avatar to reveal username
click on a user avatar for more info on dev.to website
search for a user

P.S.
There are just 250k users, so users registered after mid of October 2019 are not included.

Technical details

I used chunks promise pattern to fetch the users data with Node.js

Handling a lot of requests in JavaScript with promises

Eugene Karataev ・ Oct 22 '19 ・ 2 min read

#javascript #promises #fetch
Avatars were merged into big images with canvas
There are 25 images, each image contains 10k users
React for UI

Let me know if you have any questions 🙃

JavaScript prototypes by example

Eugene Karataev — Mon, 04 Nov 2019 15:59:10 +0000

Prototypes in JavaScript are the mechanism to share common functionality between objects. They are powerful, but sometimes confusing. Let's explore prototype behavior by example. You can try and experiment with examples below in a browser's developer tools.

We start with constructor function Object to create object instances

typeof Object; // function

It has prototype property with useful methods like toString, valueOf, e.t.c.

Object.prototype; // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

Two ways of object creation

var obj1 = new Object();
var obj2 = {};

Every object instance on creation receives __proto__ property

var obj = {};
obj.__proto__; // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

Object.getPrototypeOf is a modern replacement to the old __proto__ property

var obj = {};
Object.getPrototypeOf(obj) === obj.__proto__; // true

An object's __proto__ and Object.prototype is exactly the same object

var obj = {};
obj.__proto__ === Object.prototype; // true

Objects are different, but share the same prototype

var obj1 = {};
var obj2 = {};
obj1 === obj2; // false
obj1.__proto__ === obj2.__proto__; // true

Prototype chain terminates with null

var obj = {}
obj.__proto__.__proto__ // null

A property added to prototype is available to all instances (it's not recommended to modify built-in prototypes!)

var obj1 = {};
var obj2 = {};
obj2.foo // undefined
obj1.__proto__.foo = 'bar';
obj2.foo; // bar

It's possible to create an object without a prototype. In this case handy methods like toString, valueOf, e.t.c. would not be available

var obj1 = {a: 1};
var obj2 = Object.create(null);
obj2.__proto__; // undefined
obj1 + ''; // "[object Object]"
obj2 + ''; // Uncaught TypeError: Cannot convert object to primitive value

It's possible to change an object's __proto__ link at any time

var obj = {};
obj.toString(); // "[object Object]"
Object.setPrototypeOf(obj, null);
obj.toString(); // Uncaught TypeError: obj.toString is not a function
Object.setPrototypeOf(obj, Object.prototype);
obj.toString(); // "[object Object]"

You can construct prototype chains of any length

var obj1 = {};
var obj2 = Object.create(obj1);
obj2.__proto__ === obj1; // true

If a property isn't found in an object, it's searched in prototype chain all way to the top

var obj1 = {a: 1};
var obj2 = Object.create(obj1);
obj2.hasOwnProperty('a'); // false
obj2.a // 1

Properties creation happens in a current object, not in a prototype

var obj1 = {a: 1};
var obj2 = Object.create(obj1);
obj2.hasOwnProperty('a'); // false
obj2.a; // 1
obj2.a = 2;
obj2.hasOwnProperty('a'); // true
obj2.a; // 2
obj2.__proto__.a; // 1

A property value is searched in a current object first. If it's not found, the search continues in the prototype chain until the property is found or prototype chain ends. This may cause performance issues as described in the post below

With great prototype power comes great responsibility

Eugene Karataev ・ Jul 13 '19 ・ 1 min read

#javascript #prototype #inheritance #object

Primitives has their own prototypes

var n = 1;
n.__proto__ === Number.prototype; // true
n.__proto__.__proto__ === Object.prototype; // true

You can't change prototype of Object.prototype

Object.setPrototypeOf(Object.prototype, {}); // Uncaught TypeError: Immutable prototype object '#<Object>' cannot have their prototype set

Cyclic proto chains are prohibited

var obj1 = {};
var obj2 = {};
Object.setPrototypeOf(obj1, obj2);
Object.setPrototypeOf(obj2, obj1); // Uncaught TypeError: Cyclic __proto__ value

It was common to create function constructors and extends their prototypes with useful methods available to all instances

var Cat = function() {};
Cat.prototype.sayHi = function() {return 'meow'};
var cat = new Cat();
cat.__proto__ === Cat.prototype; // true
cat.sayHi(); // "meow"

ES2015 class is a syntactic sugar on prototypes

class Animal {};
var cat = new Animal();
cat.__proto__ === Animal.prototype; // true

Extending a class means extending a prototype chain

class Animal {};
class Cat extends Animal {};
var cat = new Cat();
cat.__proto__.__proto__ === Animal.prototype; // true

Please share your examples of working with prototypes in the comments section.

Handling a lot of requests in JavaScript with promises

Eugene Karataev — Tue, 22 Oct 2019 15:30:59 +0000

Let's say you need to fetch and process a lot of data from a remote server. It might be any REST API endpoint, but for demonstration purposes I'll take JSONPlaceholder. I'll use Node.js, but the same principles are applicable for a browser.

JSONPlaceholder has photos endpoint which returns a simple json data by photo id:

{
  "albumId": 1,
  "id": 1,
  "title": "accusamus beatae ad facilis cum similique qui sunt",
  "url": "https://via.placeholder.com/600/92c952",
  "thumbnailUrl": "https://via.placeholder.com/150/92c952"
}

I'll use helper function getIdList to generate array with required amount of IDs.

const getIdList = n => [...new Array(n)].map((item, i) => i + 1);
getIdList(5); // [1,2,3,4,5]

axios will help to fetch the data:

function fetchPhoto(id) {
  const url = `https://jsonplaceholder.typicode.com/photos/${id}`;
  return axios.get(url)
    .then(res => res.data)
}

All at once

My first intention to solve the problem of handling thousands of requests was to start all requests in parallel and process the result when all requests are completed.

function all(items, fn) {
  const promises = items.map(item => fn(item));
  return Promise.all(promises);
}

It works great for small amount of items. Making 10, 50, 100 requests at the same time seems like a good idea. Fetching 10 items in parallel on a good connection takes less than a second.
But what about 2000 items?
Chances are that you'll hit the problem
(node:6740) UnhandledPromiseRejectionWarning: Error: read ECONNRESET
or
(node:3808) UnhandledPromiseRejectionWarning: Error: connect ETIMEDOUT
or
(node:7052) UnhandledPromiseRejectionWarning: Error: Client network socket disconnected before secure TLS connection was established

The point is that Node can't handle a lot of connections at the same time and we need to rethink the solution.

One by one

Other option is to solve the problem step by step. Let's start next request only after previous has been resolved.

function series(items, fn) {
  let result = [];
  return items.reduce((acc, item) => {
    acc = acc.then(() => {
      return fn(item).then(res => result.push(res));
    });
    return acc;
  }, Promise.resolve())
    .then(() => result);
}

Now it takes 4-5 seconds to fetch 10 items instead of one second in the previous example. But requesting 2000 items will not fail, so kinda success here. But how can we improve the algorithm completion time?

Divide and conquer

Let's take the best parts of both solutions and combine them together. We'll split all requests into chunks and fetch these chunks one by one. Feel free to experiment with the chunk size, I think for this example 50 requests per chunk would be fine.

function splitToChunks(items, chunkSize = 50) {
  const result = [];
  for (let i = 0; i < items.length; i+= chunkSize) {
    result.push(items.slice(i, i + chunkSize));
  }
  return result;
}

function chunks(items, fn, chunkSize = 50) {
  let result = [];
  const chunks = splitToChunks(items, chunkSize);
  return series(chunks, chunk => {
    return all(chunk, fn)
      .then(res => result = result.concat(res))
  })
    .then(() => result);
}

Awesome! Now we can handle a lot of requests with managable amount of time.

Conclusion

Results for fetching 2000 items:
all: ❌ Fetch error
series: ✅ 11 min 35 s
chunks: ✅ 1 min 12 s

Code on github

With great prototype power comes great responsibility

Eugene Karataev — Sat, 13 Jul 2019 16:29:42 +0000

Let's say we have a simple object in JavaScript.

let obj = {a: 1};
console.log(obj.a);

Accessing an object's property have O(1) complexity, i.e. it's super fast. But it's not that simple. If a property is not found, it's searched in the object's prototype. If it's not found again, the process continues until the prototype chain root is reached.

So, the property lookup process might be very time consuming in case of an object with long prototype chain.

Here's an example

function getObjectWithLongPrototypeChain(depth = 1) {
  let nextObj = {a: 1};

  for (let i = 0; i < depth; i++) {
    nextObj = Object.create(nextObj);
  }
  return nextObj;
}

let regularObject = {a: 1};
let longObject = getObjectWithLongPrototypeChain(1000000);

let t0;
let t1;
t0 = performance.now();
console.log(regularObject.a);
t1 = performance.now();
console.log(`Property lookup in the regular object took ${(t1 - t0)} milliseconds.`);

t0 = performance.now();
console.log(longObject.a);
t1 = performance.now();
console.log(`Property lookup in the object with long prototype chain took ${(t1 - t0)} milliseconds.`);

And the results are

Property lookup in the regular object took 0.21500000730156898 milliseconds.
Property lookup in the object with long prototype chain took 42.249999998603016 milliseconds.

So, the basic operation of property lookup for the second object took an incredible amount of time! While it's almost impossible to have objects with so long prototype chains in production code, I think it's good to know how JS engine resolves property lookup for objects.

I tried 10 programming languages and I liked it

Eugene Karataev — Fri, 05 Jul 2019 15:24:39 +0000

For the last several years I've been using JavaScript in my day-to-day work. But what about other programming languages? Most of them grow and evolve as well as JS. I thought it'd be interesting to take a look at the structure and syntax of 10 different programming languages.

I deciced to write FizzBuzz program with every language. It's a simple algorithm, but requires to know how to write loops, conditionals and declare variables. That's should be enough for introduction.

1. JavaScript

I'll start with the most familiar one.
REPL

for (let i = 1; i <= 100; i++) {
  let result = '';
  if (i % 3 === 0 && i % 5 === 0) result = 'FizzBuzz';
  else if (i % 3 === 0) result = 'Fizz';
  else if (i % 5 === 0) result = 'Buzz';
  else result = i;
  console.log(result);
}

Short and easy. Feels like a breeze.

2. TypeScript

Just add types and you're ready to go.
REPL

let result: string;
for (let i:number = 1; i <= 100; i++) {
  if (i % 3 === 0 && i % 5 === 0) result = 'FizzBuzz';
  else if (i % 3 === 0) result = 'Fizz';
  else if (i % 5 === 0) result = 'Buzz';
  else result = String(i);
  console.log(result);
}

3. Python

I tried Python couple of times in the past, but I can say that I spent no more that 10 hours programming Python in my whole life. I just remember it's necessary to use indentation instead of curly braces 😂
Here come the first difficulties. How do I create a loop? What is the syntax for logical operators? If/elif. Google, google, google.
REPL

result = ''
for i in range(1, 101):
  if i % 3 == 0 and i % 5 == 0:
    result = 'FizzBuzz';
  elif i % 3 == 0:
    result = 'Fizz'
  elif i % 5 == 0:
    result = 'Buzz'
  else:
    result = i;
  print(result)

4. Basic

Time for the nostalgia. QBasic is the language of my childhood. I remember drawing complex pictures with LINE and CIRCLE commands 🤓
And 20 years ago GOTO instructions were used everywhere even Go To statement considered harmful was written in 1968.
Writing FizzBuzz, I noticed that string variables MUST end with dollar sign, otherwise the compiler will scream at you, wow.
Also it's neccessary to explicitly coerce types. No dynamic type coercion like in JS!
REPL

result$ = ""
FOR i = 1 TO 100
IF i MOD 3 = 0 AND i MOD 5 = 0 THEN
  result$ = "FizzBuzz"
ELSE IF i MOD 3 = 0 THEN 
  result$ = "Fizz"
ELSE IF i MOD 5 = 0 THEN 
  result$ = "Buzz"
ELSE 
  result$ = STR$(i)
END IF
PRINT result$
NEXT i

5. C++

I remember C++ as a language for "real programmers" with pointers, manual memory allocation and all that low-level stuff.
Again explicit coercion from number to string. Also it's necessary to include standard libraries for useful functions.
REPL

#include <iostream>
#include <string>

int main() {
  std::string result = "";
  for (int i = 1; i <= 100; i++) {
    if (i % 3 == 0 && i % 5 == 0) result = "FizzBuzz";
    else if (i % 3 == 0) result = "Fizz";
    else if (i % 5 == 0) result = "Buzz";
    else result = std::to_string(i);
    std::cout << result << std::endl;
  }

}

6. Java

The language of bloody enterprise. It was a surprise for me that Java looks like TypeScript. Learn TypeScript to know two languages for the price of one! 😄
REPL

class Main {
  public static void main(String[] args) {
    String result = "";
    for (int i = 1; i <= 100; i++) {
      if (i % 3 == 0 && i % 5 == 0) result = "FizzBuzz";
      else if (i % 3 == 0) result = "Fizz";
      else if (i % 5 == 0) result = "Buzz";
      else result = String.valueOf(i);
      System.out.println(result);
    }
  }
}

7. Rust

I know almost nothing about Rust. It's like C++, used by Mozilla and is handy to write a core of an operating system. Not really handy for frontend development.
REPL

fn main() {
  let mut res = "";
  for i in 1..101 {
    if i % 3 == 0 && i % 5 == 0 {
      res = "FizzBuzz";
    } else if i % 3 == 0 {
      res = "Fizz";
    } else if i % 5 == 0 {
      res = "Buzz"
    } else {
      println!("{}", i);
      continue;
    }
    println!("{}", res);
  }
}

8. PHP

It looks funny that every variable have to start with $.
REPL

<?php

for ($i = 1; $i <= 100; $i++) {
  if ($i % 3 == 0 && $i % 5 == 0) $res = "FizzBuzz";
  else if ($i % 3 == 0) $res = "Fizz";
  else if ($i % 5 == 0) $res = "Buzz";
  else $res = $i;
  echo "$res \n";
}

9. Ruby

Ruby has definitely different syntax for loops than other languages.
REPL

res = ""
1.upto 100 do |i|
  res = ""
  if i % 3 == 0 && i % 5 == 0
    res = "FizzBuzz"
  elsif i % 3 == 0
    res = "Fizz"
  elsif i % 5 == 0
    res = "Buzz"
  else
    res = i
  end

  puts res
end

10. (((Clojure)))

Clojure it's an interesting functional language with parenthesis flying everywhere. Functional programming is another world with different mindset to adopt. Who writes arithmetic expressions like (+ 1 2), right?
Actually FizzBuzz in Clojure inspired me to learn the language and ecosystem deeper.
REPL

(defn FizzBuzz [] (
  (loop [x 1]
  (when (<= x 100)
    (if (= 0 (rem x 15)) 
      (println "FizzBuzz")
      (if (= 0 (rem x 3)) 
        (println "Fizz")
        (if (= 0 (rem x 5))
          (println "Buzz")
          (println x)
        )
      )
    )
    (recur (+ x 1))))
))

(FizzBuzz)

Conclusion

That's all! It was an interesting and sometimes frustrating experience to try ten different programming languages. They might look different, but I think all of them have a lot in common - they are just tools to help translate thoughts humans can understand to the instructions computers can understand.

Interview Question Journey - Currying, Closures, Type Coercion, oh my 😱

Eugene Karataev — Fri, 14 Jun 2019 12:18:58 +0000

This post is based on the true story with minor changes for readability.

Let's say you're on interview for frontend developer position. Interviewer asks you to write a function to add two numbers.
That's easy and you come up with

function add(a, b) {
  return a + b;
}

Next you're asked to modify the function to the add(1)(2) syntax.
Well,

function add(a) {
  return function(b) {
    return a + b;
  }
}

More parentheses! add(1)(2)(3) should return 6.
No problem:

function add(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    }
  }
}

So far so good. Next task is to write add function with the requirements:

+add(1)(2) // should return 3
+add(1)(2)(3) // should return 6

It's clear that the previous solution should be rewritten to accept any amount of parentheses. We also notice the plus sign before the add function which leads us to think about type coercion.
What if we always return a function from add and coerce it to a primitive number when necessary? JavaScript calls valueOf method to convert a function to a primitive number.

function add(a) {
  return add;
}

add.valueOf = function() {
  return 42;
}

console.log(+add(1)(2)); // 42
console.log(+add(1)(2)(3)); // 42

We return function add from the function add and overwrite it's valueOf method to return a constant number when coerced to a primitive.
We don't get the correct result yet, but the big step is made. We don't get a runtime error and are able to return a number! The next step is to correctly sum the numbers.
Somehow we should accumulate the arguments the add function was called with. Let's start the easiest way with counter.

let counter = 0;
function add(a) {
  counter += a;
  return add;
}
add.valueOf = function() {
  return counter;
};

console.log('Should be 3', +add(1)(2)); // 3
console.log('Should be 6', +add(1)(2)(3)); // 9

The first result is correct, but the second is wrong, because the counter was not resetted after the first coercion. Let's fix this.

let counter = 0;
function add(a) {
  counter += a;
  return add;
}
add.valueOf = function() {
  let temp = counter;
  counter = 0;
  return temp;
};

console.clear();
console.log('Should be 3', +add(1)(2)); // 3
console.log('Should be 6', +add(1)(2)(3)); // 6

Great! Now everything works as expected! But the code isn't great, we can do better. Let's refactor 🛠

function add(a) {
  let counter = a;
  function inner(b) {
    counter += b;
    return inner;
  }
  inner.valueOf = () => counter;
  return inner;
}

console.log('Should be 3', +add(1)(2)); // 3
console.log('Should be 6', +add(1)(2)(3)); // 6

Awesome! ✨ The result is correct and the code is nice. We created function inner inside the add and return it. The counter variable is in closure and there is no need to reset it like in the previous example.
Now it's possible to write expressions like this:

let result = add(1)(2) + add(1)(2)(3) + add(1)(2)(3)(4) + add(1)(2)(3)(4)(5);
console.log(result); // 34

And get the correct result.

What do you think about such tasks on interviews? What questions were you asked on an interview? Please share in the comments!

My favorite type coercion example

Eugene Karataev — Sat, 01 Jun 2019 02:59:13 +0000

[] == ![] // true

😱
How is an empty array equal to a not empty array?! It doesn't make sense!
That's the reason why there are a lot of articles and videos on wtfjs theme.

Most developers prefer not to use double equals at all to avoid such issues.
IDE code checker may warn you not to use ==.

And this is a good decision to always use ===.

But I really like Kyle Simpson's YDKJS series and his why attitude. Why does JS behave like that? Let's dive in deeper!

== operator allows types coercion. It means that if two compared values are of different types, JS will try to coerce them to the same type before comparison.

What's the coercion algorithm? Actually it's pretty straightforward and defined in ECMAScript language specification.

It might look scary at first, so let's follow this algorithm step by step using the example from the beginning of the post.

[] == ![] - expression statement of our interest
First of all, before the actual comparision JS engine will execute all operands.

Step 1
[] == false
The right operand is the boolean type, so the result of comparision [] == ToNumber(false) is returned.

Step 2
[] == 0
[] is the object and 0 is the number, ToPrimitive([]) == 0 is returned.

Step 3
"" == 0
"" is the string and 0 is the number, ToNumber(x) == y is returned.

Step 4
0 == 0
true is returned.

It's fascinating how much work a JS engine does under the hood. But it follows the clear algorithm, no magic involved.
Read the specification, learn how JS works, be a better developer 😉

P.S. I really love this tool which decomposes any JS comparison expression according to the ECMAScript language specification.

References in JavaScript

Eugene Karataev — Tue, 07 May 2019 13:30:47 +0000

I've been working with JavaScript for 4 years and I still meet interesting scenarios. The code below is a simplified example of the issue I faced recently in my day-to-day work.

let color = {value: 'brown'};

let cat = {color: color};

color = {value: 'white'};

console.log(cat); // ?

Take a moment, read the code and think what the console.log output will be 🤔.

And the answer is

{
  color: {value: 'brown'}
}

Wait. We know that in JS non-primitive variables are passed by reference. But it's obvious that cat object didn't change after colorvariable modification.

So, what's going on here? Let's analyze the code step by step.

First of all, we declare variable color, create a new object {value: 'brown} and assign this object to the color.

After that the new object {color: color} is created and it's assigned to the new variable cat.

In the end we create one more object {value: 'white'} and assign it to the existing variable color.

The question is: why the object cat hasn't changed?

❗ In JavaScript it's not possible for variables to reference other variables. It's possible in other languages, but not in JS.

After the 2nd line is executed, cat.color reference the {value: 'brown'} object, not the color variable. That's why assigning a new object to the color variable don't change the cat object.

Hope it makes sence. Stay curious and keep coding! 😎

P.S. Test yourself. What will be the output if we slightly change the code

let color = {value: 'brown'};

let cat = {color: color};

color.value = 'white';

console.log(cat); // ?

Set CSS styles with javascript

Eugene Karataev — Tue, 23 Apr 2019 08:29:28 +0000

Let's say you have a paragraph.



<p id="target">rainbow 🌈</p>

And you need to change it's color with JS. What options do you have?

1. Inline styles

The most straightforward path. Query the element from DOM and change it's inline styles.



document.getElementById('target').style.color = 'tomato';

Short and simple.

2. Global styles

Another option is to create <style> tag, fill it with CSS rules and append the tag to the DOM.



  var style = document.createElement('style');
  style.innerHTML = `
  #target {
  color: blueviolet;
  }
  `;
  document.head.appendChild(style);

3. CSSOM insertRule

Third option is less known. We gonna use CSSStyleSheet insertRule method.



  var style = document.createElement('style');
  document.head.appendChild(style);
  style.sheet.insertRule('#target {color: darkseagreen}');

While it might look similar to the 2nd option, it's definitely different.

As you can see in Chrome devtools, <style> tag is empty, but the style (darkseagreen color) is applied to the element. Also the color can't be changed via devtools because Chrome doesn't allow editing dynamic CSS styles.

Actually such behavior was the motivation to write this post. A popular CSS-in-JS library Styled Components use this feature to inject styles in production mode because of performance. This feature might be undesirable in specific projects or environments and some folks complain about it in the project's issues.

4. Constructable Stylesheets (July 2019 update)

It's now possible to create CSSStyleSheet object from JavaScript.



// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

More details are here.
This option is only valid for Chrome, so use with caution.

Do you know other options to add styles with javascript? What is your preferred option these days?

Thanks for reading!

iframes everywhere

Eugene Karataev — Tue, 16 Apr 2019 15:46:13 +0000

How many times you were on a random website and wanted to watch your favorite youtube video right on the current website? I guess it never happened 😀. You just opened a new tab and entered youtube in the browser's url input.

But recently I developed chrome extension and faced a problem with injection 3rd websites via iframe in a currently opened website.

Open your browser's dev tools and execute the following code:

(function injectIframe(src) {
  let iframe = document.createElement('iframe');
  iframe.setAttribute('src', src);
  iframe.style.width = '500px';
  iframe.style.height = '300px';
  document.body.prepend(iframe);
})('https://youtube.com');

Your attempt will fail with the message
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This happens because youtube.com sets header X-Frame-Options to sameorigin, which blocks loading the website in iframe. YouTube don't want to show it's content on other websites and it's a reasonable decision.

Browser extension to the rescue

But there is a way to bypass these security restrictions. You'll have to use a browser extension which have much more access to the client-server interactions.
An extension can intercept a server's response, modify it's headers and provide the modified response without limiting headers to the browser.

We're gonna use webRequest API to modify response headers. Here's the extension code:

function stripHeaders(headers) {
  return headers.filter(header => {
    let headerName = header.name.toLowerCase();
    return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');
  })
}

chrome.webRequest.onHeadersReceived.addListener(
  function(details) {
    return {
      responseHeaders: stripHeaders(details.responseHeaders)
    };
  }, {
    urls: ["<all_urls>"]
  }, ["blocking", "responseHeaders"]);

Here is the repo with full extension code if you want to try it by yourself.

And here we go 🌟

P.S. Extensions have super powers compared to a regular javascript in a website's sandbox. Use them wisely and don't install extension you don't trust ❗

DEV Community: Eugene Karataev

Excalidraw state management

DEV users landscape

Technical details

Handling a lot of requests in JavaScript with promises

Eugene Karataev ・ Oct 22 '19 ・ 2 min read

JavaScript prototypes by example

With great prototype power comes great responsibility

Eugene Karataev ・ Jul 13 '19 ・ 1 min read

Further reading

Handling a lot of requests in JavaScript with promises

All at once

One by one

Divide and conquer

Conclusion

With great prototype power comes great responsibility

I tried 10 programming languages and I liked it

1. JavaScript

2. TypeScript

3. Python

4. Basic

5. C++

6. Java

7. Rust

8. PHP

9. Ruby

10. (((Clojure)))

Conclusion

Interview Question Journey - Currying, Closures, Type Coercion, oh my 😱

My favorite type coercion example

References in JavaScript

Set CSS styles with javascript

1. Inline styles

2. Global styles

3. CSSOM insertRule

4. Constructable Stylesheets (July 2019 update)

iframes everywhere

Browser extension to the rescue