14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Не имеет смысла писать новость об этой же статье, у Максима хорошая выжимка 🙂
Читать полностью…
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'
});
#фишка дня
Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?
А вот можно! Как в этом примере от Мэтта Покока.
И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.
#js #event #abortsignal
Как вебмастеру получить дополнительный доход, не увеличивая нагрузку?
Подключи своих клиентов к сервису email-рассылок Dashamail и получай 20% со всех их оплат!
DashaMail — российский сервис email-рассылок, который позволяет отправлять все типы писем: массовые, триггерные, транзакционные.
Тебя и твоих клиентов ждут:
- гибкое API;
- подробная документация;
- компетентная техподдержка;
- большой выбор готовых модулей интеграции.
Узнайте больше о реферальной программе сервиса DashaMail
Реклама. ООО "ПИСЬМО". ИНН 7811602601. erid: LjN8KZu6d
#инструмент дня
На моей памяти было два веб-приложения, позволяющих в некой мере понять, как работает SVG:
раз и два.
Суть в том, что иногда недостаточно просто взять и нарисовать SVG в редакторе, хочется понять принцип отрисовки, позиционирования, заливки и контуринга.
И да, пусть эти приложения на фоне настоящих редакторов выглядят смешно, настоящие редакторы не спешат делиться своими секретами рендеринга. Хотя наверняка какие-нибудь расширения для люстры, инкскейпа или фигмы должны иметься... но их реализация сильно зависит от движка проекта. Ладно, мы отвлеклись.
Итак, вашему вниманию проект с говорящим названием svg.wtf от Амелии Ваттенберг.
Предоставляет всё то же наглядное понимание принципов работы SVG, от координат и кривых безье до фильтров. Можно сохранять снэпшоты, чтобы сравнивать состояния работы, есть простейшие скрипты для работы с кривыми (например, выстроить по сетке).
Думаю, надо попробовать заслать ей скрипт для переориентации кривых (из моего любимого editor.method.ac), это когда вместо трансформов кривые возвращаются к простым координатам.
В общем, больше редакторов богу редакторов!
#svg #tool #education
#новость дня
В node.js появилась экспериментальная нативная поддержка TypeScript!
Крепко же их bun приложил...
Ссылка на PR: https://github.com/nodejs/node/pull/53725
По факту происходит отбрасывание типов, поэтому средства вроде Enum и namespace не поддерживаются. Инициатива предоставления стабильного API поверх TypeScript получила название amaro и в дальнейшем планируется выделение в отдельный обновляемый модуль. Работает (кто бы сомневался) при помощи swc.
Так что никаких больше ts-node!node main.ts
...и поехали!
#node #typescript #ts
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;
– комфортные офисы в Москве, Санкт-Петербурге, Нижнем Новгороде и Минске.
Скорее переходи по ссылкам и оставляй отклики!
#ссылка дня
Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...
Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.
И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols
Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons
Естественно, вы можете скачать SVG и PNG.
Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.
Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.
К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.
#fonts #icons #google #material #бородач
#фишка дня
— Криса Койера знаешь?
— Нет
— Дядька мой
Ладно, кроме шуток. Часто CEO вашей компании даёт стримы и уроки по вёрстке? А CEO CodePen — даёт. От скуки, может?
И тема сегодняшнего выпуска — offset-path. Или как заставить объект следовать контуру.
Сразу демо: https://codepen.io/chriscoyier/pen/ZEdpVev
Весь кайф в том, что offset-path принимает не только описание кривой SVG, но и значения боксовой модели вроде border-box, что означает, что в качестве кривой будут границы родителя!
Да, как правило речь почему-то всегда о круге или волне, но, по-моему, следование квадрату не менее эффектно.
Ну и вообще в официальном твиттере компании CodePen много неожиданного вываливают.
#css #path #animation
Меня тут добавили в тематическую папку по IT и ИИ, и соседство весьма хорошее.
Вам остается только перейти по ссылке, сохранить папку себе и регулярно получать полезные ресурсы и знания.
/channel/addlist/PgLjJCSNBW42Y2Fi
Хочешь в подборку?
#видео дня
Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).
Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…
Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.
Эффективность 9000, короче.
#emmet #filter #blend #бородач