14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
⚡️ Бесплатное обучение HTML/CSS, JavaScript, React.js с нуля с поддержкой от наставника
На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить фронтенд на практических задачах, которые интересно кодить
С 26 по 30 августа он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — React.js
Что вы сделаете на обучении
— Сверстаете макет под присмотром тимлида
— Затем добавите JavaScript (и это не пара скриптов для модального окна)
— И перепишете проект на React.js
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме
В общем — даст пошаговый подробный план «Что учить во фронтенде и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
Подписывайтесь, осталось 30 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первый урок из обучения уже доступен
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect startПосле чего
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2 bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.
Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине.
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.
Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Лето выдалось по-настоящему жаркое: закончилась одна акция, а уже поспела новая — с увеличенным призовым фондом 🤗
👉 Вкратце: оформляйте страхование ипотеки в этих компаниях до 31 августа, и вы получите шанс на один из четырех призов по 300 000 ₽ и 75 призов по 4000 ₽
💰 А еще вы получите кэшбэк до 50% за покупку полиса ипотечного страхования в любой СК
Подробности описали на странице акции ➡️
#видео дня
Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.
Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.
Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?
Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...
Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!
Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4
А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)
#webkit #cpp #develop
Если кому интересно, я добрался до компа и анимировал пример с dialog[open] через keyframes.
Пруф: https://codepen.io/alinaki/pen/OJevjMY
У этого примера явно поддержка лучше, так что забывать не стоит.
Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂
🌟 Развивайся во фронтенде вместе с FrontEndDev!
FrontEndDev — это идеальное место для тех, кто хочет углубить свои знания и навыки. Админы регулярно публикуют лучшие статьи, полезные репозитории и гайды, которые помогут тебе разобраться с новыми фреймворками и инструментами.
Присоединяйся и будь в курсе всех трендов и новинок! С FrontEndDev ты станешь настоящим профессионалом фронтенда! 💻
FrontEndDev 🚀
#статья дня
Итак, мне нужен был почти недельный перерыв, но я снова в строю и готов делиться шикарным.
И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.
Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports
Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)
И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.
Давно я с таким удовольствием не читал подобное.
#svg #css #animation
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 20 августа в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
Много практики - мало воды!
На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио.
В рамках интенсива мы:
— Сверстаем сайт на Html
— Напишем стили к сайту на Css
— Реализуем некоторые функции на JavaScript
И многое другое, о чем подробно рассказываем на сайте.
Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля.
Занимайте место прямо сейчас: https://tglink.io/47b9e9072617
#статья дня
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image #бородач
#молния дня
Простите, всё же размещу, потому что очень смешно.
IP адрес 0.0.0.0 не рассматривается всеми современными браузерами как адрес в локальной сети, поэтому запросы к нему пропускаются и уходят на локальную машину: https://chromestatus.com/feature/5106143060033536
Да, такого вообще происходить не должно, но вот многие разработчики как раз свои дев-сервера локально и запускают :) Ну ещё разные утилиты десктопные на самом деле не что иное, как веб-серверы (начиная с торрентокачалок).
Так что, теоретически, можно утащить что-то интересное из какой-нибудь компании.
Скоро везде будет исправлено, впрочем.
#статья дня
Все любят хорошие статьи по SVG.
От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.
Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/
#svg #viewbox #clippath #gsap #бородач
#статья дня
Новая статья Ахмада Шадида. На сей раз — об именованных областях сетки aka Grid Areas: https://ishadeed.com/article/css-grid-area/
Как всегда, прекрасно иллюстрированная и плавно ведущая нас от простых вещей вроде двухколоночной раскладки до мультиязычности, условного отображения и отладки в DevTools.
#css #grid
🔔 3+ года, автор канала Внеконкурентный Подход делится опытом по заработку на разработке сайтов ПОЛНОГО ЦИКЛА.
❓ А знаете, что изменилось за это время?
Почти ничего.
Все также, как и раньше можно работать из дома или любого другого места, без фриланс бирж и устройства на работу.
На канале рассказывается, как зарабатывать на веб разработке ПОЛНОГО ЦИКЛА.
— Без знания кода
— Без фриланс бирж
— Без наработки собственного портфолио
— Без необходимости быть опытным специалистом
— Без работодателей
— Без круглосуточного прожигания глаз возле монитора
➡️ Подпишитесь на канал и внедрите в свою жизнь стабильный заработок на разработке сайтов, а фриланс оставьте тем, у кого есть на это время и нервы.
#codepen дня
Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.
Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.
Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)
В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa
И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.
Короче, моё демо теперь тоже не за горами :)
#css #scroll #animation
Канал, где пишут честно про IT
Автор больше 8 лет работает в IT и вырос от junior фронтенд-разработчика до тимлида. На канале Вайтишная вы узнаете как начать карьеру в IT, расти дальше и получать больше!
Интересные посты:
- Накрутка опыта и обман на собесах: подстроиться или остаться аутсайдером
- Почему сейчас такие высокие требования к джунам
- Про личную эффективность и борьбу с прокрастинацией
- Ветераны IT с высоким ЧСВ
- Норм ли работать 2 часа в день?
Подписывайтесь на Вайтишная, чтобы узнать обо всех нюансах работы в IT
#книга дня
Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.
Ссылка: https://twirl.github.io/The-API-Book/API.ru.html
Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:
• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.
Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.
Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.
Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.
Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)
#book #api
#статья дня
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation
Уверены, что в коде вашего сайта нет уязвимостей? 💻
За последние три года в 63% случаев именно веб-приложения оказались исходным вектором атаки хакеров (данные Positive Technologies).
Проверить свой веб-ресурс на наличие уязвимостей можно с помощью бесплатного анализатора PT BlackBox Scanner. Для этого вам нужно только ввести его домен на сайте сервиса. А после регистрации будут доступны все возможности сканера (тоже бесплатно) 🎯
По результатам более 110 видов проверок анализатор выдаст подробный отчет, в котором обнаруженные уязвимости будут распределены по уровню опасности, что позволит составить оптимальный план работы по их устранению и защитить сайт от хакерских атак.
🐈⬛️ Проверить веб-ресурс с помощью PT BlackBox Scanner
#статья дня
Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально @starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например: /* Before the dialog opens */Таким образом мы получаем анимацию из display: none или при изменении любого атрибута.
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: starting-style" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr
#инструмент дня
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
#статья дня
Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: /channel/htmlshit/3033
Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?
На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection
Но даже с целью общего образования работает очень хорошо. Зайти можно даже с минимальным пониманием принципов работы указателей в любом из системных языков.
Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection
#memory #cpp
#статья дня
Смотрим на иллюстрацию. Узнали? Согласны?
Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.
А ещё некоторые антипаттерны когда-то назывались просто паттернами...
В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.
Вот: https://alexkondov.com/refactoring-a-messy-react-component/
1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация
Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.
В общем, это отличный пример.
#react #refactoring
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
#инструмент дня
Если вам для каких-то целей очень была нужна совместная доска для рисования, да ещё чтоб самим можно было её хостить — сегодня ваш день!
Ребята из tldraw.com пару дней назад анонсировали tldraw sync: движок для совместной работы, заточенных под их доску.
Я за tldraw слежу давно, ещё с того момента, как автор отрабатывал сглаживание рукописного ввода мышкой. Потом же они начали дико экспериментировать с ИИ-фишками, превратив простую доску в настоящий инструмент прототипирования.
Очень крутая штука, желаю им и коммерческого успеха тоже.
#server #collaboration
➡️ Как разработчикам получать выплаты в РФ от зарубежного заказчика?
Разработчики из РФ являются одними из самых востребованных в мире. Но зарубежные заказчики все чаще боятся иметь дело с исполнителями из РФ из-за санкций. Ведь для них неисполнение данных требований - не шутки, и может создать много проблем для их бизнеса.
💁♂️ Ну и как быть в данной ситуации?
Мы предлагаем вам платежное решение для выплат русскоязычным исполнителям
из-за рубежа с комиссией всего 2 % (для выплат на СМЗ 3.5%).
Salary.cab — сервис оплаты работы фрилансерам и исполнителям из-за рубежа, который:
— Соблюдает все законодательные требования, связанные с международными финансовыми операциями;
— Обеспечивает безопасность финансовых транзакций и защиту информации;
— Обрабатывает транзакции не более 24 часов в рабочие дни, как правило, 1-2 часа;
— Предоставляет документацию по каждой выплате.
➡️ Ознакомиться с условиями: https://clck.ru/3CMikg
#видео дня
Джош Комо (Josh Comeau) известен нам всем прежде всего как автор великолепных интерактивных обучающих статей.
Если вы с ним ещё не знакомы, его сайт — это мастхев в закладках: https://www.joshwcomeau.com/
И недавно на конференции в своём родном Квебеке он выдал прекрасную презентацию о его собственных моментах озарения. И, более того, попытался собрать их в некую ментальную модель, описывающую, что же, собственно, происходит: https://www.youtube.com/watch?v=kj7WGnUDaI4
Горячая рекомендация.
#css #talk
#статья дня
Даже две!
Не так давно Джейк Арчибальд обнаружил ситуацию, с которой не справляются сборщики мусора ни в одном из известных браузерных движков.
Конечно, сама ситуация довольно странная, и выглядит так: если у вас имеется замыкание, в котором вы обратились к некоему объекту, после выполнения функции в замыкании выделенная память не очистится. Вот: https://jakearchibald.com/2024/garbage-collection-and-closures/
То есть у нас не утечка памяти, но «захват и удержание»:
function demo() {
const bigArrayBuffer = new ArrayBuffer(100_000_000)
const id = setTimeout(() => {
console.log(bigArrayBuffer.byteLength)
}, 1000)
return () => clearTimeout(id)
}
globalThis.cancelDemo = demo();
function demo() {
const bigArrayBuffer = new ArrayBuffer(100_000_000)
const id = setTimeout(
(buffer) => {
console.log(buffer.byteLength)
},
1000,
bigArrayBuffer
)
return () => clearTimeout(id)
}
globalThis.cancelDemo = demo()