Pull to refresh
11
0
Дмитрий Пищалка @dmitryprogrammer

Front-End Developer

Send message

Как уведомить Роскомнадзор об обработке персональных данных: пошаговая инструкция для ИТ-компаний и стартапов

Level of difficultyEasy
Reading time31 min
Views23K

Для современной компании, будь то разработчик ПО, SaaS-провайдер или активный пользователь облачных платформ, CRM и аналитики, корректная обработка ПДн и уведомление Роскомнадзора – это уже не опция, а гигиенический минимум. Забыли или ошиблись? Готовьтесь к штрафам для юр лиц и ИП до 300 000 ₽ с 30 мая 2025 года. Если хотите доверия клиентов и беспроблемной работы — действуйте по закону.

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

Читать далее

React: тестируем компоненты с помощью Jest и Testing Library

Reading time14 min
Views41K


Привет, друзья!


В данном туториале я покажу вам, как тестировать компоненты на React с помощью Jest и Testing Library.


Список основных задач, которые мы решим на протяжении туториала:


  1. Создание шаблона React-приложения с помощью Vite.
  2. Создание компонента для получения приветствия от сервера.
  3. Установка и настройка Jest.
  4. Установка и настройка Testing Library.
  5. Тестирование компонента с помощью Testing Library:
    1. Используя стандартные возможности.
    2. С помощью кастомного рендера.
    3. С помощью кастомных запросов.
  6. Тестирование компонента с помощью снимков Jest.

Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

Читать дальше →

Рецепты TypeScript: перевод ключей объекта в camelCase

Level of difficultyMedium
Reading time4 min
Views5.8K

Всем привет! С вами снова Костя Логиновских — ведущий разработчик из Cloud.ru. Я уже делился TypeScript-рецептами в предыдущих статьях — вот первая и вторая — и теперь хочу рассказать про еще один. Наши рецепты — это готовый код, который можно применить в конкретных ситуациях, а в некоторых случаях и подогнать ситуацию под код.

Сегодня в меню — функция на обычном TypeScript, которая преобразует тип объекта так, чтобы все ключи внутри него из snake_case стали camelCase. Жду всех под катом!

Смотреть рецепт

Micro Frontend Архитектура на примере Angular

Reading time13 min
Views20K
В наше цифровое время веб-приложения становятся все более масштабней и сложней. Такие веб-приложения могут быть разделены на несколько модулей, разработанных отдельными командами, которые удобно запускать в производство по отдельности.

По мере того, как приложения со временем усложняются, требуя масштабируемости «на лету» и высокой скорости реагирования, архитектура микро-фронтенд, основанная на компонентах Angular, становится все более эффективным решением для сложных веб-приложений.

Микро-фронтенд — это архитектура, которая рассматривает веб-приложение как набор приложений, разрабатываемых отдельными командами. Каждая команда специализируется на определенной области бизнеса или цели. Такая кросс-функциональная команда создает функциональность сверху донизу, от сервера до пользовательского интерфейса.

Плюсы микро-фронтенд архитектуры


  • Автоматизация CI /CD. Поскольку каждое приложение интегрируется и развертывается независимо, это упрощает CI/CD. Так как все модули разделены, то не нужно беспокоиться обо всем приложении при внедрении нового модуля. Если в коде модуля есть ошибка, CI/CD прервет весь процесс сборки.
    Гибкость команд разработчиков. Многочисленные команды могут разрабатывать и развивать информационные системы, работая по отдельности.
  • Единая ответственность. Каждая команда микро-фронтеда на 100% фокусируется на функциональности своего микро-фронтенд приложения.
  • Возможность повторного использования. Микро-фронтенд приложение может быть повторно использовано несколькими командами в разных системах.
  • Технологический агностицизм. Архитектура микро-фронтенд не зависит от технологии. Возможно использовать компоненты, разработанные на разных фреймворков веб-разработки (React, Vue, Angular и т.д.).
  • Простой порог входа в систему. Небольшие модули легче изучать и понимать новым разработчикам, входящим в команды, чем монолитную архитектуру с огромной структурой кода.

Читать дальше →

Computed сигналы и ChangeDetection — подробный разбор

Level of difficultyMedium
Reading time8 min
Views3.1K

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

Для многих моих коллег сигналы стали чем-то мистическим. С одной стороны, код с ними стал выглядеть элегантнее, с другой была обнаружена проблема с пониманием внутренних механизмов их работы. В частности, загадочно выглядели computed сигналы, в которых в отличие от хуков React не прописываются зависимости напрямую. Также возникали вопросы связанные с детекцией изменений. В отличие от Observable и async pipe, который использует напрямую ChangeDetectorRef, сигналы могут вызываться в шаблоне, вызывая, при этом, его изменения.

В этой статье мы погрузимся в исходный код сигналов и разберем детально их работу.

Читать далее

5 советов для прокачки своих навыков в Angular

Reading time9 min
Views24K

Этим летом мы с Ромой запустили серию твитов с полезными советами и приемами по Angular. Сообщество тепло встретило эту инициативу, и я решил написать обобщающую статью.

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

Читать далее

Принципы SOLID, о которых должен знать каждый разработчик

Reading time11 min
Views389K
Объектно-ориентированное программирование принесло в разработку ПО новые подходы к проектированию приложений. В частности, ООП позволило программистам комбинировать сущности, объединённые некоей общей целью или функционалом, в отдельных классах, рассчитанных на решение самостоятельных задач и независимых от других частей приложения. Однако само по себе применение ООП не означает, что разработчик застрахован от возможности создания непонятного, запутанного кода, который тяжело поддерживать. Роберт Мартин, для того, чтобы помочь всем желающим разрабатывать качественные ООП-приложения, разработал пять принципов объектно-ориентированного программирования и проектирования, говоря о которых, с подачи Майкла Фэзерса, используют акроним SOLID.



Материал, перевод которого мы сегодня публикуем, посвящён основам SOLID и предназначен для начинающих разработчиков.
Читать дальше →

Event Loop в деталях

Level of difficultyMedium
Reading time7 min
Views93K

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

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

Promise.then()

Angular Signals Implementation

Level of difficultyHard
Reading time12 min
Views2.7K

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

Читать далее

Знакомимся с трансляторами ассемблера для ПК

Level of difficultyEasy
Reading time7 min
Views5.7K

Привет, Хабр! Сегодня я хочу поделиться своими наблюдениями и опытом по работе с различными ассемблерами. Я сам пишу на языке C и относительно редко касался темы ассемблера. Но недавно решил восполнить этот пробел в знаниях и посмотреть на различные ассемблеры. В данной статье мы не будем рассматривать ARM, AVR и другие микроконтроллерные архитектуры, а сосредоточимся исключительно на компьютерных ассемблерах. Давайте не будем судить строго, ведь это скорее исследовательский опыт, чем глубокое погружение.

Читать далее

Введение в gRPC: Основы, применение, плюсы и минусы. Часть I

Level of difficultyEasy
Reading time4 min
Views36K

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

Читать далее

Принцип работы async/await в JavaScript

Level of difficultyMedium
Reading time8 min
Views35K


Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание. Некоторым ветеранам JS известно, что async/await – это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в данной статье.

Видео от автора на ту же тему.
Читать дальше →

DOM, DI и View: деревья в Angular

Level of difficultyHard
Reading time8 min
Views12K

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

Читать далее

MVVM: полное понимание (+WPF) Часть 1

Reading time8 min
Views313K
В настоящей статье задействован мой опыт доведения некоторого числа студентов до полного и окончательного понимания паттерна MVVM и реализации его в WPF. Паттерн описывается на примерах возрастающей сложности. Сначала теоретическая часть, которая может использоваться безотносительно конкретного языка, затем практическая часть, в которой показано несколько вариантов реализации коммуникации между слоями с использованием WPF и, немножко, Prism.

Зачем вообще нужно использовать паттерн MVVM? Это ведь лишний код! Написать тоже самое можно гораздо понятнее и прямолинейнее.

Отвечаю: в маленьких проектах прямолинейный подход срабатывает. Но стоит ему стать чуть больше — и логика программы размазывается в интерфейсе так, что потом весь проект превращается в монолитный клубок, который проще переписать заново, чем пытаться распутать. Для наглядности можно посмотреть на две картинки:
Читать дальше →

Нейронные сети для начинающих. Часть 1

Reading time7 min
Views1.6M
image

Привет всем читателям Habrahabr, в этой статье я хочу поделиться с Вами моим опытом в изучении нейронных сетей и, как следствие, их реализации, с помощью языка программирования Java, на платформе Android. Мое знакомство с нейронными сетями произошло, когда вышло приложение Prisma. Оно обрабатывает любую фотографию, с помощью нейронных сетей, и воспроизводит ее с нуля, используя выбранный стиль. Заинтересовавшись этим, я бросился искать статьи и «туториалы», в первую очередь, на Хабре. И к моему великому удивлению, я не нашел ни одну статью, которая четко и поэтапно расписывала алгоритм работы нейронных сетей. Информация была разрознена и в ней отсутствовали ключевые моменты. Также, большинство авторов бросается показывать код на том или ином языке программирования, не прибегая к детальным объяснениям.

Поэтому сейчас, когда я достаточно хорошо освоил нейронные сети и нашел огромное количество информации с разных иностранных порталов, я хотел бы поделиться этим с людьми в серии публикаций, где я соберу всю информацию, которая потребуется вам, если вы только начинаете знакомство с нейронными сетями. В этой статье, я не буду делать сильный акцент на Java и буду объяснять все на примерах, чтобы вы сами смогли перенести это на любой, нужный вам язык программирования. В последующих статьях, я расскажу о своем приложении, написанном под андроид, которое предсказывает движение акций или валюты. Иными словами, всех желающих окунуться в мир нейронных сетей и жаждущих простого и доступного изложения информации или просто тех, кто что-то не понял и хочет подтянуть, добро пожаловать под кат.
Читать дальше →

Есть ли жизнь после FAANG компании или мой опыт собеседований в Северной Америке, 20+ компаний за 3 недели

Reading time14 min
Views47K

Я хотел бы поделиться недавним опытом собеседований на рынках Канады и США на позицию инженера данных. У меня был больше научный интерес, чем необходимость. За 3 недели я побщался более чем с 20 компаниями в Канада и США, чтобы оценить возможности рынка и тренды индустрии аналитики.

Узнать результаты

Здоровый сон взрослого человека — это засыпать за 15 минут и не вставать ночью попить и пописать

Reading time13 min
Views167K


Послушала на днях 2х-часовое выступление «Здоровый сон» врача-невролога, сомнолога Елены Царевой. Выдернула самые важные для себя пункты:

  1. Спать регулярно, ложиться и вставать в одно и то же время — самое важное. 
  2. Биоритмы — частично наследуются, частично регулируются стилем жизни. На них можно влиять самому.
  3. Нормальное время отхода ко сну около 22:00. Сова и жаворонок — это отклонение на ±1-2 часа. Больше — это нарушение и сдвиг фазы сна, чаще из-за внешних раздражителей.
  4. Самая частая причина плохого сна и тяжелого засыпания — неправильный свет.
  5. Для сдвига режима на 1 час организму нужен 1 день на адаптацию.
  6. Невозможно «доспать» бессонную ночь. Досыпание устраняет только 30% последствий недосыпа.
  7. Прежде, чем искать причины плохого сна, исключите психологические проблемы (тревожность, депрессию), нарушения щитовидки, дефицит железа, диабеты, сердечно-сосудистые заболевания и патологию почек и мочеполовой системы.
  8. Водителям и пассажирам: 17 часов без сна равны 0,5 промилле, 21 час без сна — 0,8 промилле.
  9. В постели без сна больше 15 минут не находиться — совет при бессоннице. 
  10. Самые физиологичные будильники — те, что светятся. 

Под катом конспект 2х-часового выступления про сон на 15 минут чтения. Еще один поинт в копилку полезных материалов про сон — Sleep Hackers.
Читать дальше →

Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений

Reading time27 min
Views40K


Доброго времени суток, друзья!


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


Сначала мы с вами кратко разберем основные виды уязвимостей веб-приложений, а также основные виды атак, основанные на этих уязвимостях. Далее мы рассмотрим все современные заголовки, каждый — по отдельности. Это в теоретической части статьи.


В практической части мы реализуем простое Express-приложение, развернем его на Heroku и оценим безопасность с помощью WebPageTest и Security Headers. Также, учитывая большую популярность сервисов для генерации статических сайтов, мы настроим и развернем приложение с аналогичным функционалом на Netlify.


Исходный код приложений находится здесь.


Демо Heroku-приложения можно посмотреть здесь, а Netlify-приложения — здесь.


Основными источниками истины при подготовке настоящей статьи для меня послужили следующие ресурсы:


Читать дальше →

Рендеринг WEB-страницы: что об этом должен знать front-end разработчик

Reading time6 min
Views239K
Приветствую вас, уважаемые хабравчане! Сегодня я бы хотел осветить вопрос рендеринга в веб-разработке. Конечно, на эту тему уже написано много статей, но, как мне показалась, вся информация довольно разрознена и отрывочна. По крайней мере, чтобы собрать всю картину в своей голове и осмыслить её, мне пришлось проанализировать немало информации (в основном — англоязычной). Именно поэтому я решил формализовать свои знания в статью, и поделиться результатом с сообществом Хабра. Думаю, информация будет полезна как начинающим веб-разработчикам, так и более опытным, чтобы освежить и структурировать свои знания.

Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.
Читать дальше →

Для программиста shell так же необходим, как умение читать

Reading time4 min
Views17K
Грамотное владение shell — один из самых важных навыков, которыми вы как программист должны обладать. Unix shell — одна из самых мощных идей, реализованных в коде, и она должна стать вашей второй натурой. Ни один другой инструмент и близко не сравним с возможностью быстрого выполнения сложных задач или с сохранением этих команд в виде скриптов.

В своей работе я использую Vim в качестве редактора, а Unix — в качестве «IDE». Я не модифицирую свой vimrc, чтобы добавить в него функции IDE; самый важный плагин, который использую ежедневно — это Ctrl+P, и он нужен мне только для упрощения открытия файлов. Грамотное владение Vim — ценный навык, но важно понимать, когда от него нужно отказаться. В своей повседневной работе я взаимодействую с несколькими терминалами: обычно в одном из них есть Vim, второй используется для запуска сборок или демонов, а в третьем запущен shell, способный выполнить любые мои команды.



Постоянно открытый shell позволяет мне выполнять сложные задачи и отвечать на сложные вопросы. Интересные вещи я нахожу при помощи git grep, масштабные операции поиска и замены я выполняю через sed, отвечаю на вопросы с помощью awk, а более тонкие задачи я выполняю создаваемыми по ходу работы командами и конвейерами shell. Я обладаю свободой творческого решения задач без ограничений, заложенных проектировщиками IDE.
Читать дальше →
1
23 ...

Information

Rating
8,908-th
Location
Самара, Самарская обл., Россия
Date of birth
Registered
Activity