Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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