Давайте представим себе частый кейс - вы с бека получаете какой-то массив данных, из которых вы будете делать разметку, что будет содержимым вашей страницы.
Для примера возьмем список пользователей, и вам надо отрендерить этот список. Вам пришел массив и вы, не теряя времени, прогоняете его через map, создавая, таким образом свою разметку - вот так:
Отказ от third‑party кук уже не за горами. Однако в попытке уберечь пользователя от «слежки» браузеры рискуют по дороге отправить в могилу индустрию персонализированной рекламы (и не только, но сегодня про нее). Могу только представить, что испытывает Google, разрываясь между желанием сохранить лояльность пользователей Chrome и стремлением продолжить зарабатывать на рекламе сотни миллионов долларов ежедневно. В качестве решения проблемы, в рамках инициативы Privacy Sandbox, Google предлагает использовать Topics Api, как инструмент доступа к «интересам» пользователя без возможности его отслеживания.
Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS
Что такое Atomic CSS?
Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека:
> Атомарный CSS — это подход к архитектуре CSS, при котором предпочтение отдается небольшим, одноцелевым классам с именами, основанными на визуальной функции.
В данной статье я расскажу про AMP-emails из личного опыта разработки , покажу примеры какие бывают емайлы, как их можно отправлять, в каких областях емайл-маркетинга они могут использоваться. У меня более 4 лет опыта работы с AMP-emails и мне есть чем с вами поделиться
Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик. ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на веб-производительность и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.
VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.
Всем хабропривет. Я Леонид Шевчук, старший разработчик. Четыре года создаю мини-приложения. Руковожу командой фронтенд-разработки VK Знакомств. Наш сервис разработан как мини-приложение ВКонтакте. Это яркий пример того, что на платформе VK Mini Apps можно делать продукты с очень развитой функциональностью.
Эта статья пригодится тем, кто ещё не работал с нашей платформой, поэтому я буду рассказывать очевидные для опытных разработчиков вещи. Сначала мы освежим в памяти, на каких технологиях делаются современные веб-приложения. Затем научимся портировать в VK Mini Apps — на примере приложения для планирования дел, написанного на React. И сделаем это так, чтобы оно выглядело органично для платформы. А для чего это всё нужно? Сейчас объясню.
После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.
В то же время, отчетливо заметно масштабирование работы не вглубь, а вширь. Интересы команды уже давно явно выходят за пределы фреймворка.
Я обычный студент, которого сегодня выгнали со стажировки на направлении фронтенд. Всю свою старшую школу я хотел стать программистом и много кодить, создавать что-то свое, все предметы и экзамены мне приходилось терпеть, ведь без них я не мог достичь своей мечты. Сейчас в учебе у меня не все так гладко, хотя я и учусь в одном из ведущих вузах страны на техническом направлении - то, о чем я всегда мечтал.
У меня появились проблемы с мотивацией, и после сообщения куратора о том, что моя стажировка закончилась на середине из-за несерьезного подхода к работе, я понял, что надо менять отношение ко всему в своей жизни. Я решил завести этот блог, чтобы найти людей со схожими интересами и делится всем тем, что я переживу и чему научусь на своем пути.
В это статье я начну с базы JavaScript - переменных и типах данных.
Всем привет! Мы — архитектор разработки публичных веб-приложений Борис и разработчик системы-шлюза отправки нотификаций Данила. Расскажем о том, как создавались веб-пуши iOS в Тинькофф, как их настраивали и с какими проблемами столкнулись в процессе разработки.
Читая такие статьи как про Капибару, мне хочется упомянуть один свой старый/новый проект, в изначальном виде я затеял как проект реставрации старого форума сети Минска (uruchie.org) из далеких 2006-2012 годов, который хранился у меня в замороженном виде последние 10 лет. Не так давно я решил его расконсервировать и заняться реставрацией в свободное время, того, фактически, что осталось еще со времен локальных сетей.
Я сразу отбросил почти все что было, это старый движок vBulletin - на тот момент крайне перспективный и развивающийся движок форума на PHP, и убрав почти все, оставив только базу данных из 250 000 сообщений и 5000 пользователей начал реализовывать новые концепции которые хотелось видеть. Если кому-то интересно то, кстати, одна из причин гибели такого старого и долгого проекта был именно vBulletin и безопасность.
Ссылка на рабочую версия нового ресурса: https://talkvio.com (заходим, регистрируемся, пишем, предлагаем идеи)
За основу взял что душе угодно для таких целей:
Backend: NodeJS + MySQL + Redis + Manticore (у меня с ним был крайне приятный опыт на других своих старых проектах) + Bash + отдельные модули на Python + Nginx
UI: React
Дальше в статье будет рассказываться как в проекте организован серверный рендеринг исключительно для поисковиков, и как вы можете повторить опыт для своего JS проекта не выполнял почти никаких модификаций проекта на основе пакета Puppeteer + Nginx.
В этой статье мы поговорим о создании компонентов динамически, шаг за шагом пройдем этот путь. Помимо простого создания компонентов, мы поговорим о более продвинутых вещах, которые можно сделать в рамках этого процесса.
В данной статье будет рассмотрено возможное решение для разгрузки интерфейсов веб приложений – создание приложения с возможностью выноса части функционала в дополнительные окна, или же просто многооконное приложение.
Основа стека React + Redux.
Styled-components является стандартом написания стилей для многих команд, которые разрабатывают приложения на React Native. Но мы не всегда задумываемся, зачем мы тащим это в продукт и какую выгоду получим. А что если от styled-components больше вреда, чем пользы? Я поделюсь нашим опытом в Профи и попробуем разобраться вместе.
Vue 3 вебсайт билдер (npm пакет vue-webapp) позволяет создать каркас будущего веб приложения, с возможностью выбора бизнес-шаблона (портфолио, блог, магазин и .т.д.), макета сайта, дизайна и элементов функционала (API модуль, i18n, PWA, splash screen, auth модуль, темы и т.д.), для дальнейшей кастомизации и наполнения контентом.
Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?
Серверный рендеринг обеспечивает быстрый и надежный доступ к контенту. В этом подходе веб-страницы формируются на сервере, а не в браузере пользователя. Это позволяет значительно ускорить время загрузки, что особенно критично для современных одностраничных приложений, известных как SPA (Single-Page Applications).
SPA несмотря на их удобство и функциональность сталкиваются с рядом проблем, включая SEO-оптимизацию и производительность, особенно на медленных соединениях или устройствах.
Серверный рендеринг не только решает указанные проблемы, но и оптимизирует веб-приложения, делая их доступными для широкого круга пользователей.
Создание эффективного Node.js API, обеспечивающего безопасность данных и типобезопасность, может быть сложной задачей. Это руководство демонстрирует процесс с использованием Prisma, TypeGraphQL и graphql-query-purifier.
Привет, хабр. В этой статье я бы хотел рассказать, как построить рамку редактирования, наподобие той, которая есть в редакторах figma, adobe illustrator и во множестве других графических редакторах. В основном рамка редактирования является составной частью графического редактора. Она может изменять расположение объекта, его масштаб и угол поворота.
Vue + Form. А можно немного попроще...
Краткий путь по созданию библиотеки для работы с полями и формами . В статье описан краткий путь от v-modal к чему-то более умному и самостоятельному. Я также поделился своими наработками, чтобы вы могли использовать их у себя в проекте.
