Как стать автором
Обновить
380.61

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

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

Сначала показывать
Период
Уровень сложности

JavaScript повсюду или почему веб-технологии захватили мир

Время на прочтение18 мин
Количество просмотров15K

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

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

Читать далее
Всего голосов 42: ↑39 и ↓3+36
Комментарии38

Как создать 100 серверов в облаке за минуту? Базовая работа с OpenStack клиентом

Время на прочтение8 мин
Количество просмотров4.8K

Для управления облачной инфраструктурой в индустрии накопилось достаточно много инструментов: terraform, pulumi, ansible, управление через SDK или напрямую через REST API.

При этом часто упускают из виду CLI инструменты в связке с shell-автоматизацией. А зря! Они помогают экономить время, которое тратится на ручное создание серверов или изучение сложных инструментов.
Читать дальше →
Всего голосов 37: ↑36 и ↓1+35
Комментарии4

GraphQL: от восторга до разочарования

Время на прочтение14 мин
Количество просмотров17K

Задаётесь вопросом, стоит ли использовать GraphQL в своём проекте? Ваши разработчики спорят, выдвигая аргументы типа «GraphQL — это будущее» и «REST проще»? Мы с моей командой обсуждали эту тему бесконечно. В статье я приведу краткие выводы.

Предисловие: GraphQL в моде, вы найдёте множество статей, насколько он потрясающий, однако спустя три года его использования я немного огорчён и разочарован этой технологией, поэтому не воспринимайте мои слова, как истину в последней инстанции.
Читать дальше →
Всего голосов 43: ↑39 и ↓4+35
Комментарии79

Продуктовый подход к pet-проекту или как я разработал музыкальное веб-приложение

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров8K

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

Читать далее
Всего голосов 38: ↑36 и ↓2+34
Комментарии29

Истории

Как я сделал проект для себя и получил приз от Telegram

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров18K

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

Читать далее
Всего голосов 36: ↑35 и ↓1+34
Комментарии15

Эта статья опубликована в прошлом году

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров9.6K

Здравствуйте, меня зовут Дмитрий Карловский, и я.. буквально только что написал эту статью. Ну, на самом деле вчера. А если точнее, то в этом году. Удачи вам понять когда же именно.

Далее вашему вниманию представлен чуть более подробный, но всё же бесчеловечный анализ этого вопроса..

Так когда же именно?
Всего голосов 64: ↑49 и ↓15+34
Комментарии78

Эффективные бэкапы в S3 с помощью Restic: краткое пособие по настройке

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров3.7K

В 2007 многие администраторы настраивали бэкапы с помощью утилиты rsync, но для этого нужно было выделять отдельный хост для хранилища. И одной из частых проблем было резервирование этого сервера для бэкапов, которое увеличивало накладные расходы. Также хост бэкапирования располагался рядом с устройствами, для которых нужно было выполнить резервное копирование, настроить мониторинг и другое. Это нарушало правило 3-2-1, поэтому для построения действительно надежной системы нужно располагать хосты в разных дата-центрах.

Сегодня можно прибегнуть к услугам облачного хранения данных — например, использовать объектное хранилище Selectel. В этой инструкции рассмотрим, как работать с ним с помощью утилиты Restic.
Читать дальше →
Всего голосов 36: ↑35 и ↓1+34
Комментарии1

Как развернуть сайт c помощью Terraform

Время на прочтение6 мин
Количество просмотров6.9K


Привет, Хабр! В этой инструкции я покажу, как развернуть сайт в Kubernetes c помощью Terraform. Разберу интеграцию CRaaS с Managed Kubernetes, которая сократит ручную настройку и поможет публиковать образы контейнеров всего в несколько кликов.

Дисклеймер: мы не будем c нуля разбирать особенности работы с Terraform. Если вы не работали с этим инструментом, изучите сначала материал «Как развернуть свое приложение в Kubernetes».
Читать дальше →
Всего голосов 26: ↑29.5 и ↓-3.5+33
Комментарии9

Полное краткое руководство по grammY — JS-библиотеке для создания Telegram-ботов

Уровень сложностиПростой
Время на прочтение18 мин
Количество просмотров6.1K

Привет! Меня зовут Арсений, я сеньор фронтенд-разработчик. В этой статье хочу рассказать про основные механизмы библиотеки grammY и разобрать стартовый набор файлов бота, обработку ошибок, виды обработчиков событий, контекст обновлений, работу с разными видами клавиатур и многое другое. И все это — на реальных примерах.

В конце покажу, как задеплоить готового бота на сервере, чтобы он работал автономно и был доступен в любое время. Поехали!
Читать дальше →
Всего голосов 32: ↑32.5 и ↓-0.5+33
Комментарии4

Анализируем виды тестов для Frontend

Уровень сложностиПростой
Время на прочтение14 мин
Количество просмотров7.3K

С развитием веба сайты превратились в сложные приложения, которыми ежедневно пользуются десятки и сотни миллионов людей: почта, облачные хранилища, соцсети, маркетплейсы, стриминговые платформы и т. д. И каждое из них должно работать корректно. Как это сделать? Конечно писать хороший код, а потом и тестировать его. Хотя кто‑то обходится без тестов, тем не менее тестирование — важная часть инженерных практик наравне с мониторингом. Оно помогает нам заблаговременно находить и исправлять баги (или незапланированные фичи) в приложениях. Основная цель тестирования — получить гарантию корректной работы любого ПО .

При этом тестировать современный фронтенд сложно: неуправляемая асинхронность (событийная модель браузера), различие браузеров, тяжелое окружение — это лишь малая часть сложностей. Можно ли все возложить на ручных тестировщиков или исправлять баги после жалоб пользователей? Однозначно нет. В большинстве случаев такой подход в скором времени приведет к оттоку пользователей: не все пишут о багах, просто уходят к конкурентам. Безусловно, ручное тестирование остается важным элементом разработки, но тестировщики не могут держать сотни или тысячи сценариев, которые нужно пройти перед релизом или запуском новой фичи. Так где нам получить гарантии, что ключевые сценарии приложения работают корректно? Автоматическое тестирование.

Всем привет! Меня зовут Миша, работаю фронтэнд‑разработчиком в VK в команде Облака Mail.ru, и я хочу разобрать различные виды тестов, дать их сравнительный анализ и применимость. Сразу скажу, тут не будет практики написания тестов. Потому что это нереально сделать внутри одной статьи, необходимо разобрать: теорию тестирования, классов эквивалентности, различие подходов/методов к тестированию, комбинаторику состояний, правильное использование моков и стабов, понимание чистых функций, знание архитектуры приложения. Поэтому предлагаю сконцентрироваться на видах тестирования и начать с «идеального теста».

Читать далее
Всего голосов 33: ↑33 и ↓0+33
Комментарии2

Как использовать html-элемент <dialog>?

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров17K

Привет, Хабр! Меня зовут Александр Григоренко, я фронтенд-разработчик. В основном, занимаюсь разработкой приложений на React, но также постоянно экспериментирую с различными технологиями.

В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Давайте познакомимся с возможностями <dialog> поближе.

Читать далее
Всего голосов 33: ↑33 и ↓0+33
Комментарии19

Неизвестно полезный CSS. Часть 2

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров6.6K


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


Сегодня мы рассмотрим:

  • загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
  • как с помощью неё же ускорить загрузку страницы;
  • можно ли использовать нестандартный шрифт без его загрузки;
  • чем полезен псевдо-класс :focus-within при вёрстке кастомных чекбоксов;
  • мой любимый лайфхак на основе пользовательских CSS-свойств.

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

Читать дальше →
Всего голосов 22: ↑27 и ↓-5+32
Комментарии7

Бэкапы для самых маленьких и матерых

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров13K

Представьте: вы недавно основали небольшое веб-приложение. Но только он стал расти как полноценный проект — Бац! — серверы легли, а данные не сохранились. Нужно было делать бэкапы. Казалось бы, совет достаточно простой и базовый, но какой тип резервного копирования выбрать? И как правильно к нему «подойти»?

Сегодня — международный день бэкапов. Кажется, это отличный повод, чтобы вспомнить, почему резервное копирование так важно, какое оно бывает и как его настроить. Подробности под катом!
Читать дальше →
Всего голосов 32: ↑32 и ↓0+32
Комментарии10

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

Идемпотентность: больше, чем кажется

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров18K

image


Друзья, всем привет! Идемпотентность в проектировании API — не просто формальность. Это свойство, часто рассматриваемое как способ получения одинакового ответа на повторяющийся запрос, на самом деле означает гораздо больше...

Читать дальше →
Всего голосов 32: ↑32 и ↓0+32
Комментарии9

Чем занимается AppSec? Безопасность внутренних веб-ресурсов

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.6K

Довольно долгое время вероятным нарушителем считался только злоумышленник из интернета. На сегодняшний день компании весьма неплохо научились защищать внешний периметр, по крайней мере, важные активы. Но внешние ИТ-ресурсы — это лишь вершина айсберга. Во внутреннем периметре любой компании существует огромное множество процессов работы с данными и соответствующих ресурсов. Число пользователей таких систем может исчисляться тысячами: в больших ИТ-компаниях работают сотни и тысячи сотрудников, с доступом ко внутренним ресурсам, при этом постоянно происходит множество ротаций. Всё это создаёт риски компрометации продукта и утечки данных. 

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

Читать далее
Всего голосов 32: ↑32 и ↓0+32
Комментарии0

Структура объекта в JavaScript движках

Время на прочтение23 мин
Количество просмотров6.5K

С точки зрения разработчика, объекты в JavaScript довольно гибкие и понятные. Мы можем добавлять, удалять и изменять свойства объекта по своему усмотрению. Однако мало кто задумывается о том, как объекты хранятся в памяти и обрабатываются JS-движками. Могут ли действия разработчика, прямо или косвенно, оказать влияние на производительность и потребление памяти? Попробуем разобраться во всем этом в этой статье.

Читать далее
Всего голосов 30: ↑30.5 и ↓-0.5+31
Комментарии1

Как задеплоить сайт в облако. Инструкция для новичков

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров6.5K

Опубликовать сайт можно разными способами. Например, если проект лежит в репозитории на GitHub, можно воспользоваться GitHub Pages. Но если вы не боитесь трудностей, советуем попробовать кое-что поинтересней — разместить сайт на облачном сервере.

Новичкам этот способ может показаться сложным. Но на самом деле он очень удобен, потому что вы сможете легко масштабировать архитектуру проекта и гибко управлять мощностями сервера.
Читать дальше →
Всего голосов 41: ↑36 и ↓5+31
Комментарии18

Сервис для блокировки ботов, домашняя бухгалтерия и онлайн-комиксы: 5 идей для pet-проектов

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4.6K

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

В этом материале собрали новую подборку интересных проектов сотрудников Selectel. Черпайте идеи и делитесь своим опытом в комментариях!
Читать дальше →
Всего голосов 39: ↑35 и ↓4+31
Комментарии5

Микрофронтенд для самых маленьких

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров19K

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

Читать далее
Всего голосов 33: ↑32 и ↓1+31
Комментарии17

По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров4.2K

VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.

Всем хабропривет. Я Леонид Шевчук, старший разработчик. Четыре года создаю мини-приложения. Руковожу командой фронтенд-разработки VK Знакомств. Наш сервис разработан как мини-приложение ВКонтакте. Это яркий пример того, что на платформе VK Mini Apps можно делать продукты с очень развитой функциональностью.

Эта статья пригодится тем, кто ещё не работал с нашей платформой, поэтому я буду рассказывать очевидные для опытных разработчиков вещи. Сначала мы освежим в памяти, на каких технологиях делаются современные веб-приложения. Затем научимся портировать в VK Mini Apps — на примере приложения для планирования дел, написанного на React. И сделаем это так, чтобы оно выглядело органично для платформы. А для чего это всё нужно? Сейчас объясню.

Читать далее
Всего голосов 35: ↑33 и ↓2+31
Комментарии11
Изменить настройки темы

Вклад авторов