Самоучитель и справочник по HTML, CSS, JavaScript и PHP
Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.
Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?
Как пользоваться сайтом?
Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:
Самоучитель HTML – это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке.
Самоучитель CSS, а также удобный справочник CSS, откроют перед вами практически безграничные возможности по оформлению интернет сайта. Перед вами предстанет интереснейший мир разнообразия форм и цветов, какими может обладать ваш сайт.
JavaScript
Самоучитель JavaScript – это удобнейшее онлайн пособие для начинающего программиста, после изучения которого вы научитесь создавать интерактивные интернет сайты. Изучение JavaScript даст вам возможность более качественно удовлетворять потребности посетителей вашего сайта.
Если вы хотите научиться создавать динамические веб-сайты, уже знакомы с основами разметки HTML, но не представляете себе, как использовать для этих целей язык программирования PHP, то наш раздел по PHP станет вашим незаменимым помощником.
Для кого создан сайт www.puzzleweb.ru?
Сайт будет полезен не только для начинающих WEB-программистов, но и для тех, кто уже умеет создавать сайты и приложения. Благодаря наличию на нашем ресурсе удобных справочников по CSS и HTML, вы всегда сможете быстро определить значение интересующего вас тега или свойства, не теряя времени на поиски информации в книгах или в Интернете. На страницах наших самоучителей вы найдете множество практических примеров исходного кода страниц, скриптов, которые вы с легкостью сможете применить для создания собственного проекта.
Книга «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд.»
Новое 4-ое издание признанного бестселлера, охватывающего как клиентские, так и серверные аспекты веб-разработки. Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга изобилует ценными практическими советами, содержит исчерпывающий теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети.
Для кого предназначена эта книга
Эта книга предназначена для тех, кто хочет изучить способы создания эффективных и динамичных сайтов. Сюда можно отнести веб-мастеров или специалистов по графическому дизайну, которым уже приходилось создавать статические сайты и у которых есть желание вывести свое мастерство на следующий уровень, а также студентов вузов и колледжей, недавних выпускников этих учебных заведений и просто самоучек.
Фактически любой человек, стремящийся изучить основные принципы, заложенные в основу технологии Web 2.0, известной как AJAX, сможет получить весьма обстоятельные сведения об основных технологиях: PHP, MySQL, JavaScript, CSS и HTML5, а также изучить основы библиотеки jQuery.
Как устроена книга
Главы книги расположены в определенном порядке. Сначала идет представление всех основных технологий, рассматриваемых в книге, а затем описывается процесс их установки на сервер, предназначенный для разработки веб-приложений, для того чтобы подготовить читателя к практической работе с примерами.
В первой части книги преподносятся основы языка программирования PHP, включая основы синтаксиса, массивов, функций и объектно-ориентированного программирования. Затем, после усвоения основ PHP, можно переходить к введению в систему управления базами данных MySQL, рассмотрение которой начинается с изучения структуры базы данных MySQL и заканчивается составлением сложных запросов.
После этого рассказывается о том, как воспользоваться сочетанием PHP и MySQL, чтобы приступить к созданию собственных динамических веб-страниц путем интегрирования в это сочетание форм и других функциональных возможностей HTML. Затем будут рассмотрены подробности практических аспектов разработки на PHP и MySQL, включая описание различных полезных функций и способов работы с cookies и сессиями, а также способов поддержания высокого уровня безопасности.
В следующих нескольких главах излагаются основы JavaScript, начиная с простых функций и обработки событий и заканчивая доступом к объектной модели документа (DOM), проверкой введенных данных и обработкой ошибок в браузере. Это обстоятельный учебник для тех, кто приступает к использованию популярной библиотеки jQuery для JavaScript.
После рассмотрения основных технологий описываются способы создания фоновых AJAX-вызовов и превращения сайтов в высокодинамичную среду. После этого вам предстоит освоить еще две главы, в которых рассматривается, как использовать CSS для стилевого оформления и подбора формата ваших веб-страниц, и описываются новые свойства, встроенные в HTML 5, включающие геолокацию, аудио, видео и холст.
Получив все эти сведения, вы сможете создать полноценный набор программ, в совокупности представляющий собой работоспособный сайт социальной сети. По мере изложения материала дается большое количество указаний и советов по выработке хорошего стиля программирования, а также подсказок, которые помогут читателям обнаружить и устранить скрытые ошибки программирования. Кроме того, делается много ссылок на сайты с дополнительными материалами, относящимися к рассматриваемым темам.
Более подробно с книгой можно ознакомиться на сайте издательства Оглавление Отрывок
Для Хаброжителей скидка 25% по купону — ph_piter + в качестве дополнительной литературы прилагается электронная книга Семми Пьюривала «Основы разработки веб-приложений»
Также можно воспользоваться купоном ph_piter, дающим скидку 3000 руб. на сайте Нетология для онлайн-программы: «JavaScript-разработка: создаем интерактивные веб-страницы»
Цель программы — сделать из новичков HTML-верстки грамотных front-end разработчиков. Вы научитесь работать с Java Script, HTML5, CSS3, AJAX, различными библиотеками и фреймворками. После прохождения курса вы сможете сверстать профессиональный макет. В конце обучения студенты получают диплом и удостоверение о повышение квалификации.
Прохоренок Н., Дронов В. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 5-е изд.
Рассмотрены вопросы создания интерактивных Web-сайтов с помощью HTML, JavaScript, PHP и MySQL, форматирования Web-страниц при помощи CSS. Даны основы PHP и примеры написания типичных сценариев. Описаны приемы работы и администрирования баз данных MySQL при помощи PHP и программы phpMyAdmin. Особое внимание уделено созданию программной среды на компьютере разработчика и настройке Web-сервера Apache.
В 5-м издании содержится описание возможностей, предлагаемых HTML 5, CSS 3, PHP 7.2, технологии AJAX, новых инструментов JavaScript (включая рисование на холсте, средства геолокации и локальное хранилище данных) и всех нововведений, появившихся в актуальных на данный момент версиях HTML, CSS, Apache, MySQL и технологии AJAX.
Требования к читателям: умение пользоваться компьютером и доступ в Интернет.
Оглавление книги HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 5-е изд.
Глава 1. Основы HTML 5. Создаем дизайн сайта
. Индикатор хода процесса 1.14. Аудио и видео 1.14.1. Вставка аудиоролика 1.14.2. Вставка видеоролика 1.14.3. Указание нескольких источников аудио или видео 1.14.4. Тег
Глава 2. Основы CSS 3. Форматируем Web-страницу с помощью стилей
2.1. Способы встраивания определения стиля 2.1.1. Встраивание определения стиля в тег 2.1.2. Встраивание определения стилей в заголовок HTML-документа 2.1.3. Вынесение таблицы стилей в отдельный файл 2.1.4. Приоритет применения стилей 2.2. Указание значений атрибутов 2.2.1. Числа 2.2.2. Размеры 2.2.3. Цвет 2.2.4. Строки 2.2.5. Углы 2.2.6. Универсальные значения 2.3. CSS-селекторы 2.3.1. Основные селекторы 2.3.2. Привязка к параметрам тегов 2.3.3. Псевдоэлементы 2.3.4. Псевдоклассы 2.4. Форматирование шрифта 2.4.1. Имя шрифта 2.4.2. Стиль шрифта 2.4.3. Размер шрифта 2.4.4. Цвет текста 2.4.5. Жирность шрифта 2.4.6. Вид строчных букв 2.4.7. Одновременное указание характеристик шрифта 2.4.8. Загружаемые шрифты 2.5. Форматирование текста 2.5.1. Расстояние между символами в словах 2.5.2. Расстояние между словами 2.5.3. Отступ первой строки 2.5.4. Вертикальное расстояние между строками 2.5.5. Горизонтальное выравнивание текста 2.5.6. Вертикальное выравнивание текста 2.5.7. Подчеркивание, надчеркивание и зачеркивание текста 2.5.8. Изменение регистра символов 2.5.9. Обработка пробелов между словами 2.5.10. Перенос слов 2.5.11. Направление вывода текста 2.6. Отступы 2.6.1. Внешние отступы 2.6.2. Внутренние отступы 2.7. Рамки 2.7.1. Стиль линий рамки 2.7.2. Толщина линий рамки 2.7.3. Цвет линий рамки 2.7.4. Одновременное задание характеристик рамки 2.7.5. Рамки со скругленными углами 2.7.6. Внешняя рамка 2.8. Фон элемента 2.8.1. Цвет фона 2.8.2. Фоновый рисунок 2.8.3. Режим повторения фонового рисунка 2.8.4. Прокрутка фонового рисунка 2.8.5. Положение фонового рисунка 2.8.6. Размеры фонового изображения 2.8.7. Режим позиционирования фонового изображения 2.8.8. Режим заполнения для фона 2.8.9. Одновременное задание характеристик фона 2.9. Градиентные фоны 2.9.1. Линейные градиенты 2.9.2. Радиальные градиенты 2.10. Списки 2.10.1. Вид маркера списка 2.10.2. Изображение в качестве маркера списка 2.10.3. Компактное отображение списка 2.10.4. Одновременное указание характеристик списка 2.11. Таблицы 2.11.1. Рамки таблицы и ячеек 2.11.2. Размеры таблицы 2.11.3. Местоположение заголовка 2.11.4. Указание характеристик ячеек 2.12. Вид курсора 2.13. Псевдостили гиперссылок. Отображение ссылок разными цветами 2.14. Форматирование блоков 2.14.1. Указание типа блока 2.14.2. Указание размеров 2.14.3. Атрибут overflow 2.14.4. Управление обтеканием 2.14.5. Позиционирование блока 2.14.6. Последовательность отображения слоев 2.15. Управление отображением элемента 2.16. Flex-контейнеры 2.16.1. Направление выравнивания элементов внутри контейнера 2.16.2. Перенос на новую строку 2.16.3. Одновременное указание характеристик flex-контейнера 2.16.4. Размеры элемента 2.16.5. Растяжение элементов 2.16.6. Сжатие элементов 2.16.7. Одновременное указание характеристик элементов 2.16.8. Выравнивание элементов внутри контейнера 2.16.9. Порядок следования элементов внутри контейнера 2.17. CSS Grid 2.17.1. Описание строк и столбцов 2.17.2. Автоматическое размещение элементов внутри сетки 2.17.3. Добавление элементов в ячейки сетки 2.17.4. Объединение ячеек 2.17.5. Размеры неявных ячеек 2.17.6. Расстояние между ячейками 2.17.7. Имена элементов 2.17.8. Одновременное указание характеристик контейнера 2.17.9. Выравнивание сетки внутри контейнера 2.17.10. Выравнивание элемента внутри ячейки 2.18. Многоколоночный текст 2.18.1. Количество колонок 2.18.2. Размеры колонок 2.18.3. Расстояние между колонками 2.18.4. Линии между колонками 2.19. Фильтры и эффекты 2.19.1. Изменение прозрачности 2.19.2. Размытие 2.19.3. Изменение яркости, насыщенности и контраста 2.19.4. Изменение цвета 2.19.5. Создание тени Функция drop-shadow() Создание тени для текста Создание тени для блока 2.20. Анимация с двумя состояниями 2.20.1. Продолжительность анимации 2.20.2. Задержка перед началом анимации 2.20.3. Задание анимируемых атрибутов 2.20.4. Закон анимации 2.20.5. Одновременное задание всех параметров анимации 2.20.6. Сложная анимация 2.21. Анимация с несколькими состояниями 2.21.1. Шкала времени 2.21.2. Указание названия шкалы времени 2.21.3. Продолжительность анимации 2.21.4. Задержка перед началом анимации 2.21.5. Закон анимации 2.21.6. Количество повторений анимации 2.21.7. Направление анимации 2.21.8. Текущее состояние анимации 2.21.9. Состояние элемента до начала анимации и после ее завершения 2.21.10. Одновременное задание всех параметров анимации 2.21.11. Сложная анимация 2.22. Двумерные трансформации 2.22.1. Атрибут transform 2.22.2. Смещение 2.22.3. Изменение масштаба 2.22.4. Наклон 2.22.5. Вращение 2.22.6. Применение матрицы трансформации 2.22.7. Позиционирование точки начала координат для двумерных трансформаций 2.22.8. Сложные двумерные трансформации 2.23. Трехмерные трансформации 2.23.1. Перспектива 2.23.2. Выполнение трехмерных трансформаций 2.23.3. Задание точки зрения 2.23.4. Скрытие обратной стороны элемента 2.23.5. Режим проецирования элементов на контейнер 2.23.6. Позиционирование точки начала координат для трехмерных трансформаций 2.23.7. Сложные трехмерные трансформации 2.24. Медиа-запросы и адаптивный дизайн 2.25. Проверка CSS-кода на соответствие стандартам
Глава 3. Основы JavaScript. Создаем страницы, реагирующие на действия пользователей
3.1. Первые шаги 3.1.1. Первая программа на JavaScript 3.1.2. Тег
Создаем динамические веб-сайты на PHP. 4-е изд [2021] Кевин Татро, Питер Макинтайр
Сложно найти что-то толковое про PHP? Проверенная временем, обновленная в четвертом издании, эта книга помогает начинающим разработчикам научиться всему, Показать полностью. что необходимо для создания качественных веб-приложений.
Вы начнете с общего описания технологии и постепенно перейдете к синтаксису языка, приемам программирования и другим важным деталям. При этом будут использоваться примеры, демонстрирующие и правильное применение языка, и распространенные идиомы. Предполагается, что читатель уже имеет опыт работы с HTML. Вы получите множество рекомендаций по стилю программирования и процессу разработки ПО от Кевина Татро и Питера Макинтайра. Этот материал, изложенный в доступной и компактной форме, поможет вам овладеть мастерством программирования на PHP.
• Общие сведения о том, какой результат можно получить, используя PHP. • Основы языка, включая типы данных, переменные, операторы, управляющие команды. • Функции, строки, массивы и объекты. • Решение распространенных задач разработки: обработка форм, проверка данных, отслеживание сеансовых данных и cookie. • Работа с реляционными базами данных (MySQL) и базами данных NoSQL (например MongoDB). • Генерирование изображений, создание файлов PDF, парсинг файлов XML. • Безопасность скриптов, обработка ошибок, оптимизация быстродействия и другие нетривиальные темы.
Programming PHP: Creating Dynamic Web Pages [2021] Kevin Tatroe, Peter MacIntyre
Скачать книгу https://t.me/physics_lib/8093
PHP. Полное руководство и справочник функций [2020] Лукьянов
Наша книга поможет вам освоить язык PHP практически с нуля-от самых самых основ до создания своих собственных приложений и библиотек кода. Показать полностью. — Пошаговые примеры помогут вам разобраться с многочисленными функциями PHP; — вы узнаете, как правильно использовать строки; — что такое массивы и какие действия с ними можно выполнять; — вы узнаете, как используется ООП (объектно-ориентированное программирование) в РНР; — научитесь использовать PHP-сеансы и получать доступ к параметрам формы и загруженным файлам; — узнаете, как отправить Cookies и перенаправить браузер или как получить доступ к базам данных из PHP; — поработаете с графикой в PHP и научитесь динамически генерировать изображения с помощью PHP; — узнаете, как сделать свои веб-приложения безопасными и защитить их от наиболее распространенных и опасных атак и многое-многое другое.
Скачать книгу: https://t.me/physics_lib
Принципы разработки программных пакетов. Проектирование повторно используемых компонентов [2020] Маттиас Нобак
Существует масса литературы и онлайн-ресурсов, посвященных дизайну классов, но информацию о проектировании программных Показать полностью. пакетов найти не так просто. Книга Маттиаса Нобака, профессионального PHP-разработчика, призвана восполнить этот пробел. В ней рассказывается о принципах повторного использования и распространения компонентов, также известных как пакеты, и предлагается ряд полезных техник по организации кода в группы любого размера. Вы узнаете о том, какие классы должны быть внутри пакета, как использовать принципы связности и зацепления, как облегчить поддержку пакета.
Издание адресовано программистам, использующим объектно-ориентированный язык для создания приложений. Представленные в книге примеры кода поясняют отдельные технические моменты и упрощают понимание материала.
Современный JavaScript для нетерпеливых [2021] Кэй С. Хорстман
Язык JavaScript изначально был предназначен для написания небольших объемов кода внутри браузера, но современный JavaScript радикально отличается от своего прародителя. Показать полностью. В наши дни программисты на JavaScript активно осваивают функциональный, объектно-ориентированный и асинхронный стили программирования, оставляя в прошлом архаичные конструкции, чреватые ошибками. Данная книга – полное, но при этом лаконичное руководство по версии JavaScript E6 и выше. Вам не потребуется знаний старых версий языка, а сразу предлагается начать с более мощных современных.
Автор бестселлеров Кэй С. Хорстман рассказывает обо всем, что вам необходимо знать, излагая материал небольшими порциями, рассчитанными на легкое усвоение. Практические советы и примеры кода помогут эффективно воспользоваться всеми новшествами, избежать подводных камней и устаревших средств и извлечь максимум пользы из надежных инструментов и фреймворков для разработки ПО на современном JavaScript.
Издание предназначено прежде всего программистам, владеющих такими языками, как Java, C#, C, или C++.
Modern JavaScript for the Impatient [2020] Cay S. Horstmann
JavaScript was originally designed for small-scale programming in web browsers, but modern JavaScript is radically different. Nowadays, JavaScript programmers actively embrace functional, object-oriented, and asynchronous programming, while deprecating error-prone concepts from the past. Modern JavaScript for the Impatient is a complete yet concise guide to JavaScript E6 and beyond. Rather than first requiring you to learn and transition from older versions, it helps you quickly get productive with today’s far more powerful versions and rapidly move from languages such as Java, C#, C, or C++. Bestselling programming author Cay S. Horstmann covers all you need to know, provided in small chunks organized for quick access and easy understanding. Horstmann’s practical insights and sample code help you take advantage of all that’s new, avoid common pitfalls and obsolete features, and make the most of modern JavaScript’s robust toolchains and frameworks. • Quickly master modern JavaScript’s implementation of fundamental programming constructs • Avoid legacy techniques that create unnecessary complexity and risk • Make the most of functional, object-oriented, and asynchronous techniques • Use modules to efficiently organize and run complex programs • Write more powerful, flexible, and concise programs with metaprogramming • Extend JavaScript’s power via JavaScript libraries, frameworks, and platforms Whether you’re just getting started with JavaScript or you’re an experienced developer, this guide will help you write tomorrow’s most robust, efficient, and secure JavaScript code.
Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.
От переводчика
Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.
JavaScript
Семантика
HTML5 предоставляет нам достаточное количество элементов, направленных на точное семантическое описание документа или содержимого. Поэтому, убедитесь в том, что у вас все хорошо с лексикой.
Убедитесь, что вы поняли семантику элементов, которые вы используете в своем коде. Очень плохо использовать семантические элементы не по назначению или не в том месте, если бы вы просто оставались нейтральными к этим этим семантическим элементам.
Лаконичность
Старайтесь кратко писать код. Забудьте о своих старых привычках, перетекающих из XHTML.
Читабельность
Читабельность вашего кода не должна иметь второстепенный характер. Конечно, вы не обязаны быть экспертом по оптимизации (WCAG) для того, чтобы наверняка улучшить свой сайт, однако, уже прямо сейчас вы можете начать немедленно исправлять мелочи, которые в итоге помогут сделать ваш код лучше, например:
— использовать атрибут alt правильно — связывайте имена (links) и элементы (buttons) и называйте их по смыслу (
— это зверство) — не полагайтесь на название цветов, в качестве информации — явно связывайте определенной меткой и элемент формы
Язык документа
Определении языка и кодировки символов не является обязательным, однако рекомендуется всегда объявлять их на уровне документа, даже если они указаны в заголовках HTTP. Приоритетной кодировкой символов является UTF-8.
Эффективность
Если нет уважительных причин добавлять загрузку скриптов до контента, старайтесь прописывать скрипты в конце документа, тем самым ваши скрипты не будут блокировать рендеринг страницы. Если у вас очень тяжелые таблицы стилей, старайтесь разбить их на несколько и загружать по отдельности, так чтобы первичный контент был сразу отрисован. Очевидно, чем больше файлов, тем больше HTTP запросов, два запроса, конечно, медленнее, чем один, но в нашем случае, важным фактором будет являться скорость отображения нужного контента.
Точка с запятой
В то время как точка с запятой является чисто технически разделителем правил, CSS всегда относится к точке запятой, как к оператору завершения.
Box model
Блочная модель, в идеале, должно быть одинаковой для всего документа. Глобальное правило * это нормально, однако нужно помнить, что вы не можете изменить блочную модель у специфичных элементов.
Потоки
Не меняйте стандартное поведение элемента, если вы можете обойтись без этого. Сохраняйте элементы в их классическом отображении в потоке документа. Например, удаление пробелов под изображением, не должно влиять на его отображение.
Аналогично, не вытаскивайте из основного потока элементы, если вы можете обойтись без этого.
Позиционирование
Существует множество способов позиционирования элементов в CSS, однако старайтесь ограничивать себя свойствами представленными ниже. В порядке предпочтения:
Селекторы
Минимизируйте сочетания селекторов связанных с DOM. Иногда, лучше добавить лишний класс элементу, который вы хотите найти, чем искать его через три структурных селектора: псевдо-класс, потомок, комбинатор.
Избегайте перегрузку селекторов.
Специфичность
Не используйте значения и селекторы, которые нельзя переопределить. Минимизируйте использование id (идентификаторов) и избегайте правило !important
Переопределения
Переопределение стилей селекторов затрудняет отладку. Избегайте этого, если можете.
Наследование
Не дублируйте определения селекторов, стили которых и так могут передаваться по наследству.
Лаконичность
Пусть ваш код будет немногословным. Старайтесь избегать использование несколько свойств в том месте, где это вовсе не нужно.
Англоязычные обозначения
Предпочтительно использовать английскую математику.
Вендорные префиксы
Не используйте устаревшие префиксы. Если вам действительно необходимо использовать их, в этом случае, добавляйте их перед стандартными.
Анимация
Иногда предпочтительнее использовать переходы (transitions), нежели анимацию (animations). Избегайте анимирование свойств в пользу opacity и transform.
Единицы измерения
Используйте безразмерные значения. Старайтесь использовать rem, если вы рассчитываете все в относительных единицах. Предпочтительно использовать секунды, а не миллисекунды.
Цветовая модель
Если нужна прозрачность, использовать rgba. В противном случае, всегда используйте шестнадцатеричный формат.
Отрисовка
Избегайте http-запросов, если ресурс легко воспроизводится с помощью CSS.
JavaScript
Производительность
Легкочитаемый, выразительный и правильный код важнее производительности. На самом деле, JavaScript никогда не будет вашим узким местом в расчете на производительность. Лучше уделять внимание таким вещам, как сжатие изображений, оптимизация http-запросов и доступа к сети, перерасчет DOM-дерева. Если вы запомните хотя бы одну из рекомендаций в данной статье, опирайтесь на нее.
Независимость от внешнего состояния
Старайтесь создавать свободные функции. Все функции и методы в идеале не должны нести никакого побочного характера, зависеть от внешних данных, и в итоге, они должны возвращать новые объекты, а не вносить изменения в существующие.
Нативность
Полагайтесь на стандартные методы, как можно больше.
Принудительное сравнение
Лишние сравнения не имеют смысл, избегайте их.
Циклы
Не используйте циклы, так как они заставляют вас использовать изменяемые объекты. Полагайтесь на методы Array.prototype.
Если вы не можете использовать методы Array.prototype, используйте рекурсию.
Вот общая функция Loop, делающая рекурсию проще в использовании.
Аргументы
Забудьте об arguments как об объекте. Остаточные параметры это всегда лучший вариант, потому что: 1. Передаваемое имя дает лучшее представление о том, что ожидает функция на входе 2. Остаточный параметр — это массив и он легок в использовании
Использование метода apply
Забудьте метода apply(). Вместо этого используйте оператор распространения (вызова функции).
Использование метода bind
Не используйте bind(), когда есть более идиоматические подходы.
К прочтению: 1. Babeljs (пример в ES5): плохо vs хорошо 2. bind(), а также итераторы в JavaScript
Методы высшего порядка
Избегайте вложенных функций там где это не нужно.
Композиции
Избегайте несколько вложенных вызовов функций. Используйте вместо них композицию.
К прочтению: 1. Babeljs (пример в ES5): плохо vs хорошо
Кеширование
Дорогостоящие операции с большими структурами данных непростительны, если вы не кешируете их.
Переменные
Используйте const вместо let и let вместо var.
Условия
Будьте привержены концепции IIFE’s (немедленно выполняемый функтор), используйте возвращаемые значения в условиях (if, else if, else и switch).
Итераторы
Избегайте цикл перебора for. in
Разница между циклом и методом в том, что цикл перечисляет свойства и из цепочки прототипов.
Объект как ассоциативный массив
В то время как объекты можно законно использовать, как правило, ассоциативный массив (Map) лучше и мощнее. Если сомневаетесь, тогда точно используйте Map.
Каррирование
Каррирование является мощной, но в свою очередь чужеродной парадигмой для многих разработчиков. Не злоупотребляйте.
Читабельность
Не скрывайте намерения вашего кода, используя умные трюки.
Повторное использование кода
Не бойтесь создавать много мелких и многоразовых функций, они очень полезны.
К прочтению: 1. Babeljs (пример в ES5): плохо vs хорошо
Зависимости
Минимизируйте зависимости стороннего кода, если вы не в курсе как он работает. Не нужно загружать всю библиотеку ради нескольких методов, которые легко воспроизводимы:
К прочтению: 1. Babeljs (пример в ES5): плохо vs хорошо 2. Путь JavaScript модуля и документация по библиотеке Underscore
Новое 4-ое издание признанного бестселлера, охватывающего как клиентские, так и серверные аспекты веб-разработки. Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга изобилует ценными практическими советами, содержит исчерпывающий теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети.
Скачать книгу 