• В IE 11 проблема с позиционированием SVG background-image?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Убрал лишние атрибуты в SVG, непонятный path (первый из двух).
    Для решения добавляем background-size в CSS.
    Update: После более глубокого обдумывания значение auto заменено на 3px.
    .container {
    	background-size: 100% 3px;
    }

    Первый вариант
    Указываем явно width и height в SVG.
    <svg xmlns="http://www.w3.org/2000/svg" width="203" height="3" viewBox="0 0 203 3">

    Второй вариант
    Используем preserveAspectRatio в значении xMinYMax (по умолчанию xMidYMid).
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMax" viewBox="0 0 203 3">

    Третий вариант
    Используем width, height и preserveAspectRatio в значении none. С учётом Chrome самый бронебойный.
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="203" height="3" viewBox="0 0 203 3">
    Ответ написан
    5 комментариев
  • Какой необходимый уровень знаний для 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 комментарий
  • Минимальные настройки безопасности Linux на VPS?

    Tyranron
    @Tyranron
    Ряд моментов Вы уже сделали, но я все равно их опишу для полноты списка.

    1. Создать отдельного пользователя и хороший пароль на sudo. Не использовать больше root напрямую. Совсем.

    2. SSH. Отключаем метод аутентификации по паролю. Если Вам не нужны другие методы, то их тоже можно отключить, оставив только publickey. Отключаем возможность аутентификации root'ом. Включаем использование только 2й версии SSH протокола.

    3. Устанавливаем Fail2Ban и настраиваем чтобы после нескольких неуспешных попыток подключения по SSH банило по IP на длительное время. Кол-во попыток и время бана можно тюнить в меру своей паранойи. У меня, например, банит на час после 2х неуспешных попыток.

    4. Iptables. Действуем по принципу "запрещено все, что не разрешено". Запрещаем по умолчанию весь INPUT и FORWARD трафик снаружи. Открываем на INPUT'е 22 порт. В дальнейшем открываем порты/forwarding по мере необходимости. Если у нас предполагаются сервисы на соседних серверах нужные только для внутренней коммуникации (Memcached, Redis, и т.д.), то открываем для них порты только для определенных IP. Просто так торчать наружу для всех они не должны.

    5. Настраиваем автоматические обновления apt-пакетов. Уровень security. То есть так, чтобы обновления безопасности накатывались автоматически, но при этом не выполнялись обновления со сменой мажорной версии (дабы обезопасить себя от "само сломалось").

    6. Устанавливаем ntpd. Серверное время должно быть точным. Также временную зону сервера лучше всего установить в UTC.

    7. TLS (не SSL) используем везде где можем. Через Let's Encrypt получаем бесплатные валидные сертификаты. В конфигах веб-серверов, mail-серверов, и других приложений торчащих наружу (в том числе и OpenVPN), запрещаем/убираем использование слабых шифров. Все ключи/параметры генерируем не менее 2048 бит. Самоподписные сертификаты подписываем с помощью SHA-256 (не SHA-1). Diffie-Hellman параметры (dh.pem) под каждый сервис лучше сгенерить отдельно. Проверяем TLS сервисов через Nmap. Минимальный grade должен быть A, не должно быть warning'ов.

    8. Правильный менеджмент пользователей/групп. Приложения/сервисы не должны запускаться под root'ом (разве что они действительно этого требуют и иначе никак). Для каждого сервиса создается свой пользователь.

    9. Если предполагается upload файлов через PHP (либо другие скриптовые языки), в директории, куда эти файлы загружаются (и которая доступна снаружи), должно быть жестко отключено любое выполнение скриптов/бинарников, что на уровне ОС (x права), что на уровне веб-сервера.

    Это была база.
    Дальше, в меру своей паранойи можно за'harden'ить сервер ещё следующими моментами:
    - SELinux, chroot
    - доступ к SSH только с определенных IP (нужно иметь 3-4 VPN-сервера под рукой)

    UPD И да, все это помнить/настраивать руками каждый раз может быть запарно. Используйте Ansible и автоматизируйте процесс (там родные и YAML, Jinja2 и Python).
    Ответ написан
    10 комментариев
  • Как построить свой рабочий день фрилансеру?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    3 комментария
  • Как подсвечивать каждый этаж(дома) на svg изображении?

    @Nikola24
    Рисуете форму для этажа в svg, копируете для каждого этажа, заполняете нужным цветом, ставите прозрачность на ноль, и просто при :hover возвращаете прозрачность которую Вам надо.
    Ответ написан
    Комментировать
  • Как подсвечивать каждый этаж(дома) на svg изображении?

    @eldar_web
    Ты можешь у него спросить: https://vk.com/id311979518
    Это он сверстал.
    Ответ написан
    Комментировать
  • Удобный софт для запоминания и перевода английских слов?

    AMar4enko
    @AMar4enko
    AnkiCards
    Ответ написан
    Комментировать
  • Какой должен быть поиск у фронта на Upwork?

    vicodin
    @vicodin
    Имею некоторый опыт
    У вас на скрине не под фронта, а под дизайнера какого-то, держите
    1ad5386101a44ec19802f841721190af.png
    Ответ написан
    1 комментарий
  • Как лучше изучить теорию JavaScript?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Самое сложное для начинающего не понять как делать или что делать, а понять зачем делать.

    Ты читаешь книгу, там очень умный человек объясняет тебе что вот в таких случаях делай вот так и так, а в эдаких - эдак. А ты не понимаешь зачем он этим тебя грузит, т.к. в твоей картине мира эти проблемы еще не существуют.

    Учитывая, что память не резиновая а мамонта нужно есть небольшими кусочками, желательно не умозрительно, а в ощущениях, я бы рекомендовал активную практику, как лучший способ научиться чему-либо.

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

    Выработать эти микрорефлексы возможно только активно практикуясь и больше никак.

    Приглашаю тебя на Codewars - www.codewars.com/r/pj8ELg, там ты сможешь бесплатно попрактиковаться вволю, со своей стороны готов оказать тебе посильную наставническую поддержку.
    Ответ написан
    2 комментария
  • Как сделать такие анимационные эффекты?

    На этом сайте используется PixiJS (www.pixijs.com).
    Для начала, посмотрите примеры -- pixijs.github.io/examples/#/basics/basic.js
    Потом изучайте туториал (www.pixijs.com/tutorials) + почитывая документацию (pixijs.github.io/docs).
    В качестве альтернативы можете посмотреть GSAP (https://greensock.com/gsap)
    Ответ написан
    Комментировать
  • Как тестировать верстку?

    В Яндексе мы разработали два инструмента:
    - gemini для модульного тестирования вёрстки скриншотами; сравниваются отдельные блоки с эталонными изображениями; есть отдельный удобный инструмент для снятия и обновления эталонов — gemini-gui
    - hermione для функционального тестирования

    Оба инструмента используют WebDriver API, при помощи которого ходят в Selenium Server или Appium. Умеют обходить проблемы стабильности (повторное выполнение тестов), запускать тесты максимально параллельно (для скорости; гибко настраивается), строить понятные отчёты.

    Этими инструментами уже тестируются SERP (страница поисковой выдачи), Яндекс Картинки, Яндекс Видео, Яндекс Новости и другие сервисы.
    Ответ написан
    1 комментарий
  • Как вы ведете свои проекты?

    lxfr
    @lxfr
    Код в гите, конфиги в локальной папке, инфраструктура в докер, пароли в менеджере паролей, переписка в скайпе, файлики на почте, задачи в менеджере задач.
    Ответ написан
    19 комментариев
  • Какие технологии вы используете для лендингов?

    Nikolay12
    @Nikolay12
    Верстальщик
    Если без фреймворка, а просто верстка по макету, то:
    • Emmet - быстрый кодинг html и сss
    • less - переменные для шрифтов, вложенность селекторов или бэм-нейминг.
    • flexbox - для сетки, расположения элементов и респонсива.
    • autoprefixer - добавление css-префиксов
    • Imagemin-pngquant - для сжатия картинок
    • gulp - для сборки вышеперечисленного
    • slick - карусели и слайдеры
    • remodal - модалки


    Если использовать фреймворк, например, bootstrap, то быстрее будет работать с исходниками бутстрапа и потом собрать их:
    • переопределить переменные
    • подключить нужные js-скипты из коробки
    • подключить нужные less-стили
    • собрать это всё галпом
    Ответ написан
    1 комментарий
  • React + Redux, как начать правильно?

    KaaPex
    @KaaPex
    неумеха
    Бесплатные курсы от создателя Dan Abramov
    https://egghead.io/technologies/react
    Ответ написан
    Комментировать
  • Best practics о верстке и организации?

    Nemisidis
    @Nemisidis
    Frontend Developer
    На сегодня есть два популярных направления организации flie tree (smacss, bem).
    Идея в корне разная.
    Smacss основан на классическом подходе (разбиение проекта по технологиям), Bem же ориентирован на разбиения проекта на элементы и так же имеют громадное количество инструментов.
    Все выше перечисленное имеет значения в зависимости от сложности проекта.
    Разработку поддержка безусловно ускоряет если вы понимаете что вы делаете.
    И так же советую ознакомится с сборщиками проекта (например gulp)
    Gulp один из самых простых и быстрых.

    https://smacss.com/ , https://ru.bem.info/.
    Ответ написан
    Комментировать
  • React + Redux, как начать правильно?

    Довольно годный материал начните с этого...
    Ответ написан
    Комментировать
  • Есть в Upwork команды, которые принимают новичков?

    opium
    @opium
    Просто люблю качественно работать
    Нет
    Станьте уже профи не ленитесь это не сложно
    upworkest.ru
    Ответ написан
    Комментировать
  • Photoshop, notepad++ и бочка кофе в придачу, что ещё поможет верстать сайты быстрее и с меньшими затратами нервов?

    FaNiska
    @FaNiska
    Web Dev
    У Adobe есть замечательный бесплатный сервис. https://assets.adobe.com позволяет доставать картинки и копировать стили у элементов макета. Попробуйте, скорость вертки однозначно увеличивается
    Ответ написан
    Комментировать
  • Photoshop, notepad++ и бочка кофе в придачу, что ещё поможет верстать сайты быстрее и с меньшими затратами нервов?

    kumaxim
    @kumaxim
    Web-программист
    А почему никто Browsersync не вспомнил? Штука цепляется к Gulp и при каждом обновлении CSS / HTML автоматически без перезагрузки отображает изменения на странице. Если нужно перезагрузка, то Browsersync сам ее и выполняет. На loftblog еще видео было как его вместе с Gulp

    Если сможете настроить свой роутер, то можно обновления сразу цеплять еще на смартфоне и планшете, которые в Вашей локалке.
    Ответ написан
    1 комментарий