# Понедельник 70 твитов
Мой твиттер аккаунт @xufocoder временно заблокирован, ближайшую неделю про JavaScript буду писать с этого: почти ни… twitter.com/i/web/status/1…
7:25Немного юмора, немного серьезности, куча ссылок
В конце недели надеюсь немного с вами "поиграем"
Мой тимлид попросил ему помочь и написать вспомогательную функцию для тестов, говорит тестов будет до сотни, говори… twitter.com/i/web/status/1…
7:42Отправил меня переделывать, говорит можно написать код короче. Улучшил свой код: pic.twitter.com/EkL0Rnhupw
7:47Ему снова не нравится мой вариант
Помогите решить задачу: 👇
Когда в последний раз вы открывали спецификацию Standard ECMA-262?
8:08Знакомо? pic.twitter.com/KW7k2ER1OF
8:22Мой тимлид говорит писать тесты
А я ему отвечаю, зачем писать тесты? Если код все время меняет!?
@skv_nskv @jsunderhood Как говорил мой тимлид: «я твой тимлид»8:45
@jsunderhood const isEven = (number) => ((-1) ** number) > 08:46
@jsunderhood Все же знают, что лучшее решение задачи это всегда one-line-функция. pic.twitter.com/tUDYVl92rN8:46
@jsunderhood let isOdd = x => !isEven(x);9:03
let isEven = x => (x === 0) ? true : isOdd(x-1);
@jsunderhood const isEven = n => !`${Number.parseFloat(n / 2)}`.includes('.')9:29
@jsunderhood Я мастер нахождения четных чисел, даже если они отрицательные! pic.twitter.com/9x3DxyFSX79:33
@jsunderhood Вообще-то тут только один правильный вариант: pic.twitter.com/XNZ2m0EonU10:25
@jsunderhood изян 😏10:25const isEven = value => new Array(1e9).fill(null).map((_, i) => i * 2).includes(value);
JavaScript - это не магия! #тред pic.twitter.com/wToWTTLahk
10:33Во многом "смотрим и повторяем" - это классический подход к изучению языков, в том числе и языков программирования.… twitter.com/i/web/status/1…
10:39Если скажем попытаться сложить "1" + 1 в Python, то случится TypeError, а JavaScript скажет: "спасибо дальше, я сам… twitter.com/i/web/status/1…
10:47i fixed pic.twitter.com/OB7Iq6b06311:05Если скажем попытаться сложить "1" + 1 в Python, то случится TypeError, а JavaScript скажет: "спасибо дальше, я сам… twitter.com/i/web/status/1…
Часть того, от чего плюются разработчики, и что они называют "магией" исходит от слабой типизации. Трактовки слабой… twitter.com/i/web/status/1…
11:11Если в выражении ЯП позволяет совершать операции м/у значениями одного типа будем считать такой ЯП абсолютно строги… twitter.com/i/web/status/1…
11:12Однако в своей скромной практике я не встречал таких "абсолютных" языков, ведь даже в JS есть ошибки приведения тип… twitter.com/i/web/status/1…
11:15Все неявные преобразования в JavaScript от и до описывает спецификация ecmascript 262 ecma-international.org/publications/s…
Мину… twitter.com/i/web/status/1…
11:20@subzey @jsunderhood const isEven = x => !~(Math.imul(x, 2147483648) - 1)11:32
Спецификация описывает помимо всего прочего, то как должен себя вести язык. Она описывает набор абстрактных операто… twitter.com/i/web/status/1…
11:36Рассмотрим один из таких операторов ToNumber, как видно в JS присутствуют недопустимые преобразования, возникает Ty… twitter.com/i/web/status/1…
11:38Когда "JavaScript-движок" получает выражение, он преобразует его в AST, откуда становится очевидным какие операторы… twitter.com/i/web/status/1…
11:45Выполнится сначала оператор (+) с аргументами [1] и [], оператор (+) далее результат прошлого вычисления и 42 pic.twitter.com/SoJl7NqBfh
11:47И если обратится снова к спецификации, то можно обнаружить описание работы оператора (+), в котором присутствует уж… twitter.com/i/web/status/1…
11:50@jsunderhood Чот слишком читаемо получилось. Лучше вот так:11:51
const isEven = x => !Math.imul(x, 2147483648)
На досуге пытался выяснить можно ли встроенными средствами JavaScript сделать его сильнее, мб отменить некоторые оп… twitter.com/i/web/status/1…
12:13Благодаря неявным преобразованиям и некоторым конструкциям языка, можно написать вполне валидный и запускаемый код… twitter.com/i/web/status/1…
13:00В jsfuck происходит добыча каждого символа практически из самых недр неявных преобразований
Касательного того, поче… twitter.com/i/web/status/1…
@jsunderhood Выкатываем тяжёлую артиллерию!13:44const isEven = v => !new WebAssembly.Instance(new WebAssembly.Module(U… twitter.com/i/web/status/1…
@jsunderhood У плюсов сильная типизация. Неявные преобрахования разрешены только там, где они безопасны. В плане со… twitter.com/i/web/status/1…13:44
@jsunderhood const isEven = a => a >> 1 << 1 === a;14:04
Вы очень классная аудитория!
Думал будет тухло, когда провел небольшое исследование перед своей дежурной неделей в… twitter.com/i/web/status/1…
@MrFlashAccount @jsunderhood Я вообще не понял зачем вся эта игра с типизацией, которая увеличивает ошибки. Могли ж… twitter.com/i/web/status/1…
Есть большой и познавательный труд "JavaScript: The First 20 Years" от Allen Wirfs-Brock и Brendan Eich. URL:… twitter.com/i/web/status/1…
@MrFlashAccount @jsunderhood Я вообще не понял зачем вся эта игра с типизацией, которая увеличивает ошибки. Могли ж… twitter.com/i/web/status/1…
14:44
Я на собеседовании JS разработчика спрашиваю про this, прототипы и про области видимости var/let/const. Это что, я… twitter.com/i/web/status/1…
Челендж:
5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседовани… twitter.com/i/web/status/1…
Я на собеседовании JS разработчика спрашиваю про this, прототипы и про области видимости var/let/const. Это что, я… twitter.com/i/web/status/1…
14:59
@jsunderhood - Что лучше React или Angular?15:10
@jsunderhood - ты пьёшь?15:12
* достаёт бутылку вискаря, с словами "у меня тут траур по беззаботной жизни, меня тимлидом назначили" *
@jsunderhood 1. This, bind, apply, классы, прототипы15:21
@jsunderhood 1. зачем нужны промисы и почему существуют async/await15:26
@jsunderhood 1) Привет не хочешь воды/кофе? (Если удаленно - как погода?) 2) Какие задачи раньше решал и как? 3) Во… twitter.com/i/web/status/1…15:27
@_olegkusov @jsunderhood Я бы спрашивала solid, dry, kiss, yagni. И чтобы он привёл примеры, где это можно применить.15:33
@_olegkusov @jsunderhood И ещё фабрику, синглтон, декоратор, каррирование, хоки, строитель15:34
@jsunderhood 1) почему хочешь к нам в компанию15:34
2) расскажи про http (1.1 - 2 - 3) протокол
3) какие проблемы решает… twitter.com/i/web/status/1…
@jsunderhood Вообще если серьезно, то:15:56
@jsunderhood 2. Асинхронность и немного эвентлупа. Как вообще работают енти ваши промисы, then/await. В качестве пр… twitter.com/i/web/status/1…15:56
@jsunderhood 3. Вопрос поближе и поприкладнее к вашему бекенду, чтобы понять адекватность кандидата в плане выбора… twitter.com/i/web/status/1…15:56
@jsunderhood Все вопросы с обсуждением:15:58
1) Расскажи как ты понимаешь, как работает JS в браузерах?
2) приходишь на… twitter.com/i/web/status/1…
@jsunderhood 3) покажи код какого-нибудь проекта, который ты делаешь, который больше 400 строк в сумме (сборка не в… twitter.com/i/web/status/1…15:58
@jsunderhood 1. Почему вы выбрали именно нашу компанию?16:11
16:12Что такое EC2 и как оно работает? Как, концептуально, происходит загрузка современной сетевой ОС? Что буд… twitter.com/i/web/status/1…
@jsunderhood 1. Задача про console.log с таймаутом в цикле.16:13
Сначала нужно задать десяток вопросов тем, кому этот новичок понадобился. Зачем его ищут, куда ищут, какие задачи о… twitter.com/i/web/status/1…16:14Челендж:
5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседовани… twitter.com/i/web/status/1…
@jsunderhood 1. Чем занимался на предыдущих работах?16:15
@jsunderhood 1. Расскажи самую сложную задачу, которую решал. Обсуждаем16:24
@jsunderhood 1. Знаешь js?16:31
@jsunderhood Как называется вакансия?16:46
Что мы делаем?
Джаваскрипт готов выучить наконец?
@jsunderhood 1. Что происходит между вводом адреса в строку браузера и появлением картинки на экране 2. Приложение… twitter.com/i/web/status/1…18:15
@jsunderhood Зачем писать тесты, если можно сразу норм код писать???!!?!?!18:35
Челендж:5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседовани… twitter.com/i/web/status/1…
1/2 Как показал общественный опрос, у каждого свои критерии, как следствие свой список вопросов.
Если бы мне предст… twitter.com/i/web/status/1…
Челендж:
5 минут до собеседования новичка в команду, вас назначают в тимлиды, чтобы провести это же собеседовани… twitter.com/i/web/status/1…
18:40
2/2 Например
Язык - JavaScript: Как происходит работа с асинхронным кодом?
Среда - Браузер: Что такое Event Loop… twitter.com/i/web/status/1…
18:42Сегодняшнее дежурство подошло к концу
Встретимся завтра!
# Вторник 69 твитов
Мой тимлид спросил меня, не хочу ли я взять дополнительные курсы, подучиться там чему-нибудь?
А я ему говорю, заче… twitter.com/i/web/status/1…
Мой тимлид теперь решил поспорить со мной на желание, говорит, смогу ли я написать алгоритм сортировки сложностью м… twitter.com/i/web/status/1…
7:19@jsunderhood На самом деле (думаю, автор об этом и сам догадывается), таймеры в используемой реализации JS, вероятн… twitter.com/i/web/status/1…7:41
@jsunderhood Может быть, конечно, и timer wheel [1], там позамороченней, но мне что-то подсказывает, что скорее туп… twitter.com/i/web/status/1…7:41
@jsunderhood Я знаю только 1 алгоритм, который отработает за N - Radix Sort. Как раз для сортировки целочисленных массивов.8:06
@jsunderhood Короч если кто будет придираться, вот ещё версия pic.twitter.com/MjvoHsbSaz
Если не врут, то это counting sort, en.wikipedia.org/wiki/Counting_…
@jsunderhood Короч если кто будет придираться, вот ещё версия pic.twitter.com/MjvoHsbSaz
8:07
Как часто вам требовались знания алгоритмом и/или структур данных в задачах связанных с JavaScript
8:15Те, кто отвечает очень часто прокомментируйте по возможности, чем вы занимаетесь 🤠
8:18@jsunderhood Написать парсер другого языка на JS, например8:23
@jsunderhood Работаю в wix с прослойкой данных в рантайме8:25
@jsunderhood Главное знание - как выбрать правильный npm пакет с алгоритмом. Для этого надо понять хотя бы примерно что алгоритм делает.8:33
@jsunderhood Очень часто: работаю над Dev tools, постоянно нужно обходить и визуализировать деревья (а иногда не то… twitter.com/i/web/status/1…8:34
@jsunderhood Простые деревья — часто (работа с ast в Бабеле и ts), но не уверен, что это относится к знанию структу… twitter.com/i/web/status/1…9:09
@jsunderhood Буквально вчера понадобилось реализовать NestedWeakMap: gist.github.com/just-boris/5b5…9:10
@jsunderhood Часто. Очереди, стэки, кучи, хэштаблицы, бинарный поиск, dfs, bfs. Обычно в задачах на ноде и обработк… twitter.com/i/web/status/1…9:14
@jsunderhood Отдельная подстава, что собеседования в большие компании обычно сильно стандартизированы и приходится… twitter.com/i/web/status/1…9:25
@jsunderhood Не часто, но приведу пример:9:25
Клиентская сортировка и фильтрация вариантов рейсов в агрегаторе авиабиле… twitter.com/i/web/status/1…
@anber_ru @jsunderhood В JS не чистые хешмапы: и объект без хайден класса и Map гарантируют порядок ключей, что совсем не бесплатно.10:50
@jsunderhood Вот классический пример, приходит структура-дерево, она описывает регионы/области/города. Я понимаю, ч… twitter.com/i/web/status/1…10:51
@jsunderhood Сейчас все связанное с датацентрами в Facebook10:55
@jsunderhood Ответила «часто». Структуры данных - это, например, массивы и объекты. Каждый день с ними работаю) Из… twitter.com/i/web/status/1…11:23
JavaScript и динамическая типизация #тред pic.twitter.com/gJwAvs5Q3a
11:25Если предпосылки слабой типизации в JavaScript были туманны, то решение сделать JavaScript динамическим языком было… twitter.com/i/web/status/1…
11:37Тяжело дать однозначное трактование динамической типизации, но можно через сравнение со статической. Переменные свя… twitter.com/i/web/status/1…
12:08Говоря другими словами при динамической типизации у переменной нет типа, тип есть у значения этой переменной. Измен… twitter.com/i/web/status/1…
12:08Может наивно показаться, (я как-то попался на этом), что компилируемые языки это как правило статически типизирован… twitter.com/i/web/status/1…
12:09У NodeJS (libuv + v8 - JS движок) есть возможность экспортировать созданный байт код при запуске скрипта. Не знаю м… twitter.com/i/web/status/1…
12:17Динамическая типизация не заставляет думать разработчика о типах? И да и нет
Думают:
Опытные разработчики исполь… twitter.com/i/web/status/1…
12:29JSDoc даже думали ввести на одних JavaScript курсах, чтобы подготовить морально/интеллектуально учащегося к статиче… twitter.com/i/web/status/1…
12:31Минус динамической типизация, который также заставляет думать в сторону статической, это постоянная необходимость о… twitter.com/i/web/status/1…
12:38В своей книге "Типы в языках программирования" Бенджамин Пирс на первых страницах приводит доводы зачем нужны типы:… twitter.com/i/web/status/1…
12:42В JavaScript
12:51Немного сравню JavaScript с TypeScript
Во втором после описания кода и запуска компилятор, тот начинает выводить т… twitter.com/i/web/status/1…
12:55Отсюда есть два разных по своей природе способа проверять корректность своих программ.
13:04@jsunderhood Народ почему-то считает, что если структуры данные, то обязательно бинарные деревья или чо позабористе… twitter.com/i/web/status/1…13:05
Про типы думают не только разработчики, которым без нее больно, но JavaScript-движки, например v8, который думает о… twitter.com/i/web/status/1…
13:43@jsunderhood вот пример сложной визуализации codesandbox.io/s/ellipse-rd1o413:45
пришлось вспомнить геометрию
Другие визуализац… twitter.com/i/web/status/1…
@jsunderhood Графы, кастомные визуализаци, парсинг аст для саджестов.13:46
Тоесть с точки зрения v8: чем больше будет объектов с одинаковой структурой, тем производительней будет код.
Если… twitter.com/i/web/status/1…
@jsunderhood тестируй не тестируй, а формальную верификацию никто не отменял14:08
Те, кто глядя на JavaScript не думают о типах внутри этого ЯП, это те люди, кто серьезно занимаются Computer Scienc… twitter.com/i/web/status/1…
14:22@jsunderhood Закрывайте на сегодня жсандерхуд, лучше уже не будет!14:37
На этой недел @jsunderhood так интересно пишет, что захотелось освоить ноду14:37
Извиняюсь за частые опечатки
Линтер русского языка сбоит pic.twitter.com/8jwt1fk8DH
@vvscode @jsunderhood @anber_ru Во-первых Map порядок должен гарантировать по спеке и это было сразу. Во вторых 2ality.com/2015/10/proper…16:10
JavaScript в качестве первого языка программирования
17:22Если да, то прокомментируйте почему
17:24@jsunderhood И Да и Нет.17:27
Да - быстро, весело, как ночь после которой венерическое заболевание на утро находишь.
Нет… twitter.com/i/web/status/1…
@jsunderhood Нет, если ты хочешь сразу расти в теоретика программной инженерии, не боишься с ходу вникать во всяки… twitter.com/i/web/status/1…17:34
@jsunderhood Можно начать прямо в браузере17:34
@jsunderhood Да - легко начать, видно сразу результат, нужен только браузер17:35
@jsunderhood Нет не проще, и проблемы все ещё с асинхронностью в пайтоне, а главное сравни комьюнити. Это как блоха против слона
Python проще, чем JavaScript?
@jsunderhood Нет не проще, и проблемы все ещё с асинхронностью в пайтоне, а главное сравни комьюнити. Это как блоха против слона
17:38
@jsunderhood Да.17:38
Думаю что если в js я буду как затупок, то дальше в программировании мне делать нечего...
@jsunderhood Да, чтобы веселее учиться было веселее.17:53
@aarexer @jsunderhood думаю, что те кто ответили "да", это примерна та же группа лиц кто потом придумали node.js17:54
@jsunderhood потому что у меня он первый в работе, ну и наверное с нуля легче влиться во фронтенд17:54
@jsunderhood JavaScript следует изучать только после C++, разумеется18:01
@jsunderhood Я бы взял python18:01
@jsunderhood Язык офигенный (это я как плюсист говорю), но чтобы понимать как работает система типов, лучше начать… twitter.com/i/web/status/1…18:01
@dyb4hzvo @jsunderhood Минус, что в отличие от бейсика с него можно не уходить18:01
@jsunderhood Да - сразу виден результат, лёгок в познании, можно делать магию в браузере, хорошо платят18:04нет - боль… twitter.com/i/web/status/1…
@jsunderhood Легко учить, быстро применить (в вебе) и увидеть результат, пока ниразу не пожалел о (за 4 года)18:04
Ребята из @ctorecords ищут на несколько недель фронтэнд сеньера, цитирую: работа по спринту в команде: доработка су… twitter.com/i/web/status/1…18:16
@jsunderhood В универе - нет. Что бы войтивайти - да.18:22
А универ vs войтивайти == личным желаниям делать качество или количество.
*I did not make this & don't know where it came from*18:26BUT IM DEAD 💀 pic.twitter.com/tF8fofgdyg
@jsunderhood Мой первый ЯП с серьезными практическим применением был PowerShell и я до сих пор считаю что именно та… twitter.com/i/web/status/1…18:26
Кто предатель? Кто первым кикаем? pic.twitter.com/3cJbqbhZp1
18:28@jsunderhood Ответил "да" как "мой опыт" (потому что начал с верстки, ибо очень нравилась), хотя кто-то может это в… twitter.com/i/web/status/1…18:54
# Среда 67 твитов
Мой тимлид сегодня с утра слишком веселый, вспомнил какой-то древний боян, сидит спрашивает всех в чате: что появил… twitter.com/i/web/status/1…
7:09@jsunderhood Это тимлида и джуна сортируют на картинке?7:25
@jsunderhood Кажется, эволяцию свернула не туда. pic.twitter.com/jc3uHNmsbW7:25
@jsunderhood @xufocoder У меня друган детей учит в школе на кружке js, потому что у него большой спектр областей пр… twitter.com/i/web/status/1…7:26
@jsunderhood А Java для первого языка программирования? Прохожу в интернете курс по нему,очень нравится. Хотел бы у… twitter.com/i/web/status/1…7:27
@jsunderhood Единственно правильный ответ - да. Потому что каждый язык хорош для своих задач. Хочешь начать учиться… twitter.com/i/web/status/1…7:27
@jsunderhood Да, потому что любая js-программа преобразуется в ast-дерево. Чем больше деревьев посадим, тем чище бу… twitter.com/i/web/status/1…7:27
Айтишники, расскажите, начинать изучение нового языка, фреймворка и пр. с просмотра видосов норм или зашквар?7:27
В локальном ростовском JavaScript-чатике на фоне всевозможных обсуждений, появился призыв к помощи, связанный с про… twitter.com/i/web/status/1…
7:33@jsunderhood Похожая проблема. Решил, но не без последствий: взял «спринты» на дом, отрешился от внешнего мира на п… twitter.com/i/web/status/1…7:46
Веселимся с эмоджи и JavaScript8:16
Есть ли у кого-нибудь банковский фронтенд без типов? pic.twitter.com/XuLLINssWM
Есть ли у кого-нибудь банковский фронтенд без типов? pic.twitter.com/XuLLINssWM
8:21@jsunderhood Нужно просто понять, что это не ее бизнес и она работает по договору, а время(+нервы), которое она тра… twitter.com/i/web/status/1…8:38
@jsunderhood переболела этим, когда попробовала пару раз забить на «горящие» проекты и убедилась, что «никто не умер», надеюсь поможет8:43
@jsunderhood только спорт. Сходил часок потягал железку или покидал мяч, потом в баньку, потом чаю горячего сладкого - и все, отпустило.8:54
Доверили бы вы часть своей жизни JavaScript?
Разработчик-диабетик собрал искусственную поджелудочную железу, работ… twitter.com/i/web/status/1…
9:10@jsunderhood UI пилотируемого «Дрэгона» на нем же написан (и крутится на движке Хрома, ЕМНИП)9:22
@jsunderhood Это максимально странно гнать на js Аля в стиле 2010-х. Ыхыххых вы ещё сервер на жиес напишите.9:36
@jsunderhood Не так важен язык, как то как хорошо оттестирован код.9:36
@jsunderhood Надо найти занятие, не связанное с разработкой, которое будет приносить альтернативное удовольствие. М… twitter.com/i/web/status/1…9:40
@jsunderhood Не бывает идеальных языков программирования, которые гарантируют что твой код будет работать идеально.… twitter.com/i/web/status/1…9:40
Так ли плоха динамическая типизация?
eax.me/dynamic-typing/
@jsunderhood Вопрос психологического плана должен решать специалист (психолог). И выбирать его надо аккуратно (есть… twitter.com/i/web/status/1…11:18
@jsunderhood Даже если хобби будет связано с разработкой (любой pet-project), этого достаточно. Важно знать свои ин… twitter.com/i/web/status/1…11:19
@jsunderhood TS не soundness, он не гарантирует на 100%, чтоб код не упадёт с ошибкой из-за undefined, ибо в языке… twitter.com/i/web/status/1…
@jsunderhood TS не soundness, он не гарантирует на 100%, чтоб код не упадёт с ошибкой из-за undefined, ибо в языке… twitter.com/i/web/status/1…
11:43
@jsunderhood Так дело не только в том, что лучше или хуже, а элементарно документируемость кода и автоподсказки ИДЕ… twitter.com/i/web/status/1…11:43
@jsunderhood > ошибки типизации обычно быстро обнаруживаются и легко устраняются11:43Ну ничего себе быстро! 10 минут г… twitter.com/i/web/status/1…
@jsunderhood Да не, в Julia щна ничего так. Но меня всё равно укачивает ))11:43
@jsunderhood Когда пишешь код, всё равно имеешь ввиду какой-то тип. Так что толку от динамической типизации?11:50
В Пито… twitter.com/i/web/status/1…
Дорогие it-деды, а что вы думаете на тему удаленных джунов? Берете ли к себе в удаленные команды, и что потом делае… twitter.com/i/web/status/1…11:52
JavaScript и Браузер #тред pic.twitter.com/bqLoLfEVro
11:55За 30 лет с момента появления 1ого браузера многое изменилось. Браузеры сегодня это очень сложное прикладное ПО. Об… twitter.com/i/web/status/1…
12:25Ни для кого не станет открытием, если я напишу, что на текущий момент браузер Google Chrome, является самым популяр… twitter.com/i/web/status/1…
12:29Браузер Google Chrome (как Opera и Microsoft Edge), основаны на проекте Chromium. Отсюда изучая проект Chromium, в… twitter.com/i/web/status/1…
12:59@jsunderhood С первым допустим понятно, а что учить в качестве второго ЯП? HTML не предлагать 😅
TypeScript
Или есть у кого другие варианты?
@jsunderhood С первым допустим понятно, а что учить в качестве второго ЯП? HTML не предлагать 😅
13:20
@goddesofwind @jsunderhood Что-нибудь из практичного и функционального - чтоб с пользой для мозга. Я бы рекомендовал - Clojure/ClojureScript13:26
@jsunderhood Elm13:36
У chromuim multiprocess архитектура
Используются отдельные процессы для вкладок браузера, что защитит все приложе… twitter.com/i/web/status/1…
14:33Все то, что отображается во вкладке браузера, грубо говоря, делает движок для рендеринга - Blink, форк WebCore
Bli… twitter.com/i/web/status/1…
14:47Касательно процессов, пользователь вполне может их сам увидеть в "диспетчере задач" Google Chrome… twitter.com/i/web/status/1…
14:50Касательно HTML. Как правило, мнение обывателя относительно HTML, что это что-то про верстку, хотя сейчас это есть… twitter.com/i/web/status/1…
15:08@jsunderhood на этой неделе –🔥15:27
Важным понятием в рендеринге для Frontend-разработчика является - Critical Rendering Path.
Процесс c момента получ… twitter.com/i/web/status/1…
15:33Или вот, есть русская мини страничка о CRP на MDN:
developer.mozilla.org/ru/docs/Web/Pe…
Рекомендую БЕСПЛАТНЫЙ курс от Google ра… twitter.com/i/web/status/1…
15:42@jsunderhood Проблема комплексная, советами просто так не решается. «Почитать на эту тему» есть слишком много всего… twitter.com/i/web/status/1…16:07
Про завтра пообщаемся? (про что тред писать)
ps в опросах ограничение на 25 символов
pps. текущий тред еще не дописал
16:44ppps глаз замылился, буквы/слова в твитах съедаются
16:48Про завтра пообщаемся? (про что тред писать)
ps в опросах ограничение на 25 символов
Голосуйте за безопасность, какое функциональное программирование, вы чего? :D
Про завтра пообщаемся? (про что тред писать)
17:14
ps в опросах ограничение на 25 символов
1/2 Напомню, что Blink движок для рендеринга, V8 - JavaScript-движок. V8 ничего не знает о DOM.
Как связаны V8 и B… twitter.com/i/web/status/1…
17:322/2 Есть понятие World для поддержки content scripts, необходимых для разделение DOM с веб-страничкой. Для разделен… twitter.com/i/web/status/1…
17:36Есть еще детали того встраивается V8, но повторюсь читайте Chromium Design Documents..
По итогу всех обвязок для J… twitter.com/i/web/status/1…
17:43Как ни странно, но реализация именно HTML спецификации внутри браузера, дает JavaScript всеми любимый Event Loop. О… twitter.com/i/web/status/1…
17:51За внедряемыми фичами JS можно следить как по отдельности
v8: v8.dev/features
blink:… twitter.com/i/web/status/1…
В завершении треда хочу поделится русскоязычным докладом: "О настоящем и будущем браузера Yandex браузера".
Дово… twitter.com/i/web/status/1…
18:11Вопрос для тех, кто пишет на JavaScript/TypeScript.
По большой части вы разрабатываете:
Еще не устали от JavaScript? ;) pic.twitter.com/nYuVYuOgC5
18:23@jsunderhood Если в опросе будет много бэкенда, то вычислю по ойпи и застрелю :)18:28
@jsunderhood Лет пять уже как устал.18:41
@jsunderhood Не уверен, что смог бы запилить достаточно полноценный тред, поэтому как вариант предложу вот эту стат… twitter.com/i/web/status/1…18:52
А на сегодня все! До четверга!
19:04# Четверг 50 твитов
Мой тимлид прознал, что я веду коллективный акк, спрашивает заходил ли я сегодня в твиттер?
Я ему - "нет". После о… twitter.com/i/web/status/1…
Функциональное программирование:
7:42@jsunderhood Казалось бы, причём тут JavaScript8:26
@jsunderhood Говно полное. Но лучше ничего не видел ))
Коротко о функциональном программировании
@jsunderhood Говно полное. Но лучше ничего не видел ))
8:52
На этой неделе @jsunderhood ведёт топовый ведущий. Давно не было так интересно заходить в твиттер и читать ленту)… twitter.com/i/web/status/1…10:28
@jsunderhood @RuvimSypa @bunopus @xufocoder Если вдруг кстати сможешь попиарь функциональный подход к изучению инфо… twitter.com/i/web/status/1…11:04
Экскурс в историю языков программирования с точки зрения используемых в них концепций.
Как происходило смещение ви… twitter.com/i/web/status/1…
Функциональное программирование:
Согласно опросу >70 человек сегодня узнают от меня про функциональное программирование
Да простит меня @_bravit
Функциональное программирование:
11:56
JavaScript и функциональное программирование #тред pic.twitter.com/2JB0u8SIX0
11:58Как известно, JavaScript мультипарадигменный ЯП, позволяет писать код в различных стилях:
* событийно-ориентирован… twitter.com/i/web/status/1…
12:21Из лекции: Лямбда-исчисление
youtube.com/watch?v=7BPQ-g… pic.twitter.com/prx6hSY8Wr
Лямбда исчисления это основа, на которой строятся функциональные языки.
Однако при работе с популярными библиотек… twitter.com/i/web/status/1…
12:53λ-исчисления основа для ФП.
Но это не значит, что без Лямбд ФП не бывает
Полная версия доклада:… twitter.com/i/web/status/1…
12:57@jsunderhood В этом месте у меня теперю навсегда марокканские флэшбеки pic.twitter.com/ocueGBha2G13:38
We released a quick update to the Ladder of FP! Thanks to all who gave feedback & those who volunteered to help tac… twitter.com/i/web/status/8…
Получается, что и в JavaScript можно использовать концепции из мира ФП, элементы ФП, как следствие писать в ФП-стил… twitter.com/i/web/status/1…
We released a quick update to the Ladder of FP! Thanks to all who gave feedback & those who volunteered to help tac… twitter.com/i/web/status/8…
13:52
А некоторые абстракции из мира ФП могут лежать на поверхности, и рядовой разработчик скорее всего не будет знать об… twitter.com/i/web/status/1…
14:21Какие ФП концепции нам доступны или мы можем реализовать в JavaScript, языке с динамической и слабой типизацией?
Ф… twitter.com/i/web/status/1…
14:43@jsunderhood chaining (.?) == монада? Так может квантовая неопределенность это тоже монада?
Стреляют сразу из артиллерии
@jsunderhood chaining (.?) == монада? Так может квантовая неопределенность это тоже монада?
14:51
Сегодня наверно будет 1 тред вместо обещанных 2ух, но большой, идет?
14:53@jsunderhood Хороший пример для понимания, я думаю, это сравнить с промисами. Хотя технически, промисы - не монада… twitter.com/i/web/status/1…14:55
Касательно абстракций, существует библиотека, которая их реализует
Если синтаксис js для работы с функциями ещё по… twitter.com/i/web/status/1…
15:45Зачем нужны эти абстракции? Выглядит далёким от реальной и практической жизни?
Прикладное применение имеется. Напр… twitter.com/i/web/status/1…
16:15Спустимся на землю, вернемся к коду, чтобы продемонстрировать ФП подход в JS, есть задачка:
Реализовать функции:… twitter.com/i/web/status/1…
16:53Демонстрацию некоторых основных элементов ФП в JS на практике еще в 2015 году сделал MPJ на своем канале FunFunFunc… twitter.com/i/web/status/1…
17:12@jsunderhood Абстракции не «нужны или не нужны». Они есть. Можно научиться их использовать, улучшая мозги, код и ал… twitter.com/i/web/status/1…17:12
@jsunderhood BTW поскольку очебник камловый, все примеры должны как родные ложиться на rescript-lang.org17:16
Кто какие языки пробовал (или мб даже использует на проде), которые компилируются в JS? Кроме TS :)
17:21@jsunderhood ReasonML пробовал. 100% типизация круто, но местами для меня была боль (например сериализация json).17:25
@jsunderhood Кофескрипт :D17:28
@jsunderhood ClojureScript топчик17:46
@jsunderhood Java лол. Транспилируется в js через gwt (конечно же заброшенный гуглом). Есть вариант трансляции в cl… twitter.com/i/web/status/1…17:46
1/3 Помимо упомянутых элементов ФП в JS, в JS можно реализовать то, что называется иммутабельностью,
Это такое пов… twitter.com/i/web/status/1…
2/3 Как это сделать в JS?
Клонировать объект и модифицировать у него поле.
Для массивов существуют методы которые… twitter.com/i/web/status/1…
3/3 Иммутабельность
+:
Иммутабельные объекты (исходный легко и его модифицированная копия) дешево сравниваться м/у… twitter.com/i/web/status/1…
@jsunderhood Лямбда исчисление является просто хорошей виртуальной машиной, которую удобно встраивать в языки. Вот,… twitter.com/i/web/status/1…18:27
@jsunderhood Immutable мёртв. Не справились с типизацией и уже пару лет вообще не шевелятся.18:40
@jsunderhood Я бы советовал использовать immer.js от @mweststrate если с нуля что-то тянуть. Immutable.js классный,… twitter.com/i/web/status/1…18:40
@jsunderhood Почти любые. Вопрос только в том, что в случае статической типизации мы собираем комбайн с открытыми г… twitter.com/i/web/status/1…18:40
@jsunderhood > сравнение происходит по ссылке18:48Стоп, что?
Вот это ложь. Ссылочное сравнение всё рушит, потому что… twitter.com/i/web/status/1…
@jsunderhood Они хотели при переходе с 3 на 4 сделать строгую типизацию, для чего сильно поломали обратную совмести… twitter.com/i/web/status/1…18:56
@ruggerprogrammr @jsunderhood В четвёртой все не так уж отлично — я несколько часов искал багу в клиентской фильтра… twitter.com/i/web/status/1…19:05
@jsunderhood DARTDARTDARTDARTDARTDART19:08
@jsunderhood Жаваскрипт иногда мешает процессу. Например, есть линзы, которые functional get/set и позволяют deep i… twitter.com/i/web/status/1…19:08
@jsunderhood Clojure, Purescript, F#, Reason, Elm. Ещё пробовал диалект Smalltalk, не помню как называется, Amber ч… twitter.com/i/web/status/1…19:09
На сегодня завершаю дежурство по андерхуду!
Увидимся в пятницу🤠
ps. Благодарю всех неравнодушных к ФП
19:12@jsunderhood Immutable.js не поддерживается уже два года dev.to/alekseiberezki…21:18
# Пятница 73 твита
@jsunderhood @PavelPotapkin Могу порекомендовать книгу Эрика Норманда (@ericnormand) Grokking Simplicity. Она не пр… twitter.com/i/web/status/1…8:31
@jsunderhood Все, что используется, кроме JS,TS, - наркомания8:32
@kirelagin @jsunderhood @slowpnir Выкинул в какой-то момент. Нераскрытые термины - это зло. Если я начну говорить п… twitter.com/i/web/status/1…8:33
@AIvasyuta @jsunderhood Использование JS - наркомания :)8:44
Поговорим о передаче опыта. Передаете? 🙃
Наставничиствуете? Преподаете?
Выступаете ли на конференциях и митапах? К… twitter.com/i/web/status/1…
Какую форму обучения предпочитаете для себя? 🧐
9:03@bunopus @jsunderhood Dart Vader: TS, I'm your father.9:08
TS: Nooooooooooooooooo, no, it's not true
@jsunderhood Исходники либ9:08
@jsunderhood Не могу сказать шо наставничаю, но помогаю супруге переучиться с журналиста во фронтендера, войти в пр… twitter.com/i/web/status/1…9:09
@jsunderhood Приезжаю на митапы к концу, чтобы потусить9:13
Потом смотрю записи про опыт
@jsunderhood Надо что-то выучить? Берешь ебошишь сразу, ну в доки и в стаковерфлоу глядишь, статьи иногда.9:21
@jsunderhood 4) Все по разному хорошо9:21
@jsunderhood То, что быстро проглатывается:9:24
Короткие доклады, статьи, видео-уроки.
@dotterian @jsunderhood полностью согласен, я вообще webpack изучил из видосов Кантора, и в доку не смотрел, это не… twitter.com/i/web/status/1…
Олды здесь?
Лайк, если учился по материалам Кантора
@dotterian @jsunderhood полностью согласен, я вообще webpack изучил из видосов Кантора, и в доку не смотрел, это не… twitter.com/i/web/status/1…
9:29
@jsunderhood В основном именно на @HexletHQ впитываю новую информацию, потом смотрю доп материалы, MDN, статьи. Ну… twitter.com/i/web/status/1…9:32
@jsunderhood на старте использовал преимущественно обучающие видео и интерактивные обучалки типа codecademy, сейчас… twitter.com/i/web/status/1…9:34
@jsunderhood Разрабатывал на JS когда курсов Кантора ещё не было.9:40
@gerasim_vol @theKashey @jsunderhood Я это делал когда youtube еще не было. И ajax тоже. Курсы лол...9:45
@jsunderhood Есть еще вариант разбирать сурсы того, в чем хочешь разобраться, вместе с докой. Пиздец как долго, зат… twitter.com/i/web/status/1…9:46
Видели этот фильм про JavaScript?
youtube.com/watch?v=8p1uLK…
@jsunderhood Стараюсь начать с первоисточника или почти первоисточника (дока, спецификация, MDN).9:51Если есть хороши… twitter.com/i/web/status/1…
@jsunderhood Я из 2009. Ruseller и две книжки “как создать современный сайт на html”9:52
@jsunderhood Даёшь ещё перепись тех кто учил jQuery по моему учебнику или статьям :)9:57
@jsunderhood Иммутабельность не обязательно реализуется через полное, даже не глубокое, копирование. Это в JS она в… twitter.com/i/web/status/1…9:58
@sharkaev_ph @jsunderhood Я в 2005 начал изучение HTML с «HTML: Для тех кто в танке» :D10:00
Экстренное собрание! pic.twitter.com/iI1QCnBDjo
10:11Какой тред дня вам интересен
10:12@jsunderhood мы видели в камеры как ты убил жаваскрипт10:14
В выходные тредов не будет!
10:15@jsunderhood просто пусть эта неделя не заканчивается 🔥🔥🔥10:32
@theKashey @jsunderhood @ICBMRV @gerasim_vol Привет из 2001 года. Большинство фронтендеров еще не родились pic.twitter.com/X9toSuTcA710:36
Две статьи от @xnimorz
Оптимизация производительности фронтенда
habr.com/ru/company/hh/…
habr.com/ru/company/hh/…
Мне илья однажды объяснял как работают генераторы, по скайпу. Было классно, кантор офигенный11:12Олды здесь?
Лайк, если учился по материалам Кантора twitter.com/iGontarev/stat…
@jsunderhood На десктопе веб почти вытеснил нативные приложения. Как думаешь, случится ли это с мобилками?11:32У нас… twitter.com/i/web/status/1…
@jsunderhood Был на курсе Кантора в 2006 году11:37
@timofeipl @jsunderhood RN—шаг в сторону, пиши на свифт \ обджективе.11:40
IOS не дружит с электроном и пока не очень др… twitter.com/i/web/status/1…
JavaScript и утечки памяти в Браузере #тред pic.twitter.com/4cmAlPLEi3
12:02@jsunderhood Писал на CoffeeScript, после которого было немного больно переходить обратно на JS – уж очень привык к… twitter.com/i/web/status/1…12:11
@octet_stream @jsunderhood CofeeScript, затем его функциональные реаинкарнацию livescript. Затем рыдал ночами переп… twitter.com/i/web/status/1…12:16
Жизненный цикл памяти практически всегда одинаков и не зависит от ЯП:
12:231/2 Аллокация памяти происходит при инициализации значений pic.twitter.com/pOR2TChi8z
12:302/2 Скрытая аллокация памяти через вызовы функций pic.twitter.com/B6TbqhP6cm
12:37Использование памяти в JavaScript. Еще раз подчеркну, что работа с памятью происходит опосредованно через синтаксис… twitter.com/i/web/status/1…
12:41Высвобождение памяти в JavaScript происходит с помощью сборщика мусора pic.twitter.com/MezBeI9nd3
12:431/2 Аллоцированные объекты, можно представить в виде направленного графа, причем c одним корневым элементом. Как пр… twitter.com/i/web/status/1…
12:512/2 Получится вот такой граф pic.twitter.com/ghsXFBVUEb
12:52Manager: I want our web app to feel more like a native app
You: pic.twitter.com/Mbt7khSDtS
Библиотека, которая убережет ваш фротенд от ошибок в runtime
Manager: I want our web app to feel more like a native app
13:05
You: pic.twitter.com/Mbt7khSDtS
@jsunderhood Нагибабель сделает ваш проект идеальным github.com/fual/nagibabel…13:20
из вики: утечка памяти - процесс неконтролируемого уменьшения объёма свободной оперативной связанный с ошибками в… twitter.com/i/web/status/1…
13:23В ЯП с ручным управлением памятью: выделил память? воспользовался? убери за собой!
Полная ответственность на разра… twitter.com/i/web/status/1…
В ЯП со сборщиками мусора, то что является мусором, зависит исключительно от алгоритмов реализованных в сборщике му… twitter.com/i/web/status/1…
13:29@jsunderhood По bleeding edge технологиям - статьи и код, по более фундаментальным вещам и скиллам - наставники дико рулят14:38
1/4
Возьмем следующий блок кода, создадим объекты, создадим ссылку внутри объект, а после "занулим" некоторые пер… twitter.com/i/web/status/1…
14:592/4
Граф объектов до зануления мы можем представить так, как на картинке
Теперь рассмотрим что здесь будет являт… twitter.com/i/web/status/1…
15:003/4
С точки зрения алгоритма Referece counting, если хотя бы у одного узла есть ссылка, значит его не нужно удаля… twitter.com/i/web/status/1…
15:023/4 здесь после зануления мусором будет с2
15:034/4 Для алгоритма mark-and-sweep, мусором будет, те узлы, которые недостижимы из корневого. Для этого производится… twitter.com/i/web/status/1…
15:104/4 У сборщика мусора с реализацией этого алгоритма больше накладных расходов и есть одна серьезная проблема "пробл… twitter.com/i/web/status/1…
15:15Есть еще алгоритмы: Mark-compact garbage collection, Copying garbage collection, Comparing garbage collectors, Gene… twitter.com/i/web/status/1…
15:23Источников по этой теме немного, но они есть и они хорошие
The Garbage Collection Handbook (платно):… twitter.com/i/web/status/1…
15:27Вернемся к JavaScript и Браузеру
15:28В современных браузерах сборщики мусора (GC) реализованы на поколениях, используют идею достижимости алгоритма mark… twitter.com/i/web/status/1…
15:38А что нужно знать JavaScript разработчику, помимо достижимости объектов из корневого глобального объекта window?
С… twitter.com/i/web/status/1…
15:44Я за
15:45@jsunderhood Ещё один неплохой источник для начала15:56
dev.to/deepu105/demys…Есть перевод на хабре, но не для всех ч… twitter.com/i/web/status/1…
@jsunderhood Ещё один неплохой источник для начала
dev.to/deepu105/demys…Есть перевод на хабре, но не для всех ч… twitter.com/i/web/status/1…
Дополнение по источникам касательно работы с памятью
@jsunderhood Ещё один неплохой источник для начала
dev.to/deepu105/demys…Есть перевод на хабре, но не для всех ч… twitter.com/i/web/status/1…
15:59
@aarexer @jsunderhood mix(threads, memes, 0.5);16:00
@zolotyh @jsunderhood Вот прям сел длиннопост на эту тему писать, завтра скину ссылку :)16:09
Когда-то эмперически было выясненно, что как правило GC запускается после очередной из аллокаций (как сейчас дела о… twitter.com/i/web/status/1…
16:17Наставничество pic.twitter.com/NREw7D1tO5
17:16Ищу новую интересную работу : )18:56Вёрстку знаю хорошо, JS похуже. Резюме тут: hh.ru/resume/727a414…
Москва
@jsunderhood Преподавл pic.twitter.com/sOyiKPfTom20:03
# Суббота 48 твитов
@jsunderhood Очень много выступал, самое приятное что было, выступал от ВК для детишек и рассказывал им про бизнес,… twitter.com/i/web/status/1…9:07
@jsunderhood Парни а где сам кантор?9:07
Твиттер? Инст? Или место работы?
@jsunderhood Шикарная вахта! Давно такого не было9:07
@jsunderhood Передавать опыт - часть работы техлида. Так что постоянно.9:13
@jsunderhood Да, это первая версия движка) я к тому, что олды разные могут быть. Когда я читал… twitter.com/i/web/status/1…9:42
Изучал jQuery по бумажным книгам. В смысле видосы по Webpack?9:56Олды здесь?
Лайк, если учился по материалам Кантора twitter.com/iGontarev/stat…
Как насчёт самоучителя по HTML 3.2 от Алленовой Натальи? У меня до сих пор на флешке лежит, например.10:07Олды здесь?
Лайк, если учился по материалам Кантора twitter.com/iGontarev/stat…
Это я что? Тред зря начал писать вчера? pic.twitter.com/hYXbxjumHe
10:25@jsunderhood Помню как начал изучать nodejs на code school, пока они ещё были живы. Одни только заставки чего стоил… twitter.com/i/web/status/1…10:47
@jsunderhood А кто помнит библиотеку JsHttpRequest от dklab (вроде это от создателя Дэнвера)? Я на нем в ~2007 свое… twitter.com/i/web/status/1…11:03
Пользуясь случаем хочу лишний раз попиарить несколько источников достойных внимания, откуда можно почерпнуть что-то… twitter.com/i/web/status/1…
11:19Defront
Ведущий: @myshov
Ламповый канал про фронтенд-разработку и не только. Всё самое полезное для опытных web-р… twitter.com/i/web/status/1…
11:20ДевШахта
Ведущий: @amel_true
Подкаст. Переводы. Веб-разработка.
Помимо всего прочего много материалов касательно… twitter.com/i/web/status/1…
11:21UnderJS
Ведущие: @ovrweb @rage_monk
Самый безызвестный подкаст во всём фронтенде
Website: underjs.ru… twitter.com/i/web/status/1…
11:29Веб-стандарты
Telegram: t.me/webstandards_ru
Редакторы новостей: @pepelsbey @dark_mefody
Подкаст:… twitter.com/i/web/status/1…
11:46Подкаст Пятиминутка React
Ведущий: @PetrMyazin
Подкаст о React и смежных технологиях в мире JavaScript
Website:… twitter.com/i/web/status/1…
12:05Если коротко из ничего появляется все
Потом все умирает (вселенная остывает) и на второй кругу
ps Обещал в понедел… twitter.com/i/web/status/1…
12:16@jsunderhood Я хз кто начал вести этот ак. Но заебали и отписка с таким потоком. Дохуя. Душно пиздец
Альтернативные мнения
@jsunderhood Я хз кто начал вести этот ак. Но заебали и отписка с таким потоком. Дохуя. Душно пиздец
12:19
Похоже нужно взять паузу на сегодня :)
12:22Перейдем к практике. У современных браузеров (chrome, safari) существуют инструменты для профилирования этой кучи,… twitter.com/i/web/status/1…
14:12Идея поиска утечек на практике проста:
14:12Chrome devtools. Performace profiling.
Важным здесь является профилирование Memory. Оно покажется количество объек… twitter.com/i/web/status/1…
14:12Помимо возможности вызвать вручную сборку мусора, можно также проследить за работой этого сборщика мусора, в части… twitter.com/i/web/status/1…
14:12Major GC и Minor GC это намек на то, что сборщик мусора в v8 работает на поколениях. В прикреплении детали работы с… twitter.com/i/web/status/1…
14:16Если график профилирования памяти выглядит так (картинка), значит все хорошо, память аллоцируется, затем срабатывае… twitter.com/i/web/status/1…
14:30Если график профилирования памяти выглядит так (картинка), GC пытается чистить, но общий уровень растет, значит воз… twitter.com/i/web/status/1…
14:30@jsunderhood Попытаю счастья и расскажу о своём. Открыл недавно, ещё на этапе «поиска формата», но в целом там уже… twitter.com/i/web/status/1…14:32
PiterJS
Организаторы: @gopiterjs
Сообщество вокруг JavaScript, платформы node.js и все, что с ними связано c бере… twitter.com/i/web/status/1…
15:08HolyJS
Организаторы: @HolyJSconf
Конференция для JavaScript-разработчиков
Youtube канал с докладами: youtube.com/c/HolyJS
15:08@jsunderhood Еще Frontoweek
Важнейшие события фронтенда за неделю.
Подкаст: anchor.fm/frontoweek
Рекомендация от читателя
@jsunderhood Еще Frontoweek
15:37
Важнейшие события фронтенда за неделю.
Подкаст: anchor.fm/frontoweek
jsunderhood - полезный коллективный аккаунт 🤗 pic.twitter.com/PbFgrtM3dF
15:40Хорошо, память растет, возможно утечка, что делать дальше? Искать 🙃
Heap Snapshot позволит сделать снимки кучи (ме… twitter.com/i/web/status/1…
16:04Allocation Timeline, другой инструмент, позволит понять КОГДА и ЧТО аллоцировалось
developers.google.com/web/tools/chro… pic.twitter.com/ByrxkEqta0
16:12Какие еще есть инструменты, что они делают, как ими пользоваться - читайте в описании Google DevTools
В статьях скр… twitter.com/i/web/status/1…
@jsunderhood А есть ли какие-то каналы/аккаунты/сообщества creative developer-ов по особенностям разработки «красив… twitter.com/i/web/status/1…16:16
Обычно выделяют 4 типа утечек связанных с:
- глобальными переменными
- таймерами
- event listener
- замыканиями
По… twitter.com/i/web/status/1…
16:25В своем старом доклад про утечки памяти выделял больше типов. Поэтому вопрос типов утечек - вопрос относительный
С… twitter.com/i/web/status/1…
16:49Времени осталось немного - чуть более суток, потому выбор за вами:
или еще один тред - про браузерные отпечатки
ил… twitter.com/i/web/status/1…
Напоследок приведу пример самой простой утечки из доклада.
Напишем сервис кэширования. Также для демонстрации рос… twitter.com/i/web/status/1…
18:09График Performace profile, на нем видно несколько "всплексов", это я вручную запускал GC, однако количество памяти… twitter.com/i/web/status/1…
18:17В чем проблема? Проблема в переменной cache она хранит в себе значения, после удаления сервиса, поскольку является… twitter.com/i/web/status/1…
18:35Сделав очередные замеры, и запустив вручную GC, получаем следующий график. После вызовов GC количество объектов в J… twitter.com/i/web/status/1…
18:37@jsunderhood Наверное, в контексте кэширования стоит упомянуть довольно уникальные WeakMap и WeakSet.
Как заметил @anber_ru второе решение это использование Weak-* объектов, в нашем случае WeakMap, который будет храни… twitter.com/i/web/status/1…
@jsunderhood Наверное, в контексте кэширования стоит упомянуть довольно уникальные WeakMap и WeakSet.
18:39
Фиксирую текущие результаты опроса:
Будем раскрывать тему про браузерные отпечатки
Если бы выбрали CTF, то… twitter.com/i/web/status/1…
19:12На сегодня дежурство завершено! 🥱
Завтра будет последний день недельного дежурства!
Увидимся!
# Воскресенье 58 твитов
@jsunderhood А как на счёт Дмитрия Сошникова и его статьи про ECMA 262?
Упустил из внимания, хотя упоминал в одном из тредов dmitrysoshnikov.com
@jsunderhood А как на счёт Дмитрия Сошникова и его статьи про ECMA 262?
9:10
JavaScript и Браузерные отпечатки #тред pic.twitter.com/G6xKpvYqhc
9:59@jsunderhood @DmitrySoshnikov is amazing. His educational lectures about interpreters and JS are absolutely fantast… twitter.com/i/web/status/1…10:07
Как вам эта неделя?
10:27Не для кого не секрет, но за интернет пользователями следят, причем давно, а что если я скажу тебе, что это происхо… twitter.com/i/web/status/1…
12:14Кому нужны мои данные?
Рекламные сети: Google AdSense
Брокеры данных: DoubleClick, ComScore, cXense
Сервисы аналит… twitter.com/i/web/status/1…
Когда правительства собирают данные, мы называем это «слежкой», когда компании делают то же самое, мы ошибочно назы… twitter.com/i/web/status/1…
12:18Причем тут браузеры?
Как правило в веб-сайты встраиваются трекеры, которые отправляют данные о пользовательской а… twitter.com/i/web/status/1…
12:331/2 Причем тут браузерные отпечатки?
Можно пометить браузер пользователя, и отслеживать его перемещения. Как тольк… twitter.com/i/web/status/1…
12:352/2 Далее если пользователь будет неавторизованным, то мы все равно сможем все равно сказать, что это вот тот самый.
12:37Отпечатком может воспользоваться как одиночный сайт и анализировать активность анонимов
Так и сеть сайтов, которая… twitter.com/i/web/status/1…
Например, рекламные сервисы. Сделав запрос на поиск товара на одном сайте, свяжем метку и запрос. Зайдешь на другой… twitter.com/i/web/status/1…
12:46Отчасти дело в трекерах, трекеры повсюду!
Одно время был популярен сторонний сервис комментирования disqus. Некий… twitter.com/i/web/status/1…
12:54@jsunderhood С этим можно достаточно успешно бороться. Например pi-hole на всю локальную сеть занулит dns12:56
@jsunderhood Просто покажу свой дашборд чтобы вы понимали масштабы производства pic.twitter.com/y2B2TN4BT212:56
@jsunderhood Магазинам и их антибот системам. Это огромный рынок с большими деньгами.13:27
@jsunderhood Добавлю важный поинт (не увидел, может быть будет внизу) — для безопасности. Проверять, что пользовате… twitter.com/i/web/status/1…13:40
@me_mrsum @jsunderhood Прошу прощения, а какие у вас девайсы больше всего блочатся? У меня pi-hole показывает, что… twitter.com/i/web/status/1…15:46
Далее, чтобы не затягивать спойлер, многое буду брать из доклада про отпечатки youtu.be/3D7HjYLkVrs
17:28Отпечаток это своего рода идентификатор id
Отпечатки бывают трех видов
Пассивные, когда мы ориентируемся на загол… twitter.com/i/web/status/1…
17:39Пассивные отпечатки могут использоваться HTTP-заголовки: Accept, Accept-Encoding, Accept-Language, Connection, Host… twitter.com/i/web/status/1…
19:30Активные отпечатки для сбора характеристик запускают какой-нибудь код, как правило это JavaScript-код. Здесь также… twitter.com/i/web/status/1…
19:33Для активных отпечатков большое раздолье, можно брать очевидные характеристики браузера: включены ли Cookies, timez… twitter.com/i/web/status/1…
19:35Грубо говоря, все то, что можно вытащить из navigator может попасть в активный отпечаток: pic.twitter.com/QQOZ7Yw3uS
19:46Прежде чем продолжить необходимо ввести еще несколько понятий:
Поверхность браузерного отпечатка - набор наблюдаем… twitter.com/i/web/status/1…
19:50Набор состоит из определяющий характеристик, по сути все то, что характеризует пользовательский браузер, вспомните… twitter.com/i/web/status/1…
19:54Важным фактором является энтропия, она показывает насколько бит поверхность одного отпечатка, может отличаться от д… twitter.com/i/web/status/1…
19:551/2 У вас есть 100 знакомых все из них живут на улице Большая Садовая, и вы знаете адрес каждого но без личности
е… twitter.com/i/web/status/1…
20:042/2
Если, каждый будет жить по своему номеру доме, тогда вести, слежку и устанавливать личность будет проще.
Есл… twitter.com/i/web/status/1…
20:05Можно посчитать какой длинны необходима в идеале определяющая характеристика, население планеты ~7,5 млрд -> 33 бит… twitter.com/i/web/status/1…
20:07Есть еще другие факторы определяющих характеристик, которые описывает спецификация
да, да, да не удивляйтесь такое… twitter.com/i/web/status/1…
20:09Вернемся к техникам получения активных отпечатков, а именно к неочевидным и возможно самым практичным
20:131/2 Canvas Fingerprint, 2012 год
hovav.net/ucsd/papers/ms…
Самая эффективная и самая простая в реализации техника, н… twitter.com/i/web/status/1…
2/2 Один и тот же текст может отображаться по-разному на разных компьютерах в зависимости от операционной системы,… twitter.com/i/web/status/1…
20:16Есть еще техники получения через работу с audioContext (почти устарело), через WebGL как продолжение идеи canvas fi… twitter.com/i/web/status/1…
20:20Кстати и у браузера Tor, есть своя дока, которая описывает как она борется со всеми этими трекерами и фингепринтами… twitter.com/i/web/status/1…
20:23Несмотря наличие встроенных механизмов можно все таки провернуть одну технику для браузера Tor
browserleaks.com/rects
Повторюсь для закрепления активные отпечатки позволяют через выполнение кода получить наблюдаемые характеристики оч… twitter.com/i/web/status/1…
20:25Реализации:
20:33Первая реализации это похоже на реинкарнацию другой библиотеки от Валентина Васильева, тк он майнтейнер в новой по… twitter.com/i/web/status/1…
20:38@jsunderhood Еще есть: WebRTC, Permissions API, размеры окна браузера (звучит дико, но в 99% помогает в отпечатке п… twitter.com/i/web/status/1…
Как заметил @Vitalliumm реализаций FP (fingerprint) очень много, есть даже веб-сайт библиотека таких техник и подхо… twitter.com/i/web/status/1…
@jsunderhood Еще есть: WebRTC, Permissions API, размеры окна браузера (звучит дико, но в 99% помогает в отпечатке п… twitter.com/i/web/status/1…
20:41
Перейдем к 3ему виду отпечатков, cookie-like или куки-подобные отпечатки, суть: формируем значение (на сервере) отд… twitter.com/i/web/status/1…
20:43@timocov_ @jsunderhood Инкогнито режим спасает только от появления pornhub.com в истории браузера :) ва… twitter.com/i/web/status/1…20:50
@timocov_ @jsunderhood А гугл продвигает еще API, которые еще больше вариантоав добавят для идентификации пользоват… twitter.com/i/web/status/1…20:51
Самый интересный баг, который мог стать экзотическим хранилищем - могли читать историю браузера, записать и прочита… twitter.com/i/web/status/1…
21:01@jsunderhood Достаточно двух акков в гугле и яндексе чтобы тебя чекали на всех устройствах где ты залогинен в этих… twitter.com/i/web/status/1…21:03
Было еще одно экзотическое хранилище на основе HSTS, но изначальный pdf документ исследование недоступен,… twitter.com/i/web/status/1…
21:08Окей, есть 3 вида отпечатков, с нас собирают характеристики, чтобы из них сформировать уникальный id, что делать?… twitter.com/i/web/status/1…
21:11И кстати парадокс, но чем больше вы боретесь, тем более уникальным вы становитесь, лучшая тактика быть как все.
Но… twitter.com/i/web/status/1…
21:12И эти меры уже предпримаются браузерами, но по разному
w3c.github.io/fingerprinting… pic.twitter.com/lixYWVHWIN
Из браузеров по слухам рекомендуется браузер brave.com, там из коробки больше анти трекинговых механизмов
21:15Информации по теме много, но нужно завершить тред
Добавлю, если браузерный отпечаток основан на общеизвестных хара… twitter.com/i/web/status/1…
21:20@jsunderhood Хочешь анона - юзай другой браузер, OS и комп. Иначе все это тлен и когда-нибудь тебя выкупят.21:23
На этом моя неделя на @jsunderhood заканчивается!
Благодарю всех и каждого за дополнения по темам, а главное за те… twitter.com/i/web/status/1…
21:40Как вам эта неделя?
По опросу многие (на текущий момент ~70%) хотели бы продолжения.
К сожалению после такой бурной недели мне просто… twitter.com/i/web/status/1…
Как вам эта неделя?
21:42
ps. Извиняюсь за опечатки в твитах их тоже было много 😜
21:44# Ссылки
github.com
- https://github.com/denysdovhan/wtfjs
- https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
- https://github.com/stoeffel/awesome-fp-js
- https://github.com/fual/nagibabel.js/blob/master/README.md
- http://github.com/fingerprintjs/fingerprintjs
- http://github.com/Song-Li/cross_browser
other
- https://ecma-international.org/publications/standards/Ecma-262.htm
- https://2ality.com/2015/06/tail-call-optimization.html
- http://2ality.com/
- https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified
- https://developer.mozilla.org/ru/docs/Web/Performance/Critical_rendering_path
- https://en.wikipedia.org/wiki/Counting_sort
- https://gist.github.com/just-boris/5b505017de3f6644bb3f8df1b26bdf3b
- https://codesandbox.io/s/ellipse-rd1o4
- https://youtu.be/SNs61SwZbTI?t=514
- https://youtu.be/K6oZuB8_dU8
- https://youtu.be/3D7HjYLkVrs
- https://www.bram.us/2016/08/27/fun-with-javascript-and-emoji/
- https://eax.me/dynamic-typing/
- https://t.me/jsweekdays
- https://t.me/webstandards_ru
- https://v8.dev/features
- https://www.youtube.com/watch?v=7BPQ-gpXKt4
- https://www.youtube.com/watch?v=8p1uLKYAwEw
- https://www.youtube.com/c/HolyJS
- https://www.youtube.com/watch?v=hqotCdm6Cx4
- https://coub.com/view/dnp3g
- https://rescript-lang.org/
- https://dev.to/alekseiberezkin/what-happened-to-immutable-js-and-how-can-we-react-5c34
- https://dev.to/deepu105/demystifying-memory-management-in-modern-programming-languages-ddd
- https://habr.com/ru/company/hh/blog/513940/
- https://habr.com/ru/company/hh/blog/517594/
- https://jsunderhood.netlify.app/
- https://hh.ru/resume/727a4146ff07b993730039ed1f534f7a333743
- http://javascript.ru/
- https://underjs.ru/
- https://developers.google.com/web/tools/chrome-devtools/memory-problems#visualize_memory_leaks_with_timeline_recordings
- http://dmitrysoshnikov.com/
- https://docs.pi-hole.net/
- https://hovav.net/ucsd/papers/ms12.html
- https://browserleaks.com/rects
- http://pornhub.com/
- https://w3c.github.io/fingerprinting-guidance/#mitigations
- http://brave.com/