13 трендов в типографике в 2021 году
Помимо шрифтов с засечками и кинетических шрифтов, в дизайне и типографике появляются новые тенденции.
Существует мнение, что дизайн — это сочетание типографики и сетки. Однако...
Уменьшаем размер образа Docker для приложения Next.js
Как избавиться от ненужных файлов в образе докера? Выполним контейнеризацию приложения и простую оптимизацию размеров образа Docker.
Layout для Material-UI
Material-UI — одна из самых популярных библиотек компонентов react. Однако невозможно найти ни одной инструкции или статьи о том, как создать layout на основе этих...
Как повысить производительность бэкенд-приложений
Предлагаем 10 рекомендаций по повышению производительности бэкенд-приложений с помощью таких техник, как кэширование, объединение запросов, многопоточность, сжатие и прочих.
Почему не стоит писать простой код JavaScript?
Доводы, которые приведены в этой статье, заставят вас раз и навсегда отказаться от написания динамически типизированного кода JavaScript!
Простой способ взлома сайта для получения его Git-данных
Внимание! Статья преследует чисто образовательные цели. Автор не одобряет и не поощряет хакерство, кроме его разрешённого этического применения (white hat).
Большинство разработчиков по всему миру...
Одномерный клеточный автомат в JavaScript
Концепция клеточного автомата возникла в середине 20 века, и с того времени область ее практического и теоретического применения значительно расширилась.
Клеточный автомат состоит из любого...
Как стать разработчиком React в 2022 году?
Мечтаете стать React-разработчиком? Осуществить вашу мечту поможет дорожная карта с описанием всего пути профобучения. Следуйте указанному маршруту - и стартовая должность React-разработчика вам обеспечена.
Введение в создание веб-компонентов
Приложения становятся все сложнее, и нам нужен способ разделять код на управляемые фрагменты. Веб-компоненты подойдут для создания компонентов, которые можно неоднократно использовать.
Веб-компоненты также изолированы...
Создаем собственный блог с помощью Next.js и Strapi
В этой статье вы узнаете:
о назначении CMS;как использовать Strapi;как с помощью Next.js и Strapi создавать статические сайты.
Введение
Предположим, что вы создаете блог при помощи Next.js....
PHP 8.1 уже обещает стать одним из лучших релизов
Распаковка массива со строковыми ключами
До версии PHP 8.1 эта простая операция не была доступна. Не будем много говорить о возможностях, которые она теперь открывает....
Плюсы и минусы React: виртуальная DOM, синтаксис JSX и другие аргументы для спора
Рассмотрим важные достоинства и недостатки React, чтобы с умом выбирать JavaScript-фреймворк и аргументированно отстаивать свой выбор.
7 стратегий ускорения приложений React Native
Хотите разрабатывать эффективные приложения, приносящие радость пользователям? Воспользуйтесь стратегиями и инструментами, которые ускорят ваши приложения и обеспечат безупречный пользовательский опыт.
Scrum на грани вымирания?
В 2010 году вышло первое руководство по Scrum, кардинально изменившее положение дел в мире разработок. То, что задумывалось как простой фреймворк, стало общепринятым рабочим...
Как отследить событие закрытия браузера и вкладки с помощью JavaScript
Вам нужно отследить событие закрытия браузера или вкладки, чтобы предупредить пользователя о любых несохраненных изменениях на веб-странице? Предлагаем пошаговый алгоритм этой операции.
Адаптивный фавикон для современных веб-приложений на React
Адаптивные и динамические фавиконы позволяют React-проекту выделиться из общей массы и повысить качество пользовательского опыта. Рассказываем о том, как создавать SVG-фавиконы, а также о преимуществах их использования.
Как я самостоятельно освоила Tableau
Tableau - это высококлассное программное обеспечение для анализа и визуализации данных. Хотите изучить этот полезный продукт? Профессиональный аналитик данных поделится с вами опытом освоения Tableau с нуля.
Микрофронтенды - а почему бы и нет?
Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, MacBook и дорогим кофе,...
Как создать самообновляющийся заголовок Twitter с динамическим контентом
Представьте, что заголовок вашего профиля в Twitter сам отображает свежие статьи блога или недавних подписчиков, а вам это не стоит ни копейки. Заманчиво? Уже не терпится все рассказать!
Как сжимать коммиты в Git с помощью git squash
Для начала давайте разберемся: что же это вообще такое — git squash.
Git squash — это прием, который помогает взять серию коммитов и уплотнить ее. Например, предположим: у вас...
Как сделать приложение с дополненной реальностью, используя React Native
Введение
Возможно, вас в последнее время тоже, как и меня, заинтересовала постоянно растущая сфера дополненной реальности. В том или ином виде или форме эта технология...
Nexus — новый визуализатор дерева компонентов для Next.js
Познакомимся с мощным фреймворком для разработки полного цикла от лица его создателей. Выясним его основные характеристики, принцип работы с кодовой базой и многое другое, а также узнаем, какой функционал планируется реализовать в будущем.
Переиспользование форм в Angular
Проект в Stackblitz со всеми примерами в конце поста.
Переиспользуемые элементы управления
Проблема
Однажды я писал модуль аутентификации для компании в сфере электронной коммерции. Это кажется просто,...
Как спроектировать REST API для выполнения системных команд с помощью Actix Rust
Привет! Сегодня я расскажу, как создать REST API для выполнения системных команд на вашем сервере с помощью метода, которым пользуются известные компании.
Представьте, что вы...
5 полезных функций JavaScript, которые знакомы не всем
JavaScript — чрезвычайно эффективный язык программирования, особенно в веб-проектах. Он предоставляет много возможностей, а также библиотек и фреймворков, которые разработчик может использовать для создания...
Минималистичная конфигурация терминала с возможностью тонкой настройки
Мой терминал настроен очень минималистично. Это просто черный ящик, который сообщает мне полезную информацию. Основное удобство в том, что каждый его аспект имеет собственный...
Переключатель темного режима в веб-приложении
Краткая инструкция по добавлению в приложение функции подстройки под цветовую схему системы, а также переключателя для изменения этой схемы внутри самого приложения.
Индексирование коммитов с Git Add Patch
Для разработчика нет, наверное, ничего более увлекательного, чем запуск нового проекта. Начинается он с разработки доменной модели и планирования логики предметной области. Затем происходит...
Как создать бессерверное приложение с Netlify и JavaScript
Обучающее руководство для новичков по созданию бессерверных функций с помощью Netlify: настройка проекта, создание приложения и развертывание API.
Проект инженерии данных с DAG Airflow «от и до». Часть 1
В реальном проекте валидации электронной почты проиллюстрируем потоковую передачу данных с отправителем и получением сообщений в теме Kafka для Cassandra и MongoDB. Наличие почты и пароля определим с помощью получателя и проверки данных.
Сказание о шаблоне Стратегия и его реализации
Я, конечно же, не Майкл Фелпс, да и плавать больше предпочитаю в море, но мне очень нравится наблюдать за тренировками пловцов. Этот процесс словно...
7 бесплатных шаблонов React для разработки проектов
Не обязательно начинать работу с нуля! Эти продвинутые шаблоны React помогут создавать проекты легко и быстро.
4 принципа качественного рефакторинга функций
Каждый проект в программировании так или иначе связан с данными, в управлении которыми важную роль играют функции, подготавливающие эти данные для представления в числовом...
Раскрываем силу JavaScript: сокращение размера пакета NPM на 99%
Ищете пути повышения производительности приложения? Ознакомьтесь со способами значительного улучшения метрик в Lighthouse и FCP в проектах с использованием пакета дизайн-системы.
1 Кодовая база - 3 платформы
Все, что нужно знать для успешного развертывания кроссплатформенного приложения в 2021 году.
Представим простую ситуацию:
Вы соло-разработчик. У вас появилась идея. Вы делитесь ей со своими друзьями....
Дизайн для всех: подробное руководство по созданию интерфейсов для людей с ограниченными возможностями
Создание дизайн-решений, которые будут работать для каждого — сейчас разработчики сосредоточены на этой теме больше, чем когда-либо раньше. Всё чаще ведётся речь о том, что интересы...
Прекратите использовать конфигурационные файлы JSON
История о том, почему мы не должны использовать инструменты для того, что можно сделать с помощью простого JavaScript.
Каждый важный инструмент в мире JavaScript позволяет...
React TypeScript: Основы и лучшие практики
Подготовка к работе
create-react-app с TypeScript
$ npx create-react-app your-app-name --template typescript
Если вы предпочитаете Yarn, используйте следующую команду:
$ yarn create react-app your-app-name --template typescript
Обратите внимание, что...
Зачем усложнять разработку с AWS Lambda?
Время подискутировать! Автор рассматривает наметившуюся тенденцию усложнять бессерверную разработку с помощью AWS Lambda и высказывается за сохранение простоты и модульности данного сервиса.
Элементы минималистичного дизайна
На сегодняшний день минимализм является одним из самых популярных UX/UI трендов в 2021 году. Минималистичный дизайн — это художественный замысел, который подразумевает использование наиболее важных...
Техника каррирования в JavaScript: суть, преимущества, примеры
Расскажем о такой эффективной технике в JavaScript, как каррирование. Продемонстрируем на практических примерах принцип ее действия и преимущества.
Использование Angular Elements с расширением Chrome
Познакомьтесь с Angular Elements
Angular Elements все еще широко не используется, хотя является мощным инструментом для создания независимых и автономных компонентов. Его можно использовать на любом...
Введение в WebAssembly (WASM)
Хотите разрабатывать высокопроизводительные веб-приложения, выполняющие обработку видео, 3D-рендеринг, мультимедийные игры и криптографические вычисления? WebAssembly поможет легко справиться с этой задачей.
Ruby on Rails меняет всё
Ruby on Rails поможет вам сэкономить кучу времени при написании кода. Пишите меньше, достигая тех же целей, которых достигли бы при помощи других языков.
От...
Дизайн-система: иконки
В данной статье автор делится своим опытом разработки дизайн-системы и предлагает идеи для автоматизации различных процессов проектирования. Особое внимание будет уделено простой, но очень...
10 UX-трендов для мобильных приложений в 2021 году
В этой статье мы бы хотели рассказать про 10 трендов в UX-дизайне мобильных приложений, которые будут преобладать в 2021 году.
1. Суперприложения
Одно приложение, одна цель...
5 типичных ошибок веб-разработчиков
Учиться лучше на чужих ошибках. Изучите подборку из 5 частых ошибок разработчиков - это лучший способ избежать их в собственной практике.
25 полезных сокращений в JavaScript для веб-разработчиков
Используйте сокращения и однострочники, чтобы писать код быстро и просто
В каждом примере задача решается сначала длинным способом, которым, скорее всего, воспользовались бы многие. Затем показываем,...
Тренды UX/UI дизайна на 2024 год
Узнаем о новом тренде Bento UI. Познакомимся с трендами в пространственном дизайне, а также в сфере анимации и 3D. Рассмотрим инструменты с ИИ для дизайнеров. Узнаем о новых тенденциях и требованиях в сфере UX.
Как это использовать: объявление функции и функциональные выражения
Первое отличие: название
Если вы создаёте функцию с названием, то вам необходимо объявить функцию. В функциональных выражениях же название не обязательно.
Объявление функции:
function doStuff() {};
Функциональное выражение:
const doStuff...
Краткое введение в функции высшего порядка в JavaScript
Функции высшего порядка
Функция, принимающая в качестве аргументов другие функции или возвращающая другую функцию в качестве результата, называется функцией высшего порядка.
С функциями в JavaScript вы можете:
Хранить...
Паттерн проектирования «Наблюдатель»: объект под прицелом
В книге “Приемы объектно-ориентированного проектирования: паттерны проектирования” Эриха Гамма описываются 23 классических паттерна, которые предлагают решения часто встречающихся задач в разработке ПО.
В данной...
Компиляция TypeScript в нативный код
Представляем Static Hermes - новое поколение движков JavaScript. Ключевой особенностью его является опциональная компиляция JavaScript с указанием типов в нативный код, обеспечивающая предсказуемую производительность на уровне C и C++.
Новый взгляд на старые истины: принцип «Не повторяйся!» (DRY)
Первый принцип, с которым вы знакомитесь, начиная свой путь в мир разработок ПО и записывая первые строки кода, — это постулат DRY (“Не повторяйся”). А как...
Изучаем замыкания в JavaScript
Это практическое руководство по работе с замыканиями в JavaScript
Замыкания — это базовая концепция JavaScript, которая сбивает с толку многих новичков, тем не менее её должен знать...
Подробно о перечислениях в Typescript
Углубимся в тему перечислений в TypeScript и рассмотрим их в рабочей среде React: виды, особенности, случаи применения.
Vue.js 3: программирование, ориентированное на будущее
Если вы используете Vue.js, то знаете, что версия 3.X будет выпущена в ближайшее время. На данный момент новая версия находится в активной разработке, но...
Введение в регулярные выражения в JavaScript
Введение
Первым делом необходимо выяснить, что такое регулярные выражения. Регулярные выражения — это способ описания шаблона или правила. Их можно использовать, чтобы проверить, есть ли в строке...
Разработка и развёртывание приложения машинного обучения: полное руководство
Приложение для прогнозирования COVID-19: от и до
Похоже, коронавирус не спешит уходить из нашей жизни. Но мы можем не только носить маски и мыть руки. Давайте...
Возможности и перспективы WebAssembly
WebAssembly - прорывная разработка нашего времени - обладает огромным потенциалом. Однако это в основном академический проект. Не пора ли вывести WebAssembly в свет?
Парсинг HTML из строки на Ruby On Rails
На одном из этапов моего проекта в школе программирования Flatiron Bootcamp мне пришлось столкнулся с проблемой, совершенно отличающейся от того, что я видел раньше....
Платформы Аngular в деталях. Часть 3. Визуализация Angular-приложений в терминале
Часть 1, Часть 2, Часть 3
В этой статье мы с вами приступим к процессу создания пользовательской платформы. Но прежде, пожалуйста, просмотрите ещё раз...
Управляйте приложением React с помощью голоса
Не так давно я реализовал с помощью TensorFlowJS модель распознавания голоса. Даже несмотря на то, что задача была очень интересной, ее расширение могло вызвать...
Чистый код JavaScript - объекты и классы
При написании чистого кода нужно быть осторожным с объектами, классами или конструкторами, которые мы объявляем. Мы не хотим предоставлять данные, которые не должны быть...
Как создать эффективную систему логирования с использованием Aspect и Spring Cloud Sleuth
Логирование крайне важно для оперативного отслеживания ошибок в приложении и установления причины этих ошибок. Разберемся, как без особых усилий настроить фреймворк для логирования в приложении Spring Boot.
PHP: типы циклов
Циклы в PHP используются для выполнения одного и того же блока кода определенное количество раз. Рассмотрим 4 типа циклов: for, while, do…while, foreach.
Баланс между креативностью и удобством
Дискуссия «креативность против юзабилити» длится уже более ста лет. Как я уже писал, она тесно связана с технологическими разработками и промышленными революциями. Чтобы достичь...
Циклы в JavaScript
Рассмотрим циклы JavaScript, их типы, примеры использования и лучшие практики. Это поможет успешно управлять ходом выполнения программ, эффективно решая повторяющиеся задачи.
JMeter-тестирование динамической нагрузки Restful API
Цель этой статьи — научить вас выполнять нагрузочное тестирование и измерение производительности Restful API при помощи JMeter до и после развёртывания, используя подход с конфигурированием. В...
7 FrontEnd трендов и инструментов для JavaScript на 2020
Мир JavaScript быстро развивается.
Изменения во фронтенде и веб-разработке происходят невероятно быстро. Сегодня, если вы не мастер Webpack, React Hooks, Jest, Vue и NG, вы,...
Визуализация данных и веб-отчёты в Angular
Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как встроенные BI-инструменты...
Устаревшие фреймворки JavaScript: как не потратить время на бесполезные технологии?
Список устаревших библиотек JavaScript и недостаточно популярных технологий, которые потратят ваше время впустую.
JWT-аутентификация в Spring Boot Webflux
Spring Security всегда снижал мой интерес к собственным проектам. Как только возникала необходимость выяснить как аутентифицировать пользователей, я сразу начинал испытывать негодование или скуку...
Как создать двойной слайдер для переключения между формой входа и формой регистрации
Описание проекта
Прежде чем мы приступим к написанию кода, я хотел бы разбить нашу главную задачу на отдельные компоненты. Это поможет сделать код более понятным.
У...
Движки JavaScript. Часть 2: генерация кода и базовые оптимизации
В этой части продолжим разговор о том, как работают движки JavaScript. Поговорим о компиляторах, этапах создания кода и основных оптимизациях.
Обрабатываем ошибки в React: полное руководство
Независимо от уровня внимательности и количества написанных тестов всегда что-то может пойти не так. Рассмотрим обработку ошибок в React: что делать при их появлении, как их выявить и устранить.
Input и Output в компонентах Angular
Недавно у нас была статья по созданию и запуску приложения. Работает оно отлично, но вот его структуру стоило бы улучшить. На данный момент весь...
Как развернуть React-приложение в Netlify
Я научу вас развертке и хостингу React приложения с Netlify.Netlify — это сервис для автоматизации сборки, развертывания и управления сайтами. В настоящее время Netlify считается одним...
Как создать простую браузерную игру с помощью Phaser 3 и TypeScript
Большую часть своего времени я занимаюсь backend-разработкой, поэтому я не могу похвастаться большим опытом во frontend. Какое-то время назад у меня возникло желание создать...
Почему разрабатывать веб-интерфейсы так сложно?
Предлагаем разбор ключевых проблем разработки веб-интерфейсов. Их осмысление - ключ к эффективным решениям в области фронтенда, позволяющим создавать визуально привлекательные, надежные, безопасные и удобные для пользователя веб-интерфейсы.
6 шагов по созданию расширения Chrome, которое можно продать
Простой способ организации пассивного заработка без особых хлопот. Минимальный комплект необходимых инструкций прилагается.
Основы JavaScript: управление DOM элементами (часть 1)
Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...
Нужно ли дизайнеру уметь писать код?
Что важнее для дизайнера - писать код или уметь работать с ним? А может, достаточно овладеть навыками командной работы? Порассуждаем на эту тему.
Прототипирование с веб-компонентами: создание RSS Reader
Приготовьтесь отправиться в путешествие по изучению прототипирования приложения с помощью веб-компонентов, модулей es6, event target, bit cli и т. д. Вместе мы узнаем, как...
22 CSS-свойства для позиционирования
В статье пойдет речь о нескольких редко упоминаемых в технической литературе свойствах CSS. Тем не менее их использование повлечет за собой повышение скорости и...
Отложенная загрузка изображений с помощью Intersection Observer API
Изображения составляют огромный процент содержания веб-страниц. Однако чем больше изображений, тем медленнее загружается страница.
Большое количество изображений на сайте значительно влияет на его производительность. Отложенная...
Проектирование базы кода API GraphQL в Node.js
GraphQL завоевывает все большую популярность. Спроектируем API на основе этой технологии и запустим сервер, чтобы наглядно разобраться в реализации механизмов модульности и аутентификации.
Развертывание фронтенда и бэкенда приложения на Kubernetes
Настроим полнофункциональное приложение Mongodb с доступом через браузер. Создадим с помощью внутренней службы под, сделав его доступным для другого компонента, и внешнюю службу для доступа к поду за пределами кластера или из внешних источников.
Почему стоит избегать метода push при разработке на JavaScript
Использование метода push может привести к изменению исходного массива. Такой код чреват потенциальными проблемами и, возможно, его придется даже переписывать.
Архитектура ПО: создайте свое приложение с AWS
В настоящее время облачные вычисления стали центральной частью любой технологической компании. Таковыми считаются все организации, т.к. большинство из них подпадает под категорию «программное обеспечение...
Что такое React.memo и как он работает
Хотите повысить производительность React-приложений? Воспользуйтесь вызовом компонента React.memo. В результате мемоизации React будет использовать результат последнего рендера, избегая повторного рендеринга.
Основы дизайна, которые должен знать каждый креативщик
Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...
Продвинутые техники PHP: от шаблонов проектирования до тестирования. Часть 1
Раскроем нюансы шаблонов проектирования, эффективных взаимодействий с базами данных, защиты приложений от угроз безопасности и повышения производительности посредством оптимизации. По всем темам разберем примеры.
API, WebSocket или WebHook: что выбрать?
В любом приложении нужен надежный механизм взаимодействия между его компонентами.
Например, в веб-приложениях необходимо взаимодействие между браузером и сервером. Иногда серверу нужно отправить сообщения обратно...
Да не нужен вам фреймворк JavaScript!
Не устали ли мы от вездесущих фреймворков JavaScript? Возможно, что мы не обращаем внимание на эффективность и пакетные данные от наших пользователей?
Вернёмся в эпоху jQuery
Помните...
Управление состоянием в React: обзор
Разберемся, какие проблемы решаются управлением состояния, а также нужна ли продвинутая библиотека для структурирования кода или инструментов React достаточно для комфортной работы.
Структура UX-дизайна: рабочий процесс и штат сотрудников
Как проходит процесс создания UX-дизайна? Подробно расскажем о функциях каждого специалиста и основных этапах работы.
Подстановка учетных данных 2.0: использование прокси-серверов и GUI-инструментов, обход CAPTCHA и системы безопасности Cloudflare
Приготовьтесь к путешествию в темный мир высокотехнологичного хакерства. Вы узнаете о новейших видах подстановки учетных данных, украденных киберпреступниками: использовании прокси-серверов и GUI-инструментов, обходе CAPTCHA и системы безопасности Cloudflare.
Как не лажать с JavaScript. Часть 3
Часть 1, Часть 2, Часть 3
Изменяемое состояние
Что такое состояние? Говоря простым языком, состояние — это любые временные данные, хранящиеся в памяти. Например, это могут быть переменные...
Операторы PHP: If, Else и If-Else
Функциональное устройство языка PHP не так сложно для понимания, как может показаться на первый взгляд. Сегодня разберем назначение и особенности операторов If, Else и If-Else.
R - язык для статистической обработки данных. Часть 1/3
Я сам изучал R в течение последних нескольких недель.
В своей статье я рассказываю о языке программирования R и его главных концепциях, которые пригодятся каждому...
Полиморфизм с интерфейсами в Golang
Интерфейсы в Golang работают в совершенно особенной манере в сравнении с интерфейсами на других языках серверного программирования. Прежде чем углубляться в тему, начнём с...
Принципы SOLID в React: так ли все с ними гладко?
Принципы SOLID принято описывать только в положительном свете. Поэтому многие нюансы часто упускаются из виду. Сегодня поговорим о том, применимы ли вообще принципы SOLID в React-приложении и какими ключевыми особенностями обладает каждый из них.
Проблема эйджизма в IT-сфере
Причины возникновения эйджизма в IT-сфере и способы его преодоления
Когда вы заканчиваете школу или университет и начинаете искать работу, вы можете начать волноваться, что отсутствие...
5 приемов Python, которые отличают профессионалов от новичков
Чем отличается senior- от junior-программиста? Ответить на этот вопрос поможет Advent of Code. Этот обучающий сервис для программистов отлично иллюстрирует различия в подходах к решению задач специалистами разного уровня.