Сообщество - Web-технологии

Web-технологии

526 постов 5 799 подписчиков

Популярные теги в сообществе:

5

What developers need to know about Chrome's Memory and Energy Saver modes - Chrome Developers

В конце прошлого года в Google Chrome появились 2 новых режима

- Memory Saver (Экономия памяти)
- Energy Saver (Энергосбережение)

Они позволяют более гибко управлять использованием системных ресурсов браузером.

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

🔸 Energy Saver: Режим Energy Saver позволяет браузеру снизить частоту обновления экрана для экономии заряда батареи. Обычно, для большинства сайтов, не требуется внесение изменений, но если вы используете JavaScript-анимации, имейте в виду, что они могут замедлиться.

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

В данный момент нет никаких событий, которые будут запущены перед выгрузкой вкладки. Рекомендуются следующие способы сохранения состояния:

- Периодически, когда состояние изменяется
- Когда вы переходите на другую вкладку, по событию visibilitychange

document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
storeState();
}
});


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

- Для этого можно открыть в адресной строке chrome://discards и для нужно вам вкладки использовать кнопку Urgent Discard.
- Инструменты автоматического тестирования пока не помогут вам протестировать эти режимы с помощью автотестов. Но вы можете использовать простую перезагрузку страницы, она почти полностью идентична выгрузке вкладки. Разница лишь в том, что при выгрузке вкладки, события beforeunload, pagehideи unload не будут вызваны.

Подробнее можно почитать в статье

https://t.me/cherkashindev/107

Показать полностью
9

Мои стили и скрипты для разных сайтов

Бывает, что меня не устраивает функционал и/или оформление сайтов. Для борьбы с этим я начал писать свои стили и скрипты. Расширения использую Stylus и Tempermonkey.

Поскольку я иногда забываю их синхронизировать, решил создать с ними репозиторий: https://github.com/ilyachch/userscripts

Из интересных скриптов:

  • Better Habr

    • окрашивает заголовок статьи в зеленый или красный в зависимости от рейтинга

    • давет возможность рекурсивно отсортировать комментарии по рейтингу (при нажатии на заголовок "Комментарии"

  • Media Speed

    • позволяет указать скорость воспроизведения медиа. Настройки хранит в localstorage и перехватывает событие запуска воспроизведения. Тоесть каждый сайт "запоминает" скорость воспроизведения

  • Better Rezka

    • убирает паузу между сериями при просмотре сериалов

    • показывает "новое" целиком, без карусели, убирая при этом дубликаты

    • убирает всплывающее окно при отметке "просмотрено"

    • для авторизованных пользователей парсит список просмотренного и отмечает цветом "в процессе" и "просмотрено"

Интересные стили:

  • 4pda - по возможности убирает рекламные блоки. не все, но что уж есть

  • github - растягивает окно actions на всю высоту (по умолчанию, оно прокручиваемое и влезает туда 3 или 4)

  • rezka - убирает рекламные блоки, растягивает плеер, делает интерфейс адаптивным и во всю ширину экрана

  • seasonvar - делает адаптивным, растягивает плеер, делает полностью темным

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

Есть еще много вещей, которые можно доделать и сделать.

Так же открыт к предложениям - открывайте issue, pull request-ы

Показать полностью
5

Backend-Driven UI

Сегодня посоветую доклад с HolyJS — Виталий Полещук, Стёпа Михайлюк — Server-driven UI в вебе. Не пиши, а описывай свой фронтeнд

Backend-Driven UI Кросспостинг, Pikabu Publish Bot, Frontend, Архитектура, Текст, Backend, React, Программирование, Рекомендации

https://t.me/cherkashindev/102


Парни в докладе рассказывают, как можно не заниматься формошлёпством, точнее как его упростить, чтобы создавать новые формы можно было проще и быстрее.

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

- header
- select
- checkbox
- …

клиент проходится по этому массиву и рендерит соответствующий UI компонент. Таким образом реализация компонентов находится на фронте, а их расположение и взаимодействие на бэке.

👍 Основные преимущества Backend Driven UI

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

Ещё по теме:
- Яндекс выпускает DivKit — фреймворк для server-driven UI с открытым кодом

#fridayreading #frontend #architecture

Показать полностью

Не работает новый скрипт в Roblox Studio! Помогите пожалуйста!

// define dates let startDate = new Date(); // current date and time let releaseDate = new Date("2022-06-11T16:00:00"); // determine the time difference let timeDiff = Math.abs(releaseDate.getTime() - startDate.getTime()); let daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24)); //number of days before date // settings for text appearance let delay = 2000; //delay before text appears in milliseconds // texts to display let text1 = "3 Days"; let text2 = `2 days`; let text3 = `1 days`; let text4 = `Countdown Time`; // find the container to display on the page let container = document.getElementById("countdown"); // output texts with a delay setTimeout(function() { container.innerHTML = text1; }, delay); setTimeout(function() { container.innerHTML = text2; }, delay*2); setTimeout(function() { container.innerHTML = text3; }, delay*3); setTimeout(function() { container.innerHTML = text4; }, delay*4); setTimeout(function() { container.innerHTML = text5; }, delay*5); // start countdown setTimeout(function() { container.innerHTML = "June 10 at 4:00 PM"; }, delay*6); setTimeout(function() { container.innerHTML = "June 11 at 4pm - Release!"; }, delay*7); ParticleSystem() Create() -Dove Flash Effect TeleportToPlaceInstance() Show() Hide()) - Display the entire model 1 Какой в начале сделать скрипт на прилёт корабля на крыше Pet Shop за 3 минуты до окончания Обратного Отсчёта 2 Какой скрипт добавить на скрытие Баннера через 3 минуты после окончания Обратного Отсчёта Я проверял через календарь скрипт не работает а в игре Adopt Me работает https://cloud.mail.ru/public/C36u/hTS3t6tW2

1156

35 лучших бесплатных курсов HTML/CSS верстки в 2023

Подготовили для вас статью с бесплатными курсами по верстке html/css. В некоторых курсах есть тренажеры: можно проходить теории и там же практиковаться.

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

HTML и CSS — это языки веб-программирования, использующиеся в паре для верстки сайтов. Функционал пары следующий: HTML представляет собой "каркас", основные компоненты будущей страницы, а CSS, расширяя возможности HTML, помогает разработчику уточнять дизайн сайта.

Тренажеры

  1. Бесплатный тренажер по html/css

    Тип: Тренажер состоит из блоков теории, после которого сразу идет практика с задачами прямо внутри тренажера.

    Язык: русский.

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

  2. Learn-html.org

    Тип: обучающий онлайн-тренажер.

    Язык: английский.

  3. Grid Critters

    Тип: обучающая онлайн-игра.

    Язык: английский.

Бесплатные курсы от школ

  1. “Как стать frontend-разработчиком с нуля?” от Skillfactory

    Простое решение для начинающих программистов — карьерный гид компании Skillfactory. Краткий мануал расскажет об основных задачах работников сферы IT и возможностях обучения. Чтобы получить гид, необходимо указать лишь имя и адрес электронной почты.

  2. “Основы HTML и CSS” от Stepik

    Основы программирования на HTML и CSS от Тимура Гудиева на платформе Stepik. Чтобы ввести участников в кодинг, автору потребуется всего 10 видеоуроков, а для активной практики он подготовил 34 теста по каждой из тем.

  3. “Введение в HTML5” от Курсера

    Курс — введение в HTML5 от Колин ван Лент и Чарльз Северанс на платформе Coursera. В этой программе при поддержке Мичиганского университета длительность в 3 недели преподаватели расскажут о базовых навыках владения языком, а по окончании всех участников ждет электронный сертификат.

  4. “Создание сайта на HTML” от ItProger

    Данный курс по верстке сайта от itProger.com предлагает базовые знания сразу по четырем направлениям: HTML, CSS, JS и jQuery — с реальным продуктом по итогам обучения — собственным сайтом. Вся программа рассчитана на 11 видеоуроков и 108 практических заданий.

  5. “Верстка сайта” от ItProger

  6. "Курс HTML для начинающих" от PHP.ZONE

  7. "Веб-разработка для начинающих: HTML и CSS" от Stepik

  8. "Знакомство с HTML и CSS" от HTML академии

  9. "Курс HTML / CSS" от Beonmax

  10. "Уроки HTML5" от ItProger

  11. "Основы HTML, CSS и веб-дизайна" от Хекслет

  12. "Курс HTML и CSS - верстка сайтов для начинающих" от School PHP

  13. "Уроки CSS" от ItProger

  14. "Введение в веб-разработку" от Hexlet

  15. "Вводный курс по HTML и CSS для начинающих" от ShowSkill

35 лучших бесплатных курсов HTML/CSS верстки в 2023 Программирование, HTML, CSS, Верстка, Курсы программирования, Основы HTML, IT, Создание сайта, Длиннопост, Текст, Подборка

Курсы с Youtube

  1. Создаем сайт на основе CSS3 + HTML5

    Краткий курс по созданию сайта на HTML5 и CSS3. За 14 видео автор канала Гоша Дударь расскажет все о верстке своего сайта, а также поделится общей информацией о профессии Frontend-разработчика

  2. HTML для начинающих

    Это курс для веб-программистов, поделенный на две части. В первой части объясняет и показывает автор канала loftblog, а во второй инсайтами и важной информацией для HTML-верстальщиков поделится Анастасия Редченкова.

  3. Верстка сайта #7 Создание лендинга для свадебного фотографа

    YouTube-курс "Верстка сайта" от FrontCoder. За 17 видео автор канала объяснит и покажет, как создать свой сайт на HTML и CSS всего за несколько часов на реальном примере — сайте свадебного ведущего.

  4. Верстка сайтов || Лендинги, интернет-магазины, портфолио

    Курс по верстке сайтов на HTML и CSS от LectorWeb. Плейлист содержит 17 коротких YouTube-видео со всем необходимым для начинающих Frontend-разработчиков.

  5. Курс HTML & CSS

    Видеокурс для начинающих HTML- и CSS-верстальщиков от Андрея Андриевского. За несколько часов хронометража автор проходится по основам кодинга с помощью данных языков, а также дает полезные советы желающим попробовать себя в сфере веб-разработки.

  6. HTML для начинающих

    Видеоуроки по HTML-верстке от ВебКадеми для начинающих программистов и учащихся образовательных учреждений. Программа рассчитана на 17 коротких роликов, в рамках которых автор канала Юрий Ключевский расскажет зрителям об основных аспектах веб-разработки.

  7. Бесплатный курс по верстке сайтов (Front End). Уроки HTML CSS JS

  8. HTML 2021 - Свежий курс веб-разработки

  9. ФРОНТЕНД. Введение во Frontend | Технострим от VK Team

  10. Web разработка

  11. Учим HTML за 1 Час! #От Профессионала

  12. БЕСПЛАТНЫЙ курс по верстке сайтов (Front End). Уроки HTML CSS JS // Фрилансер по жизни

  13. Веб-разработчик 10.0

  14. Web разработка

  15. Front-End разработка. Курсы по HTML, CSS, JavaScript

  16. Фронтенд разработка (осень 2017)

  17. Web-разработка

35 лучших бесплатных курсов HTML/CSS верстки в 2023 Программирование, HTML, CSS, Верстка, Курсы программирования, Основы HTML, IT, Создание сайта, Длиннопост, Текст, Подборка

Что можно делать с помощью HTML и CSS?

Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

  • Применяя HTML и CSS в верстке и веб-программировании, разработчики могут:

  • Менять стиль и дизайн веб-проектов;

  • Отлаживать код

Сколько приносит верстка HTML и CSS в 2023 году?

По данным HH.ru, в феврале 2023 года средняя зарплата верстальщика на HTML и CSS составляет 46 000 рублей. Senior-программисты могут получать до 70 000 рублей, а вот Junior — примерно 35 000.

В то же время, рынок труда предлагает около 1 600 вакансий для позиции верстальщиков HTML и CSS каждый месяц.

Почему HTML?

Выступая практически универсальным решением в программировании, Java представляет собой:

  • Язык с понятной структурой — у Java несложный синтаксис;

  • Широкий выбор фреймворков — есть готовый набор решений для любых проектов;

  • Безопасный кодинг — JVM блокирует попытки навредить коду;

  • Обратно совместимый язык — все коды полностью функционируют вне зависимости от даты написания.

Почему HTML и CSS?

HTML и CSS — наиболее популярные языки во всех формах веб-программирования. Так, они:

  • Экономно расходуют ресурсы сервера сайта — из-за своей структуры код занимает мало места в системе;

  • Упрощают разработку сайтов — один файл стилей можно применить сразу на все страницы;

  • Ускоряют загрузку сайта — браузер кеширует стили, а далее загружает только данные;

  • Совмещают любые устройства — если они имеют доступ к редакторам HTML- и CSS-файлов.

Показать полностью 2
Отличная работа, все прочитано!