Как стать автором
Обновить
12
0
nevem @nevem

Пользователь

Отправить сообщение

Раздоры вокруг <div>

Время на прочтение11 мин
Количество просмотров21K
Тег <div> — это самый универсальный и широко используемый HTML-элемент. Сам по себе <div> не представляет ничего, но он, в то же время, позволяет разработчикам превратить его почти во всё что угодно. Делается это посредством использования CSS (для стилизации), JavaScript (для функционала) и ARIA (для обеспечения доступности контента).

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

Грубые нарушения при использовании <div> выявить сравнительно просто (подробнее об этом поговорим ниже). Но мы дошли до того, что кто-то может назвать «образцом недоступности контента» полностью правильное использование <div>, или, как минимум, пример лёгкого отклонения от правильности. В таких ситуациях говорят о том, что «кому-то стоило бы вместо <div> воспользоваться семантическим HTML-элементом».

Тег <div> приходит на вечеринку, где его встречает команда A11y

Ладно. Притормозим немного. Прежде чем дружно задирать нос перед применением тегов <div> — давайте вспомним о том, что контекст — это важно.

Конечно, всегда, когда это возможно, нужно использовать семантические элементы. Но предлагаю проявить осторожность, создавая такую атмосферу, когда может показаться, что любой вариант использования <div> — это плохо… или — что замена некоего <div> на «более семантический» элемент способна улучшить доступность некоего документа.

Прежде чем об этом поговорить — ненадолго вернёмся в прошлое и заглянем туда, откуда взялся тег <div>.
Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии12

Grid Layout как основа современной раскладки

Время на прочтение15 мин
Количество просмотров36K
В темные века верстальщики строили сайты на таблицах. Потом они освоили float и flexbox, и тьма отступила. В 2017-м наступила эпоха Просвещения с приходом CSS Grid Layout.

Grid учитывает горизонтальное и вертикальное пространство, с ним можно менять раскладку, не трогая разметку, и все это без медиазапросов. С Grid можно забыть про магические числа, хаки, обходные пути и CSS-фреймворки.



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

Об этом расшифровка доклада Сергея Попова на Frontend Conf: про спецификацию, про то, почему верстальщики боятся Grid и как решиться применять сетку в своих проектах, чтобы «Make your website great again!».
Всего голосов 36: ↑35 и ↓1+34
Комментарии33

Жизнь в Израиле — некоторые моменты, связанные с IT

Время на прочтение25 мин
Количество просмотров55K
Навеяно недавним постом «Как я переехал в Израиль после блокировки Telegram».

Из этой статьи Вы можете узнать о мобильной связи и интернете в Израиле, о местных гос.услугах, особенностях работы израильских банков и почты, о некоторых «чисто местных» проблемах, а также соображения о возможных причинах их появления.
Читать дальше →
Всего голосов 85: ↑83 и ↓2+81
Комментарии128

Как я переехал в Израиль после блокировки Telegram

Время на прочтение10 мин
Количество просмотров90K


Все помнят бурление, когда вышло постановление о блокировке Telegram? Как много было вопящих и брызгающих слюной комментов о том, что поросенок Петр всегда был прав и вообще пора собирать чемодан и искать работу за рубежом?


Так вот, кто-то поныл и успокоился, а я подумал: 'Действительно, почему бы и нет?'. Короче, Петя, заводи трактор, мы выезжаем!


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


Ах да, Хабр и в Израиле читают.

Читать дальше →
Всего голосов 201: ↑170 и ↓31+139
Комментарии524

300 потрясающих бесплатных сервисов

Время на прочтение11 мин
Количество просмотров1.6M


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Всего голосов 341: ↑325 и ↓16+309
Комментарии107

Мои правила дизайна хорошего интерфейса

Время на прочтение4 мин
Количество просмотров100K
image

В этой статье я привожу примеры основных принципов или концепций, которыми руководствуюсь при проектировании десктопных интерфейсов. Не планирую выступать новатором или поучителем, но с радостью поделюсь набором установок, который помогает мне в работе.
Читать дальше →
Всего голосов 59: ↑55 и ↓4+51
Комментарии27

Создание веб-сайта. Курс молодого бойца

Время на прочтение24 мин
Количество просмотров815K
Как-то меня попросили провести небольшой семинар в лицее, где я когда-то учился, по созданию веб-сайта. В процессе написания речи я подумал, что она может вылиться в материал, который, возможно, будет полезен многим начинающим в области веб-дизайна, вёрстки веб-страниц и пр. Я не претендую на истину в первой инстанции и всё изложенное носит чисто личностный взгляд на работу с дизайном и кодом. Статья даёт поверхностный взгляд на понятия и средства, которые, на мой взгляд, могут стать неплохим стартом для того, кто готов идти дальше.
Читать дальше →
Всего голосов 86: ↑77 и ↓9+68
Комментарии46

7 правил создания красивых интерфейсов. Часть 2

Время на прочтение9 мин
Количество просмотров104K


Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Сегодня мы публикуем вторую часть перевода. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Мы говорили о правилах создания чистых и красивых интерфейсов.

Вот эти правила:
  1. Свет падает сверху (Часть 1)
  2. Сначала черное и белое (Часть 1)
  3. Увеличьте белое пространство (Часть 1)
  4. Научитесь накладывать текст на изображения
  5. Научитесь выделять и утапливать текст
  6. Используйте только хорошие шрифты
  7. Крадите как художник

Читать дальше →
Всего голосов 46: ↑44 и ↓2+42
Комментарии15

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

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

Unheap




Огромная коллекция реально качественных и нужных jQuery плагинов, грамотно расфасованная по области применения. В Unheap 5 основных разделов UI, Inputs, Media, Nav, Other и каждый из них содержит еще с десяток подкатегорий. В общей сложности на данный момент каталог насчитывает более 1000 различных плагинов.
Читать дальше →
Всего голосов 45: ↑42 и ↓3+39
Комментарии8

Быстрая настройка Grunt для комфортной разработки

Время на прочтение7 мин
Количество просмотров25K
Быстрая настройка Grunt для комфортной разработки

Во время разработки нашего сервиса bitcalm.com, нам потребовалось организовать автоматическую сборку проекта. Перед нами стояла цель улучшить производительность frontend-части нашего приложения, а также оптимизировать процессы разработки и развертывания на сервере.

Основными задачами, которые требовалось решить, стали:
  1. Объединение и минификация скриптов
  2. Объединение и минификация стилей
  3. Сжатие png-изображений
  4. Создание спрайтов из всех изображений (с возможностью удобного использования и с поддержкой двух видов спрайтов для девайсов с разным PPI)
  5. Построение разных версий html-документов для разработки и для продакшна

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

Читать дальше →
Всего голосов 37: ↑31 и ↓6+25
Комментарии20

Юзерскрипт для улучшения интерфейса Feedly в стиле Google Reader

Время на прочтение1 мин
Количество просмотров29K
В каталоге UserScripts.org появился удобный скрипт Readly, который оптимизирует интерфейс RSS-агрегатора Feedly для быстрого чтения сотен и тысяч фидов.

Скрипт растягивает строчки по всей ширине экрана и уплотняет разметку, заполняя максимум пространства.


Читать дальше →
Всего голосов 28: ↑26 и ↓2+24
Комментарии15

Расширение возможностей экрана блокировки в Android 4.2.x

Время на прочтение2 мин
Количество просмотров151K
Многие владельцы планшетов линейки Nexus или других моделей под управлением Android 4.2.x, заметили что разработчики Google довольно мало внимания уделили экрану блокировки. В данном посте хочу рассказать про один очень полезный инструмент, который позволит использовать экран блокировки более эффективно. Речь пойдет о DashClock Widget (GooglePlay).


Кому интересно — прошу под кат.
Читать дальше →
Всего голосов 65: ↑54 и ↓11+43
Комментарии39

Instagram для нищебродов

Время на прочтение2 мин
Количество просмотров237K
image

Этой небольшой статьей я попытаюсь рассказать о возможности регистрации в Instagram без мобильного устройства, а так же о дальнейшем его испольовании на персональном компьютере.
Читать дальше →
Всего голосов 202: ↑132 и ↓70+62
Комментарии62

Layout страницы за 5 секунд

Время на прочтение1 мин
Количество просмотров1.7K
www.layzilla.com

Проект родился просто из личных нужд. Если это удобно нам, надеюсь будет полезно кому-то еще. Все просто и без наворотов. Но не смотря на это, следуем стандартам и качеству кода.

Можно создавать основу страницы проекта любой сложности.

В будущем сделаем поддержку HTML5.

Мануал для любителей почитать.
Всего голосов 105: ↑98 и ↓7+91
Комментарии40

Презентация средствами HTML5

Время на прочтение3 мин
Количество просмотров14K
image
Обратил внимание, что в настоящее время программисты Google начали использовать новую форму представления своих презентаций.

Типичный пример, еще пример — мы видим фреймы, эффекты, изображения, общий стиль.

Несложный поиск привел к удобному шаблону, который при своей простоте позволяет создавать неплохие презентации с легко внедряемыми элементами
Читать дальше →
Всего голосов 114: ↑110 и ↓4+106
Комментарии40

Плавная прокрутка при переходе по якорям внутри страницы

Время на прочтение4 мин
Количество просмотров1.9K
Проблема

При навигации на одностраничных сайтах, организованной с помощью анкоров (a[name=target]), а также при серфинге по длинным документам с содержанием, перелинкованном на разделы станицы, наблюдается проблема удобства использования: переход происходит мгновенно, пользователь не всегда видит куда его перебросило и на чем следует сфокусировать взор. Демо.

Внимательный читатель несомненно припомнит, что уже давно придумано до нас, например, вот тут. Однако набросанный мною за полчаса говнокод как минимум в два раза меньше по объему и не требует поиска каких-то дополнительных плагинов.
Читать дальше →
Всего голосов 18: ↑11 и ↓7+4
Комментарии8

Настраиваем внешний вид Windows 7

Время на прочтение4 мин
Количество просмотров344K
В последнее время я стал замечать, что большая часть пользователей «семерки» используют стандартную тему оформления, которую разработчики ласково назвали Aero.

На мой взгляд, она излишне ориентирована на планшеты. Об этом нам говорят огромные кнопки управления окном и излишне широкие заголовки и рамки окон — все это придает интерфейсу некоторую громоздкость. Кроме того, разработчики перемудрили с разнообразием цветовой гаммы: все эти прозрачности, переливания, градиенты и прочие изыски создают своеобразный эффект грязи.

Возможно, кому-то так нравится, кому-то безразлично, кто-то привык, а кто-то попросту не знает, что все это можно изменить.

Поехали!
Всего голосов 263: ↑181.5 и ↓81.5+100
Комментарии167

Вспомогательная схема с подсказками дизайнеру приложений Windows Phone 7

Время на прочтение1 мин
Количество просмотров892
Один из сотрудников компании Nordkapp опубликовал в блоге компании вспомогательную схему с подсказками и полезной информацией для дизайнеров приложений Windows Phone 7.

image

image 

Плакат выполнен в формате A3 и доступен с сайта компании в трех видах:Анонс схемы с некоторыми подробностями можно прочитать по этой ссылке.
Всего голосов 58: ↑38 и ↓20+18
Комментарии10
1
23 ...

Информация

В рейтинге
Не участвует
Откуда
Израиль
Дата рождения
Зарегистрирован
Активность