FRONTBASE
265 members
2 files
52 links
Основы веб разработки,
Подходы к самообразованию,
Неудобные личные истории.
Все вопросы: @BBankay
Download Telegram
to view and join the conversation
​​React + Redux - Профессиональная Разработка

Курс Юрия Буры - лучший курс по React, который я встречал до сегодняшнего дня. Очень грамотный автор с большим багажом знаний (и не только по JS).

Несколько слов из его habr аккаунта
Днём пишу серверсайд приложения на Java, а по ночам — игры на HTML5 и JavaScript. Написал книгу «Pro Android Web Game Apps» (2012, Apress)

Что в курсе
🔹Современный ECMAScript
🔸Основы React: подробно, качественно
🔹Состояние компонентов + события (Todo App)
🔸Проект SWAPI: Fetch API, работа с сервером, паттерны React 🔥, React Hooks, React Router, etc.
🔹Проект с использованием Redux
🔸Настройка Babel + Webpack

Почитайте комментарии к курсу на Rutracker.org 😉

Купить курс на Udemy
Скачать курс с Rutracker
github Juriy Bura

П.С. Курс стоит всего лишь ~1000 рублей. Это сущие копейки для такого контента, так что очень рекомендую задуматься о поддержке автора - он может записать еще более крутые курсы в будущем.

#best_course
#react_plus_redux_professional_dev_frontbase

Have a good one 😎
​​Лютые доклады по 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
Slow down... или притормози ка лучше

Я сейчас поделюсь очень интересным докладом про то, как надо относится к программированию, и как не надо. Но перед этим скажу еще несколько слов..

Если ты все доводишь до идеального состояния, если ты постоянно в погоне за новыми знаниями, если ты боишься уйти с работы во-время, если ты забыл когда водил свою девушку в ресторан или дарил ей цветы, если замечаешь, что постоянно сохраняешь книги, ссылки, статьи и не успеваешь читать, если ты гонишься за деньгами, но не признаешься себе в этом, то дорогой читатель, лучше внимательно посмотри этот доклад и сегодня измени что-то в своем отношении к работе и к жизни ☀️

Наладить жизнь просто так с утречка - не выйдет
У всех у нас свои "баги" со своими корнями:
🔹 Кто-то перфекционист, потому что боится осуждения (страх);
🔸 Кто-то перерабатывает, потому что надо больше денег (жадность и спешка);
🔹 Кто-то хочет все знать, потому что надо "доказать всем", кто сомневался (обида);
🔸 Кто-то хочет все знать, потому что надо быть лучше всех (амбиции);
🔹 И так далее...

Так как каждый случай индивидуален, то лучше обращаться за консультацией к специалисту. Открою страшную тайну: большинство моих состоятельных и состоявшихся знакомых ходят\ходили к психотерапевту, чтобы избавиться от таких багов и жить полноценно.

Но для начала можно
Смотреть доклад debugger

#best_video
#debugger_frontbase

Take care 😎
​​Официальные гайды от Node

На сайте Node появились official Guides 🔥 - это прекрасно, так как приходилось смотреть анонимов youtube и материалы из курсов. Все же курсы - это комплексная вещь: архитектура, api, data bases, deploy, etc. Особенно хорош курс от Jonas Schmedtmann #node_schmedtmann_course_frontbase. Но считаю, что основы надо брать из официальной документации 😉

Сохранил себе такие ссылки
Introduction to node js
Overview of Blocking vs Non-Blocking
The Node.js Event Loop, Timers, nextTick
Don't Block the Event Loop
Timers in node js

Перейти на основной список guides

#best_course
#node_official_guides_frontbase

Have a good summer ☀️
​​Годный подкаст

Специально для вас перед выходными я кое что принес (шуршит в пакете... стучит барабанная дробь...) - очень годный и интересный подкаст 🚀🚀🚀

Про автора
Рахим Давлеткалиев - сооснователь Hexlet (крутейшего образовательного ресурса); в прошлом преподаватель в меджународном ИТ университете. Очень умный парень 👈

Про подкаст
Перечислю некоторые тайтлы
🔸Машины заменяют программистов, перспективы ML и как развиваться в Ауле
🔹Интерфейсы будущего
🔸Оценка сложности алгоритмов и проблема P vs. NP
🔹Многослойный пирог абстракций и операционные системы
🔸Алан Кей, ООП и клетки
🔹Шестнадцать советов
🔸История LISP
🔹Чего у нас нет в 2020 году

Буду краток: рассказывает охренительно интересно.

Слушать подкаст Мысли и методы
Перейти на twitter аккаунт Рахима

#best_podcast
#rachim_podcast_frontbase
​​Must have: командная строка 🔥

Есть идеи и знания, которые дарят свободу. Знания о командной строке - одни из таких. Это информация, которая не устаревает. Это, мать его, классика - это знать надо! 👈

С высоты орбитальной станции
Есть операционная система - "главная" программа, которая управляет железом: процессором, видеокартой, сетевой картой, накопителями, и т. д. Это абстракция над железом. И есть командная строка, которая управляет операционной системой. Это интерфейс к сотням маленьких программ: встроенных и пользовательских, которые позволяют творить магию и понимать, как устроен мир пониже вашего красивого GUI 🤖

Контекст же ж
Когда понимаешь окружение, в котором работаешь, то делаешь вещи увереннее. Достаточно знать общие идеи того, как устроена ОС и как работать в командной строке. Сейчас я поделюсь ресурсами по командной строке, позже дам информацию по операционным системам.


Ресурсы
Вводный курс от Hexlet по Bash
- немного истории (интересно)
- основные команды (база)
- практика !

Командная строка Linux. Уильям Шоттс
- более интересные детали
-- подстановка (что делает командный интерпретатор с аргументом, перед тем как передать его команде для выполнения)
-- экранирование (подавление подстановки)
-- основные команды, работа с процессами, настройка окружения, vim, etc

Learn enough command line to be dangerous
- сжатый, но информативный курс на английском
- содержит много скриншотов и пояснений
- если подписаться на рассылку, то все бесплатно

#best_corse
#best_book
#bash_frontbase
​​Must have: Операционные системы 🚀

В 12 лет у меня появился первый комп, я исследовал его каждый день, от чего он переставал работать 🤓. => научился ставить windows и получил представление, как работает ОС. Это был момент силы 💪. Ко мне начали обращаться с разными просьбами: крякнуть MS Office, сбросить пароль старшего брата 🙂 - все успешно крякалось и сбрасывалось. Конечно, это был скрипт-кидди стайл, но работало: я кое что знал и мог решать задачи.

Когда я попал во взрослый IT, где пишут продукты и продают за много $ - я понял, что знание работы ОС снова позволит решать задачи. Такие способности многое меняют: скорость разработки, уверенность в действиях, амбиции, задачи, результаты.

Ресурсы
🔥 Основы операционных систем. (Дмитрий Кетов). Очень толковое объяснение происхождения, назначения и структуры операционок. Первое, что советую посмотреть.
Смотреть на Youtube

🔹Архитектура ЭВМ и основы ОС (Кирилл Кринкин). Не менее интересный видеоряд с понятным спичем, но с упором на работу железок.
Смотреть на Youtube

🔸UC Berkeley Computer Science 162 (John Kubiatowicz). Контент на инглише от непоследнего в мире учебного заведения. Есть новее (2015 год), но здесь полнее материал + лучше иллюстрации.
Смотреть на Youtube

🔹На закуску книга "Операционная система UNIX" (Андрей Робачевский). Одна из лучших русскоязычных книг по UNIX. После курсов выше многое становится на свои места.
Скачать с Rutracker

#best_course
#best_book
#operational_systems_frontbase

Do your best 🤘
​​Код. Тайный язык информатики

Начиная с азбуки Морзе и устройства фонарика 🔦 вы соберете настоящий компьютер. Я не шучу. Эта книга волшебная - после нее вы поймете магию, которая происходит в пучинах железного океана микроэлементов. Поймете как работает компьютер, с помощью которого читаете этот пост. Что-то изменится в вашем разуме. Вы поймете, что все арифметические операции есть хитрое использование сложения; что сама арифметика есть не что иное как логика; что бит информации всего лишь электрический сигнал, и поймете почему. Книга просто написана, но ради такого кайфа читал дважды.

Скачать книгу с Rutracker

#best_book
#code_book_frontbase
​​Git и React от ШРИ 2019-2020

Яндекс ШРИ выкладывает записи докладов в открытый доступ, но не все они заслуживают внимания 😐

Но! "Все" - "не все" = "что-то"
Попалась на глаза подборка из последних докладов, пролистал и нашел крутые вещи!

React: монтируй, демонтируй, обновляй
Как полноценно, интересно и без воды описать современный React ? Смотрите на Youtube 👈

Git для совместной работы...
Еще один крутой summary, только теперь про git. Очень помогает структурировать знания и глубже понять, что происходит в недрах папки .git
Смотреть на Youtube

#best_video
#react_git_shri_2020_frontbase

Have a good weekend 🏞🌃😎
​​Грокаем алгоритмы

Это вам не просто спресованная бумага... Это отличная книга про алгоритмы: важные идеи, простые иллюстрации, а главное - понятный даже ученику начальных классов смысл в тексте. Это, как вы уже привыкли, обязательно к прочтению, потому что 🔥

Скачать с Rutracker

#best_book
#grok_algorithms_frontbase
​​Just for fun 🎊

Как чаще всего бывает ?
Видишь человека, который сделал что-то значимое. Начинаешь размышлять: Что им движет ? Каковы его мысли и идеи ? За счет чего он преуспел ? Эти вопросы являются поиском секрета. Мы ищем секреты и магические вещи, которые быстренько сделают из нас гениев. Вспомните свой опыт, скорее всего вы найдете не один пример.

Как оно еще бывает ?
Человеку попадается интересная штука. Любопытство зашкаливает и он делает первый шаг. Если кайф от процесса сильнее сложностей на пути, в мире происходит что-то значимое. Вот так все просто.
Just for fun 🙂

Вот крутая история на ~100 страниц про ОС Linux. Про те самые секреты и о чем думал Линус, когда создавал свое детище.

Скачать с Rutracker

#best_book
#just_for_fun_frontbase

Gnight 🌌🌃
​​🚀🚀🚀 SICP - MIT lectures 👈

Я уверен, что люди после 2000 г. р. не могут быстро осознать, насколько круто, что существует интернет. Любой может учиться у лучших! Давайте-ка еще раз
- бесплатно
- учиться
- у лучших преподавателей
- на нашей огромной планете
- не в рамках города, области, и даже нашей большой страны - а на 🌏

Я с удовольствием посмотрел большую часть лекций SICP, что рекомендую сделать и вам

Вот некоторые фразы из лекций
🔸 В компьютерной науке мы занимаемся формализацией императивного знания - как сделать эту штуку. Но реальные проблемы появляются, когда мы строим БОЛЬШИЕ системы. Единственная причина, почему мы можем их строить - люди придумали техники борьбы со сложностью. Вот они
- Абстракция (black-box abstraction)
- Стандартные интерфейсы
- Метаязыковая абстракция (новые ЯП)

🔹 Когда мы пишем код нет большой разницы между тем, что мы можем построить и тем, что мы можем вообразить. Основное ограничение - всего лишь ограничение нашего ума

🔸Знаете чему следует научиться ? - игнорировать детали. Ключ к понимаю большой системы в том, чтобы проигнорировать все лишнее

🔹Если вы знаете имя, у вас есть сила - сила повелевать тем, что названо этим именем. (называйте свои переменные\функции правильно)

Скачать лекции SICP с Rutracker

#best_course
#sicp_lectures_mit_frontbase

🤘😎
​​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 🌁
​​Борьба с количеством информации

Давайте за меру количества информации примем число двоичных единиц (битов).

Объем непосредственной памяти человека ограничен ~7 +- 2 объектами. Она как бутылочное горлышко - не пропустит в сосуд (долговременной памяти) больше, чем положено. Значит ли это, что количество информации, которое может пропустить такой канал постоянно ? Нет. Иначе бы мы учились очень медленно.

Перекодирование
Оператор, который использует азбуку Морзе поначалу различает лишь отдельные сигналы. Но в ходе обучения точки и тире организуются в слуховые образы, которые все проще группировать в отдельные буквы, слова и целые предложения. Постепенно КПД того, сколько может запомнить оператор - растет.☝️Повторю, что сначала процесс перекодирования медленный, ведь оператор еще не умеет группировать сигналы. Основная мысль: группировать информацию на входе надо учиться специально!

Profit
Быстрее группировать информацию на входе = понимать, запоминать и передавать больше, чем раньше. Все равно, что стать уменее.

Это все из пейпера Дж. Миллера, но также я вспомнил курс от Барбары Оукли - в нем есть модуль как раз про группировку:

Chunking
Chunks are compact packages of information that your mind can easily access. We’ll talk about how you can form chunks, how you can use them to improve your understanding and creativity with the material, and how chunks can help you to do better on tests. We’ll also explore illusions of competence in learning, the challenges of overlearning, and the advantages of interleaving.

Рекомендую пробежаться по пейперу Дж. Миллера и обязательно пройти часть курса от Барбары про группировку. Как только освоитесь, можете посмотреть весь.

Читать white paper Дж. Миллера - магическое число 7 плюс минус 2

Курс learning how to learn

Увидимся на вершине (С) Тур Хейредал 🌁
​​Algorithms & Data structures

Любой хороший разработчик думает об эффективности. А как это ? Ну, это когда программа использует минимум ресурсов и выдает максимум результата.
А что такое ресурсы ? Это память компьютера и количество операций процессора. Кхм, интересно...

Если очень интересно, то вот курсы по теме где минимум воды, так как заточены под interview 😉

🔸 The Coding Interview Bootcamp: Algorithms + Data Structures (Stephen Grider)
Типичные задачи + несколько пасхалок, общепринятые подходы к решениям (memoization, sliding window, etc) и построение структур данных на JavaScript. Быстро, коротко, ясно.
Скачать курс с Rutracker
Смотреть курс на Udemy

🔹 Master the Coding Interview: Data Structures + Algorithms (Andrei Neagoie)
Этот курс я не проходил, но посмотрел контент и понял, что должно быть 🔥
Начинается курс вот так:
- Getting more interviews
- Big O
- How to solve coding problems
При чем, про big O довольно подробно, так что однозначно надо тестировать 🤓
Смотреть курс на Udemy

#best_courses
#algorithms_data_structures_frontbase

Cheers 🤘
​​Разбираемся в 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 🏅
​​Как работает Event loop

Проболтался друганам, что джаваскриптер, задали вопрос про event loop, нифига не понял, решил ответить хоть что-то и начал про коллбэки... послали на youtube на 3 замечательных... видео, которыми после такого позора я решил с вами поделиться 😐

Ладно, мне задали вопрос на собесе и я на него ответил. Так что за event loop и за собесы 🍻

Ссылки
What the heck is the event loop anyway? (Philip Roberts)
Вполне ожидаемое видео: все понятно, кратко, с примерами. Скажем, что это фундамент.
Смотреть видео на youtube

Further Adventures of the Event Loop (Erin Zimmer)
Барышня пошла по стопам Филипа (отсюда и название) - добавила информацию про разные очереди и их приоритетность.
Смотреть видео на youtube

In The Loop (Jake Archibald)
Ну а этот мужик зашел дальше всех, в сам event loop (судя из названия). Ему явно есть что рассказать. Спойлер: стоит смотреть.

Gnight 🌌
​​Inheritance: classical VS. prototypal

JS использует прототипное наследование, настоящих классов нет - только объекты и примитивные значения.

Основное различие между классами и прототипами в гибкости последних: можно динамически добавлять в прототип методы/свойста и все объекты, которые прототипно наследуют - увидят изменения. В классическом наследовании такое недоступно (только в SmallTalk и Ruby) + много проблем, которые JS избежал за счет гибкости.

Ссылки почитать
🔹Classical inheritance vs prototypal
🔸Распространённые заблуждения о наследовании в JavaScript
🔹Why Prototypal Inheritance Matters
🔸Наследование и цепочка прототипов

What may be a hassle at first soon becomes habit 😎
​​Взрывная волна идей и опасность инстинктов

2 замечательных видео для новых, отличающихся мыслей о программировании

Richard Feldman — The Next Paradigm Shift in Programming
Видео про смену парадигм программирования: как люди меняли подходы, всеобщий хайп ООП и причины, наводящий вопрос "на подумать" - действительно ли мы пришли куда надо ?

Bret Victor The Future of Programming
🔥 Очень крутое видео. Задумка такая: 70-e годы, инженер транслирует последние идеи из мира программирования и предсказывает что нас ждет в будущем (сейчас), вот только то, что мы видим сейчас - совершенно отличается. Почему ? потому что на заре развивития программирования никто не знал "что такое программирование", и было больше смелых мыслей. Теперь же люди сели в разные вагоны одного поезда и едут туда "куда и все".

Еще Дейкстра в 1972 году написал
«...the tools we are trying to use and the language or notation we are using to express or record our thoughts are the major factors determining what we can think or express at all!»

The world is huge, don't miss it 🌏
​​Асинхронность

Вы пишите код на JavaScript...🤔
console.log("FIRST");
asyncFuncForOneSecond(callback);
console.log("THIRD");


В консоли сразу появляется вывод:
-> FIRST
-> THIRD


Через секунду вызывается наш callback:
-> some data as a result...

JavaScript однопоточный язык - one function at a time! Каждая функция всегда выполняется до конца! Почему же вызов asyncFuncForOneSecond не заблокировал JS поток и дал выполниться console.log("THIRD") 🙄 ?

JavaScript тут ни при чем. Все асихнронные функции выполняются в отдельных потоках (threads) браузера и не мешают работать JavaScript движку. Такой подход называется многозадачность или concurrency - на уровне браузера код организован так, что отдельные задачи (в потоках браузерного процесса) конкурируют за ресурсы (ЦП). Наш ЦП понемногу выполняет каждую задачу, переключаясь на следующую (очень быстро), за счет чего не простаивает дорогое процессорное время.

Promises и async functions позволяют писать асинхронные задачи в синхронном стиле. За счет этого код читаем, а за кулисами асинхронные функции выполняются в потоках браузера, результаты поставляются в callback очереди, event loop их забирает и проталкивает в stack вызовов JavaScript движка.

Посмотреть/почитать
🔸Смотреть офигенный доклад про асинхронность от Ивана Пузыревского из Яндекс.
🔹Читать бумагу про promise от Barbara Liskov и Liuba Shrira аж от июня 1988 года!

#best_video
#asynchronous_frontbase