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

Полный гайд по SCSS/SASS

Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и...

Нужно ли дизайнеру уметь писать код?

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

UX-текст - как он формирует продукт?

Сегодня UX-писательство окружает нас повсюду. Мы постоянно взаимодействуем с ним, вне зависимости от того, осознаем мы это или нет. Кнопки, всплывающие окна, уведомления, оповещения...

Как я самостоятельно освоила Tableau

Tableau - это высококлассное программное обеспечение для анализа и визуализации данных. Хотите изучить этот полезный продукт? Профессиональный аналитик данных поделится с вами опытом освоения Tableau с нуля.

Плюсы и минусы Deno

Краткий обзор достоинств и недостатков новой среды выполнения Deno, а также ее сравнение со всем известной и привычной средой Node.

Проектирование архитектуры ПО React: лучшие практики

Рассмотрим общепринятые принципы разработки архитектуры ПО React, которые доказали свою эффективность. Они касаются выборки данных, управления состоянием, стилизации, работы с компонентами, а также тестирования и архитектуры приложений.

React: основные ошибки мидл-разработчиков

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

Файл package-lock.json: полное руководство

Файл package.json - ключевой элемент баз кода для многих приложений, основанных на экосистеме Node.js. Это своего рода манифест проекта. Предлагаем подробный гайд по использованию этого файла и решению связанных с ним проблем.

Как уменьшить размер компонента React: 3 профессиональных приема

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

Эта информация навсегда изменит ваше отношение к коду JavaScript

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

Streamlit для создания интерактивных веб-приложений: начало

Веб-приложения — один из самых удобных способов представить результаты работы в сфере науки о данных. Но многих специалистов по данным, не имеющих какого-либо опыта...

10 лайфхаков JavaScript, которые сделают из вас профессионала

Опытные JavaScript-программисты владеют приемами, которые неизвестны новичкам. Познакомьтесь с 10 из них: они сделают код качественнее, а вас - более профессиональным программистом.

Краткое введение в функции высшего порядка в JavaScript

Функции высшего порядка Функция, принимающая в качестве аргументов другие функции или возвращающая другую функцию в качестве результата, называется функцией высшего порядка. С функциями в JavaScript вы можете: Хранить...

Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript

Улучшите качество кода JS/TS с помощью ESLint. Благодаря этому инструменту, код будет выполнен в едином стиле и без ошибок. Его будет легче просматривать и поддерживать, что благоприятно скажется не только на судьбе вашего проекта, но и на вашей карьере.

Пожалуйста, отложите TypeScript ненадолго

Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент. Но какова цена этой...

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

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

Добавление отношений в схему GraphQL

Отправная точка Строить мы будем на базовом сервере GraphQL. Код можно скачать здесь или с помощью: git clone --branch setup https://github.com/bjdixon/graphql-server.git При клонировании/загрузке нужно создать экземпляр MongoDB...

Как создать интересный онбординг и привлечь пользователей с первого взгляда

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

Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и...

Создаем прогрессивное веб-приложение с помощью Next.js и пытаемся достичь 100-процентной оценки от Google Lighthouse и Vercel Analytics. Проходим весь путь оптимизации проекта Next.js, который будет написан на TypeScript.

Создание UI-компонентов React на продвинутом уровне

Хотите создавать компоненты пользовательского интерфейса, как старший React-разработчик? Воспользуйтесь руководством по эффективному созданию компонента button. Усвоив его принципы, вы сможете разработать любой другой компонент без особых проблем.

Базовые команды при работе с узлами K8s

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

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

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

Автоматическое пакетирование в React 18

Предлагаем подробно ознакомиться с автоматической пакетной обработкой в обновленном React 18. Эта функция позволит существенно повысить производительность приложения.

Потоки Kafka: как обрабатывать CSV-файлы для выполнения вычислений

Обработаем большой файл с данными о погоде и рассчитаем результаты, которые потом можно будет переиспользовать в другом проекте.

Платформы Angular в деталях. Часть 1. Что такое платформы Angular?

Инфраструктура для разработки приложений Angular была задумана как платформенно-независимая технология (далее по тексту — фреймворк). Такой подход позволяет запускать приложения на Angular в разных средах: в...

Построение горизонтально масштабируемых stateful-приложений с помощью ASP.NET Core

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

Полное руководство по управлению JWT во фронтенд-клиентах (GraphQL)

JWT (JSON Web Token, произносится как 'jot' ) становится популярным способом управления аутентификацией. Эта статья ставит целью развенчать мифы о стандарте JWT, рассмотреть его...

Загрузка больших видео с помощью Node.js

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

Добро пожаловать в ад…зависимостей JavaScript

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

Создаём расширение для Chrome

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с...

Как с нуля создать проект на React, используя Webpack 4 и Babel

В статье будет рассмотрен процесс создания проекта на React при помощи инструментов Webpack 4 и Babel, а также будет рассмотрен альтернативный подход к начальной настройке, где будет обсуждены преимущества более глубокого понимания конфигурации и процесса работы инструментов для эффективного освоения React.

Что такое HTTP/3 и зачем он нужен?

При изучении интернета и стоящих за ним технологий вы можете встретить термин HTTP. HTTP или Hypertext Transfer Protocol (протокол передачи гипертекста) является столпом всемирной...

Увеличиваем производительность приложения React + Redux с библиотекой Reselect

Селекторы — это очень простой способ выбрать состояние из хранилища redux, которое содержит всю логику и данные приложения. Если вы создаёте приложение с помощью React и Redux,...

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

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

Планы на отпуск с Python и HERE Maps

Лето в самом разгаре, и вы наверняка уже готовы отправиться в путешествие. Эта статья как раз поможет его распланировать. Интернет пестрит туристическими путеводителями, рассказывающими о...

Flutter против React Native: правильный выбор может определить успех вашего проекта

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

Эти маленькие сниппеты кода изменили мир

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

AutoScraper и Flask: создание API для любого сайта менее чем за 5 минут

В этом руководстве мы создадим собственный поисковый API электронной коммерции с поддержкой как eBay, так и Etsy без использования каких-либо внешних API. С помощью AutoScraper и Flask мы можем достичь этой цели менее чем за 20 строк Python кода для каждого сайта.

Атомарный дизайн: структурирование приложений React

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

5 полезных функций JavaScript, которые знакомы не всем

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

Возможности автозаполнения для веб-разработчиков

Разберем понятия автозаполнения/автодополнения и узнаем, как браузеры автоматически заполняют стандартные поля, кредитные карты, адреса и пароли на примере Chrome.

Восемь быстрых советов по улучшению пользовательского интерфейса

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

Почему NestJS — лучший фреймворк Node.js для микросервисов

JavaScript является одним из самых популярных языков программирования, поэтому в качестве бэкенда часто выбирают Node.js. Сегодня поговорим о том, какой из фреймворков Node.js оптимален для микросервисов.

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

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

8 советов работы с JavaScript, которые повысят ценность вашего кода

Хотите, чтобы ваш код был понятен всем? Возьмите на вооружение 8 полезных советов, описанных в статье.

ANGULAR v7: подсказки командной строки, виртуальная прокрутка, перетаскивание и др.

Версия Angular 7.0.0 уже вышла! Это основной релиз, который затронул всю платформу, включая ядро, Angular Material, и командную строку с синхронизированными базовыми версиями. В...

API, WebSocket или WebHook: что выбрать?

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

Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter()

Говорят, что "дьявол кроется в деталях". Так почему бы не поискать его в недрах JavaScript? Совершите увлекательное путешествие в волшебное закулисье метода filter.

JavaScript - идеальный выбор при аналитической обработке данных

По поводу отказа от фото- и видеоаппаратуры в пользу мобильных телефонов, оснащенных камерами, фотограф и предприниматель Чейз Джарвис однажды пошутил: “Лучшая камера — это...

Оператор Spread и деструктуризация в JavaScript: практическое руководство

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

Sniper-CSS: как избавиться от неиспользуемых стилей

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

Движок JavaScript: что внутри

Введение Чтобы разобраться в том, как работает механизм обработки кода (иначе говоря, движок JavaScript), надо понять, что происходит при выполнении кода. Такие знания помогают программистам...

PHP: введение и настройка среды

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

Кто придет на замену JavaScript

Десять лет назад никто не догадывался о том, что JavaScript будет править миром. Другие платформы, такие как Java, Flash и Silverlight, также были сильными...

Факты о веб-сайтах в 2018 году (и почему токенизация стала отличной идеей для этой...

Новый способ применения технологии блокчейна. И переход от слов к действиям с проектом uKit AI. Существование современной всемирной паутины началось почти 30 лет назад с...

Основные языки веб-разработки

Ознакомьтесь с основными языками веб-разработки: HTML, CSS и JavaScript. Разобравшись в этих базовых технологиях, вы сможете сами создавать функциональные и визуально привлекательные сайты.

Как развернуть веб-приложение Streamlit в сети: три простых способа

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

Экспериментируем с пользовательскими функциями JavaScript на Trino

Как было бы здорово адаптировать Javascript к данным, а не приспосабливать данные к JavaScript. Что если создать простой коннектор Trino для выполнения произвольного Javascript на всей области данных? Действительно ли это хорошая идея? Выясним это вместе!

JavaScript-анализ: выявление и устранение уязвимостей в веб-приложениях

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

Как отследить событие закрытия браузера и вкладки с помощью JavaScript

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

Проектирование устойчивых API: постигаем искусство ограничения скорости

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

Официальный CLI GitHub

GitHub — самый известный провайдер Git хостинга долгие годы существовал, не имея официального инструмента CLI (интерфейс командной строки). Это весьма удивительно, учитывая, что сам GitHub является...

7 правил ESLint, рекомендуемых для проектов TypeScript/React

Хотите, чтобы на выполнение и проверку кода уходило меньше времени и сил? Ознакомьтесь с 7 правилами ESLint, рекомендуемыми для проектов TypeScript/React. Они существенно улучшат код и сэкономят ваше время.

Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры

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

4 типичные ошибки разработчиков Node.js

Растущее комьюнити Node.js - свидетельство надежности и эффективности этого инструмента. Однако не всем удается извлечь из него максимальную выгоду. Рассмотрим самые распространенные ошибки разработчиков Node.js.

Создание готового к производству приложения React с помощью Next.js и Dokku

Хотите создать и запустить живое приложение React с минимальным бюджетом и возможностью масштабировать его в будущем? Воспользуйтесь руководством опытного разработчика ПО, успешно реализовавшего эту задачу.

Как оформить поле ввода: советы и техники

Как быстро и легко разработать поле ввода? Ответим на этот и сопутствующие вопросы доступным языком.

Станут ли прогрессивные веб-приложения заменой нативным?

Когда Стив Джобс представил самый первый iPhone в 2007 году, он также высказал идею о том, что разработчики смогут создавать приложения для iPhone лишь...

10 концепций разработчика Laravel

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

4 главных тренда в веб-хостинге в этом году

Самый важный шаг сделан: вы вступили на тропу предпринимательства и открыли собственный бизнес, теперь вы сам себе начальник. Но подождите, кое-что вы все-таки забыли!...

PHP: массивы

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

Смертоносные интерфейсы

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

Как работает проверка доступности API в Swift

Мы постоянно применяем проверки на доступность API, чтобы обеспечить откаты ПО для пользователей, использующих старые версии iOS. А задавались ли вы вопросом, как эту...

TypeScript. Что, зачем и как?

Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот...

Возможности контроля в JavaScript: методы AbortSignal.timeout() и AbortSignal.any()

Представляем два малоизвестных, но очень полезных метода управления асинхронными задачами: AbortSignal.timeout() и AbortSignal.any(). Оба эти метода поддерживаются основными веб-браузерами и позволяют корректно прервать асинхронные операции.

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

Представляем вашему вниманию серию статей, посвященных визуализации и ее применению в современном IT-ландшафте. В первой части цикла расскажем, как создать динамичное и отзывчивое приложение с использованием React, Material UI, Tailwind CSS и Nivo.

Все, что вам нужно знать про Ivy, новый движок для Angular!

Около года назад команда Angular объявила на ng-conf (конференция по Angular), что она работает над Angular Ivy. Хотя он еще не на 100% готов...

Прощай, Ramda

Несмотря на свои сильные стороны, Ramda не всегда подходит для написания эффективного и понятного кода. Рассмотрим случаи, когда стоит придерживаться современного нативного JavaScript и Lodash.

Почему Lodash по-прежнему полезен?

С выпуском ES6 и более поздними версиями JavaScript появилось множество методов, расширяющих функциональность языка. Например, появились новые методы массивов и строк, а также такие...

3 способа улучшить управление состоянием в React

В React разработчики могут совершено свободно управлять состоянием внутри компонента. Существуют два типа компонентов: классовые и функциональные, которые были представлены в React v16. В классовых...

4 недооцененных API браузера

Познакомимся с 4 полезными API браузера, которые лучше всегда держать под рукой : Battery API, IndexedDB API, Clipboard API и Page Visibility API.

Анимация границ с помощью свойств CSS

Движущиеся красочные элементы всегда привлекают внимание пользователей сайтов. Научимся создавать интересные анимированные границы с помощью CSS.

JMeter-тестирование динамической нагрузки Restful API

Пошаговая инструкция ко всем этапам нагрузочного тестирования, начиная с установки JMeter и заканчивая получением отчёта в удобной форме.

Синхронизация Git-репозиториев в режиме реального времени

Работая с клиентами на таких платформах, как Github или Gitlab, мы в Gitstart часто сталкиваемся с необходимостью синхронизировать кодовые базы между удаленными репозиториями. По...

21 лайфхак для новичков в JavaScript

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

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