Ответы пользователя Сергей delphinpro

Перестал работать emmet без двоеточий в аббревиатурах в последнем обновлении. Как исправить?

Сергей delphinpro @delphinpro Автор вопроса, куратор тега PhpStorm

frontend developer

Нашлось решение.

Нужно включить опцию «Enable fuzzy search among CSS abbreviations» на странице Editor > Emmet > CSS

Ответ написан более трёх лет назад

Комментировать

Как с css grids так расположить фотки?

Сергей delphinpro @delphinpro

frontend developer

7 столбиков, 2 ряда.
1-я фотка лежит в области 1,1-3,2
2-я фотка лежит в области 4,1-7,2
3-я фотка лежит в области 3,2-5,2

Ответ написан более трёх лет назад

1 комментарий

Как закрепить блок вверху, и сделать так чтоб он онткрывался единожды за сессию?

Сергей delphinpro @delphinpro

frontend developer

sessionStorage

document.querySelector('.youtube_block_button').addEventListener('click', () => {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block');
  sessionStorage.setItem('youtube-block', 1);
});
if (sessionStorage.getItem('youtube-block')) {
  document.querySelector('.youtube_block').classList.add('hide_youtube_block');
}

UPD
Чтобы блок не мелькал, лучше инвертировать логику. С сервера отдавать скрытый блок, а при отсутствии флага в sessionStorage показывать его.

Ответ написан более трёх лет назад

Комментировать

Как не нарушая лицензию и правильно делать форки с гитхаба для composer?

Сергей delphinpro @delphinpro

frontend developer

для дальнейшей установки через composer?

А что, прямая установка из репы уже не работает?

composer require https://github.com/username/reponame.git

На самом деле, я не помню, работает ли оно так просто.
Но в любом случае возможность есть. Читайте здесь: https://getcomposer.org/doc/05-repositories.md#loa...

Вам останется форкнуть репу, исправить и просто использовать в проекте свой форк.

Ответ написан более трёх лет назад

1 комментарий

Как перекрасить иконку через svg > use?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Иконка хреновая.
Ее стоило обработать в люстре, это занимает пару минут.

код иконки

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M248.4,0c4.9,0,9.8,0,14.8,0c0.9,0.1,1.8,0.4,2.7,0.4c15.5,0.4,30.7,2.5,45.8,5.8c29.2,6.5,56.5,17.8,81.8,33.9
		c0.5,0.3,1.1,0.6,1.7,0.9c4.7-4.7,9.4-9.4,14-14c12.3-12.3,31.2-12.4,43.5-0.2c11,10.8,21.9,21.7,32.7,32.7
		c7.9,8,10.4,17.6,8.1,28.5c-1.2,5.7-4,10.6-8.1,14.6c-3,3-7.4,3.7-11.2,1.9c-3.7-1.7-5.9-5.4-5.7-9.5c0.2-2.7,1.4-4.8,3.1-6.8
		c3.9-4.4,3.9-10.5-0.2-14.7c-10.9-11-21.9-22-32.9-32.9c-4.4-4.4-10.7-4.2-15.2,0.2c-3.6,3.5-7.1,7.1-10.6,10.6
		c-0.4,0.4-0.6,0.9-0.9,1.2c52,41.3,85.1,94,96.3,159.5c11.2,65.4-1.5,126.4-36.9,182.7c0.5,0.5,0.9,1,1.3,1.5
		c4.2,4.2,8.3,8.4,12.5,12.6c12.4,12.4,12.4,31.3,0.1,43.6c-10.8,10.8-21.5,21.6-32.4,32.3c-7.9,7.8-17.4,10.6-28.2,8.5
		c-5.9-1.1-10.9-3.9-15.1-8.2c-5.4-5.6-2.9-14.7,4.6-16.6c3.6-0.9,6.7,0.1,9.5,2.6c4.8,4.3,10.7,4.1,15.2-0.3
		c10.8-10.8,21.6-21.6,32.3-32.4c0.9-0.9,1.6-1.9,2.2-2.9c2.1-4.1,1.5-8.8-1.9-12.3c-3.6-3.8-7.4-7.4-11.1-11.2
		c-0.2-0.2-0.5-0.4-0.8-0.6c-41.2,52-94,85.1-159.6,96.4c-65.5,11.3-126.6-1.6-182.9-37c-0.6,0.5-1.1,1-1.7,1.5
		c-4.1,4.1-8.1,8.1-12.2,12.2c-12.7,12.5-31.4,12.5-44-0.1c-10.6-10.6-21.2-21.2-31.8-31.8c-7.3-7.3-10.4-16.1-9.1-26.4
		c0.9-6.7,3.8-12.5,8.7-17.3c2.8-2.8,6.2-3.5,10-2.3c3.6,1.2,5.9,3.8,6.6,7.6c0.7,3.4-0.3,6.3-2.7,8.8c-2.1,2.3-3.2,4.9-3.1,8
		c0.1,3.2,1.6,5.6,3.7,7.8c10.5,10.5,21,21,31.5,31.5c0.3,0.3,0.7,0.7,1.1,1c4.3,3.7,10.2,3.8,14.3-0.1c4.1-3.8,7.9-7.9,11.8-11.8
		c0.1-0.1,0.1-0.3,0.1-0.4c-51.9-41.3-85-94.1-96.3-159.6c-11.2-65.5,1.8-126.4,37-182.7c-0.6-0.6-1.1-1.2-1.7-1.8
		c-4.1-4.1-8.1-8.1-12.2-12.2c-12.4-12.5-12.4-31.4,0-43.8C37.7,48.5,48.4,37.9,59,27.3c5.2-5.3,11.4-8.5,18.8-9.3
		c9.8-1,18.3,2,25.2,9.1c2.1,2.2,2.9,4.9,2.5,7.9c-0.5,3.8-2.6,6.5-6.2,7.9c-3.7,1.4-7.1,0.8-10.1-1.7c-0.2-0.2-0.4-0.3-0.6-0.5
		c-4.9-4.3-10.7-4.2-15.4,0.4C62.6,51.7,52.1,62.4,41.3,72.8c-4.5,4.4-5,11.7,0,16.4c3.4,3.2,6.6,6.6,9.9,9.9c0.4,0.4,1,0.8,1.4,1.2
		c0.2-0.2,0.4-0.3,0.5-0.4c0.6-0.8,1.2-1.5,1.8-2.3c29.5-37.1,66.4-64.2,110.7-81.1c25.9-9.9,52.8-15.3,80.6-16.1
		C247,0.4,247.7,0.1,248.4,0z M113.5,256.1c-0.1,78.3,63.5,141.9,141.3,142.5c79.1,0.7,143.9-63.5,143.8-142.5
		c0-78.8-64.1-142.9-142.7-142.7C177,113.7,113.5,177.3,113.5,256.1z M309.9,486c42.8-10.3,79.9-30.6,111.2-61.2
		c32.7-32,54.2-70.3,65-115.2c-1.3,0-2.2,0-3,0c-18.1,0-36.2,0-54.4,0c-1,0-2,0-2.9-0.1c-4.7-0.4-8.3-4-8.9-8.8
		c-0.5-4.4,2.3-9,6.6-10.4c1.5-0.5,3.1-0.6,4.6-0.6c19.5,0,39,0,58.6,0c1,0,1.9,0,3.1,0c3.2-22.7,3.2-45.2,0-67.6
		c-5.6-0.6-72.7-0.3-74.6,0.3c7.6,39.8,2.4,77.7-17.6,113.1c-20,35.4-49.6,59.7-87.7,73.7C309.9,434.8,309.9,460.2,309.9,486z
		 M289.7,415c-39.9,7.6-77.8,2.5-113.2-17.5c-35.5-20-59.8-49.6-74-87.9c-0.8,0-1.7,0-2.5,0c-24.5,0.1-49,0.1-73.5,0.2
		c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.1-0.2,0.4c7.6,32.1,21.4,61.5,41.4,87.9c23.2,30.7,52.3,54.3,87,71
		c15.2,7.3,31,12.9,47.8,16.7c0-1.4,0-2.3,0-3.3c0-18.1,0-36.2,0-54.4c0-0.7,0-1.5,0-2.2c0.4-5.1,4.4-9.1,9.4-9.3
		c5.2-0.2,9.5,3.4,10.2,8.6c0.2,1.2,0.2,2.5,0.2,3.7c0,19.2,0,38.4,0,57.5c0,1,0,1.9,0,3.1c22.7,3.2,45.1,3.2,67.5,0
		C289.7,464.7,289.7,439.9,289.7,415z M202.2,26.3c-86.5,19-157.3,90.8-175.9,176c1,0,2,0,3,0c18.1,0,36.2,0,54.4,0
		c0.8,0,1.6,0,2.5,0c5,0.4,8.7,4.1,9.3,8.9c0.5,4.5-2.3,8.9-6.7,10.3c-1.4,0.4-2.9,0.5-4.4,0.5c-19.7,0-39.4,0-59,0
		c-0.9,0-1.9,0.1-2.8,0.1c-3.3,16.1-3.2,58.8,0.2,67.5c24.7,0,49.5,0,74.4,0c-7.7-39.9-2.5-77.8,17.5-113.2
		c20-35.5,49.6-59.8,87.7-73.8C202.2,77.1,202.2,51.7,202.2,26.3z M222.3,97c39.9-7.7,77.8-2.5,113.2,17.5
		c35.4,20,59.7,49.5,73.8,87.5c3.5,0.5,74.7,0.3,76.4-0.2c-19.2-86.5-90.9-157-176-175.6c0,1,0,2,0,2.9c0,18.1,0,36.2,0,54.4
		c0,1,0,2-0.1,2.9c-0.5,4.9-4.4,8.6-9.4,8.8c-4.7,0.2-9-3-10-7.7c-0.3-1.3-0.3-2.6-0.3-3.9c0-19.5,0-39,0-58.5
		c0-0.9-0.1-1.9-0.1-2.8c-19.4-3.2-58-3-67.4,0.2C222.3,47.3,222.3,72.1,222.3,97z"/>
</svg>

Ответ написан более трёх лет назад

Комментировать

Как происходит процесс разработки/доработки сайта у верстальщика-фрилансера?

Сергей delphinpro @delphinpro Куратор тега Вёрстка

frontend developer

Если речь идет о доработках, то предоставляется доступ к ftp и/или админке сайта. Вы вправе сами потребовать все необходимые доступы, но должны будете обосновать, зачем вам это, если вдруг заказчик спросит.

При верстке нового сайта вы тоже сами определяете что вам нужно. Если просто верстка - то делаете у себя, совершенно как вам удобно, потом скидываете заказчику на почту архивом, или заливаете в приватную репу и передаете ему репу.

В общем всё вариативно.

ЗЫ
Когда речь идет о получения доступов, рекомендую попросить заказчика сделать вам отдельный временный аккаунт. По окончании работ обязательно напомните, чтобы он удалил этот аккаунт. Или сменил пароли, если давал основной доступ. Так вы обезопасите себя от наездов "У меня сайт сломался, а у тебя доступы были".

Ответ написан более трёх лет назад

Комментировать

Как прибить блок с 2мя параграфами внутри снизу родительского?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Здесь не нужны никакие, абсолюты или флоаты

Ответ написан более трёх лет назад

Комментировать

По какой причине может не применяться скачанный локальный шрифт?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Ошибка в наличии двух src

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Нужно указывать через запятую

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
     url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Два src используется для поддержки древнего IE (уж не помню какой версия).

В вашем случае подключается svg шрифт, который понимает только Safari.
Как вам уже сказали в комментах — svg формат не следует использовать вообще.

И попробуйте использовать для подготовки шрифтов специализированные сервисы типа https://www.fontsquirrel.com/tools/webfont-generator
Они вам и шрифтов нагенерят в нужных форматах и css файлик создадут для подключания.

Ответ написан более трёх лет назад

1 комментарий

Как имитировать hover в таблице?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

table 
  tr.hover
  tr
  tr

table:not(:hover) .hover,
table tr:hover {
  background: green;
  color: white;
}

Ответ написан более трёх лет назад

Комментировать

Как сделать div'ы в двух соседних колонках одинаковыми по высоте?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Это же таблица..

<div class="row">
    <div class="col-lg-10 offset-lg-1">
        <div class="table-resposive">
            <table class="my-custom-table">
                <tr>
                    <td class="table__header">Плюсы</td>
                    <td class="table__header">Минусы</td>
                </tr>
                <tr>
                    <td class="table__content">печать неощутима на ткани</td>
                    <td class="table__content">самый сложный и поэтому дорогой способ шелкографии</td>
                </tr>
                <tr>
                    <td class="table__content">футболку можно гладить по рисунку</td>
                    <td class="table__content">технологически сложно достичь точной цветопередачи,
                        некоторые
                        цвета не выглядят так ярко, как задумывалось в макете
                    </td>
                </tr>
                <tr>
                    <td class="table__content">высокая стойкость рисунка при стирке</td>
                </tr>
                <td class="table__content">возможный процент брака больше, чем при других видах
                    шелкографии, так как результат можно увидеть только после сушки
                </td>
            </table>
        </div>
    </div>
</div>

Ответ написан более трёх лет назад

Комментировать

Как удалить элемент из массива?

Сергей delphinpro @delphinpro Куратор тега JavaScript

frontend developer

Метод .pop() вытаскивает последнее значение из массива.
Вам нужно вытаскивать произвольное.
Воспользуйтесь для этого методами slice / splice

Ответ написан более трёх лет назад

5 комментариев

Многослойная верстка?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Один из слоев, самый нижний, не делайте абсолютом

Ответ написан более трёх лет назад

3 комментария

Как найти label определенного input-та?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Без оглядки на конкретную структуру верстки связь между инпутом и меткой осуществляется через атрибуты for=id. Вот по ним и ищите.

input.addEventListener('change', e => {
  let label = document.querySelector(`[for="${e.target.id}"]`);
  console.log(label); // Нашли!
})

Ответ написан более трёх лет назад

4 комментария

Как создать страницу посредством $_GET?

Сергей delphinpro @delphinpro Куратор тега PHP

frontend developer

$page = isset($_GET['page']) ? $_GET['page'] : false;
$allowedPages = [
    'index',
    'install',
    'news',
];

include 'modules/includes/index/index-header.php';

if ($page && in_array($page, $allowedPages)) {
    include 'modules/pages/index/'.$page.'.php';
} else {
    // Error 404
}

include 'modules/includes/index/index-bottom.php';

Ответ написан более трёх лет назад

6 комментариев

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

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

https://codepen.io/delphinpro/pen/GveGEY?editors=1100
адаптивно

Ответ написан более трёх лет назад

1 комментарий

Как разместить fixed блок относительно края relative?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Fixed элемент в любом случае будет вне потока и без привязок к родителям, только к вьюпорту.

Тут либо полагаться на фиксированную ширину сайдбаров, либо делать навбар абсолютом, позиционировать от родителя, а фиксацию осуществлять скриптами.

С другой стороны, если скрипты прикручивать, то ими же можно и fixed блок скорректировать.

Ответ написан более трёх лет назад

1 комментарий

Как использовать css переменные в scss функциях?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Это невозможно.

Scss файлы компилируются до выполнения в браузере. А значение css-переменной присваивается именно во время выполнения.

Попробуйте наоборот:

$font-size: 16px;

@function rem($px) {
  @return ($px / $font-size) + rem;
}

:root {
  --font-size: #{$font-size};
}

Ответ написан более трёх лет назад

2 комментария

Моноблок для frontend?

Сергей delphinpro @delphinpro

frontend developer

По доступным характеристикам слабоват. Процессор слабоват, оперативки мало, ssd маленький (хотя, если там можно hdd заменить на ssd, то еще ладно), видюшка фиговая, матрица дисплея TN. Тот же phpStorm на крупных проектах подмораживать будет.
Привод дисков, по-моему, сегодня вообще неактуален. Единственный плюс — моноблок. Я бы не взял, наверное.

Ответ написан более трёх лет назад

Комментировать

Gulp-sass компилирует в CSS при опечатке в коде. Что делать?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Потому что слово opechatka вполне себе валидное выражение для тега. Да, такого тега не существует. Но компилятору нельзя выдавать белый список тегов, так как могут появиться новые.

Оба варианта

opechatka
.soc {
}

opechatka .soc {
}

идентичны синтаксически.

А здесь у вас ошибка, потому что отсутствует двоеточие, значение и точка-с-запятой

{
  opechatka
  display: flex;
}

Не проверял, но думаю, что такой варик тоже не вызовет ошибку, по причине, описанной выше:

{
  opechatka: 10px;
  display: flex;
}

Ответ написан более трёх лет назад

1 комментарий

Использовать ли CSS Grid для мелких деталей?

Сергей delphinpro @delphinpro Куратор тега CSS

frontend developer

Гриды следует использовать для двухмерной раскладки. Будь то общий лейаут страницы, или какой-то отдельный блок на странице любого размера.
Ключевое слово — двухмерной.
Для одномерных подойдут флексы.

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт