Author: Андрей

27
Мар
2020

Intersection Observer API позволяет сделать отложенную загрузку моментальной

От автора: в этой статье мы узнаем больше о Intersection Observer API, новом и мощном API, теперь поддерживаемом современными браузерами, который помогает отложено загружать изображения и другие элементы на веб-страницах. Мы можем использовать этот API, чтобы определить видимость элементов и реализовать предварительную и отложенную загрузку содержимого DOM. В течение многих лет Веб развивался, браузеры постоянно […]

26
Мар
2020

Как сделать размытие фона в CSS с помощью одной строки кода

От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы […]

25
Мар
2020

Как создать липкий футер с помощью flexbox

От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до […]

25
Мар
2020

CSS Import

От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также […]

24
Мар
2020

4 способа анимировать цвет текстовой ссылки при наведении

От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: […]

23
Мар
2020

Дата выхода и что нового в Bootstrap 5

От автора: Bootstrap существует уже более 8 лет и является самым популярным в мире CSS-фреймворком. Он обслуживает около 18 миллионов веб-сайтов по всему миру, и эти цифры продолжают расти. Если вы веб-разработчик, то вероятность того, что вы, как минимум, не слышали он нем, практически отсутствует. Альфа-версия Bootstrap 4 была выпущена 19 августа 2015 года и […]

23
Мар
2020

Пересечение текста линией в CSS

От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно. Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, […]

20
Мар
2020

Умная анимация с помощью пользовательских свойств

От автора: несколько дней назад я разговаривал с другом о самых популярных библиотеках CSS для интеграции в проект простых анимаций. После небольшого исследования появились эти названия, в том числе самые популярные Animate.css и AnimeJS. Список популярных библиотек CSS для интеграции в проект простых анимаций: animate.css animejs magic animations hover anijs Больше всего меня поразило то, […]

20
Мар
2020

Rome, новый набор инструментов JavaScript

От автора: Себастьян МакКензи, первоначальный создатель Yarn и Babel и член команды Facebook React Native, работает над решением «все в одном» для разработки JavaScript и TypeScript. Проект Rome, отсылка ко «все дороги ведут в Рим», был представлен общественности 26 фев 2020. Что такое Rome? Rome — это реализация полного набора инструментов JavaScript с нуля. Он […]

20
Мар
2020

Адаптивный сеточный макет журнала с помощью всего 20 строк CSS

От автора: недавно я работал над современной версией блогролла. Идея заключалась в том, чтобы предложить читателям подборку последних постов из этих блогов в макете в стиле журнала, а не просто выложить список любимых постов в боковой панели. Легкой частью было получение списка постов с выдержками из избранных RSS-каналов. Для этого мы использовали плагин WordPress, Feedzy […]

19
Мар
2020

Отрицательные поля в CSS

От автора: я пишу в новой книге главу «Блочная модель» и подошел к тому моменту, когда мне пришлось рассматривать отрицательные поля. К моему удивлению, я обнаружил, что нигде нет систематизированного описания отрицательных полей. Поэтому я должен был понять это для себя. Ниже мой первоначальный проект раздела «Отрицательные поля». Последняя спецификация говорит только: «Отрицательные значения для […]

18
Мар
2020

Все, что вы хотели знать о Service Worker

От автора: этот пост полностью посвящен Service Worker, как он работает, где мы можем его использовать, как мы можем удалить это, где он не будет работать и многое другое. Service Worker Service Worker — это файл скрипта Java, который запускается в браузере пользователя как фоновый процесс. Как работает Service Worker Он перехватывает сетевые запросы, кэширует […]

17
Мар
2020

5 лучших фронт-энд JavaScript-фреймворков

От автора: популярность JavaScript со временем только росла, и этот стремительный рост привел к широкому его использованию: от стандартной фронт-энд разработки до использования на стороне сервера через node.js и разработки мобильных приложений. Разработчики создали множество фронт-энд фреймворков и библиотек JavaScript, помогающих экономить время и улучшать качество приложений. 5 самых популярных вариантов: Данные предоставлены StateOfJS Surveys […]

16
Мар
2020

Не работает firebase после скачивания с play market

Мобильное приложение после скачивания с play market не показывает содержание с firebase, но когда идет установки на эмулятор, то все работает, все данные с firebase отображаются
Приложение подписано release ключом с google console (ключ з…

13
Мар
2020

Улучшение воспринимаемой производительности с помощью свойства CSS font-display

От автора: типографика в Интернете прошла долгий путь со времен Scalable Inman Flash Replacement (sIFR) и более поздних версий cufón. Это были тяжелые времена для веб-разработчиков. Раньше я боялся получить PSD-файл с каким-то экзотическим шрифтом, использованным в дизайне, так как знал, что впереди еще много часов кросс-браузерной настройки. К счастью, в современном Интернете у нас […]

13
Мар
2020

Фиксированные заголовки и ссылки перехода? Решение в scroll-margin-top

От автора: Проблема: вы нажимаете ссылку перехода, например, <a href=»#header-3″>Jump</a> — это ссылка на что-то наподобие <h3 id=»header-3″>Header</h3>. Это совершенно нормально, пока в верхней части страницы не появится заголовок с position: fixed;, скрывающий заголовок, на который вы пытаетесь перейти! Фиксированные заголовки имеют неприятную привычку скрывать элемент, на который вы размещаете ссылку. Раньше для решения этой […]

12
Мар
2020

Создание диагонального макета в 2020 году

От автора: макеты с диагональными сечениями довольно популярны уже несколько лет. Это не новый горячий материал, и вы, вероятно, не найдете его в статьях под названием «Тенденции дизайна в 2020 году». Но я думаю, что это они все еще очень актуальны. Это тот инструмент, который дизайнеры могут использовать, чтобы придать динамику всем прямоугольным блокам со […]

12
Мар
2020

4 способа обмена значений между переменными в JavaScript

От автора: многие алгоритмы требуют обмена значениями между двумя переменными. Во время собеседования по кодированию вас могут спросить: «Как обменять значения между 2 переменными без временной переменной?». Полезно знать несколько способов обмена значениями между переменными. В этом посте вы прочитаете о 4 способах обмена (2 их которые используют дополнительную память и 2 не используют). 1. […]

11
Мар
2020

Пока вы искали в другом месте, CSS-градиенты стали лучше

От автора: удивительно, но недавно я обнаружила, что большинство людей даже не знают, что двойная позиция для градиентных переходов — это то, что действительно существует в спецификации, поэтому я решила написать об этом. Согласно спецификации: Задание двух местоположений облегчает создание однотонных «полос» в градиенте, без необходимости повторять цвет дважды. Я полностью согласна, это было первое, […]

11
Мар
2020

Как создать более читаемый CSS

От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов. Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте […]

10
Мар
2020

Свойства CSS object-fit и object-position: Обрезка изображений, встроенных в HTML

От автора: свойства object-fit и object-position используется, чтобы указать размер и положение внешних медиа, встроенных в HTML, в основном изображений внутри тега img, но также и содержимого элементов video, iframe или embed. Свойства не поддерживаются Internet Explorer, поэтому они более полезны для проектов, где это не так важно. object-fit и object-position могут рассматриваться как параллельные […]

06
Мар
2020

Использование CSS-свойства line-height для улучшения читабельности текста

От автора: в этой статье вы узнаете о свойстве CSS line-height и о том, как его использовать для создания приятного визуально, читаемого текста. Возможно, вы уже раньше видели, как использовать высоту строки: [crayon-5e61fbb30d87f965508193/] Но как это работает и какую роль играет в CSS? Типографские корни в CSS Многие идеи в CSS были взяты из типографики. […]

05
Мар
2020

Быстрый и легкий темный режим с пользовательскими свойствами CSS

От автора: добавление поддержки «темного режима» на веб-сайта или в приложение становится все более популярным среди разработчиков. Предоставление пользователям возможности выбора темной темы может быть полезным для доступности, так как некоторые люди испытывают головные боли или визуальные затруднения из-за слишком ярких экранов, или же испытывают затруднения при длительном чтении на светлом фоне. Медиа-запросы Благодаря спецификации […]

05
Мар
2020

Видеоплеер для сайта

От автора: идею текущего урока вы могли, скорее всего, неоднократно видеть на различных сайтах. Суть ее проста: видео встраивается в какое-либо изображение, например, это может быть телевизор, ноутбук или смартфон. В экраны этих устройств позиционируется проигрываемый ролик и смотрится все это достаточно оригинально. В данном видео эта идея будет развита и на выходе получится некоторый […]

04
Мар
2020

Пользовательские стили полей ввода с современным CSS

От автора: в наши дни вполне возможно создавать собственные чек-боксы, переключатели и радио-кнопки, сохраняя при этом семантичность и доступность. Нам даже не нужна ни одна строка JavaScript или дополнительные элементы HTML! На самом деле в последнее время это стало проще, чем когда либо. Давайте рассмотрим, как это делается. Вот, что мы получим в конечном итоге: […]

03
Мар
2020

Видеослайдер для сайта

От автора: в этом уроке вы найдете идею для организации видеослайдера для ваших сайтов. Полученный видеослайдер можно использовать, к примеру, в шапке сайта или же в какой-либо из его секций. Выглядит такое решение очень оригинально и симпатично. Как результат, на фоне секции будет проигрываться первое видео слайдера, а также пользователю будет предоставлена возможность выбора прочих […]

02
Мар
2020

Отправка почты, ajax запрос к php файлу

Вопрос о безопасности или даже не о безопасности, а вообще как сделать правильно.
Есть лендинг, обычная статика html. На страничке есть форма, js через ajax отправляет запрос на рядом лежащий php файл, который уже через mail() отправит пис…

02
Мар
2020

Почему я наслаждаюсь Svelte?

От автора: как человеку, который в первую очередь связан с React как по работе, так и лично для себя, мне часто задают вопросы о том, почему я так много играю со Svelte. Поэтому я записываю их, чтобы организовать свои мысли. Батарейки прилагаются Одна из первых вещей, которая, вероятно, поразит вас при первом контакте — это […]

02
Мар
2020

Как изменить данные в списке словарей?

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

# –…