Ключевые понятия JavaScript, которые должен знать каждый разработчик — часть 1
Предлагаем 32 ключевых понятия JavaScript, собранные из 50+ руководств. Они помогут усвоить премудрости JavaScript, чтобы создавать оптимизированный код и избегать ошибок. В этой части будут раскрыты первые 11 понятий, включая стек вызовов, примитивные типы, типы-значения, ссылочные типы, системы типизации, операторы равенства и др.
20 скрытых особенностей JavaScript
Представленные ниже 20 хитростей JavaScript были указаны пользователями Stack Overflow.
1. Работа с аргументами функций
Вам не нужно определять параметры для функции — можете просто использовать...
Супербыстрый веб-фреймворк Astro: подробный обзор
Обучающее руководство по работе с веб-фреймворком Astro, предназначенным для создания быстрых сайтов с большим количеством контента. Рассмотрим характеристики, установку, запуск Astro и разберем составляющие его исходного каталога: компоненты, макеты, страницы и директивы.
Использование Angular Elements с расширением Chrome
Познакомьтесь с Angular Elements
Angular Elements все еще широко не используется, хотя является мощным инструментом для создания независимых и автономных компонентов. Его можно использовать на любом...
PurePWA — радикальный поворот в веб-разработке
Все еще находитесь в плену у выбранного раз и навсегда фреймворка? Пересмотрите свой подход и почувствуйте первозданную силу чистых веб-стандартов.
Нужны ли нам веб-компоненты?
Возможности веб-компонентов, в частности повторно используемый код, значительно упрощают веб-разработку. Но могут ли они полностью вытеснить другие технологии, такие как React и Vue? Глубокий обзор веб-компонентов позволит честно ответить на этот вопрос.
Топ-10 инструментов, которые понадобятся каждому React-разработчику в 2024 году
Эти 10 высокоэффективных инструментов помогут сориентироваться в постоянно расширяющейся экосистеме React. Узнайте об их назначении и преимуществах, чтобы упростить процесс разработки и повысить производительность приложений.
Пять шаблонов проектирования, которые необходимо знать каждому разработчику
Сложность процесса разработки ПО можно контролировать, только отслеживая с самого начала. Поэтому перед стартом разработки необходим этап проектирования.
Как архитектор, вы проектируете в настоящем, с...
Создание надежной библиотеки JavaScript: пошаговое руководство
Освоим процесс создания и сопровождения собственной, хорошо документированной библиотеки JS, которую легко использовать и развивать. Сделаем библиотеку служебных функций для упрощения работы с массивами.
Рандомизатор на чистом CSS
Каждый раз когда мы нажимаем на одну из игральных карт, нам будет выпадать новая: иногда король червей, иногда пиковый туз, иногда бубновая девятка — ...
8 пунктов по стилю React + TypeScript
Ценность этих рекомендаций в их практическом значении. Добавьте их в собственное руководство по стилю React + TypeScript, и ваш код станет чище и понятнее.
15 расширений VSCode, необходимых программистам в 2021 году
Почему VSCode столь популярен?
Visual Studio Code быстро завоевал популярность среди разработчиков. Он оказался наиболее распространенной средой разработки по результатам опроса Stack Overflow 2019 года....
Потоки и буферы в Node.js
Для управления потоковыми данными наподобие видео или большого файла в Node.js реализован отдельный потоковый модуль.
В текущей статье мы сконцентрируемся на некоторых принципах его функционирования.
Разделы...
Проект инженерии данных с DAG Airflow «от и до». Часть 1
В реальном проекте валидации электронной почты проиллюстрируем потоковую передачу данных с отправителем и получением сообщений в теме Kafka для Cassandra и MongoDB. Наличие почты и пароля определим с помощью получателя и проверки данных.
Работа с HTML и CSS: 10 полезных приемов для дизайнеров
Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда.
Эти...
Как разделить монолитное приложение на микрофронтенды
Посмотрим, как разбить большое приложение на более мелкие и независимые компоненты. Это улучшает масштабируемость и гибкость приложения, а также делает более удобным сотрудничество между командами.
Прощай, Ramda
Несмотря на свои сильные стороны, Ramda не всегда подходит для написания эффективного и понятного кода. Рассмотрим случаи, когда стоит придерживаться современного нативного JavaScript и Lodash.
Балансировка нагрузки и последовательное хеширование
Рассмотрим, как работает хеширование запросов при наличии в системе двух и более серверов и как его можно усовершенствовать для балансировки нагрузки.
8 советов, как стать лучше во фронтенд-разработке
Должен ли я планировать свой проект или лучше сразу погрузиться в процесс разработки? Стоит ли мне внедрить вот этот плагин или вон ту библиотеку?...
Платформы Angular в деталях. Часть 2. Процесс начальной загрузки приложения
Часть 1, Часть 2
Фреймворк Angular был задуман платформенно-независимым. Такой подход позволяет запускать Angular-приложения в разных средах: в браузере, сервере, веб-воркере и даже на мобильных...
Комплексное руководство по Node.js для разработчиков всех уровней
Создание качественных приложений на Node.js - отдельный вид искусства. В этой статье поговорим о распространенных практиках архитектуры и написании кода, а также дадим полезные советы по обеспечению производительности и безопасности приложений.
Как выглядит нескучный модульный лендинг React
Рассмотрим красивый шаблон лендинга с качественным кодом и улучшенной доступностью. Разберемся, что делает его структурированным, самодокументируемым и легко настраиваемым.
8 мощных пакетов NPM для любого веб-разработчика
NPM (Node Package Manager) — это менеджер пакетов Node.js. Он предоставляет разработчикам широкий ассортимент полезных библиотек и инструментов.
С помощью этого репозитория процесс разработки веб-проекта,...
Rust как часть микросервисной архитектуры
Как включить Rust в приложение и использовать преимущества дифференцированной масштабируемости? Реализуем и развертываем в докере 3 микросервиса. Внутри - весь код и ссылка на репозиторий.
10 API консольных утилит Chrome
1. monitor
Используется для мониторинга функции:
function traceFunc (arg) { }
monitor(traceFunc)
Функция traceFunc передается в качестве аргумента в monitor. Теперь при каждом вызове traceFunc на мониторе будет...
7 правил ESLint, рекомендуемых для проектов TypeScript/React
Хотите, чтобы на выполнение и проверку кода уходило меньше времени и сил? Ознакомьтесь с 7 правилами ESLint, рекомендуемыми для проектов TypeScript/React. Они существенно улучшат код и сэкономят ваше время.
WebAssembly с Go: вывод веб-приложений на новый уровень
Развернем интеграцию WebAssembly с Go в браузерах, настроим среду Go, преобразуем код Go в WebAssembly и выполним его в веб-контексте. В итоге получим интерактивную платформу с конкретными, мощными возможностями.
Реализация паттерна доступа к данным при работе с Drizzle
Поговорим о том, почему подход, основанный на использовании данных, является секретным оружием успешных бэкенд-проектов. Овладеть им поможет Drizzle - система, которая упрощает и ускоряет моделирование данных, позволяя минимизировать ошибки.
Создание кастомного навигационного представления в SwiftUI
Зададим собственное навигационное представление с помощью двух generic-типов. Первый тип — Content, который применяется для передачи представлений внутри кастомного навигационного представления. Второй тип — ...
Пожалуйста, отложите TypeScript ненадолго
Сперва позвольте уточнить: типизированный JavaScript — это фантастика. Я использовал Flow и продолжу использовать TypeScript в будущем, ведь это мощнейший быстро растущий инструмент.
Но какова цена этой...
Основные принципы темного UI-дизайна
Сегодня темное оформление UI-дизайна встречается повсюду — от мобильных экранов до широкомасштабных телевизоров. Сила, роскошь и элегантность — это то, что выражает темное оформление....
Знакомство с промисами в JavaScript
Если вы не совсем в курсе современных тенденций JavaScript, то, по крайней мере, слышали о промисах ранее, но не знаете, где и как их...
На что способен Selenium в паре с JavaScript?
Что получится, если совместить Selenium WebDriver и JavaScript? Ответ: море преимуществ в процессе веб-разработки, повышенная эффективность и качественный результат.
Создание RESTful API-интерфейсов на C++
Разберем ключевые компоненты RESTful API и преимущества C++ на примере приложения с базовыми CRUD-операциями. Научимся настройке сервера, обработке HTTP-запросов и парсингу JSON при помощи Boost.Beast и nlohmann/json.
Эмпирический анализ схем GraphQL. Часть 1
Часть 1, Часть 2
В статье приводится краткое изложение научно-исследовательской работы An Empirical Study of GraphQL Schemas, представленной на конференции ICSOC 2019. Большинство авторов работы...
JWT-аутентификация в Spring Boot Webflux
Spring Security всегда снижал мой интерес к собственным проектам. Как только возникала необходимость выяснить как аутентифицировать пользователей, я сразу начинал испытывать негодование или скуку...
Интеграция Rust в Next.js: практическое руководство для разработчика
Как добавить Rust в свой инструментарий и проекты? Рассмотрим различные варианты развертывания кода Rust на Vercel с написанием конечных точек API, общие закономерности разработки API, проблемы применения Rust в продакшене. Весь код и примеры ― в шаблоне.
Прекращайте пользоваться Git CLI
Переходите на Git GUI, узнавайте больше о Git и забудьте о случайных отправках в master
Если вы разработчик, то, должно быть, уже пользуетесь Git. Если нет,...
Как добавить простую функцию поиска в приложение на React без сервера
Функция поиска — одна из самых важных особенностей программного приложения. Поисковые сайты типа Google и DuckDuckGo помогают миллионам пользователей бороздить просторы Интернета и за...
Как реализовать простой контроль версий с помощью JavaScript, чтобы лучше разобраться в Git
Git - эффективная система, предназначенная для контроля версий и отслеживания истории исходного кода. Изучим внутреннее устройство Git, реализуя его упрощенную версию.
Нужно ли дизайнеру уметь писать код?
Что важнее для дизайнера - писать код или уметь работать с ним? А может, достаточно овладеть навыками командной работы? Порассуждаем на эту тему.
API Chrome: 7 новинок
1. Web Bundles
Этот API предоставляет возможность объединения веб-сайта в один файл. Более того, этим файлом можно поделиться через любое средство (Bluetooth или Wi-Fi Direct),...
Создание базовой чат-системы с использованием node.js и socket.io
Пошаговое руководство поможет создать простейшее чат-приложение с помощью серверной платформы node.js и библиотеки socket.io. Чат-бот сможет отвечать на заданные вопросы и послужит для заказа билетов, еды и прочих продуктов или услуг.
9 проектов, которые помогут стать фронтенд-мастером в 2023 году
Какие технологии, фреймворки и генераторы статических сайтов востребованы во фронтенд-разработке в 2023 году? Выбрать наиболее подходящие помогут эти 9 проектов.
Отображение нативных всплывающих окон с помощью API уведомлений JavaScript
API уведомлений позволяет отображать всплывающие окна как нативные уведомления на рабочем столе или на экране мобильного телефона. Функциональность варьируется от платформы к платформе, но,...
Полное руководство по “this” в JavaScript
"Чему равно this в данном случае?" - этот вопрос часто сбивает с толку новичков в JavaScript-программировании. Предлагаем четкий алгоритм, который поможет быстро определить значение ключевого слова this.
Применение пустого пространства в UI-дизайне
Хороший UI-дизайн — это продуманное применение пустого пространства во всех масштабах интерфейса: от элемента до страницы. Если пустое пространство правильно использовано, в результате получается...
12 UI Grid-систем и библиотек для React актуальных в 2019 году
Я провёл исследование и сделал обзор на 12 библиотек и компонентов для React (без рейтинга). Часть из них автономные, а некоторые входят в состав...
5 практик JavaScript под пристальным взглядом профи
Чем чище код, тем лучше! Руководствуясь такой логикой, автор детально анализирует несколько практик в JavaScript, обращая внимание программистов на связанные с ними нюансы.
Как повысить производительность бэкенд-приложений
Предлагаем 10 рекомендаций по повышению производительности бэкенд-приложений с помощью таких техник, как кэширование, объединение запросов, многопоточность, сжатие и прочих.
Как уменьшить размер компонента React: 3 профессиональных приема
Одними из основополагающих элементов в React являются компоненты. Поэтому для разработчика очень важна оптимизация их размера. Рассмотрим, как это можно сделать.
Создание музыкального бота с помощью Discord.js
API discord предоставляет инструмент для создания и использования ботов. Рассмотрим пример создания базового музыкального бота и добавления его на сервер. Бот сможет проигрывать, пропускать...
Подробно о перечислениях в Typescript
Углубимся в тему перечислений в TypeScript и рассмотрим их в рабочей среде React: виды, особенности, случаи применения.
Создаем расширение Chrome на Mint
В последней статье я рассказывал о том, почему мне понравилось использовать Mint для создании небольшого веб-приложения, а именно расширения Chrome.
Разработка расширения с помощью Mint,...
Эскизы - почему они так необходимы в работе дизайнера?
Я всегда считала, что эскизы и наброски незаменимы во всей дизайнерской деятельности — от создания иллюстраций и анимации до работы над интерфейсами. К тому...
Как создать библиотеку компонентов для совместного использования
Пример
Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот репозиторий также доступен как пакет на NPM.
С...
Как создать простой API с помощью Express и MongoDB
Создадим API с помощью Express, а для хранения данных будем использовать MongoDB. Чтобы следовать руководству, рекомендуется иметь базовые знания о JavaScript, MongoDB и Node.JS.
Сайты с модальными диалоговыми окнами без JavaScript
Сайты, которые используют JavaScript для большей части таких элементов, как модальные диалоговые окна, выпадающее меню, мобильные меню-«гамбургеры», зачастую демонстрируют полный провал в плане удобства...
Тест-драйв Solara для разработки веб-приложений на Python
Протестируем возможности фреймворка Solara в процессе создания приложения-планировщика на Python. Выявим его достоинства и недостатки и сравним со Streamlit.
Темная сторона Javascript: избегайте данных трех функций
Оператор Void
Вы, вероятно, уже сталкивались с этим оператором. Раньше при наличии ссылки, запускающей функцию JavaScript, нужно было добавлять href=”javascript:void(0)”, чтобы действие по умолчанию не...
Введение: 4 новейших операции JavaScript
Технический комитет 39 (TC39) — это группа экспертов по JavaScript, которые работают над стандартизацией ECMAScript.
Рабочий процесс TC39 состоит из нескольких этапов:
Этап 0 (Идея): прием...
Новые API браузера, необходимые каждому веб-разработчику
Современные API браузера повышают производительность разработчиков и даже способны заменить популярные библиотеки для фронтенд-компонентов. Используйте их для создания удобных веб-приложений.
Шаблон Медиатор в JavaScript
Поскольку медиатор изменяет поведение программы и отвечает за координацию взаимодействий, он считается поведенческим шаблоном. По мере роста приложения возрастает и потребность в медиаторе из-за...
Создание предметно-ориентированных микросервисов
Определение
Приставка “микро” в термине микросервисы является не только показателем размера сервиса. При переходе на архитектуру микросервисов команды стремятся повысить свою подвижность, а именно получить...
Изучаем WebAssembly с помощью Rust
Внимание: с этой статьёй вы не освоите Rust, зато сможете быстро разобраться и приступить к работе с WASM, используя замечательный инструментарий wasm-pack и интуитивно...
Как написать тест-раннер в 80 строк кода на JavaScript/TypeScript
Сделаем простой тест-раннер на nodejs с включением всех основных требований и почти без зависимостей. Разберем также самую интересную часть реализации - API на JavaScript из SWC.
Построение архитектуры данных реального времени с помощью Apache Kafka, Flink и Druid
Обработка пакетных данных в режиме реального времени - одна из наиболее сложных задач. Каждый этап, от доставки и обработки данных до их анализа, занимает определенное время. К счастью, для устранения этих задержек есть такие инструменты, как Apache Kafka, Flink и Druid.
Как работает Supabase — альтернатива облачной платформе Firebase
Supabase - инструмент с открытым исходным кодом, который не стоит игнорировать. Он не только доступнее и надежнее, чем Firebase, но и обладает впечатляющим спектром возможностей.
Отзывчивость – это очень просто с CSS-переменными
Если вдруг до этого вы ни разу не слышали о CSS-переменных, то поясним, что это новая функция CSS, благодаря которой в таблице стилей вы...
Обзор JavaScript на основе диалога с ChatGPT
Предлагаем вам обзор JavaScript, составленный по материалам интервью с ChatGPT. ИИ-модель продемонстрировала свои уникальные возможности, предоставив развернутые естественные ответы на 12 непростых вопросов.
JavaScript async/await: что хорошего, в чём опасность и как применять?
Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...
Как читать и понимать документацию API
Если, получив совет “почитать документацию API”, вы так и сделали, но так толком и не поняли, что в ней к чему, то эта статья...
Как создать Chrome-расширение для приложения с прогнозом погоды
Хотите создать простое веб-приложение, чтобы быстро узнавать прогноз погоды? Воспользуйтесь доступным руководством по разработке Chrome-расширения для приложения с прогнозом погоды (с полным исходным кодом).
Обзор функциональностей CSS, которые появились в 2022 году
Познакомимся с новыми функциональностями CSS 2022 года. Они отражают современные тенденции в развитии языка и нацелены на улучшение стилизации веб-страниц.
Полное руководство по управлению JWT во фронтенд-клиентах (GraphQL)
JWT (JSON Web Token, произносится как 'jot' ) становится популярным способом управления аутентификацией. Эта статья ставит целью развенчать мифы о стандарте JWT, рассмотреть его...
Руководство по применению паттерна Event Bus в архитектуре React
Подробно разберем паттерн проектирования Event Bus, попрактикуемся в создании и задействуем его в React.
Интуитивно понятное объяснение конструкции Async/await в JavaScript
Как избежать "ада обратных вызовов"? Всегда ли полезны промисы? В чем сила синтаксической конструкции Async/await? Ответим на эти вопросы и научимся проектировать мощные асинхронные конвейеры для эффективной обработки данных.
Погружение в unserialize(): больше, чем RCE
Обход аутентификации и внедрение SQL-кода через unserialize() в PHP
Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...
Изучаем замыкания в JavaScript
Это практическое руководство по работе с замыканиями в JavaScript
Замыкания — это базовая концепция JavaScript, которая сбивает с толку многих новичков, тем не менее её должен знать...
Взгляд на RedwoodJS
Обзор веб-фреймворка Redwood: Rails в мире React, авторы которого верят, что удобство начинается со стандартизации. Что из себя представляет этот фреймворк? Читайте ответы ниже.
6 лучших JS-библиотек для визуализации данных и создания отчетов
Веб-инструменты для отчетов используются для представления, создания и изменения отчетов с помощью веб-интерфейса — веб-браузера. Эти инструменты могут быть встроены в сторонние приложения или...
Установка Next.js с использованием клиентского сервера Express и TypeScript
В этом посте я проведу вас по пути создания приложения Next.js, обслуживаемого клиентским сервером Express c применением фреймворка Typescript. Полную версию проекта можно увидеть...
Создание многопользовательской игры с использованием Socket.io при помощи NodeJS и React
Кратко знакомимся с Socket.io, а затем пошагово рассматриваем создание проекта, начиная с архитектуры сервера и структуры каталогов, заканчивая настройкой каналов и подключений.
Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript
Показываем, как с легкостью создать механизм переключения на темную тему всего за пятьдесят две строчки кода.
React Single Page Application и React-Router для начинающих
Ваше первое React SPA с нуля: всё, что нужно знать про хуки UseParams, UseLocation и UseHistory, про маршрутизацию и панель навигации
6 проверенных методов повышения безопасности Node.js
Беспокоитесь о том, как защитить приложения от рисков вредоносных атак? Предлагаем ознакомиться с шестью надежными способами повышения безопасности Node.js.
Хуки Mongoose: все, что нужно знать
Узнайте, какими бывают типы хуков Mongoose, в чем преимущества их использования и каковы они в действии. В качестве бонуса получите ценные рекомендации по применению хуков, которые помогут раскрыть весь потенциал приложений, управляемых данными.
Топ-5 способов стилизации React-приложений в 2024 году
Использование библиотек для стилизации React-приложения может сэкономить много времени. Изучите возможности лучших из них: StyleX, Styled Components, Sass, Tailwind и Emotion. Алгоритмы реализации и демо-версии каждой библиотеки значительно облегчат работу.
Архитектура ПО: разница между архитектурой и проектированием
Многие не знают, в чем состоит разница между архитектурой и проектированием приложения. Даже сами разработчики зачастую не могут разобрать строку кода и могут спутать...
Три библиотеки для удаления неиспользуемого CSS
В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из...
Запуск Puppeteer в Akka.js
Мечтаете создать многопоточное приложение для командной игры? Читайте о том, как использовать для этого модель акторов и правильно запустить Puppeteer в Akka.js.
PHP: массивы
Массив - это структура данных, которая хранит одно или несколько значений схожего типа в одном значении. Например, если вы хотите хранить 100 чисел, то вместо того, чтобы определять 100 переменных, можно определить массив длиной 100.
Организация “глобальных” провайдеров во Flutter Riverpod с помощью миксинов
Изучите методы структурирования области применения провайдеров в Riverpod с помощью миксинов. Такой подход имеет как минимум 5 преимуществ и оказывается особенно полезным при масштабировании приложения и увеличении количества управляемых провайдеров.
Топ-45 библиотек React
Redux, NextJS, Axios, Formik, Styled-components, React-query, Storybook - решение 16-ти задач разработки на React в сторонних пакетах NPM.
Как организовать Express-контроллеры для крупных баз кода
Три года назад я начал разработку Express.js API для одной компании. Тогда я подумал: какой должна быть идеальная архитектура контроллеров для правильной организации разрастающейся...
Как Signal управляет состоянием приложения
Signal - мощный инструмент для фронтенд-разработки. Раскройте для себя механизм его работы, чтобы понимать, как происходит сохранение, обновление и вычисление состояния приложения. Вы также узнаете, как осуществляется мемоизация тяжелых вычислений, избавляющая от многократного пересчета.
Интеграция Django с материализованными представлениями PostgreSQL
Предлагаем пошаговое руководство по интеграции Django с материализованными представлениями PostgreSQL. Вы узнаете, как настроить ORM Django на полную поддержку материализованных представлений с возможностью создавать и обновлять материализованные представления с помощью системы миграции Django.
Советы по анимации с CSS и JavaScript
Основы “плавности”
Анимации - важная часть создания привлекательных веб-приложений и сайтов. Пользователи ожидают высокую отзывчивость и интерактивность.
В классической анимации движение, скорость которого в начале низкая,...
Продвинутые техники PHP. Часть 2
Рассмотрим стратегии эффективной обработки ошибок, профессиональной отладки и возможностей PHP-фреймворков для быстрой разработки. Раскроем еще больше секретов PHP и пополним багаж знаний.
Как реализовать feature gate в React
Предлагаем доступное руководство по реализации feature gate. Этот простой, но мощный механизм позволит легко управлять выпуском новых функций.
Наглядное объяснение алгоритма Беллмана-Форда
Алгоритм Беллмана-Форда находит в ориентированном графе кратчайшие пути от исходной вершины до всех остальных. В отличие от алгоритма Дейкстры, в алгоритме Беллмана-Форда могут быть...
ИИ: постижение законов сверхразума
Термин “искусственный интеллект” похож на чемодан: каждый набивает его своим содержанием. Ученые тоже не могут достичь консенсуса в определении машинного разума. От этого в...
Технические долги при проектировании компонентов с помощью Angular
Изучите три стратегии реализации пользовательских компонентов: превалирование ControlValueAccessor, использование FormControl в качестве входных данных и обертывание компонентов. Чтобы эффективно применять эти стратегии, рассмотрите технические долги, связанные с каждой из них.
Структуры данных: кольцевой (циклический, замкнутый) связный список
Кольцевой связный список - это разновидность связного списка, при которой первый элемент указывает на последний, а последний - на первый. Кольцевой связный список можно сделать как из односвязного , так и из двусвязного списка.