HTML *

Друзья, вчера исполнилось 6 лет с того момента, как мы стали на путь обучения разработке.

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



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

В ноябре 2015 года вышел свежий обзор Venturebeat.com и W3Techs. Выяснилось, что каждый четвёртый сайт в Интернете базируется на открытой системе управления контентом (CMS) WordPress. В исследование включались только сайты из Alexa TOP 1.000.000, что говорит о том, что это были не какие-то ресурсы, сделанные второпях или в учебных целях, а действительно крупные проекты. Занявшая второе место CMS Joomla набрала только 2,8%.



Свой 8-ми летний рубеж в 2011 году WordPress встретила с результатом всего 13,1%. Затем плавно, без скачков или других резких потрясений четыре года непрерывного роста, и в итоге 14-й год существования этой CMS принес ей абсолютное лидерство: 25% всех сайтов в мире отдали ей предпочтение. Надо отметить, что и сервис WHOIS присудил ей в своем рейтинге 1-е место: 36% проверок на тип CMS его пользователями он выдал ответ: WordPress.

Примечание: автор вообще сидит на Опере, но это совсем другой вид порока, и речь сейчас не о нём.

Многие из нас знают о тяжелой болезни веб-сообщества — пережившем своё браузере Internet Explorer 8, который всё никак не уйдёт на покой.

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

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

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

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

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

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

Из-за большого размера статья разбита на три части. Первая часть. Третья часть.

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

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

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

Из-за большого размера статья разбита на три части. Вторая часть. Третья часть.

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

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Для создания эффектов понадобится такая дефолтная html-структура. Вместо .eff в коде каждого конкретного эффекта будет использоваться класс .eff-n, где n — номер эффекта:

  <div class="eff">
    <img src="img/ef1.jpg" alt="Effect #1" />
     <div class="caption">
        <h4>Title is Here</h4>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
         </p>
          <a class="btn" href="#" title="View More">View More</a>
        </div>
    </div>

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

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

Пролог

В данном цикле статей я намерен провести объективное сравнение css-фреймворков на основе живых примеров, как в TodoMVC для js решений.

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

У меня, как у художницы и web-разработчика, со временем появилась необходимость в собственной галерее. Обычно, у галерей две основные функции: показ витрины — всех (или некоторых) картин — и детальный показ одной. Реализация обеих функций есть практически в любой готовой галерее. Но «заношенный» внешний вид готовых галерей и, ставший стандартом, пользовательский интерфейс не годятся для художника :). А нестандартный — требует особой архитектуры и реализации кода, осуществляющего загрузку и показ картин. Сам показ и пользовательский интерфейс я в этой статье опущу. Основное внимание будет отдано загрузке картин с сервера. Об итоговой организации контролируемой загрузки с использованием очередей, асинхронного загрузчика, обработки блоб-объектов, каскадов выполнения обещаний и с возможностью приостановки и пойдет речь.



Примеры кода записаны на coffeeScript

В этой публикации я хотел бы выяснить, кто из нас прав, работодатель или я — соискатель на вакансию «Разработчик интерфейсов». Я отправил свое резюме работодателю и решил задачи, которые он предложил, среди них была такая:

Нужно нарисовать таблицу с большим количеством столбцов. Чтобы таблица уместилась в экран, заголовки столбцов решили выводить вертикально.
Придумайте и реализуйте кроссбраузерное решение для вывода вертикальных заголовков. Браузеры: IE6+, FF3.0+, Opera 9.5+, Chrome 4.0+.

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

1. На Люблинско-Дмитровской (салатовой) линии вообще ужас: как видите, здесь разработчик этого интерфейса (а был ли он?) мало думал над тем, как будут пассажиры читать этот текст: бледные буквы, да еще и с трекингом:

Существует несколько видов DOM-узлов, в частности Document, Element, Text и многие другие, которые формируют общий узел Node. Одним из наиболее интересных узлов является DocumentFragment, несмотря на то, что до настоящего момента он практически не использовался. Он, по большей части, является специальным контейнером для других узлов.

DocumentFragment обрабатывается в большинстве алгоритмов DOM особым образом. В этой статье мы рассмотрим некоторые методы API, разработанные для использования вместе с DocumentFragment. Также мы узнаем, что понятие контейнера узлов играет важную роль в прочих современных веб-технологиях, таких как элемент template или в API всего теневого DOM. Но прежде чем мы начнем, давайте вкратце рассмотрим парсинг фрагментов, который не связан напрямую с DocumentFragment.

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

Минут за 20 я сделал простой дизайн на HTML, а затем потратил несколько часов на его редактирование, переделку и улучшения. Итого, я уменьшил 25-страничный сайт до 8-страничного, который стал более дружественным.

Дальше мне сразу захотелось применить какой-нибудь новомодный инструмент. Генератор статических сайтов, CMS, Sass, решётки, ещё какие-то модные штучки…

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

Это инструменты, сделанные гиками для гиков. Зачем 8-страничному сайту CMS? Зачем вообще заморачиваться Sass? Старый добрый CSS прекрасно со всем справится.

Статья-руководство будет полезна для новичков и для тех, кто ещё не перешел на новые/альтернативные инструменты для вёрстки макетов сайтов. А также для тех, кто читает правила «каким должен быть псд-макет», которые о слоях, папках подсвеченных и правильно названных, но в реальной жизни с такими макетами не сталкивающихся.

Итак, начнем (под катом длинная статья и много картинок).

Привет, разработчик!
При верстке макета из PSD часто иконки вставлены в формате SVG. А если нет — прошу их у дизайнера. Ранее я использовал иконочные шрифты, но недавно увидел преимущества спрайтов и решил попробовать с ними поиграться внедрить их в процесс разработки. Мне нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как я организовал систему.

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



Она не обеспечивает столь же надежной защиты от ботов, как, например, Google reCAPTCHA (набор заданий ограничен и их довольно быстро можно прорешать, а затем отдавать готовые ответы), но зато помогает против не-программистов (для определенной категории форумов толпы студентов, просящих выполнить их лабораторную работу — настоящая проблема, хуже спам-ботов). Но заметка не об этом.

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

Знакомство с Electron

Официальная страница проекта Electron.

Изначально Electron был разработан для редактора Atom компанией GitHub.

Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.

Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.

Всем привет!



Многие из вас, наверняка, в курсе активностей сообщества "Веб-стандарты" и уже знают, что конференция Web Standards Day после двухлетнего перерыва снова возвращается в Москву и состоится уже менее чем через две недели — 13 декабря.

Мы же спешим рассказать о двух вещах:

1. Регистрация очень скоро закроется. На самом деле, если вы поторопитесь, то уже сегодня.
2. На сайте опубликована программа с девятью докладами и одним мастер-классом от экспертов и разработчиков из Avito, EPAM Systems, Opera, Acronis, Hackraft, Microsoft и Яндекса.

Урок по реализации круглой кнопки загрузки (далее progress button) by Colin Garven. Будем использовать, описанную by Jake Archibald, технику анимации SVG линий для того, чтобы анимировать progress button и показать пользователю состояния «success and fail».

Недавно я решил отправить свой проект, над которым работал в свободное время последние несколько лет, на конкурс в одну компанию. Я сел и стал думать, нет ли каких-то нюансов, которые я не учёл, и которые могут испортить впечатление и уменьшить шансы на успех. И первое, что мне пришло в голову — проект не работает под IE ниже 9 версии. То есть совсем, там стояла блокировка. После логина появлялось окошко с красивым предупреждением, что браузер не поддерживается, и пользователя опять перебрасывало на форму входа. Довольно изящно — но неприятно. Что, если у человека стоит Windows XP, а сторонних браузеров нет? Незадача.

И вот я решил потратить столько времени, сколько будет нужно, но при этом добиться стабильной безошибочной работы системы как минимум в IE 8. Я готов был убрать часть функций, если будет необходимо — но всё должно было выглядеть аккуратно и работать без сбоев. Предвкушая долгие и тяжёлые мучения (уже был несколько раз подобный опыт), я взялся за дело. Если вам интересно узнать, с какими сложностями я столкнулся, и какие изменения пришлось внести в разные компоненты — добро пожаловать под кат.