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

Почему никто не рассказал мне это о CSS

Многим разработчикам, кажется, нет дела до CSS и это не новость. Тем не менее многое из того, что мы узнаём, происходит в процессе общения...

Создаём расширение для Chrome

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с...

Как использовать шаблон проектирования “Адаптер” в React

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

Как читать и понимать документацию API

Если, получив совет “почитать документацию API”, вы так и сделали, но так толком и не поняли, что в ней к чему, то эта статья...

Как инженеру-программисту Reactjs перейти на Swift и SwiftUI

Узнаем, как плавно перейти с ReactJS на Swift и SwiftUI. Для этого сопоставим их наиболее распространенные шаблоны проектирования.

Профессиональная обработка ошибок в TypeScript

Обработка ошибок - важнейшая часть программирования на Type/JavaScript. Приложение может столкнуться с большими проблемами в будущем, если вы не уделите должного внимания выявлению и регистрации ошибок. Посмотрите, как это делают профи.

Agile — враг (хорошего проектирования)?

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

Минималистичная конфигурация терминала с возможностью тонкой настройки

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

Мы снова написали самый быстрый JS-фреймворк UI

Я выработал четкий алгоритм, который применяю практически ко всем видам возникающих передо мной задач. Шаг 1. Определить задачу. Этот этап нередко оказывается самым длительным, потому что...

8 пунктов по стилю React + TypeScript

Ценность этих рекомендаций в их практическом значении. Добавьте их в собственное руководство по стилю React + TypeScript, и ваш код станет чище и понятнее.

Введение в создание веб-компонентов

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

Как использовать библиотеку веб-компонентов React от Uber

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

22 CSS-свойства для позиционирования

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

Пять причин поместить функции в класс

Не все функции созданы одинаковыми. Класс — это набор каким-то образом связанных друг с другом функций. Они могут принадлежать одной категории и иметь что-то общее в...

Элементы минималистичного дизайна

На сегодняшний день минимализм является одним из самых популярных UX/UI трендов в 2021 году. Минималистичный дизайн — это художественный замысел, который подразумевает использование наиболее важных...

Полное руководство по управлению JWT во фронтенд-клиентах (GraphQL)

JWT (JSON Web Token, произносится как 'jot' ) становится популярным способом управления аутентификацией. Эта статья ставит целью развенчать мифы о стандарте JWT, рассмотреть его...

PHP: введение и настройка среды

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

Топ-9 современных общедоступных JS-библиотек для разработки ИИ

Эти библиотеки не только помогут создать высокопроизводительные приложения, управляемые искусственным интеллектом, но и значительно упростят вашу работу. С ними ваши проекты по ИИ станут умнее, быстрее и эффективнее!

React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android

Виджеты - это инструменты, которые делают домашний экран более привлекательным и предоставляют полезную информацию. Рассказываем, как создавать виджеты для Android и iOS и как внедрить их в приложение на React Native.

Лучшие практики JavaScript — производительность

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

Погружение в unserialize(): больше, чем RCE

Обход аутентификации и внедрение SQL-кода через unserialize() в PHP Сериализация в PHP через метод unserialize() приводит к появлению уязвимостей, открывающих через RCE (удаленное выполнение кода) доступ...

Улучшите производительность с помощью веб-воркеров

Введение В этой статье мы рассмотрим, как использовать веб-воркеры для повышения производительности при запуске. Примеры будут в приложении Angular 8 — с ним проще начать работать с...

Веб-безопасность: стратегия защиты контента (CSP)

Ознакомьтесь с основными CSP-методами, их тестированием и реализацией в Express.js/Node.js. Использование этих методов позволит защитить приложения от уязвимостей, обеспечить безопасность данных и повысить доверие пользователей.

Лучшие способы вызова API на Javascript

При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных. Узнайте о наиболее удобных способах вызова API на Javascript с помощью библиотек с открытым исходным кодом: XMLHttpRequest, Fetch и Axios.

3 альтернативы репозитория в Laravel

Рассмотрим преимущества и недостатки шаблона «Репозиторий». Изучим три альтернативы абстрагирования управления данными: заготовки Eloquent, пользовательские запросы и классы action.

10 полезных приемов работы со строками JavaScript

Строки JavaScript - важнейший инструмент организации текстовых и типографических элементов веб-страницы. Эти 10 приемов работы со строками JavaScript облегчат процесс написания чистого, быстрого и эффективного кода.

Как с помощью Sentry реализовать захват исключений фронтенда

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

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

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

Javascript и функциональное программирование. Часть 4: каррирование

Предыдущие статьи: Часть 1, Часть 2, Часть 3 Каррированием называется метод, при котором мы вызываем функцию с меньшим количеством аргументов. Но функция эта возвращает значения...

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

Объектная модель документа или DOM определяет логическую структуру HTML документа и в основном представляет собой интерфейс веб-страниц. С помощь таких языков программирования, как JavaScript,...

Как использовать JavaScript для сокращения HTML-кода

Как написать эффективный и легкий для отладки код? Это задача, над которой бьются многие программисты. Одним из ее решений является использование JavaScript. Посмотрите, как это можно сделать, на примере создания сайта-блога.

Почему нельзя прерывать цикл forEach в JavaScript

Недавно я проходил собеседование, которое включало сравнение двух разных схем. Опущу детали, но прямо в середине собеседования всплыла одна очень важная вещь — нельзя прерывать цикл...

Input и Output в компонентах Angular

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

Отложенная загрузка изображений с помощью Intersection Observer API

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

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

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

Создание приложения-планировщика в React с Easy Peasy и Ant Design

Обучающее руководство по созданию приложения-планировщика React при непосредственном участии библиотек Easy Peasy и Ant Design.

Proxy - сокровище JavaScript

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

Топ 5 Open Source HTML5 видеоплееров на 2018 год

С появлением в HTML5 тегов <video> и <audio> медиафайлы стали по-настоящему доступными для Интернета. За короткий срок стандарт HTML5-видео заменил Flash Player и аналогичные сторонние...

Создание REST-клиента с помощью Spring Cloud OpenFeign и Netflix Ribbon

В Java HTTP-запросы между сервисами реализуются весьма просто. Так как существует ряд известных открытых HTTP-клиентов, таких как OkHttp и RestTemplate в Spring, то сложность...

Руководство по созданию настольного приложения в Electron

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

7 самых популярных библиотек React

Оптимизируйте разработку с помощью наиболее востребованных библиотек React. По количеству звезд на GitHub они опережают остальные библиотеки, а значит на них стоит обратить внимание.

Как создать веб-сервер с модулями HTTP и FS Node.js

Хотите создать веб-сервер с помощью NodeJS? Основные модули Node.js - HTTP и fs - позволят вам обойтись без сторонних зависимостей.

Проблема устаревших замыканий и способы ее решения в React. Часть 1

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

Отмена действий в Git

Мы всегда готовы подчеркивать бесчисленные возможности, которые предлагает Git, и эта статья не станет исключением. Git известен своей потрясающей способностью отменять практически любые действия!...

Динамические заголовки страницы в Angular

Angular — это MVC-фреймворк для создания одностраничных приложений в Javascript. В этой статье мы узнаем, как установить заголовок браузера (страницы/документа) для всего приложения и как изменить заголовок...

Совместное использование состояний между окнами без задействования сервера

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

Как JavaScript повзрослел и стал настоящим языком

Мало кто представлял себе, что этот язык превратится в профессиональную платформу Если ещё лет 20 назад вы бы сказали, что JavaScript станет одним из самых...

У приложений будущего может не быть бэкенда

История циклична. Я создал свой первый веб-сайт в 1999 году с помощью самых передовых технологий, доступных веб-мастерам (не могу использовать слово разработчики в данном случае):...

Почему крупные проекты отказываются от TypeScript?

Появление TypeScript было встречено многими специалистами с энтузиазмом. Этот язык обещал улучшить опыт разработчиков, повысить безопасность кода и уменьшить количество ошибок. Тем не менее со временем некоторые команды стали отказываться от TypeScript. Почему так происходит? Попробуем разобраться.

Создание сайдбара с помощью HTML, CSS и JavaScript

Хотите разработать пользовательскую боковую панель с HTML, CSS и JavaScript? Этот простой и понятный гайд с примерами кода позволит вам создать с нуля боковую панель и настроить ее по своему усмотрению.

Реализация шаблона Saga в микросервисах с помощью Node.js

Рассматриваем особенности использования шаблона Saga при создании приложений с наиболее востребованной сегодня микросервисной архитектурой.

Основные различия между Flexbox и CSS Grid

Главное отличие Flexbox от CSS Grid определяется размерностью. По сути, Flexbox создавался для одноразмерных макетов, а CSS Grid можно было применять к двухмерным макетам....

Автоматизация: друг или враг дизайнера?

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

Как работает интернет: основы архитектуры веб-сетей

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

Экспериментируем с пользовательскими функциями JavaScript на Trino

Как было бы здорово адаптировать Javascript к данным, а не приспосабливать данные к JavaScript. Что если создать простой коннектор Trino для выполнения произвольного Javascript на всей области данных? Действительно ли это хорошая идея? Выясним это вместе!

Новые возможности CSS

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

Как загружать изображения в RAILS API и возвращать их обратно

Мне потребовалась неделя, чтобы написать back-end основу для Supagram при помощи Rails API. Supagram — это легкий браузерный клон Instagram, в котором есть те же посты,...

F-строки и 3 эффективных способа их применения

Далеко в прошлом остались те времена, когда разработчики Python еще использовали оператор % для форматирования строк. С момента появления Python 3.0 его постепенно заменили вызовом...

Восемь быстрых советов по улучшению пользовательского интерфейса

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

Нужно ли дизайнеру уметь писать код?

Что важнее для дизайнера - писать код или уметь работать с ним? А может, достаточно овладеть навыками командной работы? Порассуждаем на эту тему.

Что такое React.memo и как он работает

Хотите повысить производительность React-приложений? Воспользуйтесь вызовом компонента React.memo. В результате мемоизации React будет использовать результат последнего рендера, избегая повторного рендеринга.

Почему в JavaScript, в функцию лучше передавать только один аргумент?

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

Введение в Page Visibility API

Познакомимся с Page Visibility API, рассмотрим его назначение, принцип работы, область применения и практические примеры.

TypeScript: продвинутые типы и их скрытые возможности

Признанный во всем мире TypeScript поражает своими возможностями. Но все ли из них вам известны? Погрузитесь в систему TS, чтобы открыть для себя новые возможности использования свойств-аксессоров, условных типов, вывода и рекурсии типов.

Быстро о главном: визуализация с D3.js

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

Kubernetes: безопасное управление секретами с GitOps

GitOps — это модное словечко в последнее время на слуху. Обозначает оно, по сути, декларативное управление ресурсами для такого представления текущего состояния, чтобы в...

Современный подход к разработке Angular

Создавайте современные компонуемые приложения Angular с помощью Bit. Благодаря своим мощным возможностям, бесшовной интеграции с Angular и готовой поддержке Ripple CI, Bit - идеальное решение для разработчиков, стремящихся повысить свой профессиональный уровень и создавать качественные веб-приложения.

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

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

Основные принципы кэширования веб-приложений

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

Как создать бессерверное приложение с Netlify и JavaScript

Обучающее руководство для новичков по созданию бессерверных функций с помощью Netlify: настройка проекта, создание приложения и развертывание API.

Создаем сайт для кинорулетки

Сайт для кинорулетки с отзывчивым веб-дизайном привлечет массу пользователей. Создать его поможет пошаговое руководство с визуализациями и примерами кода. В процессе разработки вы сможете развить навыки использования JavaScript/Vue, Mozilla Developer, Stack Overflow и других полезных ресурсов.

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

При работе над новой страницей своего веб-сайта я решил добавить Timeline, чтобы показать свои профессиональные достижения за последние годы. С помощью временной шкалы можно...

WebAssembly с Go: вывод веб-приложений на новый уровень

Развернем интеграцию WebAssembly с Go в браузерах, настроим среду Go, преобразуем код Go в WebAssembly и выполним его в веб-контексте. В итоге получим интерактивную платформу с конкретными, мощными возможностями.

5 самых полезных приемов в JavaScript

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

Программирование будущего: беспилотный автомобиль, управляемый JavaScript и ИИ

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

Эскизы - почему они так необходимы в работе дизайнера?

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

8 продвинутых вопросов для собеседования по JavaScript

Хотите стать JS-специалистом? Тогда стоит детально разобрать ключевые вопросы для собеседования по JavaScript. Это поможет вам усвоить основные понятия и успешно ответить на другие вопросы.

10 способов улучшить выпадающие списки в дизайне UI и UX

Выпадающие списки являются одним из наиболее широко используемых и универсальных инструментов для дизайнеров UI и UX. С их помощью можно с легкостью сгруппировать множество...

Стратегии рендеринга, которые должен знать каждый React-разработчик

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

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

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

Различия между псевдонимами типов и интерфейсами в TypeScript 4.6

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

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

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

JavaScript-анализ: выявление и устранение уязвимостей в веб-приложениях

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

Нововведения в Apache Airflow 2.0: смогут ли они удовлетворить текущие потребности инженерии данных

Преимущества Airflow 2.0 по сравнению с предыдущими версиями Пользовательский интерфейс Интерфейс Airflow 2.0 выглядит свежим и современным по сравнению с предыдущими версиями. Его основное преимущество заключается...

Экспорт данных в Excel с React

В React есть два способа реализации функции экспорта: с помощью любой сторонней библиотеки или с помощью создания компонента. Рассмотрим оба способа ниже. Пример проекта Возьмем простое...

Использование вебсокетов в промис-стиле

Уже не единожды на просторах интернетов обсуждались плюсы вебсокетов над xmlhttprequest(ajax) запросами. Из них основные — это скорость доставки(т.к. соединение всегда открыто) и экономия ресурсов (т.к....

Асинхронный JavaScript ― Цикл обработки событий

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

8 советов по разработке на JavaScript, которые освободят вас от переработок

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

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

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

Как тестировать компоненты React

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

Руководство по применению паттерна Event Bus в архитектуре React

Подробно разберем паттерн проектирования Event Bus, попрактикуемся в создании и задействуем его в React.

Шпаргалка по основным командам Bash

Неважно кто вы, разработчик ПО, специалист по данным, менеджер ИТ-инфраструктуры или просто любитель компьютеров — вам нужно знать, как пользоваться терминалом в Linux и...

Проектирование системы управления состояниями для повышения производительности: иерархическая реактивность

Context API убивает производительность вашего приложения скрытыми рендерами? Ознакомьтесь с фреймворком Neo.mjs, который оптимизирует управление состоянием пользовательского интерфейса. Он обеспечит вам и простоту, и скорость, и надежность.

Функции call, apply и bind: использование и сравнение

Изучите практические способы управления контекстом в JavaScript. Эффективное использование функций call, apply и bind обеспечит ожидаемую их работу в различных объектах и скриптах, повысит надежность и гибкость кода.

Как определить и протестировать SLO

SLO - уровень удовлетворенности пользователей производительностью сервиса. Предлагаем подробное руководство по определению и тестированию SLO для REST API с помощью Grafana Labs K6.

Меняем Async/Await на Promises.allSettled() для ускорения API-вызовов в Node.JS

Узнаем, откуда берется замедление при одновременном изменении более 50 записей и как в 10 раз ускорить операцию массового редактирования записей. Используем promise, чтобы не ждать возвращения каждого запроса на изменение, прежде чем делать следующий, и сэкономить много времени.

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