Задать вопрос
  • Когда использовать useCallback, useMemo и useEffect?

    @LEXA_JA
    useEffect - это хук, который позволяет использовать сайд эффект. В классах его аналогом было использование componentDidMount, componentDidUpdate и componentWillUnmount. В нем можно делать подписки, отправлять запросы управлять анимацией и т. д.
    const [data, setData] = useState(null);
    
    useEffect(() => {
      const controller = new AbortController()
      fetchData(controller.signal).then(setData)
    
      return () => controller.abort()
    }, [fetchData, setData])


    useCallback и useMemo предназначены для оптимизации. useCallback получает на функцию и массив аргументов, и возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. useMemo отличается тем, что он возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми.
    Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива.
    const data = useMemo(() => array.map(mapper).filter(predicate).reduce(reducer), [array])

    А useCallback используется, когда важна постоянность ссылок на функцию. Например, когда мы передаём ссылку в компонент, который использует React.PureComponent или React.memo, или, когда функция используется в качестве аргумента в других хуках
    const handler = useCallback(() => {
      // что-то сделать 
    }, [])
    
    useEffect(() => {
      handler(value)
      // если не использовать useCallback, эффект будет срабатывать постоянно 
    }, [handler, value])
    Ответ написан
    1 комментарий
  • Как сейчас дела у frontend разработчика на Upwork?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. Ваши навыки отстают от рынка. Сейчас чисто верстка требуется не так часто и да, чисто HTML/CSS сносного уровня можно получить и за $10 от тех же индусов. Индус индусу рознь, там есть и хорошие разрабы.

    2. Ваша ставка слишком высока для "только верстки". Да, вполне возможно что качество вашей верстки абсолютно честно стоит тех $25/час, но чисто психологически и субъективно клиент за эти деньги ждет уже frontend developer или даже fullstack developer. Его сам рынок к этой мысли подводит.

    3. Если хотите на фрилансе (апворк или не апворк - не важно) зарабатывать стабильно и расти по заработку - делайте упор на long-term контракты и клиентов. Это либо клиенты, которые постоянно приходят с новыми проектами (например, студии / агентства - конвеер), либо поддержка/сопровождение проектов, которые вы для клиента сделали. Спустя пару лет активной работы на апворке у вас должно минимум 60% заработка быть от поддержки существующих проектов. В идеале, клиенты должны платить fixed fee ежемесячно + допработы за отдельную плату. При грамотном подходе та же 1000-1500 в месяц будет капать только от этих fixed fees, а тратить на них времени вы будете минимум. А уже все допработы будут вам приносить дополнительный заработок поверх этих 1000-1500. При этом вы почти не проседаете в доходах, если вдруг перестали заниматься активными бидами на какое-то время. Но для этого вам нужно выйти за пределы HTML/CSS, потому что этим вы сами себя ограничиваете. Крайне редко ваша верстка выставляется в production as-is, как правило другой разраб дальше превращает ее в какой-то динамичный шаблон. И с этого момента не остается продукта, который вы могли бы поддерживать.

    4. Добавляйте себе в стек новые скилы. Если предпочитаете все-таки верстать - научитесь сразу верстать "в шаблоны" - WordPress themes, Drupal themes, Laravel Blade templates, Symfony Twig templates и тд.
    Ответ написан
    3 комментария
  • Зачем нужены Gulp/Webpack?

    @xfg
    Webpack - это сборщик модулей, который позволяет писать модульный код, где каждый модуль имеет возможность импортировать различные зависимости, начиная от других модулей, до css стилей и изображений. На главной странице сайта даже есть пример, вы подаете на вход "модули с зависимостями", а на выходе получаете то, что сможет работать в браузере.

    Webpack - это просто крайняя точка развития идеи самовызывающихся функций, с помощью которых пытались решить проблему загрязнения глобальной области видимости, когда каждый скрипт подключенный к странице мог свободно обращаться к любым переменным и функциям из других скриптов, что приводило к различным проблемам, вроде случайного переопределения переменных, неявных зависимостей и необходимости строгой последовательности подключения скриптов. Эта идея затем переросла в requirejs, затем в browserify и вот в наши дни - webpack/rollup/parcel. Webpack анализирует зависимости, которые вы подключаете в вашем коде и собирает из этого конечный bundle, который сможет работать в браузере.

    Gulp - это менеджер задач для автоматизации различных рутинных операций, таких как минификация, тестирование, объединение файлов и тому подобное. Gulp в отличии от Webpack никак не анализирует ваш код. Он вообще ничего не делает и по-сути своей бесполезен.

    Gulp - это набор оберток-плагинов над различными утилитами. Это ведет к ряду проблем - плагины перестают поддерживаться разработчиками, плагины ломаются при очередном мажорном релизе Gulp, плагины не позволяют вам использовать новую версию утилиты, до тех пор, пока разработчик плагина не выпустит новую версию плагина совместимую с новой версией утилиты. Инструмент, который изначально возник, чтобы помочь решать возникающие проблемы, сам превратился в проблему. Это всё привело к тому, что от Gulp стали отказываться в пользу чистых утилит, которые теперь запускают через npm скрипты. Если посмотрите любые популярные open-source библиотеки, например bootstrap, то сможете заметить, что в 3 версии был Gulp, в 4 версии его не стало. Использовать Gulp сегодня не имеет смысла. Идея Gulp/Grunt - умерла, так как идея оберток-плагинов не принесла ничего, кроме дополнительных проблем.
    Ответ написан
    Комментировать
  • Vue.js + Wordpress?

    boratsagdiev
    @boratsagdiev
    Чтобы совместить эти две вещи, вам не нужны шаблоны Wordpress. Как я вижу разработку с этими двумя:

    - WP отдаёт в rest API нужные данные (он это умеет по умолчанию, вроде только нужно поставить плагин чтобы включить). Это ваш бэкенд.
    - На VueJS вы пишете весь фронтенд - то есть вся вёрстка шаблона находится именно во vue-файлах, так же как и вся логика по получению постов, категорий, комментариев и прочего из бэкенда WP.
    Ответ написан
    1 комментарий
  • Как понять принципы ООП?

    onqu
    @onqu
    weasy
    Чтобы понять принципы ООП, книги не требуются. Взгляните вокруг себя. Всмотритесь в любой объект в реальном мире, опишите его наиболее подробно (материал, размер, цвет, вес, плотность, составные части и т.д.), это будут его свойства. Опишите, что и каким образом этот объект умеет делать (включаться, складываться, кушать электроэнергию, взаимодействовать с другими объектами или окружающей средой и т.д.), это будут его методы. Подумайте, для чего используется этот объект, что ему нужно изменить или добавить, чтобы использовать в других условиях или целях, и на основе всех собранных знаний создать более удобный экземпляр, это будет наследование и полиморфизм. Теперь немедленно забудьте обо всем, используйте объект по назначению, это будет инкапсуляция. Дальше останутся только тонкости выбранного Вами языка, шаблоны, методологии и прочаяие ересь тренды.
    Ответ написан
    2 комментария
  • Тупиковое и медленное развитие, лекарство?

    Konstantin18ko
    @Konstantin18ko
    Стоматолог
    Хочешь быстро выкачивать в продакшен? Вруби режим Vanille. Пиши, параллельно свой проект. Зацепись за один язык как основной и дальше учи всё в нем вдоль и поперёк. Затем, как всё выучишь, хватай самый сложный фраемворк и от сложного к простому начинаешь разбирать. Это мой подход.
    Для наглядной статистики: я врач, у меня 8 часовой рабочий день. С сентября 2016 начал изучать PHP и JavaScript. С 1 января по 9 января 2017 пишу програму которая помогала мне писать истории больных. Сейчас программа пользуется популярностью и ей пользуется вся ординаторская. Сейчас проект переписывается на Symfony 3.
    Что мне понадобилось: время после работы, интернет.
    Ответ написан
    22 комментария
  • Как заставить WebStorm автоматически заворачивать длинные строки?

    miminari13
    @miminari13
    view - active editor - use soft wraps
    это для вебшторма, но думаю в phpstorm тоже самое
    Ответ написан
    3 комментария
  • Какие вопросы на собеседовании ожидать по JS?

    mudrenokanton
    @mudrenokanton
    frontend dev
    Я по-приколу в закладочки кидаю всякие вопросы по js:
    https://habrahabr.ru/post/231071/
    https://medium.com/@sapy/7-interview-questions-and...
    https://habrahabr.ru/post/239065/
    https://github.com/h5bp/Front-end-Developer-Interv...
    perfectionkills.com/javascript-quiz
    Но, без хорошего знания языка, на многие вопросы очень сложно давать адекватные ответы.
    Есть еще отдельный файл в котором я храню вопросы, которые лично мне задавали на собесах и я их не знал. Советую вам завести такой же. В будущем пригодится)
    Ответ написан
    9 комментариев
  • Как правильно сверстать такой элемент?

    werty1001
    @werty1001
    undefined
    Это Slider
    Ответ написан
    Комментировать
  • Верстать веб по макетам в Ai — это нормально?

    axaxa_man
    @axaxa_man
    web developer
    Освоится в ai верстальщику хватит и дня (имею в виду просто свыкнуться с интерфейсом, инструментами, областями).
    А это экономия в день для вас

    В ai достаточно комфортно верстать, плюс штуки вроде градиентов, теней там спроектированы удачнее, и верстальщику забирать стили из ai файла удобнее, не придется прибегать к конвертированию онлайн.

    Тоже поначалу бурчал, что дизайнер отдавал в ai, а теперь даже в ai как-то приятнее работать, чем в фотошопе.
    Ответ написан
    Комментировать
  • Как не распыляясь дотащить до front-end мидл девелопера?

    Apathetic
    @Apathetic
    Frontend
    Я вот, в принципе, джун по опыту именно программирования. Но по опыту управления могу сказать точно - все эти аббревиатуры - полная фигня. Важны не аббревиатуры, важна способность быстро их усваивать. Больше того скажу, важна способность быстро переключаться на другие фреймворки, другие среды разработки, другие языки. Это всё - не более чем инструменты. И для этого нужно глубоко понимать именно основы программирования, паттерны, алгоритмы, вот это всё. В освоении этого может помочь только один способ: ебашить (извините за мат, но это самое подходящее слово).
    Ответ написан
    Комментировать
  • Как не распыляясь дотащить до front-end мидл девелопера?

    @djay
    Must have:

    - HTML5/CSS3 - знать как минимум в совершенстве
    - JavaScript, включительно ECMAScript 6-7
    - В порядке вещей - Bootstrap + Jquery
    - Grunt/Gulp, Bower
    - Знание хотя бы одного фреймворка. Сейчас более менее ходовые это Angular.js и Backbone
    - Знание системы контроля версий Git. Умение работать с GitHub/BitBucket
    - Опыт работы от 2-х лет

    Как плюс:

    - Знание Canvas, SVG, умение писать игры
    - Знание шаблонов проектирования
    - Умение покрывать код тестами

    Это и есть обобщенный набор навыков по рынку на текущий момент.
    Ответ написан
    9 комментариев
  • Как выравнять модальное окно вертикально по центру?

    @mr_ko
    Javascript, Node.js. React.js, Vue.js, Wordpress
    Вот такие CSS стили выровняют ровно по центру. Причем ширина и высота не важны (ели они канечно не больше экрана)
    .modal {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    Ответ написан
    1 комментарий
  • Row в col или наоборот?

    @bitrixweb
    Вечно молодой, вечно пьяный
    Ответ кроется в деталях. У каждого col есть padding по 15px с каждой стороны. У row же есть marginы по -15px с каждой стороны.

    В итоге эта конструкция призвана
    • Группировать colы
    • Убирать лишние отступы


    На примере Вашей конструкции:
    <div class="header">
    	<div class="top-line">
    		<div class="container"> <!-- Дает padding 15px слева/справа -->
    			<div class="row"> <!-- Убирает отступы предыдущего класса -->
    				<div class="col-md-12"> <!-- Дает padding 15px слева/справа -->
    					<p>Какой-то контент</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    Без row в Вашей конструкции padding был бы по 30px с каждой стороны.

    Но если у Вас в col-md-12 будут еще, например
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>

    то лучше их обернуть в row, чтобы убрать лишний отступ, который нам дает col-md-12.

    Поэтому "Что пень пнем, что Пнемпень" - может быть как .row>.col-*, так и .col-*>.row (но скорее всего будет .row>.col-*>.row>.col-*)
    Ответ написан
    Комментировать
  • Можно ли использовать единицы измерения rem (root em) вообще для всего в CSS?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Делаю вот так:
    html, body {
      font-size: 62.5%; // 1rem = 10px и никакой попаболи как с EM
    }

    И верстаю все только в rem уже более полугода (за исключение тонких бордеров в 2-3px и подобных микро-вещей, которые при снижении font-size для html, body могут выдавать становиться тоньше, чем надо).
    Главная фишка - возможность скейлить всю верстку под разные разрешения. Хочется сделать все на 25% больше для мониторов шире 1600px? Просто пишешь:
    html, body {
      @media (min-width: 1600px) {
        font-size: 78.125%;
      }
    }

    И вся верстка магическим образом идеально скейлится. Тоже самое касается и понижения, очень удобно в адаптивной верстке.
    Недостатки у rem есть, но они безобидные для нормальных людей - ie9+ и баг с небольшой неточностью приема 62.5% в каких-то версиях ie (вроде как в 10), что в общем то не заслуживает внимания.
    Ответ написан
    4 комментария