Forwarded from FrontEndDev
Техника загрузки изображений-плейсхолдеров в низком разрешении
Улучшаем метрики Web Vitals при помощи предзагрузки картинок в плохом качестве.
https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/
Улучшаем метрики Web Vitals при помощи предзагрузки картинок в плохом качестве.
https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/
Forwarded from 🤟 TechRocks: веб-разработка
JavaScript только что добавил новое ключевое слово для создания переменной под названием using. Это ключевое слово является идеальной заменой let и const в определенных сценариях, таких как подключения к базе данных и обработка файлов.
Читать статью
Читать статью
Forwarded from mefody.dev
Очистка кэша и кук на стороне клиента
Как часто вам приходится просить пользователей сервиса перезагрузить страничку, очистить кэш, зайти в инкогнито? В моей практике такое было слишком часто.
По-хорошему, проблему инвалидацию кэша надо решать в самом приложении, а не просить пользователя. Но не просто так на слуху золотая цитата Фила Карлтона: «В информатике всего две сложные вещи: инвалидация кэша и именование сущностей».
В HTTP-заголовках можно найти интересное:
Гарри Робертс советует делать в веб-приложениях отдельную страничку с кнопками «Очистить куки», «Очистить кэш». Так у злоумышленников будет меньше возможностей сбрасывать жертвам ссылки, которые что-то чистят без спросу, потому что можно проверять
https://csswizardry.com/2023/10/clear-cache-on-customer-device/
Как часто вам приходится просить пользователей сервиса перезагрузить страничку, очистить кэш, зайти в инкогнито? В моей практике такое было слишком часто.
По-хорошему, проблему инвалидацию кэша надо решать в самом приложении, а не просить пользователя. Но не просто так на слуху золотая цитата Фила Карлтона: «В информатике всего две сложные вещи: инвалидация кэша и именование сущностей».
В HTTP-заголовках можно найти интересное:
Clear-Site-Data: "cache", "cookies". Сервер может отправить на клиент заголовок, который попросит браузер почистить куки и/или кэш. Работает везде, кроме Safari. То есть вместо того, чтобы просить пользователя что-то сделать в стрессовой ситуации, когда у него что-то не работает, а он девтулзы не открывал никогда до этого, можно сделать всё самим.Гарри Робертс советует делать в веб-приложениях отдельную страничку с кнопками «Очистить куки», «Очистить кэш». Так у злоумышленников будет меньше возможностей сбрасывать жертвам ссылки, которые что-то чистят без спросу, потому что можно проверять
Referer на сервере.https://csswizardry.com/2023/10/clear-cache-on-customer-device/
Csswizardry
How to Clear Cache and Cookies on a Customer’s Device – CSS Wizardry
There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?
Forwarded from Заметки разработчика
Регулярные выражения могут быть пугающими, но это не так! Узнайте все необходимое о регулярных выражениях и их использовании в JavaScript.
Строка — это, пожалуй, самый важный тип данных в программировании; все языки программирования и программное обеспечение в мире так или иначе используют строки. Они позволяют человеку легко общаться со сложными программами и машинами. Одна вещь, которая очень поможет вам как программисту, — это понимание того, как использовать строки и манипулировать ими, чтобы создавать программы, которыми смогут эффективно пользоваться пользователи.
Регулярные выражения позволяют разработчикам выполнять широкий спектр задач по обработке текста, таких как проверка данных, манипулирование строками и извлечение текста, в очень сжатой форме. В этой статье вы узнаете все, что нужно знать о регулярных выражениях, и сможете начать эффективно использовать их в своём JavaScript-коде.
https://www.dev-notes.ru/articles/javascript/regular-expressions/
Строка — это, пожалуй, самый важный тип данных в программировании; все языки программирования и программное обеспечение в мире так или иначе используют строки. Они позволяют человеку легко общаться со сложными программами и машинами. Одна вещь, которая очень поможет вам как программисту, — это понимание того, как использовать строки и манипулировать ими, чтобы создавать программы, которыми смогут эффективно пользоваться пользователи.
Регулярные выражения позволяют разработчикам выполнять широкий спектр задач по обработке текста, таких как проверка данных, манипулирование строками и извлечение текста, в очень сжатой форме. В этой статье вы узнаете все, что нужно знать о регулярных выражениях, и сможете начать эффективно использовать их в своём JavaScript-коде.
https://www.dev-notes.ru/articles/javascript/regular-expressions/
Заметки разработчика
Регулярные выражения в JavaScript
Регулярные выражения могут быть пугающими, но это не так! Узнайте все необходимое о регулярных выражениях и их использовании в JavaScript.
Forwarded from Bash Days | Linux | DevOps (ʜ ᴅ)
Часто люди бездумно засовывают в крон запуск долгоиграющих скриптов и потом ловят кучу багов.
К примеру некий скрипт запускается в кроне каждый час. В какой-то момент, время выполнения скрипта начинает составлять 70 и более минут. Соответственно следующий джоб через 60 минут запустит еще одну копию этого скрипта. И понеслась 3.14зда по кочкам.
Я ловил у ребят подобные перлы, когда сервер просто раком встает, а в фоне крутятся 100500 процессов, которые насилуют mysql как портовую шлюху, вдоль и поперек.
На такие случаи необходимо проверять запущен ли скрипт в данный момент. И если запущен, то при повторном запуске - ничего не делать.
Как такое реализовать? В бест-практиках это реализуется через lock файлы. Для удобства работы с lock файлами, в linux есть коробочный вариант утилиты, которая называется flock.
flock — утилита, которая позволяет использовать лок-файл для предотвращения запуска копии процесса (вашего скрипта, крона или чего-то еще). Например, используя cron нужно быть уверенным, что предыдущий запуск вашего скрипта уже завершен.
Пишем обработчик:
Как только скрипт завершит работу, ты сможешь запустить его повторно.
Сначала создается lock файл если его нет, а далее начинается магия с дескрипторами и логикой.
Вместо sleep можно вставить запуск функции типа main() где и будет основная логика скрипта. Либо вообще через source (или точку) заинклудить свой скрипт. То есть можно сделать универсальную штуку, чтобы в каждый скрипт не пихать flock.
Делаешь один обработчик и передаешь ему параметром путь до скрипта + путь до lock файла. А обработчик через source подгружает уже полезную нагрузку.
Моё решение возможно не самое изящное, но рабочее. Изучай. Слышал что такое можно провернуть каким-то образом через сокеты, но особо не вникал. Если в комментах поделишься, будет очень полезно. Спасибо!
tags: #linux #bash #utils
—
💩 @bashdays
К примеру некий скрипт запускается в кроне каждый час. В какой-то момент, время выполнения скрипта начинает составлять 70 и более минут. Соответственно следующий джоб через 60 минут запустит еще одну копию этого скрипта. И понеслась 3.14зда по кочкам.
Я ловил у ребят подобные перлы, когда сервер просто раком встает, а в фоне крутятся 100500 процессов, которые насилуют mysql как портовую шлюху, вдоль и поперек.
На такие случаи необходимо проверять запущен ли скрипт в данный момент. И если запущен, то при повторном запуске - ничего не делать.
Как такое реализовать? В бест-практиках это реализуется через lock файлы. Для удобства работы с lock файлами, в linux есть коробочный вариант утилиты, которая называется flock.
flock — утилита, которая позволяет использовать лок-файл для предотвращения запуска копии процесса (вашего скрипта, крона или чего-то еще). Например, используя cron нужно быть уверенным, что предыдущий запуск вашего скрипта уже завершен.
Пишем обработчик:
#!/bin/bashЗапускаем скрипт. Ничего полезного он не сделает, просто будет висеть 100 секунд. После того как ты запустил этот скрипт, в соседнем терминале попробуй запустить его же параллельно. В ответ ты получишь ожидаемое - Nice try.
lock="/tmp/bashdays.lock"
[[ -f "${lock}" ]] || touch "${lock}"
(
flock -n -o -x ${fd_lock} || { echo 'Nice try' >&2; exit 0; }
sleep 100
) {fd_lock}<"${lock}"
Как только скрипт завершит работу, ты сможешь запустить его повторно.
Сначала создается lock файл если его нет, а далее начинается магия с дескрипторами и логикой.
Вместо sleep можно вставить запуск функции типа main() где и будет основная логика скрипта. Либо вообще через source (или точку) заинклудить свой скрипт. То есть можно сделать универсальную штуку, чтобы в каждый скрипт не пихать flock.
Делаешь один обработчик и передаешь ему параметром путь до скрипта + путь до lock файла. А обработчик через source подгружает уже полезную нагрузку.
Моё решение возможно не самое изящное, но рабочее. Изучай. Слышал что такое можно провернуть каким-то образом через сокеты, но особо не вникал. Если в комментах поделишься, будет очень полезно. Спасибо!
tags: #linux #bash #utils
—
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Книги для Системного Администратора
Linux. Midnight Commander (mc) горячие клавиши (hot keys)
Сегодня мы поговорим о горячих клавишах (hotkey) Midnight Commander (mc). МС это файловый менеджер, существуют версии под Linux и Windows, мы будем рассматривать хот кей под Linux. Знание комбинаций клавиш позволяет значительно повысить удобство и скорость работы.
https://bookflow.ru/linux-midnight-commander-mc-goryachie-klavishi-hot-keys/
👉 @i_odmin_book
Сегодня мы поговорим о горячих клавишах (hotkey) Midnight Commander (mc). МС это файловый менеджер, существуют версии под Linux и Windows, мы будем рассматривать хот кей под Linux. Знание комбинаций клавиш позволяет значительно повысить удобство и скорость работы.
https://bookflow.ru/linux-midnight-commander-mc-goryachie-klavishi-hot-keys/
👉 @i_odmin_book
9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании
https://habr.com/ru/companies/simbirsoft/articles/769312/
https://habr.com/ru/companies/simbirsoft/articles/769312/
Forwarded from FrontEndDev
Развлекаемся с Gamepad API
О том, какие возможности предоставляет Gamepad API + реализация простой игры, управляемой с геймпада.
https://alvaromontoro.com/blog/68044/playing-with-the-gamepad-api
О том, какие возможности предоставляет Gamepad API + реализация простой игры, управляемой с геймпада.
https://alvaromontoro.com/blog/68044/playing-with-the-gamepad-api
О «критически важных» обновлениях Angular 17 / Хабр
https://habr.com/ru/articles/771494/
https://habr.com/ru/articles/771494/
Хабр
О «критически важных» обновлениях Angular 17
Хочу высказать непопулярное мнение относительно обновлений в библиотеках и фреймворках. Иногда новшества вместе с новизной и удобствами несут дополнительное усложнение и побочные эффекты, которые...
Forwarded from Библиотека PHP программиста 👨🏼💻👩💻
Генерация аватаров с инициалами на PHP
Для мобильного приложения я занимаюсь фронтенд-разработкой, и дизайн включает в себя множество аватаров. К сожалению, у нас нет аватаров наших пользователей. К счастью, у нас есть их имена, и я узнал из Outlook и Trello, что можно сделать отличные аватары с инициалами пользователя. В этом посте я покажу, как это сделать с помощью PHP.
https://tqdev.com/2022-generate-avatars-initials-php
👉 @php_lib
Для мобильного приложения я занимаюсь фронтенд-разработкой, и дизайн включает в себя множество аватаров. К сожалению, у нас нет аватаров наших пользователей. К счастью, у нас есть их имена, и я узнал из Outlook и Trello, что можно сделать отличные аватары с инициалами пользователя. В этом посте я покажу, как это сделать с помощью PHP.
https://tqdev.com/2022-generate-avatars-initials-php
👉 @php_lib
Forwarded from Книги для Системного Администратора
This media is not supported in your browser
VIEW IN TELEGRAM
Что происходит, когда вы вводите в браузер URL-адрес?
Давайте рассмотрим этот процесс пошагово.
Шаг 1. Пользователь вводит в браузер URL и нажимает Enter. Первое, что нам нужно сделать, это преобразовать URL в IP-адрес. Сопоставление обычно хранится в кэше, поэтому браузер ищет IP-адрес в нескольких уровнях кэша: кэше браузера, кэше ОС, локальном кэше и кэше провайдера. Если браузер не смог найти сопоставление в кэше, он обращается к DNS (Domain Name System) resolver для его разрешения.
Шаг 2. Если IP-адрес не удается найти ни в одном из кэшей, браузер обращается к DNS-серверам для выполнения рекурсивного DNS-поиска, пока IP-адрес не будет найден.
Шаг 3. Теперь, когда у нас есть IP-адрес сервера, браузер посылает на него HTTP-запрос. Для безопасного доступа к ресурсам сервера всегда следует использовать протокол HTTPS. Сначала браузер устанавливает TCP-соединение с сервером с помощью трехстороннего рукопожатия TCP. Затем он посылает открытый ключ клиенту. Клиент использует открытый ключ для шифрования сеансового ключа и отправляет его серверу. Сервер использует закрытый ключ для расшифровки сеансового ключа. Теперь клиент и сервер могут обмениваться зашифрованными данными с использованием сеансового ключа.
Шаг 4. Сервер обрабатывает запрос и отправляет ответ. Для успешного ответа код состояния равен 200. Ответ состоит из трех частей: HTML, CSS и Javascript. Браузер анализирует HTML и формирует дерево DOM. Он также анализирует CSS и генерирует дерево CSSOM. Затем он объединяет дерево DOM и дерево CSSOM в дерево рендеринга. Браузер отображает содержимое и показывает его пользователю.
👉 @i_odmin_book
Давайте рассмотрим этот процесс пошагово.
Шаг 1. Пользователь вводит в браузер URL и нажимает Enter. Первое, что нам нужно сделать, это преобразовать URL в IP-адрес. Сопоставление обычно хранится в кэше, поэтому браузер ищет IP-адрес в нескольких уровнях кэша: кэше браузера, кэше ОС, локальном кэше и кэше провайдера. Если браузер не смог найти сопоставление в кэше, он обращается к DNS (Domain Name System) resolver для его разрешения.
Шаг 2. Если IP-адрес не удается найти ни в одном из кэшей, браузер обращается к DNS-серверам для выполнения рекурсивного DNS-поиска, пока IP-адрес не будет найден.
Шаг 3. Теперь, когда у нас есть IP-адрес сервера, браузер посылает на него HTTP-запрос. Для безопасного доступа к ресурсам сервера всегда следует использовать протокол HTTPS. Сначала браузер устанавливает TCP-соединение с сервером с помощью трехстороннего рукопожатия TCP. Затем он посылает открытый ключ клиенту. Клиент использует открытый ключ для шифрования сеансового ключа и отправляет его серверу. Сервер использует закрытый ключ для расшифровки сеансового ключа. Теперь клиент и сервер могут обмениваться зашифрованными данными с использованием сеансового ключа.
Шаг 4. Сервер обрабатывает запрос и отправляет ответ. Для успешного ответа код состояния равен 200. Ответ состоит из трех частей: HTML, CSS и Javascript. Браузер анализирует HTML и формирует дерево DOM. Он также анализирует CSS и генерирует дерево CSSOM. Затем он объединяет дерево DOM и дерево CSSOM в дерево рендеринга. Браузер отображает содержимое и показывает его пользователю.
👉 @i_odmin_book
Улучшаем возможности PM2 с помощью дополнительных модулей автоскейлинга и мониторинга
https://habr.com/ru/articles/778316/
https://habr.com/ru/articles/778316/
Новости с книжных полок: нужно ли программистам читать книги
https://habr.com/ru/companies/sberbank/articles/778310/
https://habr.com/ru/companies/sberbank/articles/778310/
Forwarded from ServerAdmin.ru
У меня дома есть NAS и на всех компах и ноутах подключены сетевые папки. Домашние слабо представляют, как всё это работает. На смартфоне использую TotalCommander с плагином для доступа к тем же сетевым папкам. Жена наверное через TG или VK перекидывает файлы. По-другому вряд ли умеет. Детям это пока не надо.
Есть простое и удобное open source решение для этого вопроса - LocalSend. Поддерживает все операционные системы, в том числе на смартфонах. Это небольшое приложение, которое запускается на определённом порту (53317), принимает входящие соединения и с помощью нескольких методов (описание протокола, в основе поиска Multicast UDP, если не помогает, то POST запрос на все адреса локальной сети) осуществляет поиск таких же серверов в локальной сети. Передача данных осуществляется по протоколу HTTP.
На практике всё это работает автоматически. Приложение под Windows можно поставить, к примеру, через wingwet или скачать portable версию. На смартфоне ставим через Google Play, F-Droid или просто качаем apk. Работает всё в локальной сети, без необходимости каких-то внешних сервисов в интернете. Запускаем на обоих устройствах приложение, они сразу же находят друг друга. Можно передавать файлы. При этом можно на том же компе настроить такой режим, чтобы он автоматом принимал файлы со смартфона и складывал в определённую директорию.
Каждое устройство в приложении можно обозвать своим именем и передавать файлы между ними. Не знаю, где это в работе может пригодиться, но для дома очень удобно. В первую очередь простотой и поддержкой всех платформ. В программе хороший русский язык, пользоваться просто и понятно.
Мне иногда надо сыну передать со своего смартфона из родительского чата информацию от учителя с пояснениями по домашке. Я для этого делал скриншот чата, клал его на NAS, на компе с NAS копировал сыну. Через приложение передать в разы удобнее. Запустил прогу и перекинул на комп с именем СЫН. Всё. Мессенджеров и соц. сетей у него пока нет.
Это приложение, которое я попробовал и сразу развернул на всех устройствах. Жене очень понравилось.
Отдельно отмечу, что приложение написано на языке программирования Dart. Впервые о нём услышал. Сначала показалось, что это типичное приложение на JavaScript под NodeJS. Но смутил небольшой размер. После этого и пошёл смотреть, на чём написано. Оказалось, что этот язык программирования разрабатывает Google как раз для замены JavaScript, взяв от него всё лучшее, но исправив недостатки. В целом, выглядит всё это неплохо.
⇨ Сайт / Исходники
#fileserver
Есть простое и удобное open source решение для этого вопроса - LocalSend. Поддерживает все операционные системы, в том числе на смартфонах. Это небольшое приложение, которое запускается на определённом порту (53317), принимает входящие соединения и с помощью нескольких методов (описание протокола, в основе поиска Multicast UDP, если не помогает, то POST запрос на все адреса локальной сети) осуществляет поиск таких же серверов в локальной сети. Передача данных осуществляется по протоколу HTTP.
На практике всё это работает автоматически. Приложение под Windows можно поставить, к примеру, через wingwet или скачать portable версию. На смартфоне ставим через Google Play, F-Droid или просто качаем apk. Работает всё в локальной сети, без необходимости каких-то внешних сервисов в интернете. Запускаем на обоих устройствах приложение, они сразу же находят друг друга. Можно передавать файлы. При этом можно на том же компе настроить такой режим, чтобы он автоматом принимал файлы со смартфона и складывал в определённую директорию.
Каждое устройство в приложении можно обозвать своим именем и передавать файлы между ними. Не знаю, где это в работе может пригодиться, но для дома очень удобно. В первую очередь простотой и поддержкой всех платформ. В программе хороший русский язык, пользоваться просто и понятно.
Мне иногда надо сыну передать со своего смартфона из родительского чата информацию от учителя с пояснениями по домашке. Я для этого делал скриншот чата, клал его на NAS, на компе с NAS копировал сыну. Через приложение передать в разы удобнее. Запустил прогу и перекинул на комп с именем СЫН. Всё. Мессенджеров и соц. сетей у него пока нет.
Это приложение, которое я попробовал и сразу развернул на всех устройствах. Жене очень понравилось.
Отдельно отмечу, что приложение написано на языке программирования Dart. Впервые о нём услышал. Сначала показалось, что это типичное приложение на JavaScript под NodeJS. Но смутил небольшой размер. После этого и пошёл смотреть, на чём написано. Оказалось, что этот язык программирования разрабатывает Google как раз для замены JavaScript, взяв от него всё лучшее, но исправив недостатки. В целом, выглядит всё это неплохо.
⇨ Сайт / Исходники
#fileserver
Forwarded from TechRocks
В чем разница между : и :: в CSS?
#css
Если вы хотите быстро получить ответ на вопрос из заголовка статьи, то вот он:
-
Читать статью
#css
Если вы хотите быстро получить ответ на вопрос из заголовка статьи, то вот он:
-
: относится к псевдоклассам, таким как :visited или :hover
- :: — для псевдоэлементов, таких как ::first-of-type или ::after
А если хотите более подробных объяснений, давайте рассмотрим примеры.Читать статью
Forwarded from Frontender's notes [ru]
🕵♀Следим и вычисляем с Vue 3, или Как использовать watchEffect
В этой статье разберем новый метод слежения за реактивными свойствами watchEffect.
Читать...
В этой статье разберем новый метод слежения за реактивными свойствами watchEffect.
Читать...
