0

1

2

2.1

2.2

2.3

2.4

2.5

2.6

2.7

2.8

2.9

2.10

3

3.1

3.1.1

3.1.2

3.1.3

3.1.4

3.1.5

3.1.6

3.1.7

3.1.8

3.1.9

3.1.10

3.1.11

3.1.12

3.1.13

3.1.14

3.1.15

TableofContentsIntroduction

Whatisafront-enddeveloper?

PartI:Thefront-endpractice

Front-endjobstitles

Commonwebtechemployed

Front-enddevskills

Front-enddevsdevelopfor...

Front-endonateam

Generalistmyth

Front-endinterviewquestions

Front-endjobboards

Front-endsalaries

HowFD'saremade

PartII:Learningfront-enddev

Selfdirectedlearning

Learninternet/web

Learnwebbrowsers

LearnDNS

LearnHTTP/networks

Learnwebhosting

Learngeneralfront-enddev

LearnUI/interactiondesign

LearnHTML&CSS

LearnSEO

LearnJavaScript

Learnwebanimation

LearnDOM,BOM&jQuery

Learnwebfonts

Learnaccessibility

Learnweb/browserAPI's

Front-endHandbook

2

3.1.16

3.1.17

3.1.18

3.1.19

3.1.20

3.1.21

3.1.22

3.1.23

3.1.24

3.1.25

3.1.26

3.1.27

3.1.28

3.1.29

3.1.30

3.1.31

3.1.32

3.2

3.2.1

3.3

3.4

4

4.1

4.2

4.3

4.4

4.5

4.6

4.7

4.8

4.9

4.10

4.11

4.12

LearnJSON

Learnstaticsitegenerators

Learnfront-endapparchitecture

LearnInterface/APIdesign

Learnwebdevtools

Learncommandline

Learnnode.js

Learnmoduleloader

Learnpackagemanagers

Learnversioncontrol

Learnbuild&taskautomation

Learnsiteperformanceoptimization

LearnJStesting

Learnheadlessbrowsers

Learnofflinedev

Learnsecurity

Learnmulti-thingdev(e.g.RWD)

Directedlearning

front-endschools,courses,&bootcamps

Front-enddevstolearnfrom

Newsletters,news,&podcasts

PartIII:Front-enddevtools

Generalfront-enddevtools

Doc/APIbrowsingtools

SEOtools

Prototyping&wireframingtools

Diagrammingtools

HTTP/networktools

Codeeditingtools

Browsertools

HTMLtools

CSStools

DOMtools

JavaScripttools

Front-endHandbook

3

4.13

4.14

4.15

4.16

4.17

4.18

4.19

4.20

4.21

4.22

4.23

4.24

4.25

4.26

4.27

4.28

4.29

4.30

4.31

4.32

4.33

4.34

4.35

4.36

4.37

Staticsitegeneratorstools

App(desktop,mobile,tabletetc..)tools

Scaffoldingtools

Templatingtools

UIwidgets&componentstools

Datavisualization(e.g.charts)tools

Graphics(e.g.SVG,canvas,webgl)tools

Animationtools

JSONtools

Testingframeworktools

Datastoragetools

Module/packageloadingtools

Module/packagerepo.tools

Web/cloud/statichostingtools

Projectmanagement&codehosting

Collaboration&communicationtools

CMShosted/APItools

BAAS(forfront-enddevs)tools

Offlinetools

Securitytools

Tasking(akabuild)tools

Deploymenttools

Site/appmonitoringtools

JSerrormonitoringtools

Performancetools

Front-endHandbook

4

Front-endDeveloperHandbookWrittenbyCodyLindleysponsoredby—FrontendMasters

Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingit.

Itisspecificallywrittenwiththeintentionofbeingaprofessionalresourceforpotentialandcurrentlypracticingfront-enddeveloperstoequipthemselveswithlearningmaterialsanddevelopmenttools.Secondarily,itcanbeusedbymanagers,CTO's,instructors,andheadhunterstogaininsightsintothepracticeoffront-enddevelopment.

Thecontentofthehandbookfavorswebtechnologies(HTML,CSS,DOM,andJavaScript)andthosesolutionsthataredirectlybuiltontopoftheseopentechnologies.Thematerialsreferencedanddiscussedinthebookareeitherbestinclassorthecurrentofferingtoaproblem.

Thebookshouldnotbeconsideredacomprehensiveoutlineofallresourcesavailabletoafront-enddeveloper.Thevalueofthebookistiedupinaterse,focused,andtimelycurationofjustenoughcategoricalinformationsoasnottooverwhelmanyoneonanyoneparticularsubjectmatter.

Theintentionistoreleaseanupdatetothecontentyearly.

Thehandbookisdividedintothreeparts.

PartI:Thefront-endpracticePartonebroadlydescribesthepracticeoffront-endengineering.

PartII:Learningfront-enddevelopmentParttwoidentifiesself-directedanddirectresourcesforlearningtobecomeafront-enddeveloper.

PartIII:Front-enddevelopmenttoolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.

Front-endHandbook

5Introduction

downloada.pdf,.epub,or.mobifilefrom:

https://www.gitbook.com/book/frontendmasters/front-end-handbook/detailscontributecontent,suggestions,andfixesongithub:

https://github.com/FrontendMasters/front-end-handbook

Front-endHandbook

6Introduction

Whatisafront-enddeveloper?Afront-enddeveloperarchitectsanddevelopswebsitesandapplicationsusingwebtechnologies(i.e.HTML,CSS,DOM,andJavaScript),whichrunonthewebplatformoractascompilationinputfornon-webplatformenvironments(i.e.NativeScript).

imagesource:https://www.upwork.com/hiring/development/front-end-developer/

Typically,apersonentersintothefieldoffront-enddevelopmentbylearningtodevelopHTML,CSS,andJScode,whichrunsinawebbrowser,headlessbrowser,webview,orascompilationinputforanativeruntimeenvironment.Thefourruntimesscenariosareexplainedbelow.

Awebbrowserissoftwareusedtoretrieve,present,andtraverseinformationontheWWW.Typically,browsersrunonadesktop,laptop,tablet,orphone,butasoflateabrowsercanbefoundonjustaboutanything(i.eonafridge,incars,etc...).

Themostcommonwebbrowsersare:

ChromeInternetExplorerFirefoxSafari

Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbecontrolledfromacommandlineinterfaceforthepurposeofwebpageautomation(e.g.functionaltesting,scraping,unittestingetc..).Thinkofheadlessbrowsersasabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraversewebpages.

Themostcommonheadlessbrowsersare:

PhantomJSslimerjs

Front-endHandbook

7Whatisafront-enddeveloper?

trifleJSWebviewsareusedbyanativeOStorunwebpages.Thinkofawebviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanativeapplicationrunningonadevice.

Themostcommonsolutionsforwebviewdevelopmentare:

Cordova(typicallyfornativephone/tabletapps)NW.js(typicallyusedfordesktopapps)Electron(typicallyusedfordesktopapps)

Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-enddeveloperstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asoflate,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.CSSandJavaScript),withoutwebengines,tocreatetrulynativeapplications.

Someexamplesoftheseenvironmentsare:

NativeScriptReactNative

Front-endHandbook

8Whatisafront-enddeveloper?

PartI.Thefront-endpracticePartonebroadlydescribesthepracticeoffront-endengineering.

Front-endHandbook

9PartI:Thefront-endpractice

Front-endjobstitlesBelowisalistanddescriptionofvariousfront-endjobtitles.Thecommon,ormostused(i.e.generic),titleforafront-enddeveloperis,"front-enddeveloper"or"front-endengineer".Notethatanyjobthatcontainstheword"front-end","client-side","webUI","HTML","CSS",or"JavaScript"typicallyinfersthatapersonhassomedegreeofHTML,CSS,DOM,andJavaScriptprofessionalknowhow.

Front-endDeveloper/Engineer(akaFront-endWebDeveloper/Engineer,Client-sideDeveloper/Engineer,Front-endSoftwareDeveloper/EngineerorUIEngineer)

ThegenericjobtitlethatdescribesadeveloperwhoisskilledtosomedegreeatHTML,CSS,DOM,andJavaScriptandimplementingthesetechnologiesonthewebplatform.

CSS/HTMLDeveloper

Thefront-endjobtitlethatdescribesadeveloperwhoisskilledatHTMLandCSS,excludingJavaScriptandApplicationknowhow.

Front-endJavaScript(optionally...Application)Developer

Whentheword"JavaScriptApplication"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldbeanadvancedJavaScriptdeveloperpossessingadvancedprogramming,softwaredevelopment,andapplicationdevelopmentskills(i.ewillhavesolidexperiencebuildingfront-endapplications).

Front-endWebDesigner

Whentheword"Designer"isincludedinthejobtitle,thiswilldenotethatthedesignerwillpossesfront-endskills(i.e.HTML&CSS)butalsoprofessionaldesign(VisualDesignandInteractionDesign)skills.

Web/Front-endUserInterface(akaUI)Developer/Engineer

Front-endHandbook

10Front-endjobstitles

Whentheword"Interface"or"UI"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldpossesinteractiondesignskillsinadditiontofront-endskills.

Mobile/TabletFront-endDeveloper

Whentheword"Mobile"or"Tablet"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasexperiencedevelopingfront-endsthatrunonmobileortabletdevices(eithernativelyoronthewebplatformi.e.inabrowser).

Front-endSEOExpert

Whentheword"SEO"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiestowardsanSEOstrategy.

Front-endAccessibilityExpert

Whentheword"Acessibility"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiesthatsupportaccessibilityrequirementsandstandards.

Front-endDev.Ops

Whentheword"DevOps"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencewithsoftwaredevelopmentpracticespertainingtocollaboration,integration,deployment,automation,andmeasurement.

Front-endTesting/QA

Whentheword"Testing"or"QA"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencetestingandmanagingsoftwarethatinvolvesunittesting,functionaltesting,usertesting,andA/Btesting.

Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjobtitlesthesewordsmaybeusedtobyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopmenti.e.bothfront-end(potentiallyincludingdesign)andback-

Front-endHandbook

11Front-endjobstitles

end.

Front-endHandbook

12Front-endjobstitles

Webtechnologiesemployedbyfront-enddevelopers

imagesource:http://www.2n2media.com/compare-front-end-development-and-back-end-development

Thefollowingwebtechnologiesareemployedbyfront-enddevelopers:

HyperTextMarkupLanguage(akaHTML)CascadingStyleSheets(akaCSS)DocumentObjectModel(akaDOM)JavaScriptProgrammingLanguage(aka:ECMAScript6,ES6,JavaScript2015)WebAPI's(akaHTML5andfriendsorBrowserAPI's)HypertextTransferProtocol(akaHTTP)UniformResourceLocator's(akaURL)JavaScriptObjectNotation(akaJSON)WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)

Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.

HyperTextMarkupLanguage(akaHTML)

HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.-wikipedia.org

Front-endHandbook

13Commonwebtechemployed

Mostrelevantspecifications/documentation:

HTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebTheelementsofHTMLfromtheLivingStandardTheHTMLSyntaxfromtheLivingStandardAllW3CHTMLSpecHTMLelementreferenceHTMLattributereferenceGlobalattributes

CascadingStyleSheets(akaCSS)

CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.-wikipedia.org

Mostrelevantspecifications/documentation:

CascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationSelectorsLevel3AllW3CCSSSpecificationsCSSreference

DocumentObjectModel(akaDOM)

TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).-wikipedia.org

Mostrelevantspecifications/documentation:

W3CDOM4DOMLivingStandardDocumentObjectModel(DOM)Level3EventsSpecification

JavaScriptProgrammingLanguage(aka:ECMAScript6,ES6,JavaScript2015)

Front-endHandbook

14Commonwebtechemployed

JavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.-wikipedia.org

Mostrelevantspecifications/documentation:

ECMAScript®2015LanguageSpecification

WebAPI's(akaHTML5andfriends)

WhenwritingcodefortheWebusingJavaScript,thereareagreatmanyAPIsavailable.Belowisalistofalltheinterfaces(thatis,typesofobjects)thatyoumaybeabletousewhiledevelopingyourWebapporsite.-Mozilla

Mostrelevantdocumentation:

WebAPIInterfaces

HypertextTransferProtocol(akaHTTP)

TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.-wikipedia.org

Mostrelevantspecifications:

HypertextTransferProtocol--HTTP/1.1HypertextTransferProtocolversion2draft-ietf-httpbis-http2-16

UniformResourceLocators(akaURL)

Auniformresourcelocator(URL)(alsocalledawebaddress)isareferencetoaresourcethatspecifiesthelocationoftheresourceonacomputernetworkandamechanismforretrievingit.AURLisaspecifictypeofuniformresourceidentifier(URI),[3]althoughmanypeopleusethetwotermsinterchangeably.AURLimpliesthemeanstoaccessanindicatedresource,whichisnottrueofeveryURI.[4][5]URLsoccurmostcommonlytoreferencewebpages(http),butarealsousedforfiletransfer(ftp),email(mailto),databaseaccess(JDBC),andmanyotherapplications.-wikipedia.org

Front-endHandbook

15Commonwebtechemployed

Mostrelevantspecifications:

UniformResourceLocators(URL)URLLivingStandard

JavaScriptObjectNotation(akaJSON)

JSON,sometimesJavaScriptObjectNotation,isanopenstandardformatthatuseshuman-readabletexttotransmitdataobjectsconsistingofattribute–valuepairs.Itistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.-wikipedia.org

Mostrelevantspecifications:

IntroducingJSONTheJSONDataInterchangeFormatJSONAPI

WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)

Accessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).-wikipedia.org

WebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatusAccessibleRichInternetApplications(WAI-ARIA)CurrentStatus

Front-endHandbook

16Commonwebtechemployed

Front-enddevskills

imagesource:http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

BasictoadvancedHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserskillsareassumedforanytypeoffront-enddeveloper.

BeyondHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserdevelopment,afront-enddevelopercouldbeskilledinoneofthefollowing:

Contentmanagementsystems(akaCMS)Node.jsCross-browsertestingCross-platformtestingUnitTestingCross-devicetestingAccessibility/WAI-ARIASearchEngineOptimization(akaSEO)InteractionorUserInterfacedesignUserExperienceUsabilityE-commerceSystemsPortalSystemsWireframingCSSlayout/GridsDOMmanipulation(e.g.jQuery)MobileWebPerformance

Front-endHandbook

17Front-enddevskills

LoadTestingPerformanceTestingProgressiveEnhancement/GracefulDegradationVersionControl(e.g.GIT)MVC/MVVM/MV*FunctionalProgrammingDataFormats(e.g.JSON,XML)DataAPI's(e.gRestfulAPI)WebFontEmbeddingScalableVectorGraphics(akaSVG)RegularExpressionsContentStrategyMicrodata/MicroformatsTaskRunners,BuildTools,ProcessAutomationToolsResponsiveWebDesignObjectOrientedProgrammingApplicationArchitectureModulesDependencyManagersPackageManagersJavaScriptAnimationCSSAnimationCharts/GraphsUIwidgetsCodeQualityTestingCodeCoverageTestingCodeComplexityAnalysisIntegrationTestingCommandLine/CLITemplatingStrategiesTemplatingEnginesSinglePageApplicationsXHRRequests(akaAJAX)Web/BrowserSecurityHTMLSemanticsBrowserDeveloperTools

Front-endHandbook

18Front-enddevskills

Front-enddevelopersdevelopfor...Afront-enddevelopercraftsHTML,CSS,andJSthatrunsonthewebplatform(e.g.awebbrowser)ononeofthefollowingoperatingsystems(akaOS's):

WindowsWindowsPhoneOSXiOSAndroidUbuntu(orsomeflavorofLinux)Chromium

Theseoperatingsystemstypicallyrunononeormoreofthefollowingdevices:

DesktopcomputerLaptop/NetbookcomputerMobilephoneTabletTVWatchThings(i.e.anythingyoucanimagine,car,refrigerator,lights,thermostatetc..)

Front-endHandbook

19Front-enddevsdevelopfor...

imagesource:https://ams-ix.net/newsitems/87

Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimescenarios:

Awebbrowser(examples:Chrome,IE,Safari,Firefox)runningonanOS.Aheadlessbrowser(examplesphantomJS)drivenfromaCLIrunningonanOS.AWebView/browsertab(thinkiframe)embeddedwithinanativeapplicationasaruntimewithbridgetonativeAPI's.WebViewapplicationstypicallycontainaUIconstructedfromwebtechnologies.(i.e.HTML,CSS,andJS).(examples:ApacheCordova,NW.js,Electron)AnativeapplicationbuiltfromwebtechthatisinterpretedatruntimewithabridgetonativeAPI's.TheUIwillmakeuseofnativeUIparts(e.g.iOSnativecontrols)notwebtechnologies.(examples:NativeScript,ReactNative)

Front-endHandbook

20Front-enddevsdevelopfor...

Front-endonateamAfront-enddeveloperistypicallyonlyoneplayeronateamthatdesignsanddevelopswebsites,webapplications,ornativeapplicationsrunningonwebtechnologies.(Note:Adeveloperwhobuildseverythingwasoncecalleda"webmaster"butasoflatetheserareandmythicaldevelopersarecalled"full-stackdevelopers").

Abarebonesteamforbuildingprofessionalsitesorsoftwareonthewebwillminimallycontainthefollowingroles.

VisualDesigner(i.e.fonts,colors,spacing,emotion,visualsconcepts&themes)UI/InteractionDesigner/InformationArchitect(i.e.wireframes,specifyingalluserinteractionsandUIfunctionality,structuringinformation)Front-endDeveloper(i.e.writescodethatrunsinclient/ondevice)Back-endDeveloper(i.e.writescodethatrunsonserver)

Therolesareorderedaccordingtooverlappingskills.Afront-enddeveloperwilltypicallyhaveagoodhandleonUI/Interactiondesignaswellasback-enddevelopment.Itisnotuncommonforteammemberstofillmorethanonerolebytakingontheresponsibilitiesofanover-lappingrole.

Itisassumedthattheteamisbeingdirectedbyaprojectleadofsomekindofproductowner(i.e.stakeholder,projectmanager,projectleadetc...)

Alargerwebteammightincludethefollowingrolesnotshownabove:

VisualDesignersInterfaceDesign/InteractionDesigner/InformationDesignSEOstrategistFront-endDeveloperDevOpsEngineersBack-endDeveloperAPIDeveloperDatabaseAdministratorQAEngineer/Testers

Front-endHandbook

21Front-endonateam

Generalistmyth

imagesource:http://andyshora.com/full-stack-developers.html

Therolesrequiredtodesignanddevelopawebsolutionrequireadeepskillsetandvastexperienceintheareaofvisualdesign,UI/interactiondesign,front-enddevelopment,andback-enddevelopment.Anyperson(akageneralistorfull-stackdeveloper/designer)whocanfilloneormoreofthese4rolesataprofessionallevelisarareexceptiontotherule.

Pragmatically,youshouldseektobe,orseektohire,anexpertinoneoftheseroles.Thosewhoclaimtooperateatanexpertlevelatoneormoreoftheserolesareexceptionallyrareandmorethanlikelymythical,givenmodernstacks.

Front-endHandbook

22Generalistmyth

imagesource:http://andyshora.com/full-stack-developers.html

Front-endHandbook

23Generalistmyth

Front-endinterviewsQuestionsyoumaygetasked:

Front-endJobInterviewQuestionsInterviewQuestionsforfront-end-Developer10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFrontEndQuizJavascriptQuiz

Questionsyouask:

Anopensourcelistofdeveloperquestionstoaskprospectiveemployers

Front-endHandbook

24Front-endinterviewquestions

Front-endjobboardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.

frontenddeveloperjob.comauthenticjobs.comweworkremotely.comjobs.github.comcareers.stackoverflow.comangularjobs.comjobs.emberjs.comjobs.jsninja.comcss-tricks.com/jobsglassdoor.com

Front-endHandbook

25Front-endjobboards

Front-endsalariesThenationalaverageintheU.Sforafront-enddeveloperis$75k.

Anexperiencedfront-enddeveloperpotentiallycanlivewherevertheywant(i.e.workremotely)andmakeover$150kayear(visitangel.co,sign-up,reviewfront-endjobsover$150k).

imagesource:http://intersog.com/blog/chicago-tech-salary-guide-2015/

Front-endHandbook

26Front-endsalaries

Howfront-enddevelopersaremade

imagesource:http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg

Howexactlydoesonebecomeafront-enddeveloper?Well,it'scomplicated.Stilltodayyoucan'tgotocollegeandexpecttograduatewithadegreeinfront-endengineering.And,Irarelyhearoformeetfront-enddeveloperswhosufferedthroughwhatislikelyadeprecatedcomputersciencedegreeorgraphicdesigndegreetoendupwritingHTML,CSS,andJavaScriptprofessionally.Infact,mostofthepeopleworkingonthefront-end,eventoday,generallyseemtobeselftaughtandnottraditionallytrainedasaprogrammer.Whyisthisthecase?

Afront-enddeveloperisnotafocusedvisualdesigneroraninteractiondesigner.Designschoolisnotexactlytheplacetohonefront-endskills.Afront-enddeveloperisnotexactlyatraditionallytrainedcomputersciencegraduateeither.Focusingoneitherdoesn'tprepareapersonforfront-enddevelopment.And,infact,followingthetraditionalpathsforeitherinthehighereducationsystemsofAmerica(i.e.College)canderailapersonfrompotentiallyfindingadoorwayintoapracticewhereactualexperienceisking.Today,ifyouwanttobeafront-enddeveloper,youteachyourselforyoutakewhatislikelyanonaccreditedprogram,course,bootcamp,orclass.

Front-endHandbook

27HowFD'saremade

Afront-endengineercraftstheskeletonthattheuserinterfacerestsupon.Theymust,attimes,careasmuchabouttheinteractiondesignastheydoabouttheunderlyingcodethatcreatestheUIinteractions.Therefore,manyinpracticetodaydonotcometofront-endengineeringwithprogrammingskills,but,instead,fromtheotherdirection.Thatis,front-enddevelopmentseemstobefilledwithmoredesignertypesturneddeveloperthanprogrammertypesturnedfront-enddeveloper.Ofcourse,asJavaScripthasgrownup,sohasthedesirebymoretraditionallytrainedprogrammerstobringtheirknowledgetothefront-endpractice.Ifyouarenotaware,front-enddevelopershavenotalwaysbeenconsideredby"real"programmersas,well,programmers.Buttimesareachanging.

Withallofthatsaid,Ibelievethatthepathtoacareerasafront-enddeveloperisverymuchanunknownprocess.WhatIcansayisthattobecomeafront-endengineeronemustknowanduseHTML,CSS,DOM,andJavaScriptatahighlevelwithoutignoringinteractiondesignortraditionalprogrammingknowhow.Infact,frommyexperience,thebestfront-enddevelopersoftenhaveamasteryunderstandingofinteractiondesignandprogramming,butfromthecontextofthewebplatform(i.e.browsers,HTML,CSS,DOM,andJavaScript).Andforwhateverreason,thisknowledgeisoftenfoundnotgiven.Thatistosay,front-endengineeringstillseemsverymuchtobeapracticemadeupofselftaughtpeople,asopposedtoafieldthatcorrespondsdirectlytoaneducationalfocusfromanorganizedandaccreditedhigherlearningsituation.

Ifyouweretosetouttodaytobecomeafront-enddeveloperIwouldlooselystrivetofollowtheprocessoutlinedbelow.Theprocessassumesyouareyourownbestteacher.

1. Learn,roughly,howthewebworks.Makesureyouknowthe"what"and"where"ofDomains,DNS,URL's,HTTP,networks,browsers,servers/hosting,databases,JSON,dataAPI's,HTML,CSS,DOM,andJavaScript.Thegoalistomakesureyoulooselyknowhowitallworkstogetherandexactlywhateachpartisdoing.Focusonthehighleveloutlinesforfront-endarchitectures.Startwithsimplewebpagesandbrieflystudynativewebapplications(akaSPA's).

2. LearnHTML,CSS,Accessibility,andSEO.3. LearnthefundamentalsofUIdesignpatterns,interactiondesign,userexperience

design,andusability.4. Learnthefundamentalsofprogramming5. LearnJavaScript6. LearnJSONanddataAPI's7. LearnCLI/commandline8. Learnthepracticeofsoftwareengineering(i.e.Applicationdesign/architecture,

templates,Git,testing,monitoring,automating,codequality,developmentmethodologies).

9. Getopinionatedandcustomizeyourtoolboxwithwhatevermakessensetoyourbrain.10. LearnNode.js

Front-endHandbook

28HowFD'saremade

Whereyouactuallystopintheprocessiswhatwillseparateafront-endHTML/CSSdeveloperfromanexpertlevelfront-endapplication/JavaScriptdeveloper.

Ashortwordofadviceonlearning.Learntheactualunderlyingtechnologies,beforelearningabstractions.Don'tlearnjQuery,learntheDOM.Don'tlearnSASS,learnCSS.Don'tlearnHAML,learnHTML.Don'tlearncoffeeScript,learnJavaScript.Don'tlearnHandlebars,learnJavaScriptES6templates.Don'tjustuseBootstrap,learnUIpatterns.Whengettingyourstart,youshouldfearmostthingsthatconcealcomplexity.Abstractsinthewronghandscangivetheappearanceofadvancedskills,whileallthetimehidingthefactthatadeveloperhasaninferiorunderstandingofthebasicsorunderlyingconcepts.

Therestofthisbookcontainspointareadertotheresourcesandtoolstofollowthesuggestedprocess.Itisassumedthatyouarenotonlylearning,butalsodoingasyoulearnandinvestigatetools.Somesuggestonlydoing.Whileotherssuggestonlylearningaboutdoing.Isuggestyoufindamixofboththatmatcheshowyourbrainworksanddothat.But,forsure,itisamix!So,don'tjustreadaboutit,doit.Learn,do.Learn,do.Repeatindefinitelybecausethingschangefast.Thisiswhylearningthefundamentals,andnotabstractions,aresoimportant.

Ishouldmentionthatlatelyalotofnon-accreditedfront-endcodeschools/bootcampshaveemerged.Theseavenuesofbecomingafront-enddeveloperareteacherdirectedinclassroom(virtualandphysical)courses,whichfollowamoretraditionalstyleoflearningfromanofficialinstructor(i.e.syllabus,test,quizzes,projects,teamprojects,gradesetc..).Ihavemoretosayabouttheseinstitutionsinthedirectlearningsectionofthishandbook.Inbrief,thisistheweb,everythingyouneedtolearnisonthewebforthetaking(costinglittletonothing).However,ifyouneedsomeonetotellyouhowtotakewhatisactuallyfree,andholdyouaccountableforlearningit,youmightconsideranorganizedcourse.Otherwise,Iamnotawareofanyotherprofessionthatispracticallyfreeforthetakingwithaninternetconnectionandaburningdesireforknowledge.

IfyouwanttogetstartedimmediatelyI'dsuggestthefollowinggeneraloverviewsofthepracticeoffront-enddevelopment:

FrontendGuidelines[read]Beingawebdeveloper[read]IsobarFront-endCodeStandards[read]WebFundamentals[read]Front-endCurriculum[read]freeCodeCamp[interact]PlanningaFront-endJSApplication[watch]So,YouWanttobeaFront-EndEngineer[watch]FrontEndWebDevelopmentCareerKickstart[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]

Front-endHandbook

29HowFD'saremade

Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]IntroductiontoWebDevelopment[watch][$]FoundationsofFront-EndWebDevelopment[watch][$]LeanFront-EndEngineering[watch][$]ABaselineforFront-End[JS]Developers:2015[read]LearnFrontEndWebDevelopment[watch][$]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]

Front-endHandbook

30HowFD'saremade

PartII:LearningParttwoidentifiesself-directed(i.e.atyourownpacewhenyouwant)anddirected(i.e.formalclassroomspecifictimesanddates)resourcesforlearningtobecomeafront-enddeveloper.

Notethatjustbecausealearningresourceislisted,oracategoryoflearningisdocumented,Iamnotsuggestingthatafront-enddeveloperlearneverything.Thatwouldbeabsurd.Chooseyourownsliceofexpertisewithintheprofession.I'mprovidingthepossibilitiesofwhatcouldbemasteredinthefield.

Front-endHandbook

31PartII:Learningfront-enddev

SelfdirectedlearningThissectionfocusesonfreeandpaidresources(videotraining,booksetc..)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.

Theresourcesincludefreematerialandpaidmaterial.Paidmaterialwillbeindicatedwith[$].

Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandvideotraining.

Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:

FrontendMasterspluralsight.com[careful,qualityvaries]tutsplus.comlynda.com[careful,qualityvaries]treehousemijingocodeschool.comlaracastseventedmind.comegghead.iocodecademy.comKhanAcademyTagtreeUdacity

Front-endHandbook

32Selfdirectedlearning

Learninternet/webTheInternetisaglobalsystemofinterconnectedcomputernetworksthatusetheInternetprotocolsuite(TCP/IP)tolinkseveralbilliondevicesworldwide.Itisanetworkofnetworksthatconsistsofmillionsofprivate,public,academic,business,andgovernmentnetworksoflocaltoglobalscope,linkedbyabroadarrayofelectronic,wireless,andopticalnetworkingtechnologies.TheInternetcarriesanextensiverangeofinformationresourcesandservices,suchastheinter-linkedhypertextdocumentsandapplicationsoftheWorldWideWeb(WWW),electronicmail,telephony,andpeer-to-peernetworksforfilesharing.-wikipedia

HowtheInternetWorks[watch]WHATISTHEINTERNET?or,"YouSayTomato,ISayTCP/IP"[read]HowdoestheInternetwork[read]HowdoestheInternetWork?[read]HowtheInternetWorksin5Minutes[watch]HowTheWebWorks[watch][$]

Front-endHandbook

33Learninternet/web

LearnwebbrowsersAwebbrowser(commonlyreferredtoasabrowser)isasoftwareapplicationforretrieving,presenting,andtraversinginformationresourcesontheWorldWideWeb.AninformationresourceisidentifiedbyaUniformResourceIdentifier(URI/URL)andmaybeawebpage,image,videoorotherpieceofcontent.Hyperlinkspresentinresourcesenableuserseasilytonavigatetheirbrowserstorelatedresources.AlthoughbrowsersareprimarilyintendedtousetheWorldWideWeb,theycanalsobeusedtoaccessinformationprovidedbywebserversinprivatenetworksorfilesinfilesystems.-Wikipedia

Themostcommonlyusedbrowsers(onanydevice)are:

1. Chrome(engine:Blink+V8)2. Firefox(engine:Gecko+SpiderMonkey)3. InternetExplorer(engine:Trident+Chakra)4. Safari(engine:Webkit+SquirrelFish)

imagesource:http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201408-201508-bar

Evolutionofbrowsers&webtechnologies(i.e.API's)

www.evolutionoftheweb.com[read]

Front-endHandbook

34Learnwebbrowsers

Timelineofwebbrowsers[read]

Themostcommonlyusedheadlessbrowserare:

PhantomJS(engine:Webkit+SquirrelFish)slimerjs(engine:Gecko+SpiderMonkey)TrifleJS(engine:Trident+Chakra)

Howbrowserswork

20ThingsILearnedAboutBrowsersandtheWeb[read]HowBrowsersWork:Behindthescenesofmodernwebbrowsers[read]FastCSS:HowBrowsersLayOutWebPages[read]

imagesource:http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Optimizingforbrowsers:

WebsitePerformanceOptimization[watch]BrowserRenderingOptimization[watch]

Browsersecurity

BrowserSecurityHandbook[read]HTML5SecurityCheatsheet[read]FrontendSecurity[watch]SecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheTangledWeb:AGuidetoSecuringModernWebApplicationsread

Comparingbrowsers

Front-endHandbook

35Learnwebbrowsers

Comparisonofwebbrowsers[read]

Developingforbrowsers

Inthepast,afront-enddeveloperspentalotoftimemakingcodeworkinseveraldifferentbrowsers.Thiswasonceabiggerissuethanitistoday,unlessyouhavetowritecodeforolderbrowsers(i.e.<IE8).Thisstillremainsanissuetoday,justnotonethatdemandssomuchofthefront-enddeveloperstimeandbraincycles.Thefactofthematterismodernabstractions(e.g.jQuery,pre-processors,transpilers)havedoneawaywithalotofbrowserinconsistencyissues.

Evergreenbrowsers

Thelatestversionsofbrowsersareconsideredevergreenbrowsers.Thatis,intheorytheyaresupposetoautomaticallyupdatethemselvessilentlywithoutpromptingtheuser.Thismovetowardsselfupdatingbrowsershasbeeninreactiontotheslowprocessofeliminatingolderbrowsers.Olderbrowsersarecomplicatedtodevelopforgiventheirdeviationsfromthecommonalitiesbetweenmodernbrowsers(i.e.newspecificationsandthisrateofchange).

Pickingabrowser

Asoftoday,mostfront-enddevelopersuseChromeandthetoolsavailabletoadeveloper,"ChromeDevTools".However,allofthebrowsersofferaflavorofdevelopertools.Pickingonetousefordevelopmentisasubjectivematter.Themoreimportantissueisknowingwhichbrowsersyouhavetosupportandtestingineachasyoudevelop.Selectwhicheverbrowsermakessensetoyourbrainandgetsthejobdone.IsuggestusingChromesimplybecausethedevelopertoolsareconsistentlyimprovingandatthistimecontainthemostrobustfeatures.

Browserhacks

browserhacks.com[read]

Front-endHandbook

36Learnwebbrowsers

LearnDomainNameSystem(akaDNS)TheDomainNameSystem(DNS)isahierarchicaldistributednamingsystemforcomputers,services,oranyresourceconnectedtotheInternetoraprivatenetwork.Itassociatesvariousinformationwithdomainnamesassignedtoeachoftheparticipatingentities.Mostprominently,ittranslatesdomainnames,whichcanbeeasilymemorizedbyhumans,tothenumericalIPaddressesneededforthepurposeofcomputerservicesanddevicesworldwide.TheDomainNameSystemisanessentialcomponentofthefunctionalityofmostInternetservicesbecauseitistheInternet'sprimarydirectoryservice.-wikipedia

imagesource:http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

DNSExplained[watch]HowDNSworks[read]

Front-endHandbook

37LearnDNS

LearnHTTP/networks(includingCORS&WebSockets)

HTTPTheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.-Wikipedia

CORSCross-originresourcesharing(CORS)isamechanismthatallowsrestrictedresources(e.g.fonts)onawebpagetoberequestedfromanotherdomainoutsidethedomainfromwhichtheresourceoriginated.-Wikipedia

WebSocketsWebSocketisaprotocolprovidingfull-duplexcommunicationchannelsoverasingleTCPconnection.TheWebSocketprotocolwasstandardizedbytheIETFasRFC6455in2011,andtheWebSocketAPIinWebIDLisbeingstandardizedbytheW3C.-Wikipedia

HTTP

HTTP:TheProtocolEveryWebDeveloperMustKnow-Part1[read]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part2[read]HTTPFundamentals[watch][$]HTTPSuccinctly[read]HighPerformanceBrowserNetworking:Whateverywebdevelopershouldknowaboutnetworkingandwebperformance[read]

CORS

HTTPStatusCodesin60Seconds[watch]HTTPaccesscontrol(CORS)[read]CORSinAction[read][$]

WebSockets

WebSocket:LightweightClient-ServerCommunications[read][$]TheWebSocketProtocol[read]ConnecttheWebWithWebSockets[watch]

Front-endHandbook

38LearnHTTP/networks

LearnwebhostingAwebhostingserviceisatypeofInternethostingservicethatallowsindividualsandorganizationstomaketheirwebsiteaccessibleviatheWorldWideWeb.Webhostsarecompaniesthatprovidespaceonaserverownedorleasedforusebyclients,aswellasprovidingInternetconnectivity,typicallyinadatacenter.WebhostscanalsoprovidedatacenterspaceandconnectivitytotheInternetforotherserverslocatedintheirdatacenter,calledcolocation,alsoknownasHousinginLatinAmericaorFrance.-wikipedia

imagesource:http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg

Generallearning:

WebHostingBeginnerGuide[read]WebHostingForDummies[read][$]UltimateGuidetoWebHosting[read]

Front-endHandbook

39Learnwebhosting

Learngeneralfront-enddevelopmentGenerallearning:

FrontendGuidelines[read]Beingawebdeveloper[read]IsobarFront-endCodeStandards[read]WebFundamentals[read]Front-endCurriculum[read]freeCodeCamp[interact]PlanningaFront-endJSApplication[watch]So,YouWanttobeaFront-EndEngineer[watch]FrontEndWebDevelopmentCareerKickstart[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]IntroductiontoWebDevelopment[watch][$]FoundationsofFront-EndWebDevelopment[watch][$]LeanFront-EndEngineering[watch][$]ABaselineforFront-End[JS]Developers:2015[read]LearnFrontEndWebDevelopment[watch][$]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]

Generalfront-endnewsletters,newsoutlets,&podcasts:

shoptalkshow.comfrontendfront.comwebtoolsweekly.comO'ReillyWebPlatformRadarTheWdbPlatformPodcastTheWebAheadTheBigWebShowFreshBrewedFrontendMobileWebWeeklyOpenWebPlatformDailyDigestFRONT-ENDDEVweekly

Front-endHandbook

40Learngeneralfront-enddev

Learnuserinterface/interactiondesignUserinterfacedesignUserinterfacedesign(UI)oruserinterfaceengineeringisthedesignofuserinterfacesformachinesandsoftware,suchascomputers,homeappliances,mobiledevices,andotherelectronicdevices,withthefocusonmaximizingtheuserexperience.Thegoalofuserinterfacedesignistomaketheuser'sinteractionassimpleandefficientaspossible,intermsofaccomplishingusergoals(user-centereddesign).-wikipedia

InteractiondesignpatternAdesignpatternisaformalwayofdocumentingasolutiontoacommondesignproblem.TheideawasintroducedbythearchitectChristopherAlexanderforuseinurbanplanningandbuildingarchitecture,andhasbeenadaptedforvariousotherdisciplines,includingteachingandpedagogy,developmentorganizationandprocess,andsoftwarearchitectureanddesign.-wikipedia

Userexperiencedesign-UserExperienceDesign(UXDorUEDorXD)istheprocessofenhancingusersatisfactionbyimprovingtheusability,accessibility,andpleasureprovidedintheinteractionbetweentheuserandtheproduct.Userexperiencedesignencompassestraditionalhuman–computerinteraction(HCI)design,andextendsitbyaddressingallaspectsofaproductorserviceasperceivedbyusers.-wikipedia

Human–computerinteractionHuman–computerinteraction(HCI)researchesthedesignanduseofcomputertechnology,focusingparticularlyontheinterfacesbetweenpeople(users)andcomputers.ResearchersinthefieldofHCIbothobservethewaysinwhichhumansinteractwithcomputersanddesigntechnologiesthatletshumansinteractwithcomputersinnovelways.-wikipedia

MinimallyI'dsuggestreadingthefollowingcanonicaltextsonthemattersoonecanbuildproperuserinterfaces.

DesigningInterfaces[read][$]AboutFace:TheEssentialsofInteractionDesign[read][$]Don'tMakeMeThink,Revisited:ACommonSenseApproachtoWebUsability[read][$]

Front-endHandbook

41LearnUI/interactiondesign

LearnHTML&CSSHTML-HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.[1]WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.-wikipedia.org

CSS-CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.-wikipedia.org

Likentoconstructingahouse,onemightconsiderHTMLtheframingandCSStobethepainting&decorating.

Generallearning:

codecademy.comHTML&CSS[interact]IntrotoHTML/CSS:Makingwebpages[watch]LearntoCodeHTML&CSS[read]LearnCSSLayout[read]FrontEndWebDevelopment:GetStarted[watch][$]HTMLandCSS:DesignandBuildWebsites[read][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]HTMLMastery:Semantics,Standards,andStyling[read][$]CSSPositioning[watch][$]HTMLDocumentFlow[watch][$]IntroductiontoHTML5andCSS3[watch][$]AbsoluteCenteringinCSS[read]UnderstandingtheCSSBoxModel[watch]SolidHTMLFormStructure[watch]SemanticHTML:HowtoStructureWebPages[watch]

Mastering:

Front-endHandbook

42LearnHTML&CSS

CSSSelectorsfromCSS4tillCSS1[read]CSSDiner[interact]CSS3In-Depth[watch][$]atozcss.com/[watch]ACompleteGuidetoFlexbox[read]

References/docs:

htmlelement.infoMDNCSSreferenceMDNHTMLelementreferencecssvalues.com/CSSTRIGGERS...AGAMEOFLAYOUT,PAINT,ANDCOMPOSITEHTMLattributereference

Glossary:

HTMLGlossaryProgrammingreferenceforHTMLelementsCSSGlossary-ProgrammingreferenceforCSScoveringComments,Properties,andSelectors

Standards/specifications:

HTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebTheelementsofHTMLfromtheLivingStandardTheHTMLSyntaxfromtheLivingStandardAllW3CHTMLSpecGlobalattributesCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationSelectorsLevel3AllW3CCSSSpecifications

ArchitectingCSS:

oocss[read]SMACSS[read][$]SMACSS[watch][$]AtomicDesign[read]

Authoringconventions:

idiomatic-css[read]Standardsfordevelopingflexible,durable,andsustainableHTMLandCSS[read]cssguidelin.es[read]

Front-endHandbook

43LearnHTML&CSS

GoogleHTML/CSSStyleGuide

HTML/CSSnewsletters:

HTML5WeeklyCSSWeekly

Front-endHandbook

44LearnHTML&CSS

LearnSearchEngineOptimizationSearchengineoptimization(SEO)istheprocessofaffectingthevisibilityofawebsiteorawebpageinasearchengine'sunpaidresults-oftenreferredtoas"natural,""organic,"or"earned"results.Ingeneral,theearlier(orhigherrankedonthesearchresultspage),andmorefrequentlyasiteappearsinthesearchresultslist,themorevisitorsitwillreceivefromthesearchengine'susers.SEOmaytargetdifferentkindsofsearch,includingimagesearch,localsearch,videosearch,academicsearch,newssearchandindustry-specificverticalsearchengines.-wikipedia

Generallearning:

SEOFundamentalsfromDavidBooth[watch][$]SEOFundamentalsfromPaulWilson[watch][$]SEOforWebDesigners[watch][$]GoogleSearchEngineOptimizationStarterGuide[read]SEOTutorialForBeginners2015[read]

Front-endHandbook

45LearnSEO

LearnJavaScriptJavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.-wikipedia.org

Generallearning:

codecademy.comJavaScript[interact]ProfessionalJavaScriptforWebDevelopers[read][$]JavaScriptEnlightenment[read]ThePrinciplesofObject-OrientedJavaScript[read][$]SpeakingJavaScript[read]YouDon'tKnowJS:Up&Going[read]UnderstandingECMAScript6[read]JavaScriptPatterns[read][$]JS.Next:ES6[watch][$]CrockfordonJavaScript-Volume1:TheEarlyYears[watch]CrockfordonJavaScript-Chapter2:AndThenThereWasJavaScript[watch]CrockfordonJavaScript-ActIII:FunctiontheUltimate[watch]CrockfordonJavaScript-EpisodeIV:TheMetamorphosisofAjax[watch]CrockfordonJavaScript-Part5:TheEndofAllThings[watch]CrockfordonJavaScript-Scene6:Loopage[watch]JavaScriptModules[read]

Mastering:

FunctionalJavaScript:IntroducingFunctionalProgrammingwithUnderscore.js[read][$]ECMA-262byDmitrySoshnikov[read]AdvancedJavaScript[watch][$]JavaScripttheGoodParts[watch][$]YouDon'tKnowJS:Scope&Closures[read]

Front-endHandbook

46LearnJavaScript

YouDon'tKnowJS:this&ObjectPrototypes[read]YouDon'tKnowJS:Types&Grammar[read]YouDon'tKnowJS:Async&Performance[read]YouDon'tKnowJS:ES6&Beyond[read]EloquentJavaScript[read]Test-DrivenJavaScriptDevelopment[read][$]JavaScriptAllongé[read][$]JavaScriptwithPromises[read][$]HighPerformanceJavaScript(BuildFasterWebApplicationInterfaces)[read][$]JavaScriptRegularExpressionEnlightenment[read]UsingRegularExpressions[watch][$]

References/docs:

MDNJavaScriptreference

Glossary/encyclopedia:

JavaScriptGlossaryTheJavaScriptEncyclopedia

Standards/specifications:

ECMAScript®2015LanguageSpecificationStatus,process,anddocumentsforECMA262

Style:

Node.jsStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScriptAirbnbJavaScriptStyleGuide

JavaScriptnewsletters,news,&podcasts:

JavascriptJabberJavaScriptWeeklyEchoJSJavaScriptKicksjavascript.comFiveJSJavaScriptLive

Front-endHandbook

47LearnJavaScript

LearnwebanimationGenerallearning:

AdventuresinWebAnimations[$][watch]AnimatingWithSnap.svg[$][watch]AnimationinCSS3andHTML5[$][watch]CSSAnimationintheRealWorld[$][watch]FoundationHTML5AnimationwithJavaScript[$][read]WebAnimationusingJavaScript:Develop&Design(DevelopandDesign)[$][read]TheStateOfAnimation2014

Standards/specifications:

WebAnimations

Front-endHandbook

48Learnwebanimation

LearnDOM,BOM,&jQueryDOM-TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).-wikipedia.org

BOM-TheBrowserObjectModel(BOM)isabrowser-specificconventionreferringtoalltheobjectsexposedbythewebbrowser.UnliketheDocumentObjectModel,thereisnostandardforimplementationandnostrictdefinition,sobrowservendorsarefreetoimplementtheBOMinanywaytheywish.-wikipedia.org

jQuery-jQueryisacross-platformJavaScriptlibrarydesignedtosimplifytheclient-sidescriptingofHTML.jQueryisthemostpopularJavaScriptlibraryinusetoday,withinstallationon65%ofthetop10millionhighest-traffickedsitesontheWeb.jQueryisfree,open-sourcesoftwarelicensedundertheMITLicense.-wikipedia.org

Theidealpath,butcertainlythemostdifficult,wouldbetofirstlearnJavaScript,thentheDOM,thenjQuery.However,dowhatmakessensetoyourbrain.Mostfront-enddeveloperslearnaboutJavaScriptandthenDOMbywayoffirstlearningjQuery.Whateverpathyoutake,justmakesureJavaScript,thenDOM,orjQuerydon'tbecomeablackbox.

Generallearning:

TheDocumentObjectModel[read]codecademy.comjQuery[watch]jQueryEnlightenment[read]HTML/JS:Makingwebpagesinteractive[watch]HTML/JS:MakingwebpagesinteractivewithjQuery[watch]

Mastering:

DOMEnlightenment[read][$]orreadonlineforfreeAdvancedJSFundamentalstojQuery&PureDOMScripting[watch][$]AdvancEDDOMScripting:DynamicWebDesignTechniques[read][$]FixingCommonjQueryBugs[watch][$]jQueryTipsandTricks[watch][$]jQuery-freeJavaScript[watch][$]DouglasCrockford:AnInconvenientAPI-TheTheoryoftheDOM[watch]

Front-endHandbook

49LearnDOM,BOM&jQuery

References/docs:

MDNDocumentObjectModelMDNEventreferencejQueryDocsMDNBrowserObjectModelmsdnDocumentObjectModel(DOM)

Standards/specifications:

W3CDOM4DOMLivingStandardDocumentObjectModel(DOM)Level3EventsSpecificationDocumentObjectModel(DOM)TechnicalReports

Front-endHandbook

50LearnDOM,BOM&jQuery

Learnwebfonts&iconsWebtypographyreferstotheuseoffontsontheWorldWideWeb.WhenHTMLwasfirstcreated,fontfacesandstyleswerecontrolledexclusivelybythesettingsofeachWebbrowser.TherewasnomechanismforindividualWebpagestocontrolfontdisplayuntilNetscapeintroducedthe<font>tagin1995,whichwasthenstandardizedintheHTML3.2specification.However,thefontspecifiedbythetaghadtobeinstalledontheuser'scomputerorafallbackfont,suchasabrowser'sdefaultsans-seriformonospacefont,wouldbeused.ThefirstCascadingStyleSheetsspecificationwaspublishedin1996andprovidedthesamecapabilities.

TheCSS2specificationwasreleasedin1998andattemptedtoimprovethefontselectionprocessbyaddingfontmatching,synthesisanddownload.Thesetechniquesdidnotgainmuchuse,andwereremovedintheCSS2.1specification.However,InternetExploreraddedsupportforthefontdownloadingfeatureinversion4.0,releasedin1997.[1]FontdownloadingwaslaterincludedintheCSS3fontsmodule,andhassincebeenimplementedinSafari3.1,Opera10andMozillaFirefox3.5.ThishassubsequentlyincreasedinterestinWebtypography,aswellastheusageoffontdownloading.-wikipedia

Generallearning:

TypographyfortheWeb[watch][$]Learn-web-fonts[read]Quickguidetowebfontsvia@font-face[read]ResponsiveTypography[watch][$]BeautifulWebTypeAshowcaseofthebesttypefacesfromtheGooglewebfontsdirectory.[read]

Front-endHandbook

51Learnwebfonts

LearnaccessibilityAccessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).

Accessibilitycanbeviewedasthe"abilitytoaccess"andbenefitfromsomesystemorentity.Theconceptfocusesonenablingaccessforpeoplewithdisabilities,orspecialneeds,orenablingaccessthroughtheuseofassistivetechnology;however,researchanddevelopmentinaccessibilitybringsbenefitstoeveryone.

Accessibilityisnottobeconfusedwithusability,whichistheextenttowhichaproduct(suchasadevice,service,orenvironment)canbeusedbyspecifieduserstoachievespecifiedgoalswitheffectiveness,efficiencyandsatisfactioninaspecifiedcontextofuse.

Accessibilityisstronglyrelatedtouniversaldesignwhichistheprocessofcreatingproductsthatareusablebypeoplewiththewidestpossiblerangeofabilities,operatingwithinthewidestpossiblerangeofsituations.Thisisaboutmakingthingsaccessibletoallpeople(whethertheyhaveadisabilityornot).-wikipedia

Generallearning:

UniversalDesignforWebApplications:WebApplicationsThatReachEveryone[read][$]WebAccessibility:GettingStarted[watch][$]IntroductiontoWebAccessibility[read]AWebforEveryone[read][$]FoundationsofUX:Accessibility[watch][$]IntroductiontoWebAccessibility[watch]

Standards/specifications:

WebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatusAccessibleRichInternetApplications(WAI-ARIA)CurrentStatus

Front-endHandbook

52Learnaccessibility

Learnweb/browserAPI'sTheBOMandtheDOMarenottheonlybrowserAPI'sthataremadeavailableonthewebplatforminsideofbrowsers.EverythingthatisnotspecificallytheDOMorBOM,butaninterfaceforprogrammingthebrowsercouldbeconsideredaweborbrowserAPI(tragicallyinthepastsomeoftheseAPI'shavebeencalledHTML5api'swhichconfusestheirownspecifics/standardizewiththeactualHTML5specificationspecifytheHTML5markuplanguage).NotethatweborbrowserAPI'sdoincludedeviceAPI's(e.g.Navigator.getBattery())thatareavailablethroughthebrowserontabletandphonesdevices.

imagesource:http://www.evolutionoftheweb.com/

Youshouldbeawareofandlearn,whereappropriate,web/browserAPI's.AgoodtooltousetofamiliarizeoneselfwithalloftheseAPI'swouldbetoinvestigatetheHTML5test.comresultsforthe5mostcurrentbrowsers.

Learn:

Front-endHandbook

53Learnweb/browserAPI's

DIVEINTOHTML5[read]ProHTML5Programming[read]

Learnaudio:

HTML5Canvas[read]FunWithWebAudio[watch]AddSoundtoYourSiteWithWebAudio[watch]

Learncanvas:

WebAudioAPI[read]Additionally,MDNhasagreatdealofinformationaboutweb/browserAPIs.

MDNWebAPIreferenceMDNWebAPI-listsdeviceaccessAPIsandotherAPIsusefulforapplications.MDNWebAPIsinterfacereference-allinterfaces,arrangedalphabetically.

KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.

InadditiontoMDN,youmightfindthefollowingresourceshelpful:

HTML5-overviewplatform.html5.orgTheHTML5JavaScriptAPIIndex

Front-endHandbook

54Learnweb/browserAPI's

LearnJSON(JavaScriptObjectNotation)JSON,(canonicallypronouncedsometimesJavaScriptObjectNotation),isanopenstandardformatthatuseshuman-readabletexttotransmitdataobjectsconsistingofattribute–valuepairs.Itistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).

AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.

TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.-wikipedia

Generallearning:

json.com[read]WhatisJSON[watch]IntroductiontoJavaScriptObjectNotation:ATo-the-PointGuidetoJSON[read][$]

References/docs:

json.org/[read]

Standards/specifications:

ECMA-404TheJSONDataInterchangeFormatRFC7159TheJavaScriptObjectNotation(JSON)DataInterchangeFormat

Architecting:

JSONAPI

Front-endHandbook

55LearnJSON

LearnstaticsitegeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.ruby,php,python,nodeJSetc...),producesstaticHTMLfilesfromstatictext/data+templatesthatisindentingtobesentfromaservertotheclientstaticallywithoutadynamicnature.

Generallearning:

StaticSiteGenerators[read]

Front-endHandbook

56Learnstaticsitegenerators

Learnfront-endapplicationarchitectureJavaScriptApplicationDesign[read][$]BuildanAppwithReactandAmpersand[watch][$]HumanJavaScript[read]ProgrammingJavaScriptApplications[read]BuildingModernSingle-PageWebApplications[watch][$]OrganizingJavaScriptFunctionality[watch][$]EloquentJavaScript:modules[read]WebUIArchitecture[watch][$]FieldGuidetoWebApplications[read]UIArchitecture[watch][$]Terrific[read]NicholasZakas:ScalableJavaScriptApplicationArchitecture[watch]PatternsForLarge-ScaleJavaScriptApplicationArchitecture[read]Afieldguidetostaticapps[read]

Front-endHandbook

57Learnfront-endapparchitecture

LearnInterface/APIdesignData(mostliklyJSON)API's

BuildAPIsYouWon'tHate[$][read]JSONAPI[read]

JavaScriptAPI's

WritingJavaScriptAPIs[read]DesigningBetterJavaScriptAPIs[read]

Front-endHandbook

58LearnInterface/APIdesign

LearnwebdevelopertoolsWebdevelopmenttoolsallowwebdeveloperstotestanddebugtheircode.TheyaredifferentfromwebsitebuildersandIDEsinthattheydonotassistinthedirectcreationofawebpage,rathertheyaretoolsusedfortestingtheuserfacinginterfaceofawebsiteorwebapplication.

Webdevelopmenttoolscomeasbrowseradd-onsorbuiltinfeaturesinwebbrowsers.Themostpopularwebbrowserstodaylike,GoogleChrome,Firefox,Opera,InternetExplorer,andSafarihavebuiltintoolstohelpwebdevelopers,andmanyadditionaladd-onscanbefoundintheirrespectiveplugindownloadcenters.

Webdevelopmenttoolsallowdeveloperstoworkwithavarietyofwebtechnologies,includingHTML,CSS,theDOM,JavaScript,andothercomponentsthatarehandledbythewebbrowser.Duetotheincreasingdemandfromwebbrowserstodomorepopularwebbrowsershaveincludedmorefeaturesgearedfordevelopers.-wikipedia

Whilemostbrowserscomeequippedwithwebdevelopertools,theChromedevelopertoolsarecurrentlythemosttalkedaboutandwidelyusedtoolsavailable.

I'dsuggestlearningandusingtheChromewebdevelopertools,simplybecausethebestresourcesforlearningwebdevelopertoolsrevolvesaroundChromeDevTools.

LearnChromewebdevelopertools

ExploreandMasterChromeDevToolsChromeDeveloperTools[watch][$]UsingTheChromeDeveloperTools[watch][$]

Chromewebdevelopertoolsdocs:

Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings

News/newsletters/podcasts/tips:

DevTips

Front-endHandbook

59Learnwebdevtools

LearncommandlineAcommand-lineinterfaceorcommandlanguageinterpreter(CLI),alsoknownascommand-lineuserinterface,consoleuserinterface,andcharacteruserinterface(CUI),isameansofinteractingwithacomputerprogramwheretheuser(orclient)issuescommandstotheprogramintheformofsuccessivelinesoftext(commandlines).-wikipedia

Generallearning:

codecademy:LearntheCommandLine[watch]TheCommandLineCrashCourse[read]MeettheCommandLine[watch][$]LearnEnoughCommandLinetoBeDangerous[read][freeto$]

Mastering:

AdvancedCommandLineTechniques[watch][$]

Front-endHandbook

60Learncommandline

Learnnode.jsNode.jsisanopen-source,cross-platformruntimeenvironmentfordevelopingserver-sidewebapplications.Node.jsapplicationsarewritteninJavaScriptandcanberunwithintheNode.jsruntimeonOSX,MicrosoftWindows,Linux,FreeBSD,NonStop,[3]IBMAIX,IBMSystemzandIBMi.ItsworkishostedandsupportedbytheNode.jsFoundation,[4]acollaborativeprojectatLinuxFoundation.[5]

Node.jsprovidesanevent-drivenarchitectureandanon-blockingI/OAPIdesignedtooptimizeanapplication'sthroughputandscalabilityforreal-timewebapplications.ItusesGoogleV8JavaScriptenginetoexecutecode,andalargepercentageofthebasicmodulesarewritteninJavaScript.Node.jscontainsabuilt-inlibrarytoallowapplicationstoactasawebserverwithoutsoftwaresuchasApacheHTTPServer,NginxorIIS.-wikipedia

Generallearning:

IntroductiontoNode.jsfromEventedMind[watch][$]TheArtofNode[read]Node.jsBasics[watch][$]io.jsandNode.jsNext:GettingStarted[watch][$]Learnallthenodes[watch]TheNodeBeginnerBook[read][$]IntroductiontoNode.js[watch][$]Node.jsinPractice[read][$]Nodeschool.io[code]

Front-endHandbook

61Learnnode.js

LearnmoduleloadinganddependencymanagementGenerallearning:

CreatingJavaScriptModuleswithBrowserify[watch][$]WebpackFundamentals[watch][$]browserify-handbook[read]ChooseES6modulesToday![read]

References/docs:

browserifysystem.jswebpack

Front-endHandbook

62Learnmoduleloader

LearnpackagemanagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.-wikipedia

Generallearning:

BowerFundamentals[watch][$]PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloper[read]UpandRunningwithNPM,theNodePackageManager[watch][$]npmBasics[watch][$]ThenpmBook[read]TheMystical&MagicalSemVerRangesUsedBynpm&Bower[read]

References/docs:

bowerjspm.ionpm

Front-endHandbook

63Learnpackagemanagers

LearnversioncontrolAcomponentofsoftwareconfigurationmanagement,versioncontrol,alsoknownasrevisioncontrolorsourcecontrol,isthemanagementofchangestodocuments,computerprograms,largewebsites,andothercollectionsofinformation.Changesareusuallyidentifiedbyanumberorlettercode,termedthe"revisionnumber,""revisionlevel,"orsimply"revision."Forexample,aninitialsetoffilesis"revision1."Whenthefirstchangeismade,theresultingsetis"revision2,"andsoon.Eachrevisionisassociatedwithatimestampandthepersonmakingthechange.Revisionscanbecompared,restored,andwithsometypesoffiles,merged.-wikipedia

ThecurrentmodernsolutionforversioncontrolisGit.Learnit!

Generallearning:

codeschool.com[interact]GitFundamentals[watch][$]GettingGitRight[read]Ry’sGitTutorial[read]ProGit[read]

Mastering:

AdvancedGitTutorials[read]ProGit[read]

References/docs:

https://git-scm.com/doc

Front-endHandbook

64Learnversioncontrol

LearnbuildandtaskautomationBuildautomationistheprocessofautomatingthecreationofasoftwarebuildandtheassociatedprocessesincluding:compilingcomputersourcecodeintobinarycode,packagingbinarycode,andrunningautomatedtests.-wikipedia

Generallearning:

JavaScriptBuildAutomationWithGulp.js[watch][$]GettingStartedwithGulp[read][$]RapidGulp[watch][$]LearningGulp-Gettingstartedwiththefontendfactory[read]GulpBasics[watch][$]UsingnpmasaTaskRunner[watch][$]

References/docs:

gulpGulpisgreat.However,youmightonlyneednpmrun.Beforeturningtoadditionalcomplexityinyourapplicationstackaskyourselfifnpmruncandothejob.Ifyouneedmore,useboth.

Read:

GiveGrunttheBoot!AGuidetoUsingnpmasaBuildToolTaskautomationwithnpmrunBuildToolsvsnpmScripts:WhyNotBoth?UsingnpmasabuildsystemforyournextprojectHowtoUsenpmasaBuildTool

Front-endHandbook

65Learnbuild&taskautomation

LearnsiteperformanceoptimizationWebperformanceoptimization,WPO,orwebsiteoptimizationisthefieldofknowledgeaboutincreasingthespeedinwhichwebpagesaredownloadedanddisplayedontheuser'swebbrowser.Withtheaverageinternetspeedincreasingglobally,itisfittingforwebsiteadministratorsandwebmasterstoconsiderthetimeittakesforwebsitestorenderforthevisitor.-wikipedia

Generallearning:

WebsitePerformance[watch][$]HighPerformanceWebSites:EssentialKnowledgeforFront-EndEngineers[read][$]EvenFasterWebSites:PerformanceBestPracticesforWebDevelopers[read][$]WebPerformanceDaybookVolume2[read][$]JavaScriptPerformanceRocks[read]PerformanceCalendar[read]PageSpeedInsightsRules[read]WebsitePerformanceOptimization[watch]BrowserRenderingOptimization[watch]UsingWebPageTest[read][$]WebPerformance:TheDefinitiveGuide[read]perf.rocks

Front-endHandbook

66Learnsiteperformanceoptimization

LearnJStestingunittesting-Incomputerprogramming,unittestingisasoftwaretestingmethodbywhichindividualunitsofsourcecode,setsofoneormorecomputerprogrammodulestogetherwithassociatedcontroldata,usageprocedures,andoperatingprocedures,aretestedtodeterminewhethertheyarefitforuse.Intuitively,onecanviewaunitasthesmallesttestablepartofanapplication.-Wikipedia

functionaltesting-Functionaltestingisaqualityassurance(QA)processandatypeofblackboxtestingthatbasesitstestcasesonthespecificationsofthesoftwarecomponentundertest.Functionsaretestedbyfeedingtheminputandexaminingtheoutput,andinternalprogramstructureisrarelyconsidered(notlikeinwhite-boxtesting).Functionaltestingusuallydescribeswhatthesystemdoes.-Wikipedia

integrationtesting-Integrationtesting(sometimescalledintegrationandtesting,abbreviatedI&T)isthephaseinsoftwaretestinginwhichindividualsoftwaremodulesarecombinedandtestedasagroup.Itoccursafterunittestingandbeforevalidationtesting.Integrationtestingtakesasitsinputmodulesthathavebeenunittested,groupstheminlargeraggregates,appliestestsdefinedinanintegrationtestplantothoseaggregates,anddeliversasitsoutputtheintegratedsystemreadyforsystemtesting.-wikipedia

Generallearning:

Test-DrivenJavaScriptDevelopment[read][$]TestableJavaScript[read][$]JavaScriptTestingRecipes[read][$]Front-EndFirst:TestingandPrototypingJavaScriptApps[watch][$]Let’sCode:Test-DrivenJavaScript[watch][$]

Front-endHandbook

67LearnJStesting

LearnheadlessbrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.

Headlessbrowsersprovideautomatedcontrolofawebpageinanenvironmentsimilartopopularwebbrowsers,butareexecutedviaacommandlineinterfaceorusingnetworkcommunication.TheyareparticularlyusefulfortestingwebpagesastheyareabletorenderandunderstandHTMLthesamewayabrowserwould,includingstylingelementssuchaspagelayout,color,fontselectionandexecutionofJavaScriptandAJAXwhichareusuallynotavailablewhenusingothertestingmethods.Googlestatedin2009thatusingaheadlessbrowsercouldhelptheirsearchengineindexcontentfromwebsitesthatuseAJAX.-wikipedia

PhantomJSCookbook[read][$]GettingStartedwithPhantomJS[read][$]RapidPhantomJS[watch][$]PhantomJSforWebAutomation[watch]

Front-endHandbook

68Learnheadlessbrowsers

LearnofflinedevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.

Generallearning:

offlinefirst.org[read]CreatingHTML5OfflineWebApplications[read]OfflineFirst[read]Everythingyouneedtoknowtocreateoffline-firstwebapps.[read]

Front-endHandbook

69Learnofflinedev

LearnsecurityBrowserSecurityHandbook[read]HTML5SecurityCheatsheet[read]FrontendSecurity[watch]SecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheTangledWeb:AGuidetoSecuringModernWebApplications[read][$]WebSecurityBasics[read]

Front-endHandbook

70Learnsecurity

Learnmulti-thingdevelopment

imagesource:http://bradfrost.com/blog/post/this-is-the-web/

Asiteorapplicationcanrunonawiderangeofcomputers,laptops,tabletsandphones,aswellasahandfulofotherthings(watches,thermostats,fridgesetc...).Howyoudeterminewhatthingsyou'llsupportandhowyouwilldeveloptosupportthosethingsiscalledamulti-thingdevelopmentstrategy.Below,Ilistthemostcommonmulti-thingdevelopmentstrategies.

Front-endHandbook

71Learnmulti-thingdev(e.g.RWD)

Buildaresponsive(RWD)website/appforallthings.BuildaRESS(responsivewebdesignwithserver-sidecomponents)website/appforallthings.Buildanadaptive/progressivelyenhancedwebsite/appforallthings.Buildawebsite,webapp,nativeapp,orhybrid-nativeappforeachindividualthingoragroupingofthings.Attempttoretrofitsomethingyouhavealreadybuiltusingbitsandpartsfromstrategies1,2or3.Thiscouldbeassimpleassprinklinginsomescreen-sizeagnosticUIpartsorattemptingtofullysupportotherthingswiththeentireUI.

Generallearning:

AdaptiveWebDesign[read][$]Designingwithprogressiveenhancement[read][$]ResponsiveTypography[watch][$]ResponsiveWebDesign[watch][$]ResponsiveHTMLEmailDesign[watch][$]DesigningMulti-DeviceExperiences:AnEcosystemApproachtoUserExperiencesacrossDevices[read][$]ResponsiveWebDesignFundamentals[watch]ResponsiveImages[watch]MobileWebDevelopment[watch]

Front-endHandbook

72Learnmulti-thingdev(e.g.RWD)

DirectedlearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.

Front-endHandbook

73Directedlearning

DirectedlearningThetablebelowcontainsinstructorled,paid,front-endcourses,programs,schools,andbootcamps.

Ifyoucan'taffordadirectededucation,aselfdirectededucationusingscreencasts,books,andarticlesisaviablealternativetolearnfront-enddevelopmentfortheself-drivenindividual.

Front-endHandbook

74front-endschools,courses,&bootcamps

company course price onsite remote

IronYard FrontEndEngineering 12,000 multiplelocations

Udacity Front-EndWebDeveloperNanodegree

200monthly

multiplelocations yes

TheNewYorkCode+DesignAcademy FrontEnd101 2,000 NewYork,

NY

PortlandCodeSchool AdvancedFront-endDeveloperTools 2,000 Portland,

OR

BLOC BecomeaFrontendDeveloper 4,999 yes

Thinkful FrontendWebDevelopment

300permonth yes

GeneralAssembly FrontendWebDevelopment 3,500 multiple

locations

HackbrightAcademy Front-EndWebDevelopment 3,000

SanFrancisco,CA

HackerYouFront-endWebDevelopmentImmersive

7,000-7,910

Toronto,Canada

TheFlatironSchool IntroductiontoFront-EndWebDevelopment 3,500 NewYork,

NY

AustinCodingAcademy TheFrontEndTrack

1,490perclass

Austin,TX

Codeup NightFront-EndBootcamp 8,500

SanAntonio,Texas

Betamore Front-endWebDevelopment 8,500 Baltimore,

MD

CodifyAcademy Front-endWebDevelopment 4,000 multiple

locations

DecodeMTL LearnFront-endWebDevelopment 2,500 Montreal,

QC

gr8code Front-EndBootcamp 10,000 Tampa,FL

LearningFuze Part-TimeFront-EndDevelopmentCourse 2,500 Irvine,CA

Front-endHandbook

75front-endschools,courses,&bootcamps

Front-enddeveloperstolearnfromThenotionthatyoushouldfollowanindividualtolearnaboutfront-enddevelopmentisslowlybecomingpointless.Theadvancedpractitionersoffront-enddevelopmentgenerateenoughcontentthatyoucansimplyfollowthecommunity/leadersbypayingattentiontothefront-end"news"outlets(viaNewsletters,Newsoutlet,&Podcasts).

Front-endHandbook

76Front-enddevstolearnfrom

Front-endnewsletters,newssites,&podcastsGeneralfront-endnewsletters,news,&podcasts:

shoptalkshow.comfrontendfront.comwebtoolsweekly.comO'ReillyWebPlatformRadarTheWdbPlatformPodcastTheWebAheadTheBigWebShowFreshBrewedFrontendMobileWebWeeklyOpenWebPlatformDailyDigestFRONT-ENDDEVweeklyWebDesignWeeklyFront-endNewsin5MinutesTTLViewsourcesWebComponentsWeekly

HTML/CSSnewsletters:

HTML5WeeklyCSSWeekly

JavaScriptnewsletters,news,&podcasts:

JavascriptJabberJavaScriptWeeklyEchoJSJavaScriptKicksjavascript.comFiveJSJavaScriptLive

Front-endHandbook

77Newsletters,news,&podcasts

PartIII:ToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.

Makesureyouunderstandingthecategorythatasetoftoolsfallswithin,beforestudyingthetoolsthemselves.

Notethatjustbecauseatoolislisted,oracategoryoftoolsisdocumented,thisdoesnotequatetoanassertiononmypartthatafront-enddevelopershouldlearnitanduseit.Chooseyourowntoolbox.I'mjustprovidingthecommontoolboxoptions.

Front-endHandbook

78PartIII:Front-enddevtools

Generalfront-enddevelopmenttoolsDevelopmenttools:

screensiz.esplacehold.itcodeKitpreprosBrowsersyncish.2.0.Wraith

Onlinecodeeditors:

jsbin.comjsfiddle.netliveweave.comes6fiddle.netcodepen.ioPlunker

Toolsforfindingtools:

stackshare.iojavascripting.combuiltwithmicrojs.comTheToolBoxunheap.comstylesheets.co

Front-endHandbook

79Generalfront-enddevtools

Doc/APIbrowsingtoolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.

devdocs.ioDash[OSX,iOS][$]Velocity[Windows][$]Zeal[Windows,Linux]

Front-endHandbook

80Doc/APIbrowsingtools

SEOToolsGoogleWebmastersSearchConsoleVarvySEOtoolKeywordTool

Front-endHandbook

81SEOtools

Prototyping&wireframingtoolsCreating:

BalsamiqMockups[$]Justinmind[$]UXPin[freeto$]

Collaboration/presenting:

InVision[freeto$]myBalsamiq[$]conceptboard[freeto$]

Front-endHandbook

82Prototyping&wireframingtools

DiagrammingtoolsCacoo[freeto$]gliffy[freeto$]draw.io[freeto$]

Front-endHandbook

83Diagrammingtools

HTTP/networktoolsCharles[$]FiddlerPostmanChromeDevToolsNetworkPanel

Front-endHandbook

84HTTP/networktools

LearnCodeEditorsAsourcecodeeditorisatexteditorprogramdesignedspecificallyforeditingsourcecodeofcomputerprogramsbyprogrammers.Itmaybeastandaloneapplicationoritmaybebuiltintoanintegrateddevelopmentenvironment(IDE)orwebbrowser.Sourcecodeeditorsarethemostfundamentalprogrammingtool,asthefundamentaljobofprogrammersistowriteandeditsourcecode.-Wikipedia

Front-endcodecanminimallybeeditedwithasimpletexteditingapplicationlikeNotepadorTextEdit.But,mostfront-endpractitionersuseacodeeditorspecificallydesignforeditingaprogramminglanguage.

Codeeditorscomeinallsortsoftypesandsize,sotospeak.Selectingoneisarathersubjectiveengagement.Chooseone,learnitinsideandout,thengetontolearningHTML,CSS,DOM,andJavasCript.

However,Idostronglybelieve,minimally,acodeeditorshouldhavethefollowingfeatures:

1. Gooddocumentationonhowtousetheeditor2. Report(i.e.hinting/linting/errors)onthecodequalityofHTML,CSS,andJavaScript.3. OffersyntaxhighlightingforHTML,CSS,andJavaScript.4. OffercodecompletionforHTML,CSS,andJavaScript.5. Becustomizablebywayofaplug-inarchitecture6. Haveavailablealargerepositoryofthird-party/communityplug-insthatcanbeusedto

customizetheeditortoyourliking7. Besmall,simple,andnotcoupledtothecode(i.e.notrequiredtoeditedthecode)IpersonallyuseandrecommendSublimeTextwiththefollowingplug-ins.

PackageControlAutoFileNameSublimeLinter

SublimeLinter-jsonSublimeLinter-jshintSublimeLinter-html-tidy

SideBar EnhancementsTerminalBracketHighlighterColorHighlighterCSS3HTMLAttributes

Front-endHandbook

85Codeeditingtools

StringEncodeHTML-CSS-JSPrettify

HerearesomeresourcesforlearningSublime:

SublimeProductivity[read][$]SublimeTextPowerUserBook[read][$]SublimeText3FromScratch[watch][$]PerfectWorkflowinSublimeText2[watch][requireslogin,butfree]

IfyouneedafreealternativetoSublime(cost$70)youmightconsideratomorbrackets.

Collaborativeonlinecodeeditorstosharelivecode:

jsbin.com[freeto$]jsfiddle.netliveweave.comes6fiddle.netcodepen.io[freeto$]Plunker

Onlinecodeeditors:

codeanywhere[freeto$]Koding[freeto$]Cloud9[freeto$]

Front-endHandbook

86Codeeditingtools

BrowserToolsJSbrowserutilities:

URI.jsplatform.jshistory.jshtml2canvas

GeneralreferencetoolstodetermineifXbrowsersupportsX:

caniuse.comHTML5PleaseHTML5testBrowserscopewebbrowsercompatibility.comiwanttouse.com/PlatformstatusBrowsersupportforbroken/missingimagesBigJS-Compatibility-Tablejscc.info

Browserdevelopment/debugtools:

OperaDragonflySafariWebInspectorFirefoxDeveloperToolsChromeDeveloperTools(akaDevTools)

Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings

IEDevelopertools(akaF12tools)vorlon.js

Synchronizedbrowsertools:

Browsersync

BrowsercodingtoolstodetermineifXbrowsersupportsX:

Front-endHandbook

87Browsertools

ModernizrESFeatureTests

Broadbrowserpolyfills/shims:

webcomponents.jswebshimHTML5CrossBrowserPolyfillsconsole-polyfillsocket.iosockjs

Browserhostedtesting/automation:

browserstack[$]browserling[$]Saucelabs[$]SeleniumCrossBrowserTesting.com[$]

Headlessbrowsers:

PhantomJSslimerjsTrifleJS

Headlessbrowserautomation:

nightwatchjscasperJSNightmare

Browserhacks:

browserhacks.com

Front-endHandbook

88Browsertools

HTMLToolsHTMLtemplates/boilerplates/starterkits:

HTML5BoilerplateMobileboilerplateWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopmentdCodesHTML5BonesEmail-BoilerplatePears

HTMLpolyfill:

html5shiv

Transpiling:

jadeHAMLMarkdown

References:

HTMLInterfacesBrowserSupportHTMLEntityLookupHTMLelement.infoElementsElementattributesHTMLArrows

Linting/hinting:

html5-lintHTMLHinthtml-inspector

Optimizer:

HTMLMinifier

Onlinecreation/generation/experimentationtools:

Front-endHandbook

89HTMLtools

tablesgenerator.com

Authoringconventions:

Principlesofwritingconsistent,idiomaticHTMLHTMLcodeguide

Workflow:

Emmet

TrendingHTMLrepositoriesonGithubthismonth:

https://github.com/trending?l=html&since=monthly

Front-endHandbook

90HTMLtools

CSSToolsDesktop&mobileCSSframeworks:

SemanticUIFoundationBootstrapMetroUIPure.cssConciseMaterializeMaterialDesignLite(MDL)Base

MobileonlyCSSframeworks:

Ratchet

CSSreset:

ACSSReset(or“ResetCSS”)isashort,oftencompressed(minified)setofCSSrulesthatresetsthestylingofallHTMLelementstoaconsistentbaseline.-http://cssreset.com/

EricMeyer’s“ResetCSS”2.0Normalize

Transpiling:

SASS/SCSSstylusPostCSS&cssnextrework&mythpleeease.io

References:

css3test.comcss4-selectors.comcss3clickchart.comcssvalues.comCSSTRIGGERS...AGAMEOFLAYOUT,PAINT,ANDCOMPOSITE

Front-endHandbook

91CSStools

MDNCSSreferenceoverapi.comCSScheatsheet

Linting/hinting:

CSSLintstylelint

Codeformatter/beautifier:

CSScombcssfmt

Optimizer:

cssoclear-csscssnano

Onlinecreation/generation/experimentationtools:

UltimateCSSGradientGeneratorEnjoyCSSCSSmaticpatternify.compatternizer.comCSSarrowpleaseflexplorerFlexboxPlayground

ArchitectingCSS:

oocss[read]SMACSS[read][$]AtomicDesign[read]

Authoringconventions:

idiomatic-css[read]CSScodeguide[read]cssguidelin.es[read]GoogleHTML/CSSStyleGuide

TrendingCSSrepositoriesonGithubthismonth:

Front-endHandbook

92CSStools

https://github.com/trending?l=css&since=monthly

Front-endHandbook

93CSStools

DOMToolsDOMlibraries/frameworks:

jQueryZepto.jskeypressclipboard.jstether.io

DOMperformancetools:

DOMMonster

References:

DOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportEventsMDNDocumentObjectModel(DOM)

DOMpolyfills/shims:

dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform

VirtualDOM:

jsdomvirtual-dom

Front-endHandbook

94DOMtools

JavaScriptToolsJSutilities:

lodashunderscore.jsMoment.jsstring.jsNumeral.jsaccounting.jsxregexp.comMath.jswaitasyncformat.js

Transpiling(ESXtoESX):

Babel

JavaScriptcompatibilitychecker:

http://jscc.info/

Linting/hinting:

jshinteshintJSLint

jslinterrors.com

Unittesting:

MochaQUnitJasmine

Jest

Testingassertionsforunittesting:

should.jsChai

Front-endHandbook

95JavaScripttools

expect.js

Testspies,stubs,andmocksforunittesting:

sinon.js

Codestylelinter:

JSCS

Codeformater/beautifier:

jsfmtesformatterjs-beautify

Performancetesting:

jsperfbenchmark.js

Visualization,staticanalysis,complexity,coveragetools:

jscomplexity.orgistanbulBlanket.jsCoveralls[$]PlatoescomplexEsprima

Optimizer:

UglifyJS2

Obfuscate:

JavascriptObfuscator[freeto$]JScrambler[$]

Onlinejscodeeditors:

jsbin.com[freeto$]jsfiddle.netes6fiddle.net

Front-endHandbook

96JavaScripttools

OnlineRegularexpressioneditors/visualtools:

regex101regexperdebuggexRegExr

Authoringconventions:

KhanJavaScriptStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScriptAirbnbJavaScriptStyleGuide

TrendingJSrepositoriesonGithubthismonth:

https://github.com/trending?l=javascript&since=monthly

MostdependeduponpackagesonNPM:

https://www.npmjs.com/browse/depended

Front-endHandbook

97JavaScripttools

StaticsitegeneratorstoolsJSsitegenerators:

Metalsmithharp

JSblogsitegenerators:

hubpress.ioHexo.io

Sitegeneratorlistings:

staticsitegenerators.netwww.staticgen.com

Front-endHandbook

98Staticsitegeneratorstools

App(desktop,mobile,tabletetc..)toolsFront-endappframeworks:

AngularJS&BatarangBackbone&MarionetteReact&Flux&ReactDeveloperToolsVue.js&vue-loader&vue-routerEmber&EmberInspectorAmpersand.jsKnockoutAureliaPolymer&IronElements&PaperElements

Full-stackJSappplatforms:

MeteorHood.ieMEAN

Mobilewebui/site/appframeworks

Thesesolutionscanbeusedanywhereincludinginawebview(i.e.webplatformandbrowserengine)app:

RatchetKendoUIMobileMobileAngularUIFramework7

NativeHybridmobilewebview(i.e.browserenginedriven)frameworks:

ThesesolutiontypicallyuseCordova,crosswalk,oracustomwebviewasbridgetonativeapi's.

ioniconsen.io

NativeHybridmobiledevelopmentwebview(i.e.browserenginedriven)environments/platforms/tools:

Front-endHandbook

99App(desktop,mobile,tabletetc..)tools

ThesesolutiontypicallyuseCordova,crosswalk,oracustomwebviewasbridgetonativeapi's.

AppBuilder[$]Monaca[$]AdobePhoneGap[$]kony[$]ionichub[freeto$]TacomanifoldJScocoon.io[freeto$]

Nativedesktopwebview(i.e.browserenginedriven)appframeworks:

NW.jsElectron

Nativemobileappframeworks(akaJavaScriptNativeapps)

ThesesolutionsuseaJSengineatruntimetoinerputJSandbridgetthattonativeapi's.Nobrowserengineorwebviewisused.TheuiisconstructedfromnativeUIcomponents.

NativeScriptReactNativetabris.js[freeto$]trigger.io[$]

References:

todomvc.com

Appseeds/starters/boilerplates:

ReactStarterKitEmberstarter-kitNG6-starterAngular2WebpackStarterhjs-webpack

Front-endHandbook

100App(desktop,mobile,tabletetc..)tools

ScaffoldingtoolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.

YeomanSlush

Front-endHandbook

101Scaffoldingtools

TemplatingtoolsJustTemplating:

Mustache.jsHandlebars

htmlbarsNunjuncksTransparencydoT.js

Templatingandreactivedatabinding:

Rivets.jspaperclip.jsriotvue.jsractive.jsreact.jsRxJSknockout

Front-endHandbook

102Templatingtools

UIwidgets&componentstoolsDesktop&Mobile:

KendoUI[freeto$]Webix[$]SemanticUIMetroUIBootstrapMaterializeMaterialuiPolymerPaperElements

Desktop(NW.jsandElectron):

photonkitReactUIComponentsforOSXElCapitanandWindows10

Mobilefocused:

RatchetKendoUIMobileMobileAngularUIFramework7

Front-endHandbook

103UIwidgets&componentstools

Datavisualization(e.g.charts)toolsJSlibraries:

d3sigmajs

Widgets&Components:

Chart.jsC3.jsGoogleChartschartist-jsjamCharts[$]Highcharts[Non-commercialfreeto$]FusionCharts[$]ZingChart[freeto$]Epoch

Services:

Datawrapperinfogr.am[freeto$]plotly[freeto$]ChartBlocks[freeto$]

Front-endHandbook

104Datavisualization(e.g.charts)tools

Graphics(e.g.SVG,canvas,webgl)toolsGeneral:

Two.jsFabric.js

Canvas:

Paper.jsEaselJS

SVG:

svg.jsSnap.svgRaphaëld3

Webgl:

three.jspixi.js

Front-endHandbook

105Graphics(e.g.SVG,canvas,webgl)tools

AnimationtoolsVelocity.jssnabbt.jsTweenJSDynamics.jsGreenSock-JS

Polyfills/shims:

web-animations-js

Front-endHandbook

106Animationtools

JSONtoolsOnlineeditors:

JSONmate

Querytools:

DefiantJSObjectPathJSONMask

GeneratingmockJSONtools:

JSONGeneratorMockaroo

OnlineJSONmockingAPItools:

MockyFillText.comJSONPlaceholdermockable.io

LocalJSONmockingAPItools:

json-server

JSONspecifications/schemas:

json-schema.org&jsonschema.net{json:api}

Front-endHandbook

107JSONtools

TestingframeworktoolsKarmaIntern

Front-endHandbook

108Testingframeworktools

Front-enddatastoragetoolsYDN-DBforerunnerAlaSQLLokiJSlovefieldDexie.jslocalForagepouchdb

Front-endHandbook

109Datastoragetools

Module/packageloadingtoolsSystemJSwebpackBrowserifyrollup.js

Front-endHandbook

110Module/packageloadingtools

Module/packagerepositorytoolsNPMBowerjspm.iospmjs

Front-endHandbook

111Module/packagerepo.tools

Web/cloud/statichostingtoolsAWS[$]Heroku[freeto$]DigitalOcean[$]Modulus[$]DIVSHOT[freeto$]netlify[freeto$]surge[freeto$]

Front-endHandbook

112Web/cloud/statichostingtools

Projectmanagement&codehostingtoolsGithub[freeto$]Codebase[$]Bitbucket[freeto$]Unfuddle[$]Assembla[freeto$]

Front-endHandbook

113Projectmanagement&codehosting

Collaboration&communicationtoolsSlack&screenhero[freeto$]Skype[freeto$]GoogleHangouts

Code/Githubcollaboration&communication:

Gitter[freeto$]

Front-endHandbook

114Collaboration&communicationtools

ContentManagementHosted/APItoolsAPICMS(i.e.contentdeliveryCMS)tools:

prismic.io[freeto$]contentful[$]CosmicJS[freeto$]

HostedCMStools:

LightCMS[$]SurrealCMS[$]PageLime[$]CushyCMS[freeto$]

StaticCMStools:

webhook.com

Front-endHandbook

115CMShosted/APItools

Back-endasaservice(akaBAAS)toolsforfront-enddevelopersData/back-endmanagementasaservice:

Firebase[freeto$]Parse[freeto$]kinvey[free'ishto$]Back&[freeto$]Pusher[freeto$]

Usermanagementasaservice:

UserApp[freeto$]hull[$]auth0[$]

Front-endHandbook

116BAAS(forfront-enddevs)tools

Offlinetoolsupupoffline.jspouchdbhood.ie

Front-endHandbook

117Offlinetools

SecurityToolsCodingtool:

DOMPurifyXSS

References:

HTML5SecurityCheatsheet

Front-endHandbook

118Securitytools

Tasking(akabuild)toolsTasking/buildtools:

GulpGrunt

Tasking/buildandmoretools:

BrunchMimosa

Front-endHandbook

119Tasking(akabuild)tools

DeploymenttoolsFTPLOY[freeto$]TravisCI[freeto$]codeship[freeto$]Bamboo[$]Springloops[freeto$]surgesyncninja

Front-endHandbook

120Deploymenttools

Site/appmonitoringtoolsUptime:

pingdom[freeto$]UptimeRobotUptrends[$]

General:

NewRelic

Front-endHandbook

121Site/appmonitoringtools

JavaScripterrorreporting/monitoringRaygun[$]errorception[$]sentry[freeto$]{track:js}[$]

Front-endHandbook

122JSerrormonitoringtools

PerformancetoolsReporting:

WEIGHTOF.ITWebPageTestGTmetrixSpeedCurve[$]ChromeDevtoolsTimelinesitespeed.io

JStools:

ImageOptim-CLIimagemin

Budgeting:

performancebudget.io

Front-endHandbook

123Performancetools