В веб-разработке Python используется в основном на бэкенде с такими фреймворками, как Django и Flask. А сегодня, к старту курса по Fullstack-разработке на Python, расскажем о PyScript, который даёт возможность запускать Python прямо в HTML.
Дайджест новостей и полезных статей из мира фронтенд-разработки за последнюю неделю 30 мая–05 июня.
Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением.
Код на Codepen https://codepen.io/webfrontden/pen/poaOPER
Давайте поговорим о том, как написать хорошее описание фотографий в атрибуте alt, или альтернативный текст.
Альтернативный текст — это описание картинки на сайте словами. Оно должно помогать людям, которые не видят картинку, но читают или слышат это описание. А иначе можно вообще ничего не писать.
Давайте разбираться, почему правильное описание важно, и как его вообще-то сделать правильным. Всего есть шесть правил.
Вёрстка помогает нам выстраивать содержимое веб-страниц по определённым правилам: например, строго в соответствии с согласованным макетом или в зависимости от пользовательского устройства.
Сегодня сайты неплохо умеют подстраивать свой контент и под различные размеры экранов, но так было не всегда.
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.
– Пуш-уведомления — достаточно щепетильный инструмент взаимодействия с пользователем. Они всех бесят. Научитесь делать пуш-уведомления полезными.
Больше новостей и статей под катом. Хватит почитать на все майские!
