НАВИГАЦИЯ 📌📌📌

#programmer_in_four_months - цикл статей "Разработчик за 4 месяца"
#best_book - отличная книга
#best_course - годный курс
#best_article - крутая "must read" статья
#best_video - полезный доклад

Одна простая идея GIT

Однажды я увидел git с другой стороны. Этот день был точкой невозврата.
Новый способ посмотреть на git я узнал от орегонского разработчика Sam Livingston-Gray. Я перевел, слегка дополнил (где картинкой, где комментарием) и сильно сократил основную идею. После рекомендую прочитать целиком то, что он написал. Все ссылки в конце статьи. Поехали 🏎🏎🏎

#best_article

Читать: одна простая идея git
Читать с VPN: одна простая идея git

Браузер. Основные принципы работы

Тот, кто хочет быть квалифицированным специалистом, должен быть хорошо знаком с окружением, в котором он работает. Для веб-разработчика - это в первую очередь браузер.

Я постарался выжать суть из пары-тройки ресурсов, чтобы детали не затмили важных частей. Пусть выхи будут "что надо"! До скорых 🤜🤛

#best_article

Читать: браузер. основные принципы работы
Читать с VPN: браузер. основные принципы работы

​​Политика одного источника и "корсы"

Сегодня важная тема: Same Origin Policy и технология CORS.
Есть как минимум две причины, по которым это надо знать:
Первая: это основа безопасности web приложений.
Вторая: этот вопрос часто звучит на собеседованиях.

Го 🚀🚀🚀

#best_article

Читать: same origin policy & CORS
Читать с VPN: same origin policy & CORS

​​Teach yourself programming in ten years

Вспомнил про короткую, но отличную статью от Питера Норвига (ученый в области вычислительной техники, директор по исследованиям в Google).

Если коротко, то взрослый мужик трансилирует идею:
постоянная практика, практика и только практика. А если уж книги, то только лучшие (а таких на пальцах посчитать). В конце он, кстати, рекомендует несколько, включая СИКП (не совпадение).

“Никто не сможет стать выдающимся программистом, изучая компьютерные науки, или выдающимся художником, изучая кисти и краски”. 👨‍💻👨‍💻👨‍💻

#best_article
#best_book

читать статью на русском
читать статью на английском

​​Big O Notation 🔞

Цикл статей, который “на пальцах” объясняет, как оценивать сложность алгоритмов.

Front-end - это не спортивное программирование, где важно все (каждый символ и финтифлюшечка), но понимание Big O, а точнее то, для чего это надо - важно.
Некоторые вещи могут катастрофически влиять на скорость, например вложенные циклы. Ради полезных основ стоит почитать, а позже, если интересно, копнуть глубже.

П. С. Что лучше, 10 средненьких статеек, или 1 хорошая ? - понятно, что второй вариант. Поэтому в ближайшее время буду делиться 🚀🚀🚀 топ линками 🎁🎁🎁

#best_article

Читать: Введение в анализ сложности алгоритмов - часть 1
Читать: Введение в анализ сложности алгоритмов - часть 2
Читать: Введение в анализ сложности алгоритмов - часть 3
Читать: Введение в анализ сложности алгоритмов - часть 4

​​Учиться, чтобы побеждать. А. В. Суворов ©

На тему обучения у меня много своих заметок, но пока предоставлю слово Барбаре Оукли - профессору инженерии в Oakland University. Когда проходил ее курс “learning to learn” на coursera, на одном из слайдов увидел как Барбара кидает гранату в армии! Короче, женщина серьезная 😁

Теперь о деле.
Нашел выжимку из книги Барбары “A mind for numbers” о том, как правильно учиться (или по новому понимать причины), применяя методы, доказанные наукой.

Например:
“Каждая задача имеет определенную энергию активации (Activation Energy – усилия, необходимые для того, чтобы что-то начать)”. - Ведь это правда, прочувствовал на себе. Пока я не ушел в отпуск и не отдохнул, мой канал только “хотел появиться” (хотел 6 месяцев), но после того как стало больше энергии - он появился по настоящему. Вывод: чтобы сделать что-то затратное энергетически, надо хорошо отдохнуть, иначе месяцами можно лишь “носить хотелки в голове”.

Уверен, что новый взгляд на вещи ведет к более эффективным решениям. Успехов 🚀🚀🚀

#best_article

Читать статью: Изучайте новое с помощью доказанных наукой методов

​​REST

Часто на собседованиях поднимается вопрос: что такое REST ?
Многие начинают напряженно вспоминать про аббревиатуру API, про методы HTTP, про URL (это все круто, но…) - но это лишь часть REST.

Недавно наткнулся на диссертацию Роя Филдинга по этому вопросу. Это, кстати, человек, который придумал REST в 2000 году. Чтиво на английском, но ради первоисточника можно и через google translater верно ведь… ? 😉

#best_article

Читать статью: Representational State Transfer

​​Российские студенты глазами иностранных преподавателей

Вчера прочитал лекции Ивана Петровича Павлова “Об уме вообще, о русском уме в частности” и сразу вспомнил про интересную статью (название в заголовке, а ссылка ниже).

Иван Петрович, в силу того, что он всю жизнь занимался наукой описывает то, каким должен быть ум ученого. Без сомнений, что об этом ему есть что сказать:
“Я юношей вошел в научно исследовательскую лабораторию, в ней я провел всю свою жизнь, в ней я сделался стариком, в ней же я мечтаю и окончить свою жизнь”.

Затем, во второй лекции, Иван Петрович сравнивает “русский ум” с тем, которым должен ум быть (исследователя, ученого). В частности, он рассматривает привычки мышления русской интеллигенции, так как простой народ не влиял на ход истории, а слепо шел туда, куда направят.

Есть забавный случай из лекций: солдатам предложили устроить карантин (они возвращались с русско-турецкого фронта), чтобы уберечь население от возможного заражения чумой. Солдаты отказали, аргументируя отказ тем, что это происки буржуазных докторов и никакой чумы нет. Совпадение ? 😉

——

Статья еще более детально описывает типичное поведение русского студента. Конечно, есть исключения, но когда узнаешь себя в этих строках, то, как говорится “и смех и грех”. В общем, очень рекомендую и отдаю на откуп вашему личному анализу все прочитанное.

#best_article

Читать: Российские студенты глазами иностранных преподавателей

П.С. Лекции прилагаются. Те, о которых речь в посте - последние 2 лекции.

Modern Web Browsers Architecture

Очень интересно ложатся знания из предыдущих статей на вот эту подборку от google: Inside look at modern web browser.

Внимание, может понадобится VPN:
Читать Part 1
Читать Part 2
Читать Part 3
Читать Part 4

Если очень коротко
Представь, что браузер большой кубик. А теперь представь, что мы бросили его на пол и он распался на множество маленьких кубиков. Каждый маленький кубик это задача, которую браузер выполняет. Так вот, в современных браузерах задачи выполняются отдельными процессами! Получается мультипроцессная архитектура.

Servicification
Браузер такой умный, что в зависимости от возможностей твоей машины может запускать отдельные задачи либо в разных процессах (повышая стабильность и модульность), либо в одном процессе.

Самое интересное
каждая отдельная вкладка (tab) поддерживается отдельным renderer процессом. По сути, renderer process отвечает за все, что происходит внутри вкладки. Почему это круто ? - ну если подвис один сайт, ты просто закрыл вкладку (убил процесс) и броузеришь себе дальше (не нужно убивать процесс браузера) + теперь разным сайтам еще сложнее получить доступ друг к другу (ведь они не шарят контекст JavaScript и прочее), но последнее больше за счет Same Origin Policy (ты же, надеюсь, давно прочитал статью об этом выше).

Очено рекомендую к прочтению. А тем кто не знает English хотя бы картинки посмотреть - тоже полезно.

#best_article

До скорых! 🖐

Как работает JS (цикл статей на Habr)

Довольно хороший обзор JavaScript экосистемы - отлично подойдет для знакомства (когда уже что-то знаешь), без необходимости глубокого погружаться в детали. Другими словами, когда встанет задача, вы будете знать какая именно технология может вам помочь (читай, знаешь куда копать).

О чем пойдет речь
1. Движок JavaScript, стек, память, Event Loop
2. Web workers / Service workers
3. Движок рендеринга и оптимизации
4. Сетевая подсистема
5. Web Socket & HTTP/2
6. Shadow DOM, веб-компоненты, пользовательские элементы и другое...

Читать на Habr

#best_article
Cheers 🤘

​​Вы и ваша работа

Очень сильный 💪 спич 🎤 от Ричарда Хэмминга (отставной ученый Bell labs). Коротко: великие ученые - "плохие парни", потому что "хорошие парни" приходят к финишу последними. Отличия между ними + как делать по-настоящему великую работу - есть тема обсуждения.

Время чтения ~ 30 минут. Но уверяю, это одни из самых полезных 30 минут, если вы действительно хотите заниматься важными вещами в жизни (не только в науке).

Приведу небольшую часть "вопрос-ответ" сессии (будет полезно любителям очень много читать).

Вопрос: Сколько сил должно уходить на работу в библиотеке?

Хэмминг: Это зависит от области. Я вот что скажу об этом. Был парень в Bell Labs. Очень-очень умный парень. Он всегда был в библиотеке, он читал всё. Если вы хотели ссылок, вы шли к нему и он давал вам всякие разные ссылки. Но в процессе формирования этих теорий я сформировал утверждение: его именем в долгосрочной перспективе не будет названо ни одного эффекта. Он уже ушёл из Bell Labs и является адъюнкт-профессором. Он был очень ценен; это несомненно. Он написал некоторые очень хорошие статьи в Physical Review; но его именем не было названо ни одного эффекта, потому что он читал слишком много. Если вы всё время читаете, что сделали другие люди, вы будете думать, как думали они. Если вы хотите думать новые мысли, отличающиеся мысли, тогда делайте то, что делают многие креативные люди: сформулируйте задачу достаточно ясно и отказывайтесь смотреть какие-либо ответы, пока основательно не продумаете задачу – как вы будете решать её, как вы можете немного изменить её, чтобы поставить её правильно. Поэтому да, вам надо быть в курсе. Вам надо быть в курсе больше чтобы узнавать, какие есть задачи, чем читать, чтобы находить решения. Чтение, чтобы находить решения, не кажется путём к значимым исследованиям. Поэтому я дам два ответа. Вы читайте; но имеет значение не сколько, а как вы читаете.

#best_article

Читать на Habr

​​Лютые доклады по webpack

Раньше JS файлы подключали к html файлу руками. Но со временем сайты/приложения становились сложнее, количество JS файлов росло, поэтому появились сборщики. Основная задача сборщика: 👮 собрать 👮из кучи JS файлов один, который выполняет все то же самое. Согласитесь, это лучше, чем ходить в сеть за 50-ю внешними <script ...>.

Для новичков рекомендую official guide:
Getting started with webpack
Таким образом вы сразу "потрогаете" и настроите свой первый маленький бандл.

Для тех, кто в теме - доклады/статьи
🔸 Глубокое погружение в webpack (Стас Курилов, JetBrains). В этом докладе хорошее объяснение архитектуры webpack.
Смотреть на youtube

🔥 Внутренее устройство бандла webpack (Алексей Иванов, Злые марсиане). Лютейший доклад про проблемки, которые определенно возникнут, если не настроить конфиг для webpack правильно. Вообще много интересной информации "около" основной темы.
Смотреть на youtube
Читать на habr

🔹 Вебпак, вид сквозь монокль (Антон Кастрицкий, Яндекс). Очень полезный доклад с упором на ускорение сборки бандла.
Смотреть на youtube

🔸 Собираем бандл мечты с помощью Webpack (Максим Соснов). Почти тоже самое, что и в предыдущем докладе, но есть различия, в частности более подробно про code splitting.
Смотреть на youtube
Читать на habr

🔹 Курс от Владилена Минина. Видосик на 3 часа, так что сразу на x1.25 + если интересно только про вебпак, можно начать с 17-й минуты. Есть полезные вещи, которых нет в предыдущих докладах: context, aliases, etc + курс ориентирован на code along (то есть вы тоже можете писать параллельно свой конфиг).
Смотреть на Youtube

#best_video
#best_article
#webpack_lectures_frontbase

Take it easy ✋

​​Unicode, UTF-8, UTF-16, UTF-WTF

Основная идея в компьютере - числа. Не существует текста, картинок, видео и программ - все есть число. Люди создали системы кодирования, чтобы компьютер различал поток 001011010101 как что-то особенное. Скажи мне кодировку и я скажу тебе что значат эти цифры ☝️

Терминология
🔸Набор символов - просто алфавит, какие-то знаки (English, Русский, 中文, emoji).

🔹Кодированный набор символов - набор, где каждому из символов присвоено уникальное число. Элементы такого набора называют code points. Сode point значение представляет позицию символа в наборе.

🔸Кодировка - система для перевода набора символов в поток битов и обратно - из потока битов в набор символов.

🔹Маппинг - привязка чего-то к чему-то. Например, число 65 = A, число 66 = B.

Первые наборы символов кодировались в числа "напрямую". То есть позиция символа в наборе была на 65-м месте, и само число 65 означало этот символ.

8-битные процессоры
Раньше компы могли оперировать за раз только 8-ю битами. Как будто у процессора была розетка на 8 дырочек, и если бы из памяти прилетало в регистр что-то большее, он бы брал только первые 8. Следовательно, первые наборы символов укладывались в 8 бит (256 символов).

Почему 256 ?
1 бит = 1 слот, в нем либо 0, либо 1
8 бит = 8 позиций X X X X X X X X
Количество возможных перестановок 0 и 1 на 8-ми позициях ограничено (нам нужны уникальные значения из 8-ми нулей и единиц). Уникальных 256 или 2 в 8 степени.

Unicode
Современный стандарт - кодированный набор символов (почти все символы языков мира, emoji и др.), который может быть переведен в биты разными системами кодировки: UTF-8, UTF-16, UTF-32 и др.

Ссылки
The absolutely minimum every developer should know about Unicode - Joel Splolsky
W3C - Character encoding concepts
What is Unicode
Coding Theory - Wikipedia

#best_article
#unicode_utf_8_frontbase

Learn deep, go high 🌁

​​Разбираемся в React

После 🌄 нифигасебе-лета 🌅 я взялся за штурм зарубежных проектов и написание тестовых. Об этом я поведаю, когда закончу весь interview-trip, а сейчас несколько ссылок по React, которыми я освежал свои подзагулявшие знания.

React as a runtime (Dan Abramov)
Основные идеи React, а также "почему так". Обычно классные аналогии Дэн начинает как: "Об X мне нравится думать как о ..." и приводит удачный пример.
Читать статью

Детали реализации (official docs)
Псевдокод алгоритма согласователя (Stack). После такой статьи не должно остаться вопросов: когда, как и почему React компоненты обновляются + как создаются внутренние instances. Замечу, что Stack уже устарел, но идеи важно понять.
Читать статью

React hooks: not magic, just arrays (Rudi Yardley)
Коротко о том, как работают React hooks.
Читать статью

React's useCallback and useMemo by example (Nikolay Grozev)
Прям очень крутая статья о useCallback и useMemo. Рекомендую 🔥
Читать статью

Making setInterval declarative with React hooks (Dan Abramov)
Очередной отличный пример для плотного знакомства с хуками. Снова крутые втсавочки о том, как думать о хуках, аля: "This is what gets me excited about Hooks and React all over again. We can wrap the existing imperative APIs and create declarative APIs expressing our intent more closely. Just like with rendering, we can describe the process at all points in time simultaneously instead of carefully issuing commands to manipulate it."
Читать статью

How Are Function Components Different from Classes? (Dan Abramov)
Если коротко, то функциональные компоненты при каждом рендере "замыкают" все значения внутри: state, props, handlers, etc. Классы - нет. Но лучше почитайте сами и посмотрите примеры.
Читать статью

A complete guide to useEffect (Dan Abramov)
Снова этот Дэн. Ну сори, уж очень прикольно пишет. Лооооонгрид про useEffect, но после этого даже я смог быстренько написать свой useWebsocket с reconnect и unsubscribe при unmount 🙂
Читать статью

Несколько крутых deep dive статей (Max Koretskiy)
Макс Senior Developer, контрибьютор React и Angular и вообще, судя по количеству и тематике статей, серьезный такой кодер.

The how and why on React’s usage of linked list in Fiber to walk the component’s tree

Inside Fiber: in-depth overview of the new reconciliation algorithm in React

In-depth explanation of state and props update in React

#best_article
#learn_react_links

Do your best 🏅