Что такое стек разработки
О стеке простыми словами — для студентов и просто начинающих
Привет, я студент второго курса технического университета. После пропуска нескольких пар программирования по состоянию здоровья, я столкнулся с непониманием таких тем, как «Стек» и «Очередь». Путем проб и ошибок, спустя несколько дней, до меня наконец дошло, что это такое и с чем это едят. Чтобы у вас понимание не заняло столько времени, в данной статье я расскажу о том что такое «Стек», каким образом и на каких примерах я понял что это такое. Если вам понравится, я напишу вторую часть, которая будет затрагивать уже такое понятие, как «Очередь»
Теория
На Википедии определение стека звучит так:
Стек (англ. stack — стопка; читается стэк) — абстрактный тип данных, представляющий собой список элементов, организованных по принципу LIFO (англ. last in — first out, «последним пришёл — первым вышел»).
Поэтому первое, на чем бы я хотел заострить внимание, это представление стека в виде вещей из жизни. Первой на ум мне пришла интерпретация в виде стопки книг, где верхняя книга — это вершина.
На самом деле стек можно представить в виде стопки любых предметов будь то стопка листов, тетрадей, рубашек и тому подобное, но пример с книгами я думаю будет самым оптимальным.
Итак, из чего же состоит стек.
Стек состоит из ячеек(в примере — это книги), которые представлены в виде структуры, содержащей какие-либо данные и указатель типа данной структуры на следующий элемент.
Сложно? Не беда, давайте разбираться.
На данной картинке схематично изображен стек. Блок вида «Данные/*next» и есть наша ячейка. *next, как мы видим, указывает на следующий элемент, другими словами указатель *next хранит адрес следующей ячейки. Указатель *TOP указывает на вершину стек, то есть хранит её адрес.
С теорией закончили, перейдем к практике.
Практика
Для начала нам нужно создать структуру, которая будет являться нашей «ячейкой»
Новичкам возможно будет не понятно, зачем наш указатель — типа comp, точнее сказать указатель типа структуры comp. Объясню, для того чтобы указатель *next мог хранить структуру comp, ей нужно обозначить тип этой структуры. Другими словами указать, что будет хранить указатель.
После того как у нас задана «Ячейка», перейдем к созданию функций.
Функции
Функция создания «Стека»/добавления элемента в «Стек»
При добавлении элемента у нас возникнет две ситуации:
Разберем чуть чуть по-подробнее.
Во-первых, почему функция принимает **top, то есть указатель на указатель, для того чтобы вам было наиболее понятно, я оставлю рассмотрение этого вопроса на потом. Во-вторых, по-подробнее поговорим о q->next = *top и о том, что же означает ->.
-> означает то, что грубо говоря, мы заходим в нашу структуру и достаем оттуда элемент этой структуры. В строчке q->next = *top мы из нашей ячейки достаем указатель на следующий элемент *next и заменяем его на указатель, который указывает на вершину стека *top. Другими словами мы проводим связь, от нового элемента к вершине стека. Тут ничего сложного, все как с книгами. Новую книгу мы кладем ровно на вершину стопки, то есть проводим связь от новой книги к вершине стопки книг. После этого новая книга автоматически становится вершиной, так как стек не стопка книг, нам нужно указать, что новый элемент — вершина, для этого пишется: *top = q;.
Функция удаления элемента из «Стека» по данным
Данная функция будет удалять элемент из стека, если число Data ячейки(q->Data) будет равна числу, которое мы сами обозначим.
Здесь могут быть такие варианты:
Для лучшего понимания удаления элемента проведем аналогии с уже привычной стопкой книг. Если нам нужно убрать книгу сверху, мы её убираем, а книга под ней становится верхней. Тут то же самое, только в начале мы должны определить, что следующий элемент станет вершиной *top = q->next; и только потом удалить элемент free(q);
Если книга, которую нужно убрать находится между двумя книгами или между книгой и столом, предыдущая книга ляжет на следующую или на стол. Как мы уже поняли, книга у нас-это ячейка, а стол получается это NULL, то есть следующего элемента нет. Получается так же как с книгами, мы обозначаем, что предыдущая ячейка будет связана с последующей prev->next = q->next;, стоит отметить что prev->next может равняться как ячейке, так и нулю, в случае если q->next = NULL, то есть ячейки нет(книга ляжет на стол), после этого мы очищаем ячейку free(q).
Так же стоит отметить, что если не провести данную связь, участок ячеек, который лежит после удаленной ячейки станет недоступным, так как потеряется та самая связь, которая соединяет одну ячейку с другой и данный участок просто затеряется в памяти
Функция вывода данных стека на экран
Самая простая функция:
Здесь я думаю все понятно, хочу сказать лишь то, что q нужно воспринимать как бегунок, он бегает по всем ячейкам от вершины, куда мы его установили вначале: *q = top;, до последнего элемента.
Главная функция
Хорошо, основные функции по работе со стеком мы записали, вызываем.
Посмотрим код:
Вернемся к тому, почему же в функцию мы передавали указатель на указатель вершины. Дело в том, что если бы мы ввели в функцию только указатель на вершину, то «Стек» создавался и изменялся только внутри функции, в главной функции вершина бы как была, так и оставалась NULL. Передавая указатель на указатель мы изменяем вершину *top в главной функции. Получается если функция изменяет стек, нужно передавать в нее вершину указателем на указатель, так у нас было в функции s_push,s_delete_key. В функции s_print «Стек» не должен изменяться, поэтому мы передаем просто указатель на вершину.
Вместо цифр 1,2,3,4,5 можно так-же использовать переменные типа int.
Заключение
Полный код программы:
Так как в стек элементы постоянно добавляются на вершину, выводиться элементы будут в обратном порядке
В заключение хотелось бы поблагодарить за уделенное моей статье время, я очень надеюсь что данный материал помог некоторым начинающим программистам понять, что такое «Стек», как им пользоваться и в дальнейшем у них больше не возникнет проблем. Пишите в комментариях свое мнение, а так же о том, как мне улучшить свои статьи в будущем. Спасибо за внимание.
Стек технологий для разработки веб-приложений: что важно знать бизнесу
Время чтения: 10 минут
Отправим вам статью на:
Один из наиболее важных шагов, которые нужно предпринять, когда дело доходит до разработки приложения, — это выбрать правильный стек технологий. Этот вопрос значительно влияет на успех проекта, как в краткосрочной, так и долгосрочной перспективе. Почему? Стек технологий для разработки веб-приложений влияет на стоимость проекта, сроки выпуска продукта на рынок, безопасность и масштабируемость приложения. Грамотно подобранный стек позволяет получить стабильный, безопасный и удобный в обслуживании продукт, который не только завоюет сердца ваших клиентов, но и позволит вам масштабировать бизнес.
Веб-приложение: что такое, из чего состоит, виды
С точки зрения архитектуры веб-приложения состоят из двух частей: клиентской и серверной. Клиентская часть также называется фронтэнд. По сути это то, что пользователи видят на экране устройства. Серверная часть, или бэкенд — программно-аппаратная часть сервиса. Это набор средств, которые реализуют логику приложения.
Взаимодействие клиентской и серверной частей веб-приложения
Клиентская часть приложения
Фронтэнд, т.е. клиент представляет собой интерактивную часть программы, которая исполняется в веб-браузере на компьютере, смартфоне или планшете. Клиентская часть реализует пользовательский интерфейс веб-приложения и загружается в виде динамических веб-страниц.
Рассмотрим основные компоненты стека интерфейсов.
Каскадные таблицы стилей (CSS) — это язык разметки, который определяет оформление и макет элементов HTML. Таким образом, HTML задаёт структуру, а CSS — стиль. С помощью CSS задаются шрифты, цвета, стили, расположение отдельных элементов, а также отображение страниц на разных устройствах.
JavaScript
JavaScript — это язык программирования, который помогает реализовывать сложное поведение веб-страницы. В большинстве случаев JavaScript используется для создания адаптивных интерактивных элементов для веб-страниц, которые улучшают взаимодействие с пользователем. С помощью JavaScript можно создавать меню, анимацию, видеоплееры, интерактивные карты и даже простые игры в браузере.
Чтобы эффективнее разрабатывать на JavaScript, разработчики используют фреймворки, которые также являются важной составляющей технологического стека. Фреймворк — это рабочая среда, своего рода каркас, который помогает эффективнее создавать и поддерживать программные продукты. Далее мы перечислим некоторые из фреймворков и библиотек, которые мы обычно используем в проектах.
Популярные фреймворки и библиотеки JavaScript
Одна из ключевых особенностей React — универсальность. Эту библиотеку можно использовать на сервере и на мобильных платформах с помощью React Native.
Ещё одна важная особенность библиотеки — декларативность. С помощью React разработчик описывает, как компоненты интерфейса выглядят в разных состояниях. Декларативный подход сокращает код и делает его понятным.
Angular — это фреймворк от компании Google. Прежде всего он нацелен на разработку SPA-решений.
Эта среда разработки известна прежде всего потому, что она предоставляет разработчикам лучшие условия для объединения JavaScript с HTML и CSS. К веб приложениям на Angular.js относятся Google и Youtube.
Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue подходит для постепенного внедрения. Он легко интегрируется с другими библиотеками и существующими проектами. Также Vue пригоден, чтобы создавать сложные одностраничные приложения, если использовать его совместно с современными инструментами и дополнительными библиотеками.
Серверная часть приложения
Под серверной частью понимают набор аппаратно-программных средств, с помощью которых реализована логика работы приложения. Это то, что происходит вне браузера и компьютера пользователя. К бэкенду относится панель администрирования, управление данными, логика их передачи по запросам фронтенда.
Задача серверной разработки — сделать так, чтобы ответ от сервера доходил до клиента и спроектированные блоки функционировали нужным образом. А также создать для заказчика удобную и безопасную среду для наполнения и обновления контента на сайте.
PHP в основном применяется, чтобы «оживить» статичные HTML страницы. Почти всегда пользователи приходят на сайт за информацией, которая всё время меняется, и нужно отображать её актуальное состояние. Например, показать прогноз погоды. Если использовать только HTML, то решить такие задачи не получится. Здесь может помочь PHP: он принимает входящий запрос от веб-сервера, выполняет сценарий и возвращает результат в виде готового HTML-кода. Сервер отправляет этот результат в браузер пользователю, который, в свою очередь, отображает её пользователю. После этого пользователь видит актуальный прогноз погоды.
Для создания веб-приложений на PHP мы используем фреймворк Laravel. Его особенности: поддерживает функциональное, интеграционное и юнит-тестирование, позволяет легко масштабировать приложения, следует лучшим практикам разработки и предлагает большой выбор шаблонов проектирования. Всё это помогает поддерживать чистую, минималистичную и эффективную кодовую базу, которую легко модифицировать.
Также из PHP фреймворков применяем Yii2 и Symfony.
Для разработки веб-приложений на Java мы используем фреймворк Spring. Он обеспечивает комплексную модель разработки и конфигурации для современных бизнес-приложений: от ecommerce-проектов до крупных порталов, от образовательных платформ до правительственных ресурсов. Ключевой элемент Spring — поддержка инфраструктуры на уровне приложения, поэтому разработчики могут сосредоточиться на бизнес-логике без лишних настроек в зависимости от среды исполнения.
Также из фреймворков Java применяем Hibernate. Он упрощает разработку Java приложения для взаимодействия с базой данных.
Node.js
Node.js — кроссплатформенная среда, которая выполняет код JavaScript вне браузера. Node.js позволяет разработчикам использовать JavaScript, чтобы получить инструменты командной строки. На стороне сервера с его помощью можно запускать сценарии для обработки динамического содержимого веб-страницы, перед тем как она будет доступна в веб-браузере пользователя.
Базы данных в разработке веб-приложений
Также веб-приложению требуется место для хранения данных, и для этого используется база данных. Существует два типа баз данных: реляционные и нереляционные. Различия между ними заключаются в том, как они спроектированы, какие типы данных поддерживают, как хранят информацию.
Реляционные БД хранят структурированные данные, которые обычно представляют объекты реального мира. Например, это могут быть сведения о человеке или о содержимом корзины для товаров в магазине, сгруппированные в таблицах, формат которых задан на этапе проектирования хранилища.
Нереляционные БД устроены иначе. Например, документо-ориентированные базы хранят информацию в виде иерархических структур данных. Речь может идти об объектах с произвольным набором атрибутов. То, что в реляционной БД будет разбито на несколько взаимосвязанных таблиц, в нереляционной может храниться в виде целостной сущности.
Внутреннее устройство различных систем управления базами данных влияет на особенности работы с ними. Например, нереляционные базы лучше поддаются масштабированию.
В инфографике ниже мы собрали основные технологии разработки веб-приложений, которые мы используем.
Заключение
Подпишитесь
Оставьте адрес, и каждый месяц мы будем высылать свежую статью
о новых трендах в разработке програмного обеспечения.
Как выбрать технологический стек для стартапов?
Технический стек также называют экосистемой данных, технологической инфраструктурой или стеком решений. Это комбинация инструментов, которые используются для создания и эксплуатации одного приложения. Это структура, на которой приложение, которое вы используете, например Facebook поддерживается такими инструментами как: HTML, PHP, CSS, ReactJS или JavaScript.
Вы можете спросить, как определить правильный стек технологий для вашего бизнеса? Стек технологий, предназначенный для разработки веб-сайтов, будет отличаться от необходимого для мобильных приложений. Точно так же стек коммерческих/корпоративных продуктов будет отличаться от стека стартапов. К другим факторам относятся скорость, с которой вы хотите выпускать MVP(Минимально жизнеспособный продукт), и количество квалифицированного персонала, которое вы можете выделить для нового проекта.
Стек технологий для стартапов
Чтобы определить правильный набор технологий для вашей стартап-компании, вы должны понимать, что технологический стек не универсален. Они собираются на основе следующих факторов:
— Тип проекта: если у вас небольшой проект, идеальным техническим стеком была бы стандартная система управления контентом, такая как WordPress. Для стартапа среднего размера вы можете объединить CMS с подходящим языком программирования, таким как Python, C ++ или JS. Для более крупного проекта вам потребуются веб-приложения со специальными функциями, отвечающими вашим требованиям.
— Дедлайн: количество времени, в течение которого вы хотите запустить свои проекты, частично зависит от стека, который вы выбрали для своего веб-приложения. Имея правильный технический стек, заданный опытным разработчиком, вы можете выпустить свой продукт вовремя и без ошибок.
— Масштабируемость: способность системы, сети или процесса справляться с увеличением своей производительности при добавлении ресурсов (обычно аппаратных). Увеличение производительности каждого компонента системы с целью повышения общей производительности или же разбиение системы на более мелкие структурные компоненты и разнесение их по отдельным физическим машинам.
— Обслуживание: зависит от кодовой базы и инфраструктуры программного обеспечения. Реюзабилити и длина кода считается важным.
Кроме того, следите за техническими стеками, которые уже созданы компаниями и доступны на рынке. Вы можете найти их на Stackshare, чтобы увидеть, какие компании используют стек программного обеспечения.
Технический стек для MVP
Итак, у вас есть целенаправленный технологический стек, и все сотрудники и приоритеты. Но на протяжении всей разработки вашего продукта MVP может сильно отличаться от того, что вы изначально задумывали.
Иногда вы можете прийти к тому моменту, когда окончательная версия MVP потребует изменений в вашем стеке технологий, поскольку дальнейшие инновации и развитие будут зависеть от того, с чем вы работаете. В таких обстоятельствах вам может потребоваться начать все сначала с новыми фреймворками и совершенно новой архитектурой. Всего лишь один недостающий элемент может изменить всю инфраструктуру и навести беспорядок.
Факторы, которые следует учитывать при выборе стека технологий MVP
— Убедитесь, что продукт выходит на рынок в короткие сроки. Таким образом вы сможете быстрее собирать отзывы и поддерживать быстрый темп исправлений и развития.
— Заранее принимайте расчетные решения, чтобы исключить альтернативные затраты времени из-за отсутствия программ автоматизации, поддерживающих вашу инфраструктуру. Наличие подходящего инструмента CI / CD может ускорить тестирование, управление версиями и размещения приложения.
— Не экспериментируйте со своим MVP в поисках разрекламированной или новой технологии, даже если разработчики этого хотят. Когда вы серьезно относитесь к технологическому стеку для своего проекта, вам нужно думать о долгосрочной перспективе (Хотя, это спорно, стартап не всегда для долгосрочной перспективы). Чтобы увидеть, является ли новая технология причудой или позитивной тенденцией необходимо время.
Новые технологии нестабильны, и вам может быть нелегко найти команду для новой ниши, что является пустой тратой времени и денег. Поэтому сосредоточьтесь на имеющихся в настоящее время и доступных в будущем стеках. Работайте умеренно, чтобы проложить стабильный путь к желаемому результату.
Есть две вещи, на которые вы должны обращать внимание при выборе набора технологий для своего стартапа; проект и разработчик. Вы изучаете свои требования к стартапу и тип MVP, который хотите запустить? Это поможет вам найти похожие примеры и усвоить некоторые знания, на выяснение которых у вас уйдет целая вечность.
Понравилась ли статья? Напишите отзывы, будем продолжать? 🙂
Очень много букав. А все гораздо проще:
— на чем писать стартап?
P.S. Много воды и ничего конкретного для дела.
facebook к php никакого отношения не имеет
Придётся делать 100 других фич
Изучаем Администрирование Инфраструктуры 08. Политики firewall
Поговорим про правила и таблицы маршрутизации, а также политики для файрвола.
Разгадка
Когда пытаешься объяснить клиенту как работает твой алгоритм машинного обучения:
«Давайте уже после праздников»
А надо ли учиться?
Я понимаю, что даже при покупке курса надо будет что-то почитывать дополнительно, но на сколько это реально, например, для того же, скажем, юриста со знанием английского на уровне Pre-Intermediate?
Так много вопросов, много желания начать учиться и изменить жизнь к лучшему, уйти из старой нелюбимой профессии, и столько же здорового реализма, который заставляет сомневаться в собственных возможностях и оценивает память уже не как свежую студенческую, а немного поношенную, что значительно затруднит процесс. И после работы и нервяков голова тупит уже слегонца. И здоровую прокрастинацию никто не отменял. Поделитесь опытом, пожалуйста.
Пы.Сы. Не бейте сильно, если эта тема уже обсуждалась, а я пропустила или мой вопрос кому-то покажется глуповатым.
Интересная фича
Обидно
Ответ на пост «Как войти в IT после 30, мой путь от офисного планктона до Middle Java разработчика в Сбербанке»
Мой новый стек веб-технологий для 2020 года
Помните те времена, когда стеки веб-технологий были простыми? Когда уровни этих стеков можно было обозначить в виде четырёхбуквенного сокращения вроде LAMP, LEMP или LEPP? Когда всё, что было нужно для создания и поддержки сайтов, сводилось к вполне обычному железу, к какому-нибудь опенсорсному софту, да к упорству в достижении цели?
Мой первый успешный сайт, теперь уже старинный проект 1999 года, был создан с использованием технологий, которые можно пересчитать по пальцам одной руки: HTML4, CSS2, JavaScript3 и Apache 1.1. Всё это крутилось на сервере с Linux 2.0. Сайт включал в себя 38000 страниц. И сегодня, через 20 лет, он всё ещё их выдаёт.
С тех пор всё изменилось. Это касается и стеков веб-технологий. Теперь они совсем не те, что прежде.
Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о том, как он перешёл от «фуллстека» к «стеку 2020 года». Некоторые технологии в ходе этого путешествия неожиданно стали фаворитами, а некоторые потеряли былую привлекательность.
Стек веб-технологий 2020 года
2020 год — это начало нового десятилетия. Это — время, когда стоит поговорить о новом стеке веб-технологий.
На что похож «стек 2020 года»? Надо сказать, что на это очень сильно влияет то, чего пытается достичь разработчик сайтов. Выбор подходящих уровней сильно зависит от того, какая степень масштабируемости требуется для проекта.
Меня особенно интересуют маленькие веб-сайты. Те, которые хорошо чувствуют себя на виртуальном сервере. Таким сайтам не нужны балансировщики нагрузки или постоянные хранилища данных. Это — ниша CMS, которую уже давно занимает WordPress. Но в основе всего этого лежит не некий минималистичный сервер. Вместо этого речь идёт о системе, которая может выдержать постоянный поток трафика без необходимости автоматического повышения её мощности в часы пик.
Сейчас для разработки и поддержки проектов в интересующей меня области я использую стек технологий, состоящий из 12 уровней.
▍1. Облачный провайдер
▍2. Дистрибутив Fedora Linux с SELinux
Безопасность — это то, что очень сильно всех нас беспокоит. SELinux можно сравнить с мощной охранной системой, работающей в Linux. Если к этому добавить ещё и хорошо настроенный iptables-файрвол, получится то, что позволит владельцу сайта спокойно спать по ночам. Если вы не уверены в том, что вам всё это нужно — проведите следующий эксперимент. Разверните новый сервер у вашего любимого облачного провайдера и понаблюдайте за тем, как скоро его начнут атаковать. Я видел, как брутфорс-атаки на новые сервера с попытками входа по SSH начинались менее чем через 10 минут после их создания.
▍3. Веб-сервер Read Write Serve
Я пользуюсь веб-сервером Read Write Serve с TLS-сертификатами от LetsEncrypt. Раньше я был фанатом Apache, на настройку и запуск новых веб-сайтов у меня уходило буквально несколько минут. Но с тех пор, как я перешёл с PHP на JavaScript, об Apache пришлось забыть. Сервер Express казался мне чрезвычайно простым инструментом, но лишь до тех пор, пока я не попытался воспроизвести в нём весь тот функционал, который давал мне Apache. Речь идёт о механизме согласования содержимого, об условном кэшировании, о сжатии данных, о перезаписи URL для SEO, о CORS, о политиках защиты контента. В результате я и перешёл на сервер Read Write Serve, в котором все эти возможности присутствуют по умолчанию.
▍4. Среда выполнения приложений Node.js
За логику приложения, выполняющуюся на сервере, отвечает среда Node.js. Возникает такое ощущение, что в экосистеме NPM имеются пакеты на все случаи жизни. Поэтому простыми и понятными оказались задачи по сборке из имеющихся пакетов того, что нужно именно мне, и по запуску всего этого на Read Write Serve. Для организации работы всего того, что нужно современному веб-проекту, не требуется прилагать чрезмерных усилий. Это — отправка электронной почты, работа с платёжными сервисами, обращение к базам данных, и всё остальное, подразумевающее работу с серверными API.
▍5. База данных MariaDB
Я пользуюсь сервером баз данных MariaDB. Это — форк MySQL, подвергнутый ребрендингу и освоенный опенсорс-сообществом. Когда мне нужно хранить неструктурированные JSON-данные, я пользуюсь PostgreSQL. Дело в том, что это позволяет мне выполнять запросы непосредственно по конкретным JSON-свойствам. Это немного похоже на MongoDB, но основано на привычном SQL-синтаксисе.
▍6. HTTP/2
Для организации связи между частями приложений я полагаюсь на возможности HTTP/2 с поддержкой постоянных соединений и с мультиплексированием потоков. Эти два дополнения к достойному уважения протоколу HTTP/1.1. изменили мой подход к формированию документов. Во-первых, исчезла проблема блокировки начала очереди. В результате пропала необходимость в спрайт-листах даже в том случае, если у меня имеются десятки маленьких изображений. Во-вторых, теперь не нужно оптимизировать JavaScript- и CSS-файлы, объединяя их в бандлы. После того, как соединение клиента и сервера установлено, все эти маленькие файлы без перебоев передаются по этому соединению.
▍7. HTML-шаблонизация с помощью Blue Phrase
Blue Phrase — это система шаблонизации, позволяющая в компактном виде точно описывать HTML-структуры. Для меня закончились времена нечитаемой мешанины из HTML-кода и несоответствий между открывающими и закрывающими тегами. В шаблонах я обычно использую лишь незначительное количество переменных (заголовок, описание, ключевые слова, SEO-данные, экран загрузки, дата и так далее) и размещаю их в шаблоне в декларативном стиле.
▍8. Написание кода страниц с помощью Read Write Doc
Когда я создаю новые страницы, я сосредоточен на том, что пытаюсь выразить, а не на их оформлении. Для решения этой задачи я пользуюсь Read Write Doc. Этот инструмент помогает мне заниматься делом, ни на что не отвлекаясь. Я пользуюсь им даже тогда, когда то, над чем работаю, планируется опубликовать на Medium (а там есть отличный онлайновый WYSIWYG-редактор). Я отношу себя к ветеранам веб-разработки, поэтому привык к моноширинным шрифтам, и к тому, чтобы мои руки были бы на клавиатуре, а не метались бы между клавиатурой и мышкой. В любом случае, если мне нужно увидеть то, над чем я работаю, с применением к нему CSS, я могу, с помощью простой комбинации клавиш, переключаться между режимами просмотра и редактирования.
▍9. Стандартные веб-компоненты
▍10. JavaScript для клиентских скриптов
Для написания клиентских скриптов я пользуюсь модульным объектно-ориентированным JavaScript-кодом. Я применяю новые возможности стандарта ECMAScript только тогда, когда их поддержка появляется в свежих релизах браузеров. То есть, включаю их в свой арсенал в тот момент, когда вижу, что на caniuse.com «зеленеют» все основные браузеры. Я избегаю полифиллов.
▍11. Стилизация с помощью CSS
CSS — это типографское оформление и макеты страниц. Типографика начинается с правильного подбора шрифтов. Самое главное для меня — хорошая читаемость текста. В последнее время я взял себе за правило хостить файлы используемых шрифтов на собственном сервере. Это ограждает мои ресурсы от возможности блокировки, вызванной ограниченной полосой пропускания некоего стороннего сервиса. Например, я пользуюсь примерно такими конструкциями:
Дополнительное преимущество такого подхода заключается в том, что он полностью избавляет меня от проблемы, известной как FOUT — (flash of unstyled text, вспышка обычного шрифта).
▍12. Подготовка графических ресурсов с помощью GIMP и InkScape
И, наконец, для подготовки графических ресурсов я использую пару редакторов. Растровые PNG-изображения я готовлю с помощью GIMP, а векторные SVG-материалы — с помощью InkScape.
Технологии, которые потеряли былую привлекательность
Некоторые средства, которые раньше мне очень нравились, а также некоторые, которыми я увлекался лишь мимолётно, больше не входят в мой стек веб-технологий.