JavaScript *

Замечание редактора английского оригинала: Это руководство по Svelte и Sapper было обновлено 2 июля 2021 года с учетом информации о SvelteKit, пришедшем на смену Sapper. Подробнее о SvelteKit рассказано в статье “Exploring SvelteKit, the newest Svelte-based framework.”

Исследовав фреймворк Svelte.js, можно убедиться, что на нем можно писать по-настоящему реактивные приложения, но при этом обходиться значительно меньшим количеством кода, чем при использовании других фронтенд-фреймворков. В то время, как можно создавать довольно сложные приложения при помощи одного только Svelte, код такого приложения быстро может прийти в беспорядок. Знакомьтесь с Sapper!

Здесь мы в общем виде рассмотрим Sapper, продемонстрируем, как с его помощью писать полнофункциональные, но при этом легковесные приложения, а также детально разберем приложение для рендеринга на стороне сервера.

Привет, Хабр!

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

В частонсти, в статье рассмотрены следующие вопросы:

- Как сделать таблицу с фиксированной шапкой и скроллом в body?

- Как быть, когда cодержимое таблицы съезжает относительно шапки при появлении скролла? Как избежать использования overflow: 'scroll' в данной ситуации. Установка css-переменной scroll-width.

- Оптимизация и кастомизация скролла: плавность, scroll margin, изменение цвета и формы.

Каждый год веб совершает огромные шаги в светлый мир будущего (или тёмный, смотря какой вы предпочитаете). Инструменты один за другим добавляют тёмные темы, а крупные гиганты обновляют и улучшают свои системы дизайна, чтобы они оставались актуальны в расширяющемся тёмном мире. Внедрение темной темы значительно улучшает пользовательский опыт и, как следствие, бизнес показатели. Например, недавно одна из крупнейших бразильских новостных компаний Terra, после добавления темной темы, увеличила количество посещённых за сеанс страниц на 170% и снизила показатель отказов на 60% (т.е. в 2,5 раза) [читать статью].

По собранным Android Authority (2514 опрошенных) данным и анализу Томаса Стейнера (243 опрошенных), более 80% пользователей используют тёмную тему. Конечно же, выборку сложно назвать однозначно правдивой, ведь опросы проходили на технических форумах, но в целом можно говорить о том, что темной темой пользуется добрая половина интернета.

Первая часть цикла по большей части была посвящена истории css-переменных – их созданию, развитию и становлению, а также содержала примеры темизации как на уровне планирования и дизайна, так и на уровне разработки клиентской части, включая различные способы темизации и смены тем [Темизация. История, причины, реализация]. В этой статье, поднимаясь на ступень выше, речь пойдёт о клиент-серверном взаимодействии и возможностях современных браузеров в контексте темизации.

Привет, друзья!

В этой статье я хочу рассказать вам о Temporal, новом API для работы с датой и временем в JS.

• Описание предложения
• Черновик спецификации
• Рецепты по использованию Temporal

Источником вдохновения для меня послужила эта замечательная статья.

Обратите внимание: предложение находится на 3 стадии рассмотрения и может подвергнуться некоторым изменениям, так что воздержитесь от его использования в продакшне до официального утверждения (вероятно, это произойдет где-то в конце текущего года).

Если вам это интересно, прошу под кат.

Однажды мы заметили, что поисковая выдача в мобильной версии Циан замедлилась: плохо работала на стороне браузера, грузилось много ресурсов, приложение долго открывалось. Естественно, это не радовало пользователей и сказывалось на метриках. В мае 2021-го Google анонсировал изменения: с августа он станет учитывать метрики Core Web Vitals в ранжировании поисковой выдачи. Мы стали искать, в чём может быть наша проблема. В этой статье расскажем, где же проблема крылась, и как мы её решили.

Писать кнопочки и формочки на React - дело не хитрое. Но почти всегда фронтовые проекты превращаются в нечто трудночитаемое и едва ли поддерживаемое. Визуально различия проектов на React и JQuery со временем сохраняются, а вот developer experience с точки зрения трудозатрат на поддержку становится примерно одинаковым.

Сегодня я хочу рассказать вам о том, как я пробовал реализовать функционал «Нет подключения» на SmartTV для платформ webOS и Tizen. Это звучит довольно просто, и вы можете спросить меня, что ты можешь рассказать нам нового, но поверьте, я могу :)

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

На данный момент я знаю 3 способа, как проверить сетевое соединение, и каждый из них имеет свои плюсы и минусы, давайте пройдемся по каждому.

Цель данной статьи - создать GraphQL приложение, построенное на фреймворке NestJS. А также загрузить его в Лямбда-функцию при помощи Terraform. Надеюсь данный пример поможет многим сэкономить много времени.

При создании нового проекта я попытался использовать свою любимую библиотеку генерации случайных данных facker.js. Установилась версия facker@6.6.6.

Однако при попытке использовать привычные методы библиотеки выскакивала ошибка. Начав разбираться в проблеме, я перешел на github этой библиотеки. Обнаружилось, что весь исходный код удален. При этом был один коммит endgame, а в описании (Readme) текст – “Что на самом деле произошло с Аароном Шварцем?” (What really happened with Aaron Swartz?).

Привет, Хабр!

Разрешите поделиться своим велосипедом. Речь пойдет о минималистичном менеджере состояний React, интерфейс которого состоит из одной функции — createShared().

GitHub репозиторий проекта

В этой статье мы узнаем что такое камера в 3D пространстве (матрица вида) и как она работает, узнаем как сделать те объекты что дальше - меньшего размера (матрица перспективной проекции). 

Мы продолжим работу над кодом, который у нас получился в финале 2-й части.  И начнем с обсуждения камеры в пространстве (м.б. в 3D игре).

Привет, хабрист!

Довольно давненько подружил свои приложения с гуглом.

Основная идея была - не создавая новых шаблонов, получить все страницы сайта AMP-friendly и, вообще, сделать ядро приложения AMP-ready.

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

Я буду вещать на примере самого простого - картинок. Все прочее аналогично, хоть и посложнее на практике.

Объявим зависимости

Расскажу как я решил погрузиться в мобильную разработку. Какую поставил цель, какие ресурсы выделил для её достижения, с какими трудностями столкнулся и как решил возникшие проблемы. Также будет немного аналитики, размышлений о карьере программиста и личного опыта при взаимодействии с рекрутерами.

Привет, Хабр! На днях ко мне обратился ученик на одном из ресурсов, где я выступаю в качестве frontend-ментора, с просьбой разобрать одну задачу. Суть задачи состояла в следующем:

Найти все доступные комбинаций предложений, полученных методом T9 (predictive text)

Вводные данные:

Файл input.txt, в котором описаны последовательности цифр, имитирующие пользовательский ввод:

Привет! Меня зовут Сергей, я управляющий партнер в KTS

Совсем недавно состоялся релиз 6-ой версии react-router. Вообще создатели react-router часто меняют подходы, используемые в библиотеке, но в этот раз они объединили лучшее, что было в прошлых версиях.

В статье приведен краткий обзор того, что поменялось.

Привет, друзья!

В этой статье я покажу вам, как создать полноценный сервис для аутентификации и авторизации (далее — просто сервис) с помощью Auth0.

Auth0 — это платформа, предоставляющая готовые решения для разработки сервисов любого уровня сложности. Auth0 поддерживается командой, стоящей за разработкой JWT (JSON Web Token/веб-токен в формате JSON). Это вселяет определенную уверенность в безопасности Auth0-сервисов.

Бесплатная версия Auth0 позволяет регистрировать до 7000 пользователей.

В этой статье я писал о том, что такое JWT, и как разработать собственный сервис с нуля.

Знакомство с Auth0 можно начать отсюда.

Исходный код Auth0 SDK, который мы будем использовать для разработки приложения, можно найти здесь.

Исходный код проекта, который мы будем разрабатывать, находится здесь.

В статье я расскажу только о самых основных возможностях, предоставляемых Auth0.

В примерах и на скриншотах ниже вы увидите реальные чувствительные данные/sensitive data. Это не означает, что вы сможете их использовать. После публикации статьи сервис будет удален.

Привет! Меня зовут Сергей, я управляющий партнер в KTS

В прошлой статье мы создали библиотеку, которая позволяет запускать сервер для рендеринга React-приложения.

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