Сайт javascript своими руками

Пишем свой JavaScript шаблонизатор

На тему шаблонизаторов статей написано великое множество, в том числе и здесь, на хабре.
Раньше мне казалось, что сделать что-нибудь своё — «на коленке» — будет очень сложно.
Но, случилось так, что прислали мне тестовое задание.
Напиши, мол, JavaScript шаблонизатор, вот по такому сценарию, тогда придёшь на собеседование.
Требование, конечно, было чрезмерным, и поначалу я решил просто игнорить.
Но из спортивного интереса решил попробовать.
Оказалось, что не всё так сложно.

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

Для тех, кому только глянуть: the result, the cat.

Работать оно должно как:

Доказать:
+1 к самооценке.

UPD 2: Сразу скажу, чтобы «чётко понять» что там и зачем, нужно начать это делать, желательно вместе с debugger’ом.
UPD 3: Оно разобрано «на пальцах». Там есть ещё где «оптимизнуть». Но будет гораздо менее наглядно.

Т.к. исходный шаблон — это строка, то можно пользоваться преимуществами регулярок.

Для начала можно убрать комментарии, чтобы не отсвечивали:

Hint: [^] означает любой символ, * — сколько угодно раз.

Теперь можно подумать над тем, как будем парсить «чистый» результат.
Так как блоки возможны вложенные, предлагаю хранить всё в виде дерева.
На каждом уровне дерева будет JS Array (), элементы которого могут содержать аналогичную структуру.

Чтобы создать этот массив нужно отделить мух от котлет.
Для этого я воспользовался String.split() и String.match().

Ещё нам понадобится глубокий поиск по строковому val имени внутри объекта obj.

Итак, разделим строку на части parts и элементы matches:

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

Тут blocks — итоговый массив с выделенными блоками, а curnt — массив с текущей вложенностью.

Соотвественно, каждый элемент массива это, минимум:

Т.к. у нас может быть ситуация, когда после блока есть что-нибудь ещё, то здесь af3e.str и должно быть строкой, идущей сразу после <% / %>текущего блока. Все необходимые ссылки мы проставим в момент завершения блока, так наглядней.
В этот же момент мы удаляем последний элемент элемент curnt.

Теперь мы можем собрать одномерный массив, в котором будут все нужные подстроки с их текущими obj.
Для этого нужно «разобрать» получившийся blocks, учитывая что могут быть списки.
Понадобится немного рекурсии, но в целом это будет уже не так сложно.

Далее мы поэлементно распарсим получившийся stars и, собрав результат в строку, получим итоговый результат:

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

Но моей целью было показать саму концепцию…

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

Надеюсь, кому-нибудь пригодится.
Спасибо за внимание!

Источник

Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт

Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.

3D-анимация на JS

Первый трюк — замечательный трёхмерный эффект на JS.

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

Как это делается

Сначала создаётся HTML div:

Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.

Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:

Откройте для себя Vanta.js для анимации фона

Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:

Как это делается

Это довольно просто. Добавьте в HTML такой код:

Это установит фон Vanta.js Globe для идентификатора htmlid.

Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.

ScrollReveal

Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:

Как это делается

Изменение размера и цвета букв

Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:

Как это делается

Создайте несколько новых HTML-элементов span и укажите их класс:

3. Применяя CSS :hover, мы изменяем размер букв и их цвет:

Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:

Свойство animation

Дополнили материал описанием свойства из статьи Криса Койера.

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:

Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.

Подсвойства

Вот полный список значений, которые может принимать каждое из этих вложенных свойств:

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:

Несколько анимаций

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

Производительность

Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:

Какие свойства можно анимировать?

Поддержка браузерами

Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.

Настольные

Префиксы

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

Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.

Источник

Разработка простых современных JavaScript-приложений с использованием Webpack и прогрессивных веб-технологий

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

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

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

Обзор

Прежде чем мы приступим к делу, давайте обсудим средства, которые нам понадобятся.

▍Архитектура приложения

Для того чтобы обеспечить высокую скорость загрузки приложения и удобство работы с ним, мы будем пользоваться следующими шаблонами проектирования:

▍Система сборки проекта

В нашем проекте понадобится качественная, настроенная в соответствии с нашими нуждами, система сборки. Здесь мы будем использовать Webpack, предъявляя к системе сборки проекта следующие требования:

▍Современные возможности JavaScript

Мы будем пользоваться минимальным набором современных возможностей JavaScript, позволяющим нам разработать то, что нам нужно. Вот о каких возможностях идёт речь:

Архитектура приложения

Появление прогрессивных веб-приложений (Progressive Web Application, PWA) способствовало и приходу в веб-разработку новых архитектурных решений. Это позволило веб-приложениям быстрее загружаться и выводиться на экран. Комбинация архитектуры App Shell и паттерна PRPL может привести к тому, что веб-приложение будет быстрым и отзывчивым, похожим на обычное приложение.

▍Что такое App Shell и PRPL?

App Shell — это архитектурный паттерн, применяемый для разработки PWA, при использовании которого в браузер пользователя, при загрузке сайта, отправляют минимальный объём критически важных для работы сайта ресурсов. В состав этих материалов обычно входят все ресурсы, необходимые для первого вывода приложения на экран. Подобные ресурсы можно и кэшировать с использованием сервис-воркера.

Аббревиатура PRPL расшифровывается следующим образом:

▍Реализация App Shell и PRPL в коде

Паттерны App Shepp и PRPL используются совместно. Это позволяет реализовывать передовые подходы к разработке веб-проектов. Вот как выглядит паттерн App Shell в коде:

Изучив этот код, можно понять, что шаблон App Shell предусматривает создание «оболочки» приложения, которая представляет собой его «скелет», содержащий минимум разметки. Разберём этот код (здесь и далее фрагменты кода, на которые мы будем ссылаться при разборе, отмечены комментариями, наподобие ).

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

Ниже показан код сервис-воркера, кэширующего «скелет» и все статические ресурсы приложения.

Система сборки проекта

Одной только хорошей архитектуры, без достойной системы сборки проекта, недостаточно для создания качественного приложения. Тут нам и пригодится Webpack. Существуют и другие средства для сборки проектов (бандлеры), например — Parcel и Rollup. Но то, что мы будем реализовывать на базе Webpack, можно сделать и с использованием других средств.

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

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

▍Поддержка ES6 и возможностей динамического импорта ресурсов

Для реализации этих возможностей нам пригодится Babel — популярный транспилятор, который позволяет преобразовывать код, написанный с использованием возможностей ES6, в код, который может выполняться в ES5-средах. Для того чтобы наладить работу Babel с Webpack, мы можем воспользоваться следующими пакетами:

В ходе настройки Babel строка presets этого файла используется для настройки Babel на транспиляцию ES6 в ES5, а строка plugins — для того, чтобы в Webpack можно было бы пользоваться динамическим импортом.

Вот как Babel используется с Webpack (тут приведён фрагмент файла настроек Webpack — webpack.config.js ):

В разделе rules этого файла описывается использование загрузчика babel-loader для настройки процесса транспиляции. Остальные части этого файла, ради краткости, опущены.

▍Поддержка SASS и CSS

Для обеспечения поддержки нашей системой сборки проектов SASS и CSS нам понадобятся следующие плагины:

▍Раздельная настройка режимов разработки и реальной работы приложения

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

В разделах plugins и devServer вышеприведённого файла показана настройка плагинов и сервера разработки.

▍Настройка сервис-воркера

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

Если вы хотите воспользоваться специальной библиотекой, предназначенной для решения задачи работы прогрессивных веб-приложений в оффлайн-режиме — взгляните на Workbox. Она отличается очень интересными возможностями, поддающимися настройке.

▍Обзор пакетов, используемых в проекте

Вот файл package.json нашего проекта, в котором можно найти сведения о пакетах, используемых в этом проекте:

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

Современные возможности JavaScript

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

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

▍Модули

Мы будем пользоваться возможностями ES6 по импорту и экспорту модулей, рассматривая каждый файл в виде ES6-модуля. Эта возможность часто встречается в популярных фреймворках, вроде Angular и React, пользоваться ей очень удобно. Благодаря имеющейся у нас конфигурации Webpack мы можем пользоваться выражениями импорта и экспорта ресурсов. Вот как это выглядит в файле app.js :

▍Разные способы создания объектов

Создание компонентов — это важная часть процесса разработки нашего приложения. Тут вполне можно воспользоваться каким-нибудь современным средством, наподобие веб-компонентов, но мы, для того, чтобы не усложнять проект, будем пользоваться обычными объектами JavaScript, создавать которые можно либо с использованием объектных литералов, либо используя синтаксис классов, появившийся в стандарте ES6.

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

▍Динамический импорт ресурсов

Помните о том, что мы, говоря о паттерне PRPL, ещё не разобрались с той его частью, которая представлена буквой L (Lazy loading)? Динамический импорт ресурсов — это то, что поможет нам организовать ленивую загрузку компонентов или модулей. Так как мы совместно используем архитектуру App Shell и паттерн PRPL для кэширования «скелета» приложения и его ресурсов, в ходе динамического импорта производится загрузка ресурсов из кэша, а не из сети.

▍Стрелочные функции и шаблонные литералы

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

Стрелочная функция appTemplate принимает модель (параметр model ) и возвращает HTML-строку, содержащую данные, взятые из модели. Формирование строки выполняется с использованием технологии шаблонных литералов. Ими удобно пользоваться для представления многострочных конструкций, в которые нужно добавлять какие-либо данные.

Вот небольшой совет, касающийся шаблонизации компонентов и создания компонентов, которые подходят для повторного использования. Он заключается в использовании метода массива reduce() для сборки HTML-строк:

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

Демонстрационное приложение

Рассмотрим демонстрационное Todo-приложение, которое создано с использованием рассмотренных технологий. Вот как выглядит работа с ним.

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

Пример продакшн-приложения

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

Вот как выглядит работа с сайтом, о котором идёт речь.

Вот ссылка на сайт. А вот результаты анализа производительности этого сайта с помощью Lighthouse.

Анализ производительности сайта

Итоги

Некоторые проекты, ради быстрого достижения желаемого результата, имеет смысл создавать на чистом JavaScript, без использования фреймворков. Такой подход открывает перед программистом свободу самовыражения, позволяя ему создавать именно то, что ему нужно, не ограничивая себя возможностями и особенностями фреймворков.

Уважаемые читатели! Планируете ли вы использовать подход к разработке веб-приложений, предложенный в этом материале?

Источник

IT-блоги • Идеи проектов на JavaScript для начинающих

Сокращенный перевод статьи «9 Javascript project ideas for beginners, that help you to build an amazing coding portfolio».

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

Обычно новой стадией является изучение JavaScript. Но кроме чисто теоретических знаний, вам нужна и практика. Здесь вам и пригодится наш список. Итак, давайте рассмотрим идеи проектов, которые вы можете реализовать, будучи новичком в JavaScript.

1. Часы

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

Возможно, вы не представляете, как это может выглядеть, так что вот вам пример:

2. Простой слайдер с изображениями

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

Готовый слайдер вы сможете поместить в свой репозиторий и использовать в дальнейшем в других проектах.

3. Форма с валидацией

Еще один полезный проект, который позволит вам попрактиковаться в использовании языка.

Реализуйте форму и проверку значений, которые вводятся в ее поля, например, email-адреса или телефонного номера. Для валидации используйте регулярные выражения.

Также вы можете реализовать вывод предупреждений о том, что информация введена неверно.

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

4. Индикатор загрузки

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

Вы можете попробовать добавить какие-нибудь интересные эффекты, которые будут проявляться при 100% загрузки.

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

5. Простой калькулятор для подсчета налогов

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

Вот пример такого калькулятора:

6. Шутка дня

Создайте приложение, которое ежедневно выводило бы случайным образом одну шутку из набора (в наборе, допустим, будет 50 шуток).

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

7. Викторина

Создайте программу, которая выводила бы набор вопросов с вариантами ответа. Вопросы должны выбираться рандомным образом из большего набора данных. Учитывайте ответы пользователя и подсчитывайте его общий результат (например, давайте 1 очко, если ответ правильный, и 0 — если пользователь ошибся).

Вам нужно продумать сброс состояния викторины в конце и отображение результата для каждого отдельного пользователя.

8. Система голосования

Систему голосования можно создать двумя способами.

Можно вывести на экран вопрос, который ставится на голосование, и два варианта ответа: ДА и НЕТ. Пользователи смогут голосовать, выбирая какую-то одну из опций, после чего вы выведете результат.

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

9. «Виселица»

Еще один вариант приложения, подходящий для начинающих, хотя и немного более сложный.

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

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

Заключение

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

Источник