Как сделать своё рабочее место удобным и комфортным, а так же повысить свою производительность?

1. Как Вы предпочитаете писать код?
   - В консоли Putty mcedit на веб-сервере под Linux/BSD напрямую
   - В Far Manager
   - В Eclipse PHP Developer
   - Используете ломаный PHPStorm или другой платный редактор (почему?)

2. Как Вы предпочитаете редактировать файлы?
   - Локально, веб-сервер под Windows
   - Монтирую сетевую шару под виндой с Linux/BSD
   - Использую WinSCP
   - Иное решение

3. Используете ли Вы GIT?
   - Да, вместе с github или другим облаком
   - Да, вместе со своим локальным (домашним) репозитарием.
   - Использую другую систему управления версиями
   - Не использую.

4. Сколько у Вас мониторов?
   - Один, переключаюсь вручную.
   - Один, использую систему переключения между виртуальными экранами (типа "Куб Рабочих Столов")
   - Два
   - Более двух (расскажите, как у Вас организовано рабочее пространство)

5. По настройке Eclipse (при использовании библиотек адаптивной вёрстки, основанных на Bootstrap, находит в них кучу ошибок). Как избавиться? Или это нормально?

6. Верстаете ли Вы под Internet Explorer или нынче это уже не актуально?

7. Где почитать о правильной настройке Яндекс.Вебмастер?

8. Пишете ли Вы stub (заглушки) для проверки (например, для проверки соединения с БД)? Какие инструменты используете для ускорения разработки? Типа, готовые решения CRUD или что-то подобное? Какой JS-фреймворк предпочитаете и почему? Имеет ли смысл оставлять старые версии Bootstrap или лучше как можно скорее переходить на актуальные?

9. Имеет ли смысл изучать Symfony/Yii2 ? Не ломают ли сделанные на них сайты? Есть ли в этих решениях известные уязвимости? Не имеют ли сайты на таких решениях лишний вес и неповоротливость? Что по этому поводу почитать?

10. Что лучше использовать для распространения резервных копий?
    - Ansible или другую систему управления конфигурациями
    - GIT или другую систему управления версиями
    - rsync или аналогичное решение

11. Что порекомендуете по SQL (MariaDB)?
    - Что почитать по скорости и отличиям движков Aria и XtraDB (InnoDB)? Имеет ли смысл применение Aria?
    - Что почитать по индексам?

12. Не техническая проблема, но... Как Вы боретесь с прокрастинацией?

Заранее благодарен! Всем добра!

Как сделать сайт красивым на всех дисплеях?

Я перерыл половину Хабра в поисках САМОГО простого способа в минимум кода и кто ищет, тот всегда найдет. Под эту задачу подойдут следующие 58 байт:

Давайте их разберём.

max-width: 38rem

Похоже, в большинстве браузеров по умолчанию используется размер шрифтов 16px, то есть 38rem — это 608px. Поддержка дисплеев разрешением минимум 600px кажется разумным

выбором.

padding: 2rem

Если ширина дисплея становится меньше 38rem, тогда благодаря этому отступу всё остаётся достаточно красивым до ширины примерно в 256px. Хотя это может казаться необязательным, на самом деле мы одним выстрелом убиваем двух зайцев: отступ также создаёт необходимое пространство сверху и снизу.

margin: auto

Это всё, что нужно для центрирования страницы, потому что main — это блочный элемент под семантическим html5.

Важное замечание: чтобы добиться этого результата, мне понадобилось на удивление много попыток. Возможно, это связано с тем, что я ничего не знаю о «современной» веб-разработке или (к чему я склоняюсь больше) говорит о том, насколько тяжело сохранять простоту в этом сложном мире.

Дополнение 1: после обсуждений я изменил значение padding на 1.5rem, чтобы улучшить компромисс между мобильными и десктопными дисплеями.

Дополнение 2: мне напомнили о ch unit, и он мне понравился! После этого я поменял значение на 70ch/2ch, что выглядит примерно так же, но на 2 байта меньше; только padding стал чуть меньше (это хорошо для мобильных).

100 байтов CSS, которые выглядят красиво где угодно (расширенная версия)

Это простой CSS, который будет хорошо выглядеть на большинстве дисплеев:

Давайте его разберём.


max-width: 70ch

«удобный для чтения диапазон» обычно составляет в ширину 60-80 символов, и в CSS можно выразить это напрямую при помощи единицы измерения ch.

padding: 3em 1em

Если ширина дисплея оказывается меньше указанного выше max-width, то этот padding предотвращает растягивание текста на мобильных от края до края. Чтобы оставить пробелы сверху и снизу, мы используем 3em.

margin: auto

Это всё, что необходимо для центрирования страницы; применяется к html, потому что у сайта Дэна нет семантического тега </p>, который, скорее всего, существует на большинстве сайтов. То, что верхний тег центрирует себя относительно ничего, не совсем логично, но так делает большинство браузеров.

line-height: 1.75

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

font-size: 1.5em

Я заметил, что в последнее время тенденции дизайна и размеры экранов склоняются к увеличению размера шрифтов. Или, возможно, я старею. Если вы хотите, чтобы пользователи могли его масштабировать, выбирайте em или rem вместо px.

Можно использовать :root вместо <html>, чтобы гарантировать наличие какого-нибудь селектора, но эта тонкость слишком сложна для меня и добавляет ещё один символ.

Ещё 100 необязательных байтов

Пользуйтесь

И кстати, мы здесь рассказываем не только про CSS и банально, там нас будет удобнее читать :3

Перевод статьи "5 great CSS animation resources"

Ссылка на оригинал: WordyBlend.com

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

Если вы только начали свою работу и вам нужны удобные шпаргалки, то обратите внимание на эти ценные ресурсы.

01. Easing functions cheatsheet

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

02. Animate.css

Дэн Эден (Dan Eden) составил библиотеку прекрасных анимаций, которые вы можете использовать в своих проектах. Если вы не хотите загружать полную библиотеку на свой сайт, то сам проект также является отличным предметом вдохновения.

03. Animate Plus

Stripe хорошо известен за свои красиво анимированные страницы. Один из руководителей, Бенжамин Де Кок (Benjamin De Cock), создал легкие, производительные CSS и CVG библиотеки анимаций, которые особенно хорошо подходят для мобильных устройств.

04. Motion and Meaning

Если вы любите подкасты, то Вал Хэд (Val Head) и Сеннид Боулз (Cennydd Bowles) – владельцы сайта для цифровых дизайнеров – подробно обсуждают моушн-дизайн.

05. Hover.css

Подобно Animate.css, Hover.css представляет собой набор эффектов, которые вы можете использовать в своих проектах. Он больше фокусируется на hover-эффектах для ссылок, кнопок, изображений и т.д.

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

Один из таких ресурсов – всевозможные вебинары крупных разработчиков и IT-компаний, среди которых, на мой взгляд, особого внимания заслуживает школа разработчиков Яндекса, лекции которой я периодически изучаю и делаю для себя пометки.

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

1. Теория

Существует огромное количество ресурсов, которые стоит изучить и прочитать. В первую очередь, конечно, необходимо читать и изучать основные спецификации (например, здесь https://www.w3.org/Style/CSS). Тут вам потребуется знание английского языка, с ним гораздо проще понимать и вникать в стандарты как CSS, так и HTML. Хотя там и бывают иногда переведённые отрывки на русском языке, но лучше все же изучать английский. Также в помощь сайт https://www.webplatform.org, куда заливается множество описаний спецификаций, в формате Вики, или же сайт http://stackoverflow.com, где можно задать вопросы знатокам, на которые ответят оперативно, скорее всего, в тот же день. Лично меня не раз выручал сайт htmlbook.ru, который сейчас медленно, но верно переезжает на новый домен https://webref.ru, но это скорее справочник по свойствам и значениям, где тоже, кстати, можно задать вопрос, и обычно ребята там оперативно друг другу подсказывают. И, конечно, этот сайт очень полезен в процессе практики, когда у вас хоть тресни, но что-то не работает - часто помогают, и проблема разрешается. Также довольно мощный ресурс по самостоятельному обучению - https://htmlacademy.ru/.

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

Также сейчас огромное количество специализированной литературы, обучающей в том числе. Лично я учусь в основном по книгам серии Head First, и самый первый опыт в создании сайта я получила, следуя руководству этого издания www.headfirstlabs.com/books/hfhtml. И уже в качестве дополнения изучала такие книги, как http://www.ozon.ru/context/detail/id/3881079, http://www.ozon.ru/context/detail/id/24493075.

Кстати, по всем книгам всегда ищите последнее издание и новейшие руководства, технологии всё же идут вперед очень быстро, и за ними необходимо оперативно следовать.

2. Практика

Теория, это конечно, полезно и без нее ну никуда, но без постоянной практики трудно научиться делать что-то действительно стоящее.

2.1. «Песочницы»

Сейчас есть большое количество таких сайтов, «песочниц». На них приходишь, там есть что-то вроде textarea, куда вводишь свой код, и он моментально отображается на экране. То есть не нужно вбивать все в редакторе, обновлять браузер и так по кругу – правишь-обновляешь. Здесь сразу применяешь свойство и видишь, как оно работает. Примеры сайтов http://cssdesk.com, http://dabblet.com, http://jsbin.com, https://jsfiddle.net – как видно из названия, они предназначены не только для CSS, но и для HTML/JS. Если интересно, о последнем можете почитать здесь https://habrahabr.ru/post/126910. Кстати, не пренебрегайте Хабром https://habrahabr.ru/interesting, здесь тоже много полезной информации. А таком сайте, как http://codepen.io вы можете поделиться своим кодом другими (http://www.internet-technologies.ru/articles/article_1663.ht... -  вот руководство по последнему, если интересно).

2.2. Браузерные инструменты или свойства разработчика

Если песочницы отлично выполняют свою функции потыкать/поиграть/попробовать, то, когда вы будет делать свой проект, то, конечно, захотите что-то подправить именно в нем, и посмотреть, как эти изменения работают в браузере. Для каждого браузера есть свои инструменты. Если кто-то не знает, то работает это так: открываем любую страницу, правой кнопкой мыши щелкаем - далее «Просмотреть код», и видим внизу или слева открывшееся окно. Нажав на любой элемент слева, видим его в окне браузера. Справа же есть все css-свойства, примененные к этому элементу, и если мы хотим что-то быстренько посмотреть-поменять, то прямо в свойствах разработчика меняем, или вообще отключаем свойство, и смотрим результат.

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

2.3. Редакторы кода.

Ну, это наш основной инструмент практики. В общем то, редакторы могут быть любыми. Начиная от банального Notepad+ и заканчивая такими мощными штуками как Sublime Text, DreamViewer, Web Storm. Отчасти, все эти редакторы похожи по принципу работы, главное, чтобы редактор поддерживал подсветку синтаксиса или какие-то сниппеты/автодополнения, которые могут облегчить вам работу. Важно также, чтобы редактор поддерживал автообновление страниц, чтобы сразу видеть изменения в браузере. Имеют механизм «живого обновления» страницы такие приложения, как Live Reload, Code Kit, Grunt. Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

2.4. Препроцессоры.

Поскольку CSS развивается довольно давно и синтаксис его давно устоялся, и обновлений не так много, то некоторые вещи уже хочется писать быстрее и проще, то из-за этого появляются такие штуки, как препроцессоры. То есть, если у нас есть тысячи строк стилей и несколько отдельных CSS-файлов, то поддерживать всё это хозяйство будет довольно проблематично. Для решения этой проблемы были созданы CSS-препроцессоры, которые позволяют нам создавать стили более динамично. Препроцессоры экономят наше время и делают многие рутинные вещи за нас благодаря своим особенностям, таким как: вложенные селекторы, математические функции, ссылки на родительский селектор и даже сообщения об ошибках, которые говорят нам, где и почему произошла ошибка в коде.

Самые известные из них – SASS, LESS, Stylus, Roole. SASS, пожалуй, самый старый из них и распространенный. LESS – самый простой и имеет меньше всего возможностей. Но начинать с препроцессоров, пожалуй, не стоит. Имеет смысл писать чистый CSS, смотреть, как он работает (можно в «песочницах», чтобы не заморачиваться первое время), но позже стоит посмотреть и попробовать препроцессоры и выбрать для себя тот, который вам нравится и подходит вам по задачам.

2.5. Фреймворки.

Существует огромное количество фреймворков, т.е. готовых наборов CSS и HTML, написанных и в том числе с помощью препроцессоров. Например, «бутстрапы» (самый известный из них – Twitter Bootstrap) - наборы уже готовых классов с CSS-свойствами, чтобы быстренько сделать какую-то определенную страничку, которая выглядит нормально и стандартно. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Фреймворков очень много, и начинать с них тоже не советуется, поскольку код в них довольно специфичен и заточен под определенные задачи. Лучше делать свой код и учиться на своих ошибках, нежели копипастить код из готовых фреймворков.

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

Просьба к опытным товарищам Пикабу - не ругайте сильно, если мои рекомендации в чём то ошибочны. Критикуя - предлагай! Буду рада конструктивной критике и я, и  наверняка те, кому полезна эта статья.

Успехов в начинаниях, друзья!