Как стать автором
Обновить
2
0

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

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

Глубокий JS. В память о типах и данных

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

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в официальной документации, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS V8.

Читать далее
Всего голосов 42: ↑40 и ↓2+51
Комментарии27

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

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

Привет, Хабр!

Меня зовут Саша и вот уже 7 лет я работаю фулстек разработчиком и пишу на C# и TypeScript/React.

Сегодня я хотел бы поделиться своим небольшим успехом в автоматизации. В какой-то момент я понял, что во время код ревью я указываю разработчикам на одни и те же ошибки. Но, что ещё хуже, я сам время от времени допускаю эти ошибки. Сегодня хочу рассказать об одной из таких проблем, которую я решил с помощью PostCSS + Stylelint, и о том, как я это сделал.

Статья будет полезна для разработчиков, которые уже используют или собираются использовать дизайн токены.

Начнём!
Всего голосов 5: ↑5 и ↓0+5
Комментарии4

Решение задачи про определение типа в Typescript с Yandex Cup 2023

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

Всю прошлую неделю проходила квалификация на Yandex Cup 2023. Я решил тряхнуть стариной и вспомнить что такое спортивное программирование.

Яндекс представил 8 задачек разной сложности, которые необходимо сделать за пять часов. Я принял участие. На старте был уверен в себе. Однако, получил плохие результаты. Следующие пол дня я чувствовал уныние и разочарование. Потом пришла идея, как это использовать.

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

Завариваем чаек, я начинаю.

Читать далее
Всего голосов 19: ↑19 и ↓0+19
Комментарии31

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

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

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

Некоторое время назад команда Почты Mail.ru решала задачу управления сложным состоянием приложения с большим количеством фичей и источников данных с помощью конечных автоматов. Нужно было ускорить разработку и тестирование, поддерживая возможность проведения более чем 20 А/В-экспериментов. На тот момент, я работал там над проектами портальной навигации и главной страницы.

Меня зовут Денис Стасьев. В этой статье расскажу о том, как мы внедряли машину состояний в одном из компонентов главной страницы Mail.ru — блоке новостей, что получили на выходе и ещё подробнее о том, почему в итоге остановились на XState.

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

Как внедрить гайд по стилю кода в проект

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

Всем привет! Меня зовут Соня Гусева, я фронтенд-разработчик в Яндекс Практикуме (или фронтенд-капибара). Вместе с командой мы развиваем платформу practicum.yandex.ru. Например, сделали поиск по пройденным материалам — тот самый, где «найдётся всё». И тёмную тему — для комфортной учёбы даже ночью.

Практикум появился в 2019 году и с тех пор растёт. В какой-то момент нам стало сложно погружать новичков в проект. Дело в том, что стиль кода всё время развивался, но правила оставались на уровне устных договорённостей. В итоге приходили новые тиммейты, видели легаси и более свежий код — и не понимали, какой написан правильно и почему они разные. Как следствие, код-ревью растягивалось, и тестирование проходило в разы сложнее. Люди чувствовали себя неуютно в таких процессах. 

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

Если вы любите больше смотреть, а не читать, с этой темой я выступила на Frontend meetup, где рассказала подробно о внедрении стиля кода в проекты. 

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

Event Loop в деталях

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

В данной статье поговорим о том, почему Event Loop вообще был создан, как с ним работать и почему про него спрашивают на собесах.

JS был спроектирован как однопоточный язык программирования. Это значит, что он может выполнять только одну операцию одновременно. Тем не менее у JavaScript есть такой механизм как Event Loop, который как раз и позволяет выполнять "асинхронные" операции. Почему "асинхронные" в кавычках? Да просто потому что JavaScript тоже выполняет их синхронно, асинхронности в самом JavaScript как таковой нет. Вперед под кат, будем разбираться)

Promise.then()
Всего голосов 23: ↑20 и ↓3+19
Комментарии13

Как сделать свой UI Kit на Vue 3 + storybook и задеплоить его на npm

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

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit.

После моего туториала, вы тоже сможете рассказывать какой у вас крутой UI Kit, но это не точно :)

Запилить свой UI Kit
Всего голосов 13: ↑13 и ↓0+13
Комментарии1

Утечки памяти в SSR: причины, поиск, устранение

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

Привет, Хабр! Меня зовут Владимир Захаров (@‌vzkhrv), я расскажу про SSR. На самом деле, утечки памяти работают в JavaScript везде – и на сервер-сайте, и на клиенте, поэтому информация будет полезна даже тем, у кого пока нет SSR. Давайте чуть подробнее познакомимся. Я ведущий фронтэнд-разработчик, около 8 лет в отрасли. В Зарплате.ру больше не работаю, но основной опыт, о котором хочу рассказать, получен именно там. Я люблю плавающие баги, разговоры о техдолге и шутки про ненастоящих программистов. Поговорим про утечки в памяти в SSR, про работу с памятью и про то, как всё это выглядит в браузере и в nodejs. Ну, и естественно, как со всем этим жить.

Читать далее
Всего голосов 14: ↑14 и ↓0+14
Комментарии4

Повышаем продуктивность разработки: магия общей ESLint конфигурации

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

Всем привет! Меня зовут Дмитрий Пашкевич, я Frontend разработчик и хочу рассказать о создании единой ESLint конфигурации, которую можно переиспользовать между проектами.

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

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии3

Готовим микрофронтенды на чистом JS без фреймворков

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

Привет, Хабр! Меня зовут Евгений Лабутин, я разработчик в МТС Digital. Сегодня я расскажу вам о своем рецепте приготовления микрофронтендов без использования каких либо фреймворков. Ведь такие фреймворки как Webpack Module Federation, Single-SPA, SystemJS и подобные вам просто не нужны для написания микрофронтендов, ровно так же как вам не нужен jQuery для написания современных фронтендов. Ведь все необходимое для разработки и работы Микрофронтендов уже встроено во все современные браузеры. Интересно? Добро пожаловать в статью.

Читать далее
Всего голосов 20: ↑14 и ↓6+12
Комментарии21

О работе с банками в Турции. 1,5 года спустя

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

В этой статье я распишу, с чем я столкнулся при работе с анаталийскими и стамбульскими банками.

Личный опыт: открытие счетов, проведение платежей.

Статья для бизнесменов, которые хотят работать в Турции или уже это сделали.

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

Рендеринг на сервере и HTMX — это будущее

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

Современная ситуация с разработкой веб-приложений


Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.

Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
Читать дальше →
Всего голосов 61: ↑52 и ↓9+63
Комментарии146

Как в 1.5 раза повысить производительность фронтенда высоконагруженного интернет-магазина на Next.js

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

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

Читать далее
Всего голосов 11: ↑10 и ↓1+11
Комментарии18

Одно PWA, чтоб править всеми

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

Термин PWA появился еще в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году возникла надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных аналогов нативных приложений будет достаточно знаний фронтенда.

Весной на HolyJS Никита Дубко показал, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.

Делимся расшифровкой доклада и видеозаписью. Повествование будет от лица Никиты.

Читать далее
Всего голосов 24: ↑22 и ↓2+29
Комментарии3

Feature-Sliced Design – альтернативный подход к организации кода приложений

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

Feature-Sliced Design — это архитектурная методология, активно набирающая популярность в последнее время. И не зря: организация разработки по её правилам позволяет упростить процессы, сделать их быстрее и гибче. Больше не нужно будет переживать из-за совместной работы в одном домене и конфликтов кода, долго искать ответ на вопрос «А куда же впилить новую фичу, тут и так намешано…» 

О том, как устроена Feature-sliced Design, чем она отличается от «классической» организации кода, плюсах и минусах от её внедрения — в этой статье.

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

Написание Vite плагина

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

Сборщик Vite предоставляет не только хороший функционал, но и удобный API для создания плагинов, позволяющих кастомизировать его практически под любую задачу. То есть, плагины можно писать не только для публикации их в npmjs.com репозитории, но и для автоматизации исключительно своих задач.

Сложность написания плагина сравнима со сложностью написания сценария для Gulp или GitHub Actions. Для примера напишем плагин, который будет вставлять фрагменты кода в файл index.html. В зависимости от проекта в данный файл необходимо помещать код Google Analytics, метатэги Open Graph и Twitter, подключение Service worker-a, виджета чата поддержки, сплэш скрин и многое другое. В результате index.html становится очень большим и ориентироваться в нем и блоках кода довольно сложно.

Наш плагин позволить держать фрагменты кода в отдельных файлах, а при сборке все будет помещаться в index.html. Причем это будет происходить не только при непосредственно сборке ( npm build ), но и при запуске Vite dev сервера с поддержкой HRM (Hot Module Replacement).

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

Архитектура микрофронтенд с feature sliced design

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

В этой статье я рассказываю, как мне удалось сделать весьма не плохую архитектурное решение с применением Microfrontend и Feature Sliced Design. Вкратце что из себя представляет обе эти архитектуры.

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

Swipe sidebar — отдельный Typescript сервис и обработка touch событий на Vue

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

Приветствую, друзья технологии!

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

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

В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!

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

Где россиянину легче получить гражданство в 2023 году

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

Политическая и экономическая ситуация вынуждает многих россиян задуматься о втором гражданстве. Среди самых популярных причин 2023 года — упрощенное получение рабочих виз, разморозка иностранных активов, возможность упростить ведение бизнес‑деятельности за рубежом. Но к таким вопросам нужно подходить серьезно. Выбор страны гражданства — дело ответственное, поскольку второе гражданство — это не только право, но и обязанности, в том числе, необходимость платить налоги или проходить воинскую службу. Поэтому перед тем, как выбирать страну интересов, необходимо изучить, какие плюсы и минусы будут у каждого варианта.

Читать далее
Всего голосов 49: ↑25 и ↓24+10
Комментарии170

Как я в Nebius собеседовался

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

Всем доброго времени суток!

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

Итак, история началась в апреле, когда ко мне в телеграм постучался рекрутер и предложил пообщаться по поводу вакансии golang разработчика. Я подумал, а почему бы и не сдуть с себя пыль, согласился. Далее были всем знакомые созвоны, сначала пол часа с рекрутером, где нужно рассказать про свои заслуги и послушать про прелести компании. После этого созвона, рекрутер скинул мне приблизительный список задач, которые будут ждать меня на технических этапах. Я не хотел ударить в грязь лицом, поэтому на выходных расчехлил книжку, ютуб и литкод, хорошенько позанимался и пошел на первый этап.

Читать далее
Всего голосов 80: ↑76 и ↓4+89
Комментарии106
1
23 ...

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность