Leaderboard


Popular Content

Showing content with the highest reputation since 01/26/2019 in all areas

  1. 4 points
    @Kotyar, онлайн аудит вашей работы доступен:
  2. 2 points
    Поправил ваш стиль, у вас в медиа запросе была лишняя ; а вообще прогоните ваш сайт через валидатор - ужаснетесь
  3. 2 points
    1.1 Основные требования к сборщику Сборщик проекта — это система, которая выполняет типовые задания автоматически, тем самым экономит время разработки проекта. Написанный нами сборщик (или билдер от англ. builder) должен стабильно работать в рамках проекта на протяжении всего его существования. Определимся со списком задач, которыми должден владеть сборщик: Иметь единый конфигурационный файл, в котором описываются настройки проекта и пакетов, которые участвуют в обработке ресурсов проекта Обрабатывать ресурсы проекта "на лету", после внесения в них изменений Генерировать стили проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Поддерживать Sourcemaps — для отладки стилей Поддерживать AutoPrefixer — для автоматического генерирования стилей под старые версии браузеров Поддерживать cssBase64 — для встраивания маленьких картинок (иконок размером, обычно, до 2КБ) непосредственно в CSS Поддерживать CSSO — структурная оптимизация стилей Генерировать criticalCSS (про это можно ознакомится в статье Разбираемся с критичным CSS) Автоматически организовать стили проекта. При помощи csscomb.com приводить все стили к единому стандрату форматирования, что очень удобно для ситуаций, когда над проектом работает больше одного разработчика Собирать и генерировать скрипты проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Проверять код при помощи eslint — это инструмент проверки качества написанного программного кода на JavaScript Делать конкатенацию js-фалов (собирать все файлы в один) Оптимизировать изображения, которые используются в проекте Хочу обратить внимание на то, что требования составлены из целей создавать оптимизированный код и иметь гибкий инструмент для этого. В большинстве случаев бОльшую часть из этого списка Заказчик не требует (так как это повышает стоимость проекта). Но, так как автор последние пол десятилетия работает с высоконагруженными системами, где высокие требования к клиентской оптимизации идут "из коробки", то было решено использовать именно такой подход в данном обучении. Более простую версию билдера, имея эти знания, Вы сможете создать когда угодно. А за более сложную — Вы честно потребуете больший оклад, и будуте правы :) Но, так же обращаю внимание что нет пределу совершенству в оптимизации. В рамках обучения мы будем собирать все ресурсы (JS/CSS) в один файл. Но есть методы которые позволяют асинхронно подгружать как CSS (редкий случай), так и JS (обычное явление). Если Вам интересно углубится в мир клиентской оптимизации я советую начать с просмотра лекции Виталий Фридман: Responsive Web-дизайн. Трюки и уловки (всего 1ч 40 мин но море полезной информации). 1.2 Инициализация Этот этап разработки крайне прост. Да бы не повторятся в том о чём уже было сказано в Интернетах множество раз я предлагаю посмотреть видео, в котором рассказываются шаги, которые будут проделаны на данном этапе: 1.3 Установка NPM пакетов Пакеты, которые мы будем в разработке условно поделим на 2 типа: ресурсы проекта (такие как jQuery, bootstrap, прочее) пакеты сборщика (ПО которое будет использоваться для обработки ресурсов для оптимизации, проверки кода, прочее) 1.3.1 Установка пакетов проекта Первым шагом установим пакеты, которые будут использоваться непосредственно в вёрстке: $ npm install -D jquery popper.js bootstrap 1.3.2 Установка пакетов сборщика Следующей командой установим пакеты которые будут использоваться для сборки ресурсов проекта $ npm i -D gulp-autoprefixer gulp-concat gulp-css-base64 gulp-csscomb gulp-debug gulp-if gulp-imagemin gulp-load-plugins gulp-sass gulp-sourcemaps gulp-uglify require-dir gulp-newer browser-sync gulp-notify gulp-notify through2 stream-combiner2 gulp-eslint penthouse gulp-csso gulp-babel @babel/core @babel/preset-env gulp-pxtorem Краткое описание предназначения устанавливаемых пакетов: 1.4 Сборщик проекта Ветка сборщика: $ git checkout 1.4-gulp-builder 1.4.1 Структура Файлы и директории которые отвечают за сборку проекта: . ├── gulp/ │ ├── .csscomb.json - файл настроек cssComb │ ├── .eslintrc - файл настроек eslint https://goo.gl/4K6TyF │ ├── config.js - файл настроек задач и пакетов Gulp │ └── tasks/ - задачи Gulp │ ├── scripts.js │ ├── server.js │ └── styles.js └── gulpfile.js - основной файл конфигурации Gulp Далее пройдём по всем файлам и обсудим что каждый делает. 1.4.2 Основной файл конфигурации Gulp Содержимое файла gulpfile.js 'use strict'; require('require-dir')('./gulp/tasks/'); const gulp = require('gulp'); // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); Это основной файл конфигурации сборщика. Он легковеснее того, который Вы видели в Скринкасте по Gulp и вот почему... require('require-dir')('./gulp/tasks/'); Эта строка загрузки всех задачи, которые размещаются в директории "./gulp/tasks". После её выполнения будут загружены написанные нами задачи автоматически. const gulp = require('gulp'); Следующим шагом мы загружаем Gulp, так как ниже мы используем его для объявления задач // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); А эти строки объявляют задачи, которые мы будем запускать для выполнения тех или иных операций. Первая задача "default" — это задача, которая запускается по умолчанию при запуске Gulp (если задачи для выполнения не указаны явным образом). На пример команда: $ gulp запустит те же задачи, которые будут запущенны если мы выполним: $ gulp default Значит при выполнении этой команды будут запущены задачи "styles" и "scripts", а чём нас проинформирует терминал: $ gulp [16:48:19] Using gulpfile ~/http/htdocs/aworker/aworker-education/gulpfile.js [16:48:19] Starting 'default'... [16:48:19] Starting 'styles'... [16:48:20] Finished 'styles' after 1.36 s [16:48:20] Starting 'scripts'... [16:48:21] Finished 'scripts' after 250 ms [16:48:21] Finished 'default' after 1.61 s Вторая задача "dev" будет выполнять другой набор. Для начала будут веполненны задачи, описанный в "default". Потом параллельно запустяться задачи: "styles:watch" — мотиторинг фалов стилей в ожидании изменений "scripts:watch" — мониторинг файлов скриптов в ожидании изменений "server" — запустится локально статичный веб-сервер, который будет доступен оп адресу http://localhost:3000/. А так же автоматически откроется окно с этим путём в браузере Google Chrome. Вот как это выглядит в терминале: Что бы посмотреть весь список задач которые доступны для запуска выполните команду: 1.4.3 Режим отладки Сборщик позволяет выполнять задачи как для продакшена (минимизация стилей, скриптов, картинок, прочее) так и версию для разработки. По умолчанию задачи выполняются для продакшена. Что бы запустить сборщик в режиме отладки, требуется выполнить следующую команду $ NODE_ENV=develop gulp Если требуется запустить мониторинг файлов и сервер то выполните следующее NODE_ENV=develop gulp dev 1.4.4 Файл конфигурации проекта Почти все настройки, которые мы будем использовать в задачах Gulp, для большего удобства, были вынесены в индивидуальный файл. Это позволяет использовать в задачах только переменные, значения которых определены в одном месте. Такой подход упрощает процесс конфигурации сборщика проекта. Файл размещается по адресу — "gulp/config.js". Полную версию файла Вы можете увидеть в репозитории, я лишь приведу наглядный пример как он оформлен: 1.4.5 Настройки eslint Для проверки JavaScript кода используется gulp-eslint пакет. Он требует присутствия файла настроек, согласно которых будет проверятся код. Файл размещается по адресу "gulp/.eslintrc" и содержит настройки, которые так же можно сгенерировать самостоятельно в онлайн генераторе 1.4.6 Настройки форматирования стилей CssComb Файл "gulp/.csscomb.json" отвечает за то, как будут автоматически форматироваться исходные стили проекта, приводя их к единому формату. Файл достаточно большой, выкладывать его здесь будет избыточно. Посмотрите на его содержимое в репо. Свой файл настроек CssComb можно создать в онлайн генераторе 1.4.7 Настройки Autoprefixer Согласно официальной документации gulp-autoprefixer, указать в директиве "browsers" для каких браузеров следует применять вендорные префиксы можно непосредственно в конфигурации: const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('default', () => gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('dist')) ); Но, в официальной документации Autoprefixer сказано несколько иначе: Они рекомендуют использовать или файл ".browserslistrc" (который должен лежать в корне проекта) или директиву в файле "package.json". Требуется это для того, что бы другие плагины (такие как: Babel, postcss-preset-env, eslint-plugin-compat, stylelint-no-unsupported-browser-features, postcss-normalize) так же пользовались этими настройками. Об этом рассказано на странице плагина Browserslist. По этому мы добавим эти настройки в файл package.json "browserslist": ["last 2 version", "> 5%", "iOS >= 7"] 1.4.8 Задачи Gulp Теперь давайте перейдём обсуждению непосредственно задач, которые присутствуют в сборщике проекта. ℹ️ Обращаю внимание читателя на то, что описанные ниже задачи могут быть не полностью описаны (или не все). Только те задачи и в том виде, когда автор писал эти строки. Но, скорее всего, у Вас не будет проблем в понимании как они работают и для чего созданы. В случае если что-то будет не понятно — задавайте вопросы ? 1.4.8.1 Сборка стилей Файл задачи сборки стилей расположен по адресу "gulp/tasks/styles.js". Полную версию файла Вы можете найти в репо, а тут давайте обсудим что он делает. Задача "styles" выполняет сборку стилей SCSS -> CSS. Настройки, которые используются в задачах предварительно описаны в файле "gulp/config.js" 1.4.8.2 Форматирование стилей Ещё одной важной для нас задачей будет форматирование стилей. Эта задача приведёт в порядок все стили Поясню почему "*variables*" вынесены из обработки под катом. 1.4.8.3 Создание criticalCss В нашей разработке мы так же будем генерировать criticalCss. В одной из следующих статья мы поговорим как эти стили должны использоваться а пока обсудим как их создавать. Сама задача, которая генерирует criticalCss-файл имеет мало кода: Для выполнения задачи в файле "gulp/config.js" есть список параметров, приблизительно такой: Все настройки описанны в на офф. странице в соответствующем разделе Options. Я лишь обращаю Ваше внимание одни из наиболее важных параметров: forceInclude — принимает массив, согласно которого будут добавлены стили, которые не были добавлены в criticalCss автоматически propertiesToRemove — принимает массив, согласно которого будут удалены стили из criticalCss Что же делает penthouse? Пакет создаёт виртуальное окно браузера (для этого используется puppeteer), размер которого указан в настройках (в выше приведённом примере это 1200x960). Далее penthouse проверяет какие из стилей присутствуют в этой области документа (в частности проверяет какие элементы присутствуют в области) и сохраняет их в указанном файле. Остальные стили, которые не попадают в область видимости (находятся за экраном) — не учитываются. ℹ️ Обращаю Ваше внимание на то, что зачастую в criticalCss так же не попадают стили элементов (или не полностью), которые по тем или иным причинам не отображались в момент их генерирования. Но разработчик может добавить их самостоятельно, указав в настройках. На пример: forceInclude: [ /^\.dialog/, // Будут добавленны все стили классов, которые начинаются с ".dialog" '.configurator' // Будут добавленны стили, которые применены к классу ".configurator" ], Режим отладки penthouse В случае если возникнут какие либо проблемы в создании "critical.css" следующей командой можно запустить задачу с выводом в терминал служебной информации: $ env DEBUG="penthouse,penthouse:*" gulp styles:critical ℹ️ В случае если Вам требуется создать criticalCss сразу для нескольких URL обратите внимание на официальный пример 1.4.8.4 Сборки скриптов Одной из не мало важных задач так же является сборка и минимизация скриптов. Задача расположена в файле по адресу "gulp/tasks/scripts.js". 1.4.8.5 Линтер скриптов Как работает данная задача шикарно изложено в скринкасте Ильи Кантора — Более сложный поток: eslint, gulp-if, stream-combiner2 Особо тут добавить нечего, потому выложу только сам код, который используется в рамках нашего обучения Итоги подведём Подводя черту под вышесказанным хочу сказать, что мы рассмотрели более-менее универсальный вариант сборщика, под нашу задачу. От проекта к проекту на Вашем пути в разработке будут попадаться разные задачи, которые можно будет реализовать разными способами. Выбирайте тот который проще для понимания и поддержки другими разработчиками на сколько это возможно. Не создавайте слишком сложные файлы конфигурации, но и не дробите их на множества файлов — это излишне. Соблюдайте баланс между гибкостью в коде и сложности его исполнения. Эти простые рекомендации позволят Вашему коду годами выполнять свою задачу, поддерживаться и изменятся без особых трудозатрат. Добра и удачи 🙂
  4. 1 point
    Почитайте: https://habr.com/ru/post/230877/ https://habr.com/ru/post/231845/ http://qaru.site/questions/15855/include-another-html-file-in-a-html-file https://www.w3schools.com/howto/howto_html_include.asp https://github.com/xmoonlight/includeHTML
  5. 1 point
    все зависит от расстояния мы же едем не в отеле сидеть, ( кровать, чистое постельное, душ и туалет) тем более не кушать, а смотреть и узнавать... в первую очередь надо объездить и узнать свою страну))) а тут есть что смотреть Сейчас в эру технологий любое путешествие можно сделать более увлекательным и легче. технические travel лайфхакки
  6. 1 point
    Так нужно? https://codepen.io/anon/pen/bPqgvY?editors=1100
  7. 1 point
    добавьте svg http://prntscr.com/o4pkon
  8. 1 point
    я про это говорил https://jsfiddle.net/48t9vk7j/ если вам не нравится что когда выпадающий список раскрывается, то он отталкивает все что ниже него, то тут может помочь position:absolute для списков вообще вам можно было бы сделать свой простой список, на вроде https://jsfiddle.net/negt2p6c/
  9. 1 point
    Thank you @klierik for the solution, it really works and help me to solve the problem.
  10. 1 point
    посмотрите в сторону https://webformyself.com/maski-css/ может поможет, а вообще картинкой проще всего конечно
  11. 1 point
  12. 1 point
    подборка слайдеров есть очень прикольные, и на чистом сss тоже есть. я практически всегда использую jQuery, без заморочек и смотрится здорово.
  13. 1 point
  14. 1 point
    Потому что иконки стоят не инлайном. Через use #link стили не пробиваются. В ДевТулз это видно. Вот тут вроде описано, как надо http://prgssr.ru/development/oformlenie-soderzhimogo-use-v-svg-s-pomoshyu-css.html
  15. 1 point
    В установщике задавать вопрос пользователю вы будете работать по https или нет =))) И результат сохранить в настройках, где опять же можно изменить даже на установленной системе 😃 А вообще вполне достаточно чтобы заготовка редиректа была в htaccess, грубо говоря классический вариант. Если у пользователя такая ситуация как у вас ему придется решать её самому. Самое главное редирект по умолчанию закомментировать, и написать комментарий. Так обычно делают все разработчики CMS
  16. 1 point
    Здравствуйте. Попробуйте так: $(".question" ).each(function(i,elem) { console.log($(this).find('.btnAnswer')); });
  17. 1 point
    А тут нет никакой ошибки. Если взять вышеуказанное правило то там происходит следующее: Приходит запрос по https на 443 порт Nginx'а, он обрабатывает запрос и передает его апачу уже по http, без шифрования. Мод реврайт проверяет порт соединения и если он не 443 он делает редирект на 443 порт =))) Запрос опять летит на Nginx и все повторяется =))) Достаточно понимать что Nginx в данном случае проксирующий сервер и именно он слушает порты 80 и 443, а апачу передает запросы по другому порту(какой настроил вебмастер), обычно это 8080 или 88. Чтобы избежать такой проблемы нужно либо убирать один из серверов, либо настраивать их так чтобы они оба работали по https, вот по этому поводу можно почитать https://reinout.vanrees.org/weblog/2017/05/02/https-behind-proxy.html В вашем же случае думаю будет достаточно попросить админов хостинга прописать вашему сайту редирект с http на https в конфиге Nginx. Доступ к конфигу они вряд ли дадут.
  18. 1 point
    Бесконечный редирект из-за этих строчек? #RewriteCond %{SERVER_PORT} !^443$ #RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L] У вас спользуется связка Apache+Nginx как я понимаю? Тогда не удивлен что циклический редирект =))) Эти правила будут работать только на чистом апаче. Если перед ним стоит nginx(на котором и настраивают обычно SSL) то редирект с http на https нужно настраивать в конфиге nginx =))) А там нет никаких htaccess 😃 То же самое кстати касается и других моментов. К примеру вы хотите отдавать статику с gzip сжатием, но статику у вас отдает не apache, а nginx 😃 тогда и настройку сжатия нужно делать в конфиге nginx'а, а не в apache 😃 Грубо говоря есть 3 варианта (не считая экзотики типо IIS) реализации веб-серверов: 1) Apache only - .htaccess и mod_rewrite работают в полную силу. 2) Apache+Nginx - очень распространенная конфигурация у хостеров, требующая иногда дополнительной настройки руками под каждый движок. Если не используется SSL то с редиректами все ОК и .htaccess и mod_rewrite работают в штатном режиме. Но некоторые другие вещи возможно придется настраивать в конфиге nginx'а. 3) Nginx+PHP-FPM - все настраивается в конфиге nginx'а.
  19. 1 point
    Если это сайт не какой-то существующей компании, у которой уже есть логотип, а сайт сам в себе, или же компания создаётся вместе с сайтом, то, мне кажется, цвета сайта ни под что можно не подгонять, а наоборот подогнать логотип под сайт. Добавить логотип в вёрстку — это же не проблема, если только у него не окажутся совсем странные размеры, типа 500x20, а там уже место под меню размечено.
  20. 1 point
    можно обычными блоками делать с бордюром или фоном можно картинками фоновыми, как удобнее
  21. 1 point
    Зависит от того как ставит задачу Заказчик. По идее тут картинка с лептопом и пунктирная линия не мобайле (в представленном виде) отображаться не будут.
  22. 1 point
    С помощью modRewrite и .htaccess два варианта: RewriteEngine On RewriteCond %{SERVER_PORT} !^443$ RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L] RewriteEngine On RewriteCond %{HTTPS} =off RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [QSA,L]
  23. 1 point
    Это совершенно бесплатно. О всех деталях про аудит работ рассказано тут:
  24. 1 point
    В данный момент курс полный. Если хотите я дам Вам знать когда будет следующий набор. У Вас есть 2 варианта: Вынесите исходники в проект из node_modules/ (нормальная ситуация) Ознакомьтесь со статьей, в которой описан процесс как гибко использовать Bootstrap в проекте
  25. 1 point
    Данная Вами вёрстка неактуальна для нашего времени! Изучите основы html/css согласно новым стандартам.
This leaderboard is set to Kiev/GMT+02:00