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

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. При этом мы также проследим код в дизассемблированном виде...

Продвинутые React Hooks: подробный разбор useEffect

С выходом React 16.8 в 2019 году React Hooks наконец-то стали доступны для использования в пригодных для эксплуатации приложениях. Хуки позволяют React-разработчикам делать функциональные...

TypeScript. Что, зачем и как?

Те из вас, кто занимается разработкой на JavaScript, наверняка так или иначе слышали о TypeScript. Если при этом вы не решались попробовать освоить этот...

6 способов как веб-дизайнеру понять пользователя

Пользователи не читают, они просматривают страницу Зайдя на сайт, пользователи быстро пробегаются по нему. Они не читают, а просматривают. И этот «просмотр» проходит ещё быстрее,...

Создаем Telegram-бота с помощью Node.js за 3 минуты

Одна из интересных особенностей Telegram заключается в возможности создать собственного бота. Он помогает автоматизировать и упрощать повседневные задачи. Узнаем, как сделать простого бота с помощью Node.js.

Создание настольных приложений с помощью Electron. Руководство для начинающих

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

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

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

Как создавать собственные хуки на React

Учимся использовать логику компонентов для создания многоразовых хуков Хуки React, впервые появившиеся в версии React v16.8, кардинально изменили подход к написанию кода. Из коробки React...

Основные принципы темного UI-дизайна

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

Аспектно-ориентированное программирование в JavaScript

Кто из программистов JavaScript не знает об объектно-ориентированном (ООП) или функциональном программировании (ФП)?! Но вот слышали ли вы об аспектно-ориентированном (АОП)? Что самое интересное, АОП...

Психология цвета в UX

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

Входящий веб-перехватчик в MS Teams

Microsoft Teams с нами уже больше четырёх лет. Этот инструмент призван заменить программу-клиент «Skype для бизнеса» и был разработан в Microsoft как конкурент других...

6 советов, как улучшить работу UX-дизайнера

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

Управление состоянием: Jotai вместо Redux

Самая утомительное при реализации Redux — это написание того объёма шаблонного кода, который нужен для обработки потока данных между компонентами и хранилищем Redux. Сам...

Сравнение архитектурных стилей API: SOAP vs REST vs GraphQL vs RPC

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

Практическое введение в Composition API Vue 3

Composition API — это отличный способ делиться логикой приложения между компонентами в Vue.js. Вы сможете не только организовать повторяющиеся фрагменты кода в отдельные файлы,...

UX в 2021 — что ожидать?

UX-дизайн — это переменчивая сфера, в которой появляются новые направления каждый год, и последний — не исключение. COVID-19 и всемирная изоляция внесли неожиданные коррективы...

Рандомизатор на чистом CSS

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

Почему каркасы бесполезны?

Мы никогда не были большими фанатами каркасов, поэтому распрощаться с ними не было для нас проблемой. Мы избавились от них раз и навсегда, когда...

Знакомимся с основами Angular через создание простого приложения

Готовы сегодня создать что-нибудь интересное? Я тоже! На данный момент я тружусь в роли Angular-разработчика, создавая для сотрудников нашей компании инструменты, которые помогают им более...

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

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

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