Советы по отладке JavaScript
Любое программное обеспечение не застраховано от ошибок. Каждая функция может иметь несколько вариантов использования и рабочих процессов. При написании программы иногда упускаются несколько пограничных...
JavaScript - идеальный выбор при аналитической обработке данных
По поводу отказа от фото- и видеоаппаратуры в пользу мобильных телефонов, оснащенных камерами, фотограф и предприниматель Чейз Джарвис однажды пошутил: “Лучшая камера — это...
Совместное использование компонентов React с различными библиотеками управления состоянием
Создадим компоненты React для совместного использования с Redux, MobX, Recoil и любыми другими библиотеками управления состоянием. Узнаем, какие задачи и каким образом решают данные библиотеки.
Сайты с модальными диалоговыми окнами без JavaScript
Сайты, которые используют JavaScript для большей части таких элементов, как модальные диалоговые окна, выпадающее меню, мобильные меню-«гамбургеры», зачастую демонстрируют полный провал в плане удобства...
Как тренды визуального дизайна развивались со временем
Пользовательский интерфейс действует по принципу шутки: если её приходится объяснять, то она не удалась. Интуитивность — одна из основных концепций в области продуктового дизайна....
Python и веб-разработка: краткое руководство
За последние несколько лет популярность Python резко возросла, и он даже превзошел Java. С развитием машинного обучения, анализа данных и веб-приложений многие разработчики стали чаще использовать данный язык программирования, так как он обладает множеством полезных библиотек, простым синтаксисом и мобильностью. Без сомнения, сейчас наиболее подходящее время, чтобы научиться работать с Python.
Руководство бэкенд-разработчика по тестированию компонентов на Vue.js
Мне как бэкенд-разработчику, использующему Vue, быстро стало понятно: модульное тестирование сыграет решающую роль в успехе продукта. Разработка пользовательского интерфейса казалась похожей на игру “поймай...
Как создавать доступные веб-приложения для дальтоников с помощью Chrome DevTools
Хотя существует множество инструментов и техник, чтобы улучшить пользовательский опыт и сделать программы удобнее, о потребностях людей с дальтонизмом часто забывают.
По данным сайта colourblindawareness.org...
JavaScript превращается в TypeScript?
В интернете резко возросло количество пользователей, проводящих онлайн более 6 часов в день. Такой скачок привел к увеличению спроса на вакансии в сфере веб-разработки,...
Получение общих данных в Next.js одним запросом
Просматривая процесс сборки своего текущего проекта, я обратил внимание на то, что при генерировании страниц с использованием getStaticProps выдается много запросов к одной конечной...
12 ошибок начинающих веб-разработчиков
Никто из начинающих программистов не застрахован от ошибок, которые, в свою очередь, помогают обучаться. Проанализируем основные промахи начинающих программистов и убедимся в своем профессионализме....
5 актуальных рекомендаций по оптимизации отладки
Ох, уж эти ошибки! Их появление в коде ничего, кроме досады, не вызывает. Лично мне они точно портят настроение. Только представьте: вы создаете продукт,...
50 советов, которые помогут улучшить код JavaScript
JavaScript — это мощный и гибкий язык программирования. Он позволяет много экспериментировать, однако это может привести к ошибкам в коде. Чтобы этого избежать, обратите...
7 Must Visit ресурсов с идеями для веб-дизайна
Разработка дизайна — важный этап создания программного обеспечения или приложения. Внешний вид — это то, на что в первую очередь обращают внимание пользователи при...
5 полезных функций JavaScript, которые знакомы не всем
JavaScript — чрезвычайно эффективный язык программирования, особенно в веб-проектах. Он предоставляет много возможностей, а также библиотек и фреймворков, которые разработчик может использовать для создания...
5 советов о браузерных инструментах разработчика
Инструменты разработчика из веб-браузеров стали незаменимыми для выполнения работы веб-программистов. С годами разработчики браузеров добавляли все больше и больше инструментов, призванных упростить работу. У...
Однопоточность и асинхронность: как у Node это получается?
JavaScript, как многие из вас, должно быть, слышали, — однопоточный. Это означает, что он может выполнять только одну задачу за раз. Все задачи в JavaScript...
5 проектов по программированию для начинающих
Забавные и полезные идеи для проектов
Проект 1: автоматический генератор ASCII-графики
ASCII-графика — это вид изобразительного искусства, где при создании картинок используются составленные вместе символы ASCII. Вот...
5 функций CSS, которые пригодятся при разработке сайтов
В CSS появились 5 новых функций, о которых знают пока не все. Они предоставляют дополнительные возможности для создания привлекательного визуального интерфейса на сайтах.
25 полезных сокращений в JavaScript для веб-разработчиков
Сегодня вы узнаете о множестве сокращений в JavaScript, которые можно использовать, чтобы сделать код более читабельным, лаконичным и профессиональным.
3 альтернативы инструкции Switch в Typescript
Если вас смущает громоздкость инструкции switch, то стоит познакомиться с 3 альтернативными вариантами, доступными в TypeScript: объектные литералы, полиморфизм и обобщения.
8 советов по улучшению качества кода
Качественный код — это командная работа, вне зависимости от должности. Менеджер, разработчик и тестировщик должны вместе работать над созданием высококачественного кода.
Ниже представлен список методов...
Что должен знать хороший фронтенд-разработчик
В жизни разработчика бывают дни, когда все идет отлично, а бывают дни, когда появляются мысли о смене профессии. Особенно если учесть, что в программной...
Интересные подробности об объектах JavaScript
Объекты в JavaScript являются основой. Так что более глубокое их изучение позволит писать вам более чистый и производительный код.
Примечание: эта статья подразумевает наличие у...
Создаем расширение Chrome на Mint
В последней статье я рассказывал о том, почему мне понравилось использовать Mint для создании небольшого веб-приложения, а именно расширения Chrome.
Разработка расширения с помощью Mint,...
Как писать лог-файлы, которые экономят время
Сначала позвольте немного поразглагольствовать: программа, поддержкой которой я занимаюсь по работе, содержит много милых особенностей. “Произошла ошибка” — не то, что достойно такого описания....
Input и Output в компонентах Angular
Недавно у нас была статья по созданию и запуску приложения. Работает оно отлично, но вот его структуру стоило бы улучшить. На данный момент весь...
Маршрутизация и получение данных в Next.js
В статье мы рассмотрим:
Отрисовку отдельных компонентов по разным маршрутам.Разницу между статической генерацией и генерацией на стороне сервера.Получение данных с помощью getStaticProps.Получение данных и динамическую...
В погоне за продуктивностью, или 9 полезных расширений для браузера
В данной статье речь пойдет о расширениях для браузера, способствующих повышению продуктивности разработчиков.
С недавних пор они стали незаменимыми помощниками в мой работе, поскольку действительно...
Психологические принципы для продуктового дизайнера
Ни для кого не секрет, что основная часть создания успешного пользовательского опыта заключается в понимании желаний и потребностей аудитории.
Таким образом, психология становится ключевым элементом...
Что выбрать: React Native, Flutter или нативный подход
Важнейшая проблема кроссплатформенной разработки решалась в мобильных фреймворках разными способами. Первоначально проект Apache Cordova (ранее PhoneGap) решил эту проблему внедрением webview-рендеринга. Затем в проекте...
Aurora UI - новый визуальный тренд в 2021 году
UI-дизайн, особенно его художественная, визуальная сторона постоянно развивается. В то время как большинство современных продуктов повторяют одни и те же, проверенные и хорошо известные...
Простая защита от DoS и брутфорс атак
Наиболее типичными и опасными являются DoS(DDoS) и брутфорс атаки. Оба их вида подразумевают ежесекундную отправку тысячи запросов, которые перегружают сервера. Зачем такое позволять? Сегодня...
notebookJS: JavaScript и D3 в Jupyter Notebook
Вы когда-нибудь задумывались о том, как здорово было бы использовать визуализацию данных с помощью D3 или React в Jupyter Notebook? Много раз, скорее всего....
7 факторов, которые помогут улучшить UX-дизайн
Чтобы улучшить UX, нужно знать «слабые места» интерфейса. Есть типичные «проблемные зоны», на которые дизайнеру следует обращать особое внимание. Обычно именно здесь кроются причины...
Адаптивный дизайн на разных уровнях Flutter
Адаптивный дизайн очень важен для тех, кто ориентируется на разные платформы, используя единую кодовую базу. И особенно это относится к разработке на Flutter, ведь...
Наскучил JavaScript? Достойная альтернатива - Mint
Недавно я создал небольшое веб-приложение с помощью Mint. Для меня это определенно стало освежающим опытом, который я и вам рекомендую. Mint является относительно малоизвестным...
Три библиотеки для удаления неиспользуемого CSS
В обзоре состояния CSS на 2020 года был раздел, посвященный служебным библиотекам. Речь в нем шла о StyleLint, Purge CSS и PurifyCSS. Две из...
React Query - залог эффективных запросов
В статье будут рассмотрены:
случаи использования React Query; простые запросы fetch с помощью пакета React Query; поиск элементов через API по ID; пагинация; мутации.
Случаи использования React Query
Традиционный метод fetch() отлично...
10 инструментов, которые упростят жизнь веб-разработчика
Как разработчик, я считаю, что расширения для браузера — отличный способ повысить свою продуктивность. За время работы я составил список инструментов в Chrome, которые...
5 Методов сохранения состояния в промежутках между перезагрузками страниц в React
1. LocalStorage — классовые компоненты
Один из простых вариантов для сохранения состояния — использовать localStorage в браузере. Рассмотрим пример:
import React from "react";
import "./styles.css";
export default class...
Streamlit для создания интерактивных веб-приложений: начало
Веб-приложения — один из самых удобных способов представить результаты работы в сфере науки о данных. Но многих специалистов по данным, не имеющих какого-либо опыта...
Мемоизация как средство ускорения веб-приложений
Мемоизация — это кэширование вывода функции, чтобы последующие вызовы могли использовать этот кэшированный результат без лишних вычислений. В JavaScript при условии правильной реализации эта...
7 основных навыков, необходимых для фронтенд-разработчика в 2021 году
Почему мы выбираем веб-разработку?
В сегодняшнюю цифровую эпоху все больше и больше компаний связывают свою деятельность с интернетом. Поэтому растут потребности в разработке сайтов, созданием...
Основные принципы кэширования веб-приложений
Веб-приложения прошли большой путь с самого начала. Традиционный процесс создания веб-приложений проходит через несколько этапов проектирования, разработки и тестирования перед тем, как они будут...
Создаем собственный блог с помощью Next.js и Strapi
В этой статье вы узнаете:
о назначении CMS;как использовать Strapi;как с помощью Next.js и Strapi создавать статические сайты.
Введение
Предположим, что вы создаете блог при помощи Next.js....
Работа с HTML и CSS: 10 полезных приемов для дизайнеров
Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда.
Эти...
Создаем приложение React с нуля в 2021 году
➡️ Весь сопутствующий материал доступен на GitHub.
Замысел проекта
Задачей этого руководства было не идти проторенным путем “волшебных” готовых шаблонов (например create-react-app и react-boilerplate), а самостоятельно...
Двоичный поиск в Swift и расширение возможностей коллекций
Многие из нас изучали алгоритмы, но не многие реализовывали их на практике.
Стандартная библиотека (Foundation для Swift) предлагает готовые методы и функции, которые сами реализуют...
Понятие о горячей замене модулей в Webpack
В разработке приложения на JavaScript есть одна особенность: каждый раз при сохранении изменений кода для обновления пользовательского интерфейса приходится перезагружать браузер.
Для отслеживания изменений в...
API, WebSocket или WebHook: что выбрать?
В любом приложении нужен надежный механизм взаимодействия между его компонентами.
Например, в веб-приложениях необходимо взаимодействие между браузером и сервером. Иногда серверу нужно отправить сообщения обратно...
15 расширений VSCode, необходимых программистам в 2021 году
Почему VSCode столь популярен?
Visual Studio Code быстро завоевал популярность среди разработчиков. Он оказался наиболее распространенной средой разработки по результатам опроса Stack Overflow 2019 года....
Применение пустого пространства в UI-дизайне
Хороший UI-дизайн — это продуманное применение пустого пространства во всех масштабах интерфейса: от элемента до страницы. Если пустое пространство правильно использовано, в результате получается...
Изучаем CSS Grid на примерах
Вступление
Система Grid (сетка) является одной из наиболее полезных функций, добавленных в CSS. Она позволяет выравнивать элементы страницы по столбцам и строкам. CSS Grid упрощает...
Пишем фронтенд-компоненты на ванильном JS
В наши дни вокруг фронтенд-фреймворков (React, Angular, Vue) много шумихи. Поразмышляем, какую проблему они решают и для чего могут быть полезны.
В качестве эксперимента создадим...
Познай прокси-объект JavaScript как самого себя
Первым делом ознакомимся с официальным определением Proxy на сайте веб-документации MDN, которое гласит:
“Объект Proxy позволяет создавать прокси для другого объекта, обладая способностью перехватывать и...
Руководство по созданию настольного приложения в Electron
Если вы занимаетесь веб-разработками, то, вероятно, наслышаны об Electron. Для тех же, кто не в курсе, скажу, что это достаточно противоречивый фреймворк для создания...
4 типа архитектуры программного обеспечения
Детальный обзор существующих подходов
Зачем нужна архитектура ПО
Первые разработчики создавали программное обеспечение без архитектуры. Сначала это казалось удобным: никаких издержек, связанных с планированием, и ускоренное...
Как создать адаптивную галерею для интернет-магазина
В этой статье вы узнаете, как создать адаптивную галерею с помощью простенького JavaScript-фреймворка Stimulus для HTML-страницы вашего будущего интернет-магазина. Stimulus — это мощная альтернатива...
Создание REST-клиента с помощью Spring Cloud OpenFeign и Netflix Ribbon
В Java HTTP-запросы между сервисами реализуются весьма просто. Так как существует ряд известных открытых HTTP-клиентов, таких как OkHttp и RestTemplate в Spring, то сложность...
Scrum на грани вымирания?
Какое будущее ждет фреймворк Scrum, учитывая довольно противоречивый опыт его реализации? Предлагаем проанализировать причины претерпеваемого им кризиса и поразмышлять на тему дальнейших перспектив его развития.
Мы снова написали самый быстрый JS-фреймворк UI
Я выработал четкий алгоритм, который применяю практически ко всем видам возникающих передо мной задач.
Шаг 1. Определить задачу.
Этот этап нередко оказывается самым длительным, потому что...
3 совета, как стать мастером Йода по JavaScript
Увидев в проекте на Angular или React устаревший код JavaScript, код-ревьюер сразу определит, что разработчик — новичок. Но если вы воспользуетесь 3 советами из...
Обзор техник кэширования в React
Получение данных в React — это один процесс, а вот их хранение и кэширование — совсем другой. Возможности кажутся безграничными, а отличия зачастую настолько...
Что нового ожидать в ES2021
В июне 2021 года намечен выход ES2021 или ES12. Вот некоторые функции, которые предположительно внесет технический комитет 39 (TC39) в ESMAScript:
· Метод String.prototype.replaceAll
· Метод...
Что такое Hoisting в JavaScript
И как пользоваться этим “поднятием”
Возможно, вы уже знаете, что переменные могут “подниматься”. “Hoisting” переводится с английского как “поднятие” и означает понятие, которое было придумано...
Рендеринг на стороне сервера против статической генерации сайта
В техническом пространстве разбрасывается много модных слов. Два из них — статическая генерация сайтов (SSG) и рендеринг на стороне сервера (SSR).
В этой статье я...
Базовые команды при работе с узлами K8s
В данной статье мы вспомним основы, чтобы прояснить суть ряда операций при работе с узлами кластера.
Тестовый кластер
Рассмотрим только что созданный кластер kubeadm, состоящий из...
10 полезных инструментов для фронтенд-разработчика
Рассказываем о бесплатных инструментах для фронтенд-разработчика, которые помогут легче и быстрее решать рабочие задачи, тем самым повышая вашу продуктивность.
Как улучшить работу с кодом на TypeScript с VSCode
Представьте, что вы бы использовали строго типизированный язык типа JAVA с такой мощной IDE (интегрированной средой разработки), как Eclipse, а затем попробовали бы JavaScript....
Современное приложение выбирает… Redux, Context или Recoil?
Поскольку веяния в управлении глобальным состоянием постоянно меняются, то выбор в пользу того или иного варианта может оказаться затруднительным. Долгое время таким предпочтительным вариантом...
3 способа улучшить управление состоянием в React
В React разработчики могут совершено свободно управлять состоянием внутри компонента. Существуют два типа компонентов: классовые и функциональные, которые были представлены в React v16.
В классовых...
Цветовые схемы в дизайне
Цвет — один из важнейших элементов дизайнерских проектов, а не просто визуальная составляющая, приятная глазу. Он влияет на восприятие пользователя и на то, какие...
Low-code для дизайнеров
Работа в реальных условиях
В течение последних нескольких лет я искал способ, который позволил бы дизайнерам (и другим заинтересованным лицам, не являющимися разработчиками) воплотить идею приложения...
4 секрета читаемого и производительного кода JavaScript
JavaScript настолько гибкий язык программирования, что дает вам возможность достигать целей разными способами. При этом существует ряд принципов и рекомендаций, соблюдение которых позволит улучшить...
Как сделать приложение с дополненной реальностью, используя React Native
Введение
Возможно, вас в последнее время тоже, как и меня, заинтересовала постоянно растущая сфера дополненной реальности. В том или ином виде или форме эта технология...
Создаем 3D-модель из акварельной картины
Небольшое руководство о том, как конвертировать портретную картину или рисунок в 3D-модель с небольшим текстурированием и правильной разверткой. Для этого я использую платформу Blender,...
SonarQube: за качество кода отвечаем
Сразу оговорюсь, что в настоящее время основное внимание я уделяю разработкам на JavaScript и, в частности, React, в связи с чем в статье будет...
Настройка современной среды разработки в Windows 10
Вступление
С 90-х годов в качестве основной операционной системы я задействовал то Windows, то различные дистрибутивы Linux. И почти каждый раз использовал обе эти системы,...
Краткая история инструментов веб-дизайна
Как сильно поменялись дизайнерские инструменты со времен падения технологии Xerox в 80-х? Давайте выясним это и многое другое.
Когда в середине 1980-х работники компании Xerox...
10 трендов UI-дизайна в 2021 году
2020 год уже позади. Пора узнать, что готовит нам текущий. Вот небольшой гайд по трендам UI-дизайна этого года.
1. 3D-изображения
3D-изображения все еще актуальны. Особенно сейчас,...
Нововведения в Apache Airflow 2.0: смогут ли они удовлетворить текущие потребности инженерии данных
Преимущества Airflow 2.0 по сравнению с предыдущими версиями
Пользовательский интерфейс
Интерфейс Airflow 2.0 выглядит свежим и современным по сравнению с предыдущими версиями. Его основное преимущество заключается...
5 увлекательных игр для изучения основных концепций CSS
Вступление
Для применения CSS необходимо знать множество концепций и понятий. Но привычные способы обучения, предполагающие чтение учебников, просмотр видео и другие методы, иногда могут наскучить....
Почему я перешёл на Lite после 3-х лет пользования Visual Studio Code
Оптимизация один из важнейших факторов в программировании. Поэтому разработчикам нужно всегда искать пути усовершенствования своей работы. И начать лучше с самого явного - выбрать подходящий редактор.
Обработка аутентификации и авторизации пользователей после балансировки нагрузки веб-приложения
Балансировка нагрузки необходима, если в приложении ожидается или уже есть большой объем трафика, но дело усложняется, когда доходит до разработки потока аутентификации и авторизации.
Зачем...
Управляйте приложением React с помощью голоса
Не так давно я реализовал с помощью TensorFlowJS модель распознавания голоса. Даже несмотря на то, что задача была очень интересной, ее расширение могло вызвать...
Три точки (…) в Javascript
Синтаксис spread— это новое дополнение в JavaScript ES6. Он принимает итерируемый объект (например, массив) и расширяет его на отдельные элементы.
Синтаксис spread часто используется для...
7 бесплатных API для уникальных приложений
При разработке приложения мы часто хотим просто сосредоточиться на интерфейсе, но интересные, динамические данные для отображения нам тоже нужны. Здесь в игру вступают общедоступные...
Пять шаблонов проектирования, которые необходимо знать каждому разработчику
Сложность процесса разработки ПО можно контролировать, только отслеживая с самого начала. Поэтому перед стартом разработки необходим этап проектирования.
Как архитектор, вы проектируете в настоящем, с...
Паттерн проектирования «Наблюдатель»: объект под прицелом
В книге “Приемы объектно-ориентированного проектирования: паттерны проектирования” Эриха Гамма описываются 23 классических паттерна, которые предлагают решения часто встречающихся задач в разработке ПО.
В данной...
Как в два счета сделать сайт редактируемым извне с помощью данных Google Sheets
Как-то раз заказчики спросили меня, можно ли сделать так, чтобы события и ярмарки на их сайте мгновенно обновлялись. Сегодня я могу сказать: «Да, и...
Как добавить простую функцию поиска в приложение на React без сервера
Функция поиска — одна из самых важных особенностей программного приложения. Поисковые сайты типа Google и DuckDuckGo помогают миллионам пользователей бороздить просторы Интернета и за...
5 основных рекурсивных задач на собеседованиях по программированию
В информатике и математике рекурсия является эффективной базовой концепцией. В математике она применяется в таких разделах, как числовые последовательности и функции. При решении задач...
Kubernetes: преимущества простых кластеров
Какими же сложными стали со временем Kubernetes и облачная экосистема! Не надо далеко ходить за примером, достаточно лишь вспомнить ландшафт CNCF Landscape, на текущий...
Создание простого веб-сервера с помощью Node.js и Express
Node.js с Express — это популярный дуэт, используемый многими приложениями во всем мире. Данный урок познакомит вас с функциональностью этих инструментов на примере сборки...
Совмещение Typescript и GraphQL Code Generator
GraphQL — это открытый язык запросов и управления данными для API.
Нам больше не нужно играть в догадки, как в случае с REST, поскольку этот...
Что нужно учить фронтенд-разработчику в 2021 году
Пошаговое руководство для тех, кто хочет начать свой путь в сфере фронтенд-разработки
Вступление
Фронтенд-разработчик — это специалист, занимающийся созданием интерфейсов или веб-приложений. Такие разработчики в основном...
Почему стоит избегать динамических ссылок
Превращаем динамичные ссылки в хорошо продвигаемые статические ссылки
Так называемые “SEO-friendly” ссылки созданы для того, чтобы удовлетворить нужды поисковиков и пользователей. В мире, где правят...
10 UX-трендов для мобильных приложений в 2021 году
В этой статье мы бы хотели рассказать про 10 трендов в UX-дизайне мобильных приложений, которые будут преобладать в 2021 году.
1. Суперприложения
Одно приложение, одна цель...
Путешествие строки скомпилированного кода
На высоком уровне мы рассмотрим вывод каждой стадии компиляции простой программы C++ при использовании Clang. При этом мы также проследим код в дизассемблированном виде...
8 главных качеств технического менеджера
Один мой близкий друг, получив повышение и возглавив команду инженеров ПО, обратился ко мне за советом. И я призадумался, а что, собственно, порекомендовать? Книги?...
Утверждения, применяемые при импортировании в JavaScript
Количество имеющихся в мире данных с течением времени продолжает бурно расти. Этот огромный объем существует во многих различных типах данных: текстовых файлах, изображениях, видео,...
Как работает внедрение зависимостей в Angular
Предлагаем изучить механику внедрения зависимостей в Angular. Узнайте, как определить зависимость, как ее импортировать и как Angular разрешает конфликты зависимостей.
Как мобильному разработчику всегда быть в курсе последних событий в своей сфере
Эти 10 стратегий помогут разработчику мобильных приложений оставаться в курсе последних новостей, тенденций, инструментов и технологий. Подобная осведомленность - ключ не только к профессиональному росту, но и к инновационным решениям, отвечающим потребностям современных пользователей.
Балансировка нагрузки и последовательное хеширование
Рассмотрим, как работает хеширование запросов при наличии в системе двух и более серверов и как его можно усовершенствовать для балансировки нагрузки.