Задача: Треугольник Паскаля
Сегодня разберу легкую задачку с leetcode.
Дано целое число rowIndex. Нужно вернуть массив чисел, который соответсвует этой строке в треугольнике Паскаля.
В треугольнике Паскаля каждое число является суммой двух чисел над ним.
Пример 1:
Ввод: rowIndex = 1
Вывод: [1, 1]
Пример 2:
Ввод: rowIndex = 0
Вывод: [1]
Пример 3:
Ввод: rowIndex = 4
Вывод: [1, 4, 6, 4, 1]
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
Сегодня разберу легкую задачку с leetcode.
Дано целое число rowIndex. Нужно вернуть массив чисел, который соответсвует этой строке в треугольнике Паскаля.
В треугольнике Паскаля каждое число является суммой двух чисел над ним.
Пример 1:
Ввод: rowIndex = 1
Вывод: [1, 1]
Пример 2:
Ввод: rowIndex = 0
Вывод: [1]
Пример 3:
Ввод: rowIndex = 4
Вывод: [1, 4, 6, 4, 1]
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
👍4🔥3❤1
Ловите полезный кастомный хук, который поможет избавиться от бойлерплейта.
Немного пояснений как он работает:
1. Трюк с useRef и useEffect на 8-12 строках нужен для того, чтобы не обязывать всех пользователей оборачивать handler в useCallback. Если просто передавать handler в зависимости useEffect на 14-22 строках, то этот useEffect будет срабатывать каждый ререндер, что не есть хорошо для производительности.
2. isSupported на 15 строке помогает, когда третьим аргументом передается элемент или ref элемента, которые не всегда могут быть в DOM на момент срабатывания функции
P.S. Код хука скину в комменты
#react
Немного пояснений как он работает:
1. Трюк с useRef и useEffect на 8-12 строках нужен для того, чтобы не обязывать всех пользователей оборачивать handler в useCallback. Если просто передавать handler в зависимости useEffect на 14-22 строках, то этот useEffect будет срабатывать каждый ререндер, что не есть хорошо для производительности.
2. isSupported на 15 строке помогает, когда третьим аргументом передается элемент или ref элемента, которые не всегда могут быть в DOM на момент срабатывания функции
P.S. Код хука скину в комменты
#react
👍7🔥3❤2
История ES модулей
Один из подписчиков попросил рассказать подробнее про ES модули. Материала набралось на целую статью с примерами.
Я постарался кратко разобрать Модуль паттерн, CommonJs и EcmaScript Модули, плюсы и минусы каждого из подходов. Если остались вопросы или хотите предложить свои темы для постов – буду ждать вас в комментах.
👉👉👉 Читать статью 👈👈👈
#js
Один из подписчиков попросил рассказать подробнее про ES модули. Материала набралось на целую статью с примерами.
Я постарался кратко разобрать Модуль паттерн, CommonJs и EcmaScript Модули, плюсы и минусы каждого из подходов. Если остались вопросы или хотите предложить свои темы для постов – буду ждать вас в комментах.
👉👉👉 Читать статью 👈👈👈
#js
🔥7👍5🤩1
Чему равны evalX и x?
Anonymous Quiz
29%
evalX: 1, x: 1
44%
evalX: 2, x: 1
21%
evalX: 2, x: 2
7%
evalX: 1, x: 2
👍5🤔2🤯2
🪝Хук useGetLatest🪝
Этот хук создает из объекта геттер, который может помочь избежать многих проблем с лишними ререндерами и утечками памяти. С его помощью можно как оптимизировать большие компоненты, так и создавать собственные хуки. Не думаю, что вы сможете широко применять его в простых компонентах. Я бы советовал составлять пропсы "глупых" компонентов из примитивов (насколько это возможно).
Допустим, есть компонент, который принимает большой объект
Другой вариант - деструктурировать
С помощью
Код, как обычно, в комментах.
#react
Этот хук создает из объекта геттер, который может помочь избежать многих проблем с лишними ререндерами и утечками памяти. С его помощью можно как оптимизировать большие компоненты, так и создавать собственные хуки. Не думаю, что вы сможете широко применять его в простых компонентах. Я бы советовал составлять пропсы "глупых" компонентов из примитивов (насколько это возможно).
Допустим, есть компонент, который принимает большой объект
settings (второй скрин). Нужно при каждом клике по странице делать определенные манипуляции с settings. Многие просто взяли и влепили бы props.settings в зависимости useEffect на 16 строке. Что привело бы к перерегистрации handleClick обработчика при каждом ререндере родительского компонента. Перспектива мрачная.Другой вариант - деструктурировать
settings и добавлять в зависимости useEffect конкретные поля. Уже лучше. Перерегистраций handleClick станет меньше из-за того, что в зависимостях будет не весь объект, а конкретные его части. Но и это можно улучшить.С помощью
useGetLatest useEffect будет срабатывать только один раз, но внутри будет доступ к последним значениям settings.Код, как обычно, в комментах.
#react
👍7🔥2❤1
Задача: Перевод римских цифр в арабские
Разбираю очередную задачу с leetcode.
Дана римская цифра, преобразуйте ее в целое число. Римские цифры представлены семью различными символами:
Римские цифры обычно пишутся слева направо от большего к меньшему. Однако цифра четыре не
Пример 1:
Ввод: s = "III"
Вывод: 3
Объяснение: III = 3.
Пример 2:
Ввод: s = "LVIII"
Вывод: 58
Объяснение: L = 50, V= 5, III = 3.
Пример 3:
Ввод: s = "MCMXCIV"
Вывод: 1994
Объяснение: M = 1000, CM = 900, XC = 90 and IV = 4.
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
Разбираю очередную задачу с leetcode.
Дана римская цифра, преобразуйте ее в целое число. Римские цифры представлены семью различными символами:
I, V, X, L, C, D и M (чему они равны показано на втором скрине). Римские цифры обычно пишутся слева направо от большего к меньшему. Однако цифра четыре не
IIII. Вместо этого цифра четыре пишется как IV. Так как единица предшествует пятерке, мы вычитаем ее и получаем четыре. Тот же принцип применим к числу девять, которое пишется как IX. Есть шесть случаев, когда используется вычитание:I можно поставить перед V (5) и X (10), чтобы получились 4 и 9.X можно поставить перед L (50) и C (100), чтобы получилось 40 и 90 C можно поставить перед D (500) и M (1000), чтобы получились 400 и 900.Пример 1:
Ввод: s = "III"
Вывод: 3
Объяснение: III = 3.
Пример 2:
Ввод: s = "LVIII"
Вывод: 58
Объяснение: L = 50, V= 5, III = 3.
Пример 3:
Ввод: s = "MCMXCIV"
Вывод: 1994
Объяснение: M = 1000, CM = 900, XC = 90 and IV = 4.
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
👍8🔥1🤔1
Зоопарк CSS технологий
Хотел в субботу сделать короткий пост-обзор по современным CSS подходам, с которыми мне довелось поработать. Нюансов оказалось так много, что пост превратился в статью, которую я дописал только вчера ночью😃
Цель этой статьи не рассказывать подробно о каждом подходе, а дать краткое описание и подсветить преимущества и недостатки. Если заинтересует какая-то конкретная технология - дайте знать, расскажу подробнее.
Полную статью можно найти здесь. Ниже выжимка.
#js #react #css
Хотел в субботу сделать короткий пост-обзор по современным CSS подходам, с которыми мне довелось поработать. Нюансов оказалось так много, что пост превратился в статью, которую я дописал только вчера ночью😃
Цель этой статьи не рассказывать подробно о каждом подходе, а дать краткое описание и подсветить преимущества и недостатки. Если заинтересует какая-то конкретная технология - дайте знать, расскажу подробнее.
Полную статью можно найти здесь. Ниже выжимка.
Inline стили. Учитывая все минусы, я рекомендую использовать их в комбинации с любым другим подходом для вычисляемых значений, которые проблематично описать в css;Обычный CSS. Без БЭМ или CSS модулей адекватно можно сверстать, разве что, лабу в универе или пример в codeopen;SASS/SCSS. Аналогично пункту выше. Не рекомендую использовать без БЭМ или CSS модулей;CSS/SCSS + БЭМ. Классика. То, с чем можно построить приложение маленьких и средних размеров. На любом стэке. В больших приложениях растет риск коллизий имен и их решение превращается в квест. Для проектов на React есть варианты получше;CSS модули. Золотая середина для приложений на React. Настроить под них вебпак не составляет труда, а в CRA вообще работают из коробки. Можно строить приложения любых размеров, используя все прелести css, не ломать голову над именами классов и не бояться за глобальную область видимости;CSS-in-JS. Не стоит использовать для сайтов, в которых важен SEO, по крайней мере, run-time решения. Для маленьких проектов слишком много лишнего придется тянуть в проект. Хорошо подходят для средних и больших проектов и команд. В моей практике и styled-components и linaria хорошо показали себя на больших проектах-микрофронтах с UI китом.Tailwind. Может хорошо себя показать в проектах любого размера и назначения. Должен показывать хороший SEO результат. Tailwind подойдет, если вы: синхронизированы с дизайнерами, готовы отказаться от абстрактных классов и длинные имена классов вам не режут глаз. Если нет - выберете что-то другое.Bootstrap. Подойдет для мелких проектов, прототипов и всяких админок и дашбордов, на которые не выделили дизайнера или не хватило бюджета. В остальном может принести больше вреда, чем пользы.#js #react #css
Telegraph
Зоопарк CSS технологий
Стилизациия приложений очень холиварная тема, особенно в React. Я подготовил обзор решений с которыми успел поработать, в той или иной степени. Половина из них применимы, в основном, к React, а другая половина не ограничена библиотеками или фреймворками.…
🔥13👍6❤2
🪝Хук useCombinedRefs🪝
Полезный хук для разработки переиспользуемых компонентов. Объединяет переданный сверху
Пример на втором скрине.
Код, как обычно, в комментах.
#react
Полезный хук для разработки переиспользуемых компонентов. Объединяет переданный сверху
ref с локальным useRef и возвращает один, объединенный. Хук может выручить когда используется перенаправленный реф, и, в то же время, нужен локальный доступ к рефу конечного компонента. Пример на втором скрине.
Код, как обычно, в комментах.
#react
👍6❤2🔥1
Задача: Число-палиндром
Догадываюсь, что многим сегодня не до решения задач😉
У кого есть 10-15 минут свободного времени - ловите простенькую задачку с leetcode.
P.S. Задачу можно решить разными способами. В решении я сделал один из хардкорных: без конвертирования аргумента в строку или массив
Условие: Дано целое число x, верните true, если x является палиндромом, в противном случае - false.
Ввод: x = 2002
Вывод: true
Объяснение: 2002 читается одинаково, как справа налево, так и слева направо.
Пример 2:
Ввод: x = -121
Вывод: false
Объяснение: Слева направо читается как -121, а справа налево как 121-, следовательно, это не палиндром.
Пример 3:
Ввод: x = 10
Вывод: false
Объяснение: Справа налево читается как 01, следовательно, это не палиндром.
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
Догадываюсь, что многим сегодня не до решения задач
У кого есть 10-15 минут свободного времени - ловите простенькую задачку с leetcode.
P.S. Задачу можно решить разными способами. В решении я сделал один из хардкорных: без конвертирования аргумента в строку или массив
Условие: Дано целое число x, верните true, если x является палиндромом, в противном случае - false.
Число-палиндром — число, которое читается одинаково, как справа налево, так и слева направо. Например, 121 — это палиндром, а 123 — нет.Пример 1:
Ввод: x = 2002
Вывод: true
Объяснение: 2002 читается одинаково, как справа налево, так и слева направо.
Пример 2:
Ввод: x = -121
Вывод: false
Объяснение: Слева направо читается как -121, а справа налево как 121-, следовательно, это не палиндром.
Пример 3:
Ввод: x = 10
Вывод: false
Объяснение: Справа налево читается как 01, следовательно, это не палиндром.
Пишите свои версии в комментариях.
Ответ с объяснением 👈
#algorithms
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🍾5🔥2❤1🤔1
Борьба с лишними ререндерами
Лайфхак для тех, кто хочет повысить производительность форм и полей ввода, в частности.
Вы без проблем можете заменить хранение value в
Этот подход можно масштабировать, но чтобы не снижать читаемость, рекомендую обзавестись кастомными хуками или использовать менеджер форм типа React Hook Form. У них хорошая дока, а на базовой странице есть наглядный пример, который показывает разницу в количестве ререндеров относительно менеджеров форм, которые используют стейты.
#react
Лайфхак для тех, кто хочет повысить производительность форм и полей ввода, в частности.
Вы без проблем можете заменить хранение value в
useState на useRef, если в onChange колбэках нет сложной логики и другие компоненты или хуки не зависят от value. Читаемость от этого почти не пострадает, а вот количество ререндеров сильно уменьшится, что хорошо скажется на производительности, особенно, в больших компонентах.Этот подход можно масштабировать, но чтобы не снижать читаемость, рекомендую обзавестись кастомными хуками или использовать менеджер форм типа React Hook Form. У них хорошая дока, а на базовой странице есть наглядный пример, который показывает разницу в количестве ререндеров относительно менеджеров форм, которые используют стейты.
#react
👍9🔥3🤯2🤩1🍾1
Внимание к названиям сущностей
Некоторые программисты ленятся или просто не уделяют достаточно внимания именам. Оно и понятно, придумывать имена - сложно. В этом посте хотел бы дать пищу для размышлений и задать вектор, которым можно руководствоваться при выборе имен.
Имена должны быть короткими, интуитивно понятными и описательными. Вся сложность заключается в том, чтобы сохранять баланс между всеми тремя правилами.
Рассмотрим пример. Допустим, есть объект книги (
Даже с использованием TS лучше давать имена переменным более звучно. Для булевых переменных можно добавлять вопросительные приставки:
Функции заслуживают отдельного внимания. Иногда встречаются функции типа
Некоторые программисты ленятся или просто не уделяют достаточно внимания именам. Оно и понятно, придумывать имена - сложно. В этом посте хотел бы дать пищу для размышлений и задать вектор, которым можно руководствоваться при выборе имен.
Имена должны быть короткими, интуитивно понятными и описательными. Вся сложность заключается в том, чтобы сохранять баланс между всеми тремя правилами.
Рассмотрим пример. Допустим, есть объект книги (
Book), в котором содержится поле read. Сможете ли вы, глядя на название поля, определить его тип? Это булево поле? Дата? А если дата, то в каком формате? TypeScript, отчасти, сглаживает плохой нейминг. Можно создать интерфейс IBook и в нем задать тип для свойства read. Но, глядя на код, все еще проблематично определить тип. Нужно навести мышкой на переменную, а в некоторых случаях, еще и провалиться в тип, для более подробного изучения, да и не все проекты используют TS.Даже с использованием TS лучше давать имена переменным более звучно. Для булевых переменных можно добавлять вопросительные приставки:
is, has и т.д.. Переменная isRead однозначно дает понять, что в ней содержится булевое значение. Если же в переменной содержится дата, то можно добавить суффикс at, например, readAt. Или уточнить тип даты более конкретно: readDateISO, readDateUNIX, readDateObject.Функции заслуживают отдельного внимания. Иногда встречаются функции типа
booksRead. Что делает и возвращает эта функция? Ищет прочитанные книги? Помечает их прочитанными? Пока не провалишься в функцию - не определишь. Самый простой совет - начинайте названия функции с глагола и, по необходимости, добавляйте контекст. Получить список прочитанных книг - getReadBooks, найти книгу по id - findBookById, обновить книгу - updateBook, ручка для обработки колбэка - handleBookRead
#js👍18🔥5❤1
Дефолтные значения при деструктуризации
Многие знают как JS сравнивает не примитивные значения. Поэтому, при необходимости, мемоизируют или выносят за рендер такие переменные в рекакте. Но при деструктуризации пропсов с дефолтными значениями, как будто появляется слепая зона 😅.
Допустим, у MyComponent есть необязательный проп
1. Если
2. Вынести пустой массив в константу за пределы компонента
4. Обрабатывать undefined значение в компоненте. Не очень удобно когда от пропа много зависимостей.
Следите за дефолтными значениями при деструктуризации.
#react
Многие знают как JS сравнивает не примитивные значения. Поэтому, при необходимости, мемоизируют или выносят за рендер такие переменные в рекакте. Но при деструктуризации пропсов с дефолтными значениями, как будто появляется слепая зона 😅.
Допустим, у MyComponent есть необязательный проп
users и для удобства разработчик выставил пустой массив как дефолтное значение (скрин 1). Все было хорошо до того момента, пока не добавили дополнительную логику: isLoading проп, стейт и пару хуков (скрин 2). Теперь при каждом изменении state или isLoading, если проп users не передан, то реакт будет создавать новый массив каждый ререндер, пока не получит существующее значение. Это все равно что писать const users = []. Из-за такого опущения часто случаются лишние ререндеры или даже сайдэффекты. Кейс хоть и хитрый, но есть довольно много путей решения:1. Если
users приходят асинхронно, то можно выставить ему дефолтное значение на уровне хранилища и убрать из компонента.2. Вынести пустой массив в константу за пределы компонента
const DEFAULT_USERS = []3. Добавить проверку на уровне родителя, чтобы не рендерить MyComponent, если в
const MyComponent = props => {
const { users = DEFAULT_USERS } = props
...
users пусто.4. Обрабатывать undefined значение в компоненте. Не очень удобно когда от пропа много зависимостей.
Следите за дефолтными значениями при деструктуризации.
#react
👍11❤4🔥4
Лайфхак для тех, кто использует IDE от jetbrains и давно хотел научится пользоваться шорткатами: установите Key Promoter X плагин. Он показывает подсказку с комбинацией клавиш, всякий раз, когда вы делаете действие мышью, для которого существует шорткат.
По своему опыту могу сказать, что с использованием шотркатов начинаешь меньше терять фокус и рутинные действия делаются немного быстрее.
Самое сложное – начать применять и запоминать комбинации, т.к. изначально скорость работы с мышкой проще и быстрее, но, по мере привыкания к шорткатам, скорость работы с ними обгоняет мышку.
P.S. На скрине моя стата за последнее время. Я долгое время использовал SourceTree для работы с гитом. Поэтому шорткаты, что связаны с гитом, я все еще вспоминаю постфактум 🤷♂️
P.P.S. Если у кого-то есть аналогичный плагин для VS code – поделитесь в комментах.
#plugins
По своему опыту могу сказать, что с использованием шотркатов начинаешь меньше терять фокус и рутинные действия делаются немного быстрее.
Самое сложное – начать применять и запоминать комбинации, т.к. изначально скорость работы с мышкой проще и быстрее, но, по мере привыкания к шорткатам, скорость работы с ними обгоняет мышку.
P.S. На скрине моя стата за последнее время. Я долгое время использовал SourceTree для работы с гитом. Поэтому шорткаты, что связаны с гитом, я все еще вспоминаю постфактум 🤷♂️
P.P.S. Если у кого-то есть аналогичный плагин для VS code – поделитесь в комментах.
#plugins
👍16🔥1🤩1