Leaderboard

Ладно, пусть не react, а angular или ещё какой фреймворк, кому какой больше нравится. Но суть от этого не меняется. Ведь насколько проще было бы разрабатывать, насколько качественнее результат бы получался. Мысль посетила по мотивам недавно выполненного проекта. Вроде как обычный лэндинг, ничего особенного. Несколько форм для обратной связи, и всё. Но было пожелание со стороны заказчика задействовать более традиционные решения, поскольку что-то новое и прогрессивное программист-бэкендщик может не знать. И даже на этом проекте посещали странные мысли. Вот примеры задач: Форма обратной связи. На странице форма из трёх полей, но по нажатию на кнопку открывается всплывашка, а там ещё несколько. И это надо отослать на сервер. Аяксом, разумеется;Среди прочего в форме выбор интервала дат;а также динамические поля, которые создаются/удаляются нажатием на кнопку;разумеется, формам требуется валидация;разумеется, некоторые элементы формы имеют кастомное оформление. Селекты, чекбоксы всякие;а ещё кастомно оформленное поле количества. С кнопочками, увеличивающими/уменьшающими значение. И у него тоже валидация;форма в несколько шагов. От текущего шага зависит контент основной области, набор кнопок внизу, шкала прогресса;меню со скроллингом по странице;и это меню прибивается к верху, как только страница докручивается до такого положения, что меню касается верхнего края окна;слайдеры всякие, вкладки.В общем, всё достаточно обычно. Но в итоге получился довольно объёмный скрипт. Получилось подключение чуть ли не десятка jquery-плагинов, каждый из которых работает по своему. А наладить взаимодействие этих плагинов — отдельная песня. В случае же использования того же реакта получилось бы куда более стройно. Скрипт был бы ровно один. Каждый компонент содержал бы в себе свой функционал, а с другими взаимодействовал бы через api. К примеру: $("body").on("click", ".number_field .action_button", function(){ var $numberField = $(this).closest(".number_field"), $input = $numberField.find(".value"), value = parseInt($input.val()); if(isNaN(value) || value < 1) value = 1; if($(this).hasClass("increase")){ value++; $input.val(value); } if($(this).hasClass("decrease")){ value--; if(value > 0) $input.val(value); } })это же, откровенно говоря, жесть. Когда можно в коде писать: <NumberField value={form.some} min=1 />… а все детали реализации внутри компонента. а вот это: function getTourSetStep(stepNumber) { var stepIndex = stepNumber - 1, $popupGetTourSteps = $("#popup_get_tour_steps"), $popupGetTourContent = $("#popup_get_tour_content"), $popupGetTourButtons = $("#popup_get_tour_buttons") ; $popupGetTourSteps.find(".step").removeClass("active"); $popupGetTourSteps.find(".step:lt("+stepNumber+")").addClass("active"); $popupGetTourContent.find(".step:lt("+stepIndex+")").removeClass("active").addClass("completed"); $popupGetTourContent.find(".step:eq("+stepIndex+")").addClass("active").removeClass("completed"); $popupGetTourContent.find(".step:gt("+stepIndex+")").removeClass("active completed"); $popupGetTourButtons.find(".step:lt("+stepIndex+")").removeClass("active").addClass("completed"); $popupGetTourButtons.find(".step:eq("+stepIndex+")").addClass("active").removeClass("completed"); $popupGetTourButtons.find(".step:gt("+stepIndex+")").removeClass("active completed"); }— это же лютый трэш. Ведь можно <div className={classnames('part', {'active': $index==currenrStep, 'completed': $index < currentStep})}>…</div>а вот: function setMainMenuPosition() { var scrollTop = $(window).scrollTop(); if(scrollTop >= mainMenuDefaultPos) { if(!mainMenuFixed){ $mainMenu.addClass("fixed"); mainMenuFixed = true; } } else { if(mainMenuFixed){ $mainMenu.removeClass("fixed"); mainMenuFixed = false; } } }— приходится вводить глобальную переменную, чтобы не обращаться лишний раз к DOM, а не то тормозить начнёт. Но в том же реакте это автоматизировано, и о такой рутине можно вообще не задумываться. Может я чего не понимаю в жизни? Почему так? При всех очевидных плюсах современных фреймворков до сих пор продолжаем пользоваться тем, что хорошо разве что для того, чтобы один слайдер прикрутить. Что с нами?

Нашел темку про js литературу, ушел читать https://learn.javascript.ru/es-modern

obj.toString() – вызывает метод toString объекта obj (если таковой имеется, если такого метода нет, то ищет его в цепочке прототипов пока не упрется в Object.prototype.toStriing). Контекст – obj. Object.prototype.toString.call(obj) – гарантированно вызывает метод toString из Object.prototype. Контекст – obj.

Cпасибо ребят, буду дерзать дальше!

https://jsfiddle.net/BloomerWD/0tcqmd9w/ Попробуйте, поставить по 51% для скрытия

Дело в том, что flex элементы всегда "пляшут" от такого понятия, как оставшееся пространство. Как при распределении положительного (если контейнер вмещает все эелементы и еще остается пустота), так и отрицательного (как в вашем случае). Flex элементы при распределении этого пространства между собой смотрят на flex-basis (если не определен, то размер по умолчанию, как я понял) и flex-grow/flex-shrink. Если взять ваш пример, то тут следующее (для удобства я оставил фиксированную ширину контейнера, чтобы проще считать было и был понятен принцип, а также убрал margin): Размер контейнера = 800px Размер картинки = 500px Размер текста = 800px (так как его много и он заполнит весь контейнер как минимум одной строкой) Дальше считаем: Общее пространство = 500 (flex-grow = 1, поэтому 500 остается) + 800 = 1300px Коэффициент сжатия для первого элемента = 500 * 1 (flex-shrink по умолчанию = 1) / 1300 = 0,3846153846 Коэффициент для второго элемента = 800 * 1 / 1300 = 0.6153846154 Теперь отнимаем у элементов часть пространства, чтобы все влезло в контейнер: У первого: -500px * 0,3846153846 (отрицательное недостающее пространство у контейнера умножаем на полученный коэффициент) = -192.3076923 У второго: -500 * 0.6153846154 = -307.6923077 То есть первый элемент теперь будет ≈307px в ширину (500px - 192.3076923px), второй ≈492px. Размеры можно проверить с помощью DevTools. UPD: Если не хотите, чтобы картинку "плющило", поставьте ей flex-shrink: 0;

Пожалуйста, разместите код на jsfiddle Пожалуйста, никогда не делайте *{ margin:0; padding:0; }

Как вариант. UPD: Да, можно сверху на видео просто маску накинуть (SVG, например) или смотреть в сторону clip-path.

Мне кажется отличная идея чтобы потренироваться, а там как получится.

strip_tags и htmlspecialchars еще бы не мешало добавить к тому что из $_POST приходит. и это isset($_POST['name'])&&$_POST['name']!=""тоже самое что и: !empty($_POST['name'])