25 съвета за уеб разработка за повишаване на вашите умения

Често се казва, че няма заместител на опита, но има преки пътища към него. Говорихме със опитни разработчици; хора, които се трудят над цикли и преобръщат атрибутите всеки ден. Тази колекция от съвети идва директно от лицето на кода.

Препълнен като неадекватно определен буфер, googolplex от ноу-хау е филтриран, за да ви предостави 25 фини функции, трикове и съвети. Има услуги с отворен код, за които разработчиците премълчават, хакове за мобилно програмиране и отзивчиви съвети за разработка.

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

Кодиране

1. Изчистване на списъци

Изчистването на плаващи елементи е част от смисъла на повечето уеб разработчици. Все пак можем да ни хванат. Например, как да изчистите плаващи елементи от списъка, без да задавате височина? „Отговорът на тази малка дилема всъщност е много прост“, казва Рис Литъл от Plug and Play , 'Просто добавете следните две CSS свойства към всеки списъчен контейнер с плаващи елементи от списъка.'



display: block;overflow: hidden;

Ако проверите контейнера на списъка сега с който и да е инспектор на DOM, ще откриете, че атрибутът височина е изчислен автоматично - и това решава проблема.



2. Пясъчник

Ако искате да разработите техники, CSS ефекти или нови видове преход например, направете го като проект на пясъчник. „Ако експериментите останат незатрупани от външни влияния, прави кода много по-лесен за отстраняване на грешки, ако нещо не работи според очакванията“, казва Creative Director Шейн С. Милке .

3. Уеб инспектори

Разработчиците се различават по въпроса кой уеб инспектор е най-добър, но всички те са съгласни, че сме се борили преди любимите ни браузъри да ги имат. Нов контекстПол Уилсън посочва, че можете да визуализирате промените в CSS на живо в Chrome или Safari. Щракнете с десния бутон върху елемент и изберете „Inspect Element“, казва Уилсън, „Всички приложени CSS ще бъдат показани в десния панел за проверка. Можете да редактирате или добавите нови елементи тук, за да видите ефектите от промените си. '

Уеб инспекторът не е достъпен по подразбиране в Safari на Mac. Активирайте го, като отидете в Предпочитания> Разширени> Показване на менюто за разработка в лентата с менюта.



4. Firebug и не само

Chrome и Safari имат вграден уеб инспектор, но Майк Балан , Дигитален дизайнер в Медузи стои до оригиналната лента с инструменти за разработчици на Firefox. „Идеалното нещо е да откриете тези малки CSS проблеми, когато тествате сайта си в различни размери на екрана“, казва Майк.

„Firebug току-що добави възможността да показва множество размери на екрана и в един раздел на браузъра - което означава, че никога няма да се наложи да променяте ширината на браузъра си, за да тествате отново сайта си.“

5. Едно по едно

Бен Хаудъл , разработчик на Didlr в wapple.net , казва, че не може достатъчно да подчертае значението на Принципа на единната отговорност. „Всеки обект във вашия код трябва да има една функция. Дори и с CSS. Не поставяйте всички стилове в клас .button. Разделете го на .button-structure и .button-face и така нататък ... '

Защо? Защото, ако не направите това и нещо се счупи, ще имате много време да проследите обратно през кода си, да откриете кой обект е проблемът - и дали грешката е наследена от по-високо в DOM.



6. Можете ли да го кодирате?

Бен също смята, че връщането към рамки и библиотеки не винаги е най-добрият отговор. „Ако кодирате малък проект и винаги, например, включвате jQuery, помислете‘ Мога ли да направя това с Vanilla JS? ’“ Може да откриете, че наистина можете да го направите в JavaScript, по-добре и по-бързо.

Управление на проекти

7. Вземете Git

Ако работите по големи проекти, имате нужда от стабилна система за версии. Много разработчици се кълнат в GitHub, но има и недостатък, ако вашият проект е частен. Кодът ви се хоства на сървърите на GitHub и е обществено достъпен. Хората в Plug and Play Препоръчвам GitLab .

„GitLab е много подобен на GitHub, но е напълно отворен код и е свободен за настройка на собствените ви сървъри“, казва Рис Литъл. „Най-добрата настройка за GitLab е да се използва NGINX с еднорог за подобряване на производителността и скоростта - но Apache с пътника също ще работи.

„Най-голямото предимство на тази договореност е, че целият ви код се архивира всеки път, когато се ангажирате, с наистина полезен разглеждащ разлики, за да можете да видите какво е променено при всеки ангажимент.“

8. Коментиран код

По-специално екипните работници, не забравяйте, че други хора трябва да разберат вашия код - използвайте вашите ресурси и работете с вашите файлове. „Не бъдете мързеливи“, казва Шейн С. Милке. „Винаги коментирайте кода си, назовавайте слоевете си и организирайте вашите PSD и FLA. Колкото по-организирани са вашите файлове, толкова по-лесно е за вас или за другите да влезете и да разберете къде са нещата и как работят. '

9. Защитете сайта си

Преди да стартирате на живо с уебсайт, не забравяйте да го пуснете ASafaWeb.com (произнася се A-Safer-Web). „Този ​​сайт, написан от Microsoft MVP Troy Hunt, сканира уебсайтове на ASP.NET за редица често срещани проблеми със сигурността,“ казва .NET dev Макс Дикинсън . „Ако не успеете на някой от тестовете, той ще ви посъветва как да разрешите проблема.“

най-добрите лаптопи за разработчици на софтуер 2015

10. Автоматизирайте

„Не губете време за внедряване или ръчно провеждане на модулни тестове. Автоматизирайте го, казва Макс, „Времето, прекарано в схващане с NAnt или MSBuild, е добре прекарано време, тъй като ще намали броя на обръчите, през които трябва да преминете, когато този краен срок наближава.“

11. Екип тракер

Екипът на Неконсолидирано консултиране използване Основен тракер и Основен усилвател за управление на проекти и проследяване на функции / грешки. „Има и други инструменти за това, но Pivotal Tracker е прост и лек вариант“, казаха от екипа. „Редовно го използваме, за да проследим напредъка чрез проектите.“

12. Перфектни снимки

Pixel Perfect е инструмент Без кутия за сравнение на първоначалните проекти с действителния преден край, който процесът на разработка изплюва. „Този ​​малък плъгин за Firefox ви позволява да наслагвате jpeg версия на вашите дизайни точно в горната част на страницата“, казват от екипа на Unboxed. „Можете да проверите до последния пиксел, че всичко се подрежда!“

13. Пунктирани линии

Unboxed има интелигентна, интуитивна идея за проследяване на напредъка в кодиращите страници. „Понякога като работим върху предния край, използваме CSS клас„ непълен “или„ todo “, който дава пунктиран контур на елементи, които не работят или са незавършени“, казва ни екипът. „Можем ясно да видим какво трябва да работи, преди да стартираме на живо.“

Подвижен

14. Активни телефонни номера

„Повечето мобилни устройства имат способността да осъществяват повиквания, така че се възползвайте от това в кода на вашата страница“, казва Майк Балан. Увийте номера в етикет. Вместо http: // като протокол използвате „tel:“

Ето как може да изглежда това:

0123456789

15. Високо или ниско?

Готов ли е вашият сайт за екрани на ретината? Не мислете, че сте добре, само защото в момента числата са на ваша страна, защото това няма да остане така завинаги.

„Има няколко решения за превключване на изображения в зависимост от реакцията към разделителната способност на екрана“, казва Майк. „Има рамката на JavaScript retina.js който използва конвенцията за именуване @ 2x на Apple, за да замени стандартните изображения с версии с висока резолюция.

„Възможно е също така да се предоставят изображения с висока разделителна способност на устройства с iOS, като се използва webkit-image-set“. Ето как:

.header { background: -webkit-image-set( url(images/header.jpg) 1x, url(images/header_2x.jpg) 2x);}

16. Фиксирана позиция

Искате да имате фиксирана навигация или лента за контакти в долната част на вашия сайт? Що се отнася до мобилните устройства, ще трябва да имате предвид, че само няколко браузъра поддържат класа „фиксиран“. „Windows Phone 7 ще замени класа„ фиксиран “със„ статичен “- което не е хубаво нещо“, казва Майк.

Ето списъка му с мобилни операционни системи, които поддържат атрибута ‘fixed’ в CSS:

  • Mobile Safari iOS5 и по-нови версии
  • Android 3 и по-нови версии
  • Blackberry 7.0 и по-нови

Преки пътища

17. Спрайт ме

Превърнете бутоните, иконите и фона в спрайтове, за да ускорите изтеглянето на страници. Комбинирането на множество изображения в един файл намалява броя на заявките, които клиентът трябва да направи към вашия сървър. „Някои разработчици ще групират изображения по тип“, казва Рис Литъл, „Други просто ще комбинират всичко в един файл“.

След това използвате атрибута CSS background-position, за да покажете само частта от изображението, която искате. Изображението се изтегля веднъж, веднъж се кешира и веднъж се иска. Ако това ви звучи като твърде много упорита работа, използвайте онлайн инструмент SpriteMe да върши магарешката работа. Той сканира страницата ви за изображения, които може да комбинира и генерира CSS за вас.

18. Бяло пространство

„Намаляването на празното пространство и дори имената на функциите на вашия JavaScript и CSS значително ще намали времето за зареждане на страницата ви“, казва Рис. Той предлага да комбинирате всичките си JavaScript и CSS в един или два файла, след което да ги предадете YUI компресор .

19. Действия

Дори дизайнерите забравят колко лесно действията на Photoshop могат да направят живота им. Разработчиците няма да забравят това: Photoshop Web Workflow .

„Веднъж инсталиран, щракнете върху който и да е слой във Photoshop и натиснете клавиша F1, казва Пол Уилсън,„ Това хваща слоя, поставя го в нов документ с точните размери и извежда прозореца „Запазване за уеб“.

Проста звукова последователност, но такава, която ще направи създаването на фона, прототипирането и правенето на спрайт много по-бързо

най-добрият молив за ipad air 2

20. Ако тогава

Киър Уитакър на Viewport Industries не може да живее без приложението на Mac TextExpander: „Позволява ви да задавате преки пътища на големи парчета текст. Например, ако искам да изведа цикъла на WordPress в моя редактор на код, аз просто въвеждам // цикъл. Той работи широко в системата и е чудесен инструмент за изграждане на отнемащи време кодови структури, като вложени списъци.

21. Обновен

Киър също е фен на CodeKit „Ако сте на Mac, тогава CodeKit е задължително“, казва той, „Функцията за презареждане на браузъра си заслужава само малките разходи. Също така е чудесно за оптимизиране на изображения и компилиране на Sass и JavaScript.

22. Всички имате поща

„Това е работа на пълен работен ден за поддържане на пощенската функция на вашето приложение, така че спестете си главоболие и го възложете на външни изпълнители“, казва UX Developer Уил Грант . Услуги като SendGrid или Mandrill се справят с доставката, защитата от нежелана поща, отчетите за отскачане - партидата. „Тези неща са супер евтини или дори безплатни за първите няколко хиляди имейла.“

Адаптивни сайтове

23. Запитвания за медии

„Когато създавате отзивчиви сайтове, медийните заявки са гръбнакът на процеса,“ казва Майк Балан, „Те съответстват на типа мултимедия на вашето устройство и показват CSS, който сте декларирали“. Например:

body { text-color:#000000; }@media only screen and (min-width:1200px) {body { text-color:#FF0000; }}

Кодът по-горе улавя разделителните способности на екрана при 1200px или по-висока и прилага червения цвят към целия текст на страницата. Ако размерът на екрана е по-малък от 1200px, той ще покаже черен текстов текст.

Засега е толкова просто - но опитни разработчици знаят, че този процес скоро може да стане тромав, докато през цялото време се мъчите да угодите на всички хора.

„Използвайте CSS Framework като изумявам - казва Майк. Той заменя необходимостта от писане на милиард различни медийни заявки с прости, семантични класове

24. По-тежък избор

Ако тогава се изисква по-тежка рамка Bootstrap на Twitter или Фондация на ZURB може да свърши работа.

25. Изключете нещата

„Когато правите отзивчиви сайтове, всъщност не искате потребителите да могат да докосват и мащабират двукратно, тъй като цялото ви съдържание трябва да се вижда“, казва Майк Балан, „За да направите това, ще трябва да добавите код, който деактивира мащабирането на потребителя. и мащабиране “.

Този код също ще позволи на iOS устройството да показва сайтовете по-елегантно, когато iPad или iPhone се завъртят.

Нашите експерти бяха:

Кир Уитакър, съосновател на базираната баня Viewport Industries , е работил със списание Carsonified and Smashing Magazine.

Рис Литъл от Включете и играйте Саутхемптън предложи няколко най-добри съвета за CSS.

Шейн С. Милке е дизайнер и креативен директор с клиенти, включително LucasArts, Nintendo и Sony Pictures Studio.

Пол Уилсън е доктор по медицина Нов контекст Шотландия, която е специализирана в гъвкаво разработване на проекти в Ruby on Rails.

Майк Балан е дигитален дизайнер в Медузи който е толкова прав с XHTML и CSS, колкото и Photoshop.

Macs Dickinson е уелски .NET разработчик, който живее в Йоркшир. Той е @MacDickinson в Twitter.

Бен Хаудъл е част от екипа, който току-що завърши разработването на Didlr в wapple.net . Това е приложение за рисуване за уеб и мобилни устройства.

как да видите снимки, които сте харесали в instagram на компютър

Екипът на Неконсолидирано консултиране са майстори по управление на проекти и разработчици на Ruby on Rails.

Уил Грант е потребителски опит (UX) и технологичен консултант с Биткала .