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