WEB - верстальщик HTML, CSS, JS

Большинство браузеров, поддерживающих Chromium, поддерживают атрибут loading со следующими значениями: • Lazy — указывает, что iframe должен быть загружен позже. Когда браузер приближается к области просмотра, он загружает iframe.• Eager — iframe будет загружен сразу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.• Auto — браузер имеет право определять время загрузки iframe.Ленивая загрузка iframe может быть эффективной, если вы работаете с картами или видео. Например, если вы используете API Google MapsEmbed, для отложенной загрузки карты.#html#полезно

Полезная однострочная функция JavaScript, с помощью которой можно легко скопировать любой текст в буфер обмена 👇const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("This Sring is Copied To Clipboard.");#javascript #полезно

Выбор цвета (React) 🎨#codepen

Reseter.css объединяет все стили вашего браузера по умолчанию, переопределяя готовые стили. Это большая разница, когда normalize пытается сохранить, а Reseter.css переопределяет для большей поддержки. Нормализация работает с учетом браузеров при ее создании. Reseter.css поддерживает все браузеры и он улучшает кросс-браузерность.• Исправленные ошибки и несоответствия браузера.• Перезагружает различные стили элементов.• Доступны в Sass, Scss, Less, Stylus, стилизованные компоненты (js, mjs, ts).• Размер файла — 2,59 КБ.• Включает нормализацию всех элементов.• box-sizing: border-box; set;• Проверено во всех браузерах с помощью BrowserStack.#css

Порядок скриптовВ любом приложении сначала необходимо загрузить основной контент. Затем мы можем сосредоточиться на сторонних вставках, поскольку они в основном занимают небольшую область на веб-странице.Например, текстовое содержание статьи должно быть загружено перед встраиванием любых изображений или видео.Но иногда сторонние вставки могут мешать загрузке основного контента из-за парсера блокировки JavaScript. Следовательно, нам нужно быть очень осторожными с порядком их загрузки.Мы можем использовать свойства async и defer в теге script, чтобы упорядочить выполнение сценариев.#html #полезно

Эффект замены текста при наведении мыши на ссылку С этим эффектом есть небольшая хитрость. Магия заключается в использовании data-атрибута. С его помощью задается текст, который будет въезжать в область видимости. Также он вызывается со свойством content у псевдо-элемента ::after на ссылке. #css

Обычно промисы используются, чтобы избежать ада обратных вызовов.userLogin('user').then(function(user){    getArticle(user).then(function(articles){        showArticle(articles).then(function(){            //Your code goes here...        });    });});Чтобы избежать этого, нам нужно отменить вложенность кода, вызвав getArticle из первого then и обработать его во втором then. 👇userLogin('user')  .then(getArticle)  .then(showArticle)  .then(function(){       //Your code goes here...});#javascript #полезно

Пример оформления навигационного меню 👇#codepen

Сам себе программист. Как научиться программировать и устроиться в Ebay?Как за год научиться программировать и устроиться разработчиком в Ebay? Автор этой книги на собственном опыте знает, что это возможно, и делится знаниями с читателями. Кори Альтхофф создал универсальный самоучитель, не похожий ни на один другой. На примере языка Python автор показывает, как буквально с первого урока можно приступить к созданию собственной небольшой программы, а к концу книги уверенно писать код.#книги

Функция array.flatMap() принимает функцию обратного вызова в качестве аргумента и возвращает новый сопоставленный массив:const mappedArray = array.flatMap((item, index, origArray) => { // ... return [value1, value2, ..., valueN];}[, thisArg]);Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.#javascript

Атрибут loading элемента <img>  (или  loading атрибут для <iframe>) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.<img src="image.jpg" loading="lazy" alt="..." /><iframe src="video-player.html" loading="lazy"></iframe>Событие load запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в visual viewpoint. #html #полезно

Анимация при наведении на карточку 👇#codepen

Сheckbox группа в виде плиток, которую вы можете использовать в своих работах 👇#codepen

CSS Grid функция auto-fill()auto-fill() – ключ ко всему. Необходимо чтобы каждая строка заполнялась максимальным числом колонок. Детально прочитать про auto-fill можете в замечательной статье Sara Soueidan «the difference between auto-fill and auto-fit». В этой статье есть видео, показывающее принцип работы.#css

Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к началу веб-страницы.const goToTop = () => window.scrollTo(0, 0);goToTop();#javascript