Web-разработка

Эскизы - почему они так необходимы в работе дизайнера?

Я всегда считала, что эскизы и наброски незаменимы во всей дизайнерской деятельности — от создания иллюстраций и анимации до работы над интерфейсами. К тому...

Создание компонентной дизайн-системы UI

Создание и обслуживание согласованного UI и UX (опыт взаимодействия пользователя с приложением) во всех частях вашего продукта помогает пользователям интуитивно перемещаться и успешно взаимодействовать...

Эффективное ведение журнала для приложений Spring Boot

Предусмотренные в Spring Boot стандартные методы ведения журнала далеко не всегда эффективны. Рассмотрим практическую реализацию эффективных вариантов регистрации ошибок и служебных данных в веб-приложениях.

3 простых шага для написания сложных компонентов

Давайте углубимся в мир чистого React-кода со сложными компонентами. После реализации своего первого сложного компонента в React я стал буквально зависим от этого шаблона. Как...

Как использовать WebGL для интерактивной 3D-графики

Расширьте возможности веб-приложения за счет интерактивной 3D-графики. Предлагаем пошаговый гайд по 3D-моделированию с использованием WebGL (API JavaScript) и библиотеки Three.js.

Нерассказанная история: исключение Stale Element Reference в Selenium

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

Обновления в Nuxt JS 2.8.0

Nuxt JS Nuxt — это фреймворк для создания одностраничных, статических и универсальных приложений Vue. С его помощью можно с легкостью создавать приложения на стороне сервера, поскольку в...

Проект инженерии данных с DAG Airflow «от и до». Часть 2

Проверим корректность данных, отправим письмо и сообщение в Slack с информацией об адресе почты и пароле. Объединим все части проекта, создадим и запустим DAG Airflow со всеми задачами.

Топ-10 заданий по написанию кода для собеседования по React.js в 2024 году

Эти 10 заданий по созданию кода с примерами решений помогут закрепить основные теоретические понятия React.js и прокачать практические навыки. Изучение лучших сценариев написания кода — верный путь к успешному прохождению собеседования.

Ember.js или Vue.js: какой фреймворк выбрать?

Изначально JavaScript создавался для работы с веб-приложениями, однако теперь он используется для создания мобильных приложений. Фреймворки на основе JavaScript популярны среди разработчиков, поскольку они...

11 уникальных однострочников JavaScript, достойных восхищения

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

21 рекомендация по HTML

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

Новые функции в TypeScript

Введение TypeScript — это сильно типизированный, объектно-ориентированный и компилируемый open-source язык, разработанный и поддерживаемый компанией Microsoft. Он был создан в целях привнесения статических типов в современный JavaScript....

React Native vs Flutter

Некоторые инструменты так похожи друг на друга, что порой очень сложно сделать выбор. Разница, как всегда, кроется в деталях. В данной статье разберем, в чем разница между React Native и Flutter, и вы сможете выбрать оптимальное решение для вашего проекта.

Django-приложение для ведения личного дневника

Научимся работать с Django: рассмотрим все этапы создания личного дневника с последующим добавлением, обновлением и удалением записей.

Прощай, Adobe

Впервые я познакомилась с программами от компании Adobe примерно десять лет назад, когда, будучи подростком, открыла для себя Photoshop и магические свойства Clone Tool. Затем...

Три функции JavaScript для освоения метода Reduce

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

Движки JavaScript. Часть 2: генерация кода и базовые оптимизации

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

Изучите эти основы JavaScript и станьте лучшим разработчиком

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

Комплексная разработка веб-приложений с помощью React и Node.js

Хотите создавать быстрые сайты? Предлагаем эффективный способ комплексной разработки с помощью "волшебного тандема" React и Node.js.

Пять причин поместить функции в класс

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

Создаем функции поиска и фильтрации в Ruby on Rails

Ruby on Rails замечательно подходит для создания мощного и гибкого бэкенда. Однако из-за популярности и гибкости JavaScript, Ruby используется для фронтэнда не так часто....

Изучаем замыкания в JavaScript

Это практическое руководство по работе с замыканиями в JavaScript Замыкания — это базовая концепция JavaScript, которая сбивает с толку многих новичков, тем не менее её должен знать...

Telegram-бот с помощью таблицы Google

Для создания собственного Telegram-бота потребуется минимум программирования. На самом деле вам даже не нужно иметь редактор кода, чтобы начать. К концу этого поста вы...

Как разработать систему для 100 миллионов пользователей: руководство для начинающих

Начнем с азов Предлагаю начать с разработки базового приложения с несколькими пользователями. Развернуть всю систему на одном сервере проще простого. Именно с этого начинает большинство разработчиков. Сайт...

Как определить и протестировать SLO

SLO - уровень удовлетворенности пользователей производительностью сервиса. Предлагаем подробное руководство по определению и тестированию SLO для REST API с помощью Grafana Labs K6.

Хроники нового текстового редактора - от замысла до реализации

Стандартный Apple Notes, более продвинутый Google Docs, Microsoft Word и Medium — всё это редакторы, которые позволяют фиксировать наши важные мысли и информацию, тем самым помогая...

5 правил ESLint для применения новейших возможностей Angular

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

7 лучших библиотек для создания эффективных приложений ReactJS

Библиотека ReactJS выделяется своей производительностью. Но теперь у нас появилась возможность еще больше ее усовершенствовать. Сообщество пользователей React создало несколько дополнительных весьма эффективных библиотек. Рассмотрим...

Как создать планировщик по управлению недвижимостью с помощью Bryntum и ванильного JavaScript

Разработка приложения-планировщика - интересное занятие. Мало кто знает, что такой продукт можно создать и с помощью ванильного JavaScript. Сегодня посмотрим, как сконструировать планировщик по управлению недвижимостью.

Как тестировать компоненты React

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

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

Допустим, вы разработчик и на одном из ваших проектов используете Git. Вы хотите поделиться сделанными вами изменениями с другими пользователями, но не знаете, как....

Связь между микро-фронтендами

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

Что делает сайты медленнее?

Аналитики CatchJS отрендерили 1 миллион самых популярных сайтов. Они отследили разнообразные метрики производительности, учли каждую ошибку и отметили каждый запрошенный URL. Результат составляет, вероятно,...

Входящий веб-перехватчик в MS Teams

Microsoft Teams с нами уже больше четырёх лет. Этот инструмент призван заменить программу-клиент «Skype для бизнеса» и был разработан в Microsoft как конкурент других...

Создание компонента Timer с React и Bit

Рассмотрим пример создания компонента countdown timer в React с использованием Bit. В результате компоненты будут выглядеть следующим образом. Помимо этого, мы научимся обмениваться компонентами и использовать...

Топ-10 бэкенд-фреймворков для веб-разработки в 2022 году

Предлагаем познакомиться с лучшими бэкенд-фреймворками для веб-разработки на Java, Ruby, Python, JavaScript, PHP, Scala и Golang на 2022 год.

Python Django: контактная форма с автоматической отправкой Email

Адрес контактной электронной почты часто указан в самом нижнем колонтитуле на сайте. Пользователь должен не только отыскать адрес электронной почты, но еще и самостоятельно...

7 методов оптимизации производительности React

Производительность - важнейший аспект веб-приложения. Однако одностраничные приложения React (SPA) известны плохой производительностью. Рассмотрим 7 методов, которые помогут это исправить и обеспечить беспроблемный пользовательский опыт.

Совместное использование компонентов React с Webpack 5

Поработаем с двумя приложениями и научимся совместно использовать компоненты React между ними. А поможет нам в этом важном деле плагин Webpack 5 Module Federation.

Что такое React.memo и как он работает

Хотите повысить производительность React-приложений? Воспользуйтесь вызовом компонента React.memo. В результате мемоизации React будет использовать результат последнего рендера, избегая повторного рендеринга.

API Chrome: 7 новинок

1. Web Bundles Этот API предоставляет возможность объединения веб-сайта в один файл. Более того, этим файлом можно поделиться через любое средство (Bluetooth или Wi-Fi Direct),...

Angular: наведение мостов между HttpClient и Signals

В последнее время экосистема Angular претерпела серьезные изменения. Разберемся с тем, как взаимодействовать с сервисами на базе HttpClient при подключении их к компонентам на основе сигналов, а также с тем, какие подводные камни могут таить промисы.

OutSystems: взаимодействие в реальном времени

Рассмотрим три решения проблемы клиент-серверного взаимодействия. Подготовим для приложения систему обмена сообщениями, реализацию на сервере и клиенте: определим схему, создадим источник данных, подключим их распознавателями и задействуем коннектор AWS AppSync с соединениями по веб-сокетам.

Лучший способ для привязки обработчиков событий в React

Благодаря JavaScript привязка обработчиков событий в React может быть достаточно сложным занятием. Для тех, кто знаком с историей Perl или Python, аббревиатуры TMTOWTDI (There’s...

Глубокое погружение в замыкания JavaScript

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

Ключевое слово this и контекст в JavaScript

К освоению JavaScript лежит долгий путь, на котором вам может встретиться такое выражение, как this. Первый раз я встретил его в процессе работы с...

Делаем Node.js быстрым: инструменты, техники и советы для создания эффективных серверов на Node.js Часть...

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

Создание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js

В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью Vue.js, Node.js, Express и SOCKET.IO. Вот скриншот того, что должно получиться: PS:...

Как создать трекер расходов с SheetJS

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

Тестирование производительности приложения в браузере Chrome

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

Веб-сервер с нуля в TypeScript и Node

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

Автоматизация создания стикеров с помощью веб-скрейпинга и обработки изображений в Python

Познакомьтесь с автоматизированным способом создания стикеров для мессенджеров. Краткая пошаговая инструкция поможет вам быстро сгенерировать стикерпак в Telegram.

5 библиотек JavaScript, которые повысят вашу эффективность

Представляем 5 полезных, но малоизвестных библиотек JavaScript! Они помогут сэкономить силы и время при форматировании дат, обработке URL-параметров и отладке веб-страниц в мобильном терминале.

Найти и обезвредить: утечки памяти в Node.js

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

Frontend Masters: принципы SOLID в React/React Native

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

Proxy - сокровище JavaScript

Что такое прокси? Что именно он делает? Перед тем, как разобраться, посмотрим на пример из реальной жизни. У каждого из нас есть множество ежедневных...

React.js за 5 минут

В этом туториале вы получите базовое представление о React.js путём создания очень простого приложения. Установка Так как вы только начинаете работать с React, то я бы посоветовал вам...

Декораторы в JavaScript

Декораторы - это объекты, которые используются для динамического добавления дополнительной функциональности к другому объекту без изменения реализации этого объекта. Пример использования: @filterMales // Это декоратор class MyClass...

Топ-10 инструментов, которые понадобятся каждому React-разработчику в 2024 году

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

Как инженеру-программисту Reactjs перейти на Swift и SwiftUI

Узнаем, как плавно перейти с ReactJS на Swift и SwiftUI. Для этого сопоставим их наиболее распространенные шаблоны проектирования.

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2

В этой части серии статей создадим персонализированную цветовую схему и глобальные стили приложения. Будем использовать Tailwind CSS в качестве фреймворка для работы со стилями веб-приложения.

6 проверенных методов повышения безопасности Node.js

Беспокоитесь о том, как защитить приложения от рисков вредоносных атак? Предлагаем ознакомиться с шестью надежными способами повышения безопасности Node.js.

Как добавить аутентификацию Supabase к приложению на Vue

Supabase - достаточно популярный аналог Firebase, который становится все более востребованным. Разберем по шагам настройку аутентификации в веб-приложении c использованием этого серверного инструмента.

3 альтернативы инструкции Switch в Typescript

Если вас смущает громоздкость инструкции switch, то стоит познакомиться с 3 альтернативными вариантами, доступными в TypeScript: объектные литералы, полиморфизм и обобщения.

Рендеринг на стороне сервера против статической генерации сайта

В техническом пространстве разбрасывается много модных слов. Два из них — статическая генерация сайтов (SSG) и рендеринг на стороне сервера (SSR). В этой статье я...

Пишем фронтенд-компоненты на ванильном JS

В наши дни вокруг фронтенд-фреймворков (React, Angular, Vue) много шумихи. Поразмышляем, какую проблему они решают и для чего могут быть полезны. В качестве эксперимента создадим...

Прогрессивные веб-приложения для начинающих

Концепция прогрессивных веб-приложений набирает популярность, однако многие не знакомы с их особенностями. Рассказываем, что такое PWA, из каких компонентов оно состоит, а также, как создать его самостоятельно

Стратегии рендеринга, которые должен знать каждый React-разработчик

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

Как создать цифровые часы с помощью Moment.js

Предлагаем руководство по созданию часов в браузере с использованием только Vanilla JavaScript и библиотеки Moment.js.

Подробный разбор методов Ruby

Вы когда-нибудь задумывались о том, что происходит при написании кода на самом деле? Я много думаю об этом. И, будучи разработчиком Ruby, часто использую...

Безопасность наглядно: CORS

Каждый разработчик периодически сталкивается с огромной красной строкой в консоли — Access to fetched has been blocked by CORS policy. Да, это здорово расстраивает. И хотя...

Предложение по стандартизации сигналов для TC39

Энтузиасты JavaScript-сообщества разработали предложение по стандартизации сигналов для рассмотрения в TC39. Каждый из вас может не только ознакомиться с этим предложением, но и внести свой вклад в стандарт сигналов, тем самым расширив возможности JS-разработки.

Все что касается web-разработки: Front end, Back end, Full stack; HTML, CSS, JavaScript, фреймворки, технологии, безопасность и многое другое!