Еще одна полезная функция JavaScript, которая используется для автоматической прокрутки к началу веб-страницы.

const goToTop = () => window.scrollTo(0, 0);
goToTop();

#javascript

CSS Grid функция auto-fill()

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

#css

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

#codepen

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

#codepen

Атрибут loading элемента <img>  (или  loading атрибут для <iframe>) могут быть использованы, чтобы указать браузеру на необходимость отложить загрузку изображений / iframe до тех пор, пока пользователь не доскроллит до них.

<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Событие load запускается, когда все другие необходимые ресурсы были загружены. В это время, возможно (или даже наиболее вероятно), что изображения не будут загружены, даже если пользователь доскроллит до изображений и они будут в visual viewpoint.

#html #полезно

Функция array.flatMap() принимает функцию обратного вызова в качестве аргумента и возвращает новый сопоставленный массив:

const mappedArray = array.flatMap((item, index, origArray) => {
 // ...
 return [value1, value2, ..., valueN];
}[, thisArg]);

Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.

#javascript

Сам себе программист. Как научиться программировать и устроиться в Ebay?

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

#книги

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

#codepen

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

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 #полезно

Эффект замены текста при наведении мыши на ссылку

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

#css

Порядок скриптов

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

#html #полезно

Reseter.css объединяет все стили вашего браузера по умолчанию, переопределяя готовые стили. Это большая разница, когда normalize пытается сохранить, а Reseter.css переопределяет для большей поддержки. Нормализация работает с учетом браузеров при ее создании. Reseter.css поддерживает все браузеры и он улучшает кросс-браузерность.

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

#css

Полезная однострочная функция JavaScript, с помощью которой можно легко скопировать любой текст в буфер обмена 👇

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
 
copyToClipboard("This Sring is Copied To Clipboard.");

#javascript #полезно

Большинство браузеров, поддерживающих Chromium, поддерживают атрибут loading со следующими значениями:

• Lazy — указывает, что iframe должен быть загружен позже. Когда браузер приближается к области просмотра, он загружает iframe.
• Eager — iframe будет загружен сразу после рендеринга страницы. Атрибут eager — это значение атрибута loading по умолчанию.
• Auto — браузер имеет право определять время загрузки iframe.

Ленивая загрузка iframe может быть эффективной, если вы работаете с картами или видео. Например, если вы используете API Google MapsEmbed, для отложенной загрузки карты.

#html#полезно

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 

Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга наполнена ценными практическими советами, содержит подробный теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети, включая рассказ о React.js.

#книги

Работа с aspect-ratio гораздо проще: указываете ширину и высоту соотношения сторон через слэш или укажите число с плавающей точкой. 2 примера соотношения сторон ниже работают одинаково:

.aspect-box {
  aspect-ratio: 3 / 2;
}
.aspect-box {
  aspect-ratio: 1.5;
}

Ширину и высоту можно явно указать для элемента, и aspect-ratio будет работать ровно так, как вы ожидаете: если какое-то разрешение не указано, оно автоматически определится по соотношению сторон. Если указать для ширины и высоты не auto, то соотношение сторон больше не применяется. Это не баг. Так и задумано, это удобно. 👇

#css