Pull to refresh
5
0
Send message

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

Level of difficultyMedium
Reading time45 min
Views15K


Hello world!


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



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


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


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


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


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


Читать дальше →
Total votes 16: ↑15 and ↓1+19
Comments2

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

Level of difficultyEasy
Reading time6 min
Views5.5K

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

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

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

Читать далее
Total votes 12: ↑10 and ↓2+9
Comments2

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

Reading time8 min
Views135K
Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.


Читать дальше →
Total votes 45: ↑33 and ↓12+21
Comments87

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

Level of difficultyEasy
Reading time9 min
Views12K

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

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

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

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

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

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

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

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

Читать далее
Total votes 18: ↑13 and ↓5+8
Comments53

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

Level of difficultyHard
Reading time19 min
Views20K

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

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

Читать далее
Total votes 15: ↑13 and ↓2+14
Comments10

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

Level of difficultyMedium
Reading time7 min
Views13K

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

Читать далее
Total votes 34: ↑33 and ↓1+41
Comments38

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

Level of difficultyMedium
Reading time5 min
Views7.4K

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

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

Почему это так?
Total votes 5: ↑5 and ↓0+5
Comments7

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

Level of difficultyEasy
Reading time3 min
Views24K

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

Читать далее
Total votes 22: ↑19 and ↓3+20
Comments27

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

Level of difficultyEasy
Reading time6 min
Views8.9K

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

Прошу под кат
Total votes 26: ↑26 and ↓0+26
Comments3

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

Level of difficultyEasy
Reading time8 min
Views14K

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

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

Читать далее
Total votes 14: ↑13 and ↓1+16
Comments24

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

Level of difficultyEasy
Reading time8 min
Views102K

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

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

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

Читать далее
Total votes 36: ↑30 and ↓6+30
Comments157

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

Reading time11 min
Views53K

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


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


Читать дальше →
Total votes 19: ↑18 and ↓1+20
Comments5

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

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

Читать дальше →
Total votes 78: ↑78 and ↓0+78
Comments25

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

Level of difficultyEasy
Reading time6 min
Views26K

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

Читать далее
Total votes 33: ↑29 and ↓4+31
Comments132

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

Reading time4 min
Views25K

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

Читать далее
Total votes 37: ↑34 and ↓3+39
Comments29

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

Level of difficultyEasy
Reading time15 min
Views49K

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

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

Читать далее
Total votes 94: ↑93 and ↓1+115
Comments43

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

Level of difficultyMedium
Reading time10 min
Views26K

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

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

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

Information

Rating
5,615-th
Location
Сочи, Краснодарский край, Россия
Registered
Activity