• Как верстать подобные SVG-фоны?

    tolfy
    @tolfy
    Фирменный стиль
    Для фонов создавайте отдельный лаут. Далее играйте позиционированием, отталкиваясь от ID секций и позиции scroll
    Как пример подобного вот накинута страничка
    Ответ написан
    Комментировать
  • В каких ситуациях верстать сайты по bem методологии нецелесообразно?

    dom1n1k
    @dom1n1k
    Сайты - целесообразно всегда.
    Нецелесообразно тащить БЭМ в небольшие изолированные фрагменты кода - например, наброски proof of concept, когда нужно просто быстро проверить/продемонстрировать идею. Ответы на Тостере сюда тоже можно отнести. Если же говорить именно о сайте, то есть законченном продукте (пусть даже и небольшом) - БЭМ как минимум не повредит. Сегодня я бы уже не стал верстать без БЭМ-а ничего, что содержит хотя бы 10 классов.

    P.S. Я сам всегда скептически отношусь к хайпам по поводу всех новых и жутко модных технологий, но БЭМ это реально полезная штука. Да и не такая уж новая - фрагментарно его идеи мелькали уже давно, в том числе в моих собственных верстках. Но нужен был локомотив, который их систематизирует и раскрутит.

    P.P.S. Разумеется, речь идет о самой методологии именования классов, а не всех библиотеках-космолетах, что Яндекс родил на эту тему - то уже на любителя.
    Ответ написан
    2 комментария
  • Как спрятать эти ужасные треугольники?

    nowm
    @nowm
    Сода может помочь, я думаю.

    Update: Нет, вру. Они в ST3 появились и их можно убрать опцией "enable_tab_scrolling": false
    Ответ написан
    Комментировать
  • Как стилизовать видео с youtube?

    romich
    @romich Автор вопроса
    Frontend разработчик
    В конечном счете начальное видео youtube я стилизовал вот таким образом: codepen.io/romkaa/pen/JKqgmN
    Ответ написан
    3 комментария
  • Как формируется device-width устройств и можно ли этим управлять?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Как бы это сказать. Есть физические пиксели(физический размер экнара), а есть цифровые, разрешение матрицы(1920-1080).

    Ведь если мой 27 моник имеет разрешение 1920-1080, то и телефон диаметром 5 дюймов может иметь тоже разрешение, а то и больше. Но сайт, адаптируется под физические размеры устройства. О чем и свидетельствует параметр в мета теге width=device-width. device-width - Ширина девайса.

    У 5 iphone физический размер экрана 320px. Поэтому и адаптивный сайт на нём будет отображаться в 320px.
    Ответ написан
    6 комментариев
  • Какие задачи нужно уметь выполнять на JS начинающему?

    copist
    @copist
    Empower people to give
    Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?


    Кроме синтаксических конструкций, математических и логических выражений, нужно знать:
    • Область видимости переменных
    • Замыкания
    • Объектно-ориентированное программирование, в частности наследование через прототипы
    • Шаблон проектирования "модуль"
    • Операции над DOM
    • Понимание принципов событийно-ориентированного программирования
    Важно - нужно знать, откуда копипастить.
    Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

    Важно - инструменты программиста JavaScript
    У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
    Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

    Хотелось бы узнать что это за задачи(упомянутые вами 80%)


    Реальные задачи джунов:
    1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
      Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.

    2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
      1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.

    3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
      1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)

    4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
      1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      3. Усложнение: в всплывающем окне показать текст HTML

    5. По клику на кнопку "Click me" показать всплывающую форму.
      1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода

    6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
      1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.

    7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
      1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      3. Усложнение: тема страницы должна меняться без перезагрузки фрейма



    Задачи повышенной сложности, исходя из личного интереса
    1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
      1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)

    2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
    3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
      1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход

    4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
      1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      3. Усложнение: пользователь может иметь несколько независимых списков todo

    5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
      1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      2. Усложнение: можно менять толщину, цвет линий, размер точек
      3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения



    Можно использовать любую существующую библиотеку.
    Например,
    для построения графиков www.highcharts.com
    для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
    для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
    для валидации форм rickharrison.github.io/validate.js
    для календаря https://jqueryui.com/datepicker/
    для автодополнения https://jqueryui.com/autocomplete/
    для передачи данных между несколькими пользователями socket.io или обычный AJAX
    Ответ написан
    16 комментариев
  • Bootstrap 3 или 4?

    NikitaRain
    @NikitaRain
    Full-Stack Developer.
    Изучайте лучше пока 3 версию. Разница в коде там будет не колоссальная чтобы переучиваться
    Ответ написан
    1 комментарий
  • Bootstrap 3 или 4?

    sim3x
    @sim3x
    О, не бойтесь переучиться
    У нас тут такая профессия, что если не будете учиться каждый день, то вас никто нанимать не будет
    Ответ написан
    Комментировать
  • Как сверстать подобный заголовок?

    alvvi
    @alvvi
    export default apathy;
    На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before.

    А чем вам h1 не угодил? Внутри можно span-ами разделить с display: block, и все будет семантично.
    Вариант со второй картинки делается с помощью max-width, без паддингов. ::before нужно спозиционировать только один раз, а родителю добавить position: relative.

    p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"

    Нужно чтобы везде было идеально, но проходишься в итоге все равно по точкам, желательно вообще не иметь @media не соответствующих заранее определенным брейкпоинтам (хотя есть исключения).
    Ответ написан
    2 комментария
  • Как писать стили для множества страниц?

    alvvi
    @alvvi
    export default apathy;
    Не создавать же свой отдельный CSS файл для каждой страницы

    Why not?
    Сделайте файл с общими стилями и файлы для каждой странице.
    Это конечно если у вас там много стилей, в других случаях можно все вместе сбандлить на продакшн.
    А вот в разработке, имхо, даже по странице делить не очень, используйте БЭМ или что-то подобное.

    он сразу все загружает когда мы зашли на сайт?

    По умолчанию так, но можно загружать что-то асинхронно.
    Ответ написан
    Комментировать
  • Как писать стили для множества страниц?

    Первый вопрос.
    Привязывать css-правила или файлы к конкретным страницам не лучшая практика. Так или иначе на сайте используются сквозные (повторяющиеся от страницы к странице) блоки: шапка, подвал, боковое меню, кнопки, формы и т.д. и т.п. Необходимо учитывать ситуацию, при которой какой-либо блок с одной страницы сайта придётся использовать на другой. В случае же привязки стилей к какой-либо конкретной странице Вам придётся дублировать CSS, что не есть хорошо.
    Если в Вашем случае страницы совсем разные и сквозных блоков нет, лучше создать несколько css-файлов с темой. Для каждой страницы своя тема: своё оформление кнопок, форм, заголовков и т.д. Данный подход позволит использовать Ваш CSS повторно, если когда-нибудь понадобиться создать страницу с тем же оформлением, что у одной из существующих на данный момент.
    Лучше придерживаться следующего правила: классы используются для оформления (CSS), идентификаторы - для подключения скриптов (JS).

    Второй вопрос.
    Браузер применяет все стили, полученные в запрошенном css-файле. Почитайте о механизме ренедринга стилей браузером, можно узнать много нового!
    CSS-анимация в Вашем случае применится в момент наведения на элемент. Тогда же будут задействованы ресурсы браузера для её отрисовки. Загрузка стилей анимации не имеет никакого отношения к процессу её непосредственного старта.
    Ответ написан
    Комментировать
  • Как адаптировать блоки?

    Shemil
    @Shemil
    flexbox?
    display: flex;
    flex-wrap: wrap;
    Ответ написан
    Комментировать
  • Как сделать подобный вариант карусели?

    @koanvl
    Как вариант, сделайте послойку при помощи z-index. Слайдер с изображениями, а на слое выше контейнер со статическим контентом. Здесь виден сам принцип, обратите внимание как размещен заголовок h1 тыц
    Ответ написан
    Комментировать
  • Как сделать якорь по классу?

    JaredWinter
    @JaredWinter
    Помог? - Отметь решением.
    Не слушайте тех, кто такое говорит. Если грамотно, то можно использовать и классы и id, только если вы уверены, что этот id не будет использоваться ещё на одной странице.
    По этому все вы правильно делаете.

    Самый просто пример навигации https://jsfiddle.net/cse_tushar/Dxtyu/141/.
    Её правильно делать через id.
    Ответ написан
    4 комментария
  • Как сделать комбинированный ховер эффект?

    @m1roku
    Начинающий
    Если ты серьезно,
    https://jsfiddle.net/nf8o1k33/
    :D
    Наверное, стоит и на матчасть ссылку прикрепить:
    htmlbook.ru/css/hover
    Ответ написан
    Комментировать
  • Как ускорить вёрстку?

    @architawr
    "Ok, Google" и все твои проблемы решены
    1) SASS и сетку для него(типа bootstrap)
    2) GULP для компиляции , а также его LiveReload и AutoPrefixer, и BrowserSync с его локальным сервером, и Bower (закачка либ)
    3) GIT
    4) Emmet
    5) BEM (БЭМ)
    6) Используйте gist от github
    Ну и прямые руки
    Ответ написан
    16 комментариев
  • Что использовать в начале flexbox/фреймворки/сетки?

    @gpyshenko
    Ну например я тоже начал верстать, и у меня была та же самая проблема как у тебя. Не знал с чего начать. Возьми что-то одно и верстай, в одном разберешься в другом будет совсем не сложно.
    Я верстаю на флексах все)) Мне их хватает за глаза, бутстрап чаще всего использует те у кого сроки поджимают, или например плохо разбираются в верстке. Плюс бутстрап нужен для тех проектов где нужна поддержка старых браузеров, где например флексы не работают.
    Кстати для flex, есть интересный сайт с обучением в игровой форме воть!
    Ответ написан
    Комментировать
  • Как реализовать данный ховер?

    JaredWinter
    @JaredWinter
    Помог? - Отметь решением.
    И отметь это решение ответом.
    https://jsfiddle.net/78p3xr1L/
    Ответ написан
    2 комментария