• Полное руководство по CSS Flex + опыт использования

      Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.

      Когда я начал изучать Flex, я хотел увидеть все, на что он способен. Но мне не удалось найти подробное руководство с примерами всех возможностей. Поэтому я решил самостоятельно создать диаграммы свойств Flex с «высоты птичьего полета».

      Читать!
    • Создание favicon для сайта 2020

      Что такое favicon и для чего он нужен?


      Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

      image

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

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

      Какой формат использовать для favicon?


      Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

      О каких платформах пойдет речь в этой статье?


      • Десктопные браузеры
      • Chrome на Android
      • Иконка закладки в iOS (PWA)
      • macOS
      • Windows

      Читать дальше →
    • Вы не знаете как должны работать модальные окна

        Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?


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


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


        Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.

        Читать дальше →
      • [в закладки] Работа с изображениями в веб

        • Translation
        Одно из решений, которые приходится принимать фронтенд-разработчику при создании сайта, касается выбора способа включения изображений в состав веб-страниц. Этот способ может заключаться в использовании HTML-тега <img>. Это может быть применение CSS-свойства background или тега <image> элемента <svg>. Выбор правильного подхода к работе с изображениями весьма важен, так как это может очень сильно повлиять на производительность и доступность проекта.



        Материал, перевод которого мы сегодня публикуем, посвящён изучению различных способов включения изображений в состав веб-страниц. Здесь будут обсуждены преимущества и недостатки этих способов. Кроме того, мы поговорим о том, когда и почему их обычно используют.
        Читать дальше →
      • Заметки верстальщика: Полезные расширения Google Chrome в 2019 году

        В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.

        Читать дальше →
      • Как подружить дизайнера, верстальщика и «Фигму» с помощью дизайн-системы, ломика и какой-то матери™

        • Tutorial


        Привет, Хабр. Недавно я выпендрился в комментариях и пообещал подробно ответить на вопрос о том, как дизайн-система упрощает взаимоотношения и нейтрализует конфликты между дизайнерами и верстальщиками (разработчиками). Плюс рассказать о некоторых вариантах стандартизации именования слоёв. Вот и отвечаю. Подробно. Про сетки. Про компоненты. Про иконки. Про язык. Про БЭМ. Про «фигмин» слэш и её же плагины. Про артборды и вьюпорты. Про типографику. Про стили и палитры. Про эффекты. Про экспорт растра. Про «мультиплеер». Про распределение обязанностей. Ну и немножко «о жизни, вселенной и вообще». Осторожно, трафик: внутри много картинок, есть gif-анимации. А ещё много, действительно много нудного текста. Я предупредил.
        Читать дальше →
      • Правила подготовки макетов в Figma



          Боль с одним проектом привела нас к решению написать правила работы


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

          Результатом хождения по граблям между отделами дизайна и разработки стала идея сформулировать правила, высечь их в камне, поместить в pdf файл и раздать всем участникам процесса с директивой «следуй».
          Читать дальше →
          • +14
          • 30.7k
          • 7
        • Лучшие бесплатные коллекции векторных иконок

            Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.

            Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спрайты? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах: @font-face, SVG, EPS, AI, PSD, Sketch.

            В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.

            Responsive Icons (100 иконок, PSD, AI, EPS, SVG)


            Responsive Icons

            Читать дальше →
          • Яндекс выпустил антивирус для сайтов — Manul

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

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



              Однако всегда хочется лучшего. Одна из главных проблем, с которыми мы сталкиваемся при общении с владельцами зараженных сайтов, — это поиск источника заражения на стороне сервера. У Яндекса, который каждые сутки размечает тысячи сайтов как зараженные вирусом и опасные для устройств человека, есть регулярно обновляемая база вирусов. И у нашей команды появилась идея, выросшая в большой проект, – антивирус для сайтов. Так мы создали Manul, который решили выложить в open source. Это утилита, которая поможет вебмастеру понять, что произошло с сайтом и вылечить его. Под катом я расскажу подробнее о том, как он устроен и какие проблемы решает.
              Читать дальше →
            • Анонс Brackets 1.0 и Extract for Brackets (Preview версия)

                image

                Я думаю, что большое количество людей, занимающихся или интересующихся веб-разработкой давно уже опробовали open-source IDE Brackets. На хабре не раз упоминали о ней (например, тут), поэтому не буду много разглагольствовать и перейду к сути.

                Сегодня, спустя почти 3 года, в течение которых участвовало 245 контрибьюторов, наконец вышла версия 1.0 — способ объявить миру, что Brackets готов. Несмотря на то, что выпуск имеет версию 1.0, разработчики относятся к нему как и к любому другому релизу. Новые продолжат выпускаться так же часто как и сейчас — каждые 3-4 недели.

                Встречайте Extract for Brackets (preview)


                Отдельно заслуживает внимания плагин Extract for Brackets, который наконец доступен для публичного тестирования, предназначенный упростить верстку веб-сайтов.
                Читать дальше
              • Украшательство Android-телефона: рецепты красивых рабочих столов

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

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



                  Под катом еще несколько примеров.
                  Читать дальше →
                • SilverBird или Кунг-фу поиска в Twitter

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

                    Чем больше понимаешь логику его работы, тем ближе становится аналогия с работой ассоциативного мышления. Но это уже не то философия, не то лирика, поэтому поясню это сравнение в постскриптуме.

                    "

                    Переходим к практике.
                    Читать дальше →
                  • Советы по организации и ведению корпоративного Twitter

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

                      Немного статистики:
                      • 5% американцев узнает о скидках в Твиттере;
                      • 70% известных компаний работают в Твиттере, в среднем у них 1500 фолловеров;
                      • 80% компаний, присутствующих в Twitter, твитят еженедельно, 40% отвечают клиентам.
                      Читать дальше →
                    • Одна строка HTML кода может удалить данные или перезагрузить телефоны Samsung

                        На конференции по безопасности продемонстрировали, как одной строкой HTML кода можно удаленно удалить данные с Samsung Galaxy S III. Хуже всего: это, кажется, работает на многих смартфонах Samsung с TouchWiz
                        Читать дальше →
                      • Maxmertkit. Идеальный css-фреймворк



                          Всю документацию на английском языке вы сможете прочесть на maxmert.com.

                          Требования и задачи


                          При создании версии 1.0 мне пришлось пересмотреть основные требования к фреймворку:

                          • Возможность легко добавить/удалить размер или тему. Json-файл с прописанными темами и размерами для каждого виджета. Таким образом можно конфигурировать фреймворк исправляя json-файл.
                          • Модульность. При отключении или добавлении любого виджета фреймворк должен стабильно работать (привет bootstrap).
                          • Особое именование классов для избежания переопределения пользовательских классов.
                          • Javascript компоненты без jQuery (но с возможностью его использования, если он подключен).


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

                          Осторожно! Трафик.
                          Читать дальше →
                        • Ускоряем Wordpress

                            image

                            Wordpress в стандартной установке довольно медленный. По умолчанию движок не использует некоторые возможности современного Веба для значительного своего ускорения. Существует целая куча плагинов для оптимизации Wordpress'a. Давайте наведем в них порядок и проведем капитальную оптимизацию.
                            Читать дальше →
                          • Интернет может рухнуть. Нам нужен «План Б»

                              Ролик с TED 2013 (более 1 000 000 просмотров)
                              Дэнни Хилс (Danny Hillis, создатель Connection Machine, сооснователь Long Now Foundation) попытается донести до умов, свои идеи, достойные распространения.


                              В этом видео:
                              — Справочник е-мэйлов 1982 года
                              — Как Дэнни регистрировал третье в мире доменное имя (кстати, какие были первые два?)
                              — «От каждого по способности, каждому по потребности» — коммунистические принципы на службе мин. обороны США
                              — Почему интернет хрупок и уязвим и что такое «отрицательное время»

                              «Почему-то мы сосредоточены на защите компьютеров в Интернете, а не на защите самого Интернета.
                              Интернет довольно хрупкая система»

                              «Сейчас Интернет используется не так и не для того, для чего он задумывался изначально»

                              «Интернет меняется настолько быстро, что даже эксперты не обладают полной картиной происходящего»

                              «На протяжении долгих лет множество моих единомышленников терпеливо пытаются донести до умов, что нам нужна независимая резервная система»

                              Под катом тройка первых коммерческих доменных имен и еще несколько выступлений Дэнни Хилса
                              Читать дальше →
                            • Несколько полезных CSS-трюков

                              Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать. Хотя, возможно, это уже придумано до нас и все об этом уже знают. В примерах используется LESS, а не чистый CSS.

                              Событие автоподстановки в инпут поля


                              Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

                              Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

                              <input required="required" class="email-input" type="email" />
                              <input required="required" class="password-input" type="password"/>
                              <div class="go">Login</div>
                              
                              .email-input:valid ~  .password-input:valid ~ .go {
                              	//стили для активной кнопки Login
                              }
                              


                              Читать дальше →
                            • Обзор открытой IDE Adobe Brackets


                                С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост, в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

                                Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда.

                                Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

                                (под катом скриншоты ~1.5Mb)
                                Читать дальше →
                              • 06 Collector: ссылки для дизайнеров и разработчиков



                                  В этой подборке вы найдете много материалов для вдохновения с последниями тенденциями в веб-разработке и веб-дизайне. И в преддверие праздника этот пост будет разбавлен ресурсами на новогоднюю тематику.
                                  Читать дальше →
                                  • +37
                                  • 29.7k
                                  • 7