На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!
Рубрика «html» - 103
AniJS – библиотека для декларативного описания CSS-анимации
2014-05-09 в 18:44, admin, рубрики: html
Последний день регистрации на Всеукраинский чемпионат UA Web Challenge VI для фронтенд разработчиков
2014-05-04 в 13:11, admin, рубрики: html, javascript, web-разработка, Веб-разработка, разработка, фронтенд, метки: javascript, web-разработка, разработка, фронтенд 
В этом году оргкомитет чемпионата принял решение разбить соревнования на малые чемпионаты по номинациям (мы их назвали полуфиналами). Чтобы больше участников могло поучаствовать и пройти в очный круг соревнований и ощутить атмосферу изнутри, а не только заочно.
Сегодня последний день регистрации для фронтенд разработчиков, уже завтра начинается отборочный тур и участники приступят к решению заданий.
Читать полностью »
Адаптивный CSS своими руками
2014-04-30 в 5:13, admin, рубрики: css, html, адаптивная вёрстка, Веб-разработка 
При разработке одного проекта, передо мной встала задача реализовать адаптивную верстку. HTML-страница должна была по-разному смотреться на экранах различных размеров. При этом, она должна была быть легковесной, поэтому использовать тяжеловесные css-фреймворки не хотелось. Таким образом, родился собственный велосипед, которым хочу поделиться с читателим. Читать полностью »
Наследование HTML файлов в xslt-стиле
2014-04-29 в 4:53, admin, рубрики: grunt, html, node.js, nodejs, npm, наследование, шаблонизация, метки: grunt, html, nodejs, npm, наследование, шаблонизацияПроблема
Однажды, в ходе переписывания большого проекта, возникла необходимость улучшить механизм кастомизации html шаблонов под разные версии нашего web-приложения. В старой версии кастомизация выглядела подобным образом:
{{if app.version==versions.main}}
<!--один html код-->
{{else if app.version==versions.custom1}}
<!--другой html код-->
{{else if app.version==versions.custom2}}
<!--и ещё html код-->
{{endif}}
И подобной лапшой был пронизан весь проект. Такой код сложно поддерживать и изменять, при активном использовании шаблоны превращаются в непонятную кашу, где бизнес логика отображения отдельных блоков переплетается с кастомизацией под разные версии.
Привыкнув к удобным методам управления версиями приложения с помощью инъекции зависимостей, когда в зависимости от версии используются разные реализации интерфейсов, я решил изобрести свой велосипед для XSLT-подобного управления версиями html файлов: grunt-html-inheritance. Он позволяет подменять кусочки базового html-файла с помощью маленьких патчей.
Читать полностью »
15 шаблонизаторов для фронтенд-разработки
2014-04-18 в 7:00, admin, рубрики: html, javascript, Веб-разработка 
Число JS-библиотек ни в коей мере не уменьшается; наоборот, оно растёт с каждым днём. Когда мы доходим до приложений JS, лучшим выбором оказываются шаблоны, чем полноценные библиотеки, потому что это приводит к более чистому базовому коду и лучшему процессу работы с ними.
Не так давно я писал, что вы могли бы попробовать написать свою библиотеку, когда придёт время. Шаблонизаторы же требуют несколько больших навыков и понимания языка, с которым вы работаете, поэтому лучше полагаться на любой шаблонизатор из имеющихся в списке ниже.
Читать полностью »
Джентельменский набор плагинов, панелей и скриптов для Adobe Photoshop, Adobe Illustrator
2014-04-16 в 10:24, admin, рубрики: css, html, illustrator, panel, веб-дизайн, плагины, метки: illustrator, panel, веб-дизайн
Layer Exporter Adobe Illustrator
Панель для Adobe Illustrator, которая дает возможность автоматически экспортировать каждый слой в SVG, PNG или JPG файлы и генерирует HTML и CSS код.
Photoshop Font Detector Adobe Photoshop
Плагин для Photoshop, который поможет распознать шрифты из любого изображение через службу WhatTheFont сайта www.myfonts.com/. Все, что вам нужно сделать, это создать область выделения на изображении, и данная панель сделает все остальное. Вы будете перенаправлены на сайт www.myfonts.com/, чтобы просмотреть результаты поиска.
Читать полностью »
WebWorker+XMLHttpRequest
HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.
Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.Читать полностью »
Совсем недавно столкнулся с не совсем обычным таском в таскменеджере. ПроджектМенеджер просто напрямую скопировал текст заказчика — «Хочу, чтобы попап был как в вконтакте». Что значит «как в вконтакте» я понял не сразу. «Потестив» попап в соц.сети я понял, чего же от меня хотят — при открытом попапе основной контент не должен скроллиться, но в то же время, если размеры попапа больше, чем окно пользователя — должен скроллиться попап (основной контент естественно так же не скроллиться и в этом случае).
Сложного в этом таске я ничего не увидел и приступил к его выполнени. Логика была следующая — при откртии попапа даем body overflow = hidden, а при закрытии естественно его возвращаем в auto. Сам попап кладем в div-обвертку и даем ему overflow = auto, чтобы в случаях, когда размер окна меньше, чем размер попапа — пользователь мог его скроллить.
Под OS X все работало идеально. Но я не учел одного нюанса — в остальных системах в браузере есть постоянно видимый скролл, который имеет свою ширину. И если просто делать блоку, у которого есть скролл, overflow hidden — скролл пропадает, ширина блока становится больше на ширину скролла и контент «прыгает». Тогда я решил написать плагин, который решает и эту проблему. Еще раз посмотрев, как работает сей чудный попап в вконтакте, я понял логику и приступил к выполнению.
Читать полностью »
Управление JavaScript UI-потоком с помощью планировщика WinJS
2014-03-21 в 12:43, admin, рубрики: html, javascript, promise, Shedule, Windows 8, Windows 8.1, winjs, WinRT, Блог компании Microsoft, планировщикОт переводчика: в статье рассказывается о новом планировщике задач в библиотеке WinJS 2.0, обновившейся вместе с выходом Windows 8.1. Для понимания части материала крайне желательно понимание работы с отложенными результатами (Promise). См. раздел MSDN, посвященный асинхронному программированию на JavaScript.
Не считая рабочих веб-процессов (web workers) и фоновых задач, которые также выполняются как отдельные веб-процессы, весь JavaScript-код в приложениях для Windows Store выполняется в общем так называемом UI-потоке. Этот код может делать асинхронные вызовы WinRT API, которые выполняют свои операции в отдельных потоках, но есть один важный момент, о котором нужно помнить: результаты из этих не-UI-потоков возвращаются назад для обработки в UI-поток. Это означает, что запуск серии асинхронных вызовов WinRT (например, HTTP-запросов), — всех сразу, — может потенциально перегрузить UI-поток, если результаты от них придут примерно в одно и то же время. Более того, если вы (или WinJS) добавляете элементы в DOM или изменяете стили, которые требуют обновления компоновки страницы в UI-потоке, это создает еще больше задач, конкурирующих за ресурсы CPU. Как результат ваше приложение становится «тормозящим» и неотзывчивым.
В Windows 8 приложение может предпринять ряд шагов для снижения таких эффектов, например, запускать асинхронные операции в рамках временных блоков, чтобы управлять частотой возвратов в UI-поток, или объединять вместе задачи, требующие цикла обновления страницы, чтобы за один проход выполнялось больше операций. Начиная с Windows 8.1, появилась возможность асинхронно расставлять приоритеты разным задачам непосредственно в UI-потоке.
HTML по стандартам
2014-03-20 в 5:31, admin, рубрики: css, html, javascript, Блог компании i-Free, Веб-разработка, метки: css, html, javascriptПривет !
Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.
В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.