Как стать автором
Обновить
4
0.2

Пользователь

Отправить сообщение

Руководство по Next.js. 1/3

Уровень сложностиСредний
Время на прочтение45 мин
Количество просмотров17K


Hello world!


Представляю вашему вниманию первую часть обновленного руководства по Next.js.



На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉


Парочка полезных ссылок:


Читать дальше →
Всего голосов 16: ↑15 и ↓1+19
Комментарии2

Пора переходить на микрофронтенд? Опыт «Инферит Клаудмастер»

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров5.6K

Приветствую всех новичков и гуру фронтенда, а также всех, кто работает с интерфейсами. Я Никита Борцов, создаю красоту на фронте первой в России FinOps-платформы для управления облачными затратами “Инферит Клаудмастер”.

В этой статье вы узнаете о:

факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
процессах со стороны команды разработки при переходе на микрофронтенд,
кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
признаках того, что пора переходить на микрофронтенд.

Читать далее
Всего голосов 12: ↑10 и ↓2+9
Комментарии2

Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript

Время на прочтение8 мин
Количество просмотров136K
Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.


Читать дальше →
Всего голосов 45: ↑33 и ↓12+21
Комментарии87

Zustand.js: современный, невесомый, производительный и очень гибкий state manager

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров13K

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

В статье я расскажу:

о простом интерфейсе Zustand

о его внутреннем устройстве

о производительности без усилий: 3 простых способа оптимизаций

о производительности на максималках: не всегда нужно использовать длинный цикл рендера React, чтобы достичь максимальной производительности - Zustand может быстрее!

о применении на практике: советы и рекомендации по интеграции Zustand в ваши проекты для достижения масштабируемости и удобства поддержки.

Начните активно использовать Zustand в своих проектах - вы будете приятно удивлены простотой и удобством работы с ним.

Читать далее
Всего голосов 18: ↑13 и ↓5+8
Комментарии53

Детальный React. Реконсиляция, рендеры, Fiber, виртуальное дерево

Уровень сложностиСложный
Время на прочтение19 мин
Количество просмотров21K

В сети можно найти огромное количество статей, мануалов и книг по основам React, включая официальную документацию от разработчиков. В этой статье мы не будем писать HelloWorld и изучать общеизвестные концепции. Сегодня мы заглянем под капот библиотеки и попытаемся понять, как она устроена внутри, как хранит данные, и как, на самом деле выглядит её виртуальное дерево.

На момент написания статьи, последняя стабильная версия React 18.2.0. За 10 лет разработчики Facebook проделали колосальный объем работы, было реализовано много фич и сделано не мало оптимизаций. За эти годы, так же, происходили и кардинальные архитектурные изменения. Очевидно, одной статьи мало, чтобы покрыть всю механику React, поэтому, данная публикация станет первой в серии статей о внутреннем устройстве React. Здесь мы познакомимся с основными сущностями и архитектурными решениями.

Читать далее
Всего голосов 15: ↑13 и ↓2+14
Комментарии10

О кастомных HTML-тегах по-человечески и как их использовать

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров14K

Расскажу вам о том, как использовать чудо-юдо под названием «Кастомные HTML‑теги» понятно, но подробно.

Читать далее
Всего голосов 34: ↑33 и ↓1+41
Комментарии38

Typescript: принцип подстановки функций

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров7.4K

По аналогии с принципом LSP из ООП, при работе с функциями в Typescript стоит придерживаться следующего принципа:

Принимая колбэк с меньшим числом аргументов, оборачивайте его, прежде, чем передавать его далее в качестве колбэка с большим числом аргументов.

Почему это так?
Всего голосов 5: ↑5 и ↓0+5
Комментарии7

Typescript: лучшие практики

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров24K

Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?

Читать далее
Всего голосов 22: ↑19 и ↓3+20
Комментарии27

Server-side rendering и практики работы с запросами

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров9K

Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик. ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на веб-производительность и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.

Прошу под кат
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Оптимизируем шрифты и ускоряем сайт на 5-12%

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров14K

Описываем способы максимально ускорить загрузку шрифтов на сайте.

Развенчиваем мифы и разбираем ошибки. В статье вас ждут полезные онлайн сервисы для ускорения работы.

Читать далее
Всего голосов 14: ↑13 и ↓1+16
Комментарии24

Как стать джуном, которого берут на работу (frontend-разработка)

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров102K

Привет, Хабр! Я - начальник отдела разработки небольшой IT-компании, и мы - те самые люди, которые не ищут на работу сеньоров, и мы готовы брать не только мидлов, но даже и джуниоров, и готовы растить их до уровня крепких мидлов. Однако 80% приходящих на вакансию frontend-разработчика соискателей, даже называющих себя мидлами, с опытом работы, по сути оказываются не то что джуниорами - вообще не программистами. Что же на самом деле должен знать джун, чтобы попасть в компанию, подобную нашей, и как к этому прийти, если за плечами нет высшего программистского образования или богатого опыта программирования в школе? Я расскажу об этом и о том, как устроен процесс найма в нашей компании.

Базовый уровень программирования

Итак, к нам приходит среднестатистический кандидат, который прошел курсы по JavaScript, сделал там пару проектов. Потом узнал, что во многих местах хотят React, сходил на курсы по нему, тоже сделал пару проектов, выложил их на Github. Приходит к нам, уверенный в себе. И мы его просим написать функцию, которая выбирает из строки все большие буквы, или реализовать "вручную" какой-нибудь метод из array. И половина кандидатов в этом месте выбывают из строя. Кто-то вообще не может это сделать, у кого-то на двухминутную функцию уходит больше получаса. Зачем мы вообще это спрашиваем и почему с этого начинаем?

Читать далее
Всего голосов 36: ↑30 и ↓6+30
Комментарии157

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Время на прочтение11 мин
Количество просмотров54K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →
Всего голосов 19: ↑18 и ↓1+20
Комментарии5

Полное понимание асинхронности в браузере

Время на прочтение24 мин
Количество просмотров109K
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.

Читать дальше →
Всего голосов 78: ↑78 и ↓0+78
Комментарии26

Кофеиновая трилогия. Часть 2. Сколько можно пить кофе и когда?

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров26K

Те, кто говорят, что кофе надо пить меньше, и те, которые говорят, что кофе надо пить больше правы в одном. Кофе надо пить. Вопрос только в том, сколько можно пить кофе, чтобы получать от него преимущества, и избегать негативных последствий? Первая часть доступна по ссылке.

Читать далее
Всего голосов 33: ↑29 и ↓4+31
Комментарии132

Кофе и повышение работоспособности организма. Часть первая

Время на прочтение4 мин
Количество просмотров25K

В попытке обеспечить повышение работоспособности организма, мы чаще всего приходим к кофе. Кофе пьют примерно 90% взрослого населения планеты и примерно 50% подростков. Вопрос только в том, есть ли в нем польза? А если нет, то как её извлечь?

Читать далее
Всего голосов 37: ↑34 и ↓3+39
Комментарии29

Javascript: базовые вопросы и понятия для самых маленьких

Уровень сложностиПростой
Время на прочтение15 мин
Количество просмотров49K

Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?

В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.

Читать далее
Всего голосов 94: ↑93 и ↓1+115
Комментарии43

Условные выражения в CSS

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров26K

Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else).

Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.

В этой статье я расскажу о некоторых возможностях CSS, которые мы используем каждый день, и покажу, насколько они условны. Кроме того, я приведу несколько примеров, в которых CSS гораздо мощнее, чем инструменты дизайна.
Читать дальше →
Всего голосов 48: ↑46 и ↓2+64
Комментарии4

Информация

В рейтинге
2 444-й
Откуда
Сочи, Краснодарский край, Россия
Зарегистрирован
Активность