Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется чего-то нового. Вызывающего споры. В общем я возвращаюсь к формату статей в виде вопрос-ответ. Вопросы будут те, которые я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».

При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).

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

Так, вы готовы? Давайте посмотрим, что я вам подготовил.

«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.

Разбираемся, что это за разметка и как ее самостоятельно настроить.

Как использовать мощь системы типов TypeScript для вычисления логики ещё на этапе компиляции и автоматической генерации кода. Разбираем условные типы, шаблонные литералы, рекурсивные типы и другие приёмы, чтобы упростить разработку, сократить дублирование кода и снизить вероятность ошибок на runtime.

В 20-ом веке браузеры были гораздо менее развиты, а CSS сильно ограничен. Он подходил только для оформления простых текстов что-то вроде документов Word. Для оформления сайтов приходилось обращаться к таблицам, чтобы создавать подобие типографской сетки для раскладки элементов. Пока в 2003 году не появился CSS Zen Garden, пропагандирующий оформление сайтов с помощью CSS. В оформлении использовались хаки с флоатами и другие трюки, но технология была несовершенна. Далее, с развитием браузеров, появились инлайн-блоки. Они неплохо справлялись с расположением элементов в ряд, но тоже имели недостатки. И только в начале десятых появились новые модули раскладки: Flexbox и Grid Layout. О них и поговорим.

Всем привет! Меня зовут Ильмир, я frontend-разработчик SimbirSoft. Это моя первая статья, в которой я хотел бы разобрать тему менеджера состояний в Angular.

Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

Всем привет! Меня зовут Вова, я фронтендер в Тинькофф. Сейчас перед нашей командой стоит задача редизайна функциональности на пересечении нескольких продуктов. Данная ситуация заставила нас задуматься во-первых о DDD, а во-вторых о гибкости наших решений, применяемых при разработке, и достичь этого нам помогли принципы SOLID, а точнее OCP и Dependency Inversion (не путать с Dependency Injection), о чем и хочется дальше поговорить.

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

О неприступные стены удобной архитектуры растущего приложения сломано много копий. Это, в принципе, довольно предсказуемо. У всех нас свой бэкграунд, опыт разработки и способ работы с абстракциями. Что для одного чисто и понятно, для другого может быть сумбурно и перемешано. Я хочу рассказать о том выборе, который был сделан год назад и который за эти месяцы себя прекрасно показал.

Всем привет! Сегодня поговорим о парсинг данных с сайтов медицинских клиник. Мы выбрали это направление по двум причинам: 1. это высокодоходный бизнес; 2. все катаклизмы, которые происходят в мире не сильно «качают» эту сферу к знаку минус. Т.к. отказать себе в походе в ресторан, покупке новго айфона, даже осознать невозможность взять ипотеку. Но, если появились проблемы со здоровьем — то тут не до экономии. Особенно это качается жителей больших городов. Именно поэтому мы начали парсить данные клиник г. Москвы. Также надо отметить, что разделение труда в медицинской сфере продолжаеит расти. Появляются новые узкоспециализированные специалисты. И на них есть спрос. Я сам обладаю двумя полисами (ОМС и ДМС), но за последние два года пару раз столкнулся с ситуацией, когда нужного мне специалиста ни один полис не покрывал. И пришлось рассматривать варианты получения услуги либо в государственной больнице через направление (долго и бесплатно), либо за дополнительную плату в специализированной коммерческой клинике.

Всем привет, меня зовут Владимир. Я занимаюсь фронтенд разработкой в Tinkoff.ru.

В Ангуляре для передачи данных внутри приложения или для инкапсуляции бизнес-логики мы привыкли использовать сервисы. Для управления асинхронными потоками отлично подходит RxJS.

Ангуляр в сочетании с RxJS позволяет писать в декларативном стиле, коротко и ясно. Но иногда мы сталкиваемся со сторонними библиотеками или API, которые используют коллбэки, промисы, тем самым подталкивают нас отступить от привычного стиля и писать императивно.

Цель статьи — показать на примере подобных API, как с помощью RxJS их можно без проблем обернуть в Observable-сервисы. Это поможет достичь удобства использования в Ангуляре. Начнем с Geolocation API.

В этой статье я расскажу как упорядочить цвета в макетах и в уже готовом продукте; как перейти от стилей к токенам (variables), а также поделюсь рекомендациями для тех, кто только собирается внедрять стили и переменные для цветов.

Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.

Привет! Меня зовут Станислав, я фронтенд-разработчик компании Тинькофф. Занимаюсь разработкой веб-приложений и написал десятки тысяч строк кода, массу велосипедов и костылей, пока не познакомился с разработкой, основанной на модели предметной области, или Domain-Driven Design.

DDD — это система знаний, приемов и методов, предназначенная для создания приложений высокой сложности. DDD обобщает лучшие практики коммерческой разработки программного обеспечения и постоянно совершенствуется, предоставляя разработчику надежную опору для принятия решений. Лучший способ узнать больше — это книга Эрика Эванса Domain-Driven Design: Tackling Complexity in the Heart of Software.

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

В данной статье мы разберем 4 способа как зарегистрировать нового пользователя:

1.Сторонние сервисы авторизации (такие как Google)

2.Авторизация с использованием токенов

3.Авторизация с помощью номера телефона

4.Логин + Пароль

Статья даст вам конкретный алгоритм реализации каждого способа. Необходимые библиотеки, а также примеры кода. Я постараюсь приводить в пример реализацию на чистейшем JavaScript, для того чтобы вы смогли внедрить функционал в свое проект, не зависимо от используемого фреймворка, однако также будут примеры для тандема Angular + Asp .Net Core. Мы обсудим как защитить ваш сайт от взлома. На сколько это сложно и возможно ли в принципе гарантировать 100% защиту. Итак, давайте приступим.

Что вы чувствуете от познания нового? За себя скажу, что в такие моменты просветления меня переполняет неподдельная детская радость от свершившегося открытия. Жаль, что этих моментов становится всё меньше. К чему я это? Когда мне в голову мне пришла мысль о написании статьи на эту тему, я сразу вспомнил то ощущение прозрения, которое испытал в момент открытия Utility Types. Всё сразу встало на свои места, и я понял какого кусочка пазла мне всё это время не хватало. Именно о нём я расскажу далее.

Наш прошлый перевод про новые функции 15-й версии Node.js был очень хорошо принят читателями «Хабра», поэтому сегодня мы решили продолжить тему и рассказать, как настроить NVM с версией Node.js 15 и NPM 7.