14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Как в 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
"Разработка игр — это дорого!" Но как же minecraft, among us?
Indie Spotlight 👈 чат для инди-разработчиков, в котором найдётся ответ на любой вопрос:
— Как собрать и управлять командой по разработке игр?
— Как продвинуть игру без бюджета?
— Как монетизировать проект в условиях санкций?
👆Также у проекта есть телеграм-канал, где вы сможете ознакомиться с играми других разработчиков, оценить игры других участников, а также принять участие в розыгрышах призов таких, как Playstation 5, мониторы и раздачи ключей к играм💡
Это первое подобное комьюнити в телеграм:
➡️ Вступить в чат
➡️ Перейти в канал
#статья дня
Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: /channel/htmlshit/1249
Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.
На самом деле все логично: бахнуть разом огромное приложение на новую технологию невозможно, но и вслепую выбирать экраны для переделки — тоже. Добавление же экранов в новой технологии не решит проблему наличия старых и их поддержки. Так что пришлось подумать.
Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native
Получилось долго.
#react #native #rice #бородач
#расширение дня
Ну что, мы с вами уже наворовали SVG со всего интернета, пришло время воровать кнопки!
Видимо, так подумал Анатолий Зенков, создавая своё расширение с незамысловатым названием Button Stealer.
Механизм работы похож на игры без игрового процесса: просто ходите по сайтам, а коллекция сворованных кнопок автоматически пополняется.
Покажи мне свои кнопки и я скажу, кто ты.
#chrome #button #stealer
#статья дня
Не так давно в чате канала проскочил вопрос, как правильно делать контейнеры, которые могут вылезать за визуальные границы.
Например, основной контент находится посредине и занимает в ширину 80-120 приятных для чтения глазу символов, а вот картинки хотелось бы разнести до краёв.
Техника называется full bleed. Я не знаю, как точно перевести.
Если посмотрите видео, то виден ещё один вариант использования, когда галерея выходит за пределы экрана лишь с одной стороны, но дальше тем не менее границы игнорирует.
Вот так: https://codepen.io/hexagoncircle/pen/gOWjwme
Альтернативный вариант: https://codepen.io/maartenbruggink/full/eYWjxae
Раньше такое делалось жонглированием полями, теперь же у нас есть гриды.
И у небезызвестного Джоша Комо есть статья как раз об этом: https://www.joshwcomeau.com/css/full-bleed/
Тем не менее, я рекомендую посмотреть приложенные кодпены, поскольку в них зоны грида именуются и становится понятнее, что к чему.
Всем full bleed, котаны!
#css #fullbleed #gallery #бородач
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 #бородач
#инструмент дня
Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.
Можно купить старый мак, можно завести виртуальную машину, обмазавшись ютубом и tonymacx86.
А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX
Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.
Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)
#docker #macos #бородач
Многие мечтают стать тимлидом, но только некоторые знают, что для этого мало уметь писать код и разбираться в архитектуре.
Сильный тимлид умеет управлять проектами любых масштабов, оценивать их стоимость и отслеживать финансовую эффективность, и что немаловажно – управлять командой.
Все эти знания можно получить на совместной магистерской программе ИТМО и компании «Самолет» – «Руководитель IT-разработки».
Помимо лекций и практик вас ждут:
– Учебные и бизнес-проекты от от Big Tech компаний
– Хакатоны каждый семестр
– Индивидуальные карьерные консультации с экспертами.
На программе можно обучаться бесплатно – 10 мест оплачивает компания «Самолет», так и на коммерческой основе. Лучшие студенты будут получать дополнительную стипендию «Самолет».
Переходите на сайт, чтобы получить программу обучения и подать документы.
Реклама. Университет ИТМО ИНН:7813045547
#такое дня
Если вы не знали или не понимали, что такое "секрет Полишинеля", я вам сейчас всё объясню.
Тут выяснилось, что в браузерах на основе движка Blink (Chrome, Brave, Edge, Яндекс.Браузер сами проверите) есть специальное скрытое расширение, которое предоставляет сайтам Google данные о нагрузке на компьютер по каждой вкладке отдельно.
То есть, если Google определяет, что звонок в Meet слишком нагружает систему, он может что-то с этим сделать, ухудшить качество видео или, наоборот, улучшить, если есть запас.
Казалось бы, ну и что такого? А то, что конкурентам подобное недоступно. Тот же Zoom потребует дополнительных телодвижений.
ID расширения: nkeimhogjdpnpccoofpliimaahmaaome
Название: hangout_services.
Предоставляемые дополнением данные отображаются в сервисе meet.google.com в панели "Troubleshooting".
Ну что, это уже недобросовестная конкуренция, или так и надо? :)
#google #chrome
AvitoTech выпустили бесплатный видеокурс по JavaScript, и четвёртый эпизод уже доступен к просмотру.
В новом выпуске вы узнаете про устройство и размер памяти программы, стек и кучу, Oddball и иммутабельные примитивы. Это поможет создавать эффективные программы, которые оптимально используют память.
Не забудьте подписаться на канал, чтобы не пропустить следующие выпуски.