Задать вопрос

itsjustmypage

Ответы

  • Есть ли "правильность" верстки?

    @itsjustmypage
    Смысл в именовании и структурировании CSS-классов такой же, как смысл в именовании и структурировании переменных и функций в программировании. Поддержка кода в логичном понятном и значит легкоподдерживаемом состоянии.

    Универсальное правило, если нет своего осознанного пути, использование БЭМ методологии и именование по смысловой нагрузке элемента.

    Не .bigBlackButton, потому что кнопка большая и чёрная, а .sendNudesButton, потому что кнопка отправляет нудесы.

    .wrapper, .row и прочее это универсальные утилитарные классы, их часто используют, когда, например, нужна какая-то обёртка ради обёртки или вроде того, которая не играет роли в структуре документа.

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

  • Можно ли разделить монитор на несколько виртуальных мониторов?

  • Где и как хранить много ГБ изображений для сайта?

    @itsjustmypage
    На imgur 10к фоток в месяц бесплатно :)
    https://rapidapi.com/imgur/api/imgur-9/pricing
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать адаптивную шапку на сайте с точки зрения SEO?

    @itsjustmypage
    Это легко гуглится. Ответ Гугла - разный html для десктопа и мобилок это ок.
    Ответ написан
    7 комментариев
    7 комментариев

  • Какое решение лучше выбрать для создания собственного сайта с заметками?

    @itsjustmypage
    Если как можно проще и без излишеств в виде серверной части с базами данных, то можно попробовать CMS статических сайтов. Эта методология называется JAMstack (Javascript + API + Markup). На выбор:
    https://getpublii.com/
    https://gohugo.io/
    https://www.11ty.io/
    https://jekyllrb.com/
    https://www.gatsbyjs.org/
    и много других. Как правило все они бесплатны для одиночного использования.

    Всё это поддерживать через https://www.netlify.com/ , каждый коммит на гитхаб с изменениями мгновенно скомпилируется в статичную верстку и загрузится на сайт с его помощью. Бесплатно для одиночки.

    Поиск можно скостылить через подгрузку JSON файла с нужной информацией (например, названиями всех заметок, датами, тегами и т.д.) и поиском по этому файлу на клиенте, либо использовать вот этот замечательный сторонний сервис https://community.algolia.com/docsearch/ Он тоже абсолютно бесплатен и, замечу, используется на сайтах документации к Vue.js, React и Bootstrap. Уровень, как никак! Пример: https://vuejs.org/v2/guide/

    p.s. Wordpress советуют исключительно из-за того, что это самая популярная серверная CMS в мире. Но это такой тяжёлый оверхед и говнокод, что лучше не надо. Даже среди серверных решений есть достаточно хороших миниатюрных альтернатив.
    Ответ написан
    Комментировать
    Комментировать

  • Хорошая напоминалка/таск менеджер?

    @itsjustmypage
    Опробовал под 10 штук разных, в том числе указанный здесь Todoist. Остановился на Microsoft To Do.

    Есть в виде мобильных приложений Android/iOS, десктопное на Windows, веб-версия. Всё в облаке, все функции бесплатно, есть напоминалки-уведомления, можно объединять задачи в списки, а списки в группы. Отдельно видны список задач на сегодня (туда отправляются выбранные тобой задачи) и список важных задач (там все задачи, помеченные тобой важными).

    Сами задачи можно разбивать на отдельные шаги (и отмечать выполнение по шагам), также указывать дополнительную текстовую заметку, назначать время выполнения, автоматическое создание задачи по указанным дням (например, раз в N дней/недель/месяцев или по рабочим дням) и, что особенно приятно, прикреплять файлы (не более 25Мб в сумме на одну задачу).

    Кроме всего здесь лучший минималистичный дизайн среди всех подобных приложений и тёмная тема. Нет нагромождения интерфейса.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно выучивать материал?

    @itsjustmypage
    1. Прочесть новый материал так, чтобы во время чтения большинство вещей было понятно.
    2. Законспектировать в текстовом файлике или гитхабе или ещё где. Своими словами, для себя. Даже если в интернете уже есть всякие MDN, открывающиеся по щелчку пальцев.
    3. Попрактиковаться. Изучил что такое CSS гриды, иди сверстай несколько примеров раскладки элементов, сохрани их (в файлике, на codepen, на гитхабе, как больше нравится). Можно прокомментировать код, разжёвывая его самому себе из будущего. Это пример-шпаргалка, когда вернёшься к нему, сможешь быстро всё вспомнить.
    4. Повторить пункты 1-3 через неделю, месяц. Читать уже будешь сквозь пальцы, потому что знаешь материал и просто вспоминаешь, сможешь воспользоваться конспектом или дополнить его. Конкретные примеры и конспекты конкретных технологий очень помогают и будут помогать позднее как шпаргалки. Особенно если ты их сам сделал.
    Ответ написан
    Комментировать
    Комментировать

  • Где грамотнее прописывать позиционирование элементов при верстке с помощью bootstrap как класы в html или как свойства в css?

    @itsjustmypage
    Именовать все элементы своими css-классами по смыслу существования элемента (если у тебя блок с информацией о пользователе, именуй как-нибудь вроде .user_info), а не по внешнему виду. А все эти центрирования уже применять в этих классах внутри .css файлов, можно в виде миксинов как в препроцессорах https://sass-lang.com/documentation/at-rules/mixin
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно научиться делать такой объект?

    @itsjustmypage
    Писал давно на Stylus+Pug, может поможет чем. Не респонсив, но зато css-счётчик есть)
    https://codepen.io/Arkham80/pen/MbYRzd
    Ответ написан
    Комментировать
    Комментировать

  • Аналоги js в web?

    @itsjustmypage
    https://developer.mozilla.org/ru/docs/WebAssembly
    Ответ написан
    Комментировать
    Комментировать

  • Как вникнуть в ES2016, ES2017, ES2018?

    @itsjustmypage
    Для ознакомления и понимания вот здесь на русском https://learn.javascript.ru/es-modern
    Чуть подробнее про promises и дополнительно про async/await вот здесь пока ещё на английском https://javascript.info/async
    Для более глубокого изучения вот здесь на английском https://exploringjs.com/es6/
    А также вот здесь на английском https://ponyfoo.com/articles/tagged/es6-in-depth
    Там же прекрасная шпаргалка для закрепления на английском https://ponyfoo.com/articles/es6

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

  • Как просматривать разрабатываемый сайт через телефон?

    @itsjustmypage
    Browsersync в npm для сборщика
    https://www.youtube.com/watch?v=cj29XdGzNt8
    https://www.browsersync.io/
    Не только просматривать, но и взаимодействовать одновременно на всех устройствах (скроллить, кликать, заполнять формочки, вот это всё).
    Ответ написан
    2 комментария
    2 комментария

  • Уехал в Москву, но не тяну по сложности, стоит ли возвращаться домой?

    @itsjustmypage
    Если взяли, значит устраиваешь. Продолжай штудировать и спрашивать. Английский технический довольно простой и переводчики такое нормально переводят.

    KEEP-CALM-POSTER-LOW_large__78588.129146
    Ответ написан
    Комментировать
    Комментировать

  • Какие существуют "общие" правила по верстке web страниц?

    @itsjustmypage
    Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
    Подключить normalize.css (body margin 0 там тоже есть).
    Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
    Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
    Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
    Использовать какую-либо методологию вёрстки (обычно БЭМ).
    Верстать модульно, максимально независимыми блоками (см пункт о методологии).
    Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
    Использовать автопрефиксер для автоматического проставления префиксов в CSS.
    Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
    Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

    Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
    И здесь посмотреть webmasters.teamdev.com
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше писать стили CSS Modules или Styled Components?

    @itsjustmypage
    Пока ты тут спрашиваешь, они оба устареют, придётся переписывать.
    Ответ написан
    Комментировать
    Комментировать

  • Шаблоны с хорошей вёрсткой на чистом HTML и CSS есть ли такие ресурсы?

    @itsjustmypage
    Открываешь разные проекты
    Нажимаешь F12
    Смотришь примеры хорошей (не обязательно) вёрстки

    Для конкретных элементов (формы, модалки, вылезающие панели) лучше искать их отдельно и смотреть примеры в поиске на codepen.io

    Ещё есть всякие сборники UI типа таких:
    https://googlechromelabs.github.io/ui-element-samples/
    https://css-tricks.com/snippets/html/
    https://www.w3schools.com/howto/default.asp
    https://tympanus.net/codrops/category/blueprints/
    Ответ написан
    Комментировать
    Комментировать

  • Как профессионально протестировать фронтенд?

    @itsjustmypage
    Чек-листы вёрстки
    https://frontendchecklist.io/
    https://github.com/thedaviddias/Front-End-Checklist
    https://habr.com/post/114256/
    https://habr.com/post/319664/

    Неплохие ответы по "как вы тестируете вёрстку"
    Как тестировать верстку?

    Можно ещё добавить проверку в DevTools LightHouse (встроен в хром) и линтеры при сборке.

    А вообще инструментов полно, но не все популярны. А проверять нужно чуть больше, чем визуальную составляющую.
    Ответ написан
    1 комментарий
    1 комментарий

  • Div, который выглядит по-разному в каждом браузере?

    @itsjustmypage
    Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

    Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

    Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

    https://www.w3.org/TR/css-ui-3/#outline-offset
    5b447ea6c9061121780680.jpeg

    Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно. AMQ4hnM.gif
    Ответ написан
    1 комментарий
    1 комментарий

  • CSS em rem % вопросы по относительным еденицам - что лучше...и как?

    @itsjustmypage
    3) Потому что это практически никогда никому не нужно. Есть ещё нужда для поддержки изменения базового размера шрифта в браузере пользователя - если он поставит в настройках 150%, чтобы все шрифты отталкивались от этого размера. Но опять же, это не слишком частоиспользуемая возможность, к тому же вероятно, что верстка поедет. Сейчас все пользуются обычным масштабированием, не спрятанным глубоко в настройках браузера, а масштабирование от rem единиц не зависит и верстку обычно не ломает.

    4) Насколько я знаю, это писали из-за бага в IE6/7. Сечас в этом нет смысла.

    5) Всё отличие отступов и размеров в px против em лишь в том, что последние зависят от размера текста. Это удобная техника для масштабирования элементов, достаточно лишь увеличить размер текста, как отступы увеличатся пропорционально тексту. Однако нужно понимать где лучше использовать em, где rem, а где просто px. Вот неплохая статья на эту тему https://zellwk.com/blog/rem-vs-em/

    6) Относительные единицы нужны, но это не панацея. Сами px являются относительной единицей по сути, поскольку являются CSS-пикселями, зависят от плотности экрана и не равны физическим пикселям на экране. Проценты существуют для резиновой верстки (сетки с колонками по 25% ширины родителя, например), вьюпорт-единицы (vh, vw, vmin, vmax) нужны, когда нужно ориентироваться на размеры экрана (полноэкранный сайт, резиновые размеры шрифта и т.д.), rem и em для зависимости от размера текста. Если никакие из этих зависимостей не нужны, просто используй пиксели.
    Ответ написан
    Комментировать
    Комментировать

  • Как переопределять класс на каждой странице jade?

    @itsjustmypage
    На каждой странице:

    extends /core/core.pug // подключаем шаблон

// создаём блок переменных, где объявляем наши переменные для страницы
block variables 
	- var pageClass = 'mainPage';		//- <body class="HERE">


    В самом шаблоне:

    block variables // подключение блока переменных со страницы в самом начале

// код вашего шаблона
doctype html
html.no-js(lang= pageLang)


    Примечание: в jade работало, только если на страницах сначала объявлен блок переменных, а потом подключён шаблон. В pug можно и так и так.
    Инструкция по блокам в pug: https://pugjs.org/language/inheritance.html

    p.s. Можно прописать базовый путь для pug при сборке в галпе, так проще подключать шаблон на страницах.
    gulp-pug( {basedir: *путь*} );
    Ответ написан
    1 комментарий
    1 комментарий