• Как сверстать шапку такой формы?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Без SVG, картинок и псевдоэлементов,
    CSS only

    Ответ написан
    24 комментария
  • Как сделать плавную прокрутку (без jquery)?

    delphinpro
    @delphinpro
    frontend developer
    jsfiddle.net/vxgpam5w

    spoiler
    let data = [];
    let currentRow = 0;
    
    function getPositions(){
      document.querySelectorAll('.row').forEach(row => {
        let box = row.getBoundingClientRect();
        data.push(box.top + pageYOffset);
      });
    }
    
    getPositions();
    
    document.addEventListener('wheel', event => {
      event.preventDefault();
    	currentRow += event.deltaY > 0 ? 1 : -1;
      if (currentRow<0) currentRow = 0;
      if (currentRow>data.length-1) currentRow = data.length-1;
      window.scrollTo({
       	top: data[currentRow],
        behavior: 'smooth'
      });
    });
    
    window.addEventListener('resize', () => {
    	getPositions();
    });
    Ответ написан
    2 комментария
  • Где найти свой первый заказ?

    zamboga
    @zamboga
    job: #Запускаю стартапы за %; #Интернет-маркетинг
    Ловите из моей копилки (сортировка от балды, комментарии мои, я "заказчик")

    • Биржи фриланса СНГ
    https://work-zilla.com — легко очень быстро найти исполнителя на простую работу за 100-3000₽
    kwork.ru
    https://5bucks.ru
    radideneg.ru
    moguza.ru
    https://fl.ru/ (ад.кг) -- один из самых известных фрилансных ресурсов рунета, полно предложений (август 2018)
    https://freelance.ru/ -- сильный конкурент fl.ru, полно предложений (август 2018)
    https://www.weblancer.net/ -- норм, не очень много предложений, но много "целевых", меньше мусора (август 2018)
    https://freelansim.ru/ -- не очень много предложений (август 2018)
    https://YouDo.com -- мало предложений (август 2018)
    https://freelancehunt.com/ -- много предложений (август 2018)
    § Статистика цен https://freelancehunt.com/statistics/rates/currency/rub
    https://www.freelancejob.ru -- очень мало предложений (август 2018)
    https://yukon.to — для даркента и "сомнительных" заданий. Типа "античата"
    www.free-lance.ru -- старое название fl.ru

    • Биржи фриланса международные
    https://www.upwork.com - конкурировать невозможно, только покупать профиль с 1000+ часов, остальное $5-$15 от рабовладельцев
    www.freelancer.com
    https://www.peopleperhour.com/
    https://www.guru.com/
    fiverr.com — для простого дизайна
    https://envato.com/
    https://talent.hubstaff.com
    https://remoteok.io
    https://weworkremotely.com/
    https://www.cybercoders.com/
    https://djinni.co
    https://www.toptal.com
    https://www.linkedin.com
    https://elance.com — куплен upwork
    https://odesk.com — куплен upwork

    • Агрегаторы фриланс-бирж
    https://primelance.com
    https://www.alot.pro
    https://work-at.me/freelance_projects/list
    https://ifreework.org/projects.html
    https://joby.su/search/ff/
    ayak.ru
    https://spylance.com/spy#notices
    j-scan.ru/search_old
    ejobstracker.com
    https://play.google.com/store/apps/details?id=alot...
    https://play.google.com/store/apps/details?id=free...
    https://play.google.com/store/apps/details?id=com....
    https://itunes.apple.com/us/app/mobile-freelance/i...
    https://play.google.com/store/apps/details?id=com....
    Где искать заказы?
    Ответ написан
    12 комментариев
  • Как проверить, что знаешь на базовом уровне JavaScript?

    @JSmitty
    Хотите задачку? Ловите.

    Сделать на JS светофор основной (3 цвета) и связанный пешеходный (2 цвета) с кнопкой по запросу пешеходного перехода:
    1) основной включен на зеленый, пешеходный на красный
    2) по нажатию на запрос, через не менее чем 5 секунд на 5 секунд показывается желтый на основном, затем основной - красный, пешеходный зеленый на 15 секунд. После пешеходный на красный, основной сразу на зеленый.
    3) минимальное время зеленого на основном - 60 секунд. Если кнопка запроса перехода нажата ранее 60 секунд с момента включения зеленого - пункт 2 срабатывает через 60 секунд с момента включения зеленого.
    4) после нажатия запроса и до включения зеленого на основном светофоре, кнопка запроса игнорируется.

    Часть задачи - сделать отображение светофоров, и кнопку. Кнопка всегда доступна к нажатию (не ставим атрибут disabled). Другая часть - реализовать асинхронную логику. По возможности на чистом JS (не прибегая к библиотекам).
    Ответ написан
    7 комментариев
  • Как сделать эффекты как на сайте примере?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

    1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

    Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

    2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

    На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

    Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

    Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.
    Ответ написан
    5 комментариев
  • Как (и возможно ли) дотянуться до Junior JavaScript Developer в кратчайшие сроки?

    iCoderXXI
    @iCoderXXI
    React.JS/FrontEnd engineer
    Во первых: совершенству нет предела.
    Во вторых: невозможно объять необъятное и впихнуть невпихуемое.
    В третьих: как ты не крутись, а технологии развиваются быстрее, поэтому отставание неминуемо, как следствие приходится всегда чем-то жертвовать ради чего-то более важного.

    Итого: заказчика не интересуют твои философские страдания. Его интересует как быстро, качественно и за какие деньги ты решишь его проблемы. Решаешь за разумное время, адекватный ценник и с удовлетворительным качеством - не важно как ты себя именуешь, спрос на тебя будет.

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

    Я не очень понимаю, чего вдруг тебя потянуло в разработку. В целом дело это весьма муторное и рутинное, и его надо бы, по хорошему, очень сильно любить, чтобы прям вот пёрло, тогда есть шанс зацепиться, удержаться и даже эволюционировать как разработчик.

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

    Меня на программирование пропёрло весьма рано, лет в 14-15. Я ощущал собственное безграничное могущество, послушная железяка выполняла любое моё повеление, любой мой каприз, при условии, что он правильно сформулирован. Если железка не делала что нужно, или делала что не нужно, то это всегда была моя вина, это значило что я прокосячился. Подобное осознание настигло меня весьма скоропалительно, после чего мозг начал усиленно дисциплинироваться, и количество лютых фейлов пошло на убыль.

    Коммерческая разработка - это, примерно, от 70% времени/сил на дебаг и фиксы, потому что мало где процессы поставлены грамотно. По хорошему до сего дня (а мне под 40) я только одну команду видел, где процессы прям вообще очень хорошо поставлены и мне посчастливилось какое-то время с ними поработать. За эти несколько месяцев я подрос на целую голову. Самостоятельно достичь сходных результатов было бы весьма затруднительно.

    Сам я сменил стек совсем недавно, начал в конце 15 года, и процесс продолжается до сих пор. Сменил я по одной простой причине - во всех моих прежних проектах большая часть логики с бэка уехала на фронт, и прекраснейший jQuery перестал справляться чуть более чем полностью. Он, по прежнему, хорош, но задачи, которые приходится решать, требуют совершенно других подходов. Для себя я выбрал React, но в целом на рынке имеются альтернативы. По моим данным очень большим спросом пользуется Angular 2+.

    Когда говорят о фронтенд разработке, постоянно говорят о технологиях, стеке, но почти никто не упоминает, что не стеком единым... Существенная часть разработки - это, для начала, понять задачу и построить у себя в голове модель. Заказчики бывают разные, от очень толковых, до очень безтолковых. Соотношение первых ко вторым примерно 1% и всё остальное... Т.е. в большинстве случаев тебе скажут минимум, своеобразно, плюс ты это поймёшь по своему. Потом, по ходу пьесы, в самые неподходящие моменты, начнут всплывать подробности, которые: забыли упомянуть; ну это же очевидно, ты же профи; мы сами не знали, это только выяснилось; ну это же мелочи, мы думаем тебе это будет не сложно; а ты не спрашивал; и т.п....

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

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

    Если ты попадешь в команду, где люди будут понимающие, квалифицированные, процессы выстроены, а джуну задачи будут сгружать джунские, то, считай, тебе крупно повезло. Шансов на это примерно 1%. Особенно учитывая, что джуны это обычно студенты лет в районе 20...

    Когда я менял стек, то я тоже был какое-то время 35-летним джуном. С этим ничего не поделать, потому что, внезапно, стек это не просто так, и имеется масса нюансов, которые с наскоку не освоишь. Чтобы все пощупать, попробовать на зубок, понять и осознать требуется время и усилия, иногда много времени и много усилий. Да, весь прежний багаж служит опорой и поддержкой, и там, где настоящий джун будет копаться недели, ты за пару часов по аналогии поймаешь идею и двинешь дальше. Но эти пару часов никто не отменял, а идей которые нужно отловить сотни, если не тысячи...

    Сложнее всего разобраться в архитектуре конкретного проекта, потому что, внезапно, стиль кодирования и конвенции чрезвычайно важны, если ты не один работаешь над проектом от и до. Если до тебя, вместе с тобой или после тебя кто-то будет работать над проектом, дорабатывать, поддерживать это дело, исправлять баги, в конце концов (а они бывают всегда и везде), то очень желательно, чтобы любой разработчик мог в кратчайшие сроки, оперативно и легко вникнуть, разобраться и понять, что там к чему, откуда, куда, зачем и почему. Чаще всего у проектов с этим проблемы, поэтому накладные расходы множатся, а эффект сходит на нет, усугубляясь текучкой кадров.

    Даже если тебе попадается практически идеальный проект, внезапно оказывается, что твоя оперативная память это 5-7+-2 объекта, а удерживать в голове одновременно нужно сотни...

    Зачем я все это рассказываю? Затем, что это реальность, которая для джунов не делает исключений.

    Термин "фигак-фигак и в продакшен" встречается повсеместно, т.к. ресурсы (деньги, время, кадры) практически всегда весьма жестко ограничены и ничего ты с этим не поделаешь.

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

    С другой стороны сейчас предпочитают фронта, который еще и неплохо верстает. Слава флексбоксам и современным браузерам, сейчас это делать намного проще, чем годы назад.

    Теперь относительно того что делать - если в бэкграунде нет сильных скиллов по алгоритмике и структурам данных (олимпиады по программированию, универский курс информатики), то прям очень сильно рекомендую прокачать. Будучи наставником на нескольких курсах фронтенда я постоянно встречают студентов, которые "вроде бы" знают язык, но затрудняются скомпоновать пару циклов с условиями, вот буквально просто виснут на неопределенное время, причем без результата. Лично я рекомендую кодварс. Своих студентов я прокачиваю именно там. Достаточно прорешать 30-40 задачек, чтобы базовые скиллы ушли на уровень рефлексов и перестали парить мозг. Правда желательно решать это все с наставником.

    Косвенный бонус тут будет в том, что ты привыкнешь решать задачи на JavaScript. Я когда менял стек, поначалу мыслил на PHP, и подобный финт на кодварс позволил мне переформатировать мышление на JS. Вот мой профиль на кодварс как пруф: https://www.codewars.com/users/iCoderXXI

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

    Понять надо настолько глубоко, чтобы легко и просто, с юморком, рассказывать это любой первой встречной бабушке, да так, чтобы та всё поняла... Это вот прям залог успеха в JS, потому что все остальное держится на этих двух китах. В ютубе имеется курс Зоракса (Zorax) и JavaScript Weird Parts, оба про то же самое, первый на русском, второй на инглише. Кантор, безусловно, крут, но эти двое объясняют попроще и понятнее (имхо).

    После этого прокачиваемся в использовании встроенных методов JS, таких как map, reduce, includes, replace и пр. (на том же кодварс)

    После этого нужно прокачаться в ES6+, стрелочные функции, let/const, деструктурирование, рест оператор, классы, промисы, генераторы, async/await, декораторы - без этих продвинутых штук в современных фреймворках ловить нечего.

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

    Потом уже заостряемся на API форм, DOM, AJAX (fetch/axios), вебсокетах, Localstorage и пр.

    И вот только теперь можно переключаться на фреймворки. Проще всего освоить Vue (по слухам), наибольшим спросом пользуются React и Angular, для общего развития так же неплохо бы немного послушать про Ember.JS.

    React только на первый взгляд выглядит простым, на самом деле это только view-библиотека, а в любом нормальном SPA есть много чего еще кроме view, поэтому React всегда идет в компании Redux, Router, и еще целой толпы всего, что тоже придется осваивать, не только с точки зрения API, но и с точки зрения философии (а нахрена оно вообще сдалось?)

    Перед походами на собесы очень желательно иметь портфолио из нескольких готовых проектов, вылизанных стилистически.

    Далее освежаем базу по JS - типы, замыкания, прототипы, и смело топаем по собесам, будучи морально готовыми завалить первые десять.

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

    Еще вроде большие компании вроде Яндекса устраивают летнее обучение, с последующим трудоустройством лучших кандидатов, но это не точно.

    Оптимистичный прогноз - 6-12 месяцев плотного фигачинга и ты в тренде.
    Ответ написан
    7 комментариев
  • Code review верстки новичка + вопросы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Нужна конструктивная критика

    Ну давайте покритикуем... постараюсь все аргументировать.

    Начнем не с кода, а с юзабилити так сказать: есть люди, которые используют tab для перемещения по странице. Это факт. В вашем случае получается, что в верхнем меню перемещаться можно только по словам (но не по иконкам), а по остальной странице - вообще нельзя. Т.е. формально перемещение идет, но ничего не выделяется и совершенно не понятно где мы находимся. Имеет смысл добавить для focusable-елементов стили для :focus.

    Второе - при уменьшении экрана в некоторых местах надписи начинают наезжать (несильно, но глаз режет) друг на друга. Возможно вам стоит почитать статью про изменение размера шрифта в зависимости от размера экрана - иногда это очень полезно.

    Ну а теперь перейдем собственно к коду. Скриптов у вас немного, поэтому буду говорить про CSS. Вопрос: у вас css файл на 2606 строк - вы пишете все в нем? Если да - вам стоит посмотреть в сторону систем сборки (grunt / gulp) - имеет смысл отдельные компоненты делать в отдельных файлах, а затем это все склеивать. Так проще ориентироваться в происходящем (и те, кто будут работать с вашим кодом после вас скажут вам спасибо). Опять же префиксы для браузеров можно будет расставлять автоматически.

    Дальше:
    .work_pic1-part1:hover span,
    .work_pic1-part1:hover:before,
    .work_pic2-part1:hover span,
    .work_pic2-part1:hover:before,
    .work_pic3-part1:hover span,
    .work_pic3-part1:hover:before,
    .work_pic4-part1:hover span,
    .work_pic4-part1:hover:before,
    .work_pic1-part2:hover span,
    .work_pic1-part2:hover:before,
    .work_pic2-part2:hover span,
    .work_pic2-part2:hover:before,
    .work_pic3-part2:hover span,
    .work_pic3-part2:hover:before
    ...

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

    К концу файла глаза довольно сильно устают. Префиксы раздражают, как и множество одинаковых (и совершенно ни о чем не говорящих) чисел. Так что префиксы лучше расставлять автопрефиксером, а в будущем посмотреть на less / sass - препроцессоры упрощают работу и имеют разные плюшки вроде переменных (например длина анимаций просто напрашивается на вынесение в переменную), наследования стилей и.т.д.

    Еще по поводу размера css: есть такое понятие как critical css - стили для первого видимого экрана. Их можно выделить автоматически (см. системы сборки) и встроить прямо в html. А все остальные стили загружать уже потом. Это создаст у пользователя впечатление быстрой загрузки. У Виталия Фридмана есть занятная лекция на youtube, где он рассматривает этот и другие вопросы оптимизации загрузки на примере smashingmagazine.

    Комментарии. Их нет. В большинстве случаев они и правда не нужны, но после нарезки такого рода окончаний
    </div>				
                    </div>
                </div>
            </div>
        </footer>
    </div>

    может что-то потеряться и потом искать не закрытый div очень непросто. Имеет смысл крупные контейнеры оборачивать в комментарии, показывающие начало и конец этого блока (помнится emmet умеет вставлять такие сразу с двух сторон).

    Да и напоследок: названия классов очень разнородные - то дефисы, то подчеркивания, то длинные, то короткие, иногда в них видится система, но эта система переодически дает сбой. Не люблю я БЭМ, но, вероятно вам стоит почитать о нем более подробно (или про аналоги, решающие те же задачи - недавно тут на тостере был вопрос о том, что делать, если бэмоподобные классы перестали нравиться - пришли к выводу, что rscss тоже неплох).

    P.S.: планшета под рукой нет, поэтому про тормоза ничего сказать не могу - на слабом нетбуке все работает более-менее нормально.
    Ответ написан
  • Как верстать адаптивно с нуля?

    @sincopa
    Для адаптива используй медиа запросы.
    https://habrahabr.ru/company/google/blog/173861/
    Какой нужен для планшетов media запрос?
    Там, все просто если не понятно, посмотри пару уроков на ютюбе. Сразу поймешь.

    paranoida.github.com/sass-mediaqueries - миксины для SASS
    Ответ написан
    2 комментария
  • Как тестировать верстку?

    @soledar10
    html css3 js jquery
    1. Pixel perfect
    2. Валидность кода
    3. PageSpeed Insights
    4. GTmetrix
    5. Pingdom Website Speed Test
    6. Проверка адаптивности
    7. Проверка для Retina (srcset, svg, иконочные шрифты)
    Ответ написан
    3 комментария
  • Адаптировать уже работающий сайт под моб устройств, какие есть нюансы?

    HamSter007
    @HamSter007
    HTML/CSS верстальщик
    Какие есть нюансы?


    Смотря какая верстка и как показывает практика, год не имеет значения (если, конечно, не далекие 90-ые), потому что до сих пор есть динозавры, которые верстают таблицами, либо с использованием классов типа "niz", "verx", "a_tyt_ya_ribu_zavorachival".

    Самое распространенное:

    - Задана фиксированная ширина, либо у всей обертки (в лучшем случае), либо для .header, .footer, .main.
    Решение: заменить фиксированную ширину width: 1000px; на max-width: 1000px; width: 100%;.

    - Задана фиксированная ширина у остальных блоков (кнопки, формы, ...).
    Решение: применять уже медиазапросы @media screen and (max-width: XXpx ) { ... }, лучше, конечно, @media screen and (min-width: XXpx ) { ... } , либо применять ширину в %, где есть возможность.

    - Изображения.
    Решение:
    img { max-width: 100%; width: 100%; height: auto; }


    НО все это зависит от ситуации и потребностей. Все зависит от сайта, от дизайна. Так сразу и не скажешь, что все же нужно применять, а что и не стоит.
    Ответ написан
    Комментировать