webdonsk.ruКак сделать код красивым
Добавил пользователь Morpheus Обновлено: 25.08.2024
Допустим, вы фронтенд и вам дали задание раскрасить текст на сайте в разные цвета. Стандартный способ — обернуть отдельные куски текста в и задать этим тегам классы или стили. Но тогда мы получим ровно то, что предполагалось — покрашенные слова и предложения.
А что, если покраска не должна быть связана со словами? Например, если нужно покрасить текст по диагонали или сделать так, чтобы через буквы просвечивалась картинка? Оказывается, это тоже можно сделать довольно просто. Сейчас за 10 минут разложим вот такую красоту.
Чтобы полностью врубиться в эту технику, читайте комментарии в коде. Всё станет понятно.
Готовим страницу
Так как вся магия будет происходить в CSS-файле, то всё, что нам нужно сделать, — это добавить на страницу блок с заголовком и подключить файл со стилями:
Настраиваем стили
Чтобы можно было быстро менять и подбирать цвета для раскрашивания, сделаем их переменными в CSS:
Теперь зададим параметры блока, внутри которого лежит наш текст. В нём всё просто и предсказуемо:
Добавляем ту самую раскраску, о которой мы говорили в самом начале. Чтобы цвета были лучше видны, сделаем шрифт заголовка побольше и пожирнее, а перенос текста по строкам сделаем по длине самого длинного слова.
Последнее, что осталось сделать, — наложить цвета поверх текста. Сделаем это так:
- Используем линейный градиент и повернём его для красоты по диагонали.
- Градиент — это переход от одного цвета к другому.
- Чтобы были цветные полосы, сделаем не плавный градиент, а полосками.
- Ширина каждой полоски будет 19%, а один процент оставим на зазор между ними.
- Чтобы полоски градиента были видны только на тексте, обрежем этот градиент по контуру букв.
- А чтобы буквы стали цветными, установим им прозрачный цвет — через него станет виден наш градиент.
Добавим это к стилям заголовка h1:
Что дальше
Таким приёмом можно раскрасить любой текст в любые цвета. Но можно пойти дальше и положить фото под текст, чтобы картинка проступала сквозь буквы. Этим займёмся в другой раз.
1. Выносите переменные за скобки
Всегда при выводе на экран текста, переменные в строке необходимо выносить за скобки. Это не только удобно для просмотра, но и эффективно, так как при этим вывод на экран осуществляется быстрей.
2. Обязательно используйте комментарии
Каждая функция по возможности должна быть описана небольшим комментарием. Каждый фрагмент, если вы считаете что он достаточно сложный для понимания, должен быть описан небольшим комментарием. И вообще, комментарием должно быть описано все, что вы считаете необходимым. Выбор вида комментария вы должны определить для себя сами. Это может быть одна текстовая строка, или блок строк, в котором описано назначение функции, информация об ее авторе и т.п.
3. Используйте сокращенный вид функции echo. Например, запись вида
можно спокойно заменить на
4. По возможности выносите большие блоки HTML за пределы конструкций php. Не злоупотребляйте функцией php.
Обратите внимание, что тут открывается две конструкции php, а между ними вставляется HTML текст. Возможно, по данному примеру и не видно явного преимущества выноса текста за пределы php конструкции, но на самом деле, когда вам придется иметь дело с таблицами, подобное правило может очень пригодиться.
5. Код должен быть выровненный относительно блоков.
Запомните, php это вам не паскаль с его блоками begin…end. Здесь блок должен открываться в той же строке, где он начался, а закрывается выровненным, относительно начала блока:
6. Упрощайте сложные конструкции. Разбивайте их на простые.
7. Используйте больше пробелов и пустые строки.
На самом деле это достаточно важный элемент написание читабельного кода. Я видел, как некоторые не оставляют пустые строки и используют как можно меньше пробелов, считая что они занимают лишнее место. Это в корне не верно, так как лишние байты позволят другому человеку сэкономить время на разбор чужого кода.
8. Используйте сокращенные виды математических и строковых операций.
Помните, что +1 всегда можно заменить на ++, а +n на +=n.
$i = $i + 1 эквивалентно $i++
$i = $i — 1 эквивалентно $i—
$i = $i + $n эквивалентно $i+=$n
$i = $i."hello" эквивалентно $i.="hello"
Красивый код — не просто абстрактное понятие, а вполне реально существующая вещь в среде программистов. Научившись писать красивый код, вы значительно сэкономите своё (и чужое) время, а ваши программы станут работать быстрее и стабильнее. Как научиться писать красивый код и каким нюансам стоит уделить внимание — узнаете в этой статье.
Почему так важно писать красивый код?
- Трудночитаемый код сложно корректировать и тестировать возможные решения, поэтому он отнимает больше времени на корректировку, чем обычный код.
- Чистый код создан для людей, поэтому другие программисты, которые будут читать его, будут вам очень благодарны за красивый код.
Благодаря чистому коду поиски одного бага могут сократиться с нескольких часов до нескольких минут, а программа будет работать стабильнее и не выдавать сюрпризов.
Однако овладеть мастерством написания чистого кода с наскока не получится — до момента написания первого элегантного кода, вызывающего восхищение коллег, вы напишите ещё десяток не самых красивых кодов, от которых будут плеваться.
Впрочем, если вы немного измените мышление и овладеете несколькими навыками, то успехи у вас будут значительно лучше, и к написанию красивого кода вы придёте значительно быстрее. Для начала определимся, как вообще научиться писать красивый код, и какие знания нужны для этого, а затем — с навыками, которые необходимо будет развить.
Как научиться писать чистый код?
- Красивый код должен быть легко читаемым и понятным для других программистов.
- Красивый код должен работать, а если он не работает — легко фикситься.
Тема связана со специальностями:
Для того, чтобы соответствовал этим требованиям, он должен быть коротким, а функции — линейными. Таким образом, при написании чистого кода вы должны ориентироваться на эти принципы. И постоянно практиковаться: пишите код каждый день, и каждый раз пытайтесь написать наиболее лучший вариант. Со временем у вас начнёт получаться.
Не забудьте почитать книгу Clean Code под авторством Роберта Мартина. Эта книга — настольная библия для программистов, которые стремятся к совершенному коду. На 900 страницах расписано всё, что следует знать программисту, который стремится к чистому коду.
Во время чтения книги можете также зайти на Хабру или другие сайты с полезными для прогеров статьями. Так вы сможете узнать ещё больше о чистом коде и позже закрепить свои знания практикой.
Также вы можете пройти обучение по видео курсам ITVDN. Авторы видео курсов – сертифицированные разработчики. Они помогут вам научиться писать хороший код.
Нужно ли изучать алгоритмы и паттерны?
Изучение алгоритмов — дело ваше, но запоминание паттернов является обязательным для программистов, как изучение таблицы умножения для детей. Без паттернов найти решение типичной проблемы будет трудно, поскольку не будет готового решения.
Впрочем, это не значит, что вы всегда должны использовать паттерны в каждой непонятной ситуации, иногда они не смогут помочь и вам придётся продумывать самостоятельное нестандартное решение, или обращаться за помощью к старшим коллегам. Но само изучение паттернов существенно упростит вам жизнь.
Для желающих начать изучение паттернов рекомендуем великолепный курс Александра Шевчука.
Изучение алгоритмов — чуть более глубокая сторона программирования. Сам алгоритм — это записанные в определённой последовательности команды, которые должны решить стоящую перед ними задачу. Если вы решили взяться за их изучение, то вам нужно не только знать сами алгоритмы, но и уметь их выводить, иначе от знаний не будет толку.
Если вы решили изучать алгоритмы, то рекомендуем обратиться к школьному курсу информатики и статьям для программистов, где подробно рассказывают об алгоритмах. Если в статье вы встретили упоминания как минимум трёх основных видов алгоритмов (линейный, разветвлённый и циклический) — то вы на верном пути.
Видео курсы по схожей тематике:
HTML5 и CSS3 Базовый
SQL Базовый. Разбор ДЗ
С общими требованиями к красивому коду и необходимыми знаниями определились, теперь перейдём к навыкам.
Какие полезные привычки необходимо завести?
Для написания чистого кода необходимо развить следующие навыки:
2) Короткие методы и функции. Чем короче — тем понятнее, чем понятнее — тем лучше. Слишком длинные функции запутают любого программиста и он потратит кучу времени, пытаясь разобраться в функциях.
Запомните золотое правило: одна функция — одно действие.
3) Удобные названия для функций. Это кажется нелепым, но придумать действительно хорошее название для функции — та ещё задачка, по сложности сравнимая с придумыванием имени для вашего персонажа в MMORPG. Совет, который может помочь, — при наименовании классов используйте существительные, а для методов используйте глаголы. Это сильно упростит понимание кода. Для примера можете взглянуть на два кода ниже и сказать, какой из них выглядит более понятно: первый (до переделывания) или второй (после).
Как видно на примере, в первом варианте код не так плох, но из-за непонятных названий труден для понимания. Во втором варианте он разбит на более мелкие блоки, а правильно придуманные названия («sendTOmAILsERVER, Client, Message) помогают понять его с первого взгляда.
Бесплатные вебинары по схожей тематике:
Как стать программистом? - видеоуроки ITVDN
Интерактивный вебинар. Soft Skills на интервью и на испытательном сроке
Кто есть кто в IT компании. Структуры и роли
Такой метод является универсальным для поиска и исправления ошибок и его может написать даже джун. Это, кстати, будет лучше и элегантнее, чем грузить код лишними функциями и превращать его в лапшу.
Написание красивого кода — дело непростое и требующее практики, но освоив эту методику, вы станете ещё на один шаг ближе к совершенству и завоюете больше уважения от коллег, а также сможете считаться уже более опытным программистом.
Если вы хотите овладеть искусством написания красивого кода, изучайте программирование на ITVDN. Опытные наставники разложат всё по полочкам и после окончания обучения вы научитесь писать красивый чистый код. При условии конечно, если будете прикладывать и свои усилия.
Частная коллекция качественных материалов для тех, кто делает сайты
В рубрике "HTML" Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.
Бесплатные уроки HTML для начинающих
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.
50+ бесплатных Bootstrap 3 шаблонов и элементов UI
Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.
Зум слайдер
Сегодняшний черновик - это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.
Как известно, стремление сделать свою рекламную продукцию запоминающейся и выделяющейся — верный путь к успеху. Сегодня, мы поговорим с вами о том, что можно сделать с обычным черно-белым QR-кодом, чтобы он стал более живым и привлекательным.
Для тех кому не терпится попробовать сделать цветной QR-код или сделать QR-код с логотипом или фоновой картинкой:
Каких результатов можно добиться, изменив оформление кода?
- Стать заметным. Выделиться на фоне однотипных QR-кодов – сделать работу кода более эффективной. К примеру, вы можете развернуть код(он прочитается), сделать его цветным, закруглить уголки, добавить тень и т.д.
- Дать подсказку. Добавив в сам код или рядом с ним немного текста, который сможет прочесть человеческий глаз, еще до того, как воспользуется камерой мобильного телефона. Сейчас QR-код только активно начинает захватывать рынки и потребители своими смартфонами сканируют все вподряд. Добавить немного текста хорошо, за исключением самых очевидных случаев. Если в QR-коде зашифрован адрес сайта, то можно его расположить под кодом или прямо на нем (тут осторожней).
- Акцентировать внимание на бренде. Т.к. QR-коды очень привлекательный элемент в рекламе, то естественно, если гармонично вписать его в фирменный стиль организации можно подкрепить и усилить силу бренда в сознании потребителей. К примеру, раскрасить в фирменные цвета, внедрить логотип в код, оформить сегменты продукцией (смотрите далее очень интересный код из продукции Panasonic).
Цветной QR-код
Самое простое изменение, которое мы можем привнести в код, это поменять его цвет. По стандарту любой QR-код состоит всего из двух цветов — черного и белого. Мы можем заменить как один цвет, так и два цвета на те цвета которые будут решать поставленные задачи. Необходимо чтобы черный цвет после окрашивания остался более темный чем окрашенный белый. Причем после раскраски необходимо чтобы контраст между этими цветами был достаточно большим, чтобы камера, программное обеспечение, и встроенные алгоритмы телефона смогли считать и расшифровать его. В противном случае код перестанет считываться.
QR-код с градиентом
Усложняя алгоритм раскрашивания QR-кода мы приходим от линейных цветной заливки к градиентной заливки. Если вдруг вам еще не знаком термин “градиент”, то это плавный переход от одного цвета к другому. Другими словами градиентом может быть плавный переход от черного цвета к синему. Градиенты бывают линейными, радиальными, ромбовидными и других причудливых форм. Иногда правильным градиентом удается значительно улучшить визуальное восприятие QR-кода по сравнению с линейной цветной заливкой.
QR-код с разноцветными элементами
Еще одним способом оригинализации QR-кода является раскрашивание отдельных изолированных сегментов. Т.е. определенная группа смежных сегментов окрашивается в отдельный цвет. Часто можно встретить генераторы, красящие в отдельный цвет группы состоящие из единственного сегмента. Также в отдельный цвет иногда окрашивают центральные части угловых маркеров QR-кода. Также отдельные сегменты можно окрасить используя определенную текстуру. Не смотря на то что обычно для окраски используют не более двух цветов, можно встретить QR-коды похожие на радугу.
QR-код с фоновым изображением
Следующим ходом на пути к оживлению QR-кода будет вставка фонового изображения. Здесь есть два пути по которым можно пойти. Первый путь — это вставка фоновой картинки на место черных сегментов, при этом картинка должны быть достаточно низкой яркости, чтобы контраст с белыми сегментами был высок. Это необходимо для корректного считывания кода. Второй путь — это подложка под белые сегменты кода. В этом случае напротив, яркость картинки должна быть высокой в контрасте с черными сегментами. Применяя данный подход можно получить достаточно интересные визуальные эффекты на QR-коде.
QR-код с закругленными углами
Закругленные углы сегментов QR-кода стали очень популярны, т.к. действительно такой код визуально выглядит намного привлекательней стандартного с квадратными сегментами. Используя данный метод трансформации кода необходимо выбрать радиус скругления и посмотреть на полученный результат. Часто этот метод используют в совокупности с одним из методов раскрашивания QR-кодов. Теоретически помимо скругления можно придумать другие варианты трансформации формы сегментов, но это может сказаться не самым лучшим образом на визуальном восприятии кода, а также качестве считывания его мобильными устройствами.
QR-код с текстом или логотипом
Технология QR-кодов разрабатывалась с учетом того что они будут считываться мобильными устройствами с камерами не самого лучшего качества в различных неблагоприятных условиях затрудняющих распознавание. Для того чтобы повысить качество распознавания при генерации QR-кодов используется технология избыточного кодирования. Т.е. часть информации на коде дублируется. И если какая-то часть кода повреждена, то он все равно может быть безболезненно считан и расшифрован. Данная технология сделала возможным нанесение непосредственно на QR-код текстовой надписи или логотипа. Например, на код можно нанести номер телефона, который в нем зашифрован, чтобы люди не имеющие возможности его отсканировать и распознать могли ввести этот номер вручную. Поэтому брендированные QR-коды с логотипами становятся все больше распространены. Надпись или логотип как правило вставляются в центральную часть кода.
QR-код с произвольным рисунком
Имея QR-код с повышенной помехозащищенностью мы можем встраивать в него любые изображения не перекрывающие код более чем на 30%. Часто такая изюминка в виде маленьких картинок на коде сильно меняют восприятие такого кода и повышают интерес к нему. Как правило, автоматическое встраивание таких изображений бывает невозможным, т.к. форма картинки может сильно зависеть от полученной конфигурации кода. Поэтому такого рода трансформации кода производятся дизайнерами в графических программных пакетах уже после того как код был создан генератором.
QR-код с нестандартной ориентацией
Очень простым, но действенным ухищрением может стать поворот QR-кода вокруг своей оси на 45 градусов. А имея красивое визуальное окружение можно сделать подобный код просто неотразимым для пользователей.
Анимированный QR-код
И апофеозом трансформации QR-кодов можно считать анимированные коды. Опять же благодаря технологии защиты от сбоев открываются большие возможности. Т.е. QR-код можно смотреть как видео-ролик при этом он не теряет способность быть считанным и расшифрованным. Не смотря на значительны расходы связанные с созданием подобного кода часто он бывает оправдан. Единственное ограничение такого рода кодов, что их нельзя распечатать. Т.е. сфера их применения это телевидение и интернет. Возможно в будущем видео на листе бумаги будет таким же обычным явлением как сейчас на телеэкране.
Читайте также: