DEV Community: sundaycoding

Пост для редактирования5

sundaycoding — Sat, 15 Mar 2025 12:00:00 +0000

Пост для редактирования5

Пост для редактирования4

sundaycoding — Sat, 15 Mar 2025 08:00:00 +0000

Пост для редактирования4

Пост для редактирования3

sundaycoding — Sat, 15 Mar 2025 08:00:00 +0000

Пост для редактирования3

Пост для редактирования2

sundaycoding — Fri, 14 Mar 2025 12:00:00 +0000

Пост для редактирования2

Пост для редактирования

sundaycoding — Fri, 14 Mar 2025 08:00:00 +0000

Пост для редактирования

Базовые программы и IDE для новичков в программировании. Как создать IT-стартап, сидя на кухне.

sundaycoding — Fri, 14 Mar 2025 08:00:00 +0000

Если ты изучаешь программирование, то наверное уже слышал о том, что самые крупные компании были созданы "В гараже", "На коленке", "За одну ночь", "Забавы ради" и всё в таком духе. Мотивирует! - не так ли? Как говорят успешные бизнес-тренеры на своих успешных бизнес-марафонах, секрет создания проекта в том, чтобы "выйти из зоны комфорта" - и начать действовать. Ну и конечно, с точки зрения IT-сферы, нужно ещё и использовать для этого подходящие инструменты - а именно, специальные программы для разработки других программ - о чем мы и поговорим с тобой в данной статье.

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

Сравнение стартап-фабрик "там" и "тут". Картинка взята с просторов интернета.
Ну и вторая картинка вдогонку, на тему моих любимых бизнес-тренингов и стартап-интенсивов. Прекрасный пример сравнения образов из интернета, и реальности в настоящем её проявлении.

Типичный бизнес тренинг - к счастью в IT-сфере и программировании этого меньше, чем в классическом бизнесе. Тем не менее, тенденция в целом сохранятся.
Конструктивный дискомфорт и бизнес-тренинги. Личный опыт 🚀
Я всегда очень скептически относился к любым образовательным мероприятиям вроде "бизнес-тренингов", "бизнес-марафонов", "коуч-сессиям" и другим подобным мероприятиям. Обычно, я предпочитал выбирать для работы и размышлений тихие и уединённые места. (Друзья-интроверты, передаю Вам большой привет!) Ну и бонусом - так же любил и люблю периодически совершать пешие прогулки куда-нибудь на природу или в горы (вот тут отдельная статья на эту тему). Но с точки зрения выхода из зоны комфорта, и прихода светлых идей в необычных местах, могу поделиться следующим опытом.

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

Парсер Google Maps, который является наиболее продаваемым из парсеров которые я сделал, был придуман и запрограммирован мной в своей базовой версии, в маленькой студии в Дагомысе (небольшой город возле Сочи). Там мне посчастливилось заболеть Ковидом, и вынужденно жить около недели в лихорадочном бреду и диком кашле, периодически совершая вылазки в ближайшую Пятёрочку.

Проект Data Excavator (универсальный парсер интернет-сайтов) писался в микро-гостиничном номере в Санкт-Петербурге (что-то около 6 метров). Номер не проветривался, а из окон люто веяло морозом. Кровать занимала 80% комнаты, остальное место отводилось холодильнику и тумбочке Советского образца. Холод и духота! Удивительное сочетание ярких ощущений.

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

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

Программы и сервисы для начинающих программистов 👨‍💻
Итак, мы наконец добрались до базового набора программ для начинающих программистов. Каждый реализованный программист, в любом случае когда-то начинал с самых основ. И так же, как писатель держал в руках свою первую ручку или самый простой карандаш, так и успешный программист программист когда-то писал свои первые строки кода.

Арсенал современного программиста полон инструментов с разным уровнем сложности, но главное, помни: даже самые великие приложения и системы однажды начинались с самого малого — порой даже с обычного блокнота.

Универсальный совет начинающим программистам. Просто начни!
Любая программа - это в конечном итоге самый обычный текст, написанный по определенным правилам. Для разных языков существуют разные правила и разные особенности написания. Но суть от этого не меняется, и в конечном итоге задача программиста сводится к тому, чтобы придумать и написать "текст". Какой бы сложной ни была программа, текст остаётся текстом - и как правило, его можно редактировать любым доступным способом.

Блокнот - простейшая среда разработки
Да, тот самый блокнот.. Как это ни странно, обычный текстовый редактор в самом простом виде, прекрасно подходит для разработки программ на самых разных языках. Простейший тому пример - веб-приложения, и в частности написание кода на языках JavaScript, HTML, CSS.

Где же взять этот самый блокнот?! Например в среде Windows - используй строку поиска и вводи туда "Блокнот". И вот она, та самая универсальная среда разработки!

Блокнот - простейшая среда для веб-разработки. Просто, быстро и брутально!
Пример программы на JavaScript, написанной в блокноте.
Вот тут в блоге есть отдельная статья о первых шагах в разработке программ на JavaScript. Если интересуешься веб-разработкой - рекомендую к прочтению.

Блокнот для крутых - Notepad++
Ещё один изумительный факт для тех, кто сомневается в своих скромных начинаниях или отсутствию специальных-супер IDE за какие-то космические деньги: легендарные программы, такие как первая версия операционной системы Linux и классический Doom, были написаны в самых обычных текстовых редакторах. Так что не бойтесь начать с блокнота Windows!

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

Скачать Notepad++ можно отсюда. К слову сказать, этот текстовый редактор поддерживает работу с большими файлами, что делает его прекрасным инструментом для практикующего программиста. Вот уже 10 лет я использую этот инструмент, и крайний раз делал это буквально сегодня.

Пример использования Notepad++ для разработки приложений. SQL-запросы для СУБД PostgreSQL.
Visual Studio Code - простой редактор кода от Microsoft
Если ты уже достаточно крут, чтобы писать на разных языках, но тебе совершенно надоел блокнот и Notepad++ - добро пожаловать в Visual Studio Code! Это навороченная версия блокнота, ещё не настолько сложная как Visual Studio, но уже поддерживающая расширения и имеющая внутри себя обозреватель проектов.

Удобство этой среды разработки - поддержка синтаксиса различных языков (среда разработки подсказывает правильное название методов и функций). Так же, внутри VS Code есть функции по работе с удалённым сервером через FTP, возможность по отправке кода в git, и многое другое. Ну и конечно главное достоинство - среда разработки является бесплатной!

Visual Studio Code - простая среда для разработки приложений. Более продвинутый уровень, чем Notepad++. Но ещё не настолько сложно как Visual Studio.
MySQL Workbench - базовый инструмент работы с СУБД
Если ты стремишься к работе с базами данных, MySQL Workbench первым окном в мир управления данными при работе с СУБД MySQL. Отлично подойдет для тех, кто учится языку запросов SQL, и хочет визуально проектировать, моделировать, создавать и обрабатывать базы данных. Не удивляйся, если твоё первое приложение с успешно реализованной базой данных принесет чувство величайшего триумфа!

MySQL Workbench - среда разработки для управления и проектирования баз данных.
Скачать MySQL Workbench можно по этой ссылке. А если ты интересуешься созданием и администрированием баз данных - рекомендую прочитать вот этот цикл статей.

Visual Studio - вселенная для разработчиков
Visual Studio — это не просто IDE, это целый удивительный мир программирования, в которой разработчики могут создавать приложения для любых платформ и на разных языках программирования. Хотя иногда она может показаться сложной для новичков, её функционал стоит того, чтобы потратить время на освоение.

Такие гиганты, как Unity3D и Xamarin, взаимодействуют с Visual Studio, позволяя создавать игры и кросс-платформенные приложения. Скачать данное чудо-IDE можно вот здесь, с официального сайта приложения. Есть как бесплатные версии, так и платные. По личному опыту - бесплатной версии вполне хватает для решения очень многих задач.

Пример работы со средой разработки Visual Studio.
GitHub - первый шаг в мир совместной разработки
Наконец, важно не просто писать код, но и уметь с ним работать в команде. GitHub — это репозиторий кода с системой контроля версий, и социальная сеть для программистов. Овладение этими инструментами откроет перед тобой двери в совместную работу над проектами и изучение кода, написанного другими разработчиками.

Первые шаги в программировании 👣
Помни, что любой большой путь всегда начинается с первого шага. Возможно, читая эту статью, ты стоишь на пороге своей карьеры в программировании. Не бойся сделать первый шаг, не старайся найти "идеальные условия" для старта, а просто начинай движение с тем, что у тебя есть уже сейчас.

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

Экспериментируй с различными инструментами, находи то, что нравится именно тебе, и помни: самые масштабные программные проекты начинались с простых идей и простых строк кода. У тебя всё получится!

Почему язык программирования Java - это прекрасный выбор для начинающих разработчиков?

sundaycoding — Thu, 13 Mar 2025 10:00:00 +0000

Fun fact - в мире существует порядка 9000 языков программирования и соответствующих им платформ с разным уровнем сложности, разным предназначением и разными парадигмами. Так вот, несмотря на кажущуюся сложность принятия правильного решения, я считал и продолжаю свято верить в то, что язык программирования следует выбирать всего по двум критериям - простота обучения и скорость выхода на коммерческий доход. И вот, исходя из этих критериев, я рекомендую начинающему программисту рассмотреть язык Java - как мощную и удобную стартовую площадку. Потому что, язык очень даже соответствует обоим из этих критериев.

Язык программирования Java - отличный выбор для начинающих программистов.
Java является языком высокого уровня, работающим в концепции ООП. А это значит, что язык прекрасно вписывается в современные реалии разработки программного обеспечения. Более того, Java является прообразом языка C# - это язык разработки приложений от компании Microsoft и соответствующая ему платформа .NET. Так же, Java стабильно входит в ТОП самых востребованных языков программирования, в последние годы.

Кстати говоря, большую часть коммерчески оплаченного кода сейчас я пишу именно на C#. И хотя мне не довелось глубоко поработать именно с Java (о чем я иногда небезосновательно рефлексирую), я часто встречаю интересные проекты в этом стеке, и хороших специалистов которые в нём работают. Короче, периодически грущу на тему того, что выбрал ещё более "коммерческий" язык C# в угоду более универсальному Java, наверное как-то так. Хотя прыгнуть что с C# на Java, что с Java на C#, в принципе не является чем-то сложным, скорее это дело привычки.

В общем говоря, известный своей гибкостью, широкой поддержкой сообщества и большим спросом на рынке труда, Java мягко знакомит новичков с миром объектно-ориентированного программирования (ООП), облегчая процесс превращения их кода в деньги. Что в конечном итоге, часто и является приоритетным критерием выбора для начинающих программистов современности.

Java - классический язык для объектно-ориентированного программирования 📦
Есть такая прекрасная штука, как ООП. Переводится на человеческий язык как "Объектно-ориентированное программирование". Про парадигму ООП я подробно писал вот в этой статье. Так вот, являясь основой множества современных языков программирования, ООП делает большой акцент на описании окружающей нам реальности в виде классов и объектов. ООП позволяет разбивать сложные программы на "кусочные" компоненты, что облегчает разработчикам создание, модификацию и сопровождение программных приложений. ООП доминирует в современном мире, и на мой взгляд важно выбирать языки, поддерживающие этот способ разработки. Так вот, и при чём же тут язык Java?

Красивая картинка на тему объектно-ориентированного программирования.
Java упрощает концепцию ООП для начинающих программистов, реализуя ее в достаточно чистом виде, избегая некоторых запутанных штук, представленных в других языках. Будучи начинающим программистом, освоение концепции ООП с помощью понятного синтаксиса и структуры Java, скорее всего, станет прочным фундаментом для изучения других языков, основанных на ООП. Что Java, что C# - как мне это видится, это "красиво-упакованные", упрощённые и безопасные технологии, которые прежде всего берегут психику юного программиста, и позволяют быстро почувствовать свою полезность. Здесь тебя не будут безжалостно бить и унижать, как например в C++ - а наоборот, позаботятся о том, чтобы ты быстрее уверился в своих силах.

Например, вот базовый код на Java, иллюстрирующий создание объектов и объявление классов:

class App {
public static void main(String[] args) {
System.out.println("Hello, World!");
} }

В общем и целом, ООП в концепции Java находит очень широкое применение в самых разных сферах. Это и прикладные устанавливаемые приложения, и банковский софт, и мобильные приложения, и госсектор, и что угодно прочее. Умея работать с этим языком, ты в любом случае будешь востребованным специалистом - а при необходимости сможешь легко перепрыгнуть например в C# / .NET. Короче, без бутерброда не останешься.

История появления языка Java ☕️
Язык Java был создан Джеймсом Гослингом (не путать с Районом Гослингом, лол 😄), инженером-программистом из Канады, и его командой, известной как Green Team, в компании Sun Microsystems. Команда начала проект по созданию языка Java в 1991 году. Изначально проект был предназначен для интерактивного телевидения, но он оказался слишком продвинутым для индустрии цифрового кабельного телевидения того времени. И как это иногда бывает в мире IT, "строили автомобиль, а получилась ракета" - из языка для интерактивного телевидения вышел известный язык для решения практически любых прикладных задач.

В 1995 году Sun Microsystems выпустила первую публичную реализацию под названием Java 1.0, и в ней было обещано Write Once, Run Anywhere (WORA), что обеспечивало бесплатное исполнение на популярных платформах. На ранних этапах разработки Java называлась Oak в честь дуба возле офиса Гослинга, затем ее переименовали в Green, а позже она стала Java, вдохновленной кофе Java.

Джеймс Гослинг - автор языка Java
Джеймс Гослинг родился недалеко от Калгари, Канада, 19 мая 1955 года. Он получил степень бакалавра в области компьютерных наук в Университете Калгари, а затем в 1983 году защитил докторскую диссертацию по компьютерным наукам в Университете Карнеги-Меллона. За свою карьеру Гослинг внес значительный вклад в развитие программных систем и признан пионером в области компьютерных наук.

Помимо Java, Гослинг также разработал оригинальную версию текстового редактора Unix Emacs, которая сегодня используется во многих Unix-системах. Менее известным фактом о Гослинге является то, что он написал программное обеспечение для управления медицинским оборудованием, симуляторы для канадского проекта по разработке нефтяных песков в Альберте, а также код для оборонных проектов США. Он известен своими инновациями и практическим вкладом в развитие вычислительной техники. В 2007 году его сделали офицером Ордена Канады - второй высшей награды в этой стране. Такой вот талантливый мужик.

20 апреля 2009 года, компания Oracle выкупает компанию Sun Microsystems за $7.4 млрд. Таким образом, дальнейшая разработка языка переходит в ведение компании-лидера по производству СУБД). Ну, как это и бывает в реальном капиталистическом мире крупного IT, большой и сильный сожрал своего меньшего собрата, воспользовавшись минутой слабости.

Ларри Эллисон - основатель и руководитель Oracle - нынешние владельцы Java.
Превращаем код в деньги. Перспективы получения дохода с помощью Java 💸
Растущий спрос на Java-навыки на рынке труда говорит о коммерческой выгоде изучения Java. Такие сайты и приложения, как LinkedIn, Amazon и Google, используют Java благодаря его надежности, масштабируемости и безопасности. Эффективность и адаптивность делают Java языком выбора для корпоративных приложений, мобильных приложений (через Android), веб-разработки и даже приложений для Интернета вещей (IoT). Поэтому разработчики, владеющие Java, часто могут получить доступ к широкому спектру хорошо оплачиваемых вакансий.

Еще одно неоспоримое преимущество Java - это его возраст и сообщество, которое он сформировал. Будучи языком программирования-ветераном (он родился в 1995 году), Java до сих пор остается одним из самых обновленных и актуальных языков в современной разработке программного обеспечения. Поддерживаемая такими технологическими гигантами, как Google и Oracle, Java продолжает развиваться благодаря регулярным обновлениям, улучшенным функциям и продвинутым инструментам разработки.

Типичная конференция разработчиков Java - стильно, модно, молодежно! Вероятно, бесплатный кофе с вкусными печенюхами там тоже раздают.
Кроме того, благодаря длительному существованию Java может похвастаться огромным сообществом опытных разработчиков, которые предлагают множество ресурсов, таких как StackOverflow, GitHub и Oracle's Java Community, которыми новички могут воспользоваться при возникновении проблем с кодингом.

Средняя зарплата хорошего программиста Java в России - порядка 250т.р. На международном рынке - порядка $5k на руки в месяц. Вот тут статья про зарплаты с большим количеством подробностей.

Java - твой билет в счастливую жизнь 🚀
Для начинающих разработчиков, стремящихся начать свой путь в программировании, Java предлагает классное сочетание легкости обучения, применимости в реальном мире, отличной поддержки сообщества и потенциально прибыльных возможностей трудоустройства. Изучая Java, новички могут постичь фундаментальные концепции и навыки, применимые ко многим другим языкам, что делает этот язык отличной стартовой площадкой в мир программирования.

Так что, дорогой друг и читатель - не жди - бери учебник, устанавливай IDE и начинай свой путь кодинга на Java уже сегодня!

Что такое JavaScript-библиотека jQuery, почему её все ненавидят, и почему она так популярна среди начинающих программистов?

sundaycoding — Thu, 13 Mar 2025 08:00:00 +0000

В современном мире, где царит безжалостная конкуренция в капиталистическом стиле, и стремительно развиваются технологии, программисты стремятся создавать продукты как можно быстрее. Скорость любой ценой - как бы печально это не звучало - доминирует в IT-сфере в последние десятилетия. И сказать чуть больше, иногда эта концепция трансформируется в "скорость в угоду качеству" - утром продукт, а вечером адекватная работа продукта. Так и живём! Но при чём же тут jQuery?

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

Но и не только заказчики любят поторопить разработчика - как гласят неумолимые цифры статистики, первые 2 компании в любом сегменте рынка быстро занимают порядка 70-80% этого рынка. Так что, концепция скорости, в некотором смысле, всё-таки имеет смысл.

Типичная ситуация при разработке веб-сайта или любого другого IT-проекта.
В инструментарии уважающего себя веб-программиста, есть много различных инструментов. Но один из них выделяется чуть ярче остальных - и это React универсальная библиотека jQuery. Эта библиотека сделана на языке JavaScript, и предназначена для придания сайту интерактивности. Всевозможные формы ввода, плавающие окна, блоки для просмотра фотографий и видео, различные виджеты и страницы обратной связи - всё это сделано в общем случае на JavaScript, и с некоторой долей вероятности на jQuery.

Фишка jQuery в том, что это инструмент веб-разработки, который помогает создавать веб-проекты очень быстро. Благодаря ей, удаётся значительно сократить выполнение рутинных и типовых задач. Нельзя сказать, что эта библиотека делает что-то волшебное (потому что большую часть того что она делает, можно сделать и на чистом JavaScript). Но определенно, благодаря своему необычному подходу, она позволяет быстро менять содержимое страницы, используя простые конструкции программного кода.

Вся суть jQuery в несколько строк 👌
В общем, представь себе что у тебя есть сайт, на котором есть веб- страница, на которой есть HTML-кнопка (обычная кнопка иными словами). Если что, про основы разработки сайтов на языке HTML у меня есть отдельная супер-подробная статья - вот тут. Так вот, всё-таки представим себе кнопку! И тебе например надо, чтобы при нажатии на эту кнопку что-то происходило - например показывалось какое-то сообщение в отдельном окне. В этом случае, тебе так или иначе придётся использовать JavaScript. И вот два принципиально разных подхода, которые будут решать одну и ту же задачу:

HTML-код страницы (кусок кода - непосредственно кнопка):

Кнопка

Подход чистого кода, на JavaScript (116 букв кода):

var button = document.querySelector("#my_button");
button.addEventListener("click", (event) => { alert("LOL"); });
А вот подход jQuery (56 букв кода):

$("#my_button").on("click", function(e) { alert("LOL"); });
Что это значит? Да то, что с помощью jQuery можно написать в два раза меньше кода, и получить точно такие же результаты. Да и вообще, можно выкинуть из головы кучу лишних операторов, и использовать конструкции вроде $("...") - которые будут возвращать ссылки на HTML-узлы - с которыми можно будет просто работать. Можно ещё и использовать множество других простых конструкций, которые предлагает библиотека jQuery, вместо того чтобы самому ручками писать каждый раз эти конструкции.

Вся суть jQuery в одной картинке.
Вот и весь фокус - вот и вся причина популярности. Банальная экономия примерно 50% трудозатрат на написание JavaScript-кода. Ну, и конечно не ограничиваясь только лишь этим.

Страх и ненависть в веб-разработке. Почему программисты не любят jQuery? 🤬
FunFact - 23% сайтов во всём мире на момент 2023 года используют jQuery. А всё почему?! Да потому, что это удобно - библиотека упрощает разработку, особенно для тех программистов, у которых пока небольшой опыт в разработке веб-проектов. И вот статистика, которая говорит об этом прямым образом (ха-ха, Node-js на втором месте, как тебе такое, ненавистник jQuery?!):

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

Особенность библиотеки в том, что она обращается к элементам через оператор $ или jQuery, превращая один-единственный выбранный объект в массив. В результате, добрая половина прикладного кода начинает обращается к элементам напрямую (через стандартные методы веб-браузера), а вторая половина кода - через обёртку jQuery. Получается что-то вроде спагетти-кода, в котором смешиваются два подхода к работе с элементами страницы.

Типичная ситуация применения jQuery в разработке веб-проектов.
Ну и напоследок статья на Habr - там чуть более вдумчиво раскрывают аспекты идейной ненависти к этой библиотеке. Что же лично до моего мнения? Я пробовал делать большие проекты как с использованием jQuery, так и без него. По личным ощущениям, подход к написанию кода идейно без библиотек, слишком переоценён.

Личный опыт. В течение двух лет я писал JavaScript Vanilla-код (принципиально без каких-либо сторонних библиотек) старался всё идейно и максимально оптимизировать и вдумчиво экономить ресурсы. А потом психанул, и вернулся обратно на jQuery и другие готовые решения. Причина? Концепция "фанатичная экономия ресурсов" и концепция "идейная чистота кода" себя не оправдали. На код уходит гораздо больше времени, и в конечном итоге со временем он всё равно падает в качестве по разным причинам.

История создания jQuery 👨‍💻
Библиотека jQuery была создана Джоном Ресигом в 2006 году, со слов автора, чтобы преодолеть разрыв между сложным функционалом JavaScript и необходимой простотой веб-разработки.

Джон Резиг, создатель библиотеки jQuery. Счастливый человек, не стесняющийся создавать проекты с использованием jQuery.
Джон Ресиг родился 8 мая 1984 года и с ранних лет проявил интерес к программированию, который подкрепило его образование. Он получил степень бакалавра в Рочестерском технологическом институте, где специализировался на компьютерных науках.

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

Ресиг опубликовал две версии книги под названием Pro JavaScript Techniques - в 2006 и 2015 годах. Позже, в 2008 году, он написал еще одну книгу под названием Secrets of the JavaScript Ninja, в которой излагаются техники JavaScript. Помимо написания книг, он выступал в качестве спикера и ведущего на многочисленных конференциях по всему миру, делая акцент на инструментах и техниках JavaScript.

После создания jQuery Резиг в 2011 году перешел на работу в Khan Academy, некоммерческую образовательную организацию. В Khan Academy он работал с JavaScript и сопутствующими технологиями, чтобы облегчить интерактивную среду обучения для пользователей. Роль Ресига заключалась в основном в разработке инструментов обработки JavaScript для сайта, что позволило ему повлиять на миллионы учеников и разработчиков по всему миру.

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

Основные возможности jQuery 🚀
В двух словах, основная задача jQuery - быстрая работа с содержимым веб-страницы. Когда надо сделать интерактивность, добавить какие-то кнопки которые будут что-то делать, создать анимацию и так далее. При этом, вторая часть "концепции" - когда всё это надо сделать быстро, с минимальными трудозатратами. Вот за этим и нужна jQuery. Ну а теперь небольшой список.

Быстрая работа с HTML-элементами на странице, подписка элементов на клики, перетаскивание, наведение мышки и так далее.
AJAX-запросы к серверу (взаимодействие пользовательской части интерфейса и серверной части проекта)
Анимация и интерактивность элементов на странице. Всевозможные слайдеры, листалки фотографий, и так далее.
Работа с JSON данными и данными в разных других форматах
Некоторое упрощение работы с циклами
Итак, что же в итоге? 🤨
Неважно, только начинаешь ли ты заниматься веб-разработкой или работаешь в этой сфере уже много лет, jQuery - ценный навык, который стоит освоить. Он предоставляет множество инструментов для добавления сложного функционала с минимальным количеством кода, обеспечивая достойную работу твоих проектов на различных платформах.

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

Даже если через 5-10 лет jQuery брезгливо выкинут на помойку и идейно перестанут внедрять в новые сайты, на текущий момент эта технология более чем актуальна. И вероятно, бесчисленные сайты, которые её сейчас используют - вряд ли в один миг исчезнут. Такие дела.

Перестань программировать! Лучший программный код - это код, который не написан. Лучшая кнопка - это кнопка, которой нет.

sundaycoding — Wed, 12 Mar 2025 12:00:00 +0000

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

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

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

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

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

Искусство упрощать, египетские пирамиды и эпоха возрождения 👨‍🎨
Идея упрощения не является чем-то новаторским, и совсем не относится к философским достижениям современной эпохи. Концепция экономии ресурсов, и поиска простейших решений, пришли к нам из глубокой древности.

Жил да был такой известный скульптор и художник, как Микеланджело. В наследство он оставил нам множество величественных росписей, картин и скульптур. К примеру, "Сотворение Адама" или скульптура "Давид" или Базилика Святого Петра. Так вот, Микеланджело известен ещё и своими философскими мыслями, одна из которых звучит следующим образом. В ответ на вопрос "Как Вы делаете свои скульптуры" он ответил: "Я беру камень и отсекаю всё лишнее".

Сотворение Адама - известная роспись руки Микеланджело.
Вернёмся чуть назад в прошлое. Жили да были Египетские фараоны. Одним из интересных хобби правителей легендарного древнего царства, было строительство собственных усыпальниц. По удивительному стечению обстоятельств была выбрана форма пирамиды - трёхмерного треугольника. Почему так?

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

Египетские пирамиды - прекрасный пример упрощения сложного капитального строительства.
В линейку простейших решений, найденных человечеством, следует отнести конечно же колесо. Колесо - простейшая конструкция для качения, которое позволило сэкономить огромное количество энергии и ресурсов на транспортировке чего либо. Если что, колесо изобрели в Месопотамии примерно 4000 лет до нашей эры (6000 лет назад к настоящему моменту). К слову сказать, Христианство берёт свое начало 2000 лет назад, Римская империя возникла в 27 году до нашей эры, а дольмены (загадочные строения, которые можно найти на юге России и в других частях мира - порядка 3000 лет до н.э).

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

К созданию любой программы следует подходить с изрядным настроем на упрощение. Сюда же хорошо ложится концепция MVP - минимально валидных продуктов. Моя практика показывает, что хорошие продукты получаются в тех случаях, когда они быстро делаются - во первых на изначальном энтузиазме коллектива, а во-вторых без обременений бесконечными допилами и переделками, корректировками дизайна и согласованиями. Ну и конечно, про концепцию быстрых MVP пишут в таких умных книгах как "Lean Startup" или "От нуля к единице".

Типичная ситуация при создании стартапов. Проверено лично. Не усложняй то, что ты делаешь.
Из личного опыта опять же, большинство выживших продуктов к которым я имел отношение, было сделано не более чем за месяц. А вот продукты которые создавались 4, 5 или более месяцев - либо долго буксовали, либо оказывались вовсе неуспешны. Почему так? Мне кажется здесь тоже есть две причины. Во-первых, упорно запиливая продукт на протяжении многих месяцев или лет, программист сильно отрывается от реальности. Обратная связь от живых пользователей очень важна, и чем быстрее её получаешь - тем более "честным" по отношению к покупателю является продукт. И второе - если продукт невозможно сделать за месяц или два, то скорее всего он очень сложен. А сложность - это то что никому не нравится. // Может поэтому все так не любят читать инструкции?

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

Загадочные любители всё усложнять 🧐
Ну, не буду здесь сильно философствовать. Думаю, каждый узнает в картинке ниже знакомые ему лица. Чем руководствуются люди, выбирающие путь усложнения? Откуда берётся эта фантастическая любовь к страданиям? Ответы на эти вопросы ещё предстоит найти.

Типичная ситуация в разработке любых программных продуктов.
Приведет ли упрощение к деградации? 🤤
Ещё один интересный вопрос на тему дня - стоит ли бояться упрощения? Является ли путь бесконечного облегчения жизни дорогой к глупости? Ведь посмотрите сами - когда-то великой привилегией, доступной лишь избранным, было умение читать и писать. Некоторые книги ценились на вес золота, а прикладные технологии тщательно охранялись. Сейчас же, увидеть читающего человека можно всё реже, а молодые люди и вовсе предпочитают видео-контент привычному тексту.

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

Современное общество, поколение за поколением, всё глубже подсаживается на современные технологии, и делегирует решение прикладных задач бездушным механизмам. Людям больше не требуются бумажные энциклопедии - есть Wikipedia. Не нужны проводные телефоны, не нужны бумажные письма - потому что есть беспроводная связь. А в скором времени, ненужными окажутся и сами люди - потому что вместо таксиста есть автопилот, вместо складского служащего - робот, а вместо юриста - ChatGPT.

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

Первый в мире программист, её непростая жизнь, и при чём тут Лермонтов?

sundaycoding — Wed, 12 Mar 2025 08:00:00 +0000

Когда кто-то думает о компьютерном программировании и его началах, большинство умов тяготеет к технологическому буму конца XX века. Если ты так считаешь - то спешу обрадовать - тебя обманула красивая реклама (ну или романтические фильмы про IT-стартапы). Билл Гейтс, Стив Джобс, Бьерн Страуструп, Алан Тьюринг, и другие значимые в IT индустрии исторические личности не имеют прямого отношения к реальному началу начал.

Настоящая же история программирования стартует гораздо раньше. И происходит это примерно вот в таком вайбе: кареты, конюшни, Наполеон, его величество Александр I, Суворов и Кутузов. В общем - смотри картинку!

История программирования начинается где-то здесь.
Но давай ближе к делу. Более чем за 100 лет до появления первой электронной вычислительной машины, английский математик Ада Лавлейс заложила основы вычислительных алгоритмов, которые произвели революцию как в обществе того времени, так и в настоящем реальности. Ада Лавлейс считается первым в мире компьютерным программистом, и ее влияние - прямо или косвенно - отпечаталось в каждом аспекте современных технологий.

Кто же ты, первый программист?
Ада Лавлейс родилась 10 декабря 1815 года под именем Августа Ада Байрон и была единственным законным ребенком поэта-романтика лорда Байрона и его жены Анны Изабеллы Милбэнк. Да-да, первый в мире программист была дочерью известного поэта! Про него даже писал Лермонтов:

Лермонтов пишет про отца первого в мире программиста. Такие дела.
Байрон, известный своей поэзией и ярким образом жизни, не оказал особого влияния на воспитание Лавлейс: он ушел, когда ей был всего месяц от роду, и умер в Греции, когда Аде было 8 лет. Мать Ады, опасаясь, что Ада унаследует непредсказуемый темперамент отца, прививала ей интерес к математике и логике. Эти дисциплины, которые тогда считались нетипичными для женщин, сформировали карьеру Лавлейс и повлияли на будущее технологий.

В подростковом возрасте наставник Ады познакомил ее с Мэри Сомервилл, замечательной женщиной, которая бросила вызов условностям своего времени, став известной научной писательницей и математиком. Благодаря этой связи Ада познакомилась с Чарльзом Бэббиджем, профессором математики Кембриджского университета, который считается отцом компьютера.

Чарльз Бэббидж - конструктор первой в мире механической вычислительной машины.
Разностная машина Бэббиджа
Бэббидж сконструировал машину, которую назвал "Разностная машина", способную вычислять полиномиальные функции. Хотя это изобретение и было значительным, самой новаторской концепцией Бэббиджа стал его план создания "Аналитической машины". Она должна была выполнять любые вычисления с помощью перфокарт - идея, позаимствованная у ткацкого станка Жаккарда, который использовал перфокарты для плетения сложных узоров.

Ада Лавлейс и одна из машин, с которыми она (возможно) работала.
Заинтригованная изобретением Бэббиджа, Лавлейс начала интенсивное изучение машины, которое намного превзошло все представления о ней на тот момент. Бэббидж называл ее своей "Чародейкой чисел". В 1843 году Ада написала набор заметок для перевода лекции итальянского математика об аналитическом двигателе - заметок, которые значительно превосходили оригинальную лекцию по глубине и объему.

Разностная машина Бэббиджа - первый в мире компьютер, в некотором смысле.
Заметка G, самая важная часть перевода Лавлейс, содержала подробное описание пошагового процесса, с помощью которого Аналитический двигатель мог вычислять числа Бернулли. Именно благодаря этому алгоритму Аду Лавлейс считают первым программистом. Ее дальновидная проницательность увидела потенциал двигателя не только в вычислении чисел. Лавлейс представляла, как в один прекрасный день машина будет обрабатывать все, что имеет структурное подобие, включая музыку и искусство.

Личная жизнь и наследие
К сожалению, гениальность Ады Лавлейс была недолгой: она умерла от тяжёлого заболевания 27 ноября 1852 года в возрасте 36 лет. Но ее работы дали большой толчок к развитию индустрии, которая сегодня влияет на все аспекты человеческой жизни. Хотя её труды оставались непризнанными в течение многих лет, сегодня ее широко ценят за прозорливое понимание возможностей вычислительной техники.

Каждый второй вторник октября во всем мире отмечается День Ады Лавлейс. Цель этого дня - подчеркнуть достижения женщин в области науки, технологий, инженерии и математики (STEM) в попытке создать новые примеры для подражания, которые побудят большее количество девушек начать карьеру в STEM.

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

Что такое язык стилизации CSS? Почему его критикуют, но без него невозможно создать красивый сайт?

sundaycoding — Tue, 11 Mar 2025 12:00:00 +0000

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

Если язык HTML это условные кирпичи из которых построен дом, то язык CSS - это обои, светильники, дверные ручки, лепнина на потолке, и всякое такое прочее. Конечно, жить можно и в бетонной коробке - спя на матрасе по центру комнаты - но в отремонтированной квартире находиться всяко приятнее. Так и язык CSS - ориентирован на создание внешнего комфорта, не затрагивая при этом вопросы капитального строительства.

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

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

Яндекс, Google, VK, Дзен, и другие известные проекты тоже используют эти технологии. Так что, зная их как все вместе, так и каждую по отдельности - ты определенно будешь в хорошей компании.

HTML + CSS + JS. Три друга, три брата - вечная классика и столпы веб-разработки.
Стоит отметить, что CSS не является языком программирования в привычном классическом понимании. Он нужен именно для стилизации страниц - то есть, с его помощью нельзя написать программы в привычном нам виде. Но не стоит из-за этого слишком рефлексировать - значимость и массовую применимость CSS сложно переоценить.

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

Почему критикуют CSS?
Стоит заметить, что CSS периодически критикуют. Справедливости ради, с неменьшей яростью критикуют также и JavaScript, jQuery (чаще всего), и иногда HTML. Тем не менее, все эти технологии никуда не деваются от обилия критики, и продолжают служить людям верой и правдой. Постепенно языки совершенствуются, упрощаются, и догоняют представления людей об удобстве и простоте. Но, мода на поливание классики помоями никуда не девается - что и говорить, сам этим иногда грешу.

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

Хотя язык CSS и развивается достаточно быстро, обрастая новыми удобными возможностями, но как это часто и бывает - он несколько отстает от современных трендов веб-разработки и запросов со стороны индустрии.

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

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

Известная символика не слишком опытного применения языка CSS.
Ну и еще момент. С моей точки зрения, в неопытных руках даже карандаш становится грозным оружием. Всегда спокойно смотрел на холивары вокруг классических веб-технологий, и предпочитал просто делать оплачиваемую работу. Не могу утверждать хорош ли язык CSS, или плох как некоторые считают, но продолжаю активно использовать его в классическом виде (без SASS / LESS) вот уже многие годы - доволен абсолютно.

История возникновения языка CSS
Забавный факт - история языка CSS начинается там же, где и история HTML. А именно - в ЦЕРН! Пока неутомимые физики данного учреждения гонялись за бозонами, неутомимые системные администраторы между делом придумали современный интернет. И пока физики все так же спорят о природе мироздания и все что-то исследуют на коллайдере, айтишники из ЦЕРН давно пожинают плоды своих трудов - предоставляя мировому сообществу множество знакомых технологий.

Но давай ближе к делу! Говоря более конкретно, сотрудник ЦЕРН Тим Бернерс Ли работал над созданием прототипа всемирной паутины, а Хаком Виум Лие работал над улучшением внешнего вида веб-страниц. Вот он, автор языка стилизации CSS:

Хоком Виум Лие - автор языка стилизации CSS
И если у тебя возникнет логичный вопрос - "Почему автор CSS держит в руках логотип Оперы" - то есть такой же логичный ответ - "Потому что он работает там техническим директором аж с 1999 года". Вот тут - более подробная статья о нем (Википедия).

Ну и в качестве полноты картины, фотография автора HTML и собственно изобретателя интернета. Тим Бернерс Ли.

Тим Бернерс Ли - изобретатель интернета.
А если тебе интересно почитать в подробностях как развивался CSS, то вот тут есть большое интервью с его создателем - в оригинальном тексте.

К слову сказать, Хаком Виум Лие перешел на какой-то новый сверхуровень познания реальности, и теперь занимается выращиванием яблок и другими сельскохозяйственными делами. Очень восхищает - умение совмещать серьезную работу и личные хобби - дорогого стоит!

Автор языка CSS теперь выращивает яблоки.
Базовые принципы языка CSS
Основа языка CSS - это селектор. Говоря по-русски, "выбиратель". Почему он называется именно так? Потому что селектор как бы "выбирает" элементы на HTML-странице, которые он должен стилизовать. Фокус селектора в том, что он может выбрать сразу множество элементов по задумке программиста, и стилизовать их некоторым специальным образом.

CSS-код сохраняется в специальный файл формата .css. Далее, ссылка на этот файл подключается к веб-странице, и с этого момента содержимое .css-файла начинает влиять на содержимое веб-страницы. Вот так выглядит пример CSS-кода и пример селекторов:

Пример CSS-кода - селектор и описательная часть.
Говоря простыми словами, селектор может начинаться с символа "точка", "решетка" или с буквы (но не ограничиваясь лишь ими). Это основные типы селекторов, которые встречаются внутри практически каждого второго интернет-сайта.

Точка означает, что мы обращаемся ко всем элементам которые содержат класс с именем селектора. То есть, если у нас есть селектор который называется .redButton, то все HTML-элементы которые имеют внутри себя вот такой код: class="redButton", будут стилизованы соответствующим кодом внутри этого селектора.
Второй вариант - символ "решетка" # - это обращение к элементам по их идентификатору. Вот такой вот селектор #blueButton стилизует все элементы, которые имеют id="blueButton".
Селекторы которые начинаются с буквы - например a, div, p, ul - стилизуют вообще все HTML-теги, которые им соответсвуют. Ну, надеюсь принцип понятен - а дальше дело за твоими практическими экспериментами!
А вот так CSS-файл подключается к веб-странице с HTML-содержимым. Вместо styles/style.css необходимо подставить ссылку на свой CSS-файл. Ну и так же, не забудь что эта строка должна располагаться внутри тега header.

Ну и вот некоторые фрагменты CSS-кода для большей ясности. Стилизация параграфа - блока с текстом. Раскрашиваем текст в красный цвет, и обводим блок с текстом черной линией.

p { color: red; width: 500px; border: 1px solid black; }
Или вот еще пример. Придаем всем заголовкам на странице большой размер. Выравниваем местоположение заголовков по центру страницы.

h1 { font-size: 60px; text-align: center; }
Другие базовые примеры применения CSS-кода можно вот здесь.

А вот так выглядит файл с большим количеством CSS-кода. В данном случае, не слишком опрятно, но другой красивой картинки я не нашел.

Пример большого количества CSS-кода. Кто-то что-то стилизует.
Примеры элементов стилизации в CSS
Ниже приводится краткий обзор некоторых распространенных элементов стилизации CSS:

Цвет шрифта: Cвойство color используется для задания цвета текста.
Размер шрифта: Свойство font-size используется для установки размера текста.
Фоновый цвет блока. Свойство Background-color задает цвет фона элемента.
Границы / Обводка элемента. Свойство Border (граница) позволяет задать стиль, ширину и цвет границы элемента.
Отступы элемента относительно других. Свойство padding задает область отступов вокруг содержимого элемента.
Синтаксис этих элементов CSS следует простой, интуитивно понятной схеме:

selector { property: value; }
Селектор указывает на HTML-элемент, который нужно стилизовать, свойство описывает характеристику, которую нужно изменить, а значение задает новый стиль для свойства.

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

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

Mozilla Web Docs - ссылка на краткий базовый учебник по CSS. Рекомендую начать изучение именно с этого ресурса.

Wikipedia - ссылка на классическую статью про CSS. Обзорная информация, базовые примеры применения языка.

HTMLBook - справочник CSS-свойств с их описанием и применением. Полезная шпаргалка для веб-разработчиков.

W3C Валидатор - онлайн-сервис для проверки CSS-кода на твоем сайте. Проверяет CSS код на ошибки. Можно отправить ему ссылку на страницу, или CSS-код в виде текста.

W3C Schools - список свойств CSS-селекторов и примеры их применения.

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

И не стоит думать, что CSS это всякие-там украшательства, игрушки и баловство. От внешнего вида сайта прямым образом зависит активность пользователей на этом самом сайте.

Прими силу CSS, вникай глубже, практикуй и внедряй его, ведь это краеугольный камень визуально привлекательной и эффективной веб-разработки. Помни, что эффективный веб-разработчик не только заставляет сайт правильно функционировать, но и правильно выглядеть!

Простая шпаргалка по jQuery для начинающих веб программистов

sundaycoding — Tue, 11 Mar 2025 08:00:00 +0000

jQuery - это библиотека JavaScript, предназначенная для упрощения обхода и манипулирования деревом HTML DOM, а также обработки событий, CSS-анимации и Ajax. По состоянию на август 2022 года, jQuery используется 77% из 10 миллионов самых популярных веб-сайтов. Веб-аналитика показывает, что это наиболее широко используемая библиотека JavaScript с большим отрывом - по крайней мере, она используется в 3-4 раза чаще, чем любая другая библиотека JavaScript. Синтаксис jQuery разработан для облегчения навигации по документу, выбора элементов DOM, создания анимации, обработки событий и разработки Ajax-приложений.

Пиши меньше - делай больше! Фирменный слоган проекта jQuery. Не вникая в подробности, это как-то так и работает, за вычетом некоторых пробелов в качестве результатов.
А теперь, другими словами и ближе к делу. jQuery - это старая как динозавр, простая, немного громоздкая, местами неэффективная, но привычная в своей простоте лопата, которая помогает делать сайты интерактивными.

Много кто ругает эту лопату, много кто предпочитает использовать более изящные инструменты для создания современных сайтов. Но! Точно так же, как и каждая настоящая лопата, она хранится практически в каждом сарае у каждого садовода программиста - и применительно к веб-разработке, ей умеет пользоваться практически каждый. Даже если ты предпочтешь ненавидеть эту лопату или в целом садоводство веб-разработку, тем не менее на каком-то жизненном этапе с ней будет работать банально проще.

Для пущей убедительности, я попросил нейросеть нарисовать типичного программиста с лопатой использующего jQuery, но по странному стечению обстоятельств получился персонаж, напоминающий постаревшего Артемия Лебедева. Но видимо как-то так Kandinksky представляет веб-разработчиков.

Типичный программист который использует jQuery в процессе веб-разработки. Некоторым образом картинка напоминает постаревшего Артемия Лебедева.
Как подключить JavaScript-библиотеку jQuery к своей веб-странице 🔌
Я искренне надеюсь, что читая эти строки, ты уже постиг основы веб-разработки и понимаешь что такое веб-страница, язык HTML и язык стилизации CSS. Если же этого еще не произошло - вероятно, данная статья будет неким набором красивых букв и картинок - и практической пользы на данный момент из нее извлечь будет сложно. В этом случае, лучше будет все-таки начать с более простых основ веб-разработки - пожалуйста вернись к прошлым материалам и сначала изучи их. Ну а если ты уже их освоил - давай продолжим!

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

Содержимое самой простой, базовой HTML-страницы (например файл myfirstpage.html) с подключенной библиотекой jQuery может выглядеть следующим образом:

<!DOCTYPE html>

$(document).ready(function () {
/* Некоторый код jQuery */
});

jQuery example page

Hi there the great developer!

Обрати внимание, что подключение jQuery происходит именно в этой строке:

Ну и если ты задашь логичный вопрос, что это за такая ссылка на google - то ответ достаточно банален. Просто на одном из серверов Google хранятся различные версии библиотек jQuery. И одну из них (в данном примере конкретно версию 3.5.1) ты можешь подключить к своему сайту.

Наиболее же актуальная версия библиотеки - 3.7, и скачать ее можно с официального сайта разработчика. Как поступаю я? По странной старой привычке, и исходя из гипертрофированных представлений о надежности, каждый раз я скачиваю локальную копию библиотеки и размещаю ее на разрабатываемом сайте. В этом случае, ссылка на библиотеку выглядит например так: src="assets/js/jquery/3.5.1/jquery.3.5.1.min.js"

Но вернемся к разбору приведенного примера. Что происходит далее по коду? Чуть ниже в тексте есть вот такие строчки:

$(document).ready(function () {
/* Некоторый код jQuery */
});

Что они означают? Зачем они здесь? Говоря простыми словами, внутри них происходят следующие процессы. Парные теги script (открывающий и следующий за ним закрывающий) говорят системе о том, что внутри них будет расположен некоторый JavaScript-код. Поскольку этот блок со скриптом находится в секции head, то выполнен такой программный код будет сразу после загрузки страницы в браузер пользователя (как только страница будет нарисована на мониторе).

Непосредственно же внутри кода JavaScript, можно найти вот такую конструкцию: $(document). Вот здесь уже начинается непосредственная архитектура библиотеки jQuery и ее связь с HTML-моделью страницы и моделью событий, происходящих внутри страницы. Конструкция $() выполняет основную функцию библиотеки jQuery - а именно выбирает элемент со страницы на основе CSS-селектора или объекта внутри JavaScript.

Конкретно в данном примере, происходит выбор объекта "документ целиком", и далее - подписка документа на событие ready (которое в оригинальной модели страницы называется onload). Данное событие происходит, когда страница полностью загружена и готова к использованию - и теперь можно работать с интерактивностью элементов.

Соответственно, программный код из примера дождется пока страница загрузится, и далее сделает действия, которые программист определит внутри фигурных скобок.

Базовый синтаксис и три основы jQuery 📦
Хотя jQuery и является достаточно сложной и гибкой библиотекой с кучей возможностей, обычно разработчики используют только 2 из них - а именно обработку различных событий (клики, наведение мышки и так далее) и AJAX - обращение к серверу за новой динамической информацией для страницы. В конечном итоге, современный интернет выглядит как-то так:

Краткое представление модели современного интернета. Любимая JS-библиотека jQuery и ее три основные концепции.
✅ Первая основа библиотеки jQuery - символ $ - он же ключевое слово jQuery. Это оператор, с которого начинается большинство вызовов библиотеки, включая обращение к элементам документа или различным функциям самой библиотеки. В случае вызова $("...") происходит выборка всех элементов через CSS-селектор внутри кавычек. В случае вызова $, происходит обращение к функциям библиотеки.

✅ Вторая основа jQuery - это CSS-селекторы. Это специальные выражения на языке CSS, которые позволяют обращаться к элементам на твоей HTML-странице. Не забывай, что твоя HTML-страница - это локальная копия веб-документа, который был загружен с сервера, и отрисован на твоем экране. CSS-селекторы позволяют сообщить библиотеке, какие конкретно элементы с HTML-страницы нужно выбрать, чтобы потом совершить с ними какие-то действия. Например подписать их на клики, наведение мышки, и так далее.

✅ Третья основа jQuery - это AJAX. Это такой механизм, который позволяет асинхронно загружать с сервера какие-то данные, и применять их на веб-странице. Ну или давай простыми словами. Повторюсь, твоя HTML-страница - это локальная статическая копия HTML-кода, зафиксированная на некоторый момент времени. Чтобы например при нажатии на кнопку на страницу загрузилось новое содержимое (допустим таблица с ценами), нужно сделать отдельный вызов к твоему серверу, да еще умудриться сделать это так, чтобы сама страница не перезагрузилась (действие в фоновом режиме). Для этого и используется AJAX - Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

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

Две основные функции библиотеки jQuery - подписка элемента на некоторое событие, и AJAX-обращение к серверу.
Выборка элементов со страницы через jQuery - что такое "селектор" 💰
Рассмотрим более подробно первую из конструкций - а именно программный код вида $("selector").on("action"); Для лучшего понимания что это и как это работает, давай обратимся к теории - а именно к базовому устройству веб-страницы.

Твой HTML-документ всегда состоит из HTML-узлов. Каждый тег внутри страницы представляет из себя отдельный объект DOM, с которым можно работать независимо от других элементов. Каждая кнопка, картинка, блок текста на странице - все это обособленные HTML-узлы (HTML Nodes) или другими словами DOM-элементы. Они могут быть вложены друг в друга (например внутри тега

может быть три элемента ), или просто иметь внутри себя текст.

Если прямо сейчас ты клацнешь правой кнопкой по этому тексту, и нажмешь на пункт меню "просмотр элемента", то увидишь что-то вот такое:

Просмотр HTML узлов страницы средствами браузера Google Chrome.
В правой части обозревателя ты увидишь блок отладки, в котором будут располагаться элементы страницы - то есть узлы HTML DOM. Так вот, к чему это я. Для придания странице интерактивности, необходимо "подписать" конкретные HTML-элементы внутри страницы на некоторые действия пользователя. Например, "подписать" HTML-узел который представляет из себя условную кнопку, на событие "клик по кнопке". И вот тут на помощь нам приходит библиотека jQuery и ее вездесущий оператор $.

Библиотека jQuery и вездесущий символ $ - базовый оператор для обращения к элементам страницы и выполнения других действий.
В первую очередь, чтобы сделать что-либо с каким-либо элементом на странице, его необходимо "выбрать" - то есть получить указатель на этот элемент с помощью библиотеки jQuery. Для этого используется вот такая конструкция:

$("SELECTOR").on("ACTION", function(e) { console.log("HELLO!"); })
Здесь вместо слова SELECTOR необходимо подставить CSS-селектор. А вместо слова ACTION - действие, которое мы хотим обработать. Например, если мы хотим обработать клик по некоторому элементу, то нам потребуется вот такой код:

$("SELECTOR").on("click", function(e) { /* ... */ });
В этом случае, когда пользователь нажмет на элемент на странице мышкой, выполнится код внутри фигурных скобочек.

Для того чтобы уметь эффективно работать с элементами на странице, тебе нужно знать базовые принципы работы CSS-селекторов.

Базовые CSS-селекторы и принципы их организации 🔵
CSS-селектор - это выражение из одного или нескольких слов, благодаря которому можно выбрать один или несколько элементов на странице, посредством их атрибутов и/или языка стилизации CSS. Проще говоря, это специальное выражение, которое позволяет обратиться к каким-то конкретным узлам на странице.

CSS - не только технология для красивой стилизации страниц. Отчасти это технология для выборки элементов с помощью специальных селекторов.
Предположим, что на твоей HTML-странице есть квадратный элемент с текстом. Вот такой HTML-код будет представлять этот элемент. Не столь важно, какую конкретно стилизацию CSS будет иметь этот элемент - сейчас мы рассматриваем подписку на различные события, и различные типы CSS-селекторов. Так что, просто представим простой элемент с некоторым набором свойств.

Привет! Я большой прямоугольник с текстом внутри!

А теперь, предлагаю тебе список готовых CSS-селекторов, с помощью которых этот элемент может быть идентифицирован среди прочих других на этой HTML-странице.

cool_rectangle

.rect
.big_rect
.my_div
.rect.big_rect.my_div
[data-itemname="rectangle_one"]
[id="cool_rectangle"]
div.rect
div.big_rect
div.my_div
div#cool_rectangle
div[data-itemname="rectangle_one"]
div[data-itemname="rectangle_one"][id="cool_rectangle"]
Каждый из этих селекторов указывает на вышеприведенный HTML-узел страницы. Я скажу больше - на самом деле, вариаций селекторов для конкретного элемента может быть несколько сотен, а иногда и под тысячу. Все зависит от того, какое количество свойств и атрибутов будет указано у конкретного HTML элемента.

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

✅ Выборка по имени класса - оператор "точка"

У нашего элемента указан вот такой набор классов: class="rect big_rect my_div". Это значит, что мы можем обратиться к элементу по любому названию класса, например: .rect, .big_rect, .my_div. Мы так же можем сочетать названия классов между собой - в этом случае можно написать вот так: .rect.big_rect или вот так: .rect.big_rect.my_div.

✅ Выборка по идентификатору - оператор "решетка"

У нашего элемента указан идентификатор id="cool_rectangle". Согласно некоторому негласному правилу, у каждого элемента на странице должен быть уникальный идентификатор (хотя это правило не все соблюдают). Используя символ #, мы можем обратиться ко всем элементам на странице с некоторым идентификатором. Например, вот так: #cool_rectangle

✅ Выборка по атрибуту - оператор "квадратная скобка"

Более редкая и сложная конструкция - это обращение к элементам по их аттрибутам. В общем-то говоря, внутри HTML-тега любое выражение является атрибутом. Будь то id, class, и любые другие слова (даже style). Часто в тегах встречаются конструкции вида data-role, data-name, aria-label и так далее. Для обращения к элементу по его атрибуту, используется квадратная скобка. Соответственно, исходя из нашего примера, мы можем обратиться к элементу вот таким образом: [data-itemname="rectangle_one"]

✅ Выборка по имени тега - оператор "название тега".

Ну и последнее, самое простое. Всегда можно обратиться к элементу по названию его тега. То есть буквально, чтобы выбрать все элементы div на странице, можно так и написать: div.

Независимо от того, какой именно селектор ты выберешь, подставляй его внутрь оператора $. И ты получишь что-то вроде таких конструкций, которые будут обращаться к элементам на странице для каких угодно дальнейших действий:

$("#cool_rectangle")
$("[data-itemname='rectangle_one']")
$(".rect.big_rect.my_div")
$("div#cool_rectangle")
Базовые события библиотеки jQuery 🟠
Вот таблица со списком некоторых событий, доступных для подписки через jQuery. В таблице 4 столбца - события мышки, события клавиатуры, события форм ввода, и события документа. Наиболее часто используемыми являются события мышки, клавиатуры и события документа.

Некоторые события jQuery.
И теперь подробнее про каждый тип событий

click - событие клика мышкой на элемент (одинарный клик). Наиболее часто используемое событие.
dblclick - событие двойного клика мышкой на элемент (дабл-клик)
mouseenter - событие которое происходит в момент входа указателя мышки в элемент (пересечение одной из границ элемента мышкой внутрь элемента)
mouseleave - событие которое происходит в момент выхода указателя мышки с элемента (пересечение одной из границ элемента мышкой снаружи вовне)
keypress - событие нажатия на кнопку на клавиатуре (нажатие целиком, без привязки к моменту начала и окончания нажатия)
keydown - событие нажатия на кнопку, момент начала нажатия (можно отменить нажатие используя это событие)
keyup - события нажатия на кнопку, момент завершения нажатия
submit - событие отправки формы (нажатие на кнопку "отправить") - в современной интерпретации, любая отправка на сервер набора полей из тега

change - изменение содержимого некоторого поля ввода (основное событие, которое используется для изменение содержимого полей ввода и мониторинга содержимого). Второе по популярности событие в jQuery.
focus - фокусировка некоторого элемента
blur - разфокусировка некоторого элемента
load - событие завершения загрузки страницы
resize - событие изменения размеров экрана
scroll - скроллинг страницы или элемента
Ну и возвращаясь к нашему примеру, подпишем наш кубик на событие клика, после чего будем отображать сообщение "кто-то кликнул по кубику!". Это будет выглядеть вот так:

$("#cool_rectangle").on("click", function(e) {
alert("Кто-то кликнул по кубику!");
});
jQuery - еще несколько слов 👨‍💻
По личному опыту - разные проекты в которых я когда-то участвовал и продолжаю участвовать сейчас, построены как с использованием jQuery, так и без нее. Был период в жизни, когда я тулил эту библиотеку где ни попадя. Был и противоположный период - когда я принципиально писал чистый Vanilla код без чего-бы то ни было постороннего.

В конечном итоге, я пришел к личному выводу о том, что предполагаемое "зло" вокруг jQuery несколько преувеличено, и не стоит шарахаться от него как от огня.

Точно так же как и многие другие инструменты, это вполне рабочая штука, которая экономит время. Только лишь наличие jQuery в проекте не говорит о том, что у автора кривые руки - а скорее о том, что человек решил не тратить лишнее время на очередное пере-изобретение велосипеда.