11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
#день_рождения дня
Сегодня День рождения не только лишь у меня, но и у HTML тегов!
29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.
И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.
Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
С Днём рождения, HTML! Ну и я :)
#html
Как проводить свое свободное время и что приносит пользу профессиональной деятельности?
Какие увлекательные моменты программист может иметь в своей жизни? Может быть, это интересные проекты, технические блоги, курсы обучения или что-то еще? Наверняка у каждого из нас есть какие-то вдохновляющие источники, которые помогли нам усовершенствовать свои профессиональные навыки.
Посещение мероприятий по разработке является одним из источников вдохновения. На таких встречах можно не только услышать отличные лекции и панельные дискуссии, но и завести новые знакомства с интересными людьми из индустрии.
Чтобы не пропустить предстоящие крутые бесплатные мероприятий по IT тематике подпишись на канал Митапочная!
Давай, давай! Мы тебя ждем! Отписаться всегда успеешь😜
#тред дня
А давно я не воровал твиты знакомил вас с крутыми тредами, которые вы могли пропустить. Если вообще, конечно, сидите в Твиттере X.
А вспомнил я о нём, потому что мы тут сениор фронта ищем к нам. Процесс отбора начался, я уже делаю ревью заданий, которые будут отправлены нашим кандидатам.
Поэтому, тема дня: как пройти алгоритмическое собеседование. Тред от Лены Анюшевой, бывшего сотрудника Google и нынешнего в Confluent.
Как всегда, ссылка на тред: https://x.com/lenka_colenka/status/1769699248780542208
И копия тут 🙂
Внимание, длиннопост! Кому-то проще будет на ThreadReader: https://threadreaderapp.com/thread/1769699248780542208.html?utm_campaign=topunroll
Но мне нужно для поиска по каналу, потому — поехали.
1. как человек, который проводил алгоритмические собесы в Google, а теперь собесит сеньоров, выкатываю тред про то, как готовиться к алгоритмическим собеседованиям!
2. да, вы слышали про leetcode, да, есть магические числа, типа прорешать 500 задач, и ты готова. Но собеседование — это сильно больше, чем написать код. Есть случаи, когда гросмейстреры на codeforces не проходили собесы, потому что они не смогли правильно коммуницировать.
3. у алгоритмического собеседования, как у сочинения на егэ, есть формат, которому я сильно рекомендую следовать. Вот хороший пример интервью по формату: https://www.youtube.com/watch?v=XKu_SEDAykw
4. Обычно интервью длится 45 или 60 минут, первые минут 5-10 интервьюер представляется, обычно говорит, как долго она работает в компании, в какой команде (запиши это!). Говорит формат интервью: мы порешаем задачку 30 или 45 минут, в конце оставим 10 минут на твои вопросы.
5. Тут есть 5 минут для тебя, чтобы кратко представиться: как зовут, где работаешь, кратко предыдущий опыт (буквально названия компаний и чем занималась). Если у тебя нет опыта прохождения собеседования на английском, порепетируй это!
6. Потом тебе формулируют задачку. Не бросайся сразу решать ее! нужно задать вопросы, даже если кажется, что тебе все понятно. Что-то типа "а что вернуть, если на вход дают пустой массив?", "а гарантируется, что массив отсортирован/не будет повторений"?
7. Обычно на leetcode дают полное условие задачи, либо в тестах просто нет невалидных входных данных. Надо показать, что ты думаешь, как будто пишешь настоящий код в прод. Даже если в итоге вы решите не обрабатывать невалидный вход, надо дать понять, что ты об этом подумала.
8. Сама приведи пример входных данных и напиши, какой результат ты ожидаешь! Типа если задача отсортировать массив, скажи, вот например на вход [10, -100, 22] результат будет [-100, 10, 22], а на вход [] результат будет []. Напечатай это, пусть будет у тебя перед глазами.
9. Теперь пришла пора... нет, не писать код!! Словами устно объяснить, что ты собираешься писать! Хорошая фраза в этом случае "first thing that comes to my mind is..." и говоришь очевидное brute-force решение. Например, для сортировки это будет bubble sort за квадрат.
10. Это дает тебе время подумать над более оптимальным решением. Это страховка на случай, если ты в итоге не придумаешь оптимальное решение (что-то ведь придумала!). Это дает интервьюеру понять, что ты понимаешь, что такое сложность алгоритмов.
11. Обычно интервьюер не просит писать код для этого решения, достаточно просто словами рассказать, как это работает. Потратишь на это от силы 5 минут, но за эти 5 минут произведешь хорошее впечатление, пока придумываешь более хорошее решение
12. У первого неоптимального решения обязательно скажи сложность работы! Типа "first thing that comes to my mind is bubble sort, but that will be quadratic. I think we can come up with a better solution". И переходим к более оптимальному решению!
13. Если ты сразу полностью придумала более оптимальное решение, это здорово! Если нет, нормально придумывать решение шаг за шагом, типа "I'd like to use priority queue here, then getting max will be cheap. But I need to think how to optimally insert data".
⚡️Выйти на стабильный доход в 150+ тысяч рублей можно всего за 3 месяца обучения в IT.
Сегодня переход в сферу IT — это не просто модный тренд, а реальная возможность изменить свою жизнь.
Ребята из онлайн-академии StepByStep в своем канале проводят бесплатный интенсив, благодаря которому можно погрузиться в мир IT и освоить самую востребованную профессию 2025 года – системный аналитик.
✅ Гарантия трудоустройства после обучения.
Переходи и бесплатно изучай для себя новое прибыльное направление: /channel/+8styZLQ1ck01OTZi
#игра дня
Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.
В принципе, можно и табом с пробелом, но не то...
Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.
Помоги Марио собрать все монетки!
Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.
https://codepen.io/t_afif/full/OJYbVWP
Делитесь вашими скриншотами с лучшим временем :)
#css #scroll #game
🍁🍁💖🌸🌸🌿🌿🌸🌸
🤩🤩🤩🤩🤩🤩🤩🤩
Мы долго думали, чем занять наших юных айтишников и выбрали самую лучшую программу по мнению наших преподавателей!
🤔Что будем делать?
✔️Создавать 3Д модели в Magica Voxel (покажите детям, они впечатлятся))
✔️Профессионально работать с Roblox studio
✔️Станем дизайнерами и создадим профессиональные постеры
✔️Сделаем свой комикс
✔️Научимся работать с нейросетями
💸Специальная стоимость для участников Канала 11997₽
Свободных мест: 7
⁉️Чтобы забронировать место, отправьте нам “интересно” в личные сообщения и мы ответим на все вопросы
Даты каникул: с 28.10 по 01.11
📍м. Алексеевская, Ул. Проспект Мира 95с1
📞+7 499 995 0543
📱НАПИСАТЬ НАМ @alekseevskayatop
#инструмент дня
Разработчики браузеров, даже те, что пишут на движке Blink от Chrome, очень хотят, чтобы их работу заметили на их продукт в итоге обратили внимание. И достигают они этого разными способами.
Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагает закладки перевод и озвучание видео в реальном времени, Opera — встраивает VPN.
А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.
И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.
Речь там, как правило, о микросекундах в худшем случае, но вдруг...
И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge
#css #performance #devtools
#расширение дня
Дал слабину и где-то в глубине кода указал any?
Воспользовался DefinitelyTyped, не проверив?
И при этом не используешь WebStorm?
Есть решение! Расширение для VS Code any-xray от Дана Вандеркама: https://marketplace.visualstudio.com/items?itemName=danvk.any-xray
Про DefinitelyTyped не шутка, всякое бывает: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b0ad06b09bd5547cf6f01a8355cbcb309d3f5e24/types/find-package-json/package-json.d.ts#L449
У React в типах, кстати, тоже.
Это не плохо само по себе, не все хотят заниматься ментальной гимнастикой там, где в целом можно спихнуть проверки на пользователя типов.
Но подсветить такие случаи, чтобы не попасть впросак — удобно.
#vscode #typescript
Таких мероприятий в Доме Культуры ещё не было!
5 ноября AvitoTech приглашает на Go Drinkup — это как митап, только без докладов. Зато с круглыми столами по трендовым темам.
В программе заявлены:
• Архитектура микросервисов на Go
• Заменит ли Rust Go?
• ORM в Go
Участие бесплатное, регистрируйтесь по ссылке
#видео дня
Внимание! Attention! Pozor! Huomio! Контент не по React на нашем канале 🤯
Решил я посмотреть на этот ваш Svelte, ведь как раз пару дней назад вышла пятая версия: https://github.com/sveltejs/svelte/releases
Ссылка на гитхаб, потому что офсайт ленятся обновлять. Ну и ещё докидывают какое-то несусветное число патчей.
Наверное, потому и не обновляют офсайт.
Ну не суть. Короче, я вам тут принёс плейлист для быстрого (сравнительно) старта в Svelte, основанный как раз на пятой версии: https://www.youtube.com/playlist?list=PLA9WiRZ-IS_zU2j29HQy478UCuHyDZQXC
Я сам видео смотрю редко, чаще пролистываю, но я точно знаю, что очень многим заходит такой формат, так что почему бы и нет.
В любом случае, есть вероятность, что скоро я выскажу своё фи. Или нет.
Есть тут свелтоводы, остались ещё? :)
#svelte #video #education
#инструмент дня
Тут на днях разработчики библиотеки для drag-n-drop react-beautiful-dnd объявили о прекращении разработки и пометили библиотеку как устаревшую.
Это значит, что теперь при попытке установить её вы получите предупреждение от npm, а 30 апреля 2025 года будет архивирован и репозиторий.
Но было бы странно, если бы всё просто растворилось в воздухе, правда же?
Поэтому, встречайте: Pragmaric Drag&Drop от Atlassian!
react-beautiful-dnd так-то тоже от Atlassian
Репозиторий: https://github.com/atlassian/pragmatic-drag-and-drop
Документация: https://atlassian.design/components/pragmatic-drag-and-drop/about
Дока прекрасная, очень советую.
Разработчики переосмыслили весь опыт, полученный при разработке react-beautiful-dnd и применили его в новом проекте.
И, прежде всего, Pragmatic D&D — не зависит от фреймворка!
Весь рендеринг на вашей стороне, а сама библиотека щедро усыпает всё событиями и нивелирует разницу имплементаций между браузерами. А ещё онв потрясающе маленькая!
И да, естественно именно Pragmatic используется в Trello, Jira и Confluence.
В общем, король умер, да здравствует король!
#ui #dnd
Новость для разработчиков (java,angular,c#) и автотестеров — до 15:00 23 октября регистрируйся на сайте One Day Offer по ссылке https://clck.ru/3DWJoe?erid=LjN8KETTT
Тебя ждет онлайн-собеседование и оффер в тот же день. Работать можно из любой точки России. ДМС, обучение и отдых — за счет компании.
Присоединяйся к топовой команде и создавай проекты, которыми можно гордиться.
Стартовал этап Квалификации на седьмой международный чемпионат по программированию YANDEX CUP’24. Призовой фонд — 12,5 млн рублей!
В этом году участники погрузятся в задачи, посвященные различным историческим эпохам и попробуют решить их с точки зрения IT. На картинках — примеры таких ситуаций: разработать систему оцифровки для бюллетеней из Древнего Рима, помочь роботам пройти лабиринт Майя или придумать систему регулировки в средневековой Венеции.
Участвовать могут все: новички и профи со всего мира, а также юниоры 14–18 лет из России. Направления — фронтенд и бэкенд, мобильная разработка, машинное обучение, аналитика и алгоритмы.
Если еще не присоединились, это ваш последний шанс: регистрируйтесь на сайте и проходите Квалификацию до 20 октября.
#фишка дня
Мы долго этого ждали! В инструментах разработчика Chrome Canary 131 появилась специальная панель с подсказками от ИИ.
Теперь вовсе необязательно все запросы к гугловому ИИ писать в консоли :)
Кликаем по Ask AI и открывается диалоговый интерфейс, в котором можно попросить ИИ описать компонент, анимировать его, узнать побольше.
Новость в блоге разработчиков: https://developer.chrome.com/docs/devtools/ai-assistance
Как нетрудно догадаться, эта штука позволяет задать вопрос по любой части сайта и получить ответ, основанный на коде проекта. И не просто уровня "какие слушатели событий навешаны на ссылку", но и, например, условия, при которых ссылка может появиться и код, который влияет на её поведение.
Ну, то есть, всё то, что при должном уровне умений может осуществить и человек, только гораздо быстрее.
По-моему, это очень круто. Ведь обучаться на чужом коде — это наше всё.
И, естественно, можно попросить ИИ исправить ваш собственный код! Пруф: https://x.com/jecfish/status/1846832374757155134
#ai #devtools
#заметка дня
Вчера не удержался и вечером всё-таки допилил приложение для параллельного просмотра субтитров, о котором писал тут: /channel/htmlshit/3204.
1. Теперь сдвиг по времени задаётся простым кликом по фразе.
2. Когда скроллишь, автоматического выделения следующей фразы не происходит, но автоскролл восстанавливается, если докрутить назад.
3. Тёмная тема! Я не понимаю, как мне это сразу в голову не пришло. В кинотеатре вчера было немного стыдно.
Теперь мне надо немного подумать о применимости.
С точки зрения изучения языка — очень хорошо, потому что теперь я могу вывести на стриминге и озвучку и субтитры на одном языке, а подглядывать в другой. Тогда надо бы добавить кнопку Паузы, заодно.
Да, есть расширения для браузеров, выводящие второй набор субтитров на тот же экран, но:
а) на телевизоре-то их нет
б) всё превращается в месиво
Плюс не оставляет идея сделать из этого приложение для смарт-часов.
Исходный код и сайт всё те же:
GitHub: https://github.com/bekharsky/subtitles
Link: https://bekharsky.github.io/subtitles/
На одном из альтернативных приложений я увидел ленту, отображающую плотность фраз на единицу времени. Как карта кода в вашем редакторе. Почему-то очень импонирует эта идея, надо попробовать.
Ну и добавить регулятор скорости воспроихзведения и точную подстройку, конечно же.
#react #movie #subtitles
#фишка дня
Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей 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 #бородач
14. Интервьюер часто дает подсказки, не игнорируй их! Помни, что интервьюер на твоей стороне, она не хочет запутать тебя, она хочет помочь! Если ты понимаешь подсказки, это плюсик тебе в collaboration и technical communication.
15. Начинай писать код только после того, как интервьер подтвердила, что все поняла в твоем алгоритме и сама предложит написать код. Если интервьюер не предлагает, явно спроcи "should we start writing code?"
16. После того, как код написан, прогони его строчка за строчкой на каких-нибудь тестовых данных. Помнишь примеры, которые мы писали на шаге 8? Вот их и используй. Без опыта на английском языке это сложно сделать, поэтому проговаривай все это вслух пока готовишься
17. Теперь обязательно расскажи время работы алгоритма!! Это очень важно, ради этого мы и писали какое-то сложное решение. Метод за методом, в комментариях рядом напиши время работы в худшем и среднем случае.
18. Для этого нужно знать время работы операций структур данных в выбранном тобой языке. Заранее погугли время работы map, vector, array в твоем языке программирования. Например std::map и std::unordered_map отличаются во времени работы, так что это очень важно!
19. В конце в идеале должно остаться несколько минут для твоих вопросов. Помнишь мы записывали информацию про интервьюера в пункте 4? Пора подсмотреть в свои тетрадку и спросить, а чем именно занимается твоя команда? Чем тебе нравится компания? Что не нравится в компании?
20. Обычно в этот момент интервьюер говорит, что время закончилось и ей пора бежать. Поблагодарить и попрощаться. Вы великолепны!
21. Бонус темы для сеньоров: каков data access pattern? что мы оптимизируем, запись или чтение? является ли твое решение thread-safe? если нет, как можно его сделать thread-safe? если время осталось, можно подумать, как распараллелить на несколько машин
Длиннопост как он есть, да 🙂
#interview
#фишка дня
Итак, верстаешь ты страницу с кучей врезок, аккордеонов, вкладок и прочих интерактивных элементов, требующих действия пользователя.
Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.
Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута hidden есть уникальное для Chrome значение until-found, говорящее само за себя.
Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found
Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom
Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.
Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.
#chrome #hidden
#инструмент дня
Устал вручную типизировать ответы от API для TypeScript или любого другого типизированного языка?
Есть решение!
https://app.quicktype.io/
Фиганул туда JSON — получил нужную структуру или описание типа, даже с тайпгардами. Уютненько!
Есть расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype
Ещё один мощный инструмент в тему дня: https://transform.tools. Одним типизированием JSON не ограничивается: можно CSS в Tailwind, а можно Flow в TypeScript.
Вот, например, если кто использует Zod — конвертор типов в схему Zod: https://transform.tools/typescript-to-zod
#json #typescript #type #бородач
#инструмент дня
Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим расти, не правда ли?
А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.
К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.
Уникальное название, согласен.
Ссылка: https://mysqlexplain.com/
Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.
Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain
То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!
Да и для обучения — бесценно.
#mysql #explain #laravel
#новость дня
Итак, JetBrains WebStorm и Rider присоединяются к программе бесплатного некоммерческого использования.
Что это означает? Ну, буквально, использовать их для обучения и вне бизнеса вообще теперь можно бесплатно и без ограничений.
Новость на офсайте: https://blog.jetbrains.com/blog/2024/10/24/webstorm-and-rider-are-now-free-for-non-commercial-use/
Стоит заметить, что до этого такую же модель лицензирования получили RustRover и Aqua (IDE заточенная под автоматическое тестирование).
У каждого свои причины использовать IDE против настройки VS Code. Для меня таковым стал прекрасный отладчик (найденные мной решения для Jest в том же VS Code требуют больше усилий для настройки, капризны и предоставляют меньше возможностей).
Но мне-то контора оплачивает лицензию.
Правда, для скачивания из РФ придётся воспользоваться VPN. Да и в целом есть вопросики.
Но рыночек порешал в нужную сторону!
#ide #webstorm
🚀 Изучай HTML и CSS с нуля! 🚀
Присоединяйтесь к нашему Telegram-каналу
[/channel/made_in_html_css]
Здесь вы найдете:
Уроки с нуля – от основ к сложным темам.
Практические задания – применяйте знания на практике.
Советы от опытных разработчиков – получайте помощь и рекомендации.
Участие в проектах – накапливайте практический опыт.
Обсуждения – делитесь успехами и задавайте вопросы.
Присоединяйтесь к Made in HTML/CSS и начните обучение уже сегодня! 🌟
#ссылка дня
Что бы я делал без своих любимых подписчиков :) Вот только что мне напомнили, что Паскуаль Витьелло, который в прошлый раз упоролся и сделал 50 разных полей ввода, сейчас снова упоролся.
И сделал 50 кнопок!
Ссылка на инпуты, если кто не помнит: /channel/htmlshit/3212
А вот и кнопки: https://originui.com/buttons
И, по всей видимости, тут произошло недопонимание и на самом-то деле кнопки и инпуты — они не для Next.js, а являются прямым расширением shadcn: https://ui.shadcn.com/
Об этом вскользь упомянуто на их гитхабе: https://github.com/origin-space/originui
В общем, вдохновляемся, учимся композиции и, возможно, даже используем!
#ui #react #shadcn
#статья дня
Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.
Шум там наложить, модельку картой нормалей увешать...
Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.
Да-да, под ретро-игры!
Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.
Очень круто выглядит.
#webgl #shader
Как Yandex Cloud делает Managed Service for Kubernetes?
В этом выпуске «Как мы делаем Yandex Cloud» обсуждаем работу над Managed Service for Kubernetes. Специальный гость — Александр Хаустов, руководитель подразделения Kubernetes в Yandex Cloud.
О чём поговорили?
👉 Как обеспечить стабильность инфраструктуры K8s, где более 4 тысяч кластеров и несколько сотен тысяч ядер?
👉 Как планировать изменения, когда поступает множество запросов от внешних и внутренних пользователей?
👉 Какие компетенции должны быть у разработчика в команде облачного Kubernetes?
#новость дня
Ubuntu — 20 лет!
https://ubuntu.com/20years
20 октября 2004 года Марк Шаттлворт — на тот момент уже весьма известный предприниматель, основавший Thawte — представил миру основанный на Debian дистрибутив Linux — Ubuntu.
В переводе с зулу — человечность.
Так вот, одним из ключевых отличий от остальных дистрибутивов было бесплатное распространение на компакт-дисках. Но не сразу, года так с 2005.
Итак, на дворе 2005 год, ты только поступил в первый раз вылетел из университета, и тут оказывается, что можно указать свой адрес на сайте и получить дистрибутив операционной системы, не скачивая его! Широкополосный доступ был ещё далеко не везде.
Собственно, что я тогда и сделал. И так потихоньку где-то с 2007 по 2018 год Ubuntu стала моей основной операционной системой. Целый новый мир! Ведь на диске ещё умещалась куча нужных программ. И офисный редактор, и IDE, и GIMP...
Потом, конечно же, я перелез на рабочий мак. А сейчас на личном ноутбуке Fedora, просто потому что.
Количество людей, которых я пересадил на Ubuntu исчисляется десятками. Естественно, моя семья и друзья :) Со многими это было легко, достаточно было показать куб.
О, вы не в курсе, что такое куб? Compiz, не? Эффекты сгорающих окон? Ну как же, смотрите: https://www.youtube.com/watch?v=OKtpnvvFlMc
Господи, вы не представляете как сложно найти видео сносного качества, это буквально следы утерянной цивилизации! Рабочие столы наигрались в эффекты и пошли немного по другому пути, сохранив суть.
В общем, праздник-праздник, пусть нынче Ubuntu и не является моим первоочередным выбором, она навсегда на моих серверах :)
#linux #ubuntu #birthday
#фишка дня
...от Никиты Голубова aka @midfilecrisis в Twitter.
В WebStorm из коробки (а значит, и в том же PhpStorm) можно получить предпросмотр стилей для выбранного класса. Включая CSS Modules.
Option-Space на macOS, или через Cmd, зависит от выбранных хоткеев. Ctrl+Shift+I на остальных системах.
Аналогичное расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
...более 6 миллионов установок, ик.
#css #webstorm #phpstorm #vscode #plugin #extension #бородач
#инструмент дня
Что такое "упоролся"?
Ну вот, например, Паскуаль Витьелло сел и сделал 50 инпутов разного рода и задач. От простых текстовых и т. н. input group, которые когда-то популяризовал Bootstrap до полей ввода OTP и банковских карт.
Вот: https://originui.com/inputs
Есть один нюанс... реализовано всё под Next.js и стилизовано Tailwind.css. Что, мягко говоря, накладывает некоторые ограничения.
Но!
Я бы не писал пост, не будь некоего "но", не правда ли? :)
Часть полей ввода реализовано при помощи вспомогательных компонентов и хуков, знать которые весьма полезно: Input OTP, React Aria, react-phone-number-input... Таким образом эти самые компоненты являют собой прекрасный пример композиции.
Использовать их или нет — решать вам. Но идея хорошая.
#next.js #react #ui #components
Yandex Cloud анонсировала сервис по аренде выделенных физических серверов
Yandex BareMetal позволит арендовать выделенные физические сервера и гибко настраивать их для размещения любого программного обеспечения, в том числе средств виртуализации. Компании уже могут подать заявку на закрытое тестирование сервиса Yandex BareMetal, которое начнется до конца 2024 года.
Yandex BareMetal можно интегрировать с сервисами облачной платформы, чтобы подключить резервное копирование, мигрировать данные, управлять доступом — и настраивать это можно через единую консоль управления, а также использовать единый центр поддержки, биллинг и систему управления доступом.
Читайте подробнее в статье
#инструмент дня
Вы только посмотрите на эту красоту!
Да, я в курсе, что компонентов для красивого прокручивания цифр у нас какое-то невероятное количество, но до сих пор не было ничего настолько универсального и простого в использовании.
Итак, встречайте: NumberFlow от Максвелла Барвиана.
GitHub: https://github.com/barvian/number-flow
Документация и демо: https://number-flow.barvian.me/
Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей.
Прекрасное.
#react #number #transition