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

Vlad Feninets

front-end dev

78

вклад
2

вопроса
141

ответ
33%

решений

Ответы пользователя по тегу HTML

Какими инструментами быстрее, проще и правильнее разрабатывать и собирать front end (верстка+wordpress)?

Vlad Feninets @fnnzzz
front-end dev

webpack в твоем случае будет излишним, имхо.
если вебпак, то можно юзать create-react-app, для того, чтобы что-то быстро напрототипировать - там уже готовый/настроенный/поперченный вебпак с hot module replacement.

в обычных случаях (вроде натянуть верстку на вордпресс или django), я как правило, юзаю галп с лайврилоадом, который однажды настроил и забыл - по-моему лучшее решение. Можешь как написать конкретно под свои нужды сеттинг, либо же найти готовый.
могу поделиться своим - https://github.com/fnnzzz/gulp-config

для каких-то совсем простых штук - можно юзать прямо npm-скрипты: https://gist.github.com/fnnzzz/f90304458ee24307a3d...

что касается других инструментов:
раньше долго сидел на саблайме с зоопарком плагинов (emmet, всякое для синтаксиса, сниппеты и пр.), недавно пересел на webstorm и доволен (особенно радует синхронизация настроек через репозиторий)

из препроцессоров юзаю только SCSS + бэм, но бэм использую малость кастомизированный с модификаторами через минус (читать тут - frontender.info/bem-sass-modifiers/)

но если честно, не надо сильно загоняться - выбирай инструменты, которые удобны тебе и не обращай внимание на хайповость.

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

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

8 комментариев
Где лучше всего подключать js?

Vlad Feninets @fnnzzz
front-end dev

подключают в основном в конце body, потому что важно сохранить последовательность загрузки и выполнения скриптов, например jquery, а потом какой-нибудь common.js, который юзает jquery.
+ в таком случае загрузка скриптов начнется уже в самом конце, когда пропарсился html.
Т.е. допустим у вас в head есть скрипт, который весит ~10мб, но он defer и не критикал (тобишь его можно потом догрузить лениво), в таком случае он начнет сразу грузится, а парсинг хтмл продолжится дальше, далее у вас в хтмл встречаются другие картинки, медиа-файлы и т.д. - но если у вас слабое соединение, то весь канал будет съедаться этим скриптом.

но в целом, если у вас стоит аттрибут - defer или async, то в принципе не важно куда вы подключите ваш script.

вот схемка разных вариантов подключения скрипта:
https://hospodarets.com/img/blog/14828583238612140...

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

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

5 комментариев
HTML5 GAME: для спрайтовой анимации лучше использовать Canvas или DIV?

Vlad Feninets @fnnzzz
front-end dev

- canvas быстрее спрайтов/манипуляции DOM
- png спрайты быстрее svg спрайтов
- канвасами лучше управлять с помощью какой-то либы, вроде https://github.com/d3/d3

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

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

Комментировать
Какой Carousel на JQuery лучше всего использовать?

Vlad Feninets @fnnzzz
front-end dev

owl carousel
если нужна совсем простая, то https://github.com/idiot/unslider

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

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

Комментировать
Как загрузить содержимое iframe только ПО КЛИКУ?
Vlad Feninets @fnnzzz
front-end dev
можно добавлять динамически, после того, как ДОМ отрендерился

document.addEventListener('DOMContentLoaded', function() { var iframeEl = document.createElement('iframe') iframeEl.src = 'http://example.com' document.querySelector('#container').appendChild(iframeEl) })

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

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

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

fnnzzz

Vlad Feninets @fnnzzz

front-end dev

<div class="block">
	...
</div>

.block {
	position: relative;
}
.block::before {
	content: normal;
}

.block::after{
	content: normal;
}

.block:hover::before {
	content: ''
}

.block:hover::after {
	content: ''
}

.block::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	heigth: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.block::after {
	position: absolute;
	background: url('icon.png');
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

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

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

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

Что изучать верстальщику и в каком порядке?

Vlad Feninets @fnnzzz
front-end dev

вот есть прекрасный road-map
i.imgur.com/ssnjKgc.png

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

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

1 комментарий
Как отправить сообщение с сайта на почту?

Vlad Feninets @fnnzzz
front-end dev

все, верно, делается это с помощью ф-и mail:
mail('test@example.com', 'Subject', $message);

но, учтите, что на вашем сервере/хостинге/дроплете/инстансе должен быть настроен SMTP, потому что php просто делегирует отправку почты на уровень выше, а уже настроенный SMTP перехватывает его и отправляет.

Если вы не хотите беспокоиться о настройке SMTP, то можете воспользоваться уже готовыми решениями, вроде этого: https://formspree.io/

там можно как через POST засылать данные, так и с помощью AJAX.

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

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

3 комментария
Как сделать блок по ширине картинки, но не больше ширины страницы?

Vlad Feninets @fnnzzz
front-end dev

есть viewport units.
просто укажи, что ширина эл-та должна быть не больше ширины вьюпорта
max-width: 100vw;

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

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

Комментировать
Что не работает после отключения Javascript?

Vlad Feninets @fnnzzz
front-end dev

зависит от браузера

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

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

Комментировать
Замедляет ли Атрибут width="100%" загрузку iframe и картинок?

Vlad Feninets @fnnzzz
front-end dev

повлияет это только на performance, т.к. браузеру нужны будут ресурсы на перерендер картинки или айфрейма, но никак не на загрузку.

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

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

Комментировать
Максимальная оптимизация приложения на angularjs + localStorage, ваше мнение?

Vlad Feninets @fnnzzz
front-end dev

если они у вас не очень часто теряют актуальность, то можно использовать приём "оптимистических обновлений", тобишь сразу вывести данные из локал-стораджа, а уже потом переспросить их у АПИ, отрендерить и записать новый список в localStorage, у юзеров будет хороший икспириенц.

Отрицательным фактором в таком случае может быть "мигание" данных, если они у вас частенько меняют актуальность.
Из аналогов localStorage можно заюзать indexDB, у него в принципе неплохая поддержка браузерами и он более развесистый.

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

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

Комментировать
Как очистить текстовое поле?
Vlad Feninets @fnnzzz
front-end dev
document.addEventListener("DOMContentLoaded", function() { document.querySelector("#my_input").value = "" })

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

Комментировать
Комментировать
Вставить все файлы css и js вставить в html?

Vlad Feninets @fnnzzz
front-end dev

можно, но не нужно.
уж лучше конкатить это все в 1 js/css. Так ты снизишь кол-во запросов к серверу + оно будет кешироваться браузером или сервером.
А если это всё ложить инлайном прямо в хтмл, то во-первых сам хтмл у тебя разрастётся до нескольких мб, а во-вторых если твоя хтмл не статика, то кешироваться оно не будет, а соответственно клиент всегда будет тянуть твою километровую хтмл-пейдж.
Маленькие кусочки js/css целесообразно класть в хтмл, но не всё подряд.

Юзай CDN, указывай script и style в конец хтмл (перед закрывающим боди) , если они тебе не нужны при рендере дом-дерева и будет тебе счастье.

А вообще ждем полноценной имплементации http/2 и забываем обо всем этом как страшный сон.

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

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

Комментировать
Заработать на шаблонах для сайтов, реально?

Vlad Feninets @fnnzzz
front-end dev

сейчас мокапы в тренде, на них можно

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

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

Комментировать
Как использовать несколько таких плагинов на одной странице?
Vlad Feninets @fnnzzz
front-end dev
Делай разные инициализации под разными id-шками.
$("#owl-carousel1").owlCarousel(); $("#owl-carousel2").owlCarousel();

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

Комментировать
Комментировать
Hover text with attributes and transition, как вставить гиперссылку?

Vlad Feninets @fnnzzz
front-end dev

jsfiddle.net/vlad1josef/wn3tq714

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

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

Комментировать
Как сделать текст по средине картинки, поднять его?

Vlad Feninets @fnnzzz
front-end dev

jsfiddle.net/vlad1josef/weuwLd1q

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

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

Комментировать
Как задать ширину блока дочернему класу 100% и обойти родителя?
Vlad Feninets @fnnzzz
front-end dev
можно заюзать jQuery / Javascript
var parent_w = $('#parent-block').width(); $('#child-block').width(parent_w);

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

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

Самые активные сегодня

SunTechnik
- 4 ответа
- 0 вопросов
dim5x
- 4 ответа
- 0 вопросов
hint000
- 3 ответа
- 0 вопросов
Wataru
- 2 ответа
- 0 вопросов
VoidVolker
- 2 ответа
- 0 вопросов
Refguser
- 2 ответа
- 0 вопросов