Upload
others
View
30
Download
0
Embed Size (px)
Citation preview
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-EndDeveloperHandbook2017
WrittenbyCodyLindleysponsoredby—FrontendMasters
Introduction
6
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.
Downloada.pdf,.epub,or.mobifilefrom:
https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details
Introduction
7
Contributecontent,suggestions,andfixesongithub:
https://github.com/FrontendMasters/front-end-handbook-2017
ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0UnportedLicense.
Introduction
8
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?
9
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?
10
andJavaScript),withoutwebengines,tocreatenativeapplications.
Someexamplesoftheseenvironmentsare:
NativeScriptReactNative
NOTES:
Makesureyouareclearwhatwhatexactlyismeantbythe"webplatform".Read,"TheWebplatform:whatitis"andreadthe,"OpenWebPlatform"Wikipediapage.
WhatIsaFront-EndDeveloper?
11
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).AtrendofdevelopersabandoningSublimeandAtomforVisualStudioCodebegins.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.MostlypeoplelearntoacceptJSX,andnowtheycan'timaginenotusingit.AworkableCSSmodulepattern(CSSencapsulation)isactualizedandused,thusCSSinJSbecomesaviablesolutionformany.MorepeopleturningtoUIfunctional/integrationtestingincludingconceptslikevisualCSS&RWDregressiontesting.
RecapofFront-endDevin2016
12
ThedaysofbattlinginconsistentbrowserAPI'sarealmostbehindusduetoamassivedeclineinusageanddevelopmentforolderversionsofIE.Mosteveryonerealizedtheywillhavetohaveamulti-devicestrategyplanwhendevelopingforthewebMoredevelopers,fromotherlanguages,continuetofloodtheJavaScriptspacebringingwiththemthingsliketypecheckingandanobsessionwithclasssyntaxandOOPconcepts.Front-enddevsareintroducedtoHotModulereplacementtechniquesandtimetraveldebugging.MorewaitingforanativeJavaScriptbrowsermoduleloader.EnforcingCSSandJavaScriptstyleconventionsbecomesmoreimportant(consideringES3toES6codeandCSSpre-processorssyntacticalvariations)AsmallbutnoticeablenumberofdevelopersarestartingtochooseElmoverJavaScript.TypeScriptgetssomeserioususeandfanboys.http://aurelia.io/becomesthesmartchoiceforenterprisedevelopers(i.e.support!).WebpackgetsitsacttogetherandsolidifiesispositionoverthesuperiorJSPMsolution.HTTPS,yeah,we'reseriousaboutthat.BASHonwindowshappens.ThenotificationsAPIgetsusedandabusedforchromeusers,butonlyafteryougiveitpermission.Firebugofficiallydead.CSS20yearsyoungin2016.Immutabilityconceptsrunrapid.
RecapofFront-endDevin2016
13
In2017expect...WebAssembly,mightjustpeak.importmightjustbeusablein<script></script>UniversalJavaScriptsolutionswillcontinuetorisethatpayhomage/respecttothedaysofserverdeliveredfront-ends(i.e.htmltotheclient).ReactiveprogrammingcontinuestothriveintheJavaScriptscene.(seeMobXandRxJS).React,moresotheconcept,willdominate.Reactitselfwillbecompletelyre-written(seeReactFiber)orevolve(seeInferno).AngularfoundSEMVERsoAngular4(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...
14
PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.
PartI:TheFront-EndPractice
15
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
16
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"Accessibility"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
17
Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjobtitlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andback-end.
Front-EndJobsTitles
18
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(akaECMAScript262)6. JavaScriptObjectNotation(akaJSON)7. DocumentObjectModel(akaDOM)8. WebAPIs(akaHTML5andfriendsorBrowserAPIs)9. WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternet
Applications(akaARIA)
Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.
HyperTextMarkupLanguage(akaHTML)
CommonWebTechEmployed
19
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
20
TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).
—Wikipedia
Mostrelevantspecifications/documentation:
DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4
JavaScriptProgrammingLanguage(akaECMAScript262)
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
21
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
22
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
23
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
24
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
25
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...
26
Imagesource:https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/
Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimewebplatformscenarios:
Awebbrowser(examples:Chrome,IE,Safari,Firefox).Aheadlessbrowser(examples:phantomJS).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...
27
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
28
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
29
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
30
Imagesource:http://stackoverflow.com/research/developer-survey-2016#developer-profile-developer-occupations
Generalist/Full-StackMyth
31
Front-EndInterviewsQuestionsyoumaygetasked:
10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuiz
Questionsyouask:
Anopensourcelistofdeveloperquestionstoaskprospectiveemployers
Preparing:
PreparingforaFront-EndWebDevelopmentInterviewin2017InterviewCake[$]Crackingthefront-endinterview
Front-Endinterviewquestions
32
Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.
angularjobs.comauthenticjobs.comcareers.stackoverflow.comcss-tricks.com/jobscodepen.io/jobs/frontenddeveloperjob.comglassdoor.comjobs.emberjs.comjobs.github.comweworkremotely.comfronthat.com
NOTES:
Lookingforaremotefront-endJob,checkouttheseRemote-friendlycompanies
Front-EndJobBoards
33
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
34
Front-EndSalaries
35
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
36
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
37
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
38
PartII:LearningParttwoidentifiesself-directed(i.e.,atyourownpacewhenyouwant)anddirected(i.e.,formalclassroomspecifictimesanddates)resourcesforlearningtobecomeafront-enddeveloper.
Notethatjustbecausealearningresourceislisted,oracategoryoflearningisdocumented,Iamnotsuggestingthatafront-enddeveloperlearneverything.Thatwouldbeabsurd.Chooseyourownsliceofexpertisewithintheprofession.I'mprovidingthepossibilitiesofwhatcouldbemasteredinthefield.
PartII:LearningFront-EndDev
39
SelfDirectedLearningThissectionfocusesonfreeandpaidresources(videotraining,books,etc.)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.
Thelearningresourcesmentionedwillincludebothfreeandpaidmaterial.Paidmaterialwillbeindicatedwith[$].
Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandonlinevideotraining.
Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:
codecademy.comcodeschool.comegghead.ioeventedmind.comFrontendMastersFreecodecampKhanAcademylaracasts.comlynda.com[careful,qualityvaries]mijingo.compluralsight.com[careful,qualityvaries]Treehousetutsplus.comUdacity[careful,qualityvaries]
SelfDirectedLearning
40
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
41
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
42
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
43
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
44
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
45
LearnDNS
46
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
47
HTTPStatusCodesin60Seconds[watch]
CORSSpecifications
Cross-OriginResourceSharing
CORS
CORSinAction[read][$]HTTPAccessControl(CORS)[read]
WebSockets
ConnecttheWebWithWebSockets[watch]WebSocket:LightweightClient-ServerCommunications[read][$]TheWebSocketProtocol[read]
LearnHTTP/Networks
48
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
49
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
50
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
52
DesigningWebInterfaces:PrinciplesandPatternsforRichInteractions[read][$]Don'tMakeMeThink,Revisited:ACommonSenseApproachtoWebUsability[read][$]
LearnUI/InteractionDesign
53
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][$]InternetingisHard[read]IntrotoHTML/CSS:Makingwebpages[watch]LearntoCodeHTML&CSS[read]LearnCSSLayout[read]MarkSheet[read]SemanticHTML:HowtoStructureWebPages[watch]SolidHTMLFormStructure[watch]UnderstandingtheCSSBoxModel[watch]
LearnHTML&CSS
54
ResilientWebDesign[read]
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:
LearnHTML&CSS
55
AtomicDesign[read]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
56
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
57
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
58
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
59
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
60
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
61
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
62
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
63
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
64
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
65
LearnAccessibility
66
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
67
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
68
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
69
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
70
LearnStaticSiteGeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.,ruby,php,python,nodeJS,etc.),producestaticHTMLfilesfromstatictext/data+templatesthatareintendedtobesentfromaservertotheclientstaticallywithoutadynamicnature.
GeneralLearning:
StaticSiteGenerators[read]
LearnStaticSiteGenerators
71
LearnComputerScienceviaJSFourSemestersofComputerScienceinSixHours[video][$]ComputerScienceinJavaScript[read]Collectionofclassiccomputerscienceparadigms,algorithms,andapproacheswritteninJavaScript[read]AlgorithmsandDataStructuresinJavaScript[watch][$]
LearnComputerScienceviaJS
72
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
73
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
LearnFront-EndAppArchitecture
74
LearnData(i.e.JSON)APIDesignAPIDesigninNode.js(usingExpress&Mongo)[watch][$]BuildAPIsYouWon'tHate[$][read]JSONAPI[read]RESTfulWebAPIDesignwithNode.JS-SecondEdition[$][read]
LearnDataAPI(i.e.JSON/REST)Design
77
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
78
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][$]IntrotoProgressiveWebAppsbyGoogle[watch]NativeAppsareDoomed[read]WhyNativeAppsReallyareDoomed:NativeAppsareDoomedpt2[read]
LearnProgressiveWebApp
79
LearnProgressiveWebApp
80
LearnJSAPIDesignDesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]
LearnJSAPIDesign
81
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
82
LearnWebDevTools
83
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
84
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
85
LearnModulesGeneralLearning:
jsmodules.ioES6ModulesinDepth[read]ExploringJS-Modules[read]
References/Docs:
MDN-exportMDN-import
NOTES:
Wearestillwaitingonasupportinbrowsersforloadingmodules.Untilthenyoucanhavealookat,"ESModuleLoaderPolyfill"and"JavaScriptLoaderStandard".
LearnJSModules
86
LearnModuleloaders/bundlersWebpack:
WebpackWebpackDeepDive[read]WebpackFundamentals[watch][$]Survivejs.comWebpackBook[read]
Rollup:
Rollup
SystemJS:
Modern,ModularJavaScriptwithSystemJSandjspm[watch][$]
NOTES:
ItisnotuncommonfordeveloperstouseatoollikeGulpforbundlingJSmodules.However,manyoftheGulppluginssimplyuseWebpack,Rollup,orSystemJSunderthehood.
LearnJSModuleloaders/bundlers
87
LearnPackageManagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.
—Wikipedia
GeneralLearning:
AnintroductiontohowJavaScriptpackagemanagersworkTheMystical&MagicalSemVerRangesUsedBynpm&Bower[read]PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloper[read]npmdocsyarndocs
LearnPackageManagers
88
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
89
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
90
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
91
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
92
LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.
Headlessbrowsersprovideautomatedcontrolofawebpageinanenvironmentsimilartopopularwebbrowsers,butareexecutedviaacommandlineinterfaceorusingnetworkcommunication.TheyareparticularlyusefulfortestingwebpagesastheyareabletorenderandunderstandHTMLthesamewayabrowserwould,includingstylingelementssuchaspagelayout,color,fontselectionandexecutionofJavaScriptandAJAXwhichareusuallynotavailablewhenusingothertestingmethods.Googlestatedin2009thatusingaheadlessbrowsercouldhelptheirsearchengineindexcontentfromwebsitesthatuseAJAX.
—Wikipedia
AutomatingtheWebUsingPhantomJSandCasperJS[watch][$]GettingStartedwithPhantomJS[read][$]PhantomJSCookbook[read][$]PhantomJSforWebAutomation[watch]RapidPhantomJS[watch][$]
LearnHeadlessBrowsers
93
LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.
GeneralLearning:
CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]YourFirstOfflineWebApp[read]
LearnOfflineDev
94
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
95
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)
96
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)
97
DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.
DirectedLearning
98
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
99
Front-EndDeveloperstoLearnFromThenotionthatyoushouldfollowanindividualtolearnaboutfront-enddevelopmentisslowlybecomingpointless.Theadvancedpractitionersoffront-enddevelopmentgenerateenoughcontentthatyoucansimplyfollowthecommunity/leadersbypayingattentiontothefront-end"news"outlets(viaNewsletters,News,&Podcasts).
Front-EndDevstoLearnFrom
100
Front-EndNewsletters,NewsSites,&PodcastsGeneralFront-EndNewsletters,News,&Podcasts:
TheBigWebShowDevTipsFront-EndDevWeeklyFrontEndHappyHourFront-EndNewsin5MinutesFront-EndFrontFrontEndFocusFrontEndNewsletterTheFrontsidePodcastMobileWebWeeklyNonBreakingSpaceShowOpenWebPlatformDailyDigestShopTalkShowUXDesignNewsletterTheVersioningShowbySitePointTheWebAheadWebDevelopmentReadingListTheWebPlatformPodcastWebToolsWeekly
HTML/CSSNewsletters:
AccessibilityWeeklyCSSWeeklyResponsiveDesignWeekly
JavaScriptNewsletters,News,&Podcasts:
EchoJSECMAScriptDailyES.nextNewsFiveJSJavaScriptAirJavaScriptJabber
Newsletters,News,&Podcasts
101
JavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.comReactStatus
GraphicandAnimationNewslettersandPodcasts
MotionandMeaningResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly
Newsletters,News,&Podcasts
102
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
103
Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.
Dash[OSX,iOS][$]DevDocsVelocity[Windows][$]Zeal[Windows,Linux]
Doc/APIBrowsingTools
104
SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool
ToolsforFindingSEOTools:
SEOTools-TheCompleteList
SEOTools
105
Prototyping&WireframingToolsCreating:
Axure[$]BalsamiqMockups[$]Justinmind[$]UXPin[freeto$]
Collaboration/Presenting:
InVision[freeto$]Conceptboard[freeto$]myBalsamiq[$]
Prototyping&WireframingTools
106
DiagrammingToolsdraw.io[freeto$]Cacoo[freeto$]gliffy[freeto$]
DiagrammingTools
107
HTTP/NetworkToolsCharles[$]ChromeDevToolsNetworkPanelInsomnia[free-$]Paw[$]Postman[free-$]
HTTP/NetworkTools
108
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
109
Shareable&RunnableCodeEditors:
Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosmallamountsofimmediatelyrunnablecodeinawebbrowser.
CodePen[freeto$]jsbin.com[freeto$]jsfiddle.netliveweave.comPlunker
ADVICE:
IrecommendingusingVisualStudioCodebecauseofthequalityofthetoolandthecontinuousimprovementsmadetotheeditorthatlikelywon'tstoporslowduetothefactthatMicrosoftisbehindthetool.
1
CodeEditingTools
110
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
111
console-polyfillHTML5CrossBrowserPolyfillsfetchsocket.ioSockJSwebcomponents.jswebshim
HostedTesting/AutomationforBrowsers:
Browserling[freeto$]BrowserStack[$]CrossBrowserTesting.com[$]Nightcloud.ioSauceLabs[$]
HeadlessBrowsers:
PhantomJSPhantomCSS
slimerjsTrifleJSZombie.js
BrowserAutomation:
Usedforfunctionaltestingandmonkeytesting.
CasperJSNightmareTestCafe
BrowserHacks:
browserhacks.com
BrowserTools
112
HTMLToolsHTMLTemplates/Boilerplates/StarterKits:
dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplateWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopment
HTMLPolyfill:
html5shiv
Transpiling:
HAMLPugMarkdown
References:
ElementattributesElementsHTMLArrowsHTMLEntityLookupHTMLInterfacesBrowserSupporthtmlreference.io
Linting/Hinting:
HTMLHinthtml-inspector
Optimizer:
HTMLMinifier
OnlineCreation/Generation/ExperimentationTools:
tablesgenerator.com
HTMLTools
113
AuthoringConventions:
HTMLCodeGuidePrinciplesofWritingConsistent,IdiomaticHTML
Workflow:
Emmet
HTMLOutliner:
HTML5Outliner
TrendingHTMLRepositoriesonGitHubThisMonth:
https://github.com/trending?l=html&since=monthly
HTMLTools
114
CSSToolsDesktop&MobileCSSFrameworks:
BaseBasscssBulmaBootstrap3orBootstrap4ConciseFoundationMaterialDesignLite(MDL)MetroUIPicnicPure.cssSemanticUISkeletonSpectre.csstachyons
MobileOnlyCSSFrameworks:
Ratchet
CSSReset:
ACSSReset(or“ResetCSS”)isashort,oftencompressed(minified)setofCSSrulesthatresetsthestylingofallHTMLelementstoaconsistentbaseline.
—cssreset.com
EricMeyer's“ResetCSS”2.0Normalize
Transpiling:
pleeease.ioPostCSS&cssnextrework&mythSass/SCSSStylus
References:
CSSTools
115
CSSCursorscss3test.comcss3clickchart.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]BEMITCSS
CSSTools
116
OOCSS[read]SMACSS[read][$]
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
117
DOMToolsDOMLibraries/Frameworks:
BlissjQuery
YouDon'tNeedjQueryZeptocashUmbrellaJS
DOMUtilities:
KeypressTetherclipboard.js
DOMEventTools:
KeyboardEventViewer
DOMPerformanceTools:
ChromeDevToolsTimelineDOMMonster
References:
EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)
DOMPolyfills/Shims:
dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform
DOMTools
118
VirtualDOM:
jsdomvirtual-dom
DOMTools
119
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
120
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
121
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
122
StaticSiteGeneratorsToolsSiteGeneratorListings:
staticgen.comstaticsitegenerators.netMetalsmith
ADVICE:
BeforeusingastaticsitegeneratorconsiderusingGulptoorchestrateacustomsolutionoruseatoolthatmakesuseofGulpforstaticsitegeneration.e.g.GulpStarter
1
1
StaticSiteGeneratorsTools
123
AccessibilityTools
GuidesAccessibilityGuidelinesChecklistInteractiveWCAG2.018FAccessibilityGuide
SiteScannersaXeBrowserExtensionChromeAccessibilityDeveloperToolsTenonAccessibilityToolWAVEAccessibilityTool
ColorContrastTestersColorableColorableMatrixColorSafeColorRatio
Low-VisionSimulatorsSEE(Chrome)Spectrum(Chrome)NoCoffee(Chrome)
ScreenReadersVoiceOver(Mac)JAWS(Win)NVDA(Win)Window-Eyes(Win)ChromeVox(Chromeextension)
AccessibilityDevTools
124
Basicscreenreadercommands
ReadabilityTestersExpressoAppHemingwayAppGrammarlyReadabilityScoreMSOffice
ArticlesGettingStartedwithARIAReframingAccessibilityfortheWebAnAlphabetofAccessibilityIssuesPracticalARIAExamplesMDNAccessibilityGuideEnableaccessibilitypanelinChromedevtools
AccessibilityDevTools
125
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
126
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
127
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
128
ProgressiveWebAppTools:Front-EndAppFrameworks:
lighthouseProgressiveWebAppChecklist
ProgressiveWebAppTools
131
ScaffoldingToolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.
SlushYeoman
ScaffoldingTools
132
GeneralFront-EndDevelopmentToolsDevelopmentTools:
BrowsersyncCodeKitPrepros
GeneralFEDevelopmentTools
133
Templating/DataBindingToolsJustTemplating:
doT.jsHandlebars
htmlbarsNunjuncks
TemplatingandReactiveDataBinding:
Dekujquerymy.jsractive.jsreact.jsriotRivets.jsvue.js
TemplatingtoVirtualDOM:
JSXt7
Templating/DataBindingTools
134
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
135
UIWidget&ComponentToolkits
136
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
137
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
138
AnimationToolsAnimateAnimeAnimista.netDynamics.jsGreenSock-JSMagicTweenJSVelocity.js
Polyfills/Shims:
web-animations-js
AnimationReferences:
canianimate.com
AnimationTools
139
JSONToolsOnlineEditors:
JSONmatejson.browse()
Formatter&Validator:
jsonformatter.orgJSONFormatter&Validator
QueryTools:
DefiantJSJSONMaskObjectPath
GeneratingMockJSONTools:
JSONGeneratorMockaroo[freeto$]
OnlineJSONMockingAPITools:
FillText.comJamAPIJSONPlaceholderjsonbin.orgmockable.iomockapi.ioMockyRANDOMUSERGENERATOR
ListofpublicJSONAPI's:
AcollectivelistofJSONAPIsforuseinwebdevelopment
LocalJSONMockingAPITools:
json-server
JSONSpecifications/Schemas:
JSONTools
140
json-schema.org&jsonschema.net{json:api}
JSONTools
141
PlaceholderContentTools
Images:placehold.itSatyrPlaceimgLoremPixelCSS-TricksImageResourcesLibreStockUnsplashPlaceBeyoncé
DeviceMockups:placeit.netmockuphone.com
Text:MeettheIpsumscatipsum.combaconipsum.com(API)
UserData:uinames.comrandomuser.me
PlaceholderImages/TextTools
142
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
143
PercyBackstopJSPhantomCSSGhostInspectordiff.io
Automateddeadlinkanderrordetectors:
MonkeyTestIt
NOTES:
Testingframeworkstypicallyoffermoretoolsthanjustunittesting.IfyouarelookingforJavaScriptunittestingsolutionslookatJavaScriptTools.
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
TestingTools
144
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
Imagesource:http://stateofjs.com/
TestingTools
145
TestingTools
147
Front-EndDataStorageTools(i.e.Datastoragesolutionintheclient)
AlaSQLDexie.jsForerunnerDBLocalForageLokiJSLovefieldlowdbPouchdbNeDBYDN-DB
Front-endDataStorageTools
148
ModuleLoading/BundlingToolsBrowserifyRollupSystemJSwebpack
http://www.webpackbin.com/
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
Module/PackageLoadingTools
149
Module/PackageRepositoryToolsNPMyarn
Module/PackageRepo.Tools
152
HostingToolsGeneral
AWS[$]DigitalOcean[$]Heroku[freeto$]
Static
FirebaseHostingnetlify[freeto$]
BitballoonSurge[freeto$]Forge[$]
HostingTools
153
ProjectManagement&CodeHostingToolsAssembla[freeto$]Bitbucket[freeto$]Codebase[$]Github[freeto$]GitLab[freeto$]Unfuddle[$]
ProjectManagement&CodeHosting
154
Collaboration&CommunicationToolsSlack&screenhero[freeto$]appear.inMattermost[freeto$]TeamViewer[freeto$]
Code/GitHubCollaboration&Communication:
Gitter[freeto$]
Collaboration&CommunicationTools
155
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
156
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
157
OfflineToolsHoodieOffline.jsPouchDBupup
OfflineTools
158
SecurityToolsCodingTool:
DOMPurifyXSS
SecurityScanners/Evaluators/Testers:
NetsparkerWebsecurifyOWASPZAP
References:
HTML5SecurityCheatsheet
SecurityTools
159
Tasking(akaBuild)ToolsTasking/BuildTools:
GulpBroccoli.js
OpinionatedTasking/Buildpipelinetools:
BrunchMimosaLineman
ADVICE:
BeforereachingforGulpmakesurenpmscriptsoryarnscriptwon'tfitthebill.Read,"WhyILeftGulpandGruntfornpmScripts".
SURVEYRESULTS:
Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)
1
1
Tasking(akaBuild)Tools
160
Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
Tasking(akaBuild)Tools
161
DeploymentToolsBamboo[$]Buddy[freeto$]CircleCI[freeto$]Codeship[freeto$]Deploybot[freeto$]Deployhq[freeto$]FTPLOY[freeto$]Now[freeto$]TravisCI[freeto$]Semaphore[freeto$]Springloops[freeto$]
DeploymentTools
164
Site/AppMonitoringToolsUptimeMonitoring:
Monitority[free]UptimeRobot[freeto$]
GeneralMonitoringTools:
Pingdom[freeto$]NewRelicUptrends[$]
Site/AppMonitoringTools
165
JavaScriptErrorReporting/Monitoringbugsnag[$]errorception[$]Honeybadger[$]Raygun[$]Rollbar[freeto$]Sentry[freeto$]TrackJS[$]
JSErrorMonitoringTools
166
PerformanceToolsReporting:
GTmetrixsitespeed.ioSpeedCurve[$]WebPageTest
JSTools:
imageminImageOptim-CLI
Budgeting:
performancebudget.io
References/Docs:
JankFreePerformanceofES6featuresrelativetotheES5
Checklist:
Front-EndPerformanceChecklist2017
PerformanceTools
167
ToolsforFindingToolsbuiltwithjavascripting.comjs.coachmicrojs.comnpmsstackshare.ioUnheap
ToolsforFindingTools
168