Полный гайд по 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-разработки.
Подробный разбор методов Ruby
Вы когда-нибудь задумывались о том, что происходит при написании кода на самом деле? Я много думаю об этом. И, будучи разработчиком Ruby, часто использую...
Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»
От веб-разработчика на собеседовании требуется продемонстрировать хорошие знания PHP и Javascript. Всего один простой вопрос помогает выявить, действительно ли разбирается человек в том инструментарии,...
Rust против JavaScript: повышение производительности на 66 % с помощью WebAssembly
Веб-воркеры и WebAssembly могут значительно повысить производительность приложения на JavaScript. Докажем это на практике, используя в качестве примера алгоритм Фибоначчи.
Как создать веб-приложение для преобразования речи в текст с Node.js
Предлагаем создать веб-приложение, которое преобразует аудиозаписи на разных языках в текст. Задача предполагает работу с моделью Whisper от OpenAI.
Реализация слайдера изображений и текста на React.js с вариантами оптимизации
Предлагаем возможность проверить свои знания и потренироваться на скорость в реализации слайдера изображений на React.js с разными вариантами оптимизации. Отсчет пошел!
Что значит this в JavaSсript?
Значение this — одна из самых запутанных составляющих JavaSсript. this может принимать различные значения в зависимости от того, где располагается.
В этой статье мы рассмотрим, где используется...
Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript
Показываем, как с легкостью создать механизм переключения на темную тему всего за пятьдесят две строчки кода.
5 проектов на React для начинающих
Представленные здесь примеры проектов на React станут хорошей школой и практическим пособием в процессе овладения основами этой библиотеки, позволяющей создавать впечатляющие фронтенд-интерфейсы.
Креативное программирование: методы и инструменты для JavaScript, Python и других языков
Креативное программирование
Задача этого вида программирования состоит в создании не функционального, а выразительного продукта. В этом процессе немаловажную роль играет эстетика, и именно поэтому он...
Что не так с новыми логотипами приложений Google
К этому моменту вы, скорее всего, уже видели новые логотипы приложений Google Workspace (ранее G Suite) для продуктивной работы, таких как Gmail, Google Drive...
Как создать бессерверное приложение с Netlify и JavaScript
Обучающее руководство для новичков по созданию бессерверных функций с помощью Netlify: настройка проекта, создание приложения и развертывание API.
Знакомство с ReactJS на базовом уровне
Что такое ReactJS?
ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет?
ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются...
19 лучших инструментов прототипирования для дизайнеров UX/UI
Прототипирование выполняет роль чертежа и позволяет разработчикам просмотреть полный обзор сайта или приложения до начала его создания.
Это необходимый шаг в дизайнерском процессе, поскольку он...
Самые популярные фреймворки React
React-фреймворки значительно упрощают жизнь разработчика. Разберем лучшие их образцы и посмотрим, сможем ли мы выбрать оптимальный вариант.
Возможности и перспективы WebAssembly
WebAssembly - прорывная разработка нашего времени - обладает огромным потенциалом. Однако это в основном академический проект. Не пора ли вывести WebAssembly в свет?
3 секретных оружия в арсенале Python
Я уже пишу на Python более 5 лет. Примечательно, что при этом мой арсенал инструментов с течением времени не увеличивался, а наоборот уменьшался. Многие...
10 простых сниппетов Python для веб-разработки, автоматизации и обработки данных
Используйте эти модули и сниппеты в программировании на Python - это позволит автоматизировать сложные задачи и оформлять код так, как вам нравится.
Возможности C++, о которых должен знать каждый разработчик
С момента своего появления C++ очень хорошо развился как язык программирования.
Конечно, это не произошло моментально. Когда-то этому языку не доставало динамичности. В то время...
Основы дизайна, которые должен знать каждый креативщик
Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку...
Интуитивная основа обучения с подкреплением
В этом видео от автора показан обученный агент, который пытается избежать встречного движения, перестраиваясь в другой ряд и меняя скорость. Обучение проводилось с помощью...