Ресурси веб-розробників Мега-компіляція

Інтернет постійно зростає і існують сотні тисяч колективних ресурсів для майбутніх веб-розробників. З он-лайн статей, навчальних посібників, інструментів, довідників, до відео, ви можете дізнатися про що завгодно в Інтернеті. Це дійсно ніколи не було легше стрибати онлайн!

Нижче я зібрав величезну колекцію корисних ресурсів веб-розробників. До них відноситься матеріал для початківців для HTML5 / CSS3, а також більш складні теорії для програмування JavaScript і PHP. Можливо, що пара захоплених розробників вивчать ці мови та будують дико популярні веб-програми, подібні до Twitter або Tumblr. Якщо ви зацікавлені в корисних активах для сучасних веб-розробників, вам сподобається компіляція надійних ресурсів.

Корисні інтернет-журнали

Світ блогів вибухнув, і сотні тисяч нових письменників вийшли в Інтернет. Багато з цих онлайнових блогів орієнтовані на розробку та веб-розробку. Ви можете знайти багато корисних ресурсів, просто перегортаючи ці RSS-канали.

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

Nettuts+
24 способу
Webmonkey
Порушення кодування
Webitect
Перевірити елемент
Коти, які кодують
Веб-дизайн блогу Line25

Є, звичайно, багато інших, щоб розглянути. Рекомендую натиснути Google у пошуках навчальних посібників та статей на вашому бажаному мові. Потім за допомогою агрегатора RSS-каналів, наприклад, Google Reader, можна налаштувати списки всіх останніх статей з цих журналів. Це відмінний спосіб почати свій робочий день, або навіть убити трохи часу, що пхає через підручники.

jQuery плагіни Галор

Як бібліотека ядра jQuery, так і jQuery Mobile за останній рік отримали велику кількість тяги. Ці бібліотеки з відкритим вихідним кодом працюють над розробкою інтерфейсу, повного багатих анімацій та легких у впровадженні функцій Ajax, хоча мобільні бібліотеки не догнали своїх батьків за допомогою плагінів і коду третьої сторони.

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

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

Якщо ви в кінцевому підсумку працюєте з бібліотекою jQuery Mobile, я хочу порекомендувати інший інструмент jqmPhp. Це динамічний клас PHP, де ви можете посилатися на прості функції для виведення ліній і ліній HTML5-коду, що живиться через jQuery Mobile. Чесно кажучи, це найпростіший спосіб створити прототип динамічних мобільних додатків, побудованих навколо оболонки PHP. На сайті блогу є безліч прикладів посилань, щоб копатися.

Створення в HTML5 & CSS3

Коли ми говоримо про веб-розробку з інтерфейсом, це, як правило, все про ефективність. У вас немає однакових проблем зі створенням веб-сайту в HTML / CSS, як це було б для кодування додатку Ruby. Існує ніякої реальної логіки або обробки помилок в HTML - це в основному про те, як швидко ви можете масштабувати дизайн макета правильно у всіх браузерах.

Спочатку я повинен почати, рекомендуючи HTML5 Boilerplate. Це шаблон з оголеними кістяками, який включає всі “стандарт” Елементи веб-сторінки HTML5 в одному пакеті. Це включає в себе таблицю стилів за замовчуванням, JavaScript, favicon, іконки Apple touch і багато інших смаколиків. Це 100% безкоштовний проект, і ви навіть можете внести свій внесок у репо Github. Це обов'язковий ресурс для всіх розробників до початку будь-якого серйозного веб-проекту.

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

Дизайнери CSS

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

Система «Золота сітка» фантастична як основа для реагування на веб-дизайн. Ці макети будуть адаптовані до екранів мобільних пристроїв і згортаються всередину під час зміни розміру вікна браузера. Це також допомагає при плануванні ширини і розміру кожної області стовпців. Blueprint є ще однією зручною базою даних CSS, яку ви повинні перевірити. Це чудово для створення власних веб-сайтів і пропонує фантастичну документацію.

Однак, коли мова йде про інструменти CSS, CSS3 PIE має бути в моїх трьох улюблених. Це просте веб-додаток, яке виводить відповідний код для відображення ефектів CSS3, що підтримуються Internet Explorer 6-9. Можна створювати динамічні лінійні градієнти, закруглені кути та тіні вікна за допомогою настроюваних параметрів. На сайті є приклади IE, якщо ви також хочете перевірити їх.

Розробники також прагнуть зменшити розмір файлу для виробництва. Очистити CSS є одним ресурсом, де ви можете вибрати з численних варіантів, щоб спростити код і зменшити розмір файлу. Інший альтернативний код Beautifier не пропонує стільки варіантів, скільки може бути простішим у використанні.

Налаштування тем за допомогою WordPress

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

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

Wonderflux - це ще одна тема шаблону WordPress, яка не є настільки далекою в розвитку. Він був нещодавно випущений з бета-версії в v1.0 разом з деякими онлайн-документації. Ця тема трохи складніша, ніж Constellation, яка дає вам більше контролю над макетом. Розробники включили користувальницькі крюки, функції та фільтри для PHP, щоб зробити ваш сайт WordPress більш динамічним.

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

Пошук безкоштовних веб-розробників

У порівнянні з PSDs та графікою спільнота веб-розробки здається трохи бракує у халяви галереї. Ви завжди можете знайти чудові сценарії на Github, але вам часто доведеться шукати їх і перевіряти їх самі.

Важко знайти веб-сайти, які пропонують безкоштовні завантаження та демо-версії, а також приклади сценаріїв. Мій улюблений новий ресурс - CodeVisually, який каталогізує користувальницькі інструменти розробки, плагіни, бібліотеки та інші акуратні речі. Макет налаштовується як галерея, де на кожній сторінці міститься посилання на продукт, знімок екрана та деякі додаткові деталі.

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

API веб-застосунків

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

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

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

Скористайтеся цими ресурсами на нових проектах, коли це можливо. Веб стає все більш зв'язним, і користувачі завжди злітаються до наступної великої програми. Ви можете набрати тисячі більш відданих учасників у свій додаток, коли вашим відвідувачам не потрібно реєструвати новий обліковий запис і можуть замість цього зареєструватися безпосередньо через Twitter або Facebook.

Ресурси з питань і відповідей

Найбільш вигідний досвід між розробниками ставить питання і вивчає нові методики. Спільнота розробників завжди настільки корисна для новачків і бажає запропонувати свої знання в багатьох ситуаціях. Якщо у вас є якісь труднощі або конкретні запитання щодо проекту, виконайте пошук у Google за відповідним форумом веб-розробника.

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

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

Тестування швидкості сторінки в Інтернеті

Цей новий інструмент, розроблений Google Developers, дійсно був вражаючим. Програма Page Speed Online аналізуватиме вміст веб-сайту та створюватиме аналітичний звіт про ваші швидкості. Це включає в себе можливі рішення, щоб скоротити час завантаження та зберегти відвідувачів сайту довше.

Це також допоможе визначити проблеми з показниками відмов і знизити кількість конверсій. Google Analytics є обов'язковим для будь-якого веб-сайту, але я вважаю, що швидкість сторінки лише досягає більш високого рівня аналізу.

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

Найкраще програмне забезпечення для розробників

Між двома найпопулярнішими операційними системами можна знайти десятки програм. Від графічного програмного забезпечення до редакторів вихідних кодів і середовищ розробки, існує багато ресурсів для веб-розробників. Але якщо ви шукаєте популярні пропозиції, я рекомендую наступні назви.

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.

Microsoft Windows

Пакет програмного забезпечення Adobe завжди приходить на розум, коли ви думаєте про веб-дизайн і розробку. Користувачі Windows мають багато альтернатив до Dreamweaver, і багато з них абсолютно безкоштовні.

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

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

Інші корисні ресурси Dev

100 Основні інструменти веб-розробки
Кращий з 2011: Кращі корисні плагіни та підручники jQuery
Підручники Ruby on Rails для початківців веб-розробки
7 Захоплюючі тенденції веб-розробки у 2011 році

Висновок

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

Я сподіваюся, що ця величезна компіляція інструментів і ресурсів підштовхне вашу методологію до кращого розвитку. Я люблю працювати з веб-розробниками і постійно дізнаватися про нові проекти. І все-таки є тільки так багато місця для нових ресурсів, які ми можемо включити, так що я зобов'язаний пропустити кілька перлин. Якщо у вас є ідеї або пропозиції щодо відповідних ресурсів веб-розробника, повідомте нам про це в поштовій дискусійній області.