14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#игра дня
Глядите чо я откопал. По-моему, мы уже рассматривали все CSS-игры и игроподобные занятия, но этот ресурс больше похож на продвинутый #опрос.
Итак, встречайте: Guess CSS!
https://www.guess-css.app/
Возможно, это максимально быстрый способ прокачать своё понимание стилей, их композиции и каскада.
Делитесь результатами, котаны!
#css #game #quiz
📍 Ищут парней для эксперимента. Сделают из вас разработчиков видеоигр.
Для геймдев клуба это несложно. Денег не возьмут!
Их основатель поставил себе цель, что до конца года помочь еще как минимум 1000 разработчиков заработать свои первые деньги в GameDev.
Ему часто пишут в ЛС: «Евгений, что делать? Уже год пытаюсь сделать свою успешную игру, но художники и программисты постоянно косячат. Скачиваний нет. А я уже потратил все деньги и мотивация моя на нуле».
В таких случаях всегда отвечает: чтобы игра была успешной ее нужно делать не для себя, а для игроков. И для этого есть четкий алгоритм: поиск ниши, разработка идеи, релиз и монетизация.
Нужно просто взять и повторить простые действия.
Впаривать ничего не будут. Просто искренне хотят вам помочь стать успешнее и достичь свою цель. Неважно, работаете ли вы в найме, сидите дома или занимаетесь бизнесом. Неважно, есть у вас деньги или нет.
🔸 Нужно только пройти по ссылке и зарегистрироваться: https://gamedev-intensive.ru
🔸 Единственное, что нужно сделать — это перейти по ссылке и оставить заявку! Дело 2х минут! Не ленись!
🔸 Такой возможности точно больше не будет в ближайшие месяцы.
🔸 Не упусти свой шанс! Бесплатный доступ, только по этой ссылке
https://gamedev-intensive.ru
#реклама
#статья дня
Две недели назад я писал о том, что мой бывший коллега Даниэль Ющик создал Stylelint-плагин, помогающий привнести Defensive CSS-практики в ваш процесс деплоя.
Насколько я понял, не так много людей среди подписчиков в принципе используют линтеры стилей, полагаясь на встроенные возможности IDE. И, пожалуй, зря.
Впрочем, очень удачно подоспела и расширенная статья Даниэля об его плагине и в принципе о том, как настраивать Stylelint, включая демо-проект.
Собственно: https://blog.logrocket.com/linting-defensive-logical-css-stylelint-plugins
Линтуйте, котаны!
#css #defensive #stylelint
#дополнение дня
В чате и комментариях к посту о scroll-margin-top и scroll-padding-top был обнаружен один факт, который насколько очевиден, настолько же и внезапен.
В общем, как было сказано, scroll-margin отновится к элементу, в то время как scroll-padding — к контейнеру со скроллом, то бишь, к родителю.
Так вот, если у элемента установлен overflow: hidden, ни о каком положительном значении scroll-margin речи идти не может: отступ обрежется. Ну, почти как в случае со схлопывающимися отступами в блочной модели 🤯
При этом отрицательный отступ всё ещё возможен (Полина, привет), поскольку "смотрит" он внутрь элемента.
Чудны дела, в общем, котаны.
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor
Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!
На канале факультета программирования вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.
Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования!
#реклама
#статья дня
Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/
Математика не стареет! Вечнозелёная статья, люблю такие.
Что не так с выравниванием вообще?
Если расположить некоторые объекты по их геометрическому центру (например, по пересечению диагоналей описанного прямоугольника), то визуально будет казаться, что всё очень и очень плохо. Например, одно из оснований треугольника будет явно перевешивать (первый же пример в статье).
Что же делать? Ну, например, описывать не прямоугольник, а круг.
А вот в случае сложных составных фигур нужно бить её на детали, искать их центры и вычислять т. н. барицентр по ним. И в статье есть и формулы для вычисления и пример алгоритма.
Я себе на случай смерти хабра статью даже сохранил. Надо, кстати, проверить, а что там в Figma.
А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center
#optics #geometry
#такое дня
Когда на одном из своих прошлых проектов я начал работать с WebGL и подключил очень крутых ребят нам помогать, я от них многое узнал о процессе распаковки текстур (а ещё о том, почему айфоны говно для WebGL, сейчас поймёте).
Одной из неочевидных вещей является хранение текстур в памяти.
Окааааазывается, очень грубо, все ваши прекрасно упакованные и минимизированные жипеги, пнг и прочие тга надо распаковать. И положить в память информацию по каждому пикселю отдельно. А это очень и очень много.
Но это полбеды, некоторые устройства (да-да, вы поняли) выделяют ну максимум 128 Мбайт на хранение текстур, мешей... да всего. Нужно быть очень аккуратным.
Вот к чему это я. По Telegram опять несётся волна стикеров, вызывающих падение клиента. Багам уже с год, но почему-то действий ведётся мало.
https://bugs.telegram.org/c/16633
https://bugs.telegram.org/c/16842
Причина максимально банальна, о чём я сказал выше: распаковка текстур.
Например, в одном из пакетов каждый кадр видеостикера — огромный красный квадрат размером 15000x15000 пикселей. Итого, каждый распакованный кадр займёт 600 Мбайт и весь стикер — до 27 Гбайт. А сжать его можно до нескольких килобайт же. Красота.
В общем, картиночки — страшная сила, котаны.
Прием-прием, фронтендеры!
Помните мы звали Вас на мероприятие TeamSnack.workshop
Подведем итоги:
✅ Эксперты Cloud обсудили 17 проблем микрофронтов;
✅ Бургеры, пицца, ламповая атмосфера, крутой движ;
✅ Мерч, стикеры, пила...;
✅ И конечно networking. "Видели ночь, гуляли всю ночь до утра...".
Запись: TeamSnack
Miro: Нажми
Хочешь не пропустить июньское мероприятие? Вступай в сообщество TeamSnack
До встречи, stay tuned🤞
#ссылка дня
Я редко устраиваю линкдамп, но меня на этой неделе мой сеньор хорошо так протащил по возможностям Git, поэтому придётся срочно уменьшать отставание, чтобы больше не делать глупостей.
1. Собственно, введение в Git от GitHub: https://guides.github.com/introduction/git-handbook/
Нелишним будет напомнить, чт GitHub не создавали Git, но построили вокруг него крупнейший сервис хранения кода.
В их введении описывается, что такое вообще система контроля версий, репозитории, основы Git и GitHub (пулл-реквесты и т. д.)
2. Интерактивный сервис по изучению веток: https://learngitbranching.js.org/
Игра, практически. Красивое.
3. ProGit, второе издание: http://git-scm.com/book/en/v2
4. Книга от авторов GitTower — многим нравится иметь приложение на компьютере. Примерно то же самое, что в руководстве от GitHub: https://www.git-tower.com/learn/git/ebook/
5. Опять же, руководство от Atlassian — авторов конкурента GitHub, BitBucket: https://www.atlassian.com/git/tutorials
6. Основы от Роджера Дадлера: http://rogerdudler.github.io/git-guide/
Есть версия на русском.
7. Пошаговое руководство в основы и не только: https://gitimmersion.com/
8. Ещё одно: http://think-like-a-git.net/
9. Для любителей видеоуроков и конкретных решений: https://gitforeverybody.com/free-git-tutorials/
10. Ещё одно визуальное руководство: http://git-school.github.io/visualizing-git/
11. Ну и мой любимый универсальный сайт https://learnxinyminutes.com/docs/git/
Там не только Git, там вообще всё :)
Не переставайте учиться, котаны.
#git #linkdump #бородач
#фишка дня
Как заставить пользователя сгенерировать надёжный пароль?
Ну, вообще — никак. Только организационно. Пришлые посетители — они и психануть могут.
Но вот в экосистеме Apple такая попытка имеется. И называется — атрибут passwordrules.
Поддерживается он не только встроенными менеджерами паролей на яблочных ОС и, соответственно, браузером Safari, но и популярным менеджером паролей 1Password.
Самое забавное, что у Apple даже специальный инструмент для проверки правил имеется: https://developer.apple.com/password-rules/
Будет ли это стандартом в скором времени? Скорее всего, нет: пользователи не очень любят ограничения, пока не прилетит в лицо. Так что надеемся на методы входа, исключающие ввод паролей в принципе.
Впрочем, пропозал есть: https://github.com/whatwg/html/issues/3518
Но если вы в могучем тырпрайзе и в вашем тырпрайзе или яблоки, или 1Password — тема рабочая.
#password #security #1password #apple
#фишка дня
Мой любимый фронтенд-твиттер Кричащий Банан показал очень интересную штуку: тип Simplify<T>, взятый из https://github.com/sindresorhus/type-fest/tree/main (отличная репа, кстати, куча полезных типов).
Что это и зачем? Я вот сразу не понял. Ну, ты же сам обычно типы пишешь, зачем упрощать? А все просто.
Мы предполагаем, что A — собирательный тип. Например, комбинация из Partial и Omit, что достаточно часто приходится делать:type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<T>;
type A = { foo: string; bar: number };
type B = Omit<A, "bar"> & Partial<A>
type B = PartialBy<A, "bar">;
И IDE покажет лютую мешанину. Чтобы этого избежать? Можно B... упростить. И будет красиво! Смотрим КДПВ.
Не забываем посылать спасибы авторам Type Fest и Кричащему банану :)
#typescript #ts
#статья дня
Давайте честно, у кого были проблемы с пониманием 3D-преобразований в CSS? А у кого есть?
Да не надо стесняться, у всех были и есть. Кубик на CSS нарисовать могут не только лишь все. А всё почему?
А всё потому что у вас интерактивных тренажёров не было. К счастью, делает их не только Джош Комо, но и вот Брэд Вудс: https://garden.bradwoods.io/notes/css/3d
Сослался я на записки по 3D-преобразованиям, но вообще этот проект — хороший пример того, как можно делать заметки по ходу изучения какой-то темы. От объектов в JS до отладки SQL. Хорошая шпаргалка, рекомендую всем так делать. Ну или хотя бы отрабатывать навыки в кодпене, со временем тоже неплохо накопится.
#css #js #cheatsheet #interactive #бородач
Backend сервис поднял $5 миллионов, как❓
Xano - это платформа для создания backend любой сложности с неограниченным масштабированием🔥
Всего за 2 года она собрала более 20 000 активных пользователей, а в конце прошлого года проект получил 5 миллионов долларов на развитие.
С помощью Xano вы сможете:
- сделать бэкенд для своего проекта за пару часов
- сделать любую логику, как в полноценном коде
- у вас будет документация и логи обращения к серверу
- без проблем развивать и масштабировать проект
На канале XANO RU скоро будет проведен бесплатный прямой эфир, где вы сможете задать свои вопросы и узнать больше о том, как использовать Xano в своей работе.
Не пропустите эту возможность узнать больше о том, как Xano может помочь вам в разработке!
#реклама
#статья дня
Взгляни на КПДВ, друг. Каким будет значение background-color в первом и во втором варианте?
Скорее всего, в одном из случаев ты точно ошибся. Но это нормально, CSS настолько мощно продвинулся за последние несколько лет, что каскад и знания о нём давно пора обновить.
И Лидия Захарова из HTML Academy выкатила шикарную статью: "Как работает каскад в CSS".
https://htmlacademy.ru/blog/css/cascade-works
Как происходит обработка значений, фильтрация, расчёт каскада. Что под капотом у браузера?
Достаточно кратко и суть передана отлично. Рекомендую!
#css
#статья дня
Все любят хорошие статьи по SVG.
От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.
Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/
#svg #viewbox #clippath #gsap #бородач
#codepen дня
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform
Как устроиться на удалёнку в зарубежную компанию и где искать вакансии? Как выучиться на программиста с нуля и успешно пройти все собеседования? Какие книги читать, чтобы прокачать скиллы в разработке?
Ответы на эти вопросы — в канале «Люди и код». Команда канала беседует с опытными и начинающими разработчиками и программистами, находит интересные и неожиданные темы и помогает влюбиться в IT. Про мемы тоже не забываем :)
Наши любимые материалы:
1. 10 сервисов для поиска удалённой работы за доллары и евро.
2. Как стать фронтендером в 37 и найти работу после сотен отказов.
3. Как программисту пройти собеседование. 6 советов.
4. Как уехать за границу в 2022 году: подробный гайд по релокейту для айтишников.
5. Почему стоит прочесть книгу «Карьера программиста».
Подписывайтесь на канал «Люди и код»: @skillbox_media_code
#заметка дня
Чем отличаются auto-fit и auto-fill в гридах?
Отвечает Александр Друзь.
Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)
Так в чем же разница, словами? :)
При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.
В общем, всё довольно просто.
#css #grid #repeat
#фишка дня
Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?
Места на экране мало, ещё и клавиатура съест.
Очень просто! Использовать атрибут enterkeyhint!
Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute
Поддержка: https://caniuse.com/?search=enterkeyhint
Пользуемся!
#mobile #form #html #бородач
#библиотека дня
Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.
Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.
Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.
Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌
Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...
#react #component
👨💻 Вы IT-специалист и хотите работать в Великобритании?
С визой Global Talent – это просто! Без инвестиций, работодателя, высшего образования и знания английского языка.
Это иммиграционная виза, по которой вы можете переехать вместе с семьёй в Великобританию, жить и работать там до 5 лет. А через несколько лет получить ПМЖ и британское гражданство.
И самое главное – не нужно обладать исключительным талантом. Многие IT-специалисты могут претендовать на эту визу.
👉🏻 Читайте подробнее в Telegram-канале, где каждую неделю делятся полезной информацией о переезде в другие страны: /channel/+29wuRP52o4M3ZWIy
#реклама
#статья дня
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
#фишка дня
Как тестировать асинхронный код, собственно, fetch, не имея доступа к интернету и не поднимая локальный сервер?
Не знаю, зачем вам это может понадобиться (тесты, опять же), но Data URL придёт на помощь!
Просто подставьте что-то вроде 'data:,\uFEFF{"name":"htmlshit"}' вместо URL в fetch и наслаждайтесь.\uFEFF это BOM символ. Технически, его можно не включать.
#fetch #data #trick
Как специалисту по безопасности повысить свою квалификацию?
Каждый день появляется примерно 70 новых уязвимостей. Поэтому специалистам по безопасности важно постоянно развиваться и учиться новому. Специально для Middle и Senior ИТ-специалистов, которые отвечают за цифровую безопасность компании и продуктов, команда Yandex Cloud разработала курсы:
— «Защита облачной инфраструктуры» поможет настроить и поддерживать необходимый уровень безопасности;
— «DevSecOps в облачном CI/CD» научит обеспечивать безопасность приложений, познакомит с методологией DevSecOps, которая поможет автоматизировать проверки безопасности и экономить ресурсы;
— «Аутентификация и управление доступом» поможет подготовиться к росту инфраструктуры и команды, научит настраивать и регулировать доступ в облаке.
Также скоро появятся курсы «Погружение в сетевую безопасность» и «Compliance».
Обучение бесплатное — уроки откроются сразу после регистрации ➡️
#статья дня
Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.
1. Ставь autocomplete в нужное положение (username, current-password etc.).
Мы тут, кстати, обсуждали возможные значения и даже проблемы.
2. type="email", тут всё ясно.
3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).
4. Не забывай про существование тега form (и такие тоже существуют).
5. Не используй placeholder как label.
6. Помни о label, особенно для галочек.
7. Состояние :focus должно быть визуально подтверждено.
8. Маркируй невидимые поля для скринридеров.
9. Не прерывай ввод внезапной валидацией (бесит).
10. Исключи случайную повторную отправку формы.
11. Помни о сетевых задержках.
В статье полно примеров и объяснений. Проверяйте свои формы, котаны.
#form #ux
Здесь собраны все технологические тренды и прогнозы цифровизации в удобном формате картинок и коротких списков. Вся суть без воды, айтишный юмор и digital-новинки.
Подпишитесь, чтобы ничего не пропустить!
*Рекламодатель АО "ДОМ.PФ" ИНН 7729355614, erid: 2VtzqvBKQWm
#расширение дня
Как я уже много раз писал, доступность — она не про людей с ограниченными возможностями. Она для всех. Проблемы мелкого шрифта, малой области клика/касания, невозможности навигации клавиатурой присутсвуют почти на всех сайтах.
Сегодняшнее расширение пытается решить проблему недостаточного контраста на сайтах: https://fixa11y.com/
Опять же, если вы думаете, что она касается не всех — попробуйте посидеть на ярком солнце и почитать так любимый многими дизайнерами серый на сером. Даже обладатели макбуков запнутся.
Полезная вещь, короче, надо сказать.
#css #a11y #contrast #бородач
#ссылка дня
Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.
У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.
https://codelabs.developers.google.com/
Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.
Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.
Моя рекомендация, в общем.
#google #dev #education
Как заглянуть под капот IT-компании
Собственными глазами. Хотя Телеграм и захватили псевдо-эксперты, на другой стороне баррикад за правду и внимание читателей сражаются реальные предприниматели.
Так Евгений Новиков основал студию мобильной разработки nit.studio и завел авторский канал, где открыто рассказывает и показывает:
● как выстроены процессы
● как взаимодействует команда
● как при этом не сойти с ума
Более того, каждый человек сейчас может записаться к нему на бесплатную консультацию по вопросам ИТ, управления, развития бизнеса и личной эффективности.
Хочешь разобраться, как работает IT-студия и мозги предпринимателя 👉 welcome to NiTривиально
#реклама
