• Как правильно обратиться в CSS к внутреннему тегу иконки svg?

    DanArst
    @DanArst
    Э, Ойboy!
    У вас один мелкий недочет: вы обращаетесь к 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 – подпишитесь на рассылку интересностей.
    Ну и практика, практика, практика.
    Ответ написан
    Комментировать
  • Как влиться в современную CSS версту?

    bestowhope
    @bestowhope
    Печатает...
    Более исчерпывающего пошагового руководства чем практика - не существует.
    Если в конкретной задаче не подходит ничего лучше чем "морально устаревшими или избыточными решениями" - значит оно и есть верное решение.

    Ну нет такой книги под названием "Тут только новые и исключительно правильные вариации вёрстки 2021 для чайников"

    База у всех одна. А если ты просто хочешь быть в теме всех новинок, то мониторь свежие/популярные фреймворки и обсасывай их.

    flexbox может уживаться с морально устаревшими или избыточными решениями

    Это не значит что это будет неправильно и к тебе домой придет фуллстак и по шапке надаёт...
    Кто-то до сих пор дальше CSS3 12го года не ушел. Кто-то все еще юзает фотошоп CS3 и ничего.
    Ответ написан
    Комментировать
  • Как сделать чтоб бордер кнопки горел только несколько секунд?

    YavaDev
    @YavaDev
    Ответ написан
    Комментировать
  • Пишите ли вы E2E тесты независимо друг от друга?

    vabka
    @vabka
    Токсичный шарпист
    Пробовал и так и так:
    1. Чисто e2e, когда взаимодействие с сервером происходит через HTTP
    2. Независимое, когда заранее создаются все данные в БД, потом делается пара действий через HTTP, потом всё чистится.

    Первый чуть проще, а вторым можно симулировать необычные ситуации, или создавать такое состояние, которое сложно или невозможно получить одним запросом за короткое время (например нужно ждать неделю)
    Пишите ли вы е2е тесты первым способом или все же пытаетесь делать независимые тесты? Почему?

    Обычно пишем так, как сложилось в проекте исторически.
    Ответ написан
    Комментировать
  • Как работает веб-сервер и 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 умеет подыскивать себе удобное местоположение, не уходя за границы экрана
    Ответ написан
    Комментировать
  • Как определить тип девайса из браузера?

    bestowhope
    @bestowhope
    Печатает...
    Самый адекватный вариант если вы не хотите плясать с юзер агентом - дать пользователю выбор. Это ни на что не повлияет.

    Если человек сидит с андроида через браузер который врет что он сафари, то вы отдадите ему ссылку на аппстор. Но у него то андроид.. Как это решите? - Верно. Никак.

    Так что просто дайте человеку 2 кнопки приложения как это делают практически везде и не ломайте голову
    Ответ написан
    Комментировать
  • Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?

    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 комментариев
  • Как удалить класс блока при клике вне блока?

    Aleksandr-JS-Developer
    @Aleksandr-JS-Developer Куратор тега JavaScript
    Лучше проще, чем никогда
    Вам нужен хоть какой-то слой абстракции для удобной реализации подобного функционала
    Когда я писал нечто подобное, то у меня для каждого select`a был отдельный экземпляр класса, в котором хранилась ссылка на контейнер самого селекта.
    Это позволило мне отслеживать клики вне текущего селекта вот таким образом:

    // *При инициализации экземпляра класса*
      // this.contain - ссылка на контейнер самого селекта.
      // this.close() - метод, который закрывает селект
      // this.condition - Объект, с текущим состоянием селекта
    
      document.addEventListener( 'click', e => {
        if( !e.path.includes( this.contain ) && this.condition.opened ){
          this.close();
        } 
      });


    Вот код последней версии: jsfiddle
    Ответ написан
    2 комментария
  • Как, при выборе checkbox и нажатия кнопки "отправить" подсвечивались ответы?

    @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
    Ответ написан
    Комментировать
  • Как задать фиксированный размер блоку, чтобы он не изменялся при масштабировании, и сместить его в нужное место?

    bestowhope
    @bestowhope
    Печатает...
    1. Верстка и программирование - разные вещи.
    2. Любой код всегда выкладывайте в песочницу и давайте ссылку
    3. position fixed css??
    4. "не менял расположение при масштабировании" - при зуме? при растягивании браузера? Поясните
    Ответ написан
    2 комментария