• Как избежать накопление неиспользуемого CSS-кода в ходе жизни сайта?

    ThunderCat
    @ThunderCat Куратор тега CSS
    {PHP, MySql, HTML, JS, CSS} developer
    Как избежать накопление неиспользуемого CSS-кода в ходе жизни и развития сайта?
    В общем случае - никак. Если не следить за привязкой кода к цсс в процессе изменения, то такая фигня будет накапливаться естественным образом.

    Иногда помогает прогнать странички через пэйджспид, там обычно есть раздел - неиспользуемые стили. Выписываете для каждой типовой странички, потом сравниваете и ищете общие лишние стили.
    Ответ написан
    Комментировать
  • Ответьте пж где учить CSS (учусь сам дома, не советуйте кого то на подобие Хауди хо)?

    Я вообще не понимаю этих приколов где учить css/верстку. На ютубе единицы каналов, ты просто смотришь видосы и тебе по аннотации кидает других атворов и через неделю обучения ты уже подписан на всех.
    1.Фрилансер по жизни - канал посвящен исключительно верстки, очень много углубленных тем.
    2.Анна блок - канал тоже исключительно про верстку, вот с неё советовал бы начинать, у неё более легкие и короткие объяснения
    3.Если вообще только прям начал, то webdev, там есть видео css с нуля и html с нуля, которые около трех часов оба, затем на канале есть два часовых ролика про флексбоксы и гриды(мастхев для верстки)
    4.MaxGraph - канал тоже про верстку, но тут уже больше тем для среднего уровня, про гсап-анимации-сборщики
    5.От 0 до 1 - канал тоже про верстку, тут есть много видосов больших, по котором верстаются целые сайты, можешь посмотреть как человек на коммерческой основе делает с нуля какие-то вещи до релиза
    6.Codmark/easy tutorial - два канал где можно подсмотреть какие-то интересные решения по началу
    7.Вадим макеев, это не про обучение верстки(ну тут уроков нет), но это гуро верстки и просто будет интересно послушать как профессионал своего дела мыслит и транслирует информацию, что и как должен делать верстальщик
    ну вот этим лично я пользовался-пользуюсь, возможно найдешь для себя из моего списка что-то полезное
    Ответ написан
    Комментировать
  • Перевозим VPS/VDS из Европы обратно в РФ. Куда переехать?

    CityCat4
    @CityCat4 Куратор тега Сетевое администрирование
    Внимание! Изменился адрес почты!
    poiskvps, однако...
    Ответ написан
    Комментировать
  • Цель - WEB Full-stack. Сносный ли план обучения для новичка?

    @bestann
    Я училась хорошо, но из знаний тебе действительно понадобится математика (развитое логическое мышление) + английский, это отмечено правильно. В остальном много лишнего и уводящего не в ту степь. Работала в телефонии, но тоже пришлось перейти в DevOps, т.к. нет перспектив. В итоге по жизни приходилось учить кучу всего НЕНУЖНОГО (например разные телефонные станции, на что ушло много времени). Если бы сразу удалось на Linux устроиться, не потеряла бы 15 лет. Поэтому пишу тебе о том,что действительно понадобится. Не трать время не ненужное, и так учить надо ОЧЕНЬ МНОГО. Нужен широкий кругозор.

    Установи дома операционную систему Pop!_OS (на основе Ubuntu) и привыкай работать в Linux. Поставь там qemu, kvm, git, ansible, docker, docker-compose. Тебе будет достаточно виртуальных машин для изучения материала. Ansible на самой машине как контрольная управляющая нода, а настраивать им виртуалки.

    Поставь VSCode Insiders Edition. В нем хорошо работать с кодом. Там плагинов много. И для редактирования yml файлов Ansible, Kubernetes), для Dockerfile, и для программирования потом пригодится.

    Поставь Obsidian. И пиши всю документацию там, собирай там все свои знания! Приучай себя делать конспекты и переводы. Формат написания - Markdown, как раз тот, в котором программисты README.md пишут. https://obsidian.md/ (ставится на разные ОС)

    Чтобы не учить лишнее, пишу, что учить:
    Хорошо знать Linux - Уильям Шоттс - Ок, найди книгу RHCSA8 Sander van Vugt (даже на русском есть,думаю, умеешь искать), подготовься и сдай экзамен RHCSA, дает хорошую базу по Linux. Также есть его видеокурсы, я по ним готовилась. (тоже достанешь). Второй хороший автор Andrew Mallet. Практикуйся на виртуалках CentOS8 (у них проблема с поддержкой с нг, но можешь и нестабильный релиз использовать,тебе же не в продакшн). За рубежом сейчас альтернатива — Rocky Linux. На виртуалках посмотришь как работать с менеджером пакетов yum/dnf, на Pop!_OS - c apt.
    На русском по Linux курсы Кирилла Семаева на Youtube.

    Ansible — управление конфигурациями. Подготовка к экзамену RHCE8 (он после RHCSA), те же авторы (книги есть). У Andrew Mallet досконально разбирается Ansible, можно одновременно с Linux учить,потому что он там и линуксовые команды grep и прочие использует для анализа файлов конфигурации. Очень хороша родная документация на сайте Ansible. Также качай примеры ролей на Ansible Galaxy.
    На русском курсы Астахова на Youtube.

    Git — тут что найдешь. Он есть в составе Kubernetes База от Слерм, материалов достаточно. Цикл статей почитай тут https://css-tricks.com/creating-the-perfect-commit..., 7 и 8 часть скоро выложат. Но для начала поищи видеокурсы на русском (все есть). Надо видео посмотреть, чтоб нагляднее было, потому что сначала непонятно как это ты работаешь вроде в одной папке, но можешь находиться в разных ветках.

    Gitlab — Как вариант завести аккаунт на Gitlab.com и там пробовать. И смотри файлы .giltab-ci.yml и сопутствующие включаемые файлы через include самого Gitlab. Узнай как включать переменные, якоря, extends, needs, правила rules, needs (кстати сейчас можно без stage только через needs), разницу между кэшами и артефактами.
    Jenkins, teamcity используется, но Gitlab у нас чаще... Учи то что чаще используется. Ты не сможешь все инструменты освоить физически. Как устроишься, будешь осваивать имеющееся на работе.

    Docker — так же можешь изучить дома. Курсов хватает. Также попробуй в docker-compose запустить несколько контейнеров.

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

    Попробуй установить Nginx + php-fpm + mysql (или MariaDB) - например, чтоб заработала википедия простая BookStack. Локально пропиши имя сайта и проверь как работает, бэкапь базу, потом все удали и восстанови. https://www.bookstackapp.com/

    Kubernetes — сложно без базы указанной выше, но можешь подписаться на youtube канал Слерма,у них же есть периодически бесплатные курсы с возможностью практики. Дома можно только minikube, если ресурсов мало. Это факультативно, даже первые 4 пункта.

    По языкам программирования. Хотя бы освой bash в Linux. Python или Go — можно намного позже, это уже для программистов.Для тебя это будет плюсом.но в довесок. Иначе ты до профессии девопса будешь долго идти, а вернее до пенсии)) Сейчас спрос очень большой!!!

    Итак, резюмируя: Linux (+bash), Ansible, Docker, git —must have, Gitlab, SQL - желательно. Сети — очень зависит от работы. Главное, понимать что такое ip-адреса, dns, маска, шлюз, понимать как настраивать файрвол и сетевые интерфейсы в Linux, понимать что включить (какой параметр), чтобы Linux начал маршрутизировать трафик.
    Kubernetes, Terraform — это уже уровнем выше.

    Далее штудируешь вопросы к собеседованиям (тоже есть в интеренете),причем некоторые вопросы особенно часто задают на собесах (сама недавно собесы проходила). Проходишь 10-15 собеседований и прокачиваешься, записывай все задаваемые вопросы и готовься после каждого собеса к следующему. Могут дать и тестовое задание, если на джуна. Попроси время на выполнение.

    Тут расти и расти до бесконечности.

    Извини за нескромный вопрос: почему ты в 22 года только на 1 курсе колледжа заочно? Это даже не вуз.
    И что за краткий курс школьной математики? Ты в школе не учился что ли?
    DevOps — это непросто, поэтому надо хорошо понимать, какая у тебя база, потянешь ли ты.

    UDP. Только увидела.
    Если цель не DevOps, а web fullstack, то может твой план подойдет больше. Но тоже надо иметь ввиду, что FullStack — это много. Иди сначала фронтенд-разработчиком. Если хочешь учит востребованное, то JavaScript, для фронденда фреймфорк vue.js или react. Если хочешь быть бэком, надо уже хорошо знать базы данных помимо самого языка программирования. Из популярных так же JavaScript (node.js). Python и Go так же популярны. И если уж учить, то Go, а не C#.
    Ответ написан
    7 комментариев
  • Что такое натяжка на движок CMS?

    @RadmirZ
    Делаем интернет-магазины на движке minicart.su
    Натягивать на джумлу это ад =) А так если у вас свой двиг (платформа, фрейворк или прочее) или есть CMS которую вы знаете вдоль и поперек то это не так сложно как кажется.
    Но, конкретно с joomla это ад адский.
    Ответ написан
    5 комментариев
  • Какой плагин-конструктор вещей для WordPress лучше выбрать - Fancy Product Designer или WooCommerce Custom Product Designer?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Я помню, что использовал Woocommerce Visual Product Configurator
    https://configuratorsuiteforwp.com/

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

    alex_shevch
    @alex_shevch
    Frontend Developer
    По моему тут такой вопрос каждый день задают)
    Html - академия как вариант, для начала самое то. Там интерактивно, сразу с практикой и с довольно правильным порядком.
    Ответ написан
    Комментировать
  • Сверстать кнопку в письме?

    @paulinekorkina
    Верстальщик
    Верстала письмо под разные почтовики, в Windows 10 смотрится хорошо.

    Кнопка-ссылка кроссплатформенно верстается только таблицей, насколько я знаю, правда, я делала упор на Outlook и The Bat! (последний в плане верстки - просто жесть). Паддинги многие почтовики не хавают, поэтому в качестве левого и правого мы используем пустые столбцы таблицы с заданной шириной. У меня окончательный вариант получится такой:

    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0; background: #0382Ce; border-radius: 2px;">
      <tr>
      	<td width="19" style="width: 19px;">&nbsp;</td>
            <td style="height: 38px;">
                <a href="#" style="height: 38px; text-align: center; font-family: Arial, Tahoma, Geneva, sans-serif; font-size: 12px; line-height: 38px; text-decoration: none; padding: 0; display: block; border-radius: 4px;">
                     <font face="Arial, sans-serif" color="#ffffff" style="font-size: 12px; line-height: 38px;">
                               <span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 12px; line-height: 38px; font-weight: bold; letter-spacing: 0.05em; -webkit-text-size-adjust:none;">ПОДРОБНОСТИ&nbsp;НА&nbsp;ПЛОЩАДКЕ</span>
                    </font>
                 </a>
    	</td>
    	 <td width="19" style="width: 19px;">&nbsp;</td>
      </tr>
    </table>
    Ответ написан
    Комментировать
  • Когда использовать jpg а когда png?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    Типичные примеры использования:

    JPG — фото, иллюстрации без прозрачности, где важны цвета, переходы, оттенки и т. п. В таком случае JPG выигрывает у других форматов в плане соотношения качество/цветность/размер. Так себе для контрастных схем и текстов.

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

    GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

    SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

    P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

    P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».
    Ответ написан
    22 комментария
  • Сайт под большие мониторы/расширения?

    @McBernar
    Retina не имеет ничего общего с физическим размером экрана. У меня ретина, но это стандартные 1440 пикселей в ширину. Сайт под ретину ничем не отличается от сайта под обычные мониторы, за исключением работы с 2x изображениями для большей четкости.
    Ответ написан
    4 комментария
  • Сайт под большие мониторы/расширения?

    всё больше людей заходят с мобильных устройств
    сделайте корректный адаптивный сайт и под мобильные, и под 27'
    Ответ написан
    Комментировать
  • Сайт под большие мониторы/расширения?

    Serj-One
    @Serj-One
    i'm sexy and i know it
    заметила, что все даже самые современные сайты выглядят так "скукожено".

    И правильно. Сконцентрированную информацию воспринимать проще и удобней, чем размазанную по огромному экрану. Не надо ничего "раскукоживать" без острой необходимости.
    Ответ написан
    Комментировать
  • Какие каналы на ютубе есть по фотошопу, и иллюстратору толковые?

    romansergeevich
    @romansergeevich
    Наши:
    Раз (Ps, Ai)
    Два (Ai)
    Три (Ps, Ai)
    Четыре (много гейм-диза, чаще Ps. Ai, Ae)

    Не наш:
    Раз (Ps, Ai)
    Ответ написан
    Комментировать
  • Как провести настройку MX записей в ISPmanager?

    @Stanok
    В панели "Главное" -> доменные имена -> из списка выбираете нужный домен -> и меняете настройки (двойным кликом) prntscr.com/45svfb
    Ответ написан
    Комментировать
  • Как определить толкового SEO специалиста?

    RotgarSett
    @RotgarSett
    SEO Эксперт
    Почитать его ответы на Тостере. :)
    Посмотреть опыт работы, присутствие в сети по тематике SEO. Посмотреть отзывы, если они есть, связаться по контактам с оставившими отзыв клиентами.

    100% методов нет. Но долгое присутствие в теме SEO (профили на сайте фрилансеров с большой и качественной историей, профили на SEO форумах, собственный сайт/блог/публикации на хабре) и отзывы с контактами клиентов на мой взгляд довольно адекватно могут отражать профессионализм специалиста.

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

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

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

    Использование Sape под Google (имеется ввиду зарубежное продвижение) и не использование под Яндекс скажет о том что специалист разбирается в своем деле.

    Можно связаться со специалистом голосом и задать ему вопросы (в которых специалист должен разбираться). Например: «Что такое last modified, как и для чего это используется?». «Нужно ли заполнять мета кивордс, есть ли различия у поисковиков?».
    Конечно придется самому подготовиться или где-то заказать вопросы и ответы на них. Я кстати много таких вопросов встретил здесь, на тостере.
    Ответ написан
    1 комментарий
  • В каком сервисе можно создать такие превью?

    @Romua1d
    Я пользуюсь этим!
    ami.responsivedesign.is
    Ответ написан
    Комментировать
  • В каком сервисе можно создать такие превью?

    LenovoId
    @LenovoId
    svg, css,js
    atmpl.ru/test/responsive/check-the-site-for-adapta... вот сюда можете написать url вашего сайта и потом заскринить результат
    А вот если надо реально рабочий пример ...то делается это на фреймах ...но отображение каждого разрешения помещают в картинку с прозрачным PNG на котором дырка - это как раз и есть iPhone iMac iPad MacBook можете даже сделать на Nokia Asha
    Ответ написан
    Комментировать
  • Гибкий хостинг для сайтов клиентов?

    @ocatoll
    Вы не указали бюджеты и все остальное. Как по мне, так вам стоит взять vps с панелью управления типа ISP manager, там вы сможете настраивать требуемые вам ограничения для клиентов.
    Ответ написан
    1 комментарий
  • На что обращать внимание при выборе веб-студии или же фрилансера помимо их/его портфолио?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Проверки:
    1. В момент озвучивания стоимости работы, попросите объяснить стоимость расчёта вёрстки, детализировав сам процесс.
    Сможет - значит делает сам, нет - значит перепродаёт.
    2. Если ответит, что "у меня стоимость часа [такая-то], а сколько это займёт - пока неясно". Сразу отказывайтесь!
    3. Вёрстка - всегда пост-оплата или договор (проверяйте только с юристом)!
    4. Проверяйте HTML-код на валидность сразу же, как только будет готов пустой каркас ("белый лист").
    5. Проверяйте ОБЯЗАТЕЛЬНОЕ! наличие семантической HTML5-разметки (header, nav, article, section, aside, footer, address, main, figure и т.д.).
    6. Проверяйте наличие микро-разметки: гугл, яндекс.
    7. Все анимации блоков - в отдельном НЕ СЖАТОМ! js-файле!
    8. Все формы/калькуляторы/поисковые строки - ТОЛЬКО в HTML: никаких AJAX-ов и валидаций быть не должно до момента установки вёрстки на бэкенд!

    Ссылки:
    1. Про качество и рейт: здесь
    2. Про стоимость вёрстки: здесь
    3. Про мотивацию: здесь
    4. Про проверку вёрстки и настроек сайта на хостинге: здесь
    Ответ написан
    7 комментариев
  • Возможен ли план самообучения WEB разработке?

    dimovich85
    @dimovich85 Куратор тега CSS
    https://u-academy.net/
    Советов надавали, я накидаю ссылок:
    Веб-стандарты Этот канал интересен уже тогда, как основа заложена. Много полезных и интересных докладов.

    Дмитрий Лаврик Много бесплатных материалов, классные платные курсы, для новичков и для среднего уровня.

    HTML Academy Много хороших материалов для изучения

    Илья Кантор Много материала по JS

    Master-CSS Здесь я нашел много бесплатных видео по настройке разных плагинов, в общем, для старта отлично, но когда поймешь JS, то сам сможешь разбираться.

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

    Learn JavaScript RUS Классный учебник по JS.

    CodePen и JSFiddle В процессе обучения важно на практике применять полученные знания. Каждый раз собирать файлы, шаблоны, подключать либы, настраивать сборщики и тд лениво, очень классно, что можно в браузере сразу все сделать и даже сохранить, расшарить.

    Webmassa SVG Видео по работе с SVG.

    Юра Артюх Классные стримы по созданию анимаций. WebGL, SVG, Canvas, CSS - все тут.

    StackOverflow Авторитетный ресурс по поиску решений.

    Документация MDN Документация от разработчиков Mozilla. Есть на русском. Вообще, надо научится читать и понимать документацию, так как знать все на все случаи жизни нереально, профи умеют искать и читать документации. Для этого надо бы подтянуть английский.

    W3C Specs, W3School - инфа из первых рук.

    Писал ссылки по мере попадания под руку)

    Успехов!
    Ответ написан
    Комментировать