• Можно ли сделать плавный выход при hover, из display none в display block?

    potapchino
    @potapchino
    p {
      visibility: hidden;
      opacity: 0;
      transition: visibility ease 0s, opacity ease 1s;
    }
    
    li:hover p {
      visibility: visible;
      opacity: 1;
    }
    Ответ написан
    1 комментарий
  • Как сделать элемент выходящим за все границы страницы, при этом фиксируемым и по центру?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Зафиксируйте 2ой элемент по центру. Например так:
    .second {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }


    На JS посмотрите размер блока и рассчитайте коэффициент (K), на сколько его нужно увеличить, чтобы он оказался больше размеров окна браузера. Примените коэффициент через transform: scale(K) - тем более у вас SVG, что масштабируется без потери качества.

    На скролл повешайте событие, которое будет постепенно уменьшать коэффициент до единицы. Всё. :)
    Ответ написан
    Комментировать
  • Как соединить 2 контура в Adobe Illustrator?

    @Jenish
    b0df661262604517af0b8767101ec589.jpg
    1 - это просто два контура
    2 - это составной контур
    3 - это слитые контуры

    Полагаю, это у вас составной контур и надо ее разбить для начала. Для этого надо правой кнопкой нажать на объект и выбрать пункт Release Compound Path или SHIFT+CTRL+ALT+8, выровнять как вам надо и нажать Unite в панели Pathfinder. Подробнее тут
    Чтобы объекты получались "стык в стык" пользуйтесь быстрыми направляющими (smart guides) и правильно настройте привязку объектов (snap to), которая тем точнее работает, чем больше зум :)
    Ответ написан
    Комментировать
  • Как настроить gulp-autoprefixer, куда пропал параметр настройки browsers?

    @Just__Den
    FULL STACK
    gulpfile.js

    const autoprefixer = require('gulp-autoprefixer');
    
    function scssTask(){    					
    	return src(files.scssPath)					
    		.pipe(sourcemaps.init()) 					
    		.pipe(sass()) 					
    		.pipe(autoprefixer())		
    		.pipe(sourcemaps.write('.')) 					
    		.pipe(dest('public/css')					
    	); 					
    }


    package.json

    "main": "gulpfile.js",
      "browserslist": [
        "last 2 version",
        "> 1%",
        "maintained node versions",
        "not dead"
      ],
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },


    детали
    Ответ написан
    22 комментария
  • Почему не верно отображается массив объектов в Chrome после сортировки?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Консоль хрома при раскрытии объектов и массивов использует текущее значение в памяти, а не то, которое было на момент вывода в консоль.
    Поэтому и
    при просмотре увидим, что он одинаков на всех этапах сортировок. В тоже время, он совпадает с последним отсортированным, массивом.
    Ответ написан
    3 комментария
  • Какие полезные ресурсы используете в работе?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
    MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
    Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
    WAVE и regex101, чтобы проверять себя.
    В Browserhacks иногда полезно заглянуть.
    FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
    Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
    Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
    Google - если затупил.
    Noisli - для фонового шума.
    Cross Browser Testing, чтобы тестировать результат.
    Ответ написан
    3 комментария
  • Куда можно быстро загрузить 70гб аудио? (mp3) чтобы слушать онлайн\качать?

    Google Music позволяет загружать свои файлы в том числе и без подписки.
    Ответ написан
    3 комментария
  • Где найти актуальные видеоуроки по JavaScript?

    @kova1ev
    Зачем видеоуроки.

    https://learn.javascript.ru/

    отличнейший учебник.
    Ответ написан
    Комментировать
  • Где вы берете идеи для дизайна?

    Incorrectfree
    @Incorrectfree
    Графический Дизайнер
    Как бы глупо не звучало, но в Инстаграме подписался на теги: UI, UX, Web Design, Mobile Design и т.п.
    Ответ написан
    1 комментарий
  • Что изучать дальше?

    @McBernar
    Когда закончите с книгой — самое время начать верстать.
    Ответ написан
    Комментировать
  • Хорошие книжки по JavaScript?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    А решается оно часто двумя строчками :)

    Это по причине того, что на форумах часто код дают в функциональном стиле, состоящим из вызовов map/filter/reduce и.т.д., а новички еще не дошли до этого, и их это ставит в ступор.
    Может быть есть какие-то книги, которые помогают "строить мост" между голой теорией про массивы (в которой, к слову, сложности не вижу) и возможностью применить знания на практике?

    Вообще, носорог и learn.java-script.ru самые простые книги по JS, есть еще You Dont Know JS, она на английском. Если они кажутся сложными, то либо программирование это не ваше, либо пробуйте читать фундаментальные книжки, типа Код. Тайный язык информатики. Чарльз Петцольд
    Ответ написан
    4 комментария
  • Как сверстать замыленую плашку на фоне - картинке?

    @yarik_gui
    back & friend
    то что ты искал
    Ответ написан
    Комментировать
  • Какой срок жизни SSD Macbook Air 2018?

    AlexMarken
    @AlexMarken
    Скажу сразу - о сроках жизни даже не беспокойся)

    Одним из главных факторов срока жизни SSD является количество перезаписей на ячейки диска. Чем объёмнее накопитель и больше допустимых циклов перезаписи, тем дольше он прослужит. Тип SSD с TLC имеет 500-1000 (возможно, и более) циклов перезаписи ячейки, и соответственно есть такой параметр, как TBW (Total Byte Write), - общее число байт которое можно записать на диск, после чего ячейки памяти израсходуют свой ресурс.

    Все мои SSD (Samsung, Plextor) жили не более 4-5 лет, получается Macbook Air проживет также?

    SSD в MacBook'ах стоят хорошего качества и с огромным количеством циклов перезаписи, да стоят они дорого. Если сравнивать твои SSD с теми, что использует Apple, цифры будут сильно отличаться в пользу Apple - и в цене, циклах перезаписи, и тп. На такие диски, как в iMac/MacBook, производители обещают срок службы до 10 лет.

    А теперь посчитаем. Допустим, SSD у MacBook Air 2018 имеет объём 128Гб и 800 циклов перезаписи на одну ячейку памяти, а железо меняют раз в 4 года в среднем. Срок службы производитель заявляет до 10 лет.

    1. "Чтобы угробить диск за 4 года, нужно...":
    а) TBW = 128Гб * 800 циклов / 1024 = 100 ТБ информации можно записать на диск, чтобы ячейки памяти отказали.
    б) 100ТБ / (4 * 365 дней) * 1024 = 70 ГБ нужно перезаписывать в день, чтобы диск за 4 года пришёл в негодность.
    в) DWPD = 100ТБ / (128Гб * 4 * 365 дней) * 1024 = 0.54 - количество перезаписей всего объема накопителя в день (из 800 допустимых).

    2. Время жизни с учётом погрешностей:
    Средний пользователь записывает-удаляет 20Гб информации ежедневно (с учётом нагрузки софта на диск).
    100 ТБ * 1024 / (20Гб * 365 дней) = 14 лет службы диска, берём в расчёт различные внешние факторы, влияющие на жизнь SSD = получаем 8-11 лет безотказной работы SSD у MacBook Air 18г.

    3. "Если объём увеличен в двое":
    Точно такой же диск, но с объёмом памяти 256Гб будет иметь показатели, увеличенные в 2 раза.
    Например, TBW = 200Тб или 140 ГБ/день перезаписи за 4 года. Но DWPD останется прежним и срок службы тоже до 10 лет.

    Вывод:
    а) MacBook Air 2018 c 128Гб будет иметь жизнь диска 8-11 лет при условии эксплуатации среднего пользователя;
    б) Если ты покупал недорогие SSD с 128-256Гб памяти с меньшим циклом перезаписи, срок службы для них 4-6 лет - как и получилось в твоём случае;
    в) У более объёмных носителей показатель TBW может достигать и 900Тб, и даже выше.
    Ответ написан
    30 комментариев
  • Как запретить скриншотить страницу?

    rockon404
    @rockon404
    Frontend Developer
    Никак.
    Ответ написан
    Комментировать
  • Как порекомендуете верстать этот блок?

    LenovoId
    @LenovoId
    svg, css,js
    Я три раза перекурил и два раза чай налил : https://codepen.io/simkaUser/pen/MEapWP?editors=1100 , это задание не для джуниора
    Ответ написан
    Комментировать
  • Как реализовать обрез буквы?

    sk1llmuf
    @sk1llmuf
    frontend
    Сделать картинку поверх текста, лучше всего через z-index
    Ответ написан
    Комментировать
  • Настройка Visual Studio Code?

    tomnolane
    @tomnolane
    профессиональный разработчик
    самые основные:
    Auto Close Tag - авто закрытие тегов
    Auto Rename Tag - переименование парных тегов
    Beautify - разжатие кода (из minify в стандартный вид)
    highlight-mathing-tag - подсвечивание парных тегов (нужно настроить в конфиге, чтобы поярче было)
    html snippets - сниппеты как в сублайме
    insert <br> tag - вставка тега новой строки через шифт+enter
    PHP Debug - деббагер для php (нужно настраивать)
    Debugger for Chrome - JS дебаггер
    vscode-icons - иконки для VSC
    minify - сжатие кода
    css auto prefix - автопрефиксы
    Insert Numbers - полезное расширения для вставки чисел определенного формата во множество мест с инкрементом
    ================
    ещё некоторые, которые я добавил и пользуюсь:
    apache Conf (для подсветки .htaccess)
    AutoFileName - дополнение пути (например для "requere" в node.js)
    Bookmarks - делать закладки в коде
    Bracket Pair Colorizer - подсвечивать парные скобки (квадратные, фигурные, прямоугольные, круглые) очень удобно
    gitignore - добавляет .gitignore файл под проект (node.js, docker, yii2, laravel и т.д.)
    GitLens — Git supercharged - показывает гит-коммиты в коде (и автора коммита, удобно в командной разработке)
    HTML Class Suggestions
    Live Server - открывает браузер, где в режиме "онлайн" видишь изменения в html
    Markdown Preview Enhanced - тоже самое, что и Live Server, но только для страниц с markdown разметкой
    Material Icon Theme - для красоты VSC)
    Monokai Dark Soda - моя любимая тема разработки
    MySQL Syntax - для подсветки синтаксиса sql
    PHP Intellisense -
    Quick gitignore - добавляет файл/директорию в gitgnore
    Regex Previewer - помогает в регуляркой
    SQL Server (mssql) - для работы с sql server
    SVG Viewer - просматривать SVG картинки
    Todo Tree - делать заметки, удобно
    Remote FS - для удаленного подключения по FTP (удобно, если несколько серверов), пример конфига:
    { 
        "remotefs.remote": {"site": {
            "scheme": "ftp",
            "host": "1************01",
            "username": "ad**********ain",
            "password": "Lv************xF",
            "rootPath": "/"
          },
          "site2": {
            "scheme": "ftp",
            "host": "17**********1",
            "username": "a*****************m",
            "password": "************O",
            "rootPath": "/"
          },
          "moy-yandex": {
            "scheme": "ftp",
            "host": "a***********u",
            "username": "a***************mone",
            "password": "1***************W",
            "rootPath": "/"
          }
      }


    UPD
    Есть ещё хорошее приложение: Gremlins. Он подсвечивает невидимые символы в коде. Но его нужно немного "допилить", чтобы показывал невидимый символ юникод u+feff (образуется часто, когда кодировка страницы UTF-8 with BOM)
    собственной как допилить я сам же описываю в своем вопросе: тут

    что касается сннипетов для php: бывает такое, что они не срабатывают и тут две причины: пользователь достаточно быстро жмет TAB (VSC не успевает ещё понять, что пользователь закончил ввод) и когда достаточно долго работаешь в VSC без перезагрузки последнего.

    ИМХО: рано или поздно эта проблема решиться. VSC стремительно развивается и такая проблема будет решена (до этого чтобы быстрее было - лучше написать сюда об этом)
    Согласен с Artem , с тем, что Brackets имеет некоторые вещи лучше и оптимизированнее, чем VSC, и я для Front-end чаще работаю в Brackets (в большей части из-за возможности видеть online изменения тут же в браузере). Но главный минус Brackets от VSC - при большой кол-во плагинов он очень-очень тупит, также мне не нравится работа Brackets-ftp.
    Послесловие:
    VSC ещё учится и становится лучше. Рано или поздно он обгонит и Sublime, Atom и другие IDE - это вопрос времени, потому что: 1) он open source 2) финансирует и ведет разработку Microsoft 3) бесплатен!!! и последнее камень в огород всем крупным IDE
    Ответ написан
    2 комментария
  • Как сделать такую анимацию?

    alsolovyev
    @alsolovyev
    У Вас есть путь из точек(svg path). На примере 1 из линий с сайта https://slides.com
    <path class="path-2" d="M0,400 L 1000,400 1000,445 S 500,420 0,480 Z" fill="#2b81bf"></path>

    Это конечное состояние точек. Вот это начальное:
    <path class="path-2" d="M0,400 L 1000,400 1000,500 S 500,500 0,500 Z" fill="#2b81bf"></path>

    Теперь по событию page load анимируйте атрибут d из начального состояния в конечное.
    Можно делать через requestAnimationFrame(), если позволяют знания. На каждом шаге добавлять N к координате точки.
    let i = 0;
    (function loop() {
      i++;
      path.setAttribute('d', `M0,400 L 1000,400 1000,445 S ${i},420 0,480 Z`);
      if (i === 500) return
      window.requestAnimationFrame(loop);
    })();

    Что-то такое. Примеров в интернете куча: https://medium.com/@bdc/gain-motion-superpowers-wi...

    Или используйте библиотеки, которые позволяют это делать более простым способом:
    1. AnimeJS
    2. greensock
    3. SnapSvg
    4. ...


    update:
    https://youtu.be/qtZ_ISUOzhI в свое время понравилось объяснение от этого парня. На видео он делает другую трансформацию, но идея точно такая же. Просто изменить под Ваши нужды.
    Ответ написан
    Комментировать