Руководство для начинающих по Git: что такое журнал изменений и как его создать
Допустим, вы разработчик и на одном из ваших проектов используете Git. Вы хотите поделиться сделанными вами изменениями с другими пользователями, но не знаете, как....
Самые популярные фреймворки React
React-фреймворки значительно упрощают жизнь разработчика. Разберем лучшие их образцы и посмотрим, сможем ли мы выбрать оптимальный вариант.
Полный гайд по SCSS/SASS
Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и...
Эффективное использование ESLint
Когда мы взаимодействуем в каком-либо проекте, то лучше всего придерживаться некоего общего стиля написания кода. Это облегчит коллегам его чтение и сократит временные затраты....
Элементы архитектуры веб-приложений
Кратко пробежимся по всем составляющим веб-архитектуры, закрепим основные понятия и выведем базовые принципы, которыми следует руководствоваться, проектируя веб-приложение.
Как создать приложение Todo на React
Обучение лучше всего происходит на практике. Это руководство поможет познакомиться с ReactJS в процессе создания базового приложения Todo с полем для ввода элемента Todo и кнопкой для его удаления.
Введение в Webpack для новичков
Что такое Webpack?
Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.
При большом количестве файлов он создает один объемный файл...
React: основные ошибки мидл-разработчиков
React - популярный инструмент для создания эффективных приложений. Предлагаемые советы помогут грамотно применять хуки и плагины этой библиотеки, чтобы повысить производительность приложений.
Эти JavaScript-методы всего за несколько минут прокачают ваши навыки
Большинство приложений, которые мы создаем сегодня, требуют внесения каких-то видоизменений в набор данных. Обработка элементов массива — это стандартная операция, с которой вы, скорее всего, часто...
eCommerce UI/UX дизайн: карточка товара в примерах
Карточки универсальны: они встречаются везде, от социальных сетей, таких как Instagram и Facebook, до магазинов электронной коммерции, таких как Amazon и Ebay. Макет представления...
TypeScript: разница между типами any и unknown
Чем тип any отличается от unknown? Рассмотрим нюансы их использования в описании неизвестного значения и утверждении типа.
8 продвинутых вопросов для собеседования по JavaScript
Хотите стать JS-специалистом? Тогда стоит детально разобрать ключевые вопросы для собеседования по JavaScript. Это поможет вам усвоить основные понятия и успешно ответить на другие вопросы.
11 главных фронтенд-трендов на 2020 год
1. Микрофронтенды
Звучит иронично, но несмотря на то, что фронтенд-разработка обладает модульными преимуществами компонентов, она все еще более монолитна, чем бэкенд-микросервисы.
Микрофронтенды предоставляют возможность разделения фронтенд-архитектуры...
7 методов оптимизации производительности React
Производительность - важнейший аспект веб-приложения. Однако одностраничные приложения React (SPA) известны плохой производительностью. Рассмотрим 7 методов, которые помогут это исправить и обеспечить беспроблемный пользовательский опыт.
3 совета, как стать мастером Йода по JavaScript
Увидев в проекте на Angular или React устаревший код JavaScript, код-ревьюер сразу определит, что разработчик — новичок. Но если вы воспользуетесь 3 советами из...
Пять алиасов Git, без которых мне не прожить
Я большой фанат коротких путей.
Алиасы, хаки, скрипты, автоматизация, обходные варианты… я люблю избыточную оптимизацию, поэтому неудивительно, что мне особенно нравится функциональность алиасов в Git — настолько,...
Streamlit для создания интерактивных веб-приложений: начало
Веб-приложения — один из самых удобных способов представить результаты работы в сфере науки о данных. Но многих специалистов по данным, не имеющих какого-либо опыта...
Python Django: Front End на React
Руководство о простом и быстром совмещении в одном проекте двух веб-фреймворков: Python и Django для Back end, Node.js и React для Front end
Чем веб-дизайн отличается от front end разработки?
Основные различия между веб-дизайнером и разработчиком веб-интерфейсов, которые помогут вам определиться с профессией в сфере IT
Первые шаги в анимации React Native
Когда я только начал работать с React Native (RN), у меня никогда не доходили руки до изучения анимации. Многие вещи казались важнее, поэтому я...
А вы знали, что для HTML Чак Норрис - это цвет?
Все знают, что Чак Норрис может дышать вакуумом, способен выжать апельсиновый сок из лимона или захлопнуть вращающуюся дверь. Но знали ли вы о скрытом в его имени цвете? Если нет, то пришло время узнать.
Создание чат-приложения в режиме реального времени с Vue.js, Socket.IO и Node.js
В статье я расскажу, как можно создать чат-приложение в режиме реального времени с помощью Vue.js, Node.js, Express и SOCKET.IO.
Вот скриншот того, что должно получиться:
PS:...
Рендеринг на стороне сервера против статической генерации сайта
В техническом пространстве разбрасывается много модных слов. Два из них — статическая генерация сайтов (SSG) и рендеринг на стороне сервера (SSR).
В этой статье я...
11 инструментов для ускорения создания пользовательского интерфейса
Предлагаем подборку бесплатных инструментов для стилистического оформления пользовательских интерфейсов. Они помогут фронтенд-разработчикам и дизайнерам существенно сэкономить время и повысить производительность.
Обзор ReacType
ReacType - это не только красивое оформление, но и впечатляющий функционал. Посмотрим на этот эффективный инструмент в действии.
8 паттернов реактивности в современном JavaScript
Пришло время изучить ключевой инструмент JavaScript-разработчика - паттерны реактивности. Использование этих 8 паттернов, независимо от применяемого фреймворка, позволит значительно сократить объем кода и повысить производительность веб-приложений.
Почему пора завязывать с React
Еще не успев начать, я уже слышу, как клацают ваши клавиатуры под пальцами, набирающими гневные комментарии. Но я попрошу вас сперва прочесть мое объяснение...
Техника каррирования в JavaScript: суть, преимущества, примеры
Расскажем о такой эффективной технике в JavaScript, как каррирование. Продемонстрируем на практических примерах принцип ее действия и преимущества.
Экспорт данных в Excel с React
В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже.
Пример проекта
Возьмем простое...
Почему я перешёл на Lite после 3-х лет пользования Visual Studio Code
Оптимизация один из важнейших факторов в программировании. Поэтому разработчикам нужно всегда искать пути усовершенствования своей работы. И начать лучше с самого явного - выбрать подходящий редактор.
5 основных рекурсивных задач на собеседованиях по программированию
В информатике и математике рекурсия является эффективной базовой концепцией. В математике она применяется в таких разделах, как числовые последовательности и функции. При решении задач...
Основы JavaScript: управление DOM элементами (часть 1)
Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...
10 источников вдохновения для дизайнера
Во всемирной паутине есть множество отличных инструментов, которые помогают нам в многочисленных задачах каждый день. Так или иначе, мы все периодически ищем вдохновение там...
10 полезных инструментов для фронтенд-разработчика
Рассказываем о бесплатных инструментах для фронтенд-разработчика, которые помогут легче и быстрее решать рабочие задачи, тем самым повышая вашу продуктивность.
Переиспользование форм в Angular
Проект в Stackblitz со всеми примерами в конце поста.
Переиспользуемые элементы управления
Проблема
Однажды я писал модуль аутентификации для компании в сфере электронной коммерции. Это кажется просто,...
Я никогда не понимал замыкания в JavaScript
Пока мне не объяснили их вот так...
Как понятно из названия, замыкания JavaScript всегда были для меня немного таинственны. Я прочитал множество статей, я использовал...
6 продвинутых способов создать чистый код на TypeScript
Современный TypeScript обладает массой полезных возможностей. Предлагаем изучить и взять на вооружение 6 наиболее эффективных способов достижения чистого, многократно используемого и легко сопровождаемого кода.
Знакомство с ReactJS на базовом уровне
Что такое ReactJS?
ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет?
ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются...
Надоело работать во фронтенд с JavaScript? Используйте Python для браузера!
“Как так?” —думаю, примерно такой будет реакция большинства на заголовок этой статьи. Что значит “Используйте Python для браузера?”. Ведь всем известно, что в браузерах...
Рефакторинг: от мусорного кода к SOLID-ному
Раз уж вы решили нажать на этот загадочный заголовок, то, полагаю, вы уже знакомы с принципами SOLID. Хотя бы с самим сокращением.
Здесь я покажу,...
15 расширений VSCode, необходимых программистам в 2021 году
Почему VSCode столь популярен?
Visual Studio Code быстро завоевал популярность среди разработчиков. Он оказался наиболее распространенной средой разработки по результатам опроса Stack Overflow 2019 года....
Веб-разработка: основы статического сайта
Статический веб - это то, с чего начинался интернет. Статические веб-технологии часто используются для разработки шаблонов динамических страниц. Поэтому познакомиться с основами веб-статики будет нелишним для каждого веб-энтузиаста, особенно начинающего.
7 лучших библиотек для создания эффективных приложений ReactJS
Библиотека ReactJS выделяется своей производительностью. Но теперь у нас появилась возможность еще больше ее усовершенствовать. Сообщество пользователей React создало несколько дополнительных весьма эффективных библиотек.
Рассмотрим...
Обзор техник кэширования в React
Получение данных в React — это один процесс, а вот их хранение и кэширование — совсем другой. Возможности кажутся безграничными, а отличия зачастую настолько...
Что такое Hoisting в JavaScript
И как пользоваться этим “поднятием”
Возможно, вы уже знаете, что переменные могут “подниматься”. “Hoisting” переводится с английского как “поднятие” и означает понятие, которое было придумано...
Простой способ взлома сайта для получения его Git-данных
Внимание! Статья преследует чисто образовательные цели. Автор не одобряет и не поощряет хакерство, кроме его разрешённого этического применения (white hat).
Большинство разработчиков по всему миру...
Профессиональная обработка ошибок в TypeScript
Обработка ошибок - важнейшая часть программирования на Type/JavaScript. Приложение может столкнуться с большими проблемами в будущем, если вы не уделите должного внимания выявлению и регистрации ошибок. Посмотрите, как это делают профи.
Три функции JavaScript для освоения метода Reduce
Функции редьюсера просты, но их сложно освоить. Минималистичные решения, которые они реализуют, часто слишком абстрактны для начинающих разработчиков. Трудно представить почти безграничные возможности их...
Движки JavaScript. Часть 1: парсинг
Что такое интерпретация и компиляция? Какие инструменты для этого используются? Как происходит парсинг на движках JavaScript? Обо всем этом поговорим в сегодняшнем материале.
5 полезных функций JavaScript, которые знакомы не всем
JavaScript — чрезвычайно эффективный язык программирования, особенно в веб-проектах. Он предоставляет много возможностей, а также библиотек и фреймворков, которые разработчик может использовать для создания...
4 пользовательских хука React, которые должен знать каждый разработчик
Включите в свой арсенал 4 суперполезных пользовательских хука React. Они повысят эффективность работы, а также масштабируемость и читаемость кода.
10 способов улучшить выпадающие списки в дизайне UI и UX
Выпадающие списки являются одним из наиболее широко используемых и универсальных инструментов для дизайнеров UI и UX. С их помощью можно с легкостью сгруппировать множество...
Как увеличить производительность CSS-in-JS в 175 раз
Мне нравится удобство CSS-in-JS, особенно возможность совместного расположения стилей, но в некоторых деталях я не уверен:
В том, что обязательно нужно использовать хешированные классы вместо...
JWT-аутентификация в Spring Boot Webflux
Spring Security всегда снижал мой интерес к собственным проектам. Как только возникала необходимость выяснить как аутентифицировать пользователей, я сразу начинал испытывать негодование или скуку...
Как сделать сайт в 25 раз быстрее с помощью нескольких строк кода
Сочетание CDN со стратегией кэширования данных может привести к невероятному сокращению времени загрузки сайта, тем самым увеличив ваши шансы попасть на более высокое место в рейтинге Google.
Репозитории GitHub в помощь каждому веб-разработчику
Я недавно узнал о репозитории с полезным контентом (что для меня самое важное) и решил углубиться в тему, составив список репозиториев GitHub, которые принесут...
Ключевое слово static в PHP
Сигнатура метода
Самый распространенный вариант использования ключевого слова static - статический метод. Несмотря на то, что к статическим методам можно обращаться с помощью объектного оператора...
7 способов сократить код JavaScript
Сокращение JS-кода - один из базовых методов его оптимизации. Им должен овладеть каждый профессиональный программист, поскольку компактный формат лучше читается и ускоряет загрузку страниц. Предлагаем 7 наиболее эффективных и часто используемых приемов сокращения JS-кода.
5 инструментов Chrome DevTools, упрощающих разработку
Большинство из нас владеет основами Chrome (например, принципами исследования элементов на странице), но не все знают о дополнительных функциях, значительно упрощающих задачи разработчика.
18 советов по созданию чистого и эффективного кода JavaScript
Освойте 18 самых распространенных хаков, раскрывающих продвинутые возможности JavaScript. Опытные разработчики, в отличие от новичков, постоянно используют эти приемы, чтобы сделать код намного проще, чище и эффективней.
Почему стоит избегать метода push при разработке на JavaScript
Использование метода push может привести к изменению исходного массива. Такой код чреват потенциальными проблемами и, возможно, его придется даже переписывать.
Топ 5 Open Source HTML5 видеоплееров на 2018 год
С появлением в HTML5 тегов <video> и <audio> медиафайлы стали по-настоящему доступными для Интернета.
За короткий срок стандарт HTML5-видео заменил Flash Player и аналогичные сторонние...
Полное руководство по “this” в JavaScript
"Чему равно this в данном случае?" - этот вопрос часто сбивает с толку новичков в JavaScript-программировании. Предлагаем четкий алгоритм, который поможет быстро определить значение ключевого слова this.
Создаем на JavaScript приложение записи заметок в реальном времени
Подробная инструкция, включая настройку аутентификации, реализацию real-time обновления приложения при внесении изменений в БД и процесс авторизации через Google-аккаунт.
7 инструментов для создания дизайн-систем в 2020 году
Легенда гласит, что первая дизайн-система была представлена НАСА в 1976 году. С тех пор дизайн-системы превратились в широко распространенную практику, используемую для стандартизации проектирования...
Советы по анимации с CSS и JavaScript
Основы “плавности”
Анимации - важная часть создания привлекательных веб-приложений и сайтов. Пользователи ожидают высокую отзывчивость и интерактивность.
В классической анимации движение, скорость которого в начале низкая,...
Не бойтесь генераторов JavaScript
Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений.
Пять причин поместить функции в класс
Не все функции созданы одинаковыми. Класс — это набор каким-то образом связанных друг с другом функций. Они могут принадлежать одной категории и иметь что-то общее в...
Добро пожаловать в ад…зависимостей JavaScript
Начало любого JavaScript проекта сопровождается амбициозным намерением— использовать как можно меньше npm пакетов в процессе разработки. Но сколько бы усилий мы не предпринимали, рано...
Как не лажать с JavaScript. Часть 1
Часть 1, Часть 2
JavaScript самый распространенный язык программирования в мире и с его силой нужно считаться. Благодаря своей простоте и обилию учебных материалов его...
Лучшие JavaScript-фреймворки и тенденции веб-разработки в 2021 году
В прошлом году весь мир сильно пострадал от пандемии COVID-19. Этим беспрецедентным кризисом до сих пор охвачены абсолютно все сферы человеческой деятельности. Негативные последствия...
10 продвинутых приемов JavaScript для опытных разработчиков
Даже у опытных разработчиков есть возможности для профессионального роста. Эти продвинутые приемы JavaScript помогут повысить производительность труда, а также эффективность и удобство в обслуживании приложений.
10 API консольных утилит Chrome
1. monitor
Используется для мониторинга функции:
function traceFunc (arg) { }
monitor(traceFunc)
Функция traceFunc передается в качестве аргумента в monitor. Теперь при каждом вызове traceFunc на мониторе будет...
Шаблон Медиатор в JavaScript
Поскольку медиатор изменяет поведение программы и отвечает за координацию взаимодействий, он считается поведенческим шаблоном. По мере роста приложения возрастает и потребность в медиаторе из-за...
10 хитрых приемов в JavaScript, о которых должен знать каждый разработчик
Рыночная доля JavaScript за последние 5–10 лет поднялась на новый уровень, особенно с тех пор, как в июне 2015 года был запущен ES6. Обновление...
Перевод любого приложения Vue.js за час
Инструкция по полной автоматизации процесса перевода приложений на любое количество языков с помощью vue-i18n. Настраиваем инструменты, организуем их взаимодействие и получаем возможность мгновенного перевода через Google Translate.
8 мощных пакетов NPM для любого веб-разработчика
NPM (Node Package Manager) — это менеджер пакетов Node.js. Он предоставляет разработчикам широкий ассортимент полезных библиотек и инструментов.
С помощью этого репозитория процесс разработки веб-проекта,...
Познай прокси-объект JavaScript как самого себя
Первым делом ознакомимся с официальным определением Proxy на сайте веб-документации MDN, которое гласит:
“Объект Proxy позволяет создавать прокси для другого объекта, обладая способностью перехватывать и...
Как работает новый await верхнего уровня в JavaScript
Раньше, чтобы использовать await, код нужно было помещать в асинхронную функцию. Это означало, что вы не могли использовать его вне какого-либо обозначения функции. Await...
Flutter зовет: 5 проектов за выходные
Выходные — это время, когда семья и друзья собираются вместе, общаются, трапезничают и веселятся. Однако если вы именно так провели свои прошлые выходные, то...
10 лайфхаков JavaScript, которые сделают из вас профессионала
Опытные JavaScript-программисты владеют приемами, которые неизвестны новичкам. Познакомьтесь с 10 из них: они сделают код качественнее, а вас - более профессиональным программистом.
Повторный рендеринг и мемоизация в React
Разработчики React прикладывают максимум усилий, чтобы увеличить производительность своего продукта. Сегодня мы рассмотрим основные инструменты оптимизации эффективности этой библиотеки.
Микрофронтенды - а почему бы и нет?
Фронтенд-разработка всегда занимала положение младшего ребенка в семействе веб-приложений. И пока фронтенд-разработчики расхаживали в своих модненьких шапочках, с аккуратными усиками, MacBook и дорогим кофе,...
Основные принципы темного UI-дизайна
Сегодня темное оформление UI-дизайна встречается повсюду — от мобильных экранов до широкомасштабных телевизоров. Сила, роскошь и элегантность — это то, что выражает темное оформление....
10 заповедей UI-дизайна
Этот список составлен на основе книги "101 UX-принцип" (101 UX Principles), написанной Уиллом Грантом (Will Grant).
1. Пустые состояния
Пустые состояния должны представлять нечто большее, чем...
6 лучших JS-библиотек для визуализации данных и создания отчетов
Веб-инструменты для отчетов используются для представления, создания и изменения отчетов с помощью веб-интерфейса — веб-браузера. Эти инструменты могут быть встроены в сторонние приложения или...
Асинхронный JavaScript ― Цикл обработки событий
В этой статье вы узнаете, как работает асинхронность в JavaScript
JavaScript — однопоточный язык программирования. Движок JS единовременно может обрабатывать только одно выражение — в одном потоке.
С одной стороны,...
JavaScript async/await: что хорошего, в чём опасность и как применять?
Механизм async/await , представленный ES7, является фантастическим улучшением асинхронного программирования с использованием JavaScript. Он предоставил возможность использовать код, написанный в синхронном стиле, для асинхронного доступа к...
REST API для приложения со Spring Boot, Kotlin и Gradle
Я много раз пытался спроектировать API для своих приложений, и это всякий раз заканчивалось разочарованием по одной из этих причин:
Недостаточное понимание языка или фреймворка.Неготовность...
Как использовать библиотеку веб-компонентов React от Uber
Представляем библиотеку компонентов Uber с открытым исходным кодом. Это надежный инструмент для реализации всех задач разработки пользовательского интерфейса.
Создание кольцевой диаграммы на JavaScript
Предлагаем пошаговое руководство по созданию и настройке на JavaScript интерактивной кольцевой диаграммы. Следуя ему, вы приобретете навыки и знания, которые позволят создавать персонализированные кольцевые диаграммы.
Работа с HTML и CSS: 10 полезных приемов для дизайнеров
Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда.
Эти...
Библиотека Ethers.js: новичкам на заметку
Познакомимся с библиотекой ethers.js и узнаем, как именно она обеспечивает взаимодействие с виртуальной машиной Ethereum в Remix.
WebRTC: фреймворк ICE, STUN и сервера TURN
WebRTC (Web Real Time Communication) — это проект с открытым исходным кодом, позволяющий создавать одноранговые (P2P) аудио- и видеосвязи через JavaScript API.
Для того чтобы установить P2P-соединение,...
Создайте собственный AdBlocker за 10 минут
Расширения для браузера всегда меня восхищали. В современном мире их ценность уже не столь очевидна, в особенности из-за перехода от десктопных версий браузеров к...
Безопасность наглядно: CORS
Каждый разработчик периодически сталкивается с огромной красной строкой в консоли — Access to fetched has been blocked by CORS policy. Да, это здорово расстраивает. И хотя...
Управление памятью JavaScript: как избежать утечек памяти и повысить производительность
Если вы разрабатывали приложения, то могли сталкиваться с такой проблемой, как утечка памяти. В сегодняшней статье мы расскажем об управлении памятью в JS и о том, как не допустить ее утечек.
Лучшие практики JavaScript: переменные
Как и у любого языка программирования, у JavaScript есть свой список лучших практик, помогающих создавать более простые для понимания и дальнейшей поддержки программы. В...
Основные принципы кэширования веб-приложений
Веб-приложения прошли большой путь с самого начала. Традиционный процесс создания веб-приложений проходит через несколько этапов проектирования, разработки и тестирования перед тем, как они будут...
12 ошибок начинающих веб-разработчиков
Никто из начинающих программистов не застрахован от ошибок, которые, в свою очередь, помогают обучаться. Проанализируем основные промахи начинающих программистов и убедимся в своем профессионализме....
Введение в алгоритмы машинного обучения: линейная регрессия
Линейная регрессия - отправной пункт в освоении науки о данных, с которого новички приступают к овладению моделированием данных. Каждому начинающему исследователю данных будет полезно ознакомиться с алгоритмом линейной регрессии, его реализацией на Python и способами применения.
5 достойных альтернатив спискам в Python
В Python наиболее популярным контейнером, вероятно, является list. Благодаря присущей ему гибкости список можно повсеместно использовать в проектах для хранения различных видов данных: целых...
Приемы работы с оболочкой Zsh, которые я хотел бы знать раньше
Хотите повысить производительность работы в терминале? Предлагаем приемы, практические советы и рекомендации по повышению эффективности работы с командной строкой с помощью Zsh.
MongoDB: агрегирование
Операции агрегирования обрабатывают данные и возвращают вычисленные результаты. Они группируют значения из нескольких документов, выполняют с ними разные действия и возвращают один-единственный результат. В SQL аналогами операций агрегирования MongoDB являются функция count(*) и оператор group by.
5 крутых функций Chrome DevTools, о которых не знают большинство разработчиков
Среди множества интересных функций Chrome DevTools есть несколько по-настоящему крутых, но малоизвестных. Каждая из этих возможностей позволит делать на пару-тройку кликов меньше. Так почему бы не узнать о них прямо сейчас?