Sergejs Jersovs зарабатывал на жизнь частным извозом в Ирландии. Пока однажды, когда ему было 44 года, не решил полностью изменить свою жизнь и стать веб-разработчиком. Начал свой путь в IT он с того, что прошел наш курс «Веб-разработчик с нуля до профи». Меньше чем через полтора года после окончания курса он уже работает в Amazon.
Разработка веб-сайтов *
Делаем веб лучше
Новости
Control flow with try/catch and Promises
Я не люблю магию, магией мы часто объясняем какое то поведение части приложения, библиотеки или фреймворка, которое не понимаем, а когда наконец прочитав документацию понимаем, как тот или иной функционал реализован на самом деле, ловим себя на мысли, что никакой магии нет, только грани нашего познания и что на самом деле все просто, когда разберешься.
Так вот как то раз смотря документацию Relay я наткнулся на мысль, что не понимаю, как работает связка Relay.useLazyLoad и React.Suspense.
В частности не понятно, как именно React.Suspense понимает, что вот прямо сейчас происходит асинхронный запрос и самое время отрисовывать fallback?
Стили заголовков в CSS: картинки, тени, анимации
Задача заголовка — привлекать внимание, и для этого многие эффекты хороши. В прошлый раз мы перевели статью о градиентах, теперь предлагаем рассмотреть ещё несколько фишек.
Шифрование сертификатов TLS — как формируется цифровая подпись
По оценке независимой исследовательской и консалтинговой компании Frost & Sullivan, TLS-сертификаты от GlobalSign обеспечивают максимально надёжное шифрование. В том числе за это GlobalSign получила в сентябре 2022 года награду 2022 Global Competitive Strategy Leadership Award.
Но возникает вопрос, чем же отличается шифрование в разных сертификатах? В частности, какие алгоритмы используются для криптографической подписи?
PowerShell: проверка совмещения имен БЭМ-сущностей на одном HTML-узле
При написании HTML-страницы по методологии БЭМ («Блок, Элемент, Модификатор») БЭМ-сущности привязываются к узлам HTML-дерева. В предыдущих статьях я рассматривал, как можно выполнить в скрипте на языке PowerShell проверку правильности написания названий БЭМ-сущностей по отдельности с помощью регулярных выражений.
В этой статье рассмотрено, какие есть правила для совмещения нескольких имен БЭМ-сущностей на одном узле HTML-дерева и как соблюдение этих правил можно проверить в скрипте на языке PowerShell. Приведены иллюстрации фрагментов результатов работы скрипта в разных случаях, при обнаружении разных ошибок.
Ловушка приоритетов Angular Guards
Angular имеет отличный инструмент для ограничения навигации между страницам из коробки. Но, как и любом большом проекте, у него есть свои подводные камни. Сегодня я расскажу вам об одном из них.
Рефакторинг прайс-листа без духоты
Любой крупный проект старше пары лет имеет легаси. hh.ru здесь — не исключение. Однажды перед нашей командой встала задача перевести страницу прайс-листа работодателя на React. Сперва это занятие показалось нам абсолютно рутинным, но если бы это на самом деле было так, вы бы сейчас не читали эту статью.
Всем привет! Меня зовут Саша, я — фронтенд-разработчик команды «Монетизация» hh.ru. В своем материале расскажу, как мы рефакторили наболевшее, обнаруживали главные проблемы и находили элегантные решения.
Сервис, который должен был объединить торговые площадки США Ebay, Amazon и Zappos
В далёком 2012 году довелось мне участвовать в одном интересном проекте - BuyinUsa. Идея проекта была в следующем: объединить в одном месте товарные предложения с наиболее популярных торговых площадок США, представить их российским потребителям, взять на себя доставку и конвертацию при оплате.
Для начала решили взять самые крупные: ebay, amazon, zappos. К тому же в этот год zappos вообще закрыл возможность для российских пользователей даже заходить на их сайт. А тут мы такие…
Как, наверно, кто-то еще помнить, тогда вездесущего алиэкспресс еще не было, да и умением покупать за границей отличались лишь “продвинутые интернетчики”, а наша задача была предложить услугу как можно более массовому потребителю.
Я выступал в роли и соучредителя и в качестве, как бы сейчас сказали, тимлида, так как вся разработка проекта была на мне. Я был еще достаточно юным и пылал энтузиазмом:)
Вся разработка осуществлялась удаленно, программисты, вебмастер, дизайнер и я работали исключительно через сеть. Использовались в основном простые средства вроде teamview и skype. В качестве основы для сайта взяли всем известную Joomla, а для интернет-магазина Virtualmart. Конечно, по современным воззрениям это ужас-ужас, но тогда мне так не казалось.
Что надо было решить:
1. Карточка товаров, которые были очень разноплановые. А от характеристик зависела возможность отфильтровать товары в поиске.
Решение: взяли более ста карточек с разными характеристиками и просили их отсортировать по важности знакомых и друзей. Сравнивали результаты и выделяли главные. А потом скопировали карточку с Запоса и отредактировали её под свои нужды:)
Как создать сайт с организационной точки зрения
Эта статья предназначена для широкого круга читателей. Но прежде всего, эта статья для тех, кто занимается непосредственно веб-разработкой, а также является руководителем или заказчиком этого проекта. Если вы веб-дизайнер, вам эта статья вряд ли будет особо интересной. Она поможет тем, кто хочет развиваться в целом, понимать, как происходит процесс в целом, как разработать сайт, какие этапы необходимо пройти.
Ниже я буду рассказывать о своем опыте. Сайтами я занимаюсь уже порядка 15 лет, а вплотную – около 10 лет. Почему это так? Сейчас любая трансформация в организации, любые изменения в организации, так или иначе, касаются информационных систем. То есть, если мы хотим получить продажи, мы должны создать сайт. Если мы хотим повысить качества сервиса, то, скорее всего, это должно каким-то образом отображаться на сайте, например, в личном кабинете и как следствие ведет за собой создание нового сайта.
Открытая трансляция Главного зала Saint HighLoad++ 2022
Через 2 дня начнется главное событие для разработчиков высоконагруженных систем. 22 и 23 сентября мы снова будем делиться опытом построения веб-сервисов для решения задач сотен тысяч пользователей по всему миру. Если у вас не получилось попасть в Санкт-Петербург на DESIGN DISTRICT DAA in SPB, подключайтесь к открытой трансляции Главного зала конференции.
Не забывайте про расписание докладов. 22 сентября трансляция докладов продлится с 10:00 до 19:00 часов. А на второй день 23 сентября с 10:30 до 19:00 часов. Теперь давайте подробнее познакомимся с докладчиками открытой трансляции.
Списковые включения в Python мощнее, чем можно подумать
В Python списковые включения (и генераторы списков) — замечательные механизмы, способные серьёзно упрощать программный код. Правда, чаще всего их используют в форме, предусматривающей наличие единственного цикла for
и, возможно, одного условия if
. И это всё. Но если попытаться немного вникнуть в эту тему, то окажется, что у списковых включений Python имеется гораздо больше возможностей, чем можно подумать, возможностей, разобравшись с которыми, можно, по меньшей мере, кое-чему научиться.
React: разрабатываем кастомный useEffect
Привет, друзья!
В данной статье мы с вами разработаем кастомный хук, функционал которого будет аналогичен функционалу встроенного хука useEffect
, за исключением того, что наш useEffect
будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).
Предполагается, что вы хорошо знакомы с тем, как работает хук useEffect
, а также с тем, когда и почему происходит повторный рендеринг React-компонентов
. Если нет, вот парочка ссылок:
- официальная документация по useEffect;
- Продвинутые хуки в React: все о useEffect;
- React: полное руководство по повторному рендерингу.
Этого должно быть достаточно для понимания того, о чем мы будем говорить. В дальнейшем будет приведено еще несколько ссылок для более глубокого погружения в тему.
Код проекта, с которым мы будем работать, можно найти здесь.
Начнем с примера.
Системный шрифт как проприетарные куки. Необычный метод пометки вашего устройства
Так делают различные программы, хотя это не назовёшь образцом правильного программирования. У метода свои преимущества и недостатки.
Webpack + CSS Modules + TS = Love
Сказ про то, как повысить надежность фронтенда с помощью CSS Modules, TypeScript и Webpack.
Frontend в условиях полной редактируемости
В этой статье мы расскажем подробно про систему поблочной сборки и подводные “камни” реализации подобной системы под «1С-Битрикс» для frontend-разработчиков.
Блочная редактируемость
Нам требовалось разработать сайт на базе CMS «1С-Битрикс: Управление сайтом» и при этом предоставить контент-менеджерам полную власть над страницами и их содержимым. Контент-менеджеры \читай не разработчики\ должны иметь возможность собирать страницы из заранее созданных блоков, определять порядок этих блоков на странице, управлять настройками дополнительного визуального оформления для каждого из блоков и редактировать контент в рамках поддерживаемых типов данных. И всё это управляется через визуальный редактор Битрикса без необходимости вручную создавать новый инфоблок для каждого блока на странице. Такую систему можно назвать “Блочная редактируемость”.
PowerShell: распознавание БЭМ-сущностей на HTML-странице
Распознавание типов БЭМ-сущностей (блок, элемент, разные виды модификаторов) в скрипте на языке PowerShell с помощью простых регулярных выражений.
Предполагается, что скрипт получает файл с кодом на языке HTML, разбирает его (парсит) и определяет типы БЭМ-сущностей, привязанных к узлам HTML-дерева, после чего выводит информацию об этом в окно терминала (консоли). Приведена иллюстрация того, как может работать подобный скрипт. Такой инструмент можно использовать для изучения методологии БЭМ самому или обучения этой методологии других.
On-Demand ISR в Next.js или как эффективно обновлять статический контент на сайте, поступающий из CMS или админки
В этой статье я расскажу, как и для чего, на одном из своих проектов, мы прикрутили новую возможность Next.js – On-Demand ISR (инкрементная статическая регенерация по запросу).
Создание модулей с учётом новой структуры Joomla 4
Joomla 4 "под капотом" претерпела немало изменений относительно предыдущих версий. Её кодовую базу сообщество разработчиков регулярно подтягивают до современных реалий, вводя актуальные технологии в ядро CMS. Так, например, если раньше загрузка классов была вариациями на тему include, то в Joomla 4 появился лоадер, приведённый к PSR-4. Ядро CMS переводится на концепцию сервис-провайдеров, внедрены DI-контейнеры. Эти изменения влекут за собой изменения в структуре компонентов, модулей и плагинов.
В данной статье пойдёт речь о том, как создать модуль для Joomla 4 с новой структурой файлов и классов. Как создать новый (или апгрейдить старый) модуль так, чтобы он ещё долго прослужил на Joomla 4 и Joomla 5? Читаем далее...
Кто и как разработал технологию Википедии
Википедия достигла невероятного успеха благодаря усилиям тысяч старательных участников, и технологическая сторона не была исключением. В настройке серверов и инфраструктуры, в переводе, в создании ботов и скриптов — Википедия развивалась от любительского проекта, стоящего на одном сервере, к надёжной платформе, работающей в центрах обработки данных на разных континентах.
Наша статья — о тех, кто разработал технологию Википедии, и о том, как они работали.
Архитектура для пользователей
Когда говорят о выборе архитектуры IT-системы, почти всегда упускают один ма-а-аленький нюанс: мы делаем продукты для пользователей, не для себя. А пользователям совершенно неважно, какая у сервиса архитектура. Никто в отзывах не ставит звёздочки за event-driven подход или классную реализацию service mesh — разве что в редких случаях, когда речь о продуктах для разработчиков.
Техническое совершенство — современные инструменты, предельная оптимизация, чистота кода и лаконичная, но гибкая и масштабируемая архитектура — всё это нужно нам, технарям. А как это всё связано со счастьем пользователей, как его измерять и учитывать при проектировании сервиса, разберёмся под катом.