Как проверить, слиты ли ваши пароли 🚀
У Google есть сервис Password Checkup: он проверяет сохранённые в системе пароли на предмет утечек. В нём огромная база — больше 4 млрд (!) пользователей. Если у вас что-то утекло, скорее всего, сервис уже знает об этом.
Перейдя по адресу passwords.google.com, нажмите на кнопку «Проверить пароли» («Check Passwords») и подтвердите свою личность. Вы увидите не только слитые пароли, но и те, которые ещё в безопасности.
Google отмечает, что на его сайтах пользователи защищаются от утечек автоматически. Компания постоянно сканирует хакерские базы. Если пароль для Google Account замечен в какой-нибудь из утечек, то он автоматически деактивируется. Такая мера уже позволила в десять раз уменьшить угоны аккаунтов Google.
Ещё одна крутая фича: Google покажет повторяющиеся и простые пароли — чтобы вы обратили на них внимание и сменили.
У Google есть сервис Password Checkup: он проверяет сохранённые в системе пароли на предмет утечек. В нём огромная база — больше 4 млрд (!) пользователей. Если у вас что-то утекло, скорее всего, сервис уже знает об этом.
Перейдя по адресу passwords.google.com, нажмите на кнопку «Проверить пароли» («Check Passwords») и подтвердите свою личность. Вы увидите не только слитые пароли, но и те, которые ещё в безопасности.
Google отмечает, что на его сайтах пользователи защищаются от утечек автоматически. Компания постоянно сканирует хакерские базы. Если пароль для Google Account замечен в какой-нибудь из утечек, то он автоматически деактивируется. Такая мера уже позволила в десять раз уменьшить угоны аккаунтов Google.
Ещё одна крутая фича: Google покажет повторяющиеся и простые пароли — чтобы вы обратили на них внимание и сменили.
[React] Компоненты и пропсы 🚀
Всем привет! В этом посте вы узнаете, что такое компоненты и пропсы в React.
📌 Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз.
Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
📌 Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать один и тот же компонент на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.
📌 Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый. React достаточно гибкий, но это правило нарушать нельзя.
Конечно, интерфейсы приложений обычно изменяются с течением времени. В следующих постах мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента.
💬 Как вам пост? Пиши своё мнение в комментарии!
Более подробно раскрыл тему в Инстаграме🔥👇
Всем привет! В этом посте вы узнаете, что такое компоненты и пропсы в React.
📌 Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз.
Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
📌 Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать один и тот же компонент на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.
📌 Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, функциональный он или классовый. React достаточно гибкий, но это правило нарушать нельзя.
Конечно, интерфейсы приложений обычно изменяются с течением времени. В следующих постах мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента.
💬 Как вам пост? Пиши своё мнение в комментарии!
Более подробно раскрыл тему в Инстаграме🔥👇
Таймер обратного отсчёта 🚀
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Всем привет! Выкладываю код таймера обратного отсчёта для сайта 🚀
Таймер для сайта нужен в случае, если вам необходимо показать посетителям оставшееся время до какого-либо определенного события, мероприятия или праздника.
Кроме того, таймер обратного отсчета уже давно стал неотъемлемой частью Landing Page, а также «продающих сайтов». Таймер побуждает аудиторию к совершению целевого действия на сайте, ограничивая время акции, создавая эффект срочности и/или эффект дефицита товара.
Таймер написан на чистом JavaScript без использования сторонних библиотек. Вёрстка также уже написана.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации подсказки при нажатии на поле input 🚀
В дизайне часто требуется вставить подсказку для пользователя. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля при наведении. Это делается с помощью атрибута placeholder, значением которого служит любой текст.
Подсказывающий текст отображается красным цветом, появляется при получении фокуса и исчезает, если фокус теряется.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Всем привет! Выкладываю код анимированного текста. HTML + CSS
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after.
Написано на HTML + CSS.
Подсказка при нажатии на input 🚀
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
Всем привет! Выкладываю код реализации плавного подчёркивания при наведении. HTML + CSS 🚀
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Написано на HTML + CSS.
[Курс по GIT] Основы 🚀
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
В этом курсе познакомимся с основами Git. Рекомендую все команды прописывать своими руками. Так вы быстрее и качественне будете усваивать материал.
Git - это консольная утилита, для отслеживания и ведения истории изменения файлов, в вашем проекте. Чаще всего его используют для кода, но можно и для других файлов. Например, для картинок - полезно для дизайнеров.
С помощью Git-a вы можете откатить свой проект до более старой версии, сравнивать, анализировать или сливать свои изменения в репозиторий.
Репозиторием называют хранилище вашего кода и историю его изменений. Git работает локально и все ваши репозитории хранятся в определенных папках на жестком диске.
Каждая точка сохранения вашего проекта носит название коммит (commit). У каждого commit-a есть hash (уникальный id) и комментарий. Из таких commit-ов собирается ветка. Ветка - это история изменений. У каждой ветки есть свое название. Репозиторий может содержать в себе несколько веток, которые создаются из других веток или вливаются в них.
Анимация при наведении на ссылку 🚀
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Всем привет! В этом посте вы узнаете, как можно сделать красивую кастомную анимацию при наведении на ссылку 🚀
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Написано на HTML + CSS.
Проверка файлов на вирусы в браузере, надежнее любого антивируса 🔥
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
Элементарная безопасность: не открывать на своём ПК сомнительные файлы от незнакомых людей. Лучше использовать сторонние сервисы — например, Virustotal. Он проверяет файлы и сайты на наличие вредоносного кода по базам 40 разных антивирусов. Это надёжнее, чем проверять одним антивирусом. Ещё удобно, что Virustotal не требует установки и работает даже на смартфоне.
Достаточно загрузить файл весом до 650 МБ или ссылку, чтобы онлайн-антивирус сделал своё дело — полный анализ файла всеми антивирусами и обобщённый результат. Если файл уже был загружен в сервис и прошел проверку, результат будет мгновенным. Хотя у вас всегда есть возможность просканировать файл ещё раз — чтобы информация точно была актуальной.
Если боитесь открыть ссылку или документ, Virustotal является одним из лучших сервисов, который регулярно обновляет свои базы данных. Пользуйтесь!
Крутая анимация при наведении 🚀
Всем привет! В этом посте покажу, как можно сделать карточку с крутым эффектом при наведении.
Данная карточка написана на HTML + CSS.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Всем привет! В этом посте покажу, как можно сделать карточку с крутым эффектом при наведении.
Данная карточка написана на HTML + CSS.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after. Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Видео внутри текста 🚀
Всем привет! В этом посте покажу, как можно сделать видео внутри текста.
Данная карточка написана на HTML + CSS.
Тег video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>
Всем привет! В этом посте покажу, как можно сделать видео внутри текста.
Данная карточка написана на HTML + CSS.
Тег video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>
Ключевое слово this [Курс по JS] 🚀
Всем привет! В этом посте разберем, как ведет себя ключевое слово this в зависимости от контекста. Уверен, будет полезно!
Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод bind(), который используется для привязки значения ключевого слова this независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).
Всем привет! В этом посте разберем, как ведет себя ключевое слово this в зависимости от контекста. Уверен, будет полезно!
Поведение ключевого слова this в JavaScript несколько отличается по сравнению с остальными языками. В большинстве случаев значение this определяется тем, каким образом вызвана функция. Значение this не может быть установлено путём присваивания во время исполнения кода и может иметь разное значение при каждом вызове функции. В ES5 представлен метод bind(), который используется для привязки значения ключевого слова this независимо от того, как вызвана функция. Также в ES2015 представлены стрелочные функции, которые не создают собственные привязки к this (они сохраняют значение this лексического окружения, в котором были созданы).
