29 мар. 2022 г.

React.StrictMode calls your render() and reducer() twice

In a strict mode development build of React renders your components twice. It calls your render() method, functional components, all the hooks two times. The reducer() function from the useReducer() hook is also called twice.

Before the second call, React disables all console output methods. In case your code works in non-strict mode but shows strange results in strict mode, you may want to see console output from the second call. In order to do that you can store the original console.log method at the very beginning of your code:

import { useReducer } from "react";
// other imports...

const log = console.log;

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, undefined, init);
  log("MyComponent", state); // note: log instead of console.log
  return <div>markup...</div>;
}


26 мая 2021 г.

Network Filter expressions in Chrome DevTools


KeywordExample
cookie-domain:cookie-domain:.google.com
cookie-name:
cookie-path:cookie-path:/images
cookie-value:
domain:domain:*.com domain:example.com
has-response-header:has-response-header:Access-Control-Allow-Origin
is:is:from-cache is:service-worker-intercepted
larger-than:larger-than:10k
method:method:POST
mime-type:mime-type:application/json
mixed-content:
priority:priority:Highest
resource-type:resource-type:image resource-type:other
scheme:scheme:https
set-cookie-domain:set-cookie-domain:.google.com
set-cookie-name:set-cookie-name:__utma
set-cookie-value:set-cookie-value:abc123
status-code:status-code:204
url:url:data:

To invert the rule, i.e. leave URLs that do not match, prepend it with minus sign, e.g. -is:from-cache means "all resources loaded not from cache".

Any other text leaves only URLs with that text somewhere in it (in path, query, etc.)

Examples:

  • larger-than:10k resource-type:image -domain:*.net
    "all images not from *.net larger than 10 kilobytes"
  • is:from-cache resource-type:script
    "cached scripts"

19 февр. 2021 г.

Create IFRAME from string


<body>
<script>
  function makeURL(str) {
    var blob = new Blob([str], { type: "text/html" });
    return URL.createObjectURL(blob);
  }
  var ifr = document.createElement("iframe");
  ifr.src = makeURL('<button onclick="parent.navigate()">Click me</button>');
  document.body.appendChild(ifr);
  var oldTiming;
  function navigate() {
    oldTiming = frames[0].performance.navigation;
    ifr.src = makeURL('<button onclick="parent.doReload()">Now click me</button>');
  }
  function doReload() {
    ifr.onload = function() { alert(oldTiming.type + " " + frames[0].performance.navigation.type); }
    frames[0].location.reload();
  }
</script>

1 дек. 2020 г.

Написание заимствованных слов

По правилам написания заимствованных слов нет единого мнения даже у профессиональных филологов. Например, филологи активно спорят, как правильно писать — блогер или блоггер. Для соблюдения принципа единообразия в текстах лучше использовать консенсусные варианты написания:

  • ВКонтакте или ВК (не Вконтакте).
  • Фейсбук, Facebook (не Фэйсбук).
  • Фронтенд (не фронтэнд и не фронт-енд или фронт-энд).
  • Бэкенд (не бэкэнд, не бекенд и не бек-энд).
  • Фреймворк (не фрэймворк).
  • YouTube (не Youtube, не ютуб), но ютуб-канал.
  • Флекс, флекс-контейнер (не флэкс).
  • JavaScript или JS (не Javascript).
  • Node.js (не node.js, NodeJS).
  • CodePen (не Codepen, не кодпен).
  • SEO (не СЕО, когда речь идёт о поисковой оптимизации). Но можно писать сеошник.
  • Лендинг (не лэндинг).
  • Слово интернет пишется с маленькой буквы (посмотри в интернете).
  • Веб-сайт (не web-сайт).
  • Онлайн (не он-лайн).
  • Офлайн (не оф-лайн, не офф-лайн).
  • URL (не урл).
  • Деструктуризация (не дестракчеринг).
  • Колбек (не коллбек, не колбэк и не коллбэк).
  • Рантайм (не runtime, не среда исполнения).
  • Изменяемость и неизменяемость (не мутабельность и не иммутабельность).
  • Markdown (не Маркдаун).

Руководство по оформлению текстов на Хекслете

Web-standards - словарь терминов