Frontend-разработчик нашей команды Евгений Самойлов рассказывает, как сократить время написания рутинной разметки за счет преобразования простых аббревиатур в полноценные блоки кода.
Пролог
Живу я в не очень продвинутом ауле, что раскинулся в Карачаево-Черкесии, и точно не помню как вышел на издательскую площадку для html-игр Gamepix. То ли через знакомых чабанов, то ли от приблудившихся джейранов-шатунов. Редкий поисковик или геймерский телеграм-канал долетает до моего населенного пункта.
Регистрация и настройка
С регистрацией на дистрибьюторской площадке проблем не возникло. Всё как у всех: логин, пароль и, здрасти, дашборд. Так как я разрабатываю игры на Construct 3, то буду рассказывать всё в контексте этого движка. Думаю, адепты Unity и фанаты других движков тоже почерпнут для себя что-то полезное. Качаешь плагин, подключаешь штатными средствами констракта через Addon manager. Menu>View>Addon manager. Думаю, тут сложностей не возникнет.
В прошлой статье я писал об EasyUI — библиотеке, реализующей графический интерфейс для одно-страничных Web-приложений. Эту библиотеку наша команда использовала при разработке Web-интерфейса для одного маленького, но очень умного устройства. С момента начала реализации проекта прошло довольно много времени, появилось много новых технологий и решений. Об одном из них я и хочу поговорить в этой статье.
Когда мы начинали старый проект о реактивности только начинали разговаривать. Было интересно узнать, как это работает. Тогда мы не рискнули использовать новые реактивные технологии, предпочитая им хорошо проверенные старые решения. Но за время реализации проекта часто приходилось сталкиваться с ситуациями, когда использование реактивных решений было бы очень эффективным.
Поскольку в нашем проекте использовалась достаточно "длинная" таблица сенсоров с постоянно меняющимися показаниями, перед нами стояла задача оптимизации опроса этих довольно медленно "отдающих" свои показания сенсоров. Мы реализовали виртуальную прокрутку этой таблицы, когда единовременно опрашивались лишь видимые на экране сенсоры.
Ещё тогда, читая документацию, я предполагал, что реализация такой таблицы сенсоров при помощи реактивного фреймворка будет простой и элегантной. Оставалось только проверить мои предположения на практике, что я, наконец, и сделал. Для меня, привыкшего к "тяжёлым" проектам вне реактивной парадигмы, потребовался некий переворот сознания, чтобы оценить достоинства Vue. Однако, это стоило того. Ведь всё оказалось гораздо проще, чем я думал...
Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая.
Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico?
Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1
Как работают :where(), :is() :has() и какой из селекторов упрощает жизнь
Playwright теперь готов тестировать ваши компоненты на React, Vue и Svelter
Всем привет! Меня зовут Лихопой Кирилл и я - фронтенд-разработчик в компании idaproject. Сегодня я представляю вам перевод статьи о новой CSS-фиче, которую, я уверен, многие ждали. И это - object-view-box, которое позволит нам обрезать и масштабировать фотографии не прибегая к “костылям” в виде фонового изображения или доп. элементов.
Итак, знакомьтесь - object-view-box!
В этой статье я познакомлю вас с новым CSS-свойством object-view-box , которое было предложено Jake Archibald еще год назад. Оно позволяет нам обрезать и изменять размер таких HTML-элементов, как <img> или <video>.
В статье наглядно показано, каким образом скрыть внешнюю ссылку сайта от поисковых систем без вреда для ссылочной массы. Также Вы сможете облегчить этот процесс с применением php, если у Вас имеется много подобных ссылок.
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать.
Данная заметка является своего рода комментарием к другой статье на Хабр-е Удивительная история document.write, которая, в свою очередь, представляет из себя перевод публикации с сайта https://eager.io/ The Curious Case of document.write. Я же здесь хочу лишь подчеркнуть определённую полезность данного метода клиентского JavaScript (https://developer.mozilla.org/ru/docs/Web/API/Document/write), а также немного порассуждать о подходах и проблемах, связанных с генерацией разметки.
Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских.
Горячее
Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax().
Узнайте о JavaScript контейнерах.
Что случится если вы откажетесь от React?
Ещё один сайт на HTML. Да, так тоже можно.
Остальные новости и статьи — под катом.
Продолжаем проходить различные "квесты" и "пазлы" на просторах интернета. На этот раз в руки мне попался https://hiddenkeywords.com/ Это испытание было создано студией Propellernet - студия маркетингового консалтинга из Англии.
Если ты не боишься спойлеров, то добро пожаловать.
Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
В этой статье мы говорим о вложении тегов друг в друга, так как это один из неочевидных моментов, в которых многие новички часто делают ошибки.
Свежие новости и статьи из мира фронтенд-разработки за последнюю неделю 25 апреля–1 мая.
— Сделайте так, чтобы поиск по странице работал даже в сворачиваемых элементах, с помощью атрибута hidden, но с новым значением until-found. Ждём в Google Chrome 102 и Safari 15.5.
— Не успели вы попробовать React v18.0, как уже вышел v18.1 с множеством исправлений.
– Что такое базовые модули, содержащие префиксы? Для того, чтобы сказать, что модуль из ядра node.js, ему добавляется префикс, например, import test from 'node:test';. Не все базовые модули на данный момент будут использовать через префикс, например fs.
– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.
Больше новостей и статей под катом. Хватит почитать на все майские!
Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки!
Можно ли расти профессионально, не меняя работу. Думаю, я не одна, кто задавался этим вопросом.
В данной статье будет рассказана история одной мобильной игры разрабатываемой на HTML, CSS, JavaScript, jQuery, Apache Cordova и Firebase. Также будут освещены следующие вопросы:
- Стоит ли использовать jQuery?
- Стоит ли вообще разрабатывать мобильные игры на JS с нуля?
Дайджест новостей из мира фронтенд-разработки за последнюю неделю 18 — 24 апреля 2022.
Появились первые рабочие черновики WebAssembly Core Specification 2.0 — стандарт, описывающий безопасный низкоуровневый код, WebAssembly JavaScript Interface 2.0 — стандарт взаимодействия API JavaScript с WebAssembly и WebAssembly Web API 2.0 — стандарт интеграции WebAssembly с остальной веб-платформой.
Chromium начинает экспериментальное прототипирование CSS Toggles. CSS Toggles - декларативный механизм для указания состояния, описывающего поведение.
Node.js v18.0.0 уже здесь, но Current. Не переживайте, так как переход на LTS планируется уже в октябре.
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.
В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.
