• Как определить, впервые человек зашёл на сайт?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Вообще полной убедительности в этом добиться сложно. В порно-режиме кэш и локальное хранилище всегда пусты. Лучший способ добиться этого, не прибегая к backend - это localStorage.
    Click here to see the truth
    В нём не следует хранить данные, которые представляют какую-либо ценность. Об этом стоит помнить
    Ответ написан
    Комментировать
  • Как можно обновить iframe на jQuery при нажатии на ссылку?

    nalomenko
    @nalomenko
    Руководитель отдела разработок в студии «Lava»
    Есть несколько способов

    //Обновить один конкретный iFrame
    $('#iframe')[0].contentWindow.location.reload(true);
     
    //Обновить все iFrame на странице
    $('iframe').each(function() {
      this.contentWindow.location.reload(true);
    });
    
    //Еще один способ обновить все iFrame
    $('iframe').attr('src', $('iframe').attr('src'));
    Ответ написан
    Комментировать
  • Что лучше canvas или svg?

    @Sashjkeee Куратор тега CSS
    f-e
    Плюсы Canvas:
    • Высокая производительность при отрисовке любых 2D объектов.
    • Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
    • Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
    Плюсы SVG:
    • Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
    • SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
    • Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
    • SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
    Минусы Canvas
    • Отрисовка основана на пикселях.
    • Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
    • Слабые возможности по рендерингу текста.
    • Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
    • HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
    Минусы svg
    • Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
    • Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
    Вывод
    HTML 5 Canvas следует использовать для:
    1. Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
    2. Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
    3. Анализа изображений: создания гистограмм и т.п.
    4. Создания игровой графики, такой как спрайты и фоны.
    SVG следует использовать для:
    1. Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
    2. Высокоинтерактивных анимированных пользовательских интерфейсов.
    3. Графиков и диаграмм.
    4. Редактирования векторных изображений.
    честно скопипастил
    Ответ написан
    Комментировать
  • Как правильно верстать адаптивно сайт?

    @dmitry_pacification
    Трудности рождают прорыв
    Есть 2 подхода к верстке адаптивов:
    mobile-first и desktop-first
    Бородатые разрабы в большим опытом рекомендуют начинать с mobile-first, ибо так меньше багов.
    Лично мне как новичку во фронтенде проще с десктопа начинать, патамушта нагляднее.
    Но, вот от одного клевого middle-frontend`ера услышал такой интересный подход:
    Верстаешь мобайл ферст, юзаешь при этом только display-block элементы, (потому что по сути все элементы в мобильной версии расположены друг под другом, а это достигается блочными элементами) потом когда доходишь до планшета и десктопа, css`ом растаскиваешь элементы по страничке так, как рисовал дизайнер.

    Попробовал такой подход, и почувствовал как +100 XP и 1lvl Up добавились ко мне))

    // Я юзаю SASS. Клевая штука, значительно ускоряет процесс разработки, и подружившись с миксинами ради прикола я даже попробовал свою сетку сделать. Препроцессоры очень крутая штука! Sass я освоил за неделю в перерывах между рабочими тасками))
    Ответ написан
    Комментировать
  • Какой необходимый уровень знаний для 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-собеседования вопросы.
    Ответ написан
    30 комментариев
  • В чем могут помочь js фреймворки(React, Angular)?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    C MVC фреймворками все понятно, но они меня не интересуют. А что делать с инструментами, нацеленными больше на фронтенд (React, Angular) ?


    Открою вам страшную тайну - MVC фреймворки как раз на фронтэнд и нацелены, а не на бэкэнд.

    ReactJS - библиотека, а не фреймворк. Это вопервых. И решает эта библиотека задачу оптимизации взаимодействия с DOM при связывании данных между представлением и моделью данных.

    Angular - полноценный фреймворк, к которому можно подключить тот же React для вьюх. Используют его в основном при реализации Single Page Application-ов.

    Были ли у вас практические задачи, с которыми мог справиться только js фреймворк? Какие?

    Все задачи можно решить на чем угодно. Вопрос в сроках и кривости. Angular позволяет организовать структуру приложения, разделить его на слои, предоставляет ViewModel... все то что писать с нуля маленький ад и скучно. Ну и опять же все можно покрыть тестами и т.д.

    Могут ли быть полезны данные инструменты в совместной работе с Rails, например?

    Если брать ангуляр - я его использую только в контексте SPA. Это может быть не все приложение а только какая-то его часть но все же... А для SPA разницы нет вообще на чем бэкэнд реализован. От бэкэнда нужна только апишка.

    Реакт же можно использовать в принципе для построения view на клиенте. Так что можно и его юзать. Зависит от задачи. Скажем если в задачи входит организация работы жирной формы - то лучше взять knockout.js. А если вам нужно рендрить какие-то данные в реалтайме - можно вооружиться реактом.

    Нужно ли вообще тратить время и искать себе задачи, которые можно решить привычным jQuery, который в большей степени знают все (вопрос дальнейшей поддержки) ?

    Куча народу знает jQuery но не знает JS. И это грусть и печаль. Скорее всего если у вас в задачах стоит реализовать слайдер какой или что-то такое то ни Angular ни React вам не нужны. Ну или в контексте сайтиков тоже не особо есть от них польза (только в специфических случаях). А вот если пишите приложения какие-то, можно уже задуматься ибо если вам придется реализовывать весь бойлерплейт, да еще и не будет DI то с высокой долей вероятности (все же нормальные разработчики существуют) вы получите шматок гуано дико связанный и приносящий боль при рефакторинге. А еще использование только jQuery это на 99% отсутствие каких-либо тестов на фронтэнде.

    p.s. Я на ангуляре пишу админки к примеру для своих проектов. Ну и все все все что вписывается в концепцию SPA. Реакт планирую использовать как альтернативу phonegap (react-native вышел), поскольку он является слоем абстракции над формированием представления (за счет промежуточного виртуального DOM).
    Ответ написан
    1 комментарий
  • Спрашивать ли бюджет у клиента или сразу называть свою цену?

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

    Ваша работа стоит столько, за сколько вы готовы её сделать. Так что интересоваться надо не бюджетом, а ТЗ, и из него называть цену. Потом, разумеется, надо уточнить бюджет, хотя бы чтобы понять как себя вести при запросе добавок и доделок.
    Ответ написан
    18 комментариев
  • Как организовать уведомление о новой заявке на landing page в личку VK?

    sergiks
    @sergiks Куратор тега PHP
    ♬♬
    Варианты:
    1. личное сообщение сообщение от вашего «запасного» аккаунта ВК;
    2. сообщение от Сообщества (группы);
    3. уведомление от Приложения ВК;
    4. смс (платно).

    Метод messages.send() отправляет сообщение от пользователя или сообщества; secure.sendNotification() – уведомление от приложения; secure.sendSMSNotification() – эсэмэсина от приложения. Наверное, лучше сделать сообщение от Сообщества.

    Создайте себе новую закрытую группу, где будете только вы. Включите сообщения сообщества и получите ключ (просто скопируйте его из Настроек сообщества – Работа с API.

    При событии в лендинге откройте скриптом ссылку API ВКонтакта, например, так:
    $url = "https://api.vk.com/method/messages.send";
    $params = [
    	'user_id' => 123456, // ваш user_id в ВК
    	'message' => 'Новая заявка!',
    	'access_token' => $TOKEN, // токен сообщества
    	'v' => 5.62
    ];
    $url = $url . '?' . http_build_query($params);
    file_get_contents($url);
    Ответ написан
    1 комментарий
  • Рекурсия в Javascript?

    BuriK666
    @BuriK666
    Компьютерный псих
    Получаете Nan т.к. 2 + undefined это NaN
    else можно убрать, но оставить return 1;

    function sumTo(n) {
          if(n > 1) {
            return (n + sumTo(n-1));
          }
          return 1;
        }
    Ответ написан
    Комментировать
  • Горизонтальная прокрутка таблицы по клику на кнопку?

    @dmz9
    было дело, приходилось такое мутить.
    есть какой то плагин но можно на js накидать своё, не найду свои сорсы.
    далее с джиквери
    вобщем, по document.ready берем каждую такую таблицу, оборачиваем в обёртку от конфеты.
    обёртка должна быть с прокруткой горизонтальной (overflow-x).
    после того как конфетка завёрнута append после обёртки кнопку. либо, если кнопка уже должна существовать - надо каждый раз проверять - а находится ли обёртка рядом с кнопкой, чтобы, при клике на кнопку прокручивалась именно ближайшая обёртка а не все подряд. если же кнопку создаем под каждую таблицу - просто вешаем хендлер .click(function(){}) а внутри каждый раз меняем прокрутку обёртки.
    по сути, прокрутка вбок - это всего лишь scrollLeft у контейнера-обёртки. сама таблица как была так и есть.
    этот скролл может иметь фиксированый размер в пикселях либо можно снимать ширину с родителя и типа скролить "на всю ширшину родительского контейнера". это достаточно универсально, можно еще чуть меньше сделать, чтобы следующий "слайд" всегда "продолжался" на 15-20 пикселей и было ощущение реальной прокрутки.
    также, через джиквери этот самый scrollLeft можно еще и анимировать, добавляя например эффект "swing". тогда всё будет работать еще более badass!
    плюс, так как это ж майфун, можно навешать на обёртку touch - ивенты, чтобы на лапание пальцами экрана прокрутка тоже отрабатывала.
    ---------------------
    карусель (слайдер) тут не поможет - таблицу на слайды нельзя разбить.
    ---------------------
    если таблицы совсем простые - без смердженых ячеек - есть плагин responsiveTables или типа того. тупо делает из широкой таблицу более узкую но меняет местами вертикальные-горизонтальные строки. читабельно. но если есть ячейки с colspan/rowspan - косячит
    Ответ написан
    1 комментарий
  • Есть ли смысл в рекламировании себя, как специалиста, в соц. сетях?

    @jkotkot
    режим сарказма
    В linkedin создай профиль и тебя достанут приглашениями. И гугл и все остальные.
    Ответ написан
    31 комментарий
  • Испытательный срок без оформления?

    sim3x
    @sim3x
    Джунов много
    Оф оформление = меньше денег тебе на руки
    Ответ написан
    5 комментариев
  • Как настроить browser-sync для удаленного сервера?

    Flex99
    @Flex99 Автор вопроса
    Frontend Developer
    Решение проблемы таилось в другом. Оказалось, что фаервол резал 3000 порт, у нас в компании первым делом безопасность. После того как мне открыли порт, я без особых усилий смог настроить browser-sync.
    'use strict';
    const browserSync = require('browser-sync').create();
    
    gulp.task('bs', function(){
        browserSync.init({
            proxy: "http://example.com/", // проксирование вашего удаленного сервера, не важно на чем back-end 
            logPrefix: 'example.com', // префикс для лога bs, маловажная настройка 
            host:      'example.com', // можно использовать ip сервера
            port:      3000, // порт через который будет проксироваться сервер
            open: 'external', // указываем, что наш url внешний 
            notify:    true,
            ghost:     true,
            files:     [/*массив с путями к файлам и папкам за которыми вам нужно следить*/]
        });
        browserSync.watch([/*массив с путями к файлам и папкам за которыми вам нужно следить*/]).on('change', browserSync.reload); //вотчер для команды перезагрузки bs
    });
    
    gulp.task('build', gulp.series('compile', gulp.parallel('watch', 'bs')));

    Заходим по ssh на наш сервер и запускаем сборку.
    Открываем http://example.com:3000/, и наслаждаемся всеми фишками browser-sync.
    Ответ написан
    1 комментарий
  • Как сделать адаптивное изображение затемненым с помощью css или js?

    iiiBird
    @iiiBird Куратор тега HTML
    Пока ты спишь - твой конкурент совершенствуется
    оборачиваешь изображение в див типа .img-wrap и ему задаешь
    :before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 2;
    }

    а самому
    .img-wrap {
      position: relative;
      z-index: 1;
    }
    Ответ написан
    1 комментарий
  • Как сделать слайдер?

    iiiBird
    @iiiBird Куратор тега Вёрстка
    Пока ты спишь - твой конкурент совершенствуется
    идешь сюда: kenwheeler.github.io/slick
    берешь который "Center Mode"
    настраиваешь его чтобы при current показывался правый блок с текстом.
    и суешь стрелки абсолютом в этот промежуток
    Ответ написан
    Комментировать
  • Это хорошая стратегия вёрстки?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    это техника не для новичков. когда ты научишься создавать дивы и запоминать классы, не смотря в html, и не смотря в браузер после задания каждого стиля - тогда такой способ сильно ускоряет верстку. тобишь ты просто сначала создаешь элементы в dom а потом начинаешь их стилизовать. и из за того что большой опыт - ты уже знаешь наперед какой стиль как и куда поставит тот или иной элемент, не смотря в браузер. тем самым ты просто сразу пишешь стили для 10 элементов вслепую, а потом только смотришь и правишь если вдруг все же ошибся где то. и так далее
    Ответ написан
    1 комментарий
  • Градиент поверх изображения?

    А что мешает поместить навигацию, логотип и т.д. внутри дива с градиентным бэкграундом?

    <header>
      <div class="bg_header">
        <nav>
          <ul>
             <li><a href="#">Пункт1</a></li>
             <li><a href="#">Пункт2</a></li>
             <li><a href="#">Пункт3</a></li>
             <li><a href="#">Пункт4</a></li>
             <li><a href="#">Пункт5</a></li>
           </ul>
         </nav>
      </div>
    </header>


    header - задаете бэкграунд картинкой
    .bg_header - задаете бэкграунд градиент и не забываете указать ему высоту во весь хедер.
    nav - остается поверх и картинки и бэкграунда.

    Вот как-то так: codepen.io/anon/pen/bwNmvr
    Ответ написан
    2 комментария