14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation
Хотели бы начать работать в иностранной компании, но не уверены, что вы сможете пройти интервью на английском?
Приходите на бесплатную диагностику к преподавателю английского языка Игорю, где он оценит ваши шансы успешно пройти интервью на английском, а также даст вам рекоммендации, что вам необходимо улучшить.
Игорь:
- специализируется на преподавании английского IT и digital специалистам. В его канале DIGITAL АНГЛИЙСКИЙ вы можете найти много полезного для прокачки вашего языка;
⁃ преподаёт английский с 2018 года. За это время он провёл более 3000 уроков и помог более 40 студентам повысить уровень языка и подготовиться к интервью. Например, его студенты работают в S&P Global, Bosh, а также в других иностранных компаниях;
- официально имеет уровень С1 (IELTS - 7.0);
- проходил международную преподавательскую стажировку в Румынии;
⁃ обучался в университетах Швейцарии,США и Германии.
Записывайтесь на бесплатную диагностику и проверьте вашу готовность к интервью.
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
🇦🇺 Как узнать, есть ли у вас шансы на переезд в Австралию
Каждый день появляются новости о санкциях и запретах для россиян в Европе. Один только запрет на въезд на автомобилях с российскими номерами чего стоит!
Поневоле возникают мысли, а в ту ли сторону мы смотрим? Есть, например, Австралия — государство с космическим уровнем жизни, безопасная и очень красивая. 😉
Австралии нужны иммигранты. Список востребованных специальностей включает в себя 450 позиций, а гражданство и паспорт можно получить через 4 года после переезда. Есть возможность получить студенческую визу на изучение английского языка на 18 месяцев на всю семью и продлить пребывание в будущем.
Наталья Дьяченко – лицензированный агент по иммиграции. В авторском телеграм-канале она публикует актуальную информацию о жизни в Австралии, учебе, визах и иммиграции.
👉 А через этот бот можете получить бесплатную оценку шансов на переезд.
#новость дня
Стоило мне вчера рассказать, как ловить глобальные ошибки и состояние загрузки в react-query aka TanStack Query, как вышла его пятая версия!
Стоит ещё раз отметить, что начиная с 4 версии react-query стал называться TanStack Query и поддерживать не только React, но и Vue, Svelte, Solid.
Из интересного: поддержка Suspense, улучшенные т. н. бесконечные запросы (для пагинации и скроллинга), новые девтулзы. Но изменение, которое вызвало бурю разного рода эмоций это, конечно, исключение onSuccess и onError событий из определения запросов.
Впрочем, они по этому поводу полгода назад разродились большой статьёй: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose, которую я всем рекомендовал прочитать примерно тогда же.
В общем, обновляемся?
#react #query #tanstack
erid:LjN8KGmye
Создавали лендинги в конструкторе? Почему бы не освоить новую профессию и привлечь еще больше клиентов?
В мобильных приложениях нуждается, пожалуй, каждый заказчик одностраничного сайта. Самое главное: никакой язык программирования больше изучать не нужно - давно существуют конструкторы nocode-форматов.
Где можно всему научиться и уже через месяц повысить свой доход? Переходи в мой канал и читай мои посты. Не упускай новые возможности!
Как джуну уйти из найма и начать работать на себя?
Привет! Я был джуном с зарплатой в 100 тысяч. Но за прошлый год заработал более 30 млн как no-code разработчик мобильных приложений на фрилансе.
“Как? С чего начать? В чем секрет?” - если возник один из этих вопросов, то переходи в мой канал, в котором я рассказываю о разработке мобильных приложений в конструкторе, все ответы уже там!
Реклама
ИП Кабацкий
ИНН 540301529301
#фишка дня
Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей c кое-чем насколько потрясающим, настолько же и забытым.
И это API document.getAnimations(), позволяющий не только получить список всех CSS-анимаций, но и, внимание, выставить промис и дождаться их выполнения! 🤯const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)
Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX
*с некоторых пор я начал форкать пены, потому что пропадают иной раз
Теперь о применимости.
Я нынче разработчик корпоративный, потому мне интересно это, например, с позиции совершения какой-нибудь операции по скрытию уведомления-тоста. Во время онбординга, например.
Ну а разработчикам промо-сайтов важность синхронизации действий и анимаций объяснять не надо.
Отличный пример забытых технологий 🙂
Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?
А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...
#css #js #animations #promise
#статья дня
Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.
Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?
Я наткнулся на kovchiy/%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D1%8B-%D0%B8-%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D0%B8-9e42977b3c62">этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. kovchiy/%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D1%8B-%D0%B8-%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D0%B8-9e42977b3c62">Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.
Очень грубо говоря — описан весь цикл создания дизайна продукта.
На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.
Вторая часть, кстати, вполне себе независима и говорит о том, как создавать словарь своего набора компонентов или, бери выше, дизайн системы. Всё есть список, дамы, господа и им сочувствующие.
В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.
#design #ui #widgets #бородач
#ссылка дня
По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?
Что отличает Engineering Manager от Lead Developer?
Почему часто отказываются от именований, что я представил выше, используя старые добрые слесарь шестого разряда?
На все эти вопросы даёт ответ т. н. матрица компетенций. Суть — таблица, где прописаны желаемые знания и умения по каждому из уровней, в нашем случае, инженеров. Иногда с чёткими примерами (тесты пиши, да).
Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.
Собственно, вот: http://eng-skills-matrix.expert360.com/
По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.
Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).
Развивайтесь, котаны!
#matrix #work #competence #бородач
4 дня, 3 языка, 1 цель!
Создайте свой аналог YouTube вместе с нами на бесплатном 4-дневном интенсиве. Старт 17 октября.
Мы вместе с тобой напишем фронтенд-часть аналога приложения YouTube. Наше приложение будет адаптивным под все устройства, поработаем с YouTube API и выложим результат на GitHub.
Даем только выжимку теории и много-много практики, чтобы получить на выходе готовый проект в портфолио.
Регистрируйтесь прямо сейчас: https://in.methed.ru/md/2a3cd3d9e5a9214a4219cb19186fa01d?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024. erid: LjN8K2Kxx
Rolldown: a rust port of Rollup
У вебпака есть rspack, а у ролапа будет Rolldown.
Сейчас проходит ViteConf (я, кстати, не рекомендую смотреть такие штуки в лайве, лучше потом в 1.5× промотать на ютубе) и Эван Ю анонсировал Rolldown — порт ролапа на расте.
Основная цель — заменить esbuild и Rollup в Vite незаметно для конечных юзеров.
Интересно, что в разработке участвуют ex-rspack разработчики, а Лукас Таегерт-Акинсон, мэйнтэйнер ролапа, выступает в роли консультанта. Обещают в открытом доступе до конца года.
Меня долгое время смущало, что в JS-тулинге появилась двойственность: го и раст. Проектов на расте, конечно, больше, но esbuild очень успешный проект. Ну что ж, посмотрим как это повлияет на расстановку сил, но кажется раст начинает побеждать.
Слайды доклада вот тут.
А вот сам доклад.
P.S. За новость спасибо @Safort
#фишка дня
Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.
Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.
Пользуемся 💝️️️️️️
#devtools #debug #бородач
#инструмент дня
Кто слышал о Modernizr? Поднимите руки 🙋
В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.
Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде js flexbox flexboxlegacy canvas canvastext webgl и так далее.
На рынке он давно, потому интересно, какие же есть альтернативы.
И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.
Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.
#css #supports #modernizr #бородач
▫️ Code Ready дает возможность узнать много интересной информации в мире Web разработки. 😉
▫️ Каждый день мы публикуем полезные ссылки или посты сразу с готовым кодом и примером их использования.
▫️ Различные анимации, эффекты и многое другое, что поможет сделать ваш сайт уникальным и интересным.
▫️ Стань частью сообщества!! Подпишись на наш телеграмм канал! 🎯
#фишка дня
А давайте немного заглянем в будущее.
Наверняка же кто-то из вас делал различные выпадающие списки на замену убогому select. То, почему select такой убогий — это тема для отдельной большой статьи, я ещё пытаюсь собрать материалы. Там не только про него, впрочем... Но не суть.
Так вот, если у вас есть Chrome Canary aka 120, можно пройти в chrome://flags, включить Experimental Web Features и увидеть возможности будущего элемента selectlist.
Уна Кравец собирает различные примеры использования в своей коллекции на Codepen: https://codepen.io/collection/QWeLGB?cursor=eyJwYWdlIjoyfQ==
Вот, например, меню из Airbnb с видеоиллюстрации: https://codepen.io/una/pen/PoXbgVW
А вот GitHub: https://codepen.io/una/pen/KKbNYbo
Там много разных. Повторю: только на Canary и только с Experimental Web Features.
Впрочем, естественно, давно имеется веб-компонент, ведущий себя ровно так же: https://github.com/luwes/selectlist-polyfill
Так что пробовать можно уже сейчас. Пора начинать!
P. S. я тут сделал sortable multiselect combobox на React Downshift. Надо кому инструкцию?
#select #html #future
#такое дня
Я всё-таки решил поделиться интересным трешаком, что случился со мной на днях.
Итак, многие знают, что на маках есть выделенная кнопка переключения языка — она совмещена с Fn. Всем этим многим ровно так же известно, что переключает язык она очень плохо. Даже туповато.
В итоге я настроил её на отображение панели символов и эмодзи. И это успешно погубило мой рабочий день.
Я случайно нажал на неё в PhpStorm и ткнул в эмодзи. Шторм решил скачать все недостающие шрифты на свете. С подтверждением.
После обращения в JetBrains мне было сообщено, что это в принципе известный косяк! И от них там мало что зависит.
Я полез копаться в ссылках, что они мне скинули, и наткнулся на шикарную особенность макоси. Итак, мякотка!
macOS поставляется с десятками шрифтов из коробки и ещё многие десятки их можно официально скачать. Интересно здесь то, что для других систем эти шрифты могут быть платными, но уж как есть.
Но некоторые из этих наборов имеются на том же Google Fonts. И вот здесь начинается самое интересное.
Если вы на условной macOS Catalina открыли бы в Safari сайт с установленным Google-шрифтом Mukta, браузер предложил бы вам его скачать через такое же окошко, как на моем видео!!
Вы не ослышались: не с сервиса Google Fonts, а с ресурсов Apple!
Вот, смотрите: https://www.reddit.com/r/divi/comments/f3h6dk/safari_and_google_fonts_problem/
Естественно, такое выпавшее окно может резко подорвать доверие посетителей к ресурсу. К счастью, это исправили. Ну, в Safari.
А в десятках других программ — нет...
#библиотека дня
Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.
Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw
1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.
Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.
Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.
Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw
И вот эта штука уже очень интересная и современная. Ну и, из определения веб-компонентов, фреймворконезависимая.
Есть поддержка медиазапросов, есть — контейнерных.
Впрочем, я в любом случае предпочту предложенный мной выше вариант. Но я же не один на свете.
#css #table #adaptive
#инструмент дня
Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!
Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.
Большинство повторяет заученные когда-то команды и сочетания
sudo rm -rf /*, например
Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/
И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂
#console #shell #bash
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img
#фишка дня
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
console.info(
"%c %cAdobe %cPhotoshop Web%c %c2023.20.0.0%c %c1bba617e276",
"padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)
#фишка дня
Какова цель абсолютного большинства веб-сайтов, виджетов и приложений?
Такова, какова она есть, и больше – никакова.
Если отбросить всю шелуху, это — загрузить данные, отобразить их и обновить (при необходимости).
Неудивительно, что инструменты вроде SWR и react-query aka TanStack Query стали дико популярны и вытесняют не то чтобы даже другие решения для загрузки данных, а целые стейт-менеджеры.
Более того, им не обязательно скармливать HTTP-запросы, понятие query в обоих случаях сводится к любому промису, будь то HTTP-запрос, запрос к базе данных, Firebase или даже к API Google Sheets (ну, мой случай). Это, кстати, позволяет очень легко всё тестировать.
Так вот, хуки для загрузки данных штука мощная, но мне при этом очень нравится именно вторая составляющая: кэш данных и состояния запросов.
Например, хочется показать глобальное состояние загрузки? В TanStack Query Есть отдельный хук для этого: useIsFetching... но я не хочу просто показать статус загрузки, я хочу отфильтровать его лишь для некоторых!
И вот тут раскрывается настоящая мощь react-query: средства поиска и фильтрации по кешу и клиенту: useQueryClient и QueryCache.
Передав некий предикат поиска, я могу фильтровать запросы по их ключам, состоянию и ошибкам!
А после — уже отображать в любом месте приложения нужные мне действия. В моём случае это, например, отмена запроса и возврат к предыдущему состоянию.
Давайте таки покажу код: https://codesandbox.io/s/react-query-any-error-9lsjz3?file=/src/hooks/useIsFetchingPosts.ts
Уберите throw new Error из хука usePosts и получите обычную загрузку данных.
Ну а чтобы написать хук глобального состояния ошибки запроса, пришлось немного покопаться в исходниках стандартного хука useIsFetching, но это того стоило.
Задавайте ваши ответы, котаны :)
#swr #react #query
Вебинар «Битва за Dream Job: пишем резюме, которое откроет двери в IT»
Резюме — главный способ выделить себя среди других. На оценку одного резюме у HR-специалиста уходит около 20 секунд. Если за это время резюме зацепит, его прочитают до конца. Если нет — резюме закроют и вас не пригласят на интервью.
Спикеры, готовые поделиться с вами секретами успеха: Светлана Гусева и Анастасия Щукова, более 10 лет нанимают сотрудников в крупнейшие компании: «Росгосстрах», «Яндекс», «Магнит», «ТЕХНОНИКОЛЬ». Они точно знают, на что смотрят HR-специалисты, и расскажут об этом вам.
Что будет на вебинаре:
🔹Разбор несколько ваших резюме в прямом эфире.
🔹Распространённые ошибки в резюме и как их не допускать.
🔹Покажут, как нейронные сети помогают в составлении резюме.
🔹Расскажут, как помогают найти работу в ИТ и Диджитал.
Вебинар пройдет 18 октября в 17:00 (МСК) Фраза «мы вам перезвоним» наконец-то станет правдой!
👉Записаться на вебинар
#реклама
👨💻👩💻Web-разработчикам на Python важно расширять свои навыки!
💯Особенно для желающих перейти на Middle+ уровень. Одним из таких навыков является фронтенд-разработка с нуля на Vue.js.
🏅12 октября в 20:00 в рамках запуска курса Web-разработчик на Python мы проведем бесплатный открытый урок по Vue.js. Пользу получат, как знающие JS, так и новички.
💪Если Вы хотите получить полный набор Fullstack навыков, с которыми сможете создавать сложные web-сайты и решать задачи уровня Middle+, то приходите познакомиться с нашим преподавателем Суреном Хореняном — руководителем группы разработки, ведущим разработчиком МТС ИИ.
👀 Зарегистрируйтесь для участия и получения записи!
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. erid: LjN8KK9sR
#статья дня
Что больше всего бесит в рекламе на сайтах? Почему каждый второй ставит адблоки и прочие ублоки?
Ну, как минимум, назойливость. Во всяком случае, это то, что бесит лично меня. Вторая причина — количество баннеров.
Тем не менее, без рекламы бесплатный веб практически невозможен. Да, кто-то особо гордый скажет: "Я зарабатываю деньги в реальном мире, а не в интернете", но мы его и не спрашивали.
Так, вся эта сопливая подводка к чему, в блоге Google Chrome вышла хорошая статья на тему оптимизации рекламных вставок. Встречайте: https://web.dev/articles/loading-ads-page-speed
Как и в каком порядке размещать баннеры и контент, когда применять и не применять ленивую загрузку, как обновлять вставки. По пути немного про LCP, CLS и асинхронную загрузку.
Если вас в принципе тошнит от самой мысли о рекламе, воспринимайте статью как практическое руководство по производительности сайтов и приложений. Полезно.
#ad #lcp #cls #performance
#библиотека дня
Соскучились по хорошим дейтпикерам? Да по ним невозможно не соскучиться.
Итак, сегодня на обзоре https://easepick.com/
Чем хорош?
- Нет зависимостей
- Легковесный
- Написан на TypeScript
- Есть удобный конфигуратор
- Поддержка плагинов, изначально поставляется с прицелом на их использование
Стандартный набор любой библиотеки в 2023 году, в общем.
Чем плох?
- Мне не понравился выбор года. Ну его вообще нет, если на то пошло. В этом отношении bootstrap-datepicker непобедим.
Но это ерунда, на самом деле. Если посмотреть на примеры, становится ясно, куда ребята целились: в создание удобного отельного дейтпикера. И им определённо удалось!
API очень простой, несколько официальных плагинов как раз реализуют всё то, что необходимо для выделения диапазонов.
Конфигуратор песня, конечно: https://easepick.com/configurator/
В общем, моя рекомендация.
#datepicker #js #ts
У Вали шикарный канал, а rspack мы используем в продакшене и посматриваем на Rollup для бакенд-части проекта. Теперь будем посматривать и на Rolldown.
Читать полностью…
7 дней бесплатного обучения frontend-разработке!
Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором.
Что будет:
1️⃣ Создание веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Участвуй бесплатно
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KGA8j
#фишка дня
Я, конечно, топлю за максимальную простоту стилей и срезание углов, потому редко использую тег picture для работы с srcset в смысле размеров изображение под разные устройства и экраны. Но есть у него особенности, которые иначе повторить довольно неудобно.
И я говорю о поддержке медиа-запросов в, буквально, атрибуте media.
Одно из них — адаптация изображений для, например, тёмной или светлой темы или для людей, предпочитающих ограничение анимаций на экране.
В первом случае мы заменим картинку дня на картинку ночи, а во втором — гифку на фотографию.
В общем, смотрим иллюстрацию и кодпен: https://codepen.io/alinaki/pen/wvROeaR
И на закуску, универсальный компонент для отзывчивых изображений, Unpic: https://unpic.pics/img/learn/
#picture #media #theme
#такое дня
Дежурное напоминание о том, что перфекционизм убивает мотивацию и не боги горшки обжигают.
Откуда скриншот? Да из типов для React: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1258
Не то чтобы я вам предлагал везде писать any, но уж тормозить разработку и быть party pooper-ом TypeScript не должен.
P. S. обновил ссылку до React 18. До сих пор там.
#ts #react #бородач
Важная часть процесса трудоустройства в IT — обсуждение вашей будущей зарплаты. И тут многие IT-шники сталкиваются с проблемами:
— страх просить много
— разочарование, что согласился на меньшее
— отсутствие гибкости в процессе переговоров
Решению этих проблем за счёт навыков переговоров о зарплате посвящён канал "Выше вилки". Его авторы: Илья Шишков, Паша Филонов и Настя Авдонина.
У Ильи и Паши на двоих более 20 лет опыта работы в таких компаниях как Яндекс, Лаборатория Касперского и Positive Technologies. На протяжении своей карьеры они прошли и провели десятки собеседований, поэтому знают процесс обсуждения оффера с обеих сторон.
Настя — HR, 7 лет занимается подбором и развитием команд в IT и только за 2022 год провела более 100 переговоров о зарплате.
В своём канале ребята
— делятся своим опытом переговоров об оффере
— показывают примеры эффективных переговоров
— дают инструменты, которые помогают уверенно вести переговоры о зарплате и получать офферы выше вилки 😉