NPM-пакет для интернационализации i18n используется на фронтэнде для создания мультиязычных вебсайтов очень часто. Перевод текста в нем содержится обычно в json или в js файлах, и требует дальнейшей обработки, чтобы с ним с комфортом могли работать контент-редакторы. В статье описывается как максимально упростить и сделать удобным хранение и внесение изменений в перевод.
Введение
Всем привет! Меня зовут Герман Панов и в этой статье мы разработаем табличный редактор - аналог Google Sheets (в упрощенном виде), работающий на основе вебсокетов, чтобы познакомиться со способами применения этой технологии в браузерах.
Поскольку цель - ознакомление, код будет не очень «чистым», но для базового примера этого будет достаточно. В качестве серверной платформы будем использовать Node.js, также потребуется пакет ws, предоставляющий API для работы с вебсокетами на сервере.
Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них.
Но для начала… ещё одна статья о градиентных тенях? Серьёзно?
Привет! Меня зовут Олег Мифле. В Skyeng работаю над проектом Skypro. В IT я уже больше десяти лет, семь из которых пишу на PHP. За плечами десятки разных проектов: e-commerce, финтех, CRM, а недавно добавился и EdTech. Были и классические фуллстек-проекты, и проекты, где фронтенд и бэкенд «живут» отдельно и коммуницируют друг с другом по API. Боль от отсутствия версионирования я испытал на себе. Хочу поделиться, как избежать проблем, как всё структурировать и организовать.
Обсудим:
• Что такое API.
• Зачем версионировать API и нужно ли вообще.
• Какие способы версионирования существуют и как его организовать — и с точки зрения подходов, и с точки зрения кода.
• Разберёмся, когда избавляться от старой версии или как жить с легаси до конца существования проекта.
Всем привет, и с вами снова Данил Губанов — backend-разработчик в Точке. В этом материале я расскажу об инструментах, с которыми можно быстро сделать лендинг с формами, создать таблицу и даже разработать приложение для психологической помощи (и всё это без кода). Речь пойдет про Notion и Google Sheets. Поехали!
Привет, Хабр! Меня зовут Тимофей, я Python Engineer с опытом в 3+ года.
Я бы не назвал данную статью полноценным роадмэпом в том понимании, в котором это слово обычно используют. В статье нет сроков изучения, отсутствует подробный план, затрагивающей все темы и подтемы. Да и зачем нужен еще один роадмэп «под копирку», когда в сети и так хватает качественных предложений.
Скорее, я хотел бы составить абстрактный план обучения, который сможет задать общий ориентир, а также будет коррелировать с роадмэпом вроде roadmap.sh. Кроме этого, я смогу дать несколько полезных советов из своего опыта, а также составлю списки полезных ресурсов для изучения языка, сопутствующих инструментов и технологий, которые в свое время помогли или же помогают мне самому.
Привет, друзья!
На днях прочитал эту интересную статью, посвященную различным вариантам хранения токена доступа (access token) на клиенте. Мое внимание привлек вариант с использованием сервис-воркера (service worker) (см. "Подход 4. Использование service worker"), поскольку я даже не задумывался о таком способе применения этого интерфейса.
СВ — это посредник между клиентом и сервером (своего рода прокси-сервер), который позволяет перехватывать запросы и ответы и модифицировать их тем или иным образом. Он запускается в отдельном контексте, работает в отдельном потоке и не имеет доступа к DOM. Клиент также не имеет доступа к СВ и хранимым в нем данным. Как правило, СВ используется для обеспечения работы приложения в режиме офлайн посредством кэширования критически важных для работы приложения ресурсов.
В этой статье я покажу, как реализовать простой сервис аутентификации на основе JSONWebToken и HTTP Cookie с хранением токена доступа в сервис-воркере.
Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.
Интересно? Тогда прошу под кат.
Сделать сайт удобным и понятным для посетителей, а также оптимизированным для поисковых систем — задача каждого SEO‑специалиста. Одним из ключевых элементов, влияющих на эти факторы, является структура сайта. Сегодня мы поговорим о том, как сделать структуру сайта по SILO методу, чтобы улучшить его позиции в поисковых системах и увеличить трафик.
Переписали виртуальную машину на новый DSL
И теперь ее гораздо проще менять, оптимизировать и проводить эксперименты.
В качестве примера, можно посмотреть на попытку добавления register-based интерпретатора. Другой пример, что часто два опкода идут вместе и выполняются последовательно большую часть времени. Например, LOAD_CONST и RETURN_VALUE. Для оптимизации, можно добавить новый опкод этой операции. Вместо двух действий он будет выполнять одно. На частых задачах получится неплохая прибавка к производительности.
Еще один пример: опкод CALL_FUNCTION. Сам по себе довольно медленный. У него есть целая семья оптимизаций, например специализация CALL_FUNCTION_ISINSTANCE, когда мы выкидываем промежуточный слой и сразу вызываем C-реализацию isinstance. Минус в том, что Python богатый и динамически типизированный язык. В runtime может что-то поменяться и мы получим замедление — придется сваливаться обратно на общий путь опкода CALL_FUNCTION.
Здравствуй, Хабр!
В прошлой статье я рассказал о своем видении low-code платформы как таковой, сейчас же я предлагаю обсудить, как мог бы выглядеть процесс ее внедрения в крупную организацию в наших реалиях.
Совсем недавно вышел Chrome 111 и принёс не только исправление старых ошибок, но и добавление новых, а также приятные фичи в DevTools, о которых мы с вами сейчас и узнаем.
Привет, друзья!
В этой серии статей я расскажу вам о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (точнее, на React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:
Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.
Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.
К слову, здесь вы найдете полное руководство по Next.js.
В первой части мы пройдемся по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.
Это часть номер раз.
В этой статье, а вернее целой истории, я хотел бы поделиться своим путем становления в качестве разработчика на Python и рассказать о некоторых идеях и советах, которые я усвоил за это время. Начиная с моих первых проектов и заканчивая моей текущей деятельностью, я поделюсь накопленным опытом и попробую осветить проблемы, с которыми я столкнулся на своем пути. Кого-то данная статься вдохновит начать свой собственный путь в разработке, а кому-то будет интересно прочитать историю успешного кейса входа и закрепления в ИТ.
Всем привет, последние пару месяцев я активно изучаю тему веб‑компонентов, собираю и нарабатываю опыт, а затем делюсь своими наработками с другими с целью обменяться опытом, получит новый опыт, фидбек и понять куда двигается разработка в вебе и шагать дальше за новым опытом. Все ниже изложенное не является инструкцией как делать нужно, а является примером того, как сделать возможно на текущий момент в 2023 году, у меня уже набрался небольшой опыт (8 публикаций и 3 веб‑компонента на гитхабе) и я решился попробовать сделать что‑то серьезнее чем просто очередную реактивную кнопку или лайки, в первой части моей публикации я проведу вас по MVP веб‑компонента wc-wisywig, немного затронем философию семантики, браузерные API и обменяемся опытом, потестим HTML5 теги в статье на хабре. Для нетерпеливых сразу вот ссылка на демо и git репозиторий. Остальных ждет техничесий лонгрид, прошу под кат)
С первой частью рассказа о микрофронтендах в Dodo можно ознакомиться тут
Мы спокойно сидели и пилили новый проект на нашем устоявшемся стеке (React + TypeScript + Webpack + SingleSPA + SystemJS + Jest). Пока одним прекрасным утром не пришел наш техлид и такой: «Чуваки, а давайте затащим Vitest!».
Привет, друзья!
Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию нового CSS-селектора :has().
:has() предоставляет возможность "заглядывать вперед" с помощью CSS и стилизовать родительский элемент (предка). Этот селектор может быть легко расширен для стилизации одного или нескольких дочерних элементов (потомков). Регистрация состояний или позиций элемента позволяет стилизовать почти любую комбинацию элементов как уникальных или входящих в определенный диапазон.
Обратите внимание: на сегодняшний день :has() поддерживается не всеми браузерами, поэтому использовать его в производственных приложениях пока рано.
Мероприятия — один из лучших методов повышения лояльности и заинтересованности клиентов! Статистика показывает, что 9 из 10 посетителей после ивента интересуются продуктом компании. Однако, из-за неправильного подхода к продвижению, 78% мероприятий не набирают нужное число гостей, что сказывается на низкой эффективности мероприятия как маркетингового инструмента.
