1.1
1.2
1.3
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.3.8
1.3.9
1.3.10
1.4
1.4.1
1.4.1.1
1.4.1.2
1.4.1.3
1.4.1.4
1.4.1.5
1.4.1.6
1.4.1.7
1.4.1.8
1.4.1.9
1.4.1.10
1.4.1.11
1.4.1.12
1.4.1.13
1.4.1.14
1.4.1.15
TableofContentsIntroduction
WhatIsaFront-EndDeveloper?
PartI:TheFront-EndPractice
Front-EndJobsTitles
CommonWebTechEmployed
Front-EndDevSkills
Front-EndDevsDevelopFor...
Front-EndonaTeam
GeneralistMyth
Front-Endinterviewquestions
Front-EndJobBoards
Front-EndSalaries
HowFDsAreMade
PartII:LearningFront-EndDev
SelfDirectedLearning
LearnInternet/Web
LearnWebBrowsers
LearnDNS
LearnHTTP/Networks
LearnWebHosting
LearnGeneralFront-EndDev
LearnUI/InteractionDesign
LearnHTML&CSS
LearnSEO
LearnJavaScript
LearnWebAnimation
LearnDOM,BOM&jQuery
LearnWebFonts
LearnAccessibility
LearnWeb/BrowserAPIs
2
1.4.1.16
1.4.1.17
1.4.1.18
1.4.1.19
1.4.1.20
1.4.1.21
1.4.1.22
1.4.1.23
1.4.1.24
1.4.1.25
1.4.1.26
1.4.1.27
1.4.1.28
1.4.1.29
1.4.1.30
1.4.1.31
1.4.1.32
1.4.1.33
1.4.2
1.4.2.1
1.4.3
1.4.4
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.8
1.5.9
1.5.10
1.5.11
LearnJSON
LearnJSTemplates
LearnStaticSiteGenerators
LearnFront-EndAppArchitecture
LearnInterface/APIDesign
LearnWebDevTools
LearnCommandLine
LearnNode.js
LearnModuleLoader
LearnPackageManagers
LearnVersionControl
LearnBuild&TaskAutomation
LearnSitePerformanceOptimization
LearnJSTesting
LearnHeadlessBrowsers
LearnOfflineDev
LearnSecurity
LearnMulti-ThingDev(e.g.,RWD)
DirectedLearning
Front-EndSchools,Courses,&Bootcamps
Front-EndDevstoLearnFrom
Newsletters,News,&Podcasts
PartIII:Front-EndDevTools
GeneralFront-EndDevTools
Doc/APIBrowsingTools
SEOTools
Prototyping&WireframingTools
DiagrammingTools
HTTP/NetworkTools
CodeEditingTools
BrowserTools
HTMLTools
CSSTools
DOMTools
3
1.5.12
1.5.13
1.5.14
1.5.15
1.5.16
1.5.17
1.5.18
1.5.19
1.5.20
1.5.21
1.5.22
1.5.23
1.5.24
1.5.25
1.5.26
1.5.27
1.5.28
1.5.29
1.5.30
1.5.31
1.5.32
1.5.33
1.5.34
1.5.35
1.5.36
1.5.37
JavaScriptTools
StaticSiteGeneratorsTools
App(Desktop,Mobile,Tablet,etc.)Tools
ScaffoldingTools
TemplatingTools
UIWidgets&ComponentsTools
DataVisualization(e.g.,Charts)Tools
Graphics(e.g.,SVG,canvas,webgl)Tools
AnimationTools
JSONTools
TestingFrameworkTools
DataStorageTools
Module/PackageLoadingTools
Module/PackageRepo.Tools
Web/Cloud/StaticHostingTools
ProjectManagement&CodeHosting
Collaboration&CommunicationTools
CMSHosted/APITools
BAAS(forFront-EndDevs)Tools
OfflineTools
SecurityTools
Tasking(akaBuild)Tools
DeploymentTools
Site/AppMonitoringTools
JSErrorMonitoringTools
PerformanceTools
4
Front-EndDeveloperHandbookWrittenbyCodyLindleysponsoredby—FrontendMasters
Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingit.
Itisspecificallywrittenwiththeintentionofbeingaprofessionalresourceforpotentialandcurrentlypracticingfront-enddeveloperstoequipthemselveswithlearningmaterialsanddevelopmenttools.Secondarily,itcanbeusedbymanagers,CTOs,instructors,andheadhunterstogaininsightsintothepracticeoffront-enddevelopment.
Thecontentofthehandbookfavorswebtechnologies(HTML,CSS,DOM,andJavaScript)andthosesolutionsthataredirectlybuiltontopoftheseopentechnologies.Thematerialsreferencedanddiscussedinthebookareeitherbestinclassorthecurrentofferingtoaproblem.
Thebookshouldnotbeconsideredacomprehensiveoutlineofallresourcesavailabletoafront-enddeveloper.Thevalueofthebookistiedupinaterse,focused,andtimelycurationofjustenoughcategoricalinformationsoasnottooverwhelmanyoneonanyoneparticularsubjectmatter.
Theintentionistoreleaseanupdatetothecontentyearly.
Thehandbookisdividedintothreeparts.
PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.
PartII:LearningFront-EndDevelopmentParttwoidentifiesself-directedanddirectresourcesforlearningtobecomeafront-enddeveloper.
PartIII:Front-EndDevelopmentToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.
Introduction
5
Downloada.pdf,.epub,or.mobifilefrom:
https://www.gitbook.com/book/frontendmasters/front-end-handbook/details
Contributecontent,suggestions,andfixesongithub:
https://github.com/FrontendMasters/front-end-handbook
ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0UnportedLicense.
Introduction
6
WhatIsaFront-EndDeveloper?Afront-enddeveloperarchitectsanddevelopswebsitesandapplicationsusingwebtechnologies(i.e.,HTML,CSS,DOM,andJavaScript),whichrunonthewebplatformoractascompilationinputfornon-webplatformenvironments(i.e.,NativeScript).
Imagesource:https://www.upwork.com/hiring/development/front-end-developer/
Typically,apersonentersintothefieldoffront-enddevelopmentbylearningtodevelopHTML,CSS,andJScode,whichrunsinawebbrowser,headlessbrowser,WebView,orascompilationinputforanativeruntimeenvironment.Thefourruntimesscenariosareexplainedbelow.
Awebbrowserissoftwareusedtoretrieve,present,andtraverseinformationontheWWW.Typically,browsersrunonadesktop,laptop,tablet,orphone,butasoflateabrowsercanbefoundonjustaboutanything(i.e,onafridge,incars,etc.).
Themostcommonwebbrowsersare:
ChromeInternetExplorerFirefoxSafari
Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbecontrolledfromacommandlineinterfaceforthepurposeofwebpageautomation(e.g.,functionaltesting,scraping,unittesting,etc.).Thinkofheadlessbrowsersasabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraversewebpages.
Themostcommonheadlessbrowsersare:
PhantomJS
WhatIsaFront-EndDeveloper?
7
slimerjstrifleJS
WebviewsareusedbyanativeOS,inanativeapplication,torunwebpages.Thinkofawebviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanativeapplicationrunningonadevice(e.g.,iOS,android,windows).
Themostcommonsolutionsforwebviewdevelopmentare:
Cordova(typicallyfornativephone/tabletapps)NW.js(typicallyusedfordesktopapps)Electron(typicallyusedfordesktopapps)
Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-enddeveloperstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asoflate,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.,CSSandJavaScript),withoutwebengines,tocreatetrulynativeapplications.
Someexamplesoftheseenvironmentsare:
NativeScriptReactNative
WhatIsaFront-EndDeveloper?
8
PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.
PartI:TheFront-EndPractice
9
Front-EndJobsTitlesBelowisalistanddescriptionofvariousfront-endjobtitles.Thecommon,ormostused(i.e.,generic),titleforafront-enddeveloperis,"front-enddeveloper"or"front-endengineer".Notethatanyjobthatcontainstheword"front-end","client-side","webUI","HTML","CSS",or"JavaScript"typicallyinfersthatapersonhassomedegreeofHTML,CSS,DOM,andJavaScriptprofessionalknowhow.
Front-EndDeveloper/Engineer(akaFront-EndWebDeveloper/Engineer,Client-SideDeveloper/Engineer,Front-EndSoftwareDeveloper/EngineerorUIEngineer)
ThegenericjobtitlethatdescribesadeveloperwhoisskilledtosomedegreeatHTML,CSS,DOM,andJavaScriptandimplementingthesetechnologiesonthewebplatform.
CSS/HTMLDeveloper
Thefront-endjobtitlethatdescribesadeveloperwhoisskilledatHTMLandCSS,excludingJavaScriptandApplicationknowhow.
Front-EndJavaScript(optionally...Application)Developer
Whentheword"JavaScriptApplication"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldbeanadvancedJavaScriptdeveloperpossessingadvancedprogramming,softwaredevelopment,andapplicationdevelopmentskills(i.ewillhavesolidexperiencebuildingfront-endapplications).
Front-EndWebDesigner
Whentheword"Designer"isincludedinthejobtitle,thiswilldenotethatthedesignerwillpossesfront-endskills(i.e.,HTML&CSS)butalsoprofessionaldesign(VisualDesignandInteractionDesign)skills.
Web/Front-EndUserInterface(akaUI)Developer/Engineer
Front-EndJobsTitles
10
Whentheword"Interface"or"UI"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldpossesinteractiondesignskillsinadditiontofront-endskills.
Mobile/TabletFront-EndDeveloper
Whentheword"Mobile"or"Tablet"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasexperiencedevelopingfront-endsthatrunonmobileortabletdevices(eithernativelyoronthewebplatform,i.e.,inabrowser).
Front-EndSEOExpert
Whentheword"SEO"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiestowardsanSEOstrategy.
Front-EndAccessibilityExpert
Whentheword"Acessibility"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiesthatsupportaccessibilityrequirementsandstandards.
Front-EndDev.Ops
Whentheword"DevOps"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencewithsoftwaredevelopmentpracticespertainingtocollaboration,integration,deployment,automation,andmeasurement.
Front-EndTesting/QA
Whentheword"Testing"or"QA"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencetestingandmanagingsoftwarethatinvolvesunittesting,functionaltesting,usertesting,andA/Btesting.
Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjobtitlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andback-
Front-EndJobsTitles
11
end.
Front-EndJobsTitles
12
WebTechnologiesEmployedbyFront-EndDevelopers
Imagesource:http://www.2n2media.com/compare-front-end-development-and-back-end-development
Thefollowingwebtechnologiesareemployedbyfront-enddevelopers:
HyperTextMarkupLanguage(akaHTML)CascadingStyleSheets(akaCSS)DocumentObjectModel(akaDOM)JavaScriptProgrammingLanguage(aka:ECMAScript6,ES6,JavaScript2015)WebAPIs(akaHTML5andfriendsorBrowserAPIs)HypertextTransferProtocol(akaHTTP)UniformResourceLocators(akaURLs)JavaScriptObjectNotation(akaJSON)WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)
Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.
HyperTextMarkupLanguage(akaHTML)
CommonWebTechEmployed
13
HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CHTMLSpecTheelementsofHTMLfromtheLivingStandardGlobalattributesHTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebHTMLattributereferenceHTMLelementreferenceTheHTMLSyntaxfromtheLivingStandard
CascadingStyleSheets(akaCSS)
CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CCSSSpecificationsCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSreferenceSelectorsLevel3
DocumentObjectModel(akaDOM)
CommonWebTechEmployed
14
TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).
—Wikipedia
Mostrelevantspecifications/documentation:
DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4
JavaScriptProgrammingLanguage(aka:ECMAScript6,ES6,JavaScript2015)
JavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.
—Wikipedia
Mostrelevantspecifications/documentation:
ECMAScript®2015LanguageSpecification
WebAPIs(akaHTML5andfriends)
WhenwritingcodefortheWebusingJavaScript,thereareagreatmanyAPIsavailable.Belowisalistofalltheinterfaces(thatis,typesofobjects)thatyoumaybeabletousewhiledevelopingyourWebapporsite.
—Mozilla
Mostrelevantdocumentation:
WebAPIInterfaces
HypertextTransferProtocol(akaHTTP)
CommonWebTechEmployed
15
TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.
—Wikipedia
Mostrelevantspecifications:
HypertextTransferProtocol--HTTP/1.1HypertextTransferProtocolversion2draft-ietf-httpbis-http2-16
UniformResourceLocators(akaURL)
Auniformresourcelocator(URL)(alsocalledawebaddress)isareferencetoaresourcethatspecifiesthelocationoftheresourceonacomputernetworkandamechanismforretrievingit.AURLisaspecifictypeofuniformresourceidentifier(URI),althoughmanypeopleusethetwotermsinterchangeably.AURLimpliesthemeanstoaccessanindicatedresource,whichisnottrueofeveryURI.URLsoccurmostcommonlytoreferencewebpages(http),butarealsousedforfiletransfer(ftp),email(mailto),databaseaccess(JDBC),andmanyotherapplications.
—Wikipedia
Mostrelevantspecifications:
UniformResourceLocators(URL)URLLivingStandard
JavaScriptObjectNotation(akaJSON)
cItistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.
—Wikipedia
Mostrelevantspecifications:
IntroducingJSONJSONAPI
CommonWebTechEmployed
16
TheJSONDataInterchangeFormat
WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)
Accessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.,unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).
—Wikipedia
AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus
CommonWebTechEmployed
17
Front-EndDevSkills
Imagesource:http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html
BasictoadvancedHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserskillsareassumedforanytypeoffront-enddeveloper.
BeyondHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserdevelopment,afront-enddevelopercouldbeskilledinoneormoreofthefollowing:
ContentManagementSystems(akaCMS)Node.jsCross-BrowserTestingCross-PlatformTestingUnitTestingCross-DeviceTestingAccessibility/WAI-ARIASearchEngineOptimization(akaSEO)InteractionorUserInterfaceDesignUserExperienceUsabilityE-commerceSystemsPortalSystemsWireframingCSSLayout/GridsDOMManipulation(e.g.,jQuery)
Front-EndDevSkills
18
MobileWebPerformanceLoadTestingPerformanceTestingProgressiveEnhancement/GracefulDegradationVersionControl(e.g.,GIT)MVC/MVVM/MV*FunctionalProgrammingDataFormats(e.g.,JSON,XML)DataAPIs(e.gRestfulAPI)WebFontEmbeddingScalableVectorGraphics(akaSVG)RegularExpressionsContentStrategyMicrodata/MicroformatsTaskRunners,BuildTools,ProcessAutomationToolsResponsiveWebDesignObject-OrientedProgrammingApplicationArchitectureModulesDependencyManagersPackageManagersJavaScriptAnimationCSSAnimationCharts/GraphsUIWidgetsCodeQualityTestingCodeCoverageTestingCodeComplexityAnalysisIntegrationTestingCommandLine/CLITemplatingStrategiesTemplatingEnginesSinglePageApplicationsXHRRequests(akaAJAX)Web/BrowserSecurityHTMLSemanticsBrowserDeveloperTools
Front-EndDevSkills
19
Front-EndDevelopersDevelopFor...Afront-enddevelopercraftsHTML,CSS,andJSthattypicallyrunsonthewebplatform(e.g.awebbrowser)ononeofthefollowingoperatingsystems(akaOSs):
AndroidChromiumiOSOSXUbuntu(orsomeflavorofLinux)WindowsPhoneWindows
Theseoperatingsystemstypicallyrunononeormoreofthefollowingdevices:
DesktopcomputerLaptop/NetbookcomputerMobilephoneTabletTVWatchThings(i.e.,anythingyoucanimagine,car,refrigerator,lights,thermostat,etc.)
Front-EndDevsDevelopFor...
20
Imagesource:https://ams-ix.net/newsitems/87
Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimescenarios:
Awebbrowser(examples:Chrome,IE,Safari,Firefox)runningonanOS.Aheadlessbrowser(examplesphantomJS)drivenfromaCLIrunningonanOS.AWebView/browsertab(thinkiframe)embeddedwithinanativeapplicationasaruntimewithbridgetonativeAPIs.WebViewapplicationstypicallycontainaUIconstructedfromwebtechnologies.(i.e.,HTML,CSS,andJS).(examples:ApacheCordova,NW.js,Electron)AnativeapplicationbuiltfromwebtechthatisinterpretedatruntimewithabridgetonativeAPIs.TheUIwillmakeuseofnativeUIparts(e.g.,iOSnativecontrols)notwebtechnologies.(examples:NativeScript,ReactNative)
Front-EndDevsDevelopFor...
21
Front-EndonaTeamAfront-enddeveloperistypicallyonlyoneplayeronateamthatdesignsanddevelopswebsites,webapplications,ornativeapplicationsrunningonwebtechnologies.(Note:Adeveloperwhobuildseverythingwasoncecalleda"webmaster"butasoflatetheserareandmythicaldevelopersarecalled"full-stackdevelopers").
Abarebonesteamforbuildingprofessionalsitesorsoftwareonthewebwillminimallycontainthefollowingroles.
VisualDesigner(i.e.,fonts,colors,spacing,emotion,visualsconcepts&themes)UI/InteractionDesigner/InformationArchitect(i.e.,wireframes,specifyingalluserinteractionsandUIfunctionality,structuringinformation)Front-EndDeveloper(i.e.,writescodethatrunsinclient/ondevice)Back-EndDeveloper(i.e.,writescodethatrunsonserver)
Therolesareorderedaccordingtooverlappingskills.Afront-enddeveloperwilltypicallyhaveagoodhandleonUI/Interactiondesignaswellasback-enddevelopment.Itisnotuncommonforteammemberstofillmorethanonerolebytakingontheresponsibilitiesofanover-lappingrole.
Itisassumedthattheteammentionedaboveisbeingdirectedbyaprojectleadorsomekindofproductowner(i.e.,stakeholder,projectmanager,projectlead,etc.)
Alargerwebteammightincludethefollowingrolesnotshownabove:
VisualDesignersInterfaceDesign/InteractionDesigner/InformationDesignSEOStrategistFront-EndDeveloperDevOpsEngineersBack-EndDeveloperAPIDeveloperDatabaseAdministratorQAEngineer/Testers
Front-EndonaTeam
22
GeneralistMyth
Imagesource:http://andyshora.com/full-stack-developers.html
Therolesrequiredtodesignanddevelopawebsolutionrequireadeepskillsetandvastexperienceintheareaofvisualdesign,UI/interactiondesign,front-enddevelopment,andback-enddevelopment.Anyperson(akageneralistorfull-stackdeveloper/designer)whocanfilloneormoreofthese4rolesataprofessionallevelisarareexceptiontotherule.
Pragmatically,youshouldseektobe,orseektohire,anexpertinoneoftheseroles.Thosewhoclaimtooperateatanexpertlevelatoneormoreoftheserolesareexceptionallyrareandmorethanlikelymythical,givenmodernstacks.
GeneralistMyth
23
Imagesource:http://andyshora.com/full-stack-developers.html
GeneralistMyth
24
Front-EndInterviewsQuestionsyoumaygetasked:
10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuiz
Questionsyouask:
Anopensourcelistofdeveloperquestionstoaskprospectiveemployers
Front-Endinterviewquestions
25
Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.
angularjobs.comauthenticjobs.comcareers.stackoverflow.comcss-tricks.com/jobsfrontenddeveloperjob.comglassdoor.comjobs.emberjs.comjobs.github.comweworkremotely.com
Front-EndJobBoards
26
Front-EndSalariesThenationalaverageintheU.Sforafront-enddeveloperis$75k.
Anexperiencedfront-enddeveloperpotentiallycanlivewherevertheywant(i.e.,workremotely)andmakeover$150kayear(visitangel.co,sign-up,reviewfront-endjobsover$150k).
Imagesource:http://intersog.com/blog/chicago-tech-salary-guide-2015/
Front-EndSalaries
27
HowFront-EndDevelopersAreMade
Imagesource:http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg
Howexactlydoesonebecomeafront-enddeveloper?Well,it'scomplicated.Stilltodayyoucan'tgotocollegeandexpecttograduatewithadegreeinfront-endengineering.And,Irarelyhearoformeetfront-enddeveloperswhosufferedthroughwhatislikelyadeprecatedcomputersciencedegreeorgraphicdesigndegreetoendupwritingHTML,CSS,andJavaScriptprofessionally.Infact,mostofthepeopleworkingonthefront-end,eventoday,generallyseemtobeselftaughtandnottraditionallytrainedasaprogrammer.Whyisthisthecase?
Afront-enddeveloperisnotafocusedvisualdesigneroraninteractiondesigner.Designschoolisnotexactlytheplacetohonefront-endskills.Afront-enddeveloperisnotexactlyatraditionallytrainedcomputersciencegraduateeither.Focusingoneitherdoesn'tprepareapersonforfront-enddevelopment.And,infact,followingthetraditionalpathsforeitherinthehighereducationsystemsofAmerica(i.e.,College)canderailapersonfrompotentiallyfindingadoorwayintoapracticewhereactualexperienceisking.Today,ifyouwanttobeafront-enddeveloper,youteachyourselforyoutakewhatislikelyanonaccreditedprogram,course,bootcamp,orclass.
HowFDsAreMade
28
Afront-endengineercraftstheskeletonthattheuserinterfacerestsupon.Theymust,attimes,careasmuchabouttheinteractiondesignastheydoabouttheunderlyingcodethatcreatestheUIinteractions.Therefore,manyinpracticetodaydonotcometofront-endengineeringwithprogrammingskills,but,instead,fromtheotherdirection.Thatis,front-enddevelopmentseemstobefilledwithmoredesignertypesturneddeveloperthanprogrammertypesturnedfront-enddeveloper.Ofcourse,asJavaScripthasgrownup,sohasthedesirebymoretraditionallytrainedprogrammerstobringtheirknowledgetothefront-endpractice.Ifyouarenotaware,front-enddevelopershavenotalwaysbeenconsideredby"real"programmersas,well,programmers.Buttimesareachanging.
Withallofthatsaid,Ibelievethatthepathtoacareerasafront-enddeveloperisverymuchanunknownprocess.WhatIcansayisthattobecomeafront-endengineeronemustknowanduseHTML,CSS,DOM,andJavaScriptatadeeplevelwithoutignoringinteractiondesignortraditionalprogrammingknowhow.Infact,frommyexperience,thebestfront-enddevelopersoftenhaveamasteryunderstandingofinteractiondesignandprogramming,butfromthecontextofthewebplatform(i.e.,browsers,HTML,CSS,DOM,andJavaScript).Andforwhateverreason,thisknowledgeisoftendiscovered/approachednotgiven.Thatistosay,front-endengineeringstillseemsverymuchtobeapracticemadeupofselftaughtpeople,asopposedtoafieldthatcorrespondsdirectlytoaneducationalfocusfromanorganizedandaccreditedhigherlearningsituation.
Ifyouweretosetouttodaytobecomeafront-enddeveloperIwouldlooselystrivetofollowtheprocessoutlinedbelow.Theprocessassumesyouareyourownbestteacher.
1. Learn,roughly,howthewebworks.Makesureyouknowthe"what"and"where"ofDomains,DNS,URLs,HTTP,networks,browsers,servers/hosting,databases,JSON,dataAPIs,HTML,CSS,DOM,andJavaScript.Thegoalistomakesureyoulooselyknowhowitallworkstogetherandexactlywhateachpartisdoing.Focusonthehighleveloutlinesforfront-endarchitectures.Startwithsimplewebpagesandbrieflystudynativewebapplications(akaSPAs).
2. LearnHTML,CSS,Accessibility,andSEO.3. LearnthefundamentalsofUIdesignpatterns,interactiondesign,userexperience
design,andusability.4. Learnthefundamentalsofprogramming5. LearnJavaScript6. LearnJSONanddataAPIs7. LearnCLI/commandline8. Learnthepracticeofsoftwareengineering(i.e.,Applicationdesign/architecture,
templates,Git,testing,monitoring,automating,codequality,developmentmethodologies).
9. Getopinionatedandcustomizeyourtoolboxwithwhatevermakessensetoyourbrain.10. LearnNode.js
HowFDsAreMade
29
Whereyouactuallystopintheprocessiswhatwillseparateafront-endHTML/CSSdeveloperfromanexpertlevelfront-endapplication/JavaScriptdeveloper.
Ashortwordofadviceonlearning.Learntheactualunderlyingtechnologies,beforelearningabstractions.Don'tlearnjQuery,learntheDOM.Don'tlearnSASS,learnCSS.Don'tlearnHAML,learnHTML.Don'tlearnCoffeeScript,learnJavaScript.Don'tlearnHandlebars,learnJavaScriptES6templates.Don'tjustuseBootstrap,learnUIpatterns.Whengettingyourstart,youshouldfearmostthingsthatconcealcomplexity.Abstractsinthewronghandscangivetheappearanceofadvancedskills,whileallthetimehidingthefactthatadeveloperhasaninferiorunderstandingofthebasicsorunderlyingconcepts.Inshort,askilledfront-enddeveloperdoesnottakeabrokencartoamechanic,theyarethemechanic.
Therestofthisbookpointsareadertotheresourcesandtoolstofollowmypreviouslysuggestedprocess.Itisassumedthatyouarenotonlylearning,butalsodoingasyoulearnandinvestigatetools.Somesuggestonlydoing.Whileotherssuggestonlylearningaboutdoing.Isuggestyoufindamixofboththatmatcheshowyourbrainworksanddothat.But,forsure,itisamix!So,don'tjustreadaboutit,doit.Learn,do.Learn,do.Repeatindefinitelybecausethingschangefast.Thisiswhylearningthefundamentals,andnotabstractions,aresoimportant.
Ishouldmentionthatlatelyalotofnon-accreditedfront-endcodeschools/bootcampshaveemerged.Theseavenuesofbecomingafront-enddeveloperareteacherdirectedinclassroom(virtualandphysical)courses,whichfollowamoretraditionalstyleoflearningfromanofficialinstructor(i.e.,syllabus,test,quizzes,projects,teamprojects,grades,etc.).Ihavemoretosayabouttheseinstitutionsinthedirectlearningsectionofthishandbook.Inbrief,thisistheweb,everythingyouneedtolearnisonthewebforthetaking(costinglittletonothing).However,ifyouneedsomeonetotellyouhowtotakewhatisactuallyfree,andholdyouaccountableforlearningit,youmightconsideranorganizedcourse.Otherwise,Iamnotawareofanyotherprofessionthatispracticallyfreeforthetakingwithaninternetconnectionandaburningdesireforknowledge.
IfyouwanttogetstartedimmediatelyI'dsuggestthefollowinggeneraloverviewsofthepracticeoffront-enddevelopment:
FrontendGuidelines[read]Beingawebdeveloper[read]IsobarFront-EndCodeStandards[read]WebFundamentals[read]Front-EndCurriculum[read]freeCodeCamp[interact]PlanningaFront-endJSApplication[watch]So,YouWanttobeaFront-EndEngineer[watch]FrontEndWebDevelopmentCareerKickstart[watch][$]
HowFDsAreMade
30
FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]IntroductiontoWebDevelopment[watch][$]FoundationsofFront-EndWebDevelopment[watch][$]LeanFront-EndEngineering[watch][$]ABaselineforFront-End[JS]Developers:2015[read]LearnFrontEndWebDevelopment[watch][$]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]
HowFDsAreMade
31
PartII:LearningParttwoidentifiesself-directed(i.e.,atyourownpacewhenyouwant)anddirected(i.e.,formalclassroomspecifictimesanddates)resourcesforlearningtobecomeafront-enddeveloper.
Notethatjustbecausealearningresourceislisted,oracategoryoflearningisdocumented,Iamnotsuggestingthatafront-enddeveloperlearneverything.Thatwouldbeabsurd.Chooseyourownsliceofexpertisewithintheprofession.I'mprovidingthepossibilitiesofwhatcouldbemasteredinthefield.
PartII:LearningFront-EndDev
32
SelfDirectedLearningThissectionfocusesonfreeandpaidresources(videotraining,books,etc.)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.
Theresourcesincludefreematerialandpaidmaterial.Paidmaterialwillbeindicatedwith[$].
Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandvideotraining.
Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:
codecademy.comcodeschool.comegghead.ioeventedmind.comFrontendMastersKhanAcademylaracasts.comlynda.com[careful,qualityvaries]mijingo.compluralsight.com[careful,qualityvaries]TagtreeTreehousetutsplus.comUdacity[careful,qualityvaries]
SelfDirectedLearning
33
LearnInternet/WebTheInternetisaglobalsystemofinterconnectedcomputernetworksthatusetheInternetprotocolsuite(TCP/IP)tolinkseveralbilliondevicesworldwide.Itisanetworkofnetworksthatconsistsofmillionsofprivate,public,academic,business,andgovernmentnetworksoflocaltoglobalscope,linkedbyabroadarrayofelectronic,wireless,andopticalnetworkingtechnologies.TheInternetcarriesanextensiverangeofinformationresourcesandservices,suchastheinter-linkedhypertextdocumentsandapplicationsoftheWorldWideWeb(WWW),electronicmail,telephony,andpeer-to-peernetworksforfilesharing.
—Wikipedia
HowDoestheInternetwork-W3C[read]HowDoestheInternetWork?-StanfordPaper[read]HowtheInternetWorks[watch]HowtheInternetWorksin5Minutes[watch]HowtheWebWorks[watch][$]WhatIstheInternet?Or,"YouSayTomato,ISayTCP/IP"[read]
LearnInternet/Web
34
LearnWebBrowsersAwebbrowser(commonlyreferredtoasabrowser)isasoftwareapplicationforretrieving,presenting,andtraversinginformationresourcesontheWorldWideWeb.AninformationresourceisidentifiedbyaUniformResourceIdentifier(URI/URL)andmaybeawebpage,image,videoorotherpieceofcontent.Hyperlinkspresentinresourcesenableuserseasilytonavigatetheirbrowserstorelatedresources.AlthoughbrowsersareprimarilyintendedtousetheWorldWideWeb,theycanalsobeusedtoaccessinformationprovidedbywebserversinprivatenetworksorfilesinfilesystems.
—Wikipedia
Themostcommonlyusedbrowsers(onanydevice)are:
1. Chrome(engine:Blink+V8)2. Firefox(engine:Gecko+SpiderMonkey)3. InternetExplorer(engine:Trident+Chakra)4. Safari(engine:Webkit+SquirrelFish)
Imagesource:http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar
EvolutionofBrowsers&WebTechnologies(i.e.,APIs)
LearnWebBrowsers
35
evolutionoftheweb.com[read]Timelineofwebbrowsers[read]
TheMostCommonlyUsedHeadlessBrowserAre:
PhantomJS(engine:Webkit+SquirrelFish)SlimerJS(engine:Gecko+SpiderMonkey)TrifleJS(engine:Trident+Chakra)
HowBrowsersWork
20ThingsILearnedAboutBrowsersandtheWeb[read]FastCSS:HowBrowsersLayOutWebPages[read]HowBrowsersWork:Behindthescenesofmodernwebbrowsers[read]SoHowDoestheBrowserActuallyRenderaWebsite[watch]WhatEveryFrontendDeveloperShouldKnowAboutWebpageRendering[read]
Imagesource:http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
OptimizingforBrowsers:
BrowserRenderingOptimization[watch]WebsitePerformanceOptimization[watch]
BrowserSecurity
BrowserSecurityHandbook[read]FrontendSecurity[watch]HTML5SecurityCheatsheet[read]
LearnWebBrowsers
36
SecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheTangledWeb:AGuidetoSecuringModernWebApplicationsread
ComparingBrowsers
ComparisonofWebBrowsers[read]
DevelopingforBrowsers
Inthepast,afront-enddeveloperspentalotoftimemakingcodeworkinseveraldifferentbrowsers.Thiswasonceabiggerissuethanitistoday,unlessyouhavetowritecodeforolderbrowsers(i.e.,<IE8).Thisstillremainsanissuetoday,justnotonethatdemandssomuchofthefront-enddeveloperstimeandbraincycles.Thefactofthematterismodernabstractions(e.g.,jQuery,pre-processors,transpilers)havedoneawaywithalotofbrowserinconsistencyissues.
EvergreenBrowsers
Thelatestversionsofbrowsersareconsideredevergreenbrowsers.Thatis,intheorytheyaresupposetoautomaticallyupdatethemselvessilentlywithoutpromptingtheuser.Thismovetowardsselfupdatingbrowsershasbeeninreactiontotheslowprocessofeliminatingolderbrowsers.Olderbrowsersarecomplicatedtodevelopforgiventheirdeviationsfromthecommonalitiesbetweenmodernbrowsers(i.e.,newspecificationsandthisrateofchange).
PickingaBrowser
Asoftoday,mostfront-enddevelopersuseChromeandthetoolsavailabletoadeveloper,"ChromeDevTools".However,allofthebrowsersofferaflavorofdevelopertools.Pickingonetousefordevelopmentisasubjectivematter.Themoreimportantissueisknowingwhichbrowsersyouhavetosupportandtestingineachasyoudevelop.Selectwhicheverbrowsermakessensetoyourbrainandgetsthejobdone.IsuggestusingChromesimplybecausethedevelopertoolsareconsistentlyimprovingandatthistimecontainthemostrobustfeatures.
BrowserHacks
browserhacks.com[read]
LearnWebBrowsers
37
LearnDomainNameSystem(akaDNS)TheDomainNameSystem(DNS)isahierarchicaldistributednamingsystemforcomputers,services,oranyresourceconnectedtotheInternetoraprivatenetwork.Itassociatesvariousinformationwithdomainnamesassignedtoeachoftheparticipatingentities.Mostprominently,ittranslatesdomainnames,whichcanbeeasilymemorizedbyhumans,tothenumericalIPaddressesneededforthepurposeofcomputerservicesanddevicesworldwide.TheDomainNameSystemisanessentialcomponentofthefunctionalityofmostInternetservicesbecauseitistheInternet'sprimarydirectoryservice.
—Wikipedia
Imagesource:http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg
DNSExplained[watch]HowDNSWorks[read]
LearnDNS
38
LearnDNS
39
LearnHTTP/Networks(IncludingCORS&WebSockets)
HTTP-TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.
—Wikipedia
CORS-Cross-originresourcesharing(CORS)isamechanismthatallowsrestrictedresources(e.g.,fonts)onawebpagetoberequestedfromanotherdomainoutsidethedomainfromwhichtheresourceoriginated.
—Wikipedia
WebSockets-WebSocketisaprotocolprovidingfull-duplexcommunicationchannelsoverasingleTCPconnection.TheWebSocketprotocolwasstandardizedbytheIETFasRFC6455in2011,andtheWebSocketAPIinWebIDLisbeingstandardizedbytheW3C.
—Wikipedia
HTTP
HighPerformanceBrowserNetworking:WhatEveryWebDeveloperShouldKnowAboutNetworkingandWebPerformance[read]HTTP/2FrequentlyAskedQuestions[read]HTTPFundamentals[watch][$]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part1[read]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part2[read]HTTPSuccinctly[read]
CORS
CORSinAction[read][$]HTTPAccessControl(CORS)[read]HTTPStatusCodesin60Seconds[watch]
WebSockets
ConnecttheWebWithWebSockets[watch]WebSocket:LightweightClient-ServerCommunications[read][$]
LearnHTTP/Networks
40
LearnWebHostingAwebhostingserviceisatypeofInternethostingservicethatallowsindividualsandorganizationstomaketheirwebsiteaccessibleviatheWorldWideWeb.Webhostsarecompaniesthatprovidespaceonaserverownedorleasedforusebyclients,aswellasprovidingInternetconnectivity,typicallyinadatacenter.WebhostscanalsoprovidedatacenterspaceandconnectivitytotheInternetforotherserverslocatedintheirdatacenter,calledcolocation,alsoknownasHousinginLatinAmericaorFrance.
—Wikipedia
Imagesource:http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg
GeneralLearning:
UltimateGuidetoWebHosting[read]WebHostingBeginnerGuide[read]WebHostingforDummies[read][$]
LearnWebHosting
42
LearnGeneralFront-EndDevelopmentGeneralLearning:
ABaselineforFront-End[JS]Developers:2015[read]Beingawebdeveloper[read]FoundationsofFront-EndWebDevelopment[watch][$]freeCodeCamp[interact]Front-EndCurriculum[read]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]FrontEndWebDevelopmentCareerKickstart[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]FrontendGuidelines[read]IntroductiontoWebDevelopment[watch][$]IsobarFront-EndCodeStandards[read]LeanFront-EndEngineering[watch][$]LearnFrontEndWebDevelopment[watch][$]PlanningaFront-EndJSApplication[watch]So,YouWanttoBeaFront-EndEngineer[watch]WebFundamentals[read]
GeneralFront-EndNewsletters,NewsOutlets,&Podcasts:
TheBigWebShowFreshBrewedFrontendFront-EndDevWeeklyfrontendfront.comMobileWebWeeklyOpenWebPlatformDailyDigestO'ReillyWebPlatformRadarshoptalkshow.comTheWebAheadTheWebPlatformPodcastwebtoolsweekly.com
LearnGeneralFront-EndDev
43
LearnUserInterface/InteractionDesignUserInterfaceDesign-Userinterfacedesign(UI)oruserinterfaceengineeringisthedesignofuserinterfacesformachinesandsoftware,suchascomputers,homeappliances,mobiledevices,andotherelectronicdevices,withthefocusonmaximizingtheuserexperience.Thegoalofuserinterfacedesignistomaketheuser'sinteractionassimpleandefficientaspossible,intermsofaccomplishingusergoals(user-centereddesign).
—Wikipedia
InteractionDesignPattern-Adesignpatternisaformalwayofdocumentingasolutiontoacommondesignproblem.TheideawasintroducedbythearchitectChristopherAlexanderforuseinurbanplanningandbuildingarchitecture,andhasbeenadaptedforvariousotherdisciplines,includingteachingandpedagogy,developmentorganizationandprocess,andsoftwarearchitectureanddesign.
—Wikipedia
UserExperienceDesign-UserExperienceDesign(UXDorUEDorXD)istheprocessofenhancingusersatisfactionbyimprovingtheusability,accessibility,andpleasureprovidedintheinteractionbetweentheuserandtheproduct.Userexperiencedesignencompassestraditionalhuman–computerinteraction(HCI)design,andextendsitbyaddressingallaspectsofaproductorserviceasperceivedbyusers.
—Wikipedia
Human–ComputerInteraction-Human–computerinteraction(HCI)researchesthedesignanduseofcomputertechnology,focusingparticularlyontheinterfacesbetweenpeople(users)andcomputers.ResearchersinthefieldofHCIbothobservethewaysinwhichhumansinteractwithcomputersanddesigntechnologiesthatletshumansinteractwithcomputersinnovelways.
—Wikipedia
MinimallyI'dsuggestreadingthefollowingcanonicaltextsonthemattersoonecanbuildproperuserinterfaces.
AboutFace:TheEssentialsofInteractionDesign[read][$]DesigningInterfaces[read][$]Don'tMakeMeThink,Revisited:ACommonSenseApproachtoWebUsability[read][$]
LearnUI/InteractionDesign
44
LearnUI/InteractionDesign
45
LearnHTML&CSSHTML-HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.
—Wikipedia
CSS-CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.
—Wikipedia
Likentoconstructingahouse,onemightconsiderHTMLtheframingandCSStobethepainting&decorating.
GeneralLearning:
AbsoluteCenteringinCSS[read]codecademy.comHTML&CSS[interact]CSSPositioning[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]HTMLandCSS:DesignandBuildWebsites[read][$]HTMLDocumentFlow[watch][$]HTMLMastery:Semantics,Standards,andStyling[read][$]IntrotoHTML/CSS:Makingwebpages[watch]LearntoCodeHTML&CSS[read]LearnCSSLayout[read]SemanticHTML:HowtoStructureWebPages[watch]SolidHTMLFormStructure[watch]UnderstandingtheCSSBoxModel[watch]
Mastering:
LearnHTML&CSS
46
ACompleteGuidetoFlexbox[read]atozcss.com[watch]CSSDiner[interact]CSSSelectorsfromCSS4tillCSS1[read]CSS3In-Depth[watch][$]WhattheFlexbox?!ASimple,Free20VideoCourseThatWillHelpYouMasterCSSFlexbox[watch]
References/Docs:
CSSTriggers...aGameofLayout,Paint,andCompositecssvalues.comHTMLAttributeReferencehtmlelement.infoMDNCSSReferenceMDNHTMLElementReference
Glossary:
CSSGlossary-ProgrammingReferenceforCSSCoveringComments,Properties,andSelectorsHTMLGlossaryProgrammingReferenceforHTMLelements
Standards/Specifications:
AllW3CCSSSpecificationsAllW3CHTMLSpecCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationTheElementsofHTMLfromtheLivingStandardGlobalAttributesTheHTMLSyntaxfromtheLivingStandardHTML5fromW3C:5thmajorrevisionofthecorelanguageoftheWorldWideWebSelectorsLevel3
ArchitectingCSS:
AtomicDesign[read]OOCSS[read]SMACSS[read][$]SMACSS[watch][$]
AuthoringConventions:
cssguidelin.es[read]
LearnHTML&CSS
47
FrontendGuidelinesQuestionnaire[read]GoogleHTML/CSSStyleGuideIdiomaticCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]
HTML/CSSNewsletters:
CSSWeeklyHTML5Weekly
LearnHTML&CSS
48
LearnSearchEngineOptimizationSearchengineoptimization(SEO)istheprocessofaffectingthevisibilityofawebsiteorawebpageinasearchengine'sunpaidresults—oftenreferredtoas"natural,""organic,"or"earned"results.Ingeneral,theearlier(orhigherrankedonthesearchresultspage),andmorefrequentlyasiteappearsinthesearchresultslist,themorevisitorsitwillreceivefromthesearchengine'susers.SEOmaytargetdifferentkindsofsearch,includingimagesearch,localsearch,videosearch,academicsearch,newssearchandindustry-specificverticalsearchengines.
—Wikipedia
GeneralLearning:
GoogleSearchEngineOptimizationStarterGuide[read]SEOFundamentalsFromDavidBooth[watch][$]SEOFundamentalsFromPaulWilson[watch][$]SEOTutorialforBeginners2015[read]SEOforWebDesigners[watch][$]
LearnSEO
49
LearnJavaScriptJavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.
—Wikipedia
GeneralLearning:
codecademy.comJavaScript[interact]CrockfordonJavaScript-Volume1:TheEarlyYears[watch]CrockfordonJavaScript-Chapter2:AndThenThereWasJavaScript[watch]CrockfordonJavaScript-ActIII:FunctiontheUltimate[watch]CrockfordonJavaScript-EpisodeIV:TheMetamorphosisofAjax[watch]CrockfordonJavaScript-Part5:TheEndofAllThings[watch]CrockfordonJavaScript-Scene6:Loopage[watch]JavaScriptEnlightenment[read]JavaScriptModules[read]JavaScriptPatterns[read][$]JS.Next:ES6[watch][$]ThePrinciplesofObject-OrientedJavaScript[read][$]ProfessionalJavaScriptforWebDevelopers[read][$]SettingupES6SpeakingJavaScript[read]UnderstandingECMAScript6[read]YouDon'tKnowJS:Up&Going[read]
Mastering:
AdvancedJavaScript[watch][$]ECMA-262byDmitrySoshnikov[read]EloquentJavaScript[read]Gentleexplanationof'this'keywordinJavaScript[read]
LearnJavaScript
50
FunctionalJavaScript:IntroducingFunctionalProgrammingwithUnderscore.js[read][$]HighPerformanceJavaScript(BuildFasterWebApplicationInterfaces)[read][$]JavaScriptAllongé[read][$]JavaScriptwithPromises[read][$]JavaScriptRegularExpressionEnlightenment[read]TheGoodPartsofJavaScriptandtheWeb[watch][$]Test-DrivenJavaScriptDevelopment[read][$]UsingRegularExpressions[watch][$]YouDon'tKnowJS:Async&Performance[read]YouDon'tKnowJS:ES6&Beyond[read]YouDon'tKnowJS:Scope&Closures[read]YouDon'tKnowJS:this&ObjectPrototypes[read]YouDon'tKnowJS:Types&Grammar[read]
References/Docs:
MDNJavaScriptReference
Glossary/Encyclopedia/Jargon:
TheJavaScriptEncyclopediaJavaScriptGlossarySimplifiedJavaScriptJargon
Standards/Specifications:
ECMAScript®2015LanguageSpecificationStatus,Process,andDocumentsforECMA262
Style:
AirbnbJavaScriptStyleGuideNode.jsStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScript
JavaScriptNewsletters,News,&Podcasts:
EchoJSFiveJSJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com
LearnJavaScript
51
LearnJavaScript
52
LearnWebAnimationGeneralLearning:
AdvancedSVGAnimation[$][watch]AdventuresinWebAnimations[$][watch]AnimatingWithSnap.svg[$][watch]AnimationinCSS3andHTML5[$][watch]CreateAnimationsinCSS[read&watch]CSSAnimationintheRealWorld[$][watch]FoundationHTML5AnimationwithJavaScript[$][read]LearntoCreateAnimationsinJavaScript[read&watch]StateoftheAnimation2015[watch]WebAnimationusingJavaScript:Develop&Design(DevelopandDesign)[$][read]
Standards/Specifications:
WebAnimations
LearnWebAnimation
53
LearnDOM,BOM,&jQueryDOM-TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).
—Wikipedia
BOM-TheBrowserObjectModel(BOM)isabrowser-specificconventionreferringtoalltheobjectsexposedbythewebbrowser.UnliketheDocumentObjectModel,thereisnostandardforimplementationandnostrictdefinition,sobrowservendorsarefreetoimplementtheBOMinanywaytheywish.
—Wikipedia
jQuery-jQueryisacross-platformJavaScriptlibrarydesignedtosimplifytheclient-sidescriptingofHTML.jQueryisthemostpopularJavaScriptlibraryinusetoday,withinstallationon65%ofthetop10millionhighest-traffickedsitesontheWeb.jQueryisfree,open-sourcesoftwarelicensedundertheMITLicense.
—Wikipedia
Theidealpath,butcertainlythemostdifficult,wouldbetofirstlearnJavaScript,thentheDOM,thenjQuery.However,dowhatmakessensetoyourbrain.Mostfront-enddeveloperslearnaboutJavaScriptandthenDOMbywayoffirstlearningjQuery.Whateverpathyoutake,justmakesureJavaScript,thenDOM,orjQuerydon'tbecomeablackbox.
GeneralLearning:
Codecademy.comjQuery[watch]TheDocumentObjectModel[read]HTML/JS:MakingWebpagesInteractive[watch]HTML/JS:MakingWebpagesInteractivewithjQuery[watch]jQueryEnlightenment[read]
Mastering:
AdvancEDDOMScripting:DynamicWebDesignTechniques[read][$]AdvancedJSFundamentalstojQuery&PureDOMScripting[watch][$]
LearnDOM,BOM&jQuery
54
DouglasCrockford:AnInconvenientAPI-TheTheoryoftheDOM[watch]DOMEnlightenment[read][$]orreadonlineforfreeFixingCommonjQueryBugs[watch][$]jQuery-FreeJavaScript[watch][$]jQueryTipsandTricks[watch][$]
References/Docs:
jQueryDocsMDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)
Standards/Specifications:
DocumentObjectModel(DOM)Level3EventsSpecificationDocumentObjectModel(DOM)TechnicalReportsDOMLivingStandardW3CDOM4
LearnDOM,BOM&jQuery
55
LearnWebFonts&IconsWebtypographyreferstotheuseoffontsontheWorldWideWeb.WhenHTMLwasfirstcreated,fontfacesandstyleswerecontrolledexclusivelybythesettingsofeachWebbrowser.TherewasnomechanismforindividualWebpagestocontrolfontdisplayuntilNetscapeintroducedthe<font>tagin1995,whichwasthenstandardizedintheHTML3.2specification.However,thefontspecifiedbythetaghadtobeinstalledontheuser'scomputerorafallbackfont,suchasabrowser'sdefaultsans-seriformonospacefont,wouldbeused.ThefirstCascadingStyleSheetsspecificationwaspublishedin1996andprovidedthesamecapabilities.
TheCSS2specificationwasreleasedin1998andattemptedtoimprovethefontselectionprocessbyaddingfontmatching,synthesisanddownload.Thesetechniquesdidnotgainmuchuse,andwereremovedintheCSS2.1specification.However,InternetExploreraddedsupportforthefontdownloadingfeatureinversion4.0,releasedin1997.FontdownloadingwaslaterincludedintheCSS3fontsmodule,andhassincebeenimplementedinSafari3.1,Opera10andMozillaFirefox3.5.ThishassubsequentlyincreasedinterestinWebtypography,aswellastheusageoffontdownloading.
—Wikipedia
GeneralLearning:
AComprehensiveGuidetoFontLoadingStrategies[read]BeautifulWebTypeaShowcaseoftheBestTypefacesfromtheGoogleWebFontsDirectory[read]QuickGuidetoWebfontsvia@font-face[read]ResponsiveTypography[watch][$]TypographyfortheWeb[watch][$]
LearnWebFonts
56
LearnAccessibilityAccessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.,unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).
Accessibilitycanbeviewedasthe"abilitytoaccess"andbenefitfromsomesystemorentity.Theconceptfocusesonenablingaccessforpeoplewithdisabilities,orspecialneeds,orenablingaccessthroughtheuseofassistivetechnology;however,researchanddevelopmentinaccessibilitybringsbenefitstoeveryone.
Accessibilityisnottobeconfusedwithusability,whichistheextenttowhichaproduct(suchasadevice,service,orenvironment)canbeusedbyspecifieduserstoachievespecifiedgoalswitheffectiveness,efficiencyandsatisfactioninaspecifiedcontextofuse.
Accessibilityisstronglyrelatedtouniversaldesignwhichistheprocessofcreatingproductsthatareusablebypeoplewiththewidestpossiblerangeofabilities,operatingwithinthewidestpossiblerangeofsituations.Thisisaboutmakingthingsaccessibletoallpeople(whethertheyhaveadisabilityornot).
—Wikipedia
GeneralLearning:
FoundationsofUX:Accessibility[watch][$]HowHTMLelementsaresupportedbyscreenreaders[read]IntroductiontoWebAccessibility-GoogleOpenOnlineEducation[watch]IntroductiontoWebAccessibility-WAI[read]UniversalDesignforWebApplications:WebApplicationsThatReachEveryone[read][$]WebAccessibility:GettingStarted[watch][$]AWebforEveryone[read][$]
Standards/Specifications:
AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus
LearnAccessibility
57
LearnAccessibility
58
LearnWeb/BrowserAPIsTheBOMandtheDOMarenottheonlybrowserAPIsthataremadeavailableonthewebplatforminsideofbrowsers.EverythingthatisnotspecificallytheDOMorBOM,butaninterfaceforprogrammingthebrowsercouldbeconsideredaweborbrowserAPI(tragicallyinthepastsomeoftheseAPIshavebeencalledHTML5APIswhichconfusestheirownspecifics/standardizewiththeactualHTML5specificationspecifytheHTML5markuplanguage).NotethatweborbrowserAPIsdoincludedeviceAPIs(e.g.,Navigator.getBattery())thatareavailablethroughthebrowserontabletandphonesdevices.
Imagesource:http://www.evolutionoftheweb.com/
Youshouldbeawareofandlearn,whereappropriate,web/browserAPIs.AgoodtooltousetofamiliarizeoneselfwithalloftheseAPIswouldbetoinvestigatetheHTML5test.comresultsforthe5mostcurrentbrowsers.
Learn:
LearnWeb/BrowserAPIs
59
DiveIntoHTML5[read]ProHTML5Programming[read]
LearnAudio:
AddSoundtoYourSiteWithWebAudio[watch]FunWithWebAudio[watch]HTML5Canvas[read]
LearnCanvas:
WebAudioAPI[read]
Additionally,MDNhasagreatdealofinformationaboutweb/browserAPIs.
MDNWebAPIReferenceMDNWebAPIsInterfaceReference-AllInterfaces,ArrangedAlphabeticallyMDNWebAPI-ListsDeviceAccessAPIsandOtherAPIsUsefulforApplications
KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.
InadditiontoMDN,youmightfindthefollowingresourceshelpful:
TheHTML5JavaScriptAPIIndexHTML5Overviewplatform.html5.org
LearnWeb/BrowserAPIs
60
LearnJSON(JavaScriptObjectNotation)JSON,(canonicallypronouncedsometimesJavaScriptObjectNotation),isanopenstandardformatthatuseshuman-readabletexttotransmitdataobjectsconsistingofattribute–valuepairs.Itistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).
AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.
TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.
—Wikipedia
GeneralLearning:
IntroductiontoJavaScriptObjectNotation:ATo-the-PointGuidetoJSON[read][$]json.com[read]WhatisJSON[watch]
References/Docs:
json.org[read]
Standards/Specifications:
ECMA-404TheJSONDataInterchangeFormatRFC7159TheJavaScriptObjectNotation(JSON)DataInterchangeFormat
Architecting:
JSONAPI
LearnJSON
61
LearnJSTemplatesAJavaScripttemplateistypicallyused,butnotalwayswithaMV*solutiontoseparatepartsoftheview(i.e.,theUI)fromthelogicandmodel(i.e.,thedataorJSON).
NotethatJavaScript2015(akaES6)hasanativetemplatingmechanismcalled"Templatesstrings".
InstantHandlebars.js[read][$]JavaScriptTemplatingwithHandlebars[watch][$]LearnHandlebarsin10MinutesorLess[read]
LearnJSTemplates
62
LearnStaticSiteGeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.,ruby,php,python,nodeJS,etc.),producesstaticHTMLfilesfromstatictext/data+templatesthatisindentingtobesentfromaservertotheclientstaticallywithoutadynamicnature.
GeneralLearning:
StaticSiteGenerators[read]
LearnStaticSiteGenerators
63
LearnFront-EndApplicationArchitectureBuildanAppwithReactandAmpersand[watch][$]BuildingModernSingle-PageWebApplications[watch][$]EloquentJavaScript:Modules[read]AFieldGuidetoStaticApps[read]FieldGuidetoWebApplications[read]FrontendGuidelinesQuestionnaire[read]HumanJavaScript[read]JavaScriptApplicationDesign[read][$]NicholasZakas:ScalableJavaScriptApplicationArchitecture[watch]OrganizingJavaScriptFunctionality[watch][$]PatternsforLarge-ScaleJavaScriptApplicationArchitecture[read]ProgrammingJavaScriptApplications[read]Terrific[read]UIArchitecture[watch][$]WebUIArchitecture[watch][$]
LearnFront-EndAppArchitecture
64
LearnInterface/APIDesignData(MostLikelyJSON)APIs
BuildAPIsYouWon'tHate[$][read]JSONAPI[read]
JavaScriptAPIs
DesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]
LearnInterface/APIDesign
65
LearnWebDeveloperToolsWebdevelopmenttoolsallowwebdeveloperstotestanddebugtheircode.TheyaredifferentfromwebsitebuildersandIDEsinthattheydonotassistinthedirectcreationofawebpage,rathertheyaretoolsusedfortestingtheuserfacinginterfaceofawebsiteorwebapplication.
Webdevelopmenttoolscomeasbrowseradd-onsorbuiltinfeaturesinwebbrowsers.Themostpopularwebbrowserstodaylike,GoogleChrome,Firefox,Opera,InternetExplorer,andSafarihavebuiltintoolstohelpwebdevelopers,andmanyadditionaladd-onscanbefoundintheirrespectiveplugindownloadcenters.
Webdevelopmenttoolsallowdeveloperstoworkwithavarietyofwebtechnologies,includingHTML,CSS,theDOM,JavaScript,andothercomponentsthatarehandledbythewebbrowser.Duetotheincreasingdemandfromwebbrowserstodomorepopularwebbrowsershaveincludedmorefeaturesgearedfordevelopers.
—Wikipedia
Whilemostbrowserscomeequippedwithwebdevelopertools,theChromedevelopertoolsarecurrentlythemosttalkedaboutandwidelyusedtoolsavailable.
I'dsuggestlearningandusingtheChromewebdevelopertools,simplybecausethebestresourcesforlearningwebdevelopertoolsrevolvesaroundChromeDevTools.
LearnChromeWebDeveloperTools
ChromeDeveloperTools[watch][$]ExploreandMasterChromeDevToolsUsingTheChromeDeveloperTools[watch][$]
ChromeWebDeveloperToolsDocs:
CommandLineAPIReferenceKeyboard&UIShortcutsReferencePer-PanelDocumentationSettings
News/Newsletters/Podcasts/Tips:
DevTips
LearnWebDevTools
66
LearnWebDevTools
67
LearnCommandLineAcommand-lineinterfaceorcommandlanguageinterpreter(CLI),alsoknownascommand-lineuserinterface,consoleuserinterface,andcharacteruserinterface(CUI),isameansofinteractingwithacomputerprogramwheretheuser(orclient)issuescommandstotheprogramintheformofsuccessivelinesoftext(commandlines).
—Wikipedia
GeneralLearning:
TheBashGuide[read]Codecademy:LearntheCommandLine[watch]TheCommandLineCrashCourse[read]CommandLinePowerUser[watch]LearnEnoughCommandLinetoBeDangerous[read][freeto$]MeettheCommandLine[watch][$]
Mastering:
AdvancedCommandLineTechniques[watch][$]
LearnCommandLine
68
LearnNode.jsNode.jsisanopen-source,cross-platformruntimeenvironmentfordevelopingserver-sidewebapplications.Node.jsapplicationsarewritteninJavaScriptandcanberunwithintheNode.jsruntimeonOSX,MicrosoftWindows,Linux,FreeBSD,NonStop,[3]IBMAIX,IBMSystemzandIBMi.ItsworkishostedandsupportedbytheNode.jsFoundation,[4]acollaborativeprojectatLinuxFoundation.[5]
Node.jsprovidesanevent-drivenarchitectureandanon-blockingI/OAPIdesignedtooptimizeanapplication'sthroughputandscalabilityforreal-timewebapplications.ItusesGoogleV8JavaScriptenginetoexecutecode,andalargepercentageofthebasicmodulesarewritteninJavaScript.Node.jscontainsabuilt-inlibrarytoallowapplicationstoactasawebserverwithoutsoftwaresuchasApacheHTTPServer,NginxorIIS.
—Wikipedia
GeneralLearning:
TheArtofNode[read]IntroductiontoNode.js[watch][$]IntroductiontoNode.jsfromEventedMind[watch][$]io.jsandNode.jsNext:GettingStarted[watch][$]Learnallthenodes[watch]TheNodeBeginnerBook[read][$]Nodeschool.io[code]Node.jsBasics[watch][$]Node.jsinPractice[read][$]Real-TimeWebwithNode.js[watch][$]
LearnNode.js
69
LearnModuleLoadingandDependencyManagementGeneralLearning:
browserify-handbook[read]ChooseES6modulesToday![read]CreatingJavaScriptModuleswithBrowserify[watch][$]StartyourownJavaScriptlibraryusingwebpackandES6WebpackFundamentals[watch][$]
References/Docs:
browserifysystem.jswebpack
LearnModuleLoader
70
LearnPackageManagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.
—Wikipedia
GeneralLearning:
BowerFundamentals[watch][$]TheMystical&MagicalSemVerRangesUsedBynpm&Bower[read]npmBasics[watch][$]ThenpmBook[read]PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloper[read]UpandRunningwithNPM,theNodePackageManager[watch][$]
References/Docs:
bowerjspm.ionpm
LearnPackageManagers
71
LearnVersionControlAcomponentofsoftwareconfigurationmanagement,versioncontrol,alsoknownasrevisioncontrolorsourcecontrol,isthemanagementofchangestodocuments,computerprograms,largewebsites,andothercollectionsofinformation.Changesareusuallyidentifiedbyanumberorlettercode,termedthe"revisionnumber,""revisionlevel,"orsimply"revision."Forexample,aninitialsetoffilesis"revision1."Whenthefirstchangeismade,theresultingsetis"revision2,"andsoon.Eachrevisionisassociatedwithatimestampandthepersonmakingthechange.Revisionscanbecompared,restored,andwithsometypesoffiles,merged.
—Wikipedia
ThecurrentmodernsolutionforversioncontrolisGit.Learnit!
GeneralLearning:
codeschool.com[interact]GettingGitRight[read]GitFundamentals[watch][$]ProGit[read]Ry'sGitTutorial[read]
Mastering:
AdvancedGitTutorials[read]ProGit[read]LearnGitBranching[interact]
References/Docs:
https://git-scm.com/doc
LearnVersionControl
72
LearnBuildandTaskAutomationBuildautomationistheprocessofautomatingthecreationofasoftwarebuildandtheassociatedprocessesincluding:compilingcomputersourcecodeintobinarycode,packagingbinarycode,andrunningautomatedtests.
—Wikipedia
GeneralLearning:
GettingStartedwithGulp[read][$]GulpBasics[watch][$]JavaScriptBuildAutomationWithGulp.js[watch][$]LearningGulp-GettingStartedwiththeFrontEndFactory[read]RapidGulp[watch][$]UsingnpmasaTaskRunner[watch][$]
References/Docs:
Gulp
Gulpisgreat.However,youmightonlyneednpmrun.Beforeturningtoadditionalcomplexityinyourapplicationstackaskyourselfifnpmruncandothejob.Ifyouneedmore,useboth.
Read:
BuildToolsvsnpmScripts:WhyNotBoth?GiveGrunttheBoot!AGuidetoUsingnpmasaBuildToolHowtoUsenpmasaBuildToolTaskAutomationwithnpmRunUsingnpmasaBuildSystemforYournextProject
LearnBuild&TaskAutomation
73
LearnSitePerformanceOptimizationWebperformanceoptimization,WPO,orwebsiteoptimizationisthefieldofknowledgeaboutincreasingthespeedinwhichwebpagesaredownloadedanddisplayedontheuser'swebbrowser.Withtheaverageinternetspeedincreasingglobally,itisfittingforwebsiteadministratorsandwebmasterstoconsiderthetimeittakesforwebsitestorenderforthevisitor.
—Wikipedia
GeneralLearning:
BrowserRenderingOptimization[watch]EvenFasterWebSites:PerformanceBestPracticesforWebDevelopers[read][$]HighPerformanceWebSites:EssentialKnowledgeforFront-EndEngineers[read][$]JavaScriptPerformanceRocks[read]PageSpeedInsightsRules[read]PerformanceCalendar[read]perf.rocksUsingWebPageTest[read][$]WebPerformanceDaybookVolume2[read][$]WebPerformance:TheDefinitiveGuide[read]WebsitePerformance[watch][$]WebsitePerformanceOptimization[watch]
LearnSitePerformanceOptimization
74
LearnJSTestingUnitTesting-Incomputerprogramming,unittestingisasoftwaretestingmethodbywhichindividualunitsofsourcecode,setsofoneormorecomputerprogrammodulestogetherwithassociatedcontroldata,usageprocedures,andoperatingprocedures,aretestedtodeterminewhethertheyarefitforuse.Intuitively,onecanviewaunitasthesmallesttestablepartofanapplication.
—Wikipedia
FunctionalTesting-Functionaltestingisaqualityassurance(QA)processandatypeofblackboxtestingthatbasesitstestcasesonthespecificationsofthesoftwarecomponentundertest.Functionsaretestedbyfeedingtheminputandexaminingtheoutput,andinternalprogramstructureisrarelyconsidered(notlikeinwhite-boxtesting).Functionaltestingusuallydescribeswhatthesystemdoes.
—Wikipedia
IntegrationTesting-Integrationtesting(sometimescalledintegrationandtesting,abbreviatedI&T)isthephaseinsoftwaretestinginwhichindividualsoftwaremodulesarecombinedandtestedasagroup.Itoccursafterunittestingandbeforevalidationtesting.Integrationtestingtakesasitsinputmodulesthathavebeenunittested,groupstheminlargeraggregates,appliestestsdefinedinanintegrationtestplantothoseaggregates,anddeliversasitsoutputtheintegratedsystemreadyforsystemtesting.
—Wikipedia
GeneralLearning:
Front-EndFirst:TestingandPrototypingJavaScriptApps[watch][$]Let'sCode:Test-DrivenJavaScript[watch][$]JavaScriptTestingRecipes[read][$]TestableJavaScript[read][$]Test-DrivenJavaScriptDevelopment[read][$]
LearnJSTesting
75
LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.
Headlessbrowsersprovideautomatedcontrolofawebpageinanenvironmentsimilartopopularwebbrowsers,butareexecutedviaacommandlineinterfaceorusingnetworkcommunication.TheyareparticularlyusefulfortestingwebpagesastheyareabletorenderandunderstandHTMLthesamewayabrowserwould,includingstylingelementssuchaspagelayout,color,fontselectionandexecutionofJavaScriptandAJAXwhichareusuallynotavailablewhenusingothertestingmethods.Googlestatedin2009thatusingaheadlessbrowsercouldhelptheirsearchengineindexcontentfromwebsitesthatuseAJAX.
—Wikipedia
GettingStartedwithPhantomJS[read][$]PhantomJSCookbook[read][$]PhantomJSforWebAutomation[watch]RapidPhantomJS[watch][$]
LearnHeadlessBrowsers
76
LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.
GeneralLearning:
CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]YourFirstOfflineWebApp[read]
LearnOfflineDev
77
LearnSecurityBrowserSecurityHandbook[read]FrontendSecurity[watch]HTML5SecurityCheatsheet[read]SecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheTangledWeb:AGuidetoSecuringModernWebApplications[read][$]WebSecurityBasics[read]
LearnSecurity
78
LearnMulti-ThingDevelopment
Imagesource:http://bradfrost.com/blog/post/this-is-the-web/
Asiteorapplicationcanrunonawiderangeofcomputers,laptops,tabletsandphones,aswellasahandfulofotherthings(watches,thermostats,fridges,etc.).Howyoudeterminewhatthingsyou'llsupportandhowyouwilldeveloptosupportthosethingsiscalledamulti-
LearnMulti-ThingDev(e.g.,RWD)
79
thingdevelopmentstrategy.Below,Ilistthemostcommonmulti-thingdevelopmentstrategies.
Buildaresponsive(RWD)website/appforallthings.BuildaRESS(responsivewebdesignwithserver-sidecomponents)website/appforallthings.Buildanadaptive/progressivelyenhancedwebsite/appforallthings.Buildawebsite,webapp,nativeapp,orhybrid-nativeappforeachindividualthingoragroupingofthings.Attempttoretrofitsomethingyouhavealreadybuiltusingbitsandpartsfromstrategies1,2or3.Thiscouldbeassimpleassprinklinginsomescreen-sizeagnosticUIpartsorattemptingtofullysupportotherthingswiththeentireUI.
GeneralLearning:
AdaptiveWebDesign[read][$]DesigningMulti-DeviceExperiences:AnEcosystemApproachtoUserExperiencesacrossDevices[read][$]DesigningwithProgressiveEnhancement[read][$]MobileWebDevelopment[watch]ResponsiveHTMLEmailDesign[watch][$]ResponsiveImages[watch]ResponsiveTypography[watch][$]ResponsiveWebDesign[watch][$]ResponsiveWebDesignFundamentals[watch]
LearnMulti-ThingDev(e.g.,RWD)
80
DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.
DirectedLearning
81
DirectedLearningThetablebelowcontainsinstructorled,paid,front-endcourses,programs,schools,andbootcamps.
Ifyoucan'taffordadirectededucation,aselfdirectededucationusingscreencasts,books,andarticlesisaviablealternativetolearnfront-enddevelopmentfortheself-drivenindividual.
Front-EndSchools,Courses,&Bootcamps
82
company course price onsite remote
AustinCodingAcademy TheFrontEndTrack
2,490persession
Austin,TX
Betamore Front-endWebDevelopment 8,500 Baltimore,
MD
BLOC BecomeaFrontendDeveloper 4,999 yes
Codeup NightFront-EndBootcamp 8,500
SanAntonio,Texas
CodifyAcademy Front-endWebDevelopment 4,000 multiple
locations
DecodeMTL LearnFront-endWebDevelopment 2,500 Montreal,
QC
TheFlatironSchool IntroductiontoFront-EndWebDevelopment 3,500 NewYork,
NY
GeneralAssembly FrontendWebDevelopment 3,500 multiple
locations
HackerYouFront-endWebDevelopmentImmersive
7,000-7,910
Toronto,Canada
IronYard FrontEndEngineering 12,000 multiplelocations
LearningFuze Part-TimeFront-EndDevelopmentCourse 2,500 Irvine,CA
TheNewYorkCode+DesignAcademy FrontEnd101 2,000 NewYork,
NY
PortlandCodeSchool
AdvancedFront-endDeveloperTools 2,000 Portland,
OR
Thinkful FrontendWebDevelopment
300permonth yes
Udacity Front-EndWebDeveloperNanodegree
200monthly
multiplelocations yes
Front-EndSchools,Courses,&Bootcamps
83
Front-EndDeveloperstoLearnFromThenotionthatyoushouldfollowanindividualtolearnaboutfront-enddevelopmentisslowlybecomingpointless.Theadvancedpractitionersoffront-enddevelopmentgenerateenoughcontentthatyoucansimplyfollowthecommunity/leadersbypayingattentiontothefront-end"news"outlets(viaNewsletters,Newsoutlet,&Podcasts).
Front-EndDevstoLearnFrom
84
Front-EndNewsletters,NewsSites,&PodcastsGeneralFront-EndNewsletters,News,&Podcasts:
TheBigWebShowFreshBrewedFrontendFront-EndDevWeeklyFront-EndNewsin5Minutesfrontendfront.comMobileWebWeeklyOpenWebPlatformDailyDigestO'ReillyWebPlatformRadarshoptalkshow.comTTLViewsourcesTheWebAheadWebComponentsWeeklyWebDesignWeeklyTheWebPlatformPodcastwebtoolsweekly.com
HTML/CSSNewsletters:
CSSWeeklyHTML5Weekly
JavaScriptNewsletters,News,&Podcasts:
EchoJSFiveJSJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com
GraphicandAnimationNewslettersandPodcasts
MotionandMeaning
Newsletters,News,&Podcasts
85
ResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly
Newsletters,News,&Podcasts
86
PartIII:ToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.
Makesureyouunderstandingthecategorythatasetoftoolsfallswithin,beforestudyingthetoolsthemselves.
Notethatjustbecauseatoolislisted,oracategoryoftoolsisdocumented,thisdoesnotequatetoanassertiononmypartthatafront-enddevelopershouldlearnitanduseit.Chooseyourowntoolbox.I'mjustprovidingthecommontoolboxoptions.
Imagesource:https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0
PartIII:Front-EndDevTools
87
GeneralFront-EndDevelopmentToolsDevelopmentTools:
BrowsersyncCodeKitish.2.0.placehold.itPreprosscreensiz.esWraith
OnlineCodeEditors:
CodePenes6fiddle.netJSBinJSFiddleLiveweavePlunker
ToolsforFindingTools:
builtwithjavascripting.commicrojs.comstackshare.iostylesheets.coTheToolboxUnheap
GeneralFront-EndDevTools
88
Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.
Dash[OSX,iOS][$]DevDocsVelocity[Windows][$]Zeal[Windows,Linux]
Doc/APIBrowsingTools
89
SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool
SEOTools
90
Prototyping&WireframingToolsCreating:
BalsamiqMockups[$]Justinmind[$]UXPin[freeto$]
Collaboration/Presenting:
InVision[freeto$]Conceptboard[freeto$]myBalsamiq[$]
Prototyping&WireframingTools
91
DiagrammingToolsdraw.io[freeto$]Cacoo[freeto$]gliffy[freeto$]
DiagrammingTools
92
HTTP/NetworkToolsCharles[$]ChromeDevToolsNetworkPanelFiddlerPostman
HTTP/NetworkTools
93
LearnCodeEditorsAsourcecodeeditorisatexteditorprogramdesignedspecificallyforeditingsourcecodeofcomputerprogramsbyprogrammers.Itmaybeastandaloneapplicationoritmaybebuiltintoanintegrateddevelopmentenvironment(IDE)orwebbrowser.Sourcecodeeditorsarethemostfundamentalprogrammingtool,asthefundamentaljobofprogrammersistowriteandeditsourcecode.
—Wikipedia
Front-endcodecanminimallybeeditedwithasimpletexteditingapplicationlikeNotepadorTextEdit.But,mostfront-endpractitionersuseacodeeditorspecificallydesignforeditingaprogramminglanguage.
Codeeditorscomeinallsortsoftypesandsize,sotospeak.Selectingoneisarathersubjectiveengagement.Chooseone,learnitinsideandout,thengetontolearningHTML,CSS,DOM,andJavaScript.
However,Idostronglybelieve,minimally,acodeeditorshouldhavethefollowingqualities(bydefaultorbywayofplugins):
1. Gooddocumentationonhowtousetheeditor2. Report(i.e.,hinting/linting/errors)onthecodequalityofHTML,CSS,andJavaScript.3. OffersyntaxhighlightingforHTML,CSS,andJavaScript.4. OffercodecompletionforHTML,CSS,andJavaScript.5. Becustomizablebywayofaplug-inarchitecture6. Haveavailablealargerepositoryofthird-party/communityplug-insthatcanbeusedto
customizetheeditortoyourliking7. Besmall,simple,andnotcoupledtothecode(i.e.,notrequiredtoeditthecode)
IpersonallyuseandrecommendSublimeTextwiththefollowingplug-ins.
AutoFileNameBracketHighlighterColorHighlighterCSS3HTMLAttributesHTML-CSS-JSPrettifyPackageControlSideBar EnhancementsStringEncode
CodeEditingTools
94
SublimeLinterSublimeLinter-jsonSublimeLinter-jshintSublimeLinter-html-tidy
Terminal
HerearesomeresourcesforlearningSublime:
PerfectWorkflowinSublimeText2[watch][requireslogin,butfree]SublimeProductivity[read][$]SublimeText3FromScratch[watch][$]SublimeTextPowerUserBook[read+watch][$]
CodeEditors:
AtomBracketsSublimeText[$]WebStorm[$]VisualStudioCode
OnlineCodeEditors:
Cloud9[freeto$]Codeanywhere[freeto$]Koding[freeto$]
Sharable/RunnableCodeEditors:
Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosmallamountsofimmediatelyrunnablecodeinawebbrowser.
CodePen[freeto$]es6fiddle.netjsbin.com[freeto$]jsfiddle.netliveweave.comPlunker
CodeEditingTools
95
BrowserToolsJSBrowserCodingUtilities:
History.jshtml2canvasPlatform.jsURI.js
GeneralReferenceToolstoDetermineIfXBrowserSupportsX:
BigJS-Compatibility-TableBrowsersupportforbroken/missingimagesBrowserscopecaniuse.comFirefoxPlatformStatus-Implementation&standardizationroadmapforwebplatformfeaturesHTML5PleaseHTML5Testiwanttouse.com/jscc.infoPlatformStatuswebbrowsercompatibility.comwhatwebcando.today
BrowserDevelopment/DebugTools:
ChromeDeveloperTools(akaDevTools)Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings
FirefoxDeveloperToolsIEDevelopertools(akaF12tools)OperaDragonflySafariWebInspectorVorlon.js
SynchronizedBrowserTools:
Browsersync
BrowserTools
96
BrowserCodingToolstoDetermineIfXBrowserSupportsX:
ESFeatureTestsFeature.jsModernizr
BroadBrowserPolyfills/Shims:
console-polyfillHTML5CrossBrowserPolyfillssocket.ioSockJSwebcomponents.jswebshim
BrowserHostedTesting/Automation:
Browserling[$]BrowserStack[$]CrossBrowserTesting.com[$]SauceLabs[$]Selenium
HeadlessBrowsers:
PhantomJSslimerjsTrifleJS
HeadlessBrowserAutomation:
Usedforfunctionaltestingandmonkeytesting.
CasperJSgremlins.jsNightmareNightwatchJS
BrowserHacks:
browserhacks.com
BrowserTools
97
HTMLToolsHTMLTemplates/Boilerplates/StarterKits:
dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplatePearsWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopment
HTMLPolyfill:
html5shiv
Transpiling:
HAMLjadeMarkdown
References:
ElementattributesElementsHTMLArrowsHTMLEntityLookupHTMLInterfacesBrowserSupportHTMLelement.info
Linting/Hinting:
html5-lintHTMLHinthtml-inspector
Optimizer:
HTMLMinifier
OnlineCreation/Generation/ExperimentationTools:
HTMLTools
98
tablesgenerator.com
AuthoringConventions:
HTMLCodeGuidePrinciplesofWritingConsistent,IdiomaticHTML
Workflow:
Emmet
TrendingHTMLRepositoriesonGitHubThisMonth:
https://github.com/trending?l=html&since=monthly
HTMLTools
99
CSSToolsDesktop&MobileCSSFrameworks:
BaseBootstrapConciseFoundationMaterialDesignLite(MDL)MaterializeMetroUIPure.cssSemanticUI
MobileOnlyCSSFrameworks:
Ratchet
CSSReset:
ACSSReset(or“ResetCSS”)isashort,oftencompressed(minified)setofCSSrulesthatresetsthestylingofallHTMLelementstoaconsistentbaseline.
—cssreset.com
EricMeyer's“ResetCSS”2.0Normalize
Transpiling:
pleeease.ioPostCSS&cssnextrework&mythSass/SCSSStylus
References:
css3test.comcss3clickchart.comcss4-selectors.comCSSTRIGGERS...AGAMEOFLAYOUT,PAINT,ANDCOMPOSITE
CSSTools
100
cssvalues.comMDNCSSReferenceOverAPICSScheatsheet
Linting/Hinting:
CSSLintstylelint
CodeFormatter/Beautifier:
CSScombCSSfmt
Optimizer:
clear-csscssnanoCSSO
OnlineCreation/Generation/ExperimentationTools:
CSSArrowPleaseCSSMaticEnjoyCSSFlexboxPlaygroundflexplorerpatternify.compatternizer.comUltimateCSSGradientGenerator
ArchitectingCSS:
AtomicDesign[read]OOCSS[read]SMACSS[read][$]
AuthoringConventions:
CSScodeguide[read]cssguidelin.es[read]GoogleHTML/CSSStyleGuideIdiomaticCSS[read]MaintainableCSS[read]
CSSTools
101
TrendingCSSRepositoriesonGitHubThisMonth:
https://github.com/trending?l=css&since=monthly
CSSTools
102
DOMToolsDOMLibraries/Frameworks:
clipboard.jsjQueryKeypressTetherZepto
DOMPerformanceTools:
DOMMonster
References:
EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)
DOMPolyfills/Shims:
dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform
VirtualDOM:
jsdomvirtual-dom
DOMTools
103
JavaScriptToolsJSUtilities:
accounting.jsasyncChanceformat.jsis.jslodashMath.jsMoment.jsNumeral.jsstring.jsunderscore.jswaitxregexp.com
Transpiling(ESXtoESX):
Babel
JavaScriptCompatibilityChecker:
jscc.info/
Linting/Hinting:
eshintjshintJSLint
jslinterrors.com
UnitTesting:
JasmineJest
MochaQUnit
TestingAssertionsforUnitTesting:
JavaScriptTools
104
Chaiexpect.jsshould.js
TestSpies,Stubs,andMocksforUnitTesting:
sinon.js
CodeStyleLinter:
JSCS
CodeFormater/Beautifier:
esformatterjs-beautifyjsfmt
PerformanceTesting:
benchmark.jsjsperf
Visualization,StaticAnalysis,Complexity,CoverageTools:
Blanket.jsCoveralls[$]escomplexEsprimajscomplexity.orgistanbulPlato
Optimizer:
UglifyJS2
Obfuscate:
JavascriptObfuscator[freeto$]JScrambler[$]
Sharable/RunnableCodeEditors:
es6fiddle.netjsbin.com[freeto$]
JavaScriptTools
105
jsfiddle.net
OnlineRegularExpressionEditors/VisualTools:
debuggexregex101regexperRegExr
AuthoringConventions:
AirbnbJavaScriptStyleGuideKhanJavaScriptStyleGuidePrinciplesofWritingConsistent,IdiomaticJavaScript
TrendingJSRepositoriesonGitHubThisMonth:
https://github.com/trending?l=javascript&since=monthly
MostDependeduponPackagesonNPM:
https://www.npmjs.com/browse/depended
JavaScriptTools
106
StaticSiteGeneratorsToolsJSSiteGenerators:
HarpMetalsmith
JSBlogSiteGenerators:
HexoHubPress
SiteGeneratorListings:
staticgen.comstaticsitegenerators.net
StaticSiteGeneratorsTools
107
App(Desktop,Mobile,Tablet,etc.)ToolsFront-EndAppFrameworks:
AngularJS&BatarangAureliaBackbone&MarionetteEmber&EmberInspectorPolymer&IronElements&PaperElementsReact&React-router&Flux&ReactDeveloperToolsVue.js&vue-loader&vue-router
Full-StackJSAppPlatforms:
HoodieMEAN(i.e.,MongoDB,Express,AngularJS,andNode.js.)Meteor
MobileWebUI/Site/AppFrameworks
ThesesolutionscanbeusedanywhereincludinginaWebView(i.e.,webplatformandbrowserengine)app:
Framework7KendoUIMobileMobileAngularUIRatchet
NativeHybridMobileWebView(i.e.,BrowserEngineDriven)Frameworks:
ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.
ioniconsen.io
NativeHybridMobileDevelopmentWebview(i.e.,BrowserEngineDriven)Environments/Platforms/Tools:
ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.
AdobePhoneGap[$]
App(Desktop,Mobile,Tablet,etc.)Tools
108
AppBuilder[$]cocoon.io[freeto$]ionichub[freeto$]kony[$]manifoldJSMonaca[$]Taco
NativeDesktopWebView(i.e.,BrowserEngineDriven)AppFrameworks:
ElectronNW.js
NativeMobileAppFrameworks(AkaJavaScriptNativeApps)
ThesesolutionsuseaJSengineatruntimetointerpretJSandbridgethattonativeAPIs.NobrowserengineorWebViewisused.TheUIisconstructedfromnativeUIcomponents.
NativeScriptReactNativetabris.js[freeto$]trigger.io[$]
References:
todomvc.comFrontendGuidelinesQuestionnaire
AppSeeds/Starters/Boilerplates:
Angular2WebpackStarterEmberstarter-kitNG6-starterhjs-webpackReactStarterKit
App(Desktop,Mobile,Tablet,etc.)Tools
109
ScaffoldingToolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.
SlushYeoman
ScaffoldingTools
110
TemplatingToolsJustTemplating:
doT.jsHandlebars
htmlbarsHogan.jsMustache.jsNunjuncksTransparency
TemplatingandReactiveDataBinding:
jquerymy.jsknockoutpaperclip.jsractive.jsreact.jsriotRivets.jsRxJSvue.js
TemplatingtoVirtualDOM:
JSXt7
TemplatingTools
111
UIWidgets&ComponentsToolsDesktop&Mobile:
BootstrapKendoUI[freeto$]MaterialuiMaterializeMetroUIOfficeUIFabricPolymerPaperElementsSemanticUIWebix[$]
Desktop(NW.jsandElectron):
PhotonReactUIComponentsforOSXElCapitanandWindows10
MobileFocused:
Framework7KendoUIMobileMobileAngularUIRatchet
UIWidgets&ComponentsTools
112
DataVisualization(e.g.,Charts)ToolsJSLibraries:
d3sigmajs
Widgets&Components:
amCharts[$]AnyChart[Non-commercialfreeto$]C3.jsChartist-jsjChart.jsEpochFusionCharts[$]GoogleChartsHighcharts[Non-commercialfreeto$]ZingChart[freeto$]
Services:
ChartBlocks[freeto$]Datawrapperinfogr.am[freeto$]plotly[freeto$]
DataVisualization(e.g.,Charts)Tools
113
Graphics(e.g.,SVG,canvas,webgl)ToolsGeneral:
Fabric.jsTwo.js
Canvas:
EaselJSPaper.js
SVG:
d3GraphicsJSRaphaëlSnap.svgsvg.js
WebGL:
pixi.jsthree.js
Graphics(e.g.,SVG,canvas,webgl)Tools
114
AnimationToolsDynamics.jsGreenSock-JSsnabbt.jsTweenJSVelocity.js
Polyfills/Shims:
web-animations-js
AnimationTools
115
JSONToolsOnlineEditors:
JSONmate
QueryTools:
DefiantJSJSONMaskObjectPath
GeneratingMockJSONTools:
JSONGeneratorMockaroo
OnlineJSONMockingAPITools:
FillText.comJSONPlaceholdermockable.ioMocky
LocalJSONMockingAPITools:
json-server
JSONSpecifications/Schemas:
json-schema.org&jsonschema.net{json:api}
JSONTools
116
TestingFrameworkToolsInternKarmaNightWatch.js
TestingFrameworkTools
117
Front-EndDataStorageToolsAlaSQLDexie.jsForerunnerDBlocalForageLokiJSLovefieldPouchdbYDN-DB
DataStorageTools
118
Module/PackageLoadingToolsBrowserifyRollupSystemJSwebpack
Module/PackageLoadingTools
119
Module/PackagePepositoryToolsBowerjspm.ioNPMspmjs
Module/PackageRepo.Tools
120
Web/Cloud/StaticHostingToolsAWS[$]DigitalOcean[$]DIVSHOT[freeto$]Heroku[freeto$]Modulus[$]netlify[freeto$]Surge[freeto$]
Web/Cloud/StaticHostingTools
121
ProjectManagement&CodeHostingToolsAssembla[freeto$]Bitbucket[freeto$]Codebase[$]Github[freeto$]Unfuddle[$]
ProjectManagement&CodeHosting
122
Collaboration&CommunicationToolsGoogleHangoutsSkype[freeto$]Slack&screenhero[freeto$]
Code/GitHubCollaboration&Communication:
Gitter[freeto$]
Collaboration&CommunicationTools
123
ContentManagementHosted/APIToolsAPICMS(i.e.,ContentDeliveryCMS)Tools:
Contentful[$]CosmicJS[freeto$]prismic.io[freeto$]
HostedCMSTools:
CushyCMS[freeto$]LightCMS[$]PageLime[$]SurrealCMS[$]
StaticCMSTools:
webhook.com
CMSHosted/APITools
124
Back-endasaservice(akaBAAS)toolsforfront-enddevelopersData/back-endmanagementasaservice:
Back&[freeto$]Firebase[freeto$]Kinvey[free'ishto$]Pusher[freeto$]
UserManagementasaService:
Auth0[$]Hull[$]UserApp[freeto$]
BAAS(forFront-EndDevs)Tools
125
OfflineToolsHoodieOffline.jsPouchDBupup
OfflineTools
126
SecurityToolsCodingTool:
DOMPurifyXSS
References:
HTML5SecurityCheatsheet
SecurityTools
127
Tasking(akaBuild)ToolsTasking/BuildTools:
GruntGulp
Tasking/BuildandMoreTools:
BrunchMimosa
Tasking(akaBuild)Tools
128
DeploymentToolsBamboo[$]Codeship[freeto$]FTPLOY[freeto$]TravisCI[freeto$]Springloops[freeto$]SurgeSyncNinja
DeploymentTools
129
Site/AppMonitoringToolsUptime:
Pingdom[freeto$]UptimeRobotUptrends[$]
General:
NewRelic
Site/AppMonitoringTools
130
JavaScriptErrorReporting/Monitoringerrorception[$]Raygun[$]Sentry[freeto$]TrackJS[$]
JSErrorMonitoringTools
131
PerformanceToolsReporting:
ChromeDevtoolsTimelineGTmetrixsitespeed.ioSpeedCurve[$]WebPageTestWEIGHTOF.IT
JSTools:
imageminImageOptim-CLI
Budgeting:
performancebudget.io
References/Docs:
JankFreePerformanceofES6featuresrelativetotheES5
PerformanceTools
132