• Как задать разных background-size?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    background-size указывается через слеш / после других параметров к каждому из фонов.
    Либо отдельной строчкой через запятую в соответствующем порядке.

    background: url(1.png) top right repeat / contain, 
    url(2.png) center no-repeat / cover;
    Ответ написан
    7 комментариев
  • Как сделать острые углы в css?

    MasterGerold
    @MasterGerold
    Мне в таких случаях помогает этот сайт, так как на нём быстрее чем в ручную.
    Ответ написан
    1 комментарий
  • Как делаются такие сайты?

    thelongrunsmoke
    @thelongrunsmoke
    Программист
    Это SPA - Single Page Application.
    Вся эта красота держится на JS, немного на стилях и, главным образом, на нервах верстальщика.
    Ответ написан
    Комментировать
  • Как убрать синий фон при клике на элемент?

    kgnk
    @kgnk
    Разрабатываю сайты, рисую интерфейсы
    Примените к вашим проблемным элементам:
    webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    Ответ написан
    8 комментариев
  • Как приостановить отправку через form не используя ajax запрос?

    twobomb
    @twobomb
    var el = document.body.querySelectorAll("form");
    for(var i = 0 ; i < el.length;i++)
    el[i].addEventListener("submit",function(e){
    	if(false/*проверка чего-то*/)
      	alert("Отправить")
       else
    			e.preventDefault();//отменить
    })
    Ответ написан
    Комментировать
  • Как установить и настроить адаптивную сетку smartgrid для работы?

    Vsnegovik
    @Vsnegovik
    frontend-разработчик
    smart-grid на выходе создает файл (не пайпится), его подключаем в styl (sass, less) файле. Библиотека не умеет создавать папки, поэтому либо вручную создаем папку vendor, либо средствами gulp. Использую stylus, можете заменить его любым удобным Вам.

    c9aff30608f94308bac036b229613ab1.png
    gulpfile.babel.js
    import gulp   from 'gulp'
    import stylus from 'gulp-stylus'
    import grid   from 'smart-grid'
    import del    from 'del'
    
    const settings = {
        outputStyle: 'styl', /* less || scss || sass || styl */
        columns: 12, /* number of grid columns */
        offset: "30px", /* gutter width px || % */
        container: {
            maxWidth: '1200px', /* max-width оn very large screen */
            fields: '30px' /* side fields */
        },
        breakPoints: {
            lg: {
                'width': '1100px', /* -> @media (max-width: 1100px) */
                'fields': '30px' /* side fields */
            },
            md: {
                'width': '960px',
                'fields': '15px'
            },
            sm: {
                'width': '780px',
                'fields': '15px'
            },
            xs: {
                'width': '560px',
                'fields': '15px'
            }
        }
    };
    
    const paths = {
      styl: {
        vendor: './vendor/',
        src:    './src/**/*.styl',
        dest:   './dest'
      }
    }
    
    const clean = () => del([ 'dest' ])
    export { clean }
    
    export function init(cb){
      grid(paths.styl.vendor, settings)
      cb()
    }
    
    export function styl_build(){
      return gulp.src(paths.styl.src)
        .pipe(stylus({
            paths : [
              'src',
              'vendor'
           ]
         }))
        .pipe(gulp.dest(paths.styl.dest))
    }
    
    const build = gulp.series(
      clean,
      init,
      styl_build
    )
    export { build }
    
    export default build

    package.json
    {
      "name": "template",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "gulp": "gulp"
      },
      "author": "Vsnegovik",
      "license": "ISC",
      "devDependencies": {
        "babel-preset-es2015": "^6.22.0",
        "babel-register": "^6.22.0",
        "gulp": "github:gulpjs/gulp#4.0",
        "gulp-stylus": "^2.6.0",
        "smart-grid": "^1.0.3",
        "del": "^2.2.2"
      }
    }

    .babelrc
    {
      "presets": [ "es2015" ]
    }

    index.styl
    @import smart-grid
    
    .items
      row-flex()
      justify-content-md(center)
    
      .item
        col()
        col-3()
        col-md-5()
        col-xs-10()

    Ответ написан
    6 комментариев
  • Как сделать на сайте 2 изображения, перекрывающие друг друга через js?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Вот 5 вариантов с примерами и кодом. Вкратце, названия/ссылки:

    1. TwentyTwenty
    2. Juxtapose
    3. imgSlider
    4. Cocoen
    5. Image Comparison Slider
    Ответ написан
    Комментировать
  • Как написать миксин-функцию для списка в pug?

    werty1001
    @werty1001
    undefined
    mixin list( items )
    	each item in items 
    		li
    			a(href=item.href)=item.text
    
    +list( [ {href: 'index.html', text: 'Home'}, {href: 'about.html', text: 'About'}, {href: 'contacts.html', text: 'Contacts'} ] )
    Ответ написан
    2 комментария
  • Как создать дугу на CSS?

    @soledar10
    html css3 js jquery
    Ответ написан
    Комментировать
  • Какой необходимый уровень знаний для 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 комментарий
  • Какую литературу почитать по проектированию?

    @nirvimel
    1. Стив Макконнелл - Совершенный код.
    - почему еще никто не назвал эту очевидную классику? (я аж Ctrl+F-нул по странице, не поверил сначала).
    - также рекомендую его "Анализ алгоритмов. Вводный курс" (хоть это и в стороне от сабжа).

    2. Кент Бек - Экстремальное программирование. Разработка через тестирование.
    - многие считают этот подход антипаттерном, но прочесть, безусловно, стоит хотя бы ради того, чтобы иметь возможность самому поискать ошибки в рассуждениях автора (оно того стоит).

    Еще несколько очень разных книг, которые для меня стоят в одном ряду с Макконнеллом:
    3. Фредерик Брукс - Мифический человеко-месяц.
    4. Эндрю Хант, Дэвид Томас - Программист-прагматик. Путь от подмастерья к мастеру.
    5. Том Демарко, Тимоти Листер - Человеческий фактор: успешные проекты и команды.

    Далее, у Макконнелла в (1) после каждой главы приведен огромный список литературы по теме, большая часть - признанная классика, можно прямо брать списком и выкладывать в этот тред.
    Ответ написан
    Комментировать
  • Как повысить уровень программирования?

    Если хотите улучшить качество кода:
    1) Изучите книги "Рефакторинг" и "Совершенный код".
    2) Тренируйтесь на CodeWars - старайтесь более понятный и чистый код. А потом сравните с решениями других участников, берите на вооружение, как можно было сделать лучше.
    3) Изучите шаблоны проектирования.
    4) Берите большие опенсорс-проекты с хорошей архитектурой и пробуйте что-то в них изменить, улучшить. В процессе изучите, как они спроектированы, невольно будете учиться и перенимать эффективные методы решения многих задач.
    Ответ написан
    Комментировать
  • Выбор фреймворка для нового проекта - Angular? React? Vue?

    dom1n1k
    @dom1n1k
    Лично для меня Vue - это такой "фреймворк с человеческим лицом".
    В целом JS-мир похож на поле боевых действий, где постоянно то налеты авиации, то кононада гремит, то хипстерская конница с новым логотипом на знамёнах проскачет.
    А "обычный" человек сидит в подвале, обхватив голову руками, и думает - мама дорогая, куда я попал, и чё ваще вокруг происходит?
    Какие-то новые паттерны, подходы, языки... Раньше, чтобы начать, достаточно было блокнота и браузера. Пишешь hello world и сразу его видишь. Теперь нужно поставить ноду, овер 9000 пакетов, десять транспиляторов, таск-менеджеров и бандлеров. Пока увидишь рабочий результат - поседеешь.
    И вдруг какая-то добрая душа взяла у хипстоты всё самое лучшее и разумное, что та родила, но очистив от лишних абстракций и усложнений - и выкатила велосипед в виде велосипеда, а не турбо-космолета с инструкцией толщиной как "Капитал". И снова можно писать в блокноте и смотреть в браузере. При этом почти не проигрывая в возможностях.
    Ответ написан
    1 комментарий
  • Как повысить уровень программирования?

    tiabc
    @tiabc
    Бизнес-партнер и консультант по технологиям
    Хорошие разработчики постоянно развиваются и никогда не стоят на месте. Любое развитие состоит в делании дел, в решении конкретных задач и в обратной связи, которую ты получаешь от других или в результате рефлексии.

    TL;DR: Читайте книжки, делайте дела, читайте чужой код.

    Что можно начать делать прямо сейчас, чтобы стать программистом лучше?

    1. Изучайте базу. Алгоритмы, сети, криптографию, архитектуру, ос, устройство браузеров, компиляторы и т.д. Изучение подобных вещей дает понимание какие задачи бывают в реальном мире и как "большие дядьки" решают возникающие проблемы. Это кладезь инсайтов.

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

    3. Написание кода - не самая большая часть работы сеньор-девелоперов, я бы сказал. Но когда речь заходит о самом коде, нужно понимать что ты пишешь и зачем. Есть классические книжки, которые можно найти, например, в матрице компетентности программиста, есть современные, но полезные типа The Art of Readable Code, которую я очень рекомендую. Нужно читать книжки. На собеседовании я всегда спрашиваю какие книжки читал или читает соискатель и если ответ отрицательный, то это большой минус.

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

    5. Наберитесь терпения. Это не случится за один день. Думайте над именованием, разделяйте обязанности, изучайте алгоритмы и экосистему, оптимизируйте ваше рабочее место, изучайте новые технологии, читайте статьи и в течение ближайших лет регулярных усилий вы обретете новый способ мышления и будете разрабатывать поддерживаемое и надежное ПО. Легкого пути, к сожалению, нет.
    Ответ написан
    2 комментария
  • Регистрация логотипа: какие могут возникнуть проблемы?

    xandri
    @xandri
    Люблю айтшечку
    Это все не однозначно, до момента милиардных доходов ваш персонаж не будет никому нужен, и даже после этого это все спорно,
    я дизайнер я так вижу и точка.


    regimark.ru - вот одно из агенств в которое стоит обратиться и они предоставят вам информацию

    А вообще моменты на которые нужно обратить внимание:
    1. Территория действия знака.
    2. Право на торговую марку.
    Ответ написан
    2 комментария