14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Сделайте карьеру в IT!
Skillbox совместно с РАНХиГС проводит набор на онлайн-бакалавриат по направлению «Веб-разработка».
Всё как в классическом вузе: семинары, сессия, студенческие льготы и отсрочка от армии, только все занятия и экзамены — онлайн.
За время обучения вы:
— Освоите frontend- и backend-разработку.
— С 1-го курса начнёте проектировать интерфейсы и создавать проекты для портфолио.
— Изучите принципы дизайна, освоите самые популярные языки программирования.
— Узнаете, как работать с базами данных, поддерживать работу сайтов.
— Освоите инструменты веб-аналитики. Научитесь создавать и применять алгоритмы.
— Научитесь тестировать веб-приложения.
Программировать безумно интересно. Переходите по ссылке за подробностями: https://epic.st/betaP2
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#инструмент дня
Пожалуй, только лишь карась на дне не слышал аббревиатур LCP, TTFB, BPP, CLS и так далее. Что их всех объединяет?
А это все метрики производительности веб-проектов. Если вы запускали тот же самый Lighthouse, то наверняка знаете, что на получение 100% влияет очень и очень многое. Так вот.
Сегодняшний инструмент дня это набор сниппетов для Chrome DevTools для визуализации и считывания влияющих на параметры производительности показателей:
https://webperf-snippets.nucliweb.net/
Что забавно, там даже есть сниппет чтобы искать изображения за пределами экрана, у которых не включена ленивая загрузка! Сомнительно, но почему бы и нет...
И, например, имеется код для анализа скорости подгрузки сторонних скриптов и их влияния на ваш сайт.
Прекрасная штука, в общем.
#performance #devtools
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
🔥 В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
Ухватить бесплатно такой ценный материал можешь по ссылке 👉 Frontend Start
После подтверждения участия мы вышлем тебе в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 11 июля.
#заметка дня
Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?
Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?
Делать unknown или any? Копировать и переопределять с помощью as?
Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype
Пример использования — на иллюстрации. Ну или ещё можно так:const createPerson = () => ({Не делайте ерунды, котаны. Читайте документацию.
firstName: 'John',
lastName: 'Doe'
})
type Person = ReturnType<typeof createPerson>
#typescript #ts #types #бородач
#такое дня
Я в отпуске! Имею право запостить что-нибудь странное. Например, риторический вопрос.
Как вы думаете, в Кинопоиске и Яндексе хорошо тестируют? Ну так-то вроде должны, конечно, но, глядя на бесконечный cookie pop-up, у меня закрадываются сомнения.
Всё внимание на тень :) Я вообще сначала думал, что кнопка не работает.
И тянется это уже с полгода...
Марафон по React: создание интернет-магазина! 🚀
Забудь о скучных проектах! Онлайн-школа веб-разработки "Methed" приглашает тебя покорить новые высоты вместе с нами на марафоне по React с 3 по 16 июля!
✔️Мы с тобой разработаем уникальный интернет-магазин, который вызовет восторг у пользователей!
✔️Какой марафон без топовой работы в портфолио? Результаты твоей работы с нашей командой будут выделяться в твоем портфолио!
✔️Мы приготовили множество удивительных фишек из фронтенд-разработки, которые помогут воплотить любые твои идеи и сделают твои проекты ещё более захватывающими!
✔️Самое интересное – цена! Стоимость марафона всего 1490 рублей! Это отличная возможность получить знания, опыт и востребованные навыки по приятной цене!
Не упусти шанс изменить свою карьеру и стать успешным веб-разработчиком! Регистрируйся сейчас и вступи в нашу команду победителей!
👉 Ссылка для регистрации: https://in.methed.ru/md/3a31555c945ee7e23079ed38a373e58b?utm_source=telegram&utm_medium=june&utm_campaign=htmlshit
#ссылка дня
Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!
Во всяком случае, так считает автор блога Comicss: https://comicss.art/
Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.
Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.
Максимально забавный подход.
#css #art #бородач
#заметка дня
В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.
Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.
Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.
Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).
Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.
А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.
#css #table #grid #codepen #таблица #бородач
#статья дня
Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?
Например, вариативный 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
#баг дня
Встречали ли вы баги, которым восемь лет?
А вот есть такие! Причём, казалось бы, подобное уже давно должно было быть решено... но нет.
Итак, встречайте: https://bugs.chromium.org/p/chromium/issues/detail?id=507397
Суть бага в следующем: для inline-flex контейнера (а ранее и для flex) неверно рассчитывается ширина (а у кого-то и высота) в случае column wrap раскладки (flex-flow). Демо: https://codepen.io/anon/pen/pJLwYp
Смешное хотите? Microsoft Edge, который ещё на старом движке почти от IE, с этим справлялся без проблем. А вот все современные браузеры так или иначе валились.
Исправлено в грядущем Chrome 116.
#bug #chrome #edge #flex
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
#инструмент дня
Перфекционисты тут?
Не так давно Андрей Ситник в Твиттере поднял тему красивого кода. В данном случае под красивым кодом подразумевалась сортировка импортов (и экспортов) модулей и методов.
И вот он, ESLint плагин для всяческой упоротой и не очень сортировки импортов: https://github.com/azat-io/eslint-plugin-perfectionist
По длине, по алфавиту, типы сверху, типы снизу, разбивать построчно, не разбивать построчно... множество вариантов для почёсывания вашего внутреннего перфекциониста.
По мне, честно говоря, ну такое себе... Но я тоже стараюсь сначала импортировать типы, как минимум.
А если вы когда-нибудь вообще задавались вопросом, где зона ответственности Prettier, а где — ESLint (или любых других), на эту тему имеется соответствующая статья: https://blog.joshuakgoldberg.com/the-blurry-line-between-formatting-and-style/
TL;DR: всё, что меняет AST (пара постов выше) — зона ответственности линтера. А красотули — форматтера.
Всем perfection, котаны!
#js #eslint #beauty
#фишка дня
Кому немного зла, близкого к абсолютному? :)
Как превратить вообще все ссылки в вашем проекте в управляемые вашим роутером? В нашем случае, либо Next.js либо react-router. Да очень просто: https://gist.github.com/devongovett/919dc0f06585bd88af053562fd7c41b7
На скриншоте есть ошибка, кто найдет — возьмет с полки пирожок.
Но если я такое увижу в новом проекте... не надо :) Это крайний случай.
#react #router #hack
Делай ARG вместе с нами!
Lamanoff на своём канале рассказывает о новых идеях, делает код, и устраивает интересный движ!
⚠️ Прямо сейчас там проводится интерактив по созданию ARG вместе с подписчиками!
Скорее залетай на канал и принимай участие!
И да, читай канал 3 минуты в день и станешь PRO_WEB_DEV!
👉️️️️️️ ПОДПИСАТЬСЯ
#реклама
#статья дня
Не так давно я писал о том, что мне пришлось написать плагин для ESLint, потому что а) среда, в которой я работаю — упоротая, б) инструменты — упоротые, в) люди тоже себя могут иногда вести... упорото.
Вот тут: /channel/htmlshit/1638
Мой плагин был очень простой: запрет констант уровня модуля. Ну вот так вот :( Они при сборке терялись, потому что иди нахер, вот почему.
Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/
Да, я в посте тоже писал про AST и инструменты, позволяющее это самое абстрактное синтаксическое дерево построить, но в статье тут всё гораздо подробнее. Меня редко хватает на целую статью, так что читайте что у других есть, котаны :) Ведь вышло неплохо и подробно.
#eslint #react #ast
#новость дня
Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.
А в анимации указали только translate. И бум — никакого вам поворота. Вот так.
А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.
Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX
Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.
#animate #transform #composition
#ссылка дня
Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.
1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en
2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings
Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.
Ломайте свои интерфейсы сами и избегайте XSS, котаны.
#xss #naughty #injection #бородач
#игра дня
Я скидывал сюда много обучающих игр по CSS, но по JavaScript (и вообще любому языку) ещё нет. Кажется, настало время это исправить. С какого же жанра начать?
Давайте с RPG! Яркий представитель этого жанра — https://codecombat.com/
Вообще, больше ЛогоМиры напоминает, чем что-нибудь ещё... но битвы наличествуют! :)
У игры имеется подписка, но основные уровни проходятся бесплатно. Дальше рассмотрим больше.
#js #education #learn
Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку.
Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html
#видео дня
Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).
Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…
Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.
Эффективность 9000, короче.
#emmet #filter #blend #бородач
#фишка дня
Пластмассовый мир победил, XML оказался сильней…
Но почему? Неужели всё настолько плохо?
Ну, на самом деле, нет. Если вы упоро упёртый любитель контекстов и отрицаете любые внешние стейт-менеджеры, то запросто можете оказаться в подобной ситуации. Да даже если и не отрицаете, всё равно пара-тройка контекстов там будет.
Но погодите, ведь любой компонент в React это просто функция?
А значит, мы можем сообразить их композицию!
const AppProvider = compose(
UserProvider,
ThemeProvider.
MenusProvider,
SupportProvider,
ErrorProvider,
StateProvider,
);
И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js
Естественно, подход по своей сути применим ко всем компонентам.
Всё есть функция, котаны.
#react #fp #context #compose #бородач
Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!
На канале факультета программирования вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.
Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования!
#реклама
#фишка дня
Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.
Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.
С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.
Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/
Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
Помогайте своим пользователями, браузерам и менеджерам паролей.
#html #autocomplete #form #бородач
Для тех, кто только начинает свой путь в IT, встают важные вопросы о выборе места обучения: где же приобрести качественные знания и не потерять время зря?
28 июня в 13:00 (по МСК) в прямом эфире от HTML Academy вы узнаете, что же лучше: университеты, курсы или самообучение. А также, что важнее: университетский диплом, сертификат от онлайн-школы и учёба с гибким графиком, или свобода выбора в процессе самообучения.
Ответы на эти и другие вопросы дадут директор Академии с двадцатилетним стажем в программировании и опытный наставник, который прошел путь от специалиста до автора курсов.
Если вы до сих пор не определились, то рекомендуем посмотреть эфир. Участие абсолютно бесплатное.
Узнать подробнее.
Журнал Академии Яндекса — о том, как работается в IT
Учим управлять людьми, проектами и собой — чтобы работать с удовольствием и становиться ещё разностороннее и увлечённее. Приносим лучшее из мира IT в ваши соцсети.
Подписывайся сейчас: мы тебе пригодимся!
#реклама
⚡️Сделали более 2,5 млн посещений на сайте ежемесячно.
Как? Кейс уже в канале Rotgar | SEO.
(27.04.2023)
Ребята продвигают сайты более 10 лет.
В канале вы найдете только актуальные статьи и кейсы по SEO-продвижению.
👉🏻В канале нет рекламы.
👉🏻Вся информация бесплатна.
👉🏻Без воды и копипаста.
Присоединяйся — @rotgarseo🔥
#реклама
Хотите быть в курсе новостей ИТ-сферы?
AG-LEGAL- это канал, который будет держать вас в курсе юридических тонкостей из мира ИТ и поможет использовать их в вашу пользу.
На канале AG-LEGAL вы узнаете :
📌как экономить на налогах;
📌как защитить ваши разработки;
📌как получить деньги от государства на ваш проект и многое другое.
Недавно на канале прошел бесплатный вебинар на тему: "Регистрация в реестре российского ПО", который просмотрели от начала и до конца более 90 зрителей.
Кроме новостей, юристы AG-LEGAL рассказывают о нестандартных кейсах из своего опыта (например, как оспорить лишение аккредитации в судебном порядке), а еще готовы ответить в комментариях на интересующие вопросы.
Подписывайтесь, чтобы не пропустить вебинары про ИТ-льготы и регистрацию в РРПО, которые пройдут в июле.
#реклама
#статья дня
Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: /channel/htmlshit/1249
Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.
На самом деле все логично: бахнуть разом огромное приложение на новую технологию невозможно, но и вслепую выбирать экраны для переделки — тоже. Добавление же экранов в новой технологии не решит проблему наличия старых и их поддержки. Так что пришлось подумать.
Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native
Получилось долго.
#react #native #rice #бородач
#фишка дня
Презентации Apple — событие больше культурное, чем технологическое. Даже если они показывают что-то переворачивающее мир. Ясно, что кто не захочет — тот не перевернётся.
Ну, кроме шуток, люди не ставят массово напоминания о презентациях Google и Samsung или Huawei. Не транслируют их построчно.
Зато по какой-то причине (миллион хомячков) к презентациям яблока находятся энтузиасты, которые повторяют новые фишки: от иконок до анимаций.
Последняя презентация тоже не обошлась без подобного. Вот весьма забавный пример: размытая виньетка.
Этот эффект очень простой и предназначен для гарантированного выделения элементов управления на любом фоне видео. Собственно, суть понятна в рекламе: https://www.youtube.com/watch?v=TX9qSaGXFyg&t=128s
Так вот, к чему я. Такую виньетку можно легко сделать на чистом CSS: https://expensive.toys/blog/blur-vignette
Секрет в сочетании шести градиентов: линейных и радиальных.
В статье даже конструктор виньеток имеется :)
#css #apple #blur
64% россиян работают за компьютером и проводят как минимум по восемь часов в день пять дней в неделю в сидячем положении. Чаще всего сидячий образ жизни ведут айтишники (96%) и работники финансового сектора (95%).
Низкая активность в течение дня влияет концентрацию, настроение, сердечно-сосудистую систему и опорно-двигательный аппарат. Кроме того, IT-специалист вынужден постоянно смотреть в экран. От этого страдает зрение.
Что делать?
Тут помогут спланированные перерывы в работе, физические упражнения, гимнастика для глаз, график питания.
Получается целый список задач помимо рабочих дедлайнов, которые как всегда горят. Вот бы кто-нибудь взял на себя эту функцию и вовремя напоминал «подзарядить батарейку».
Сделать это может Хома Стоев - бесплатный Telegram бот. Он учитывает график работы и присылает полезные напоминания.
Итак, с чем работает Хома:
1) Вред сидячего образа жизни можно компенсировать за счет перерывов. Бот сообщает, когда нужно сделать паузу для разминки. Присылает упражнения. Рассказывает, как внедрить в жизнь комбинированную работу стоя/сидя.
2) Профилактика проблем со зрением - гимнастика для глаз. Бот напоминает об этом, отправляя инфографику с упражнениями.
3) Если системно забывать об отдыхе, может произойти выгорание. Хома сообщает о начале и конце рабочего дня, чтобы вы успевали восстанавливаться.
4) Для продуктивной работы нужна энергия. Ее основной ресурс - питание. Бот напоминает о поддержании водного баланса и обеденных перерывах.
Чтобы настроить и запустить Хому - вам нужно буквально 5 минут: /channel/stoev_bot
#реклама