14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#молния дня
Простите, всё же размещу, потому что очень смешно.
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.
#статья дня
Как в CSS получить ширину и высоту экрана? Прямо в пикселях.
Очень просто, всё внимание на иллюстрацию. А объяснение этого дела имеется в этом посте на канале: /channel/htmlshit/2922.
И в статье Темани Афифа: https://css-tip.com/screen-dimension/
Да, CSS — типизированный язык :) Живите с этим.
#css #trigonometry
Благодаря этому комментарию я понял, зачем у меня в закладках образовалась одна крутая фишечка :) Следующим постом вот прямо сейчас.
А то, что в комментарии, делается вот так:
transform: rotate(calc((3 - 179 * 3.14 / 180) * 1rad));
Джентельменский набор трушного фронтендера
Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер.
Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.
Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.
JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.
codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты
Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!
Развивайся с нами, ведь так проще!
#такое дня
Наверное, я открыл бета-версию Apple Maps aka https://beta.maps.apple.com/ с браузера Ladybird? Или, может, хотя бы со старого Firefox или Midori?
Или Apple принципиально поддерживает только Safari?
Или же в моём Chrome на Linux не хватает каких-нибудь суперсовременных API, которые есть при этом в Chrome на MacOS и Windows и я получаю автоматический отлуп?
Нет, просто Apple вернула нам наш 2009 и определяет браузер по строке User-Agent aka UA! Стоит нам поставить расширение, подменяющее UA — как всё прекрасно работает и на Linux Chrome, и на любом Firefox.
Интересные всё же они люди. Ведь их же MapKit везде работает без проблем.
💡 Всё, что нужно для трудоустройства Frontend Разработчиком, собрано в одном месте!
✔️ Разбор актуальных вопросов с собеседований – будь готов к любым вопросам на интервью.
✔️ Лучшие ресурсы для самостоятельного обучения – получай доступ к качественным материалам и гайдам.
✔️ Тесты и квизы для проверки знаний – укрепляй свои навыки и следи за прогрессом.
Канал ведут опытные Frontend Разработчики, которые еженедельно проводят собеседования.
Подпишись на @frontend_questions
#фишка дня
Используешь сложные CSS-селекторы в JS-коде? Ошибка!
Не используешь при этом CSS.escape? Фатальная ошибка!
Самый яркий пример когда это может пригодиться: useId в React выдаёт код, который непригоден для прямого использования в JS. А ты это потом используешь, да-да.
В общем, смотрим на картинку, просвещаемся.
Ну и дублирую пример текстом, конечно:
document.querySelector(`[href=${CSS.escape('@')}]`); // "[href=\@]"
#фишка дня
Как-то так получилось, что на мобильных устройствах работать с файлами и буфером обмена ну... неудобно.
И ладно iOS, но на Android тоже интерфейсы такие себе. Даже на Windows Mobile и PalmOS было как-то... стандартнее чтоль.
С другой стороны, появилась идея шэринга, aka share. И она на самом деле отвечает запросам людей: перекинуть файл из одного приложения в другое, а что нам ещё нужно-то?
Итак, встречайте: Web Share API.
Пользоваться очень просто:
navigator.share({
title: "Будни разработчика",
text: "Фронтенд и не только",
url: "/channel/htmlshit",
});
navigator.share({
files: [file],
title: 'hello.png'
});
#инструмент дня
Если вам для каких-то целей очень была нужна совместная доска для рисования, да ещё чтоб самим можно было её хостить — сегодня ваш день!
Ребята из 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 лекций уже доступны к просмотру. Так что если вы хотели освоить азы фронтенд-разработки, самое время учиться у лучших. Тем более, это бесплатно.
transform: rotate(calc(3rad-179deg));
не работает. Зачем это всё вообще?
#фишка дня
Плохо с математикой? 360 градусов вводят в ступор? 2π радиан доводят до истерики? Грады это какой-то сплошной гон?
Используй 1 поворот! Вращение элементов никогда ещё не было таким простым!
turn — и готово!
#css #transform #rotate #бородач
#фишка дня
Если вы не знали, или забыли, спешу вам напомнить, что псевдоэлементы флейсбокс-контейнера тоже подвержены влиянию флекса.
Что это значит на практике?
Это значит, что если вы сделали space-between или space-around чтобы выровнять элементы по двум сторонам, вам не нужно точное их количество чтобы забить всю сетку для последней строки.
Ну то есть, последняя строка из двух элементов не должна «расползаться», элементам просто нужно встать в начало.
Достаточно поставить «распорку» в виде псевдоэлемента: https://codepen.io/alinaki/pen/KKRzMdz
Не делайте, как фейсбук, пожалуйста: /channel/htmlshit/387
Ну и очевидно, это можно использовать для различных вариантов оформления тех же заголовков, например.
#css #flex #бородач
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, вот так вот база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event
#подарок дня
Когда твой бывший коллега зовёт поговорить за жизнь — и вручает собственноручно отпечатанный и покрашенный кубок 🥰
Приятно!
Reactify – активное сообщество для бесплатного обучения веб-разработке! Вступай и прокачай свои навыки вместе с нами.
🎓 Практические курсы по JavaScript, TypeScript, React и CSS. Создавайте реальные проекты – от новостных приложений до курсов по криптовалюте.
👨💻 Ежедневные обновления: теория, примеры кода, IT-новости и аналитика рынка. Всегда будь в курсе самых актуальных тенденций.
💼 Разбор реальных собеседований и актуальных вопросов. Готовься к интервью с уверенностью.
👥 Обмен знаниями и поддержка от единомышленников. Делитесь опытом и помогайте друг другу расти.
На нашем канале тебя ждет комплексный план обучения Frontend Roadmap 2024 и более 60 бесплатных ресурсов для изучения.
Учись, общайся, развивайся. Присоединяйся к @reactify_IT
У вендора и производителя IT-инфраструктуры YADRO активны вакансии в разных направлениях для тех, кто кодит на С/С++ 🔍
1️⃣ Software Engineer C/C++
2️⃣ Разработчик ПО для цифровых систем связи
3️⃣ Senior C++ developer/Старший инженер-программист С++
4️⃣ Инженер по разработке ПО (C/C++ Embedded Linux)
5️⃣ Старший разработчик C++ (Linux/ OpenBMC)
6️⃣ Инженер по разработке встраиваемого ПО (Embedded Linux BSP)
Ты сможешь раскрыть свой творческий и инженерный потенциал в команде профессионалов, которые создают высокотехнологичные решения мирового уровня.
Какие бенефиты предлагаются:
– достойная зарплата (размер обсуждается на собеседовании) и прозрачная система премий;
– обучение за счёт компании: учебный портал с курсами и лекциями от экспертов, дополнительное профессиональное обучение, изучение английского, участие в конференциях;
– возможность учиться у лучших специалистов индустрии, расти в рамках своей роли, а также участвовать во множестве различных проектов;
– личное участие в становлении процессов и продуктов, возможность увидеть результат своей работы;
– большое инженерное сообщество, которое постоянно развивается;
– гибридный или удалённый формат работы;
– ДМС со стоматологией с первого дня, консультации юристов, психологов, экспертов по ЗОЖ и управлению финансами;
– скидки для сотрудников, дополнительные day-off;
– комфортные офисы в Москве, Санкт-Петербурге, Нижнем Новгороде и Минске.
Скорее переходи по ссылкам и оставляй отклики!