После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.
WeezyFBaby @Siteacademy
Пользователь
Разрабатываем игру на SVG + React. Часть 1
23 мин
34KТуториал
Перевод
TL;DR: в этих сериях вы узнаете, как заставить React и Redux управлять SVG элементами для создания игры. Полученные в этой серии знания позволят вам создавать анимацию не только для игр. Вы можете найти окончательный вариант исходного кода, разработанного в этой части, на GitHub.
+12
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №193 (3 — 10 января 2016)
7 мин
31KПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
+25
Создаём отзывчивые письма для будущего без медиа-запросов
26 мин
34KТуториал
Перевод
Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю. Поддержка media query как и сам CSS разнятся среди приложений, в следствии этого, каждый раз когда вы слышите что появилось новое восхитительное почтовое приложение, для которого тоже нужно провести тесты, вас неизбежно одолевает страх.
Но что если бы вы могли создать шаблон, который был бы отзывчивым даже в окружениях с наименьшей поддержкой современного CSS? Что если каждый раз, услышав о каком-то очередном почтовом приложении, которое все испытывают, вместо того чтобы предаваться страху, можно было бы чувствовать себя спокойно и уверенно, зная что ваши email наверняка будут выглядеть хорошо?
Приведенный ниже метод, сторонником которого я являюсь, всецело ориентирован на создание положительного опыта взаимодействия при работе с email-клиентами, у которых вообще отсутствует поддержка media query.
Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
Но что если бы вы могли создать шаблон, который был бы отзывчивым даже в окружениях с наименьшей поддержкой современного CSS? Что если каждый раз, услышав о каком-то очередном почтовом приложении, которое все испытывают, вместо того чтобы предаваться страху, можно было бы чувствовать себя спокойно и уверенно, зная что ваши email наверняка будут выглядеть хорошо?
Приведенный ниже метод, сторонником которого я являюсь, всецело ориентирован на создание положительного опыта взаимодействия при работе с email-клиентами, у которых вообще отсутствует поддержка media query.
Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
+15
Директива AngularJS для запоминания e-mail
3 мин
8KТуториал
Всем привет. Совсем недавно, в одном проекте понадобилось сделать «запоминание e-mail».
Требования простые: после того, как пользователь ввел e-mail, его нужно запомнить в cookie и автоматически заполнять при следующих обращениях к сайту.
AngularJS, не подвел! Решение получилось компактным и надеюсь, наглядным.
Для работы с cookie использовался
Вот собственно демонстрация http://jsfiddle.net/dzb5rcsw/
Требования простые: после того, как пользователь ввел e-mail, его нужно запомнить в cookie и автоматически заполнять при следующих обращениях к сайту.
AngularJS, не подвел! Решение получилось компактным и надеюсь, наглядным.
- В Javascript определяем директиву
- В html используем директиву чтобы указать что нужно «запомнить»
Для работы с cookie использовался
jquery
и плагин jquery-cookie
.Вот собственно демонстрация http://jsfiddle.net/dzb5rcsw/
+4
Как создать видео-проигрыватель на JQuery, HTML5 и CSS3
6 мин
33KПеревод
В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.
Демонстрационный вариант
Исходные файлы
+52
Разрабатываем нижнее меню на HTML5
6 мин
3.3KПеревод
Поговорим про нижнюю навигацию сайтов. Я уверен, что вы видели её много раз (на различных сайтах). Как правило, это три-четыре колонны меню с различными ссылками. Сегодня я хотел бы показать вам, разработку, которую можно использовать для создания, нижнего меню. Главная цель этой разработки – приготовить статический код HTML (как кэш-файл) для встраивания в нижнюю часть сайта. Если вы заинтересованы в такой теме, то я расскажу вам о создании хорошего, удобного меню. Это руководство разделено на 2 части, сегодня я расскажу вам о первой части: пользовательский интерфейс с возможностью перетаскивания блоков.
Для начала, советую вам загрузить исходные файлы и запустить демо в новой вкладке для лучшего понимания.
ДЕМО
Исходные файлы
-3
Информация
- В рейтинге
- Не участвует
- Откуда
- Пермь, Пермский край, Россия
- Зарегистрирован
- Активность