htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

11622

Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky

Subscribe to a channel

Будни разработчика

Погрузитесь в мир Python с нашим бесплатным курсом!

🎓 Включено 45 уроков, 56 упражнений в тренажере и 163 проверочных теста. Узнаете, как создавать программы, работать с условиями и функциями.

Что вы освоите:
— Составление программ из нескольких модулей.
— Анализ ошибок в коде с использованием отладочной печати.

📚 Курс охватывает основы Python: синтаксис, условия, циклы, типы данных и библиотеки. Практика на каждом шаге поможет вам уверенно использовать язык.

Начните свое обучение с бесплатного базового курса Python и вы сможете создавать несложные программы, а так же анализировать ошибки в коде!

Читать полностью…

Будни разработчика

Вообще, оставлю заметку для себя по поводу этого репоста.

Я, в целом, понимаю, что Angie это форк nginx и цель у форка вполне конкретная, но от таких пресс-релизов можно получать пользу.

В данном случае, я, признаюсь, не знал о существовании протокола ACME, и обновлял сертификаты ручками. Ну окей, вызовом бота Let's Encrypt, но всё же.

А мог же просто:


http {
resolver 127.0.0.1:53; # требуется для директивы 'acme_client'
acme_client example https://acme-staging-v02.api.letsencrypt.org/directory;

server {
listen 80;
listen 443 ssl;
server_name example.com www.example.com;

acme example;
ssl_certificate $acme_cert_example;
ssl_certificate_key $acme_cert_key_example;
}
}


В общем, даже таким простым вещам иногда требуется "всплыть" на поверхность.

Читать полностью…

Будни разработчика

Привет, друзья! Рады сообщить, что мы обновили веб-сервер Angie и Angie PRO до версии 1.5.0! 🌟

Интересный факт: ровно год назад мы выпустили Angie PRO, а сегодня представляем новую версию веб-сервера с открытым исходным кодом Angie и Angie PRO — коммерческая версия веб-сервера.

Главным изменением в этом обновлении стало добавление модуля http_acme, который реализует поддержку протокола ACME (Automated Certificate Management Environment). Данный модуль необходим для того, чтобы значительно упростить работу с цифровыми сертификатами веб-сайтов, убирая необходимость использования сторонних решений, таких как EFF Certbot. Теперь Angie не уступает таким решениями, как Caddy!

Инструкция по установке доступна по ссылке.

А ознакомиться с полным списком всех изменений вы можете у нас на сайте.

Angie OSS и Angie PRO.

Читать полностью…

Будни разработчика

Как философ заработал состояние в $750 млн на знакомствах?

Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.

Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.

В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.

👉Подписывайтесь👈
и участвуйте в дискуссиях!

Читать полностью…

Будни разработчика

Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.

В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование

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

Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно 🥸

Читать полностью…

Будни разработчика

В DevTools Chrome 123 встроили какую-то пасхалку. Мол, искать под эмодзи 💫 (комета).

Кто искал? Кто нашёл?

Upd.  окей, в комментариях рассказали, как это сделать. Скоро выкачу и сюда :)

Читать полностью…

Будни разработчика

#фишка дня

Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.

Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":

.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}


Пример: https://codepen.io/t_afif/pen/XWQMPqY

#css #animation #transform #trick

Читать полностью…

Будни разработчика

Вы откликаетесь на миллион вакансий в день, выполняете тестовые задания, ходите на собеседования, но как итог не имеете ни одного оффера. Звучит знакомо? 🥺

Эту систему можно хакнуть! Главное —
1️⃣ Научиться правильно презентовать свой опыт
2️⃣ Выписать вопросы, которые чаще всего задают на собеседованиях и потренироваться отвечать на них
3️⃣ Понять, как мыслят проверяющие при оценке тестового задания, на что важно обратить внимание при его решении
4️⃣ Определить, на прокачке каких навыков нужно сфокусироваться в первую очередь.

С этими задачами помогут наши партнеры — Solvery. На следующей неделе ребята проводят Frontend Fest по трудоустройству!

📆 Расписание феста:

25.03 в 18:30 — Из чего состоит получение оффера? Необходимые скиллы, советы по резюме и воронка найма
26.03 в 19:00 — Разбор решений тестового задания
27.03 в 19:00 — Моковое собеседование по JavaScript
28.03 в 19:00 — Разбор резюме

Переходите по ссылке, чтобы зарегистрироваться на фест!

Читать полностью…

Будни разработчика

Смартфон за ваш ответ!

Исследовательская компания OMI проводит опрос среди IT-специалистов.

Пройдите по ссылке, ответьте на несколько вопросов и получите шанс выиграть последнюю модель передового смартфона!

Примите участие в опросе прямо сейчас — это займет минимум времени.

Читать полностью…

Будни разработчика

#такое дня

Предлагаю выразить своё отношение к происходящему в комментариях.

Объяснение через час.

Читать полностью…

Будни разработчика

☁️ CryptoCloud - ваш надежный инструмент для интеграции криптоплатежей.

Откройте возможность принимать оплату в криптовалюте со всего мира прямо в вашем приложении или сервисе.

С комиссиями всего от 0.4%, CryptoCloud позволяет минимизировать затраты и максимизировать прибыль вашего проекта.

Преимущества криптопроцессинга CryptoCloud:

💎 Легкая интеграцию криптоплатежей в любую систему или приложение.
💎 Автоматизация платежей;
💎 Функциональный кабинет.
💎 Вывод в течение 30 минут
💎 Высокий уровень безопасности

Поддерживаемые валюты платежной системы CryptoCloud:

💰 Bitcoin
🔹Ethereum
🪙 Litecoin
💲 Стейблкоины (USDT, USDC, TUSD) в различных сетях, обеспечивая гибкость и выбор для ваших пользователей.

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

Сделайте свои проекты еще более доступными для пользователей по всему миру, используя передовые решения CryptoCloud для криптоплатежей.

➡️ Присоединяйтесь к CryptoCloud, чтобы сделать свой бизнес лучше!

Читать полностью…

Будни разработчика

#баг дня

Срочно в номер! В Chrome 123 обнаружен баг, из-за коротого блокируется открытие DevTools.

В итоге, открывать их приходится в инкогнито или создав чистый профиль.

Ссылка на баг: https://issues.chromium.org/issues/330112831

Апдейт скоро прилетит. Пока же рекомендация не обновляться в ближайшие пару дней.

Читать полностью…

Будни разработчика

#такое дня

Я тут умудрился пропустить одну довольно интересную новость, несущую серьёзные выводы для веб-разработчиков.

В декабре 2023 года NASA перешла от использования CMS Drupal и React.js SPA на...

я выговорить это не могу, не то, что написать

...на Wordpress и классическую схему доставки контента aka backend generated.

Давате углубимся в историю.

В 2014 году NASA объявило о совершенно новом сайте, построенном по так называемой headless технологии, безголовой. Что это значит?

Что не подумали.

Берётся фреймворк или CMS, неважно, отрезаем часть, генерирующую HTML клиенту, вместо неё — JSON API. Фронтенд пишется на любом доступном фреймворке. В данном случае, React.

Эффект был потрясающий: хорошее кеширование, шикарная работа под большой нагрузкой, простота обновлений. Кейс: https://www.drupal.org/case-study/nasagov

Шли годы, агентство NASA всё больше работало на широкую аудиторию (конкуренты заставили), нанимало редакторов, журналистов и учёных... Более 400 человек!

И неожиданно оказалось, что создатели контента-то привыкли к Wordpress, когда-то такому простому, а нынче развившему редактор Gutenberg до состояния, утирающего нос не только Drupal, но и многим коммерческим решениям.

Кроме шуток, сообщество вокруг Wordpress огромное, а создатели, развивая проект, не забывали о корнях.

Drupal довести до такого состояния весьма сложно, личный опыт.

При этом разработчики Drupal не сильно заботились о простоте обновления. И когда Drupal 7 достиг EOL, было принято решение.

Собственно, вот и кейс, и ещё, включающие в себя интервью создателей и людей из NASA.

И ещё: контент доставляется классическим способом, HTML генерируется самим Wordpress, а не на клиенте.

Подытожим.

Насколько бы правильным вам не казалось некое решение, нельзя забывать, ради кого оно принимается.

То, что сделали в NASA сродни пощёчине всем модным веяниям.

Придётся признать, что даже современные вещи вроде Next.js, Contentful и т. д. не всегда являются экономически обоснованными и не учитывают интересы всех сторон.

Мысли?

Читать полностью…

Будни разработчика

​​⚛️ React 19 — useOptimistic

useOptimistic — новый хук, который позволяет отобразить “оптимистичное” состояние. Оно называется “оптимистичным”, потому что мы “оптимистично” надеемся, что наш запрос не свалится с ошибкой и после выполнения запроса состояние будет выглядеть именно так.

❓Как используется

- В useOptimistic передаётся реальное состояние (cart) и функцию-reducer, для обновления оптимистичного состояния
- Компонент (Cart) использует “оптимистичное” состояние (optimisticCart) для рендера
- Перед выполнением запроса обновляется “оптимистичное” состояние
- Когда запрос завершился, нужно обновить реальное состояние
- Как только реальное состояние обновилось, оптимистичное состояние обновится автоматически, так как оно передано в useOptimistic первым параметром. ⚠️ Поэтому важно следить, чтобы приходило одно и тоже состояние.
- Если запрос упал с ошибкой, нужно откатить изменения в оптимистичном состояние.

ℹ️ Первый вопрос, которым я задался, а в чём отличие от обычного setState, путём экспериментов, вот что удалось найти:

- useOptimistic работает с формами. Работать с обычной кнопкой в Single Page Application мне не удалось, обновление происходило только после завершения запроса
- useOptimistic работает только внутри асинхронного обработчика, что логично. Если убрать async/await, обновление произойдёт только после завершения запроса
- Параметр в useState используется только для инициализации, и игнорируется в последующих рендерах. useOptimistic будет сихронизироваться со значением переданным первым параметром.

🤷‍♂️ Очень мало полезного удалось найти о useOptimistic. Во всех статьях и видео тривиальные примеры, нигде не рассказывается как обрабатывать более сложные ситуации:

- Как обновлять оптимистичное состояние, если запустить несколько запросов одновременно?
- Как использовать useOptimistic в SPA вне форм?

Поэтому пришлось создать пару ишью: раз и два. В любом случае, пока useOptimistic выглядит каким-то низкоуровневым API. Надеюсь скоро появится больше Best Practices по его применению. Если вам есть, что добавить — пишите в комментах.

Ещё по теме:

- Frontend First — Ep 179 - React Deep Dive: useOptimistic
- Официальная документация по useOptimistic
- Код из примера тут

#react #frontend #new

Читать полностью…

Будни разработчика

Готовы раскрыть свой потенциал в веб-разработке?

Регистрируйся и приходи на бесплатный интенсив «ЛЕНДИНГ ЗАКАЗ ПИЦЦЫ ГО-ГО» от онлайн-школы METHED.

На интенсиве:
— Напишем на HTML и CSS красивый лендинг с современным дизайном;
— Реализуем адаптив под все устройства от смартфона до мониторов ПК;
— C нуля пошагово создадим лендинг, начиная с вёрстки на основе дизайн-макета в Figma/Pixso с Ajax технологией обновления страницы;
— Напишем фильтр и форму для заказа пиццы.

Участвовать в интенсиве бесплатно 👉 https://tglink.io/2923b4ac9487 

Читать полностью…

Будни разработчика

#такое дня

Ничего необычного на иллюстрации не замечаете?

А здесь происходит ого-го какая драма!

Итак, я понятия не имею, зачем это всё делается, но всеми так любимый виджет выбора aka select до сих пор получает обновления!

У select только два плюса, которые могут заставить вас его выбрать: исключительное удобство на мобильных устройствах и возможность длинному списку вылезти за пределы не только видимой области браузера, но и окна вообще.

Впрочем, из-за этой особенности он не отображается в Zoom- и Meet- и прочих презентациях.

Ладно, к делу. Вы в курсе, что начиная с Chrome 119, Firefox 122 и Safari 17 вы можете использовать горизонтальный разделитель чтобы разбить список для выбора?

Да-да, больше никаких <option disabled>-----</option>! Просто ставите <hr> и всё.

Ну, типа... ну ок.

Все, конечно, ждём popover и selectlist. Эта игра в доделки раздражает.

#css #select #form #widget

Читать полностью…

Будни разработчика

#codepen дня

Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG

Это пульсирующая сетка из шестиугольников (гексагональная). Заодно и на мышь реагирует. Принимаю предложения по улучшению, перенесено как было.

Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid

Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/

Учитывая, что они часто используются в играх – почему бы и нет.

#webgl #three #hexagonal #бородач

Читать полностью…

Будни разработчика

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:


button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}


Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>


The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip

Читать полностью…

Будни разработчика

#статья дня

Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: /channel/htmlshit/1757

Лучшее, для чего их обычно применяют, это убирание белого фона под логотипами. Не видели? Потом покажу, сейчас о другом.

Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?

Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.

Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/

Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек

#css #mix #blend #бородач

Читать полностью…

Будни разработчика

#фишка дня

Итак, в комментариях к предыдущему посту уже выяснили, что пасхалка — это игра Breakout. Или Арканоид по-нашему.

Появиться она должна 1 апреля. По крайней мере, это следует из кода (в комментариях).

Но за этой пасхалкой скрыта ещё одна: собственно, активация игры до 1 апреля.

1. Открываем профайлер
2. Записываем секунд 5-7
3. Вводим команду fixme (чтобы было интереснее, оставлю вам самим разбираться, как)
4. ...
5. Играем!

Чем хуже производительность сайта — тем лучше игра :)

P. S. Мне не удалось активировать игру на сайтах от Google 🫠 Но по профайлеру, у них всё очень плохо.

Читать полностью…

Будни разработчика

С 2 по 27 апреля программа Garage Digital запускает мастерскую по креативному программированию. Она предназначена как для начинающих программистов, так и для тех, кто впервые будет работать с кодом.

Авторы и ведущие мастерской Степан Кухарский и Алина Черейская — основатели SA lab — расскажут о том, как при помощи кода создавать автоматически генерируемые и разнообразные элементы цифровых миров. Результатом станет проект, разработанный участниками самостоятельно.

Подробнее о программе — на сайте. Купить абонемент можно по ссылке.

Токен:
Реклама. Частное учреждение культуры «Музей современного искусства «Гараж». Erid: 2VtzqvtnFiD

Читать полностью…

Будни разработчика

#фишка дня

Показать цвет белее белого? Легко!

На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...

Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.

А ещё она очень бесит в тиктоке и инстаграме.

Суть её в том, что можно увеличивать яркость отдельных участков без увеличения яркости всего изображения. Но для этого, конечно, ваш дисплей должен поддерживать такую возможность.

Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode

Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.

Вполне можно применять в билетных сервисах...

Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite

Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...

#hdr #video #ios #macos #бородач

Читать полностью…

Будни разработчика

#ссылка дня

Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)

Встречайте: https://github.com/typescript-cheatsheets/react

Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».

Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/

Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.

В общем, всем типов, котаны.

#typescript #react #бородач

Читать полностью…

Будни разработчика

#такое дня

Не думаю, что автор оригинального твита спрашивал серьезно, но всё же.

1. Конструктор RegExp принимает только строки, а {}.toString() это '[object Object]'
2. Квадратные скобки [] устанавливают соответствие любому символу внутри них
3. Ну и mom приводит к совпадению по o, а dad — нет 🫠

Читать полностью…

Будни разработчика

#фишка дня

Заканчивайте использовать JSON.parse(JSON.stringify(obj)) для дублирования (aka глубокого копирования aka deep copy) объектов в JavaScript.

Такой метод игнорирует даты, неопределённые значения и не работает с циклическими зависимостями.

Уже достаточно давно имеется structuredClone.

Наличествует во всех современных браузерах, есть полифилл.

P. S. вот тока не надо мне про лодаш тут плиз) все же использовали JSON-решение из-за скорости ⚡️

#js #clone #бородач

Читать полностью…

Будни разработчика

#фишка дня

Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().

Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.

Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.

Так вот, к чему это я. С выходом Firefox 115 в июле 2023 года мы получили иммутабельные методы работы с массивами во всех браузерах:
.toReversed()
.toSorted()
.toSpliced()
.with()


Если что, with — это про замену элементов по индексам.

Есть и полифиллы на core-js, так что без работы никто не останется.

И это прекрасно.

#js #array #sort #бородач

Читать полностью…

Будни разработчика

#библиотека дня

Окей, сегодня кое-что необычное. Мы уже в курсе с вами про существование чистых UI-китов без id, классов и всего того, что замутняет семантику. Стили навешиваются на абсолютно девственный HTML, никаких кастомных атрибутов.

А как вам подход наоборот? Описываешь стиль элемента в CSS, а потом используешь его в React без описывания кучи пропсов и HTML вообще?

Звучит как бред? Смотрим иллюстрацию! И — вжух 🪄 — всё становится на свои места и бредом уже не кажется.

Называется это чудо MistCSS и решает весьма банальную проблему: совмещение UI-only пропсов реакта со стилями. Ну раздражает же писать два раза "size, space, variant" сначала в JSX, а потом в CSS... ещё о типах заботиться.

Ссылка: https://typicode.github.io/mistcss/

В общем, ребята там восприняли "один источник правды" абсолютно буквально.

Но, мне кажется, это имеет право на существование.

Читать полностью…

Будни разработчика

Материалы из этого канала дают на платных курсах

Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое

👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Читать полностью…

Будни разработчика

Я сегодня пытался на iPod Classic заменить тридцатипиновый разъём на type c, но контактные площадки оказались сгнившими и попытки их восстановить провалились.

Но это не проблема. Дорожки к площадкам же где-то начинаются, верно? :) И я их уже идентифицировал. Жду провода и паяльную маску.

А как прошло ваше воскресенье?

Читать полностью…

Будни разработчика

#codepen дня

Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.

Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.

Следите за руками:

1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym

Простой концепт, а сколько вариантов и идей.

#css #houdini #gradient #clip #бородач

Читать полностью…
Subscribe to a channel