TableofContents
Introduction

1.1

WhatIsaFront-EndDeveloper?

1.2

RecapofFront-endDevin2016

1.3

In2017expect...

1.4

PartI:TheFront-EndPractice

1.5

Front-EndJobsTitles

1.5.1

CommonWebTechEmployed

1.5.2

Front-EndDevSkills

1.5.3

Front-EndDevsDevelopFor...

1.5.4

Front-EndonaTeam

1.5.5

Generalist/Full-StackMyth

1.5.6

Front-Endinterviewquestions

1.5.7

Front-EndJobBoards

1.5.8

Front-EndSalaries

1.5.9

HowFDsAreMade

1.5.10


PartII:LearningFront-EndDev
SelfDirectedLearning

1.6
1.6.1

LearnInternet/Web

1.6.1.1

LearnWebBrowsers

1.6.1.2

LearnDNS

1.6.1.3

LearnHTTP/Networks

1.6.1.4

LearnWebHosting

1.6.1.5

LearnGeneralFront-EndDev

1.6.1.6


LearnUI/InteractionDesign

1.6.1.7

LearnHTML&CSS

1.6.1.8

LearnSEO

1.6.1.9

LearnJavaScript

1.6.1.10

LearnWebAnimation

1.6.1.11

LearnDOM,BOM&jQuery

1.6.1.12

LearnWebFonts

1.6.1.13

2



LearnAccessibility

1.6.1.14

LearnWeb/BrowserAPIs

1.6.1.15

LearnJSON

1.6.1.16

LearnJSTemplates

1.6.1.17

LearnStaticSiteGenerators

1.6.1.18

LearnComputerScienceviaJS

1.6.1.19

LearnFront-EndAppArchitecture

1.6.1.20


LearnDataAPI(i.e.JSON/REST)Design

1.6.1.21

LearnReact&Redux

1.6.1.22

LearnProgressiveWebApp

1.6.1.23

LearnJSAPIDesign

1.6.1.24

LearnWebDevTools

1.6.1.25

LearnCommandLine

1.6.1.26

LearnNode.js

1.6.1.27

LearnJSModules


1.6.1.28

LearnJSModuleloaders/bundlers

1.6.1.29

LearnPackageManagers

1.6.1.30

LearnVersionControl

1.6.1.31

LearnBuild&TaskAutomation

1.6.1.32

LearnSitePerformanceOptimization

1.6.1.33

LearnTesting

1.6.1.34

LearnHeadlessBrowsers

1.6.1.35


LearnOfflineDev

1.6.1.36

LearnWeb/Browser/AppSecurity

1.6.1.37

LearnMulti-DeviceDev(e.g.,RWD)

1.6.1.38

DirectedLearning
Front-EndSchools,Courses,&Bootcamps

1.6.2
1.6.2.1

Front-EndDevstoLearnFrom

1.6.3

Newsletters,News,&Podcasts

1.6.4

PartIII:Front-EndDevTools

1.7


Doc/APIBrowsingTools

1.7.1

SEOTools

1.7.2

Prototyping&WireframingTools

1.7.3

DiagrammingTools

1.7.4
3


HTTP/NetworkTools

1.7.5

CodeEditingTools

1.7.6

BrowserTools

1.7.7


HTMLTools

1.7.8

CSSTools

1.7.9

DOMTools

1.7.10

JavaScriptTools

1.7.11

StaticSiteGeneratorsTools

1.7.12

AccessibilityDevTools

1.7.13

AppFrameworks(Desktop,Mobileetc.)Tools

1.7.14

ProgressiveWebAppTools


1.7.15

ScaffoldingTools

1.7.16

GeneralFEDevelopmentTools

1.7.17

Templating/DataBindingTools

1.7.18

UIWidget&ComponentToolkits

1.7.19

DataVisualization(e.g.,Charts)Tools

1.7.20

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

1.7.21

AnimationTools

1.7.22


JSONTools

1.7.23

PlaceholderImages/TextTools

1.7.24

TestingTools

1.7.25

Front-endDataStorageTools

1.7.26

Module/PackageLoadingTools

1.7.27

Module/PackageRepo.Tools

1.7.28

HostingTools

1.7.29

ProjectManagement&CodeHosting


1.7.30

Collaboration&CommunicationTools

1.7.31

CMSHosted/APITools

1.7.32

BAAS(forFront-EndDevs)Tools

1.7.33

OfflineTools

1.7.34

SecurityTools

1.7.35

Tasking(akaBuild)Tools

1.7.36

DeploymentTools

1.7.37


4


Site/AppMonitoringTools

1.7.38

JSErrorMonitoringTools

1.7.39

PerformanceTools

1.7.40

ToolsforFindingTools

1.7.41

5


Introduction

Front-EndDeveloperHandbook2017

WrittenbyCodyLindleysponsoredby—FrontendMasters

6



Introduction

Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.It
broadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitand
whattoolsareusedwhenpracticingitin2017.
Itisspecificallywrittenwiththeintentionofbeingaprofessionalresourceforpotentialand
currentlypracticingfront-enddeveloperstoequipthemselveswithlearningmaterialsand
developmenttools.Secondarily,itcanbeusedbymanagers,CTOs,instructors,andhead
hunterstogaininsightsintothepracticeoffront-enddevelopment.
Thecontentofthehandbookfavorswebtechnologies(HTML,CSS,DOM,andJavaScript)
andthosesolutionsthataredirectlybuiltontopoftheseopentechnologies.Thematerials
referencedanddiscussedinthebookareeitherbestinclassorthecurrentofferingtoa
problem.
Thebookshouldnotbeconsideredacomprehensiveoutlineofallresourcesavailabletoa
front-enddeveloper.Thevalueofthebookistiedupinaterse,focused,andtimelycuration
ofjustenoughcategoricalinformationsoasnottooverwhelmanyoneonanyoneparticular
subjectmatter.
Theintentionistoreleaseanupdatetothecontentyearly.
Thehandbookisdividedintothreeparts.

PartI.TheFront-EndPractice
Partonebroadlydescribesthepracticeoffront-endengineering.

PartII:LearningFront-EndDevelopment
Parttwoidentifiesself-directedanddirectresourcesforlearningtobecomeafront-end
developer.

PartIII:Front-EndDevelopmentTools
Partthreebrieflyexplainsandidentifiestoolsofthetrade.


Downloada.pdf,.epub,or.mobifilefrom:
/>
7


Introduction

Contributecontent,suggestions,andfixesongithub:
/>
ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0
UnportedLicense.

8


WhatIsaFront-EndDeveloper?

WhatIsaFront-EndDeveloper?
Front-endwebdevelopment,alsoknownasclient-sidedevelopmentisthepracticeof
producingHTML,CSSandJavaScriptforawebsiteorWebApplicationsothatauser
canseeandinteractwiththemdirectly.Thechallengeassociatedwithfrontend
developmentisthatthetoolsandtechniquesusedtocreatethefrontendofawebsite
changeconstantlyandsothedeveloperneedstoconstantlybeawareofhowthefield
isdeveloping.
Theobjectiveofdesigningasiteistoensurethatwhentheusersopenupthesitethey
seetheinformationinaformatthatiseasytoreadandrelevant.Thisisfurther
complicatedbythefactthatusersnowusealargevarietyofdeviceswithvarying
screensizesandresolutionsthusforcingthedesignertotakeintoconsiderationthese
aspectswhendesigningthesite.Theyneedtoensurethattheirsitecomesupcorrectly

indifferentbrowsers(cross-browser),differentoperatingsystems(cross-platform)and
differentdevices(cross-device),whichrequirescarefulplanningonthesideofthe
developer.
/>HTML,CSS,&JavaScript:
Afront-enddeveloperarchitectsanddevelopswebsitesandapplicationsusingweb
technologies(i.e.,HTML,CSS,DOM,andJavaScript),whichrunonthewebplatformoract
ascompilationinputfornon-webplatformenvironments(i.e.,NativeScript).

Imagesource: />Typically,apersonentersintothefieldoffront-enddevelopmentbylearningtodevelop
HTML,CSS,andJScode,whichrunsinawebbrowser,headlessbrowser,WebView,oras
compilationinputforanativeruntimeenvironment.Thesefourruntimesscenariosare

9


WhatIsaFront-EndDeveloper?

explainedbelow.
WebBrowsers
Awebbrowserissoftwareusedtoretrieve,present,andtraverseinformationontheWWW.
Typically,browsersrunonadesktoporlaptopcomputer,tablet,orphone,butasoflatea
browsercanbefoundonjustaboutanything(i.e,onafridge,incars,etc.).
Themostcommonwebbrowsersare(showninorderofmostusedfirst):
Chrome
InternetExplorer(Note:notEdge,referringtoIE9toIE11)
Firefox
Safari
HeadlessBrowsers
Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbe
controlledfromacommandlineinterfaceprogrammaticallyforthepurposeofwebpage

automation(e.g.,functionaltesting,scraping,unittesting,etc.).Thinkofheadlessbrowsers
asabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraverseweb
pages.
Themostcommonheadlessbrowsersare:
PhantomJS
slimerjs
trifleJS
Webviews
WebviewsareusedbyanativeOS,inanativeapplication,torunwebpages.Thinkofa
webviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanative
applicationrunningonadevice(e.g.,iOS,android,windows).
Themostcommonsolutionsforwebviewdevelopmentare:
Cordova(typicallyfornativephone/tabletapps)
NW.js(typicallyusedfordesktopapps)
Electron(typicallyusedfordesktopapps)
NativefromWebTech
Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-end
developerstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asof
late,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.,CSS

10


WhatIsaFront-EndDeveloper?

andJavaScript),withoutwebengines,tocreatenativeapplications.
Someexamplesoftheseenvironmentsare:
NativeScript
ReactNative


NOTES:
Makesureyouareclearwhatwhatexactlyismeantbythe"webplatform".Read,"TheWeb
platform:whatitis"andreadthe,"OpenWebPlatform"Wikipediapage.

11


RecapofFront-endDevin2016

RecapofFront-endDevelopmentin2016
TheyearoftheUIcomponent,andtreeofUIcomponents,forbuildingcomplexUI's.
Nolongermainstreamdevelopmentblasphemy:componentsbeingconstructedfroma
singlefile,potentiallycontainHTML,CSS,andJS,INONEFILE!
React,Redux,Webpack,ECMAScript2015(akaES6),andBabelgainmassive
adoption.Thesesolutionsrisetothetopofallthepollsasthemostusedtech.
Developersrealized,inmostcases,HTML5hybridmobiledevelopmentviawebviews
doesn'tprovideenoughwinswhenbuildingnativeapps.
ReactNativeandNativeScriptstarttoreplacemobileHTML5hybridwebview
development.
ManyabandonGulpforNPMscripts,butGulpremainspopular.
SASSremainsapopulartool,whilePostCSS(+CSSNext)gainsground.
Linting/HintingHTML,CSS,andJavaScriptisathingmostdevelopersdo(ESlint
replacesJShint&JSCSmergesintoESLint).
AtrendofdevelopersabandoningSublimeandAtomforVisualStudioCodebegins.
jQueryremains,butusage/interestisdeclining.jQuery3wasreleased,muchlikeatree
fallinginaforestthatnobodyhears.
Vue.jscontinuestogainconverts.Deservinglyso!
JavaScriptfunctionalprogramming&patternsgetalotofattention.
Offlinedevelopment&ProgressiveWebAppsgomainstream.
Microsoftshowsupandcontributes.

Developingnativeapplicationsforwindows,OSX,andlinuxusingthingslikeNW.jsand
Electronviawebtechnologiesbecomesathing.
Angular2(inthefutureaka"Angular")getsoffthepotandmostrealizeitwillneverbe
asmainstreamasAngular1.
JavaScriptbroadlyremainsatthecenterofsoftwaretechnologies.
Moredevelopersstartcaringabouttooling(e.g.automation)andtesting.
Staticsitegeneratorsaretakenseriously.
CSSGridexcitementgrowsandthefuturelooksbright.
NPMgetssomecompetitionfromYarn.
ThenextevolutionofReact-likesolutionsshowsupviaPreact,Deku,Rax,andinferno
showcasingevolutionwithoutmuchAPIchange.
MostlypeoplelearntoacceptJSX,andnowtheycan'timaginenotusingit.
AworkableCSSmodulepattern(CSSencapsulation)isactualizedandused,thusCSS
inJSbecomesaviablesolutionformany.
MorepeopleturningtoUIfunctional/integrationtestingincludingconceptslikevisual
CSS&RWDregressiontesting.

12


RecapofFront-endDevin2016

ThedaysofbattlinginconsistentbrowserAPI'sarealmostbehindusduetoamassive
declineinusageanddevelopmentforolderversionsofIE.
Mosteveryonerealizedtheywillhavetohaveamulti-devicestrategyplanwhen
developingfortheweb
Moredevelopers,fromotherlanguages,continuetofloodtheJavaScriptspacebringing
withthemthingsliketypecheckingandanobsessionwithclasssyntaxandOOP
concepts.
Front-enddevsareintroducedtoHotModulereplacementtechniquesandtimetravel

debugging.
MorewaitingforanativeJavaScriptbrowsermoduleloader.
EnforcingCSSandJavaScriptstyleconventionsbecomesmoreimportant(considering
ES3toES6codeandCSSpre-processorssyntacticalvariations)
AsmallbutnoticeablenumberofdevelopersarestartingtochooseElmover
JavaScript.
TypeScriptgetssomeserioususeandfanboys.
becomesthesmartchoiceforenterprisedevelopers(i.e.support!).
WebpackgetsitsacttogetherandsolidifiesispositionoverthesuperiorJSPMsolution.
HTTPS,yeah,we'reseriousaboutthat.
BASHonwindowshappens.
ThenotificationsAPIgetsusedandabusedforchromeusers,butonlyafteryougiveit
permission.
Firebugofficiallydead.
CSS20yearsyoungin2016.
Immutabilityconceptsrunrapid.

13


In2017expect...

In2017expect...
WebAssembly,mightjustpeak.
importmightjustbeusablein <scripts></scripts>

UniversalJavaScriptsolutionswillcontinuetorisethatpayhomage/respecttothedays
ofserverdeliveredfront-ends(i.e.htmltotheclient).
ReactiveprogrammingcontinuestothriveintheJavaScriptscene.(seeMobXand
RxJS).

React,moresotheconcept,willdominate.Reactitselfwillbecompletelyre-written(see
ReactFiber)orevolve(seeInferno).
AngularfoundSEMVERsoAngular4(even5)isontheroadmapfor2017.
Areturntosimplewebsitesmayhappen,web1.0retro,butwiththehelpof2017tools
(i.e.staticsitegeneration)
RESTfulJSONAPIswillgetmorecompetition(seeGraphQL)
CouldbeabanneryearforVue.js.
MoredevswillabandontraditionalCMSsolutionsforstaticsitegenerators&APICMS
tools.
MorepeoplewillmovefromSasstoPostCSS+cssnext.
LotsmoreHTTP2andHTTPS.
Webcomponentswillcontinuetolurkandwaitforsignificanttractionbydevelopersthat
mightnevercometobe.
Thenoframework,framework,factionwillgainmomentum(seeSvelte).
JavaScriptwillsettle,andhopefully,CSSwilleruptandeveryonewillcryfatigueuntilit
settles.
Hatredforappsstorewillgrow,whiletheopenwebhasnomemoryofwrongdoing.
Reduxwillcontinuetogetstiffcompetition(seemobx).
YARNwillwinmoreusers.
Theideaof“front-endapps”,“ThickClientapps”,“Staticapps”,“NoBackendapp”,
“SPA's”,“Front-enddrivenapp”mightgetboileddowntotheterm/conceptcalled"JAM
Stack".

14


PartI:TheFront-EndPractice

PartI.TheFront-EndPractice
Partonebroadlydescribesthepracticeoffront-endengineering.


15


Front-EndJobsTitles

Front-EndJobsTitles
Belowisalistanddescriptionofvariousfront-endjobtitles.Thecommon,ormostused(i.e.,
generic),titleforafront-enddeveloperis,"front-enddeveloper"or"front-endengineer".Note
thatanyjobthatcontainstheword"front-end","client-side","webUI","HTML","CSS",or
"JavaScript"typicallyinfersthatapersonhassomedegreeofHTML,CSS,DOM,and
JavaScriptprofessionalknowhow.

Front-EndDeveloper
ThegenericjobtitlethatdescribesadeveloperwhoisskilledtosomedegreeatHTML,
CSS,DOM,andJavaScriptandimplementingthesetechnologiesonthewebplatform.

Front-EndEngineer(akaJavaScriptDeveloperorFull-stackJavaScriptDeveloper)
Thejobtitlegiventoadeveloperwhocomesfromacomputerscience,engineering,
backgroundandisusingtheseskillstoworkwithfront-endtechnologies.Thisroletypically
requiresacomputersciencedegreeandyearsofsoftwaredevelopmentexperience.When
theword"JavaScriptApplication"isincludedinthejobtitle,thiswilldenotethatthe
developershouldbeanadvancedJavaScriptdeveloperpossessingadvanced
programming,softwaredevelopment,andapplicationdevelopmentskills(i.ehasyearsof
experiencebuildingfront-endapplications).

CSS/HTMLDeveloper
Thefront-endjobtitlethatdescribesadeveloperwhoisskilledatHTMLandCSS,excluding
JavaScriptandApplicationknowhow.


Front-EndWebDesigner
Whentheword"Designer"isincludedinthejobtitle,thiswilldenotethatthedesignerwill
possesfront-endskills(i.e.,HTML&CSS)butalsoprofessionaldesign(VisualDesignand
InteractionDesign)skills.

16


Front-EndJobsTitles

Web/Front-EndUserInterface(akaUI)Developer/Engineer
Whentheword"Interface"or"UI"isincludedinthejobtitle,thiswilldenotethatthe
developershouldpossesinteractiondesignskillsinadditiontofront-enddeveloperskillsor
front-endengineeringskills.

Mobile/TabletFront-EndDeveloper
Whentheword"Mobile"or"Tablet"isincludedinthejobtitle,thiswilldenotethatthe
developerhasexperiencedevelopingfront-endsthatrunonmobileortabletdevices(either
nativelyoronthewebplatform,i.e.,inabrowser).

Front-EndSEOExpert
Whentheword"SEO"isincludedinthejobtitle,thiswilldenotethatthedeveloperhas
extensiveexperiencecraftingfront-endtechnologiestowardsanSEOstrategy.

Front-EndAccessibilityExpert
Whentheword"Accessibility"isincludedinthejobtitle,thiswilldenotethatthedeveloper
hasextensiveexperiencecraftingfront-endtechnologiesthatsupportaccessibility
requirementsandstandards.

Front-EndDev.Ops

Whentheword"DevOps"isincludedinthejobtitle,thiswilldenotethatthedeveloperhas
extensiveexperiencewithsoftwaredevelopmentpracticespertainingtocollaboration,
integration,deployment,automation,andmeasurement.

Front-EndTesting/QA
Whentheword"Testing"or"QA"isincludedinthejobtitle,thiswilldenotethatthe
developerhasextensiveexperiencetestingandmanagingsoftwarethatinvolvesunit
testing,functionaltesting,usertesting,andA/Btesting.

17


Front-EndJobsTitles

Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjob
titlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforall
aspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andbackend.

18


CommonWebTechEmployed

WebTechnologiesEmployedbyFront-End
Developers

Imagesource: />Thefollowingcorewebtechnologiesareemployedbyfront-enddevelopers(consider
learningtheminthisorder):
1. UniformResourceLocators(akaURLs)
2. HypertextTransferProtocol(akaHTTP)

3. HyperTextMarkupLanguage(akaHTML)
4. CascadingStyleSheets(akaCSS)
5. JavaScriptProgrammingLanguage(akaECMAScript262)
6. JavaScriptObjectNotation(akaJSON)
7. DocumentObjectModel(akaDOM)
8. WebAPIs(akaHTML5andfriendsorBrowserAPIs)
9. WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternet
Applications(akaARIA)
Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.
Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.
HyperTextMarkupLanguage(akaHTML)

19


CommonWebTechEmployed

HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkup
languageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrender
themintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsite
semanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthan
aprogramminglanguage.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CHTMLSpec
TheelementsofHTMLfromtheLivingStandard
Globalattributes
HTML5.2fromW3C
HTMLattributereference
HTMLelementreference

TheHTMLSyntaxfromtheLivingStandard
CascadingStyleSheets(akaCSS)
CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelook
andformattingofadocumentwritteninamarkuplanguage.Althoughmostoftenused
tochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,the
languagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGand
XUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymost
websitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,
anduserinterfacesformanymobileapplications.
—Wikipedia
Mostrelevantspecifications/documentation:
AllW3CCSSSpecifications
CascadingStyleSheetsLevel2Revision2(CSS2.2)Specification
CSSreference
SelectorsLevel3
DocumentObjectModel(akaDOM)

20


CommonWebTechEmployed

TheDocumentObjectModel(DOM)isacross-platformandlanguage-independent
conventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXML
documents.Thenodesofeverydocumentareorganizedinatreestructure,calledthe
DOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusing
methodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplication
programminginterface(API).
—Wikipedia
Mostrelevantspecifications/documentation:

DocumentObjectModel(DOM)Level3EventsSpecification
DOMLivingStandard
W3CDOM4
JavaScriptProgrammingLanguage(akaECMAScript262)
JavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.It
hasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLand
CSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontent
production;themajorityofwebsitesemployitanditissupportedbyallmodernweb
browserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,
makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,and
functionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesand
regularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageor
graphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.
—Wikipedia
Mostrelevantspecifications/documentation:
ECMAScript®2017LanguageSpecification
WebAPIs(akaHTML5andfriends)
WhenwritingcodefortheWebusingJavaScript,thereareagreatmanyAPIsavailable.
Belowisalistofalltheinterfaces(thatis,typesofobjects)thatyoumaybeabletouse
whiledevelopingyourWebapporsite.
—Mozilla
Mostrelevantdocumentation:
WebAPIInterfaces
HypertextTransferProtocol(akaHTTP)

21


CommonWebTechEmployed


TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,
collaborative,hypermediainformationsystems.HTTPisthefoundationofdata
communicationfortheWorldWideWeb.
—Wikipedia
Mostrelevantspecifications:
HypertextTransferProtocol--HTTP/1.1
HTTP/2
UniformResourceLocators(akaURL)
Auniformresourcelocator(URL)(alsocalledawebaddress)isareferencetoa
resourcethatspecifiesthelocationoftheresourceonacomputernetworkanda
mechanismforretrievingit.AURLisaspecifictypeofuniformresourceidentifier(URI),
althoughmanypeopleusethetwotermsinterchangeably.AURLimpliesthemeansto
accessanindicatedresource,whichisnottrueofeveryURI.URLsoccurmost
commonlytoreferencewebpages(http),butarealsousedforfiletransfer(ftp),email
(mailto),databaseaccess(JDBC),andmanyotherapplications.
—Wikipedia
Mostrelevantspecifications:
UniformResourceLocators(URL)
URLLivingStandard
JavaScriptObjectNotation(akaJSON)
cItistheprimarydataformatusedforasynchronousbrowser/servercommunication
(AJAJ),largelyreplacingXML(usedbyAJAX).Althoughoriginallyderivedfromthe
JavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.Codefor
parsingandgeneratingJSONdataisreadilyavailableinmanyprogramming
languages.TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itis
currentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMA
standardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFC
alsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmedia
typeforJSONisapplication/json.TheJSONfilenameextensionis.json.
—Wikipedia

Mostrelevantspecifications:
IntroducingJSON
JSONAPI

22


CommonWebTechEmployed

TheJSONDataInterchangeFormat
WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternet
Applications(akaARIA)
Accessibilityreferstothedesignofproducts,devices,services,orenvironmentsfor
peoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”
(i.e.,unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistive
technology(forexample,computerscreenreaders).
—Wikipedia
AccessibleRichInternetApplications(WAI-ARIA)CurrentStatus
WebAccessibilityInitiative(WAI)
WebContentAccessibilityGuidelines(WCAG)CurrentStatus

23


Front-EndDevSkills

Front-EndDevSkills

Imagesource: />BasictoadvancedHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserskillsare
assumedforanytypeoffront-enddeveloper.

BeyondHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserdevelopmentknow-how,a
front-enddevelopercouldbeskilledinoneormoreofthefollowing:
ContentManagementSystems(akaCMS)
Node.js
Cross-BrowserTesting
Cross-PlatformTesting
UnitTesting
Cross-DeviceTesting
Accessibility/WAI-ARIA
SearchEngineOptimization(akaSEO)
InteractionorUserInterfaceDesign
UserExperience
Usability
E-commerceSystems
PortalSystems
Wireframing
CSSLayout/Grids
DOMManipulation(e.g.,jQuery)

24


Front-EndDevSkills

MobileWebPerformance
LoadTesting
PerformanceTesting
ProgressiveEnhancement/GracefulDegradation
VersionControl(e.g.,GIT)
MVC/MVVM/MV*

FunctionalProgramming
DataFormats(e.g.,JSON,XML)
DataAPIs(e.gRestfulAPI)
WebFontEmbedding
ScalableVectorGraphics(akaSVG)
RegularExpressions
ContentStrategy
Microdata/Microformats
TaskRunners,BuildTools,ProcessAutomationTools
ResponsiveWebDesign
Object-OrientedProgramming
ApplicationArchitecture
Modules
DependencyManagers
PackageManagers
JavaScriptAnimation
CSSAnimation
Charts/Graphs
UIWidgets
CodeQualityTesting
CodeCoverageTesting
CodeComplexityAnalysis
IntegrationTesting
CommandLine/CLI
TemplatingStrategies
TemplatingEngines
SinglePageApplications
XHRRequests(akaAJAX)
Web/BrowserSecurity
HTMLSemantics

BrowserDeveloperTools

25