Фронтенд — это то, что видит и с чем взаимодействует каждый пользователь интернета, но как он работает на самом деле?
HTML *
Стандартный язык разметки web-страниц
Новости
Как (не)удачно превращали LLM в 2d виртуальных сотрудников
Эта идея получила новую жизнь примерно восемь месяцев назад, когда Reworked AI представили llama 2d. Они научили языковые модели не просто «читать» текст, а по-настоящему воспринимать структуру и смысл двухмерных документов, таких как веб-страницы. Перед тем как расскажу как это работает - пару не очень удачных подходов, по которым пытались идти их конкуренты
Реализация событий через HTTP
Для некоторых задач, связанных с обновлением данных в реальном времени — например, новостные ленты, уведомления или поток чата, можно обойтись без сложных двусторонних протоколов, как WebSocket. Мы можем использовать простой механизм передачи данных от сервера к клиенту через HTTP, который часто оказывается удобнее и эффективнее в настройке для однонаправленного обмена данными.
Зачем нужны ключи в JavaScript фреймворках и библиотеках?
Всем привет! В данной статье я бы хотел рассказать о таком понятии как "ключи" в JavaScript фреймворках и библиотеках; зачем они используются и как помогают при работе с DOM.
Зачастую, на собеседованиях спрашивают про эту тему и нередко выходят ответы по типу: "чтобы предотвратить неконтролируемое поведение" или "их нужно указывать, т.к. это что-то на подобие уникальных идентификаторов" и др. Конечно, данные ответы с одной стороны - правильные, но главного они не отражают.
Я постараюсь внести небольшую ясность в эту тему показав то, как эта концепция работает на реальных примерах и какой код за ней стоит.
Истории
Конкурс js13kGames или как написать игру объёмом 13 Кбайт
13 августа стартовал 13-й игровой джем js13kGames (JS13K) для разработчиков веб-игр на JavaScript. За месяц участникам предстоит написать браузерные игры, размер которых не должен превышать 13 килобайт при сжатии до формата ZIP. Темой JS13K этого года выбрали «Трискайдекафобию» — боязнь числа «13».
ИИ как платформа
Новая предметная область
ИИ - тема хайповая. Часто мы рассуждаем о том, сможет ли ИИ заменить мясных программистов и если сможет, то когда именно. Есть два базовых полярных мнения и множество комбинаций между ними: на одном полюсе считают, что скоро нам всем кирдык и интеллектуальный труд доживает последние дни. На другом полюсе - скептически ухмыляются, и говорят, что никакой особенной угрозы нет: у ИИ нет и никогда не будет того, что есть у человеческих мозгов.
У многих из нас уже есть опыт общения с разными нейросетями, как позитивный так и не очень. И еще имеется, я бы сказал, некий "странный" опыт, отдельная категория, от которого больше вопросов чем ответов. Техно-гиганты анонсируют повсеместное внедрение и тотальную разумность будущих железяк. А мы, тем временем, удивляемся, каким-же, кхм... тупым и ленивым может быть этот всемогущий ИИ, если его попросить сделать что-то действительно полезное.
В этой статье я предлагаю перейти от общих рассуждений в более прагматическую плоскость, и посмотреть на ИИ не как на возможную угрозу нашему будущему, а как на новую платформу для разработки, открывающую множество новых неизведанных и неожиданных возможностей, ну и, кучу новой работы для нас, программистов, естественно. Именно активное практическое применение современных возможностей ИИ я называю новой предметной областью, достойной пристального внимания и подробнейшего рассмотрения.
Web-версия кулинарного android-приложения SystemCook
Сразу выдам ссылки на скачку того, о чем пойдет речь, чтобы ничего не потерялось и никто не теребил меня, что и где искать/качать (бесплатное и безрекламное android-приложение):
Прямая ссылка (если скачка с гугл-плей недоступна)
Ссылка вконтакте на видеообзор SystemCook v14.0 (если у вас проблемы с youtube)
Ранее про SystemCook я уже рассказывал на хабре в двух предыдущих статьях тут и тут. Знаю, что много хабровчан пробовало старые версии приложения в процессе разработки, т.к. веду статистику и "мёртвых" аккаунтов у меня в базе полным-полно (кстати, если кто потерял пароль - пишите на мыло, напомню, только скажете, на какой email регистрировались). Сейчас я подытожу, что в итоге у меня вышло, расскажу свои дальнейшие планы и буду ждать от вас фидбека в комментариях.
Прогресс за три года разработки, с июня 2021:
Лучшая система шаблонов в Go
Привет, Хабр!
В этой статье хочу поговорить про, пожалуй, мою самую любимую библиотеку для Go. Это Jet templates. Библиотека, которая очень упрощает работу с шаблонами(templates) в Go.
Обучение детей HTML, CSS, JavaScript: обзор курса по созданию сайтов
Сайт в наше время является визитной карточкой не только компаний, которые продают товары и оказывают услуги. Свои веб-страницы заводят рок-группы, блогеры, благотворительные фонды. Даже у животных есть свои собственные сайты. Все это говорит о том, что специалисты по созданию сайтов востребованы. И научиться этому может каждый, даже школьник без специальных навыков.
HTML и CSS — это понятия, которые многим взрослым и детям знакомы с занятий школьной информатики, с уроков html для детей. С их помощью можно самостоятельно создать свой простой первый сайт.
Обучение детей HTML, JS и CSS дает школьникам необходимую основу для того, чтобы узнать, как работает верстка, дизайн и внутреннее управление сайтами. Эти навыки станут фундаментом для будущей карьеры в сфере веб-разработки или веб-дизайна.
Yaml — король мета-описаний
На Хабре, было несколько статей о Yaml, но мне кажется все они однобоки и не раскрывают его истинную природу. Я попробую это исправить и рассказать о Yaml в положительном контексте. Не буду вновь описывать детали синтаксиса стандартного Yaml, в Интернете есть много материалов на эту тему. Их можно найти и на Хабре, в том числе, по ссылкам из этой статьи. Материал ориентирован на тех, кто знаком с Yaml, но возможно чувствует неприязнь к формату.
Angular: переменная в шаблоне, хорошо или плохо?
Недавнее объявление о блоке @let в Angular вызвало бурное обсуждение в сообществе разработчиков, одни считают его ценным дополнением, другие видят в этом ненужное усложнение.
Atomic CSS Deep Dive
Здравствуйте, товарищи! Меня зовут Валик и в этой статье мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы.
Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с моим изобретением - mlut. Разберем проблемы известных инструментов и посмотрим, как я решил их в своем. Будут интересные архитектурные решения, технические детали и немного хардкора.
Те, кто занимается версткой, смогут по-другому взглянуть на Atomic CSS и, возможно, взять в работу новый инструмент. А те, кто пишет системный код и тулинг - получить вдохновение и перенять нестандартный опыт.
Создание кастомного интерактивного одностраничного минисайта с ИИ без платных сервисов
У любого последователя создания nocode сайтов может возникнуть проблема: хочу создать то‑то, но у сервиса нет этой функции, при этом сервис прекрасный: хорошая цена, обширная функциональность, доступность эксклюзивных функций и т. д. То есть менять на другой нет смысла, но того что я хочу — нет.
Этот рассказ о том, как я пытался решить эту проблему и что из этого вышло.
Спойлер: Получилось
Ближайшие события
Ультимативный ресурс по программированию: сборник бесплатных чит-листов по программированию
В мире программирования чит-листы — это секретное оружие каждого разработчика. От новичков до опытных программистов, эти чит-листы помогают быстро найти нужную информацию и повысить продуктивность. Сегодня я собрал для вас лучший набор чит-листов по различным языкам программирования и инструментам, от Python до Docker.
Обязательно сохраняйте в закладки!
DRY-фреймворк: как сократить HTML-код и писать только на CSS
Привет! Я Толя, Frontend-разработчик в Selectel. В мире фронтенда есть «острый недостаток» фреймворков, поэтому я, как и 90% JavaScript-разработчиков, решил разработать собственный. В тексте расскажу, как «запихать» HTML-элементы в CSS и не испортить проект. Читайте до конца — вас ждет неожиданный сюжетный поворот.
WebSim AI: Бесплатный ИИ-помощник для быстрой веб-разработки – время фронтендерам напрячься
Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.
Проект WebSim AI представляет собой мощный инструмент для создания веб-страниц с минимальными усилиями, что может значительно ускорить процесс разработки как для новичков, так и для опытных специалистов.
Создание собственного API на Python (FastAPI): Подключаем фронтенд и статические файлы
Друзья, приветствую. Надеюсь, что вы ждали выхода данной публикации. На текущий момент, если вы следовали моим статья, то к настоящему моменту вы уже освоили:
- Основы создания простого приложения с использованием FastAPI.
- Основные HTTP‑запросы: POST, GET, PUT и DELETE.
- Принципы работы с Pydantic моделями и их интеграцию в FastAPI.
- Использование инструментов Alembic и SQLAlchemy для управления базой данных.
- Настройку асинхронной работы с базой данных PostgreSQL в SQLAlchemy.
- Реализацию кастомной авторизации и аутентификации в FastAPI.
На данный момент мы уже умеем создавать достаточно функциональное API с приличным набором возможностей, но что дальше? Кто и в каких ситуациях ним будет пользоваться, ведь API пишется именно для этого.
Магия CSS на практике: советы по вёрстке от гика. Часть 2
Хабр, привет! Я снова пришёл к вам со статьёй, где показываю мои любимые техники вёрстки. Моя цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
- какие правила у меня есть при именовании CSS-переменных для дизайн-систем;
- на какие логические свойства вам стоит обратить внимание;
- зачем нужно делать прозрачные рамки;
- как я делаю зависимость значения одного свойства от других более явным;
- про пользу «внутренних» переменных.
Давайте посмотрим, что я вам подготовил.
Мы сопоставили языки программирования с специализацией World Of Warcraft
Привет, друзья разработчики и геймеры!
Мы с командой разработчиков "*** Telecom" решили весело и с увлечением сопоставить языки программирования с классами из мира World of Warcraft. Почему бы не объединить наше любимое хобби с нашей профессиональной деятельностью? Давайте вместе погрузимся в этот волшебный мир и узнаем, как каждый язык программирования может быть аналогом одного из классов в WoW!
CSS-классы вредны
Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство
class
. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.