
💸 Скидки до 70% для бизнеса и финансов
Ловите лучшие слоты в каналах бизнес-тематик — только до 6 апреля!
Забрать скидку

31.9

Будни разработчика
4.8
97
Интернет технологии
2.5K
82
Всё о разработке вообще и фронтенде в частности: лучшие статьи, фишки, баги браузеров и личный опыт автора
Поделиться
В избранное
1.3K
Купить рекламу в этом канале
Формат:
1/24
keyboard_arrow_down- 1/24
- 2/48
- 3/72
- 7 дней
- Репост
1 час в топе / 24 часа в ленте
Количество:
%1
keyboard_arrow_down- 1
- 2
- 3
- 4
- 5
- 8
- 10
- 15
Стоимость публикации:
local_activity
2 517.48₽2 517.48₽local_mall
0.0%
Осталось по этой цене:0
Последние посты канала
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
Вы уже видели эту офигительную анимацию лайка?
1800
06:00
01.04.2025
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
#1апреля
Вы уже видели эту офигительную анимацию лайка?
#1апреля
1800
06:00
01.04.2025
imageИзображение не доступно для предпросмотра
Станьте востребованным специалистом в SE, ML, CS или биоинформатике в магистратуре института прикладных компьютерных наук ИТМО!
Весь апрель проходят дни открытых дверей программ, среди которых корпоративные магистратуры Яндекса, VK, Альфа Банка, YADRO, Самолет. Преподаватели – разработчики IT- компаний. А еще есть возможность учиться онлайн и много проектной работы на каждой программе.
Вас ждет:
✅ Разбор особенностей поступления в 2025 году
✅ Презентация всех программ магистратуры института
✅ Ответы от руководителей, менеджеров и студентов программ на ваши вопросы
🔗 Все мероприятия пройдут онлайн, регистрируйтесь, чтобы получить ссылку
Реклама. Университет ИТМО ИНН:7813045547
Весь апрель проходят дни открытых дверей программ, среди которых корпоративные магистратуры Яндекса, VK, Альфа Банка, YADRO, Самолет. Преподаватели – разработчики IT- компаний. А еще есть возможность учиться онлайн и много проектной работы на каждой программе.
Вас ждет:
✅ Разбор особенностей поступления в 2025 году
✅ Презентация всех программ магистратуры института
✅ Ответы от руководителей, менеджеров и студентов программ на ваши вопросы
🔗 Все мероприятия пройдут онлайн, регистрируйтесь, чтобы получить ссылку
Реклама. Университет ИТМО ИНН:7813045547
695
14:33
04.04.2025
play_circleВидео недоступно для предпросмотра
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
878
09:46
04.04.2025
play_circleВидео недоступно для предпросмотра
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
1100
04:33
04.04.2025
play_circleВидео недоступно для предпросмотра
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
1100
04:33
04.04.2025
imageИзображение не доступно для предпросмотра
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
1300
15:01
03.04.2025
imageИзображение не доступно для предпросмотра
#фишка дня
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск
Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск
@modified
и — вуаля — видим все настройки, отличные от дефолтных!Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
1500
08:28
03.04.2025
play_circleВидео недоступно для предпросмотра
#новость дня
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
1600
13:09
02.04.2025
imageИзображение не доступно для предпросмотра
🧠 Коуч, которая раньше искала баги в коде, а теперь помогает находить баги в мышлении
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
1600
06:01
02.04.2025
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
Вы уже видели эту офигительную анимацию лайка?
1800
06:00
01.04.2025
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
#1апреля
Вы уже видели эту офигительную анимацию лайка?
#1апреля
1800
06:00
01.04.2025
imageИзображение не доступно для предпросмотра
Станьте востребованным специалистом в SE, ML, CS или биоинформатике в магистратуре института прикладных компьютерных наук ИТМО!
Весь апрель проходят дни открытых дверей программ, среди которых корпоративные магистратуры Яндекса, VK, Альфа Банка, YADRO, Самолет. Преподаватели – разработчики IT- компаний. А еще есть возможность учиться онлайн и много проектной работы на каждой программе.
Вас ждет:
✅ Разбор особенностей поступления в 2025 году
✅ Презентация всех программ магистратуры института
✅ Ответы от руководителей, менеджеров и студентов программ на ваши вопросы
🔗 Все мероприятия пройдут онлайн, регистрируйтесь, чтобы получить ссылку
Реклама. Университет ИТМО ИНН:7813045547
Весь апрель проходят дни открытых дверей программ, среди которых корпоративные магистратуры Яндекса, VK, Альфа Банка, YADRO, Самолет. Преподаватели – разработчики IT- компаний. А еще есть возможность учиться онлайн и много проектной работы на каждой программе.
Вас ждет:
✅ Разбор особенностей поступления в 2025 году
✅ Презентация всех программ магистратуры института
✅ Ответы от руководителей, менеджеров и студентов программ на ваши вопросы
🔗 Все мероприятия пройдут онлайн, регистрируйтесь, чтобы получить ссылку
Реклама. Университет ИТМО ИНН:7813045547
695
14:33
04.04.2025
play_circleВидео недоступно для предпросмотра
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Вы любите простыню кода в сообщениях, я знаю :)
Статья на тему: https://frontendmasters.com/blog/console-delight/
Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV
Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)
Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/
#css #svg #devtools #console #fun #бородач
878
09:46
04.04.2025
play_circleВидео недоступно для предпросмотра
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
1100
04:33
04.04.2025
play_circleВидео недоступно для предпросмотра
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
1100
04:33
04.04.2025
imageИзображение не доступно для предпросмотра
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
1300
15:01
03.04.2025
imageИзображение не доступно для предпросмотра
#фишка дня
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск
Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск
@modified
и — вуаля — видим все настройки, отличные от дефолтных!Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
1500
08:28
03.04.2025
play_circleВидео недоступно для предпросмотра
#новость дня
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
1600
13:09
02.04.2025
imageИзображение не доступно для предпросмотра
🧠 Коуч, которая раньше искала баги в коде, а теперь помогает находить баги в мышлении
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
1600
06:01
02.04.2025
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
Вы уже видели эту офигительную анимацию лайка?
1800
06:00
01.04.2025
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
#1апреля
Вы уже видели эту офигительную анимацию лайка?
#1апреля
1800
06:00
01.04.2025
close
С этим каналом часто покупают
Отзывы канала
Добавлен: Сначала новые
keyboard_arrow_down- Добавлен: Сначала новые
- Добавлен: Сначала старые
- Оценка: По убыванию
- Оценка: По возрастанию
4.8
8 отзыва за 6 мес.
Превосходно (75%) За последние 6 мес
Очень хорошо (25%) За последние 6 мес
d
**agoneknp@*****.com
на сервисе с июня 2023
21.02.202510:25
5
Высокая конверсия
Показать еще
Новинки в тематике
Лучшие в тематике
Выбрано
0
каналов на сумму:0.00₽
Подписчики:
0
Просмотры:
lock_outline
Перейти в корзинуКупить за:0.00₽
Комментарий