14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#новость дня
Google сегодня 25 лет! По этому поводу у них дудл с антологией логотипов. Не так уж и много поменялось.
Давайте перепись олдов и прочих нонконформистов в комментариях: кто чем пользовался до гугла или хотя бы до прихода гугла в вашу страну?
Я помню, на Апорте искал песни, простите, Арии году так в 2000. Гугла в РФ тогда не было.
Забавно, что российские Яндекс, Рамблер и Апорт появились раньше. Да и вообще по миру Google был очень не первый.
#фишка дня
Используешь сложные CSS-селекторы в JS-коде? Ошибка!
Не используешь при этом CSS.escape? Фатальная ошибка!
Самый яркий пример когда это может пригодиться: useId в React выдаёт код, который непригоден для прямого использования в JS. А ты это потом используешь, да-да.
В общем, смотрим на картинку, просвещаемся.
Ну и дублирую пример текстом, конечно:
document.querySelector(`[href=${CSS.escape('@')}]`); // "[href=\@]"
Джентельменский набор трушного фронтендера
Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер.
Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.
Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.
JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.
codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты
Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!
Развивайся с нами, ведь так проще!
Открыта регистрация на 13-й карьерный форум для студентов в сферах IT и биохима!
Участие в форуме BreakPoint — это возможность не только построить карьеру мечты, но и стать лидером в мире технологий и инноваций.
⚡ Что тебя ждёт?
— Мощная и трендовая программа от экспертов; поговорим о метавселенных, клонировании, использовании чата GPT и AI.
— Шанс попасть на стажировку в партнерскую компанию;
— Решение актуальных бизнес-кейсов от компаний-лидеров рынка;
— Воркшоп, кейс-чемпионат и выступление нашего генерального партнера - Сбербанка!
— А также, закрытый чат единомышленников, эффективный нетворкинг и ярмарка вакансий.
⚡ Как попасть на BreakPoint?
Очень просто, нужно заполнить форму регистрации!
Удели ответам особое внимание, ведь от этого зависит твой результат отбора
📅 Когда?
28-29 Октября
📍 Где?
Москва
Участие в форуме бесплатное!
Готов стать лидером технологических изменений?
Тогда скорее регистрируйся:
/channel/BreakPointForum_Bot
*Биохим включает в себя следующие направления: нефтегаз, фармацевтика и биотехнологии
Как критиковать на английском?
Представьте: вы разработчик в международном проекте и собираетесь провести код-ревью. Как сказать по-английски об ошибках и посоветовать улучшения?
Лучше подавать критику как личное мнение, а не объективный факт. Поэтому важно обращать внимание не только на грамматику, но и на стиль речи — например, использовать пассивный залог, задавать вопросы и не забывать отмечать удачные решения. Так вы поддержите мотивацию коллег и быстрее добьётесь результата.
Где потренироваться?
На курсах «Английского для разработчиков» в Яндекс Английском:
- Обучение на реальных рабочих примерах. Будете разыгрывать с личным преподавателем ситуации: например, рассказ о своей роли, код-ревью, митапы и парное программирование.
- Для тех, кто хочет работать в международной команде.
Личный преподаватель поймёт ваши цели в английском, поможет закрыть пробелы и будет регулярно анализировать прогресс.
- Занятия с иностранцами, знающими сферу IT. Будут с вами на одной волне.
Узнать больше на сайте
#ссылка дня
Учиться на чужих ошибках достаточно сложно, чаще всего приходится на своих. Но представьте себе, что ошибка, совершённая лет двадцать назад будет вас преследовать всю жизнь там, где вы этого меньше всего ждёте.
А вот создатели CSS таких ошибок наделали достаточно много. Есть даже список: https://wiki.csswg.org/ideas/mistakes
Трагизм ситуации в том, что любую из них достаточно просто исправить... казалось бы. Но не забывайте об обратной совместимости, которую приходится поддерживать. Вот и расплачиваемся мы за странные решения до сих пор.
Ну ок, не всё в этом списке стоит квалифицировать как ошибки. Что-то просто можно было сделать лучше, а что-то вообще выстрелило случайно.
Вот краткий список того, что там есть:
1. white-space: nowrap должен был быть no-wrap
2. box-sizing должен был border-box (прим. больно, да?)
3. border-radius должен был называться corner-radius (прим. правда что, какое отношение к границе оно вообще имеет?)
4. взаимодействие flex-basis и width/height слишком сложное (прим. потребовалось две версии флексбокса чтобы всё равно сделать сложную хрень)
5. нынешнему :empty стоило бы именоваться :void, а сам :empty должен был бы игнорировать пробелы (и вот это, кстати, уже исправлено в спецификации!)
Вообще, почитайте. Там много интересного, очень круто.
#css #specification #бородач
#статья дня
Один из самых популярных вопросов на собеседовании, это мемоизация.
Естественно, чаще всего вопрос задаётся в контексте React. Ну уж так повелось почему-то, хотя тема гораздо обширнее.
Три столпа мемоизации в React это React.memo и хуки useMemo и useCallback. Ну и вопрос в том, а стоят ли они того?
Как правило ответы стандартные: мы проигрываем в памяти и процессоре при инициализации, но выигрываем в повторном обращении. И дальше прочее веселье с тем, а как посчитать performance impact и так далее.
А вот парни из Coinbase решили, что не надо считать. А надо сразу оборачивать всё, что угодно, в memo, мол, влияние на инициализацию минимальное, а тратить время на предварительные расчёты неохота.
Ну что же, им слово тогда: https://attardi.org/why-we-memo-all-the-things/
Статья небольшая, выводы стоят рассмотрения.
P. S. как вам новое превью к постам, котаны? Думаю, сверстать его для автоматизации и выложить таймлапс или сделать стрим или типа того...
#react #memo #performance
Это Mind Tracker. Он помогает людям бороться со стрессом и удерживать длительный фокус внимания на сложных задачах
Российский стартап Neiry создал инструмент для тех, кто хочет работать на максимуме своей эффективности. Для тех, кто ловил состояние потока и точно так же ловил полную апатию и выгорание после «запойной» работы
Одна из полезных функций: вам нужно всего лишь 10 минут с трекером, чтобы сконцентрироваться или успокоиться в любой ситуации.
Узнайте подробнее о майнд-трекере Neiry: https://neiry.ru/mindtracker?utm_source=tg_in&utm_medium=budn&utm_term=ad36X
Реклама. ООО "НЕЙРИ". ИНН 9701140612. erid: LjN8KWBZi
#статья дня
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!
Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:
Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/
И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/
Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.
Прекрасные инструменты, целый новый мир открывают.
#fonts #tools #бородач
#codepen дня
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform #бородач
Главные мифы про ноу-код разработку
Это самая дешёвая разработка?
Для неё не нужны специальные знания?
Приложения сильно уступают тем, что написаны на коде?
Как вообще все это работает?
Разберемся на бесплатном открытом уроке «No-code разработчик: мифы и реальность»: https://otus.pw/GCyV/
На занятии мы:
- разберёмся, чем занимается no-code разработчик и что входит в его обязанности, а что нет;
- развеем самые популярные мифы о no-code разработке;
- на практике разберем реальное ТЗ, с которым может работать no-code разработчик.
Занятие будет полезно:
✅ Тем, кто хочет попасть в IT без опыта программирования.
✅ Предпринимателям и продактам, которым необходимо создавать прототипы и MVP веб-приложений быстро и без лишних затрат.
✅ Фрилансерам, которые хотят освоить дополнительный навык для увеличения дохода.
✅ Студентам, ищущим перспективную карьеру в быстро развивающейся области No-Code.
Урок пройдёт 25.09 в 20:00 мск.
Регстрация: https://otus.pw/GCyV/
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. erid: LjN8KYs7W
#статья дня
В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".
И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).
Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...
И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!
Лигатуры, маленькие заглавные буквы, цифры в старом стиле, моноширинные цифры, надстрочные и подстрочные символы, половинная ширина...
И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html
Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html
Очень крутая и полная, с прекрасными иллюстрациями и примерами конкретных шрифтовых наборов.
Всем st, котаны!
#opentype #font #features
#статья дня
TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.
Да, браузеры и сами неплохо с этим справляются, вот только мы с вами гораздо умнее и можем с лёгкостью их запутать.
К примеру, очевидно, операция создания заказа и операция лога об этом действии должны иметь разный приоритет. В идеале, случиться в разных потоках, но это не всегда возможно.
Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.
Для этого у нас есть свойство priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.
А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints
Пока только в Chrome и уже очень скоро в Safari: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API
#fetch #priority
Как философ заработал состояние в $750 млн на знакомствах?
Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.
Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.
В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.
👉Подписывайтесь👈
и участвуйте в дискуссиях!
#реклама
#фишка дня
КДПВ относится к теме поста лишь по одной простой причине: это моё состояние после беседы.
Суть проблемы: на неком корпоративном ресурсе подгружается некий внешний отчёт. Логиниться в сервис надо отдельно. Отчёт подгружается в iFrame заранее заданной высоты.
Что делают уважаемые разработчики? Запихивают уведомление о том, что надо залогиниться, под этим самым iFrame. И всё, что я вижу — это белый экран и надпись "Недостаточно прав".
На мой совсем не немой вопрос, ответили: "Поскроллить же можно" 🫠
Идея о том, что можно скрыть iFrame или показать уведомление над ним даже не пришла им в голову.
К чему это я? Начиная с Chrome 115 у нас есть возможность забавным образом показать, что элемент скроллится! Через Scroll-Driven Animation API.
Задать стили или условные стрелочки, вот: https://codepen.io/bramus/pen/LYMjXpo
Подробнее в посте Ван-Дамма, который Брамус: https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/
#css #scroll #animation
Пользователи Angie получили возможность мониторить состояния веб-сервера через визуальную консоль
С новыми версиями у пользователей Angie появилось сразу несколько возможностей организовать мониторинг состояния веб-сервера. Один из них — Console Light — легковесная визуальная консоль для мониторинга активности в реальном времени. Она отображает ключевые показатели нагрузки и производительности сервера.
Мои друзья из Angie написали на Хабр подробный разбор того, как можно настроить всесторонний мониторинг Angie, при этом не потеряв по дороге частичку своей души. Подробнее можете почитать тут.
К слову, а демо-версию Console Light вы можете попробовать по ссылке.
#статья дня
Не так давно мы все с вами узнали, что многие дизайнеры по миру открывают для себя геометрию для пятого класса с нескрываемым удивлением: /channel/htmlshit/1939
Но мы тут, конечно, не шеймингом заниматься пришли. А серьёзным делом. Поэтому глядите, чего я вам принёс: неожиданно хорошую статью с неожиданного ресурса!
Итак, на VC: Подбираете радиус скругления на глаз? Эти 5 правил помогут скруглять углы как сеньор
TL;DR
1. Внутренний угол связан с внешним: это правило буквально повторяет пост выше.
2. Кружок внутри, угол снаружи: тут немного об оптическом выравнивании (опять же, пост на эту тему).
3. Применяем сглаживание: это про яблочный squircle.
4. Радиус дружит с текстом.
5. Проверка обводкой: по факту, это визуальное доказательство правил 3 и 1.
Этой бы статье да иллюстрации от Шадида...
В любом случае, рекомендую. Сможете спорить с дизайнерами имея опору под ногами.
#css #design #radius
#фишка дня
Короче! Вы знали, что в CSS де-факто существуют миксины? И уже много-много лет...
И это анимации aka @keyframes.
Они ведь сами по себе самый что ни на есть настоящий миксин.
Просто подумайте, что может содержаться в @keyframes? Да в общем-то, всё... А какая запись? Да вот такая:
animation: 1s paused awesomeMixVol1;
И вот оно вместе кликает: https://codepen.io/alinaki/pen/eYjexgj
Попробуйте окно уменьшить 💥
Как вам такое? Нестинг завезли, скоупы скоро будут, красота же.
#css #keyframes
#игра дня
Для начала, котаны, спасибо за буст! Теперь это что мне, готовиться придётся...
Я всегда знал, что вы у меня самые крутаны! ❤️❤️❤️
Итак, игра дня сегодня — CSS Diner: подберёшь стили, голодным не останешься 👹️️️️️️
https://flukeout.github.io/
32 уровня тарелок, огурцов и помидоров. На ночь, наверное, не стоит.
#css #game #diner #flex #grid
#фишка дня
Мне снилось, что есть такой сайт, где описаны все виды центрирования контента в CSS...
Я проснулся — а его нет. Зато есть вот что: https://codepen.io/alinaki/pen/VwqXKOL
Здесь собраны шесть вариантов центрирования контента на флексах и гридах и наглядно показана разница между place-content и place-items в разных контекстах! Я, честно, эти правила толком и не использовал... стыд и позор 🤦♀️
В общем, не зря утро прошло.
#css #grid #flex #center
🚀 Отличная API-традиция! ВТБ приглашает принять участие в (уже!) третьем по счету VTB API hackathon'е!
Создайте инновационные решения вместе с ВТБ и при поддержке экспертов Платформы API, развиваемой банком!
Призовой фонд VTB API hackathon 2023 – 1,8 млн рублей!
👉 Регистрация открыта до 1 октября: https://cnrlink.com/vtbapi23sevs
К участию приглашаются специалисты со всей России: разработчики, аналитики, продакт-менеджеры, графические и UX/UI-дизайнеры, QA- и DevOps– и специалисты по информационной безопасности!
В этом году представляем сразу 3 трека:
1. Открытые API: создание приложения на основе открытых API ВТБ
2. Алгоритмы ГОСТ: создание инструмента для обеспечения безопасности синхронного и асинхронного взаимодействия с API
3. S3 CEPH: создание отказоустойчивого слоя репликации и дупликации данных между кластерами CEPH
👉 Успейте зарегистрироваться: https://cnrlink.com/vtbapi23sevs
Реклама. БАНК ВТБ (ПАО). ИНН 7702070139. erid: LjN8KEPhi
#заметка дня
Почему-то многим разработчикам, не обязательно начинающим, в какой-то момент приходит в голову шикарная идея: объявить дочерний элемент прямо в родительском.
А что, это же так естественно и удобно, пространство имён не засоряется...
Нет! Нет и ещё раз нет. Каждый раз, когда происходит ремаунт родителя, будет происходит и ремаунт дочернего компонента.
Чем это чревато? Ну, например, объявленный вами инпут будет, как минимум, терять фокус.
Вообще, у Алекса Сидоренко, на чей твит выше я сослался, огромное количество полезных советов о внутрянке React. Крайне рекомендую, котаны. От души.
#react #rerender #antipattern #бородач
#шпаргалка дня
Настало время пошатнуть величие нашего властелина гридов! Если ты не знаешь, кто это — ты просто не в чате.
Одинаковые колонки на гридах это тебе не 1fr до бесконечности повторять. Там есть свои мерзкие нюансы.
Вес Бос попробовал собрать их все в кучу в одной большой шпаргалке: https://codepen.io/wesbos/pen/xxmPXqd
Как видим, все очень просто и непросто одновременно :( Но разобраться можно.
И заодно немного о minmax: https://dev.to/fasterandworse/css-grid-minmax-behaviour-quirk-1p6h
#css #grid
Фрилансер работает из любой точки мира по ставке от 3500руб./час и может заработать от 20 000 р. в месяц. Резонный вопрос - фрилансер, ты вот так сходу и получишь свои $50? Спойлер - нет.
Хорошо, если в окружении есть фрилансер с 20-летним опытом, который все расскажет, и подскажет.
Фрилансер Алексей Лапицкий запустил авторский канал freelancer1s
1️⃣ Мой топ-10 типичных ошибок фрилансеров
2️⃣ Мой топ правил бизнес-переписки для фрилансера.
3️⃣ Какие гарантии давать клиентам на фрилансе?
Подписывайтесь на канал. /channel/freelancer1s/177
#видео дня
Так, котаны. Стартовала премьера документалки про TypeScript! Вот прямо щас началось.
Идем и смотрим, ага. Кто не смотрит — тот не котан.
https://youtu.be/U6s2pdxebSo?si=fUdbfmInzIOdMEd0
#ссылка дня
Компании и корпорации предоставляют огромное количество инструментов для разработчиков. В том числе — бесплатных.
Это, впрочем, позволяет некоторым продуктам и решениям абьюзить систему, но суть пока не в этом.
Парни с ресурса https://free-for.dev/ ставят своей задачей предоставить максимально полный список SaaS-проектов, бесплатных для разработчиков или предоставляющих бесплатное использование на определённых условиях.
Список нарочно ограничен сервисами, иначе был бы практически бесконечен 🙂
Конструкторы, шрифты, хостинг, CDN, платформы для микросервисов, лоу-код и ноу-код решения.
В общем, хороший список. Кто-то вывалил все свои закладки 🙂
#saas #paas #free
🤦♂️ За какие it-знания вам никогда НЕ БУДУТ платить?
Евгений хотел зарабатывать больше и начал обучение на Python-разработчика 2 года назад. Вложил в образование 418 т.р., а через 2 года пошел работать только за 36 т.р.
Затраты на обучение у него окупятся через 8 лет, если он будет жить на прожиточный минимум.
Мы знаем, как не вляпаться в такое г…но и рассказываем на канале Ревизорро IT, какие технологии приносят реальные деньги. Только актуальное it. Только то, что будет работать НА ВАС.
🤝 Скорее залетайте на наш ламповый канал Ревизорро IT, пока мы палим темы.
#красивое дня
Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc
Я уже минут двадцать просто залипаю.
А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial
Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.
#webgl #бородач
#статья дня
Полку шикарных визуализаторов прибыло? Итак, помните мои мучения с игрой по кривым Безье? Или обучающий инструмент по SVG?
Так вот, теперь есть просто шикарное интерактивное руководство от Richard Ekwonye (я даже пытаться это транслитерировать не буду)! Вы только посмотрите, какава красата: https://blog.richardekwonye.com/bezier-curves
Каждый элемент на странице интерактивен, за точки можно подёргать, на элементы можно понажимать. Потрясающий уровень проработки, объяснены и основные принципы, и применение их в SVG.
В общем, если не почитать — то хоть зайдите подёргать за рычажки 🙂
#bezier #svg
💰 Ваши зарплатные ожидания?
Рассказываю сколько зарабатывает и тратит Software Engineer, проживая в Австралии, Сингапуре и Кипре, и на какую зарплату НЕ стоит ехать.
Говорю о том как проходить собеседования (включая технические) в зарубежных компаниях, а так же разбираю реальные случаи собеседований и причины отказов.
Делюсь деталями своего опыта релокации с семьёй в Европу, Азию, и Океанию, и помогаю понять подходящую для вас страну.
Хочешь изменить свою жизнь? Перенимай опыт и работай над собой.
@australia_reporting