- 21
- 39 308
Антон Рихновец | Разработка сайтов
เข้าร่วมเมื่อ 5 ก.ค. 2012
Почему не обновляются стили на сайте. Кеширование CSS и JS
Внесли изменения в стили, опубликовали, но на сайте ничего не поменялось? Разбираемся в причинах за 10 минут.
t.me/+WLMcK4ttYiA5NWIy - делюсь своим опытом в подкастах и коротких заметках. Публикую ссылки на сервисы, которыми пользуюсь сам.
t.me/+F6QqRR4HcfUzYWVi - отбираю анимации для сайтов и публикую готовый код 🤫 Выбирайте анимацию и копируйте код на свой сайт.
t.me/+WLMcK4ttYiA5NWIy - делюсь своим опытом в подкастах и коротких заметках. Публикую ссылки на сервисы, которыми пользуюсь сам.
t.me/+F6QqRR4HcfUzYWVi - отбираю анимации для сайтов и публикую готовый код 🤫 Выбирайте анимацию и копируйте код на свой сайт.
มุมมอง: 118
วีดีโอ
Не помещается iframe на страницу. Что делать?
มุมมอง 28810 หลายเดือนก่อน
Рассказываю про то, как аккуратно разместить iframe на странице с сохранением пропорций на мобильных устройствах и ПК. t.me/ WLMcK4ttYiA5NWIy - делюсь своим опытом в подкастах и коротких заметках. Публикую ссылки на сервисы, которыми пользуюсь сам. t.me/ F6QqRR4HcfUzYWVi - отбираю анимации для сайтов и публикую готовый код 🤫 Выбирайте анимацию и копируйте код на свой сайт.
JS-плагины и документация. Что важно знать.
มุมมอง 9810 หลายเดือนก่อน
JS-плагины и документация. Что важно знать.
Прелоадеры. Как добавить анимацию загрузки на сайт
มุมมอง 550ปีที่แล้ว
Прелоадеры. Как добавить анимацию загрузки на сайт
Как добавить анимацию на сайт из codepen
มุมมอง 2.3K2 ปีที่แล้ว
Как добавить анимацию на сайт из codepen
Красивая полоса прокрутки на CSS за 5 минут
มุมมอง 3.5K3 ปีที่แล้ว
Красивая полоса прокрутки на CSS за 5 минут
ищу и не могу найти. Верстать в одном index не удобно, хочется на компоненты все разбить. С стилями и скриптам понятно, а с html нет...
@@efremandre в этом случае помогут шаблонизаторы. Например, mustache для php. Либо использовать vue / react и с их помощью разбивать страницу на компоненты.
Вы способны экран с кодом увеличивать или нет? Вы можете делать исходники и выкладывать их, а в исходниках создавать файл с Подробным ТЗ?
@@КонстантинСмирнов-ъ4ж 🫡
@@one-zero-dev Интересный ответ!?
Здравствуйте, мы с вами сможешь сделать мини приложение для Телеграмм? Ищу друга программиста на реализацию большого проекта
@@DjStepanovich здравствуйте, напишите мне в ТГ: @antony_web
Ну тут идёт уже тотальнейшая подмена понятий. То что вы сейчас описали это ИТ-специалист, человек связанный в целом с информационными технологиями и информационными продуктами/услугами, а программист - узконаправленная специальность, ориентируемая на написании как можно более оптимального кода для вашего программного продукта
Ищем программиста! Он должен уметь сделать 3д дизайн, сплясать под балалайку и отвезти шефа на работу и с работы! 😂😂😂😂😂😂😂😂😂
А потом на доделывание забивают болт. Делать сразу нормально , релиз можно перенести . А на презентации готовая работа необязательна хватит и концепта
Соглы соглы
Согласен. Сейчас работаю тим лидером в геймдев студии. Если бы я не умел работать с 3д, со всеми движками, не умел бы делать саунд дизайн и тп, то я бы не смог организовать этих балбесов. Также и их по чуть-чуть подтягиваю, чтобы они активнее сотрудничали во время обучения новому
@@scalle6220 дааа, очень понимаю )) Я фронтендер, и не зная основ бекенда, мне было бы сложнее взаимодействовать с коллегами-бекендерами 😬
а можно ссылку на гит репу?
Репозиторий отсутствует. Решил перезаписать полную версию видео с версткой макета. Там будет ссылка на гитхаб. Дам анонс здесь и в своем ТГ-канале t.me/frontend_cheat
Вот несколько плюсов навыка оценки времени: * на работе тебе доверяют серьезные задачи, в которых важно точное соблюдение сроков. Потому ты уже несколько раз доказал: если пообещал сделать к какой-то дате, то так и будет. Тебя больше ценят = ты можешь зарабатывать больше денег; * на фрилансе тебя любят клиенты, потому что ты всегда делаешь их задачи к сроку, к которому пообещал. А еще ты не работаешь в убыток для себя: грамотно оценил сроки и взял за работу достойную оплату. Как тренировать навык? * выбери задачу и включи секундомер; * не отвлекайся во время выполнения задачи. А если отвлекся, то ставь секундомер на паузу; * запомни/запиши время, которое потребовалось на выполнение задачи; * повтори эти шаги на других задачах. Помни про кривую обучения: задачи, которые ты не делал раньше, в будущем станут занимать меньше времени, чем в первый раз. И при оценке сроков можно ориентироваться на последнее время, которое ты посчитал. Чем больше фиксируешь фактическое время на выполнение работы, тем более точно получится в будущем оценить время на похожую задачу. Здесь обучающие видео для программистов, которые хотят зарабатывать на веб-разработке. Подписывайся.
Тесты пиши, не страдай хуйней
😂😂😂ск..... Ааа я один думал что он говорит про дружка😅😅😅
Я второй мой брат
Я первый комм?
🔥🔥🔥
А общий wrapper макета тоже нужно ограничивать ?
Зависит от ситуации. Обычно достаточно ограничить только контейнер
Не знаю уровень поддержки клампа на момент выхода видео, но в конкретном примере не нужен ни 1 медиа запрос
Благодарю за видео. Есть вопрос по разрыву контейнера: Не проще было просто применить класс "container" к нужным блокам, а не писать лишние строки кода? Ведь по сути разрывом вы применили класс "container" к первому идущему по порядку блоку и последнему. Результат тот же.
В самом простом случае, да, можно просто добавить класс container к блокам, которые нужно ограничить. Но в реальных проектах часто встречаются блоки, у которых задан свой padding, и выравнивание через margin. Предположим, что у нас есть блок с классом form, у него есть свой padding. Ещё блок должен быть выровнен по левому краю и ограничен по ширине (max-width: 400px). Тогда margin и padding, которые заданы для общего класса контейнер будут конфликтовать с padding и margin, которые задали для класса form. Всё потому, что класс container и класс form заданы для одного блока. Поэтому обычно разделяем одно от другого: создаем блок-контейнер, а внутрь него кладём блоки, которые нужно ограничить.
Бро, давай почаще таких роликов
А если есть библиотеки?
У каждого кода в Codepen есть настройки, в которые можно зайти и посмотреть список библиотек для CSS и JS: disk.yandex.ru/i/2d6gUjudGG6Htw . Далее остаётся подключить библиотеки в свой проект в такой же последовательности. Особенно это касается JS библиотек. С помощью атрибута defer для тегов script можно добиться нужной последовательности загрузки JS-файлов. Вот пример анимации на Codepen и проекта, в который я ее перенес: codepen.io/ignatovkn22/pen/XWoLdVP drive.google.com/file/d/1ar4Z5KD_G_y2qRQpRJlSKTVBPUPz8LQg/view?usp=sharing
Не работает
хотелось бы разобраться
@@ignatov2552 можем разобрать, жду в Telegram: @antony_web
а как js скопировать ?
JS можно скопировать панели JS. На видео она в самом правом краю в свернутом виде: disk.yandex.ru/i/nfup6QHXuhJRAA
Привет, а почему прелоадер страницы нужно удалять через js, а не прописать для класса display:none?
Хороший вопрос ) Я показал один способ работы с прелоадером в списке, когда кнопка находится в том же контейнере, что и элементы списка. Кнопку удалял, т.к. контент, который прилетает с сервера, добавляется в конец списка. Если не удалять, то прелоадер оказывался бы где-то в середине/начале списка. Но как вариант - можно было просто перемещать прелоадер в самый конец списка после того, как элементы от сервера попадали в конец списка. В общем, вариантов масса, на вкус и цвет.
Антон, хорош) Я посмотрел и прям слезу ностальгии пустил. Вторая часть урока была более интересной, я такое не делал. А в каком редакторе ты код пишешь? Нынче в сублиме уже не работают?)
Спасибо ) В сублиме, наверное, только конфиги какие-то правят )) Здесь код пишу в VSCode. Но PHP Storm / Web Storm ещё круче, это уже прям IDE с удобными фичами
Хоть тут знакомые лица
Можно было сделать видео с простой версткой только html и css с подробными объяснениями, а потом уже видео где БЭМ, Sass и т.д и шрифт нужно увеличить слишком мелко
Лайк и подписка сходу..Продолжай не забрасывай канал
В Firefox данные свойства работать не будут! С помощью CSS можно лишь немного стилизовать скролл с помощью свойств scrollbar-color: #6969dd #e0e0e0; scrollbar-width: thin; Подробнее можно почитать здесь: ishadeed.com/article/custom-scrollbars-css/
Здравствуйте. Будьте добры, подскажите причину того, почему у мея перестали работать правила css: сolor, background, backgroung-color, все отвечающие за цвета.Пользуюсь VS Code. Нигде не могу найти ответа. Зарание благодарю.
Здравствуйте. Отправьте ссылку на свой код, чтобы я мог его посмотреть.
Ух ты, отличное видео! А как относишься к системе Битрикс?
Большое спасибо за качественные уроки!
12:05 сначала идёт mobile-first, а потом бабах, на тебе max-width
Подержите мой смузи, я вручу этому парню награду за внимательность ))
3:50 23-27 строчки При экранах больше 768px ширина контейнера не больше 768px ?
В 23-27 строчке написано: при экранах шириной от 768px и выше, ширина контейнера будет не более 1000px
@@one-zero-dev 4:02 с 4 минут 01 секунды
@@AntonioBenderas пересмотрел. Ты прав, при экранах шириной от 768px и выше, ширина контейнера будет не более 768px. Сделал такое ограничение, чтобы на устройствах от 768px до 1279px макет контейнер не растягивался, а имел фиксированную ширину. Такой подход используют не все и не везде, скорее один из вариантов верстать контейнер.
Хочется ещё больше PRO-кейсов по сложным элементам UI, блокам карточкам, меню, ...
2:18 а есть разница между {width: 100%; max-width: 1000px;} и {max-width: 100%; width: 1000px;} ? можно max-width: 90%; чтобы били резиновые падинги
А что ты используешь, чтобы менять размер окна под разные устройства?
Вызываю панель DevTools - инструмент разработчика, который встроен прямо в браузер. В Google Chrome эта панель открывается с помощью клавиши в F12.
@@one-zero-dev Спасибо
Спасибо. Буду ждать новых видео
Благодарю за туториал, до сих пор не знал о таких фишах. Продолжайте в том же духе Антон!
thanks great
а вопрос нахера столько всего, если достаточно селектором атрибута определить классы включающие в себя контейнер. для нормального контейнера не нужно никаких медиа запросов и классов, просто ограничение по максимальной ширине, а так как контейнер это блочный элемент, то он по-умолчанию 100% ширины, дальше мы его центрируем марджином и делаем фиксированый паддинг на всю верстку, который будет отлично отображаться везде. Все это делается меньше чем за минуту и все адаптивно и надежно
cuper
Говорю тебе как Фронтенд разработчик, ты не прав. Контейнер нужен только для того, чтобы большинство сайтов, когда просматриваются на ШИРОКОМ экране, типа монитора, глаза не бегали по экрану из стороны в сторону. На планшете и мобильном устройстве, нет такой огромной ширины, чтобы это вызывало дискомфорт. Достаточно добаить дополнительный паддинг по сторонам, чтобы при пересечении порога максимальной ширины текст не упирался в границы экрана. Стандартом на современные сайты служат 2 величины 1200px и 1000px максимальная ширина контейнера, дальше, сайт сжимается с помощью медиа-запросов, так называемая резиновая или адаптивная верстка. Контейнер в них никто не вкладывается, т.к. это просто не нужно по причинам указанным выше. Все что ты написал делать можно, но зачем?
Есть проекты и "хотелки" клиентов, чтобы сайт ограничивался в ширине даже на планшетах и смартфонах. На этот случай можно применить подход, про который я рассказал. Ну а фишки, которые тут разобрал, дополнительно помогут начинающим понять пользу медиа-запросов, даже если они будут делать макеты по подходу, который описал ты. Спасибо за мнение )
@@one-zero-dev Не спорю, есть такие индивиды =)) Если для новичков выпускаешь, то сделай видео про переполнение контента в блоках, как этого избегать. Анимацию. Псевдоклассы и псевдоэлементы. Flex и Grid. =)) Делаешь хорошо, я просто с некоторым не согласен как разработчик, но опять же, будем честны, единой правильной теории нет, есть проект и результат его выполнения. А это значит идеально правых нет =)) Продолжай в том же духе, Ты делаешь хорошее дело! =))
@@АлексейСкаливенко-в3с спасибо за идеи и поддержку )
спасибо!
Есть одно но,оно очень большое.Дело в том что ,на разных медиа устройствах ,разные браузеры,и у всех этих браузеров ,по умолчанию выставлены свои стили,и мало того,уже давно,многие мобильные браузеры имеют встроенные стили для отмены стилей ,которые идут в месте сайтом.А чтоб хоть как то сохранить свои стили,есть такой файлик .access Там нужно прописывать правила ,для каких устройствах иметь отображения,так что очень геморойное дело.Хотя я еще не видел не одного сайта,которой нормально отображалось в мобильных устройствах,все с косяками).Поэтому лучше для мобилки,верстать отдельно,дабы не болела голова))
Привет. Пришли ссылку на такую верстку, интересно посмотреть на подход, который тут описан.
А можно подробнее про технологию, которая отменяет рендеринг дом и цссом и мердж их в рендер три?
чот я не въехал, а где прописаны стили для outer_container, которые типо нужно отключить, чтобы не было этих отступов
У блока с классом outer-container есть ещё один класс - container. И для этого класса заданы стили. Так вот в медиа-запросе max-width: 1279px мы переписываем стили для контейнера (отключаем ограничения, отступы). Но делаем это только для outer-container, чтобы отключить стили у одного конкретного блока. Если бы в медиа-запросе max-width: 1279px мы переписали стили для класса container, то отступы и ограничение ширины сбросились бы на всех блоках. А это не то, что нам нужно.
про контейнер я знал, а вот чтобы оно норм отображалось на мобилках. моё почтение. автор довольно крутой. теперь буду делать контайнер как у него видео респект тебе от web разраба :)
Полезное видео..с доступным обьяснением
чотко!!! Лайк от СЕООНЛИ
Антон, так держать! Продолжай заливать новые видео.
Спасибо))