• Как объединить в laravel 8 postcss tailwind scss?

    @apotheosis91
    Можно использовать laravel-mix-tailwind
    // webpack.mix.js
    
    const mix = require('laravel-mix');
    require('laravel-mix-tailwind');
    
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css')
        .tailwind();
    Ответ написан
    Комментировать
  • Как один из блоков grid сделать на всю ширину?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    .block {
      grid-column-start: 1;
      grid-column-end: -1;
    }
    Ответ написан
    1 комментарий
  • Есть будущее у веб-дизайна?

    DevMan
    @DevMan
    если вы боитесь ИИ, то лучше прямо сейчас накрыться простынкой и медленно ползти в сторону кладбища.
    Ответ написан
    7 комментариев
  • Как переделать код под ООП?

    @TheCrossCarrier
    1. Вынести в переменные (а лучше в константы const) все элементы HTML. Например, как сделано с PanelMenuLinks
    2. Использовать вместо, например querySelectorAll("#block_panel_menu")[0] getElementById("block_panel_menu")
      А там, где надо нескольким элементам из массива присвоить значения, использовать циклы forEach

    3. Вразброс обращаетесь к элементам, разделите на блоки, делайте отступы логические (пустые строки) между блоками кода, чтоб было понятнее.
      С табуляцией у Вас что-то...


    Отредактировал Ваш код:

    const
      header = document.querySelector('header'),
      logotip = document.getElementById('logotip'),
      registion = document.getElementById('registion'),
      vhod = document.getElementById('vhod'),
      block_panel_menu = document.querySelectorAll('#block_panel_menu')
    
    function block_panel_menu_Height(height) {
      block_panel_menu.forEach(element => element.style.height = height + 'px')
    }
    
    // vhod.innerHTML = '<img style="width: 20px; height: 20px;" src="SiteImage/logo_vhod.svg">'
    let logo_vhod = document.createElement('img')
    logo_vhod.style.width = '20px'
    logo_vhod.style.height = '20px'
    logo_vhod.src = './SiteImage/logo_vhod.svg'
    
    window.onscroll = () => {
    
      if (pageYOffset > 100) {
        header.style.height = '50px'
    
        logotip.style.opacity = '0'
        logotip.style.marginTop = '-20px'
    
        registion.style.display = 'none'
    
        vhod.appendChild(logo_vhod)
        vhod.style.background = 'none'
        vhod.style.width = '30px'
    
        PanelMenuLinks.style.background = 'none'
        PanelMenuLinks.style.zIndex = '-1'
        PanelMenuLinks.style.marginTop = '-45px'
        PanelMenuLinks.style.fontSize = '13px'
        PanelMenuLinks.style.color = '#fff'
        PanelMenuLinks.style.borderTop = '0px'
    
        block_panel_menu_Height(49)
        block_panel_menu_children.style.top = '10px'
      }
      else {
        header.style.height = '70px'
    
        logotip.style.marginTop = '0px'
        logotip.style.opacity = '1'
    
        registion.style.display = 'block'
    
        vhod.innerText = 'Регистрация'
        vhod.style.background = '#626262'
        vhod.style.width = '100px'
    
        block_panel_menu_Height(70)
        block_panel_menu_children.style.top = '20px'
    
        PanelMenuLinks.style.marginTop = '0px'
        PanelMenuLinks.style.background = '#E7E7E7'
        PanelMenuLinks.style.borderTop = '10px solid #fff'
        PanelMenuLinks.style.fontSize = '18px'
        PanelMenuLinks.style.color = '#000'
      }
    }


    Мои рекомендации (кроме тех, что я описал выше):
    • Правильно использовать функции получения доступа к элементам HTML
    • ID обычно даётся единственному элементу в документе, в остальных случаях используется класс
    • Использовать innerText там где можно обойтись и без innerHTML
    • Создавать элементы средствами JS, а не встраиванием HTML кода через innerHTML
    • Пишите функции (пусть даже маленькие), если есть повторения в коде: так код будет и красивее и читабельнее и удобнее в использовании
    • Давать классам и id русские имена типа vhod -- не самая лучшая идея. Используйте переводчик, чтобы перевести интересующие Вас названия на английский.
    • Выберите способ именования переменных: либо block_panel_menu, либо blockPanelMenu. У Вас же встречаются оба варианта. В JavaScript принято использовать вариант, называемый Camel Case, то есть, второй вариант: blockPanelMenu.

    Ну а так по мелочи: можно использовать одинарные кавычки ' вместо двойных ";
    изучите стрелочные функции типа () => {} . Часто можно использовать именно их -- они и короче писать и не захламляют код лишними словами;
    Слушатели событий можно записать короткой записью, например: window.addEventListener('scroll', функция) можно написать window.onscroll = функция (в большинстве случаев просто добавляется 'on' в начало названия события); Желательно писать в начале скрипта строчку 'use strict' -- строгий режим -- гугл расскажет о нём лучше меня

    Задавайте вопросы, что не понятно, на всё отвечу!
    Ответ написан
    2 комментария
  • Почему строки не равны?

    @JohnDidact
    Нуб во всём
    600363e8a6e7f949345634.jpeg
    php 7.4

    У тебя какая версия php? Все ошибки и предупреждения показываешь? Что говорит var_dump()?
    var_dump(json_decode('{"str1":"x66xexq"}'));
    Ответ написан
    Комментировать
  • Как получить красивый url в Laravel?

    neuotq
    @neuotq
    Прокрастинация
    Вы используете getRouteKeyName(), вам тогда нужно изменить метод show, примерно так:
    public function show($ad)
    {   
        return view('ad', compact('ad'));
    }

    и в роутере тогда тоже для красоты
    Route::get('/{ad}', [App\Http\Controllers\AdController::class, 'show'])->name('show');

    Либо, убирайте getRouteKeyName, которым вы задаёте поле по которому вычисляется нужная модель(по дефолту это id)
    Ответ написан
    Комментировать
  • Как в компоненте вывести загруженные данные?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    // store
    export const state = () => ({
    	functions: []
    });
    
    export const actions = {
      async loadFunction({ commit }) {
        try {
          const plans = await Parse.Cloud.run('getFunction', {}, {});
          commit('setFunction', plans);
        } catch (error) {
          commit('setFunction', null);
          return null;
        }
      },
    };
    
    export const mutations = {
    	setFunction: (state, payload) => {
    		state.functions = payload;
    	}
    }


    // Ваш копонент, где вы отображаете TItem
    <template>
    	<div>
    		<TItem
              v-for="(item, index) in functions"
              :key="index"
              :tplan="item"
              @delete="deleteItem(index)"
            />
    	</div>
    </template>
    
    <script>
    import { mapState } from 'vuex'
    
    export default {
    	//....
    	computed: {
    		...mapState([
    			'functions'
    		])
    	}
    	//...
    }
    </script>
    Ответ написан
    Комментировать
  • Как настроит webpack 5 для vue 3?

    profesor08
    @profesor08
    Слишком много зависимостей. Есть шанс, что это дело никогда не заведется, или заведется но не скоро, или работать будет не так как надо. Пятая версия вебпака значительно отличается от предыдущей.

    Да и нафига страдать этой фигней со сборкой. Есть https://cli.vuejs.org/ там все за тебя настроили уже.
    Ответ написан
    2 комментария
  • С какой версии лучше начинать изучать Laravel?

    delphinpro
    @delphinpro Куратор тега Laravel
    frontend developer
    С актуальной. Т.е. с восьмой.
    По семерке тоже полно туториалов, а они не сильно отличаются. По крайней мере в основе своей.
    Ответ написан
    Комментировать
  • Как работать с часовыми поясами в JS?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    Всё просто. На бэкэнде всегда храните и используйте UTC. На фронте всегда работайте с локальным временем.
    Ответ написан
    1 комментарий
  • Как "защитить" лендинг от скачивания html-кода всей страницы?

    Aetae
    @Aetae
    Тлен
    Никак.
    Ответ написан
    Комментировать
  • Как найти в массиве объектов элементы, которые в одном из параметров имеет большее значение, чем у других элементов?

    0xD34F
    @0xD34F Куратор тега JavaScript
    1. Собрать из вложенных массивов один общий
    2. Отсортировать полученный массив
    3. Взять сколько надо первых/последних (зависит от направления сортировки) элементов

    const result = arr
      .flatMap(n => n.subcategories)
      .sort((a, b) => a.rating - b.rating)
      .slice(-2);
    Ответ написан
    Комментировать
  • Как все же настроить даты/время в laravel?

    pLavrenov
    @pLavrenov
    Разработка сайтов
    Попробуй передавать даты, везде, в формате ISO8601 в базе данных как и есть надо использовать UTC (иначе это превратится в проблему в будущем). Moment и Carbon умеют работать с этим форматом.

    Скорее всего когда тестируешь передается сервер тайм который на компьютере. Если передать ISO8601 то он сам сконвертируется в UTC. Проблема в том что формат 'Y-m-d H:i:s' не передает таймзон. В целом это надо просто взять за стандарт и использовать в каждом проекте такую схему.

    Ну и сделать валидатор на iso. (странно что этого еще нет в коробке)

    Validator::extend('iso_date', 'App\Validators\IsoDateValidator@validate');


    class IsoDateValidator
    {
        public function validate($attribute, $value, $parameters, $validator)
        {
            if (is_array($parameters) && in_array('utc', $parameters)) {
                $regex = '/^(\d{4}(?!\d{2}\b))((-?)((0[1-9]|1[0-2])(\3([12]\d|0[1-9]|3[01]))?|W([0-4]\d|5[0-2])(-?[1-7])?|(00[1-9]|0[1-9]\d|[12]\d{2}|3([0-5]\d|6[1-6])))([T]((([01]\d|2[0-3])((:?)[0-5]\d)?|24\:?00)([\.,]\d+(?!:))?)?(\17[0-5]\d([\.,]\d+)?)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)))?$/';
            } else {
                // 2012-04-23T18:25:43.511Z
                // Regex from https://www.myintervals.com/blog/2009/05/20/iso-8601-date-validation-that-doesnt-suck/
                $regex = '/^([\+-]?\d{4}(?!\d{2}\b))((-?)((0[1-9]|1[0-2])(\3([12]\d|0[1-9]|3[01]))?|W([0-4]\d|5[0-2])(-?[1-7])?|(00[1-9]|0[1-9]\d|[12]\d{2}|3([0-5]\d|6[1-6])))([T\s]((([01]\d|2[0-3])((:?)[0-5]\d)?|24\:?00)([\.,]\d+(?!:))?)?(\17[0-5]\d([\.,]\d+)?)?([zZ]|([\+-])([01]\d|2[0-3]):?([0-5]\d)?)?)?)?$/';
            }
            return preg_match($regex, $value) ? true : false;
        }
    }
    Ответ написан
    1 комментарий
  • Как в php взять данные из кнопки javascript?

    @66demon666
    По навыкам джун - по факту безработный
    Ну как вариант создать скрытые поля в форме для этих кнопок
    Ответ написан
    Комментировать
  • Рандомное число с 4.8 до 5.0?

    samodum
    @samodum
    Какой вопрос - такой и ответ
    Можно ещё
    rand()*0.2+4.8

    Школьное упражнение по информатике
    Ответ написан
    Комментировать
  • Как получить реальные 100vh на смартфоне?

    SkiperX
    @SkiperX Куратор тега CSS
    Решение на js
    /*Viewport Height Correction
        https://github.com/Faisal-Manzer/postcss-viewport-height-correction
         .foo {
                height: 100vh;
                height: calc(var(--vh, 1vh) * 100); //
          }
        */
        var customViewportCorrectionVariable = 'vh';
        function setViewportProperty(doc) {
            var prevClientHeight;
            var customVar = '--' + ( customViewportCorrectionVariable || 'vh' );
            function handleResize() {
                var clientHeight = doc.clientHeight;
                if (clientHeight === prevClientHeight) return;
                requestAnimationFrame(function updateViewportHeight(){
                    doc.style.setProperty(customVar, (clientHeight * 0.01) + 'px');
                    prevClientHeight = clientHeight;
                });
            }
            handleResize();
            return handleResize;
        }
        window.addEventListener('resize', setViewportProperty(document.documentElement));
        /*/Viewport Height Correction*/
    Ответ написан
    Комментировать
  • Почему не сохраняются файлы на диске?

    @Kostik_1993
    Web Developer
    только не отправляйте в Google или документации, с ними я уже ознакомлён.

    Я пожалуй все таки это сделаю)) https://www.google.com/search?q=fopen()%3A+Filenam...
    Ответ написан
    3 комментария
  • Устарел ли getElementsBy* и чем лучше querrySelector?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Вот народ ушел в спор о производительности, но никто даже не попытался разобраться, а что под капотом... Производительность ведь искусственными бенчмарками меряют, ага...
    Что ж, времена сейчас такие
    многие на работу кодеров берут, которые даже интереса не имеют в глубь копать. Инженеров брать... - это устаревший подход, как выразился автор "популярного сайта", который прочел автор вопроса. Инженеры они дорогие, и найти их сложно, лучше кодер, пусть и не желающий на работе мозг включать, не говоря уж о желании в устройстве инструментов разбираться.

    Говорить о том, что некие фичи устарели - крайне глупо, если знать, что они ведут себя иначе, чем более модные альтернативы. Предлагаю немного разобраться и начать с того что на поверхности:
    - getElementById и querySelector возвращают конкретную ноду в единственном экземпляре
    - querySelectorAll и getElementsByName возвращает статичную коллекцию NodeList
    - getElementsByClassName, getElementsByTagName и getElementsByTagNameNS возвращают динамическую коллекцию HTMLCollection
    Как видим результат у разного апи различен, а значит и говорить, что некоторые из них устарели - глупо.
    Правда тут есть забавный момент
    в спеке HTMLCollection отмечен как "исторический артефакт", который не стоит использовать при проектировании нового апи. Но заметка эта не для веб-разработчиков, а для тех кто проектирует новое DOM апи.

    С устареванием вроде разобрались, но в вопросе еще есть часть "чем лучше". И тут есть теория, что getElementsBy* быстрее querySelector*. Чисто теоретически звучит логично, querySelector* должен делать полный поиск по дереву со сложностью O(n), а getElementsBy* могут использовать индексы на базе HashMap и получать данные со сложностью O(1), тут и особенности HTMLCollection будут кстати, так как можно не копировать коллекцию, а отдавать одну и ту же (и браузеры действительно так делают). Но без пруфов теория так и останется теорией.
    И бенчмарки - так себе пруф
    Хотя направлять инвесторов в нужную сторону - самое то. Проблема бенчмарков, что можно написать их так, что любая из сравниваемых сторон заметно обгонит другую. Дело техники. Например BubbleSort с O(n2) при определенных условиях в чистую уделывает MergeSort и QuickSort с их O(n×log2n), а именно при n=20 или меньше, 400 простых memswap в наглую рвут 87 рекурсивных операций с memcpy внутри
    Гораздо лучше тут выглядят исходники. И я выбрал исходники chromium, как самого распространенного:
    - getElementsBy* методы все как один обращаются к некой шаблонной функции EnsureCachedCollection, которая в свою очередь обращается к некоему NodeLists кэшу, устроенному внутри действительно как HashMap или что-то наподобие. Никакого поиска тут нет, просто берутся готовые значения, сложность у всего этого действительно константная O(1).
    - querySelector* используют абстракцию SelectorQuery, которая и в самом деле делает поиск по DOM. Но данный поиск неплохо оптимизирован и обвешан кэшами. Притом CSSOM использует абсолютно тот же алгоритм поиска DOM нод для каждого селектора в css.
    Для примера
    в подключенных на странице этого вопроса стилях более 1600 правил (некоторые из которых потенциально могут содержать несколько селекторов), полная обработка стилей из этого файла заняла на моей машине (Ryzen 3600 в стоке) чуть больше 9 мс. Если все это немного округлить, то понадобится 15000 querySelectorAll подряд, притом с разными селекторами, чтоб был промах кэша, дабы я ощутил заметную глазу задержку в ~100мс


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

    ipfgr
    @ipfgr
    Js like hobby
    Самый простой вариант с которого можете начать это добавить кнопку в HTML и на нее повесить функцию.
    <button onclick="reply()">Start Count</button>

    Затем в подключенном к HTML js файле создаем эту функцию.
    Допустим через setInterval
    let i=0 // переменная для счетчика
    function reply(){ // Наша функция
      setInterval(function () {
            let counted = (200/60/60) *i  // считаем сколько заработали за каждую секунду и записываем значение в переменную counted
            i++ //Прибавляем секунду к счетчику
            document.getElementById("demo").innerHTML = "Заработано:" +  JSON.stringify(counted.toFixed(2)) + " рублей"; // вывод значения на станицу в элемент с id (demo)  ( в HTML в нужном месте, где хотим выводить данные вставляем  <p id="demo"></p>
        } ,1000) // Интервал в 1 секунду
    
    }
    Ответ написан
    4 комментария
  • Стоит ли тратить время на изучение float?

    @n1ksON
    мидл
    Для общего развития можно научиться верстать на флоатах.
    Но сейчас все конечно верстают на флексах, и переходят на гриды.
    С Новым Годом!
    Ответ написан
    Комментировать