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

Бэкенд-разработчик: какие знания нужны для трудоустройства

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

Как создать простую браузерную игру с помощью Phaser 3 и TypeScript

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

Чистая архитектура фронтенда: 7 советов для достижения успеха

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

Цветовые схемы в дизайне

Цвет — один из важнейших элементов дизайнерских проектов, а не просто визуальная составляющая, приятная глазу. Он влияет на восприятие пользователя и на то, какие...

11 исходных программ JavaScript, предоставляющих шаблоны проектирования

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

Слоты: сделайте свой Angular API гибким

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

Улучшение производительности .NET Core API

Google предоставляет такую статистику посещаемости веб-страниц: 53% посетителей мобильных сайтов покидают страницу, если она загружается более трёх секунд.https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ Это значит, что очень важно сделать ваш сайт...

Как создать библиотеку компонентов для совместного использования

Пример Прежде чем начать, рассмотрим пример того, что должно получиться в результате. Здесь можно найти библиотеку Semantic-UI-React. Этот репозиторий также доступен как пакет на NPM. С...

Хватит использовать Fetch API в JavaScript

Каковы преимущества и недостатки Fetch API по сравнению с Axiom? Подробный обзор особенностей этих инструментов с примерами в коде.

Супергеройский макет: комбинируем CSS-сетки и CSS-фигуры

Создадим нестандартный макет на основе страницы комикса, используя свойство clip-path для наложения изображений и придания им нужных форм.

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

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

Введение в Web Share API

С каждым днем новые технологии сокращают разрыв между вебом и нативными приложениями. Один из таких примеров — прогрессивные веб-приложения, которые добавили в Интернет множество...

React в плагине Sketch: проблема загрузки исходных данных

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

Параллельный режим React - взгляд в будущее

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

Руководство по Webpack для начинающих

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

React TypeScript: Основы и лучшие практики

Подготовка к работе create-react-app с TypeScript $ npx create-react-app your-app-name --template typescript Если вы предпочитаете Yarn, используйте следующую команду: $ yarn create react-app your-app-name --template typescript Обратите внимание, что...

Движки JavaScript. Часть 2: генерация кода и базовые оптимизации

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

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

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

7 визуальных элементов в дизайне

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

Знакомство с ReactJS на базовом уровне

Что такое ReactJS? ReactJS очень популярный в среде веб-разработчиков инструмент. Что же он собой представляет? ReactJS — библиотека JavaScript, разработанная Facebook для создания пользовательских интерфейсов. С ее помощью разрабатываются...

Организация “глобальных” провайдеров во Flutter Riverpod с помощью миксинов

Изучите методы структурирования области применения провайдеров в Riverpod с помощью миксинов. Такой подход имеет как минимум 5 преимуществ и оказывается особенно полезным при масштабировании приложения и увеличении количества управляемых провайдеров.

API Chrome: 7 новинок

1. Web Bundles Этот API предоставляет возможность объединения веб-сайта в один файл. Более того, этим файлом можно поделиться через любое средство (Bluetooth или Wi-Fi Direct),...

Топ-10 инструментов, которые понадобятся каждому React-разработчику в 2024 году

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

Не стоит частить с if в JavaScript

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

Что значит this в JavaSсript?

Значение this — одна из самых запутанных составляющих JavaSсript. this может принимать различные значения в зависимости от того, где располагается. В этой статье мы рассмотрим, где используется...

Движок JavaScript: что внутри

Введение Чтобы разобраться в том, как работает механизм обработки кода (иначе говоря, движок JavaScript), надо понять, что происходит при выполнении кода. Такие знания помогают программистам...

Создание приложения для распознавания лиц с помощью Tensorflow.js

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

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

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

Почему useMemo — не просто кэширование

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

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

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

3 вида циклов for в JavaScript

Каждый знает хотя бы один вид цикла for. Это классика, и они есть почти в каждом языке. В JavaScript есть три вида циклов (или...

Как создать HTTP-фреймворк «Hello World!» на Rust

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

Микросервисы gRPC в NestJS: пошаговое руководство

Протокол gRPC (Remote Procedure Call) обеспечивает эффективное взаимодействие между микросервисами, способствуя повышению производительности и масштабируемости приложений NestJS. Рассмотрим возможности gRPC при обмене сообщениями между микросервисами, написанными на NestJS.

6 принципов создания производительных веб-приложений

Какие преимущества у WebP-формата? Расскажем, как разработать наиболее успешные веб-приложения, а также рассмотрим такие понятия, как API-дизайн и асинхронные скрипты.

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

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

Плохие практики Angular

Загрязнение ngOnInit ngOnInit - один из самых важных хуков жизненного цикла в компонентах Angular. Он используется для инициализации данных, настройки слушателей, создания соединений и т.д....

Сравниваем REST, GraphQL и gRPC

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

Чистый код JavaScript: обработка ошибок

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

Создание простого веб-скрейпера на Ruby

Введение Один из лучших способов доступа к данным сайта — через его API (интерфейс прикладного программирования). Но что, если у сайта нет API? Тогда стоит...

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

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

Создание многофункционального калькулятора на чистом JavaScript

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

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

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

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

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

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

Предыдущие части: Часть 1 Понимание проблемной области В кратком руководстве Clinic Doctor говорится что, если задержки Event Loop на уровне, который мы наблюдаем, весьма вероятно, что...

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

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

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

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

Cначала Vue, потом React: совет начинающим разработчикам

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

5 важных моментов из JavaScript, которые помогут избегать ошибок

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

Flutter против React Native: правильный выбор может определить успех вашего проекта

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

Инкапсуляция состояния в JavaScript без использования классов в 2019 году (с приватными полями!)

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

JavaScript превращается в TypeScript?

В интернете резко возросло количество пользователей, проводящих онлайн более 6 часов в день. Такой скачок привел к увеличению спроса на вакансии в сфере веб-разработки,...

TypeScript: разница между типами any и unknown

Чем тип any отличается от unknown? Рассмотрим нюансы их использования в описании неизвестного значения и утверждении типа.

Воссоздание графика вклада GitHub с помощью Flask и Google Sheets

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

Angular: как с функцией inject() сэкономить 1000 строк кода

В чем преимущества функции inject() по сравнению с конструкторами? Рассмотрим реальный пример, ссылки на коммиты - внутри.

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

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

10 инструментов, которые упростят жизнь веб-разработчика

Как разработчик, я считаю, что расширения для браузера — отличный способ повысить свою продуктивность. За время работы я составил список инструментов в Chrome, которые...

WebAssembly на Golang с нуля

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

HTML: полное руководство по заверстыванию текста вокруг изображения

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

Настройка проекта TypeScript с помощью ESLint, Prettier и VS Code

Собираетесь работать с проектом Typescript? Не забудьте настроить для него подходящую среду!

Связь между микро-фронтендами

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

PHP: типы циклов

Циклы в PHP используются для выполнения одного и того же блока кода определенное количество раз. Рассмотрим 4 типа циклов: for, while, do…while, foreach.

Python Django: Front End на React

Руководство о простом и быстром совмещении в одном проекте двух веб-фреймворков: Python и Django для Back end, Node.js и React для Front end

Как защитить сайт от скрейперов

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

Проектирование базы кода API GraphQL в Node.js

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

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

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

Как перейти от Flask к FastAPI

Из этой статьи вы узнаете о фундаментальных концепциях FastAPI и научитесь переносить сервер с Flask целиком на FastAPI. FastAPI представляет собой современный, быстрый (высокопроизводительный) веб-фреймворк...

Применение Let’s Encrypt для автоматизации HTTPS в кластерах Kubernetes на Raspberry Pi

Автоматическая генерация сертификатов — на первый взгляд, нечто прямиком из мира крупных корпораций, и потому вне досягаемости обычного разработчика, который размещает контент в кластере...

Быстрый веб-скрейпинг с библиотекой Polars

Рассказываем, как с помощью Polars выполнить простой и быстрый веб-скрейпинг с превращением таблиц с HTML-страниц в датафреймы Polars.

Реализация паттерна доступа к данным при работе с Drizzle

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

Чистый код на JavaScript: вертикальное форматирование

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

Будущее CSS: новейшие возможности языка декорирования в 2023 году

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

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

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

Не используйте for при переборе массивов

Циклы for имеют для меня особое значение. Довольно продолжительное время я активно их использовал, пытаясь уйти от циклов while. При этом неизбежно забываешь об...

Автоматическое пакетирование в React 18

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

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

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

Как использовать JavaScript и Node.js, чтобы сразиться с драконом в игре Fight the Dragon?

Выдалась свободная минутка? Почему бы не устроить эпичный баттл с драконом? Наше пошаговое руководство поможет выйти из боя победителем!

Полный гайд по SCSS/SASS

Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и...

10 хитрых приемов в JavaScript, о которых должен знать каждый разработчик

Рыночная доля JavaScript за последние 5–10 лет поднялась на новый уровень, особенно с тех пор, как в июне 2015 года был запущен ES6. Обновление...

Почему в React важен порядок вызова хуков?

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

Как правильно зарегистрировать плагин в nuxt.js

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

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

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

Обзор JavaScript на основе диалога с ChatGPT

Предлагаем вам обзор JavaScript, составленный по материалам интервью с ChatGPT. ИИ-модель продемонстрировала свои уникальные возможности, предоставив развернутые естественные ответы на 12 непростых вопросов.

Чистый код JavaScript - объекты и классы

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

Как развернуть React-приложение в Netlify

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

Сбросы базовых CSS-стилей для применения в любом приложении

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

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

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

Безопасность наглядно: CORS

Каждый разработчик периодически сталкивается с огромной красной строкой в консоли — Access to fetched has been blocked by CORS policy. Да, это здорово расстраивает. И хотя...

Поиск и использование компонентов с bit.dev для создания приложений

Bit упрощает использование компонентов из библиотек и приложений. Bit’s hub (bit.dev) облегчает поиск и взаимодействие с этими компонентами. В этой статье мы узнаем, как найти...

JavaScript: 5 нововведений 2021 года

JavaScript — это легкий для освоения язык программирования, что делает его весьма подходящим для начинающих. За многие годы он развился до такой степени, что...

TypeScript: основы

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

Ключевое слово this и контекст в JavaScript

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

Типы данных JavaScript

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

17 промежуточных программ для эффективной FastAPI-разработки

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

7 каверзных вопросов для проверки знаний о JavaScript

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

Управление памятью JavaScript: как избежать утечек памяти и повысить производительность

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

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

Продолжаем изучать руководство по TypeScript, чтобы пройти путь от новичка до профессионала! 2-я часть ознакомит вас с такими понятиями TypeScript, как вывод и утверждение типов, интерфейсы и их расширение, операторы typeof и as const, дженерики и классы. В конце статьи вас ждет шпаргалка по всему изученному материалу.

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