Table of Contents - ioeduc.webitcloud.net · JavaScript Tools Static Site Generators Tools...

1.1

1.2

1.3

1.4

1.5

1.5.1

1.5.2

1.5.3

1.5.4

1.5.5

1.5.6

1.5.7

1.5.8

1.5.9

1.5.10

1.6

1.6.1

1.6.1.1

1.6.1.2

1.6.1.3

1.6.1.4

1.6.1.5

1.6.1.6

1.6.1.7

1.6.1.8

1.6.1.9

1.6.1.10

1.6.1.11

1.6.1.12

1.6.1.13

TableofContentsIntroduction

WhatIsaFront-EndDeveloper?

RecapofFront-endDevin2016

In2017expect...

PartI:TheFront-EndPractice

Front-EndJobsTitles

CommonWebTechEmployed

Front-EndDevSkills

Front-EndDevsDevelopFor...

Front-EndonaTeam

Generalist/Full-StackMyth

Front-Endinterviewquestions

Front-EndJobBoards

Front-EndSalaries

HowFDsAreMade

PartII:LearningFront-EndDev

SelfDirectedLearning

LearnInternet/Web

LearnWebBrowsers

LearnDNS

LearnHTTP/Networks

LearnWebHosting

LearnGeneralFront-EndDev

LearnUI/InteractionDesign

LearnHTML&CSS

LearnSEO

LearnJavaScript

LearnWebAnimation

LearnDOM,BOM&jQuery

LearnWebFonts

2

1.6.1.14

1.6.1.15

1.6.1.16

1.6.1.17

1.6.1.18

1.6.1.19

1.6.1.20

1.6.1.21

1.6.1.22

1.6.1.23

1.6.1.24

1.6.1.25

1.6.1.26

1.6.1.27

1.6.1.28

1.6.1.29

1.6.1.30

1.6.1.31

1.6.1.32

1.6.1.33

1.6.1.34

1.6.1.35

1.6.1.36

1.6.1.37

1.6.1.38

1.6.2

1.6.2.1

1.6.3

1.6.4

1.7

1.7.1

1.7.2

1.7.3

1.7.4

LearnAccessibility

LearnWeb/BrowserAPIs

LearnJSON

LearnJSTemplates

LearnStaticSiteGenerators

LearnComputerScienceviaJS

LearnFront-EndAppArchitecture

LearnDataAPI(i.e.JSON/REST)Design

LearnReact&Redux

LearnProgressiveWebApp

LearnJSAPIDesign

LearnWebDevTools

LearnCommandLine

LearnNode.js

LearnJSModules

LearnJSModuleloaders/bundlers

LearnPackageManagers

LearnVersionControl

LearnBuild&TaskAutomation

LearnSitePerformanceOptimization

LearnTesting

LearnHeadlessBrowsers

LearnOfflineDev

LearnWeb/Browser/AppSecurity

LearnMulti-DeviceDev(e.g.,RWD)

DirectedLearning

Front-EndSchools,Courses,&Bootcamps

Front-EndDevstoLearnFrom

Newsletters,News,&Podcasts

PartIII:Front-EndDevTools

Doc/APIBrowsingTools

SEOTools

Prototyping&WireframingTools

DiagrammingTools

3

1.7.5

1.7.6

1.7.7

1.7.8

1.7.9

1.7.10

1.7.11

1.7.12

1.7.13

1.7.14

1.7.15

1.7.16

1.7.17

1.7.18

1.7.19

1.7.20

1.7.21

1.7.22

1.7.23

1.7.24

1.7.25

1.7.26

1.7.27

1.7.28

1.7.29

1.7.30

1.7.31

1.7.32

1.7.33

1.7.34

1.7.35

1.7.36

1.7.37

HTTP/NetworkTools

CodeEditingTools

BrowserTools

HTMLTools

CSSTools

DOMTools

JavaScriptTools

StaticSiteGeneratorsTools

AccessibilityDevTools

AppFrameworks(Desktop,Mobileetc.)Tools

ProgressiveWebAppTools

ScaffoldingTools

GeneralFEDevelopmentTools

Templating/DataBindingTools

UIWidget&ComponentToolkits

DataVisualization(e.g.,Charts)Tools

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

AnimationTools

JSONTools

PlaceholderImages/TextTools

TestingTools

Front-endDataStorageTools

Module/PackageLoadingTools

Module/PackageRepo.Tools

HostingTools

ProjectManagement&CodeHosting

Collaboration&CommunicationTools

CMSHosted/APITools

BAAS(forFront-EndDevs)Tools

OfflineTools

SecurityTools

Tasking(akaBuild)Tools

DeploymentTools

4

1.7.38

1.7.39

1.7.40

1.7.41

Site/AppMonitoringTools

JSErrorMonitoringTools

PerformanceTools

ToolsforFindingTools

5

Front-EndDeveloperHandbook2017

WrittenbyCodyLindleysponsoredby—FrontendMasters

Introduction

6

Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingitin2017.

Itisspecificallywrittenwiththeintentionofbeingaprofessionalresourceforpotentialandcurrentlypracticingfront-enddeveloperstoequipthemselveswithlearningmaterialsanddevelopmenttools.Secondarily,itcanbeusedbymanagers,CTOs,instructors,andheadhunterstogaininsightsintothepracticeoffront-enddevelopment.

Thecontentofthehandbookfavorswebtechnologies(HTML,CSS,DOM,andJavaScript)andthosesolutionsthataredirectlybuiltontopoftheseopentechnologies.Thematerialsreferencedanddiscussedinthebookareeitherbestinclassorthecurrentofferingtoaproblem.

Thebookshouldnotbeconsideredacomprehensiveoutlineofallresourcesavailabletoafront-enddeveloper.Thevalueofthebookistiedupinaterse,focused,andtimelycurationofjustenoughcategoricalinformationsoasnottooverwhelmanyoneonanyoneparticularsubjectmatter.

Theintentionistoreleaseanupdatetothecontentyearly.

Thehandbookisdividedintothreeparts.

PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.

PartII:LearningFront-EndDevelopmentParttwoidentifiesself-directedanddirectresourcesforlearningtobecomeafront-enddeveloper.

PartIII:Front-EndDevelopmentToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.

Downloada.pdf,.epub,or.mobifilefrom:

https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

Introduction

7

Contributecontent,suggestions,andfixesongithub:

https://github.com/FrontendMasters/front-end-handbook-2017

ThisworkislicensedunderaCreativeCommonsAttribution-NonCommercial-NoDerivs3.0UnportedLicense.

Introduction

8

WhatIsaFront-EndDeveloper?Front-endwebdevelopment,alsoknownasclient-sidedevelopmentisthepracticeofproducingHTML,CSSandJavaScriptforawebsiteorWebApplicationsothatausercanseeandinteractwiththemdirectly.Thechallengeassociatedwithfrontenddevelopmentisthatthetoolsandtechniquesusedtocreatethefrontendofawebsitechangeconstantlyandsothedeveloperneedstoconstantlybeawareofhowthefieldisdeveloping.

Theobjectiveofdesigningasiteistoensurethatwhentheusersopenupthesitetheyseetheinformationinaformatthatiseasytoreadandrelevant.Thisisfurthercomplicatedbythefactthatusersnowusealargevarietyofdeviceswithvaryingscreensizesandresolutionsthusforcingthedesignertotakeintoconsiderationtheseaspectswhendesigningthesite.Theyneedtoensurethattheirsitecomesupcorrectlyindifferentbrowsers(cross-browser),differentoperatingsystems(cross-platform)anddifferentdevices(cross-device),whichrequirescarefulplanningonthesideofthedeveloper.

https://en.wikipedia.org/wiki/Front-end_web_development

HTML,CSS,&JavaScript:

Afront-enddeveloperarchitectsanddevelopswebsitesandapplicationsusingwebtechnologies(i.e.,HTML,CSS,DOM,andJavaScript),whichrunonthewebplatformoractascompilationinputfornon-webplatformenvironments(i.e.,NativeScript).

Imagesource:https://www.upwork.com/hiring/development/front-end-developer/

Typically,apersonentersintothefieldoffront-enddevelopmentbylearningtodevelopHTML,CSS,andJScode,whichrunsinawebbrowser,headlessbrowser,WebView,orascompilationinputforanativeruntimeenvironment.Thesefourruntimesscenariosare

WhatIsaFront-EndDeveloper?

9

explainedbelow.

WebBrowsers

Awebbrowserissoftwareusedtoretrieve,present,andtraverseinformationontheWWW.Typically,browsersrunonadesktoporlaptopcomputer,tablet,orphone,butasoflateabrowsercanbefoundonjustaboutanything(i.e,onafridge,incars,etc.).

Themostcommonwebbrowsersare(showninorderofmostusedfirst):

ChromeInternetExplorer(Note:notEdge,referringtoIE9toIE11)FirefoxSafari

HeadlessBrowsers

Headlessbrowsersareawebbrowserwithoutagraphicaluserinterfacethatcanbecontrolledfromacommandlineinterfaceprogrammaticallyforthepurposeofwebpageautomation(e.g.,functionaltesting,scraping,unittesting,etc.).Thinkofheadlessbrowsersasabrowserthatyoucanrunfromthecommandlinethatcanretrieveandtraversewebpages.

Themostcommonheadlessbrowsersare:

PhantomJSslimerjstrifleJS

Webviews

WebviewsareusedbyanativeOS,inanativeapplication,torunwebpages.Thinkofawebviewlikeaniframeorasingletabfromawebbrowserthatisembeddedinanativeapplicationrunningonadevice(e.g.,iOS,android,windows).

Themostcommonsolutionsforwebviewdevelopmentare:

Cordova(typicallyfornativephone/tabletapps)NW.js(typicallyusedfordesktopapps)Electron(typicallyusedfordesktopapps)

NativefromWebTech

Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-enddeveloperstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asoflate,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.,CSS

WhatIsaFront-EndDeveloper?

10

andJavaScript),withoutwebengines,tocreatenativeapplications.

Someexamplesoftheseenvironmentsare:

NativeScriptReactNative

NOTES:

Makesureyouareclearwhatwhatexactlyismeantbythe"webplatform".Read,"TheWebplatform:whatitis"andreadthe,"OpenWebPlatform"Wikipediapage.

WhatIsaFront-EndDeveloper?

11

RecapofFront-endDevelopmentin2016TheyearoftheUIcomponent,andtreeofUIcomponents,forbuildingcomplexUI's.Nolongermainstreamdevelopmentblasphemy:componentsbeingconstructedfromasinglefile,potentiallycontainHTML,CSS,andJS,INONEFILE!React,Redux,Webpack,ECMAScript2015(akaES6),andBabelgainmassiveadoption.Thesesolutionsrisetothetopofallthepollsasthemostusedtech.Developersrealized,inmostcases,HTML5hybridmobiledevelopmentviawebviewsdoesn'tprovideenoughwinswhenbuildingnativeapps.ReactNativeandNativeScriptstarttoreplacemobileHTML5hybridwebviewdevelopment.ManyabandonGulpforNPMscripts,butGulpremainspopular.SASSremainsapopulartool,whilePostCSS(+CSSNext)gainsground.Linting/HintingHTML,CSS,andJavaScriptisathingmostdevelopersdo(ESlintreplacesJShint&JSCSmergesintoESLint).AtrendofdevelopersabandoningSublimeandAtomforVisualStudioCodebegins.jQueryremains,butusage/interestisdeclining.jQuery3wasreleased,muchlikeatreefallinginaforestthatnobodyhears.Vue.jscontinuestogainconverts.Deservinglyso!JavaScriptfunctionalprogramming&patternsgetalotofattention.Offlinedevelopment&ProgressiveWebAppsgomainstream.Microsoftshowsupandcontributes.Developingnativeapplicationsforwindows,OSX,andlinuxusingthingslikeNW.jsandElectronviawebtechnologiesbecomesathing.Angular2(inthefutureaka"Angular")getsoffthepotandmostrealizeitwillneverbeasmainstreamasAngular1.JavaScriptbroadlyremainsatthecenterofsoftwaretechnologies.Moredevelopersstartcaringabouttooling(e.g.automation)andtesting.Staticsitegeneratorsaretakenseriously.CSSGridexcitementgrowsandthefuturelooksbright.NPMgetssomecompetitionfromYarn.ThenextevolutionofReact-likesolutionsshowsupviaPreact,Deku,Rax,andinfernoshowcasingevolutionwithoutmuchAPIchange.MostlypeoplelearntoacceptJSX,andnowtheycan'timaginenotusingit.AworkableCSSmodulepattern(CSSencapsulation)isactualizedandused,thusCSSinJSbecomesaviablesolutionformany.MorepeopleturningtoUIfunctional/integrationtestingincludingconceptslikevisualCSS&RWDregressiontesting.

RecapofFront-endDevin2016

12

ThedaysofbattlinginconsistentbrowserAPI'sarealmostbehindusduetoamassivedeclineinusageanddevelopmentforolderversionsofIE.Mosteveryonerealizedtheywillhavetohaveamulti-devicestrategyplanwhendevelopingforthewebMoredevelopers,fromotherlanguages,continuetofloodtheJavaScriptspacebringingwiththemthingsliketypecheckingandanobsessionwithclasssyntaxandOOPconcepts.Front-enddevsareintroducedtoHotModulereplacementtechniquesandtimetraveldebugging.MorewaitingforanativeJavaScriptbrowsermoduleloader.EnforcingCSSandJavaScriptstyleconventionsbecomesmoreimportant(consideringES3toES6codeandCSSpre-processorssyntacticalvariations)AsmallbutnoticeablenumberofdevelopersarestartingtochooseElmoverJavaScript.TypeScriptgetssomeserioususeandfanboys.http://aurelia.io/becomesthesmartchoiceforenterprisedevelopers(i.e.support!).WebpackgetsitsacttogetherandsolidifiesispositionoverthesuperiorJSPMsolution.HTTPS,yeah,we'reseriousaboutthat.BASHonwindowshappens.ThenotificationsAPIgetsusedandabusedforchromeusers,butonlyafteryougiveitpermission.Firebugofficiallydead.CSS20yearsyoungin2016.Immutabilityconceptsrunrapid.

RecapofFront-endDevin2016

13

In2017expect...WebAssembly,mightjustpeak.importmightjustbeusablein<script></script>UniversalJavaScriptsolutionswillcontinuetorisethatpayhomage/respecttothedaysofserverdeliveredfront-ends(i.e.htmltotheclient).ReactiveprogrammingcontinuestothriveintheJavaScriptscene.(seeMobXandRxJS).React,moresotheconcept,willdominate.Reactitselfwillbecompletelyre-written(seeReactFiber)orevolve(seeInferno).AngularfoundSEMVERsoAngular4(even5)isontheroadmapfor2017.Areturntosimplewebsitesmayhappen,web1.0retro,butwiththehelpof2017tools(i.e.staticsitegeneration)RESTfulJSONAPIswillgetmorecompetition(seeGraphQL)CouldbeabanneryearforVue.js.MoredevswillabandontraditionalCMSsolutionsforstaticsitegenerators&APICMStools.MorepeoplewillmovefromSasstoPostCSS+cssnext.LotsmoreHTTP2andHTTPS.Webcomponentswillcontinuetolurkandwaitforsignificanttractionbydevelopersthatmightnevercometobe.Thenoframework,framework,factionwillgainmomentum(seeSvelte).JavaScriptwillsettle,andhopefully,CSSwilleruptandeveryonewillcryfatigueuntilitsettles.Hatredforappsstorewillgrow,whiletheopenwebhasnomemoryofwrongdoing.Reduxwillcontinuetogetstiffcompetition(seemobx).YARNwillwinmoreusers.Theideaof“front-endapps”,“ThickClientapps”,“Staticapps”,“NoBackendapp”,“SPA's”,“Front-enddrivenapp”mightgetboileddowntotheterm/conceptcalled"JAMStack".

In2017expect...

14

PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.

PartI:TheFront-EndPractice

15

Front-EndJobsTitlesBelowisalistanddescriptionofvariousfront-endjobtitles.Thecommon,ormostused(i.e.,generic),titleforafront-enddeveloperis,"front-enddeveloper"or"front-endengineer".Notethatanyjobthatcontainstheword"front-end","client-side","webUI","HTML","CSS",or"JavaScript"typicallyinfersthatapersonhassomedegreeofHTML,CSS,DOM,andJavaScriptprofessionalknowhow.

Front-EndDeveloper

ThegenericjobtitlethatdescribesadeveloperwhoisskilledtosomedegreeatHTML,CSS,DOM,andJavaScriptandimplementingthesetechnologiesonthewebplatform.

Front-EndEngineer(akaJavaScriptDeveloperorFull-stackJavaScriptDeveloper)

Thejobtitlegiventoadeveloperwhocomesfromacomputerscience,engineering,backgroundandisusingtheseskillstoworkwithfront-endtechnologies.Thisroletypicallyrequiresacomputersciencedegreeandyearsofsoftwaredevelopmentexperience.Whentheword"JavaScriptApplication"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldbeanadvancedJavaScriptdeveloperpossessingadvancedprogramming,softwaredevelopment,andapplicationdevelopmentskills(i.ehasyearsofexperiencebuildingfront-endapplications).

CSS/HTMLDeveloper

Thefront-endjobtitlethatdescribesadeveloperwhoisskilledatHTMLandCSS,excludingJavaScriptandApplicationknowhow.

Front-EndWebDesigner

Whentheword"Designer"isincludedinthejobtitle,thiswilldenotethatthedesignerwillpossesfront-endskills(i.e.,HTML&CSS)butalsoprofessionaldesign(VisualDesignandInteractionDesign)skills.

Front-EndJobsTitles

16

Web/Front-EndUserInterface(akaUI)Developer/Engineer

Whentheword"Interface"or"UI"isincludedinthejobtitle,thiswilldenotethatthedevelopershouldpossesinteractiondesignskillsinadditiontofront-enddeveloperskillsorfront-endengineeringskills.

Mobile/TabletFront-EndDeveloper

Whentheword"Mobile"or"Tablet"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasexperiencedevelopingfront-endsthatrunonmobileortabletdevices(eithernativelyoronthewebplatform,i.e.,inabrowser).

Front-EndSEOExpert

Whentheword"SEO"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiestowardsanSEOstrategy.

Front-EndAccessibilityExpert

Whentheword"Accessibility"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencecraftingfront-endtechnologiesthatsupportaccessibilityrequirementsandstandards.

Front-EndDev.Ops

Whentheword"DevOps"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencewithsoftwaredevelopmentpracticespertainingtocollaboration,integration,deployment,automation,andmeasurement.

Front-EndTesting/QA

Whentheword"Testing"or"QA"isincludedinthejobtitle,thiswilldenotethatthedeveloperhasextensiveexperiencetestingandmanagingsoftwarethatinvolvesunittesting,functionaltesting,usertesting,andA/Btesting.

Front-EndJobsTitles

17

Notethatifyoucomeacrossthe"FullStack"orthegeneric"WebDeveloper"termsinjobtitlesthesewordsmaybeusedbyanemployertodescribearolethatisresponsibleforallaspectsofweb/appdevelopment,i.e.,bothfront-end(potentiallyincludingdesign)andback-end.

Front-EndJobsTitles

18

WebTechnologiesEmployedbyFront-EndDevelopers

Imagesource:http://www.2n2media.com/compare-front-end-development-and-back-end-development

Thefollowingcorewebtechnologiesareemployedbyfront-enddevelopers(considerlearningtheminthisorder):

1. UniformResourceLocators(akaURLs)2. HypertextTransferProtocol(akaHTTP)3. HyperTextMarkupLanguage(akaHTML)4. CascadingStyleSheets(akaCSS)5. JavaScriptProgrammingLanguage(akaECMAScript262)6. JavaScriptObjectNotation(akaJSON)7. DocumentObjectModel(akaDOM)8. WebAPIs(akaHTML5andfriendsorBrowserAPIs)9. WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternet

Applications(akaARIA)

Thesetechnologiesaredefinedbelowwiththerelevantdocumentationandspecifications.Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.

HyperTextMarkupLanguage(akaHTML)

CommonWebTechEmployed

19

HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.

—Wikipedia

Mostrelevantspecifications/documentation:

AllW3CHTMLSpecTheelementsofHTMLfromtheLivingStandardGlobalattributesHTML5.2fromW3CHTMLattributereferenceHTMLelementreferenceTheHTMLSyntaxfromtheLivingStandard

CascadingStyleSheets(akaCSS)

CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.

—Wikipedia

Mostrelevantspecifications/documentation:

AllW3CCSSSpecificationsCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSreferenceSelectorsLevel3

DocumentObjectModel(akaDOM)

CommonWebTechEmployed

20

TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).

—Wikipedia

Mostrelevantspecifications/documentation:

DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4

JavaScriptProgrammingLanguage(akaECMAScript262)

JavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.

—Wikipedia

Mostrelevantspecifications/documentation:

ECMAScript®2017LanguageSpecification

WebAPIs(akaHTML5andfriends)

WhenwritingcodefortheWebusingJavaScript,thereareagreatmanyAPIsavailable.Belowisalistofalltheinterfaces(thatis,typesofobjects)thatyoumaybeabletousewhiledevelopingyourWebapporsite.

—Mozilla

Mostrelevantdocumentation:

WebAPIInterfaces

HypertextTransferProtocol(akaHTTP)

CommonWebTechEmployed

21

TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.

—Wikipedia

Mostrelevantspecifications:

HypertextTransferProtocol--HTTP/1.1HTTP/2

UniformResourceLocators(akaURL)

Auniformresourcelocator(URL)(alsocalledawebaddress)isareferencetoaresourcethatspecifiesthelocationoftheresourceonacomputernetworkandamechanismforretrievingit.AURLisaspecifictypeofuniformresourceidentifier(URI),althoughmanypeopleusethetwotermsinterchangeably.AURLimpliesthemeanstoaccessanindicatedresource,whichisnottrueofeveryURI.URLsoccurmostcommonlytoreferencewebpages(http),butarealsousedforfiletransfer(ftp),email(mailto),databaseaccess(JDBC),andmanyotherapplications.

—Wikipedia

Mostrelevantspecifications:

UniformResourceLocators(URL)URLLivingStandard

JavaScriptObjectNotation(akaJSON)

cItistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.

—Wikipedia

Mostrelevantspecifications:

IntroducingJSONJSONAPI

CommonWebTechEmployed

22

TheJSONDataInterchangeFormat

WebContentAccessibilityGuidelines(akaWCAG)&AccessibleRichInternetApplications(akaARIA)

Accessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.,unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).

—Wikipedia

AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus

CommonWebTechEmployed

23

Front-EndDevSkills

Imagesource:http://blog.naustud.io/2015/06/baseline-for-modern-front-end-developers.html

BasictoadvancedHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserskillsareassumedforanytypeoffront-enddeveloper.

BeyondHTML,CSS,DOM,JavaScript,HTTP/URL,andbrowserdevelopmentknow-how,afront-enddevelopercouldbeskilledinoneormoreofthefollowing:

ContentManagementSystems(akaCMS)Node.jsCross-BrowserTestingCross-PlatformTestingUnitTestingCross-DeviceTestingAccessibility/WAI-ARIASearchEngineOptimization(akaSEO)InteractionorUserInterfaceDesignUserExperienceUsabilityE-commerceSystemsPortalSystemsWireframingCSSLayout/GridsDOMManipulation(e.g.,jQuery)

Front-EndDevSkills

24

MobileWebPerformanceLoadTestingPerformanceTestingProgressiveEnhancement/GracefulDegradationVersionControl(e.g.,GIT)MVC/MVVM/MV*FunctionalProgrammingDataFormats(e.g.,JSON,XML)DataAPIs(e.gRestfulAPI)WebFontEmbeddingScalableVectorGraphics(akaSVG)RegularExpressionsContentStrategyMicrodata/MicroformatsTaskRunners,BuildTools,ProcessAutomationToolsResponsiveWebDesignObject-OrientedProgrammingApplicationArchitectureModulesDependencyManagersPackageManagersJavaScriptAnimationCSSAnimationCharts/GraphsUIWidgetsCodeQualityTestingCodeCoverageTestingCodeComplexityAnalysisIntegrationTestingCommandLine/CLITemplatingStrategiesTemplatingEnginesSinglePageApplicationsXHRRequests(akaAJAX)Web/BrowserSecurityHTMLSemanticsBrowserDeveloperTools

Front-EndDevSkills

25

Front-EndDevelopersDevelopFor...Afront-enddevelopercraftsHTML,CSS,andJSthattypicallyrunsonthewebplatform(e.g.awebbrowser)deliveredfromoneofthefollowingoperatingsystems(akaOSs):

AndroidChromiumiOSOSXUbuntu(orsomeflavorofLinux)WindowsPhoneWindows

Theseoperatingsystemstypicallyrunononeormoreofthefollowingdevices:

DesktopcomputerLaptop/netbookcomputerMobilephoneTabletTVWatchThings(i.e.,anythingyoucanimagine,car,refrigerator,lights,thermostat,etc.)

Front-EndDevsDevelopFor...

26

Imagesource:https://www.enterpriseirregulars.com/104084/roundup-internet-things-forecasts-market-estimates-2015/

Generallyspeaking,front-endtechnologiescanrunontheaforementionedoperatingsystemsanddevicesusingthefollowingruntimewebplatformscenarios:

Awebbrowser(examples:Chrome,IE,Safari,Firefox).Aheadlessbrowser(examples:phantomJS).AWebView/browsertab(thinkiframe)embeddedwithinanativeapplicationasaruntimewithbridgetonativeAPIs.WebViewapplicationstypicallycontainaUIconstructedfromwebtechnologies.(i.e.,HTML,CSS,andJS).(examples:ApacheCordova,NW.js,Electron)AnativeapplicationbuiltfromwebtechthatisinterpretedatruntimewithabridgetonativeAPIs.TheUIwillmakeuseofnativeUIparts(e.g.,iOSnativecontrols)notwebtechnologies.(examples:NativeScript,ReactNative)

Front-EndDevsDevelopFor...

27

Front-EndonaTeamAfront-enddeveloperistypicallyonlyoneplayeronateamthatdesignsanddevelopswebsites,webapplications,ornativeapplicationsrunningfromwebtechnologies.

Abarebonesdevelopmentteamforbuildingprofessionalwebsitesorsoftwareapplicationforthewebplatformwilltypically,minimally,containthefollowingroles.

VisualDesigner(i.e.,fonts,colors,spacing,emotion,visualsconcepts&themes)UI/InteractionDesigner/InformationArchitect(i.e.,wireframes,specifyingalluserinteractionsandUIfunctionality,structuringinformation)Front-EndDeveloper(i.e.,writescodethatrunsinclient/ondevice)Back-EndDeveloper(i.e.,writescodethatrunsonserver)

Therolesareorderedaccordingtooverlappingskills.Afront-enddeveloperwilltypicallyhaveagoodhandleonUI/Interactiondesignaswellasback-enddevelopment.Itisnotuncommonforteammemberstofillmorethanonerolebytakingontheresponsibilitiesofanover-lappingrole.

Itisassumedthattheteammentionedaboveisbeingdirectedbyaprojectleadorsomekindofproductowner(i.e.,stakeholder,projectmanager,projectlead,etc.)

Alargerwebteammightincludethefollowingrolesnotshownabove:

SEOStrategistsDevOpsEngineersAPIDevelopersDatabaseAdministratorsQAEngineers/Testers

NOTES:

Asmalltrendseemstobeoccurringwherea,"full-stackdeveloper"takesontheresponsibilitiesofbothafront-endandback-enddeveloper.

Front-EndonaTeam

28

Generalist/Full-StackMyth

Imagesource:http://andyshora.com/full-stack-developers.html

Therolesrequiredtodesignanddevelopawebsolutionrequireadeepskillsetandvastexperienceintheareaofvisualdesign,UI/interactiondesign,front-enddevelopment,andback-enddevelopment.Anypersonwhocanfilloneormoreofthese4rolesataprofessionallevelisanextremelyrarecommodity.

Pragmatically,youshouldseektobe,orseektohire,anexpertinoneoftheseroles(i.e.VisualDesign,InteractionDesign/IA,Front-endDev,Back-endDev).Thosewhoclaimtooperateatanexpertlevelatoneormoreoftheserolesareexceptionallyrareandmorethanlikelymythical.

However,giventhatJavaScripthasinfiltratedalllayersofatechnologystack(e.g.React,node.js,express,couchDB,gulp.jsetc...)findingafull-stackJSdeveloperwhocancodethefront-endandback-endisbecominglessmythical.Typically,thesefullstackdevelopersonlydealwithJavaScript.Adeveloperwhocancodethefront-end,back-end,API,anddatabaseisn'tasabsurdasitoncewas(excludingvisualdesign,interactiondesign,andCSS).Stillmythicalinmyopinion,butnotasuncommonasitoncewas.Thus,Iwouldn'trecommenda

Generalist/Full-StackMyth

29

developersetouttobecomea"fullstack"developer.Inraresituationsitcanwork.But,asageneralconceptforbuildingacareerasaFront-endDeveloper,I'dfocusonfront-endtechnologies.

NOTES:

Theterm"Full-Stack"developerhascometotakeonseveralmeanings.Somany,thatnotonemeaningisclearwhenthetermisused.Justconsidertheresultsfromthetwosurveysshownbelow.Theseresultswouldleadonetobelievethatthemajorityofdevelopersarefull-stackdevelopers.But,inmyalmost20yearsofexperience,thisisanythingbutthecase.

Imagesource:https://medium.freecodecamp.com/we-asked-15-000-people-who-they-are-and-how-theyre-learning-to-code-4104e29b2781#.ngcpn8nlz

Generalist/Full-StackMyth

30

Imagesource:http://stackoverflow.com/research/developer-survey-2016#developer-profile-developer-occupations

Generalist/Full-StackMyth

31

Front-EndInterviewsQuestionsyoumaygetasked:

10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuiz

Questionsyouask:

Anopensourcelistofdeveloperquestionstoaskprospectiveemployers

Preparing:

PreparingforaFront-EndWebDevelopmentInterviewin2017InterviewCake[$]Crackingthefront-endinterview

Front-Endinterviewquestions

32

Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.

angularjobs.comauthenticjobs.comcareers.stackoverflow.comcss-tricks.com/jobscodepen.io/jobs/frontenddeveloperjob.comglassdoor.comjobs.emberjs.comjobs.github.comweworkremotely.comfronthat.com

NOTES:

Lookingforaremotefront-endJob,checkouttheseRemote-friendlycompanies

Front-EndJobBoards

33

Front-EndSalariesThenationalaverageintheU.Sforamid-levelfront-enddeveloperisaround$75k.Ofcoursewhenyoufirststartexpecttoenterthefieldataround35kdependinguponlocationandportfolio.

Imagesource:http://intersog.com/blog/chicago-tech-salary-guide-2015/

NOTES:

Alead/seniorfront-enddeveloper/engineercanpotentiallylivewherevertheywant(i.e.,workremotely)andmakeover$150kayear(visitangel.co,sign-up,reviewfront-endjobsover$150korexaminethesalaryrangesonStackOverflowJobs).

Front-EndSalaries

34

Front-EndSalaries

35

HowFront-EndDevelopersAreMade

Imagesource:http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end-developer-infographic-Secondary.jpg

Howexactlydoesonebecomeafront-enddeveloper?Well,it'scomplicated.Stilltodayyoucan'tgotocollegeandexpecttograduatewithadegreeinfront-endengineering.And,Irarelyhearoformeetfront-enddeveloperswhosufferedthroughwhatislikelyadeprecatedcomputersciencedegreeorgraphicdesigndegreetoendupwritingHTML,CSS,andJavaScriptprofessionally.Frommyperspective,mostofthepeopleworkingonthefront-endtoday,generallyseemtobeselftaughtorcomefromanonaccreditedprogram,course,orbootcamp.

Ifyouweretosetouttodaytobecomeafront-enddeveloperIwouldlooselystrivetofollowtheprocessoutlinedbelow(Parttwo,"LearningFront-EndDev",divesintomoredetailsonlearningresources).

1. Learn,roughly,howthewebworks.Makesureyouknowthe"what"and"where"ofDomains,DNS,URLs,HTTP,networks,browsers,servers/hosting,JSON,dataAPIs,HTML,CSS,DOM,andJavaScript.Don'tdivedeeponanything,justunderstandthepartsandlooselyhowtheyfittogether.Focusonthehighleveloutlinesforfront-endarchitectures.Startwithsimplewebpagesandbrieflystudyfront-endapplications(aka

HowFDsAreMade

36

SPAs)2. LearnHTML3. LearnCSS4. LearnJavaScript5. LearnDOM6. LearnJSONanddataAPIs7. Learnthefundamentalsofuserinterfacedesign(i.e.UIpatterns,interactiondesign,

userexperiencedesign,andusability).8. LearnCLI/commandline9. Learnthepracticeofsoftwareengineering(i.e.,Applicationdesign/architecture,

templates,Git,testing,monitoring,automating,codequality,developmentmethodologies).

10. Getopinionatedandcustomizeyourtoolboxwithwhatevermakessensetoyourbrain(e.g.Webpack,React,andRedux).

11. LearnNode.js

Ashortwordofadviceonlearning.Learntheactualunderlyingtechnologies,beforelearningabstractions.Don'tlearnjQuery,learntheDOM.Don'tlearnSASS,learnCSS.Don'tlearnHAML,learnHTML.Don'tlearnCoffeeScript,learnJavaScript.Don'tlearnHandlebars,learnJavaScriptES6templates.Don'tjustuseBootstrap,learnUIpatterns.

Whengettingyourstart,youshouldfearmostthingsthatconcealcomplexity.Abstractionsinthewronghandscangivetheappearanceofadvancedskills,whileallthetimehidingthefactthatadeveloperhasaninferiorunderstandingofthebasicsorunderlyingconcepts.

Theremainingpartsofthisbookwillpointthereadertopotentialresourcesthatcouldbeusedtolearnfront-enddevelopmentandthetoolsusedwhenpracticingfront-enddevelopment.Itisassumedthatonthisjourneyyouarenotonlylearning,butalsodoingasyoulearnandinvestigatetools.Somesuggestonlydoingtolearn.Whileotherssuggestonlylearningaboutdoing.Isuggestyoufindamixofboththatmatcheshowyourbrainworksanddothat.But,forsure,itisamix!So,don'tjustreadaboutit,doit.Learn,do.Learn,do.Repeatindefinitelybecausethingschangefast.Thisiswhylearningthefundamentals,andnotabstractions,aresoimportant.

Latelyalotofnon-accredited,expensive,front-endcodeschools/bootcampshaveemerged.Theseavenuesofbecomingafront-enddeveloperaretypicallyteacherdirectedcourses,thatfollowamoretraditionalstyleoflearning,fromanofficialinstructor(i.e.,syllabus,test,quizzes,projects,teamprojects,grades,etc.).Keepinmind,ifyouareconsideringanexpensivetrainingprogram,thisistheweb!Everythingyouneedtolearnisonthewebforthetaking,costinglittletonothing.However,ifyouneedsomeonetotellyouhowtotakeandlearnwhatisactuallyfree,andholdyouaccountableforlearningit,youmightconsideran

HowFDsAreMade

37

organizedcourse.Otherwise,Iamnotawareofanyotherprofessionthatispracticallyfreeforthetakingwithaninternetconnection,ahundreddollarsamonthforscreencastingmemberships,andaburningdesireforknowledge.

Ifyouwanttogetgoingtoday,considerconsumingoneormoreofthefollowingself-drivenresourcesbelow:

2016/2017MUST-KNOWWEBDEVELOPMENTTECH[watch]ABeginner'sGuidetoFront-EndProgramming[read&watch][freeto$]BecomeaFront-EndWebDeveloper[watch][$]Front-EndCurriculum[read]freeCodeCamp[interact]So,YouWanttobeaFront-EndEngineer[watch]FrontEndWebDevelopmentCareerKickstart[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]IntroductiontoWebDevelopment[watch][$]FoundationsofFront-EndWebDevelopment[watch][$]LeanFront-EndEngineering[watch][$]ABaselineforFront-End[JS]Developers:2015[read]LearnFrontEndWebDevelopment[watch][$]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]

HowFDsAreMade

38

PartII:LearningParttwoidentifiesself-directed(i.e.,atyourownpacewhenyouwant)anddirected(i.e.,formalclassroomspecifictimesanddates)resourcesforlearningtobecomeafront-enddeveloper.

Notethatjustbecausealearningresourceislisted,oracategoryoflearningisdocumented,Iamnotsuggestingthatafront-enddeveloperlearneverything.Thatwouldbeabsurd.Chooseyourownsliceofexpertisewithintheprofession.I'mprovidingthepossibilitiesofwhatcouldbemasteredinthefield.

PartII:LearningFront-EndDev

39

SelfDirectedLearningThissectionfocusesonfreeandpaidresources(videotraining,books,etc.)thatanindividualcanusetodirecttheirownlearningprocessandcareerasafront-enddeveloper.

Thelearningresourcesmentionedwillincludebothfreeandpaidmaterial.Paidmaterialwillbeindicatedwith[$].

Theauthorbelievesthatanyonewiththerightdeterminationanddedicationcanteachthemselveshowtobeafront-enddeveloper.Allthatisrequiredisacomputerconnectedtothewebandsomecashforbooksandonlinevideotraining.

Belowareafewvideolearningoutlets(techfocused)Igenerallyrecommendpullingcontentfrom:

codecademy.comcodeschool.comegghead.ioeventedmind.comFrontendMastersFreecodecampKhanAcademylaracasts.comlynda.com[careful,qualityvaries]mijingo.compluralsight.com[careful,qualityvaries]Treehousetutsplus.comUdacity[careful,qualityvaries]

SelfDirectedLearning

40

LearnInternet/WebTheInternetisaglobalsystemofinterconnectedcomputernetworksthatusetheInternetprotocolsuite(TCP/IP)tolinkseveralbilliondevicesworldwide.Itisanetworkofnetworksthatconsistsofmillionsofprivate,public,academic,business,andgovernmentnetworksoflocaltoglobalscope,linkedbyabroadarrayofelectronic,wireless,andopticalnetworkingtechnologies.TheInternetcarriesanextensiverangeofinformationresourcesandservices,suchastheinter-linkedhypertextdocumentsandapplicationsoftheWorldWideWeb(WWW),electronicmail,telephony,andpeer-to-peernetworksforfilesharing.

—Wikipedia

WhatistheInternet?[watch]HowDoestheInternetwork-W3C[read]HowDoestheInternetWork?-StanfordPaper[read]HowtheInternetWorks[watch]HowtheInternetWorksin5Minutes[watch]HowtheWebWorks[watch][$]WhatIstheInternet?Or,"YouSayTomato,ISayTCP/IP"[read]

LearnInternet/Web

41

LearnWebBrowsersAwebbrowser(commonlyreferredtoasabrowser)isasoftwareapplicationforretrieving,presenting,andtraversinginformationresourcesontheWorldWideWeb.AninformationresourceisidentifiedbyaUniformResourceIdentifier(URI/URL)andmaybeawebpage,image,videoorotherpieceofcontent.Hyperlinkspresentinresourcesenableuserseasilytonavigatetheirbrowserstorelatedresources.AlthoughbrowsersareprimarilyintendedtousetheWorldWideWeb,theycanalsobeusedtoaccessinformationprovidedbywebserversinprivatenetworksorfilesinfilesystems.

—Wikipedia

Themostcommonlyusedbrowsers(onanydevice)are:

1. Chrome(engine:Blink+V8)2. Firefox(engine:Gecko+SpiderMonkey)3. InternetExplorer(engine:Trident+Chakra)4. Safari(engine:Webkit+SquirrelFish)

Imagesource:http://gs.statcounter.com/#all-browser_version_partially_combined-ww-monthly-201501-201601-bar

EvolutionofBrowsers&WebTechnologies(i.e.,APIs)

LearnWebBrowsers

42

evolutionoftheweb.com[read]Timelineofwebbrowsers[read]

TheMostCommonlyUsedHeadlessBrowserAre:

PhantomJS(engine:Webkit+SquirrelFish)SlimerJS(engine:Gecko+SpiderMonkey)TrifleJS(engine:Trident+Chakra)

HowBrowsersWork

20ThingsILearnedAboutBrowsersandtheWeb[read]FastCSS:HowBrowsersLayOutWebPages[read]HowBrowsersWork:Behindthescenesofmodernwebbrowsers[read]SoHowDoestheBrowserActuallyRenderaWebsite[watch]Whatforceslayout/reflow[read]WhatEveryFrontendDeveloperShouldKnowAboutWebpageRendering[read]

Imagesource:http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

OptimizingforBrowsers:

BrowserRenderingOptimization[watch]WebsitePerformanceOptimization[watch]

ComparingBrowsers

ComparisonofWebBrowsers[read]

BrowserHacks

LearnWebBrowsers

43

browserhacks.com[read]

DevelopingforBrowsers

Inthepast,front-enddevelopersspentalotoftimemakingcodeworkinseveraldifferentbrowsers.Thiswasonceabiggerissuethanitistoday.Today,abstractions(e.g.,jQuery,React,Post-CSS,Babeletc...)combinedwithmodernbrowsersmakebrowserdevelopmentfairlyeasy.Thenewchallengeisnotwhichbrowsertheuserwilluse,butonwhichdevicetheywillrunthebrowser.

EvergreenBrowsers

Thelatestversionsofmostmodernbrowsersareconsideredevergreenbrowsers.Thatis,intheorytheyaresupposetoautomaticallyupdatethemselvessilentlywithoutpromptingtheuser.Thismovetowardsselfupdatingbrowsershasbeeninreactiontotheslowprocessofeliminatingolderbrowsersthatdonotauto-update.

PickingaBrowser

Asoftoday,mostfront-enddevelopersuseChromeand"ChromeDevTools"todevelopfront-endcode.However,themostusedmodernbrowsersallofferaflavorofdevelopertools.Pickingonetousefordevelopmentisasubjectivechoice.Themoreimportantissueisknowingwhichbrowsers,onwhichdevices,youhavetosupportandthentestingappropriately.

ADVICE:

IsuggestusingChromebecausethedevelopertoolsareconsistentlyimprovingandatthistimecontainthemostrobustfeatures.

1

1

LearnWebBrowsers

44

LearnDomainNameSystem(akaDNS)TheDomainNameSystem(DNS)isahierarchicaldistributednamingsystemforcomputers,services,oranyresourceconnectedtotheInternetoraprivatenetwork.Itassociatesvariousinformationwithdomainnamesassignedtoeachoftheparticipatingentities.Mostprominently,ittranslatesdomainnames,whichcanbeeasilymemorizedbyhumans,tothenumericalIPaddressesneededforthepurposeofcomputerservicesanddevicesworldwide.TheDomainNameSystemisanessentialcomponentofthefunctionalityofmostInternetservicesbecauseitistheInternet'sprimarydirectoryservice.

—Wikipedia

Imagesource:http://www.digital-digest.com/blog/DVDGuy/wp-content/uploads/2011/11/how_dns_works.jpg

DNSExplained[watch]HowDNSWorks[read]TheInternet:IPAddressesandDNS[watch]

LearnDNS

45

LearnDNS

46

LearnHTTP/Networks(IncludingCORS&WebSockets)

HTTP-TheHypertextTransferProtocol(HTTP)isanapplicationprotocolfordistributed,collaborative,hypermediainformationsystems.HTTPisthefoundationofdatacommunicationfortheWorldWideWeb.

—Wikipedia

CORS-Cross-originresourcesharing(CORS)isamechanismthatallowsrestrictedresources(e.g.,fonts)onawebpagetoberequestedfromanotherdomainoutsidethedomainfromwhichtheresourceoriginated.

—Wikipedia

WebSockets-WebSocketisaprotocolprovidingfull-duplexcommunicationchannelsoverasingleTCPconnection.TheWebSocketprotocolwasstandardizedbytheIETFasRFC6455in2011,andtheWebSocketAPIinWebIDLisbeingstandardizedbytheW3C.

—Wikipedia

HTTPSpecifications

HTTP/2HypertextTransferProtocol--HTTP/1.1

HTTP

HighPerformanceBrowserNetworking:WhatEveryWebDeveloperShouldKnowAboutNetworkingandWebPerformance[read]HTTP:TheDefinitiveGuide(DefinitiveGuides)[read][$]HTTP/2FrequentlyAskedQuestions[read]HTTPFundamentals[watch][$]HTTP/2Fundamentals[watch][$]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part1[read]HTTP:TheProtocolEveryWebDeveloperMustKnow-Part2[read]HTTPSuccinctly[read]

HTTPStatusCodes

HTTPStatusCodes

LearnHTTP/Networks

47

HTTPStatusCodesin60Seconds[watch]

CORSSpecifications

Cross-OriginResourceSharing

CORS

CORSinAction[read][$]HTTPAccessControl(CORS)[read]

WebSockets

ConnecttheWebWithWebSockets[watch]WebSocket:LightweightClient-ServerCommunications[read][$]TheWebSocketProtocol[read]

LearnHTTP/Networks

48

LearnWebHostingAwebhostingserviceisatypeofInternethostingservicethatallowsindividualsandorganizationstomaketheirwebsiteaccessibleviatheWorldWideWeb.Webhostsarecompaniesthatprovidespaceonaserverownedorleasedforusebyclients,aswellasprovidingInternetconnectivity,typicallyinadatacenter.WebhostscanalsoprovidedatacenterspaceandconnectivitytotheInternetforotherserverslocatedintheirdatacenter,calledcolocation,alsoknownasHousinginLatinAmericaorFrance.

—Wikipedia

Imagesource:http://www.alphaelite.com.sg/sitev2/images/stories/webhostdemo.jpg

GeneralLearning:

UltimateGuidetoWebHosting[read]WebHostingBeginnerGuide[read]WebHostingforDummies[read][$]

LearnWebHosting

49

LearnGeneralFront-EndDevelopmentGeneralLearning:

ABaselineforFront-End[JS]Developers:2015[read]BecomeaFront-EndWebDeveloper[watch][$]Beingawebdeveloper[read]FoundationsofFront-EndWebDevelopment[watch][$]freeCodeCamp[interact]Front-EndCurriculum[read]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]FrontEndWebDevelopmentCareerKickstart[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]Front-EndWebDevelopment:TheBigNerdRanchGuide[read][$]FrontendGuidelines[read]IntroductiontoWebDevelopment[watch][$]IsobarFront-EndCodeStandards[read]LeanFront-EndEngineering[watch][$]LearnFrontEndWebDevelopment[watch][$]PlanningaFront-EndJSApplication[watch]So,YouWanttoBeaFront-EndEngineer[watch]

GeneralFront-EndNewsletters,NewsOutlets,&Podcasts:

TheBigWebShowFront-EndDevWeeklyFrontEndHappyHourFront-EndNewsin5Minutesfrontendfront.comFrontEndFocusFrontEndNewsletterMobileWebWeeklyOpenWebPlatformDailyDigestPonyFooWeeklyshoptalkshow.comTheWebAheadTheWebPlatformPodcast

LearnGeneralFront-EndDev

50

webtoolsweekly.com

LearnGeneralFront-EndDev

51

LearnUserInterface/InteractionDesignUserInterfaceDesign-Userinterfacedesign(UI)oruserinterfaceengineeringisthedesignofuserinterfacesformachinesandsoftware,suchascomputers,homeappliances,mobiledevices,andotherelectronicdevices,withthefocusonmaximizingtheuserexperience.Thegoalofuserinterfacedesignistomaketheuser'sinteractionassimpleandefficientaspossible,intermsofaccomplishingusergoals(user-centereddesign).

—Wikipedia

InteractionDesignPattern-Adesignpatternisaformalwayofdocumentingasolutiontoacommondesignproblem.TheideawasintroducedbythearchitectChristopherAlexanderforuseinurbanplanningandbuildingarchitecture,andhasbeenadaptedforvariousotherdisciplines,includingteachingandpedagogy,developmentorganizationandprocess,andsoftwarearchitectureanddesign.

—Wikipedia

UserExperienceDesign-UserExperienceDesign(UXDorUEDorXD)istheprocessofenhancingusersatisfactionbyimprovingtheusability,accessibility,andpleasureprovidedintheinteractionbetweentheuserandtheproduct.Userexperiencedesignencompassestraditionalhuman–computerinteraction(HCI)design,andextendsitbyaddressingallaspectsofaproductorserviceasperceivedbyusers.

—Wikipedia

Human–ComputerInteraction-Human–computerinteraction(HCI)researchesthedesignanduseofcomputertechnology,focusingparticularlyontheinterfacesbetweenpeople(users)andcomputers.ResearchersinthefieldofHCIbothobservethewaysinwhichhumansinteractwithcomputersanddesigntechnologiesthatletshumansinteractwithcomputersinnovelways.

—Wikipedia

MinimallyI'dsuggestreadingthefollowingcanonicaltextsonthemattersoonecansupportandpotentialbuildusableuserinterfaces.

AboutFace:TheEssentialsofInteractionDesign[read][$]DesignforHackers:ReverseEngineeringBeauty[read][$]DesignforNon-Designers[watch]DesigningInterfaces[read][$]

LearnUI/InteractionDesign

52

DesigningWebInterfaces:PrinciplesandPatternsforRichInteractions[read][$]Don'tMakeMeThink,Revisited:ACommonSenseApproachtoWebUsability[read][$]

LearnUI/InteractionDesign

53

LearnHTML&CSSHTML-HyperTextMarkupLanguage,commonlyreferredtoasHTML,isthestandardmarkuplanguageusedtocreatewebpages.WebbrowserscanreadHTMLfilesandrenderthemintovisibleoraudiblewebpages.HTMLdescribesthestructureofawebsitesemanticallyalongwithcuesforpresentation,makingitamarkuplanguage,ratherthanaprogramminglanguage.

—Wikipedia

CSS-CascadingStyleSheets(CSS)isastylesheetlanguageusedfordescribingthelookandformattingofadocumentwritteninamarkuplanguage.AlthoughmostoftenusedtochangethestyleofwebpagesanduserinterfaceswritteninHTMLandXHTML,thelanguagecanbeappliedtoanykindofXMLdocument,includingplainXML,SVGandXUL.AlongwithHTMLandJavaScript,CSSisacornerstonetechnologyusedbymostwebsitestocreatevisuallyengagingwebpages,userinterfacesforwebapplications,anduserinterfacesformanymobileapplications.

—Wikipedia

Likentoconstructingahouse,onemightconsiderHTMLtheframingandCSStobethepainting&decorating.

GeneralLearning:

AbsoluteCenteringinCSS[read]codecademy.comHTML&CSS[interact]CSSPositioning[watch][$]FrontEndWebDevelopment:GetStarted[watch][$]Front-EndWebDevelopmentQuickStartWithHTML5,CSS,andJavaScript[watch][$]HTMLandCSS:DesignandBuildWebsites[read][$]HTMLDocumentFlow[watch][$]HTMLMastery:Semantics,Standards,andStyling[read][$]InternetingisHard[read]IntrotoHTML/CSS:Makingwebpages[watch]LearntoCodeHTML&CSS[read]LearnCSSLayout[read]MarkSheet[read]SemanticHTML:HowtoStructureWebPages[watch]SolidHTMLFormStructure[watch]UnderstandingtheCSSBoxModel[watch]

LearnHTML&CSS

54

ResilientWebDesign[read]

MasteringCSS:

ACompleteGuidetoFlexbox[read]CSSDiner[interact]CSSSelectorsfromCSS4tillCSS1[read]CSSSecrets:BetterSolutionstoEverydayWebDesignProblems[read][$]CSS3[read]CSS3In-Depth[watch][$]WhattheFlexbox?!ASimple,Free20VideoCourseThatWillHelpYouMasterCSSFlexbox[watch]

References/Docs:

CSSTriggers...aGameofLayout,Paint,andCompositecssreference.iocssvalues.comDefaultCSSforChromeBrowserHead-AlistofeverythingthatcouldgointheofyourdocumentHTMLAttributeReferenceMDNCSSReferenceMDNHTMLElementReference

Glossary:

CSSGlossary-ProgrammingReferenceforCSSCoveringComments,Properties,andSelectorsHTMLGlossaryProgrammingReferenceforHTMLelements

Standards/Specifications:

AllW3CCSSSpecificationsAllW3CHTMLSpecCascadingStyleSheetsLevel2Revision2(CSS2.2)SpecificationCSSIndexes-AlistingofeverytermdefinedbyCSSspecsTheElementsofHTMLfromtheLivingStandardGlobalAttributesTheHTMLSyntaxfromtheLivingStandardHTML5.2fromW3CSelectorsLevel3

ArchitectingCSS:

LearnHTML&CSS

55

AtomicDesign[read]BEMITCSSOOCSS[read]SMACSS[read][$]

ScalableModularArchitectureforCSS(SMACSS)[watch][$]SUITCSSrscss

Authoring/ArchitectingConventions:

CSScodeguide[read]css-architecturecssguidelin.es[read]IdiomaticCSS[read]MaintainableCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]

HTML/CSSNewsletters:

CSSWeeklyFrontendFocus

LearnHTML&CSS

56

LearnSearchEngineOptimizationSearchengineoptimization(SEO)istheprocessofaffectingthevisibilityofawebsiteorawebpageinasearchengine'sunpaidresults—oftenreferredtoas"natural,""organic,"or"earned"results.Ingeneral,theearlier(orhigherrankedonthesearchresultspage),andmorefrequentlyasiteappearsinthesearchresultslist,themorevisitorsitwillreceivefromthesearchengine'susers.SEOmaytargetdifferentkindsofsearch,includingimagesearch,localsearch,videosearch,academicsearch,newssearchandindustry-specificverticalsearchengines.

—Wikipedia

GeneralLearning:

GoogleSearchEngineOptimizationStarterGuide[read]SEOFundamentalsFromDavidBooth[watch][$]SEOFundamentalsFromPaulWilson[watch][$]SEOTutorialForBeginnersin2016[read]SEOforWebDesigners[watch][$]

LearnSEO

57

LearnJavaScriptJavaScriptisahighlevel,dynamic,untyped,andinterpretedprogramminglanguage.IthasbeenstandardizedintheECMAScriptlanguagespecification.AlongsideHTMLandCSS,itisoneofthethreeessentialtechnologiesofWorldWideWebcontentproduction;themajorityofwebsitesemployitanditissupportedbyallmodernwebbrowserswithoutplug-ins.JavaScriptisprototype-basedwithfirst-classfunctions,makingitamulti-paradigmlanguage,supportingobject-oriented,imperative,andfunctionalprogrammingstyles.IthasanAPIforworkingwithtext,arrays,datesandregularexpressions,butdoesnotincludeanyI/O,suchasnetworking,storageorgraphicsfacilities,relyingfortheseuponthehostenvironmentinwhichitisembedded.

—Wikipedia

GettingStarted:

codecademy.comJavaScript[interact]JavaScriptfirststeps[read]JavaScriptbuildingblocks[read]JavaScriptEnlightenment[read]JavaScriptobjectbasics[read]EloquentJavaScript[read]

GeneralLearning:

SpeakingJavaScript[read]YouDon'tKnowJS:Up&Going[read]YouDon'tKnowJS:Types&Grammar[read]YouDon'tKnowJS:Scope&Closures[read]Gentleexplanationof'this'keywordinJavaScript[read]YouDon'tKnowJS:this&ObjectPrototypes[read]

Mastering:

SettingupES6[read]ES6FOREVERYONE![watch][$]ExploringES6[read]YouDon'tKnowJS:ES6&Beyond[read]UnderstandingECMAScript6:TheDefinitiveGuideforJavaScriptDevelopers[read]ES6:TheRightParts[watch][$]ExploringES2016andES2017[read]

LearnJavaScript

58

JavaScriptRegularExpressionEnlightenment[read]UsingRegularExpressions[watch][$]YouDon'tKnowJS:Async&Performance[read]JavaScriptwithPromises[read][$]Test-DrivenJavaScriptDevelopment[read][$]JSMythBusters[read]

FunctionalJavaScript:

FunctionalProgrammingJargonfunfunfunction:FunctionalprogramminginJavaScript[watch]Functional-Light-JS[read]FunctionalProgramminginJavaScript:HowtoimproveyourJavaScriptprogramsusingfunctionaltechniques[read]MostlyadequateguidetoFP(injavascript)[read]JavaScriptAllongé[read][$]HardcoreFunctionalProgramminginJavaScript[watch][$]Functional-LiteJavaScript[watch][$]

References/Docs:

MDNJavaScriptReferenceMSDNJavaScripReference

Glossary/Encyclopedia/Jargon:

TheJavaScriptEncyclopediaJavaScriptGlossarySimplifiedJavaScriptJargon

Standards/Specifications:

ECMAScript®2015LanguageSpecificationECMAScript®2016LanguageSpecificationECMAScript®2017LanguageSpecificationStatus,Process,andDocumentsforECMA262

Style:

AirbnbJavaScriptStyleGuideJavaScriptStandardStyleJavaScriptSemi-StandardStyle

JavaScriptNewsletters,News,&Podcasts:

LearnJavaScript

59

EchoJSECMAScriptDailyES.nextNewsFiveJSJavaScriptAirJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.com

DeprecatedJSLearningResources:

CrockfordonJavaScript-Volume1:TheEarlyYears[watch]CrockfordonJavaScript-Chapter2:AndThenThereWasJavaScript[watch]CrockfordonJavaScript-ActIII:FunctiontheUltimate[watch]CrockfordonJavaScript-EpisodeIV:TheMetamorphosisofAjax[watch]CrockfordonJavaScript-Part5:TheEndofAllThings[watch]CrockfordonJavaScript-Scene6:Loopage[watch]JavaScriptPatterns[read][$]ThePrinciplesofObject-OrientedJavaScript[read][$]JavaScriptModules[read]FunctionalJavaScript:IntroducingFunctionalProgrammingwithUnderscore.js[read][$]TheGoodPartsofJavaScriptandtheWeb[watch][$]HighPerformanceJavaScript(BuildFasterWebApplicationInterfaces)[read][$]AdvancedJavaScript[watch][$]

LearnJavaScript

60

LearnWebAnimationGeneralLearning:

AdvancedSVGAnimation[$][watch]AdventuresinWebAnimations[$][watch]AnimatingWithSnap.svg[$][watch]AnimationinCSS3andHTML5[$][watch]CreateAnimationsinCSS[read&watch]CSSAnimationintheRealWorld[$][watch]FoundationHTML5AnimationwithJavaScript[$][read]LearntoCreateAnimationsinJavaScript[read&watch]StateoftheAnimation2015[watch]WebAnimationusingJavaScript:Develop&Design(DevelopandDesign)[$][read]

Standards/Specifications:

WebAnimations

LearnWebAnimation

61

LearnDOM,BOM,&jQueryDOM-TheDocumentObjectModel(DOM)isacross-platformandlanguage-independentconventionforrepresentingandinteractingwithobjectsinHTML,XHTML,andXMLdocuments.Thenodesofeverydocumentareorganizedinatreestructure,calledtheDOMtree.ObjectsintheDOMtreemaybeaddressedandmanipulatedbyusingmethodsontheobjects.ThepublicinterfaceofaDOMisspecifiedinitsapplicationprogramminginterface(API).

—Wikipedia

BOM-TheBrowserObjectModel(BOM)isabrowser-specificconventionreferringtoalltheobjectsexposedbythewebbrowser.UnliketheDocumentObjectModel,thereisnostandardforimplementationandnostrictdefinition,sobrowservendorsarefreetoimplementtheBOMinanywaytheywish.

—Wikipedia

jQuery-jQueryisacross-platformJavaScriptlibrarydesignedtosimplifytheclient-sidescriptingofHTML.jQueryisthemostpopularJavaScriptlibraryinusetoday,withinstallationon65%ofthetop10millionhighest-traffickedsitesontheWeb.jQueryisfree,open-sourcesoftwarelicensedundertheMITLicense.

—Wikipedia

Theidealpath,butcertainlythemostdifficult,wouldbetofirstlearnJavaScript,thentheDOM,thenjQuery.However,dowhatmakessensetoyourbrain.Mostfront-enddeveloperslearnaboutJavaScriptandthenDOMbywayoffirstlearningjQuery.Whateverpathyoutake,justmakesureJavaScript,theDOM,andjQuerydon'tbecomeablackbox.

GeneralLearning:

Codecademy.comjQuery[watch]TheDocumentObjectModel[read]HTML/JS:MakingWebpagesInteractive[watch]HTML/JS:MakingWebpagesInteractivewithjQuery[watch]jQueryEnlightenment[read]

Mastering:

AdvancEDDOMScripting:DynamicWebDesignTechniques[read][$]AdvancedJSFundamentalstojQuery&PureDOMScripting[watch][$]

LearnDOM,BOM&jQuery

62

DouglasCrockford:AnInconvenientAPI-TheTheoryoftheDOM[watch]DOMEnlightenment[read][$]orreadonlineforfreeFixingCommonjQueryBugs[watch][$]jQuery-FreeJavaScript[watch][$]jQueryTipsandTricks[watch][$]

References/Docs:

jQueryDocsEventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)

Standards/Specifications:

DocumentObjectModel(DOM)Level3EventsSpecificationDocumentObjectModel(DOM)TechnicalReportsDOMLivingStandardW3CDOM4

LearnDOM,BOM&jQuery

63

LearnWebFonts&IconsWebtypographyreferstotheuseoffontsontheWorldWideWeb.WhenHTMLwasfirstcreated,fontfacesandstyleswerecontrolledexclusivelybythesettingsofeachWebbrowser.TherewasnomechanismforindividualWebpagestocontrolfontdisplayuntilNetscapeintroducedthe<font>tagin1995,whichwasthenstandardizedintheHTML3.2specification.However,thefontspecifiedbythetaghadtobeinstalledontheuser'scomputerorafallbackfont,suchasabrowser'sdefaultsans-seriformonospacefont,wouldbeused.ThefirstCascadingStyleSheetsspecificationwaspublishedin1996andprovidedthesamecapabilities.

TheCSS2specificationwasreleasedin1998andattemptedtoimprovethefontselectionprocessbyaddingfontmatching,synthesisanddownload.Thesetechniquesdidnotgainmuchuse,andwereremovedintheCSS2.1specification.However,InternetExploreraddedsupportforthefontdownloadingfeatureinversion4.0,releasedin1997.FontdownloadingwaslaterincludedintheCSS3fontsmodule,andhassincebeenimplementedinSafari3.1,Opera10andMozillaFirefox3.5.ThishassubsequentlyincreasedinterestinWebtypography,aswellastheusageoffontdownloading.

—Wikipedia

GeneralLearning:

AComprehensiveGuidetoFontLoadingStrategies[read]BeautifulWebTypeaShowcaseoftheBestTypefacesfromtheGoogleWebFontsDirectory[read]QuickGuidetoWebfontsvia@font-face[read]ResponsiveTypography[watch][$]TypographyfortheWeb[watch][$]

LearnWebFonts

64

LearnAccessibilityAccessibilityreferstothedesignofproducts,devices,services,orenvironmentsforpeoplewithdisabilities.Theconceptofaccessibledesignensuresboth“directaccess”(i.e.,unassisted)and"indirectaccess"meaningcompatibilitywithaperson'sassistivetechnology(forexample,computerscreenreaders).

Accessibilitycanbeviewedasthe"abilitytoaccess"andbenefitfromsomesystemorentity.Theconceptfocusesonenablingaccessforpeoplewithdisabilities,orspecialneeds,orenablingaccessthroughtheuseofassistivetechnology;however,researchanddevelopmentinaccessibilitybringsbenefitstoeveryone.

Accessibilityisnottobeconfusedwithusability,whichistheextenttowhichaproduct(suchasadevice,service,orenvironment)canbeusedbyspecifieduserstoachievespecifiedgoalswitheffectiveness,efficiencyandsatisfactioninaspecifiedcontextofuse.

Accessibilityisstronglyrelatedtouniversaldesignwhichistheprocessofcreatingproductsthatareusablebypeoplewiththewidestpossiblerangeofabilities,operatingwithinthewidestpossiblerangeofsituations.Thisisaboutmakingthingsaccessibletoallpeople(whethertheyhaveadisabilityornot).

—Wikipedia

GeneralLearning:

FoundationsofUX:Accessibility[watch][$]HowHTMLelementsaresupportedbyscreenreaders[read]IntroductiontoWebAccessibility-GoogleOpenOnlineEducation[watch]IntroductiontoWebAccessibility-WAI[read]UniversalDesignforWebApplications:WebApplicationsThatReachEveryone[read][$]WebAccessibility:GettingStarted[watch][$]AWebforEveryone[read][$]WebAccessibility[watch][$]

Standards/Specifications:

AccessibleRichInternetApplications(WAI-ARIA)CurrentStatusWebAccessibilityInitiative(WAI)WebContentAccessibilityGuidelines(WCAG)CurrentStatus

LearnAccessibility

65

LearnAccessibility

66

LearnWeb/BrowserAPIs

Imagesource:http://www.evolutionoftheweb.com/

TheBOM(BrowserObjectModel)andtheDOM(DocumentObjectModel)arenottheonlybrowserAPIsthataremadeavailableonthewebplatforminsideofbrowsers.EverythingthatisnotspecificallytheDOMorBOM,butaninterfaceforprogrammingthebrowsercouldbeconsideredaweborbrowserAPI(tragicallyinthepastsomeoftheseAPIshavebeencalledHTML5APIswhichconfusestheirownspecifics/standardizewiththeactualHTML5specificationspecifytheHTML5markuplanguage).NotethatweborbrowserAPIsdoincludedeviceAPIs(e.g.,Navigator.getBattery())thatareavailablethroughthebrowserontabletandphonesdevices.

Youshouldbeawareofandlearn,whereappropriate,web/browserAPIs.AgoodtooltousetofamiliarizeoneselfwithalloftheseAPIswouldbetoinvestigatetheHTML5test.comresultsforthe5mostcurrentbrowsers.

Learn:

LearnWeb/BrowserAPIs

67

ProHTML5Programming[read]

LearnAudio:

AddSoundtoYourSiteWithWebAudio[watch]FunWithWebAudio[watch]WebAudioAPI[read]

LearnCanvas:

HTML5Canvas[read]

NOTES:

MDNhasagreatdealofinformationaboutweb/browserAPIs.

MDNWebAPIReferenceMDNWebAPIsInterfaceReference-AllInterfaces,ArrangedAlphabeticallyMDNWebAPI-ListsDeviceAccessAPIsandOtherAPIsUsefulforApplications

KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.

InadditiontoMDN,youmightfindthefollowingresourceshelpfulforlearningaboutalltheweb/browserAPI's:

TheHTML5JavaScriptAPIIndexHTML5Overviewplatform.html5.org

LearnWeb/BrowserAPIs

68

LearnJSON(JavaScriptObjectNotation)JSON,(canonicallypronouncedsometimesJavaScriptObjectNotation),isanopenstandardformatthatuseshuman-readabletexttotransmitdataobjectsconsistingofattribute–valuepairs.Itistheprimarydataformatusedforasynchronousbrowser/servercommunication(AJAJ),largelyreplacingXML(usedbyAJAX).

AlthoughoriginallyderivedfromtheJavaScriptscriptinglanguage,JSONisalanguage-independentdataformat.CodeforparsingandgeneratingJSONdataisreadilyavailableinmanyprogramminglanguages.

TheJSONformatwasoriginallyspecifiedbyDouglasCrockford.Itiscurrentlydescribedbytwocompetingstandards,RFC7159andECMA-404.TheECMAstandardisminimal,describingonlytheallowedgrammarsyntax,whereastheRFCalsoprovidessomesemanticandsecurityconsiderations.TheofficialInternetmediatypeforJSONisapplication/json.TheJSONfilenameextensionis.json.

—Wikipedia

GeneralLearning:

IntroductiontoJavaScriptObjectNotation:ATo-the-PointGuidetoJSON[read][$]json.com[read]WhatisJSON[watch]

References/Docs:

json.org[read]

Standards/Specifications:

ECMA-404TheJSONDataInterchangeFormatRFC7159TheJavaScriptObjectNotation(JSON)DataInterchangeFormat

Architecting:

JSONAPI

LearnJSON

69

LearnJSTemplatesAJavaScripttemplateistypicallyused,butnotalwayswithaMV*solutiontoseparatepartsoftheview(i.e.,theUI)fromthelogicandmodel(i.e.,thedataorJSON).

ES6TemplateLiterals,theHandlebarskiller?[read]GettingStartedwithnunjucks[read]InstantHandlebars.js[read][$]JavaScriptTemplatingwithHandlebars[watch][$]LearnHandlebarsin10MinutesorLess[read]LodashTemplates[docs]

NOTES:

NotethatJavaScript2015(akaES6)hasanativetemplatingmechanismcalled"Templatesstrings".Additionally,templatingasoflatehasbeenreplacedbythingslikeJSX,atemplateelement,orHTMLstrings.

ADVICE:

IfIwasnotusingReact&JSXI'dfirstreachforJavaScript"Templatesstrings"andwhenthatwaslackingmovetonunjucks.

LearnJSTemplates

70

LearnStaticSiteGeneratorsStaticsitegenerators,typicallywrittenusingserversidecode(i.e.,ruby,php,python,nodeJS,etc.),producestaticHTMLfilesfromstatictext/data+templatesthatareintendedtobesentfromaservertotheclientstaticallywithoutadynamicnature.

GeneralLearning:

StaticSiteGenerators[read]

LearnStaticSiteGenerators

71

LearnComputerScienceviaJSFourSemestersofComputerScienceinSixHours[video][$]ComputerScienceinJavaScript[read]Collectionofclassiccomputerscienceparadigms,algorithms,andapproacheswritteninJavaScript[read]AlgorithmsandDataStructuresinJavaScript[watch][$]

LearnComputerScienceviaJS

72

LearnFront-EndApplicationArchitectureGeneralLearning:

JavaScriptApplicationDesign[read][$]ProgrammingJavaScriptApplications[read]

DeprecatedLearningMaterials:

BuildanAppwithReactandAmpersand[watch]BuildingModernSingle-PageWebApplications[watch][$]EloquentJavaScript:Modules[read]AFieldGuidetoStaticApps[read]FieldGuidetoWebApplications[read]FrontendGuidelinesQuestionnaire[read]HumanJavaScript[read]NicholasZakas:ScalableJavaScriptApplicationArchitecture[watch]OrganizingJavaScriptFunctionality[watch][$]PatternsforLarge-ScaleJavaScriptApplicationArchitecture[read]Terrific[read]UIArchitecture[watch][$]WebUIArchitecture[watch][$]

NOTES:

Notalotofgeneralcontentisbeingcreatedonthistopicasoflate.Mostofthecontentofferedforlearninghowtobuildfront-end/SPA/JavaScriptapplicationspresupposesyou'vedecidedupatoollikeAngular,Ember,React,orAurelia.

ADVICE:

In2017learnWebpack,React,andRedux.Startwith,"ACompleteIntrotoReact"and"BuildingApplicationswithReactandReduxinES6".

SURVEYRESULTS:

1

1

LearnFront-EndAppArchitecture

73

Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)

Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

LearnFront-EndAppArchitecture

74

Imagesource:http://stateofjs.com/

LearnFront-EndAppArchitecture

75

Imagesource:http://stateofjs.com/

LearnFront-EndAppArchitecture

76

LearnData(i.e.JSON)APIDesignAPIDesigninNode.js(usingExpress&Mongo)[watch][$]BuildAPIsYouWon'tHate[$][read]JSONAPI[read]RESTfulWebAPIDesignwithNode.JS-SecondEdition[$][read]

LearnDataAPI(i.e.JSON/REST)Design

77

LearnReact&ReduxReact:

React.jsIntroductionForPeopleWhoKnowJustEnoughjQueryToGetBy[read]React.jsFundamentals[watch]13thingsyouneedtoknowaboutReact[read]Tutorial:IntroToReact[read]ReactEnlightenment[read]ReactJSForStupidPeople[read]REACTFORBEGINNERS[watch]CompleteIntroductiontoReact(feat.ReduxandReactRouter)[watch]ReactIn-depth:AnexplorationofUIdevelopment[read]CompleteIntrotoReactv2(feat.Routerv4andRedux)[watch][$]

WelcometoACompleteIntrotoReact[read]BuildYourFirstProductionQualityReactApp[watch][$]

Redux:

YouMightNotNeedReduxADummy’sGuidetoReduxandThunkinReact[read]ReduxTutorials[watch]GettingStartedwithRedux[watch]

https://github.com/dwyl/learn-redux/blob/master/egghead.io_video_tutorial_notes.md

LearnRedux[watch]10TipsforBetterReduxArchitecture[watch]BuildingReactApplicationswithIdiomaticRedux[watch][$]

NOTES:

OnceyouhaveagoodhandleonReactyoumightconsiderlookingatPreactorInferno,orboth.WhenyouhaveReduxmastered,takealookMobXorconsidercreatingyourownsmallcustomReduxlikeimplementationfromscratch.

LearnReact&Redux

78

LearnProgressiveWebAppUnliketraditionalapplications,progressivewebappsareahybridofregularwebpages(orwebsites)andamobileapplication.Thisnewapplicationmodelattemptstocombinefeaturesofferedbymostmodernbrowserswiththebenefitsofmobileexperience.

In2015,designerFrancesBerrimanandGoogleChromeengineerAlexRussellcoinedtheterm"ProgressiveWebApps"todescribeappstakingadvantageofnewfeaturessupportedbymodernbrowsers,includingServiceWorkersandWebAppManifests,thatletusersupgradewebappstobefirst-classapplicationsintheirnativeOS.

AccordingtoGoogleDevelopers,thesecharacteristicsare:

Progressive-Workforeveryuser,regardlessofbrowserchoicebecausethey’rebuiltwithprogressiveenhancementasacoretenet.Responsive-Fitanyformfactor:desktop,mobile,tablet,orformsyettoemerge.Connectivityindependent-Serviceworkersallowworkoffline,oronlowqualitynetworks.App-like-Feellikeanapptotheuserwithapp-styleinteractionsandnavigation.Fresh-Alwaysup-to-datethankstotheserviceworkerupdateprocess.Safe-ServedviaHTTPStopreventsnoopingandensurecontenthasn’tbeentamperedwith.Discoverable-Areidentifiableas“applications”thankstoW3Cmanifests[6]andserviceworkerregistrationscopeallowingsearchenginestofindthem.Re-engageable-Makere-engagementeasythroughfeatureslikepushnotifications.Installable-Allowusersto“keep”appstheyfindmostusefulontheirhomescreenwithoutthehassleofanappstore.Linkable-EasilysharedviaaURLanddonotrequirecomplexinstallation.

—Wikipedia

ProgressiveWebApps[read]ABeginner’sGuideToProgressiveWebApps[read]ProgressiveWebApps[read]GettingStartedwithProgressiveWebApps[watch][$]BuildingaProgressiveWebApp[watch][$]IntrotoProgressiveWebAppsbyGoogle[watch]NativeAppsareDoomed[read]WhyNativeAppsReallyareDoomed:NativeAppsareDoomedpt2[read]

LearnProgressiveWebApp

79

LearnProgressiveWebApp

80

LearnJSAPIDesignDesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]

LearnJSAPIDesign

81

LearnWebDeveloperToolsWebdevelopmenttoolsallowwebdeveloperstotestanddebugtheircode.TheyaredifferentfromwebsitebuildersandIDEsinthattheydonotassistinthedirectcreationofawebpage,rathertheyaretoolsusedfortestingtheuserfacinginterfaceofawebsiteorwebapplication.

Webdevelopmenttoolscomeasbrowseradd-onsorbuiltinfeaturesinwebbrowsers.Themostpopularwebbrowserstodaylike,GoogleChrome,Firefox,Opera,InternetExplorer,andSafarihavebuiltintoolstohelpwebdevelopers,andmanyadditionaladd-onscanbefoundintheirrespectiveplugindownloadcenters.

Webdevelopmenttoolsallowdeveloperstoworkwithavarietyofwebtechnologies,includingHTML,CSS,theDOM,JavaScript,andothercomponentsthatarehandledbythewebbrowser.Duetotheincreasingdemandfromwebbrowserstodomorepopularwebbrowsershaveincludedmorefeaturesgearedfordevelopers.

—Wikipedia

Whilemostbrowserscomeequippedwithwebdevelopertools,theChromedevelopertoolsarecurrentlythemosttalkedaboutandwidelyusedtoolsavailable.

I'dsuggestlearningandusingtheChromewebdevelopertools,simplybecausethebestresourcesforlearningwebdevelopertoolsrevolvesaroundChromeDevTools.

LearnChromeWebDeveloperTools:

ChromeDeveloperTools[watch][$]ExploreandMasterChromeDevToolsMasteringChromeDeveloperTools[watch][$]UsingTheChromeDeveloperTools[watch][$]

ChromeWebDeveloperToolsDocs:

CommandLineAPIReferenceKeyboard&UIShortcutsReferencePer-PanelDocumentationConfigureandCustomizeDevTools

News/Newsletters/Podcasts/Tips:

DevTips

LearnWebDevTools

82

LearnWebDevTools

83

LearnCommandLineAcommand-lineinterfaceorcommandlanguageinterpreter(CLI),alsoknownascommand-lineuserinterface,consoleuserinterface,andcharacteruserinterface(CUI),isameansofinteractingwithacomputerprogramwheretheuser(orclient)issuescommandstotheprogramintheformofsuccessivelinesoftext(commandlines).

—Wikipedia

GeneralLearning:

TheBashGuide[read]Codecademy:LearntheCommandLine[watch]CommandLinePowerUser[watch]LearnEnoughCommandLinetoBeDangerous[read][freeto$]MeettheCommandLine[watch][$]

Mastering:

AdvancedCommandLineTechniques[watch][$]

LearnCommandLine

84

LearnNode.jsNode.jsisanopen-source,cross-platformruntimeenvironmentfordevelopingserver-sidewebapplications.Node.jsapplicationsarewritteninJavaScriptandcanberunwithintheNode.jsruntimeonOSX,MicrosoftWindows,Linux,FreeBSD,NonStop,IBMAIX,IBMSystemzandIBMi.ItsworkishostedandsupportedbytheNode.jsFoundation,acollaborativeprojectatLinuxFoundation.

Node.jsprovidesanevent-drivenarchitectureandanon-blockingI/OAPIdesignedtooptimizeanapplication'sthroughputandscalabilityforreal-timewebapplications.ItusesGoogleV8JavaScriptenginetoexecutecode,andalargepercentageofthebasicmodulesarewritteninJavaScript.Node.jscontainsabuilt-inlibrarytoallowapplicationstoactasawebserverwithoutsoftwaresuchasApacheHTTPServer,NginxorIIS.

—Wikipedia

GeneralLearning:

TheArtofNode[read]IntroductiontoNode.js[watch][$]IntroductiontoNode.jsfromEventedMind[watch][$]io.jsandNode.jsNext:GettingStarted[watch][$]LearningNode:MovingtotheServer-Side[read][$]LearnYouTheNode.js[self-guidedworkshops]Node.jsBasics[watch][$]Node.jsinPractice[read][$]Real-timeWebwithNode.js[watch]ZerotoProductionNode.jsonAmazonWebServices[watch][$]

LearnNode.js

85

LearnModulesGeneralLearning:

jsmodules.ioES6ModulesinDepth[read]ExploringJS-Modules[read]

References/Docs:

MDN-exportMDN-import

NOTES:

Wearestillwaitingonasupportinbrowsersforloadingmodules.Untilthenyoucanhavealookat,"ESModuleLoaderPolyfill"and"JavaScriptLoaderStandard".

LearnJSModules

86

LearnModuleloaders/bundlersWebpack:

WebpackWebpackDeepDive[read]WebpackFundamentals[watch][$]Survivejs.comWebpackBook[read]

Rollup:

Rollup

SystemJS:

Modern,ModularJavaScriptwithSystemJSandjspm[watch][$]

NOTES:

ItisnotuncommonfordeveloperstouseatoollikeGulpforbundlingJSmodules.However,manyoftheGulppluginssimplyuseWebpack,Rollup,orSystemJSunderthehood.

LearnJSModuleloaders/bundlers

87

LearnPackageManagerApackagemanagerorpackagemanagementsystemisacollectionofsoftwaretoolsthatautomatestheprocessofinstalling,upgrading,configuring,andremovingsoftwarepackagesforacomputer'soperatingsysteminaconsistentmanner.Ittypicallymaintainsadatabaseofsoftwaredependenciesandversioninformationtopreventsoftwaremismatchesandmissingprerequisites.

—Wikipedia

GeneralLearning:

AnintroductiontohowJavaScriptpackagemanagersworkTheMystical&MagicalSemVerRangesUsedBynpm&Bower[read]PackageManagers:AnIntroductoryGuideForTheUninitiatedFront-EndDeveloper[read]npmdocsyarndocs

LearnPackageManagers

88

LearnVersionControlAcomponentofsoftwareconfigurationmanagement,versioncontrol,alsoknownasrevisioncontrolorsourcecontrol,isthemanagementofchangestodocuments,computerprograms,largewebsites,andothercollectionsofinformation.Changesareusuallyidentifiedbyanumberorlettercode,termedthe"revisionnumber,""revisionlevel,"orsimply"revision."Forexample,aninitialsetoffilesis"revision1."Whenthefirstchangeismade,theresultingsetis"revision2,"andsoon.Eachrevisionisassociatedwithatimestampandthepersonmakingthechange.Revisionscanbecompared,restored,andwithsometypesoffiles,merged.

—Wikipedia

ThecurrentmodernsolutionforversioncontrolisGit.Learnit!

GeneralLearning:

codeschool.com[interact]GettingGitRight[read]GitFundamentals[watch][$]learnEnoughGit[read]Ry'sGitTutorial[read]

Mastering:

AdvancedGitTutorials[read]ProGit[read]LearnGitBranching[interact]

References/Docs:

https://git-scm.com/doc

LearnVersionControl

89

LearnBuildandTaskAutomationBuildautomationistheprocessofautomatingthecreationofasoftwarebuildandtheassociatedprocessesincluding:compilingcomputersourcecodeintobinarycode,packagingbinarycode,andrunningautomatedtests.

—Wikipedia

GeneralLearning:

GettingStartedwithGulp[read][$]GulpBasics[watch][$]JavaScriptBuildAutomationWithGulp.js[watch][$]

References/Docs:

Gulp

ADVICE:

Gulpisgreat.However,youmightonlyneednpmrun.Beforeturningtoadditionalcomplexityinyourapplicationstackaskyourselfifnpmruncandothejob.Ifyouneedmore,useGulp.

Read:

GiveGrunttheBoot!AGuidetoUsingnpmasaBuildToolHowtoUsenpmasaBuildToolTaskAutomationwithnpmRunUsingnpmasaBuildSystemforYournextProjectUsingnpmasaTaskRunner[watch][$]WhyILeftGulpandGruntfornpmScriptsWhynpmScripts?

LearnBuild&TaskAutomation

90

LearnSitePerformanceOptimizationWebperformanceoptimization,WPO,orwebsiteoptimizationisthefieldofknowledgeaboutincreasingthespeedinwhichwebpagesaredownloadedanddisplayedontheuser'swebbrowser.Withtheaverageinternetspeedincreasingglobally,itisfittingforwebsiteadministratorsandwebmasterstoconsiderthetimeittakesforwebsitestorenderforthevisitor.

—Wikipedia

GeneralLearning:

BrowserRenderingOptimization[watch]EvenFasterWebSites:PerformanceBestPracticesforWebDevelopers[read][$]HighPerformanceWebSites:EssentialKnowledgeforFront-EndEngineers[read][$]JavaScriptPerformanceRocks[read]PageSpeedInsightsRules[read]perf-tooling.today[read]PerformanceCalendar[read]perf.rocks[read]UsingWebPageTest[read][$]WebPerformanceDaybookVolume2[read][$]WebPerformance:TheDefinitiveGuide[read]WebsitePerformance[watch][$]WebsitePerformanceOptimization[watch]

LearnSitePerformanceOptimization

91

LearnTestingUnitTesting-Incomputerprogramming,unittestingisasoftwaretestingmethodbywhichindividualunitsofsourcecode,setsofoneormorecomputerprogrammodulestogetherwithassociatedcontroldata,usageprocedures,andoperatingprocedures,aretestedtodeterminewhethertheyarefitforuse.Intuitively,onecanviewaunitasthesmallesttestablepartofanapplication.

—Wikipedia

FunctionalTesting-Functionaltestingisaqualityassurance(QA)processandatypeofblackboxtestingthatbasesitstestcasesonthespecificationsofthesoftwarecomponentundertest.Functionsaretestedbyfeedingtheminputandexaminingtheoutput,andinternalprogramstructureisrarelyconsidered(notlikeinwhite-boxtesting).Functionaltestingusuallydescribeswhatthesystemdoes.

—Wikipedia

IntegrationTesting-Integrationtesting(sometimescalledintegrationandtesting,abbreviatedI&T)isthephaseinsoftwaretestinginwhichindividualsoftwaremodulesarecombinedandtestedasagroup.Itoccursafterunittestingandbeforevalidationtesting.Integrationtestingtakesasitsinputmodulesthathavebeenunittested,groupstheminlargeraggregates,appliestestsdefinedinanintegrationtestplantothoseaggregates,anddeliversasitsoutputtheintegratedsystemreadyforsystemtesting.

—Wikipedia

GeneralLearning:

Front-EndFirst:TestingandPrototypingJavaScriptApps[watch][$]Let'sCode:Test-DrivenJavaScript[watch][$]JavaScriptTesting[watch]JavaScriptTestingRecipes[read][$]TestableJavaScript[read][$]Test-DrivingJavaScriptApplications:Rapid,Confident,MaintainableCode[read][$]Test-DrivenJavaScriptDevelopment[read][$]TheWayoftheWebTester:ABeginner'sGuidetoAutomatingTests[read][$]

LearnTesting

92

LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.

Headlessbrowsersprovideautomatedcontrolofawebpageinanenvironmentsimilartopopularwebbrowsers,butareexecutedviaacommandlineinterfaceorusingnetworkcommunication.TheyareparticularlyusefulfortestingwebpagesastheyareabletorenderandunderstandHTMLthesamewayabrowserwould,includingstylingelementssuchaspagelayout,color,fontselectionandexecutionofJavaScriptandAJAXwhichareusuallynotavailablewhenusingothertestingmethods.Googlestatedin2009thatusingaheadlessbrowsercouldhelptheirsearchengineindexcontentfromwebsitesthatuseAJAX.

—Wikipedia

AutomatingtheWebUsingPhantomJSandCasperJS[watch][$]GettingStartedwithPhantomJS[read][$]PhantomJSCookbook[read][$]PhantomJSforWebAutomation[watch]RapidPhantomJS[watch][$]

LearnHeadlessBrowsers

93

LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.

GeneralLearning:

CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]YourFirstOfflineWebApp[read]

LearnOfflineDev

94

LearnWeb/Browser/AppSecurityBrowserSecurityHandbook[read]FrontendSecurity[watch]Hacksplaining[read]HTML5SecurityCheatsheet[read]HTTPSecurityBestPractice[read]IdentityandDataSecurityforWebDevelopment:BestPracticesreadSecurityforWebDevelopers:UsingJavaScript,HTML,andCSS[read][$]TheBasicsofWebApplicationSecurity[read]TheInternet:Encryption&PublicKeys[watch]TheInternet:Cybersecurity&Crime[watch]TheTangledWeb:AGuidetoSecuringModernWebApplications[read][$]WebSecurityBasics[read]Websecurity[read]

LearnWeb/Browser/AppSecurity

95

LearnMulti-DeviceDevelopment

Imagesource:http://bradfrost.com/blog/post/this-is-the-web/

Awebsiteorwebapplicationcanrunonawiderangeofcomputers,laptops,tabletsandphones,aswellasahandfulofnewdevices(watches,thermostats,fridges,etc.).Howyoudeterminewhatdevicesyou'llsupportandhowyouwilldeveloptosupportthosedevicesis

LearnMulti-DeviceDev(e.g.,RWD)

96

called,"multi-devicedevelopmentstrategy".Below,Ilistthemostcommonmulti-devicedevelopmentstrategies.

Buildaresponsive(RWD)website/appforalldevices.Buildanadaptive/progressivelyenhancedwebsite/appforalldevices.Buildawebsite,webapp,nativeapp,orhybrid-nativeappforeachindividualdeviceoragroupingofdevices.Attempttoretrofitsomethingyouhavealreadybuiltusingbitsandpartsfromstrategies1,2or3.

GeneralLearning:

AbookApartPack-ResponsiveWebDesign[read][$]ABookApartPack-DesignForAnyDevice[read][$]AdaptiveWebDesign[read][$]DesigningwithProgressiveEnhancement[read][$]MobileWebDevelopment[watch]ResponsiveHTMLEmailDesign[watch][$]ResponsiveImages[watch]ResponsiveTypography[watch][$]ResponsiveWebDesign[watch][$]ResponsiveWebDesignFundamentals[watch]

ResponsiveNewsletters,News,&Podcasts:

ResponsiveWebDesignPodcastResponsiveWebDesignNewsletter

LearnMulti-DeviceDev(e.g.,RWD)

97

DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.

DirectedLearning

98

DirectedLearningThetablebelowcontainsinstructorled,paid,front-endcourses,programs,schools,andbootcamps.

Ifyoucan'taffordadirectededucation,aselfdirectededucationusingscreencasts,books,andarticlesisaviablealternativetolearnfront-enddevelopmentfortheself-drivenindividual.

company course price onsite remote

Betamore Front-endWebDevelopment 8,500 Baltimore,

MD

BLOC BecomeaFrontendDeveloper 4,999 yes

DecodeMTL LearnFront-endWebDevelopment 2,500 Montreal,

QC

TheFlatironSchool IntroductiontoFront-EndWebDevelopment 3,500 New

York,NY

GeneralAssembly FrontendWebDevelopment 3,500 multiple

locations

HackerYou Front-endWebDevelopmentImmersive

7,000-7,910

Toronto,Canada

IronYard FrontEndEngineering 12,000 multiplelocations

TheNewYorkCode+DesignAcademy FrontEnd101 2,000 New

York,NY

Thinkful FrontendWebDevelopment

300permonth yes

TuringSchoolofSoftware&Design Front-EndEngineering 20,000 yes

Udacity Front-EndWebDeveloperNanodegree

200monthly

multiplelocations yes

Front-EndSchools,Courses,&Bootcamps

99

Front-EndDeveloperstoLearnFromThenotionthatyoushouldfollowanindividualtolearnaboutfront-enddevelopmentisslowlybecomingpointless.Theadvancedpractitionersoffront-enddevelopmentgenerateenoughcontentthatyoucansimplyfollowthecommunity/leadersbypayingattentiontothefront-end"news"outlets(viaNewsletters,News,&Podcasts).

Front-EndDevstoLearnFrom

100

Front-EndNewsletters,NewsSites,&PodcastsGeneralFront-EndNewsletters,News,&Podcasts:

TheBigWebShowDevTipsFront-EndDevWeeklyFrontEndHappyHourFront-EndNewsin5MinutesFront-EndFrontFrontEndFocusFrontEndNewsletterTheFrontsidePodcastMobileWebWeeklyNonBreakingSpaceShowOpenWebPlatformDailyDigestShopTalkShowUXDesignNewsletterTheVersioningShowbySitePointTheWebAheadWebDevelopmentReadingListTheWebPlatformPodcastWebToolsWeekly

HTML/CSSNewsletters:

AccessibilityWeeklyCSSWeeklyResponsiveDesignWeekly

JavaScriptNewsletters,News,&Podcasts:

EchoJSECMAScriptDailyES.nextNewsFiveJSJavaScriptAirJavaScriptJabber

Newsletters,News,&Podcasts

101

JavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.comReactStatus

GraphicandAnimationNewslettersandPodcasts

MotionandMeaningResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly

Newsletters,News,&Podcasts

102

PartIII:Front-endDeveloperToolsPartthreebrieflyexplainsandidentifiestoolsofthetrade.

Makesureyouunderstandingthecategorythatasetoftoolsfallswithin,beforestudyingthetoolsthemselves.

Notethatjustbecauseatoolislisted,oracategoryoftoolsisdocumented,thisdoesnotequatetoanassertiononmypartthatafront-enddevelopershouldlearnitanduseit.Chooseyourowntoolbox.I'mjustprovidingthecommontoolboxoptions.

Imagesource:https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0

PartIII:Front-EndDevTools

103

Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.

Dash[OSX,iOS][$]DevDocsVelocity[Windows][$]Zeal[Windows,Linux]

Doc/APIBrowsingTools

104

SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool

ToolsforFindingSEOTools:

SEOTools-TheCompleteList

SEOTools

105

Prototyping&WireframingToolsCreating:

Axure[$]BalsamiqMockups[$]Justinmind[$]UXPin[freeto$]

Collaboration/Presenting:

InVision[freeto$]Conceptboard[freeto$]myBalsamiq[$]

Prototyping&WireframingTools

106

DiagrammingToolsdraw.io[freeto$]Cacoo[freeto$]gliffy[freeto$]

DiagrammingTools

107

HTTP/NetworkToolsCharles[$]ChromeDevToolsNetworkPanelInsomnia[free-$]Paw[$]Postman[free-$]

HTTP/NetworkTools

108

CodeEditingToolsAsourcecodeeditorisatexteditorprogramdesignedspecificallyforeditingsourcecodeofcomputerprogramsbyprogrammers.Itmaybeastandaloneapplicationoritmaybebuiltintoanintegrateddevelopmentenvironment(IDE)orwebbrowser.Sourcecodeeditorsarethemostfundamentalprogrammingtool,asthefundamentaljobofprogrammersistowriteandeditsourcecode.

—Wikipedia

Front-endcodecanminimallybeeditedwithasimpletexteditingapplicationlikeNotepadorTextEdit.But,mostfront-endpractitionersuseacodeeditorspecificallydesignforeditingaprogramminglanguage.

Codeeditorscomeinallsortsoftypesandsize,sotospeak.Selectingoneisarathersubjectiveengagement.Chooseone,learnitinsideandout,thengetontolearningHTML,CSS,DOM,andJavaScript.

However,Idostronglybelieve,minimally,acodeeditorshouldhavethefollowingqualities(bydefaultorbywayofplugins):

1. Gooddocumentationonhowtousetheeditor2. Report(i.e.,hinting/linting/errors)onthecodequalityofHTML,CSS,andJavaScript.3. OffersyntaxhighlightingforHTML,CSS,andJavaScript.4. OffercodecompletionforHTML,CSS,andJavaScript.5. Becustomizablebywayofaplug-inarchitecture6. Haveavailablealargerepositoryofthird-party/communityplug-insthatcanbeusedto

customizetheeditortoyourliking7. Besmall,simple,andnotcoupledtothecode(i.e.,notrequiredtoeditthecode)

CodeEditors:

AtomBracketsSublimeText[$]WebStorm[$]VisualStudioCode

OnlineCodeEditors:

Cloud9[freeto$]Codeanywhere[freeto$]

1

CodeEditingTools

109

Shareable&RunnableCodeEditors:

Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosmallamountsofimmediatelyrunnablecodeinawebbrowser.

CodePen[freeto$]jsbin.com[freeto$]jsfiddle.netliveweave.comPlunker

ADVICE:

IrecommendingusingVisualStudioCodebecauseofthequalityofthetoolandthecontinuousimprovementsmadetotheeditorthatlikelywon'tstoporslowduetothefactthatMicrosoftisbehindthetool.

1

CodeEditingTools

110

BrowserToolsJSBrowserCodingUtilities:

History.jshtml2canvasPlatform.jsURI.js

GeneralReferenceToolstoDetermineIfXBrowserSupportsX:

Browsersupportforbroken/missingimagesBrowserscopecaniuse.comFirefoxPlatformStatus-Implementation&standardizationroadmapforwebplatformfeaturesHTML5PleaseHTML5Testiwanttouse.comjscc.infoPlatformStatuswhatwebcando.today

BrowserDevelopment/DebugTools:

ChromeDeveloperTools(akaDevTools)Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings

FirefoxDeveloperToolsIEDevelopertools(akaF12tools)SafariWebInspectorVorlon.js

BrowserCodingToolstoDetermineIfXBrowserSupportsX:

Feature.jsModernizr

BroadBrowserPolyfills/Shims:

BrowserTools

111

console-polyfillHTML5CrossBrowserPolyfillsfetchsocket.ioSockJSwebcomponents.jswebshim

HostedTesting/AutomationforBrowsers:

Browserling[freeto$]BrowserStack[$]CrossBrowserTesting.com[$]Nightcloud.ioSauceLabs[$]

HeadlessBrowsers:

PhantomJSPhantomCSS

slimerjsTrifleJSZombie.js

BrowserAutomation:

Usedforfunctionaltestingandmonkeytesting.

CasperJSNightmareTestCafe

BrowserHacks:

browserhacks.com

BrowserTools

112

HTMLToolsHTMLTemplates/Boilerplates/StarterKits:

dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplateWebStarterKitBoilerplate&ToolingforMulti-DeviceDevelopment

HTMLPolyfill:

html5shiv

Transpiling:

HAMLPugMarkdown

References:

ElementattributesElementsHTMLArrowsHTMLEntityLookupHTMLInterfacesBrowserSupporthtmlreference.io

Linting/Hinting:

HTMLHinthtml-inspector

Optimizer:

HTMLMinifier

OnlineCreation/Generation/ExperimentationTools:

tablesgenerator.com

HTMLTools

113

AuthoringConventions:

HTMLCodeGuidePrinciplesofWritingConsistent,IdiomaticHTML

Workflow:

Emmet

HTMLOutliner:

HTML5Outliner

TrendingHTMLRepositoriesonGitHubThisMonth:

https://github.com/trending?l=html&since=monthly

HTMLTools

114

CSSToolsDesktop&MobileCSSFrameworks:

BaseBasscssBulmaBootstrap3orBootstrap4ConciseFoundationMaterialDesignLite(MDL)MetroUIPicnicPure.cssSemanticUISkeletonSpectre.csstachyons

MobileOnlyCSSFrameworks:

Ratchet

CSSReset:

ACSSReset(or“ResetCSS”)isashort,oftencompressed(minified)setofCSSrulesthatresetsthestylingofallHTMLelementstoaconsistentbaseline.

—cssreset.com

EricMeyer's“ResetCSS”2.0Normalize

Transpiling:

pleeease.ioPostCSS&cssnextrework&mythSass/SCSSStylus

References:

CSSTools

115

CSSCursorscss3test.comcss3clickchart.comcssreference.ioCSSIndexes-AlistingofeverytermdefinedbyCSSspecscss4-selectors.comcss4RocksCSSTRIGGERS...AGAMEOFLAYOUT,PAINT,ANDCOMPOSITECSSTricksAlmanaccssvalues.comMDNCSSReference

Linting/Hinting:

CSSLintstylelint

CodeFormatter/Beautifier:

CSScombCSSfmt

Optimizer:

clear-csscssnanoCSSO

OnlineCreation/Generation/ExperimentationTools:

CSSArrowPleaseCSSMaticEnjoyCSSFlexboxPlaygroundflexplorerpatternify.compatternizer.comUltimateCSSGradientGenerator

ArchitectingCSS:

AtomicDesign[read]BEMITCSS

CSSTools

116

OOCSS[read]SMACSS[read][$]

ScalableModularArchitectureforCSS(SMACSS)[watch][$]SUITCSSrscss

Authoring/ArchitectingConventions:

CSScodeguide[read]css-architecture[read]cssguidelin.es[read]IdiomaticCSS[read]MaintainableCSS[read]StandardsforDevelopingFlexible,Durable,andSustainableHTMLandCSS[read]AirbnbCSS/SassStyleguide[read]

TrendingCSSRepositoriesonGitHubThisMonth:

https://github.com/trending?l=css&since=monthly

CSSTools

117

DOMToolsDOMLibraries/Frameworks:

BlissjQuery

YouDon'tNeedjQueryZeptocashUmbrellaJS

DOMUtilities:

KeypressTetherclipboard.js

DOMEventTools:

KeyboardEventViewer

DOMPerformanceTools:

ChromeDevToolsTimelineDOMMonster

References:

EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)

DOMPolyfills/Shims:

dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform

DOMTools

118

VirtualDOM:

jsdomvirtual-dom

DOMTools

119

JavaScriptToolsJSUtilities:

accounting.jsasyncaxioschancedate-fnsformat.jsimmutableis.jslodash

You-Dont-Need-Lodash-UnderscoreMath.jsMoment.jsNumeral.jsstring.jsunderscore.js

You-Dont-Need-Lodash-Underscorevocawaitxregexp.com

Transpiling/TypeChecking(EStoES):

BabelTypeScriptFlow

Code-analysisEngine:

Tern

JavaScriptCompatibilityChecker:

jscc.info/

Linting/Hinting&StyleLinter:

eslint

JavaScriptTools

120

UnitTesting:

AVAJasmineMochaTape

TestingAssertionsforUnitTesting:

Chaiexpect.jsshould.js

TestSpies,Stubs,andMocksforUnitTesting:

sinon.jsKakapo.js

CodeFormater/Beautifier:

esformatterjs-beautifyjsfmtprettier

PerformanceTesting:

benchmark.jsjsperf.co

Visualization,StaticAnalysis,Complexity,CoverageTools:

Coveralls[$]Esprimaistanbul

Optimizer:

UglifyJS2optimize-js

Obfuscate:

JavascriptObfuscator[freeto$]JScrambler[$]

JavaScriptTools

121

Sharable/RunnableCodeEditors:

es6fiddle.netjsbin.com[freeto$]jsfiddle.net

OnlineRegularExpressionEditors/VisualTools:

debuggexregex101regexperRegExr

AuthoringConventionTools:

Airbnb'sESLintconfig,followingourstyleguideStandard-ESLintShareableConfig

TrendingJSRepositoriesonGitHubThisMonth:

https://github.com/trending?l=javascript&since=monthly

MostDependeduponPackagesonNPM:

https://www.npmjs.com/browse/depended

JavaScriptTools

122

StaticSiteGeneratorsToolsSiteGeneratorListings:

staticgen.comstaticsitegenerators.netMetalsmith

ADVICE:

BeforeusingastaticsitegeneratorconsiderusingGulptoorchestrateacustomsolutionoruseatoolthatmakesuseofGulpforstaticsitegeneration.e.g.GulpStarter

1

1

StaticSiteGeneratorsTools

123

AccessibilityTools

GuidesAccessibilityGuidelinesChecklistInteractiveWCAG2.018FAccessibilityGuide

SiteScannersaXeBrowserExtensionChromeAccessibilityDeveloperToolsTenonAccessibilityToolWAVEAccessibilityTool

ColorContrastTestersColorableColorableMatrixColorSafeColorRatio

Low-VisionSimulatorsSEE(Chrome)Spectrum(Chrome)NoCoffee(Chrome)

ScreenReadersVoiceOver(Mac)JAWS(Win)NVDA(Win)Window-Eyes(Win)ChromeVox(Chromeextension)

AccessibilityDevTools

124

Basicscreenreadercommands

ReadabilityTestersExpressoAppHemingwayAppGrammarlyReadabilityScoreMSOffice

ArticlesGettingStartedwithARIAReframingAccessibilityfortheWebAnAlphabetofAccessibilityIssuesPracticalARIAExamplesMDNAccessibilityGuideEnableaccessibilitypanelinChromedevtools

AccessibilityDevTools

125

AppFrameworks(Desktop,Mobile,Tablet,etc.)ToolsFront-EndAppFrameworks:

AngularJS(i.eAngular1.x.x)+BatarangAngular(i.e.Angular2.0.0+)+angular-cliAurelia+AureliaCLIEmber+embercli+EmberInspectorPolymerReact+create-react-app+ReactDeveloperToolsVue.js+vue-cli&Vue.jsdevtoolsRiot

NativeHybridMobileWebView(i.e.,BrowserEngineDriven)Frameworks:

ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.

ioniconsen.io

NativeHybridMobileDevelopmentWebview(i.e.,BrowserEngineDriven)Environments/Platforms/Tools:

ThesesolutionstypicallyuseCordova,crosswalk,oracustomWebViewasabridgetonativeAPIs.

AdobePhoneGap[$]AppBuilder[$]cocoon.io[freeto$]ionichub[freeto$]kony[$]Monaca[$]Taco

NativeDesktopWebView(i.e.,BrowserEngineDriven)AppFrameworks:

ElectronNW.js

1

AppFrameworks(Desktop,Mobileetc.)Tools

126

AnyPlatformAppFrameworks:

Thesesolutionstakeyourapplicationandbuilditacrossseveralplatformsanddevices

manifoldJS

NativeMobileAppFrameworks(AkaJavaScriptNativeApps)

ThesesolutionsuseaJSengineatruntimetointerpretJSandbridgethattonativeAPIs.NobrowserengineorWebViewisused.TheUIisconstructedfromnativeUIcomponents.

NativeScriptReactNativetabris.js[freeto$]trigger.io[$]weex

References:

todomvc.comFrontendGuidelinesQuestionnaireFrontendGuidelines

Performance:

js-framework-benchmark

NOTES:

Keepaneyeoninferno,Svelte,andNXin2017forbuildingcomponentbasedUIapplications.

ADVICE:

Ifyouarenewtofront-end/JavaScriptapplicationdevelopmentI'dstartwithRiotorVue.js.ThenI'dworkmywaytoReact.ThenI'dlookatAngular2,Ember,orAurelia.

Ifyouarebuildingasimplewebsitethathasminimalinteractionswithdata(i.e.mostlyastaticcontentwebsite),youshouldavoidafront-endframework.AlotofworkcanbedonewithataskrunnerlikeGulpandjQuery,whileavoidingtheunnecessarycomplexityoflearninganduseanappframeworktool.

1

AppFrameworks(Desktop,Mobileetc.)Tools

127

WantsomethingsmallerthanReact,considerPreact.PreactisanattempttorecreatethecorevaluepropositionofReact(orsimilarlibrarieslikeMithril)usingaslittlecodeaspossible,withfirst-classsupportforES2015.Currentlythelibraryisaround3kb(minified&gzipped).

Can'tdecidebetweenReactorAngluar2,read,"Angular2vsReact:TheUltimateDanceOff"

SURVEYRESULTS:

Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)

Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

AppFrameworks(Desktop,Mobileetc.)Tools

128

Imagesource:http://stateofjs.com/

AppFrameworks(Desktop,Mobileetc.)Tools

129

Imagesource:http://stateofjs.com/

AppFrameworks(Desktop,Mobileetc.)Tools

130

ProgressiveWebAppTools:Front-EndAppFrameworks:

lighthouseProgressiveWebAppChecklist

ProgressiveWebAppTools

131

ScaffoldingToolsClientsideScaffoldingisconcernedwithgeneratingastartertemplatefortheapplicationasawhole,ratherthangeneratingcodetoaccessadatabase.

SlushYeoman

ScaffoldingTools

132

GeneralFront-EndDevelopmentToolsDevelopmentTools:

BrowsersyncCodeKitPrepros

GeneralFEDevelopmentTools

133

Templating/DataBindingToolsJustTemplating:

doT.jsHandlebars

htmlbarsNunjuncks

TemplatingandReactiveDataBinding:

Dekujquerymy.jsractive.jsreact.jsriotRivets.jsvue.js

TemplatingtoVirtualDOM:

JSXt7

Templating/DataBindingTools

134

UIWidget&ComponentToolkitsOnWebPlatform:

Bootstrap3orBootstrap4KendoUIforjQuery[freeto$]MaterializeOfficeUIFabricSemanticUIUiKitWebix[$]

ReactSpecific,OnWebPlatform:

AntDesignMaterialuiSemantic-UI-React

NativeDesktop/Laptop/NetbookAppsviaWebPlatform(i.e.usedwithNW.jsandElectron):

PhotonReactUIComponentsforOSXElCapitanandWindows10

Mobile/TabletSpecificOnWebPlatform(i.e.usedwithtouchfocusedUI's):

Framework7KendoUIMobileRatchet

ADVICE:

IfyouneedabasicsetofUIWidgets/ComponentsstartwithSemanticUI.Ifyouarebuildingsomethingthatneedsagrid,spreadsheet,orpivotgridyou'llhavetolookatKendoUIorWebix.Also,keepinmindthatmostofthesesolutionsstillrequirejQuery.

IfIwasgoingtobuildaReactappandneededatoolkitofwidgets/componentsofftheshelfI'dwithSemantic-UI-Reactand/orAntDesign,orIwouldacceptthatfactthesomeofthecomponentsIwanttotakeofftheshelfandusehaveaharddependencyonjQuery.

1

2

1

2

UIWidget&ComponentToolkits

135

UIWidget&ComponentToolkits

136

DataVisualization(e.g.,Charts)ToolsJSLibraries:

d3sigmajs

Widgets&Components:

amCharts[freeto$]AnyChart[Non-commercialfreeto$]C3.jsChartist-jsjChart.jsEpochFusionCharts[$]GoogleChartsHighcharts[Non-commercialfreeto$]ZingChart[freeto$]

Services(i.e.hosteddatavisualizationservicesforembeddingandsharing):

ChartBlocks[freeto$]Datawrapperinfogr.am[freeto$]plotly[freeto$]

DataVisualization(e.g.,Charts)Tools

137

Graphics(e.g.,SVG,canvas,webgl)ToolsGeneral:

Fabric.jsTwo.js

Canvas:

EaselJSPaper.js

SVG:

d3GraphicsJSRaphaëlSnap.svgsvg.js

WebGL:

pixi.jsthree.js

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

138

AnimationToolsAnimateAnimeAnimista.netDynamics.jsGreenSock-JSMagicTweenJSVelocity.js

Polyfills/Shims:

web-animations-js

AnimationReferences:

canianimate.com

AnimationTools

139

JSONToolsOnlineEditors:

JSONmatejson.browse()

Formatter&Validator:

jsonformatter.orgJSONFormatter&Validator

QueryTools:

DefiantJSJSONMaskObjectPath

GeneratingMockJSONTools:

JSONGeneratorMockaroo[freeto$]

OnlineJSONMockingAPITools:

FillText.comJamAPIJSONPlaceholderjsonbin.orgmockable.iomockapi.ioMockyRANDOMUSERGENERATOR

ListofpublicJSONAPI's:

AcollectivelistofJSONAPIsforuseinwebdevelopment

LocalJSONMockingAPITools:

json-server

JSONSpecifications/Schemas:

JSONTools

140

json-schema.org&jsonschema.net{json:api}

JSONTools

141

PlaceholderContentTools

Images:placehold.itSatyrPlaceimgLoremPixelCSS-TricksImageResourcesLibreStockUnsplashPlaceBeyoncé

DeviceMockups:placeit.netmockuphone.com

Text:MeettheIpsumscatipsum.combaconipsum.com(API)

UserData:uinames.comrandomuser.me

PlaceholderImages/TextTools

142

TestingToolsSoftwareTestingFrameworks:

InternKarmaJest

UnitTesting:

AVAJasmineMochaTape

TestingAssertionsforUnitTesting:

Chaiexpect.jsshould.js

TestSpies,Stubs,andMocksforUnitTesting:

sinon.jsKakapo.js

HostedTesting/AutomationforBrowsers:

Browserling[$]BrowserStack[$]CrossBrowserTesting.com[$]Nightcloud.ioSauceLabs[$]

BrowserAutomation:

CasperJSNightmareTestCafe

UITestingTools:

gremlins.js

TestingTools

143

PercyBackstopJSPhantomCSSGhostInspectordiff.io

Automateddeadlinkanderrordetectors:

MonkeyTestIt

NOTES:

Testingframeworkstypicallyoffermoretoolsthanjustunittesting.IfyouarelookingforJavaScriptunittestingsolutionslookatJavaScriptTools.

SURVEYRESULTS:

Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)

TestingTools

144

Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

Imagesource:http://stateofjs.com/

TestingTools

145

Imagesource:http://stateofjs.com/

TestingTools

146

TestingTools

147

Front-EndDataStorageTools(i.e.Datastoragesolutionintheclient)

AlaSQLDexie.jsForerunnerDBLocalForageLokiJSLovefieldlowdbPouchdbNeDBYDN-DB

Front-endDataStorageTools

148

ModuleLoading/BundlingToolsBrowserifyRollupSystemJSwebpack

http://www.webpackbin.com/

SURVEYRESULTS:

Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)

Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

Module/PackageLoadingTools

149

Imagesource:http://stateofjs.com/

Module/PackageLoadingTools

150

Imagesource:http://stateofjs.com/

Module/PackageLoadingTools

151

Module/PackageRepositoryToolsNPMyarn

Module/PackageRepo.Tools

152

HostingToolsGeneral

AWS[$]DigitalOcean[$]Heroku[freeto$]

Static

FirebaseHostingnetlify[freeto$]

BitballoonSurge[freeto$]Forge[$]

HostingTools

153

ProjectManagement&CodeHostingToolsAssembla[freeto$]Bitbucket[freeto$]Codebase[$]Github[freeto$]GitLab[freeto$]Unfuddle[$]

ProjectManagement&CodeHosting

154

Collaboration&CommunicationToolsSlack&screenhero[freeto$]appear.inMattermost[freeto$]TeamViewer[freeto$]

Code/GitHubCollaboration&Communication:

Gitter[freeto$]

Collaboration&CommunicationTools

155

ContentManagementHosted/APIToolsAPICMS(i.e.,ContentDeliveryCMS)Tools:

Contentful[$]CosmicJS[freeto$]prismic.io[freeto$]elemeno[freeto$]

HostedCMSTools:

CushyCMS[freeto$]LightCMS[$]PageLime[$]SurrealCMS[$]

StaticCMSTools:

webhook.comDatoCMSsiteleafforestry.io

CMSHosted/APITools

156

Back-end/APItoolsData/back-endasaserviceakaBAAS:

Back&[freeto$]Firebase[freeto$]Kinvey[free'ishto$]Pusher[freeto$]restdb.io[freeto$]

Data/back-end

HorizonGraphQL

http://www.apollodata.com/Relay

FalcorRxDB

UserManagementasaService:

Auth0[$]AuthRocketStormpathUserApp[freeto$]

BAAS(forFront-EndDevs)Tools

157

OfflineToolsHoodieOffline.jsPouchDBupup

OfflineTools

158

SecurityToolsCodingTool:

DOMPurifyXSS

SecurityScanners/Evaluators/Testers:

NetsparkerWebsecurifyOWASPZAP

References:

HTML5SecurityCheatsheet

SecurityTools

159

Tasking(akaBuild)ToolsTasking/BuildTools:

GulpBroccoli.js

OpinionatedTasking/Buildpipelinetools:

BrunchMimosaLineman

ADVICE:

BeforereachingforGulpmakesurenpmscriptsoryarnscriptwon'tfitthebill.Read,"WhyILeftGulpandGruntfornpmScripts".

SURVEYRESULTS:

Theimagesbelowarefromthe2016FrontendToolingSurvey(4715developers)and2016StateofJSSurvey(9307developers)

1

1

Tasking(akaBuild)Tools

160

Imagesource:https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

Tasking(akaBuild)Tools

161

Imagesource:http://stateofjs.com/

Tasking(akaBuild)Tools

162

Imagesource:http://stateofjs.com/

Tasking(akaBuild)Tools

163

DeploymentToolsBamboo[$]Buddy[freeto$]CircleCI[freeto$]Codeship[freeto$]Deploybot[freeto$]Deployhq[freeto$]FTPLOY[freeto$]Now[freeto$]TravisCI[freeto$]Semaphore[freeto$]Springloops[freeto$]

DeploymentTools

164

Site/AppMonitoringToolsUptimeMonitoring:

Monitority[free]UptimeRobot[freeto$]

GeneralMonitoringTools:

Pingdom[freeto$]NewRelicUptrends[$]

Site/AppMonitoringTools

165

JavaScriptErrorReporting/Monitoringbugsnag[$]errorception[$]Honeybadger[$]Raygun[$]Rollbar[freeto$]Sentry[freeto$]TrackJS[$]

JSErrorMonitoringTools

166

PerformanceToolsReporting:

GTmetrixsitespeed.ioSpeedCurve[$]WebPageTest

JSTools:

imageminImageOptim-CLI

Budgeting:

performancebudget.io

References/Docs:

JankFreePerformanceofES6featuresrelativetotheES5

Checklist:

Front-EndPerformanceChecklist2017

PerformanceTools

167

ToolsforFindingToolsbuiltwithjavascripting.comjs.coachmicrojs.comnpmsstackshare.ioUnheap

ToolsforFindingTools

168