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



→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript
→ Часть 7: встроенные стили
→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов
→ Часть 9: свойства компонентов
→ Часть 10: практикум по работе со свойствами компонентов и стилизации
→ Часть 11: динамическое формирование разметки и метод массивов map
→ Часть 12: практикум, третий этап работы над TODO-приложением
→ Часть 13: компоненты, основанные на классах
→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов
→ Часть 15: практикумы по работе с состоянием компонентов
→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий
→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов
→ Часть 18: шестой этап работы над TODO-приложением
→ Часть 19: методы жизненного цикла компонентов
→ Часть 20: первое занятие по условному рендерингу
→ Часть 21: второе занятие и практикум по условному рендерингу
→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников
→ Часть 23: первое занятие по работе с формами
→ Часть 24: второе занятие по работе с формами
→ Часть 25: практикум по работе с формами
→ Часть 26: архитектура приложений, паттерн Container/Component
→ Часть 27: курсовой проект

В продолжение статей о том, что ФАС собирает дополнительную информацию о «коротких» номерах, хочу рассказать, как эта служба может помочь вам избавиться от нежелательной рекламы по СМС.

Согласно ч.1 ст.18 ФЗ «О рекламе», распространение рекламы по сетям электросвязи, в том числе посредством использования телефонной, факсимильной, подвижной радиотелефонной связи, допускается только при условии предварительного согласия абонента или адресата на получение рекламы.

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

Одним из плюсов телефонов на базе Android является возможность полной кастомизации интерфейса под себя. Благо всевозможных виджетов под систему существует огромное количество. Причем, их настолько много, что пользователи гуглофонов иногда напоминают скульпторов или художников – попробуй совмести все нужное так, чтобы получилось красиво, да еще и учти все нюансы настроек. Одним словом, настройка требует времени, вкуса и недюжинного воображения.

Специально для тех, кто делает первые шаги в настройке своего телефона/планшета, существует отличный сайт Mycolorscreen.com (странно, что о нем не упоминали на хабре), позволяющий посмотреть на примеры кастомизации других пользователей. Причем сайт изобилует не просто примерами, но и детальными рецептами того, как приготовить такой стол самому.



Под катом еще несколько примеров.

Недавно хабраюзер Mirantus написал статью «Как сверстать веб-страницу», в которой рассказывал о том, как же сверстать веб-страничку. В его статье было подробно рассмотрено, как выделить отдельные элементы из заданного шаблона, подобрать шрифты и т.п. Однако его подход к написанию, собственно, веб-страницы мне показался не очень хорошим, о чем я написал в комментариях.

В данной статье я хочу рассказать, о том, как можно сверстать «хорошо» (по крайней мере структурировано ;), а заодно рассказать и о методологии, которая может «упростить жизнь» при верстке. Структура поста будет следующей:

• BEM
• Собственно пример — как сверстать страницу

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

Инструменты

Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.

Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты

Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

Про БЭМ (методология написания CSS от Яндекс — Блок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да — [на самом деле нет]).

Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?

За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.

В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

Столкнулся недавно с задачей показа кнопок [ВПЕРЕД] [НАЗАД] на странице просмотра. Но сложность задачи в том, что сортировка может быть по произвольному полю таблицы.

Постановка задачи:

CREATE TABLE `contacts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name_prefix` varchar(50) DEFAULT NULL,
`name` varchar(100) DEFAULT NULL,
`infix` varchar(100) DEFAULT NULL,
`surname` varchar(100) NOT NULL,
`primary_email` varchar(100) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

Для наглядности объясню где это все работает:
есть две страницы, работающие с этой таблицей:
— index, на ней отображаются все записи из таблицы contacts, есть фильтр и есть сортировка по столбцам
— view, просмотр текущей записи из таблицы contacts. На это странице есть кнопки [ВПЕРЕД] [НАЗАД], с учетом фильтра и сортировки заданной на странице index;
Трудность возникла в этих двух кнопках.

Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Продолжаю сентябрьскую подборку новых полезных штук для веб-дизайнеров.

Сервисы и инструменты

Cut&Slice me — бесплатный плагин для фотошопа, который помогает быстро готовить элементы дизайна для различных типов устройств.

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Прочитав пост http://toster.ru/2410/, я написал функцию, которая определяет из строки слов их части речи. Определение, конечно не 100%, но можно легко дорабатывать.

Функция возвращает массив значений групп:

• 1. прилагательное
• 2. причастие
• 3. глагол
• 4. существительное
• 5. наречие
• 6. числительное
• 7. союз
• 8. предлог

Пример вызова функции:

print_r(chastrechiRUS('В небе летит красивый сверкающий самолёт'));

Результат работы функции (массив):

Array ( [0] => 8 [1] => 4 [2] => 3 [3] => 1 [4] => 2 [5] => 4 )

Привет, наверное многие читали мой пост Десяток ресурсов, которые помогают быть дизайнером. Как я понял эта тема интересная (147 плюсов как никак). А раз так, я решил не останавливаться на достигнутом и вот наконец-то закончил работу над своеобразным продолжением первой части. Надеюсь получилось не хуже. Итак, кому интересно, что получилось, прошу под кат.

Сегодня решил поделиться с вами своими материалами по автоматизации работы в photoshop. А именно это тот стартовый шаблон с которого я начинаю делать любой дизайн сайта.
Подправил, добавил, оформил в виде приятного продукта под названием — StartPSD.
Можно скачивать, редактировать, пользоваться на здоровье!

Встречайте.

Это ответ на пост StartPSD — в помощь дизайнерам сайтов, автоматизируем работу. В комментариях очень многие интересовались, почему же использовался Safari и Mac, поэтому я решил сделать аналогичную штуку только в стиле Аэро. Возможно кому-то пригодится.

Сетка взята из шаблона Firefox для «мака» от cherenkevich (там еще неплохая серия статей про модульную сетку) — cherenkevich.livejournal.com/40021.html

В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.

Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.

Заранее оговорюсь, что чистым CSS здесь, к сожалению, обойтись не получится: Firefox и IE8+ слишком точно (да-да, в данном случае это плохо) производят вычисления ширины блоков. Однако для этих браузеров дописывается нехитрый скриптик в пару строк, если таки надо достичь идеала, хоть это и портит всю прелесть.

Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11

В чем суть?

Суть в том, что иногда необходимо отобразить на странице резиновый блок с несколькими дочерними элементами, причем потомок должен быть либо виден целиком, либо не виден вообще. Самый простой пример — лента каких-нибудь картинок с прокруткой и стрелочками по бокам. Очень некрасиво смотрится выглядывающее из-под «overflow: hidden» изображение, обрезаннное сбоку. Выход — заставить ширину обёртки всегда быть кратной скольки-то пикселям.
Разумеется, если ширина потомков разнится от элемента к элементу, то этот способ не имеет смысла.

Как это работает?

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

Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.

Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

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

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).