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-endDevin2017

In2018expect...

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,Icons,&Images

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.1.39

1.6.2

1.6.2.1

1.6.3

1.6.4

1.7

1.7.1

1.7.2

1.7.3

LearnAccessibility

LearnWeb/BrowserAPIs

LearnJSON

LearnJSTemplates

LearnStaticSiteGenerators

LearnComputerScienceviaJS

LearnFront-EndAppArchitecture

LearnDataAPI(i.e.JSON/REST)Design

LearnReact

LearnStateManagement

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

3

1.7.4

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

DiagrammingTools

HTTP/NetworkTools

CodeEditingTools

BrowserTools

HTMLTools

CSSTools

DOMTools

JavaScriptTools

StaticSiteGeneratorsTools

AccessibilityDevTools

AppFrameworks(Desktop,Mobileetc.)Tools

StateManagementTools

ProgressiveWebAppTools

GUIDevelopment/BuildTools

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

4

1.7.37

1.7.38

1.7.39

1.7.40

1.7.41

1.8

DeploymentTools

Site/AppMonitoringTools

JSErrorMonitoringTools

PerformanceTools

ToolsforFindingTools

SponsoredbyFrontendMasters

5

Front-EndDeveloperHandbook2018WrittenbyCodyLindleysponsoredby—FrontendMasters

Introduction

6

Thisisaguidethatanyonecouldusetolearnaboutthepracticeoffront-enddevelopment.Itbroadlyoutlinesanddiscussesthepracticeoffront-endengineering:howtolearnitandwhattoolsareusedwhenpracticingitin2018.

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

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

Thebookshouldnotbeconsideredacomprehensiveoutlineofallresourcesavailabletoafront-enddeveloper.Thevalueofthebookistiedupinaterse,focused,andtimelycurationofjustenoughcategoricalinformationsoasnottooverwhelmanyoneonanyoneparticularsubjectmatter.

Theintentionistoreleaseanupdatetothecontentyearly.

Thehandbookisdividedintothefollowingthreeparts:

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-developer-handbook-2018/details

Introduction

7

Contributecontent,suggestions,andfixesongithub:

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

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),whichrunontheOpenWebPlatformoractascompilationinputfornon-webplatformenvironments(i.e.,ReactNative).

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

Typically,apersonentersintothefieldoffront-enddevelopmentbylearningtodevelopHTML,CSS,andJavaScriptwhichcommonlyrunsinwebbrowserbutcanalsoruninaheadlessbrowser,WebView,orascompilationinputforanativeruntimeenvironment.

WhatIsaFront-EndDeveloper?

9

Thesefourruntimesscenariosareexplainedbelow.

WebBrowsers(mostcommon)

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

Themostcommonwebbrowsersare(showninorderofmostusedfirst):

ChromeSafariInternetExplorer(Note:notEdge,referringtoIE9toIE11)FirefoxEdge

HeadlessBrowsers

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

Themostcommonheadlessbrowsersare:

HeadlessChromiumZombieslimerjs

Webviews

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

Themostcommonsolutionsforwebviewdevelopmentare:

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

NativefromWebTech

WhatIsaFront-EndDeveloper?

10

Eventually,whatislearnedfromwebbrowserdevelopmentcanbeusedbyfront-enddeveloperstocraftcodeforenvironmentsthatarenotfueledbyabrowserengine.Asoflate,developmentenvironmentsarebeingdreamedupthatusewebtechnologies(e.g.,CSSandJavaScript),withoutwebengines,tocreatenativeapplications.

Someexamplesoftheseenvironmentsare:

FlutterReactNative

NOTES:

Makesureyouareclearwhatexactlyismeantbythe"webplatform".Read,"TheWebplatform:whatitis"andreadthe,"OpenWebPlatform"Wikipediapage.Explorethemanytechnologiesthatmakeupthewebplatform.

WhatIsaFront-EndDeveloper?

11

RecapofFront-endDevelopmentin2017HTML5.2isdone.ItwasabanneryearforVue.jsintermsofadoptionandpopularity.Noquestionaboutit.Thegreatdividebetweenafront-endHTML&CSSdeveloperv.s.front-endapplicationdeveloperisrealized/verbalized.BeingaFront-endJavaScriptdeveloperwhobuildsapplicationsusingwebtechnologiescontinuestogetbetterandworse.Thisyearseemedfullerthanmostofapp/frameworksolutionstryingtocontendwiththemainstreamJavaScriptapptools(i.e.React,Angular,andVueetc...)Letmelistthemforyou.Moon,Marko,Hyperapp,QuasarFramework,POI,frint,BunnyJS,jsblocks,Sapper,Stimulus,Choo,ThiswastheyearthatjsbinandjsfiddleevolvedtothingslikeStackBlizandcodeSandbox.Makingitdeadsimpletoshareaworkingapp.Reactcontinuestobeflatteredbythingslikepreact,inferno,nerv,dva,andrax.Cheatsheetsgotorganizedwithdevhints.io.Wefiguredoutthatthecorrectpatternforanappboilerplate/clitoolissomethingveryopinionatedlikeReactCreateAppwiththeabilitytoescapefromitwhenneeded.Mostdevelopersfoundthatthecombinationofareallygoodcodeeditor,eslint,andnowprettiermakewritingcodefaster,easier,pleasurable.CSSFlexboxandGridgainbrowsersupportandthusmoredevelopersarepayingattentiontoboth.Weget,aheadlesschrome,finally.YounolongerneedLessorSasstodoamazingthingswithCSS.CSSrevolutions/revoltsareunderway.JavaScriptobjectexplorertoolshavearrived,JavaScriptArrayExplorerandJavaScriptObjectExplorer.ThisisahandyinterfacepatternforlearningaboutJavaScriptdatatypes(e.g.ObjectsandArrays)andtheirmethods.TheChromewebbrowserdominatesthemarketandpeoplebegintofearthepastmightberepeatingitself.Bravebecomesthemostpleasantandsafestwaytobrowsertheinternet.PhantomJSisnolongermaintained,HeadlessChromeandPuppeteerstepin.Prettiercomesfromleftfieldandbecomesastaplefordevelopment.Awholelotofdevelopersadoptstatictypecheckingformostlysubjectivereasonsorbandwagonemotions.SomeselloutcompletelytoTypescriptandtheMicrosoftwayofdoingthingswhileotherstakeonaslowerapproachwithFlow.Onethingisforsure,mostdevelopersdon'tneedtypes,theyaresimplycomplicatingalreadycomplexproblemsandsolutions.Likemostthings,mostofthistrendissubjectivedogmanot

RecapofFront-endDevin2017

12

objectivevalue.Staticsitegenerators&APICMStoolsakaHeadlessCMS'sarenowonmostdevelopersradar.Webcomponentsstilllurkingandwaitforsignificanttractionbydevelopersthatmightnevercometobe.JavaScriptsettledandCSSeruptandeveryonewillcryfatiguebythistimenextyear.AlotofpeoplestopdoingCSSinCSSandmovetoCSSinJSwhenbuildingapplicationusingcomponenttrees.Yarnseemstohavefilledaneed,becausealotofpeoplejumpthenpmship.However,therealvalueofYarnisthefactthatitbringscompetitiontoNPM.Makingnpmbetter.AnewvideoformatforInteractivecodingscreencasts(recordingofworkinginaliveeditorthatyoucanedittoo)becomesarealthingwithScrimba.Mostpeoplebegintoseethecorrelationbetweencomponentarchitecturesandatomicdesign.AndsoitbeginsthatESmoduleswillbepartofthebrowserandifusedabackupplanwillberequired(i.e.abundlefromsomethinglikewebpack).MVCframeworksareontheouts.DevelopinganddisplayingReactcomponentsoutsideofyourapplicationsismadepopularbytoolslikeBluekit,Storybook,ReactStyleguidist,andbit.Gettingafront-endjobin2017isaboutexperience,whichisdisplayedfrompersonalprojectsandadevelopersGithubaccount.Preloadingresources(CSS,JavaScript,Mediaetc..)fromHTMLdocumentsarrives.Cypressarrivesasacompletetestingsolutionandhopefullytestingwillgetbetterasendtoendtestingbecomesthefocusforappcode.WebAssemblysupportnowshippinginallmajorbrowsersWebpackdominates,andthencompetitorsshowup.React16akafiberisreleased.ReactbeginstorivaljQueryinpopularityincertaincontexts.ReactclearlyisthemostusedtoolforbuildingUI'swithstate.FacebookshedsitsReactBSDlicensefortheMITlicense(sameforJest,Flow,Immutable.js,andGraphQL)GraphQLgothotin2017.Facebookcontinuestotakechargeinthedevelopmentspacewithforthcomingtoolslikeprepack.io.AsexpectedECMA-262edition8isreleased.ReactRouterfinallystabilizes.AllmodernbrowsersprettymuchnowsupportECMAScript2015(akaES6).AsyncJavaScriptfunctionsstartgettingsomeseriousattentionandusage.MostlybecauseallmodernbrowsersnowsupportAsyncfunctions.Mobiledevelopment,stilltoohard.Astrongrebellionadvocatingthewebplatformasa

RecapofFront-endDevin2017

13

solutiontothepaingainedmomentumthisyear.

RecapofFront-endDevin2017

14

In2018expect...NothingwillchangeorslowtheusageorpopularityofReactformanyyearstocome.GraphQLwillreplacealotofRESTAPI'sthisyear.Thewebwillcontinuetobecomemorenative-likewithofflinecapabilitiesandseamlessmobileexperiences.HTML5.3iscoming.Keepaneyeonturbo,ablazingfastNPMclient.ExpecttolearnanduseCSStransforms3d,CSStransitions,CSSflexbox,CSSfilters,CSSgridJavaScriptusagewillcontinuetogrowwithnoslowdowninsight.StillwaitingonWebAssemblytopeak.Thiswilllikelyrequiretooling.Universal/isomorphicJavaScriptsolutionscontinuetoevolvee.g.next.jsandSapper.Webcomponentsstilllurkandwaitforsignificanttractionfromdevelopers.IbelievetheendisinsightforCSSpre-processorsasPostCSS,CSSnext,andCSSinJStakeover.Olderservercentricapplicationpatternsshowupagainbutwithanewspin.ThependulumcouldstarttoswingingawayfromstrickSPAapplications.Peoplewillbegintopullbackonthecomplexityofsinglepageapplicationsandreturntothingslikepjax(AmixofSPAandServer-sideRendering.Seehttps://stimulusjs.org).ProgressiveWebApplicationshopefullywillcatchfire.Iftheydon't,Ifeartheyneverwill.Atleastnotintherecurrentform."Chatbotscreatedonthebasisofartificialintelligenceandneuralnetworkswillcontinuetoevolvehelpingtoincreasecommunicationonline.Iwonderwhatitwillleadto,butthisisunconditionalwebdevelopmenttrends2018".Nods.Vue.jsusagewilllikelyovertakeallAngularusage.AR/AV,AI,andchatbotswillcontinuetoevolveandfindtheresweetspot.JavaScriptSymbolandGeneratorswilllikelygounnoticedbymostfront-enddevelopers.MoredeveloperswilldivorcethemselvesfromplainJavaScriptandtrytomarryanother.But,justlikeinmaritaldivorceonealwaystakesmostofthesameproblemswiththemtothegreenergrassandlittleactuallychanges.Preferencesandvaluesjustgetre-prioritizedandhistorywillrepeatitself.Webpack4willhappen,andbebetter,duetocompetition!ContinuedexplorationfortheidealCSSsolutionforatreeofUIcomponentswillnotcease.Statemanagementgetsaresetandpeoplestarttosimplify.Hopefully,thiswillbetheyearforsolutionslikemobxtoshine.

In2018expect...

15

In2018expect...

16

PartI.TheFront-EndPracticePartonebroadlydescribesthepracticeoffront-endengineering.

PartI:TheFront-EndPractice

17

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

18

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.

NOTES:

Front-EndJobsTitles

19

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

Front-EndJobsTitles

20

WebTechnologiesEmployedbyFront-EndDevelopers

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

Thefollowingcorewebtechnologiesareemployedbyfront-enddevelopers(considerlearningtheminthisorder):

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

Applications(akaARIA)

Foracomprehensivelistofallwebrelatedspecificationshavealookatplatform.html5.org.

Theninetechnologiesjustmentionedaredefinedbelowalongwithalinktotherelevantdocumentationandspecificationforeachtechnology.

HyperTextMarkupLanguage(akaHTML)

CommonWebTechEmployed

21

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

HypertextTransferProtocol(akaHTTP)

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

—Wikipedia

CommonWebTechEmployed

22

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

DocumentObjectModel(akaDOM)

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

—Wikipedia

Mostrelevantspecifications/documentation:

DocumentObjectModel(DOM)Level3EventsSpecificationDOMLivingStandardW3CDOM4

JavaScriptProgrammingLanguage(akaECMAScript262)

CommonWebTechEmployed

23

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

JavaScriptObjectNotation(akaJSON)

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

—Wikipedia

Mostrelevantspecifications:

IntroducingJSON

CommonWebTechEmployed

24

JSONAPITheJSONDataInterchangeFormat

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

25

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

26

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

27

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...

28

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...

29

Front-EndonaTeamAfront-enddeveloperistypicallyonlyoneplayeronateamthatdesignsanddevelopswebsites,webapplications,ornativeapplicationsrunningfromwebtechnologies.

Abarebonesdevelopmentteamforbuildingprofessionalwebsitesorsoftwareforthewebplatformwilltypically,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:

SEOStrategistsDevOpsEngineersCodeQualityEngineersPerformanceEngineersAPIDevelopersDatabaseAdministratorsQAEngineers/Testers

NOTES:

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

Front-EndonaTeam

30

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

31

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

32

Imagesource:https://insights.stackoverflow.com/survey/2017#developer-profile-specific-developer-types

Generalist/Full-StackMyth

33

Front-EndInterviewsQuestionsyoumaygetasked:

10InterviewQuestionsEveryJavaScriptDeveloperShouldKnowFront-EndJobInterviewQuestionsFrontEndWebDevelopmentQuizInterviewQuestionsforFront-End-DeveloperJavaScriptWebQuizTheBestFrontendJavaScriptInterviewQuestions(writtenbyaFrontendEngineer))FrontEndInterviewHandbook

Questionsyouask:

Anopensourcelistofdeveloperquestionstoaskprospectiveemployers

Preparing:

PreparingforaFront-EndWebDevelopmentInterviewin2017InterviewCake[$]Crackingthefront-endinterviewFrontEndInterviewHandbook

Front-Endinterviewquestions

34

Front-EndJobBoardsAplethoraoftechnicaljoblistingoutletsexist.Thenarrowedlistbelowarecurrentlythemostrelevantresourcesforfindingaspecificfront-endposition/career.

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

NOTES:

Lookingforaremotefront-endJob,checkouttheseRemote-friendlycompanies

Front-EndJobBoards

35

Front-EndSalariesThenationalaverageintheU.Sforamid-levelfront-enddeveloperissomewherebetween$75kand100k.

Imagesource:https://www.glassdoor.com/Salaries/front-end-developer-salary-SRCH_KO0,19.htm

Front-EndSalaries

36

Imagesource:https://www.indeed.com/salaries/Front-End-Developer-Salaries

Ofcoursewhenyoufirststartexpecttoenterthefieldataround43kdependinguponlocationandportfolio.

NOTES:

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

Front-EndSalaries

37

HowFront-EndDevelopersAreMade

Imagesource:https://github.com/kamranahmedse/developer-roadmap

Howexactlydoesonebecomeafront-enddeveloper?Well,it'scomplicated.Stilltodayyoucan'tgotocollegeandexpecttograduatewithadegreeinfront-endengineering.And,Irarelyhearoformeetfront-enddeveloperswhosufferedthroughwhatislikelyadeprecated

HowFDsAreMade

38

computersciencedegreeorgraphicdesigndegreetoendupwritingHTML,CSS,andJavaScriptprofessionally.Frommyperspective,mostofthepeopleworkingonthefront-endtodaygenerallyseemtobeselftaughtfromthegrounduporcrossoverintothefront-endfromdesignortraditionalcomputersciencefields.

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(akaSPAs)

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,andMobx).

11. LearnNode.js

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

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

39

organizedcourse.Otherwise,Iamnotawareofanyotherprofessionthatispracticallyfreeforthetakingwithaninternetconnection,ahundreddollarsamonthforscreencastingmemberships,andaburningdesireforknowledge.

Forexampleifyouwanttogetgoingtoday,consumingoneormoreofthefollowingself-directedresourcesbelowcanwork:

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][$]LearnFrontEndWebDevelopment[watch][$]Front-EndDevMastery[watch][$]Front-EndWebDeveloperNanodegree[watch][$]FullStackforFrontEndEngineers[$]

Ifyouarenotaselfmotivatedindividualandneedamorestructuredapproachyoushouldconsideradirectedlearningpath.

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.

HowFDsAreMade

40

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

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

PartII:LearningFront-EndDev

41

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

Thelearningresourcesmentioned(articles,books,videos,screencastsetc..)willincludebothfreeandpaidmaterial.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

42

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

—Wikipedia

Imagesource:https://www.helloitsliam.com/2014/12/20/how-the-internet-works-infographic/

WhatistheInternet?[watch]HowtheWebworks[read]HowdoestheInternetwork?https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_workandhttp://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm[read]HowtheInternetWorks[watch]HowtheInternetWorksin5Minutes[watch]HowtheWebWorks[watch]WhatIstheInternet?Or,"YouSayTomato,ISayTCP/IP"[read]Don’tFeartheInternet

LearnInternet/Web

43

Imagesource:http://www.bitrebels.com/technology/find-out-who-runs-the-internet-chart/

LearnInternet/Web

44

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/browser-market-share

EvolutionofBrowsers&WebTechnologies(i.e.,APIs)

evolutionoftheweb.com[read]Timelineofwebbrowsers[read]

LearnWebBrowsers

45

TheMostCommonlyUsedHeadlessBrowserAre:

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

HowBrowsersWork

20ThingsILearnedAboutBrowsersandtheWeb[read]FastCSS:HowBrowsersLayOutWebPages[read]HowBrowsersWork:Behindthescenesofmodernwebbrowsers[read]QuantumUpClose:Whatisabrowserengine?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

46

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

47

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

AnIntroductiontoDNSTerminology,Components,andConcepts[read]DNSExplained[watch]HowDNSWorks[read]

LearnDNS

48

TheInternet:IPAddressesandDNS[watch]Whatisadomainname?[read]

LearnDNS

49

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

HTTPDocs

MDNHTTP[read]

HTTPVideos/Articles/Tutorials

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

LearnHTTP/Networks

50

HTTPSuccinctly[read]

HTTPStatusCodes

HTTPStatusCodesHTTPStatusCodesin60Seconds[watch]

CORSSpecifications

Cross-OriginResourceSharing

CORS

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

WebSockets

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

LearnHTTP/Networks

51

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

—Wikipedia

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

GeneralLearning:

WebHostingServicesExplained[read]WebHosting101:GetYourWebsiteLiveontheWebinNoTime[video]

LearnWebHosting

52

LearnWebHosting

53

Imagesource:https://firstsiteguide.com/wp-content/uploads/2016/06/what-is-web-hosting-infographic.jpg

LearnWebHosting

54

LearnGeneralFront-EndDevelopmentGeneralLearning:

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-EndDevWeeklyFrontEndHappyHourfrontendfront.comFrontEndFocusFrontEndNewsletterMobileWebWeeklyOpenWebPlatformDailyDigestPonyFooWeeklyshoptalkshow.comTheWebAheadTheWebPlatformPodcastwebtoolsweekly.com

LearnGeneralFront-EndDev

55

LearnGeneralFront-EndDev

56

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

57

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

LearnUI/InteractionDesign

58

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]MDN:HTML[read]MDN:CSS[read]SemanticHTML:HowtoStructureWebPages[watch]

LearnHTML&CSS

59

SolidHTMLFormStructure[watch]UnderstandingtheCSSBoxModel[watch]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/Vocabulary:

CSSGlossary-ProgrammingReferenceforCSSCoveringComments,Properties,andSelectorsCSSVocabularyHTMLGlossaryProgrammingReferenceforHTMLelements

Standards/Specifications:

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

LearnHTML&CSS

60

SelectorsLevel3

ArchitectingCSS:

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

NOTES:

WritingCSSinJSwashotthisyear.Makesureyouareawareoftheusecase.Andwhysomethinkitisoverused.

LearnHTML&CSS

61

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

—Wikipedia

how-does-seo-work.png

Imagesource:https://visual.ly/community/infographic/computers/how-does-seo-work

GeneralLearning:

GoogleSearchEngineOptimizationStarterGuide[read]

LearnSEO

62

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

LearnSEO

63

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:

TenThingsASeriousJavaScriptDeveloperShouldLearncodecademy.comJavaScript[interact]MDN:JavaScript[read]javascript.infoJavaScriptEnlightenment[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]ModernJavaScriptCheatsheet-CheatsheetfortheJavaScriptknowledgeyouwillfrequentlyencounterinmodernprojects.[read]

Mastering:

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

LearnJavaScript

64

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

FunctionalJavaScript:

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

References/Docs:

MDNJavaScriptReferenceMSDNJavaScripReference

Glossary/Encyclopedia/Jargon:

TheJavaScriptEncyclopediaJavaScriptGlossarySimplifiedJavaScriptJargon

Standards/Specifications:

HowtoReadtheECMAScriptSpecificationECMAScript®2015LanguageSpecificationECMAScript®2016LanguageSpecificationECMAScript®2017LanguageSpecificationECMAScript®2018LanguageSpecificationStatus,Process,andDocumentsforECMA262

LearnJavaScript

65

Style:

AirbnbJavaScriptStyleGuideJavaScriptStandardStyleJavaScriptSemi-StandardStyle

JavaScriptNewsletters,News,&Podcasts:

EchoJSECMAScriptDailyES.nextNewsJavaScriptAirJavaScriptJabberJavaScriptKicksJavaScriptLiveJavaScriptWeeklyJavaScript.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][$]

JSExplorers:

JavaScriptArrayExplorerJavaScriptObjectExplorer

LearnJavaScript

66

LearnWebAnimationGeneralLearning:

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

Standards/Specifications:

WebAnimations

LearnWebAnimation

67

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]WhatistheDOM?[read]

Mastering:

AdvancEDDOMScripting:DynamicWebDesignTechniques[read][$]

LearnDOM,BOM&jQuery

68

AdvancedJSFundamentalstojQuery&PureDOMScripting[watch][$]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

69

LearnWebFonts,Icons,&ImagesWebtypographyreferstotheuseoffontsontheWorldWideWeb.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

Fonts:

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

Icons:

[read][watch]

Images:

MDN:ImagesinHTMLb[read]MDN:Responsiveimages[read]SVGONTHEWEB-APracticalGuide[read]

LearnWebFonts,Icons,&Images

70

LearnWebFonts,Icons,&Images

71

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:

9tipstogetbareminimumofwebaccessibilityFoundationsofUX:Accessibility[watch][$]HowHTMLelementsaresupportedbyscreenreaders[read]IntroductiontoWebAccessibility-GoogleOpenOnlineEducation[watch]IntroductiontoWebAccessibility-WAI[read]UniversalDesignforWebApplications:WebApplicationsThatReachEveryone[read][$]WebAccessibility:GettingStarted[watch][$]AWebforEveryone[read][$]WebAccessibility[watch][$]A11ycasts[watch]AccessibilitybyGoogle-Udacitycourse[watch]

Standards/Specifications:

LearnAccessibility

72

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

LearnAccessibility

73

LearnWeb/BrowserAPIs

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

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

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

MDNhasagreatdealofinformationaboutweb/browserAPIs.

LearnWeb/BrowserAPIs

74

MDNWebAPIReferenceMDNWebAPIsInterfaceReference-AllInterfaces,ArrangedAlphabeticallyMDNWebAPI-ListsDeviceAccessAPIsandOtherAPIsUsefulforApplications

KeepinmindthatnoteveryAPIisspecifiedbytheW3CorWHATWG.

InadditiontoMDN,youmightfindthefollowingresourceshelpfulforlearningaboutalltheweb/browserAPI's:

TheHTML5JavaScriptAPIIndexHTML5Overviewplatform.html5.org

LearnWeb/BrowserAPIs

75

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)DataInterchangeFormatSTD90-RFC8259-TheJavaScriptObjectNotation(JSON)DataInterchangeFormat,DECEMBER2017

Architecting:

JSONAPI

NOTES:

LearnJSON

76

JSONapisarebeingreplacedbythingslikeGraphQLandFalcor.

LearnJSON

77

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

78

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

GeneralLearning:

JAMstack[read]StaticSiteGenerators[read]WorkingwithStaticSites-BringingthePowerofSimplicitytoModernSites[read][$]

LearnStaticSiteGenerators

79

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

LearnComputerScienceviaJS

80

LearnFront-EndApplicationArchitectureGeneralLearning:

JavaScriptApplicationDesign[read][$]ProgrammingJavaScriptApplications[read]GrabFrontEndGuide[read]AsetofbestpracticesforJavaScriptprojectsSpellbookofModernWebDevJavaScriptStackfromScratch

DeprecatedLearningMaterials:

BuildanAppwithReactandAmpersand[watch]BuildingModernSingle-PageWebApplications[watch][$]EloquentJavaScript:Modules[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:

In2018learnReactandMobx.

1

1

LearnFront-EndAppArchitecture

81

LearnFront-EndAppArchitecture

82

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

LearnDataAPI(i.e.JSON/REST)Design

83

LearnReactLearningReact:

TheBeginner'sGuidetoReactJS[read]React.jsIntroductionForPeopleWhoKnowJustEnoughjQueryToGetBy[read]13thingsyouneedtoknowaboutReact[read]Tutorial:IntroToReact[read]ReactJSForStupidPeople[read]CompleteIntrotoReact,v3(feat.Redux,Router&Flow)[watch][$]React [read]ReactEnlightenment[read]REACTJSTUTORIAL#1-ReactjsJavascriptIntroduction&WorkspaceSetup[watch]

MasteringReact:

BuildYourFirstProductionQualityReactApp[watch][$]AdvancedReactComponentPatterns[watch][$]ReactPatterns[read]8KeyReactComponentDecisions[read]React+Mobxcodebasecontainingrealworldexamples(CRUD,auth,advancedpatterns,etc)thatadherestotheRealWorldspecandAPI.[code]AnIntroductiontoReactRouterv4anditsPhilosophyTowardRouting[read]

NOTES:

OnceyouhaveagoodhandleonReactmoveontolearningamorerobuststatemanagementsolutionlikeMobX.IfyouareanexperienceddeveloperwithFunctionalProgrammingknowledgelookatRedux.IfyouneedhelpunderstandingtheroleofstatemanagementbeyondReact'ssetStatewatch,"AdvancedStateManagementinReact(feat.ReduxandMobX)".

NotebelowthetrendsintheReactEcosystem(fromnpmregistry)asyoumovepastReactandlearntoolsthatworkalongsideReact.

LearnReact

84

LearnReact

85

LearnStateManagementStatemanagementinJavaScript[read]AdvancedStateManagementinReact(feat.ReduxandMobX)[watch][$]Reactjstutorial-HowReduxWorks[watch]MobX+ReactisAWESOME[watch]

LearnStateManagement

86

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

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

LearnProgressiveWebApp

87

ProgressiveWebApplicationsandOffline[watch][$]

LearnProgressiveWebApp

88

LearnJSAPIDesignDesigningBetterJavaScriptAPIs[read]WritingJavaScriptAPIs[read]

LearnJSAPIDesign

89

LearnWebDeveloperToolsWebdevelopmenttoolsallowwebdeveloperstotestanddebugtheircode.TheyaredifferentfromwebsitebuildersandIDEsinthattheydonotassistinthedirectcreationofawebpage,rathertheyaretoolsusedfortestingtheuserfacinginterfaceofawebsiteorwebapplication.

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

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

—Wikipedia

Whilemostbrowserscomeequippedwithwebdevelopertools,theChromedevelopertoolsarecurrentlythemosttalkedaboutandwidelyused.

I'dsuggestlearningandusingtheChromewebdevelopertools,simplybecausethebestresourcesforlearningwebdevelopertoolsrevolvesaroundChromeDevTools.

LearnChromeWebDeveloperTools:

ChromeDeveloperTools[watch][$]ExploreandMasterChromeDevTools[watch]MasteringChromeDeveloperTools[watch][$]UsingTheChromeDeveloperTools[watch][$]LearningChromeWebDeveloperTools[watch][$]

ChromeWebDeveloperToolsDocs:

CommandLineAPIReferenceKeyboard&UIShortcutsReferencePer-PanelDocumentationConfigureandCustomizeDevTools

News/Newsletters/Podcasts/Tips:

DevTips

LearnWebDevTools

90

LearnWebDevTools

91

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][$]IntroductiontoBash,VIM&Regex[watch][$]

LearnCommandLine

92

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]REST&GraphQLAPIDesigninNode.js,v2(usingExpress&MongoDB)[watch][$]LearnNode[watch][$]

LearnNode.js

93

LearnModulesGeneralLearning:

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

References/Docs:

MDN-exportMDN-import

NOTES:

Wearestillwaitingonwidesupportinbrowsersforloadingmodules.Untilthenyoucanhavealookat,"ESModuleLoaderPolyfill","JavaScriptLoaderStandard",andECMAScriptmodulesinbrowsers.

LearnJSModules

94

LearnModuleloaders/bundlersWebpack:

Webpack[read]WebpackDeepDive[watch][$]WebpackFundamentals[watch][$]Survivejs.comWebpackBook[read]

Rollup:

Rollup[read]Microbundle

Parcel

Parcel[read]

NOTES:

ItisnotuncommonfordeveloperstouseatoollikeGulpforbundlingJSmodules.However,manyoftheGulppluginssimplyuseWebpackorRollupunderthehood.

LearnJSModuleloaders/bundlers

95

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

—Wikipedia

GeneralLearning:

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

LearnPackageManagers

96

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

ThemostcommonsolutionusedforversioncontroltodayisGit.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/docgit-cheatsheet

LearnVersionControl

97

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

98

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][$]WebsitePerformance[watch][$]WebsitePerformanceOptimization[watch]Front-EndPerformanceChecklist2018[PDF,ApplePages][read]

LearnSitePerformanceOptimization

99

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][$]TestingandModularFront-End[watch][$]TestingJavaScriptApplications(feat.ReactandRedux)[watch][$]LearnJavascriptUnitTestingWithMocha,ChaiandSinon[watch][$]

LearnTesting

100

LearnTesting

101

LearnHeadlessBrowsersAheadlessbrowserisawebbrowserwithoutagraphicaluserinterface.

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

—Wikipedia

GettingStartedwithHeadlessChrome[readme]

NOTES:

PhantomJSisnolongermaintained,HeadlessChromestepsin.

LearnHeadlessBrowsers

102

LearnOfflineDevelopmentOfflinedevelopment(akaofflinefirst)isanareaofknowledgeanddiscussionarounddevelopmentpracticesfordevicesthatarenotalwaysconnectedtotheInternetorapowersource.

GeneralLearning:

CreatingHTML5OfflineWebApplications[read]EverythingYouNeedtoKnowtoCreateOffline-FirstWebApps[read]OfflineFirst[read]offlinefirst.org[read]TheOfflineCookbook[read]OfflineQuickstart[read]

LearnOfflineDev

103

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

104

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)

105

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)

106

DirectedLearningThissectionfocusesondirectedlearningviaschools,courses,programsandbootcamps.

DirectedLearning

107

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

However,ifyoucan'taffordadirectededucation(canbeveryexpensive),aselfdirectededucationusingscreencasts,books,andarticlesisaviablealternativetolearnfront-enddevelopmentfortheself-drivenindividual.

company course price onsite remote duration

Betamore Front-endWebDevelopment 3,000 Baltimore,

MD10weeks

BLOCBecomeaFrontendDeveloper

4,999 yes

16weeks@25hr/wkor32weeks@10hr/wk

GeneralAssembly

FrontendWebDevelopment 3,500 multiple

locations

3hrs/day2days/wkfor8weeks

HackerYouFront-endWebDevelopmentImmersive

7,000-7,910

Toronto,Canada 9weeks

TheNewYorkCode+DesignAcademy

FrontEnd101 2,000 NewYork,NY

8weekspart-time

Thinkful FrontendWebDevelopment

300permonth yes

15hrs/wkfor3months

TuringSchoolofSoftware&Design

Front-EndEngineering 20,000 Denver,

CO

7monthsfulltime

UdacityFront-EndWebDeveloperNanodegree

200monthly

multiplelocations yes

6months12hrs/wk

Front-EndSchools,Courses,&Bootcamps

108

NOTES:

Foracompletelistofcourses/bootcampslookatswitchup.orgorcoursereport.com.

Front-EndSchools,Courses,&Bootcamps

109

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

Front-EndDevstoLearnFrom

110

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

TheBigWebShowDevTipsFrontEndHappyHourFront-EndFrontFrontEndFocusTheFrontsidePodcastMobileWebWeeklyNonBreakingSpaceShowWebPlatformNewsWeeklyShopTalkShowUXDesignNewsletterTheVersioningShowbySitePointTheWebAheadWebDevelopmentReadingListTheWebPlatformPodcastWebToolsWeeklyFreshBrewedFrontendPonyFooWeekly

HTML/CSSNewsletters:

AccessibilityWeeklyCSSWeeklyCSS-Trickscsslayout.news

JavaScriptNewsletters,News,&Podcasts:

AwesomeJavaScriptNewsletterEchoJSECMAScriptDailyES.nextNewsJavaScriptJabberJavaScriptKicks

Newsletters,News,&Podcasts

111

JavaScriptLiveJavaScriptWeeklyJavaScript.comJSterReactStatus

GraphicandAnimationNewslettersandPodcasts

MotionandMeaningResponsiveImagesCommunityGroupNewsletterSVGImmersionPodcastWebAnimationWeekly

NOTES:

NeedmoreNewsletters,NewsSites,&PodcastslookatAwesomeNewsletter.

Newsletters,News,&Podcasts

112

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

113

Doc/APIBrowsingToolsToolstobrowsercommondeveloperdocumentsanddeveloperAPIreferences.

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

Cheatsheets:

devhints.io

Doc/APIBrowsingTools

114

SEOToolsKeywordToolGoogleWebmastersSearchConsoleVarvySEOtool

ToolsforFindingSEOTools:

SEOTools-TheCompleteList

SEOTools

115

Prototyping&WireframingToolsCreating:

Axure[$]BalsamiqMockups[$]Justinmind[$]Moqups[$]proto.io[$]UXPin[freeto$]

Collaboration/Presenting:

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

Prototyping&WireframingTools

116

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

DiagrammingTools

117

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

HTTP/NetworkTools

118

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:

AtomSublimeText[$]WebStorm[$]VisualStudioCode

OnlineCodeEditors:

PaizaCloud[freeto$]AWSCloud9[$]Codeanywhere[freeto$]

1

CodeEditingTools

119

Shareable&RunnableCodeEditors:

Usedtosharelimitedamountsofimmediatelyrunnablecode.Notatruecodeeditorbutatoolthatcanbeusedtosharesmallamountsofimmediatelyrunnablecodeinawebbrowser.

CodePen[freeto$]jsbin.com[freeto$]jsfiddle.netStackBlizcodeSandbox

ADVICE:

IrecommendingusingVisualStudioCodebecauseofthequalityofthetoolandthecontinuousimprovementsmadetotheeditorthatlikelywon'tstoporslowduetothefactthatMicrosoftisbehindthetool.Itiswidelyused:

Imagesource:https://stateofjs.com/2017/other-tools/

1

CodeEditingTools

120

BrowserToolsJSUtilitiestofixBrowsers:

History.jshtml2canvasPlatform.jsURI.js

GeneralReferenceToolstoDetermineIfXBrowserSupportsX:

Browsersupportforbroken/missingimagesBrowserscopecaniuse.comFirefoxPlatformStatus-Implementation&standardizationroadmapforwebplatformfeaturesHTML5PleaseHTML5Testiwanttouse.comPlatformStatusweb-platform-testsdashboardwhatwebcando.today

BrowserDevelopment/DebugTools:

ChromeDeveloperTools(akaDevTools)Per-PanelDocumentationCommandLineAPIReferenceKeyboard&UIShortcutsReferenceSettings

FirefoxDeveloperToolsIEDevelopertools(akaF12tools)SafariWebInspectorVorlon.js

JavaScriptUtilitiestoDetermineIfXBrowserSupportsX:

Feature.jsModernizr

BroadBrowserPolyfills/Shims:

BrowserTools

121

console-polyfillHTML5CrossBrowserPolyfillsfetchsocket.ioSockJSwebcomponents.jswebshim

HostedTesting/AutomationforBrowsers:

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

HeadlessBrowsers:

PhantomJSPhantomCSS

slimerjsZombie.jsHeadlessChromium

BrowserAutomation:

Usedforfunctionaltestingandmonkeytesting.

CasperJSNightmareTestCafe

BrowserHacks:

browserhacks.com

BrowserSyncingTools:

Browsersync

BrowserList:

Sharetargetbrowsersbetweendifferentfront-endtools,likeAutoprefixer,Stylelintandbabel-preset-env.

BrowserTools

122

Browserslisthttp://browserl.ist/

BrowserTools

123

HTMLToolsHTMLTemplates/Boilerplates/StarterKits:

dCodesEmail-BoilerplateHTML5BoilerplateHTML5BonesMobileboilerplate

HTMLPolyfill:

html5shiv

Transpiling:

PugMarkdown

References:

ElementattributesElementsHTMLArrowsHTMLEntityLookuphtmlreference.ioHEAD-Afreeguidetoelements

Linting/Hinting:

HTMLHinthtml-inspector

Optimizer:

HTMLMinifier

OnlineCreation/Generation/ExperimentationTools:

tablesgenerator.com

AuthoringConventions:

HTMLCodeGuide

HTMLTools

124

PrinciplesofWritingConsistent,IdiomaticHTML

Workflow:

Emmet

HTMLOutliner:

HTML5Outliner

TrendingHTMLRepositoriesonGitHubThisMonth:

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

HTMLTools

125

CSSToolsCSSUtilities:

BasscssSkeletonShedTailwindCSSTachyons

CSSFrameworks(utilities+UI):

BaseBulmaBootstrap4ConciseFoundationMaterialDesignLite(MDL)MetroUIMini.cssMobi.cssPicnicPure.cssSemanticUIShoelaceSpectre.css

MobileOnlyCSSFrameworks:

Ratchet

CSSReset:

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

—cssreset.com

EricMeyer's“ResetCSS”2.0Normalizesanitize.css

CSSTools

126

Transpiling:

pleeease.ioPostCSS&cssnextrework&myth

References:

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

Linting/Hinting:

CSSLintstylelint

CodeFormatter/Beautifier:

CSScombCSSfmt

Optimizer:

clear-csscssnanoCSSOpurgecss

OnlineCreation/Generation/ExperimentationTools:

CSSArrowPleaseCSSMaticEnjoyCSSFlexboxPlayground

CSSTools

127

flexplorerpatternify.compatternizer.comUltimateCSSGradientGenerator

ArchitectingCSS:

AtomicDesign[read]BEMITCSSOOCSS[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]

StyleGuideResources:

Frontify[$]SC5STYLEGUIDEGENERATORstyleguide-generatorsCatalog

TrendingCSSRepositoriesonGitHubThisMonth:

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

CSSTools

128

DOMToolsDOMLibraries/Frameworks:

BlissjQuery

YouDon'tNeedjQueryZeptocashUmbrellaJS

DOMUtilities:

KeypressTetherclipboard.js

DOMEventTools:

KeyboardEventViewer

DOMPerformanceTools:

ChromeDevToolsTimelineDOMMonster

References:

EventsDOMBrowserSupportDOMEventsBrowserSupportHTMLInterfacesBrowserSupportMDNDocumentObjectModel(DOM)MDNBrowserObjectModelMDNDocumentObjectModelMDNEventreferenceMSDNDocumentObjectModel(DOM)

DOMPolyfills/Shims:

dom-shimsPointerEventsPolyfill:aunifiedeventsystemforthewebplatform

DOMTools

129

VirtualDOM:

jsdomvirtual-dom

DOMTools

130

JavaScriptToolsJSUtilities:

accounting.jsasyncaxioschancedate-fnsformat.jsimmutableis.jslodash

You-Dont-Need-Lodash-UnderscoreLuxonMath.jsMoment.jsNumeral.jsRamdaRxJSstring.jsvocawaitxregexp.com

Transpiling/TypeChecking(EStoES):

BabelTypeScriptFlow

Code-analysisEngine:

Tern

Linting/Hinting&StyleLinter:

eslint

UnitTesting:

JavaScriptTools

131

AVAJasmineMochaTape

TestingAssertionsforUnitTesting:

Chaiexpect.jsshould.js

TestSpies,Stubs,andMocksforUnitTesting:

sinon.jsKakapo.js

CodeFormater/Beautifier:

esformatterjs-beautifyjsfmtprettier

PerformanceTesting:

benchmark.jsjsperf.com

Visualization,StaticAnalysis,Complexity,CoverageTools:

Coveralls[$]Esprimaistanbul

Optimizer:

ClosureCompilerUglifyJS2optimize-jsPrepack

Obfuscate:

JavascriptObfuscator[freeto$]JScrambler[$]

JavaScriptTools

132

Sharable/RunnableCodeEditors:

jsbin.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

133

StaticSiteGeneratorsToolsSiteGeneratorListings:

staticgen.comstaticsitegenerators.netMetalsmith

ADVICE:

BeforeusingastaticsitegeneratorframeworkconsiderusingGulpornpmscriptstoorchestrateacustomsolutionoruseatoolthatmakesuseofGulpforstaticsitegeneration.e.g.Blendid

1

1

StaticSiteGeneratorsTools

134

AccessibilityTools

GuidesA11YStyleGuideAccessibilityGuidelinesChecklistInteractiveWCAG2.018FAccessibilityGuide

SiteScannersaXeBrowserExtensionChromeAccessibilityDeveloperToolsTenonAccessibilityToolWAVEAccessibilityTool

ColorContrastTestersColorableColorableMatrixColorSafeColorRatio

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

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

AccessibilityDevTools

135

ChromeVox(Chromeextension)Basicscreenreadercommands

ReadabilityTestersExpressoAppHemingwayAppGrammarlyReadabilityScoreMSOffice

ArticlesGettingStartedwithARIAReframingAccessibilityfortheWebAnAlphabetofAccessibilityIssuesPracticalARIAExamplesMDNAccessibilityGuideEnableaccessibilitypanelinChromedevtools

AccessibilityDevTools

136

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[$]cocoon.io[freeto$]ionichub[freeto$]kony[$]Monaca[$]

NativeDesktopWebView(i.e.,BrowserEngineDriven)AppFrameworks:

ElectronNW.js

NativeMobileAppFrameworks(AkaJavaScriptNativeApps)

1

AppFrameworks(Desktop,Mobileetc.)Tools

137

ThesesolutionsuseaJSengineatruntimetointerpretJSandbridgethattonativeAPIs.NobrowserengineorWebViewisused.TheUIisconstructedfromnativeUIcomponents.

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

References&demoapps:

todomvc.comRealWorldexampleapps[code]FrontendGuidelinesQuestionnaireFrontendGuidelines

Performance:

js-framework-benchmarkFront-EndPerformanceChecklist2018

ADVICE:

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

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

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

1

AppFrameworks(Desktop,Mobileetc.)Tools

138

StateToolsReduxMobxmobx-state-treeCerebralfreactalunistore

StateManagementTools

139

ProgressiveWebAppTools:lighthouseProgressiveWebAppChecklist

ProgressiveWebAppTools

140

GUIDevelopment/BuildToolsCodeKitPrepros

GUIDevelopment/BuildTools

141

Templating/DataBindingToolsJustTemplating:

doT.jsart-templateNunjuncks

TemplatingandReactiveDataBinding:

ractive.jsreact.js

preactinfernonervrax

riotRivets.jsvue.js

TemplatingtoVirtualDOM:

JSX

Templating/DataBindingTools

142

UIWidget&ComponentToolkitsOnWebPlatform:

KendoUIforjQuery[freeto$]MaterializeOfficeUIFabricSemanticUIUiKitWebix[$]

ReactSpecific,OnWebPlatform:

AntDesignMaterialuiSemantic-UI-ReactExtReact[$]Fabric

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

PhotonReactUIComponentsforOSXElCapitanandWindows10

ADVICE:

IfyouneedabasicsetofUIWidgets/ComponentsstartwithSemanticUI.Ifyouarebuildingsomethingthatneedsagrid,spreadsheet,orpivotgridyou'llhavetolookatKendoUIorWebix.KeepinmindthatmostofthesesolutionsstillrequirejQuery.

1

1

UIWidget&ComponentToolkits

143

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

144

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

145

AnimationToolsCSSandJavaScriptUtilities:

AnimatePlusAnimateAnime.jsAnimista.netDynamics.jsGreenSock-JSKute.jsMagicMicron.jsMotionTweenJSPopmotionVelocity.js

Polyfills/Shims:

web-animations-js

AnimationReferences:

canianimate.com

AnimationTools

146

JSONToolsOnlineEditors:

JSONmateJSONEditorOnline

Formatter&Validator:

jsonformatter.orgJSONFormatter&Validator

QueryTools:

DefiantJSJSONMaskObjectPath

GeneratingMockJSONTools:

JSONGeneratorMockaroo[freeto$]

OnlineJSONMockingAPITools:

FillText.comFakeJSON[freeto$]JamAPIJSONPlaceholderjsonbin.iojsonbin.orgmockable.iomockapi.ioMockyRANDOMUSERGENERATOR

ListofpublicJSONAPI's:

AcollectivelistofJSONAPIsforuseinwebdevelopment

LocalJSONMockingAPITools:

json-server

JSONTools

147

JSONSpecifications/Schemas:

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

JSONTools

148

PlaceholderContentTools

Images:placehold.itSatyrPlaceimgLoremPixelCSS-TricksImageResourcesLibreStockUnsplashPlaceBeyoncé

DeviceMockups:placeit.netmockuphone.com

Text:MeettheIpsumscatipsum.combaconipsum.com(API)

UserData:uinames.comrandomuser.me

PlaceholderImages/TextTools

149

TestingToolsSoftwareTestingFrameworks:

InternJest

majesticEnzymeCheerio

UnitTesting:

AVAJasmineMochaTape

TestingAssertionsforUnitTesting:

Chaiexpect.jsshould.js

TestSpies,Stubs,andMocksforUnitTesting:

sinon.jsKakapo.js

HostedTesting/AutomationforBrowsers:

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

Integration/FunctionalTesting:

Cypresscypress-react-unit-testNightwatchWebDriver.io

TestingTools

150

BrowserAutomation:

CasperJSNightmareTestCafe

UITestingTools:

gremlins.jsPercyBackstopJSPhantomCSSGhostInspectordiff.io

Automateddeadlinkanderrordetectors:

MonkeyTestIt

NOTES:

Testingframeworkstypicallyoffermoretoolsthanjustunittesting.IfyouarelookingforJavaScriptunittestingsolutionslookatJavaScriptTools.

NicerecapoftestingJavaScriptin2017.

TestingTools

151

Front-EndDataStorageTools(i.e.Datastoragesolutionintheclient)

AlaSQLDexie.jsLocalForageLokiJSLovefieldlowdbPouchdbNeDBRxDB

Front-endDataStorageTools

152

ModuleLoading/BundlingToolsParcelRollup

Microbundlewebpack

http://www.webpackbin.com/FuseboxBrowserify

Notes:

Generally,whenshouldIuseParcel,WebpackorRollup?

Parcel — Smalltomediumsizedprojects(<15klinesofcode)

Webpack — Largetoenterprisesizedprojects.

Rollup — ForNPMpackages.

Module/PackageLoadingTools

153

Module/PackageRepositoryToolsNPMyarnPNPM

NOTES:

Keepaneyeonturbo.

Module/PackageRepo.Tools

154

HostingToolsGeneral

AWS[$]DigitalOcean[$]WebFaction[$]

Static

FirebaseHostingnetlify[freeto$]

BitballoonSurge[freeto$]Forge[$]

LocalHostingTools:

Localname

HostingTools

155

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

ProjectManagement&CodeHosting

156

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

Code/GitHubCollaboration&Communication:

Gitter[freeto$]

Collaboration&CommunicationTools

157

ContentManagementHosted/APIToolsHeadlessCMSTools:

Contentful[$]prismic.io[freeto$]Headless

Self-hostedHeadlessCMSTools:

Cockpit

HostedCMS:

LightCMS[$]SurrealCMS[$]

StaticCMSTools:

webhook.comDatoCMSsiteleafforestry.io

CMSHosted/APITools

158

Back-end/APItoolsData/back-endasaserviceakaBAAS:

Back&[freeto$]BackendlessFirebase[freeto$]Pusher[freeto$]restdb.io[freeto$]MongoDBStitch

Data/back-end

GraphQLApolloRelay

FalcorRxDB

UserManagementasaService:

Auth0[$]AuthRocketOkta

Search

Algolia

BAAS(forFront-EndDevs)Tools

159

OfflineToolsHoodieOffline.jsPouchDBupup

NOTES:

Formoretoolslookhere.

OfflineTools

160

SecurityToolsCodingTool:

DOMPurifyXSS

SecurityScanners/Evaluators/Testers:

NetsparkerWebsecurifyOWASPZAP

References:

HTML5SecurityCheatsheet

SecurityTools

161

Tasking(akaBuild)ToolsTasking/BuildTools:

Gulp

OpinionatedTasking/Buildpipelinetools:

Brunch

ADVICE:

BeforereachingforGulpmakesurenpmscriptsoryarnscriptwon'tfitthebill.Read,"WhyILeftGulpandGruntfornpmScripts".

1

1

Tasking(akaBuild)Tools

162

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

DeploymentTools

163

Site/AppMonitoringToolsUptimeMonitoring:

Monitority[free]UptimeRobot[freeto$]

GeneralMonitoringTools:

Pingdom[freeto$]NewRelicUptrends[$]

Site/AppMonitoringTools

164

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

JSErrorMonitoringTools

165

PerformanceToolsReporting:

bundlephobia.comGTmetrixsitespeed.ioSpeedCurve[$]WebPageTestSonarwhalDatadog[$]

JSTools:

imageminImageOptim-CLI

Budgeting:

performancebudget.io

References/Docs:

JankFreePerformanceofES6featuresrelativetotheES5

Checklist:

TheFront-EndChecklistFront-EndPerformanceChecklist2018

PerformanceTools

166

ToolsforFindingToolsbuiltwithfrontendtools.comjavascripting.comjs.coachJStermicrojs.comnpmsstackshare.ioUnheapbestof.js.org

ToolsforFindingTools

167

SponsoredbyFrontendMasters

168