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

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

Меня зовут Абузар Мамедов, я студент курса «Фронтенд-разработчик» в Яндекс Практикуме, а этими проектами я занимался во время учёбы. Текст может быть полезен новичкам, которые хотят больше практиковаться и найти идеи для собственных проектов. 

В статье я подробнее расскажу о трёх проектах: генератор резюме с динамическим заполнением и SPA-приложение интернет-магазина и ещё одно приложение на React для поиска GIF. Чтобы понять, что можно улучшить, наставник курса Алексей Гмитрон оценил их качество и поделился мыслями.

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

Привет, я Антон Лисицкий — руководитель отдела дизайна компании Pyrobyte. Сегодня расскажу о том, как:

• зажечь огонь в глазах дизайнеров;

• научить их правильно распоряжаться своим временем;

• сплотить команду, работая над некоммерческим проектом.

До этого я писал о разработке веб приложений на Nim здесь и здесь.

Что? Какой Nim? В заголовке указан Python!

Да, до недавнего времени писать веб приложения на веб фреймворке HappyX было возможно лишь с помощью Nim. На данный момент HappyX доступен и на Python. Любой желающий может воспользоваться библиотекой, если не знает Nim.

В этой статье мы создадим фейковое API GitHub'а.

Для начала немного о Ghost. Как сказано на странице сравнения Ghost с WordPress на их сайте:

Ghost — это быстрая современная альтернатива WordPress, полностью ориентированная на профессиональную издательскую деятельность.

Движок Ghost, работающий на базе Node.js, рассчитан на самые различные применения – от простых текстовых блогов до профессиональных СМИ с любыми типами контента. Среди пользователей платформы — Apple, NASA, Mozilla, DuckDuckGo, x5x.host.

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

В этой статье я расскажу, как установить свой личный Ghost на сервер под управлением панели ispmanager, в которой имеется поддержка Node.js, как говорится, «искаропки».

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

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

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS.

Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те из вас, кто жил в 1990-х годах, наверняка помнят, что когда‑то, еще до того, как произошла революция CSS, им приходилось добавлять разметку стилей в свои HTML‑файлы. Но, по словам Tailwind, его подход «утилитарного класса» предлагает больше функциональности, чем встроенные стили, включая возможность создавать адаптивный дизайн (дизайн, адаптированный для мобильных устройств).

Таким образом, простота использования — особенно по сравнению с кодированием и последующим обслуживанием CSS‑файла — и возможность создавать свой стиль внутри HTML являются основными причинами, по которым многие разработчики любят Tailwind.

В своем посте Мэтт Рикард добавил в качестве ключевых преимуществ фреймворка следующие пункты:

Торг, депрессия, принятие… Все проходят в определенный период жизни эти стадии. И мы с агентством не исключение. Нам достался проект, в котором мы в полной мере ощутили эти периоды. Но! Несмотря на это мы снизили стоимость целевого обращения в 3,5 раза. Представьте, лид стоил 1781, а стал 509. И кстати, за месяц их получилось целых 94 штуки. Читайте в материале, что и к чему.

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

Традиционный перевод анонса от команды Google Chrome о нововведениях

• Document Picture-in-Picture API

• Улучшена отладка отсутствующих таблиц стилей в DevTools

• Свойство notRestoredReasons

И многое другое!

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

Привет, Хабр! VK совместно с МГТУ им. Н.Э. Баумана много лет активно развивает образовательные программы для студентов. Для этого у нас есть направление VK Education, которое помогает нам обучать студентов по широкому спектру IT и digital-специальностей. Один из совместных проектов – учебный центр для разработчиков на базе МГТУ им Н.Э. Баумана. На протяжении двух лет ребята проходили программу обучения, объединялись в команды и под руководством преподавателей и экспертов из VK создавали собственные проекты по разным направлениям — web-, ML- и Java-разработка высоконагруженных приложений.

Недавно в московском офисе VK состоялась защита выпускных работ. Экспертный совет выбрал лучшие проекты, часть из них удостоилась победы в специальной номинации –  «Выбор ментора».

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

VS Code сам по себе не обладает большим количеством функций и возможностей. Но это можно легко исправить при помощи плагинов, которые доступны в магазине расширений VS Code. Под катом — несколько плагинов, которые могут пригодиться разработчикам. Здесь есть многое — от управления проектами до «нескучных обоев», т. е. изменений в дизайне. Что же, поехали!

«В чём причина?» — такой первый вопрос я бы советовал задавать перед решением каждой ошибки и задачи.

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

Простой реальный пример с проекта, над которым я сейчас работаю.

Заголовок страницы заглавными написан «ПРОДУКТЫ» вместо «Продукты».

Следствие: видно сразу — быстро поправить и забыть про этот баг. Минимум приложенных усилий.

Доброго вам времени суток! Меня зовут Валерия, я фронтенд-разработчик из компании Doubletapp. Год своей жизни отдала на разработку видеоплеера с рекламными интеграциями. На старте была только спека, дока, единственная статья на Хабре, поясняющая за рекламу, и огроменное желание заказчика накрутить оную на видеоплеер. Пришло время и вас поближе познакомить с рекламой.

Статья подойдет тем, кто хочет разобраться в специфике работы VAST и VPAID, настроить кастомное управление рекламой, разместить видеорекламу отдельным блоком на сайте (out-stream) или разбить видеоролик рекламными интеграциями (in-stream).

  • Инструментарий, или Основные ингредиенты
  • Подробнее о VAST
  • Запускаем рекламный блок на странице (out-stream)
 • Подключаем IMA SDK
  • Инициализируем
  • Обрабатываем ошибки
  • Обрабатываем событие ADS_MANAGER_LOADED
  • Запрашиваем и воспроизводим рекламу
  • Продвинутое управление (въезжаем в обработку событий рекламы)
  • Локализация
  • Адаптивность
  • Обработка событий
• Разбиваем видеоролик рекламными паузами (in-stream, VMAP)
  • Подробнее о VMAP
  • Подключаем VMAP к видеоплееру
  • Ручное управление стартом рекламы
  • Особенности VPAID

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

Для этого надо просто чтобы Яндекс/Мейл и другие сделали такой виджет, который создает аккаунт на почте прямо в момент регистрации на стороннем сайте. При этом оставляя возможность указать дополнительный email куда будут дублироваться письма с уведомлениями.

И если государству так уж важно идентифицировать пользователей на своих серверах, то оно будет их идентифицировать.

А пользователю в общем-то не так важно, если уж он регистрируется на российском сайте, то он так или иначе оставляет российской власти возможность контроля - через этот сайт или через яндекс. А всякие уведомления он продолжит получать на сторонний email.

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

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

Сложность написания плагина сравнима со сложностью написания сценария для Gulp или GitHub Actions. Для примера напишем плагин, который будет вставлять фрагменты кода в файл index.html. В зависимости от проекта в данный файл необходимо помещать код Google Analytics, метатэги Open Graph и Twitter, подключение Service worker-a, виджета чата поддержки, сплэш скрин и многое другое. В результате index.html становится очень большим и ориентироваться в нем и блоках кода довольно сложно.

Наш плагин позволить держать фрагменты кода в отдельных файлах, а при сборке все будет помещаться в index.html. Причем это будет происходить не только при непосредственно сборке ( npm build ), но и при запуске Vite dev сервера с поддержкой HRM (Hot Module Replacement).

Современные веб-приложения, даже простые на вид, часто подразумевают нетривиальную архитектуру, состоящую из многих компонент. В статье «Делаем современное веб-приложение с нуля» я рассказал, как она может выглядеть, и собрал для демонстрации простейшую реализацию на стеке из нескольких популярных технологий. В неё вошёл бэкенд, фронтенд, воркер для асинхронных задач и аж два хранилища данных — MongoDB как основная база и Redis как очередь задач. В «Делаем поиск в веб-приложении с нуля» я показал, как можно добавить полнотекстовый поиск, и подключил третье хранилище — Elasticsearch.

Всё это время для простоты разработки и отладки компоненты приложения запускались локально через Docker Compose. Но как развернуть такое приложение в настоящем продакшн-окружении? Как обеспечить горизонтальное масштабирование? Как раскатывать новые релизы без простоя? 

В этой статье мы разберёмся, как разворачивать многокомпонентное веб-приложение в кластере Kubernetes на примере его локальной реализации — minikube. Мы поднимем виртуальный кластер прямо на рабочем ноутбуке, разберёмся с основными сущностями Kubernetes, запустим и соединим между собой компоненты демо-приложения и обсудим, какие ещё возможности Kubernetes пригодятся нам в суровом энтерпрайзе. Если вы занимаетесь разработкой и слышали о Kubernetes, но ещё не имели возможности пощупать его руками — добро пожаловать под кат!

Привет, меня зовут Андрей Гончаров, я Frontend Developer в Mish Product Lab. Сегодня подробно разберёмся, что такое Server/Backend‑Driven UI, как с ним работать и зачем он вообще нужен.

Redux и Effector — это две популярные библиотеки, которые используются для  управления состоянием в веб-приложениях. Но если первая широко известна во frontend-разработке, вторая только набирает обороты. В этой статье мы рассмотрим, как работают оба инструмента, разберем преимущества и недостатки и дадим рекомендации по использованию на проектах. Материал адресован frontend-разработчикам, которые ранее не сталкивались с Redux или хотят найти ему альтернативу.