15 лучших руководств по разработке для дизайнеров и разработчиков

У разработчиков и дизайнеров есть несколько общих черт: им обоим приходится хотя бы время от времени работать друг с другом, особенно тем, кто в значительной степени сосредоточен на разработке приложений и интерфейсных веб-приложений. Будь то обучение использованию типографики в дизайне приложений или определение типа устройств, для которых мы должны создавать наш веб-сайт, оба могут учиться друг у друга разными способами.

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

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

Веб-стандарты Sherpa

Интернет - это обширное понятие, оно влечет за собой так много, что иногда может быть трудно найти действительно хороший контент о том, как работать с Интернетом с точки зрения разработчика и / или дизайнера. Ресурс Web Standards Sherpa - это список статей и руководств, в которых рассказывается о CSS, дизайне, контенте, JavaScript, производительности в Интернете, бизнес-аспектах создания Интернета, а также советы по совершенствованию рабочего процесса среди многих других тем и категорий. Если вам как фронтенду нужны передовые практики, то здесь вы можете их получить.

UX мифы

UX Myths развенчивает ложные представления о пользовательском опыте и дает читателям возможность получить свежий и проницательный взгляд на то, как вам следует подходить к UX в своих приложениях, веб-сайтах и ​​программном обеспечении. Каждый пункт подробно объясняется и приводится ряд примеров, чтобы продемонстрировать обратные возможности.

Карманное руководство по опечаткам

Это карманное руководство по типографике - идеальный компаньон для дизайнеров, которые стремятся изучить все тонкости типографики. Это конкретное руководство охватывает основы тире, апострофов, гарнитур, шрифтов и многого другого.

Состояние веб-типа

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

QuirksMode

QuirksMode - прекрасное руководство по информации о совместимости браузеров в Интернете. Хотя вы не получите много информации в форме письменного контента, есть много фактов, которые могут быть полезны, когда дело доходит до разработки для Интернета. Таблицы совместимости позволяют каждому изучить возможности браузера с такими технологиями, как JavaScript, CSS и HTML.

Этикет Photoshop

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

Мое устройство

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

Размеры экрана

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

Показатели устройства

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

Секреты инструментов разработчика

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

Правила CSS

CSS - это покрытие сети. Без CSS Интернет обнажен, как и мы, люди, без одежды. И поскольку вокруг нас так много CSS, важно понимать очень практические основы и стандартные правила, которые гарантируют, что CSS, который мы публикуем в Интернете, оптимизирован и соответствует последним стандартам.

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

Шпаргалка по CSS

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

Браузерные хаки

Front-end веб-разработчики проводят много времени в браузере, экспериментируя, выполняя код, возясь и многое другое, и по мере того, как каждый разработчик прогрессировал на протяжении многих лет, они оставили после себя некоторые интересные фрагменты и уловки, которые каждый может использовать для облегчения их рабочий процесс разработки. Узнайте о хитростях для медиа-запросов, селекторах и даже о некоторых классных хитростях JavaScript для всех ваших любимых браузеров. Вы также можете поделиться своими советами и уловками, используя запрос на перенос на GitHub.

Браузерная диета

Текущая тенденция в веб-разработке во многом связана с производительностью; как оптимизировать для достижения наилучшей производительности без потери качества. И в этом вся суть руководства Browser Diet - как оптимизировать для Интернета. Это список проницательных советов и отчетов об опыте, в которых документируются различные функции JavaScript, HTML и CSS, которые можно изменить или полностью удалить без каких-либо компромиссов.

&какие;

amp-what - это быстрый интерактивный справочник по 30 000+ символов HTML и распространенным символам Unicode, 8859-1 символам, кавычкам, знакам препинания, диакритическим знакам, символам, математическим символам и греческим буквам, значкам и значимым для разметки & символы интернационализации. Это работает так: вы нажимаете кнопку «Загрузить» в верхней части веб-сайта, а затем используете функцию поиска, чтобы найти символы, которые вы хотите использовать для своего проекта или в другом месте, где вы планировали их использовать. Такой обширный ресурс, что вы можете часами играть с уникальными значками и персонажами, которые могут оживить ваши приложения и дизайн.