Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
“Рецепт Счастья” — увлекательная игра в жанре «соедини предметы»! Помогите Эмили раскрыть тайны пропавшего родственника, найти сокровища и восстановить её любимое кафе.

Рецепт Счастья

Казуальные, Головоломки, Новеллы

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

CSS + IT

С этим тегом используют

HTML Программирование Верстка Javascript Web Frontend IT юмор Программист Юмор Работа Картинка с текстом Разработка Все
140 постов сначала свежее
Вопрос из ленты «Эксперты»
tablepedia
5 месяцев назад
Web-технологии

Генерация HTML файлов с помощью Excel и бесплатного OpenOffice Calc⁠⁠

Я в феврале 2025 года работаю над проектом "Генерация HTML файлов с помощью табличного редактора". Напишите, пожалуйста, в комментариях ссылки на похожие проекты. Точнее, на файл табличного редактора для генерации HTML.

[моё] Вопрос Спроси Пикабу Программа Программирование Microsoft Excel HTML Основы HTML Windows Файл Генерация Таблица Сайт IT Web Web-программирование Приложение CSS Дизайн Веб-дизайн Графический дизайн Короткопост Текст
14
maximz
maximz
5 месяцев назад

Frontend girl⁠⁠

Продолжаем делать проект на next js, разбираем структуру проекта, роутинг и создаем компоненты разной сложности

[моё] Программирование IT Сайт Приложение React CSS Javascript Frontend Видео YouTube
5
maximz
maximz
5 месяцев назад

Обычный рабочий день frontend разработчика⁠⁠

Всем привет, окунитесь в обычный рабочий день frontend разработчика. Жена пикабушника делает листинг каталога для онлайн бронирования vr игр

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

Показать полностью
[моё] Стримеры React IT Приложение Web-программирование Программирование Javascript Айтишники Сайт Frontend Разработчики Видео YouTube CSS
3
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
2
cherkalexander
cherkalexander
6 месяцев назад

Всего несколько строк CSS для плавных переходов между страницами⁠⁠

Я давно не рекомендовал ничего почитать, но эта короткая статья не оставила меня равнодушным.

"Всего несколько строк CSS для плавных переходов между страницами"

  • перевод на хабре

  • оригинал

Я много раз слышал, про View Transitions API и о том, что теперь можно настраивать анимации перехода между страницами, но никогда не пробовал.

В статье автор предлагает сделать переходы между страницами плавными с помощью одной строчки кода.

@View-transition { navigation: auto; }

Чтобы понять о чём говорит автор просто посмотрите прикреплённое видео:

  • или откройте оригинал статьи и воспроизведите видео

  • или же откройте мой блог и попробуйте перейти на одну из последних статей

В SPA приложениях также есть возможность использовать View Transitions API. Можете посмотреть демки в статье: "Введение в View Transitions API".  Анимация реализуется с помощью startViewTransition

document.startViewTransition(() => updateTheDOMSomehow());

При использовании View Transitions API происходит следующее:

  • делается снимок текущего состояния страницы

  • выполняется обновление DOM (updateTheDOMSomehow)

  • делается снимок нового состояния страницы

  • переход между этими состояниями анимируется с помощью дефолтного плавного затухания или с помощью кастомной анимации

Более сложные примеры  можно узнать отсюда:

  • The View Transitions API And Delightful UI Animations (Part 1)

  • The View Transitions API And Delightful UI Animations (Part 2)

  • Никита Дубко. По-настоящему красивые переходы средствами браузера

Для блогов на Astro:

  • Документация View Transitions в доке Astro

  • Как починить темную и светлую темы после внедрения view transitions — читать тут

Показать полностью
Программирование CSS HTML Javascript IT Разработка Видео Без звука
1
60
imctobitch
imctobitch
Норм автор
IT-юмор
Серия I'm CEO, bitch
7 месяцев назад

Опять айтишники в игры играют на работе⁠⁠

Опять айтишники в игры играют на работе IT юмор, Юмор, Разработка, Скриншот, Counter-strike, CSS, Директор, Ceo, Перепутали, IT, I`m CEO beach

👉️ Телеграм-канал | Группа VK

[моё] IT юмор Юмор Разработка Скриншот Counter-strike CSS Директор Ceo Перепутали IT I`m CEO beach
9
AlexeyPerfilev
AlexeyPerfilev
8 месяцев назад

Жизнь фронтендера: когда твой код – это искусство, а браузер – холст⁠⁠

Привет, Пикабу! Сегодня я хочу рассказать вам о захватывающем мире фронтенд-разработки. Готовы погрузиться в пучину тегов, стилей и скриптов? Поехали!

1. HTML: скелет нашего цифрового тела

Представьте, что вы скульптор, но вместо глины у вас теги. Каждый <div> – это маленькая вселенная, а <p> – повествование целой истории. А когда вы случайно забываете закрыть тег, это как забыть застегнуть ширинку – вроде работает, но что-то не так.

2. CSS: макияж для вашего сайта

CSS – это как модный журнал для вашего HTML. Хотите, чтобы ваш сайт выглядел как топ-модель на подиуме? Просто добавьте немного flexbox и grid, и вуаля! Хотя иногда CSS больше похож на игру "Угадай, почему этот элемент съехал на 2 пикселя влево".

3. JavaScript: душа вашего сайта

Если HTML – это тело, а CSS – одежда, то JavaScript – это душа вашего сайта. Именно он заставляет всё двигаться, реагировать и иногда падать с криком "Uncaught TypeError". Но когда вы наконец-то заставляете всё работать идеально, чувствуете себя настоящим волшебником!

4. Фреймворки: когда вы устали изобретать велосипед

React, Vue, Angular – выбирайте свой яд. Эти ребята обещают сделать вашу жизнь проще, и они действительно это делают... после 10 часов настройки и 100 ошибок при сборке.

5. Отладка: детективная работа 21 века

Кто сказал, что программисты не детективы? Попробуйте найти ошибку в 1000 строк кода! Это как искать иголку в стоге сена, только стог постоянно меняет форму, а иголка превращается в стог.

Заключение

Быть фронтендером – значит быть немного художником, немного волшебником и чуточку мазохистом. Но когда вы видите, как ваш код оживает в браузере, понимаете – оно того стоило!

А вы, дорогие читатели, сталкивались с миром фронтенд-разработки? Поделитесь своими историями в комментариях!

Показать полностью
[моё] IT Разработка Frontend HTML CSS Javascript Текст
5
AlexeyPerfilev
AlexeyPerfilev
9 месяцев назад

Исповедь фронтендера: Когда твой код – это комедия ошибок⁠⁠

Привет, Пикабушники! Сегодня я хочу поделиться с вами своими приключениями в мире фронтенд-разработки. Готовьтесь смеяться и плакать одновременно!

1. CSS – мой личный босс из ада

Кто сказал, что CSS прост? Это как игра "Твистер", только вместо конечностей ты двигаешь div'ы и span'ы. Один неверный ход – и твой сайт выглядит как произведение современного искусства. Абстракционизм, знаете ли.

2. JavaScript: когда твой код живет своей жизнью

Я: пишу простую функцию JavaScript: "Хм, а что если я буду работать только по четным вторникам?" Я: в панике проверяю документацию JavaScript: "Шучу! Я просто забыл закрывающую скобку. Упс!"

3. Совместимость браузеров – мой персональный квест

Разработка для разных браузеров – это как готовка для семьи с кучей аллергий. Internet Explorer – это дядя, который не ест ничего после 1995 года.

4. Фреймворки: выбери меня! Нет, меня!

React, Vue, Angular... Иногда мне кажется, что я на шоу "Холостяк", только вместо роз раздаю свое время и нервные клетки.

5. Отладка: детективная история с открытым финалом

Я – Шерлок Холмс мира кода. Мой Watson – это консоль браузера. Вместе мы расследуем загадочное исчезновение рабочего кода после "небольших изменений".

Вывод

Если вы думаете, что фронтенд – это просто красивые кнопочки и анимации, то вы глубоко заблуждаетесь. Это целый мир, полный приключений, разочарований и неожиданных открытий. Но знаете что? Я бы не променял это ни на что другое. Потому что в какой еще профессии можно почувствовать себя и художником, и детективом, и укротителем строптивых браузеров одновременно?

P.S. Если вы фронтендер и узнали себя в этом посте – добро пожаловать в клуб! У нас есть печеньки и бесконечный запас кофе.

Показать полностью
[моё] Разработка Программирование IT Frontend Javascript CSS Текст
5
Партнёрский материал Реклама
specials
specials

Как бросить курить и не сорваться: инструкция от тех, кто смог⁠⁠

Выходишь покурить на пять минут, а возвращаешься через 10 лет: с хрипом, тремя неудачными попытками бросить и пачкой мятных жвачек в кармане. Это как плохой сериал: тянется слишком долго, а финал все равно разочарует. Но выйти из этого сценария можно и даже не обязательно драматично. Мы собрали истории тех, кто боролся с зависимостью ради любимого человека, здоровья или лучшей жизни.

Как бросить курить и не сорваться: инструкция от тех, кто смог Курение, Борьба с курением, Зависимость, Telegram (ссылка), ВКонтакте (ссылка), Длиннопост

История 1 — отражение

@holoroad

Маленькая дочка почти научилась ходить и всюду телепалась за мной. Я не курил при ней. Ходил на балкон, а она, прильнув к стеклу, смотрела на меня и ждала, когда я докурю и выйду к ней. И в какой-то момент она начала повторять за мной вот эти движения. Маленький человечек, ей было года полтора или два, прикладывала воображаемую сигарету к губам, а потом делала вид, что выпускает дым. И весело так на меня смотрела, сквозь стекло балконной двери. Ей нравилось все, что со мной связано, и она подражала всем моим действиям. Я курил уже двадцать лет и, конечно, делал множество попыток бросить до этого. Но в этот раз у меня в первый раз появилась по-настоящему важная причина бросить. Это важно для человека, который безгранично мне доверяет. С тех пор прошло почти десять лет, в течение которых я не сделал ни одной затяжки.

Решение бросить курить — одно из лучших, которое вы можете принять для своего здоровья, будущего и близких. Но справиться с зависимостью только потому, что «это вредно» будет тяжело. А вот если хотите не задыхаться, поднимаясь по лестнице, или волнуетесь за своего ребенка, которые вдыхает табачный дым, — уже другое дело.

Сформулируйте, что для вас значит отказ от никотина. Это может быть желание прожить дольше, избавиться от проблем со здоровьем, выглядеть моложе, сэкономить деньги или защитить близких от пассивного курения. Напоминание об этой причине повесьте на видное место.

История 2 — список

@maxneb

Беременность жены, рождение ребенка, здоровье, деньги — ничего не было веским поводом бросить окончательно. Постоянно срывался. Помогло составить список, что теряю и что получаю от сигарет, и понимание, что хотя бы одна затяжка — и все насмарку: пару месяцев буду курить. Только список и его осознание. Для каждого он свой. И постоянное обращение к нему. После составления списка курил еще. Но он как заноза висел в голове с вопросом «зачем?»... Так, что-то щелкнуло и сейчас не тянет. Иногда тянет физически, но осознание бесполезности курения сразу глушит позывы. Полгода, полет нормальный...

Бросать на авось — идея, которая подойдет не всем. Нужно понимать, что делать в трудные моменты:

  • Определите дату отказа. Подготовьтесь морально, уберите сигареты, зажигалки, пепельницы.

  • Замените привычки. Сигарету в руках можно заменить орешками, палочками морковки, жвачкой или даже кубиком льда.

  • Займите время. Вспомните, чем вы любили заниматься: спорт, хобби, прогулки.

  • Планируйте, что делать при тяге. Она длится всего 3–5 минут. Дыхательные практики или звонок другу помогут пережить сильное желание закурить.

  • Откажитесь от «наградных сигарет». Одна затяжка и вы откатитесь назад.

Можно бросить резко, «с понедельника», или постепенно, снижая количество сигарет до нуля. Главное — определиться и не отступать.

История 3 — переключение

@Spaka

45 лет, стаж 30. Пытался завязать много раз, потом понял, что после каждой попытки бросить, курить начинаешь больше. Как ребенок, которому не дают вкусняшку, а она случайно попала ему в руки. Из чего мозг сделал вывод: не уверен — не бросай. Потом стал замечать, что организм уже стал сам просить перестать курить. По утрам было очень неприятно во рту, удовольствие после сигареты стало короче, а негатив, приходящий следом, ощутимее: неприятные ощущения в горле, боли миндалин, страх схватить онкодиагноз. Хотя врачи говорили, что все ок, в голове-то гоняешь мысли. Я решил попробовать обмануть сам себя. Не делать из процесса отказа какого-то события. Бросить так, как будто это и должно было произойти, но ты не знаешь когда. Про себя помолился, как сумел, и попросил помощи, хитро прищурил глаз и в момент, когда забыл купить про запас (оставалась пара штук в пачке), просто перестал курить. Мне теперь даже странно, как я раньше это делал. Так и живу почти два года. Кстати, раньше в момент завязки курящих ненавидел, дым был очень противен, до тошноты. Теперь все равно. Присоединяйтесь ;)

Есть несколько стратегий отказа от курения:

  • Резкий. Эффективный и решительный подход.

  • Постепенный. Сначала — меньше сигарет, потом — меньше затяжек. И так до нуля.

  • Психологическая замена. Каждая сигарета — это ритуал. Найдите для каждого из них «здоровую замену».

  • Медикаментозная терапия. При сильной зависимости врач может порекомендовать никотинозаместительную терапию (пластыри, таблетки, жвачки) или препараты, которые помогают справиться с синдромом отмены. Но любые лекарства принимаются только по рекомендации специалиста.

Каждый, кто хочет оставить зависимость в прошлом, может обратиться в центры здоровья, которые работают при поддержке нацпроекта «Продолжительная и активная жизнь», и получить необходимую помощь специалистов. Адреса доступны на официальном портале Минздрава России о здоровье: takzdorovo.ru. Также можно позвонить на горячую линию по отказу от зависимостей 8 800 200-0-200.

История 4 — форма

Аноним

Курила электронки 2 года как замену обычным сигаретам. Думала, что это не так дорого, не так вредно да и для девушки вроде более привлекательно: не пахнут волосы и руки. А потом решила привести свое тело в форму. Стала ходить в зал и поняла, что задыхаюсь на первом же упражнении, хотя женщины гораздо старше меня бодрячком. Было очень тяжело слезть. Друзья советовали заменять сигаретами. А потом уехала в отпуск в страну, где нельзя покупать электронки, отвлеклась, и после возвращения уже не тянуло. Даже на тусовках, где все дымят.

За модными гаджетами и фруктовыми ароматами скрывается химическая бомба, разрушающая организм быстрее, чем обычные сигареты. Электронные сигареты активно продвигаются производителями как «безопасная» альтернатива сигаретам. Но курение вейпа может обернуться серьезными проблемами: от кашля и одышки до поражения сосудов и дыхательных путей.

«Особую тревогу вызывает рост потребления табачных изделий и электронных сигарет. Согласно исследованию, проведенному в нашем Центре, 36,8% курильщиков потребляют одновременно и табак, и электронные сигареты. Среди молодежи в возрасте 25-39 лет этот показатель превышает 45%. Электронные никотиносодержащие и безникотиновые устройства поражают сердце, сосуды, дыхательную систему и ДНК организма не менее пагубно, чем традиционные сигареты, а в ряде случаев способны вызывать острые состояния, включая сосудистые поражения и летальные исходы» – рассказывает руководитель Центра профилактики и контроля потребления табака НМИЦ терапии и профилактической медицины Минздрава России Маринэ Гамбарян.

История 5 — пари

@kernima

Вроде не было никаких серьезных предпосылок, чтобы бросить. Да и чтобы начать: просто все вокруг курили, думал, это сейчас тренд. А потом как-то сидели в баре и решили поспорить с некурящим другом. Он затирал, что моя жизнь из-за электронки катится ко дну, я — доказывал, что это всего лишь маленькая шалость. В общем поспорили на пять тысяч. Чтобы было легче и можно было отвлечься, начал бегать по утрам. Друг проиграл, а я возвращаться к курению не стал. Вдруг снова у еды появился вкус, я начал высыпаться и больше не устаю на втором лестничном проеме. Короче, советую!))

Сульфат никотина, один из компонентов электронных сигарет, раньше использовали как пестицид, но запретили из-за высокой токсичности. Жидкость для «электронок» содержит и опасные химикаты вроде пропиленгликоля, ацетальдегида и акролеина — промышленных веществ, способных вызывать воспаления, поражения органов и мутации клеток. Ароматизаторы, создающие иллюзию безвредности, на деле могут привести к более тяжелой интоксикации, чем при курении сигарет. А еще вейпы содержат не природный, а синтетический никотин — солевой. Он быстрее всасывается, дольше выводится и вызывает зависимость стремительнее.

Когда организм отвыкает от никотина, бывает нелегко: люди становятся раздражительным и нервозными, быстро устают, возникают сухость во рту, кашель, трудности с концентрацией. Важную роль в борьбе с этими симптомами играет питание. В рацион стоит включить овощи, фрукты, орехи, семечки. Клетчатка способствует очищению организма от токсинов. Важно питаться сбалансировано: с достаточным количеством белков, жиров, углеводов и витаминов. Лучше временно исключить продукты, усиливающие удовольствие от табака (например, мясо), а также отказаться от алкоголя, кофе и крепкого чая. Они могут спровоцировать желание закурить. А вот большое количество воды, травяных чаев и настоев облегчит очищение организма и поможет справиться с сухостью во рту.

История 6 — связь

Аноним

Устал курить, понял, что мне это мешает заниматься спортом и в целом комфортно себя чувствовать. Пошел через ассоциации: покурил во время головной боли, и потом через самовнушение дал себе установку, что голова болела от курения. Звучит странно, конечно, но это сработало. Никотиновую зависимость снижал постепенно через редкое курение кальяна (2-3 раза в неделю с последующим уменьшением).

Чтобы добиться успеха в отказе от курения, стоит подготовиться. Обязательно расскажите о своем решении друзьям и близким — поддержка со стороны очень важна. Если вы уже предпринимали попытки бросить, вспомните, что тогда пошло не так, и постарайтесь не повторять этих ошибок.

Разберитесь, что именно тянет вас к сигарете: скука, стресс, привычка? Когда вы это осознаете, будет легче подобрать альтернативные действия — прогулку, книгу, разговор с близким. Учитесь распознавать моменты, когда особенно хочется закурить, и переключаться на что-то другое. Можно подключиться к программам или группам поддержки — это поможет не сдаваться. И главное: уберите из дома все сигареты.

История 7 — вершина

Аноним

Поднимался с сыном по Пушкинской тропе на гору Железная. Мне лет сорок пять было, идем общаемся, сын бегает туда-сюда. Ну идем короче, а сзади нас догоняет семейная пара, мирно о чем-то щебеча между собой. Догнали и обходят. И так спокойно удаляются… Все бы ничего, но им лет по шестьдесят, если не больше. Я попробовал в их темпе, но задыхаться стал. Короче, поднялся я на гору, спустился, смял пачку и выкинул в мусорную урну. Вот уже 13 лет не курю. Стаж 27 лет.

Курение — это быстро развивающаяся зависимость, схожая по механизму с наркотической. Никотин воздействует на мозг, вызывая кратковременное улучшение настроения, за которым следует упадок сил и потребность в новой дозе. Со временем формируется толерантность, и прежние негативные реакции организма на табак ослабевают. Физическая зависимость сочетается с психологической: сигарета начинает ассоциироваться с отдыхом, решением задач, рутиной. Курение укрепляется поведенческими шаблонами: кофе, вождение, паузы на работе уже не мыслимы без сигареты.


Каждый, кто пытался избавиться от никотиновой зависимости, знает, как это тяжело. Ломка, раздражительность, навязчивые мысли. Даже при переходе на вейпы, иллюзия «меньшего вреда» быстро развеивается: химические коктейли из ароматических смесей также бьют по легким, сосудам и всему организму.

Хорошая новость в том, что вы не одни. В сообществе «Давай бросать» (ВКонтакте и мессенджере Telegram), который работает при поддержке нацпроекта «Продолжительная и активная жизнь» знают, каково бороться с триггерами, искать замену привычке и удерживать себя от срыва. Здесь делятся историями тех, кто смог, поддерживают тех, кто только начал, и помогают разобраться в главном: как пережить отказ без мучений.

Социальная реклама. АНО «Национальные приоритеты», ИНН: 9704007633

Показать полностью
Курение Борьба с курением Зависимость Telegram (ссылка) ВКонтакте (ссылка) Длиннопост
3
cherkalexander
cherkalexander
9 месяцев назад

Соседние селекторы в CSS⁠⁠

Сегодня утром прилетает баг - у элемента не виден горизонтальный скрол. Случилось это из-за новой фичи - появился новый компонент, из-за чего соседний немного съехал и скрол ушёл за пределы экрана.

Тут я подумал, что в первый раз в жизни смогу использовать "Родственные селекторы" ~, чтобы пофиксить стили если оба элемента отображаются на странице:

.new-feature-element ~ .element-with-scroll {
// тут фиксим стили, они применяются к .element-with-scroll
}



Посмотрел на разметку, понял что .element-with-scroll всегда идёт непосредственно после .new-feature-element поэтому можно поменять на +:


.new-feature-element + .element-with-scroll {
// тут фиксим стили, они применяются к .element-with-scroll
}


Основные различия + и ~:

- + выбирает только один элемент, который непосредственно следует за первым элементом.
- ~ выбирает все элементы, которые следуют за первым элементом, но не обязательно сразу за ним.

Посмотрел на разметку ещё раз и понял, что элементы видны всегда, а не по условию, поэтому просто пофиксил стили для .element-with-scroll без всяких соседних селекторов, но хоть потренировался.

https://t.me/cherkashindev/226

UPD:

cherkashin.dev

cherkashin.dev

cherkashin.dev

Показать полностью
[моё] CSS Программирование IT HTML Текст
3
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии