Обновить
256K+

Веб-разработка *

Делаем веб лучше

355,11
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Безопасность npm-проектов, часть 1

Время на прочтение9 мин
Охват и читатели11K

Безопасность npm-проектов, часть 1


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

Читать дальше →

Визуализация данных при отладке в Visual Studio Code

Время на прочтение2 мин
Охват и читатели20K


Вообще Debugger Visualizers для обычного Visual Studio — это очень старая тема (статья 2009 года), но не очень популярная. В большинстве случаев принято учить сразу дебажить, представляя процессы в голове, а штуки вроде сортировок и списков показываются на доске. В вебе часто визуальную часть предоставляет браузер, и все всем довольны. Но бывает, что списки или деревья в голове уже не умещаются, таблицы хочется отсортировать, а графики строить не выходя из среды отладки. Для всего этого и был создан плагин для VS Code — Debug Visualizer.
Читать дальше →

Как мы распилили монолит. Часть 1

Время на прочтение9 мин
Охват и читатели21K

Привет, меня зовут Ваня. Я решаю архитектурные задачи на фронтенде в Тинькофф Бизнесе и сейчас расскажу вам про одну из них.

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

Приступить к распилу

АМА с Хабром #21. Тестируем новый WYSIWYG

Время на прочтение3 мин
Охват и читатели6.7K

У меня есть причины не любить аббревиатуру WYSIWYG. Во-первых, я до сих пор не могу сходу её написать — всё время сначала проговариваю про себя расшифровку (What You See Is what You Get) и только потом пишу. Во-вторых, она ужасно читается, «визивиг» или, что ещё хуже, «висивиг» — отвратительнее только иметь дело с бандой tough-though-trough-through-thorough-thought-throw. В третьих, в ней аж две буквы «y», которая залипает в моём ноутбуке, но это так, совсем уж личное.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №430 (24 — 30 августа 2020)

Время на прочтение3 мин
Охват и читатели8.9K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

23 полезнейших Node.js-библиотеки, о которых стоит знать в 2020 году

Время на прочтение3 мин
Охват и читатели32K
Профессиональному Node.js-разработчику нужно быть в курсе того, что происходит в сфере пакетов, предназначенных для этой платформы. Ему нужно знать о том, что вышло свежего, и о том, какие пакеты, используемые для решения различных задач, пользуются популярностью. Дело тут в том, что разработка ПО в наши дни зависит от библиотек. Знание хороших библиотек способствует повышению производительности труда программиста и помогает ему разрабатывать качественные приложения. Сегодня мы поговорим о 23 полезных пакетах для Node.js.


Читать дальше →

Изучаю Scala: Часть 4 — WebSocket

Время на прочтение5 мин
Охват и читатели5.2K

Привет, Хабр! На этот раз я по пробовал сделать простенький чат через ВебСокеты. За подробностями добро пожаловать под кат.
Читать дальше →

Проектирование сайта — гарантия успешной его реализации. Личный опыт

Время на прочтение3 мин
Охват и читатели3.2K

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


Был период, когда разрабатывал сайты в небольшой веб-студии в Минске. Верстал и программировал лендинги, интернет-магазины, CRM и ERP системы. Полноценного этапа проектирования сайта в веб-студии не было по понятным причинам — дополнительные затраты.

Читать дальше →

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

Время на прочтение4 мин
Охват и читатели57K
…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

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



Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.
Читать дальше →

Сладкая жизнь, или Создание веб-приложения без написания кода

Время на прочтение7 мин
Охват и читатели7.5K

Сладкая жизнь, или Создание веб-приложения без написания кода



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

Читать дальше →

Micro-frontends. Асинхронный подход к мультикомандной разработке

Время на прочтение12 мин
Охват и читатели7.8K

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

Читать дальше →

Поиск лучшего фронтенд-инструмента 2021 года

Время на прочтение5 мин
Охват и читатели18K
Любой, кто начинает карьеру в сфере разработки программного обеспечения, скорее всего столкнётся с задачей выбора первого языка, фреймворка или набора инструментов. Уверен, каждому из вас это знакомо. Ответ на вопрос о том, что нужно изучать самым первым, найти не так уж и просто. Всё дело в том, что в индустрии программирования существует очень много языков и вспомогательных инструментов. Для того чтобы облегчить выбор инструментов тем программистам, которые нацелены на фронтенд-разработку с использованием JavaScript, я решил рассказать о трёх популярных JS-инструментах.



Речь пойдёт об Angular, React и Vue. Сначала я приведу материалы некоторых исследований, что поможет нам понять «расстановку сил» на арене современной веб-разработки. А потом расскажу о преимуществах и недостатках этих инструментов.
Читать дальше →

Дружим Angular с Google

Время на прочтение6 мин
Охват и читатели4.8K

Дружим Angular с Google


Google ненавидит SPA


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

Читать дальше →

Ближайшие события

JavaScript, Python или Go: что лучше всего подойдёт для бэкенд-разработки в 2021 году?

Время на прочтение6 мин
Охват и читатели58K
Уже прошло почти восемь месяцев 2020 года, а технические прогнозы на этот год всё выходят и выходят. И это — несмотря на то, что очень сложно предсказать будущее в такой динамично развивающейся индустрии, как разработка программного обеспечения. Тот, кто работает в этой индустрии, видел, как технологии приходят и уходят. Иногда эти технологии проводят свою недолгую жизнь практически незаметно. Технологиям нелегко выживать в мире программирования.

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



Я — программист. Мне очень нравится JavaScript (у меня с этим языком, так сказать, «вечная связь»), я пишу на этом языке уже давно. Но если немного оглядеться, то можно заметить, что в мире разработки ПО есть и другие языки. Предлагаю поразмыслить о том, что лучше использовать для серверной разработки в 2021 году: JavaScript, Python или Go. Но, прежде чем говорить о сильных сторонах каждого из этих языков, давайте взглянем на результаты некоторых исследований.
Читать дальше →

Инкрементальный бэкап VDS с сайтом на 1С-Битрикс в Яндекс.Облако

Время на прочтение6 мин
Охват и читатели8.8K
Мне было необходимо делать 2 раза в сутки бэкап сайта на «1С-Битрикс: Управление сайтом» (файлов и базы mysql) и хранить историю изменений за 90 дней.

Сайт расположен на VDS под управлением ОС CentOS 7 с установленным «1С-Битрикс: Веб-окружение». Дополнительно делать резервную копию настроек ОС.

Требования:

  • Частота — 2 раза в сутки;
  • Хранить копии за последние 90 дней;
  • Возможностью достать отдельные файлы за определенную дату, при необходимости;
  • Бэкап должен храниться в отличном от VDS дата-центре;
  • Возможность получить доступ к бэкапу из любого места (другой сервер, локальный компьютер и т.д.).

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

Речь идет не о снапшоте для быстрого восстановления всей системы, а именно о файлах и базе и историей изменения.
Читать дальше →

Крошечный генератор мелодий на JS — как он устроен

Время на прочтение3 мин
Охват и читатели6.1K
Рассказываем об инструменте ZzFXM, который пригодится разработчикам инди-игр или веб-приложений, вынужденных оперировать сильно ограниченным объемом памяти.

Также поговорим об аналогах — rFXGen, wafxr.

Читать дальше →

Изучаем Parcel — альтернативу Webpack для небольших проектов

Время на прочтение8 мин
Охват и читатели22K


Доброго времени суток, друзья!

Основное назначение сборщиков модулей или бандлеров, таких как Webpack или Parcel, состоит в том, чтобы обеспечить включение всех модулей, необходимых для работы приложения, в правильном порядке в один минифицированный (если речь идет о сборке для продакшна) скрипт, который подключается в index.html.

На самом деле сборщики, как правило, умеют оптимизировать не только JS, но и HTML, CSS-файлы, могут преобразовывать Less, Sass в CSS, TypeScript, React и Vue (JSX) в JavaScript, работать с изображениями, аудио, видео и другими форматами данных, а также предоставляют дополнительные возможности, такие как: создание карты (используемых) ресурсов или источников (source map), визуальное представление размера всего бандла и его отдельных частей (модулей, библиотек), разделение кода на части (chunks), в том числе, в целях переиспользования (например, библиотеки, которые используются в нескольких модулях, выносятся в отдельный файл и загружаются лишь раз), умная загрузка пакетов из npm (например, загрузка только русской локализации из moment.js), всевозможные плагины для решения специфичных задач и т.п.

В этом отношении лидерство, безусловно, принадлежит Вебпаку. Однако, что если мы разрабатываем проект, в котором большая часть функционала, предоставляемого этим замечательным инструментом, не нужна? Существуют ли альтернативы данной технологии, более простые в освоении и использовании? Для меня ответом на этот вопрос стал Parcel. К слову, если вы заинтересованы в изучении Вебпака, рекомендую к просмотру это видео. Мой файл с настройками Вебпака по данному туториалу находится здесь.
Читать дальше →

Пишем чат с использованием Spring Boot и WebSockets

Время на прочтение6 мин
Охват и читатели129K


Всем привет. В преддверии старта курса «Разработчик на Spring Framework» мы подготовили для вас еще один полезный перевод. Но, прежде чем перейти к статье, хотим поделиться с вами бесплатной записью урока от наших преподавателей по теме: «Рефакторинг кода приложений на Spring», а также предлагаем посмотреть запись вебинара из которого вы сможете подробно узнать о программе курса и формате обучения.

А теперь перейдем к статье



В статье Building Scalable Facebook-like Notification using Server-Sent Event and Redis для отправки сообщений от сервера клиенту мы использовали Server-sent Events. Также там было упомянуто о WebSocket — технологии двунаправленной связи между сервером и клиентом.

В этой статье мы посмотрим на один из распространенных примеров использования WebSocket. Мы напишем приложение для обмена приватными сообщениями.

Ниже на видео продемонстрировано то, что мы собираемся сделать.

Ленивая загрузка для карт

Время на прочтение2 мин
Охват и читатели10K
Если на странице есть интерактивная карта Яндекса или Google, то она может отнять несколько секунд в скорости загрузки, и здорово испортить отчет Google PageSpeed.

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

В TypeScript 4.0 наконец появилось то, чего я очень ждал

Время на прочтение3 мин
Охват и читатели22K
6 августа сего года Microsoft объявила о выходе релиз-кандидата TypeScript 4.0. Там появилась поддержка кортежей с маркированными элементами (Labeled Tuple Elements). А это — именно то, появления чего я ждал в TypeScript.


Наверху — аргументы, которым назначены содержательные метки. Внизу — аргументы с бесполезными именами

Почему я этого ждал? Объясню это на примере разработки функции.
Читать дальше →