Рубрика «css» - 108

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

Basket.js

Несколько интересностей и полезностей для веб разработчика #23
Basket немного похож на RequireJS, только с его помощью все подключаемые скрипты и стили кешируются в localStorage. Тесты Google и Bing демонстрируют улучшение производительности при использовании локального хранилища по сравнению с обычным браузерным кешем. Проект изначально появился как эксперимент, который полностью оправдал результаты этих тестов.

basket
    .require({ url: 'missing.js' })
    .then(function () {
        // Success
    }, function (error) {
        // There was an error fetching the script
        console.log(error);
    });

Читать полностью »

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

Дано:

  1. Большой сайт с количеством шаблонов 50+.
  2. Большой файл стилей.
  3. Сайт постоянно развивается, правятся баги, пишется новый функционал.
  4. Версия develop и production в одной ветке, репозитарий SVN.
  5. 1-2 человека на поддержание всего этого хозяйства.
  6. Огромное желание не сойти с ума и не наложить на себя руки!

Если вам интересен конец этой эпопеи милости прошу под катЧитать полностью »

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

Awesome Awesomeness

В прошедшие несколько недель мне регулярно попадались Awesome-* проекты, о которых я упоминал в последних подборках. Началось все с Awesome-PHP, потом появились «живые списки» полезностей для сисадминов и питонистов. Все заметили положительную тенденцию и как по желанаю это переросло в целый тренд. Сейчас есть коллекции инструментов для языков Ruby, Go, NodeJS, JavaScript, Java, Scala, Bash и др. Уже даже существуют подобные наборы для целых направлениям в ИТ, к примеру Big Data. Awesome Awesomeness — это живой список живых списков всего самого необходимого для разработчика из той или иной сферы.

Breach — полноценный браузер на JavaScript

Несколько интересностей и полезностей для веб разработчика #22

Читать полностью »

Материалы MoscowJS 12Двенадцатый митап MoscowJS прошёл 26 июня в офисе компании mailru. На встрече выступили ребята из Яндекса, Mail.ru и Tai.st. Говорили об облаках, оптимизациях мобильного веба и, конечно, расчёсках! Мы собрали видео и другие материалы события в одном посте.

Вот как это было…
Читать полностью »

Всем привет!

Я работаю над фронтендом огромного проекта – поисковой выдачи Яндекса. И у нас, как и у любого другого большого веб-проекта, есть огромное количество css-кода и немаленькая команда, которая с ним взаимодействует.

Когда много людей используя разные инструменты, пишет и редактирует css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то – в другом, кто-то ставит кавычки вокруг url, кто-то – нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.

Приводим в порядок css код. Опыт Яндекса

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

Как мы этого добились, можно прочитать под катом.
Читать полностью »

Генерация CSS спрайтов с Gulp
Работая над одним большим проектом, мы с напарником задумались над тем, чтобы автоматизировать процесс сбора спрайтов на проекте.
До этого спрайты собирались ручками или с помощью онлайн сервисов, что отнимало достаточно времени.
Проект уже собирался Gulp'ом и было принято решение найти адаптированный под него сборщик спрайтов.
Читать полностью »

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

Awesome Python

Автор этого огромного списка полезностей для питонистов также как и автор похожего репозитория для сисадминов из прошлой моей подборки был вдохновлен проектом Awesome PHP. Это просто отличная тенденция, которая не может не радовать.

Chart.js

Несколько интересностей и полезностей для веб разработчика #21
Потрясающие интерактивные графики и диаграммы на HTML5 Canvas. Chart.js не зависит от сторонник библиотек, работает во всех современных браузерах и даже в IE7/8 с полифилом, адаптивный к мобильный устройствам, очень гибкий и модульный. Выглядит все на самом деле очень красиво, но признаюсь я не настолько детально изучил проект, чтобы сказать чем он лучше DC.js из моего 19 выпуска. Дело в том, что Chart за несколько дней собрал почти 10 000 звезд на GitHub. Ну и для того, чтобы добить тему визуализации данных, оставлю ссылку на недавно найденный мноюAmcharts. Проект не open-source, но вы можете пользоваться им бесплатно, если будете размещать логотип. Хочу обратить ваше внимание на то, что с этой библиотекой работают Microsoft, Amazon, IBM, Bank of America, NASA, P&G, PayPal и многие другие мировые корпорации.
Читать полностью »

На конференции //build/ у меня был доклад о Visual Studio Web Tools и расширении Web Essentials. Вы можете найти этот доклад онлайн на сайте Channel9. Во время доклада я использовал несколько расширений, которые будут полезными для любого веб-разработчика Visual Studio 2013. Ниже вы найдете список этих расширений.

Web Essentials

logoСайт: http://vswebessentials.com
Загрузить: Web Essentials в галерее VS

Это расширение команды ASP.NET и Web Tools, которое является неофициальной площадкой для тестирования и обкатки функций. Само расширение развивается opensource-сообществом. Web Essentials предлагает огромное число новых возможностей для веб-разработчиков, такие как компиляторы LESS/Sass/CoffeeScript, дополнительные возможности работы с кодом JavaScript/CSS/HTML/JSON, валидаторы, генераторы спрайтов изображений и многое другое.

SideWaffle

imageСайт: http://sidewaffle.com
Загрузить: SideWaffle в галерее VS

Очень вкусное дополнение для Visual Studio. Это отличный набор шаблонов, который содержит как шаблоны проектов, шаблоны элементов, так и сниппеты для широкого круга сценариев: от создания приложений Angular.js, проектов Nancy FX, Browser Link, расширений Chrome и многого другого.
Читать полностью »

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Читать полностью »

Вступление

Давным давно, когда я администрировал сервер WoW (эмулятор), была у меня идея — доставлять информацию о сервере на мобильные устройства игрокам. А еще было бы круто им слать push уведомления. Все закончилось тогда на развернутом окружении для разработки под android. А еще и про iOS разработку почитал, что там не все так просто.
Года идут, сервер WoW давно закрыт, случилась другая ситуация — организация конференции. И раз конфа — надо расписание на мобильные устройства. Из плюсов — что сейчас уже появилось множество средств для того, чтобы это приложение сделать со знанием только js/html/css. Но опять — публикация в сторах, заморочки, модерация и т.п. Да и факт — push уведомления то слать хочется!
И я все искал сервис — где бы просто «запушать» свой контент (html/js/css), который бы просто кэшировался & рендерился на разных устройствах у пользователей. Да, push уведомления все также бы хотелось слать. Так ничего и не найдя — родился сервис http://getandcheck.com, в т.ч. благодаря моим друзьям со студенческой скамьи, которые написали клиенты-приложения для iOS (Андрей Ковалев), Android (Иван Лебедев) и WinPhone coming soon (Андрей Поляков)
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js