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

Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?

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

Диспетчер загрузки на Swift

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

Лучшие практики именования переменных в JavaScript

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

18 советов по созданию чистого и эффективного кода JavaScript

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

11 главных фронтенд-трендов на 2020 год

1. Микрофронтенды Звучит иронично, но несмотря на то, что фронтенд-разработка обладает модульными преимуществами компонентов, она все еще более монолитна, чем бэкенд-микросервисы. Микрофронтенды предоставляют возможность разделения фронтенд-архитектуры...

Как оптимизация изображений снизила “вес” главной страницы на моем веб-сайте на 62%

Изображения являются чуть ли не самым распространенным типом контента, что встречается в Интернете. Говорят, что одно изображение может заменить тысячу слов. Но, если вы...

Революция в условном рендеринге React

Вам знакома проблема условного рендеринга JSX? Библиотека Solid.js предлагает ее элегантное решение: достаточно создать компонент Show, чтобы значительно упростить обработку условного рендеринга. Этот простой компонент не только делает чище и читабельнее код, но и повышает эффективность разработки.

10 рекомендаций по ускорению рабочего процесса в Visual Studio Code

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

Запуск Puppeteer в Akka.js

Мечтаете создать многопоточное приложение для командной игры? Читайте о том, как использовать для этого модель акторов и правильно запустить Puppeteer в Akka.js.

10 источников вдохновения для дизайнера

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

Создаём «ToDo» приложение с помощью Electron

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами. Что необходимо для этого Я...

За хорошим UI следует хороший UX

Пересмотрим взаимосвязь UI и UX. Изучим понятие эффекта "эстетики в юзабилити" и его влияние на UX, а также элементы, связанные с этим эффектом.

Создание интерактивных аналоговых часов с помощью Vue3

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

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

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

Обработка ошибок API в веб-приложении, используя Axios

Когда вы делаете вызов к бэкенд API с axios, вы должны рассмотреть, что делать с блоком .catch() вашего промиса. Теперь вам может показаться, что ваш...

4 Способа обмена данными между вкладками браузера в режиме реального времени

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

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

Предыдущие части: Часть 1, Часть 2 Оптимизируем Теперь, когда мы обнаружили проблемные области, давайте посмотрим, можем ли мы сделать сервер быстрее. Лёгкий и быстрый способ Давайте вернем код слушателя server.on (вместо...

20 скрытых особенностей JavaScript

Представленные ниже 20 хитростей JavaScript были указаны пользователями Stack Overflow. 1. Работа с аргументами функций Вам не нужно определять параметры для функции — можете просто использовать...

10 особенностей создания компонентов Vue.js

1. Глобальная и локальная загрузка компонентов Vue.js предоставляет два способа загрузки компонентов: глобально на экземпляре Vue и на уровне компонентов. Каждый метод обладает своими преимуществами. При...

Python для Android: Как начать делать кроссплатформенные приложения с Kivy

В этом руководстве приведены шаги, необходимые для создания кроссплатформенного приложения для Android с использованием Python-фреймворка Kivy и Linux Ubuntu. Перед началом установки и запуском...

Как оптимизировать приложения на Angular

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

TypeScript: от нулевого до продвинутого уровня. Часть 1

Это руководство по TypeScript позволит вам пройти путь от новичка до профессионала! В 1-й части вы сможете ознакомиться и попрактиковаться (благодаря ссылке на интерактивную среду TS) с основными типами, их комбинированием и сужением, а также использованием массивов, кортежей и функций в языке TypeScript.

Поверхностное и глубокое копирование в JavaScript

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

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

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

Библиотека Ethers.js: новичкам на заметку

Познакомимся с библиотекой ethers.js и узнаем, как именно она обеспечивает взаимодействие с виртуальной машиной Ethereum в Remix.

7 основных навыков, необходимых для фронтенд-разработчика в 2021 году

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

ReactJS, Angular5 и Vue.js — какой фреймворк выбрать в 2018 году?

Некоторое время назад мы опубликовали статью, в которой сравнили Angular 2 и React. В ней мы обсудили плюсы и минусы этих фреймворков и предположили,...

8 полезных приемов в CSS: Эффект параллакса, прилипающий футер и многое другое

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

Основы JavaScript: управление DOM элементами (часть 2)

Часть 1, Часть 2 Получаем доступ к DOM элементам В данном разделе мы посмотрим на методы, которые помогут получить доступ к DOM элементам: getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector()...

Руководство для начинающих по созданию с нуля сайта онлайн-курсов или e-коммерции

Востребованность онлайн-бизнеса, как мы знаем, привела к повышению спроса на сайты и приложения. Это отлично понимают Google и Facebook — главные конкуренты на интернет-рынке. Именно...

Почему React 16 — это благословение для React разработчиков

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

Как правильно обрабатывать события

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

Лучшие JavaScript-фреймворки и тенденции веб-разработки в 2021 году

В прошлом году весь мир сильно пострадал от пандемии COVID-19. Этим беспрецедентным кризисом до сих пор охвачены абсолютно все сферы человеческой деятельности. Негативные последствия...

Создаем первый «Astroвной» проект

Сделаем блог с «островом интерактивности», полем поиска в реальном времени и индексатором. Подключим настаиваемую интеграцию для индексирования каждого поста и расширения поведения на этапах процесса сборки.

5 практик, которые облегчат работу с Next.js 14

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

Секретные материалы: тайная сторона Redux становится явной ?

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

Создание приложения Flask на Python для визуализации мест путешествий

Воспоминания о местах путешествий можно хранить не только в сердце, но и на пользовательской карте HERE с прикрепленными на ней фотографиями. Для ее создания воспользуемся Python, API HERE maps, Flask и Heroku.

10 полезных методик во фронтенд-разработке React

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

Создание клона Google Maps с открытым исходным кодом. Часть 1

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

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

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

Мой опыт спустя год работы с React

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

Как создать полезную офлайн-страницу для веб-приложения

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

Мой любимый вопрос на собеседовании для веб-разработчиков: «Понимаете ли вы, что такое массивы?»

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

15 расширений VSCode, необходимых программистам в 2021 году

Почему VSCode столь популярен? Visual Studio Code быстро завоевал популярность среди разработчиков. Он оказался наиболее распространенной средой разработки по результатам опроса Stack Overflow 2019 года....

Размеченные объединения в TypeScript

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

Как с помощью чистого CSS создать красивую анимацию загрузки для приложения

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

Переключатель темного режима в веб-приложении

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

Зачем нужен CORS: просто о сложном

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

Осторожно! Angular крадет ваше время

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

JavaScript 101: метод массива Reduce

Представим метод reduce во всей красе: назначение, синтаксис, сценарии использования и преимущества, выделяющие его среди других методов массивов, таких как map и filter.

Как повысить производительность бэкенд-приложений

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

10 видов шаблонного кода на NextJS

Шаблонный код — это минимальный код многократного использования, который требуется всем приложениям и встречается в каждом из них. Это такой многоразовый «клей» для компонентов. В...

Одномерный клеточный автомат в JavaScript

Концепция клеточного автомата возникла в середине 20 века, и с того времени область ее практического и теоретического применения значительно расширилась. Клеточный автомат состоит из любого...

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

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

5 способов стилизовать компоненты React в 2019

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

Как построить надежную фронтенд-архитектуру

Что такое дизайн «Feature Sliced» во фронтенд-архитектуре? Рассмотрим особенности и результаты применения дизайна, его достоинства и недостатки.

JavaScript async/await: что хорошего, в чём опасность и как применять?

Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...

Javascript и функциональное программирование: Введение

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

5 функций CSS, которые пригодятся при разработке сайтов

В CSS появились 5 новых функций, о которых знают пока не все. Они предоставляют дополнительные возможности для создания привлекательного визуального интерфейса на сайтах.

Представляем SafeTest: новый подход к тестированию фронтенда

Традиционные тесты пользовательского интерфейса сопряжены с определенным компромиссом. В этой статье мы поговорим о SafeTest, революционной библиотеке, которая предлагает новый взгляд на E2E-тесты для веб-приложений с пользовательским интерфейсом (UI).

Почему не стоит использовать объекты в роли карт в JavaScript?

До появления ES6 при создании карты или словаря хранение ключей и значений мы зачастую реализовывали посредством объектов. В таком способе есть свои проблемы, которых...

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

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

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

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

Google OAuth для реализации на Ruby

Будем реализовывать единый вход Google OAuth для веб-сайта. Библиотека google-api-client устарела (о чем упоминается в Google Identity Document). Правда, есть еще одна подходящая для...

Автоматизируйте код-ревью и ускорьте итерации

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

Архитектура ПО: создайте свое приложение с AWS

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

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

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

Как создать приложение на Go с gRPC

Разберем преимущества gRPC, 4 типа API и буферы протокола. Реализуем сервер и клиент на Golang с gRPC потоковой передачи данных: определим сообщения и сервисы, сгенерируем для них интерфейс и добавим функциональность.

JavaScript Essentials: Типы и структура данных

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

Разбор позиционирования в CSS

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

REST API CRUD в Laravel 11 с лучшими практиками

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

VSCode. 27 расширений для JavaScript разработчика

27 плагинов для Visual Studio Code, которые расширят ваши возможности и повысят эффективность.

6 полезных приемов для создания интерфейсов

Фронтенд-разработка сегодня весьма востребована. Программисты, выполняющие подобные проекты, постоянно сталкиваются со множеством новых задач. Для их решения приходится создавать код с использованием HTML, CSS и...

Темная сторона Javascript: избегайте данных трех функций

Оператор Void Вы, вероятно, уже сталкивались с этим оператором. Раньше при наличии ссылки, запускающей функцию JavaScript, нужно было добавлять href=”javascript:void(0)”, чтобы действие по умолчанию не...

5 продвинутых шаблонов React на пальцах

Знакомство с наиболее эффективными шаблонами через примеры их реализации, а также сопоставление основных плюсов и минусов.

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

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

Прототипирование для Vue

С июля 2019 года Vue занимает третье место по количеству звезд на Github. Он опережает React более чем на 10 000 звезд и оставляет...

Какой метод глубокого клонирования в JavaScript наиболее эффективный — исследование

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

Прекратите использовать конфигурационные файлы JSON

История о том, почему мы не должны использовать инструменты для того, что можно сделать с помощью простого JavaScript. Каждый важный инструмент в мире JavaScript позволяет...

Лучшие библиотеки React 2024 года

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

Шпаргалка по хукам в React

Хуки - это функции, позволяющие оперативно контролировать текущее состояние функциональных компонентов React. Новичкам эта статья поможет разобраться в сложных вопросах, а профессионалам - развеять имеющиеся сомнения.

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

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

Новые API интернационализации в JavaScript

Intl — глобальный объект для форматирования строк, чисел и дат с учётом языка пользователя. Он работает над отображением зависящей от языка информации. Интернационализация — способ...

Я никогда не понимал замыкания в JavaScript

Пока мне не объяснили их вот так... Как понятно из названия, замыкания JavaScript всегда были для меня немного таинственны. Я прочитал множество статей, я использовал...

Как использовать JavaScript для расстановки элементов на веб-странице

Вы когда-нибудь видели веб-страницы с абсолютно хаотичной расстановкой элементов? Сложно сфокусироваться, да? К счастью, если очень захотеть, то их можно расставить в нужном порядке с помощью JavaScript!

Настройка современной среды разработки в Windows 10

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

Стратегии обнаружения изменений в Angular - «onPush» и «Default»

В Angular есть две стратегии обнаружения изменений — «Default» и «onPush». Рассмотрим преимущества и недостатки этих стратегий. Что такое «обнаружение изменений» в Angular? Механизм обнаружения изменений в...

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

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

PHP: создание и публикация пакета composer

Научимся публиковать пакет официально. Пройдем все пошагово: от его подготовки до размещения на GitHub и регистрации в Packagist.

Супербыстрый веб-фреймворк Astro: подробный обзор

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

Оператор ?= в JavaScript

Предлагаем полное руководство по использованию оператора ?=. Многие считают его самой полезной JavaScript-фичей 2024 года. С ним код станет чище и производительнее, а процессы его создания, отладки и сопровождения — намного проще.

5 библиотек ведения логов для Node.js

Обсуждаем, почему так важно вести логи, и разбираем популярные библиотеки, обеспечивающие эту возможность для приложений Node.js: Winston, Pino, Bunyan, Log Level и npmlog.

Шаблоны рендеринга Next JS: полное руководство

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

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