14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#видео дня
Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.
Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.
Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?
Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...
Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!
Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4
А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)
#webkit #cpp #develop
Если кому интересно, я добрался до компа и анимировал пример с dialog[open] через keyframes.
Пруф: https://codepen.io/alinaki/pen/OJevjMY
У этого примера явно поддержка лучше, так что забывать не стоит.
Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂
🌟 Развивайся во фронтенде вместе с FrontEndDev!
FrontEndDev — это идеальное место для тех, кто хочет углубить свои знания и навыки. Админы регулярно публикуют лучшие статьи, полезные репозитории и гайды, которые помогут тебе разобраться с новыми фреймворками и инструментами.
Присоединяйся и будь в курсе всех трендов и новинок! С FrontEndDev ты станешь настоящим профессионалом фронтенда! 💻
FrontEndDev 🚀
#статья дня
Итак, мне нужен был почти недельный перерыв, но я снова в строю и готов делиться шикарным.
И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.
Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports
Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)
И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.
Давно я с таким удовольствием не читал подобное.
#svg #css #animation
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 20 августа в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
Много практики - мало воды!
На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио.
В рамках интенсива мы:
— Сверстаем сайт на Html
— Напишем стили к сайту на Css
— Реализуем некоторые функции на JavaScript
И многое другое, о чем подробно рассказываем на сайте.
Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля.
Занимайте место прямо сейчас: https://tglink.io/47b9e9072617
#статья дня
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image #бородач
#молния дня
Простите, всё же размещу, потому что очень смешно.
IP адрес 0.0.0.0 не рассматривается всеми современными браузерами как адрес в локальной сети, поэтому запросы к нему пропускаются и уходят на локальную машину: https://chromestatus.com/feature/5106143060033536
Да, такого вообще происходить не должно, но вот многие разработчики как раз свои дев-сервера локально и запускают :) Ну ещё разные утилиты десктопные на самом деле не что иное, как веб-серверы (начиная с торрентокачалок).
Так что, теоретически, можно утащить что-то интересное из какой-нибудь компании.
Скоро везде будет исправлено, впрочем.
#статья дня
Все любят хорошие статьи по SVG.
От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.
Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/
#svg #viewbox #clippath #gsap #бородач
#статья дня
Новая статья Ахмада Шадида. На сей раз — об именованных областях сетки aka Grid Areas: https://ishadeed.com/article/css-grid-area/
Как всегда, прекрасно иллюстрированная и плавно ведущая нас от простых вещей вроде двухколоночной раскладки до мультиязычности, условного отображения и отладки в DevTools.
#css #grid
🔔 3+ года, автор канала Внеконкурентный Подход делится опытом по заработку на разработке сайтов ПОЛНОГО ЦИКЛА.
❓ А знаете, что изменилось за это время?
Почти ничего.
Все также, как и раньше можно работать из дома или любого другого места, без фриланс бирж и устройства на работу.
На канале рассказывается, как зарабатывать на веб разработке ПОЛНОГО ЦИКЛА.
— Без знания кода
— Без фриланс бирж
— Без наработки собственного портфолио
— Без необходимости быть опытным специалистом
— Без работодателей
— Без круглосуточного прожигания глаз возле монитора
➡️ Подпишитесь на канал и внедрите в свою жизнь стабильный заработок на разработке сайтов, а фриланс оставьте тем, у кого есть на это время и нервы.
Не имеет смысла писать новость об этой же статье, у Максима хорошая выжимка 🙂
Читать полностью…
Java Джуниоры! Важное объявление
FAANG School в течение 24 часов отдают бесплатно свою библиотеку знаний. Вы можете получить доступ:
– Подробный гайд, как найти работу в IT без опыта
– Подборка платформ с вакансиями для java-разработчиков
– Пошаговая RoadMap по Java
– Мануал по Docker. Основные команды и концепции
– Микросервисы. Вопросы с собеседований
– Шпаргалка с горячими клавишами JetBrains IDE. Ускоришь работу в 10 раз
– Desk setup. Подборка аксессуаров для комфортной работы
– Шпаргалка по Kafka
Библиотека знаний постоянно пополняется, но бесплатный доступ длится всего сутки. Чтобы получить полезные материалы, переходи по ссылке и жми на оранжевую кнопку.
Новый уровень для вашей карьеры
НИУ ВШЭ и Яндекс запускают онлайн-магистратуру на стыке маркетинга, разработки и управления продуктом. Она
рассчитана на 2 года, занятия будут проходить онлайн в режиме реального времени.
Вам стоит попробовать, если:
— вы работаете в IT, но задумываетесь, куда расти дальше;
— переживаете за актуальность своих знаний и профессии;
— хотите развиваться вместе с рынком и заглянуть в будущее цифровых продуктов.
Программа магистратуры органично сочетает маркетинговые, менеджерские и технологические дисциплины. Сильная
сторона — инструментарий, который позволит гибко лавировать между вакансиями сейчас и в будущем.
На выходе — диплом государственного образца и знания, которые востребованы по всему миру.
Ознакомиться с программой и документами для поступления можно здесь.
#такое дня
Это было бы смешно, если не было бы правдой.
Впрочем, это всё же смешно.
134 тысячи установок: Tailwind Fold.
Уверены, что в коде вашего сайта нет уязвимостей? 💻
За последние три года в 63% случаев именно веб-приложения оказались исходным вектором атаки хакеров (данные Positive Technologies).
Проверить свой веб-ресурс на наличие уязвимостей можно с помощью бесплатного анализатора PT BlackBox Scanner. Для этого вам нужно только ввести его домен на сайте сервиса. А после регистрации будут доступны все возможности сканера (тоже бесплатно) 🎯
По результатам более 110 видов проверок анализатор выдаст подробный отчет, в котором обнаруженные уязвимости будут распределены по уровню опасности, что позволит составить оптимальный план работы по их устранению и защитить сайт от хакерских атак.
🐈⬛️ Проверить веб-ресурс с помощью PT BlackBox Scanner
#статья дня
Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально @starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например: /* Before the dialog opens */Таким образом мы получаем анимацию из display: none или при изменении любого атрибута.
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: starting-style" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr
#инструмент дня
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
#статья дня
Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: /channel/htmlshit/3033
Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?
На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection
Но даже с целью общего образования работает очень хорошо. Зайти можно даже с минимальным пониманием принципов работы указателей в любом из системных языков.
Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection
#memory #cpp
#статья дня
Смотрим на иллюстрацию. Узнали? Согласны?
Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.
А ещё некоторые антипаттерны когда-то назывались просто паттернами...
В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.
Вот: https://alexkondov.com/refactoring-a-messy-react-component/
1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация
Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.
В общем, это отличный пример.
#react #refactoring
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
#инструмент дня
Если вам для каких-то целей очень была нужна совместная доска для рисования, да ещё чтоб самим можно было её хостить — сегодня ваш день!
Ребята из tldraw.com пару дней назад анонсировали tldraw sync: движок для совместной работы, заточенных под их доску.
Я за tldraw слежу давно, ещё с того момента, как автор отрабатывал сглаживание рукописного ввода мышкой. Потом же они начали дико экспериментировать с ИИ-фишками, превратив простую доску в настоящий инструмент прототипирования.
Очень крутая штука, желаю им и коммерческого успеха тоже.
#server #collaboration
➡️ Как разработчикам получать выплаты в РФ от зарубежного заказчика?
Разработчики из РФ являются одними из самых востребованных в мире. Но зарубежные заказчики все чаще боятся иметь дело с исполнителями из РФ из-за санкций. Ведь для них неисполнение данных требований - не шутки, и может создать много проблем для их бизнеса.
💁♂️ Ну и как быть в данной ситуации?
Мы предлагаем вам платежное решение для выплат русскоязычным исполнителям
из-за рубежа с комиссией всего 2 % (для выплат на СМЗ 3.5%).
Salary.cab — сервис оплаты работы фрилансерам и исполнителям из-за рубежа, который:
— Соблюдает все законодательные требования, связанные с международными финансовыми операциями;
— Обеспечивает безопасность финансовых транзакций и защиту информации;
— Обрабатывает транзакции не более 24 часов в рабочие дни, как правило, 1-2 часа;
— Предоставляет документацию по каждой выплате.
➡️ Ознакомиться с условиями: https://clck.ru/3CMikg
#видео дня
Джош Комо (Josh Comeau) известен нам всем прежде всего как автор великолепных интерактивных обучающих статей.
Если вы с ним ещё не знакомы, его сайт — это мастхев в закладках: https://www.joshwcomeau.com/
И недавно на конференции в своём родном Квебеке он выдал прекрасную презентацию о его собственных моментах озарения. И, более того, попытался собрать их в некую ментальную модель, описывающую, что же, собственно, происходит: https://www.youtube.com/watch?v=kj7WGnUDaI4
Горячая рекомендация.
#css #talk
#статья дня
Даже две!
Не так давно Джейк Арчибальд обнаружил ситуацию, с которой не справляются сборщики мусора ни в одном из известных браузерных движков.
Конечно, сама ситуация довольно странная, и выглядит так: если у вас имеется замыкание, в котором вы обратились к некоему объекту, после выполнения функции в замыкании выделенная память не очистится. Вот: https://jakearchibald.com/2024/garbage-collection-and-closures/
То есть у нас не утечка памяти, но «захват и удержание»:
function demo() {
const bigArrayBuffer = new ArrayBuffer(100_000_000)
const id = setTimeout(() => {
console.log(bigArrayBuffer.byteLength)
}, 1000)
return () => clearTimeout(id)
}
globalThis.cancelDemo = demo();
function demo() {
const bigArrayBuffer = new ArrayBuffer(100_000_000)
const id = setTimeout(
(buffer) => {
console.log(buffer.byteLength)
},
1000,
bigArrayBuffer
)
return () => clearTimeout(id)
}
globalThis.cancelDemo = demo()
How Google handles JavaScript throughout the indexing process
Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера
Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).
В целом в исследовании также много других интересных пунктов (как например тот факт, что индексируются только страницы с 3хх и 2хх кодами. Т.е. если вам необходимо отрендерить экран с ошибкой - лучше его отрендерить на отдельном урле или с помощью 4хх или 5хх кода хттп).
Рекомендую к прочтению, если вы работаете с SEO
https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process
#development #javascript #SEO
#инструмент дня
Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?
И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js
Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.
А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8
#css #js #performance #бородач
#статья дня
Прекрасный рефрешер знаний по таблицам от Мишель Баркер: https://piccalil.li/blog/styling-tables-the-modern-css-way/
Таблицы получили много незаслуженного хейта из-за лихих нулевых. Мобильные устройства тоже не добавили удобства, в итоге многие положили болт на семантику и начали верстать таблицы гридами. Во имя чего — непонятно.
А люди потом в эксель не могли ничего скопировать.
Но вместе с этим, ничего более универсального для двумерного представления данных пока не придумали, поэтому имеет смысл обновить знания по существующим фишкам и посмотреть, нет ли чего нового.
Статья хороша тем, что посвящена не трюкам, а просто сводит воедино базу по доступности и удобству. Да, sticky columns там тоже описываются.
Ну и тут уместно напомнить о моём тейке про доступные таблицы: /channel/htmlshit/2981
#css #table
64 бита на хранение числа в JavaScript разбивают на три промежутка: 1B для хранения знака,11 бит для экспоненты со смещением. А знаете, для чего предназначены ещё 52 бита? Об этом и в целом о работе с данными в JavaScript — новая серия открытого курса AvitoTech.
5 лекций уже доступны к просмотру. Так что если вы хотели освоить азы фронтенд-разработки, самое время учиться у лучших. Тем более, это бесплатно.