Архив рубрики: WEB

Загрузка js и css «по требованию»

Задача: по какому то условию (ну в моем случае это загрузка скрипта «Тура по сайту» если вдруг пользователь его не проходил), необходимо до грузить дополнительные JS и CSS файлы, а по завершению их загрузки — запустить.

Решение:

Скачивание файла посредством JQuery

В принципе алгоритм следующий и простой: при нажатии некой кнопки например, мы создаем ссылку с атрибутом download и программно её нажимаем. Код, что-то вроде:

Сборка JS и CSS для продакшена при помощи npm grunt

В жизни каждого программиста мужика начинается период, когда размер и количество js файлов в проекте начинает невероятно множиться. И если для разработки это не особо мешает, а даже наоборот помогает структурировать информацию, для для продакшена это зло. Когда браузер пытается выкачать при загрузке страницы 50+ файлов css и js, случается так, что ему становится плоховато. Да и скорость рендеринга падает значительно. Есть решение: grunt. Пакет для npm который позволяет отслеживать изменения файлов в некоторых папках, а при изменении формировать один (несколько) выходных сжатых файлов.

Установка:

Для настройки необходимо создать файл Gruntfile.js. У меня вышло примерно такое содержимое:

Теперь если в консоли введёте:

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

JavaScript именованные массивы как набор записей

Обычно для этой цели используют конструкцию Map, однако лично мне  не нравится его синтаксис, когда для доступа необходимо использовать get /set. Поэтому я обычно использую создание объекта. Т.е. получается что-то вроде:

 

CSS: Выравнивание содержимого блоков по вертикали

Чтобы получилось нечто подобное:


HTML:

CSS: