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