Препарируем Tailwind CSS и находим родовые травмы
Бандлинг лишь используемых стилей, но..
Тормоза при любой динамике.
Раздутый HTML.
Крайне слабая кастомизация стороннего кода.
Сложный массовый рефакторинг.
Куча стилей компонента в одну строку.
Копилка благодарностей: https://boosty.to/hyoo
Препарируем StyleX и находим родовые травмы
Решение от большой компании, но..
Раздутый как CSS, так и HTML, и даже JS
Несемантичный CSS и HTML
Околонулевая типизация без автодополнения
Много бойлерплейта
Зависимость от Babel
Тормозная сборка
Сложная отладка
Копилка благодарностей: https://boosty.to/hyoo
Возможно, вы уже читали мою статью про ИТ шансон и проект Витя Айтишник! Если нет, то оч советую)
В данном посте же речь пойдет об ощущении нового года... О том что дает нам ощущение праздника. Мандарины... Запах елки... И голубой огорек!
И так как все таки мой эксперемент "Витя Айтишник" показывает мало мальски прикольные результаты, я выпустил специальный новогодний альбом с ИТ песнями!
Пусть ваши карпораты наполнятся ИТшными напевами и дурацким юмором)
В любом случае) Для меня уже успех если кого то он просто улыбнет)
Спасибо что поддержали это прект)
A? Frontend #5: Гослинг, микросервисы, CI/CD, K8S, T-shape
22 декабря проведем митап сообщества A? Frontend для всех, кто хочет развиваться во фронтенд-разработке. В программе четыре доклада.
Зачем ты сюда пришел?
Работает ли «нетворкинг»? Почему он должен работать? Как именно в вашей карьере он может помочь? Нужно ли выталкивать себя из зоны комфорта и идти знакомиться с людьми? Что такое сильные и слабые связи? Выжил ли Гослинг в конце драйва?
Спикер: Максим Булавчиков, Frontend-разработчик в Сбере.
Программирование без стресса: ключевые принципы
Пропустил пробел? Ошибка. Неверно индексировали массив? Ошибка. Не разобрались в нюансах работы исходного кода? Ошибка. И причина многих из этих ошибок — когнитивные проблемы.
Спикер: Алексей Табула, Frontend-разработчик в BetaRobotics
Зачем становиться T-shape?
Особенности T-shape специалистов, их важность для команды, польза для самого специалиста, как развить в себе T-shape навыки.
Спикер: Александра Моисеева, Frontend-разработчик в Тинькофф
Страшный сон Frontend'еров — микросервисы, CI/CD, pipeline, kubernetes
Какое отношение эти слова имеют к Frontend'у? Как мы дошли до жизни такой? Чтобы разобраться, изучим историю развития архитектуры web-приложений от простых HTML-страниц до современных web-сервисов.
Спикер: Александр Курилкин, Frontend-разработчик в Альфа-Банке
Митап пройдет в г. Санкт-Петербург, Малый просп. Петроградской стороны, 87, офис Альфа-Банка
Регистрация — через форму по ссылке.
Три подкаста про frontend на YouTube-канале Cloud.ru Tech 🎧
Всем привет! Сделали небольшую подборку подкастов для frontend-разработчиков (и не только) с нашего YouTube-канала Cloud.ru Tech.
С Артемом Шовкиным — senior frontend-разработчиком СБОЛ.про обсудили, с чего начать знакомство с WebAssembly, что закидывать в Def Dependencies, может ли ChatGPT заменить разработчика и как правильно готовиться к собеседованиям.
🎤 Почему нужно учить алгоритмы? Правильный frontend
С руководителем группы в Яндекс Маркет Семеном Левенсоном поговорили про то, как поддерживать хороший код на проекте, действительно ли вечный рефакторинг — это плохо, как не надо писать storybook и нужны ли микрофронты.
🎤 Про frontend-разработку и проблемы open source
Владислав Кибенко — веб-разработчик Yandex Search, рассказал про опыт перехода с backend на frontend, что больше всего бесит в open source, почему курсы — плохой способ попасть в IT, и как бороться со страхом публичных выступлений.
Подписывайтесь на YouTube-канал Cloud.ru Tech, чтобы быть в курсе IT-трендов.
Что еще полезного есть в блоге:
Сложности работы с GraphQL, или Почему не стоит его использовать повсеместно
1. Внедрение GraphQL — это сложно. Поэтому перед практическим использованием выделите достаточно времени и ресурсов для изучения концепции и структуры.
2. Когда вы реализуете REST API, можете закэшировать ответ по каждому эндпоинту. В GraphQL запросы динамические, содержат разный набор полей и связей:
query {
user(id: 1) {
id
name
posts {
id
title
comments {
id
text
}
}
}
}В этом запросе вы получаете данные из разных источников: пользователи, посты, комменты. Для оптимальной работы придётся продумывать более точечное кэширование.
3. А теперь представьте, что в запросе выше ещё больше вложенных запросов. По умолчанию GraphQL не ограничивает вас в глубине вложенности, что может вызвать шквал базовых запросов. Это сказывается на производительности сервера.
4. GraphQL не гарантирует атомарность выполнения нескольких мутаций:
mutation {
createPost(title: "New Post", body: "Content") {
id
title
}
updateAuthor(id: 1, name: "New Name") {
id
name
}
}С одной стороны, это гибко и удобно, а с другой, — а что произойдет, если одна мутация пройдёт, а другая отвалится?
Поэтому не стоит жечь напалмом REST API и переписывать всё на новую технологию. GraphQL — удобный инструмент, но перед использованием важно понять, на каких проектах эта гибкость пригодится, а где будет лишней.
Больше об управлении разработкой — в нашем телегам-канале.
Про формат Talks на YouTube-канале Cloud.ru Tech 🎙️
Недавно мы рассказали про YouTube-канал Cloud.ru Tech, а сегодня хотим анонсировать один из форматов видео на канале — Talks.
🎓Talks — это короткие обучающие доклады, которые помогают разобраться в конкретной теме, найти решение проблемы или понять, как оптимизировать рабочие задачи и процессы. На канале уже можно посмотреть выпуски Frontend Talks и QA Talks, а совсем скоро мы запустим и DevOps Talks.
Подписывайтесь на Cloud.ru Tech, чтобы быть в курсе best practice в IT.
Недавно к нам обратился клиент, у которого потенциально 2 млн пользователей и ему нужно разработать стриминговый сервис, где 10К-20К пользователей могут смотреть медиа-контент в разрешении 4К онлайн.
Фильм 4К весит 5 гб, если 10К пользователей одновременно его смотрят, то это большая нагрузка на хранилище данных. Сложность в том, чтобы сбалансировать трафик на сервис, чтобы система не перегружалась, а пользователи не испытывали дискомфорта.
Чтобы этого добиться, нужно написать ПО таким образом, чтобы плеер или серверная часть отдала контент порционным пользователям. Так мы распределим нагрузку.
Для хранения контента на 2 млн человек, потребуется от 300-400 ТБ устойчивого хранилища. Нужно построить системы хранения данных.
Нужна защита хранилища, если какой-то жесткий диск выйдет из строя, чтобы не потерять лицензионный контент.
Когда 10 тыс. человек запрашивают одно видео или хотя бы два-три видео, это легко решается кешированием. А если эти 10 тыс. смотрит разный контент, то стандартная СХД не справится. Скорость не позволит находить это на жестких дисках.
В реализации нужно:
— Построить архитектуру хранения и обслуживания клиентов СХД с высоким уровнем IOPS — количество запросов, которые приходят к системе хранения данных за секунду. Чем ровнее запросы из разных секторов жестких дисков, тем сложнее и дольше приходится обрабатывать их сервера.
— Построить балансировщики, которые обрабатывают большое количество разного контента на обычных HDD дисках и отказоустойчивых хранилищах.
Is Joomla 5 the WordPress 6 KILLER of 2024? CMS Comparison: Who Reigns Supreme?
На YouTube канале WebTech with Brett (Брет Ренсли) вышло любопытное видео, где сравнивается разработка шаблона на Joomla 5 и Wordpress 6.
Для чистоты эксперимента автор выбрал одну несложную страницу и воссоздал её на обеих CMS. Для воссоздания дизайна использовались стандартные шаблоны в обеих системах.
Показатели для сравнения
Время установки.
Время на создание страницы:
Создание шаблона на Joomla заняло 53 минуты 38 секунд.
Создание того же самого дизайна на базе дефлотной темы Wordpress заняло 57 минут 47 секунд. Хотя в целом порядок временных затрат - одинаковый.
Лёгкость использования. Брет (автор видео) сказал, что "It really sucks", несмотря на то, что он любит WordPress, использует его для своих сайтов.
Показатели Lighthouse. По сумме показателей Joomla вышла вперёд с небольшим отрывом. По времени загрузки страницы Joomla 5 показала результат в 1.1 секунды против 1.67 у Wordpress.
Такие "соревнования" вызывают чисто спортивный интерес, может даже азарт, но для объективных оценок скорее всего мало применимы. Мы понимаем, что за 53 минуты можно просто не успеть сделать некоторые мелочи, которые дали бы прирост показателей, если главное - именно они. Но похоливарить можно ))
Кстати, добро пожаловать в Joomla-чат в Telegram
Почалось: объявляем старт регулярных хакатонов по $mol!
Промочив горло световухой, Капитан Моль объявляет старт регулярных хакатонов для захвата новых берегов!
Как долго?
В наших месячных странствиях, ваш борт вооружен всем инструментарием экосистемы $mol'a:
децентрализованной базой данных
возможностью в пару строк переиспользовать компоненты других приложений на $mol'e
Капитан будет рад презентации решений в нашем порту. О нем мы, мольки, расписывали здесь.
Требования
На финишной прямой, каждый фрегат будет допущен к оценке при наличии идеи и её базовой реализации
Основные положения кодекса описаны здесь.
Тема
Игры/тулинг - это может быть прототип игры, либо же инструментарий для их создания.
Например: редактор тайловых карт, генератор уровней и умений..
Призовой фонд
Наш пиратский островок растет. И чтобы оставаться на плову, мы начнем с малого.
В сокровищах мы наскребли 7 тысяч рублей.
В нашей каюте Капитан Моль выделил следующие койки:
1 место - 3000р.
2 место - 2000р.
3 место - 1000р.
Внебортовые селедки мирового океана также проголосуют за понравившийся борт.
Приз селедочных симпатий - 1000р.
Даты
Старт 27.10.2023
Финиш 27.11.2023
Где мы?
Будем рады оказать помощь в ваших начинаниях - не стесняйтесь напрашиваться чат в телеграме и дискорде.
Продолжается перевод книги Vue.js 3 Design Patterns and Best Practices
На данный момент переведено 6 глав:
Глава 1, Фреймворк Vue 3
Глава 2, Принципы и шаблоны проектирования программного обеспечения
Глава 3, Создание рабочего проекта
Глава 4, Композиция пользовательского интерфейса с помощью компонентов
Глава 5, Одностраничные приложения
Глава 6, Прогрессивные веб-приложения
WT Content Image gallery v.1.2.0
Пакет плагинов галереи изображений и видео для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.
Что нового?
➕ Атрибуты alt и title из файла labels.txt.
Если Вы вставляете путь к директории с изображениями, то Вы можете указать для каждого изображения атрибуты alt и title в файле labels.txt, который следует положить в директорию рядом с изображениями. В конце строки символ | помещать не нужно.
Содержимое файла должно содержать информацию в следующем виде: имя_файла.webp | атрибут alt | атрибут title. Для каждого файла информация содержится в отдельной строке. Title для изображений можно не указывать, тогда строка будет вида image_2.webp|alt for image_2.
👩💻 Joomla 5 ready
Успешно проверена работа расширения на Joomla 5.
Вероятная ошибка при обновлении Joomla 4.4.0 через Joomla updater.
На днях вышла новая ветка Joomla 5.0.0, а также версия Joomla 4.4.0.
Некоторые пользователи Joomla столкнулись с проблемами, приводящими к неработающей странице Joomla 4.4.0 и невозможности входа в систему.
После релиза разработчики забыли обновить данные на сервере обновлений и при попытке обновить Joomla ветки 4.3.x на 4.4.0, происходило копирование файлов от Joomla 5 при сохранении базы 4.0. Это приводило к сбою установки без возможности входа в систему. Позже данные на сервере обновлений были обновлены.
В России ограничен доступ к серверу обновлений Joomla (облако Amazon S3), поэтому обычно пакеты обновлений выкачиваются с Github или иными способами.
Но если вы из другой страны и успели поймать этот баг, то вот документация как устранить проблему.
Обновление библиотеки WT Amo CRM для Joomla v.1.2.0
Небольшая нативная PHP библиотека для создания интеграций Joomla и Amo CRM. Для разработчиков.
Что нового?
Joomla 5 ready. Работа библиотеки успешно протестирована с Joomla 5.
Удаление старого refresh token. В параметры плагина добавлена кнопка для удаления старого refresh-токен из базы данных.
Языковые константы. Параметры плагина переделаны на использование языковых констант Joomla. Добавлена английская локализация.
NorrCompetition 2.0.2 – компонент голосований за фото и видео на Joomla 5
Вышла новая версия NorrCompetition версии 2.0.2 – популярного компонента для организации конкурсов и голосований на платформе Joomla.
Ключевой особенностью данной версии является совместимость с Joomla 5 и PHP 8.2. Начиная с этой версии, NorrCompetition можно установить на Joomla 5 без плагина обратной совместимости. Разработчики делают все возможное, чтобы предоставлять качественные услуги и постоянно работают над улучшением продуктов.
Кроме этого, версия идет со следующими улучшениями:
Masonry режим отображения участников (в виде плитки). Демо можно посмотреть здесь;
Опция для отключения Open Graph разметки, генерируемой компонентом (это может быть полезно, если на вашем сайте есть другой системный плагин, который генерирует Open Graph, и вам нужно избегать дублирования тегов).
Впервые NorrCompetition был выпущен в 2015 году и с тех пор продукт прошел путь до функционального решения с множеством настроек. Вы можете создавать фото, видео и простые конкурсы.
Подробнее о продукте:
Страница продукта на сайте разработчика
Продукт в российском каталоге SovMart
Как создать голосование за фото и видео на Joomla (урок)
Анимация в Spline 3D
Анимация в Spline предельно упрощена. Настолько, что там нет привычного таймлайна с ключевыми кадрами.
Вместо ключевых кадров здесь используются Состояния (States). Состояния обрабатываются отдельно для каждого объекта. Можно настраивать типы взаимодействий, их длительность, графики и задержки перед стартом.
По типам взаимодействий нужно будет рассказать отдельно. Я использовал для этого ролика Transition.
В Joomla Extensions Directory появился тег совместимости с Joomla 5.
Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку 😎
На скриншоте видно, что галочки 2. В Joomla 5 есть плагин обратной совместимости (группа Behaviour, Behaviour - Backward Compatibility), который подключает алиасы старых классов ядра. Таким образом расширения, использующие старое Joomla API могут работать и на Joomla 5 (если одновременно и поддерживают PHP 8.1+). Если же плагин отключён, то можно считать, что Вы прыгнули в будущее и находитесь почти в Joomla 6.
Неожиданно для себя я начал преподавать веб-разработку в государственном вузе. Курс не профильный, для работников медиа. Но большая часть из них уйдет работать в электронные СМИ или даже оснует собственные, поэтому им будет полезно получить общее представление о том, как всё это устроено.
Часов по плану довольно много. За сентябрь я успел дать лабу по сетевой адресации, 2 лабы по HTML, лабу по CSS. На очереди лаба по микроразметке, лаба JS, лабы по различным конструкторам сайтов.
Уровень компьютерной грамотности у обучаемых разнородный. В основной массе – низкий. У многих возникают проблемы даже со сменой расширения файла.
Хочется дать им потрогать какую-нить CMS, вроде того же WP. Но тут есть затык: занятия разбросаны по множеству аудиторий – виртуальный сервер во всех не установишь. Думал договориться с компанией, предоставляющей бесплатный хостинг для новичков, чтобы не банили, когда начнется массовая регистрация аккаунтов с айпишников вуза. Но это такой себе план.
В общем, если у вас есть советы, или уже готовые лабы (например, остались со времен вашей учебы), или вы хотите, чтобы я рассказал студентам что-то, что вам своевременно не рассказали о веб-разработке – буду признателен, если вы этим со мной поделитесь.
WT Content Image gallery v.1.1.0
Пакет плагинов галереи изображений для вставки в материалы и модули Joomla, а так же везде, где работают плагины группы content. Плагин работает по шорткодам {gallery}...{/gallery} и {gallery tmpl=tmplName}...{/gallery}, где tmpl - макет tmplName.php в plugins/content/wtcontentimagegallery/tmpl.
Что нового?
✔️ Добавлена поддержка видео файлов HTML5. Добавлена поддержка видео файлов HTML5 - mp4, webm, ogv. Все способы добавления файлов в галерею определяют видео файлы. Для тега video согласно спецификации HTML5 нужно указывать атрибут poster - картинку, которая будет показана в качестве заставки до начала воспроизведения видео. Файл poster-изображения для видео должен иметь такое же название, как и сам файл видео и находиться в той же папке. Тогда плагин найдёт и будет использовать его автоматически.
⚠️ Изменения в макетах вывода. В макетах вывода добавились условия по типу элемента: фото или видео. Посмотрите код в стандартных макетах и внесите изменения в свои собственные по образу и подобию.
✔️ Новый макет вывода - Masonry. Для плагина добавлен новый макет вывода - masonry. Для работы этого макета нужно подключить скрипт вручную или с помощью плагина веб-ассета WT Masonry. Данный макет выведет "стену" из фото и видео аналогично социальной сети Pinterest. Для видео по умолчанию добавлено автовоспроизведение. Вы можете скопировать данный макет, переименовать его и внести необходимые Вам изменения в код.
Кто ты? Маг, воин, продавец кожи или хозяин волшебного паба? Заходи к нам гость, на Alfa Frontend Meetup #2, окунись в атмосферу магической деревушки. Вокруг бурлящие котлы, деревянные щиты, свитки, волшебные карты и кристаллы. Заходи к нам на архитектурный митап о frontend-разработке и послушай наши истории! Расскажем, на стыке каких компетенций находится архитектура — DevOps, Backend, Infrastructure. Поговорим про улучшение Developer Experience с технической стороны, подходах к разработке в frontend, инфраструктуре проекта и др.
В программе:
Олег Сидоркин, техлид разработки направления автоматизации кредитования розничных продуктов в Альфа-Банке, и его доклад «Как достроить вавилонскую башню. О роли архитектора и системном подходе».
Иван Артамонов, руководитель группы разработки в Яндексе. Доклад — «Как мы ускоряли time-to-market» о том, как отдел разработки рос, и вместе с тем
Евгений Мальченко, старший разработчик продуктов в QIWI. Доклад «DevX микрофронтендов»
Приходи к нам 11 октября на Alfa Frontend Meetup #2 и окунись в мир Dungeons & Dragons с бурлящими котлами и бочками с яствами, лотереей на критическую удачу и мерч от Альфа-Банка.