• Window.getComputedStyle: Argument 1 is not an object — Как исправить ошибку?

    Stalker_RED
    @Stalker_RED
    Проблема в том, что первый аргумент передаваемый в метод getComputedStyle не является объектом.
    А все остальные подробности вы предлагаете угадать?

    подсказка: в консоли, в сообщении об ошибке можно кликнуть на номер строки.
    Ответ написан
    2 комментария
  • Как сделать чтоб обработчик сработал один раз и сразу удалился?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Вот тут почитайте https://developer.mozilla.org/ru/docs/Web/API/Even... в аргументе options есть параметр once, его установите в true
    Вот пример
    Ответ написан
    Комментировать
  • Как сделать такой Range slider?

    @Flying
    Посмотрите на noUiSlider, он (как следует из названия) весьма хорошо кастомизируется, обладает богатым функционалом и не имеет ненужных зависимостей.
    Ответ написан
    Комментировать
  • Какой необходимый уровень знаний для junior React.js Разработчика?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

    не включая основы js

    Извините, но стандартная задача, про "напишите функуцию add, которая при вызове add(1)(2) вернет 3" - многих положила на лопатки =) Поэтому будьте готовы..

    React
    0) Какую проблему решает react ?
    1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
    2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента...
    3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит "обновлять state на основе props"?
    4) Что будет если вызвать this.setState в render методе компонента?
    5) зачем нужен componenWIllUnmount, приведите пример..
    6) Контролируемые, не контролируемые компоненты
    7) Как организовать роутинг в реакт приложении? (ответ: взять react-router - подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
    8) Зачем нужны propTypes? Что происходит с ними в production сборке?
    9) Как можно удобно "отлаживать" чужой код приложения, написанного на react (намек в сторону React devtools)
    ...

    Redux
    0) Какую проблему решает redux?
    1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое "действие", а что такое "создатель действия"...
    2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
    3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить "терминами" - асинхронный aciton)
    4) Как компоненты приложения получают "пропсы" из "стора"?*
    5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
    6) Почему в reducer'ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
    6.5) А так же, "как в js вообще это работает?". Например:
    let obj1 { name: 'Test', age: 100 }
    let obj2 = obj1
    obj2.name = 'Test_new'

    Что будет в obj1, почему? В каких случаях объекты могут быть равны?
    7) Что возвращает функция connect (из react-redux)?
    ...

    Общее:
    0) package.json
    1) Webpack, gulp, etc...
    2) node.js
    3) promise

    Что-нибудь практическое:
    1) Как бы вы валидировали форму, если ошибки валидации приходят после submit'a ее на сервер..
    2) Почему не работает следующий код, сделайте чтобы работало
    ...
    На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна - не беда, многие и на половину ответить не могут.

    p.s. возможно дополню...
    p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.
    Ответ написан
    31 комментарий
  • Какой хороший учебник/видеокурс по php вы можете посоветовать?

    @Dilun
    Попробуйте родную документацию (php.net/manual/ru/). Раз хорошо знаете процедурный стиль, то несложно на ООП перейти, плюс документация хорошо написана. Еще как вариант абстрагироваться от языка и просто изучить ООП, основных постулатов там раз, два и обчелся, а потом само доходит. Главное основы понять
    Ответ написан
    Комментировать
  • Как создать виджет сообщества в vk?

    @Gesparo Автор вопроса
    Fullstack разработчик
    Итак, задачу все же удалось решить. Опишу способ решения этой задачи для тех, кто подписался и для тех, кто столкнется с аналогичной задачей.

    Предварительные условия:
    Необходимо создать iframe приложение и добавить его в сообщество. Насколько я понял - это необходимо только для создания ключа ( чтобы можно было управлять виджетом на стороне сервера ) и первоначального добавления виджета на страницу.

    Iframe приложение должно "смотреть" на страницу где будет вот такой вот код:
    index.html:
    <!doctype html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <!-- Подключаем jquery -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" defer></script>
        <!-- Подключаем VK -->
        <script src="https://vk.com/js/api/xd_connection.js?2"  type="text/javascript" defer></script>	
    	
        <!-- Подключаем скрипт регулировки высоты -->
        <script src="/vk_height.js" defer></script>
    	
    </head>
    <body style='text-align:center;padding-top:50px;' id='body'>
    	<a href="javascript:void(0)" id="set-permission">Создать ключ доступа к виждету сообщества</a>
    	<br>
    	<br>
    	<a href="javascript:void(0)" id="set-widget">Добавить виждет в сообщество</a>
    </body>
    </html>


    vk_height.js:
    // инициализация вк
    VK.init(, function() { 
         console.log('Init successful');
      }, function() { 
         console.log('Error init');
    }, '5.73'); 
    
    // функция дня изменения размера окна в зависимости от содержимого страницы
    function autosize(width) {
        //Проверяем элемент body на наличие.
        if (!document.getElementById('body')) {
            alert('error');
            return;
        }
        // Успешно ли подключен ВК скрипт
        if (typeof VK.callMethod != 'undefined') {
            /*
            Вызываем функцию vk js api для управления окном.
            VK.callMethod('функция', параметры)
            В данном случае у нас - VK.callMethod('изменение_размеров_окна', ширина, высота);
            Так же добавляем еще 60 пикселей что бы было небольшое расстояние.
            */
            VK.callMethod('resizeWindow', 840, document.getElementById('body').clientHeight + 60);
        } else {
            alert('error #2');
        }
    }
    
    $(document).ready( function(){
        //Вызываем функцию регулировки высоты каждые пол секунды.
        setInterval('autosize(607)', 500); 
    	
    	$('#set-permission').on('click', function(e) {
    		e.preventDefault();
    		
    		// запрос прав доступа для дальнейшего обновления данных посредством крона
    		// после запрса создается ключ, который можно посмотреть на странице управления сообществом
    		// его и нунжно будет применить для обновления данных в виджете через сервер
    		// дока прав тут https://vk.com/dev/permissions
    		// дока метода тут https://vk.com/dev/clientapi?f=3.+showGroupSettingsBox
    		VK.callMethod("showGroupSettingsBox", 64);
    	});
    	
    	$('#set-widget').on('click', function(e) {
    		e.preventDefault();
    		
    		// запрос установки виджета
    		// типы виджетов можно глянуть тут https://vk.com/dev/objects/appWidget
    		// как подключить виджет можно глянуть тут https://vk.com/dev/apps_widgets
    		VK.callMethod('showAppWidgetPreviewBox', 'text', 'return {' + 
    			'"title": "Цитата",' + 
    			'"text": "Текст цитаты"' + 
    		'};');
    		
    		// типы событий, генерируемых после выполнения запроса на установку виджета можно глянуть тут https://vk.com/dev/apps_widgets
    		// работа с событиями вк https://vk.com/dev/Javascript_SDK?f=4.1.+VK.addCallback
    		VK.addCallback('onAppWidgetPreviewSuccess', function f(data){ 
    			alert("Виджет успешно добавлен"); 
    		});
    	});	
    	
    });


    После создания данных страниц у вас появится возмжность создать ключ (который будет доступен из управления сообществом) и создание простого виджета

    Серверную часть я полностью описывать не буду и покажу только само тело запроса, главное запросить данные через culr по ссылке https://api.vk.com/method/ (Вот гайд)

    Сам запрос:
    $api = new \App\Api\Main\Vk(['access_token' => 'ключ_корый_мы_сгенерировали_первой_кнопкой']);
        $api->request(
            'appWidgets.update',
            [
                'type' => 'list',
                'code' => '
                    var users = API.users.get({"user_ids": [11111, 22222, 33333]});
                    
                    return { 
                      "title": "Конкурс за призы", 
                      "rows": [
                                  { 
                                      "title": users[0].first_name + " " + users[0].last_name, 
                                      "icon_id": "id11111",
                                      "descr" : "1 место - 2000 баллов",
                                      "button" : "Результаты конкурса",
                                      "button_url" : "https://vk.com/link"
                                  },
                                  { 
                                      "title": users[1].first_name + " " + users[1].last_name, 
                                      "icon_id": "id2222",
                                      "descr" : "2 место - 1890 баллов",
                                      "button" : "Правила и призы",
                                      "button_url" : "https://vk.com/link"
                                  },
                                  { 
                                      "title": users[2].first_name + " " + users[2].last_name, 
                                      "icon_id": "id22222",
                                      "descr" : "3 место - 1890 баллов",
                                      "button" : "Хочу на марафон",
                                      "button_url" : "https://vk.com/link"
                                  }
                             ]
                };'
            ]
        );


    Подробности о теле запроса можно узнать тут
    А как его правильно писать - тут

    Вышенаписанный php код можно добавить в крон, автоматизировать и наслаждаться жизнью. И на последок - вот пример рабочего кода в сообществе (сорян за стили, и некоторые замазанные части, мне лень было делать нормальный скрин):
    5a9e7f04c5275110898228.png
    Ответ написан
    5 комментариев
  • Как реализовать глобальный файл стилей в React + WEBPACK + CSS Modules, при этом чтоб он импортировался единожды?

    @Mycolaos
    1) https://webpack.js.org/guides/asset-management/#lo...
    2) https://webpack.js.org/loaders/sass-loader/

    Вроде как, все предельно просто.

    А зачем вам в каждом компоненте _global.scss? Импортировать в корневой файл не судьба?
    Ответ написан
    Комментировать
  • Как работать с суб-доменами в react-router?

    modestfake
    @modestfake
    The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception.

    Источник

    Нельзя в pathname передать полностью новый URL.
    Вот структура ссылки:
    https://sub.example.com/pagename?param1=a&param2=b#link
    https - протокол
    sub - субдомен
    example.com - домен
    pagename - это и есть pathname
    ?param1=a&param2=b#link - query параметры

    При помощи React-router 4 вы можете менять только pathname, параметр так и называется.

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

    <a href={`${subdomain}.example.com`}></a>
    или
    window.location = `${subdomain}.example.com`
    Ответ написан
    3 комментария
  • Можете ли оценить работу верстальщика на моем сайте?

    Скажите, а дизайн вам рисовал тоже один из топ 10 дизайнеров на бирже?=)
    Если серьезно - как верстка может быть ужасной, если она соответствует макету? Если что-то не соответствует тз, например адаптивность - требуйте дорабатывать.
    Ответ написан
    5 комментариев
  • Как в React + Redux обмениваться данными между компонентами?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Как в React + Redux обмениваться данными между компонентами?

    Обмен данными происходит через один общий объект состояния store.
    Вам нужно "приконнектить" оба компонента с помощью:
    connect(mapStateToProps, mapDispatchToProps)(ComponentName)

    и тогда они у вас будут слушать изменения в сторе (за счет, того, что вы передадите в функции mapStateToProps), а так же смогут уметь передавать изменения в стор (с помощью dispatch функции, которую вы будете вызывать внутри mapDispatchToProps).

    К сожалению, объяснение очень сухое и может быть не понятным, но и ваш вопрос выглядит как: ребята, объясните мне (желательно кодом) как работает redux. Лучше пройти какоий-нибудь туториал внимательно и такой вопрос сам по себе отпадет.

    Если немного упростить, то вам нужно будет:
    из компонента Settings вызвать action creator (через dispatch)
    в компоненте User это дело поймать (поймаете с помощью редьюсера, на который будет "натравлена" функция mapStateToProps)
    Ответ написан
    1 комментарий
  • Как проверить, что значение переменной совпадает с одним из множества значений?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const cities = [ 'Москва', 'Санкт-Петербург', 'Севастополь' ];
    if (cities.includes(geolocation.city)) {
      ...
    Ответ написан
    3 комментария
  • Почему не работает валидация формы в JS?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Сбрасывайте значение validate перед проверкой:

    validate = true;
    if (/* проверка введённых данных */) {
      validate = false;
    }

    Или вообще избавьтесь от условного оператора (надо только будет инвертировать результат, чтобы проверка выдавала true, когда всё хорошо):

    validate = /* проверка введённых данных */
    Ответ написан
    1 комментарий
  • Где получить практику применения JS для создания веб-сайтов?

    Alexlexandr
    @Alexlexandr
    Если хотите, у меня есть небольшая задача.
    Нужно делать парсинг файлов , размер всегда стандартный, восемькилобайт.
    Там записан архив журнала работы устройства за месяц или около того.
    Нужно выбирать из него данные, строить из них графики.
    Отмечать точки дискретных событий (Вкл, Выкл, Авария питания, Пуск, Стоп, превышение давления и т.п.)
    Все это представить в графическом виде.
    И в табличном виде (с сортировкой по времени или по времени и типам событий).

    Файл должен загружать на страничке сервиса пользователь. Хранить файлы не нужно, но результаты обработки нужно выгружать пользователю.
    В виде картинок графиков.
    И цифровом виде, например в виде таблицы Excel.
    Логиниться тоже не нужно.
    Можем прикинуть сроки и деньги. И вы попробуете силы на реальной задаче.
    Ответ написан
    2 комментария
  • Что лучше изучать для использования с Laravel, React.js или Vue.js?

    alvvi
    @alvvi
    export default apathy;
    А хорошо ли интегрируется React.js с PHP фреймворком Laravel?
    И если да, то насколько ?

    Так же как с любым другим PHP фреймоврокм, нормально.

    Vue.js умеет все тоже самое что и React.js ?

    Да

    А в чем особенность React.js и Vue.js ?

    В доках обоих фреймворков прекрасно все описано.

    Когда я увидел чарты (график) производительности React.js я офигел ! Он очень мощный!
    А если использовать React.js с Laravel будут такие же результаты?

    Можете показать пальцем на того человека, который убедил вас что производительность фронтенд фреймворка может быть прямо связана с бекенд фреймворком? Палкой хочу ударить просто.

    И прошу вас или объяснить или же оставить ссылку про то, как же все таки происходит интеграция между двумя сторонами на том фреймворке (React or Vue) который предпочитаете.

    REST/GraphQL API, 1000 раз спрашивали уже

    Добавлю, что я знаю ES6, уже писал на Koa используя async/await, у меня достаточно хороший опыт/практика в разработке на NODE.JS.

    Тогда забудьте про PHP и его фреймворки. Зачем они вам, если REST для SPA прекрасно пишется на ноде?

    Прошу вас отвечать поподробнее на вопросы.

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

    Akdmeh
    @Akdmeh
    PHP, Yii2, Music
    Те, кто просто работает над типичными сайтами и кодеры-одиночки - просто слишком заняты получением прибыли и им неинтересно расписывать каждый раз: "это все отлично, но мне jQuery хватает"; адепты фреймворков более активны в сети, потому что занимаются чем-то сравни религиозной пропаганде в хорошем смысле.
    Ознакомится с фреймворками однозначно нужно, ради этого и пишутся статьи - авторы хотят показать новый, более оптимальный путь для динамических веб-интерфейсов, код, который проще сопровождать, в котором меньше будет багов, проще расширить функционал, над которым могут работать несколько человек без страха, что мелкое изменение повлечет падение интерфейса в другом, неожиданном месте.
    Приведу понятную аналогию. Ведь можно использовать исключительно топор для заготовки деревьев. Многие до сих пор так делают. Но для промышленных масштабов выгоднее использовать если не целые комбайны, которые заготавливают дерево за несколько минут, так хотя бы электропилы.
    Те, кто использует электропилы пишут: "люди, 21 век на дворе. Выбросьте вы свои топоры, это каменный век, когда электричесва и бензина не было! Используйте электропилы, пусть ими нужно уметь пользоваться, они дороже в обслуживании и им нужно электричество".
    Но если вам нужно время от времени вырубать два дерева и вам хватает топора - дальше рубайте топором и посматривайте на электропилу - будет время - почему бы ее не купить и не использовать, действительно удобнее!
    Ответ написан
    2 комментария
  • Что посоветуете почитать для левелапа в JS?

    Negwereth
    @Negwereth
    lvivcss.com.ua
    https://habrahabr.ru/post/135897/
    https://books.google.com.ua/books?id=iyIvGGp2550C&...

    Для начала. Крутость в программировании не от того берётся, на каком языке пишешь, а от того, как ты пишешь.
    Ответ написан
    Комментировать
  • Почему не работает событие js кода?

    lazalu68
    @lazalu68
    Salmon
    setTimeout(function avtorization() {
      var avt = document.getElementsByName('avtoriz');
      if (avt.style.display != "block") { 
            avt.style.display = "block";
        }
        else avt.style.display = "none";
    },1000);


    Эта конструкция выполняет именованную функцию avtorization минимум через 1000мс после собственного выполнения. Она не объявляет эту функцию в области видимости, про специфику работы function expression/declaration читайте в интернетах. Собственно, по этой причине avtorization is not defined.

    К тому же обработчики гораздо удобней устанавливать с помощью element.addEventListener( event_name, handler );
    Ответ написан
    2 комментария
  • Разработка игр

    damirazo
    @damirazo
    Software developer
    Если для 3d игр, то могу порекомендовать движок Unity3D. Для создания простой игры не нужно особых знаний, писать можно на C# или вариациях с синтаксисом JavaScript и Python (Boo). Есть собственный редактор, позволяющий «рисовать» уровни и тут же их тестировать в игре. Также на сайте куча документации и примеры для разных типов игр. Есть возможность скомпилировать игру под Windows и Mac OS. Есть также платная версия редактора, имеющая чуть больше возможностей и компиляцию в iOS и Android.

    Для 2d игр можно использовать XNA (его можно использовать и для написания 3d игр, но несколько сложнее). Это не готовый движок, а фреймворк, поэтому тут уже придется много работать с кодом. Также есть куча документации и примеров. Фреймворк имеет отличную производительность, я лично экспериментировал с миллионами взаимодействующими объектами в кадре без особого падения производительности. Хотя тут уже зависит от того, как вы сами оптимизируете свой код. Для написания используется C#, есть своя IDE в комлекте, основанная на Visual Studio. Могу порекомендовать также физический движок Farseer, имеющий отличную совместимость с XNA.

    Из общего: нужны знания в математике, в особенности в геометрии. Много придется работать с физикой, особенно если решите написать свой физический движок. Хотя даже для простого движения персонажа это пригодится.
    Ответ написан
    Комментировать
  • Как лучше спроектировать react приложение?

    k12th
    @k12th
    console.log(`You're pulling my leg, right?`);
    Flux/Redux/MobX не рассматривали? С этими вещами гораздо веселее жить в реакте (хотя, конечно, порог обучения присутствует).

    В принципе, то, что вы ищете, называется паттерн Dependency Injection. Можете поискать какую-то реализацию для React, но, в общем-то, react-redux именно это и делает.
    Ответ написан
    3 комментария