• Почему много HTTP запросов - это плохо?

    Griboks
    @Griboks
    Это всеобщее заблуждение, пораждённое веб-макаками. Мол, нафига нам что-то оптимизировать и вообще думать о низкоуровневых вещах, когда можно тупо забандлить всё в один файл.

    Нужно управлять ресурсами, оптимизировать их и кешировать. Правда в том, что много запросов - это хорошо, но они должны быть построены определённым образом и синхронизированы между собой. Если кратко, то:
    1) загружается бандл с базовыми ресурсами, необходимыми для отображения страницы
    2,3,4) параллельно в фоне асинхронно загружаются вспомогательные бандлы для красоты и хотелок дизайнеров+маркетологов+шпионов+рекламы * (10 мб на страницу, ага, ага, верю)
    5) некоторые бандлы загружаются по требованию

    * все хотелки в идеале следует послать "на доработку", но есть риск увольнения

    Техчасть
    Запрос даёт оверхед, читайте + 0,3 секунды к времени загрузки страницы. 10 запросов = +3с, что уменьшает вероятность удержания пользователя. http2, ws и иже с ними дают оверхед не на отдельный запрос, а на целый бндл за раз, т.е. 10 запросов = +0,3 с.
    Браузер рендерит страницу после загрузки, т.е. эти ваши +3с превращаются в +10 с с учётом динамической мишуры и прочих гениальный идей программистов, которые не в курсе про механику работы браузера.
    Решение: грузить основной бандл через http2 → рендерить → грузить остальное, не мешая наслаждаться очередным шедевром сайтостроения пользователю
    Ответ написан
    3 комментария
  • Styled components или БЭМ?

    Zraza
    @Zraza
    Помог ответ? Отметь решением!
    Styled Components довольно тяжелай в плане рантайма и так себе влияет на скорость загрузки/работы сайта (если это важно)
    scss/бэм - неудобно увязывать с интерактивом на js, да и вообще нейминг перегруженный для компонентного подхода
    css modules кажутся неплохим компромиссом в этом случае

    Вот тут есть годное сравнение современных подходов css-in-js - выбери свой
    https://github.com/andreipfeiffer/css-in-js
    Ответ написан
    Комментировать
  • Почему clearTimeout не сбрасывает таймер?

    Stalker_RED
    @Stalker_RED
    Вы здесь в вопросе не указали, но в демке на jsfiddle видно, что этот ваш let timerId находится внутри mousemove
    При движении мыши mousemove срабатывает очень много раз, и при каждом срабатывании заново создается переменная timerId и пересоздаются обработчики клика.
    Короче - архитектура ни к черту :)
    Создайте ОДНУ переменную let timerId, повесьте ОДИН обработчик клика, и уже после клика определяйте левый он или правый.

    И на будущее - вместо onload и onclick лучше использовать addEventLitener('click', ...)
    Да, писанины чуть больше, но при попытке написать еще один onload он у вас перетрет предыдущий, а addEventListener можно навесить много раз.
    Ответ написан
    Комментировать
  • Как правильно обратиться в CSS к внутреннему тегу иконки svg?

    DanArst
    @DanArst Куратор тега CSS
    Гриффиндор в моде при любой погоде!
    У вас один мелкий недочет: вы обращаетесь к svg, будто это дочерний элемент инпута с классом form-control. Синтаксис должен быть такой:
    .form-control:focus + .account__icon g {
      opacity: 1;
    }
    Ответ написан
    1 комментарий
  • Цель - WEB Full-stack. Сносный ли план обучения для новичка?

    @bestann
    Я училась хорошо, но из знаний тебе действительно понадобится математика (развитое логическое мышление) + английский, это отмечено правильно. В остальном много лишнего и уводящего не в ту степь. Работала в телефонии, но тоже пришлось перейти в DevOps, т.к. нет перспектив. В итоге по жизни приходилось учить кучу всего НЕНУЖНОГО (например разные телефонные станции, на что ушло много времени). Если бы сразу удалось на Linux устроиться, не потеряла бы 15 лет. Поэтому пишу тебе о том,что действительно понадобится. Не трать время не ненужное, и так учить надо ОЧЕНЬ МНОГО. Нужен широкий кругозор.

    Установи дома операционную систему Pop!_OS (на основе Ubuntu) и привыкай работать в Linux. Поставь там qemu, kvm, git, ansible, docker, docker-compose. Тебе будет достаточно виртуальных машин для изучения материала. Ansible на самой машине как контрольная управляющая нода, а настраивать им виртуалки.

    Поставь VSCode Insiders Edition. В нем хорошо работать с кодом. Там плагинов много. И для редактирования yml файлов Ansible, Kubernetes), для Dockerfile, и для программирования потом пригодится.

    Поставь Obsidian. И пиши всю документацию там, собирай там все свои знания! Приучай себя делать конспекты и переводы. Формат написания - Markdown, как раз тот, в котором программисты README.md пишут. https://obsidian.md/ (ставится на разные ОС)

    Чтобы не учить лишнее, пишу, что учить:
    Хорошо знать Linux - Уильям Шоттс - Ок, найди книгу RHCSA8 Sander van Vugt (даже на русском есть,думаю, умеешь искать), подготовься и сдай экзамен RHCSA, дает хорошую базу по Linux. Также есть его видеокурсы, я по ним готовилась. (тоже достанешь). Второй хороший автор Andrew Mallet. Практикуйся на виртуалках CentOS8 (у них проблема с поддержкой с нг, но можешь и нестабильный релиз использовать,тебе же не в продакшн). За рубежом сейчас альтернатива — Rocky Linux. На виртуалках посмотришь как работать с менеджером пакетов yum/dnf, на Pop!_OS - c apt.
    На русском по Linux курсы Кирилла Семаева на Youtube.

    Ansible — управление конфигурациями. Подготовка к экзамену RHCE8 (он после RHCSA), те же авторы (книги есть). У Andrew Mallet досконально разбирается Ansible, можно одновременно с Linux учить,потому что он там и линуксовые команды grep и прочие использует для анализа файлов конфигурации. Очень хороша родная документация на сайте Ansible. Также качай примеры ролей на Ansible Galaxy.
    На русском курсы Астахова на Youtube.

    Git — тут что найдешь. Он есть в составе Kubernetes База от Слерм, материалов достаточно. Цикл статей почитай тут https://css-tricks.com/creating-the-perfect-commit..., 7 и 8 часть скоро выложат. Но для начала поищи видеокурсы на русском (все есть). Надо видео посмотреть, чтоб нагляднее было, потому что сначала непонятно как это ты работаешь вроде в одной папке, но можешь находиться в разных ветках.

    Gitlab — Как вариант завести аккаунт на Gitlab.com и там пробовать. И смотри файлы .giltab-ci.yml и сопутствующие включаемые файлы через include самого Gitlab. Узнай как включать переменные, якоря, extends, needs, правила rules, needs (кстати сейчас можно без stage только через needs), разницу между кэшами и артефактами.
    Jenkins, teamcity используется, но Gitlab у нас чаще... Учи то что чаще используется. Ты не сможешь все инструменты освоить физически. Как устроишься, будешь осваивать имеющееся на работе.

    Docker — так же можешь изучить дома. Курсов хватает. Также попробуй в docker-compose запустить несколько контейнеров.

    Также ты должен знать хотя бы как устанавливать MySQL (про другие бд потом можно расширить), добавлять базы, бэкапить, заводить пользователей, давать права.

    Попробуй установить Nginx + php-fpm + mysql (или MariaDB) - например, чтоб заработала википедия простая BookStack. Локально пропиши имя сайта и проверь как работает, бэкапь базу, потом все удали и восстанови. https://www.bookstackapp.com/

    Kubernetes — сложно без базы указанной выше, но можешь подписаться на youtube канал Слерма,у них же есть периодически бесплатные курсы с возможностью практики. Дома можно только minikube, если ресурсов мало. Это факультативно, даже первые 4 пункта.

    По языкам программирования. Хотя бы освой bash в Linux. Python или Go — можно намного позже, это уже для программистов.Для тебя это будет плюсом.но в довесок. Иначе ты до профессии девопса будешь долго идти, а вернее до пенсии)) Сейчас спрос очень большой!!!

    Итак, резюмируя: Linux (+bash), Ansible, Docker, git —must have, Gitlab, SQL - желательно. Сети — очень зависит от работы. Главное, понимать что такое ip-адреса, dns, маска, шлюз, понимать как настраивать файрвол и сетевые интерфейсы в Linux, понимать что включить (какой параметр), чтобы Linux начал маршрутизировать трафик.
    Kubernetes, Terraform — это уже уровнем выше.

    Далее штудируешь вопросы к собеседованиям (тоже есть в интеренете),причем некоторые вопросы особенно часто задают на собесах (сама недавно собесы проходила). Проходишь 10-15 собеседований и прокачиваешься, записывай все задаваемые вопросы и готовься после каждого собеса к следующему. Могут дать и тестовое задание, если на джуна. Попроси время на выполнение.

    Тут расти и расти до бесконечности.

    Извини за нескромный вопрос: почему ты в 22 года только на 1 курсе колледжа заочно? Это даже не вуз.
    И что за краткий курс школьной математики? Ты в школе не учился что ли?
    DevOps — это непросто, поэтому надо хорошо понимать, какая у тебя база, потянешь ли ты.

    UDP. Только увидела.
    Если цель не DevOps, а web fullstack, то может твой план подойдет больше. Но тоже надо иметь ввиду, что FullStack — это много. Иди сначала фронтенд-разработчиком. Если хочешь учит востребованное, то JavaScript, для фронденда фреймфорк vue.js или react. Если хочешь быть бэком, надо уже хорошо знать базы данных помимо самого языка программирования. Из популярных так же JavaScript (node.js). Python и Go так же популярны. И если уж учить, то Go, а не C#.
    Ответ написан
    7 комментариев
  • Как учиться дизайну самостоятельно?

    tolfy
    @tolfy
    Фирменный стиль
    offtop: UI/UX
    Совет. Воспитай в себе тестировочного персонажа. Желательно, чтобы это был:
    • пожилой человек, слабо знакомый с интернетом и его "стандартными" UI
    • спешащий и "затраханный" юзер, уставший от нашествия "интересных решений" в UI

    Свои решения проводи через проверку этим персонажем.

    Приглядись к сети, как много решений, понятных только самим разработчикам. Как часто удивляешься, что нужный тебе в данное время элемент хрен найдёшь сходу и он ради "красоты" загнан "куда-то там".. Считаю, UI рассчитанный на умного и не учитывающий "дурака", - ущербен. ) Следовать совету выше вначале будет тяжело, потом втягиваешься, и персонаж начинает работать в паре с мастером уже параллельно и постоянно, не сильно мешая.
    Ответ написан
    Комментировать
  • Как учиться дизайну самостоятельно?

    @Tonykark9597
    1)Сначала изучаешь теорию дизайна(цветовые сочетания, типографику, композиция, паттерны в дизайне и т.п.), теорию по UX бери из основ, например, Алан Купер "Основы проектирования взаимодействия", это классика; Якоб Нильсен "Веб-дизайн"
    2)Изучаешь инструмент для работы: FIGMA 100%, есть куча бесплатного и при этом годного контента на ютуб
    3)Развиваешь насмотренность (не просто смотри, а анализируй почему приняты были те или иные решения в дизайне) сайтов с примерами куча, беханс,аввввордс,лэндбук и т.п.
    4)Практикуешься: сначала просто перерисовываешь работы, потом пытайся соединить несколько работ в одной, потом пробуй редизайнить какие-то плохие сайты, потом можно на просторах интернета найти реальные ТЗ
    Ответ написан
    Комментировать
  • Что такое баг 4px?

    @McBernar
    4-пиксельные отступы в дизайне — это просто удобно и стало неким стандартом. Больше вариативность, чем 5px и уж тем более удобнее 10px. Изначально пришло из мобильной разработки.

    Эта сетка позволяет не идти на поводу у цифр (например, когда надо сделать отступ строго не меньше 10px, хотя визуально просится поменьше), но при этом держать стили в порядке, чтобы разработчик с ума не сошел и логика в дизайне была.

    К багу, о чем бы ни шла речь, это отношения не имеет.
    Ответ написан
    Комментировать
  • Как влиться в современную CSS версту?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Да, я уже вижу, как минут кинут ссылку на документацию по CSS3, но в том и дело, что мои знания очень обрывисты


    Ну так структурируйте свои знания. Хотя бы отсюда начните https://developer.mozilla.org/ru/docs/Learn/CSS

    Однако, это даст вам только знание инструмента, т.е. языка (языков). Методики верстки, типовые кейсы нарабатываются опытом. Разумеется есть какие-то книги. Может некоторые даже не плохи. Но они быстро устаревают.
    Тут как уже отметили путь один – мониторить интернет. Сайты типа css-triks (en) и css-live (ru), тот же хабр и прочие. Также есть отличный банк готовых решений – https://codepen.io – подпишитесь на рассылку интересностей.
    Ну и практика, практика, практика.
    Ответ написан
    Комментировать
  • Как сделать чтоб бордер кнопки горел только несколько секунд?

    YavaDev
    @YavaDev
    Ответ написан
    Комментировать
  • Как работает веб-сервер и node js в связке? Зачем нужен Nginx?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега Веб-разработка
    Самое простое - nginx отдаёт статику. На больших объёмах делать это через Ноду неэффективно.
    Посложнее - nginx позволяет управлять ходом запроса. Например, редиректить на https.
    Ещё сложнее - можно настроить nginx, чтобы он умно балансировал запросы между несколькими бэкендами и автоматом блокировал слишком частые попытки подключения.

    Nginx очень хорошо в промышленных масштабах делает определённую часть работы, связанной с http-запросом, поэтому ему эту часть работы и делегируют.
    Ответ написан
    Комментировать
  • Как сделать плавающий блок, чтобы он не выходил за границы экрана?

    NikitaTratorov
    @NikitaTratorov
    CTO
    • Если у него абсолютное позиционирование относительно body, можно указать right: 0
    • Второй вариант, вложить его в прозрачный div, растянутый на весь viewport с position: relative, тогда дочерний элемент не полезет наружу.
    • JavaScript. Вероятнее всего, на сайте со скриншота именно JS. Кстати, Popover в Bootstrap умеет подыскивать себе удобное местоположение, не уходя за границы экрана
    Ответ написан
    Комментировать
  • Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    codepen.io/anon/pen/IGrlo - не слишком красивое решение, но кросбраузерное. Еще можно поиграться с flexbox-ами что бы сделать все динамичненьким.
    Ответ написан
    1 комментарий
  • Как сделать прямоугольник с прерывающейся линией?

    Kurokq
    @Kurokq
    Наполни смыслом каждое мгновенье
    Ответ написан
    Комментировать
  • LightHouse рекомендует убрать часть неиспользованных стилей и скриптов — как это сделать?

    BormotunJedy
    @BormotunJedy
    Верстальщик
    Если при верстке используется что-то типа bootstrap, то многие стили действительно могут вообще никогда на сайте не использоваться. Однако опыт говорит, что идти на поводу у Lighthouse и PageSpeed не означает ускорить загрузку сайта. Если сайт уже устоявшийся и на нем будет ближайшее время (год) проводиться работы по стилизации, можно на все однотипные свойства объединить классы, в которых они используются. Например, вместо написания для отдельных классов свойства display: none, собрать все эти классы в одну строчку и ей придать display: none. Тогда будет обработка стилевых файлов быстрее. А разбивка одного файла стилей на несколько может сильно замедлить загрузку и PageSpeed опять будет недоволен.
    Ответ написан
    8 комментариев
  • Как, при выборе checkbox и нажатия кнопки "отправить" подсвечивались ответы?

    f3d0t
    @f3d0t
    Вот рабочий JS код. Еще замечу, что класс .right красит элемент в красный, a .false в зеленый, что выглядит не совсем логичным
    let listCheckbox = document.querySelectorAll('.i-6');
    let button = document.getElementById('btn-1');
    button.addEventListener('click', function (e) {
    for(i=0; i<listCheckbox.length; i++){
    let chekcbox = listCheckbox[i].closest('div');
          if (listCheckbox[i].checked === true && listCheckbox[i].value == 1) {
              chekcbox.classList.add("right");
              chekcbox.classList.remove("false");
          } else if (listCheckbox[i].checked === true && listCheckbox[i].value == 0) {
              chekcbox.classList.add("false");
              chekcbox.classList.remove("right");
          }
    }
    });
    Ответ написан
    3 комментария
  • Как слепить такой блок на css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как сделать этот эффект?

    RAX7
    @RAX7

    P.S. лучше конечно на канвасе такое делать.
    Ответ написан
    Комментировать
  • Почему элементы заезжают на Header?

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

    <p style="clear:both;"></p>
    Ответ написан
    Комментировать