Pull to refresh
11
0
Олег @Nodlik

Frontend developer

Send message

Лучшие стратегии разработки фронтенда в 2022 году

Reading time13 min
Views25K
Эта статья специально написана так, чтобы ставить перед читателями неоднозначные задачи, вызывать у них противоречивые чувства и давать им пищу для размышлений. Речь здесь пойдёт о множестве свежих идей, о которых вы, вероятнее всего, пока не слышали.

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



Ещё я постараюсь выражать свои мысли как можно проще — так, чтобы даже люди, не являющиеся разработчиками, смогли бы, хотя бы в общих чертах, меня понять.
Читать дальше →
Total votes 31: ↑26 and ↓5+31
Comments35

Отложенные задачи в рамках микро-сервисной архитектуры

Reading time9 min
Views17K

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

Для решения такой задачи было создано очередное решение под названием Trigger Hook. Принципиальная схема работы показана на рисунке 1. На схеме показано, что происходит с заданиями в течения всего их жизненного цикла. Смена цвета означает смену статуса задачи.

Читать далее
Total votes 18: ↑16 and ↓2+23
Comments17

TypeScript: Раскладываем tsconfig по полочкам. Часть 1

Reading time10 min
Views93K

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

Читать далее
Total votes 26: ↑25 and ↓1+28
Comments4

Фантастические книги, которые вы могли пропустить в 2020 году

Reading time7 min
Views66K

Что делать, когда хочется писать о книгах, но рубеж года уже пройден, а 2021 пока не радует новинками? Можно еще раз вспомнить достойные фантастические романы, которые вышли на русском в 2020, и заслуживают внимания, хотя их авторы, по крайней мере пока, не могут похвастаться большой популярностью в России. Поэтому хочу рассказать о нескольких фантастических книгах прошлого года, которые произвели на меня хорошее впечатление. 

Буду рад, если в комментариях поделитесь своими фантастическими находками.

Читать далее
Total votes 39: ↑36 and ↓3+51
Comments63

CSS: о выводе коротких и длинных текстов

Reading time8 min
Views44K
Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.



Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
Читать дальше →
Total votes 26: ↑24 and ↓2+30
Comments7

14 вещей, которые я хотел бы знать перед началом работы с MongoDB

Reading time8 min
Views33K
Перевод статьи подготовлен в преддверии старта курса «Нереляционные базы данных».





Основные моменты:

  • Крайне важно разработать схему несмотря на то, что в MongoDB она необязательна.
  • Аналогично, индексы должны соответствовать вашей схеме и шаблонами доступа.
  • Избегайте использования больших объектов и больших массивов.
  • Будьте осторожны с настройками MongoDB, особенно если речь идет о безопасности и надежности.
  • В MongoDB нет оптимизатора запросов, поэтому вы должны быть осторожны при выполнении операций запроса.

Я очень давно работаю с базами данных, но только недавно открыл для себя MongoDB. Есть несколько вещей, которые я хотел бы знать перед началом работы с ней. Когда у человека уже есть опыт в определенной сфере, у него существуют предвзятые представления о том, что такое базы данных и что они делают. В надежде облегчить задачу понимания другим людям, представляю список распространенных ошибок.
Читать дальше →
Total votes 30: ↑19 and ↓11+18
Comments13

Программисту. 10 ценных GitHub-репозиториев

Reading time3 min
Views44K
GitHub — это платформа, дающая программистам отличные инструменты для организации работы над кодом. Но в GitHub-репозиториях, помимо кода, можно найти массу ценных учебных материалов. Я, например, занимаюсь разработкой ПО и постоянно ищу репозитории, которые могут чем-то мне пригодиться. Вот 10 моих любимых GitHub-проектов.


Читать дальше →
Total votes 55: ↑37 and ↓18+37
Comments9

11 инструментов для разработки микрофронтендов, о которых стоит знать

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



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

Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.

Существует много подходов к разработке микрофронтендов: от интеллектуальной интеграции компонентов во время сборки проекта до организации совместной работы разных частей приложения во время выполнения кода путём использования особых подходов к маршрутизации. В этом материале я собрал самые заметные инструменты, направленные на разработку микрофронтендов.
Читать дальше →
Total votes 21: ↑19 and ↓2+26
Comments17

23 полезнейших Node.js-библиотеки, о которых стоит знать в 2020 году

Reading time3 min
Views28K
Профессиональному Node.js-разработчику нужно быть в курсе того, что происходит в сфере пакетов, предназначенных для этой платформы. Ему нужно знать о том, что вышло свежего, и о том, какие пакеты, используемые для решения различных задач, пользуются популярностью. Дело тут в том, что разработка ПО в наши дни зависит от библиотек. Знание хороших библиотек способствует повышению производительности труда программиста и помогает ему разрабатывать качественные приложения. Сегодня мы поговорим о 23 полезных пакетах для Node.js.


Читать дальше →
Total votes 40: ↑27 and ↓13+25
Comments32

Объясните мне, как вы для себя разобрались в моделях типизаций — они же все размыты

Reading time7 min
Views39K


Когда я был начинающим, я мог писать простые приложения на C# и C++. Долго игрался с консольными прогами, пощупал десктопные, и в какой-то момент захотел сделать сайт. Меня ждал большой сюрприз — чтобы делать сайты, одного сишарпа мало. Надо ещё знать жс, хтмл, цсс и прочую фронтовую хрень. Я потратил около недели на эти вещи, и понял — не мое. Я мог написать какой то код на джаваскрипт, но он не содержал типов, и я никак не мог взять в толк — как к этому вообще подходить. Это какое-то игрушечное программирование. Ну и забросил к чертям.


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


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

Читать дальше →
Total votes 120: ↑106 and ↓14+115
Comments441

Yeoman для новичков

Reading time3 min
Views85K


Есть такие программы и утилиты, воспользовавшись которыми, пользователь возопит: «Не знаю, как я мог жить без этого инструмента раньше!». На мой взгляд, консольная утилита Yeoman, написанная на Node.JS, относится как раз к разряду таких незаменимых инструментов. Почему?
Давайте посмотрим
Total votes 44: ↑40 and ↓4+36
Comments51

Анимации в мире состояний

Reading time16 min
Views17K
Многие уже научились строить чистые интерфейсы и писать «undo-redo» в несколько строчек. Но как быть с анимациями? Часто их обходят стороной, и они не всегда вписываются в подход (state) ↦ DOM. Есть отличные решения вроде React Motion, но что если вам нужно делать сложные анимации или работать с Canvas, используя физический движок?

В нашем тексте рассказывается, как работать с анимациям в React-приложениях, и сравнивается несколько подходов (D3, React-Motion, «грязные компоненты»). А также о том, как «запускать» анимации в Redux-приложениях. Материал основан на расшифровке доклада Алексея Тактарова с нашей декабрьской конференции HolyJS 2017 Moscow. Прилагаем заодно видеозапись этого доклада:


Осторожно, трафик: под катом много картинок и гифок (сами понимаете, материал про анимации).
Total votes 35: ↑35 and ↓0+35
Comments1

PSR Стандарты

Reading time15 min
Views145K
PHP-FIG

PSR — Чуть больше, чем стиль оформления кода.

Как показала практика, многие PHP-разработчики знакомы с аббревиатурой PSR. Однако большинство все еще ограничены знанием, что PSR это стандарт оформления кода.

Ребята из PHP-FIG (PHP Framework Interop Group), группа концепций совместимости PHP, которые занимаются развитием PSR (PHP Standards Recommendations) шагнули далеко вперед. Поэтому давайте разберемся, что из себя представляет PSR…

Читать дальше →
Total votes 25: ↑24 and ↓1+31
Comments39

Что за черт, Javascript

Reading time17 min
Views163K


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


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

Читать дальше →
Total votes 104: ↑89 and ↓15+74
Comments155

Задачки для фронтенд-тренировки: doodle-place, Apple Podcasts, Site Blocker, парсинг CSV-файлов

Reading time3 min
Views3.7K

Клон doodle-place


image

doodle-place — это онлайн-мир, населенный анимированными каракулями. Вы можете бродить и просматривать каракули, созданные пользователями по всему миру, или внести свой вклад.

Чему вы научитесь, сделав клон doodle-place:

  • Использованию API для Canvas в JavaScript для рисования графики вроде каракулей на экране.
  • Методам работы с 2D-графикой и API WebGL
  • Работе с пользовательским вводом, например, с рисунками, и сохранению результатов в базе данных.
Читать дальше →
Total votes 7: ↑5 and ↓2+10
Comments4

Canvas и геометрия. Это почти просто

Reading time6 min
Views6.2K

Трехмерную графику можно реализовать в браузере не только применяя WebGL или
библиотеки созданные на основе WebGL, но и путем простой отрисовки на 2D-холсте используя для этого функции HTML5 Canvas.


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

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


Остановимся на этом чуть подробнее.

Если создается трехмерная компьютерная игра, например 3D-шутер, то разработчики стараются сделать ее как можно более реалистичной и используют для этого графические ускорители. В этом случае без соответствующих программных инструментов обойтись не удастся. Для таких игр в браузере есть прямой смысл использовать WebGL и Three.js. Самое главное, что с помощью шейдеров предназначенных для этих программных инструментов можно осуществить реалистичное освещение сцены и находящихся на сцене объектов.


Но если требуется просто показать трехмерный объект со всех сторон, то можно обойтись без WebGL и шейдеров. Например некоторые программы CAD/CAM предназначены только для моделирования формы объектов и не предполагают использования реалистичного освещения.

На сайте Canvas и геометрия я последовательно и очень подробно объясняю как используя исключительно HTML5 Canvas можно создать изображения 3D-моделей многогранников.

Читать дальше →
Total votes 6: ↑2 and ↓4-2
Comments5

Разработка статического блога на Gatsby и Strapi

Reading time10 min
Views38K
Статические веб-сайты содержат страницы с неизменным содержимым. Технически — это набор HTML-файлов, которые, для каждого посетителя сайта, выглядят одинаково. В отличие от динамических веб-сайтов, для разработки таких сайтов не нужно серверное программирование или базы данных. Публикация статического веб-сайта проста: файлы выгружают на обыкновенный веб-сервер или в некое хранилище. Два основных преимущества статических веб-сайтов — это безопасность и скорость. Тут нет базы данных, поэтому отсюда нечего красть, и тут нет нужды программно генерировать страницу для каждого запроса, что ускоряет работу.

Для того чтобы упростить создание статических веб-сайтов, создано множество опенсорсных инструментов. Например, это Jekyll, Hugo, Hexo, и другие. Работа по подготовке содержимого сайта ведётся путём редактирования чего-то вроде файлов с разметкой, или через некое API для управления контентом. После того, как данные готовы к публикации, генератор берёт эти данные, внедряет их в шаблоны и создаёт множество HTML-файлов, готовых для публикации.

Сегодня мы расскажем о быстрой разработке проектов с помощью Gatsby — генератора статических прогрессивных веб-приложений, и Strapi — системы управления контентом. В результате после того, как вы освоите это руководство, у вас будет работающий статический блог и масса идей, касающихся его развития.
Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments7

Практическое руководство по использованию CSS Modules в React приложениях

Reading time9 min
Views170K
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.

В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments18

23 непростых вопроса для JavaScript-собеседования

Reading time15 min
Views70K
Хотите подготовиться к собеседованию по JavaScript и ищете вопросы, на которых можно попрактиковаться? Если так — считайте, что ваши поиски окончены. Автор материала, перевод которого мы сегодня публикуем, говорит, что собрал более двух десятков вопросов по JavaScript, предназначенных для тех, кто хочет превратиться из джуниора в сеньора, для тех, кто стремится успешно пройти собеседование в сфере фронтенд-разработки и получить интересное предложение от работодателя.


Читать дальше →
Total votes 50: ↑30 and ↓20+23
Comments72

Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

Reading time8 min
Views48K
С момента релиза CodyHouse Framework, пару месяцев назад, многие пользователи спрашивали нас, почему мы выбрали переменные CSS вместо переменных SASS, хотя мы используем SASS в этой среде. В этой статье я расскажу о преимуществах использования пользовательских свойств и о том, почему они стали решающими в нашем рабочем процессе.


Total votes 24: ↑24 and ↓0+24
Comments5
1
23 ...

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Date of birth
Registered
Activity