Table of Contents1... · 2017. 5. 18. · Web Content Accessibility Guidelines (aka WCAG) &...

1.1

1.2

1.3

1.3.1

1.3.2

1.3.3

1.3.4

1.3.5

1.3.6

1.3.7

1.3.8

1.3.9

1.3.10

1.4

1.4.1

1.4.1.1

1.4.1.2

1.4.1.3

1.4.1.4

1.4.1.5

1.4.1.6

1.4.1.7

1.4.1.8

1.4.1.9

1.4.1.10

1.4.1.11

1.4.1.12

1.4.1.13

1.4.1.14

1.4.1.15

TableofContentsIntroduction

WhatIsaFront-EndDeveloper?

PartI:TheFront-EndPractice

Front-EndJobsTitles

CommonWebTechEmployed

Front-EndDevSkills

Front-EndDevsDevelopFor...

Front-EndonaTeam

GeneralistMyth

Front-Endinterviewquestions

Front-EndJobBoards

Front-EndSalaries

HowFDsAreMade

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/BrowserAPIs

2

1.4.1.16

1.4.1.17

1.4.1.18

1.4.1.19

1.4.1.20

1.4.1.21

1.4.1.22

1.4.1.23

1.4.1.24

1.4.1.25

1.4.1.26

1.4.1.27

1.4.1.28

1.4.1.29

1.4.1.30

1.4.1.31

1.4.1.32

1.4.1.33

1.4.2

1.4.2.1

1.4.3

1.4.4

1.5

1.5.1

1.5.2

1.5.3

1.5.4

1.5.5

1.5.6

1.5.7

1.5.8

1.5.9

1.5.10

1.5.11

LearnJSON

LearnJSTemplates

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

3

1.5.12

1.5.13

1.5.14

1.5.15

1.5.16

1.5.17

1.5.18

1.5.19

1.5.20

1.5.21

1.5.22

1.5.23

1.5.24

1.5.25

1.5.26

1.5.27

1.5.28

1.5.29

1.5.30

1.5.31

1.5.32

1.5.33

1.5.34

1.5.35

1.5.36

1.5.37

JavaScriptTools

StaticSiteGeneratorsTools

App(Desktop,Mobile,Tablet,etc.)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

4

Front-EndDeveloperHandbookWrittenbyCodyLindleysponsoredby—FrontendMasters

Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingit.

Itisspecificallywrittenwiththeintentionofbeingaprofessionalresourceforpotentialandcurrentlypracticingfront-enddeveloperstoequipthemselveswithlearningmaterialsanddevelopmenttools.Secondarily,itcanbeusedbymanagers,CTOs,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.

Introduction

5

Downloada.pdf,.epub,or.mobifilefrom:

https://www.gitbook.com/book/frontendmasters/front-end-handbook/details

Contributecontent,suggestions,andfixesongithub:

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

ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0UnportedLicense.

Introduction

6

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.e,onafridge,incars,etc.).

Themostcommonwebbrowsersare:

ChromeInternetExplorerFirefoxSafari

Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbecontrolledfromacommandlineinterfaceforthepurposeofwebpageautomation(e.g.,functionaltesting,scraping,unittesting,etc.).Thinkofheadlessbrowsersasabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraversewebpages.

Themostcommonheadlessbrowsersare:

PhantomJS

WhatIsaFront-EndDeveloper?

7

slimerjstrifleJS

WebviewsareusedbyanativeOS,inanativeapplication,torunwebpages.Thinkofawebviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanativeapplicationrunningonadevice(e.g.,iOS,android,windows).

Themostcommonsolutionsforwebviewdevelopmentare:

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

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

Someexamplesoftheseenvironmentsare:

NativeScriptReactNative

WhatIsaFront-EndDeveloper?

8

PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.

PartI:TheFront-EndPractice

9

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-EndJobsTitles

10

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

Mobile/TabletFront-EndDeveloper

Whentheword"Mobile"or"Tablet"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasexperiencedevelopingfront-endsthatrunonmobileortabletdevices(eithernativelyoronthewebplatform,i.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"termsinjobtitlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andback-

Front-EndJobsTitles

11

end.

Front-EndJobsTitles

12

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)WebAPIs(akaHTML5andfriendsorBrowserAPIs)HypertextTransferProtocol(akaHTTP)UniformResourceLocators(akaURLs)JavaScriptObjectNotation(akaJSON)WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)

Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.

HyperTextMarkupLanguage(akaHTML)

CommonWebTechEmployed

13

HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.

—Wikipedia

Mostrelevantspecifications/documentation:

AllW3CHTMLSpecTheelementsofHTMLfromtheLivingStandardGlobalattributesHTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebHTMLattributereferenceHTMLelementreferenceTheHTMLSyntaxfromtheLivingStandard

CascadingStyleSheets(akaCSS)

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

—Wikipedia

Mostrelevantspecifications/documentation:

AllW3CCSSSpecificationsCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSreferenceSelectorsLevel3

DocumentObjectModel(akaDOM)

CommonWebTechEmployed

14

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

—Wikipedia

Mostrelevantspecifications/documentation:

DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4

JavaScriptProgrammingLanguage(aka:ECMAScript6,ES6,JavaScript2015)

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

Mostrelevantspecifications/documentation:

ECMAScript®2015LanguageSpecification

WebAPIs(akaHTML5andfriends)

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

—Mozilla

Mostrelevantdocumentation:

WebAPIInterfaces

HypertextTransferProtocol(akaHTTP)

CommonWebTechEmployed

15

TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.

—Wikipedia

Mostrelevantspecifications:

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

UniformResourceLocators(akaURL)

Auniformresourcelocator(URL)(alsocalledawebaddress)isareferencetoaresourcethatspecifiesthelocationoftheresourceonacomputernetworkandamechanismforretrievingit.AURLisaspecifictypeofuniformresourceidentifier(URI),althoughmanypeopleusethetwotermsinterchangeably.AURLimpliesthemeanstoaccessanindicatedresource,whichisnottrueofeveryURI.URLsoccurmostcommonlytoreferencewebpages(http),butarealsousedforfiletransfer(ftp),email(mailto),databaseaccess(JDBC),andmanyotherapplications.

—Wikipedia

Mostrelevantspecifications:

UniformResourceLocators(URL)URLLivingStandard

JavaScriptObjectNotation(akaJSON)

cItistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.

—Wikipedia

Mostrelevantspecifications:

IntroducingJSONJSONAPI

CommonWebTechEmployed

16

TheJSONDataInterchangeFormat

WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)

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

—Wikipedia

AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus

CommonWebTechEmployed

17

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-enddevelopercouldbeskilledinoneormoreofthefollowing:

ContentManagementSystems(akaCMS)Node.jsCross-BrowserTestingCross-PlatformTestingUnitTestingCross-DeviceTestingAccessibility/WAI-ARIASearchEngineOptimization(akaSEO)InteractionorUserInterfaceDesignUserExperienceUsabilityE-commerceSystemsPortalSystemsWireframingCSSLayout/GridsDOMManipulation(e.g.,jQuery)

Front-EndDevSkills

18

MobileWebPerformanceLoadTestingPerformanceTestingProgressiveEnhancement/GracefulDegradationVersionControl(e.g.,GIT)MVC/MVVM/MV*FunctionalProgrammingDataFormats(e.g.,JSON,XML)DataAPIs(e.gRestfulAPI)WebFontEmbeddingScalableVectorGraphics(akaSVG)RegularExpressionsContentStrategyMicrodata/MicroformatsTaskRunners,BuildTools,ProcessAutomationToolsResponsiveWebDesignObject-OrientedProgrammingApplicationArchitectureModulesDependencyManagersPackageManagersJavaScriptAnimationCSSAnimationCharts/GraphsUIWidgetsCodeQualityTestingCodeCoverageTestingCodeComplexityAnalysisIntegrationTestingCommandLine/CLITemplatingStrategiesTemplatingEnginesSinglePageApplicationsXHRRequests(akaAJAX)Web/BrowserSecurityHTMLSemanticsBrowserDeveloperTools

Front-EndDevSkills

19

Front-EndDevelopersDevelopFor...Afront-enddevelopercraftsHTML,CSS,andJSthattypicallyrunsonthewebplatform(e.g.awebbrowser)ononeofthefollowingoperatingsystems(akaOSs):

AndroidChromiumiOSOSXUbuntu(orsomeflavorofLinux)WindowsPhoneWindows

Theseoperatingsystemstypicallyrunononeormoreofthefollowingdevices:

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

Front-EndDevsDevelopFor...

20

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

Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimescenarios:

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

Front-EndDevsDevelopFor...

21

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.

Itisassumedthattheteammentionedaboveisbeingdirectedbyaprojectleadorsomekindofproductowner(i.e.,stakeholder,projectmanager,projectlead,etc.)

Alargerwebteammightincludethefollowingrolesnotshownabove:

VisualDesignersInterfaceDesign/InteractionDesigner/InformationDesignSEOStrategistFront-EndDeveloperDevOpsEngineersBack-EndDeveloperAPIDeveloperDatabaseAdministratorQAEngineer/Testers

Front-EndonaTeam

22

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.

GeneralistMyth

23

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

GeneralistMyth

24

Front-EndInterviewsQuestionsyoumaygetasked:

10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuiz

Questionsyouask:

Anopensourcelistofdeveloperquestionstoaskprospectiveemployers

Front-Endinterviewquestions

25

Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.

angularjobs.comauthenticjobs.comcareers.stackoverflow.comcss-tricks.com/jobsfrontenddeveloperjob.comglassdoor.comjobs.emberjs.comjobs.github.comweworkremotely.com

Front-EndJobBoards

26

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-EndSalaries

27

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.

HowFDsAreMade

28

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,andJavaScriptatadeeplevelwithoutignoringinteractiondesignortraditionalprogrammingknowhow.Infact,frommyexperience,thebestfront-enddevelopersoftenhaveamasteryunderstandingofinteractiondesignandprogramming,butfromthecontextofthewebplatform(i.e.,browsers,HTML,CSS,DOM,andJavaScript).Andforwhateverreason,thisknowledgeisoftendiscovered/approachednotgiven.Thatistosay,front-endengineeringstillseemsverymuchtobeapracticemadeupofselftaughtpeople,asopposedtoafieldthatcorrespondsdirectlytoaneducationalfocusfromanorganizedandaccreditedhigherlearningsituation.

Ifyouweretosetouttodaytobecomeafront-enddeveloperIwouldlooselystrivetofollowtheprocessoutlinedbelow.Theprocessassumesyouareyourownbestteacher.

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

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

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

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

9. Getopinionatedandcustomizeyourtoolboxwithwhatevermakessensetoyourbrain.10. LearnNode.js

HowFDsAreMade

29

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.Inshort,askilledfront-enddeveloperdoesnottakeabrokencartoamechanic,theyarethemechanic.

Therestofthisbookpointsareadertotheresourcesandtoolstofollowmypreviouslysuggestedprocess.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,grades,etc.).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][$]

HowFDsAreMade

30

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][$]

HowFDsAreMade

31

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

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

PartII:LearningFront-EndDev

32

SelfDirectedLearningThissectionfocusesonfreeandpaidresources(videotraining,books,etc.)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.

Theresourcesincludefreematerialandpaidmaterial.Paidmaterialwillbeindicatedwith[$].

Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandvideotraining.

Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:

codecademy.comcodeschool.comegghead.ioeventedmind.comFrontendMastersKhanAcademylaracasts.comlynda.com[careful,qualityvaries]mijingo.compluralsight.com[careful,qualityvaries]TagtreeTreehousetutsplus.comUdacity[careful,qualityvaries]

SelfDirectedLearning

33

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

—Wikipedia

HowDoestheInternetwork-W3C[read]HowDoestheInternetWork?-StanfordPaper[read]HowtheInternetWorks[watch]HowtheInternetWorksin5Minutes[watch]HowtheWebWorks[watch][$]WhatIstheInternet?Or,"YouSayTomato,ISayTCP/IP"[read]

LearnInternet/Web

34

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-201501-201601-bar

EvolutionofBrowsers&WebTechnologies(i.e.,APIs)

LearnWebBrowsers

35

evolutionoftheweb.com[read]Timelineofwebbrowsers[read]

TheMostCommonlyUsedHeadlessBrowserAre:

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

HowBrowsersWork

20ThingsILearnedAboutBrowsersandtheWeb[read]FastCSS:HowBrowsersLayOutWebPages[read]HowBrowsersWork:Behindthescenesofmodernwebbrowsers[read]SoHowDoestheBrowserActuallyRenderaWebsite[watch]WhatEveryFrontendDeveloperShouldKnowAboutWebpageRendering[read]

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

OptimizingforBrowsers:

BrowserRenderingOptimization[watch]WebsitePerformanceOptimization[watch]

BrowserSecurity

BrowserSecurityHandbook[read]FrontendSecurity[watch]HTML5SecurityCheatsheet[read]

LearnWebBrowsers

36

SecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheTangledWeb:AGuidetoSecuringModernWebApplicationsread

ComparingBrowsers

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]

LearnWebBrowsers

37

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]

LearnDNS

38

LearnDNS

39

LearnHTTP/Networks(IncludingCORS&WebSockets)

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

—Wikipedia

CORS-Cross-originresourcesharing(CORS)isamechanismthatallowsrestrictedresources(e.g.,fonts)onawebpagetoberequestedfromanotherdomainoutsidethedomainfromwhichtheresourceoriginated.

—Wikipedia

WebSockets-WebSocketisaprotocolprovidingfull-duplexcommunicationchannelsoverasingleTCPconnection.TheWebSocketprotocolwasstandardizedbytheIETFasRFC6455in2011,andtheWebSocketAPIinWebIDLisbeingstandardizedbytheW3C.

—Wikipedia

HTTP

HighPerformanceBrowserNetworking:WhatEveryWebDeveloperShouldKnowAboutNetworkingandWebPerformance[read]HTTP/2FrequentlyAskedQuestions[read]HTTPFundamentals[watch][$]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part1[read]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part2[read]HTTPSuccinctly[read]

CORS

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

WebSockets

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

LearnHTTP/Networks

40

TheWebSocketProtocol[read]

LearnHTTP/Networks

41

LearnWebHostingAwebhostingserviceisatypeofInternethostingservicethatallowsindividualsandorganizationstomaketheirwebsiteaccessibleviatheWorldWideWeb.Webhostsarecompaniesthatprovidespaceonaserverownedorleasedforusebyclients,aswellasprovidingInternetconnectivity,typicallyinadatacenter.WebhostscanalsoprovidedatacenterspaceandconnectivitytotheInternetforotherserverslocatedintheirdatacenter,calledcolocation,alsoknownasHousinginLatinAmericaorFrance.

—Wikipedia

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

GeneralLearning:

UltimateGuidetoWebHosting[read]WebHostingBeginnerGuide[read]WebHostingforDummies[read][$]

LearnWebHosting

42

LearnGeneralFront-EndDevelopmentGeneralLearning:

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

GeneralFront-EndNewsletters,NewsOutlets,&Podcasts:

TheBigWebShowFreshBrewedFrontendFront-EndDevWeeklyfrontendfront.comMobileWebWeeklyOpenWebPlatformDailyDigestO'ReillyWebPlatformRadarshoptalkshow.comTheWebAheadTheWebPlatformPodcastwebtoolsweekly.com

LearnGeneralFront-EndDev

43

LearnUserInterface/InteractionDesignUserInterfaceDesign-Userinterfacedesign(UI)oruserinterfaceengineeringisthedesignofuserinterfacesformachinesandsoftware,suchascomputers,homeappliances,mobiledevices,andotherelectronicdevices,withthefocusonmaximizingtheuserexperience.Thegoalofuserinterfacedesignistomaketheuser'sinteractionassimpleandefficientaspossible,intermsofaccomplishingusergoals(user-centereddesign).

—Wikipedia

InteractionDesignPattern-Adesignpatternisaformalwayofdocumentingasolutiontoacommondesignproblem.TheideawasintroducedbythearchitectChristopherAlexanderforuseinurbanplanningandbuildingarchitecture,andhasbeenadaptedforvariousotherdisciplines,includingteachingandpedagogy,developmentorganizationandprocess,andsoftwarearchitectureanddesign.

—Wikipedia

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

—Wikipedia

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

—Wikipedia

MinimallyI'dsuggestreadingthefollowingcanonicaltextsonthemattersoonecanbuildproperuserinterfaces.

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

LearnUI/InteractionDesign

44

LearnUI/InteractionDesign

45

LearnHTML&CSSHTML-HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.

—Wikipedia

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

—Wikipedia

Likentoconstructingahouse,onemightconsiderHTMLtheframingandCSStobethepainting&decorating.

GeneralLearning:

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

Mastering:

LearnHTML&CSS

46

ACompleteGuidetoFlexbox[read]atozcss.com[watch]CSSDiner[interact]CSSSelectorsfromCSS4tillCSS1[read]CSS3In-Depth[watch][$]WhattheFlexbox?!ASimple,Free20VideoCourseThatWillHelpYouMasterCSSFlexbox[watch]

References/Docs:

CSSTriggers...aGameofLayout,Paint,andCompositecssvalues.comHTMLAttributeReferencehtmlelement.infoMDNCSSReferenceMDNHTMLElementReference

Glossary:

CSSGlossary-ProgrammingReferenceforCSSCoveringComments,Properties,andSelectorsHTMLGlossaryProgrammingReferenceforHTMLelements

Standards/Specifications:

AllW3CCSSSpecificationsAllW3CHTMLSpecCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationTheElementsofHTMLfromtheLivingStandardGlobalAttributesTheHTMLSyntaxfromtheLivingStandardHTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebSelectorsLevel3

ArchitectingCSS:

AtomicDesign[read]OOCSS[read]SMACSS[read][$]SMACSS[watch][$]

AuthoringConventions:

cssguidelin.es[read]

LearnHTML&CSS

47

FrontendGuidelinesQuestionnaire[read]GoogleHTML/CSSStyleGuideIdiomaticCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]

HTML/CSSNewsletters:

CSSWeeklyHTML5Weekly

LearnHTML&CSS

48

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:

GoogleSearchEngineOptimizationStarterGuide[read]SEOFundamentalsFromDavidBooth[watch][$]SEOFundamentalsFromPaulWilson[watch][$]SEOTutorialforBeginners2015[read]SEOforWebDesigners[watch][$]

LearnSEO

49

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

GeneralLearning:

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

Mastering:

AdvancedJavaScript[watch][$]ECMA-262byDmitrySoshnikov[read]EloquentJavaScript[read]Gentleexplanationof'this'keywordinJavaScript[read]

LearnJavaScript

50

FunctionalJavaScript:IntroducingFunctionalProgrammingwithUnderscore.js[read][$]HighPerformanceJavaScript(BuildFasterWebApplicationInterfaces)[read][$]JavaScriptAllongé[read][$]JavaScriptwithPromises[read][$]JavaScriptRegularExpressionEnlightenment[read]TheGoodPartsofJavaScriptandtheWeb[watch][$]Test-DrivenJavaScriptDevelopment[read][$]UsingRegularExpressions[watch][$]YouDon'tKnowJS:Async&Performance[read]YouDon'tKnowJS:ES6&Beyond[read]YouDon'tKnowJS:Scope&Closures[read]YouDon'tKnowJS:this&ObjectPrototypes[read]YouDon'tKnowJS:Types&Grammar[read]

References/Docs:

MDNJavaScriptReference

Glossary/Encyclopedia/Jargon:

TheJavaScriptEncyclopediaJavaScriptGlossarySimplifiedJavaScriptJargon

Standards/Specifications:

ECMAScript®2015LanguageSpecificationStatus,Process,andDocumentsforECMA262

Style:

AirbnbJavaScriptStyleGuideNode.jsStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScript

JavaScriptNewsletters,News,&Podcasts:

EchoJSFiveJSJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com

LearnJavaScript

51

LearnJavaScript

52

LearnWebAnimationGeneralLearning:

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

Standards/Specifications:

WebAnimations

LearnWebAnimation

53

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

—Wikipedia

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

—Wikipedia

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

—Wikipedia

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

GeneralLearning:

Codecademy.comjQuery[watch]TheDocumentObjectModel[read]HTML/JS:MakingWebpagesInteractive[watch]HTML/JS:MakingWebpagesInteractivewithjQuery[watch]jQueryEnlightenment[read]

Mastering:

AdvancEDDOMScripting:DynamicWebDesignTechniques[read][$]AdvancedJSFundamentalstojQuery&PureDOMScripting[watch][$]

LearnDOM,BOM&jQuery

54

DouglasCrockford:AnInconvenientAPI-TheTheoryoftheDOM[watch]DOMEnlightenment[read][$]orreadonlineforfreeFixingCommonjQueryBugs[watch][$]jQuery-FreeJavaScript[watch][$]jQueryTipsandTricks[watch][$]

References/Docs:

jQueryDocsMDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)

Standards/Specifications:

DocumentObjectModel(DOM)Level3EventsSpecificationDocumentObjectModel(DOM)TechnicalReportsDOMLivingStandardW3CDOM4

LearnDOM,BOM&jQuery

55

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.FontdownloadingwaslaterincludedintheCSS3fontsmodule,andhassincebeenimplementedinSafari3.1,Opera10andMozillaFirefox3.5.ThishassubsequentlyincreasedinterestinWebtypography,aswellastheusageoffontdownloading.

—Wikipedia

GeneralLearning:

AComprehensiveGuidetoFontLoadingStrategies[read]BeautifulWebTypeaShowcaseoftheBestTypefacesfromtheGoogleWebFontsDirectory[read]QuickGuidetoWebfontsvia@font-face[read]ResponsiveTypography[watch][$]TypographyfortheWeb[watch][$]

LearnWebFonts

56

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:

FoundationsofUX:Accessibility[watch][$]HowHTMLelementsaresupportedbyscreenreaders[read]IntroductiontoWebAccessibility-GoogleOpenOnlineEducation[watch]IntroductiontoWebAccessibility-WAI[read]UniversalDesignforWebApplications:WebApplicationsThatReachEveryone[read][$]WebAccessibility:GettingStarted[watch][$]AWebforEveryone[read][$]

Standards/Specifications:

AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus

LearnAccessibility

57

LearnAccessibility

58

LearnWeb/BrowserAPIsTheBOMandtheDOMarenottheonlybrowserAPIsthataremadeavailableonthewebplatforminsideofbrowsers.EverythingthatisnotspecificallytheDOMorBOM,butaninterfaceforprogrammingthebrowsercouldbeconsideredaweborbrowserAPI(tragicallyinthepastsomeoftheseAPIshavebeencalledHTML5APIswhichconfusestheirownspecifics/standardizewiththeactualHTML5specificationspecifytheHTML5markuplanguage).NotethatweborbrowserAPIsdoincludedeviceAPIs(e.g.,Navigator.getBattery())thatareavailablethroughthebrowserontabletandphonesdevices.

Imagesource:http://www.evolutionoftheweb.com/

Youshouldbeawareofandlearn,whereappropriate,web/browserAPIs.AgoodtooltousetofamiliarizeoneselfwithalloftheseAPIswouldbetoinvestigatetheHTML5test.comresultsforthe5mostcurrentbrowsers.

Learn:

LearnWeb/BrowserAPIs

59

DiveIntoHTML5[read]ProHTML5Programming[read]

LearnAudio:

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

LearnCanvas:

WebAudioAPI[read]

Additionally,MDNhasagreatdealofinformationaboutweb/browserAPIs.

MDNWebAPIReferenceMDNWebAPIsInterfaceReference-AllInterfaces,ArrangedAlphabeticallyMDNWebAPI-ListsDeviceAccessAPIsandOtherAPIsUsefulforApplications

KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.

InadditiontoMDN,youmightfindthefollowingresourceshelpful:

TheHTML5JavaScriptAPIIndexHTML5Overviewplatform.html5.org

LearnWeb/BrowserAPIs

60

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:

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

References/Docs:

json.org[read]

Standards/Specifications:

ECMA-404TheJSONDataInterchangeFormatRFC7159TheJavaScriptObjectNotation(JSON)DataInterchangeFormat

Architecting:

JSONAPI

LearnJSON

61

LearnJSTemplatesAJavaScripttemplateistypicallyused,butnotalwayswithaMV*solutiontoseparatepartsoftheview(i.e.,theUI)fromthelogicandmodel(i.e.,thedataorJSON).

NotethatJavaScript2015(akaES6)hasanativetemplatingmechanismcalled"Templatesstrings".

InstantHandlebars.js[read][$]JavaScriptTemplatingwithHandlebars[watch][$]LearnHandlebarsin10MinutesorLess[read]

LearnJSTemplates

62

LearnStaticSiteGeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.,ruby,php,python,nodeJS,etc.),producesstaticHTMLfilesfromstatictext/data+templatesthatisindentingtobesentfromaservertotheclientstaticallywithoutadynamicnature.

GeneralLearning:

StaticSiteGenerators[read]

LearnStaticSiteGenerators

63

LearnFront-EndApplicationArchitectureBuildanAppwithReactandAmpersand[watch][$]BuildingModernSingle-PageWebApplications[watch][$]EloquentJavaScript:Modules[read]AFieldGuidetoStaticApps[read]FieldGuidetoWebApplications[read]FrontendGuidelinesQuestionnaire[read]HumanJavaScript[read]JavaScriptApplicationDesign[read][$]NicholasZakas:ScalableJavaScriptApplicationArchitecture[watch]OrganizingJavaScriptFunctionality[watch][$]PatternsforLarge-ScaleJavaScriptApplicationArchitecture[read]ProgrammingJavaScriptApplications[read]Terrific[read]UIArchitecture[watch][$]WebUIArchitecture[watch][$]

LearnFront-EndAppArchitecture

64

LearnInterface/APIDesignData(MostLikelyJSON)APIs

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

JavaScriptAPIs

DesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]

LearnInterface/APIDesign

65

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

ChromeDeveloperTools[watch][$]ExploreandMasterChromeDevToolsUsingTheChromeDeveloperTools[watch][$]

ChromeWebDeveloperToolsDocs:

CommandLineAPIReferenceKeyboard&UIShortcutsReferencePer-PanelDocumentationSettings

News/Newsletters/Podcasts/Tips:

DevTips

LearnWebDevTools

66

LearnWebDevTools

67

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

—Wikipedia

GeneralLearning:

TheBashGuide[read]Codecademy:LearntheCommandLine[watch]TheCommandLineCrashCourse[read]CommandLinePowerUser[watch]LearnEnoughCommandLinetoBeDangerous[read][freeto$]MeettheCommandLine[watch][$]

Mastering:

AdvancedCommandLineTechniques[watch][$]

LearnCommandLine

68

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:

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

LearnNode.js

69

LearnModuleLoadingandDependencyManagementGeneralLearning:

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

References/Docs:

browserifysystem.jswebpack

LearnModuleLoader

70

LearnPackageManagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.

—Wikipedia

GeneralLearning:

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

References/Docs:

bowerjspm.ionpm

LearnPackageManagers

71

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]GettingGitRight[read]GitFundamentals[watch][$]ProGit[read]Ry'sGitTutorial[read]

Mastering:

AdvancedGitTutorials[read]ProGit[read]LearnGitBranching[interact]

References/Docs:

https://git-scm.com/doc

LearnVersionControl

72

LearnBuildandTaskAutomationBuildautomationistheprocessofautomatingthecreationofasoftwarebuildandtheassociatedprocessesincluding:compilingcomputersourcecodeintobinarycode,packagingbinarycode,andrunningautomatedtests.

—Wikipedia

GeneralLearning:

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

References/Docs:

Gulp

Gulpisgreat.However,youmightonlyneednpmrun.Beforeturningtoadditionalcomplexityinyourapplicationstackaskyourselfifnpmruncandothejob.Ifyouneedmore,useboth.

Read:

BuildToolsvsnpmScripts:WhyNotBoth?GiveGrunttheBoot!AGuidetoUsingnpmasaBuildToolHowtoUsenpmasaBuildToolTaskAutomationwithnpmRunUsingnpmasaBuildSystemforYournextProject

LearnBuild&TaskAutomation

73

LearnSitePerformanceOptimizationWebperformanceoptimization,WPO,orwebsiteoptimizationisthefieldofknowledgeaboutincreasingthespeedinwhichwebpagesaredownloadedanddisplayedontheuser'swebbrowser.Withtheaverageinternetspeedincreasingglobally,itisfittingforwebsiteadministratorsandwebmasterstoconsiderthetimeittakesforwebsitestorenderforthevisitor.

—Wikipedia

GeneralLearning:

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

LearnSitePerformanceOptimization

74

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:

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

LearnJSTesting

75

LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.

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

—Wikipedia

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

LearnHeadlessBrowsers

76

LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.

GeneralLearning:

CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]YourFirstOfflineWebApp[read]

LearnOfflineDev

77

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

LearnSecurity

78

LearnMulti-ThingDevelopment

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

Asiteorapplicationcanrunonawiderangeofcomputers,laptops,tabletsandphones,aswellasahandfulofotherthings(watches,thermostats,fridges,etc.).Howyoudeterminewhatthingsyou'llsupportandhowyouwilldeveloptosupportthosethingsiscalledamulti-

LearnMulti-ThingDev(e.g.,RWD)

79

thingdevelopmentstrategy.Below,Ilistthemostcommonmulti-thingdevelopmentstrategies.

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

GeneralLearning:

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

LearnMulti-ThingDev(e.g.,RWD)

80

DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.

DirectedLearning

81

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

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

Front-EndSchools,Courses,&Bootcamps

82

company course price onsite remote

AustinCodingAcademy TheFrontEndTrack

2,490persession

Austin,TX

Betamore Front-endWebDevelopment 8,500 Baltimore,

MD

BLOC BecomeaFrontendDeveloper 4,999 yes

Codeup NightFront-EndBootcamp 8,500

SanAntonio,Texas

CodifyAcademy Front-endWebDevelopment 4,000 multiple

locations

DecodeMTL LearnFront-endWebDevelopment 2,500 Montreal,

QC

TheFlatironSchool IntroductiontoFront-EndWebDevelopment 3,500 NewYork,

NY

GeneralAssembly FrontendWebDevelopment 3,500 multiple

locations

HackerYouFront-endWebDevelopmentImmersive

7,000-7,910

Toronto,Canada

IronYard FrontEndEngineering 12,000 multiplelocations

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

TheNewYorkCode+DesignAcademy FrontEnd101 2,000 NewYork,

NY

PortlandCodeSchool

AdvancedFront-endDeveloperTools 2,000 Portland,

OR

Thinkful FrontendWebDevelopment

300permonth yes

Udacity Front-EndWebDeveloperNanodegree

200monthly

multiplelocations yes

Front-EndSchools,Courses,&Bootcamps

83

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

Front-EndDevstoLearnFrom

84

Front-EndNewsletters,NewsSites,&PodcastsGeneralFront-EndNewsletters,News,&Podcasts:

TheBigWebShowFreshBrewedFrontendFront-EndDevWeeklyFront-EndNewsin5Minutesfrontendfront.comMobileWebWeeklyOpenWebPlatformDailyDigestO'ReillyWebPlatformRadarshoptalkshow.comTTLViewsourcesTheWebAheadWebComponentsWeeklyWebDesignWeeklyTheWebPlatformPodcastwebtoolsweekly.com

HTML/CSSNewsletters:

CSSWeeklyHTML5Weekly

JavaScriptNewsletters,News,&Podcasts:

EchoJSFiveJSJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com

GraphicandAnimationNewslettersandPodcasts

MotionandMeaning

Newsletters,News,&Podcasts

85

ResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly

Newsletters,News,&Podcasts

86

PartIII:ToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.

Makesureyouunderstandingthecategorythatasetoftoolsfallswithin,beforestudyingthetoolsthemselves.

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

Imagesource:https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0

PartIII:Front-EndDevTools

87

GeneralFront-EndDevelopmentToolsDevelopmentTools:

BrowsersyncCodeKitish.2.0.placehold.itPreprosscreensiz.esWraith

OnlineCodeEditors:

CodePenes6fiddle.netJSBinJSFiddleLiveweavePlunker

ToolsforFindingTools:

builtwithjavascripting.commicrojs.comstackshare.iostylesheets.coTheToolboxUnheap

GeneralFront-EndDevTools

88

Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.

Dash[OSX,iOS][$]DevDocsVelocity[Windows][$]Zeal[Windows,Linux]

Doc/APIBrowsingTools

89

SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool

SEOTools

90

Prototyping&WireframingToolsCreating:

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

Collaboration/Presenting:

InVision[freeto$]Conceptboard[freeto$]myBalsamiq[$]

Prototyping&WireframingTools

91

DiagrammingToolsdraw.io[freeto$]Cacoo[freeto$]gliffy[freeto$]

DiagrammingTools

92

HTTP/NetworkToolsCharles[$]ChromeDevToolsNetworkPanelFiddlerPostman

HTTP/NetworkTools

93

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

—Wikipedia

Front-endcodecanminimallybeeditedwithasimpletexteditingapplicationlikeNotepadorTextEdit.But,mostfront-endpractitionersuseacodeeditorspecificallydesignforeditingaprogramminglanguage.

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

However,Idostronglybelieve,minimally,acodeeditorshouldhavethefollowingqualities(bydefaultorbywayofplugins):

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.,notrequiredtoeditthecode)

IpersonallyuseandrecommendSublimeTextwiththefollowingplug-ins.

AutoFileNameBracketHighlighterColorHighlighterCSS3HTMLAttributesHTML-CSS-JSPrettifyPackageControlSideBar EnhancementsStringEncode

CodeEditingTools

94

SublimeLinterSublimeLinter-jsonSublimeLinter-jshintSublimeLinter-html-tidy

Terminal

HerearesomeresourcesforlearningSublime:

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

CodeEditors:

AtomBracketsSublimeText[$]WebStorm[$]VisualStudioCode

OnlineCodeEditors:

Cloud9[freeto$]Codeanywhere[freeto$]Koding[freeto$]

Sharable/RunnableCodeEditors:

Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosmallamountsofimmediatelyrunnablecodeinawebbrowser.

CodePen[freeto$]es6fiddle.netjsbin.com[freeto$]jsfiddle.netliveweave.comPlunker

CodeEditingTools

95

BrowserToolsJSBrowserCodingUtilities:

History.jshtml2canvasPlatform.jsURI.js

GeneralReferenceToolstoDetermineIfXBrowserSupportsX:

BigJS-Compatibility-TableBrowsersupportforbroken/missingimagesBrowserscopecaniuse.comFirefoxPlatformStatus-Implementation&standardizationroadmapforwebplatformfeaturesHTML5PleaseHTML5Testiwanttouse.com/jscc.infoPlatformStatuswebbrowsercompatibility.comwhatwebcando.today

BrowserDevelopment/DebugTools:

ChromeDeveloperTools(akaDevTools)Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings

FirefoxDeveloperToolsIEDevelopertools(akaF12tools)OperaDragonflySafariWebInspectorVorlon.js

SynchronizedBrowserTools:

Browsersync

BrowserTools

96

BrowserCodingToolstoDetermineIfXBrowserSupportsX:

ESFeatureTestsFeature.jsModernizr

BroadBrowserPolyfills/Shims:

console-polyfillHTML5CrossBrowserPolyfillssocket.ioSockJSwebcomponents.jswebshim

BrowserHostedTesting/Automation:

Browserling[$]BrowserStack[$]CrossBrowserTesting.com[$]SauceLabs[$]Selenium

HeadlessBrowsers:

PhantomJSslimerjsTrifleJS

HeadlessBrowserAutomation:

Usedforfunctionaltestingandmonkeytesting.

CasperJSgremlins.jsNightmareNightwatchJS

BrowserHacks:

browserhacks.com

BrowserTools

97

HTMLToolsHTMLTemplates/Boilerplates/StarterKits:

dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplatePearsWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopment

HTMLPolyfill:

html5shiv

Transpiling:

HAMLjadeMarkdown

References:

ElementattributesElementsHTMLArrowsHTMLEntityLookupHTMLInterfacesBrowserSupportHTMLelement.info

Linting/Hinting:

html5-lintHTMLHinthtml-inspector

Optimizer:

HTMLMinifier

OnlineCreation/Generation/ExperimentationTools:

HTMLTools

98

tablesgenerator.com

AuthoringConventions:

HTMLCodeGuidePrinciplesofWritingConsistent,IdiomaticHTML

Workflow:

Emmet

TrendingHTMLRepositoriesonGitHubThisMonth:

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

HTMLTools

99

CSSToolsDesktop&MobileCSSFrameworks:

BaseBootstrapConciseFoundationMaterialDesignLite(MDL)MaterializeMetroUIPure.cssSemanticUI

MobileOnlyCSSFrameworks:

Ratchet

CSSReset:

ACSSReset(or“ResetCSS”)isashort,oftencompressed(minified)setofCSSrulesthatresetsthestylingofallHTMLelementstoaconsistentbaseline.

—cssreset.com

EricMeyer's“ResetCSS”2.0Normalize

Transpiling:

pleeease.ioPostCSS&cssnextrework&mythSass/SCSSStylus

References:

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

CSSTools

100

cssvalues.comMDNCSSReferenceOverAPICSScheatsheet

Linting/Hinting:

CSSLintstylelint

CodeFormatter/Beautifier:

CSScombCSSfmt

Optimizer:

clear-csscssnanoCSSO

OnlineCreation/Generation/ExperimentationTools:

CSSArrowPleaseCSSMaticEnjoyCSSFlexboxPlaygroundflexplorerpatternify.compatternizer.comUltimateCSSGradientGenerator

ArchitectingCSS:

AtomicDesign[read]OOCSS[read]SMACSS[read][$]

AuthoringConventions:

CSScodeguide[read]cssguidelin.es[read]GoogleHTML/CSSStyleGuideIdiomaticCSS[read]MaintainableCSS[read]

CSSTools

101

TrendingCSSRepositoriesonGitHubThisMonth:

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

CSSTools

102

DOMToolsDOMLibraries/Frameworks:

clipboard.jsjQueryKeypressTetherZepto

DOMPerformanceTools:

DOMMonster

References:

EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)

DOMPolyfills/Shims:

dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform

VirtualDOM:

jsdomvirtual-dom

DOMTools

103

JavaScriptToolsJSUtilities:

accounting.jsasyncChanceformat.jsis.jslodashMath.jsMoment.jsNumeral.jsstring.jsunderscore.jswaitxregexp.com

Transpiling(ESXtoESX):

Babel

JavaScriptCompatibilityChecker:

jscc.info/

Linting/Hinting:

eshintjshintJSLint

jslinterrors.com

UnitTesting:

JasmineJest

MochaQUnit

TestingAssertionsforUnitTesting:

JavaScriptTools

104

Chaiexpect.jsshould.js

TestSpies,Stubs,andMocksforUnitTesting:

sinon.js

CodeStyleLinter:

JSCS

CodeFormater/Beautifier:

esformatterjs-beautifyjsfmt

PerformanceTesting:

benchmark.jsjsperf

Visualization,StaticAnalysis,Complexity,CoverageTools:

Blanket.jsCoveralls[$]escomplexEsprimajscomplexity.orgistanbulPlato

Optimizer:

UglifyJS2

Obfuscate:

JavascriptObfuscator[freeto$]JScrambler[$]

Sharable/RunnableCodeEditors:

es6fiddle.netjsbin.com[freeto$]

JavaScriptTools

105

jsfiddle.net

OnlineRegularExpressionEditors/VisualTools:

debuggexregex101regexperRegExr

AuthoringConventions:

AirbnbJavaScriptStyleGuideKhanJavaScriptStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScript

TrendingJSRepositoriesonGitHubThisMonth:

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

MostDependeduponPackagesonNPM:

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

JavaScriptTools

106

StaticSiteGeneratorsToolsJSSiteGenerators:

HarpMetalsmith

JSBlogSiteGenerators:

HexoHubPress

SiteGeneratorListings:

staticgen.comstaticsitegenerators.net

StaticSiteGeneratorsTools

107

App(Desktop,Mobile,Tablet,etc.)ToolsFront-EndAppFrameworks:

AngularJS&BatarangAureliaBackbone&MarionetteEmber&EmberInspectorPolymer&IronElements&PaperElementsReact&React-router&Flux&ReactDeveloperToolsVue.js&vue-loader&vue-router

Full-StackJSAppPlatforms:

HoodieMEAN(i.e.,MongoDB,Express,AngularJS,andNode.js.)Meteor

MobileWebUI/Site/AppFrameworks

ThesesolutionscanbeusedanywhereincludinginaWebView(i.e.,webplatformandbrowserengine)app:

Framework7KendoUIMobileMobileAngularUIRatchet

NativeHybridMobileWebView(i.e.,BrowserEngineDriven)Frameworks:

ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.

ioniconsen.io

NativeHybridMobileDevelopmentWebview(i.e.,BrowserEngineDriven)Environments/Platforms/Tools:

ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.

AdobePhoneGap[$]

App(Desktop,Mobile,Tablet,etc.)Tools

108

AppBuilder[$]cocoon.io[freeto$]ionichub[freeto$]kony[$]manifoldJSMonaca[$]Taco

NativeDesktopWebView(i.e.,BrowserEngineDriven)AppFrameworks:

ElectronNW.js

NativeMobileAppFrameworks(AkaJavaScriptNativeApps)

ThesesolutionsuseaJSengineatruntimetointerpretJSandbridgethattonativeAPIs.NobrowserengineorWebViewisused.TheUIisconstructedfromnativeUIcomponents.

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

References:

todomvc.comFrontendGuidelinesQuestionnaire

AppSeeds/Starters/Boilerplates:

Angular2WebpackStarterEmberstarter-kitNG6-starterhjs-webpackReactStarterKit

App(Desktop,Mobile,Tablet,etc.)Tools

109

ScaffoldingToolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.

SlushYeoman

ScaffoldingTools

110

TemplatingToolsJustTemplating:

doT.jsHandlebars

htmlbarsHogan.jsMustache.jsNunjuncksTransparency

TemplatingandReactiveDataBinding:

jquerymy.jsknockoutpaperclip.jsractive.jsreact.jsriotRivets.jsRxJSvue.js

TemplatingtoVirtualDOM:

JSXt7

TemplatingTools

111

UIWidgets&ComponentsToolsDesktop&Mobile:

BootstrapKendoUI[freeto$]MaterialuiMaterializeMetroUIOfficeUIFabricPolymerPaperElementsSemanticUIWebix[$]

Desktop(NW.jsandElectron):

PhotonReactUIComponentsforOSXElCapitanandWindows10

MobileFocused:

Framework7KendoUIMobileMobileAngularUIRatchet

UIWidgets&ComponentsTools

112

DataVisualization(e.g.,Charts)ToolsJSLibraries:

d3sigmajs

Widgets&Components:

amCharts[$]AnyChart[Non-commercialfreeto$]C3.jsChartist-jsjChart.jsEpochFusionCharts[$]GoogleChartsHighcharts[Non-commercialfreeto$]ZingChart[freeto$]

Services:

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

DataVisualization(e.g.,Charts)Tools

113

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

Fabric.jsTwo.js

Canvas:

EaselJSPaper.js

SVG:

d3GraphicsJSRaphaëlSnap.svgsvg.js

WebGL:

pixi.jsthree.js

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

114

AnimationToolsDynamics.jsGreenSock-JSsnabbt.jsTweenJSVelocity.js

Polyfills/Shims:

web-animations-js

AnimationTools

115

JSONToolsOnlineEditors:

JSONmate

QueryTools:

DefiantJSJSONMaskObjectPath

GeneratingMockJSONTools:

JSONGeneratorMockaroo

OnlineJSONMockingAPITools:

FillText.comJSONPlaceholdermockable.ioMocky

LocalJSONMockingAPITools:

json-server

JSONSpecifications/Schemas:

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

JSONTools

116

TestingFrameworkToolsInternKarmaNightWatch.js

TestingFrameworkTools

117

Front-EndDataStorageToolsAlaSQLDexie.jsForerunnerDBlocalForageLokiJSLovefieldPouchdbYDN-DB

DataStorageTools

118

Module/PackageLoadingToolsBrowserifyRollupSystemJSwebpack

Module/PackageLoadingTools

119

Module/PackagePepositoryToolsBowerjspm.ioNPMspmjs

Module/PackageRepo.Tools

120

Web/Cloud/StaticHostingToolsAWS[$]DigitalOcean[$]DIVSHOT[freeto$]Heroku[freeto$]Modulus[$]netlify[freeto$]Surge[freeto$]

Web/Cloud/StaticHostingTools

121

ProjectManagement&CodeHostingToolsAssembla[freeto$]Bitbucket[freeto$]Codebase[$]Github[freeto$]Unfuddle[$]

ProjectManagement&CodeHosting

122

Collaboration&CommunicationToolsGoogleHangoutsSkype[freeto$]Slack&screenhero[freeto$]

Code/GitHubCollaboration&Communication:

Gitter[freeto$]

Collaboration&CommunicationTools

123

ContentManagementHosted/APIToolsAPICMS(i.e.,ContentDeliveryCMS)Tools:

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

HostedCMSTools:

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

StaticCMSTools:

webhook.com

CMSHosted/APITools

124

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

Back&[freeto$]Firebase[freeto$]Kinvey[free'ishto$]Pusher[freeto$]

UserManagementasaService:

Auth0[$]Hull[$]UserApp[freeto$]

BAAS(forFront-EndDevs)Tools

125

OfflineToolsHoodieOffline.jsPouchDBupup

OfflineTools

126

SecurityToolsCodingTool:

DOMPurifyXSS

References:

HTML5SecurityCheatsheet

SecurityTools

127

Tasking(akaBuild)ToolsTasking/BuildTools:

GruntGulp

Tasking/BuildandMoreTools:

BrunchMimosa

Tasking(akaBuild)Tools

128

DeploymentToolsBamboo[$]Codeship[freeto$]FTPLOY[freeto$]TravisCI[freeto$]Springloops[freeto$]SurgeSyncNinja

DeploymentTools

129

Site/AppMonitoringToolsUptime:

Pingdom[freeto$]UptimeRobotUptrends[$]

General:

NewRelic

Site/AppMonitoringTools

130

JavaScriptErrorReporting/Monitoringerrorception[$]Raygun[$]Sentry[freeto$]TrackJS[$]

JSErrorMonitoringTools

131

PerformanceToolsReporting:

ChromeDevtoolsTimelineGTmetrixsitespeed.ioSpeedCurve[$]WebPageTestWEIGHTOF.IT

JSTools:

imageminImageOptim-CLI

Budgeting:

performancebudget.io

References/Docs:

JankFreePerformanceofES6featuresrelativetotheES5

PerformanceTools

132