Ресурсы для веб-разработчиков Мега-сборник

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

Ниже я собрал огромную коллекцию очень полезных ресурсов для веб-разработчиков. К ним относятся материалы для начинающих по HTML5 / CSS3, а также более сложные теории для программирования на JavaScript и PHP. Пара энтузиастов-разработчиков может изучать эти языки и создавать невероятно популярные веб-приложения, подобные Twitter или Tumblr. Если у вас есть интерес к полезным ресурсам для современных веб-разработчиков, то вам понравится этот сборник надежных ресурсов..

Полезные онлайн журналы

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

В зависимости от того, какой язык вы кодируете, это будет определять ваш интерес к любому из этих блогов. Мы можем сосредоточиться на веб-разработке и предположить, что она включает в себя всю внешнюю работу (HTML5 / CSS3 / JavaScript), а также простые серверные сценарии (PHP / RoR / Python / SQL). Я позволил себе создать единый список самых популярных блогов для разработчиков, в котором основное внимание уделяется как внешнему, так и внутреннему коду..

• Nettuts+
• 24 способа
• Webmonkey
• Сокрушительное кодирование
• Webitect
• Осмотреть элемент
• Кошки Кто Код
• Line25 Блог веб-дизайна

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

jQuery плагины в изобилии

Основная библиотека jQuery и jQuery Mobile получили широкую популярность в прошлом году. Эти библиотеки с открытым исходным кодом работают над созданием интерфейса, полного богатой анимации и простых в реализации функций Ajax, хотя мобильная библиотека еще не дошла до своего родителя с точки зрения плагинов и стороннего кода..

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

В общем, я также рекомендую просматривать фрагменты / плагины кода на сайтах Ajax Blender и Dynamic Drive. Библиотека не огромная, но постоянно растет за счет нового пользовательского контента. Сайты включают в себя не только плагины jQuery, но также библиотеки MooTools и Prototype..

Если вы в конечном итоге работаете с библиотекой jQuery Mobile, я хочу порекомендовать другой инструмент jqmPhp. Это динамический класс PHP, где вы можете ссылаться на простые функции для вывода строк и строк кода HTML5, работающих на jQuery Mobile. Честно говоря, это самый простой способ создавать прототипы динамических мобильных приложений, построенных на основе PHP-оболочки. В блоге сайта есть много примеров ссылок, чтобы покопаться.

Встраивание в HTML5 и CSS3

Когда мы говорим о front-end веб-разработке, это вообще все о эффективности. У вас нет тех же проблем при создании веб-сайта в HTML / CSS, как при кодировании внутреннего Ruby-приложения. В HTML нет реальной логики или обработки ошибок - это в основном о том, как быстро вы можете правильно масштабировать дизайн макета во всех браузерах.

Сначала я должен начать с рекомендации HTML5 Boilerplate. Это раздетый шаблон, который включает в себя все “стандарт” HTML5 элементы веб-страницы в одном пакете. Это включает в себя таблицу стилей по умолчанию, JavaScript, значки избранного, значки Apple Touch и множество других вкусностей. Это 100% бесплатный проект, и вы даже можете внести свой вклад в их репозиторий Github. Это обязательный ресурс для всех разработчиков перед началом любого серьезного веб-проекта..

Теперь, если вы работаете с этим образцом, у вас есть возможность добавить весь свой собственный код. Но я предлагаю сделать следующий шаг и создать приложение, такое как Initializr. Это создаст типичный макет веб-сайта и даже позволит вам настроить, какие элементы включены в ваш стандартный пакет. Код Google Analytics, минимизированные файлы jQuery, .htaccess или web.config, а также около десятка других доступных вариантов.

CSS дизайнеры

Теперь, когда мы немного изучили кодирование HTML5, мы должны также рассмотреть некоторые из популярных фреймворков CSS3. Они более открыты, чем HTML-шаблоны, так как вы можете сделать гораздо больше с помощью CSS. Дизайнеры также осознают сложность создания совместимого со стандартами кода для всех современных веб-браузеров..

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

Тем не менее, когда дело доходит до инструментов CSS, CSS3 PIE должен быть в тройке моих любимых. Это простое веб-приложение, которое выводит правильный код для отображения CSS3-эффектов, поддерживаемых в Internet Explorer 6-9. Вы можете создавать динамические линейные градиенты, закругленные углы и тени от ящиков с настраиваемыми настройками. На сайте есть примеры IE, если вы хотите проверить их.

Разработчики также будут стремиться уменьшить размер своих файлов для производства. Чистый CSS является одним из ресурсов, где вы можете выбрать один из многочисленных вариантов, чтобы упростить ваш код и уменьшить размер файла. Другой альтернативный Code Beautifier не предлагает столько вариантов, но может быть проще в использовании.

Настройка тем с помощью WordPress

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

Новая версия Constellation Theme дает разработчикам WordPress более легкую отправную точку, чем шаблоны по умолчанию. Новая тема Twenty Eleven очень хитрая и минималистичная, но она не может конкурировать с целым шаблоном темы, созданным поверх HTML5Boilerplate. Тема Constellation WP даже включает медиазапросы для различных разрешений устройств, таких как планшеты iPhone и iPad.

Wonderflux - это еще один шаблон темы WordPress, который не так уж далек от разработки. Это было только что выпущено из бета-версии в v1.0 вместе с некоторой онлайн-документацией. Эта тема немного сложнее, чем Constellation, которая дает вам больше контроля над макетом. Разработчики включили пользовательские ловушки PHP, функции и фильтры, чтобы сделать ваш сайт WordPress более динамичным.

Серьезные разработчики WP должны проверить оба решения, чтобы узнать, поможет ли одно из них в дальнейшей работе над проектом..

Поиск халявы для веб-разработчиков

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

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

Галерея включает в себя сотни примеров кода шаблонов HTML / HTML5, библиотек CSS3 и, конечно же, множество jQuery. Я также обнаружил, что это отличный веб-сайт, на котором публикуется собственный открытый исходный код. Ваше имя привязано к представлению, плюс вы можете разместить ссылки на свой собственный сайт, где пользователи могут получить доступ к коду.

API веб-приложений

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

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

• API Twitter
• CloudApp API
• Instagr.am API
• API eBay
• API Foursquare
• Dribbble API
• Github API

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

Q & A Ресурсы

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

Я лично рекомендую присоединиться к сообществу Stack Exchange, если вы еще не являетесь участником. Это включает в себя удивительные сайты, такие как Stack Overflow и Super User, где вы можете получить помощь в программировании практически на все. Члены сообщества хорошо осведомлены обо всех основных веб-языках, включая jQuery и небольшие классы PHP..

Изысканный трюк, который я выучил, заключается в том, чтобы искать в Google и видеть, была ли ваша проблема уже решена. Введите несколько ключевых слов в ваш поиск Google и добавьте суффикс сайт: stackoverflow.com. Все возвращенные результаты поиска будут вопросами из архивов Stack Overflow - если вам повезет, вы можете найти именно то, что вам нужно..

Тестирование скорости страницы в сети

Этот новый инструмент от разработчиков Google действительно впечатляет. Приложение Page Speed ​​Online проанализирует контент вашего сайта и сгенерирует аналитический отчет о вашей скорости. Это включает в себя возможные решения, чтобы сократить время загрузки и дольше держать посетителей на сайте..

Это также может помочь вам определить проблемы с показателями отказов и более низкими конверсиями. Google Analytics является обязательным для любого веб-сайта, но я чувствую, что Page Speed ​​просто достигает более высокого уровня анализа.

Выходные данные отчета ранжируются от высокого до низкого приоритета и часто включают в себя множество различных элементов. Если вы понимаете настройки LAMP и работаете на серверах Apache, вы можете рассмотреть модуль mod_pagespeed. Он автоматически выполняет многие из этих оптимизаций на вашем веб-сайте, чтобы сократить время загрузки и кэшировать важные веб-данные (изображения, значки, сценарии)..

Лучшее программное обеспечение для разработчиков

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

Mac OS X

Panic - компания-разработчик программного обеспечения, которая создала Coda - безусловно, лучшее приложение для веб-разработки для Mac. У вас есть доступ к редактору исходного кода, терминалу и FTP-клиенту, где вы можете вносить изменения непосредственно в файлы сервера. Coda дополнительно поддерживает длинный список подсветки синтаксиса для таких языков, как HTML, XML, CSS, JavaScript, PHP, SQL и многих других..

Однако, если вам нужно бесплатное решение, вы должны проверить Komodo Edit. Программное обеспечение разработано для Windows и Mac, с открытым исходным кодом и абсолютно бесплатно для загрузки. Он включает в себя все ту же поддержку подсветки синтаксиса и множество аналогичных функций, что и Coda (к сожалению, нет FTP). TextWrangler - это еще одно бесплатное решение, которое вы можете попробовать, а также простой текстовый редактор..

Для бесплатного приложения FTP проверьте Cyberduck в Mac App Store. Хотя лично я предпочитаю платную альтернативу, такую ​​как Yummy FTP или Transmit.

Майкрософт Виндоус

Программный пакет Adobe всегда приходит на ум, когда вы думаете о веб-дизайне и разработке. У пользователей Windows есть множество альтернатив Dreamweaver, и многие из них абсолютно бесплатны..

Notepad ++ - отличный пример программного обеспечения Win32 с открытым исходным кодом. Проект все еще находится в активной разработке и регулярно выпускает обновления (почти ежемесячно). Мне нравится их интерфейс с вкладками и поддержка множества дополнительных плагинов. Как я упоминал выше, Komodo Edit также предлагается для Windows XP / Vista / 7, так что вы можете попробовать это в качестве альтернативы.

Веб-разработчики на Windows также не без FTP-клиента. Filezilla, вероятно, самая популярная бесплатная альтернатива. Для альтернатив, проверьте наш список бесплатных FTP-клиентов вместе с аналогичными инструментами.

Другие полезные ресурсы для разработчиков

• 100 основных инструментов веб-разработки
• Best of 2011: лучшие полезные плагины и учебники по jQuery
• Руководства по Ruby on Rails для начинающих веб-разработчиков
• 7 захватывающих тенденций веб-разработки на 2011 год

Заключение

Пока первый квартал 2012 года стартовал на ура! Мы уже видели удивительный контент, изливающийся дизайнерами и веб-разработчиками со всего мира. Профессионалы, строящие для Интернета, имеют в своем распоряжении так много инструментов по сравнению с 1-2 годами назад.

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