• Улучшите свой CSS с помощью этих 5 принципов

    • Перевод


    Написание CSS — процесс достаточно простой и понятный, тогда почему для этого требуются еще какие-то принципы и best-practices?

    По мере увеличения масштабов проекта и количества людей, работающего над ним, всё более и более явно начинают проявляться новые сложности, которые могут вызвать серьезные проблемы в будущем. Дублирование кода, сложные цепочки переопределения свойств, использование !important, оставшиеся и неиспользуемые CSS-свойства от удаленных HTML-элементов и так далее. Такой код сложнее читать и исправлять.

    Написание CSS на профессиональном уровне сделает код более поддерживаемым, расширяемым, понятным и чистым. Давайте рассмотрим 5 простых и очень эффективным принципов, которые выведут ваш CSS на новый уровень
    Читать дальше →
  • [в закладки] 9 инструментов, повышающих продуктивность веб-разработчика

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



    Автор статьи, перевод которой мы сегодня публикуем, отобрал 9 таких инструментов.
    Читать дальше →
  • 6 самых распространённых ошибок разработчиков при написании HTML и CSS

    Привет, Хабр! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov.

    Использование атрибута placeholder вместо элемента label


    Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder.

    <input type="email" placeholder="Enter your email">

    Поэтому я рекомендую использовать элемент label для поля имени и атрибут placeholder для примера данных, которые пользователь должен заполнить.

    <label>
      <span>Enter your email</span>
      <input type="email" placeholder="e.g. example@gmail.com">
    </label>

    Использование элемента img для разметки декоративной графики


    Я часто вижу, как разработчики путают декоративную графику с изображениями контента. Например, они размечают социальные иконки с помощью элемента img.

    <a href="https://twitter.com" class="social">
      <img class="social__icon" src="twitter.svg" alt>
      <span class="social__name">Twitter</span>
    </a>

    Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
    Читать дальше →
  • Топ-3 HTML-элемента, которые мы забыли

      Привет, Хабр! Представляю вашему вниманию перевод статьи «Top 3 HTML elements that we forgot» автора Stas Melnikov.

      Недавно я прочитал спецификации и понял, что мы используем ограниченный набор HTML-элементов. Поэтому хотел бы рассказать о трёх элементах, которые мы забыли, но которые есть в каждом проекте.
      Читать дальше →
    • 9 полезных трюков HTML

      • Перевод
      Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.

      У HTML есть много практических секретов, которые могут вам пригодиться.

      Нативка от автора
      Но я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.

      Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.


      Netflix использует ту же платформу для тестирования своих веб-приложений.

      Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.

      У Endtest есть несколько действительно полезных функций, таких как:

      • Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS
      • Редактор без кода для автоматических тестов
      • Поддержка веб-приложений
      • Поддержка как собственных, так и гибридных приложений для Android и iOS
      • Неограниченное количество видеозаписей для выполнения ваших тестов
      • Сравнение
      скриншотов
      • Геолокация
      • Оператор if
      • Циклы
      • Загрузка файлов в ваши тесты
      • API Endtest, для легкой интеграции с вашей системой CI / CD
      • Расширенные утверждения
      • Мобильные тесты на мобильных устройствах
      • Тестирование электронной почты с помощью Endtest Mailbox

      Вы можете просмотреть документы.


      Ниже приведены 9 чрезвычайно полезных трюков HTML.
      Читать дальше →
    • Как разработать дизайн и код персонального веб-сайта

      Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.

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

      image
      Читать дальше →
      • +19
      • 6,4k
      • 4
    • Ошибки в JavaScript: исправляем, обрабатываем, чиним

        Всем привет! Вдохновленные успехом предыдущей статьи, которая была написана в преддверии запуска курса "Fullstack разработчик JavaScript", мы решили продолжить серию статей для новичков и всех тех, кто только начинает заниматься программированием на языке JavaScript. Cегодня мы поговорим об ошибках, которые случаются в JS, а также о том, как именно с ними бороться.



        Отдебажь за человека одну ошибку, и он будет благодарен тебе один пулл реквест. Научи его дебажить самостоятельно, и он будет благодарен тебе весь проект.

        Неизвестный тимлид

        Читать дальше →
      • Изучение Bootstrap с 10 полезными советами

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

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

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


        Есть два способа использования Bootstrap. Вы можете либо импортировать Bootstrap в свой код, либо загрузить пример проекта Bootstrap и построить на нем свой сайт.
        Читать дальше →
      • JetBrains запустит новый продукт 5 декабря

          Всем привет!

          Мы анонсируем новый продукт! Пока не можем рассказать, что именно это будет, но обо всём можно будет узнать 5 декабря, в четверг, в 20:10 по московскому времени, во время прямой трансляции. Чтобы получить напоминание, включите видео ниже и нажмите на кнопку Set reminder (Напомнить) или перейдите по ссылке.

          Трансляция будет на английском языке.

        • Изучить отзывчивый веб-дизайн за 5 минут

          Привет, Хабр! Представляю вашему вниманию перевод статьи «Learn responsive web design in 5 minutes» автора Per.

          В этой статье я научу вас многим приёмам отзывчивого дизайна за 5 минут. Этого, очевидно, недостаточно для правильного изучения, но здесь вы найдёте обзор на следующие наиболее важные методы:

          • Относительные единицы измерения CSS
          • Медиа-запросы
          • Flexbox
          • Отзывчивая типографика
          Читать дальше →
          • +20
          • 14,9k
          • 5
        • 48 open source ресурсов для JavaScript (2019)

          • Перевод
          image

          Мы выбрали из 20 000 проектов и библиотек для JavaScript 48 самых лучших (по звёздам на GitHub) и сгруппировали в 5 категорий:

          • Пользовательский интерфейс (1~9)
          • Инструменты JavaScript (10~25)
          • Machine Learning (26~33)
          • Проекты (34~39)
          • Инструменты разработчика (40~48)
          Читать дальше →
          • +15
          • 10,8k
          • 5
        • Создаем современное веб приложение. Знакомство с проектом и подготовка к работе. Часть 1

          image
          В этой серии статей мы пройдем полный цикл создания клиентской части приложения и напишем небольшую библиотеку компонентов с использованием современного стека технологий.
          Читать дальше →