Ответы пользователя по тегу HTML
  • Как сделать кнопку которая загружала бы фотографии с пк в папки на сервере?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Простейшая реализация
    <form type="multipart/form-data">
    <input type="file" multiple="multiple" />
    <button type="submit" />
    </form>


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

    Задача лютой сложности для тех, кто все это не знает, хотя кажется "загрузить картинки".

    Без знаний простейшая реализация - "дайте доступ на сервер, я вам картинки закачаю и на сайте выведу, разово". В менее запущенных случаях "делаем скрипт, в который можно отправить зип архив с картинками", это проще, но если им самим разрешить это делать - они запорют.

    Есть мааааленькая вероятность, что ваш старый код уже работает и нужно только какую-то строку исправить. Проверяйте удачу!
    Ответ написан
    9 комментариев
  • Как подключить browser-sync при работе на open-server?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Я обычно отдельно вебпаки не настраиваю, больно это сложно для меня. Я беру компонент "symfony/encore", пишу класс, который работает с манифестом, и там в энкоре уже есть как watch, так и listen.

    Не то чтобы это правильно, но это просто чуть быстрее, чем вдуплять чего там яваскриптеры (у которых стандарты программирования (читай: последовательность мыслей) или возводятся в абсолют до тайпскрипта или вообще отсутствуют) позволили конфигурировать и как это в компоновке с вебпаком и npm варится.
    Ответ написан
    Комментировать
  • Как сделать так, чтобы когда урок начинался (наступало 8:00), то выводилось "Урок начался!", а когда заканчивался (8:40) - "Урок закончился!"?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    А шо не так, все прально напЫсано. Только интервалы почему-то нулевые, отрабатывают либо никогда либо каждый кадр...
    Ответ написан
  • Как сделать адаптив для этого элемента?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    В смысле как? Это не кнопочкой делается, это берешь media запросы и пишешь.
    Или хотя бы сетку bootstrap, и верстаешь 5 блоков
    Есть флексы ещё но я их не очень люблю, вот эти все ихние "флексить йоу кулл"
    Ответ написан
  • Не работает Ajax запрос при отправке формы обратной формы. В чем причина?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Может ты скрипт свой вешаешь на onSubmit еще до того как загрузилась jquery у которого async?
    Ответ написан
  • Правильный ли БЭМ?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Неправильный

    Минимум
    а1 .section-videos
    а2 .section-videos__slider
    а3 .section-videos__text
    а4 .section-videos__title

    Второй блок по желанию (в этом случае а3 и а4 не нужны, т.к. есть б2 и б3)
    б1 .section-video-slider
    б2 .section-video-slider__text
    б3 .section-video-slider__title
    Ответ написан
    Комментировать
  • Как правильно сделать с точки зрения БЭМ?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Бэм очень легко поясняется на аналогии "с котенком".
    Спроси двух разных людей о белом котенке - попроси их его вообразить и описать.
    Ты увидишь что их слова отличаются, т.к. разное воспитание у людей было.

    В Бэме примерно также. У тебя есть два блока - совершенно не важно кто они в иерархии и кто из них старше. Каждый DOM элемент ты можешь называть одним именем для одного блока и другим именем для другого.

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

    .footer__sliderimage.slider__image
    или чтобы еще более наглядно
    .footer__kakajatokartinka.slider__kartinkaslaida

    Я имел в виду, что сам первый месяц работы с БЭМом искал как правильно. Но не найдя ни одного толкового объяснятеля - все мутили только воду потому что не знали сами, для стандарта такая ситуация недопустима - внезапно обратил внимание на то что написал выше.

    Здесь самое главное - не связывать блоки между собой. Я имею в виду что в DOM дереве они конечно родитель и потомок. Но вот это связывание в иерархию потом создает путаницу и невозможность вставить один блок в другой. Отойди от мысли вложенности блоков друг в друга - здесь они все существуют как бы параллельно. Для слайдера - картинка - это "картинка слайда", а для футера это "картинка слайдера" или просто "какая-то картинка". Не связывай их в иерархию больше чем на один уровень (блок-элемент) и не приплетай в понимание БЭМа дерево DOM. В этом и есть секрет. Один элемент DOM дерева может быть:
    - элементом а1 для блока 1
    - элементом б1 для блока 2
    - блоком 3
    но вложенность все равно будет один уровень, даже если от блока до элемента несколько DOM-уровней. Блок может быть footer, а картинка слайдера от него еще в двух дивах и трех таблицах по глубине. И тем не менее это все равно один уровень вложенности. Ты просто манипулируешь своей собственной таблицей названий, забивая на чужие иерархии
    Ответ написан
    Комментировать
  • Как лучше реализовать многоязычность сайта, работающего без CMS, на голом HTML/CSS?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Самое сложное будет url реврайтинг - то есть автоматический выбор языка для чувака, у которого определенная страна. Сделать многоязычник без этого легко - основное выедание мозга именно в этом.
    То есть просто сделать страницы на разных языках с каноникалами не проблема.
    Проблема потом сделать умный роутер, который автоматически будет выбирать язык в зависимости от кучи условий и менять все ссылки на странице, понимая что адрес к странице по сути один, а языков много.

    Т.к. не всегда нужно копировать всю страницу чтобы отобразить ее на другом языке.
    Есть такая ерунда как отобразить страницу под определенную страну. Но многие статьи могут просто изменять один блок с контентом и все, а меню и вовсе - меняют только тексты ссылок, и зачем копировать шапку-подвал, чтобы потом не дай бог изменение - все, вешайся?
    Ответ написан
  • Как вставить 3D модель и прикрутить к WordPress?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Попробуйте курнуть по слово WebGL, однажды мой хороший старый знакомый Сергей Кукунин написал на WebGl простенькую ходилку, и у него использовалась модель.

    Если ваша модель сделана в чем-угодно, вполне вероятно что ее можно конвертировать в формат 3ds-max, а оттуда в что-то, что понимает Web-gl. Скорость работы такого сайта не обещаю, поскольку разработка 3д окружения это очень геморная штука, начиная с "скрыть ту часть полигонов которая осталась за камерой", заканчивая "уменьшить детализацию при отдалении" и "построить карты нормалей".

    Это все достаточно тяжело, куда проще для бизнеса уровня Вордпресс отфоткать ваш товар в 12-24-36 проекциях и поставить слайдер на яваскрипте с мгновенной сменой их по мере передвижения зажатой мышки. Это работает и создает эффект 3д модели.

    То что нужно бизнесу.
    Ответ написан
    Комментировать
  • Как получить индекс родительского массива?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Тебе нужно запустить второй for и будут у тебя все элементы.
    Первый for перебирает коллекцию, второй фор - свойства.

    Если нужно узнать индекс свойства- твой .indexOf возвращает именно индекс элемента, а если его нет - возвращает -1.

    Если индекс элемента в коллекции - то ты уже пробегаешься for-ом, и он в var i лежит
    Ответ написан
    Комментировать
  • Как через jQuery заполнять progressbar в uikit?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Видишь прикол? Ты изучил технологию uikit, и теперь у тебя возникли новые вопросы.

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

    Ты управляешь переменной, и событие на изменение переменной заставляет меняться твой прогрессбар.

    Судя по твоему коду ты пытаешься в функции обработчике изменить переменную, которой в этой функции не задано. До этого ты писал код в которых объявлял переменную через name = 1; тем самым создавал ГЛОБАЛЬНУЮ переменную, существующую везде на странице.

    А uikit использует var name = 1; создавая ЛОКАЛЬНУЮ переменную, доступную внутри конкретной функции и ее потомков.

    В твоем случае обработка прогрессбара происходит с помощью другой функции, которая создана (функцию в js тоже можно "воспринимать как переменную") не в том же месте, где и переменная progressbar1, поэтому функция о ней не знает.

    Чтобы это обойти, есть пара вариантов:
    1) действительно менять через field, поскольку как ты видишь в эту функцию в field передается твой прогрессбар
    2) если тебя это смущает, то к вызову функции changeProgress ты можешь дописать changeProgress.call(null, progressbar1);

    Метод call ВЫЗЫВАЕТ функцию, подсовывая в нее то, о чем она не знала впереди того, что она знала. Твой changeProgress превратится в
    function changeProgress(progressbar1, field, typeOperation) { ... }

    и ты сможешь менять как привык

    В действительности же изучая новую технологию ты заставляешь себя ПРИВЫКНУТЬ к тому, как она работает, а не пытаться ее изменить. В этом и проблема несовершенной технологии - она поставляется бесплатно, далеко не факт что хорошо работает, и требует от тебя смирения и отсутствия в общем-то мозга - ты просто используешь готовое, как оно есть.

    Таким образом, еще раз, твою проблему решит:
    1) привыкание к тому что есть, ибо это технология
    2) изменение того что есть, но очень скоро ты поймешь, что количество внесенных изменений такое, что тебе проще было ее с нуля написать
    3) писать сразу с нуля и не париться, но потом понять, что заказчик не хочет тебе платить за то, что ты будешь "писать с нуля", потому что бизнес-тренера ему навешали лапши про "готовые решения", и тогда вернешься к пункту один и так по кругу

    Ищи наиболее удобную для себя позицию - писать с нуля и требовать денег или использовать готовое и не отвечать за результат. И то и другое сделает тебя виноватым в конце концов, а значит по законам современных юристов - должным твоему заказчику (есть например способ "все делать по договору" - это когда ты рассказываешь что типа все будет честно, а на самом деле в договоре указываешь пункт про свободную лицензию устанавливаемых модулей, и в суде ты такой достаешь козырь из кармана - я его предупреждал и не виноват, что он не знает, что такое бесплатная лицензия на готовое решение, just business, nothing more)

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

    Значит ли это, что на бизнес лучше не работать совсем? Для меня да. Но растить картошку и копать огород, а потом подсесть на очко от того что пришли морозы и весь урожай сдох - тоже так себе подход. Поэтому растишь в себе стержешь и будь готов кидать твоих заказчиков, как только они ведут себя "недостойно", потому что да, заказчик тоже не единственный. Другая крайность - "если бы не было бизнеса" приведет к другому уровню безработицы, когда ни один двоешник не сможет устроится на работу, им придется учится, а им лень, поэтому они начнут грабить посредь бела дня. Текущее решение обеспечивает отсутствие гражданской войны - двоешники - директора, умные - рабы. Умные не выйдут на площадь потому что умные, двоешники обманывают но не грабят, потому что есть возможность и никто не наказывает.

    * Не нужно много разбираться в технологиях, чтобы делать простые вещи, технологии испокон веков были средством управления людьми, поскольку мы больны тягой к неизвестному.
    Ответ написан
    4 комментария
  • Хранить ли фотки в базе данных?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Мое мнение - что от этого нужно избавляться.
    Если у тебя в фирме 1000 менеджерят, которые ничего не делают, а работать умеют только через CMS, вернее через нее тоже не умеют, но говорят что им надо - то это имеет смысл.

    Уже давно картинки у нас лежат просто по внешнему коду товара (будь то код 1С или поставщика или присвоенный скриптом) - и лежат просто в одной папке. Когда находим товар без картинки - переименовываем и закидываем. А дальше твой сайт делает ресайз картинок, и по названию исходной фотки он всегда может проверить - есть ли кешированный мелкий размер и выводит его.

    Для менеджерят пишется инструкция, что дескать переименовывать и вот форма - выделил из моего компьютера, перетянул. Скрипт после закачки записывает кто и когда.

    Безусловно, можно сэкономить немного памяти на том, чтобы не получать из пути/имени новое кешированное имя каждый раз - и записать это в любую таблицу - будьто БД, эксель, json и вообще как угодно сохранить. Но тогда будет тратится время на поиск в этой таблице.

    Нафига, если даже в легендарном c++ в структурах хеш-таблица (ограниченный массив со списком (неограниченным массивом) ключей) является нереальной экономией использование хеш функции вместо простого обращения к ячейке списка (безграничных массивов).

    Ну то есть хранить список путей едва-ли более затратная или менее затратная операция чем каждый раз из пути картинки получать ее имя и проверять наличие файла. Один черт ты проверишь его наличие, даже если у тебя будет список путей.
    Ответ написан
    Комментировать
  • Как повторять ajax запрос в случае неудачи?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Ограничитель поставь в разах, беда будет
    Ответ написан
    Комментировать
  • Почему в Bootstrap десктопы начинаются с 992, а не с 1024?

    gzhegow
    @gzhegow Автор вопроса
    aka "ОбнимиБизнесмена"
    А блин сорян, оставлю у кого еще вопрос возникнет
    992 - 16 * 2 = 960 / 12 = 80
    Ответ написан
  • Непонятная область, выходящая за пределы блоков. Как убрать?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    h1 - блочный элемент и растягивается он на всю ширину любого родителя
    если h1 "торчит" - значит родитель его не ограничивает.

    блоку text можно задать overflow hidden, чтобы спрятать все за его пределами
    он все равно будет показан в chrome console полноразмерным, но по факту его видно не будет, поскольку родитель его спрятал

    в вашем случае у блока h1 стоит line-height: 0.5 что значит "пол-размера шрифта". Если там шрифт 200 размера, то высота в 100 пикселей взявшаяся из ниоткуда - закономерна
    Ответ написан
  • Табульные вкладки с выводом соответствующих новостей для каждой вкладки?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    1. Сделайте запрос в базу данных, получите данные
    2. Сделайте верстку табов, есть решение с ява-скриптом и без. Если без - то перед вкладкой ставится невидимый input[type="radio"] а стили пишутся вида input ~ .tab {display: block};
    3. Разбейте данные запроса по вкладкам

    Проще сделать чем обьяснить.

    пс. Люблю ЦМС-ки за то, что вам нужно искать специалиста в этой ЦМС-ке. Они нормально так создают рабочие места))
    Ответ написан
    Комментировать
  • Почему при редактировании шаблона html слетают теги?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    У битрикса стоит защита, там есть модуль родной заводской кажется "сканер безопасности".
    Проще говоря на вашего пользователя нет прав размещать теги <script> в коде.
    Нужно попросить админа изменить права для вашего юзера.
    Ответ написан
    Комментировать
  • Как удалить ссылку?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Третий вариант - залогиниться под админом и справа сверху будет переключатель "режим редактирования". Штука не очень быстрая и удобная, зато позволяет точно определить где лежит искомый файл и сразу вызвать панельку для его изменения.
    Ответ написан
    Комментировать
  • Как показать верстку клиенту, не загружая на хостинг?

    gzhegow
    @gzhegow
    aka "ОбнимиБизнесмена"
    Скайп, демонстрация экрана
    TeamViewer
    Тупо отправить скриншот
    Купить собственный хостинг
    Закачать на github pages

    Любой из этих и я думаю еще десяток способов есть
    Ответ написан
    Комментировать
  • Для чего в БЭМ т.н. "первый уровень вложенности", то есть "блок__элемент"?

    gzhegow
    @gzhegow Автор вопроса
    aka "ОбнимиБизнесмена"
    Пораскинули мозгами с коллегами, плюс собрал ваши мнения.

    По итогу:
    • БЭМ есть методология/философия - набор рекомендаций, а не стандарт разработки, поскольку она ничего не запрещает, а просто существует и все XD
    • Правильно написанные стили (с БЭМ или без БЭМ) позволяют их использовать в других проектах без доработки
    • Возможно, принципы БЭМ уходят к теории баз данных, где для хранения деревьев используют таблицу с parent__child__level, описывая элемент на предположим третьем уровне вложенности, мы просто указываем 1_4 2_4 3_4, просто в нашем случае выбрасываются те связи, которые не оказывают влияния на дочерний элемент. Обратите внимания, что порядок подключения файлов стилей и является тем самым полем level - расположи мы их в неправильном порядке и результаты нас неприятно удивят
    • Следует стремится уменьшить число классов и их длину настолько насколько возможно, при этом оставив их читабельными
    • Каждый уровень вложенности увеличивает число работы во много раз, перед тем как сделать уровень вложенности - нужно очень хорошо все взвесить
    • Общепринятым решением является _один_модификатор_на_класс_ - но помните, что у DOM-элемента может быть много классов, просто если писать несколько модификаторов - число классов возрастет в n^2 раз согласно уровня вложенности - проще написать _theme_material и _color_red, _color_blue, _color_yellow в отдельных классах, чем писать каждый раз _theme_material_color_red, _theme_material_color_blue, _theme_material_color_yellow
    • БЭМ допускает использование дефисов в именах классов, если они состоят из нескольких слов, но предпочтительнее использовать "верблюд" или вообще писать все в одно слово, поскольку выделение двойным щелчком в редакторе кода никто не отменял, а дефисы сломают от этого все удовольствие (ну или придется обучать ваших спецов настраивать их любимый редактор)
    • Для совместимости с другими библиотеками рекомендуется использовать префикс для каждого проекта, так классы продакшена могут начинаться с "b-", например "b-menu__item", это должно окончательно устранить дублирование вашего и чужого кода, написанного опять же на БЭМ
    • Общий принцип работы в БЭМ такой: сначала определите из чего состоит большинство ваших элементов. Например - вы используете header, footer, content, info, top, bottom и тд из которых состоят ваши блоки на странице. Все. Запомните, что они у вас всегда элементы. Блоков с такими именами быть не должно, запутаетесь и сломаете мозги. То есть на сайте у вас не может быть блока .header, потому что вы определили __header как элемент. Теперь на вашем сайте есть блок например .page, и у .page__header - и есть ваш хедер от сайта. Потом вы создаете продукт .product, и .product__header - это верх продукта. Следующий момент: иногда неразумно писать 10 классов, если этот кусок верстки встречается 1 раз и не повторяется. Создайте дополнительный блок! Так например, в шапке сайта находится совершенно уникальное поле для поиска, которого не видно больше нигде на сайте (на сегодняшний день) - назовите его .b-page-header-search и разбейте на элементы как угодно. Вам не нужно писать .b-page-header__элемент.b-page-search__element, поскольку общего у них будет ну разве что position relative. Когда дойдете до следующего поиска - вернетесь назад и исправите этот, не нужно продумывать на будущее, вы будете терять кучу времени в изучении и все равно запутаетесь.


    Три способа реализации при БЭМ:
    Вариант 1. Без вложенности - имя элемента составляется из имени блока и элемента для избежания дублирования
    <style>
    .select__selectitem {...}
    .menu__selectitem {...}
    </style>
    <div class="menu">
      <div class="menu__menuitem">
        Menu item 3
        <div class="select">
          <div class="select__selectitem menu__selectitem">option1</div>
          <div class="select__selectitem menu__selectitem">option2</div>
        </div>
      </div>
    </div>


    Вариант 2. Со вложенностью, если есть модификатор - вложенность сделать можно, осознавая что при подключении стилей из других проектов также придется работать со вторым уровнем вложенности
    <style>
    .select_type_in-menu .select__item {...} // БЭМ не_запрещает вложенность, если есть модификатор
    </style>
    <div class="menu">
      <div class="menu__item">
        Menu item 3
        <div class="select select_type_in-menu">
          <div class="select__item">option1</div>
          <div class="select__item">option2</div>
        </div>
      </div>
    </div>


    Вариант 3. Без вложенности. Создание класса для каждого элемента с модификатором. Минус - дополнительные классы, увеличивающие сложность при чтении верстки
    <style>
    .select__item_type_in-menu {...}
    </style>
    <div class="menu">
      <div class="menu__item">
        Menu item 3
        <div class="select">
          <div class="select__item select__item_type_in-menu">option1</div>
          <div class="select__item">option2</div>
        </div>
      </div>
    </div>
    Ответ написан