Веб-разработка *

Как понять, готов ли сайт к запуску рекламы?

Многие считают, что реклама в интернете (контекстная и таргетированная) – это панацея. Стоит запустить – и моментально от клиентов не будет отбоя. Распространению этого мнения способствуют заявления многочисленных фрилансеров и агентств. Однако в действительности такой идеальный сценарий разворачивается очень редко.

Самое важное — отказ от поддержки старых браузеров в 2021. Майки окончательно убили IE, поэтому разработчикам станет проще использовать классные технологии. Гриды (83%) и флексбоксы (99%) захватили всё. TypeScript есть в 70% вакансий для мидлов. 2022 будет годом TypeScript. 

Container Queries — переосмысление подхода к медиавыражениям. Если медиавыражение зависит от размера экрана, то Container Queries опирается на размер блока. С Cascade Layers мы можем лучше управлять всеми слоями отрисовки на сайте. Это самое большое изменение в CSS на уровне флексов и гридов.

ГОСТ для разработчиков вряд ли хорошая идея, потому что всё равно все постоянно переписывают чужой код с нуля на другом фреймворке. Но критерии качества — норм, если их правильно использовать.

Эти и другие прогнозы о технологиях, зарплатах, вакансиях и навыках в 2022 ждут под катом.

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

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

Обратите внимание: туториал рассчитан, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в нем что-нибудь интересное для себя.

Функционал нашего приложения будет следующим:

• имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
• пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
• пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
• код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.

Репозиторий.

Источник вдохновения.

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

Обзор возможностей шаблона по умолчанию Joomla 4 - Cassiopeia, а так же советы по кастомизации. Демонстрация доступности сайта для слабовидящих, соответствущей международным стандартам (WCAG 2.1) и их российским аналогам (ГОСТ Р 52872-2019). Анонс некоторых новых функций Joomla 4.1. Полезные ресурсы в конце статьи.

В данной статье вы познакомитесь с Marko.js актуальной на данный момент пятой версии. Пару лет назад на Хабре уже была отличная статья (за авторством apapacy) о том, как работает этот замечательный реактивный фреймворк, разработанный где-то в недрах eBay.

В своем комментарии (а это был далекий 2020 год) я предложил написать на Хабр статью, посвященную моему опыту работы с Marko, и вот - как с тем самым котом - время наконец пришло :-)

Я помню тот старый Хабр. Логотип был похож на комок шерсти после отрыжки кота, я писал какие-то наивные статьи и мне казалось, что я очень крут (нет), а народ пилил годные технические полотна текста, и чтобы узнать инфу про чёрные точки на лице, нужно было посещать другие сайты. Это было прикольно.

Потом что-то пошло не так, начали появляться какие-то полутехнические статьи, и (далее моя интерпретация событий) чтобы сохранить Хабр, всех нетехнических писателей заманили в один корабль и отправили куда подальше на гиктаймс - подобно тому, как врач ампутирует руку пациенту, чтобы спасти жизнь. В данном случае, правда, врач подержал эту руку, посмотрел на неё, а потом пришил обратно. Что из этого вышло?

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

Это моя первая статья подобного рода и возможно я бы никогда ее не разместил, но моё лузерство и привычка быть обыкновенным, меня настолько раскрепостили, что я воспринимаю поражения как должное. Амбиций нет, есть только кайф от того, что я делаю, люблю созерцать, люблю что то создавать. Рад буду если это кому то принесет пользу. Надеюсь при просмотре опытными разработчиками все не окажется очень плохо и я найду в себе силы выложить следующие части.

А может кому то просто понравится рисовать, ссылка на демо ниже.

В этой части я буду использовать Angular, CSS фреймворк от  w3schools

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

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.

Шаблонизаторы для HTML — инструмент, который позволяет проще писать разметку, делить её на компоненты и связывать с данными. Их главное преимущество — больше не нужно писать повторяющийся код несколько раз. Это кажется не такой большой проблемой, но всё же разработчикам часто приходится тратить на это время.

Мы с друзьями любим играть в настольные игры, но не всегда под рукой оказываются громоздкие коробки с играми. Тут на помощь приходит смартфон. Раньше я написал игру Ну, этот, аналог коробочной игры Бум. Затем родилась идея игры с похожей механикой, но вместо слов - случайные фильмы с кинопоиска. В качестве основы проекта я взял SvelteKit. В статье расскажу об интересном функционале SvelteKit и быстром деплое на площадке Vercel.

Встречайте, О, кинчик!

Привет! Меня зовут Андрей Якобчук, я ведущий фронтенд-разработчик в Muse Group. Мы постоянно работаем над ускорением клиентской части наших сайтов. К тому же Гугл с его метриками Core Web Vitals с каждым годом придаёт всё большее значение отзывчивости и стабильности интерфейса сайтов и понижает в ранжировании те, которые считает неудобными для пользователя. В статье я расскажу о том, какие подходы мы используем для измерения и мониторинга перфоманса сайтов, а также дам рекомендации, как можно улучшить ваш проект. 

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

Сегодня хочу поговорить про то как НЕ надо учить TypeScript. Какие ошибки чаще всего делают новички и почему TypeScript может так сильно раздражать? Это перевод оригинальной статьи.

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

Продолжаю исследовать возможности по работе с медиа, предоставляемые современными браузерами, и в этой статье хочу рассказать вам о возможности захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов.

Мы разработаем простое приложение для сведения аудио и видео со следующим функционалом:

• пользователь выбирает одно видео и несколько аудио, хранящихся в его файловой системе;
• когда пользователь нажимает на кнопку для начала записи, запускается воспроизведение выбранных файлов, захватываются их медиапотоки;
• захваченные потоки объединяются в один и передаются для записи;
• в процессе записи пользователь может менять источник аудиоданных;
• пользователь может приостанавливать (например, для изменения источника аудиоданных) и продолжать запись;
• по окончанию записи генерируется видеофайл в формате WebM — превью сведенного контента и ссылка для его скачивания.

В качестве фреймворка для фронтенда я буду использовать React, однако все функции по работе с медиа будут автономными (сигнатура этих функций будет framework agnostic), так что вы можете использовать любой другой фреймворк или ограничиться чистым JavaScript.

Репозиторий.

О том, как разработать приложение для создания аудиозаметок, можно прочитать в этой статье, а о том, как разработать приложение для захвата и записи экрана — в этой.

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

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

К этой статье прилагается GitHub репозиторий и Демо приложение, которые демонстрируют работу  упомянутых в этой стать модулей (и некоторых других). GitHub  репозиторий можно использовать в качестве boilerplate для вашего следующего профессионального приложения.

На протяжении всей жизни мне приходится экономить вычислительные и сетевые ресурсы: сначала были компьютеры с 300 кГц (кило — не гига!) и 32 Кбайт RAM, интернет по dial-up. Потом я решал олимпиадные задачки. Теперь имею дело с терабайтами трафика и 50 млрд событий в сутки. И хотя современные телефоны в 1 000 раз мощнее любого оборудования двадцатилетней давности, я до сих пор оптимизирую. Думал даже, что это со мной что-то не так. Но потом понял, что все постоянно что-нибудь оптимизируют. 

Эта статья в меньшей степени о том, почему нужно бороться за производительность, и в большей о том, на что сейчас стоит заменить устаревший стек из JPEG, JSON, gzip и TCP — и как это сделать. 

Спойлер: у нас есть решение и мы его не только показываем — ссылки на open source в конце статьи.

Когда вы открываете любой сайт — например, google или facebook, вы видите конечный продукт. Но чтобы этот продукт увидеть, и пощупать, нужно:

1. Написать код приложения

2. Собрать проект

3. Поднять его на сервере приложения

Сегодня я расскажу про третий этап: что вообще такое сервер приложения и зачем он нужен.

За 6 часов сделал первую версию игры и ворвался в тренды Твиттера с одного твита. Привлек 100 000 пользователей за неделю, а также попал в ведущие СМИ страны. Как это было и что я для этого сделал можно узнать в статье.

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

На днях, бороздя просторы Сети в поисках вдохновения, наткнулся на Zustand, инструмент для управления состоянием React-приложений, наиболее полно (среди более чем многочисленных альтернатив) отвечающий моим представлениям о, если не идеальном, то адекватном современному React state manager (см., например, эту статью).

Рассказу о нем и будет посвящена данная статья. Сначала немного теории, затем немного практики — по традиции, "запилим" простую "тудушку".

Репозиторий.

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