• Как сделать анимацию волнистой линии?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Вечное движение по горизонту, с возвратом на место https://jsfiddle.net/q74e191z/
    UPD: Вот так плавнее https://jsfiddle.net/q74e191z/1/
    Ответ написан
    Комментировать
  • Как быстро реагировать на новые задачи на биржах фриланса?

    zamboga
    @zamboga
    Бизнес-аналитика, фин. моделирование, дашборды
    Искать заказы на других площадках, кроме ад.кг

    Ловите из моей подборки:
    • Биржи фриланса СНГ
    https://primelance.com — агрегатор фриланс-бирж.
    https://freelance.ru/
    https://freelansim.ru/
    https://YouDo.com
    https://fl.ru/
    https://freelancehunt.com/
    § Статистика цен https://freelancehunt.com/statistics/rates/currency/rub
    https://www.weblancer.net/
    www.free-lance.ru
    https://yukon.to — пока бесплатная (январь 2018)

    • Биржи фриланса международные
    https://www.upwork.com
    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
    Ответ написан
    1 комментарий
  • Не броская на первый взгляд сущность – как реализовано это шаманство?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно сделать на SVG:
    <svg viewBox="0 0 100 100">
      <defs>
        <filter id="noise">
          <feTurbulence id="js-turbulence" type="fractalNoise" baseFrequency="30" result="noisy"></feTurbulence>
          <feColorMatrix type="saturate" values="0"></feColorMatrix>
          <feBlend in="SourceGraphic" in2="noisy" mode="multiply"></feBlend>
        </filter>
        <clipPath id="the-object">
          <circle cx="50" cy="50" r="50" fill="currentColor"></circle>
        </clipPath>
      </defs>
      <circle cx="50" cy="50" r="50" fill="#5FDDD1" filter="url(#noise)" clip-path="url(#the-object)"></circle>
    </svg>

    Только вместо круга взять path, который вам нужен. Изменяя значение baseFrequency получите "анимированный" шум - codepen.
    Ответ написан
    1 комментарий
  • Как вывести список html файлов в папке используя gulp?

    @vinograddd Автор вопроса
    Может кому пригодится - нашел плагин gulp-listing
    Ответ написан
    Комментировать
  • Что изучать верстальщику и в каком порядке?

    vilka_2009
    @vilka_2009
    Верстаю
    Не слушай тех, кто говорит, что без JS верстальщик - не верстальщик. Такие люди уже слишком давно работают, чтобы осознавать насколько сложно быстро изучить js попутно получая свой первый опыт в верстке.
    Запомни вообще: мы не можем знать все и сразу. Опыт - это самое важное после стремления и умения учиться и развиваться. Чтобы ты не боялся, что не возьмут в другую компанию: https://habrahabr.ru/post/323188/ Взять к примеру сообщение Тима Дикерса: "Привет, в лид в гугле, и более чем 30 лет программирую. И каждый раз мне надо искать, как узнать длину строки в питоне." А ведь самый первый урок на любом языке начинается с примера, как узнать длину строки ))

    Теперь поделюсь немного своим опытом. Как начинала я: я уволилась с работы и пошла учиться на курсы в htmlacademy База там дается отличная, правда с первого раза мне сложно было заставить себя учиться, поэтому я прошла бесплатно второй такой же интенсив. Перед НГ защитилась на отлично, можно сказать, и в феврале меня уже пригласили на работу примерно как у тебя (тоже java, совдепия, xml, таблицы). Сидела я там и баги всякие поправляла. Ушла через 5 месяцев. Долго не могла устроиться и из-за отсутствия свободных мест, и из-за собственного же страха и неуверенности. Бралась за фриланс, получала опыт, даже бесплатно работала в стартапе)) Мне важно было как можно больше практиковаться и получать опыт. Благо вообще нравится верстать) Весной следующего после увольнения года мне предложили работать в какой-то новой конторке, нас там было всего трое - дизайнер, программист и верстальщик. Всему обещали научить и чему успели научили) И ведь до сих пор люди считают, что верстальщик в компании должен быть! А некоторые компании совмещают приятное с полезным: верстальщика с программистом-фронтендером. Тем самым экономят рабочие места и зарплаты. Удобно же, да?) И вот такие опытные разрабы и говорят, верстальщик без js - не верстальщик. Фигня все это. Сейчас верстка гораздо сложнее и заковырестее, чем работа контент-менеджера, которая заключается в том, чтобы текст писать и вставлять его куда надо. Когда ты умеешь js - ты уже junior фронтендер. Это мое ИМХО. Ты отвечаешь не только за верстку, но и за фронт. Короче, далее)) В этой маленькой конторке я получила норм опыт и через пол года меня уже переманили в другую, одну из топовых организаций нашего небольшого города (тоже 400к). Зп как я когда-то хотела, проекты интересные, полная свобода действий и самостоятельность, даже уважение!) и я не знаю JS. И флексбоксы только начала пробовать. И проекты в моем портфолио за 2 года можно по пальцам пересчитать. Нужно просто успокоить себя и осознать, что верстка - это совсем не сложно. И js тоже совсем не сложно. И быть неопытным - тоже не проблема. Те организации, которые готовы брать неопытных людей, знают на что идут, они могут выделить свое личное время на твое обучение, на допиливание твоего опыта) Мы с коллегами 2 раза в неделю остаемся после работы и учим js. Нам читают учебник learn.javascript (да да), быстренько так зачитывают, все на пальцах и примерах в браузере тут же показывают, объясняют простым языком и потом ты уже спокойно можешь перечитывать учебник и понимать, что там написано и выполнять задачки под статьями. Периодически, для закрепления материала, нам дают домашку. Точнее давали, мы уже закончили js-лекции. И все равно, нельзя сказать, что мы сейчас прям сядем и плагин свой напишем - ни! Мы теперь можем понять практически любой код, написанный другими людьми. И использовать его. Для написания своего нужен просто опыт, больше практики.

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

    Вот мой "блог"-цель по развитию в профессии, может прибавит тебе чего. Я его чисто как чек-лист для себя составляла.

    По поводу адаптива: в бутстрапе тоже используются медиазапросы. И покапавшись в нем, поюзая его, я поняла и осознала, что такое адаптив. Не знаю, что там учить перед его использованием?! Его и создавали как раз для программистов-бэкэндеров, чтобы они не запаривались и не вникали в адаптивную верстку, а просто юзали нужные классы. Так что, начинай использовать бутстрик и норм будет ;)

    Вот те мини-план от меня:
    • отбросить страхи
    • включить уверенность
    • блочная верстка
    • сетка на float || inline-block
    • попробовать бутстрап
    • html5, css3, семантика (она плотно зашита в html5)
    • попробовать расположить все элементы на странице/блоке позиционированием
    • ( так же все это можно попрактиковать на бесплатный курсах html-академии )
    • медиа-запросы
    • устроиться на работу
    • осознать бутстрап (то есть попробовать осознанно сверстать несколько макетов на бутстрапе, с адаптивом, на работе прям и попробуешь, ведь ты же уже знаком с бутстрапом :))
    • флексы - узнать и осознать, что это круче и удобнее бутстрапа в миллион раз
    • Внедрить флексы в рабочий проект, утвердив с ведущими и доказав, что его можно спокойно юзать и что не надо поддерживать ie 9... да даже 10
    • Самое главное: уделять по 1-2 часу в день, чтобы прочитать 0,5-1 главу на learn.javascript и пройти задачки под каждой прочитанной статьей ( у меня примерно столько уходило времени).


    Кстати да, совсем забыла про svg - это само собой ) Выкладывать на гитхаб свои работы прям на ходу разработки - это тема! Проверяющие будут видеть как ты коммитишь и юзаешь гит.
    Ответ написан
    10 комментариев
  • Где следить за новинками Frontend инструментов, IDE и т.д.?

    vicodin
    @vicodin
    Имею некоторый опыт
    https://www.reddit.com/r/Frontend/
    https://frontendfront.com/
    https://medium.com/

    ^ всего этого хватит с головой
    Ответ написан
    Комментировать
  • SCSS и autoprefixer в продакшене?

    profesor08
    @profesor08 Куратор тега CSS
    Вот компилятор SCSS на PHP - leafo.net/scssphp
    Ответ написан
    1 комментарий
  • Как оптимизировать множественный вызов JS плагина с разными настройками?

    Bowen
    @Bowen
    Японский бог
    Попробуйте так
    // var keypressSlider = document.getElementById('keypress');
    var keypressSlider = document.getElementsByClassName(keypress);
    var input0 = document.getElementById('input-with-keypress-0');
    var input1 = document.getElementById('input-with-keypress-1');
    var inputs = [input0, input1];
    var defCfg = {
    	start: [20, 80],
    	connect: true,
    	direction: 'rtl',
    	tooltips: [true, wNumb({ decimals: 1 })],
    	range: {
    		'min': [0],
    		'10%': [10, 10],
    		'50%': [80, 50],
    		'80%': 150,
    		'max': 200
    	}
    };
    
    function __extends(a, b) {
    	var c = {};
    	for (var v in a) {
    		c[v] = a[v];
    	}
    	for (var v in b) {
    		c[v] = b[v];
    	}
    	return c;
    }
    
    for (var i = 0; i < keypressSlider.length; i++) {
    	var data = JSON.parse(keypressSlider[i].dataset.cfg),
    		params = __extends(defCfg, data);
    	noUiSlider.create(keypressSlider[i], params);
    }
    
    keypressSlider.noUiSlider.on('update', function(values, handle) {
    	inputs[handle].value = values[handle];
    });

    Каждому элементу можете задать свои параметры: data-cfg='{"key":"values"}'
    Ответ написан
    1 комментарий
  • Как получить ответ с fancybox?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    ну да. не вешай события на кнопки. узнавай экстросенсорно, что нажал пользователь)
    Ответ написан
    2 комментария
  • Как тегу img придать свойства background-size: cover?

    FFxSquall
    @FFxSquall
    Могу писать код, могу не писать
    Если поддержка IE не нужна, то можно использовать object-fit
    Ответ написан
    1 комментарий
  • Возможна ли реализация просвечивания фона через слой?

    ShadowOfCasper
    @ShadowOfCasper
    Middle User Interface Web Developer
    Да, это нетрудно. Правда по поддержке не всё сок.
    https://www.youtube.com/watch?v=2pra1DLA_aQ&list=P...

    Посмотри тут. И вообще весь плейлист очень полезный. В данном случае маскинг поможет, ещё насколько я помню, хотя не пробовал, backdrop-filter тоже покатит
    Ответ написан
    2 комментария
  • Можно ли в CSS проверить содержит ли один класс внутри себя другой класс?

    Все свойства идут каскадом (отсюда и название).
    Как следствие - ребенок на родителя оказать влияние не может.
    Ответ написан
    Комментировать
  • Как сделать такие линии на css?

    politon
    @politon
    HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
    Извращенно, но поправишь под себя ;) https://jsfiddle.net/joomla/bp2svqdo/
    Ответ написан
    Комментировать
  • Как сделать предзагрузку?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    Можно воспользоваться готовыми плагинами
    https://www.niklausgerber.com/projects/preloadme-a...

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

    Основные пункты реализации -
    • Создать элемент прелоадера
    • Поместить элемент прелоадера сразу после <body>
    • Прописать стили, анимации
    • Написать сам скрипт в $(window).on('load', function() { ... });

    Например:
    $(window).on('load', function () {
        var pre= $('.preloader');
        var indicator = pre.find('.indicator');
        indicator.fadeOut();
        pre.delay(350).fadeOut('slow');
    });
    Ответ написан
    Комментировать
  • Как исправить размытие текста при transform scale?

    Carduelis
    @Carduelis
    Web-developer, front-end, js, less
    Размер шрифта слишком мал, чтобы изменение его кегля на 10% дало приемлемый результат в низкоплотных экранах. Конечно, в этом виноват скорее алгоритм увеличения, он мог бы подстроиться еще лучше. Но, как видим, не всегда у него это выходит.

    Что делать?
    1. Использовать кратность увеличения, которая облегчит алгоритму работу. Поставьте 1.2 вместо 1.1. Поставив, например, кратность 2 -- по завершению анимации все будет ок. (Хотя иногда присутствуют проблемы в алгоритме и с этим. Например, из scale(2) сделав scale(1), может быть все равно муть. Надеюсь, это поправят. Или, того хуже, будет прыгать на 1px при наведении мыши, или при очередном repaint);
    2. Модифицировать именно размер шрифта. Браузеры современные хорошо рендерят любой кегль, если он кратен пикселю. (раньше, были большие проблемы со шрифтами в 13px и другими непопулярными, а сейчас решили ее);
    3. Забить. На ретине все будет красиво.
    Ответ написан
    Комментировать
  • Как правильно использовать модули в Gulp?

    Kozack
    @Kozack Куратор тега JavaScript
    Thinking about a11y
    В комментариях вам правильно говорят.
    1. Не используйте кофе. Попробуйте для начала писать на чистом JS
    2. Не подключайте библиотеки которые вам не нужны. Имею в виду если вам нужна библиотека для frontend - то и подключайте её во frontend. Если её функционал нужен именно для Gulp - тогда подключайте в Gulp.
    3. Подключайте библиотеку внутри кода самого таска. Таким образом вы значительно ускорите сборку. Как пример для таска "clean" нужна только библиотека "del". Если поместить подключение библиотек внутрь каждого таска, то удастся избежать ненужной работы и сэкономить себе время.
    4. И для простоты восприятия можно было бы каждый таск вынести в отдельный файл. А в gulpfile.js по средством того-же require() подключить нужный.
    // gulpfile.js
    gulp.task('sass', function () {
        var sassTask = require('tasks/sassTask');
        return sassTask();
    });
    Ответ написан
    2 комментария
  • Как правильно верстать с помощью bootstrap?

    @selo
    shoelace.io Здесь удобно собрать блоки и сбоку будет готовый код
    Ответ написан
    Комментировать