Адаптировано из нашей будущей книги «Рефакторинг UI»

Видели эти модные генераторы цветовой палитры? Когда выбираешь цвет, настраиваешь несколько параметров с музыкальными словечками типа «триада» или «четвёртый мажор» — и получаете пять идеальных цветов для своего веб-сайта?



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

Сегодня Mislav Marohnić объявил о том, что разработчики Github избавились от jQuery на фронтенде GitHub.com. Казалось бы, в самом этом факте нет ничего примечательного, если бы не один интересный момент.

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

• querySelectorAll (который предположительно был вдохновлен когда-то именно jQuery),
• fetch для работы с AJAX,
• delegated-events для обработки событий,
• полифиллы для работы с DOM,
• пользовательские элементы (Custom Elements), которые сейчас на подъеме.

Помимо Custom Elements, ничего другого из Web Components было решено не использовать. Разработчики присматривались к Shadow DOM и были бы не против прибегнуть к нему — однако, в силу того, что на полифиллах скорость поиска в DOM оставляет желать лучшего, им пришлось пока отложить эту затею.

Зачем разработчикам в принципе потребовалось все это сделать? По их словам, для того, чтобы «отдавать» посетителям меньше килобайт, иметь возможность использовать более явно выраженный синтаксис для выполнения манипуляций с DOM, а также ради возможности использовать библиотеку Flow.JS для статического анализа типов. По словам разработчиков, процесс ухода с jQuery занял годы.

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



У вас есть С. У вас есть библиотека для замка и для принцессы. В атаку! Вы спасаете принцессу, ее собаку, весь ее гардероб и всё, что она когда-либо съела. Fuck, неужели я забыл null-terminator?

Здесь вы не увидите ни строчки кода. Мы поговорим об обычных людях — о наших пользователях, точнее о том, как сообщать им, если в системе возникла какая-то непредвиденная ситуация.


В основе статьи доклад Антонины Хисаметдиновой с Heisenbug 2017 Moscow, которая занимается проектировкой пользовательских интерфейсов в компании Собака Павлова.

Кроме того, на Медиуме есть цикл статей «Руководство по проектированию ошибок». Цикл еще не дописан до конца, но дает более полную и цельную картину по теме статьи.

В этой статье вы узнаете, как с Vue.js создать переиспользуемый компонент модального окна с использованием анимированных переходов и слотов.

Определение структуры шаблона

Начнем с определения нашего шаблона. Нам понадобится div для заднего плана (тени), div для самого модального окна и некоторые элементы, для определения его структуры:

<template>
  <div class="modal-backdrop">
    <div class="modal">
      <slot name="header">
      </slot>

      <slot name="body">
      </slot>

      <slot name="footer">
      </slot>
    </div>
  </div>
</template>

Обратите внимание на использование слотов? Мы могли бы использовать входные параметры (props) для создания заголовка (header), тела (body) и футера (footer), но использование слотов даст нам большую гибкость.

Слоты позволяют нам легко использовать одно и то же модальное окно с различными типами содержимого тела нашего компонента. Мы можем использовать модальное окно, чтобы показать простой текст, но мы можем захотеть повторно использовать то же модальное окно для вывода формы, чтобы отправить запрос. Хотя входящих параметров (props) обычно достаточно для создания компонента, предоставление HTML через входящий параметр потребует от нас использовать его через директиву v-html для рендеринга — что может привести к XSS-атакам.

Здесь мы используем именованные слоты, это дает возможность использовать более одного слота в одном компоненте.

Глеб Летушов, редактор-фрилансер, адаптировал для блога Нетологии чеклист с Github от David Dias. Этот чеклист уже переводили, но так как на Хабре его нет, мы решили, что он пригодится. В чеклисте собран полный список элементов, которые необходимо проверить перед запуском и публикацией сайта.



Список основан на многолетнем опыте фронтенд-разработчиков, а дополнения собраны из общедоступных источников.

Не секрет, что в у нас в проекте используют обучают студентов. Точнее, студенты на базе проекта осваивают практические аспекты системного программирования: пишут дипломы, курсовые, занимаются исследовательской деятельностью и так далее. Вот об одном дипломе, успешно защищённом прошлым летом, и пойдет речь в данной статье.

Автором является Александра Бутрова AleksandraButrova, тема “Разработка графической подсистемы для встроенных операционных систем”. При написании диплома были использованы три открытых проекта: Embox, Nuklear и stb. Последний использовался только для загрузки картинок, а вот Nuklear являлся, по сути, виновником торжества. Можно сказать, что работа свелась к интеграции Nuklear и Embox. Первый предоставлял лёгкую графическую библиотеку, а Embox отвечал за встроенные системы.

Игровой процесс может быть очень сложной задачей. Некоторые игры, например, «Змеи и лестницы», достаточно прямолинейны, однако такие игры, как SpaceChem и Factorio могут быть невероятно сложной проверкой работы мозга.

Каждой игре, от простой до сложной, очень важно объяснить игроку, как в неё играть. Неважно, бросает ли он кубики или решает сложные математические уравнения — главное, чтобы игрок понимал, как работает игра.

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

В конце 2016 года была опубликована аналогичная статья. С тех пор список был обновлен на основе наблюдений и анализа нескольких ресурсов (постов в популярных блогах, обсуждений на Quora, поисковых запросов в Google и обсуждений на форумах, таких как reddit/learnprogramming и Hacker News).

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

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

Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

• Фоны и рамки;
• Фигуры;
• Визуальные эффекты.

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



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

На хабре уже была попытка пользователя zepps начать серию публикаций о настройке оборудования cisco и практической стороне сетевых технологий, но, к сожалению, на первых двух статьях дело остановилось. Это было время моего становления, как специалиста в этой области и zepps сурово обломил меня отсутсвием продолжения.
Многократно пользователи здесь публиковали отрывочные топики о теоретической составляющей, решение сложных задач, куски из википедии или xgu.ru, но более менее цельной серии с информацией, которая непонятна после чтения цисковских книг при отсутсвии практики таки не было.
Поэтому мне пришло в голову снять несколько обучающих роликов с подробным описанием, начиная с настройки VLAN на свитчах, заканчивая… пока не знаю, чем заканчивая (может, OSPF, BGP, а может и чуточку дальше). Теории будет немного, в основном практика на PacketTracer и GNS3, с перечислением более или мене часто встречающихся трудностей.

В этой статье — великолепная подборка из 55 бесплатных шрифтов, которые были отобраны из тысяч предлагаемых на сегодняшний день в сети Интернет. Коллекции шрифтов, перечисленных ниже, можно скачать и использовать в различных проектах.



Для удобства шрифты поделены на 8 категорий, вы можете выбрать необходимую из списка:

• Serif fonts
• Sans-serif fonts
• Handwriting fonts
• Vintage and retro fonts
• Brush fonts
• Tattoo fonts
• Graffiti fonts
• Unusual fonts

Ловите 2 плаката с регулярными выражениями в форматах A2 и A3.

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

Все же помнят, как это бывает: учишься ты чему-то новому, но вдруг раз и приуныл. А все почему? Потому что разработка типовых приложений при обучении скучна до зубовного скрежета.

Подобные задания становятся УБИЙЦАМИ мотивации №1.

Лично я не хочу, чтобы мои ученики теряли мотивацию и сдавались на полпути. Поэтому я создал этот километровый список из 27 забавных идей для приложений, которые вы можете создать, пока обучаетесь использовать React на пару с Ruby on Rails.

Мы живем во времена, когда люди не привыкли глубоко погружаться в какую-то тему. Это касается и дизайна. Сегодня все ценят победы на различных престижных конкурсах по дизайну, или, в худшем случае, оценивают личным «нравится / не нравится». У нас также есть международные награды по дизайну от Awwwards, Behance и других известных «оценщиков», которые диктуют современную моду в веб-дизайне. Но так ли они важны? Если всмотреться в суть дизайна, то он, как и многое в нашем мире, основывается на психологии восприятия. И психология — это основа любого успешного дизайна. Вы можете победить на конкурсе по дизайну, но сайт при этом будет лишь красивой картинкой, которая абсолютно не достигает поставленной цели. В этой статье мы поговорим о психологии и эффективности дизайна сайта, в частности, подробно разобрав такой важный аспект, как цвета.

Признак того, что объект не должен быть классом — если в нём всего 2 метода, и один из них — инициализация, __init__. Каждый раз видя это, подумайте: «наверное, мне нужна просто одна функция».

Каждый раз когда из написанного класса вы создаёте всего один экземпляр, используете только раз и тут же выбрасываете, следует думать: «ой, надо бы это отрефакторить! Можно сделать проще, намного проще!»

Перевод доклада Джэка Дидриха, одного из ключевых разработчиков языка Питон. Доклад прозвучал 9 марта 2012 на конференции PyCon US.

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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

Я всегда была сильна в математике. Не имею в виду тригонометрию, арифметику и все то, о чем люди думают, говоря: «Да ты у нас мозг, ненавижу эту математику». А вот комбинаторику, теорию графов, доказательства или просчитать, как заключенным шляпы надеть — обожаю это всё. Я училась в трех высших школах и всегда была в команде математиков. Когда мне было не то десять, не то одиннадцать лет и родителям надо было заткнуть мне рот на вечеринке, они меня подкупали задачником математических головоломок. Я не шучу.

Советы и примеры в дизайне форм логина и регистрации.
Казалось бы, что может быть проще формы регистрации и, уж тем более, входа на сайт? Пара полей и кнопка. Но в нюансах этой простоты кроется успешность выполненной работы и количество пользователей вашего сервиса. Как сделать формы проще, процесс приятнее и тем самым снизить количество уходов? Расскажу какими правилами мы руководствовались при разработке нашего сообщества предпринимателей BOSS.ZONE.