• С чего начать изучения анимации svg?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    По сути SVG - это почти HTML (ок, нехорошо так говорить, но тем не менее). Дерево из тегов, атрибуты, все дела. Выбираем нужные элементы, меняем атрибуты - вот и вся анимация. Как и с любыми другими элементами на странице. Это не какой-то отдельный и ни на что не похожий тип анимаций.

    Есть три варианта анимирования SVG в рамках фронтенда, два идентичных обычному HTML, и один дополнительный, привнесенный извне:

    1. CSS. Картинку, вставленную в страницу, можно анимировать с помощью CSS в каких-то пределах. Не все так получится сделать, но какие-то простые движения, изменения цветов - вполне можно. Если вы знаете CSS - можно сказать, что уже знаете все, что тут можно сделать.
    2. JS. Все как всегда. Получаем элементы через querySelector, getElementBy... и.т.д., и через setAttribute задаем элементам SVG нужные атрибуты. Обычно удобно добавить какой-то инструмент для интерполяций значений во времени. Из популярного - GSAP и Anime.js. При желании можно что-то свое написать, если задачи совсем простые, в базовом варианте все подобные инструменты строятся примерно по такому принципу. Некоторые инструменты добавляют какие-то еще свои дополнительные возможности, или есть готовые прикольные примеры, сделанные с их использованием, как например у d3.js, но нужны ли они лично вам - нельзя сказать, не зная задач. А инструменты должны выбираться исходя из этих самых задач, а не из моды. Здесь важно лишь понимать, что никакие библиотеки не расширяют сам формат SVG, не привносят никаких принципиально новых возможностей в него, они все больше про организацию скриптов.
    3. Еще есть SMIL. Это древнее зло из миров, далеких фронтенду. Есть хороший туториал на CSS-tricks. Это все "модно-нативно", но иногда сложно синхронизировать с остальными событиями на странице, и сложно отлаживать, т.к. нет адекватной привязки к инструментам разработчика в браузерах.


    Полезно еще познакомиться с вот этой статьей, там отмечены некоторые косяки, связанные с кроссбраузерностью. Да, SVG - это штука, которая вроде бы была с нами всегда, но в контексте анимирования wtf-моментов там все еще достаточно.

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

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

    HunteR-VRX
    @HunteR-VRX
    Помешанный на развитии
    А как Вы в детстве поступали, когда понимали, что ввели кого-то в заблуждение, дав, пусть и не нарочно, но все же ложную информацию? Если прямо говорили об этом, то поступайте и в своей деятельности тем же "Макаром". Озвучьте клиенту необходимость переоценки проектной работы, составьте смету, с обоснованием повышения стоимости и так далее. Далее, однозначно, Вы услышите один из двух вариантов:
    1. Клиент согласится с наценкой, сделка будет переосмечена и сотрудничество продолжится.
    2. Вас назовут одним из резких слов, входящих в словарный запас на этот случай, или намекнут о Вашем непрофессионализме.

    Для того, чтобы снизить вероятность переоценок "на ходу" в будущем, повысьте внимание к необходимости составления качественного и исчерпывающего Технического требования.
    Ответ написан
    4 комментария
  • Есть ли расширения для сохранения отредактированного в Devtools кода?

    mukhindev
    @mukhindev
    Если код лежит локально, в Chrome можно зайти в Devtools/Sources, слева на вкладке Filesystem, нажать + (Add folder to workspace) и выбрать корневую папку.
    После этого манипуляции в Devtools будут вноситься в исходники.
    Ответ написан
    Комментировать
  • Нужно ли что бы верстать знать какую то методологию?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Чтобы верстать - нет.
    Чтобы через полгода не сойти с ума разбираясь в собственном коде - да.
    Чтобы вас не прокляли другие разработчики - тоже да.
    Ответ написан
    Комментировать
  • Что такое децентрализованный интернет?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Спросите Ричарда Хендрикса.
    Ответ написан
    Комментировать
  • Что может Gulp без плагинов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Gulp по своей сути - это таск-раннер. Он не умеет ничего, кроме как запускать таски. Он может запускать их последовательно или параллельно, может передавать поток данных от одной таски в другую, может эти данные записать в файл. На этом его возможности заканчиваются. Больше он ничего не умеет. Та функциональность, которую от предоставляет, позволяет удобно организовать большое количество небольших программ, которые могут быть нужны при сборке или деплое проекта, но сами программы его не касаются. Ему сказали запустить - он запускает, не более того.

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

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Хороший вопрос!
    Я интересовался и получил ряд ответов от самих Заказчиков. Так, сказать, их мировозрение в этом плане.

    Со стороны Заказчиков:
    1. Раз ты работаешь на фрилансе - ты лох, потому, что не смог никуда устроиться.
    2. Если ты фрилансер - ты раб, который зарабатывает, чтобы не умереть с голоду. Поэтому, много тебе и платить не за чем.
    3. Нет гарантий для нас, что ты сделаешь всё на совесть. Мы не понимаем как сделать самим и, при этом, хотим хорошо сэкономить.
    4. (Про время) Мы оцениваем не сложность проекта и твоё умение и опыт, а время, которое никак не может быть дороже медианы фриланса по этому направлению.
    5. Нам нужно быстрее, т.к. это получается дешевле для нас, т.к. мы оцениваем время, а не сложность нашего проекта.
    6. Все фрилансеры низкоквалифицированные рабы.
    7. Каждый, кто мнит себя опытным и будет просить больше, будет сидеть без работы, т.к. высокая конкуренция и есть большой выбор исполнителей на рынке за копейки.
    8. Фриланс - это рабы IT сферы для нашего бизнеса.
    9. Мы всегда ищем тех, кого сможем обмануть в плане оплаты за работу и их почти 100%.
    10. Нам ничего не стоит сбросить сумму оплаты в любой момент сославшись на угрозу отрицательного отзыва.
    11. Мы не дорожим репутацией, в отличие от фрилансеров.
    12. Вы сами ничего не делаете: всё берёте с гитхаба уже готовое. За что вам платить?!

    (и ещё можно продолжать и продолжать...)

    И сразу возникает вопрос:
    Ждать ли роста дохода фрилансеров IT-сферы и когда?
    Ответ прост: когда все IT-шники поймут, что нужно ценить труд друг друга, что они не конкуренты друг другу, а единый целый "организм", который может сам за себя постоять и накормить вне зависимости от места работы и размера дохода.
    Итог: Не нужно работать и "ломать" глаза на тех, кто этого не понимает, а значит, и НЕ ЦЕНИТ!

    А пока разделяйте качество своих трудозатрат на "хлеб" и на "работу" и сразу озвучивайте 2 суммы заказчикам.
    Ответ написан
    10 комментариев
  • Как сделать сложный select?

    AngryYumy
    @AngryYumy
    Заплати фрилансеру чеканой монетой
    Ну для начала разбей задачу на мелкие пункты.
    1.Сделать свои чекбоксы
    2. Сделать главный чекбокс
    3.Создать кастомный селект
    4. Объединить все это (ну и плюс мелкие подпункты)
    5. Как вариант на каждом шаге писать вопрос на тостере (сарказм)
    Ответ написан
    Комментировать
  • Как сделать универсальную карточку?

    @forspamonly2
    вообще-то можно. через display: contents и order:

    если у вас ширина задаётся как в примере, то даже с сохранением структуры.
    Ответ написан
    7 комментариев
  • Как кто пробился на фриланс-биржах?

    kumaxim
    @kumaxim
    Web-программист
    Лично я вижу проблему самой большой рыбы в маленьком пруду.
    Я думаю, что до этого ты работал в офисе, возможно, джуном. По какой-то причине ты ушел из команды и ты решил зайти на фриланс, например, на upwork и споткнулся.

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

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

    Специализируюсь на верстке адаптивных сайтов - bootstrap, flexbox, контент-менеджменте.


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

    ОК, давай сменим твой оффер, с "Специализируюсь на верстке адаптивных сайтов - bootstrap, flexbox, контент-менеджменте." на "Создание продающих веб-сайтов, адаптированных под ПК, планшеты и смартфоны".

    Теперь, делаешь свой сайт, который будет адаптирован под ПК, планшеты и смартфоны, а также не будет вырвиглазным. На сайте должно быть описание того, как ты работаешь, т.е. рисуешь ты макет, берешь ли ты готовый шаблон, кто покупает фотки со стоков и т.д.

    Затем, начинаешь откликаться на проекты. В первом этапе твоя задача взять 10 работ, причем все равно с каким прайсом, пусть хоть $10. Сейчас, ты нарабатываешь фидбек от других пользователей. На любой бирже есть два типа людей: те, кому надо подешевле и те, кому надо. Сначала, ты работаешь на 1-ю категорию. На 2-ю ты переключишься попозже.

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

    Далее ты либо работаешь с оффером(увеличивать цену, сделать какие-то доп.ценности) либо меняешь нишу и повторяешь сначала.
    Ответ написан
    5 комментариев
  • Какие есть библиотеки для анимации и какие подводные камни при их использовании?

    @strelok011
    Рекомендую сначала определиться со сложностью анимации.
    Если она простая - писать самому.
    Если она сложная - подумать 100500 раз зачем эти мультики клиенту на сайте, оценить трудозатраты, плюнуть на нее.
    Если дело принципиальное - только в этом случае начинать искать библиотеки, решения частных проблем, брать только то, что решает вашу конкретно в этот момент возникшую задачу, мало весит, не тянет лишнего мусора, да еще и работает корректно.
    Для совсем запущенных случаев - обратиться к дедушке GreenSock https://greensock.com/
    Ответ написан
    Комментировать
  • Сложный и интересный проект для новичка?

    trapwalker
    @trapwalker
    Программист, энтузиаст
    ## Анонимный чат с темами для обсуждения деликатных офисных проблем
    Иногда хочется обсудить что-то с коллегами в офисе, но не хочется смущать их или показывать лишнюю инициативу.
    Например кто-то не смывает в туалете или слишком громко орёт и сам того не замечает. Может быть кто-то слишком интенсивно пользуется парфюмом.
    - Анонимность
    - Постоянная ссылка на чат, тему или дерево чатов
    - ссылки в виде QR-кодов
    - голосовалка
    - закрепленные посты

    ## Сайт checklist
    Веб-сервис и мобильное приложение для краудсорсинга чеклистов для всего: зарегать ИП, получить визу, что делать при ДТП, как влезть в ипотеку, как вылезть из неё, чем заняться с ребенком на выходных (N-ле

    - Коллекция чек-листов снабженных тегами, доступная для краудсорсинга.
    - Краудфандинг составления и поддержки нового листа.
    - Фильтрация чек-листов.
    - Фильтрация пунктов.
    - Тегирование пунктов.
    - Графовые алгоритм обхода чек-листа.
    - Мастер обхода чек-листа.
    - Отчет по чек-листу.
    - Вложенные чеклисты, гиперссылки между разными листами.
    - Параметризация.
    - Экспертная система, логические связи (расширенный режим).

    Примеры:
    - Что делать при ДТП
    - Открыть ИП
    - Осмотр авто при покупке (подветки для разных конкретных моделей)
    - Первая помощь при...
    - Диагностика инсульта
    - Зомби-акопалипсис: как приготовиться
    - Атомный взрыв неподалёку - что делать
    - Планетарная катастрофа - как выживать
    - Поход выходного дня - что взять
    - Подготовка авто к поездке
    - Путешествие: Алжир (виза, прививки, документы, отели, транспорт)
    - Как влезть в ипотеку
    - Как вылезть из ипотеки
    - Как быстро заработать (во все тяжкие)
    - Покупка квартиры (на что обратить внимание)
    - Самостоятельное строительство дома (общий план)
    - Чем заняться с ребёнком N-лет
    - Как отметить новый год
    - Что интересного в районе <пос. Майский>
    - Номера телефонов и документы в автомобиле

    ## Эротический краудфандинг
    Интернет ресурс, где девушки могут делать крауд-фандинговые кампании

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

    ## Простой открытый сервис для обмена сообщениями
    - HTTP API, Web-sockets
    - p2p rtsp
    - опциональное end-to-end шифрование
    - хранение истории на клиентах
    - возможность использования нескольких серверов
    - возможность использования альтруистичных клиентов для проксирования трафика p2p
    - поиск узлов на основе блокчейн технологий и DHT таблиц

    ## Онлайн-журнал путешествия
    - публикация трека в реальном времени
    - комментарии путешественника и фолловеров
    - стримы (аудио, видео, фото)
    - отложенная загрузка
    - журнал(расходы, чек-поинты, расписания, цены, погода)
    - FAQ
    - голосовалка

    ## Поэтический онлайн редактор
    - выбор стопа, стиля и жанра
    - шаблон с плейсхолдерами, разбивающий текст на слоги
    - облако рифм
    - подражающий автогенератор
    - многосегментный словарный банк (дифференциально-слоистая древовидная структура, своя специфика в верхнем слое, поэлементное ранжирование сегментов)
    - тезаурус
    - словарь сочаетаемости
    - N-граммы поэзии по авторам и стилям
    - корпус поэзии
    Ответ написан
    13 комментариев
  • Что не так с gulp, почему он не подключается?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    gulp.watch('./src/css/*.css', gulp.series('reload-css'));


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

    А еще ведь можно текст ошибки вбить в гугл...
    Ответ написан
  • Как сверстать и настроить процентную шкалу (пример на фото)?

    dicem
    @dicem
    Ответ написан
    Комментировать
  • Обучение web-разработке, есть что то стоящее?

    Tomio
    @Tomio
    backend developer (python, php)
    Я думаю, эта ссылка будет исчерпывающим ответом на ваш вопрос - https://habr.com/ru/company/moikrug/blog/454906/
    Ответ написан
    Комментировать