table of contents · microsoft shows up and contributes. developing native applications for...
TRANSCRIPT
1.1
1.2
1.3
1.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.6
1.6.1
1.6.1.1
1.6.1.2
1.6.1.3
1.6.1.4
1.6.1.5
1.6.1.6
1.6.1.7
1.6.1.8
1.6.1.9
1.6.1.10
1.6.1.11
1.6.1.12
1.6.1.13
TableofContentsIntroduction
WhatIsaFront-EndDeveloper?
RecapofFront-endDevin2016
In2017expect...
PartI:TheFront-EndPractice
Front-EndJobsTitles
CommonWebTechEmployed
Front-EndDevSkills
Front-EndDevsDevelopFor...
Front-EndonaTeam
Generalist/Full-StackMyth
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
2
1.6.1.14
1.6.1.15
1.6.1.16
1.6.1.17
1.6.1.18
1.6.1.19
1.6.1.20
1.6.1.21
1.6.1.22
1.6.1.23
1.6.1.24
1.6.1.25
1.6.1.26
1.6.1.27
1.6.1.28
1.6.1.29
1.6.1.30
1.6.1.31
1.6.1.32
1.6.1.33
1.6.1.34
1.6.1.35
1.6.1.36
1.6.1.37
1.6.1.38
1.6.2
1.6.2.1
1.6.3
1.6.4
1.7
1.7.1
1.7.2
1.7.3
1.7.4
LearnAccessibility
LearnWeb/BrowserAPIs
LearnJSON
LearnJSTemplates
LearnStaticSiteGenerators
LearnComputerScienceviaJS
LearnFront-EndAppArchitecture
LearnDataAPI(i.e.JSON/REST)Design
LearnReact&Redux
LearnProgressiveWebApp
LearnJSAPIDesign
LearnWebDevTools
LearnCommandLine
LearnNode.js
LearnJSModules
LearnJSModuleloaders/bundlers
LearnPackageManagers
LearnVersionControl
LearnBuild&TaskAutomation
LearnSitePerformanceOptimization
LearnTesting
LearnHeadlessBrowsers
LearnOfflineDev
LearnWeb/Browser/AppSecurity
LearnMulti-DeviceDev(e.g.,RWD)
DirectedLearning
Front-EndSchools,Courses,&Bootcamps
Front-EndDevstoLearnFrom
Newsletters,News,&Podcasts
PartIII:Front-EndDevTools
Doc/APIBrowsingTools
SEOTools
Prototyping&WireframingTools
DiagrammingTools
3
1.7.5
1.7.6
1.7.7
1.7.8
1.7.9
1.7.10
1.7.11
1.7.12
1.7.13
1.7.14
1.7.15
1.7.16
1.7.17
1.7.18
1.7.19
1.7.20
1.7.21
1.7.22
1.7.23
1.7.24
1.7.25
1.7.26
1.7.27
1.7.28
1.7.29
1.7.30
1.7.31
1.7.32
1.7.33
1.7.34
1.7.35
1.7.36
1.7.37
HTTP/NetworkTools
CodeEditingTools
BrowserTools
HTMLTools
CSSTools
DOMTools
JavaScriptTools
StaticSiteGeneratorsTools
AccessibilityDevTools
AppFrameworks(Desktop,Mobileetc.)Tools
ProgressiveWebAppTools
ScaffoldingTools
GeneralFEDevelopmentTools
Templating/DataBindingTools
UIWidget&ComponentToolkits
DataVisualization(e.g.,Charts)Tools
Graphics(e.g.,SVG,canvas,webgl)Tools
AnimationTools
JSONTools
PlaceholderImages/TextTools
TestingTools
Front-endDataStorageTools
Module/PackageLoadingTools
Module/PackageRepo.Tools
HostingTools
ProjectManagement&CodeHosting
Collaboration&CommunicationTools
CMSHosted/APITools
BAAS(forFront-EndDevs)Tools
OfflineTools
SecurityTools
Tasking(akaBuild)Tools
DeploymentTools
4
1.7.38
1.7.39
1.7.40
1.7.41
Site/AppMonitoringTools
JSErrorMonitoringTools
PerformanceTools
ToolsforFindingTools
5
Front-EndDeveloperHandbook2017WrittenbyCodyLindleysponsoredby—FrontendMasters
Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingitin2017.
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
6
Downloada.pdf,.epub,or.mobifilefrom:
https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details
Contributecontent,suggestions,andfixesongithub:
https://github.com/FrontendMasters/front-end-handbook-2017
ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0UnportedLicense.
Introduction
7
WhatIsaFront-EndDeveloper?Front-endwebdevelopment,alsoknownasclient-sidedevelopmentisthepracticeofproducingHTML,CSSandJavaScriptforawebsiteorWebApplicationsothatausercanseeandinteractwiththemdirectly.Thechallengeassociatedwithfrontenddevelopmentisthatthetoolsandtechniquesusedtocreatethefrontendofawebsitechangeconstantlyandsothedeveloperneedstoconstantlybeawareofhowthefieldisdeveloping.
Theobjectiveofdesigningasiteistoensurethatwhentheusersopenupthesitetheyseetheinformationinaformatthatiseasytoreadandrelevant.Thisisfurthercomplicatedbythefactthatusersnowusealargevarietyofdeviceswithvaryingscreensizesandresolutionsthusforcingthedesignertotakeintoconsiderationtheseaspectswhendesigningthesite.Theyneedtoensurethattheirsitecomesupcorrectlyindifferentbrowsers(cross-browser),differentoperatingsystems(cross-platform)anddifferentdevices(cross-device),whichrequirescarefulplanningonthesideofthedeveloper.
https://en.wikipedia.org/wiki/Front-end_web_development
HTML,CSS,&JavaScript:
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.Thesefourruntimesscenariosare
WhatIsaFront-EndDeveloper?
8
explainedbelow.
WebBrowsers
Awebbrowserissoftwareusedtoretrieve,present,andtraverseinformationontheWWW.Typically,browsersrunonadesktoporlaptopcomputer,tablet,orphone,butasoflateabrowsercanbefoundonjustaboutanything(i.e,onafridge,incars,etc.).
Themostcommonwebbrowsersare(showninorderofmostusedfirst):
ChromeInternetExplorer(Note:notEdge,referringtoIE9toIE11)FirefoxSafari
HeadlessBrowsers
Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbecontrolledfromacommandlineinterfaceprogrammaticallyforthepurposeofwebpageautomation(e.g.,functionaltesting,scraping,unittesting,etc.).Thinkofheadlessbrowsersasabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraversewebpages.
Themostcommonheadlessbrowsersare:
PhantomJSslimerjstrifleJS
Webviews
WebviewsareusedbyanativeOS,inanativeapplication,torunwebpages.Thinkofawebviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanativeapplicationrunningonadevice(e.g.,iOS,android,windows).
Themostcommonsolutionsforwebviewdevelopmentare:
Cordova(typicallyfornativephone/tabletapps)NW.js(typicallyusedfordesktopapps)Electron(typicallyusedfordesktopapps)
NativefromWebTech
Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-enddeveloperstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asoflate,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.,CSS
WhatIsaFront-EndDeveloper?
9
andJavaScript),withoutwebengines,tocreatenativeapplications.
Someexamplesoftheseenvironmentsare:
NativeScriptReactNative
NOTES:
Makesureyouareclearwhatwhatexactlyismeantbythe"webplatform".Read,"TheWebplatform:whatitis"andreadthe,"OpenWebPlatform"Wikipediapage.
WhatIsaFront-EndDeveloper?
10
RecapofFront-endDevelopmentin2016TheyearoftheUIcomponent,andtreeofUIcomponents,forbuildingcomplexUI's.Nolongermainstreamdevelopmentblasphemy:componentsbeingconstructedfromasinglefile,potentiallycontainHTML,CSS,andJS,INONEFILE!React,Redux,Webpack,ECMAScript2015(akaES6),andBabelgainmassiveadoption.Thesesolutionsrisetothetopofallthepollsasthemostusedtech.Developersrealized,inmostcases,HTML5hybridmobiledevelopmentviawebviewsdoesn'tprovideenoughwinswhenbuildingnativeapps.ReactNativeandNativeScriptstarttoreplacemobileHTML5hybridwebviewdevelopment.ManyabandonGulpforNPMscripts,butGulpremainspopular.SASSremainsapopulartool,whilePostCSS(+CSSNext)gainsground.Linting/HintingHTML,CSS,andJavaScriptisathingmostdevelopersdo(ESlintreplacesJShint&JSCSmergesintoESLint).AtrendofdevelopersabandonSublimeandAtomforVisualStudioCodebegins.jQueryremains,butusage/interestisdeclining.jQuery3wasreleased,muchlikeatreefallinginaforestthatnobodyhears.Vue.jscontinuestogainconverts.Deservinglyso!JavaScriptfunctionalprogramming&patternsgetalotofattention.Offlinedevelopment&ProgressiveWebAppsgomainstream.Microsoftshowsupandcontributes.Developingnativeapplicationsforwindows,OSX,andlinuxusingthingslikeNW.jsandElectronviawebtechnologiesbecomesathing.Angular2(inthefutureaka"Angular")getsoffthepotandmostrealizeitwillneverbeasmainstreamasAngular1.JavaScriptbroadlyremainsatthecenterofsoftwaretechnologies.Moredevelopersstartcaringabouttooling(e.g.automation)andtesting.Staticsitegeneratorsaretakenseriously.CSSGridexcitementgrowsandthefuturelooksbright.NPMgetssomecompetitionfromYARN.ThenextevolutionofReact-likesolutionsshowsupviaPreact,Deku,Rax,andinfernoshowcasingevolutionwithoutmuchAPIchange.MostlypeoplelearntonotonlyacceptJSXtheycan'timaginenotusingit.AworkableCSSmodulepattern(CSSencapsulation)isactualizedandused,thusCSSinJSbecomesaviablesolutionformany.MorepeopleturningtoUIfunctional/integrationtestingincludingconceptslikevisualCSS&RWDregressiontesting.
RecapofFront-endDevin2016
11
ThedaysofbattlinginconsistentbrowserAPI'sarealmostbehindusduetoamassivedeclineinusageanddevelopmentforolderversionsofIE.Mosteveryonerealizedtheywillhavetohaveamulti-devicestrategyplanwhendevelopmentforthewebMoredeveloper,fromotherlanguages,continuetofloodtheJavaScriptspacebringingwiththemthingsliketypecheckingandanobsessionwithclasssyntaxandOOPconcepts.Front-enddevsareintroducedtoHotModulereplacementtechniquesandtimetraveldebugging.MorewaitingforanativeJavaScriptbrowsermoduleloader.EnforcingCSSandJavaScriptstyleconventionsbecomesmoreimportant(consideringES3toES6codeandCSSpre-processorssyntacticalvariations)AsmallbutnoticeablenumberofdevelopersarestartingtochoseElmoverJavaScript.TypeScriptgetssomeserioususeandfanboys.http://aurelia.io/becomesthesmartchoiceforenterprisedevelopers(i.e.support!).WebpackgetsitsacttogetherandsolidifiesispositionoverthesuperiorJSPMsolution.HTTPS,yeah,we'reseriousaboutthat.BASHonwindowshappen.ThenotificationsAPIgetsusedandabusedforchromeusers,butonlyafteryougiveitpermission.Firebugofficiallydead.CSS20yearsyoungin2016.Immutabilityconceptsrunrapid.
RecapofFront-endDevin2016
12
In2017expect...WebAssembly,mightjustpeak.importmightjustbeusablein<scripts></scripts>UniversalJavaScriptsolutionswillcontinuetorisethatpayhomage/respecttothedaysofserverdeliveredfront-ends(i.e.htmltotheclient).ReactiveprogrammingcontinuestothriveintheJavaScriptscene.(seeMobXandRxJS).React,moresotheconcept,willdominate.Reactitselfwillbecompletelyre-written(seeReactFiber)orevolve(seeInferno).AngularfoundSEMVERsoAngular3,4(even5)isontheroadmapfor2017.Areturntosimplewebsitesmayhappen,web1.0retro,butwiththehelpof2017tools(i.e.staticsitegeneration)RESTfulJSONAPIswillgetmorecompetition(seeGraphQL)CouldbeabanneryearforVue.js.MoredevswillabandontraditionalCMSsolutionsforstaticsitegenerators&APICMStools.MorepeoplewillmovefromSasstoPostCSS+cssnext.LotsmoreHTTP2andHTTPS.Webcomponentswillcontinuetolurkandwaitforsignificanttractionbydevelopersthatmightnevercometobe.Thenoframework,framework,factionwillgainmomentum(seeSvelte).JavaScriptwillsettle,andhopefully,CSSwilleruptandeveryonewillcryfatigueuntilitsettles.Hatredforappsstorewillgrow,whiletheopenwebhasnomemoryofwrongdoing.Reduxwillcontinuetogetstiffcompetition(seemobx).YARNwillwinmoreusers.Theideaof“front-endapps”,“ThickClientapps”,“Staticapps”,“NoBackendapp”,“SPA's”,“Front-enddrivenapp”mightgetboileddowntotheterm/conceptcalled"JAMStack".
In2017expect...
13
PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.
PartI:TheFront-EndPractice
14
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
ThegenericjobtitlethatdescribesadeveloperwhoisskilledtosomedegreeatHTML,CSS,DOM,andJavaScriptandimplementingthesetechnologiesonthewebplatform.
Front-EndEngineer(akaJavaScriptDeveloperorFull-stackJavaScriptDeveloper)
Thejobtitlegiventoadeveloperwhocomesfromacomputerscience,engineering,backgroundandisusingtheseskillstoworkwithfront-endtechnologies.Thisroletypicallyrequiresacomputersciencedegreeandyearsofsoftwaredevelopmentexperience.Whentheword"JavaScriptApplication"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldbeanadvancedJavaScriptdeveloperpossessingadvancedprogramming,softwaredevelopment,andapplicationdevelopmentskills(i.ehasyearsofexperiencebuildingfront-endapplications).
CSS/HTMLDeveloper
Thefront-endjobtitlethatdescribesadeveloperwhoisskilledatHTMLandCSS,excludingJavaScriptandApplicationknowhow.
Front-EndWebDesigner
Whentheword"Designer"isincludedinthejobtitle,thiswilldenotethatthedesignerwillpossesfront-endskills(i.e.,HTML&CSS)butalsoprofessionaldesign(VisualDesignandInteractionDesign)skills.
Front-EndJobsTitles
15
Web/Front-EndUserInterface(akaUI)Developer/Engineer
Whentheword"Interface"or"UI"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldpossesinteractiondesignskillsinadditiontofront-enddeveloperskillsorfront-endengineeringskills.
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.
Front-EndJobsTitles
16
Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjobtitlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andback-end.
Front-EndJobsTitles
17
WebTechnologiesEmployedbyFront-EndDevelopers
Imagesource:http://www.2n2media.com/compare-front-end-development-and-back-end-development
Thefollowingcorewebtechnologiesareemployedbyfront-enddevelopers(considerlearningtheminthisorder):
1. UniformResourceLocators(akaURLs)2. HypertextTransferProtocol(akaHTTP)3. HyperTextMarkupLanguage(akaHTML)4. CascadingStyleSheets(akaCSS)5. JavaScriptProgrammingLanguage(aka:ECMAScript262)6. JavaScriptObjectNotation(akaJSON)7. DocumentObjectModel(akaDOM)8. WebAPIs(akaHTML5andfriendsorBrowserAPIs)9. WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternet
Applications(akaARIA)
Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.
HyperTextMarkupLanguage(akaHTML)
CommonWebTechEmployed
18
HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CHTMLSpecTheelementsofHTMLfromtheLivingStandardGlobalattributesHTML5.2fromW3CHTMLattributereferenceHTMLelementreferenceTheHTMLSyntaxfromtheLivingStandard
CascadingStyleSheets(akaCSS)
CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CCSSSpecificationsCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSreferenceSelectorsLevel3
DocumentObjectModel(akaDOM)
CommonWebTechEmployed
19
TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).
—Wikipedia
Mostrelevantspecifications/documentation:
DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4
JavaScriptProgrammingLanguage(aka:ECMAScript262)
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®2017LanguageSpecification
WebAPIs(akaHTML5andfriends)
WhenwritingcodefortheWebusingJavaScript,thereareagreatmanyAPIsavailable.Belowisalistofalltheinterfaces(thatis,typesofobjects)thatyoumaybeabletousewhiledevelopingyourWebapporsite.
—Mozilla
Mostrelevantdocumentation:
WebAPIInterfaces
HypertextTransferProtocol(akaHTTP)
CommonWebTechEmployed
20
TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.
—Wikipedia
Mostrelevantspecifications:
HypertextTransferProtocol--HTTP/1.1HTTP/2
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
21
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
22
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,andbrowserdevelopmentknow-how,afront-enddevelopercouldbeskilledinoneormoreofthefollowing:
ContentManagementSystems(akaCMS)Node.jsCross-BrowserTestingCross-PlatformTestingUnitTestingCross-DeviceTestingAccessibility/WAI-ARIASearchEngineOptimization(akaSEO)InteractionorUserInterfaceDesignUserExperienceUsabilityE-commerceSystemsPortalSystemsWireframingCSSLayout/GridsDOMManipulation(e.g.,jQuery)
Front-EndDevSkills
23
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
24
Front-EndDevelopersDevelopFor...Afront-enddevelopercraftsHTML,CSS,andJSthattypicallyrunsonthewebplatform(e.g.awebbrowser)deliveredfromoneofthefollowingoperatingsystems(akaOSs):
AndroidChromiumiOSOSXUbuntu(orsomeflavorofLinux)WindowsPhoneWindows
Theseoperatingsystemstypicallyrunononeormoreofthefollowingdevices:
DesktopcomputerLaptop/netbookcomputerMobilephoneTabletTVWatchThings(i.e.,anythingyoucanimagine,car,refrigerator,lights,thermostat,etc.)
Front-EndDevsDevelopFor...
25
Imagesource:https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/
Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimewebplatformscenarios:
Awebbrowser(examples:Chrome,IE,Safari,Firefox).Aheadlessbrowser(examplesphantomJS).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...
26
Front-EndonaTeamAfront-enddeveloperistypicallyonlyoneplayeronateamthatdesignsanddevelopswebsites,webapplications,ornativeapplicationsrunningfromwebtechnologies.
Abarebonesdevelopmentteamforbuildingprofessionalwebsitesorsoftwareapplicationforthewebplatformwilltypically,minimally,containthefollowingroles.
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:
SEOStrategistsDevOpsEngineersAPIDevelopersDatabaseAdministratorsQAEngineers/Testers
NOTES:
Asmalltrendseemstobeoccurringwherea,"full-stackdeveloper"takesontheresponsibilitiesofbothafront-endandback-enddeveloper.
Front-EndonaTeam
27
Generalist/Full-StackMyth
Imagesource:http://andyshora.com/full-stack-developers.html
Therolesrequiredtodesignanddevelopawebsolutionrequireadeepskillsetandvastexperienceintheareaofvisualdesign,UI/interactiondesign,front-enddevelopment,andback-enddevelopment.Anypersonwhocanfilloneormoreofthese4rolesataprofessionallevelisanextremelyrarecommodity.
Pragmatically,youshouldseektobe,orseektohire,anexpertinoneoftheseroles(i.e.VisualDesign,InteractionDesign/IA,Front-endDev,Back-endDev).Thosewhoclaimtooperateatanexpertlevelatoneormoreoftheserolesareexceptionallyrareandmorethanlikelymythical.
However,giventhatJavaScripthasinfiltratedalllayersofatechnologystack(e.g.React,node.js,express,couchDB,gulp.jsetc...)findingafull-stackJSdeveloperwhocancodethefront-endandback-endisbecominglessmythical.Typically,thesefullstackdevelopersonlydealwithJavaScript.Adeveloperwhocancodethefront-end,back-end,API,anddatabaseisn'tasabsurdasitoncewas(excludingvisualdesign,interactiondesign,andCSS).Stillmythicalinmyopinion,butnotasuncommonasitoncewas.Thus,Iwouldn'trecommenda
Generalist/Full-StackMyth
28
developersetouttobecomea"fullstack"developer.Inraresituationsitcanwork.But,asageneralconceptforbuildingacareerasaFront-endDeveloper,I'dfocusonfront-endtechnologies.
NOTES:
Theterm"Full-Stack"developerhascometotakeonseveralmeanings.Somany,thatnotonemeaningisclearwhenthetermisused.Justconsidertheresultsfromthetwosurveysshownbelow.Theseresultswouldleadonetobelievethatthemajorityofdevelopersarefull-stackdevelopers.But,inmyalmost20yearsofexperience,thisisanythingbutthecase.
Imagesource:https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz
Generalist/Full-StackMyth
29
Imagesource:http://stackoverflow.com/research/developer-survey-2016#developer-profile-developer-occupations
Generalist/Full-StackMyth
30
Front-EndInterviewsQuestionsyoumaygetasked:
10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuiz
Questionsyouask:
Anopensourcelistofdeveloperquestionstoaskprospectiveemployers
Preparing:
PreparingforaFront-EndWebDevelopmentInterviewin2017InterviewCake[$]Crackingthefront-endinterview
Front-Endinterviewquestions
31
Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.
angularjobs.comauthenticjobs.comcareers.stackoverflow.comcss-tricks.com/jobscodepen.io/jobs/frontenddeveloperjob.comglassdoor.comjobs.emberjs.comjobs.github.comweworkremotely.com
NOTES:
Lookingforaremotefront-endJob,checkouttheseRemote-friendlycompanies
Front-EndJobBoards
32
Front-EndSalariesThenationalaverageintheU.Sforamid-levelfront-enddeveloperisaround$75k.Ofcoursewhenyoufirststartexpecttoenterthefieldataround35kdependinguponlocationandportfolio.
Imagesource:http://intersog.com/blog/chicago-tech-salary-guide-2015/
NOTES:
Alead/seniorfront-enddeveloper/engineercanpotentiallylivewherevertheywant(i.e.,workremotely)andmakeover$150kayear(visitangel.co,sign-up,reviewfront-endjobsover$150korexaminethesalaryrangesonStackOverflowJobs).
Front-EndSalaries
33
Front-EndSalaries
34
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.Frommyperspective,mostofthepeopleworkingonthefront-endtoday,generallyseemtobeselftaughtorcomefromanonaccreditedprogram,course,orbootcamp.
Ifyouweretosetouttodaytobecomeafront-enddeveloperIwouldlooselystrivetofollowtheprocessoutlinedbelow(Parttwo,"LearningFront-EndDev",divesintomoredetailsonlearningresources).
1. Learn,roughly,howthewebworks.Makesureyouknowthe"what"and"where"ofDomains,DNS,URLs,HTTP,networks,browsers,servers/hosting,JSON,dataAPIs,HTML,CSS,DOM,andJavaScript.Don'tdivedeeponanything,justunderstandthepartsandlooselyhowtheyfittogether.Focusonthehighleveloutlinesforfront-endarchitectures.Startwithsimplewebpagesandbrieflystudyfront-endapplications(aka
HowFDsAreMade
35
SPAs)2. LearnHTML3. LearnCSS4. LearnJavaScript5. LearnDOM6. LearnJSONanddataAPIs7. Learnthefundamentalsofuserinterfacedesign(i.e.UIpatterns,interactiondesign,
userexperiencedesign,andusability).8. LearnCLI/commandline9. Learnthepracticeofsoftwareengineering(i.e.,Applicationdesign/architecture,
templates,Git,testing,monitoring,automating,codequality,developmentmethodologies).
10. Getopinionatedandcustomizeyourtoolboxwithwhatevermakessensetoyourbrain(e.g.Webpack,React,andRedux).
11. LearnNode.js
Ashortwordofadviceonlearning.Learntheactualunderlyingtechnologies,beforelearningabstractions.Don'tlearnjQuery,learntheDOM.Don'tlearnSASS,learnCSS.Don'tlearnHAML,learnHTML.Don'tlearnCoffeeScript,learnJavaScript.Don'tlearnHandlebars,learnJavaScriptES6templates.Don'tjustuseBootstrap,learnUIpatterns.
Whengettingyourstart,youshouldfearmostthingsthatconcealcomplexity.Abstractionsinthewronghandscangivetheappearanceofadvancedskills,whileallthetimehidingthefactthatadeveloperhasaninferiorunderstandingofthebasicsorunderlyingconcepts.
Theremainingpartsofthisbookwillpointthereadertopotentialresourcesthatcouldbeusedtolearnfront-enddevelopmentandthetoolsusedwhenpracticingfront-enddevelopment.Itisassumedthatonthisjourneyyouarenotonlylearning,butalsodoingasyoulearnandinvestigatetools.Somesuggestonlydoingtolearn.Whileotherssuggestonlylearningaboutdoing.Isuggestyoufindamixofboththatmatcheshowyourbrainworksanddothat.But,forsure,itisamix!So,don'tjustreadaboutit,doit.Learn,do.Learn,do.Repeatindefinitelybecausethingschangefast.Thisiswhylearningthefundamentals,andnotabstractions,aresoimportant.
Latelyalotofnon-accredited,expensive,front-endcodeschools/bootcampshaveemerged.Theseavenuesofbecomingafront-enddeveloperaretypicallyteacherdirectedcourses,thatfollowamoretraditionalstyleoflearning,fromanofficialinstructor(i.e.,syllabus,test,quizzes,projects,teamprojects,grades,etc.).Keepinmind,ifyouareconsideringanexpensivetrainingprogram,thisistheweb!Everythingyouneedtolearnisonthewebforthetaking,costinglittletonothing.However,ifyouneedsomeonetotellyouhowtotakeandlearnwhatisactuallyfree,andholdyouaccountableforlearningit,youmightconsideran
HowFDsAreMade
36
organizedcourse.Otherwise,Iamnotawareofanyotherprofessionthatispracticallyfreeforthetakingwithaninternetconnection,ahundreddollarsamonthforscreencastingmemberships,andaburningdesireforknowledge.
Ifyouwanttogetgoingtoday,considerconsumingoneormoreofthefollowingself-drivenresourcesbelow:
2016/2017MUST-KNOWWEBDEVELOPMENTTECH[watch]ABeginner'sGuidetoFront-EndProgramming[read&watch][freeto$]BecomeaFront-EndWebDeveloper[watch][$]Front-EndCurriculum[read]freeCodeCamp[interact]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][$]
HowFDsAreMade
37
PartII:LearningParttwoidentifiesself-directed(i.e.,atyourownpacewhenyouwant)anddirected(i.e.,formalclassroomspecifictimesanddates)resourcesforlearningtobecomeafront-enddeveloper.
Notethatjustbecausealearningresourceislisted,oracategoryoflearningisdocumented,Iamnotsuggestingthatafront-enddeveloperlearneverything.Thatwouldbeabsurd.Chooseyourownsliceofexpertisewithintheprofession.I'mprovidingthepossibilitiesofwhatcouldbemasteredinthefield.
PartII:LearningFront-EndDev
38
SelfDirectedLearningThissectionfocusesonfreeandpaidresources(videotraining,books,etc.)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.
Thelearningresourcesmentionedwillincludebothfreeandpaidmaterial.Paidmaterialwillbeindicatedwith[$].
Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandonlinevideotraining.
Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:
codecademy.comcodeschool.comegghead.ioeventedmind.comFrontendMastersKhanAcademylaracasts.comlynda.com[careful,qualityvaries]mijingo.compluralsight.com[careful,qualityvaries]Treehousetutsplus.comUdacity[careful,qualityvaries]
SelfDirectedLearning
39
LearnInternet/WebTheInternetisaglobalsystemofinterconnectedcomputernetworksthatusetheInternetprotocolsuite(TCP/IP)tolinkseveralbilliondevicesworldwide.Itisanetworkofnetworksthatconsistsofmillionsofprivate,public,academic,business,andgovernmentnetworksoflocaltoglobalscope,linkedbyabroadarrayofelectronic,wireless,andopticalnetworkingtechnologies.TheInternetcarriesanextensiverangeofinformationresourcesandservices,suchastheinter-linkedhypertextdocumentsandapplicationsoftheWorldWideWeb(WWW),electronicmail,telephony,andpeer-to-peernetworksforfilesharing.
—Wikipedia
WhatistheInternet?[watch]HowDoestheInternetwork-W3C[read]HowDoestheInternetWork?-StanfordPaper[read]HowtheInternetWorks[watch]HowtheInternetWorksin5Minutes[watch]HowtheWebWorks[watch][$]WhatIstheInternet?Or,"YouSayTomato,ISayTCP/IP"[read]
LearnInternet/Web
40
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
41
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]Whatforceslayout/reflow[read]WhatEveryFrontendDeveloperShouldKnowAboutWebpageRendering[read]
Imagesource:http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
OptimizingforBrowsers:
BrowserRenderingOptimization[watch]WebsitePerformanceOptimization[watch]
ComparingBrowsers
ComparisonofWebBrowsers[read]
BrowserHacks
LearnWebBrowsers
42
browserhacks.com[read]
DevelopingforBrowsers
Inthepast,front-enddevelopersspentalotoftimemakingcodeworkinseveraldifferentbrowsers.Thiswasonceabiggerissuethanitistoday.Today,abstractions(e.g.,jQuery,React,Post-CSS,Babeletc...)combinedwithmodernbrowsersmakebrowserdevelopmentfairlyeasy.Thenewchallengeisnotwhichbrowsertheuserwilluse,butonwhichdevicetheywillrunthebrowser.
EvergreenBrowsers
Thelatestversionsofmostmodernbrowsersareconsideredevergreenbrowsers.Thatis,intheorytheyaresupposetoautomaticallyupdatethemselvessilentlywithoutpromptingtheuser.Thismovetowardsselfupdatingbrowsershasbeeninreactiontotheslowprocessofeliminatingolderbrowsersthatdonotauto-update.
PickingaBrowser
Asoftoday,mostfront-enddevelopersuseChromeand"ChromeDevTools"todevelopfront-endcode.However,themostusedmodernbrowsersallofferaflavorofdevelopertools.Pickingonetousefordevelopmentisasubjectivechoice.Themoreimportantissueisknowingwhichbrowsers,onwhichdevices,youhavetosupportandthentestingappropriately.
ADVICE:
IsuggestusingChromebecausethedevelopertoolsareconsistentlyimprovingandatthistimecontainthemostrobustfeatures.
1
1
LearnWebBrowsers
43
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]TheInternet:IPAddressesandDNS[watch]
LearnDNS
44
LearnDNS
45
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
HTTPSpecifications
HTTP/2HypertextTransferProtocol--HTTP/1.1
HTTP
HighPerformanceBrowserNetworking:WhatEveryWebDeveloperShouldKnowAboutNetworkingandWebPerformance[read]HTTP:TheDefinitiveGuide(DefinitiveGuides)[read][$]HTTP/2FrequentlyAskedQuestions[read]HTTPFundamentals[watch][$]HTTP/2Fundamentals[watch][$]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part1[read]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part2[read]HTTPSuccinctly[read]
HTTPStatusCodes
HTTPStatusCodes
LearnHTTP/Networks
46
HTTPStatusCodesin60Seconds[watch]
CORSSpecifications
Cross-OriginResourceSharing
CORS
CORSinAction[read][$]HTTPAccessControl(CORS)[read]
WebSockets
ConnecttheWebWithWebSockets[watch]WebSocket:LightweightClient-ServerCommunications[read][$]TheWebSocketProtocol[read]
LearnHTTP/Networks
47
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
48
LearnGeneralFront-EndDevelopmentGeneralLearning:
ABaselineforFront-End[JS]Developers:2015[read]BecomeaFront-EndWebDeveloper[watch][$]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][$]Front-EndWebDevelopment:TheBigNerdRanchGuide[read][$]FrontendGuidelines[read]IntroductiontoWebDevelopment[watch][$]IsobarFront-EndCodeStandards[read]LeanFront-EndEngineering[watch][$]LearnFrontEndWebDevelopment[watch][$]PlanningaFront-EndJSApplication[watch]So,YouWanttoBeaFront-EndEngineer[watch]
GeneralFront-EndNewsletters,NewsOutlets,&Podcasts:
TheBigWebShowFront-EndDevWeeklyFrontEndHappyHourFront-EndNewsin5Minutesfrontendfront.comFrontEndFocusFrontEndNewsletterMobileWebWeeklyOpenWebPlatformDailyDigestPonyFooWeeklyshoptalkshow.comTheWebAheadTheWebPlatformPodcast
LearnGeneralFront-EndDev
49
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'dsuggestreadingthefollowingcanonicaltextsonthemattersoonecansupportandpotentialbuildusableuserinterfaces.
AboutFace:TheEssentialsofInteractionDesign[read][$]DesignforHackers:ReverseEngineeringBeauty[read][$]DesignforNon-Designers[watch]DesigningInterfaces[read][$]
LearnUI/InteractionDesign
51
DesigningWebInterfaces:PrinciplesandPatternsforRichInteractions[read][$]Don'tMakeMeThink,Revisited:ACommonSenseApproachtoWebUsability[read][$]
LearnUI/InteractionDesign
52
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]ResilientWebDesign[read]
LearnHTML&CSS
53
MasteringCSS:
ACompleteGuidetoFlexbox[read]CSSDiner[interact]CSSSelectorsfromCSS4tillCSS1[read]CSSSecrets:BetterSolutionstoEverydayWebDesignProblems[read][$]CSS3[read]CSS3In-Depth[watch][$]WhattheFlexbox?!ASimple,Free20VideoCourseThatWillHelpYouMasterCSSFlexbox[watch]
References/Docs:
CSSTriggers...aGameofLayout,Paint,andCompositecssreference.iocssvalues.comDefaultCSSforChromeBrowserHead-AlistofeverythingthatcouldgointheofyourdocumentHTMLAttributeReferenceMDNCSSReferenceMDNHTMLElementReference
Glossary:
CSSGlossary-ProgrammingReferenceforCSSCoveringComments,Properties,andSelectorsHTMLGlossaryProgrammingReferenceforHTMLelements
Standards/Specifications:
AllW3CCSSSpecificationsAllW3CHTMLSpecCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSIndexes-AlistingofeverytermdefinedbyCSSspecsTheElementsofHTMLfromtheLivingStandardGlobalAttributesTheHTMLSyntaxfromtheLivingStandardHTML5.2fromW3CSelectorsLevel3
ArchitectingCSS:
AtomicDesign[read]
LearnHTML&CSS
54
BEMITCSSOOCSS[read]SMACSS[read][$]
ScalableModularArchitectureforCSS(SMACSS)[watch][$]SUITCSSrscss
Authoring/ArchitectingConventions:
CSScodeguide[read]css-architecturecssguidelin.es[read]IdiomaticCSS[read]MaintainableCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]
HTML/CSSNewsletters:
CSSWeeklyFrontendFocus
LearnHTML&CSS
55
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][$]SEOTutorialForBeginnersin2016[read]SEOforWebDesigners[watch][$]
LearnSEO
56
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
GettingStarted:
codecademy.comJavaScript[interact]JavaScriptfirststeps[read]JavaScriptbuildingblocks[read]JavaScriptEnlightenment[read]JavaScriptobjectbasics[read]EloquentJavaScript[read]
GeneralLearning:
SpeakingJavaScript[read]YouDon'tKnowJS:Up&Going[read]YouDon'tKnowJS:Types&Grammar[read]YouDon'tKnowJS:Scope&Closures[read]Gentleexplanationof'this'keywordinJavaScript[read]YouDon'tKnowJS:this&ObjectPrototypes[read]
Mastering:
SettingupES6[read]ES6FOREVERYONE![watch][$]ExploringES6[read]YouDon'tKnowJS:ES6&Beyond[read]UnderstandingECMAScript6:TheDefinitiveGuideforJavaScriptDevelopers[read]ES6:TheRightParts[watch][$]ExploringES2016andES2017[read]
LearnJavaScript
57
JavaScriptRegularExpressionEnlightenment[read]UsingRegularExpressions[watch][$]YouDon'tKnowJS:Async&Performance[read]JavaScriptwithPromises[read][$]Test-DrivenJavaScriptDevelopment[read][$]JSMythBusters[read]
FunctionalJavaScript:
FunctionalProgrammingJargonfunfunfunction:FunctionalprogramminginJavaScript[watch]Functional-Light-JS[read]FunctionalProgramminginJavaScript:HowtoimproveyourJavaScriptprogramsusingfunctionaltechniques[read]MostlyadequateguidetoFP(injavascript)[read]JavaScriptAllongé[read][$]HardcoreFunctionalProgramminginJavaScript[watch][$]Functional-LiteJavaScript[watch][$]
References/Docs:
MDNJavaScriptReferenceMSDNJavaScripReference
Glossary/Encyclopedia/Jargon:
TheJavaScriptEncyclopediaJavaScriptGlossarySimplifiedJavaScriptJargon
Standards/Specifications:
ECMAScript®2015LanguageSpecificationECMAScript®2016LanguageSpecificationECMAScript®2017LanguageSpecificationStatus,Process,andDocumentsforECMA262
Style:
AirbnbJavaScriptStyleGuideJavaScriptStandardStyleJavaScriptSemi-StandardStyle
JavaScriptNewsletters,News,&Podcasts:
LearnJavaScript
58
EchoJSECMAScriptDailyES.nextNewsFiveJSJavaScriptAirJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com
DeprecatedJSLearningResources:
CrockfordonJavaScript-Volume1:TheEarlyYears[watch]CrockfordonJavaScript-Chapter2:AndThenThereWasJavaScript[watch]CrockfordonJavaScript-ActIII:FunctiontheUltimate[watch]CrockfordonJavaScript-EpisodeIV:TheMetamorphosisofAjax[watch]CrockfordonJavaScript-Part5:TheEndofAllThings[watch]CrockfordonJavaScript-Scene6:Loopage[watch]JavaScriptPatterns[read][$]ThePrinciplesofObject-OrientedJavaScript[read][$]JavaScriptModules[read]FunctionalJavaScript:IntroducingFunctionalProgrammingwithUnderscore.js[read][$]TheGoodPartsofJavaScriptandtheWeb[watch][$]HighPerformanceJavaScript(BuildFasterWebApplicationInterfaces)[read][$]AdvancedJavaScript[watch][$]
LearnJavaScript
59
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
60
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,theDOM,andjQuerydon'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
61
DouglasCrockford:AnInconvenientAPI-TheTheoryoftheDOM[watch]DOMEnlightenment[read][$]orreadonlineforfreeFixingCommonjQueryBugs[watch][$]jQuery-FreeJavaScript[watch][$]jQueryTipsandTricks[watch][$]
References/Docs:
jQueryDocsEventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)
Standards/Specifications:
DocumentObjectModel(DOM)Level3EventsSpecificationDocumentObjectModel(DOM)TechnicalReportsDOMLivingStandardW3CDOM4
LearnDOM,BOM&jQuery
62
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
63
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][$]WebAccessibility[watch][$]
Standards/Specifications:
AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus
LearnAccessibility
64
LearnAccessibility
65
LearnWeb/BrowserAPIs
Imagesource:http://www.evolutionoftheweb.com/
TheBOM(BrowserObjectModel)andtheDOM(DocumentObjectModel)arenottheonlybrowserAPIsthataremadeavailableonthewebplatforminsideofbrowsers.EverythingthatisnotspecificallytheDOMorBOM,butaninterfaceforprogrammingthebrowsercouldbeconsideredaweborbrowserAPI(tragicallyinthepastsomeoftheseAPIshavebeencalledHTML5APIswhichconfusestheirownspecifics/standardizewiththeactualHTML5specificationspecifytheHTML5markuplanguage).NotethatweborbrowserAPIsdoincludedeviceAPIs(e.g.,Navigator.getBattery())thatareavailablethroughthebrowserontabletandphonesdevices.
Youshouldbeawareofandlearn,whereappropriate,web/browserAPIs.AgoodtooltousetofamiliarizeoneselfwithalloftheseAPIswouldbetoinvestigatetheHTML5test.comresultsforthe5mostcurrentbrowsers.
Learn:
LearnWeb/BrowserAPIs
66
ProHTML5Programming[read]
LearnAudio:
AddSoundtoYourSiteWithWebAudio[watch]FunWithWebAudio[watch]WebAudioAPI[read]
LearnCanvas:
HTML5Canvas[read]
NOTES:
MDNhasagreatdealofinformationaboutweb/browserAPIs.
MDNWebAPIReferenceMDNWebAPIsInterfaceReference-AllInterfaces,ArrangedAlphabeticallyMDNWebAPI-ListsDeviceAccessAPIsandOtherAPIsUsefulforApplications
KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.
InadditiontoMDN,youmightfindthefollowingresourceshelpfulforlearningaboutalltheweb/browserAPI's:
TheHTML5JavaScriptAPIIndexHTML5Overviewplatform.html5.org
LearnWeb/BrowserAPIs
67
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
68
LearnJSTemplatesAJavaScripttemplateistypicallyused,butnotalwayswithaMV*solutiontoseparatepartsoftheview(i.e.,theUI)fromthelogicandmodel(i.e.,thedataorJSON).
ES6TemplateLiterals,theHandlebarskiller?[read]GettingStartedwithnunjucks[read]InstantHandlebars.js[read][$]JavaScriptTemplatingwithHandlebars[watch][$]LearnHandlebarsin10MinutesorLess[read]LodashTemplates[docs]
NOTES:
NotethatJavaScript2015(akaES6)hasanativetemplatingmechanismcalled"Templatesstrings".Additionally,templatingasoflatehasbeenreplacedbythingslikeJSX,atemplateelement,orHTMLstrings.
ADVICE:
IfIwasnotusingReact&JSXI'dfirstreachforJavaScript"Templatesstrings"andwhenthatwaslackingmovetonunjucks.
LearnJSTemplates
69
LearnStaticSiteGeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.,ruby,php,python,nodeJS,etc.),producesstaticHTMLfilesfromstatictext/data+templatesthatisindentingtobesentfromaservertotheclientstaticallywithoutadynamicnature.
GeneralLearning:
StaticSiteGenerators[read]
LearnStaticSiteGenerators
70
LearnComputerScienceviaJSFourSemestersofComputerScienceinSixHours[video][$]ComputerScienceinJavaScript[read]Collectionofclassiccomputerscienceparadigms,algorithms,andapproacheswritteninJavaScript[read]AlgorithmsandDataStructuresinJavaScript[watch][$]
LearnComputerScienceviaJS
71
LearnFront-EndApplicationArchitectureGeneralLearning:
JavaScriptApplicationDesign[read][$]ProgrammingJavaScriptApplications[read]
DeprecatedLearningMaterials:
BuildanAppwithReactandAmpersand[watch][$]BuildingModernSingle-PageWebApplications[watch][$]EloquentJavaScript:Modules[read]AFieldGuidetoStaticApps[read]FieldGuidetoWebApplications[read]FrontendGuidelinesQuestionnaire[read]HumanJavaScript[read]NicholasZakas:ScalableJavaScriptApplicationArchitecture[watch]OrganizingJavaScriptFunctionality[watch][$]PatternsforLarge-ScaleJavaScriptApplicationArchitecture[read]Terrific[read]UIArchitecture[watch][$]WebUIArchitecture[watch][$]
NOTES:
Notalotofgeneralcontentisbeingcreatedonthistopicasoflate.Mostofthecontentofferedforlearninghowtobuildfront-end/SPA/JavaScriptapplicationspresupposesyou'vedecidedupatoollikeAngular,Ember,React,orAurelia.
ADVICE:
In2017learnWebpack,React,andRedux.Startwith,"ACompleteIntrotoReact"and"BuildingApplicationswithReactandReduxinES6".
SURVEYRESULTS:
1
1
LearnFront-EndAppArchitecture
72
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
LearnFront-EndAppArchitecture
73
LearnData(i.e.JSON)APIDesignAPIDesigninNode.js(usingExpress&Mongo)[watch][$]BuildAPIsYouWon'tHate[$][read]JSONAPI[read]RESTfulWebAPIDesignwithNode.JS-SecondEdition[$][read]
LearnDataAPI(i.e.JSON/REST)Design
76
LearnReact&ReduxReact:
React.jsIntroductionForPeopleWhoKnowJustEnoughjQueryToGetBy[read]React.jsFundamentals[watch]13thingsyouneedtoknowaboutReact[read]Tutorial:IntroToReact[read]ReactEnlightenment[read]ReactJSForStupidPeople[read]REACTFORBEGINNERS[watch]CompleteIntroductiontoReact(feat.ReduxandReactRouter)[watch]ReactIn-depth:AnexplorationofUIdevelopment[read]CompleteIntrotoReactv2(feat.Routerv4andRedux)[watch][$]
WelcometoACompleteIntrotoReact[read]BuildYourFirstProductionQualityReactApp[watch][$]
Redux:
YouMightNotNeedReduxADummy’sGuidetoReduxandThunkinReact[read]ReduxTutorials[watch]GettingStartedwithRedux[watch]
https://github.com/dwyl/learn-redux/blob/master/egghead.io_video_tutorial_notes.md
LearnRedux[watch]10TipsforBetterReduxArchitecture[watch]BuildingReactApplicationswithIdiomaticRedux[watch][$]
NOTES:
OnceyouhaveagoodhandleonReactyoumightconsiderlookingatPreactorInferno,orboth.WhenyouhaveReduxmastered,takealookMobXorconsidercreatingyourownsmallcustomReduxlikeimplementationfromscratch.
LearnReact&Redux
77
LearnProgressiveWebAppUnliketraditionalapplications,progressivewebappsareahybridofregularwebpages(orwebsites)andamobileapplication.Thisnewapplicationmodelattemptstocombinefeaturesofferedbymostmodernbrowserswiththebenefitsofmobileexperience.
In2015,designerFrancesBerrimanandGoogleChromeengineerAlexRussellcoinedtheterm"ProgressiveWebApps"todescribeappstakingadvantageofnewfeaturessupportedbymodernbrowsers,includingServiceWorkersandWebAppManifests,thatletusersupgradewebappstobefirst-classapplicationsintheirnativeOS.
AccordingtoGoogleDevelopers,thesecharacteristicsare:
Progressive-Workforeveryuser,regardlessofbrowserchoicebecausethey’rebuiltwithprogressiveenhancementasacoretenet.Responsive-Fitanyformfactor:desktop,mobile,tablet,orformsyettoemerge.Connectivityindependent-Serviceworkersallowworkoffline,oronlowqualitynetworks.App-like-Feellikeanapptotheuserwithapp-styleinteractionsandnavigation.Fresh-Alwaysup-to-datethankstotheserviceworkerupdateprocess.Safe-ServedviaHTTPStopreventsnoopingandensurecontenthasn’tbeentamperedwith.Discoverable-Areidentifiableas“applications”thankstoW3Cmanifests[6]andserviceworkerregistrationscopeallowingsearchenginestofindthem.Re-engageable-Makere-engagementeasythroughfeatureslikepushnotifications.Installable-Allowusersto“keep”appstheyfindmostusefulontheirhomescreenwithoutthehassleofanappstore.Linkable-EasilysharedviaaURLanddonotrequirecomplexinstallation.
—Wikipedia
ProgressiveWebApps[read]ABeginner’sGuideToProgressiveWebApps[read]ProgressiveWebApps[read]GettingStartedwithProgressiveWebApps[watch][$]BuildingaProgressiveWebApp[watch][$]NativeAppsareDoomed[read]WhyNativeAppsReallyareDoomed:NativeAppsareDoomedpt2[read]
LearnProgressiveWebApp
78
LearnProgressiveWebApp
79
LearnJSAPIDesignDesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]
LearnJSAPIDesign
80
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][$]ExploreandMasterChromeDevToolsMasteringChromeDeveloperTools[watch][$]UsingTheChromeDeveloperTools[watch][$]
ChromeWebDeveloperToolsDocs:
CommandLineAPIReferenceKeyboard&UIShortcutsReferencePer-PanelDocumentationConfigureandCustomizeDevTools
News/Newsletters/Podcasts/Tips:
DevTips
LearnWebDevTools
81
LearnWebDevTools
82
LearnCommandLineAcommand-lineinterfaceorcommandlanguageinterpreter(CLI),alsoknownascommand-lineuserinterface,consoleuserinterface,andcharacteruserinterface(CUI),isameansofinteractingwithacomputerprogramwheretheuser(orclient)issuescommandstotheprogramintheformofsuccessivelinesoftext(commandlines).
—Wikipedia
GeneralLearning:
TheBashGuide[read]Codecademy:LearntheCommandLine[watch]CommandLinePowerUser[watch]LearnEnoughCommandLinetoBeDangerous[read][freeto$]MeettheCommandLine[watch][$]
Mastering:
AdvancedCommandLineTechniques[watch][$]
LearnCommandLine
83
LearnNode.jsNode.jsisanopen-source,cross-platformruntimeenvironmentfordevelopingserver-sidewebapplications.Node.jsapplicationsarewritteninJavaScriptandcanberunwithintheNode.jsruntimeonOSX,MicrosoftWindows,Linux,FreeBSD,NonStop,IBMAIX,IBMSystemzandIBMi.ItsworkishostedandsupportedbytheNode.jsFoundation,acollaborativeprojectatLinuxFoundation.
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][$]LearningNode:MovingtotheServer-Side[read][$]LearnYouTheNode.js[self-guidedworkshops]Node.jsBasics[watch][$]Node.jsinPractice[read][$]Real-timeWebwithNode.js[watch]ZerotoProductionNode.jsonAmazonWebServices[watch][$]
LearnNode.js
84
LearnModulesGeneralLearning:
jsmodules.ioES6ModulesinDepth[read]ExploringJS-Modules[read]
References/Docs:
MDN-exportMDN-import
NOTES:
Wearestillwaitingonasupportinbrowsersforloadingmodules.Untilthenyoucanhavealookat,"ESModuleLoaderPolyfill"and"JavaScriptLoaderStandard".
LearnJSModules
85
LearnModuleloaders/bundlersWebpack:
WebpackWebpackDeepDive[read]WebpackFundamentals[watch][$]Survivejs.comWebpackBook[read]
Rollup:
Rollup
SystemJS:
Modern,ModularJavaScriptwithSystemJSandjspm[watch][$]
NOTES:
ItisnotuncommonfordeveloperstouseatoollikeGulpforbundlingJSmodules.However,manyoftheGulppluginssimplyuseWebpack,Rollup,orSystemJSunderthehood.
LearnJSModuleloaders/bundlers
86
LearnPackageManagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.
—Wikipedia
GeneralLearning:
AnintroductiontohowJavaScriptpackagemanagersworkTheMystical&MagicalSemVerRangesUsedBynpm&Bower[read]PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloper[read]npmdocsyarndocs
LearnPackageManagers
87
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][$]learnEnoughGit[read]Ry'sGitTutorial[read]
Mastering:
AdvancedGitTutorials[read]ProGit[read]LearnGitBranching[interact]
References/Docs:
https://git-scm.com/doc
LearnVersionControl
88
LearnBuildandTaskAutomationBuildautomationistheprocessofautomatingthecreationofasoftwarebuildandtheassociatedprocessesincluding:compilingcomputersourcecodeintobinarycode,packagingbinarycode,andrunningautomatedtests.
—Wikipedia
GeneralLearning:
GettingStartedwithGulp[read][$]GulpBasics[watch][$]JavaScriptBuildAutomationWithGulp.js[watch][$]
References/Docs:
Gulp
ADVICE:
Gulpisgreat.However,youmightonlyneednpmrun.Beforeturningtoadditionalcomplexityinyourapplicationstackaskyourselfifnpmruncandothejob.Ifyouneedmore,useGulp.
Read:
GiveGrunttheBoot!AGuidetoUsingnpmasaBuildToolHowtoUsenpmasaBuildToolTaskAutomationwithnpmRunUsingnpmasaBuildSystemforYournextProjectUsingnpmasaTaskRunner[watch][$]WhyILeftGulpandGruntfornpmScriptsWhynpmScripts?
LearnBuild&TaskAutomation
89
LearnSitePerformanceOptimizationWebperformanceoptimization,WPO,orwebsiteoptimizationisthefieldofknowledgeaboutincreasingthespeedinwhichwebpagesaredownloadedanddisplayedontheuser'swebbrowser.Withtheaverageinternetspeedincreasingglobally,itisfittingforwebsiteadministratorsandwebmasterstoconsiderthetimeittakesforwebsitestorenderforthevisitor.
—Wikipedia
GeneralLearning:
BrowserRenderingOptimization[watch]EvenFasterWebSites:PerformanceBestPracticesforWebDevelopers[read][$]HighPerformanceWebSites:EssentialKnowledgeforFront-EndEngineers[read][$]JavaScriptPerformanceRocks[read]PageSpeedInsightsRules[read]perf-tooling.today[read]PerformanceCalendar[read]perf.rocks[read]UsingWebPageTest[read][$]WebPerformanceDaybookVolume2[read][$]WebPerformance:TheDefinitiveGuide[read]WebsitePerformance[watch][$]WebsitePerformanceOptimization[watch]
LearnSitePerformanceOptimization
90
LearnTestingUnitTesting-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][$]JavaScriptTesting[watch]JavaScriptTestingRecipes[read][$]TestableJavaScript[read][$]Test-DrivingJavaScriptApplications:Rapid,Confident,MaintainableCode[read][$]Test-DrivenJavaScriptDevelopment[read][$]TheWayoftheWebTester:ABeginner'sGuidetoAutomatingTests[read][$]
LearnTesting
91
LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.
Headlessbrowsersprovideautomatedcontrolofawebpageinanenvironmentsimilartopopularwebbrowsers,butareexecutedviaacommandlineinterfaceorusingnetworkcommunication.TheyareparticularlyusefulfortestingwebpagesastheyareabletorenderandunderstandHTMLthesamewayabrowserwould,includingstylingelementssuchaspagelayout,color,fontselectionandexecutionofJavaScriptandAJAXwhichareusuallynotavailablewhenusingothertestingmethods.Googlestatedin2009thatusingaheadlessbrowsercouldhelptheirsearchengineindexcontentfromwebsitesthatuseAJAX.
—Wikipedia
AutomatingtheWebUsingPhantomJSandCasperJS[watch][$]GettingStartedwithPhantomJS[read][$]PhantomJSCookbook[read][$]PhantomJSforWebAutomation[watch]RapidPhantomJS[watch][$]
LearnHeadlessBrowsers
92
LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.
GeneralLearning:
CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]YourFirstOfflineWebApp[read]
LearnOfflineDev
93
LearnWeb/Browser/AppSecurityBrowserSecurityHandbook[read]FrontendSecurity[watch]Hacksplaining[read]HTML5SecurityCheatsheet[read]HTTPSecurityBestPractice[read]IdentityandDataSecurityforWebDevelopment:BestPracticesreadSecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheBasicsofWebApplicationSecurity[read]TheInternet:Encryption&PublicKeys[watch]TheInternet:Cybersecurity&Crime[watch]TheTangledWeb:AGuidetoSecuringModernWebApplications[read][$]WebSecurityBasics[read]Websecurity[read]
LearnWeb/Browser/AppSecurity
94
LearnMulti-DeviceDevelopment
Imagesource:http://bradfrost.com/blog/post/this-is-the-web/
Awebsiteorwebapplicationcanrunonawiderangeofcomputers,laptops,tabletsandphones,aswellasahandfulofnewdevices(watches,thermostats,fridges,etc.).Howyoudeterminewhatdevicesyou'llsupportandhowyouwilldeveloptosupportthosedevicesis
LearnMulti-DeviceDev(e.g.,RWD)
95
called,"multi-devicedevelopmentstrategy".Below,Ilistthemostcommonmulti-devicedevelopmentstrategies.
Buildaresponsive(RWD)website/appforalldevices.Buildanadaptive/progressivelyenhancedwebsite/appforalldevices.Buildawebsite,webapp,nativeapp,orhybrid-nativeappforeachindividualdeviceoragroupingofdevices.Attempttoretrofitsomethingyouhavealreadybuiltusingbitsandpartsfromstrategies1,2or3.
GeneralLearning:
AbookApartPack-ResponsiveWebDesign[read][$]ABookApartPack-DesignForAnyDevice[read][$]AdaptiveWebDesign[read][$]DesigningwithProgressiveEnhancement[read][$]MobileWebDevelopment[watch]ResponsiveHTMLEmailDesign[watch][$]ResponsiveImages[watch]ResponsiveTypography[watch][$]ResponsiveWebDesign[watch][$]ResponsiveWebDesignFundamentals[watch]
ResponsiveNewsletters,News,&Podcasts:
ResponsiveWebDesignPodcastResponsiveWebDesignNewsletter
LearnMulti-DeviceDev(e.g.,RWD)
96
DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.
DirectedLearning
97
DirectedLearningThetablebelowcontainsinstructorled,paid,front-endcourses,programs,schools,andbootcamps.
Ifyoucan'taffordadirectededucation,aselfdirectededucationusingscreencasts,books,andarticlesisaviablealternativetolearnfront-enddevelopmentfortheself-drivenindividual.
company course price onsite remote
Betamore Front-endWebDevelopment 8,500 Baltimore,
MD
BLOC BecomeaFrontendDeveloper 4,999 yes
DecodeMTL LearnFront-endWebDevelopment 2,500 Montreal,
QC
TheFlatironSchool IntroductiontoFront-EndWebDevelopment 3,500 New
York,NY
GeneralAssembly FrontendWebDevelopment 3,500 multiple
locations
HackerYou Front-endWebDevelopmentImmersive
7,000-7,910
Toronto,Canada
IronYard FrontEndEngineering 12,000 multiplelocations
TheNewYorkCode+DesignAcademy FrontEnd101 2,000 New
York,NY
Thinkful FrontendWebDevelopment
300permonth yes
TuringSchoolofSoftware&Design Front-EndEngineering 20,000 yes
Udacity Front-EndWebDeveloperNanodegree
200monthly
multiplelocations yes
Front-EndSchools,Courses,&Bootcamps
98
Front-EndDeveloperstoLearnFromThenotionthatyoushouldfollowanindividualtolearnaboutfront-enddevelopmentisslowlybecomingpointless.Theadvancedpractitionersoffront-enddevelopmentgenerateenoughcontentthatyoucansimplyfollowthecommunity/leadersbypayingattentiontothefront-end"news"outlets(viaNewsletters,Newsoutlet,&Podcasts).
Front-EndDevstoLearnFrom
99
Front-EndNewsletters,NewsSites,&PodcastsGeneralFront-EndNewsletters,News,&Podcasts:
TheBigWebShowFront-EndDevWeeklyFrontEndHappyHourFront-EndNewsin5Minutesfrontendfront.comFrontEndFocusFrontEndNewsletterMobileWebWeeklyOpenWebPlatformDailyDigestshoptalkshow.comTheFrontsidePodcastTheWebAheadTheWebPlatformPodcastwebtoolsweekly.comDevTips
HTML/CSSNewsletters:
CSSWeeklyHTML5Weekly
JavaScriptNewsletters,News,&Podcasts:
EchoJSECMAScriptDailyES.nextNewsFiveJSJavaScriptAirJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com
GraphicandAnimationNewslettersandPodcasts
Newsletters,News,&Podcasts
100
MotionandMeaningResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly
Newsletters,News,&Podcasts
101
PartIII:Front-endDeveloperToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.
Makesureyouunderstandingthecategorythatasetoftoolsfallswithin,beforestudyingthetoolsthemselves.
Notethatjustbecauseatoolislisted,oracategoryoftoolsisdocumented,thisdoesnotequatetoanassertiononmypartthatafront-enddevelopershouldlearnitanduseit.Chooseyourowntoolbox.I'mjustprovidingthecommontoolboxoptions.
Imagesource:https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0
PartIII:Front-EndDevTools
102
Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.
Dash[OSX,iOS][$]DevDocsVelocity[Windows][$]Zeal[Windows,Linux]
Doc/APIBrowsingTools
103
SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool
ToolsforFindingSEOTools:
SEOTools-TheCompleteList
SEOTools
104
Prototyping&WireframingToolsCreating:
Axure[$]BalsamiqMockups[$]Justinmind[$]UXPin[freeto$]
Collaboration/Presenting:
InVision[freeto$]Conceptboard[freeto$]myBalsamiq[$]
Prototyping&WireframingTools
105
DiagrammingToolsdraw.io[freeto$]Cacoo[freeto$]gliffy[freeto$]
DiagrammingTools
106
HTTP/NetworkToolsCharles[$]ChromeDevToolsNetworkPanelInsomnia[free-$]Paw[$]Postman[free-$]
HTTP/NetworkTools
107
CodeEditingToolsAsourcecodeeditorisatexteditorprogramdesignedspecificallyforeditingsourcecodeofcomputerprogramsbyprogrammers.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)
CodeEditors:
AtomBracketsSublimeText[$]WebStorm[$]VisualStudioCode
OnlineCodeEditors:
Cloud9[freeto$]Codeanywhere[freeto$]
1
CodeEditingTools
108
Shareable&RunnableCodeEditors:
Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosmallamountsofimmediatelyrunnablecodeinawebbrowser.
CodePen[freeto$]jsbin.com[freeto$]jsfiddle.netliveweave.comPlunker
ADVICE:
IrecommendingusingVisualStudioCodebecauseofthequalityofthetoolandthecontinuousimprovementsmadetotheeditorthatlikelywon'tstoporslowduetothefactthatMicrosoftisbehindthetool.
1
CodeEditingTools
109
BrowserToolsJSBrowserCodingUtilities:
History.jshtml2canvasPlatform.jsURI.js
GeneralReferenceToolstoDetermineIfXBrowserSupportsX:
Browsersupportforbroken/missingimagesBrowserscopecaniuse.comFirefoxPlatformStatus-Implementation&standardizationroadmapforwebplatformfeaturesHTML5PleaseHTML5Testiwanttouse.comjscc.infoPlatformStatuswhatwebcando.today
BrowserDevelopment/DebugTools:
ChromeDeveloperTools(akaDevTools)Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings
FirefoxDeveloperToolsIEDevelopertools(akaF12tools)SafariWebInspectorVorlon.js
BrowserCodingToolstoDetermineIfXBrowserSupportsX:
Feature.jsModernizr
BroadBrowserPolyfills/Shims:
BrowserTools
110
console-polyfillHTML5CrossBrowserPolyfillsfetchsocket.ioSockJSwebcomponents.jswebshim
HostedTesting/AutomationforBrowsers:
Browserling[freeto$]BrowserStack[$]CrossBrowserTesting.com[$]Nightcloud.ioSauceLabs[$]
HeadlessBrowsers:
PhantomJSPhantomCSS
slimerjsTrifleJSZombie.js
BrowserAutomation:
Usedforfunctionaltestingandmonkeytesting.
CasperJSNightmareTestCafe
BrowserHacks:
browserhacks.com
BrowserTools
111
HTMLToolsHTMLTemplates/Boilerplates/StarterKits:
dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplateWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopment
HTMLPolyfill:
html5shiv
Transpiling:
HAMLPugMarkdown
References:
ElementattributesElementsHTMLArrowsHTMLEntityLookupHTMLInterfacesBrowserSupport
Linting/Hinting:
HTMLHinthtml-inspector
Optimizer:
HTMLMinifier
OnlineCreation/Generation/ExperimentationTools:
tablesgenerator.com
AuthoringConventions:
HTMLTools
112
HTMLCodeGuidePrinciplesofWritingConsistent,IdiomaticHTML
Workflow:
Emmet
HTMLOutliner:
HTML5Outliner
TrendingHTMLRepositoriesonGitHubThisMonth:
https://github.com/trending?l=html&since=monthly
HTMLTools
113
CSSToolsDesktop&MobileCSSFrameworks:
BaseBasscssBulmaBootstrap3orBootstrap4ConciseFoundationMaterialDesignLite(MDL)MetroUIPure.cssSemanticUISkeletontachyons
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.com
CSSTools
114
css3clickchart.comcssreference.ioCSSIndexes-AlistingofeverytermdefinedbyCSSspecscss4-selectors.comcss4RocksCSSTRIGGERS...AGAMEOFLAYOUT,PAINT,ANDCOMPOSITECSSTricksAlmanaccssvalues.comMDNCSSReference
Linting/Hinting:
CSSLintstylelint
CodeFormatter/Beautifier:
CSScombCSSfmt
Optimizer:
clear-csscssnanoCSSO
OnlineCreation/Generation/ExperimentationTools:
CSSArrowPleaseCSSMaticEnjoyCSSFlexboxPlaygroundflexplorerpatternify.compatternizer.comUltimateCSSGradientGenerator
ArchitectingCSS:
AtomicDesign[read]BEMITCSSOOCSS[read]SMACSS[read][$]
CSSTools
115
ScalableModularArchitectureforCSS(SMACSS)[watch][$]SUITCSSrscss
Authoring/ArchitectingConventions:
CSScodeguide[read]css-architecture[read]cssguidelin.es[read]IdiomaticCSS[read]MaintainableCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]AirbnbCSS/SassStyleguide[read]
TrendingCSSRepositoriesonGitHubThisMonth:
https://github.com/trending?l=css&since=monthly
CSSTools
116
DOMToolsDOMLibraries/Frameworks:
clipboard.jsjQuery
YouDon'tNeedjQueryKeypressTetherZeptocash
DOMEventTools:
KeyboardEventViewer
DOMPerformanceTools:
ChromeDevToolsTimelineDOMMonster
References:
EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)
DOMPolyfills/Shims:
dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform
VirtualDOM:
jsdomvirtual-dom
DOMTools
117
DOMTools
118
JavaScriptToolsJSUtilities:
accounting.jsasyncaxioschancedate-fnsformat.jsimmutableis.jslodash
You-Dont-Need-Lodash-UnderscoreMath.jsMoment.jsNumeral.jsstring.jsunderscore.js
You-Dont-Need-Lodash-Underscorevocawaitxregexp.com
Transpiling/TypeChecking(EStoES):
BabelTypeScriptFlow
Code-analysisEngine:
Tern
JavaScriptCompatibilityChecker:
jscc.info/
Linting/Hinting&StyleLinter:
eslint
JavaScriptTools
119
UnitTesting:
AVAJasmineMochaTape
TestingAssertionsforUnitTesting:
Chaiexpect.jsshould.js
TestSpies,Stubs,andMocksforUnitTesting:
sinon.jsKakapo.js
CodeFormater/Beautifier:
esformatterjs-beautifyjsfmtprettier
PerformanceTesting:
benchmark.jsjsperf.co
Visualization,StaticAnalysis,Complexity,CoverageTools:
Coveralls[$]Esprimaistanbul
Optimizer:
UglifyJS2optimize-js
Obfuscate:
JavascriptObfuscator[freeto$]JScrambler[$]
JavaScriptTools
120
Sharable/RunnableCodeEditors:
es6fiddle.netjsbin.com[freeto$]jsfiddle.net
OnlineRegularExpressionEditors/VisualTools:
debuggexregex101regexperRegExr
AuthoringConventionTools:
Airbnb'sESLintconfig,followingourstyleguideStandard-ESLintShareableConfig
TrendingJSRepositoriesonGitHubThisMonth:
https://github.com/trending?l=javascript&since=monthly
MostDependeduponPackagesonNPM:
https://www.npmjs.com/browse/depended
JavaScriptTools
121
StaticSiteGeneratorsToolsSiteGeneratorListings:
staticgen.comstaticsitegenerators.net
ADVICE:
BeforeusingastaticsitegeneratorconsiderusingGulptoorchestrateacustomsolutionoruseatoolthatmakesuseofGulpforstaticsitegeneration.e.g.GulpStarter
1
1
StaticSiteGeneratorsTools
122
AccessibilityTools
GuidesAccessibilityGuidelinesChecklistInteractiveWCAG2.018FAccessibilityGuide
SiteScannersaXeBrowserExtensionChromeAccessibilityDeveloperToolsTenonAccessibilityToolWAVEAccessibilityTool
ColorContrastTestersColorableColorableMatrixColorSafeColorRatio
Low-VisionSimulatorsSEE(Chrome)Spectrum(Chrome)NoCoffee(Chrome)
ScreenReadersVoiceOver(Mac)JAWS(Win)NVDA(Win)Window-Eyes(Win)ChromeVox(Chromeextension)
AccessibilityDevTools
123
Basicscreenreadercommands
ReadabilityTestersExpressoAppHemingwayAppGrammarlyReadabilityScoreMSOffice
ArticlesGettingStartedwithARIAReframingAccessibilityfortheWebAnAlphabetofAccessibilityIssuesPracticalARIAExamplesMDNAccessibilityGuideEnableaccessibilitypanelinChromedevtools
AccessibilityDevTools
124
AppFrameworks(Desktop,Mobile,Tablet,etc.)ToolsFront-EndAppFrameworks:
AngularJS(i.eAngular1.x.x)+BatarangAngular(i.e.Angular2.0.0+)+angular-cliAurelia+AureliaCLIEmber+embercli+EmberInspectorPolymerReact+create-react-app+ReactDeveloperToolsVue.js+vue-cli&Vue.jsdevtoolsRiot
NativeHybridMobileWebView(i.e.,BrowserEngineDriven)Frameworks:
ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.
ioniconsen.io
NativeHybridMobileDevelopmentWebview(i.e.,BrowserEngineDriven)Environments/Platforms/Tools:
ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.
AdobePhoneGap[$]AppBuilder[$]cocoon.io[freeto$]ionichub[freeto$]kony[$]Monaca[$]Taco
NativeDesktopWebView(i.e.,BrowserEngineDriven)AppFrameworks:
ElectronNW.js
1
AppFrameworks(Desktop,Mobileetc.)Tools
125
AnyPlatformAppFrameworks:
Thesesolutionstakeyourapplicationandbuilditacrossseveralplatformsanddevices
manifoldJS
NativeMobileAppFrameworks(AkaJavaScriptNativeApps)
ThesesolutionsuseaJSengineatruntimetointerpretJSandbridgethattonativeAPIs.NobrowserengineorWebViewisused.TheUIisconstructedfromnativeUIcomponents.
NativeScriptReactNativetabris.js[freeto$]trigger.io[$]weex
References:
todomvc.comFrontendGuidelinesQuestionnaireFrontendGuidelines
Performance:
js-framework-benchmark
NOTES:
Keepaneyeoninferno,Svelte,andNXin2017forbuildingcomponentbasedUIapplications.
ADVICE:
Ifyouarenewtofront-end/JavaScriptapplicationdevelopmentI'dstartwithRiotorVue.js.ThenI'dworkmywaytoReact.ThenI'dlookatAngular2,Ember,orAurelia.
Ifyouarebuildingasimplewebsitethathasminimalinteractionswithdata(i.e.mostlyastaticcontentwebsite),youshouldavoidafront-endframework.AlotofworkcanbedonewithataskrunnerlikeGulpandjQuery,whileavoidingtheunnecessarycomplexityoflearninganduseanappframeworktool.
1
AppFrameworks(Desktop,Mobileetc.)Tools
126
WantsomethingsmallerthanReact,considerPreact.PreactisanattempttorecreatethecorevaluepropositionofReact(orsimilarlibrarieslikeMithril)usingaslittlecodeaspossible,withfirst-classsupportforES2015.Currentlythelibraryisaround3kb(minified&gzipped).
Can'tdecidebetweenReactorAngluar2,read,"Angular2vsReact:TheUltimateDanceOff"
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
AppFrameworks(Desktop,Mobileetc.)Tools
127
ProgressiveWebAppTools:Front-EndAppFrameworks:
lighthouseProgressiveWebAppChecklist
ProgressiveWebAppTools
130
ScaffoldingToolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.
SlushYeoman
ScaffoldingTools
131
GeneralFront-EndDevelopmentToolsDevelopmentTools:
BrowsersyncCodeKitPrepros
GeneralFEDevelopmentTools
132
Templating/DataBindingToolsJustTemplating:
doT.jsHandlebars
htmlbarsNunjuncks
TemplatingandReactiveDataBinding:
Dekujquerymy.jsractive.jsreact.jsriotRivets.jsvue.js
TemplatingtoVirtualDOM:
JSXt7
Templating/DataBindingTools
133
UIWidget&ComponentToolkitsOnWebPlatform:
Bootstrap3orBootstrap4KendoUIforjQuery[freeto$]MaterializeOfficeUIFabricSemanticUIUiKitWebix[$]
ReactSpecific,OnWebPlatform:
AntDesignMaterialuiSemantic-UI-React
NativeDesktop/Laptop/NetbookAppsviaWebPlatform(i.e.usedwithNW.jsandElectron):
PhotonReactUIComponentsforOSXElCapitanandWindows10
Mobile/TabletSpecificOnWebPlatform(i.e.usedwithtouchfocusedUI's):
Framework7KendoUIMobileRatchet
ADVICE:
IfyouneedabasicsetofUIWidgets/ComponentsstartwithSemanticUI.Ifyouarebuildingsomethingthatneedsagrid,spreadsheet,orpivotgridyou'llhavetolookatKendoUIorWebix.Also,keepinmindthatmostofthesesolutionsstillrequirejQuery.
IfIwasgoingtobuildaReactappandneededatoolkitofwidgets/componentsofftheshelfI'dwithSemantic-UI-Reactand/orAntDesign,orIwouldacceptthatfactthesomeofthecomponentsIwanttotakeofftheshelfandusehaveaharddependencyonjQuery.
1
2
1
2
UIWidget&ComponentToolkits
134
UIWidget&ComponentToolkits
135
DataVisualization(e.g.,Charts)ToolsJSLibraries:
d3sigmajs
Widgets&Components:
amCharts[freeto$]AnyChart[Non-commercialfreeto$]C3.jsChartist-jsjChart.jsEpochFusionCharts[$]GoogleChartsHighcharts[Non-commercialfreeto$]ZingChart[freeto$]
Services(i.e.hosteddatavisualizationservicesforembeddingandsharing):
ChartBlocks[freeto$]Datawrapperinfogr.am[freeto$]plotly[freeto$]
DataVisualization(e.g.,Charts)Tools
136
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
137
AnimationToolsAnimateAnimeDynamics.jsGreenSock-JSMagicTweenJSVelocity.js
Polyfills/Shims:
web-animations-js
AnimationReferences:
canianimate.com
AnimationTools
138
JSONToolsOnlineEditors:
JSONmatejson.browse()
Formatter&Validator:
jsonformatter.orgJSONFormatter&Validator
QueryTools:
DefiantJSJSONMaskObjectPath
GeneratingMockJSONTools:
JSONGeneratorMockaroo[freeto$]
OnlineJSONMockingAPITools:
FillText.comJamAPIJSONPlaceholdermockable.iomockapi.ioMockyRANDOMUSERGENERATOR
ListofpublicJSONAPI's:
AcollectivelistofJSONAPIsforuseinwebdevelopment
LocalJSONMockingAPITools:
json-server
JSONSpecifications/Schemas:
JSONTools
139
json-schema.org&jsonschema.net{json:api}
JSONTools
140
PlaceholderContentTools
Images:placehold.itSatyrPlaceimgLoremPixelCSS-TricksImageResourcesLibreStockUnsplashPlaceBeyoncé
DeviceMockups:placeit.netmockuphone.com
Text:MeettheIpsumscatipsum.combaconipsum.com(API)
UserData:uinames.comrandomuser.me
PlaceholderImages/TextTools
141
TestingToolsSoftwareTestingFrameworks:
InternKarmaJest
UnitTesting:
AVAJasmineMochaTape
TestingAssertionsforUnitTesting:
Chaiexpect.jsshould.js
TestSpies,Stubs,andMocksforUnitTesting:
sinon.jsKakapo.js
HostedTesting/AutomationforBrowsers:
Browserling[$]BrowserStack[$]CrossBrowserTesting.com[$]Nightcloud.ioSauceLabs[$]
BrowserAutomation:
CasperJSNightmareTestCafe
UITestingTools:
gremlins.js
TestingTools
142
PercyBackstopJSPhantomCSSGhostInspectordiff.io
NOTES:
Testingframeworkstypicallyoffermoretoolsthanjustunittesting.IfyouarelookingforJavaScriptunittestingsolutionslookatJavaScriptTools.
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
TestingTools
143
TestingTools
146
Front-EndDataStorageTools(i.e.Datastoragesolutionintheclient)
AlaSQLDexie.jsForerunnerDBLocalForageLokiJSLovefieldlowdbPouchdbNeDBYDN-DB
Front-endDataStorageTools
147
ModuleLoading/BundlingToolsBrowserifyRollupSystemJSwebpack
http://www.webpackbin.com/
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
Module/PackageLoadingTools
148
Module/PackageRepositoryToolsNPMyarn
Module/PackageRepo.Tools
151
HostingToolsGeneral
AWS[$]DigitalOcean[$]Heroku[freeto$]
Static
FirebaseHostingnetlify[freeto$]
BitballoonSurge[freeto$]Forge[$]
HostingTools
152
ProjectManagement&CodeHostingToolsAssembla[freeto$]Bitbucket[freeto$]Codebase[$]Github[freeto$]GitLab[freeto$]Unfuddle[$]
ProjectManagement&CodeHosting
153
Collaboration&CommunicationToolsSlack&screenhero[freeto$]appear.inMattermost[freeto$]TeamViewer[freeto$]
Code/GitHubCollaboration&Communication:
Gitter[freeto$]
Collaboration&CommunicationTools
154
ContentManagementHosted/APIToolsAPICMS(i.e.,ContentDeliveryCMS)Tools:
Contentful[$]CosmicJS[freeto$]prismic.io[freeto$]elemeno[freeto$]
HostedCMSTools:
CushyCMS[freeto$]LightCMS[$]PageLime[$]SurrealCMS[$]
StaticCMSTools:
webhook.comDatoCMSsiteleafforestry.io
CMSHosted/APITools
155
Back-end/APItoolsData/back-endasaserviceakaBAAS:
Back&[freeto$]Firebase[freeto$]Kinvey[free'ishto$]Pusher[freeto$]restdb.io[freeto$]
Data/back-end
HorizonGraphQL
http://www.apollodata.com/Relay
FalcorRxDB
UserManagementasaService:
Auth0[$]AuthRocketStormpathUserApp[freeto$]
BAAS(forFront-EndDevs)Tools
156
OfflineToolsHoodieOffline.jsPouchDBupup
OfflineTools
157
SecurityToolsCodingTool:
DOMPurifyXSS
SecurityScanners/Evaluators/Testers:
NetsparkerWebsecurify
References:
HTML5SecurityCheatsheet
SecurityTools
158
Tasking(akaBuild)ToolsTasking/BuildTools:
GulpBroccoli.js
OpinionatedTasking/Buildpipelinetools:
BrunchMimosaLineman
ADVICE:
BeforereachingforGulpmakesurenpmscriptsor(yarnscript)[https://yarnpkg.com/en/docs/package-json#toc-scripts]won'tfitthebill.Read,"WhyILeftGulpandGruntfornpmScripts".
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
1
1
Tasking(akaBuild)Tools
159
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
Tasking(akaBuild)Tools
160
DeploymentToolsBamboo[$]Buddy[freeto$]CircleCI[freeto$]Codeship[freeto$]Deploybot[freeto$]Deployhq[freeto$]FTPLOY[freeto$]Now[freeto$]TravisCI[freeto$]Springloops[freeto$]
DeploymentTools
163
Site/AppMonitoringToolsUptimeMonitoring:
Monitority[free]UptimeRobot[freeto$]
GeneralMonitoringTools:
Pingdom[freeto$]NewRelicUptrends[$]
Site/AppMonitoringTools
164
JavaScriptErrorReporting/Monitoringbugsnag[$]errorception[$]Honeybadger[$]Raygun[$]Rollbar[freeto$]Sentry[freeto$]TrackJS[$]
JSErrorMonitoringTools
165
PerformanceToolsReporting:
GTmetrixsitespeed.ioSpeedCurve[$]WebPageTest
JSTools:
imageminImageOptim-CLI
Budgeting:
performancebudget.io
References/Docs:
JankFreePerformanceofES6featuresrelativetotheES5
Checklist:
Front-EndPerformanceChecklist2017
PerformanceTools
166
ToolsforFindingToolsbuiltwithjavascripting.comjs.coachmicrojs.comnpmsstackshare.ioUnheap
ToolsforFindingTools
167